Главная » 2011 » Май » 27 » CSS хаки. Особенности кроссбраузерной верстки.
12:11
CSS хаки. Особенности кроссбраузерной верстки.
Кроссбраузерность
кода – основное требование для верстальщика практически в любой
web-студии. Для достижения этой задачи есть масса способов. Главный из
которых – тщательнопродуманная структура документа.
Однако, если структура html страницы сложна, или придумать структуру
так, чтобы она одинаково отображалась во всех браузерах, не удалось, на
помощь верстальщику приходят всевозможные css-хаки. Не претендую на
оригинальность или уникальность подборки трюков в этой статье, но
постараюсь описать как можно больше способов и инструкций по достижению
кроссбраузерности.
Основная головная боль верстальщика в 99,99% связана с браузерами от
Microsoft, т.е. с Internet Explorer. Сайт, одинаково хорошо
интерпретируемый Opera, Mozilla, Safari и Chrome, может выглядеть
совершенно по-разному в Internet Explorer 8, Internet Explorer 7, не
говоря уже о более ранних версиях.
Наиболее красивое решение для обеспечения кроссбраузерности с Internet
Explorer – использовать условные комментарии в HTML коде. Суть в том,
что для каждой версии браузера создается свой CSS файл, в котором
проблемные свойства определенным образом перезаписываются:
Будет работать только в IE6 и ниже:
Условие может быть таким: 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.
Иногда ради того, чтобы переписать одно свойство, подключать новый CSS
файл слишком громоздко. Для этого есть специальные CSS-хаки.
CSS хаки для Internet Explorer
01
* html .class{background:red} /* В случае если у html-страницы есть доктайп,
02
этот хак работает только для IE6. В случае quirks-mode, хак работает в IE6 и IE7 */
03
04
*+html .class{background:red} /*В случае, если у html-страницы есть доктайп,
05
этот хак работает в IE7, может понять Opera 9 и ниже */
06
07
*:first-child+html .class{background:red} /*В случае, если у html-страницы есть доктайп,
08
этот хак работает в IE7: */
09
10
html>body {} /*Все кроме IE6 */
11
12
div, #ie#fix /* все кроме IE8 */
13
14
div+span {…} /* IE6 и ниже проигнорирует это правило */
15
16
div>span {…} /* IE6 и ниже проигнорирует это правило */
17
18
.myClass {
19
color:red\0/; /* только IE8*/
20
}
21
22
.myClass {
23
color:red\9; /* только IE9*/
24
}
25
26
*:lang(ru) #lightMOD { display: block}
27
/* Хитрый селектор — все современные браузеры — не IE6 или IE7 */
28
29
html>/**/body #lightMOD { display: block}
30
/* Вживленный комментарий — все современные браузеры — не IE6 или IE7 */
31
32
c\olor red; /* IE 6 не работает перед буквами a, b, c, d, e, f */
33
34
.ie7b {#color:#00FF00;} /* Хак только для IE7,6 */
Если перед свойством в css поставить подчеркивание "_”, или дефис "-",
то эти свойства будут восприниматься только IE версии 6 и ниже.
Если перед свойством в css поставить звездочку ”*”, то эти свойства
будут восприниматься только IE версии 7 и ниже.
>body {} выбирает элемент body только в IE7.
html* {} выделяет все элементы внутри элемента html. Только для IE7 и
ниже а также Chrome и Safari.
Если после значения свойства поставить !ie, то свойство применится
только в браузерах IE.
CSS хаки для Mozilla Firefox
С Mozilla Firefox проблем обычно не бывает. Но тем не менее хаки и для этого браузера могут оказаться полезными:
1
html:root ваш_элемент {…} /* этот работает ещё и для Safari и chrome*/
2
3
ваш_элемент, x:-moz-any-link {…}
4
5
ваш_элемент, x:-moz-any-link, x:default{ display: block} /* только FF 3.0 */
CSS хаки для Opera
1
@media alland (min-width: 0) {
2
.class { color: #368EF1; } /* для Opera */
3
}
4
5
html:first-child .class { color: #368EF1; } /* для Opera */
Главная 
