Как сделать таблицу стилей для 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 */
}

Это работает? Есть ли более простой способ? Что насчет Оперы?

Спасибо!

Источник

6 ответов

Решение

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

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

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

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

Источник

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

Гугл Хром:

@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;
    }
}

Opera:

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

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

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

CSS для взлома на будущее для LTE Opera 10

Источник

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

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

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

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

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

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

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

Источник

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

.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; размер шрифта:14 пикселей

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/

Источник

Просто помните, что: "Пользовательский агент нюхает это 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, если я хорошо помню)

Источник
Другие вопросы по тегам