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

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

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

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

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

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

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

Просмотр кода PHP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

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

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

Просмотр кода PHP
<!--[if lte IE 6]><link href="style_ie6.css" rel="stylesheet" type="text/css"/><![endif]-->

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

Просмотр кода PHP
<!--[if lte IE 7]><link href="style_ie7.css" rel="stylesheet" type="text/css"/><![endif]-->

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

CSS хаки.

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

Internet Explorer 6

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

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

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

Internet Explorer 7

Просмотр кода PHP
*+html .style {
background: #F55;
}

Просмотр кода PHP
*:first-child+html .style {
background: #F55;
}

Просмотр кода PHP
html>body .style {
*background: #F00;
}

Internet Explorer 8

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

Opera

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

Просмотр кода PHP
*|html[xmlns*=""] .style {
background: #F00;
}

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

Mozilla Firefox

Просмотр кода PHP
@-moz-document url-prefix() {
.style {background: #F00;}
}

Safari

Просмотр кода PHP
body:last-child:not(:root:root) .style {
background: #F55;
} /* для Safari < 4.0 */

Просмотр кода PHP
html[xmlns*=""] body:last-child .style {
background: #F55;
} /* для Safari < 4.0 */

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

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

Category CSS, HTML     Tags , , ,

Похожие записи

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
Вхожу в ТОП 100 фрилансеров. Топовый исполнитель по версии Кворк Вхожу в ТОП 100 фрилансеров
Множество совершенных сделок Множество совершенных сделок
Более 5 лет на Кворк Более 5 лет на Кворк, более 10 лет в фрилансе
Заказать работу
предложить оффер

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

Archive

Свежие записи

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