Каким будет условный оператор CSS, который вы можете использовать для включения определенного CSS для IE, Mozilla, Chrome.
If IE
#container { top: 5px; }
If Mozilla
#container { top: 7px; }
If Chrome
#container { top: 9px; }
Каким будет "If's"?
Для этого
См
Затем создайте динамический файл CSS в соответствии с обнаруженным браузером
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
Источник: http://paulirish.com/2009/browser-specific-css-hacks/
Вы можете использовать php для эхо-имени браузера в качестве класса body, например.
<body class="mozilla">
Затем ваш условный CSS будет выглядеть как
.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}
этот код можно использовать в файле css:
-webkit-top:9px;
-moz-top:7px;
top:5px;
код -webkit-top: 9px; для chrome, -moz-top: 7px для mozilla, а последний для IE. Удачи!!!
Для чистого кода вы можете использовать файл javascript здесь: http://rafael.adm.br/css_browser_selector/ Включив строку:
<script src="css_browser_selector.js" type="text/javascript"></script>
Вы можете написать следующий css со следующим простым шаблоном:
.ie7 [thing] {
background-color: orange
}
.chrome [thing] {
background-color: gray
}
Польский ирландский подход к IE-специфическому CSS - самый элегантный, который я видел. Он использует условные операторы для добавления классов в элемент HTML, которые затем могут использоваться для применения соответствующего CSS-версии IE, не прибегая к хакам. CSS проверяет, и он будет продолжать работать по очереди для будущих версий браузера.
Подробные сведения о подходе можно увидеть на его сайте.
Это не распространяется на браузерные хаки для Mozilla и Chrome... но я действительно не считаю, что мне это нужно.
Поскольку у вас также есть PHP в теге, я собираюсь предложить некоторые варианты на стороне сервера.
Самое простое решение - это то, что предлагает большинство людей. Проблема, которую я обычно имею в этом, заключается в том, что она может вызвать ваши файлы CSS или <style> теги будут в 20 раз больше, чем ваши html-документы, и могут привести к замедлению работы браузера для анализа и обработки тегов, которые он не может понять -moz-border-radius vs -webkit-border-radius
Вторым лучшим решением (я нашел) является то, что php выводит ваш фактический файл css i.e.
<link rel="stylesheet" type="text/css" href="mycss.php">
где
<?php
header("Content-Type: text/css");
if( preg_match("/chrome/", $_SERVER['HTTP_USER_AGENT']) ) {
// output chrome specific css style
} else {
// output default css style
}
?>
Это позволяет вам создавать меньше файлов для обработки файлов для браузера.
Лучший метод, который я нашел, специфичен для Apache. Метод заключается в использовании mod_rewrite или mod_perl PerlMapToStorageHandler для переназначения URL-адреса в файл в системе на основе механизма рендеринга.
скажите, что ваш сайт http://www.myexample.com/, и он указывает на /srv/www/html. Для chrome, если вы запрашиваете main.css, вместо загрузки /srv/www/html/main.css он проверяет, есть ли /srv/www/html/main.webkit.css, и если он существует, он выгружает это, иначе он выведет main.css. Для IE он пытается main.trident.css, для firefox он пытается main.gecko.css. Как и выше, это позволяет мне создавать более мелкие, более целенаправленные, css файлы, но это также позволяет мне лучше использовать кеширование, так как браузер попытается повторно загрузить файл, а веб-сервер представит браузер с надлежащим количеством 304, чтобы сообщить об этом, вам не нужно его перезагружать. Это также позволяет моим веб-разработчикам немного больше свободы, не для того, чтобы им пришлось писать код на целевые платформы. У меня также есть .js файлы, которые перенаправляются на javascript-движки, а для main.js в chrome он пытается main.v8.js, в сафари, main.nitro.js, в firefox, main.gecko.js. Это позволяет выводить определенный javascript, который будет быстрее (меньше тестирования/тестирования кода браузера). Конечно, разработчикам не нужно настраивать таргетинг и писать main.js, а не make main.<js engine>.js, и он будет нормально загружаться. то есть с файлом main.js и a main.jscript.js означает, что IE получает jscript one, а все остальные получают js по умолчанию, то же самое с css файлами.
использовать агент-детектор, а затем с помощью вашего веб-языка создать программу для создания css
например, в python
csscreator()
useragent = detector()
if useragent == "Firefox":
css = "your css"
...
return css
Посмотрите эту ссылку: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
Другой вариант - объявить правила CSS, которые могут быть прочитаны только Explorer. Например, добавьте звездочку (*), прежде чем свойство CSS будет нацелено на IE7 или добавит знак подчеркивания, прежде чем свойство будет нацелено на IE6. Однако этот метод не рекомендуется, поскольку они не являются допустимым синтаксисом CSS.
IE8 или ниже: для написания правил CSS в частности для IE8 или ниже, добавьте обратную косую черту и 9 (\ 9) в конце до точки с запятой. IE7 или ниже: добавьте звездочку (*) перед свойством CSS. IE6: добавьте символ подчеркивания (_) перед свойством. .box {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
Поместите свой css в следующий script и вставьте его в свой CSS файл.
экран @media и (-webkit-min-device-pixel-ratio: 0) { ваш полный стиль css}
Например: @media и (-webkit-min-device-pixel-ratio: 0) {container {margin-top: 120px;}}
Работает как шарм.