Как сделать специальную таблицу стилей Chrome/Opera?

Мне нужно сделать chrome/opera хаки из-за замены шрифта script, который хочет клиент, который ломает вещи... это печально, но все работает в IE6-7, FF2- 3 и Safari. У меня нет возможности фиксировать сам script, я могу только взломать его с помощью CSS и HTML.

Я пытаюсь сделать что-то в строках:

<!--[if IE 6]>
   <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->

Возможно ли это?

Я видел этот способ выполнения хром конкретных исправлений, например:

body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

Это работает? Есть ли более простой способ? Как насчет Opera?

Спасибо!

Ответ 1

Чистый javascript способ сделать это: http://rafael.adm.br/css_browser_selector/

Он рекламирует определенные классы браузеров телу body вашего html, который вы можете использовать в своем CSS, например:

.opera #thingie, .chrome #thingie {
  do: this;
}

Надеюсь, что это поможет.

Ответ 2

Избегайте взлома CSS. Они сломаются.

Google Chrome:

@media not all and (-webkit-min-device-pixel-ratio:0)
{  
    #example
    {
        width: 200px;
    }
}

Safari:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #example
    {
        width: 200px;
    }
}

Opera:

@media not screen and (1)
{
    #example
    {
        width: 200px;
    }
}

Сделать CSS применимым только для Opera 11?

Как сделать CSS видимым только для Opera

Будущее доказательство CSS hack для LTE Opera 10

Ответ 3

для Google (и Safari) вы можете просто использовать следующее:

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />

это загрузит специфический стиль webkit. "Тип" может быть назван как угодно, но должен быть включен.

Вы просто продолжаете и создаете свою таблицу стилей, как вам заблагорассудится, и все браузеры, отличные от веб-сайтов, просто игнорируют ее.

Вам нужно будет использовать хаки выше для Opera. Для меня лучше всего работало:

@media not screen and (1)
    {
    #example
    {
    width: 200px;
    }
}

Я использовал его для загрузки объявлений, специфичных для браузера @font-face.

Ответ 4

Я не тестировал это решение, но, согласно этой записи в блоге, вы можете попробовать следующее для Chrome:

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
{
     var chromeCss = document.createElement("link");

     chromeCss.rel = "stylesheet";
     chromeCss.href = "ChromeStyle.css";

     document.getElementsByTagName("head")[0].appendChild(chromeCss);
}

Ответ 5

.ie - Internet Explorer (все версии)
.ie10 - Internet Explorer 10.x
.ie9 - Internet Explorer 9.x
.ie8 - Internet Explorer 8.x
.ie7 - Internet Explorer 7.x
.ie6 - Internet Explorer 6.x
.ie5 - Internet Explorer 5.x
.gecko - Firefox (все версии), Camino, SeaMonkey
.ffxx - Firefox xx (изменение xx с номером конкретной версии) new
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (все версии)
.opera12 - Opera 12.x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - Opera 8.x
.konqueror - Konqueror
.webkit - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome - Google Chrome (все версии)
.chromexx - Chrome xx (изменение xx с номером конкретной версии) new
.safari - Safari (все версии) new
.iron - SRWare Iron

[Код ОС]. [Код браузера].yourclass {padding-left: 5px; font-size: 14px}

body {background-color: # 000}
.ie8 body {background-color: # 111} (Специфично для Internet Explorer 8.x)
.win.ie8 body {background-color: # 222} (Спецификация для Internet Explorer 8.x, в Microsoft Windows всех версий)
.opera body {background-color: # 333} (Opera все версии)
.ff15 body {background-color: # 444} (Конкретно для Firefox 15.x)
.linux.gecko body {background-color: # 555} (Firefox, Camino, SeaMonkey все версии, на x11 и Linux)

.ie7 #right,.ie7 #left {width: 320px}

Для получения дополнительной информации посетите эту ссылку http://cssbs.altervista.org/

Ответ 6

Просто помните, что: "Обнюхание пользователя-агента - baaaddd"

Это не будет и никогда не будет хорошей практикой.

Это просто боль в заднице, чтобы поддерживать сайт, на котором выполняется обнюхивание User-Agent.

Вы должны предпочесть разделенные таблицы стилей или css-хаки, если они находятся в малом количестве, или если у вас нет времени на создание нескольких таблиц стилей.

Для Opera вы можете использовать этот трюк:

@media all and (-webkit-min-device-pixel-ratio:10000),
    not all and (-webkit-min-device-pixel-ratio:0) { 
     #id {
         css rule;
     }
 }

И, к сожалению, все хаки Chrome css также применяются к Safari.

Невозможно отделить 2 визуализации, за исключением старых версий Safari (< = safari3, если я хорошо помню)