Как сделать таблицу стилей для Chrome / Opera? - PullRequest
Новая
       29

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

23 голосов
/ 03 июня 2009

Мне нужно взломать 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 ]

39 голосов
/ 03 июня 2009

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

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

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

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

14 голосов
/ 22 августа 2011

Избегайте 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 для LTE Opera 10

11 голосов
/ 01 октября 2011

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

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

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

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

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

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

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

3 голосов
/ 03 июня 2009

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

.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 номером конкретной версии), новый
.safari - Safari (все версии), новый
.iron - SRWare Iron

. [Код ОС]. [Код браузера] .yourclass {padding-left: 5px; размер шрифта: 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 всех версий) < br />.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/

0 голосов
/ 19 февраля 2012

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

...