CSS хаки. Особенности кроссбраузерной верстки.

Кроссбраузерность кода – основное требование для верстальщика практически в любой web-студии. Для достижения этой задачи есть масса способов. Главный из которых – тщательно продуманная структура документа. Однако, если структура html страницы сложна, или придумать структуру так, чтобы она одинаково отображалась во всех браузерах, не удалось, на помощь верстальщику приходят всевозможные css-хаки. Не претендую на оригинальность или уникальность подборки трюков в этой статье, но постараюсь описать как можно больше способов и инструкций по достижению кроссбраузерности.

Основная головная боль верстальщика в 99,99% связана с браузерами от Microsoft, т.е. с Internet Explorer. Сайт, одинаково хорошо интерпретируемый Opera, Mozilla, Safari и Chrome, может выглядеть совершенно по-разному в Internet Explorer 8, Internet Explorer 7,  не говоря уже о более ранних версиях.

Наиболее красивое решение для обеспечения кроссбраузерности с Internet Explorer — использовать условные комментарии в HTML коде. Суть в том, что для каждой версии браузера создается свой CSS файл, в котором проблемные свойства определенным образом перезаписываются:

Будет работать только в IE6 и ниже:

<!—[if lt IE 6]> <link rel=»stylesheet» type=»text/css» href=»ie6.css» /> <![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.

Иногда ради того, чтобы переписать одно свойство, подключать новый CSS файл слишком громоздко. Для этого есть специальные CSS-хаки.

CSS хаки для Internet Explorer

 

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

Если перед свойством в css поставить звездочку ”*”, то эти свойства будут восприниматься только IE версии 7 и ниже.

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

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

Если после значения свойства поставить !ie, то свойство применится только в браузерах IE.

CSS хаки для Mozilla Firefox

С Mozilla Firefox проблем обычно не бывает. Но тем не менее хаки и для этого браузера могут оказаться полезными:

 

CSS хаки для Opera

CSS хаки для Safari

CSS хаки для Chrome

 

  • Хаки действительно полезные, спасибо, будем юзать