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

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

Статьи по теме:

Комментарии к записи

RSS

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

Как создать:

Где найти:

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

© 2011-2016 «Сеодиз». Создание сайтов и заработок для начинающих.
Копирование запрещено.