CSS хаки для всех браузеров: от IE до Opera

Порой бывают моменты, когда в различных браузерах мы видим разную картинку при отображении нашего сайта. К примеру, делаем меню. В FF все ровно и красиво, в IE пункты меню смещаются на пару пикселей вниз. Правим стили. В IE становится нормально, уползает во всех остальных браузерах.

css хаки

Чаще всего подобное можно наблюдать при тестировании сайта в IE. Поэтому именно его больше всего «любят» верстальщики и веб-программисты: просматривая свой сайт через этот браузер, можно наблюдать разные варианты в различных версиях. Причем, сейчас мало кто делает у себя поддержку для IE ниже 7 версии, да и от семерки постепенно отказываются благодаря уменьшению числа пользователей этого чуда.

К сожалению, это наблюдается не только в Internet Explorer, но и в остальных браузерах и не всегда можно решить проблему корректировкой стилей.

Что такое CSS хаки и для чего они нужны?

CSS хаки — это те же самые стили, но записываются они таким образом, чтобы воспринимать их мог лишь конкретный браузер, для которого предназначался хак. К примеру, если у Вас возникли трудности с IE8, нужно использовать CSS хак для IE8. В этом случае верстка уже не будет плыть и примет нормальный вид.

Давайте рассмотрим хаки для различных браузеров:

CSS хак для Internet Explorer 8

@media \0screen { div {color: #333;}
 }

 Вместо div {color: #333;} нужно вставлять свой собственный стиль, который призван решить проблему и устранить возникший косяк.

CSS хак для Internet Explorer 9 и 10

:root div {
 color: #333\9;
 }

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

CSS хак для Internet Explorer 10

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 div {color: #333;}
 }

CSS хаки для Opera

@media all and (-webkit-min-device-pixel-ratio:10000),
 not all and (-webkit-min-device-pixel-ratio:0) {div {color: #333;}}
*|html[xmlns*=""] div {color: #333;}

CSS хаки для Mozilla FireFox

@-moz-document url-prefix() {div {color: #333;}}
*>div {color: #333;}

CSS хак для Safari

html*div {color: #333;}
html:root div {color: #333;}

CSS хак для Google Chrome

body:nth-of-type(1) div {color: #333;}

Это лишь некоторые варианты из всех возможных. В дальнейшем список будет обновляться и пополняться, ведь браузеры постоянно обновляются и старые приемы со временем перестают работать. Приходится изобретать что-то новое.

А вообще, я советую избегать применения CSS хаков, если такое возможно. Ведь зачастую проблемы верстки возникают из-за неуместного применения стилей, а не из-за «корявого» браузера. К тому же хаки могут вызвать проблемы при валидации кода. В одной из следующих статей я расскажу, как можно обойтись без CSS хаков и в то же время сверстать полностью кроссбраузерный сайт!

Понравилась статья? Расскажи о ней друзьям!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *