Какой условный оператор CSS вы можете использовать для включения определенного CSS для IE, Mozilla, Chrome.
If IE
#container { top: 5px; }
If Mozilla
#container { top: 7px; }
If Chrome
#container { top: 9px; }
Какими будут соответствующие «если»?
Для этого
Видеть
Затем создайте динамический файл 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/
http://rafael.adm.br/css_browser_selector/
Вы можете использовать php для отображения имени браузера как класса body, например.
<body class="mozilla">
Тогда ваш условный CSS будет выглядеть так:
.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}
$_SERVER['HTTP_USER_AGENT']
- person Emmett; 02.12.2010
Для чистого кода вы можете использовать файл 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
}
Поскольку у вас также есть PHP в теге, я собираюсь предложить некоторые варианты на стороне сервера.
Самое простое решение - это то, что большинство людей предлагают здесь. Проблема, с которой я обычно сталкиваюсь, заключается в том, что это может привести к тому, что ваши файлы CSS или теги ‹style› будут в 20 раз больше, чем ваши html-документы, и может вызвать замедление браузера при анализе и обработке тегов, которые он не может понять -moz-border-radius vs. -webkit-border-radius
Второе лучшее решение (я нашел) состоит в том, чтобы php выводил ваш фактический файл css, т.е.
<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 или PerlMapToStorageHandler из mod_perl для повторного сопоставления 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, а не делать main.<js engine>.js, и он будет нормально загружаться. то есть наличие файла main.js и main.jscript.js означает, что IE получает файл jscript, а все остальные получают js по умолчанию, то же самое с файлами css.
Подход Пола Айриша к специфическому для IE CSS — самый элегантный, который я когда-либо видел. Он использует условные операторы для добавления классов к элементу HTML, которые затем можно использовать для применения подходящего CSS для конкретной версии IE, не прибегая к хакам. CSS проверяется, и он будет продолжать работать в будущих версиях браузера.
Полную информацию об этом подходе можно увидеть на его сайте.
Это не распространяется на хаки, специфичные для браузера для Mozilla и Chrome ... но я все равно не считаю, что они мне нужны.
вы можете использовать этот код в своем файле css:
-webkit-top:9px;
-moz-top:7px;
top:5px;
код -webkit-top:9px; для chrome, -moz-top:7px для mozilla и последний для IE. Повеселись!!!
top реализовано везде: jsfiddle.net/2bRGb
- person m90; 20.09.2013
используйте детектор агентов, а затем с помощью вашего веб-языка создайте программу для создания css
например в питоне
csscreator()
useragent = detector()
if useragent == "Firefox":
css = "your css"
...
return css
Перейдите по этой ссылке: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
Другой вариант — объявить правила CSS, которые могут быть прочитаны только Проводником. Например, добавьте звездочку (*) перед тем, как свойство CSS будет нацелено на IE7, или добавьте подчеркивание перед тем, как свойство будет нацелено на IE6. Однако этот метод не рекомендуется, поскольку он не соответствует синтаксису CSS.
IE8 или ниже: чтобы написать правила CSS специально для IE8 или ниже, добавьте обратную косую черту и 9 (\9) в конце перед точкой с запятой. IE7 или ниже: добавьте звездочку (*) перед свойством CSS. IE6: добавьте подчеркивание (_) перед свойством. .коробка {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
Поместите свой css в следующий скрипт и вставьте его в свой файл CSS.
Экран @media и (-webkit-min-device-pixel-ratio:0) { ваш полный стиль CSS }
Например: @media screen and (-webkit-min-device-pixel-ratio:0) { container { margin-top: 120px;} }
Работает как шарм.
