Перевод статьи CSS Grid! с сайта meyerweb.com для css-live.ru, автор — Эрик Мейер

Гриды к нам приходят! Гриды к нам приходят! На самом деле, наконец они появятся в ближайшем браузере! Ураааааа!

Эй, потише там. Что за тарарам?

CSS Grid начнет поддерживаться по дефолту в Chrome и Firefox в марте 2017-го. А именно, Мозилла включит его в Firefox 52, намеченном на 7 марта. Судя по тому, когда Grid включили по дефолту в Chrome Canary, похоже, что Google выпустит его с Chrome 57, намеченным на 14 марта. В обоих случаях, с тех пор как поддержку включат по дефолту в основных релизных каналах — т.е. «вечнозеленых» браузерах, которыми пользуются обычные люди — вся-вся поддержка гридов, что сейчас есть в версиях для разработчиков, станет доступна для всех. Всё гридовое Просто Начнет Работать™^®©.

Эти даты железобетонно гарантированы?

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

Значит, ждем гридов в марте, ага?

Именно!

Ну а когда я действительно смогу использовать гриды? Через два года, через три?

В марте 2017-го. Примерно через четыре месяца.

Но у них же еще не будет поддержки во всех браузерах!

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

Что-то ты лукавишь сейчас.

Ну смотрите, я понимаю. Основная раскладка и обрезка нескольких пикселей по углам — несколько разные вещи, всё так. Если у вас много пользователей с IE9, то переделывать всё на гриды и только гриды — слегка перебор. Но наверняка же у вас есть раскладка, которая работает в старых браузерах, да?

Разумеется.

Тогда мой ответ прежний: в марте 2017-го. Потому что браузеры, которые понимают гриды, понимают и @supports(), и этим можно воспользоваться, чтобы в «гридоспособных» браузерах была грид-раскладка, а не понимающим гридов браузерам по-прежнему отдавать раскладку на флоатах и инлайн-блоках. Джен Симмонс написала исчерпывающую статью о @supports(), и я написал коротенькую статейку, показывающую его пользу в добавлении раскладочных «плюшек». С гридами будет то же самое: задаете правила для старых браузеров, а свежеиспеченные правила оборачиваете в @supports(). Можно «задним числом» улучшать уже имеющиеся раскладки либо применять этот подход к любым новым дизайнам.

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

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

А нельзя мне подождать, пока кто-нибудь запилит мне фреймворк?

Можно, но есть одно «но»: как заметила Джен Симмонс, гриды — это уже фреймворк. Использовать фреймворк как абстракцию для фреймворка кажется по меньшей мере неэффективным. То есть, конечно, люди будут это делать. Будут и Гридстрапы, и GAMLы, и прочие 1280.gs, и что вам угодно. И если вы решите использовать один их них, когда они появятся, вам придется пожертвовать время и силы на изучение того, как он работает. Я советую потратить это время на изучение Гридов Как Таковых, так вы сможете строить собственные раскладки и не ограничивать себя допущениями, неизбежно «вшитыми» во фреймворки.

Гриды сильно смахивают на таблицы 2.0. Я думал, все давно согласились, что таблицы для раскладки — не лучшая идея.

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

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

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

Так гриды решают все-все раскладочные задачи всех времен, выходит? Этакий гиковский раскладочный рай для всех?

О нет, столького еще не хватает. Подсеток в этих релизах еще не будет, так что сверстать некоторые с виду простые гридоподобные раскладки окажется трудно, а то и невозможно. Нельзя напрямую задавать стиль ячейке или области грида: вам придется поставить туда какой-либо элемент из разметки и задать стили ему. Все ячейки и области гридов должны быть прямоугольными — нельзя сделать область в виде буквы Г, например. Зазоры (отступы) между ячейками могут быть только одного размера по каждой оси, совсем как border-spacing в табличных стилях.

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

Что будет, если Firefox либо Chrome задержит гриды на релиз-другой, а остальные выпустят их вовремя?

В таком случае отставший браузер поймет ваши гридовые правила внутри @supports() несколько позже. Невелика беда. Это же относится и к MS Edge, который еще не поддерживает нового синтаксиса гридов, даром что в нем появилась первая поддержка гридов вообще — с другими правилами, за префиксами. Как только Edge научится новому синтаксису и поведению, ваш CSS начнет просто работать в нем, совсем как в Firefox, Chrome и любом другом браузере, который поддержит гриды.

Прекрасно, так где я могу узнать, как их использовать?

Есть несколько хороших ресурсов, и появляются всё новые. Вот лишь несколько:

• Экспериментальная лаборатория раскладок Джен Симмонс — лучшее место, где можно посмотреть в действии примеры раскладки с применением множества новых технологий. Если вас интересуют исключительно гриды, начните с примера № 7, «Этюд галереи», но весь сайт стоит внимательного изучения. Бонус: не забудьте посмотреть, как ведет себя «шапка» страницы при разных размерах окна, по мере его сужения она несколько раз замечательно перестроится, и это сделано гридами.
• Гриды на примерах Рэйчел Эндрю — большая и продолжающая расти коллекция примеров, ссылок, учебных материалов и не только. Там есть целый раздел «Изучаем грид-раскладку», разбитый по подразделам типа «Паттерны пользовательского интерфейса» и «Видеоуроки».
• Полное руководство по гридам на CSS-tricks — CSS-свойства для грид-раскладки и их значения в предельно концентрированном, очищенном от чепухи виде. Если новичок в гридах, вы можете там слегка растеряться, но это тот ресурс, к которому вы, наверное, будете возвращаться снова и снова по мере ознакомления с гридами.
• Спецификация CSS Grid Layout — если больше ничего не помогло, ты всегда можешь использовать силу первоисточника, Люк.

Но помните! Если вы зайдете на эти сайты до марта 2017-го, то вам надо убедиться, что в вашем браузере включена поддержка гридов, чтобы от примеров был толк (не говоря о том, чтоб сделать что-то самим). У Igalia (авторы реализации грид-раскладки в Chrome и Safari, у нас на сайте переведены некоторые их статьи по этой теме — прим. перев.) есть краткая и удобная инструкция по включению грид-раскладки, а у Рэйчел есть еще страница «Браузеры» с дополнительной информацией.

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

Понимаю вас. Ох, до чего же понимаю. Но, похоже, в этот раз всё по-настоящему. Они уже на подходе. Готовьтесь.

P.S. Это тоже может быть интересно:

• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• Голограммы, пленочные засветки и шейдеры на чистом CSS
• «Запашки» кода React-компонентов