لیست جامع کد‌های اختصاصی CSS همه‌ی مرور‌گرها برای هک کردن آنها

همیشه در نوشتن کدهایCSS سعی بر این که آنها را به صورت Cross Browser یا مستقل از بروزر بنویسیم اما در شرایطی با بعضی از مرورگرها مشکلاتی پیش می‌آید که می‌بایست برای آنها کدهای اختصاصی بنویسیم تا تنها در آن مرور‌گرها نمایش داده شود.

در زیر لیست هک‌های مربوط به گزینشگرهای همه‌ی مرور‌گرها را آورده ایم.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
 

لیست زیر مربوط به هک‌های خصوصیات CSS در انواع مرورگرها است.

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

هک انتخابگر تنها برای IE10

برای اینکه انتخاب گر اختصاصی برای IE 10 داشته باشید می‌بایستی ابتدا قطعه کد جاوا اسکریپتی زیر را به صفحه اضافه نمایید.

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

با اضافه کردن قطعه کد جاوا اسکریپتی بالا می‌توانید از قطعه کد زیر برای انتخاب المنت‌ها تنها در IE10 استفاده کنید.

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

آخرین به‌روزرسانی در ۱۰ فرو ۱۳۹۶.

دیدگاه کاربران

دیدگاه خود را بنوبسید