Css хаки для IE8, Opera и других браузеров
стили и css, 30.09.2009 Среда, 03:41
Теги:
Теги:
Для создания универсальной верстки, одинаково отображающейся во всех браузерах, порой приходится играть в грязные игры с программным кодом. Одной из этих игр является использование так называемых css хаков (или фильтров). Css хак - это стилевое правило, которое работает в одном браузере и не работает в другом, чем позволяет создавать разное отображение вашей информации в разных браузерах, или наоборот сглаживать погрешности отображения в разных браузерах. Зачем вам это - ваше дело, другое дело, как это сделать?
Эту статью я готовил достаточно основательно и часов 5 перерывал интернет в поисках свежих и рабочих css хаков, затем создавал проверочную таблицу (она ниже на странице), некоторые хаки, например хак для Chrome и хак для Internet Explorer 8 пришлось составлять самому, просто потому, что их нет в сети.
Что получилось в итоге? В итоге у нас: 13 способов идентификации различных версий и групп браузеров Internet Explorer, два способа написать стиль только для Opera (9 и 10 версии), один способ написать css только ля Google Chrome (в сети такого нет), способ написать стиль только для последней версии Safari (нашел в каком то маленьком буржуйском блоге за три девять земель), и способ написать стиль только для Mozilla FireFox (могло быть больше, но я посчитал что для хорошего браузера одного способа хватит) и ещё несколько способов получить различные группы выше перечисленных браузеров.
Все способы описаны в таблице ниже. Если хак выполняется в данный момент - он выделится зеленым цветом. То есть если вы просматриваете данную страницу с помощью Opera, то все строчки, содержащие справа слово Opera - подсветятся. Слева описана структура самого хака, а справа перечислены браузеры, которые прочитают свойство в хаке. Opera подразумевает браузеры 9 и 10 версии. Все хаки протестированы на странице в режиме соответствия стандартам (то есть с соответствующим доктайпом) и работают на момент создания поста. Я не стал выкладывать хаки для старых версий нормальных браузеров типа Opera или FireFox. В качестве бонуса внизу таблицы содержится графа, которая определит ваш браузер основываясь только на css свойствах (моя скромная разработка). Вот её исходный код:
Code
<style type="text/css">
.div {padding:10px;margin:0 0 2px 0;font:10px Tahoma, Verdana;background-color:#eee;color:#777;}
.bd1,.bd2,.bd3,.bd4,.bd5,.bd6,.bd7,.bd0 {display:none;text-align:center;font-weight:bold;}
@media screen and (-webkit-min-device-pixel-ratio:0){.bd0 {display:block}.bd0:not(:root:root){display:none}} /*хромой*/
.bd2:not(:root:root) {display:block} /* сафари */
*|html[xmlns*=""] .bd1 {display:block} /* опера */
@-moz-document url-prefix(){.bd3 {display:block}} /* лиса */
html[xmlns*=""] .bd4 {display:block\9;]display:default} /* IE8 */
*+html .bd5 {display:block} /* IE7 */
* html .bd6 {display:block;\\display:default} /* IE6 */
.bd7 {\\display:block} /* IE5.5 */
</style>
<div class='bd0 div'>Ваш браузер - Google Chrome</div>
<div class='bd1 div'>Ваш браузер - Opera</div>
<div class='bd2 div'>Ваш браузер - Safari</div>
<div class='bd3 div'>Ваш браузер - FireFox</div>
<div class='bd4 div'>Ваш браузер - IE8</div>
<div class='bd5 div'>Ваш браузер - IE7</div>
<div class='bd6 div'>Ваш браузер - IE6</div>
<div class='bd7 div'>Ваш браузер - IE5.5</div>
.div {padding:10px;margin:0 0 2px 0;font:10px Tahoma, Verdana;background-color:#eee;color:#777;}
.bd1,.bd2,.bd3,.bd4,.bd5,.bd6,.bd7,.bd0 {display:none;text-align:center;font-weight:bold;}
@media screen and (-webkit-min-device-pixel-ratio:0){.bd0 {display:block}.bd0:not(:root:root){display:none}} /*хромой*/
.bd2:not(:root:root) {display:block} /* сафари */
*|html[xmlns*=""] .bd1 {display:block} /* опера */
@-moz-document url-prefix(){.bd3 {display:block}} /* лиса */
html[xmlns*=""] .bd4 {display:block\9;]display:default} /* IE8 */
*+html .bd5 {display:block} /* IE7 */
* html .bd6 {display:block;\\display:default} /* IE6 */
.bd7 {\\display:block} /* IE5.5 */
</style>
<div class='bd0 div'>Ваш браузер - Google Chrome</div>
<div class='bd1 div'>Ваш браузер - Opera</div>
<div class='bd2 div'>Ваш браузер - Safari</div>
<div class='bd3 div'>Ваш браузер - FireFox</div>
<div class='bd4 div'>Ваш браузер - IE8</div>
<div class='bd5 div'>Ваш браузер - IE7</div>
<div class='bd6 div'>Ваш браузер - IE6</div>
<div class='bd7 div'>Ваш браузер - IE5.5</div>
ВИДЕОДЕСЕРТ
Его зовут Ной Калина (Noah Kalina) и он фотографировал себя каждый день на протяжении шести лет. А потом сделал это видео..: Совершенно замечательная музыка из этого клипа называется Carly Comando - Everyday
Проверял на кроссоперность :] на 3 операх.
На всех работает "@media not all and (-webkit-min-device-pixel-ratio){селектор {свойство:значение}}"
А который поставлен "*|html[xmlns*=""] селектор {свойство:значение}" работает только в одной
И еще... боюсь разочаровать, но в Опере 10.51 ни один хак не работает...
до входа http://i042.radikal.ru/0910/22/b67f52bc4f2b.png
после http://i042.radikal.ru/0910/8c/eef1bc210c36.png