Как написать определенный CSS для mozilla, chrome и IE
Каким будет условный оператор CSS, который вы можете использовать для включения определенного CSS для IE, Mozilla, Chrome.
If IE
#container { top: 5px; }
If Mozilla
#container { top: 7px; }
If Chrome
#container { top: 9px; }
Каковы будут соответствующие "Если"?
9 answers
Для этого
- Вы можете просканировать Агент пользователя и узнать, какой браузер, его версию. Включая ОС для конкретных стилей ОС
- Вы можете использовать различные CSS-хаки для конкретного браузера
- Или Скрипты или плагины для идентификации браузера и применения различных классов к элементам
Использование PHP
См.
- http://php.net/manual/en/function.get-browser.php
- http://techpatterns.com/downloads/php-browser-detection-basic.php
- http://techpatterns.com/downloads/php_browser_detection.php (также содержит JS)
Затем создайте динамический файл CSS в соответствии с обнаруженным браузером
Вот список взломов 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;}
Для чистого кода вы можете использовать файл 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
}
Подход Пола Айриша к специфическому CSS IE - самый элегантный из всех, что я видел. Он использует условные операторы для добавления классов к элементу HTML, которые затем можно использовать для применения соответствующего CSS для конкретной версии IE, не прибегая к взломам. CSS проверяется, и он будет продолжать работать в будущем для будущих версий браузера.
Полную информацию об этом подходе можно увидеть на его сайте.
Это не распространяется на специфические хаки браузера для Mozilla и Chrome... но я все равно не нахожу, что они мне действительно нужны.
Вы можете использовать этот код в своем css-файле:
-webkit-top:9px;
-moz-top:7px;
top:5px;
Код -webkit-top:9 пикселей; предназначен для chrome, -moz-top: 7 пикселей - для mozilla, а последний - для IE. Получайте Удовольствие!!!
Поскольку у вас также есть PHP в теге, я собираюсь предложить некоторые варианты на стороне сервера.
Самое простое решение - это то, которое большинство людей предлагают здесь. Проблема, с которой я обычно сталкиваюсь, заключается в том, что это может привести к тому, что ваши CSS-файлы или теги
Второе лучшее решение (которое я нашел) - это заставить 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, в safari, main.nitro.js, в firefox, main.gecko.js. Это позволяет выводить определенный javascript, который будет быстрее (меньше кода для тестирования браузера/тестирования функций). При условии, что разработчикам не нужно ориентироваться на конкретные цели и они могут написать main.js, а не создавать main.<js engine>.js, и это будет загружаться нормально. т.е. наличие файла main.js и файла main.jscript.js означает, что IE получает jscript, а все остальные получают js по умолчанию, то же самое с файлами css.
Используйте детектор агентов, а затем с помощью вашего веб-языка создайте программу для создания css
Например, в python
csscreator()
useragent = detector()
if useragent == "Firefox":
css = "your css"
...
return css
Проверьте эту ссылку: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
2 Правила CSS, специфичные для Проводника (т.Е. CSS-хаки)
Другой вариант - объявить правила 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.
@экран мультимедиа и (-webkit-минимальное соотношение пикселей устройства:0) { ваш полный стиль css }
Например: @экран мультимедиа и (-webkit-минимальное соотношение пикселей устройства: 0) {контейнер {поле-верх: 120 пикселей;}}
Работает как заклинание.