‏یادگارهای عجیب CSS از دوران Internet Explorer

نویسنده تو این پست، بعد از مقالهٔ قبلیش دربارهٔ HTMLهای عجیب، سراغ CSS خارج از استانداردها رفته: هک‌های مخصوص مرورگر و ترفندهایی که از باگ‌های موتورها درومدن. معروف‌ترینش star hack بود. IE7 و نسخه‌های قبلش propertyای رو که با * شروع می‌شد معتبر حساب می‌کردن و فقط IE6 همین کار رو با _ یا - می‌کرد. بقیهٔ مرورگرها این خط‌ها رو نادیده می‌گرفتن، پس می‌شد برای هر نسخه یه مقدار جدا نوشت:

width: 300px;
*width: 250px;
_width: 200px;

IE7 و قبل‌ترش هر کلمه‌ای بعد از ! رو همون !important حساب می‌کردن، برای همین خیلی‌ها !ie می‌نوشتن. برای تشخیص مرورگر هم selectorهایی مثل * html برای IE6 و *:first-child+html برای IE7 رایج بود. یه مفهوم عجیب دیگه hasLayout بود (یعنی یه فلگ داخلی IE تا قبل از نسخهٔ ۸ که مشخص می‌کرد المنت خودش رو رندر می‌کنه یا والدش). المنت بدون layout باعث می‌شد container موقع float شدن بچه‌ها جمع بشه و راه‌حل رایجش zoom: 1 بود.

IE5 چیزی به اسم CSS expressions آورد که اجازه می‌داد جاوااسکریپت داخل CSS اجرا بشه، مثلاً برای جبران نبودن position: fixed یا min-width. مشکل این بود که expressionها موقع اسکرول و حتی حرکت موس دوباره محاسبه می‌شدن و کارایی رو حسابی پایین میاوردن، تا اینکه مایکروسافت تو IE8 پشتیبانیش رو برداشت. Filterها هم از IE4 با کامپوننت‌های DirectX ویندوز جلوه‌هایی مثل opacity، PNG شفاف و گرادیان رو ممکن می‌کردن و syntaxشون کم‌کم پیچیده‌تر شد:

filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

این فیلترها anti-aliasing فونت ClearType رو هم خراب می‌کردن. -ms-filter تو IE8 اومد و تو IE10 کلاً حذف شد، چون تا اون موقع opacity (از IE9) و linear-gradient() (از IE10) پشتیبانی می‌شدن. چند ترفند دیگه هم تو مقاله هست: cursor: hand که IE قبل از نسخهٔ ۶ به جای pointer می‌شناخت، رنگ‌آمیزی scrollbar از IE5.5 که پروفایل‌های MySpace حسابی ازش استفاده می‌کردن، و HTML Components با property behavior که با CSS به المنت‌ها منطق اسکریپتی وصل می‌کرد.

Box Model Hack از Tantek Çelik از یه باگ parser تو IE5 استفاده می‌کرد: یه مقدار رشته‌ای خاص برای voice-family باعث می‌شد IE5 فکر کنه بلاک CSS بسته شده. این مهم بود چون IE5 و IE5.5 ویندوز padding و border رو داخل width حساب می‌کردن. Holly Hack هم از باگ کامنت‌ها تو IE مک با موتور Tasman کمک می‌گرفت. یه باگ معروف دیگه این بود که IE مارجین المنت float رو دو برابر نشون می‌داد، مگه اینکه display: inline داشته باشه.

آخر سر نوبت vendor prefixهاست: -webkit-، -moz-، -o- و -ms- قرار بود فقط برای تست فیچرهای آزمایشی باشن، ولی توسعه‌دهنده‌ها تو پروداکشن ازشون استفاده کردن و مرورگرها مجبور شدن پشتیبانیشون رو نگه دارن. برای همین الان فیچرهای جدید پشت flag عرضه می‌شن. بعضی‌هاشون مثل -webkit-text-stroke هنوز تو همهٔ مرورگرهای اصلی کار می‌کنن. نویسنده یادآوری می‌کنه که مایکروسافت حتی تو ۲۰۰۵ از توسعه‌دهنده‌ها خواسته بود این هک‌ها رو کنار بذارن.

نکات کلیدی:

• star hack: propertyهای با پیشوند * فقط تو IE7 و قبل‌ترش اعمال می‌شدن و _ فقط تو IE6.
• zoom: 1 بدون تغییر ظاهر به المنت hasLayout می‌داد و مشکل جمع شدن container رو حل می‌کرد.
• CSS expressions از IE5 اومدن و تو IE8 حذف شدن، چون با هر اسکرول و حرکت موس دوباره اجرا می‌شدن.
• فیلترهای DirectX از IE4 بودن و -ms-filter تو IE10 کامل حذف شد.
• -webkit-text-stroke یکی از معدود vendor prefixهاییه که هنوز تو همهٔ مرورگرهای اصلی کار می‌کنه.