کلمات اختصاصی در CSS و استفاده از Conditional CSS

از آنجا که ممکن است خیلی ها با css کار نکرده باشند و یا اگر کار کرده باشند، ممکن است از کلمات اختصاصی بی اطلاع باشند. لذا پرکاربردترین کلمات اختصاصی و نیز نحوه استفادهاز دستورات شرطی در css را اینجا گردآوری می کنم.

—————————————————————-

این مطلب زیر نظر مجوز GFDL منتشر می‌شود. و کلیه حقوق آن برای همگان آزاد است، بدین شرط که به کلیه شرایط موجود در مجوز GFDL ( که یک نسخه از متن انگلیسی مجوز GFDL در این محل و یک ترجمه غیر رسمی (فارسی) از متن مجوز GFDL که در مرداد ۱۳۸۳ توسط کاوه رنجبر تهیه شده است در این محل ) قرار دارد پایبند باشد.

GNU Logo

GNU Logo

عنوان مطلب : کلمات اختصاصی در CSS و استفاده از Conditional CSS

بخش ثانی : ندارد

تاریخ انتشار : 24/08/1388 مطابق با 15/11/2009

شماره نسخه : نسخه یک

نویسنده : ناصر حاجلو

ای-میل نویسنده : n.hajloo@gmail.com

Copyright (c) 2009 Nasser Hajloo.

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation;

with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled “GNU Free Documentation License”.

—————————————————————-

وقتی بخواهیم یک آپشن خاص در یک مرورگر خاص دارای مقدار متفاوتی از مقدار مشابه در مرورگر دیگر باشد و البته نخواهیم از Conditional CSS استفاده کنیم. میتوانیم نام اختصاری مرورگر مورد نظر را در ابتدای دستور css بنویسیم. این نام ها عبارتند از :

  • IE‘               –    Internet Explorer
  • Gecko‘      –   Gecko based browsers (Firefox, Camino etc)
  • Webkit‘   –   Webkit based browsers (Safari, Shiira etc)
  • SafMob‘   –   Mobile Safari (iPhone / iPod Touch)
  • Opera‘      –   Opera’s browser
  • IEMac‘     –   Internet Explorer for the Mac
  • Konq‘        –   Konqueror
  • IEmob‘    –   IE mobile
  • PSP‘            –   Playstation Portable
  • NetF‘         –   Net Front
  • و اما  اگر بخواهیم از conditional CSS یا همان css شرطی استفاده کنیم باید به این ترتیب عمل کنیم :

    Conditional CSS چیست ؟ css شرطی، ابزاری جهت cross browser کردن ظاهر وب سایت هاست به این ترتیب که مشکلاتی که یک مرورگرایجاد می کند ممکن است در مرورگر دیگر ایجاد نداشته بشد، به همین دلیل برای مرورگری که مشکل دارد یک شرط می گذاریم تا شرط را فقط و تنها فقط همان مرورگر اجرا نماید.

    در کل سه روش برای تعیین مرورگر دلخواه داریم :

    [if {!} browser]
    [if {!} browser version]
    [if {!} condition browser version]

    این سه روش هیچ تفاوتی با هم  ندارند و تفاوت آنها در محدوده عملکرد آنهاست. همانطور که مشاهده می کنید

    در آیتم اول صرفا یک مرورگر انتخاب می شود. که منظور از این مرورگر تمام نسخه های آن مرورگر است.

    در آیتم دوم یک نسخه خاص از یک مرورگر مشخص می شود

    در آیتم سوم با یک کلمه کلیدی از یک نسخه خاص از یک مرورگر، نسخه های بالاتر یا پایین تر را انتخاب می کنیم، برای مثال اگر مرورگر از IE 6.0 به بالا بود و یا اگر از IE 7.0 به پایین بود.

    شما بجای  –     !     –  در سه دستور بالا می توانید از هر ی از مواردی که در آیتم های بالا مشخص ش برای مثال webkit استفاده کنید. و همچنین خود کلمه ! به معنای نقض و منفی کردن هم بکار می رود و  بجای condition می توانید از  کلمات

    lt       – Less than  – کوچکتر از
    lte    – Less than or equal to  –  کوچکتر یا مساوی با
    eq     – Equal to  –  مساوی با
    gte    – Greater than or equal to  –  بزرگتر یا مساوی با
    gt      – Greater then –  بزرگتر از

    استفاده نمایید. بنابراین در یک مثال می توانیم داشته باشیم :

    // Conditional-CSS syntax نمونه
    [if IE] - تمام نسخه های مرورگر اینترنت اکسپلورر
    [if ! Opera] - همه مرورگرها بجز اپرا
    [if IE 5] - اگر فقط مرورگر نسخه ۵ از اینترنت اکسپلورر بود
    [if lte IE 6] - در صورتی که مرورگر نسخه ۶ یا پایین تراز مرورگر اینترنت اکسپلورر بود
    [if ! gt IE 6] - درست مانند آیتم قبل همه نسخه هایی از مرورگر اینترنت اکسپلورر که بزرگتر از نسخه ۶ نیستند و شامل خود نسخه ۶ هم می شود
    

    همانطور که گفتم یک راه حل دیگر این است که بجای اینکه از موارد شرطی در css استفاده کنیم، از مواردی که آن دستور خاص css را صرفا برای یک مرورگر قابل خواندن می کند استفاده نماییم. که به اینها CSS Extension می‌گویند. با استفاده از این اکستنشن ها می توان بجای اینکه کلاس های متفاوت ایجاد کرد و برای هر مرورگر یک کلاس خاص را صدا زد، یک کلاس ایجاد کنیم و در داخل همان کلاس با استفاده از extension ها کاری کنیم که دستورات را فقط یکی از مرورگرها بخواند برای نمونه

    -moz-border
    -webkit-box-shadow
    -o-filter
    -ms-border

    2 Responses to کلمات اختصاصی در CSS و استفاده از Conditional CSS

    1. مسعود says:

      سلام !

      یادآوری خوبی بود.

      مرسی.خسته نباشید…

    2. وبلاگ شما در پرشین وبلا گ ثبت شد . موفق باشی

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: