Мысли о верстке с JavaScript позиционированием

Добрый день, Хабр!

Рискну опубликовать недавно сформировавшуюся идею относительно верстки современных сайтов, в т.ч. в так называемом «плиточном» стиле. Но прежде чем излагать мысли хочу привести два «предупреждения»:
  1. я — дилетант. Хотя моя жизнь напрямую связана с программированием уже более 10 лет, я отношусь тем людям, которым интересно в IT очень многое от 3D моделирования до робототехники. А потому бывает, не знаю элементарных для специалиста вещей. Иногда это помогает, иногда мешает, но что есть, то есть.
  2. если вы хотите в результате «пощупать» технологию в деле, вынужден разочаровать. Все дальнейшее – только изложение мыслей и идей. Создать готовый движок на хорошем уровне у меня не хватит ни времени, ни умений. Впрочем, если кто-то заинтересуется изложенным – я готов всячески содействовать разработке.

Суть идеи.


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

При обычной верстке html – задает структуру контента, а css – управляет и позиционированием и визуальным представлением документа. Эта двойственность css приводит к раздутым файлам стилей, внутри которых бывает сложно ориентироваться. Одни и те же свойства управляют и положением и внешним видом элементов – это вносит путаницу и затрудняет отладку.

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


Разметка


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

Например, так:
guideX.left = '20%';
guideX.sidebar = '10%+20';
guideX.right = '10%+420';


Таким образом, направляющие становятся свойствами объекта guideX с пользовательскими именами.

Теперь добавим горизонтальные направляющие:
guideY.top = '20';
guideY.content = 170';
guideY.footer = '100%-120';
guideY.bottom = '100%-20';


Теперь к полученной сетке можно привязать блоки.
Блок определяется координатами левого верхнего и правого нижнего углов.

block.name = 'left, top, right, bottom';

Например в нашем случае:



block.logo = 'guideX.left, guideY.top, guideX.left + 300, guideY.content';
block.content = 'guideX.left, guideY.content, guideX.sidebar - 10, guideY.footer';
block.sidebar = 'guideX.content, guideY.content, guideX.right, guideY.footer';
block.footer = 'guideX.left, guideY.content, guideX.right, guideY.footer';

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

Также блок можно определить через указание расположения внутри родительского блока:

block.name = 'положение_по_x width, положение_по_y, hieght';

Например, так:
block.name = 'center 1000, top 50%';

Третьим типом указания расположения блока является указание положения его центра, а также ширины и высоты. Конструкция в этом случае будет выглядеть так:
block.name = 'pos_center центр_по_x, центр_по_y, width, hieght';

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

После всех определений выполняется функция run(); которая на основе реального размера окна браузера, размеров блоков и страницы, рассчитывает размеры и координаты блоков и задает стили для соответствующих div блоков.

После отслеживаются изменения на странице для соответствующего изменения позиционирования. Например, в данном случае содержимое блока sidebar – может не влезть на экран, что может привести к нарушению структуры. Поэтому изменения размеров блоков отслеживаются, и в данном случае, при увеличении высоты блока sidebar – соответственно сдвинется направляющая guideY.footer, и соответственно изменятся размеры блока content и положение блока footer.

Таким образом, при наполнении страницы не нужны многочисленные вложенные блоки div. Достаточно описать просто:
<div id=”logo”> логотип </div>
в любом месте страницы, и логотип встанет на место. При этом внутри div-блока — естественно можно использовать всю стандартную html + css разметку.

Расширение


Конечно, в таком виде данная надстройка мало кому может быть действительно полезна. Интересный функционал появляется при использовании некоторых дополнений.

Вложенные блоки.


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

block.tel = ' in block.logo 10, 100%-50, 100%, 100%';


Или в варианте с указанием стороны пристыковки

block.tel = ' in block.logo right 100%-10, bottom 50';

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

Зависимости.

Предположим, что нам нужен статичный дизайн в 1000px, по центру окна. Для этого проще всего использовать такой код:

block.name = 'center 1000, top 100%';


Но в ряде случаев может понадобится более сложные зависимости, например когда контент должен быть сдвинут немного влево, так чтобы свободное пространство слева – было в два раза меньше чем справа… Этого можно достичь добавлением правил.

guideX.left = '';
guideX.right = '';
rule.my1 = 'guideX.left * 2 = 100% - guideX.right';
rule.my2 = 'guideX.right - guideX.left = 1000';



Первые две строки только объявляют направляющие, но не определяют их значения. Вторые две – задают правила, по которым высчитываются координаты направляющих.

Кстати, для переменной ширины блока можно заменить последнюю строку на:
rule.my2 = 'guideX.right - guideX.left = 1000 to 1300';


Оператор «to» — означает, что величина разницы будет от 1000 до 1300, с приоритетом последней.

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

Такой подход позволяет создавать гибкие зависимости между любыми блоками наиболее простым и естественным образом. Анализируя графический макет будущего сайта, человек мыслит примерно такими правилами как «этот блок тянется… этот статичный… этот по ширине равен этому… этот в центре этого… и т.п.». Запись этих заключений в виде правил гораздо проще и логичнее чем стандартные подходы к верстке. При этом совмещение этого подхода с использованием свойств блоков (описано в следующем пункте) позволит реализовать действительно сложные структуры всего несколькими правилами.

Свойства

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

1. Обычные свойства

К любому определенному свойству блока можно обратиться напрямую.
Поддерживаются: block.name.left, block.name.top, block.name.right, block.name.bottom, block.name.width, block.name.height, возможно другие.

Например, после определения: block.logo = '0, 0, '100, 50'; можно обратиться к block.logo.left или к block.logo.bottom.

Также к обычным свойствам я отношу параметр заполнения блока. По умолчанию любой блок тянется вниз, при увеличении объема контента. Но написав block.name.fix = true. Можно зафиксировать размер блока.
Если удастся качественно реализовать, можно будет добавить и свойство fit – автоматически выравнивающего масштаб контента в соответствии с размерами блока, по аналогии с соответствующей функцией в издательских системах.

2. Подгонка шрифтов

block.name.fontsize = 'n%'; — этот параметр задает размер шрифта в пропорции от высоты блока. Такой подход позволяет выводить надписи идеально подходящим по размеру шрифтом. Например, вывести текстовый логотип с высотой равной шапке сайта, при любом разрешении.

3. Подгонка картинок

block.name.image_fit = '[путь/]имя_файла [left|top|right|bottom]'; — позволяет заполнить блок изображением, причем изображение масштабируется таким образом чтобы заполнить блок целиком. Если указан второй параметр – то при подгонке по этой стороне не производится обрезка изображения.

4. Перетаскивание блоков

block.name.dragX = 'true|false [start [, end]]'; — задает возможность перетаскивать блок по оси X в пределах от start до end, от текущего положения. Пример: block.tel.dragX = 'true -10, 80%';
block.name.dragY = 'true|false [start [, end]]'; — аналогично.

Перетаскивание блоков позволяет сделать простую анимацию блоков. Например, такая конструкция.

block.header = '10%, 20, 90%, 300'; // объявляем шапку.
block.slider = 'in block.header 0, 0, 100%, 270'; // в шапке – поле для слайдера.
block.scroll = ' in block.header 0, 270, 33.33%, 100%'; // объявляем скролл.
block.slider_content = 'in block.slider 0, 0, 300%, 100%'; // в слайдере – слайды.
block.slide_1 = 'in block.block.slider_content 0, 0, block.slider.right, 100%'; // слайд 1.
block.slide_2 = 'in block.block.slider_content block.slider.right, 0, block.slider.right*2, 100%'; // слайд 2.
block.slide_3 = 'in block.block.slider_content block.slider.right*2, 0, block.slider.right*3, 100%'; // слайд 3.

Такая запись позволит полностью определить структуру блоков в шапке со слайдером на три слайда, останется только заполнить соответствующие div блоки.



Добавление записи:
block.scroll.dragX = 'true 0, 100% - block.scroll.width';
rule.my1 = block.slider_content.left = - block.scroll.left*3';

Позволит, перетаскивая блок scroll – перематывать слайдер внутри блока block.slider.

А запись:
block.slider_content.dragX = 'true'; 

Позволит перематывать слайдер напрямую двигая его (например, на сенсорном экране)

Формальное описание


Формально все операторы выглядят так:
направляющие:
guideX.<имя направляющей> = '<число>';
guideY.<имя направляющей> = '<число>';

блоки:
block.<имя блока> = '[in <имя родительского блока>] {<число>,<число>,<число>,<число> | {left|center|right} <число>, {top|midle|bottom} <число> | pos_center <число>, <число>, <число>, <число>} [fix] [fit] [font_size <число>] [image_fit [путь/]имя файла] [dragX [<число> [,<число>]]] [dragY [<число> [,<число>]]]';

правила:
rule.<имя блока> = '<число> = <число>';

Где <число> — это любое выражение JavaScript, либо любой процент (будет вычислен исходя из размеров родительского блока), либо пара выражений типа '<число1> to <число2>' — означающее будет выбрано число в диапазоне от <число1> до <число2>, по возможности близкое в <число2>. В выражениях не могут должны зарезервированные слова: to, fit, fix, image_fit, left, center, right, top, midle, bottom, pos_center, in, guideX, guideY, block, rule

После описания разметки обязательно идет вызов функции run();

Чтобы не раздувать статью я не описываю механику работы движка. Но суть проста: в скрипте определяются объекты guideX, guideY, block и rule. После пользователь определяет разметку создавая свойства для этих объектов и определяя значения простыми строками. А при запуске run(); — выполняется перебор этих свойств и определение числовых значений. После этого для всех свойств объекта block ищутся соответствующие им div-блоки и блокам присваивается соответствующее позиционирование. Отрисовка выполняется циклически, чтобы учесть возможные изменения размеров блоков в зависимости от контента, а после аналогичные перестроения происходят при изменении размеров страницы или перемещения подвижных блоков.


Пример


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

Код

<html>
<head>
<script src="js.js"></script>
<script language = 'javascript'>
guideX.left = '10%';
block.content = '0,0,100%,100% image_fit background.jpg';
block.logo = 'guideX.left,12%,100%,23% font_size 100%';
block.slogan = 'guideX.left,23%,100%,26% font_size 70%';
block.slider = 'pos_center 50%, 55%, 700, 270';
block.footer = 'right 100%-guideX.left, bootom 12.6% font_size 15%';
</script>
<style type="text/css">
* {
font-family:"Times New Roman",Georgia,Serif;
color:#fff;
}
</style>
</head>
<body> 
<div id="logo">Logo</div>
<div id="slogan">Cамая компанейская компания</div>
<div id="slider">
<!--  Код слайдера  -->
</div>
<div id="footer">Наш адрес не дом и не улица...<br /> Копирайт (с) CopyRight</div>
</body> 
</html> 


Отображение сайта на разных экранах показано на рисунках.

Заключение


К преимуществам подхода можно отнести: отсутствие мусора в css в виде дополнительных стилей и «костылей», простота разработки адаптивной верстки для любых разрешений, настройка логики позиционирования, используя простые «правила», разделение правил позиционирования от оформления и содержимого документа, возможность частичной автоматизации верстки, используя экспорт направляющих и общей логики разметки из psd-файла с помощью дополнительного скрипта. Также к плюсам можно отнести то, что для работы движка не требуется никаких действий кроме подключения js-файла. А весь «язык разметки» состоит из нескольких типовых выражений, которые легко выучить и применять.

Также можно добавить что и сегодня JavaScript часто используется при верстке сайтов для решения проблем или разработки нестандартных элементов. Описываемый подход мог бы помочь реализовать многие вещи в пару строк, даже если человек не хочет использовать движок для верстки основной структуры страницы.
Например, для заполнения блока div изображением, с автоматической подгонкой под размер блока, достаточно строки.

block.name = 'image_fit background.jpg'; // блок без указания разметки, но с фоновым изображением

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

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

Similar posts

Ads

Comments 67

    –7
    Наркоман чтоли?
      +5
      Если я правильно понял вашу задумку, ты вы в какой-то мере хотите повторить flexbox? Направляющие, раскладка блоков, отношения занимаемого пространства и т.д.
        0
        Не совсем. Как я понимаю, flexbox — помогает более удобно позиционировать блоки в css. Я же предлагаю позиционирование выполнять используя JavaScript, а css — оставить функцию оформления элементов, т.е. то ради чего он и был создан.

        JavaScript позиционирование позволяет сделать очень гибкую, подстраивающуюся под ситуацию разметку, путем объявления достаточно простых «правил». При этом отсутствуют проблемы совместимости (вернее их учет ложиться на создателей движка, а не верстальщика).

        При этом естественно я не предлагаю отказываться от css верстки. Предлагаемый инструмент только помогает реализовать некоторые вещи проще и быстрее, а степень его использования определяет верстальщик.
          +17
          … а css — оставить функцию оформления элементов, т.е. то ради чего он и был создан.

          Вы ошибаетесь. Позиционирование блоков — одна из исторически важных функций каскадных таблиц стилей.
            +1
            Вы правы.
            +3
            css имеет свои недостатки — которые, к сожалению очень медленно исправляются в глобальном плане.
            JS часто используется для исправления этих недостатков.
            И такой мини-фреймворк предложенный Вами — может быть очень полезен.

            Но чем дальше, тем CSS берет на себя все больше и больше нагрузки.
            FlexBox, Multiple column layout уже близко.
            Что то, например Grid Layout еще только в наметках, но это все значительно упростит решение различных проблем верстки.
            Вообще web уже давным-давно — это такой сплав, гремучая смесь технологий, что пытаться четко разделить рамки использования той или иной технологии, думаю, не стоит.
              +1
              Не сомневаюсь что со временем CSS станет удобным и главное простым средством разметки. Даже уверен что это произойдет довольно скоро. Но сейчас многое в нем сложно и непонятно начинающим, что приводит к поискам на форумах кусков «на коленке» написанного JS-кода и сборка этого всего без особого понимания работы…

              Во многом предлагаемый инструмент просто коллекция решений распространенных проблем верстки объединенный простым синтаксисом и с расширяемыми возможностями.
              Это временное решение, для непрофессионалов в области верстки, которые и не слышали о технологиях о которых вы говорите.
          –1
          Вроде что-то в этом есть. Только вот если вам не нравится создавать это с помощью синтаксиса CSS, гораздо лучше используя определения в синтаксисе подобном тому что придумали вы, но производить основные манипуляции на стороне сервера. Как неплохой пример, генерить в результате CSS-файл.
            +3
            Мне видится основное назначение инструмента не в верстке обычных сайтов, а в разнообразных приложениях, когда страница должна подстраиваться под пользователя, интерактивно меняться и т.п. Использование CSS для этих целей не очень эффективно.
              +2
              В приложениях как раз таки узкое место производительность, т. к. приложения и так насыщены различным функционалом в JS. В таком случае всё же лучше выполнить основные тяжелые действия на стороне сервера. Часть функционала можно генерить в CSS (всё то, с чем справится современный CSS), а всё остальное в легковесный JS для максимальной производительности на стороне клиента.
                0
                Возможно вы правы. Но тут во первых теряется простота использования — нужен еще какой-то скрипт на сервере, т.е. начинающему верстальщику или даже дизайнеру который хочет посмотреть как будет тянуться его макет — это все становится куда сложнее.
                А во-вторых — часть функций обычных приложений как раз может взять на себя этот движок, что соответственно снизит нагрузку.
                0
                Я с Вами полностью согласен. Даже MS это признала для своих WinJS приложений. Только они пошли как раз по пути «допиливания» css -ms-свойствами.

                В других языках разметки же, это было из коробки

                  0
                  Интересно, а нет ли JS-библиотеки, которая просто парсит WPF или QML, создавая соответствующую раскладку? Оба этих языка разметки на два порядка лучше и продуманнее уродского CSS, так что создание подобной библиотечки выглядит вполне логичным решением.
                    0
                    <sarcasm>Была попытка под названием Silverlight</sarcasm>
                    Я подумывал о таких возможностях, но решил, что моих способностей не хватит для реализации.
                    К тому же проще сделать Html представление для C# приложений, нежели наоборот

                    Upd: Кстати IE умеет XAML открывать
                  +9
                  Имея не один год опыта в верстке сайтов, хочу поделится своим мнением:
                  1. Вам стоит подумать над «архитектурой» таблиц стилей
                  2. Именно благодаря своей «каскадности» добавление дополнительных стилей на страницу для разных устройств (раньше так делали для разных браузеров) куда эффективнее и существенно быстрее, чем манипуляции на сервере или клиенте для задания оных.
                  3. Не вижу препятствий для отделения классов которые отвечают за позиционирование от классов отвечающих за оформление.
                +14
                image
                  +2
                  В этом что-то есть от SASS/LESS
                  • UFO just landed and posted this here
                      0
                      Stylus очень и очень хорош. Ближе по духу даже чем LESS и SASS. Но, блин, тут кто первый встал — того и тапки.
                      • UFO just landed and posted this here
                          0
                          Ну, я о том, что LESS/SASS стали мейнстримом в тех или иных комьюнити, и даже стандартом де факто, поэтому незаслуженно и забывают про позже появившийся Stylus.

                          P.S. Про Jade согласен — он прекрасен, кто бы что ни говорил. И даже несмотря на скорость (включая runtime).
                          Я вообще сторонник CoffeeScript, Jade, Stylus. Очень нравится компактность и отсутствие шума в коде.
                          • UFO just landed and posted this here
                    +2
                    Кое-что из этого уже можно легко реализовать средствами CSS (особенно если правильно продумывать структуру), кое-что «вот-вот будет можно, когда ИЕ7-8-9 наконец умрут».

                    Некоторая «интересность» в вашей идее, безусловно, есть, но… как уже выше отметили, зачем? :)
                      0
                      В CSS многое можно сделать если правильно продумывать структуру, иметь опыт верстки в несколько лет и т.п… Но всегда есть начинающие которым непросто прицепить подвал к низу страницы, или растянуть картинку для заполнения всего экрана.

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

                      Понятно что это решение не для профессионалов. Они сами знают как решить свою конкретную задачу наиболее оптимально.
                      В начале статьи я написал что я дилетант. И я хочу помочь таким же дилетантам как я.
                        0
                        Мне кажется, легче выучить CSS на достаточном уровне, чем учить еще одну систему разметки.
                        Вам, как ее разработчику и программисту, она кажется удобной и интуитивной, но далеко не факт, что остальным потенциальным пользователям она покажется такой-же.
                      +4
                      Проблема даже не в том, что CSS в плане layout-а плох.

                      Проблема в том, что не видно пока хорошего универсального решения для layout-ов вообще. Гриды, например, не работают когда нужно на мониторах класть 3 элемента в ряд, а на телефонах — в столбец. Потом нужно учитывать что контент внутри может сам менять размер, например текст в зависимости от языка, и ценнее уместить текст чем выполнить ограничение в 80% ширины.

                      В этом деле вообще можно сильно загнаться, и докопать, например до такого матана как этот: «A Modular Geometric Constraint Solver for User Interface Applications», гуглится.

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

                        Гриды, например, не работают когда нужно на мониторах класть 3 элемента в ряд, а на телефонах — в столбец.

                        В данном случае, можно было бы ввести дополнительные операторы, для автоматической ориентации блоков.

                        Потом нужно учитывать что контент внутри может сам менять размер, например текст в зависимости от языка, и ценнее уместить текст чем выполнить ограничение в 80% ширины.

                        В статье есть описание реализации тянущихся блоков. Более сложные зависимости можно реализовать за счет «правил».

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

                        Этот момент меня тоже волнует. Я старался делать систему максимально простой, чтобы даже зная 10% синтаксиса — можно было ее полезно применять.
                        Повторюсь — эта система для простых сайтов. Чтобы можно было написать block.my_div='center middle'; — и знать что этот блок будет по центру экрана.
                        • UFO just landed and posted this here
                            0
                            Ну добавят опции в гриды чтобы из линии в стопочку переставлять — захочется чего-нибудь еще эдакого. Например есть сайт, на нем блоки с каким-то количеством модулей слева и справа. И вот хочется чтобы модули эти брали высоту от контента, но при этом автоматически выравнивали нижнюю и верхнюю границу по 20-ти пиксельной сетке.

                            Я же вообще абстрактно писал что проблема не в CSS, проблема в том что автоматизация layout-а — это не решенная (и видимо не решаемая) задача. Посмотри как тот же вон как схему метро раскладывают — это же тоже задача по layout-у в конечном итоге, как такое автоматизировать?
                            • UFO just landed and posted this here
                                0
                                Схему я как абсолютно бесконечно удаленный пример привел. Но вот с тем же CSS где останавливаться? Там вроде уже два варианта гридов придумали, в довесок к column-ам, media query, и всяким существующим div-ам с float-ами.
                                • UFO just landed and posted this here
                            0
                            Как верстка у Вас будет «знать», что на телефоне Вам нужно раполагать элементы не по три в ряд а по одному? Об этом должен заботиться верстальщик.
                              0
                              Верстальщику нужно дать удобный инструмент, чтобы сказать когда ставить в ряд, а когда — нет. Можно явно, типа: «ниже такого-то разрешения ставь в ряд», можно — более декларативно, типа «вот эти элементы лучше в ряд, но не обязательно», можно придумать еще более хитрую систему взаимосвязей. Речь собственно об этом.
                              • UFO just landed and posted this here
                              +2
                              Гриды, например, не работают когда нужно на мониторах класть 3 элемента в ряд, а на телефонах —в столбец.


                              Откройте для себя media queries и не позорьтесь.
                              +3
                              Постойте. Я это уже видел!
                              Это же expression в IE.

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

                                Оптимизация расчетов — это да, в случае сложной верстки задача может быть нетривиальной.
                                –1
                                Идея занимательная и интересная, мне понравилась.
                                Но реализовывать это надо на стороне браузера, ибо даже ресайз блока по событию ресайза браузера подтормаживает.
                                  0
                                  Всё это может и удобно, но какова будет скорость работы?.
                                  К примеру:
                                  Представьте процесс загрузки основного контента сайта на медленном соединении.
                                  При реализации с помощью css замедляется в основном загрузка изображений, но они уже позиционируются на своём месте. А в данном случае не только будет замедление в зазрузке изображений, но и в расчётке координат всего на странице. У вас появится почти белый лист и на нём постепенно будут двигаться блоки на свои места.

                                  Это сугубо моё мнение, т.к. сталкивался с такими вещами даже на вычислении размеров блоков на странице. После нескольких перезагрузок страницы замечаешь эффект, подобный slideDown…
                                    0
                                    Возможно я не прав, но как медленное соединение будет в данном случае влиять на отрисовку? Код движка не будет большим и загрузится только раз, после чего пока грузится html — скрипт успеет отработать и определить положение основных div блоков. Загружавшиеся картинки уже будут правильно позиционироваться. Потом сдвиги будут только в случае если где-то контент не влезет в блок.

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

                                      Ни в коем случае не говорю о том, что данная технология не имеет права на существование. Но сам как можно меньше стараюсь использовать скрипта для определения размеров блоков при загрузке страниц…
                                        0
                                        Понял Вас.
                                        Думаю при написании статьи мне стоило больше внимания уделить определению категории сайтов для которых это решение может быть востребовано. Я изначально не думал о этом движке как о замене css позиционирования. Только как помощник удобный в ряде случаев.
                                    +1
                                    В идеале хотелось бы создать некий «мини-язык» упрощающий возможности разметки документа для человека не являющегося специалистом в JavaScript. В таком «мини-языке» можно было бы максимально просто сформулировать правила адаптации макета к любому разрешению экрана. А JavaScript обеспечил бы выполнение этих правил.

                                    Было уже, выпилили.
                                      0
                                      Как я понимаю это было только в IE. Конечно использовать разный подход к верстке для разных браузеров — не лучшее решение.
                                        0
                                        У них была идея, схожая с вашей. Вместо задания CSS свойства константой, была возможность использовать JS-выражения в том же констексте, для динамического вычисления свойств в рантайме. Как я понимаю, было даже автоматическое пере-вычисление при изменении других CSS свойств, чьи значения использовались при вычислении.

                                        Поскольку вы предлагаете что-то похожее, я считаю вам надо ознакомиться с этим подходом и понять причины неудачи.
                                      0
                                      Как то нехорошо пользователей с отключенным js отсекать.
                                        +2
                                        С отключенным js большинство «фишек» ради которых есть смысл использовать этот подход — по любому не будут работать.
                                          +1
                                          А чем media queries для адаптации под разные разрешения не устроил?
                                            0
                                            Вероятно потому, что:
                                            При обычной верстке html – задает структуру контента, а css – управляет и позиционированием и визуальным представлением документа. Эта двойственность css приводит к раздутым файлам стилей, внутри которых бывает сложно ориентироваться. Одни и те же свойства управляют и положением и внешним видом элементов – это вносит путаницу и затрудняет отладку.

                                            И:
                                            При этом естественно я не предлагаю отказываться от css верстки. Предлагаемый инструмент только помогает реализовать некоторые вещи проще и быстрее, а степень его использования определяет верстальщик.
                                              +1
                                              Для того, чтобы не путаться существуют разные методологии и sass.
                                                0
                                                Я с вами согласен. Мне почти всегда вполне хватало различных инструментов типа SASS, Sylus и т. п. для того, что бы весь код был достаточно наглядным и удобным.
                                          0
                                          Все ждал когда же здесь скажут 'а что если у пользователя Javascript отключен'.
                                            0
                                            Это ещё в тексте статьи автором было упомянуто.
                                          0
                                          Дежавю какое-то :) лет 10 назад, нечто похожее городил на одном из проектов (JS-сом блоки расставлял), но тогда была веская причина — реализация CSS.
                                            0
                                            elasticss.com/
                                            Там тоже частично js для позиционирования.
                                              0
                                              Забавно, но чем для решения всего описанного не подходит CSS? У одного свойства display уже множество значений (новомодная модель Flexbox чего только стоит...). + функция calc поможет складывать различные величины из вашего примера. К чему все эти велосипеды? Ведь их тоже нужно будет понимать, дабы применять. Так не лучше ли начать читать пособия, да спецификации?
                                                0
                                                Напомнило SproutCore до Handlebars.
                                                  0
                                                  Я думаю дело не в косости CSS, а в том, что HTML не предназначался для таких UIшных вещей. Тут нужен язык разметки другой со своими правилами и скрипт, который будет всё это под браузер адаптировать.
                                                    +5
                                                    Вот что бывает, когда программисты начинают верстать ;) Думаю, куда более релевантным занятием было бы создание библиотеки, эмулирующую Flexbox для браузеров его не поддерживающих.
                                                      0
                                                      идея интересная, мне нравится, возможно, если позволит время, даже попробую ее реализовать в текущем проекте.
                                                        0
                                                        Теперь чтобы сверстать сайт, а потом и что-то в нем изменить, нужно будет иметь специалиста по css, специалиста по js и специалиста по вашему придуманному движку.
                                                        Мне кажется с такими идеями можна дойти до отдельного языка по оформлению текста, тдельного для блоков и например для изображений и для работы со всем этим пригнать сюда вагон индусов
                                                          +1
                                                          посмотрите в сторону dojo (dijit layout)
                                                          там возможна как декларативная верстка (в конечном итоге размеры и позиция автоматически (и динамически) вычисляются в абсолютных значениях)

                                                          <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false, liveSplitters:false" style="width: 100%; height: 100%;">
                                                          
                                                            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:false, region:'top'" id="header">
                                                            </div>
                                                          
                                                            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:false, region:'center'" id="main_content">
                                                            </div>
                                                          
                                                          </div>
                                                          


                                                          либо программная
                                                          new dijit.layout.BorderContainer().placeAt('bc');
                                                          ...
                                                          

                                                            0
                                                            JSSS же
                                                              0
                                                              Сам давно думаю в эту сторону. Однако подход с направляющими меня смущает: при более-менее сложной системе получится, что направляющих будет ооочень много. К тому же поддерживать верстку в таком виде, как мне кажется, достаточно проблематично. Лучше посмотреть в сторону аналогичных идей в настольных приложениях: layout-менеджеры, с возможностью вложения друг в друга. Это во-первых похоже на ныне существующую вложенную структуру блоков html, и в то же время убирает необходимость «визуально-размещательной» части верстки (весь функционал переносится в код layout-менеджера).
                                                                0
                                                                Я считаю — очень правильная мысль. Многие вещи в вебе вообще «скрипто-центрированы», декларативная разметка в чистом виде применяется, пожалуй, даже реже, чем «процедурная смесь технологий». Вообще предлагаю — давайте браузер первым делом пусть загружает index.js файл, который, если потребуется — загружает внешние ресурсы типа html, css, картинок и т.п. А не наоборот. Это сразу целую пачку проблем решит.
                                                                  0
                                                                  Немного удивлен, не увидев тут в обсуждении bootstrap

                                                                  Only users with full accounts can post comments. Log in, please.