عناصر کاذب در CSS

January 29, 2006 at 09:20 pm

در میان عناصر تعریف شده در CSS مجموعه ی انگشت شماری از عناصر قرار داد که به عناصر کاذب یا Pseudo Elements معرف اند ( گاهی اوقات آن ها را کلاس های کاذب هم می نامند) با اینکه کاربرد های متنوع و جالبی دارند اما کمتر کسی را دیده ام که از آن استفاده کند. شاید دلیل آن این باشد که هنوز اینترنت اکسپلورر آن ها را به طور کامل پشتیبانی نمی کند، اما برای کسانی که زیاد به IE علاقه ای ندارند ایده مناسبی است.

معروفترین آن ها دو عنصر before و after است. اما قبل از توضیح این دو لازم است عنصر content را نیز بشناسید. این عنصر در CSS2 تعریف شده و به طور خودکار محتویات را قبل یا بعد از یک انتخابگر CSS پیوست می کند. به عبارت دیگر نوع مولفه را تعیین و متعاقبا چگونگی نمایش آن را بیان می کند و همیشه با before و after بکار می رود.

اما خود before و after برای کنترل مقدار عنصر content به کار می رود. به طوری که after مقدار را بعد از مولفه قرار می دهد و before مقدار را قبل از آن. معروفترین مقادیری که عنصر content می تواند اختیار کند به شرح زیر است:

String : همانطور که از نامش پیداست یک رشته را اختیار می کند که می تواند یک علامت خاص یا یک واژه باشد. نمونه زیر را ببینید، عنصر نامبرده علامت ~ را اختیار کرده است. به طوری که این علامت قبل از مولفه li قرار می گیرد:

li:before {
content: "~";
}

Url : پرکاربرد ترین مقدار برای عنصر content است و به محتوای که بر روی وب موجود است اشاره می کند. اغلب اوقات این محتوا یک فرمت تصویری یا صوتی است که بسته به پشتیبانی مرورگر می تواند فرمت های دیگری هم داشته باشد. در نمونه زیر تصویر آدرس داده شده بعد از مولفه li قرار می گیرد:

li:after {
content: url("link_sign.gif");
}

سایر مقادیری که عنصر content می تواند اختیار کند در زیر نام برده شده است. سعی می شود این مقادیر به تفصیل در پست های آتی بررسی شود. چنانچه نیاز فوری به آن ها دارید ایمیل بزنید. فعلا حال و حوصله ی تایپ کردن بیشتر از این نیست.

open-quote and close-quote
no-open-quote and no-close-quote
attr(X) and counter()

دسته: سی اس اس, طراحی وب | نویسنده: مرتضی الوانی
  1. 6 نظر برای این مطلب ارسال شده است. نظر خود را ارسال کنيد »

  1. 1

    مانی منجمی


    می دونی اقا مرتضی، این مشکل پشتیبانی نکردن IE خیلی بده، آدم رو کلافه می کنه … من اوایل نمی دونستم اینا تو IE کار نمی کنن ! فکر می کردم غیر استانداردند!
    المان های جالبی هستند. جای یه مقاله فارسی در موردشون کاملا خالی بود!

    January 29, 2006 at 10:20 pm

  2. 2

    گناهکار


    خيلي خوشم مياد ازشون اما تو IE كار نمي‌كردن منم ازشون استفاده نكردم!

    January 29, 2006 at 11:43 pm

  3. 3

    Ali_ix


    با انواع Selectorهای حرفه ای و اینجور عناصر چه کارها که نمیشه کرد !
    منتها به همون دلیلی که بالا ذکر شد کد نویسی رو چند برابر میکنه ;)
    موفق باشی

    January 30, 2006 at 12:19 am

  4. 4

    افشین


    به این مطلب در صفحه “همه چیز درباره CSS” لینک داده شد.

    January 30, 2006 at 11:27 am

  5. 5

    Alvanweb » گول زدن اسپایدرها با CSS


    […] هشدار: این عمل صرفا یک تکنیک به شمار می ره و به هیچ وجه استفاده از اون در صفحات وب توصیه نمی شه. در پست عناصر کاذب در CSS گفتیم استفاده از این عناصر فراگیر نشده چون مرورگرها به طور کامل هنوز این المان ها رو پشتیبانی نمی کنند. در این پست مثالی رو بررسی می کنیم که به اهمیت این المان ها و کاربرد های متعدد آن ها پی ببرید و به پشتیبانی نکردن IE از این المان ها بیشتر افسوس بخورید. […]

    February 1, 2006 at 8:44 am

  6. 6

    نبی


    من نمیفهمم یعنی اینقدر سخته که مایکروسافت استاندارد ها رو توی مرورگرهای جدیدش رعایت بکنه؟!!!

    October 21, 2006 at 1:44 am