Как написать конкретный CSS для Mozilla, Chrome и IE - PullRequest
Новая
       14

Как написать конкретный CSS для Mozilla, Chrome и IE

20 голосов
/ 02 декабря 2010

Какой условный оператор CSS можно использовать для включения определенного CSS для IE, Mozilla, Chrome.

If IE  
#container { top: 5px; }  

If Mozilla 
#container { top: 7px; }    

If Chrome  
#container { top: 9px; }

Какими будут соответствующие «если»?

Ответы [ 9 ]

35 голосов
/ 02 декабря 2010

Для этого

  • Вы можете сканировать пользовательский агент и узнать, какой браузер, его версия. Включая ОС для определенных стилей ОС
  • Вы можете использовать различные CSS-хаки для конкретного браузера
  • Или скрипты или плагины для идентификации браузера и применения различных классов к элементам

Использование PHP

См

Затем создайте динамический файл 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/

Если вы хотите использовать плагин, тогда вот один

http://rafael.adm.br/css_browser_selector/

8 голосов
/ 02 декабря 2010

Вы можете использовать php, чтобы отобразить имя браузера как класс body, например, 

<body class="mozilla">

Тогда ваш условный CSS будет выглядеть как 

.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}
3 голосов
/ 28 января 2011

Для чистого кода вы можете использовать файл 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
}
2 голосов
/ 02 декабря 2010

Поскольку у вас также есть PHP в теге, я собираюсь предложить несколько вариантов на стороне сервера.

Самое простое решение - это то, что большинство людей предлагают здесь.Проблема, с которой я обычно сталкиваюсь, заключается в том, что она может привести к тому, что ваши CSS-файлы или теги

1 голос
/ 02 декабря 2010

вы можете использовать этот код в вашем CSS-файле: 

 -webkit-top:9px;  
-moz-top:7px; 
top:5px;

код -webkit-top: 9px;для chrome, -moz-top: 7px для mozilla, а последний для IE.Веселитесь !!!

1 голос
/ 02 декабря 2010

Подход Пола Айриша к CSS для IE - самый элегантный из всех, что я видел.Он использует условные операторы для добавления классов к элементу HTML, которые затем можно использовать для применения соответствующей CSS-версии, соответствующей конкретной версии IE, без использования хаков.CSS проверяет, и он будет продолжать работать дальше для будущих версий браузера.

Полную информацию о подходе можно увидеть на его сайте .

Этоне распространяется на браузерные хаки для Mozilla и Chrome ... но я все равно не нахожу, что они мне нужны.

0 голосов
/ 10 июля 2013

Поместите свой CSS в следующий скрипт и вставьте его в свой файл CSS.

@ media screen и (-webkit-min-device-pixel-ratio: 0) { ваш полный стиль CSS}

Например: @media screen и (-webkit-min-device-pixel-ratio: 0) {container {margin-top: 120px;}}

Работает какочарование.

0 голосов
/ 22 мая 2013

Проверить эту ссылку: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

2 CSS-правила, специфичные для Explorer (хаки IE CSS)

Другой вариант - объявить правила CSS, которые могут быть прочитаны только Проводником. Например, добавьте звездочку (*), прежде чем свойство 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 */

}

0 голосов
/ 02 декабря 2010

используйте детектор агентов, а затем с помощью веб-языка создайте программу для создания CSS

например в питоне 

csscreator()
    useragent = detector()
    if useragent == "Firefox":
         css = "your css"
    ...
    return css
...