CSS хаки. Секреты верстки.

Author Автор: Роман Чернышов    Опубликовано: 23 декабря 2010

Каждый начинающий верстальщик рано или поздно сталкивается с необходимостью запрещать или разрешать различным браузерам обработку каких либо CSS стилей. Это связанно с тем, что несмотря на стандарты, браузеры порой отображают различные элементы страницы по своему. Самым «особым» браузером заслуженно считается Internet Explorer 6. Приводящий в ужас начинающих верстальщиков (веб-мастеров, программистов), и раздражающий всех бывалых.

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

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

Тип документа.

Первым делом убедитесь в том, что у вас задан тип документа, для HTML он задается тегом (в самом начале документа):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Условные комментарии.

Так же порой во избежании использования CSS хаков, можно применить условные комментарии, это не только более правильно и валидно, а еще и является хорошим тоном. Например вы можете все стили предназначенные для IE6 вынести в отдельный файл, и подключать его в вашем документа через тег LINK, при этом заключив его в условный комментарий, таким образом он будет распознаваться только IE6.

Например, для IE 6:

<!--[if lte IE 6]><link href="style_ie6.css" rel="stylesheet" type="text/css"/><![endif]-->

А этот вариант уже для IE 7:

<!--[if lte IE 7]><link href="style_ie7.css" rel="stylesheet" type="text/css"/><![endif]-->

В такие условные комментарии вы можете заключать любой HTML код.

CSS хаки.

Перечислю все возможные варианты CSS хаков для разных браузеров.

Internet Explorer 6

/*Первый способ*/
.style {
_background: #F55;
} /*бэкграунд примет #F55  цвет только в IE6*/

/*Второй способ*/
.style {
-background: #F55;
} /*бэкграунд примет #F55 цвет только в IE6*/

/*Третий способ, влияет на применение всего стиля, а не отдельных их параметров.*/
*html .style {
background: #F55;
} /*бэкграунд примет #F55 цвет только в IE6*/

Internet Explorer 7

*+html .style {
background: #F55;
}

*:first-child+html .style {
background: #F55;
}

html>body .style {
*background: #F00;
}

Internet Explorer 8

.style {
background: #F00\0/; /*Установив в конце значения цвета два слеша с нулем, параметр обработается только IE8*/
}

Opera

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;}
} /*Непростая конструкция*/

*|html[xmlns*=""] .style {
background: #F00;
}

html:first-child .style {
background: #F00;
} /*Этот способ работает только для версий ниже 9.5*/

Mozilla Firefox

@-moz-document url-prefix() {
.style {background: #F00;}
}

Safari

body:last-child:not(:root:root) .style {
background: #F55;
} /* для Safari < 4.0 */

html[xmlns*=""] body:last-child .style {
background: #F55;
} /* для Safari < 4.0 */

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

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

4 комментария to “CSS хаки. Секреты верстки.”

  • Игорь 28.06.2012 в 11:14 пп

    Статья очень полезная и совершенно верно подмечено, что IE сильно на нервы действует.

  • Роман 19.05.2016 в 3:55 пп

    Текстовый редактор «калечит теги» и заменяет, например, знаки на < и >
    Можно это как-то исправить здесь?)

    • Роман 19.05.2016 в 3:57 пп

      заменяет на & l t ; и & g t ;

    • Роман Чернышов 21.06.2016 в 12:58 пп

      Переключите редактор в режим редактирования HTML и вставьте нужные теги.

Оставить комментарий на Роман Чернышов

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка