Отправляет email-рассылки с помощью сервиса Sendsay

Веб-разработка: пособие начинающим

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр Левитас

Статистика

10.726 подписчиков
-23 за неделю
←   Все выпуски   →

Веб-разработка? Это просто! Хаки для браузеров


Хаки для браузеров

Сегодня мне хотелось бы поговорить о так называемых «css-хаках». CSS-хаки используют тогда, когда один конкретный браузер надо заставить отображать некий блок разметки не так, как хотелось бы самому браузеру. Сразу оговорюсь, что использовать хаки нужно только тогда, когда это действительно необходимо. Скажем, всеми нами горячо любимый Internet Explorer (седьмой версии) имеет свои, сугубо специфичные представления о работе со списками. И иногда надо только ему объяснить, что он неправ:-)

Вообще задача раздельных CSS для разных браузеров имеет несколько путей решения. Один из них — встроить в <head></head> php-, или java-скрипт, определяющий тип браузера, и отсылающий конкретный браузер к предназначенной для него стилевой таблице. Второй — если проблемы возникают только с IE — так называемые «условные комментарии». В <head></head> задается конструкция вида: 

<!–[if IE]><link rel=”stylesheet” href=”css/ie.css” type=”text/css” media=”screen” /><![endif]–>

или для конкретных версий Explorer'а:
<!–[if IE7]><link rel=”stylesheet” href=”css/ie7.css” type=”text/css” media=”screen” /><![endif]–>
<!–[if IE6]><link rel=”stylesheet” href=”css/ie6.css” type=”text/css” media=”screen” /><![endif]–>

И, наконец, третий путь — CSS-хаки.

Самый удобный в плане хаков браузер - Firefox (и относящиеся к его семейству), так как имеет свою группу css-классов, начинающуюся с перфикса @-moz- Например:

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

css-rule, x:-moz-any-link{

}

Для Opera:

 media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
 .style {background: #F00;} /* только для Opera */
}

html:first-child {} /* только для Opera */
html:first-child .style {
background: #F00; /* только для Opera < 9.5 */
}

Также, можно создать специальный файл стилей для Opera и подключить его следующим образом:
<head>
<link rel=”stylesheet” href=”css/opera.css” type=”opera/css” media=”screen” />
</head>

Google Chrome и Safari по способу работы с блочной моделью напоминают Opera и с высокой долей вероятности можно предполагать, что если ваша верстка нормально выглядит в Опере, то и в Хроме с Сафари с нею тоже все будет нормально. Однако, на всякий случай, хаки:

body:last-child:not(:root:root) .style {
  background: #F00;
}

Ну, и наконец, хак для IE. Почему только один? По опыту решения конкретных задач могу сказать, что все проблемы верстки, с которыми мне приходилось сталкиваться, были одинаковыми у наиболее распространенных версий IE (6,7). Поэтому я пользовался (если пользовался) универсальным хаком, так называемым «holy hack»:

html {
  background: #f00; (это понимают все браузеры)
  * background: #0f0; (а это только ослики)
}

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

Статью Хаки для браузеров а также другие статьи, посвященные веб-разработке вы сможете на сайте Веб-разработка? Это просто!
В избранное