Какой расклад?

30 августа 2010

Эта статья посвящается тем, кто задает правильные вопросы.

В этой статье я постарался рассмотреть все самые распространенные вопросы, сомнения и критику по поводу необходимости создания и внедрения новых механизмов раскладки. Cтатья дополняет и продолжает содержание моего выступления «CSS3: будущее механизмов раскладки». Если вы его не смотрели, то рекомендую ознакомиться.

Итак, у нас есть три черновика модулей CSS3: Grid Positioning Module, Flexible Box Layout, Template Layout. Каждый ценен своей уникальной идеей. Эти идеи специально спроектированы для решения определенного рода задач по раскладкам. Задач, которые в настоящее время решают не предназначенными для этого методами. Отсюда сложности в разработке и поддержке, ограничения и даже побочные эффекты этих методов.

Долететь до Луны, используя катапульту

Эра CSS-вёрстки, как и эра бурного развития клиентских технологий, длится не так уж и долго. С большой натяжкой — каких-то полтора десятка лет. Сначала все сайты не имели никаких раскладок. Даже графика была редкостью. Затем в веб стали приходить бизнес, индустрия развлечений, СМИ… Требования к представлению информации несоизмеримо выросли.

Сегодня мы находимся в ситуации, когда CSS не отвечает требованиям гибких, технологичных и надежных раскладок. Именно поэтому создаются новые модули, посвященные созданию сеток, шаблонов, гибких блоков. Параллельно с этим разрабатываются такие модули, как Media Queries, Paged Media и другие. Всё это способствует расширению возможностей представления информации в разных условиях и на разных устройствах.

То, что нельзя прочитать в спецификации

Теперь давайте рассмотрим несколько вопросов, возникающих при размышлении о раскладках.

Чем не устраивает float?

Свойство float способно наделять блоки плавающим поведением. Можно поместить блок слева или справа в контексте других блоков. Недостаточная гибкость float заключается в невозможности поместить блок в контексте других блоков, не прижимая его к краям этого контекста. Такого поведения можно добиться, используя модуль Grid.

Почему бы просто не реализовать display:table во всех браузерах и не забыть про эти многочисленные модули?

Я полностью поддерживаю стремление реализовать display:table во всех браузерах. Но это вовсе не означает, что display:table сможет дать нам гибкий и перспективный механизм создания раскладок. Как можно поменять местами две колонки, не меняя HTML-разметки? Или как, например, возможно поместить блок, который будет одновременно находиться в области этих двух колонок, и при этом их содержимое будет его обтекать? Свойство display:table (как и свойства position и float) проектировалось совсем не для создания раскладок.

Кто круче: Grid, Flexbox, Template?

Очень хороший вопрос: какой из этих трёх модулей лучше, и кто в итоге должен выиграть? На самом деле, сила этих модулей именно в комбинировании возможностей и в совместном их использовании. Эти модули не стоит воспринимать как конкурентов друг другу. Наоборот, в основе каждого лежит идея позволяющая реализовать уникальные вещи. Так, Grid предназначен для создания сетки и привязки к этой сетке; Flexbox реализует особый механизм поведения блоков; Template создает набор слотов и позволяет, управляя ими, строить раскладки.

Что за разговор, это же всё очень сырое и потому неинтересное!

Это действительно интересный момент. Сырое, согласен. Но почему никого не смущают и, напротив, очень даже интересуют сырые реализации box-shadow и border-radius, а также остальных модных оформительских CSS-свойств. Лично меня очень расстраивает эта возня около вещей, продиктованных модой. Сегодня уголки квадратные, завтра круглые… а послезавтра?

Если серьезно, то на тенюшках, красивых градиентах, кнопках и декоративных вещах нельзя построить большой и серьезный сайт. Основа сайта — раскладка. Именно поэтому мне непонятно, почему жадная до зрелищ толпа разработчиков и дизайнеров давит на производителей браузеров и повышает приоритет и престиж того же border-radius, а потом с салютом и ночными гуляниями отмечает выпуск новой бета-версии браузера с поддержкой этого свойства.

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

Mozilla сказала своё слово, разработав и внедрив Flexbox. Чей ход теперь?

Справедливости ради нужно сказать, что Flexbox работает не только в Firefox, но и в Safari и в Chrome. А это уже три браузера из большой пятерки. Мой прогноз: в ближайший год IE или Opera введут поддержку этого модуля. Причем я больше склоняюсь в сторону IE. Предпосылки к этому есть — активное обсуждение в рассылке www-style, где Рабочая группа CSS (CSS Working Group) и все желающие обсуждают технические вопросы.

Давайте сделаем тег <layout>?

Это совсем провальное намерение. Идеология открытого веба, к которому мы все так стремимся, гласит: отделяй данные от их представления. Таким образом, внедрять экстра-разметку или какие-либо заведомо стилизованные теги — тупиковый путь.

И главное: <layout> — это путь в каменный век табличной вёрстки. Подобные методы не оправдали себя в создании гибких раскладок. Вот простой пример: нужно изменять внешний вид страницы и саму раскладку в зависимости от размеров окна браузера. С HTML-разметкой это невозможно. А сейчас для этого существует CSS-модуль Media Queries.

Какие преимущества мы получаем?

Создавать раскладку при помощи Grid, Flexbox и Template гораздо проще. Следовательно, не нужно оплачивать труд CSS-гуру или самому быть им. Это совсем не означает, что высококвалифицированному специалисту будет нечего делать. Наоборот, он найдет себе применение в решении более интересных задач вёрстки.

Создавать раскладки можно гораздо быстрее, а значит — можно сократить сроки вёрстки.

Раскладка на Grid, Flexbox и Template более функциональная и гибкая. Таким образом, внесение изменений будет обходиться дешевле, проще и быстрее.

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

Главный вопрос

Сейчас не нужно выдумывать ничего нового. Нужно сосредоточить свое внимание на этих спецификациях. Осознать, что уже проделана огромная работа по придумыванию и обсуждению этих идей. Также важно, что именно Рабочая группа CSS занимается этими вопросами. Эти идеи родились в их умах. В умах людей, которые сегодня имеют непосредственное отношение к разработке браузеров. На этом уровне вопросы не решаются мгновенно, но на динамику и приоритет новых механизмов раскладок можно повлиять. К профессиональному сообществу веб-разработчиков производители браузеров, их специалисты по связям с разработчиками, технические специалисты и руководство прислушиваются всегда. Так может, спросим все вместе: «Когда же?»

Комментарии +

myfreeweb 30 августа 2010 в 12:59
Как-то я не верю в «Это совсем не означает, что высококвалифицированному специалисту будет нечего делать.»

И мне как-то больше нравятся float'ы, чем вот такая уличная магия:
```
display: "a   .   b   .   c"  /2em
             ".   .   .   .   ."  /1em
             "d   .   e   .   f"
             ".   .   .   .   ."  /1em
             "g   .   h   .   i"  /2em
             5em 1em  *  1em 10em}
```
P.S. Media Queries — это прекрасно.
Вячеслав Олиянчук 30 августа 2010 в 13:14

Как-то я не верю в «Это совсем не означает, что высококвалифицированному специалисту будет нечего делать.»

В чем причина, Григорий? Одна из самых рутинных и неочевидных задач будет решатся проще и, главное, гораздо функциональнее.

Эта уличная магия хоть и выглядит так необычно, но зато дает возможности несравнимые с float, который совсем не предназначен для раскладок.
SilentImp 30 августа 2010 в 14:03

Итак, у нас есть три черновика модулей CSS3: Grid Positioning Module, Flexible Box Layout, Template Layout.

Мне искренне интересно, почему все забывают про то, что их 4?
CSS Multi-column Layout Module
Это превосходная штука. Она уже Candidate Recommendation. Правда в опере все грустно. И низко-приоритетно. И в ослике. И не все из спецификации работает ... но это больше чем у остальных 3х.

Но почему никого не смущают и, напротив, очень даже интересуют сырые реализации box-shadow и border-radius, а также остальных модных оформительских CSS-свойств?

Потому, что если блок будет без тенюшки, это — не самое страшное что может случиться. А если лайаут не отобразится, то, как правило, это фатально.
SilentImp 30 августа 2010 в 14:06

Комментарии с постмодерацией? Зачем?
Миша 30 августа 2010 в 14:19

почему жадная до зрелищ толпа разработчиков и дизайнеров давит на производителей браузеров и повышает приоритет и престиж того же border-radius, а потом с салютом и ночными гуляниями отмечает выпуск новой бета-версии браузера с поддержкой этого свойства.

— именно потому, что это не так страшно, если в ИЕ уголки останутся квадратными. и заказчика/начальника можно уговорить использовать progressive enhancement, объяснив непропорциональность объема труда к результату. а вот в случае с использованием новых способов раскладки — придется распиливать код на две части, как в каком-нибудь 2000 году.

то есть если из 7 браузеров в трех старых (ие6, ие7 и ие8) не будет круглых уголков или градиента в бэкграунде — это ничего. а вот если сайдбар запрыгнет в футер — это уже проблема.
Вадим Макеев 30 августа 2010 в 14:27

SilentImp, модерация отключается после первого же одобренного комментария. Так что пиши чаще ;)
Вячеслав Олиянчук 30 августа 2010 в 14:57

SilentImp, спасибо, про Multi-column я помню. Его функция достаточно однозначна: можно сделать только несколько колонок. Что тоже очень ценно даже в сегодняшних реалиях.

И то, что модуль уже достиг статуса Candidate Recommendation произошло именно по той причине, что 2 браузерных вендора реализовали его свойства.

Я к этому модулю отношусь примерно как к механизму позиционирования: создать раскладку сайта на нем — странная затея, но дополнить уже созданную — легко.

А если лайаут не отобразится, то, как правило, это фатально.

Естественно, что нужен железобетонный layout. Вот я и акцентирую на раскладках. Нужная ведь всем штука.
Вячеслав Олиянчук 30 августа 2010 в 15:07

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

А переход будет не сложнее чем например переход от XHTML 1.0 к HTML5. Не опускать же руки?
Роман Комаров 30 августа 2010 в 19:09

Ох, хочется верить, что лет через десять разработчики смогут использовать хотя бы один из этих модулей :)

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

Лучше бы уже веб-стандартисты перестали думать, что все будут реализовывать спецификации безошибочно и написали спецификацию для определения браузера в CSS, что-нибудь вроде @user-agent. Чтобы с поддержкой версионирования, таргетинга по поддерживаемыми фичам (@feature?) и прочим вещам.

Сейчас я вижу w3c какими-то уж чрезмерно оптимистичными :)
Вячеслав Олиянчук 30 августа 2010 в 19:40

Лучше бы уже веб-стандартисты перестали думать, что все будут реализовывать спецификации безошибочно...

Роман, мне кажется они так не думают ;) И ситуация с префиксами типа -o- и -ms- как раз очень красноречиво иллюстрирует, то о чем ты говоришь.
Panya 30 августа 2010 в 20:04

Очень жаль, что w3c не обращает внимание, на тот факт, что даже имея префиксы сейчас невозможно что-то отдельно поправить для конкретной версии одного браузера (кроме ИЕ конечно). Про поддержку сразу 3-х новых механизмов раскладки даже и думать не приходится, например, flexbox предполагает, что элементы с display:box могут использовать все свойства, описанные в CSS 2.1, на деле это не так, для box-ных элементов сейчас нельзя юзать position, float, clear и вообще они в своем потоке. И думаю в каждом из модулей будут такие загвоздки при реализации.
Роман Комаров 30 августа 2010 в 21:52

Роман, мне кажется они так не думают ;) И ситуация с префиксами типа -o- и -ms- как раз очень красноречиво иллюстрирует, то о чем ты говоришь.

Префиксы это совсем не то, они касаются только определённых свойств. Тогда как основная масса ошибок возникает от их сочетания :)

Пока не будет нормальной системы фильтрации браузеров, вроде условных комментариев, ошибки в сложных свойствах будут настолько критичными и сложно исправляемыми, что их нормальное применение будет невозможно без каких-то жутких хаков или яваскрипта.
Ну и я точно видел, но сейчас не найду, разъяснения кого-то из CSS working group о том, что типа вводить аналог условных комментариев это плохо и они так не будут. Типа нельзя поощрять позицию написания разного кода для разных браузеров. -_-
Петр 31 августа 2010 в 2:54

Когда говорят о CSS, то layout — это не «раскладка», а вёрстка. Раскладка — это либо назначение клавиш («русская раскладка клавиатуры»), либо расчёт ширины корешка в печатном издании.
Вадим Макеев 31 августа 2010 в 4:31

Петр, перевод «раскладка», пожалуй, самый удачный из существующих. Насколько я знаю, он пошёл из группы HTML-вёрстки Яндекса — а этим ребятам можно доверять. Слово «вёрстка» гораздо шире и относится скорее к процессу. Можно сколько угодно спорить о словарном значении слова, но мы, как представители отрасли, имеем полное право придумывать новые термины, чтобы избегать двусмысленности:

— У меня тут проблемы с вёрсткой.
— С вёрсткой? В смысле с макетом или вообще?
— Ну, это… ты понял.
SilentImp 31 августа 2010 в 17:01

Я уже привык к банальной транслитерации. layout — "лаяут". Да, жуть, конечно, но это все же лучше, чем раскладка.
tenshi 1 сентября 2010 в 20:20

компановка
e-shpak 1 сентября 2010 в 23:01

разметка
FataL 2 сентября 2010 в 0:35

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

Если мне память не изменяет, то в полиграфии выражения "вёрстка поехала" или "хорошо свёрстано" однозначно обозначают именно визуальное размещение элементов на странице. Термин "раскладка" меня вводит в ступор немного, возможно, из-за моего полиграфического прошлого :-)
P.S. "лаяут" -- жуть вообще.
FataL 2 сентября 2010 в 0:46

Теперь вопрос по существу...
Какой из трёх приведенных способов (хотя бы теоретически) будет более совместим с браузерами, не поддерживающими новые свойства или селекторы? Т.е. есть ли пути по более-менее нормальной деградации?
Очень интересно было бы посмотреть примеры вёрстки и её кодирования для WebKit и Mozilla, использующие FlexBox, но приемлемо деградирующие в IE 9 (будем оптимистами, хоть чуть-чуть) и Opera 10.6
Вадим Макеев 2 сентября 2010 в 0:54

FataL, я сам полиграфировал, но вёрстка — это и кнопочки, и лайтбоксики, и чёрт в ступе. А вот раскладка — это именно каркас страницы, буть он табличный, плавающий или какой-либо другой. Это ближе к мастер-страницам и модульной сетке. Налицо попытка отделить методику создания каркаса от создания любого другого оформления. Поэтому и новый термин. А по второму вопросу лучше ответит автор, когда проснётся ;)
FataL 2 сентября 2010 в 1:20

А вот раскладка — это именно каркас страницы

"Раскладкой" у нас (в издательском деле) часто называют(ли) раскладку материала по страницам. Садятся главред с худруком за н-ное количество времени до выпуска и раскладывают статьи и рекламу по страницам.
И ещё я понимаю, что юзабилисты тут сейчас тоже скажут, что они тоже "раскладкой" занимаются по-своему -- раскладывают на бумажках или в электронном виде пасьянсы из элементов интерфейса.
Для всех многоязычных пользователей компьютеров, "неправильная раскладка", -- это когда они написали "привет" как "ghbdtn".
Для секретарши "раскладка" обозначает скорее всего раскладку пасьянса :-)
Короче, я хочу сказать, что термин "раскладка" не совсем однозначный, и скорее притянутый за уши.
FataL 2 сентября 2010 в 8:40

Почитав немного спек (наискосок, конечно), пришел к выводу, что было бы неплохо реализовать Grid Positioning Module и Flexible Box Layout. Т.к. они, как бы, не перекрываются, а дополняют друг друга.
Template Layout -- это дзен, всё-таки. Слишком много пробелов и неоднозначностей в этой спецификации.

А, вообще, конечно, товарищи разработчики браузеров должны взять силу воли в кулак, и обеспечить нормальную предсказуемую отрисовку всех сочитаний float-ов, position-ов, display-ев и margin-ов. Ведь, чем дальше в лес, тем больше дров...
Вячеслав Олиянчук 2 сентября 2010 в 11:17

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

FataL, деградация это конечно хорошо, но тут скорее другой случай. Вот например: как ты себе представляешь деградацию скажем того же float? Тут все как и в случае с border-radius — либо браузер умеет и все сработает, либо не умеет и блок отобразится с дефолтными стилями.

Что в этой ситуации можно сделать? Думаю, тут найдутся способы, которые всегда возникали в умах находчивых разработчиков. Может быть просто воспользоваться тем, что браузер игнорирует непонятное свойство и применяет последнее известное. И писать в стиле этого примера: .new { dispay:inline-block; display:box; } Может быть воспользоваться другим приемом. Это уже и есть испытание модуля на прочность и жизнеспособность в реальных условиях.
Лев Солнцев 2 сентября 2010 в 11:47

А кто-то говорил с Могилевским? Вроде как, он обмолвился, что в IE9 может появится как минимум Grid Module, и тогда опять Опере придётся догонять, так как Гугл вполне может уже воспользоваться этими механизмами. Согласен с комментариями Фатала.
Layout имеет ещё словарный перевод «разметка», подходящий по смыслу, а также tenshi привёл хорошее слово «компоновка».
Вячеслав Олиянчук 2 сентября 2010 в 16:20

Лев, я говорил с ним на конференции РИТ++ в апреле, но он ничего не обещал. Тем более про Grid. Хотя сейчас я наблюдаю оживленную переписку с его участием в рассылке www-style на предмет модулей Flexbox и Multicolumn.
Лев Солнцев 3 сентября 2010 в 11:34

Интересно, что по последним решениям CSS Flexbox и CSS Template Layout находятся в среднем приоритете, а CSS Grid Positioning в низком.
FataL 10 сентября 2010 в 1:16
```
<div style="float:left">
  <div style="float:left">X</div>
  <div>Y</div>
</div>
```
Иллюстрация к тому, о чём я говорил -- предсказуемой отрисовке устоявшихся стандартов. Без подсматривания, попробуйте угадать "расклад" для каждого браузера.
Двинутый разработчик 3 ноября 2010 в 3:37

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

Судя по ссылке, баги в IE и Opera 9.5. По статистике тотальное большинство пользователей "альтернативных" браузеров используют их свежие версии. В опере новой бага уже нет. IE 9 - еще бета. Думаю, все-таки поправят.
Владимир 27 октября 2011 в 17:44

Всем привет! Решил поэкспериментировать. У кого-нибудь есть мысли, как с помощью Flexbox прижать footer к низу страницы?
SelenIT 11 ноября 2011 в 23:26

По-моему, в примере со вложенными Float-ами правы как раз Опера (в 12-й альфе всё так же) и IE. Насколько я понимаю п. 10.3.5 спецификации, браузер должен давать плавающему элементу максимальную возможную ширину контента ("by formatting the content without breaking lines other than where explicit line breaks occur"), пока эта ширина может вместиться во внешний контейнер. А по п. 9.5 блочные боксы по соседству с "поплавком" должны вести себя так, будто его нет.

Нашел в багзилле старый баг на похожую тему, добавил ссылку на этот пример в комментах. Посмотрим, что ответят знатоки... :)
SelenIT 3 февраля 2012 в 2:27

Вот, кажется, и всё флексбоксам (по крайней мере, на ближайшие год-два). Жалко, явно ведь к успеху шли...

Веб-стандарты

Какой расклад?

Долететь до Луны, используя катапульту

То, что нельзя прочитать в спецификации

Главный вопрос

Комментарии +

Ваш комментарий

Статьи по тегам

Навигация