Приветствую вас, читатель моего блога!
Эта статья о том, как можно задать отдельные CSS стили для разных браузеров, используя CSS хаки. Я дам несколько примеров CSS хаков, и расскажу об их особенностях. А также покажу альтернативные способы решения проблемы задания отдельных CSS стилей для определённых браузеров.
Навигация по статье:
Что такое CSS хаки и для чего они нужны?
В предыдущей статье я писала о кроссбраузерной вёрстке. Проблема кроссбраузерности сайта очень актуальна на сегодняшний день, потому как сейчас существует множество различных браузеров и к большому сожалению не все они одинаково отображают определённые элементы и css свойства.
Для того чтобы решить данную проблему можно использовать специальные css хаки, благодаря которым можно прописать определённые стили только для определённого браузера. При этом все остальные браузеры эти стили просто проигнорируют.
Селектор – это часть CSS правила, благодаря которой браузер понимает для каких элементов нужно применять те или иные CSS правила.
Например, если мы напишем:
|
1 2 3 |
.block{ border:2px solid red; } |
То во всех браузерах для элемента с классом block применится сплошная красная рамка, толщиной в 2 пикселя.
Однако возможно, что в одном из этих браузеров (например Mozilla Firefox) эта рамка будет выглядеть более толстой, чем в остальных или из-за её добавления один из блоков соскочит на новую строку и т.д. при этом в остальных браузерах всё будет отображаться нормально.
Если мы пропишем данные правила следующим образом:
|
1 2 3 4 |
@-moz-document url-prefix() { .block{ border:1px solid red; } |
То во всех браузерах у элемента с классом block отобразится рамка толщиной в 2 пикселя, а в браузере Mozilla Firefox отобразится рамка в 1 пиксель и таким образом это решит проблему.
При этом нужно учитывать, что CSS хаки нельзя использовать при первой же возможности когда в одном их браузеров что то пойдёт не так! В первую очередь потому, что нет никаких гарантий что в следующих версиях данного браузера этот CSS хак будет работать.
Применение CSS хаков целесообразно, в первую очередь, для исправления различных глюков самих браузеров.
CSS хаки для Internet Explorer
Данный браузер является одним из тех, которые доставляют больше всего проблем верстальщикам, так как он не поддерживает некоторые свойства CSS3 или отображает их по своему.
Я нашла несколько CSS хаков для этого браузера и ни один из них у меня не сработал!
Если хотите, можете сами попробовать. Вот эти CSS хаки:
|
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 |
/**Вариант 1**/ *:first-child+html .block { border:1px solid red; } /**Вариант 2**/ *+html .block { border:1px solid red; } /**Вариант 3**/ html>body .block { *border:1px solid red; } /**Вариант 4**/ *:first-child+html .block { border:1px solid red; } /**Вариант 5**/ *:first-child+html .block { border:1px solid red; } /**Вариант 6**/ @media \0screen .block { border:1px solid red; } /**Вариант 7**/ :root .block { border:1px solid red; } |
Во всех этих вариантах вместо .block вы пишете название класса или ID того блока, для которого вы задаёте стили.
Вместо border:1px solid red; — пишете свои CSS стили
К счастью для этого браузера есть более надёжное решение. Он умеет понимать код, находящийся в условных комментариях, что позволяет нам задать определённые стили только для этого браузера.
Код условных комментариев выглядит так:
|
1 2 3 4 5 6 7 |
<!--[if IE ]> <style> .block { border:1px solid red; } </style> <![endif]--> |
Данный код рассчитан на все версии Internet Explorer
Если нам нужно чтобы стили применились только для определённой версии IE, то мы пишем:
|
1 2 3 4 5 |
<!--[if IE 7 ]> <style> Здесь наши стили </style> <![endif]--> |
Данные стили сработают для браузера Internet Explorer версии 7. Если вам нужно прописать стили для другой версии то вместо «7» вы ставит ту версию, которая нужна.
CSS хак для Mozila Firefox
Основной отличительной особенностью данного браузера является то, что по другому отображает шрифты из за чего ширина блоков может немного меняться, а текст перескакивать в две строки или не помещаться в определённый блок.
Для того чтобы задать стили только для Mozila Firefox в CSS файл пишем следующий код:
|
1 2 3 4 5 |
@-moz-document url-prefix() { .block{ border:1px solid red; } } |
Вместо .block пишем класс или ID элемента, для которого нужно задать стиль.
CSS хак для GoogleChrome
Для того чтобы прописать CSS стили только для Chrome можно использовать следующий хак:
|
1 2 3 4 5 |
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .block{ border:1px solid red; } } |
CSS хаки для Opera
У этого браузера основной проблемой является то, что в разных версиях отображение страницы может меняться. И CSS хаки для разных версий будут отличаться.
Для версии Opera 10 можно попробовать:
|
1 2 3 4 5 |
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .block{ border:1px solid red; } } |
Для более ранних версий есть следующие варианты:
Opera 9.2 и младше
|
1 2 3 |
html:first-child .block { border:1px solid red; } |
Ещё вариант:
|
1 2 3 |
o:-o-prefocus .block { border:1px solid red; } |
Есть ещё такой хак:
|
1 2 3 4 5 |
@media all and (min-width: 0) { .menu { border:1px solid red; } } |
Но его видит так же Mozilla последних версий и Chrome, поэтому не советую его использовать!
Я перепробовала все эти хаки, но для Opera найти универсальный CSS хак так и не удалось. Поэтому я решила написать скрипт, который позволил бы подключать тот или иной CSS файл для каждого браузера по отдельности и в следующей статье я поделюсь им с вами.
На что обратить внимание при использовании CSS хаков.
CSS хаки конечно часто решают проблему с одинаковым отображением элементов и стилей в разных браузерах, но это решение проблемы – не самое надёжное, так как вы не можете быть уверенными на 100% что данный CSS хак будет работать в новых версиях браузеров, кроме того если вы пишете CSS хак для Firefox, к примеру, то вполне вероятно что когда выйдет новая версия Chrome или Opera то они тоже будут видеть и отображать этот хак.
Так что используйте их только в крайних случаях и с осторожностью.
В качестве альтернативного решения проблемы могу посоветовать использование скрипта для определения браузера и подключения соответствующего файла стилей.
Более подробно об этом я напишу в моей следующей статье.
Надеюсь, что данная статья была для вас полезной и теперь вам будет немного проще подогнать свою вёрстку под разные браузеры. Желаю вам успешной вёрстки и хорошего настроения :)
С уважением Юлия Гусарь
