CSS Switch

[HeadShot]

Умеет переключать много разных css схем независимо друг от друга. Распознает разрешение экрана и автоматом цепляет нужный CSS.

Если вы заинтересованы в данной штуке, буду очень признателен за помощь c вариантами сеток. Есть потенциал довести решение до кондиции фреймворка.

Демо и вся документация тут: http://www.shift-web.ru/plugins/css_switcher/index.html

Edited February 5, 2012 by HeadShot

[lexxcode]

Есть такой вопрос. Вот ты позиционируешь свой плагин/фреймворк как замену @media-queries. А не правильней было бы сделать упор на создания альтернативы @media-queries только лишь для ущербных браузеров??

Т.к. все современные девайсы выходящие на рынок не имеют проблем с @media-queries. Боюсь, что вся эта затея может оказаться не особо востребованной.

Прошу понять, я не критикую идею, а просто задаю естественный вопрос, "А зачем оно нужно? Если это можно решить более естественным путем"

[HeadShot]

Решать это естественным путем нет смысла еще лет этак 3-4. И как вы могли заметить, альтернатива @media-queries — это лишь одна из опций. Почему не сделать упор на эмуляцию только для старья? Да потому, что это лютый изврат, которого я страюсь всеми силами избежать. Причины вам понятны, я надеюсь.

Verder подкинул идею с API для времени суток. У меня также есть планы сделать компилятор, который будет собирать разные схемы в одну и хранить их на стороне клиента. Идей вообще много.

На данном этапе я позиционирую это, как отдельное решение. В будущем, как частичка чего-то большего. Если честно, то просто не думал о том, будет ли она востребована. Сделал для себя и поделился с людьми.

Мне нравится путь наименьшего сопротивления и избежания баласта. Код либо работает, либо нет. Хватит костылей.

Edited February 5, 2012 by HeadShot

[lexxcode]

Ok. Я понял.

Я тут не особо глубоким поиском нашел список всевозможных мобильных девайсов и соответствующих им разрешением экранов, вдруг пригодится)

[HeadShot]

Ok. Я понял.

Я тут не особо глубоким поиском нашел список всевозможных мобильных девайсов и соответствующих им разрешением экранов, вдруг пригодится)

спасибо, думаю пригодится

[HeadShot]

Извините, сразу не смог под 6ку верстку поправить(у виртуалки пробник закончился, пришлось купить), сейчас демка работает везде.

Edited February 6, 2012 by HeadShot

[ablay2009]

Здравствуйте, как раз то, что надо! Предложение: Почему бы не сделать lite версии плагина или возможность выбирать необходимые функции самостоятельно, после чего получать код плагина. Мне, например, интересна возможность менять стили независимо друг от друга, но не нужна возможность эмулировать @media (понимаю, что имитация media queries - Это основная задача плагина, но все же)

Предложение номер два: можете ли вы портировать плагин на другие фреймворки (помимо jQuery)?

Edited February 6, 2012 by ablay2009

[HeadShot]

Здравствуйте, как раз то, что надо! Предложение: Почему бы не сделать lite версии плагина или возможность выбирать необходимые функции самостоятельно, после чего получать код плагина.

Можно, но после минификации это будет не очень ощутимо размеру. Все функции завязаны на одной логике и написаны так, что производительность не страдает(хотя и есть чего улучшить). Над конструктором подумаю.

Мне, например, интересна возможность менять стили независимо друг от друга, но не нужна возможность эмулировать @media (понимаю, что имитация media queries - Это основная задача плагина, но все же)

Как раз таки нет. Изначально идея была для переключения стилей и только.

Предложение номер два: можете ли вы портировать плагин на другие фреймворки (помимо jQuery)?

В прицнипе, могу переписать его на чистый JS. Вопрос лишь в свободном времени.

[ablay2009]

В прицнипе, могу переписать его на чистый JS. Вопрос лишь в свободном времени.

Вот это было бы вообще замечательно.

А ваш плагин может отключать один из стилей? То есть изначально у меня подключено два листа стилей (первый - мобильная версия, второй - стиль, добавляющий адаптивности) и чтобы люди могли выбрать подгружать ли второй стиль.

[HeadShot]

В прицнипе, могу переписать его на чистый JS. Вопрос лишь в свободном времени.

Вот это было бы вообще замечательно.

А ваш плагин может отключать один из стилей? То есть изначально у меня подключено два листа стилей (первый - мобильная версия, второй - стиль, добавляющий адаптивности) и чтобы люди могли выбрать подгружать ли второй стиль.

Стоило написать об этом подробнее. Стиль не грузится пока не будет явно определено разрешение, либо пока пользователь не выберет нужный. Т.е. они как бы все готовы и все прописаны в документ, но фактической загрузки сразу-же не происходит. После того, как схема первый раз активировалась, стиль уже будет лежать в кэше.

Если верстать аккуратно и с головой, то это очень не ощутимо т.к. дополнительные css должны описывать минимум изменений.

Edited February 7, 2012 by HeadShot

[ablay2009]

Стоило написать об этом подробнее. Стиль не грузится пока не будет явно определено разрешение, либо пока пользователь не выберет нужный. Т.е. они как бы все готовы и все прописаны в документ, но фактической загрузки сразу-же не происходит. После того, как схема первый раз активировалась, стиль уже будет лежать в кэше.

Если верстать аккуратно и с головой, то это очень не ощутимо т.к. дополнительные css должны описывать минимум изменений.

В том то и дело, что дополнительный стиль у меня большой и вносит огромные изменения (дело в том, что я верстал по принципу mobile first) и нужно чтобы он подгружался изначально, но потом его можно было бы отключить. Не понимаю как это реализовать.

[HeadShot]

Стоило написать об этом подробнее. Стиль не грузится пока не будет явно определено разрешение, либо пока пользователь не выберет нужный. Т.е. они как бы все готовы и все прописаны в документ, но фактической загрузки сразу-же не происходит. После того, как схема первый раз активировалась, стиль уже будет лежать в кэше.

Если верстать аккуратно и с головой, то это очень не ощутимо т.к. дополнительные css должны описывать минимум изменений.

В том то и дело, что дополнительный стиль у меня большой и вносит огромные изменения (дело в том, что я верстал по принципу mobile first) и нужно чтобы он подгружался изначально, но потом его можно было бы отключить. Не понимаю как это реализовать.

DOM -> таймер -> foreach( отключаем все кроме одного актуального ). Но это шляпа, будет медленно и дизайн будет танцевать. Видимо пересмотреть подход к организации каскадных таблиц. Обычно, для мобильников все лишнее делают в display: none и чуть манипулируют размерами контейнеров. Этого вполне достаточно.

[ablay2009]

DOM -> таймер -> foreach( отключаем все кроме одного актуального ). Но это шляпа, будет медленно и дизайн будет танцевать. Видимо пересмотреть подход к организации каскадных таблиц.

Спасибо, учту.

Обычно, для мобильников все лишнее делают в display: none и чуть манипулируют размерами контейнеров. Этого вполне достаточно.

Но ведь пихать мобильникам стиль заданный с помощью медиа запросов бессмысленно, тогда модели со старыми браузерами вообще не увидят этих стилей и будут подгружать десктопную версию. А если сперва сверстать для мобил, а потом добавить функционала десктопам с помощью медиа запросов, то старые браузеры увидят урезанную версию, а новые человеческую. У меня так и сделано - первый файл содержит стили для мобильников, второй для планшетов/десктопов.

[HeadShot]

DOM -> таймер -> foreach( отключаем все кроме одного актуального ). Но это шляпа, будет медленно и дизайн будет танцевать. Видимо пересмотреть подход к организации каскадных таблиц.

Спасибо, учту.

Обычно, для мобильников все лишнее делают в display: none и чуть манипулируют размерами контейнеров. Этого вполне достаточно.

Но ведь пихать мобильникам стиль заданный с помощью медиа запросов бессмысленно, тогда модели со старыми браузерами вообще не увидят этих стилей и будут подгружать десктопную версию. А если сперва сверстать для мобил, а потом добавить функционала десктопам с помощью медиа запросов, то старые браузеры увидят урезанную версию, а новые человеческую. У меня так и сделано - первый файл содержит стили для мобильников, второй для планшетов/десктопов.

Для моделей с совсем старыми браузерами нужно все таки делать отдельную версию. Здесь стоит вопрос в целесообразности. Вряд-ли обладатель телефона с разрешением экрана 200х300 будет заинтересован в вашем сайте. Это просто звонилка.

Большинство современных устройств позволяют сделать иначе и число их будет расти, а разрешения экранов становится если не больше, то всякие масштабировании точно будут прогрессировать. Где-то тут был ролик на тему прототипа айфона с проектором.

[HeadShot]

В общем поигрался с плагином, потестил скорость реакции. Для IE показатели очень хорошие, если ваш макет был грамотно свестран.

Тест проводил из под вируалки с ограниченными ресурсами и 512мб памяти.

В забеге участвовали перекрытия 20 селекторов по приоритетам(т.е. оверрайд через родителя и никаких богомерзких !important);

Забег осуществлялся браузерами IE6 и IE8.

Показатели обалденные при учете не слишком идеального расположения кода вызова. Переключение происходит очень прозрачно и я даже не смог уследить на глаз момента, когда нужна схема задействуется.

Что касается современных браузеров, то там тоже все хорошо, если вы не используете слишком обширно CSS3. Я пробовал биндить transition на элементы которые должны менять размеры — работает шустренько и весьма гладко, выглядит забавно. Думаю в будущем эта опция будет на уровне автоматики.

Есть еще один способ оттянуть ближе к нулю момент срабатывания переключателя(думаю, можно кэшить все что вывелось в head сплошным блоком и не заставлять движок каждый раз все пересчитывать). Как раз для ситуации с большим количеством CSS3.

Вариант наверное не совсем идеальный, но башка может оказаться большой. Чтобы избежать лишних пробежек придумал так: создаем фэйковый контейнер, например

<cssshemas>
</csssschemas> 

пишем ему display:none и линки уже клеим в него. после первого срабатывания и по каждому следующему переключению, все содержимое в HTML виде кладем в хранилище. Таким образом следующие загрузки будут сразу выталкивать из кэша готовую схему. Немного не валидно, но это же динамически происходит, а для head природных контейнеров не придумали.

Что стоит отметить? Этот вариант все же больше подходит для аккуратной верски(не для таблиц ибо это смерть рендера). Также организовывать обращения лучше по типу root -> id -> class | element | type. Сделаю пару примеров такой верски со схемами для CSS Switcher.

Собсно, если есть идеи — выслушаю пожелания.

Edited February 10, 2012 by HeadShot