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

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

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

<!--[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?

Спасибо!

источник

2009-06-03 marcgg

Я люблю то, как вы можете определить опера в JavaScript если (window.opera) {/ * опера конкретные действия * /} Может быть, вы могли бы использовать это, чтобы добавить определенный стиль для него. Я не знаю о Google Chrome. –

Спасибо, если я не могу понять способ сделать конкретный CSS, это поможет – marcgg

Почему вы не можете возиться с JavaScript?Если вы не можете коснуться файла JavaScript, можете ли вы переопределить функцию или две из них с помощью собственного кода? – Nosredna

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

It объявления браузера конкретных классов для тела тега вашего HTML, которые вы можете использовать в вашем CSS, как:

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

Надеется, что это помогает.

источник

2009-06-03 19:13:28

Это не совсем то, что я искал, но это довольно чистый подход, поскольку, по-видимому, нет чистого метода CSS для этого. Благодаря! – marcgg

Это может быть не «чисто», но оно решает проблему! Благодарю. – fmz

замечательный :-) :-) –

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

источник

2009-06-03 15:54:17 Lobstrosity

Он сказал, что может касаться только HTML и CSS, но не JavaScript. – Nosredna

Как я его читаю, он не может изменять внешние файлы JavaScript, которые выполняют фактическую замену шрифта, но если он может редактировать HTML, он всегда может добавить тег скрипта :) – Lobstrosity

Да, я могу, но я бы предпочел если это возможно. Если вы скажете мне, что это единственный способ, то ... Наверное, у меня нет других вариантов! – marcgg

Избегайте использования 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; 
    } 
}

Make CSS apply only for Opera 11?

How to make CSS visible only for Opera

Future proof CSS hack for LTE Opera 10

источник

2011-08-22 08:36:30 XP1

Хром один не работает для меня (версия 22.0.1229.94 м) –

для 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.

источник

2011-10-01 12:43:20

добавляет http-запрос – Brownrice

Просто помните, что: «User-Agent сниффинг 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, если я хорошо помню)

источник

2012-02-19 10:18:41 TwystO

.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 all versions)
.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}

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

источник

2013-06-28 07:13:16 Sabir

Спасибо, очень полезно – Denees

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

ответ

Смежные вопросы