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