13.01.2011, 17:29
|
|
Новичок на форуме
|
|
Регистрация: 16.10.2008
Сообщений: 8
|
|
|
Переключение таблиц стилей в js
Здравствуйте, всем.
Делаю переключение таблиц стилей с целью смены цветовой гаммы на сайте. Сайт - www.sivash-terminal.com
Как-то оно все себя очень нестабильно ведет. Не нравиться. Думаю, что стоит подгружать фоном как-нить используемые картинки и стили.
Скриптов на сайте много, они работают при переключении с попеременным успехом. От чего зависит - непонятно.
В общем, хотелось бы услышать авторитетное мнение.
ЗЫ Под осла костыли не ставил пока, да и вообще на кросс-браузерность не проверял. |
|
14.01.2011, 10:50
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Сообщение от t1gor
|
|
От чего зависит - непонятно
|
Оно всегда завист только от алгоритма тех изменений... "Само" ничего не делается... Если только у тебя это не искуственный интеллект.  |
|
14.01.2011, 11:04
|
 |
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
не надо отдельный css под каждый цвет. Назначаешь body класс red, green или blue, а в css пишешь стили в зависимости от текущего класса body
|
|
14.01.2011, 13:13
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
x-yuri, в чем выигрыш?
|
|
14.01.2011, 22:39
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
ну как, хотя бы: зачем javascript, если это намного проще делается с помощью css? Кроме того: зачем подгружать css при переключении, если можно его не подгружать?
и еще, используй css-спрайты
|
|
14.01.2011, 22:49
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
x-yuri, все равно в цсс классы пишешь... В боди значение класа меняешь...
Я не про JS... Я про разные цсс файлы и про подмену имени цссного файла серверным скриптом.
Ведь при смене класса в боди (если управлять только этим) сами селекторы в одном цсс усложнятся...
Или я опять не понял твою идею? Можеш примерчиком проиллюстрировать?
|
|
14.01.2011, 23:22
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
сами селекторы усложняются в ответ на усложнение условий задачи: появилась необходимость менять цвет сайта
кроме того, когда ты пишешь $('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>
Последний раз редактировалось x-yuri, 14.01.2011 в 23:28.
|
|
15.01.2011, 11:48
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Сообщение от x-yuri
|
|
сами селекторы усложняются в ответ на усложнение условий задачи
|
Просто есть сомнения что таким усложнением можно будет сделать невозможными или не понятными другим некоторые, и без того сложные, селекторы.
Разбивка на файлы (цветовые) будет вроде как проще... Т.е. у нас пока используется единый файл со структкрой/расстановкой элементов и несколько цветовых, типа паллитры.  Т.о. меняются только паллировые цссы...
Пользователь имеет возможность делать свои паллитры и использовать их... При этом структура страницы неизменна.
А при едином файле такое вроде как сильно усложнится даже визуально...
|
Сообщение от x-yuri
|
|
огда ты пишешь $('link[rel=stylesheet]').attr('href', '...') ты фактически говоришь браузеру: "то, как выглядела страница до сих пор... это все неправильно.
|
А когда меняю значение класс у боди, чего "говорю" браузеру? |
|
15.01.2011, 14:16
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от ksa
|
|
Просто есть сомнения что таким усложнением можно будет сделать невозможными или не понятными другим некоторые, и без того сложные, селекторы.
|
при адекватной верстке не должно быть сложных селекторов и добавление еще одного элемента в селектор ничего не изменит. Можно делать отступ для правил, зависящих от цвета
|
Сообщение от ksa
|
|
Разбивка на файлы (цветовые) будет вроде как проще...
|
возможно, тем что стили, зависящие от цвета, не будут путаться под глазами, особенно если их много
|
Сообщение от ksa
|
|
Пользователь имеет возможность делать свои паллитры и использовать их...
|
ты про "внешних" пользователей? Это другой случай, такие правила лучше писать в отдельные файлы, да
кроме того, при замене css, браузер подгружает файл из сети. И будет заметно отключение стилей, по-крайней мере в первый раз. Проводя аналогию с картинками, эту проблему (в частности) решают css-спрайты
|
Сообщение от ksa
|
|
А когда меняю значение класс у боди, чего "говорю" браузеру?
|
ты видно тот сайт не внимательно смотрел, там всего 3 css-файла (а не хотя бы 4), под 3 цвета
таким образом, если палитр много, их можно поместить в отдельные файлы. Но в любом случае подключать все таблицы стилей, а правила писать в зависимости от класса body. Agree?
|
Сообщение от ksa
|
|
и без того сложные, селекторы.
|
а можно примеры?
|
|
15.01.2011, 21:21
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Сообщение от x-yuri
|
|
а можно примеры?
|
Я пока веду теоретическую беседу...
Но как вариант, частенько используются перечисляемые
#d1,
#d2,
#d3 {
...
}
Такие сочетания
#menu > li + li {
...
}
И вот ко всему этому нужно будет приписать класс боди и растиражировать в одном файле? |
|
|
|
