Каким будет условный оператор 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, т. Е.
<link rel="stylesheet" type="text/css" href="mycss.php">
где
<? PHP
header («Content-Type: text / css»);
if (preg_match ("/ chrome /", $ _SERVER ['HTTP_USER_AGENT'])) {
// выводить хром конкретный стиль css
} else {
// выводить стиль по умолчанию css
}
?>
Это позволяет вам создавать меньше, проще обрабатывать файлы для браузера.
Лучший метод, который я нашел, специфичен для Apache. Метод заключается в использовании mod_rewrite или mod_perl's PerlMapToStorageHandler для переназначения URL-адреса в файл в системе на основе механизма рендеринга.
скажем, ваш сайт http://www.myexample.com/ и он указывает на /srv/www/html . Для хром, если вы запрашиваете 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 а не делать main.<js engine>.js и он будет нормально загружаться. т.е. наличие main.js и 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 в следующий скрипт и вставьте его в свой файл CSS.
@media и (-webkit-min-device-pixel-ratio: 0) { ваш полный стиль css }
Например: экран @media и (-webkit-min-device-pixel-ratio: 0) {container {margin-top: 120px;}}
Работает как шарм.