CSS Хаки (IE, Opera, Mozilla Firefox, Chrome, Safari)

2011-12-11
Скажем нет хаку

Я совсем не являюсь сторонником CSS хаков, даже вернее будет сказать являюсь противником их использования при верстке или внесении изменений в темы и шаблоны, поскольку в отличие от некоторых любителей CSS хаков, считаю что верстать надо правильно сразу с самого начала, без лишнего "выпендрежа" и простым семантически верным кодом, не забывая конечно и про правильный DOCTYPE, тогда необходимость в хаках отпадет сама собой.

Единственно где я считаю их применение может быть оправдано так это при варианте когда вы вносите изменения в чужой код не вами сверстанной и очень большой и сложной темы. Я в последнее время совсем перестал пользоваться хаками, ибо если твою верстку не понимают современные браузеры то значит это не твое и тебе лучше не стоит ей заниматься.

Да бывают и у меня проблемы, но в основном с IE6 и IE7 (их любителям предлагаю скачать бесплатно internet explorer 8, хотя бы), все никак не соберусь перестать их в поддерживать своих темах, хотя знаю многие уже на это решились, а их пользователям при входе на сайт выводят надпись с просьбой обновить браузер.

Ну ладно хватит лирики пора бы мне уже выложить и свою подборку хаков, которые у меня уже немного запылились, но возможно кому-нибудь пригодятся:

Хаки IE (Internet Explorer):

Хак для IE 5.5 - Не думаю что этот браузер стоит поддерживать, но а если вдруг все-таки понадобится:

.ie55 {\\color:red}

Хак для IE 6: - Любой из двух:

* html .ie6 {color:red;\\display:default} _ie6 {color:red;}

Хак для IE 7

*+html .ie7 {color:red} *:first-child+html .ie7 {color:red} html>body .ie7 {color:red}

Хак для IE 8

html[xmlns*=""] .ie8 {color:red\9;]display:default} @media \0screen .ie8 {color:red}

Хак для IE 9 - Хотя с удовольствием оборвал бы руки тому верстальщику чья верстка разъезжается даже в девятке, но вот держите:

:root .ie9 {color:red}

Хак для IE 10 - А нуждающихся в этом хаке вынужден огорчить: он вам не помог бы даже если бы был...

Хаки Opera:

Один из этих двух хаков можно использовать для Оперы:

*|html[xmlns*=""] .opera {color:red} @media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) .opera {color:red}

Хаки Safari:

Если у вас возникнет нужда в хаке для браузера Сафари, один из следующих думаю вас спасет:

.safari:not(:root:root) {color:red}

Этот работает для версий меньше 4*

body:last-child:not(:root:root) .safari {color:red}

Хаки для Google Chrome:

Это уже даже не смешно, но на всякий вот он Хак для Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0){.chrome {color:red}.chrome:not(:root:root){color:red}}

Какому CSS хаку вы отдадите предпочтение это дело ваше, единственно хочу напомнить что их работа во многом зависит от типа HTML документа (doctype) который вы декларируете в самом начале страницы.

Приведу небольшой примерчик работы этих хаков, под этими строками вы должны увидеть тип своего браузера определенный с их помощью и небольшого CSS трюка:

Ваш браузер - Google ChromeВаш браузер - OperaВаш браузер - SafariВаш браузер - FireFoxВаш браузер - IE8Ваш браузер - IE7Ваш браузер - IE6Ваш браузер - IE5.5

Не совсем уверен что будут правильно определены абсолютно все версии браузеров, но это ведь лишь небольшой пример их работы (я использовал только по одному варианту хака для каждого браузера).

Читайте также: css кроссбраузерность

Комментарии к статье

Предыдущая статьяСледующая статья

RSS

Рекомендую
  1. WEBHOST1 - проверенный недорогой хостинг для сайта с PHP и MYSQL.
  2. LOGASTER - генератор логотипов и фавиконок с поддержкой кириллицы.
  3. QComment - наполнение сайтов комментариями и заработок на отзывах.

Как создать:

Где найти:

Как заработать:

Категории

© 2011-2017 Сеодиз