HeadShot

Решать это естественным путем нет смысла еще лет этак 3-4. И как вы могли заметить, альтернатива @media-queries — это лишь одна из опций. Почему не сделать упор на эмуляцию только для старья? Да потому, что это лютый изврат, которого я страюсь всеми силами избежать. Причины вам понятны, я надеюсь. Verder подкинул идею с API для времени суток. У меня также есть планы сделать компилятор, который будет собирать разные схемы в одну и хранить их на стороне клиента. Идей вообще много. На данном этапе я позиционирую это, как отдельное решение. В будущем, как частичка чего-то большего. Если честно, то просто не думал о том, будет ли она востребована. Сделал для себя и поделился с людьми. Мне нравится путь наименьшего сопротивления и избежания баласта. Код либо работает, либо нет. Хватит костылей.

Умеет переключать много разных css схем независимо друг от друга. Распознает разрешение экрана и автоматом цепляет нужный CSS. Если вы заинтересованы в данной штуке, буду очень признателен за помощь c вариантами сеток. Есть потенциал довести решение до кондиции фреймворка. Демо и вся документация тут: http://www.shift-web.ru/plugins/css_switcher/index.html

Дизайн нравится!

Логи молчат?

Работаю больше года под Хакинтошем. Один раз довел до стабильного состояния и больше к этому вопросу не возвращался. А как с обновлениями? )))))

Здесь одной ступеньки не хватает, если в идеале. Так что между совсем мобильными и не совсем( планшетки ). Но угадать в какой диапазон — затруднительно.

API: /* * [Arguments]: * * @group: css properties group e.g. color, font or layout; * @path: path to advanced stylesheets (every group need a different path); * @range: number of styles from 1 to n; * @controls: ul, menu, plain, div, where plain = <span> wrapper; * @debug: 1 for randomization query ( some.css?random ). * * @grid: enable advanced schema's for layout by screen resolution; * [auto]: no controls & auto switch; * [handle]: enable controls menu; * * @step: allow 3 of 5 switch schema's; * * [mob]: mobile ( 480px - 960px ); * * * (!)choose only one of two way: * [smin]: station ( 1024px - 1280px ); * [smax]: station ( 1024px - 1440px ); * * (!)choose only one of two way: * [wmin]: big screens ( 1280px - more ); * [wmax]: big screens ( 1440px - more ); * * If you use the grid mode be sure that you css has correct names( e.g. mob.css, smax.css, wmin.css ) * and allocated in different directory; * * [Grid mode API syntax example]: * * // all schema's with handle controls( handle was helpful on debug ) * // maximum width variant * $('#content').cssSwitcher({ * grid: 'handle', * step: 'mob|smax|wmax', * path: '/schemas/grids/', * controls: 'ul' * }); */ Вообще да, думаю, что можно сделать проще, но как пока не знаю. Кароче нужно просто максимальные и минимальные варианты объединить в один case. Но не факт, что так гибче

да как-то неправильно мне кажется

У кого-то есть идеи как сделать это проще? Я чего-то буксую. Plugin.prototype.resolution = function ( probe ) { //screen resolution detector resolutionGrid = ''; dWidth = window.screen.width; switch( probe ) { //@mobile default: case 'mob': if ( dWidth >= 480 && dWidth <= 960 ) { resolutionGrid += 'mobyle'; } break; //@station case 'smin': if ( dWidth >= 1024 && dWidth <= 1280 ) { resolutionGrid += 'station_min'; } break; case 'smax': if ( dWidth >= 1024 && dWidth <= 1440 ) { resolutionGrid += 'station_max'; } break; //@wide case 'wmin': if ( dWidth > 1280 ) { resolutionGrid += 'wide_min'; } break; case 'wmax': if ( dWidth > 1440 ) { resolutionGrid += 'wide_max'; } break; } return resolutionGrid; };

Да просто вопрос не так прост как кажется А вообще да, правильная формулировка - половина решения.

Спасибо. Это все замечательно, но как-то неупотребимо В данном отношении @media-queries таки рулят своей простотой. Немного парит ситуация с поворотами экрана.

Приветствую. Пытаюсь собрать актуальную наиболее полную таблицу соответствий существующих, актуальных разрешений экрана и их соотношения к рабочему пространству. Кто-то видел подобное? Интересуют все устройства от смартфонов до настольных мониторов со всеми возможными вариациями. Возможно пригодятся и мобильные из не слишком допотопных. Хочу сгруппировать в 3-4 секции и прикрутить к плагину. Что-то на подобие fallback @media-queries. Проблема в том, что сетку для CSS я нашел, но она не годится т.к. пороги ступеней определены по другим параметрам согласно нынешним тенденциям responsive design. Вот что мне удалось накопать: NoteBooks, Laptops, MacBook: [ 1117, 1024, 1120, 1152, 1192, 1229, 1280, 1291, 1333, 1360, 1366, 1376, 1440, 1493, 1525, 1536, 1540, 1600, 1680, 1776, 1920 ] iPad, iPhone, Nexus, Meisu и т.д.: [ 200, 228, 231, 234, 240, 480, 720, 747, 800, 960, 980, 983 ] Кирпичи-звонилки: [] Собственно, в первой группе я не уверен, но наверное стоит дополнить. Получать параметр хочу по window.screen.width и отталкиваясь от него манипулировать уже группой, которой он относится. Приму в дар ссылки на интересные решения по этой теме и выслушаю идеи того, как это можно сделать более элегантно. В общем-то меня интересует есть ли фикс-гриды на то, что больше 1200. Щас есть только grid на 1140. Это потолок, а резина на таких разрешениях получается полным УГ.

Переписал. /** -=[ CSS Switcher jQuery plugin version 1.1 ]=- * * [What is the CSS Switcher?]: * * CSS Switcher plugin intended to build interactive sites with flexible design. * Using this you can allow user to modify color schemas, font and layout variants. * Switcher have a memory function based on local storage and can be used in multiple mode. * * [Arguments]: * * @group: css properties group e.g. color, font or layout; * @path: path to advanced stylesheets (every group need a different path); * @range: number of styles from 1 to n; * @controls: ul, menu, plain, div, where plain = <span> wrapper; * @debug: 1 for randomization query ( some.css?random ). * * [Usage example for single mode]: * * $('#content').cssSwitcher({ * path: '/pathToCSS/', * controls: 'ul', * range: 3 * }); * * * [Usage example for multiply mode]: * * $('#content').cssSwitcher({ * group: 'fonts', * path: '/pathToCSS/', * range: 3, * }); * * [Usage example in debug mode]: * * Sometimes you need to test your color schemas before connect layout. The browser will chache every CSS. * To prevent this effect use @debug argument in plugin call & every stylesheet * will have a random query in link href. * * $('#content').cssSwitcher({ * group: 'fonts', * path: '/pathToCSS/', * range: 3, * debug: 1 //call with debug * }); * * [About this]: * * @autor: FroZen Code: www.Shift-Web.ru * @license: CC-BY-SA 3.0 * @version: 1.1 * **/ ;(function ( $, window, document, undefined ) { //Create the defaults var pluginName = 'cssSwitcher', defaults = { controls: 'ul', //default element style merge: false, //merge controls to one wrapper? path: '/schemas/base/', //path to schemas folder dest: 'prepend', //prepend, append, before, after group: 'base', //schema group prefix range: 0, //number of styles in schema debug: 0, //unify parameter in link.href }; /* Todo: - parse dirrectory to extract styles range; - merge switch controls by group; - method (append, prepend); - API for autoswitch by resolution; - prefixes for data attributes has dependencies by group argument; */ //Plugin constructor function Plugin( element, options ) { this.element = element; this.options = $.extend( {}, defaults, options ); this._defaults = defaults; this._name = pluginName; this.init(); //execute } Plugin.prototype.init = function () { //rebuild cfg pl = this.element; sp = this.options.path; st = this.options.range; group = this.options.group; data = $.Storage.get( group ); //debug unifier unify = ( this.options.debug === true ) ? '?' + Math.floor( Math.random( 1, 30 ) * 200 ) : ''; //controls variants switch( this.options.controls ) { default: case 'ul': cntwrp = $('<ul>'); itmwrp = 'li'; break; case 'menu': cntwrp = $('<menu>'); itmwrp = 'li'; break; case 'plain': cntwrp = null; itmwrp = 'span'; break; case 'div': cntwrp = null; itmwrp = 'div'; break; } // construct DOM & switchers this.builder( cntwrp, itmwrp, group, unify, pl, sp, st ); // onready activation if( data !== undefined ) this.activation( data, group ); //switch engine $('li', '.switcher').click(function( e ) { t = $(this).attr('data-st'); g = $(this).attr('data-gr'); //clear $('link[data-gr="'+ g +'"]', 'head').attr('rel','fake'); $('li', '.switcher[data-gr="'+ g +'"]').removeClass('activ'); //set $('link[data-st='+ t +']','head').attr('rel', 'stylesheet'); $(this).addClass('activ'); $.Storage.set( g, t ); e.preventDefault(); }); }; Plugin.prototype.activation = function ( data, group ) { //enable active css and set activ class to control $('link[data-st='+ data +']', 'head').attr('rel', 'stylesheet'); $('li[data-st='+ data +']', '.switcher[data-gr="'+ group +'"]').addClass('activ'); }; Plugin.prototype.builder = function ( cntwrp, itmwrp, group, unify, pl, sp, st ) { //flush temp itms = lnks = ''; for( i = 1; i <= st; i++ ) { //prepare attributes href = sp +'st'+ i +'.css'+ unify; idm = 'st'+ i +'_'+ group; //construct style link & controls lnks += '<link href="'+ href +'" rel="fake" media="screen" data-st="'+ idm +'" data-gr="'+ group+'" />'; itms += '<'+ itmwrp +' id="'+ idm +'" data-gr="'+ group +'" data-st="'+ idm +'"'+'>'+'['+ i +']'+'</'+ itmwrp +'>'; } //build links $('head').append(lnks); if( cntwrp === null ) { // independent block cntwrp = $('<div style="display: inline" id="inline_merge_'+ group +'"></div>'); } //drop $(pl).append( cntwrp ); cntwrp.attr({ 'class': 'switcher', 'data-gr': group }).html( itms ); //memory leaks prevent cntwrp = null; items = null; links = null; } // Plugin logic wrapper $.fn[pluginName] = function ( options ) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin( this, options )); } }); } })( jQuery, window, document );

Вот щас как раз пишу плагин для переключения. Добавлю апи для детекта разрешений экрана и можно даже в принципе время суток прикрутить.

Ну и я добавлю немного фундаментального из области ООП: JavaScript Namespace Patterns

70000 и испытательный срок 3 месяца Я больше просил.

Это обсуждалось здесь. Тоже самое можно сделать с помощью БЭМ-инструментов. А вообще главная проблема OOCSS в неуникальности классов, а отсюда вытекают большие проблемы, такие как: Увеличение сложности поддержки проекта - за счет того что классы не упорядочены и со временем смешиваются друг с другом, получается клубок шерсти который распутать просто так не получится, например, удалить из проекта часть кода, не затронув при этом другую часть, будет сложно. Дублирование кода - раз точно понять к какому блоку относятся те или иные стили не получится, в проекте будут находится те части которые впринципе там не нужны, просто для того чтобы ничего не сломалось. Во-первых, любое решение эмулирущее какое-либо поведение через js, будет работать медленее чем нативное решение. Во-вторых, это контекстно-зависимые селекторы и использование их в полной мере, противоречит принципам БЭМ, их можно использовать для декоративных целей в соответствии с принципом graceful degradation, и в этом случае fallback на js будет не нужен. Почему БЭМ не может взять что-то от OOCSS? Он настолько эгоистичен? Это как бы интересно, но для средних проектов и малых OOCSS гораздо больше подходит. Попробую как нибудь на досуге скрестить некоторые части, самому интересно. Дублирование кода- это мелочи. Т.к. у сжатого агрегата однородные куски кода будут собраны в словарики. Конечно, придется думать, но если заюзать опять-же бэм основу то все будет очень даже гуд Я даже не знаю что вам ответить по поводу медленности. У человека, который может настроить свой ПК все будет работать, как надо. Как правило те, у кого IE 6 и подобное имеют на компе такой беспорядок, что производительность браузера там по определению сами догадайтесь где. Некрофобия какая-то.

Не люблю показной снобизм и подверженность психологии масс Надеюсь мой оппонент сделает выводы.

Вы ники перепутали местами

А, я понял. Ты тут глас народа, демократия и вообще борец за справедливость в одном лице Мультифрукт одним словом жму лапу, пойду есть креветки и наблюдать издалека

Дык я же не спорю с тобой. Пустословием я называю то, когда человек что-то говорит, а доказать на деле это не может, вот и всё. Какие обиды? Разве я не прав? Для меня такие люди пустословы. Ты всегда имеешь право на свою точку зрения, кто ж спорит, но ты будь любезен её отстоять, объяснить, почему ты так считаешь. Иначе твои слова - это пшик в воздух. А кто ты такой чтобы тебе что-то доказывать? И достоин-ли ты чтобы я то-то перед тобой отстаивал лишь потому, что твое мнение разнится по твоему мнению? (:

Спасибо за ответ, дружище, рад, что я думаю в эту же сторону. HeadShot А тебе советую прислушаться к вышесказанному, сделать выводы и впредь не пустословить на форумах. Ты бы следил немного за речью Я высказал свою точку зрения, которая может отличаться от твоей. И если даже большинство здесь присутствующих думает иначе, хотя лично я не испытываю каких-то предрассудков на этот счет вообще, это не дает тебе ни повода, ни права называть меня пустословом. Улавливаешь контекст? Каждый занимается тем, что ему ближе и волен развиваться в ту сторону, в которую ему больше нравится. \-/ твое здоровье, не пересиживай

Зевнул... не на футболе вроде

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