CSS-хаки

Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия. В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.
В этой статье рассматриваются 14 css хаков (их еще называют css-фильтрами), которые помогут вам решить некоторые проблемы несоответствия браузеров.

1. Box Model хак

Box Model хак используется для того, чтобы справиться с глюком эксплорера, в котором border и padding включаются в ширину элемента

padding: 4em;
border: 1em solid red;
width: 30em;
width/**/:/**/ 25em; 

Посмотреть на примере.

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

Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой:

<!--[if условие]> HTML <![endif]-->

Если же вы хотите проигнорировать эксплорером какой-то кусок кода, то используйте такой комментарий:

 <!--[if !condition]> HTML <![endif]-->

Условие может быть таким: IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v.

Пример использования:

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

3. Min-width и max-width: максимальная и минимальная ширина блока

IE, падла, не понимает эти свойства css. Хак для блока с id “wrapper” выглядит так:
А) Минимальная ширина 750px

#wrapper{
min-width: 750px;
width:expression(document.body.clientWidth < 750? "750px": "auto" );} 

Б) Максимальная ширина 1220px, минимальная 750px

#wrapper{
min-width: 750px;
max-width: 1220px;
width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");} 

Min-height хак от Дастина Диаза

 elector {
min-height:500px;
height:auto !important;
height:500px; } 

4. Простые селекторы

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

IE 6 и ниже * html {}

IE 7 и ниже *:first-child+html {} * html {}

IE 7 только *:first-child+html {}

IE 7 и нормальные браузеры html>body {}

Только нормальные браузеры (не IE 7) html>/**/body {}

Опера версии 9 и ниже html:first-child {}

Пример использования: Пусть нам надо назначить для для селектора #news .title только в IE7 некоторые свойства. Делается это так:

*:first-child+html #news .title {/*необходимые свойства*/} 

5. !important

У IE версии 6 и меньше проблемы с идентификатором !important, который используется для того, чтобы объявление некоторого свойства было проигнорировано, даже если это объявление появляется позже текущего. Пример:

<style type="text/css"> p { background: green !important; /* для нормальных браузеров и IE>6 это свойстов остается, потому что оно помечено как important */ background: red; /* IE 6 и ниже использует это свойство, срать ему на !important */ } </style>

6. @import “nonie.css” all;

IE 7 и ниже не поддерживает медиаселекторы @import. Поэтому можно написать css для нормальных браузеров и импортировать его в ваш css используя

@import “nonie.css” all;

Этот хак работает для IE версии 7 и ниже, может не работать в следующих версиях IE

7. body[class|="page-body"]

<style type="text/css">
p 
{ 
background: red; /* Применимо ко всем браузерам */ 
}
body[class|="page-body"] p 
{
background: green; /* Применимо к IE7 и большинству нормальных браузеров, кроме Оперы */ 
}
</style>

Все вышеназванные хаки используют валидный css. Следующие позволят вам быстро решить проблему, но сделают css не валидным. НЕ советуется для использования.

8. Подчеркивание и дефис

Если перед свойством в css поставить подчеркивание “_”, или дефис “-“, то эти свойства будут восприниматься только IE версии 6 и ниже.

Пример использования:

<style type="text/css">
p { background: red; /* Применимо ко всем браузерам */ _background: green; /* Применимо к IE6 и ниже */ }</style>

9. Звездочка

Работает для IE7 и ниже

<style type="text/css"> p { background: red; /* Применимо ко всем браузерам */ *background: green; /* Применимо к IE6 и ниже */ } </style>

Напомню, что этот хак использует невалидный css и является нерекомендуемым к использованию.

10. body:empty

Вообще говоря, :empty – это псевдо класс, который описан для CSS3, и который должен выбирать элементы, которые не имеют внутри других элементов или текста. Тем не менее, если использовать его для элемента body, Firefox 1.5 и Firefox 2 всегда выбирают его, даже если внутри тэга боди есть содержимое.

Итак, этот хак скорее всего будет валидным в CSS3, но в настоящее время не является валидным для CSS2.x.

Резюмируем:

body:empty{}

выбирает тэг body в FF1.5 и FF2.0. Может быть не будет работать в следующих версиях.

11. a:link:visited, a:visited:link

В соответствии со стандартами, псевдотеги :link и :visited взаимно исключаемы, то есть :link означает непосещенную ссылку. Тем не менее, IE 7 и ниже проигнорируют эти псевдо-классы, если какой-нибудь другой появится ниже в том же селекторе.

Пример:

 a:link:visited, a:visited:link {}

выбирает элемент a в IE7 и ниже.

12. >body

>body {} выбирает элемент body только в IE7.

13. html* {}

html* {} выделяет все элементы внутри элемента html. Только для IE7 и ниже.

14. !important!

Как мы уже говорили, у эксплорера нелюбовь с идентификатором !important. Зато он понимает идинтификатор !important! (другие браузеры не воспринимают такое свойство). Работает для IE7 и ниже.

На этом обзор хаков закончен. Надеемся вам понравилось. О PNG и прозрачности будет написано в другой статье.