Хаки для браузеров

На сегодняшний день существуют, множество разных браузеров они все стремятся и поддержке спецификации CSS официально установленной, но всё ровно каждый верстальщик шаблона сайта сталкивается с проблемой отображение сайта в разных браузерах. При этом можно долго спорить, какой из браузеров «более правильный», суть остается одна — пока существуют несколько браузеров и люди их применяют, сайт надо делать так, чтобы он корректно и без ошибок в них отображался, так как задумали разработчики и дизайнеры. Ведь не один владелец своего сайта не хочет потерять, например аудиторию пользователей, которые используют браузер, в котором не корректно отображается его сайт. Как же быть в такой ситуации на сегодняшний день существует множество способов победить эту проблему один из распространённых способов это писать в основной CSS так называемые хаки стилей, которые будут читаться только теми браузерами, для которых они написаны.

Opera

@media all and (-webkit-min-device-pixel-ratio:10000), 
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;}
}
html:first-child .style { 
background: #F00;
}

*|html[xmlns*=""] .style {
background: #F00;
}

noindex:-o-prefocus, .class {
background: #F00;
}

FireFox

@-moz-document url-prefix() {
.style {background: #F00;}
}

.class, noindex:-moz-any-link {
background:#f00;
}

.style, x:-moz-any-link {
background:#f00;
}

Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
.class {
background: #F00;
}
}

Safari

body:last-child:not(:root:root) .style {
background: #F00;
}

html[xmlns*=""] body:last-child .style {
background: #F00;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.class {
background: #F00;
}
}

IE6

.style {
_background: #F00;
}

* html .style {
background: #F00;
}

.style {
//background: #F00;
}

.style {
#background: #F00;
}

.class {
background:#F00 !ie;
}

IE7

.class {
background:#F00 !ie;
}

*+html .style {
background: #F00;
}

.style {
//background: #F00;
}

.style {
#background: #F00;
}

*:first-child+html .style {
background: #F00;
}

html>body .style {
*background: #F00;
}

IE8

@media \0screen {
.style {background: #F00;}
}

.style {
background:#F00\0/;
}

IE9

:root .style {
background: #F00\9;
}

Так же для браузера IE можно писать отдельные хаки или загружать специальные таблицы css вставив между тегами:

<head> 
...
<!--[if IE]>
Ваш стиль или ссылка на css
<![endif]--> - для всех версий IE
...
<!--[if IE 6]>
Ваш стиль или ссылка на css
<![endif]--> - для IE6
...
<!--[if IE 7]>
Ваш стиль или ссылка на css
<![endif]--> - для IE7
...
<!--[if IE 8]>
Ваш стиль или ссылка на css
<![endif]--> - для IE8
...
<!--[if IE 9]>
Ваш стиль или ссылка на css
<![endif]--> - для IE9
...
<!--[if lt IE 7]>
Ваш стиль или ссылка на css
<![endif]--> - для всех браузеров IE, версия которых меньше чем IE7
...
<!--[if lte IE 7]>
Ваш стиль или ссылка на css
<![endif]--> - для всех браузеров IE, версия которых меньше чем IE7, или такая же 
...
<!--[if gte IE 7]>
Ваш стиль или ссылка на css
<![endif]--> - для IE, версия которых больше или равна IE7
...
<!--[if gt IE 7]>
Ваш стиль или ссылка на css
<![endif]--> - для IE, версия которых больше IE7
...
</head>

Еще бывают случаи когда приходится разрабатывать сложный дизайн и все браузеры реагируют на него совершенно по разному. Для таких случаев наиболее удобно создавать под каждый браузер свой css файл со стилями, а загружать его с помощью такого кода:

<head>
...
<link rel="stylesheet" type="text/css" media="all" href="/css/<?php
$nav = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
if (stristr($nav, "firefox"))
{echo "firefoxonly.css";}// для браузера Mozila и FireFox
elseif (stristr($nav, "opera"))
{echo "template.css";}// для браузера Opera
elseif (stristr($nav, "safari"))
{echo "safari.css";}// для браузера Safari
elseif (stristr($nav, "chrome"))
{echo "chrome.css";}// для браузера Google Chrome
elseif (stristr($nav, "IE 6"))
{echo "ieonly.css";}// для браузера IE 6
elseif (stristr($nav, "IE 7"))
{echo "ie7only.css";}// для браузера IE 7
elseif (stristr($nav, "IE 8"))
{echo "ie8only.css";}// для браузера IE 8
elseif (stristr($nav, "IE 9"))
{echo "ie9only.css";}// для браузера IE 9
else
{echo "template.css";}// Для всех прочих браузеров
?>" />
...
</head>

Для каждого браузера создается свой css файл со стилями, не забудьте правильно прописать адреса до файлов.

Вендорные префиксы самых распространенных браузеров:

Вендорный префикс Производитель Браузер Браузерный движок
-o-, -op-, -xv- Opera Software Opera Presto
-moz- проект Mozilla Firefox, SeaMonkey, Camino и др. Gecko
-ms- Microsoft Internet Explorer 8 Trident
-khtml- проект KDE Safari до версии 3, Konqueror и др. KHTML
-webkit- Apple Safari 3+, Google Chrome и др. WebKit
-icab- Apple iCab WebKit

Пример написания:

border-radius:15px 0 15px 0; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления
-moz-border-radius:15px 0 15px 0; /* Firefox */
-webkit-border-radius:15px 0 15px 0; /* Safari, Chrome

Печать

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

Защитный код
Обновить