Переключение таблиц стилей в 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 {
...
}
И вот ко всему этому нужно будет приписать класс боди и растиражировать в одном файле? |
Цитата:
Цитата:
Областной админ и сотоварищи могут разослать всем подчинённым свои паллитры... На нашем форуме можно обменяться паллитрами с другими клиентскими областями... Для нас это наверное "внешние" пользователи... |
не, ну если в этих палитрах только цвета и бэкграунды проставлены... вообще-то мне сложно судить, я с такими штуками практически не сталкивался, но не люблю, чтобы стили элемента были разбросаны по файлам. Хотя если эти стили пользовательские, то они и должны за них отвечать, так что вроде ничего так получается
Цитата:
а, так ты типа хочешь предоставить пользователям возможность писать css-правила? Так они ж туда Но если им этого мало, то пусть учат css. Только я слабо верю в возможность сильно изменить сайт с помощью css. Css zen garden, конечно, круто, но не для всех сайтов подойдет |
Цитата:
Цитата:
Цитата:
Ну вроде как все перетёрли, т.ч. спасибо. :) |
Очень всё интересно, но я что-то не понял.
Вот к примеру создал я отдельные таблицы стилей для каждой цветовой схемы, каким скриптом-то их подменять? или... Все стили в одном файле. Как вписать в body класс? Возникла как раз такая потребность, так что это очень насущно. Буду крайне признателен за подсказку |
Ничего себе некропост...
|
Тему не читал - лень. Пример с jQuery: http://demo.russianpenguin.ru/webdev/css-theme_styling/.
|
| Часовой пояс GMT +3, время: 15:23. |