как загрузить css из javascript
Всем привет!
Столкнулся с такой проблемой, что в отображение стилей в разных браузерах происходит по разному. Ну например в Опере и в Фоксе все ровно, а вот в IE кривовато выводятся стили. Решил для каждого браузера подгружать свою таблицу стилей. С определением типа браузера разобрался, но вот не получается загрузить нужный мне стиль.
<script>
var ua = navigator.userAgent.toLowerCase();
// Определим Internet Explorer
isIE = (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1);
// Opera
isOpera = (ua.indexOf("opera") != -1);
// Gecko = Mozilla + Firefox + Netscape
isGecko = (ua.indexOf("gecko") != -1);
// Safari, используется в MAC OS
isSafari = (ua.indexOf("safari") != -1);
// Konqueror, используется в UNIX-системах
isKonqueror = (ua.indexOf("konqueror") != -1);
// Простая проверка с помощью document.write
document.write(
"isIE = " + isIE + "<br>" +
"isOpera = " + isOpera + "<br>" +
"isGecko = " + isGecko + "<br>" +
"isSafari = " + isSafari + "<br>" +
"isKonqueror = " + isKonqueror + "<br>"
);
if(isIE){
// Что нужно вписать сюда, что бы загрузить Таблица_стилей_для_ИЕ.css
}
else if(isGecko){
// Что нужно вписать сюда, что бы загрузить Таблица_стилей_для_FF.css
}
else if(isOpera)
// Что нужно вписать сюда, что бы загрузить Таблица_стилей_для_Opera.css
</script>
Подскажите плииз решение проблемы. Если мой подход в корне не правильный, то пожалуйста подскажите как такой вопрос решается другим путем. |
Используйте вместо этого условные комментарии IE!
|
GRean,
Если у пользователя будет отключён джаваскрпит, то стили не подгрузятся, для этих целей есть: Для Ie: <!--[if IE 6]><link href="styles.css" rel="stylesheet" type="text/css" /><![endif]--> Для Opera:
@media all and (min-width: 0) {
.style { background: #FF0; }
}
html:first-child .style {
background: #FF0;
}
Для Лисы, Сафари:
html:root .style {
background: #FA0;
}
.style, x:-moz-any-link {
background: #FA0;
}
|
Спасибо Вам!
Вот код, который мне помог:
<![if IE ]>
<link rel="stylesheet" type="text/css" href="IEStyle.css" />
<![endif]>
<![if !IE ]>
<link rel="stylesheet" type="text/css" href="FFStyle.css" />
<![endif]>
Думаю этого будет достаточно! Или этот код тоже требует javascript? |
GRean,
Цитата:
|
теперь проблема в том, что в лисе выполняются два условия, а в IE все как надо работает.
Объясните плииз как пользоваться этими хаками, что привел JsLoveR. Их надо просто скопировать в стили или по месту назначения в див пихать? |
<!--заверни условие для Ie в комментарии-->, так
<!--[if IE 6]><link href="styles.css" rel="stylesheet" type="text/css" /><![endif]-->и тогда в других браузерах, кроме Ие это условие не будет срабатывать |
Ах, да, забыл сказать, что хаки для других браузеров добавлять в CSS, например:
@-moz-document url-prefix() {
div.elem {color:red;}
}
|
IE тоже видит эти комментарии. Для примера сделал вот так :
<!-- <a>IE</a> --> |
<!-- --> Комментарии для html кода, в них добавляются условия для загрузки стилей IE, другие браузеры воспринимают это как комментарии, это условие добавляется обычно в <head></head> и если нету никакого условия внутри этих комментариев ничего происходить не будет.
|
| Часовой пояс GMT +3, время: 05:01. |