دیباچه ای بر CSS Hacks

July 15, 2005 at 08:28 pm

اگر شما یک طراح وب هستید یا در این شاخه فعالیت می کنید، شاید تاکنون متوجه این مطلب شده باشید که در میان مرورگرهای متفاوت هر کدام به نحوی طرحتان را نمایش می دهند. برای مثال شما بادقت پیکسل ها را کم و زیاد و مو به مو تمام نقص ها را برای مرورگری مثل فایرفاکس برطرف می کنید. اما در هنگام ارائه طرحتان در یک مرورگر دیگر مثل اینترنت اکسپلرر، صفحات بهم می ریزند!

طراحی با CSS نیز از این قاعده مستثنا نیست. برعکس در بیشتر موارد به نظر می رسد مرورگرها بیشتر با طرح بندی برپایه جدول (table based layout) سازگارند. شاید یکی از این دلایل این باشد که هنوز چندین نام بزرگ در طراحی صفحاتشان از طرح بندی بر مبنای جدول بهره می گیرند.

برای حل این مشکلات بسیاری از طراحان CSS از تنظیماتی در کدهایشان بهره می گیرند که CSS Hack نام دارد. در واقع CSS Hack راهی است برای اینکه برخی از مرورگرها را مجبور کنیم تا کدهای css معینی را نادیده بگیرند. ما این کا را با قرار دادن کاراکترهای و نشانه های ویژه ای در فایل CSS تعریف می کنیم. برای مثال، یکی از بدترین حالات در هنگام طراحی با CSS، مدل جعبه ایی (Box model) است. IE5 و IE5.5 ویندوز در CSS1 این مدل را با گذاشتن لبه و لایه گذاری (border and padding) درون عرض مشخص شده بجای بیرون، به غلط تفسیر می کنند.

برای مثال کد زیر را در نظر بگیرید که بر اساس آن در همه مرورگرها برای عنصر header عرضی به پهنای 10em خواهیم داشت بجز IE5 که عرضی به پهنای 5em را بر می گرداند.
( IE5 دو مقدار padding و border را در هنگام برآورد طول در هم می آمیزد)

#header {
  padding: 2em; 
  border: 0.5em;
  width: 10em
}

راه حل این مشکل توسط جناب Tantek celik در اینجا حل شده است و باعث شده که وی به خاطر این هک در میان css کاران معروف شود. برای شناسایی مرورگر و ارسال دستور css متناسب با آن از شیوه زیر استفاده می شود:

#header {
  padding: 2em; 
  border: 0.5em;
  width: 15em; 
  voice-family: "\"}\"";
  voice-family: inherit; 
  width: 10em
}

نکته مهم در اینجاست که IE5 اولین مفدار برای عرض را بکار خواهد گرفت یعنی همان 15em. دقت کنید ما قصد داشتیم عرضی به پهنای 10em داشته باشیم اما چون در IE5 این مقدار به دلایل ذکر شده در فوق به 5em نزول می یافت مقدار را 15 کردیم تا با 5 تای کاسته شده مقدار مطلوب به دست آید. حال برای آنکه مقدار فوق (همان 15em) در مرورگرهای دیگر در نظر گرفته نشود مقدار عرض را پس از دوخط دستوری فوق برابر 10em در نظر می گیریم. با این کار در هر دو نوع مرورگر ما عرضی به پهنای 10em خواهیم داشت. این تنها یکی از موارد رفع این مشکل بود. راه های دیگری برای آن در اینجا عرضه شده است.

با وجود اینکه CSS Hack از این طریق بسیار ساده و کاراست اما در برخی موارد سبب می شود المان های موجود اعتبار خود را در W3C از دست بدهند. برای این منظور از یک زبان برنامه نویسی مانند PHP برای شناسایی مرورگر و ارسال کدهای CSS متناسب با آن استفاده می شود که حتما در مقالات آینده بدان خواهم پرداخت. منبع: خودم بعلاوه اینجا.

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

  1. 1

    محمد


    سلام!جالب بود.

    July 15, 2005 at 11:00 pm

  2. 2

    Ali_ix


    جالب بود …
    موضوع جالبی رو شروع کردی … ;)
    موفق باشی ..

    July 15, 2005 at 11:07 pm

  3. 3

    ميلاد قيصري


    سلام آقاي الواني!
    خيلي جالب بود!‌من قبلا تو Sitepoint اينو خونده بودم
    ولي دستت طلا!
    يكم حرفه اي ترش كن ادامه هم بده!
    يا حق

    July 16, 2005 at 12:18 am

  4. 4

    محسن


    واسه مشکل BoxModel راه حلای ساده تری هست. اینو امتحان کن تو استایل هات :)

    div {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
    }

    July 16, 2005 at 1:16 am

  5. 5

    ميلاد قيصري


    محسن جان اين جالب بود ولي فكر كنم بحث تو اينجا سر طرح بندي box نبود!!

    July 16, 2005 at 2:26 pm

  6. 6

    محمد


    اینجا چقدر بحث پیچیده ست !!

    July 17, 2005 at 7:59 am

  7. 7

    Mohammad


    salam
    shooma bayad fekr konid ke karamoz mobtadi ast va
    az paye amozesh dahid.masalan shooma aslan dar bareh (voice-family,…)hich tozihi nadadeheid
    ama ba in hameh kameltarin site farsi zabani bode
    keh ta beh hal dar bareh css dideam.hatman az site
    zir didan kon
    http://www.m3schools.com
    with best wishes for you

    July 18, 2005 at 2:30 am

  8. 8

    Mohammad


    salam
    shooma bayad fekr konid ke karamoz mobtadi ast va
    az paye amozesh dahid.masalan shooma aslan dar bareh (voice-family,…)hich tozihi nadadeheid
    ama ba in hameh kameltarin site farsi zabani bode
    keh ta beh hal dar bareh css dideam.hatman az site
    zir didan kon
    http://www.w3schools.com
    with best wishes for you

    July 18, 2005 at 2:32 am

  9. 9

    Hamed


    ممنون از مطالب مفیدتون
    یک درخواست داشتم:
    لطفا یک هک هم برای border-bottom آموزش بدین به خدا بیچارمون کرده!
    با تشکر

    September 24, 2009 at 1:05 am