Мне нужно сделать 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?
Спасибо!
Чистый javascript способ сделать это: http://rafael.adm.br/css_browser_selector/
Он рекламирует определенные классы браузеров телу body вашего html, который вы можете использовать в своем CSS, например:
.opera #thingie, .chrome #thingie {
do: this;
}
Надеюсь, что это поможет.
Избегайте взлома 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?
для 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.
Я не тестировал это решение, но, согласно этой записи в блоге, вы можете попробовать следующее для 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
Для получения дополнительной информации посетите эту ссылку 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, если я хорошо помню)