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

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

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

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

это возможно?

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

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

Is это работает? Есть ли более простой способ? как насчет оперы?

спасибо!

23
css google-chrome opera specific-stylesheets

6 ответов

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

Это объявления браузера конкретных классов к тегу тела вашего html, который вы можете использовать в css, как:

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

надеюсь, что это помогает.

39

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

Google Chrome:

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

сафари:

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

Опера:

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

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

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

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

14

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

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

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

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

вам придется использовать хаки выше для оперы. Лучше всего мне работало следующее:

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

я использовал его для загрузки браузер-конкретный шрифт-лицо @деклараций.

11

Я не тестировал это решение, но согласно запись в блоге, вы можете попробовать следующее для 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);
}
3

.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
.ФФ2 - в Firefox 2.x
.opera-Opera (все версии)
.opera12 - опера 12.x
.opera11 - Опера 11.x
.opera10 - Опера 10.x
.opera9 - Опера 9.x
.opera8 - Опера 8.x
.konqueror-Konqueror
.webkit-Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome-Google Chrome (все версии)
.chromexx-Chrome xx (изменить xx с номером конкретной версии) new
.safari-Safari (все версии) new
.утюг - SRWare Железо!--24--> .[Код ОС].[Код браузера] .yourclass { padding-left:5px; font-size: 14px }

тело { фон-цвет:#000 }
.ИЕ8 тело {фонового цвета:#111 } (специфические для Интернет Эксплорер 8.х)
.выиграть.ИЕ8 тело { фонового цвета:#222 } (специфические для Интернет Эксплорер 8.x, в Microsoft Windows всех версий)
.Opera body { background-color:#333 } (все версии Opera)
.FF15 body { background-color:#444 } (специально для Firefox 15.x)
.Линукс.геккон body { background-color:#555 } (Firefox, Camino, SeaMonkey все версии, на x11 и Linux )

.ie7 #правильно,.ie7 #слева { ширина: 320px }

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

2

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

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

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

вы должны предпочесть отдельные таблицы стилей или 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 (

0