Переключение таблиц стилей в js
Здравствуйте, всем.
Делаю переключение таблиц стилей с целью смены цветовой гаммы на сайте. Сайт - www.sivash-terminal.com Как-то оно все себя очень нестабильно ведет. Не нравиться. Думаю, что стоит подгружать фоном как-нить используемые картинки и стили. Скриптов на сайте много, они работают при переключении с попеременным успехом. От чего зависит - непонятно. В общем, хотелось бы услышать авторитетное мнение. ЗЫ Под осла костыли не ставил пока, да и вообще на кросс-браузерность не проверял. |
Цитата:
|
не надо отдельный css под каждый цвет. Назначаешь body класс red, green или blue, а в css пишешь стили в зависимости от текущего класса body
|
x-yuri, в чем выигрыш?
|
ну как, хотя бы: зачем javascript, если это намного проще делается с помощью css? Кроме того: зачем подгружать css при переключении, если можно его не подгружать?
и еще, используй css-спрайты |
x-yuri, все равно в цсс классы пишешь... В боди значение класа меняешь...
Я не про JS... Я про разные цсс файлы и про подмену имени цссного файла серверным скриптом. Ведь при смене класса в боди (если управлять только этим) сами селекторы в одном цсс усложнятся... Или я опять не понял твою идею? Можеш примерчиком проиллюстрировать? |
сами селекторы усложняются в ответ на усложнение условий задачи: появилась необходимость менять цвет сайта
кроме того, когда ты пишешь $('link[rel=stylesheet]').attr('href', '...') ты фактически говоришь браузеру: "то, как выглядела страница до сих пор... это все неправильно. Отмени все предыдущие стили, а новые возьми из другого файла". В моем случае, браузер корректирует только нужные моменты, а не весь css давай пример, на всякий случай
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style type="text/css">
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a {
color: #36f;
}
ul {
overflow: hidden;
zoom: 1;
}
li {
list-style-type: none;
float: left;
margin-right: 20px;
}
body.red p.first {
background: #c33;
}
body.green p.first {
background: #3c3;
}
body.blue p.first {
background: #33c;
}
</style>
</head>
<body class="red">
<ul>
<li><a class="red" href="#">красный</a>
<li><a class="green" href="#">зеленый</a>
<li><a class="blue" href="#">синий</a>
</ul>
<script type="text/javascript">
$('a').click(function(){
document.body.className = this.className;
return false;
});
</script>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non tortor nibh, in varius ipsum. Maecenas leo elit, tincidunt vel iaculis eu, eleifend nec libero. Praesent scelerisque, dolor ultricies pellentesque sodales, tortor leo tempor leo, tristique tincidunt velit augue ut nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras rutrum mi vitae lacus pharetra egestas. Aenean dignissim nisi ac urna blandit interdum. In molestie mattis nulla et accumsan. Nunc posuere dapibus eros non tempus. Vestibulum quis mi turpis, ut fermentum metus. Proin eleifend congue eleifend. Proin consequat feugiat egestas. Nunc diam turpis, porta posuere sollicitudin id, volutpat vel augue.
<p class="second">Vestibulum dapibus nibh quis tellus convallis sed dapibus quam volutpat. Mauris tortor mauris, mattis vel sodales vitae, gravida sit amet nulla. Curabitur risus nulla, sagittis eget auctor eget, tincidunt vitae justo. Integer bibendum magna et elit pharetra congue. Nunc volutpat gravida massa, in laoreet leo aliquet ut. In nisl est, pellentesque sed tempus euismod, dictum non massa. Suspendisse interdum sodales nibh sit amet adipiscing. Aliquam quis est vitae sapien dignissim auctor vitae ac dolor. Maecenas venenatis commodo odio in suscipit. Quisque a libero nulla, accumsan tempus elit. Pellentesque quis odio ipsum. Nam vel purus id justo bibendum auctor et eu dui. Aenean sit amet metus id elit congue sollicitudin. Nullam dui quam, posuere dictum aliquam id, mollis ac odio. Sed sagittis, ipsum vulputate feugiat feugiat, nisi felis aliquam sapien, nec ullamcorper urna tellus non felis. Integer eu urna nec nulla commodo ultrices. Praesent non gravida enim.
</body>
</html>
|
Цитата:
Разбивка на файлы (цветовые) будет вроде как проще... Т.е. у нас пока используется единый файл со структкрой/расстановкой элементов и несколько цветовых, типа паллитры. :D Т.о. меняются только паллировые цссы... Пользователь имеет возможность делать свои паллитры и использовать их... При этом структура страницы неизменна. А при едином файле такое вроде как сильно усложнится даже визуально... Цитата:
|
Цитата:
Цитата:
Цитата:
кроме того, при замене css, браузер подгружает файл из сети. И будет заметно отключение стилей, по-крайней мере в первый раз. Проводя аналогию с картинками, эту проблему (в частности) решают css-спрайты Цитата:
таким образом, если палитр много, их можно поместить в отдельные файлы. Но в любом случае подключать все таблицы стилей, а правила писать в зависимости от класса body. Agree? Цитата:
|
Цитата:
Но как вариант, частенько используются перечисляемые
#d1,
#d2,
#d3 {
...
}
Такие сочетания
#menu > li + li {
...
}
И вот ко всему этому нужно будет приписать класс боди и растиражировать в одном файле? |
| Часовой пояс GMT +3, время: 12:17. |