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

Author Роман Чернышов    Category CSS, HTML     Tags , , , Комментариев 4 Дата 23 Дек

css haki CSS хаки. Секреты верстки.Каждый начинающий верстальщик рано или поздно сталкивается с необходимостью запрещать или разрешать различным браузерам обработку каких либо 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 и вставьте нужные теги.

Оставить комментарий

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

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

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы

www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...