Posted on By seodiz_baza_

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

хаки css

Я совсем не являюсь сторонником 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:red9;]display:default}@media screen .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 трюка:

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

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