Перевод статьи CSS Grid Layout is Here to Stay с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

О том, что стояло за разработкой CSS Grid Layout в Chromium/Blink и Safari/WebKit, которую вела Igalia при поддержке Bloomberg.

Мы долго шли к этому, но наконец CSS-гриды уже здесь! (эмодзи: летящая ракета) На прошлой неделе вышли Chrome 57 и Firefox 52, став первыми браузерами, поддерживающими грид-раскладку без префикса для всех пользователей (в IE/Edge гриды поддерживались с 2012 г., но лишь старая версия спецификации и за префиксом). Больше того, Safari тоже должен вот-вот включить ее поддержку.

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

Igalia играет ключевую роль в реализации CSS-гридов в Chromium/Blink и Safari/WebKit с 2013 г., а спонсирует это Bloomberg. Об этом успешном сотрудничестве и заметка.

Хорошо забытое старое

Гриды — вовсе не что-то новое, ведь их упоминания можно найти в самых первых обсуждениях между создателями CSS. Вот выдержка из письма Хокона Виума Ли в списке рассылки www-style за июнь 1995 г.:

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

h&kon

С той поры веб не стоял на месте, и проблему дизайна по сетке в HTML/CSS пытались решить (и решали) множеством разным подходов.

В начале этого десятилетия Microsoft начал работу над тем, что в итоге стало первой спецификацией CSS Grid Layout. Она была основана на реализации в Internet Explorer 10  и опыте, полученном Microsoft при ее разработке. IE10 вышел в 2012 г., и в нем эта первая спецификация была реализована за префиксом.

Затем, в конце 2011 г., Google стал добавлять поддержку в WebKit. В то время и Chrome, и Safari использовали один движок — WebKit; позже, в 2012-м, от него отделится Blink.

Тем временем Мозилла не торопилась с реализацией гридов в Firefox, потому что они конфликтовали с их собственным типом грид-раскладки в XUL.

Сотрудничество Igalia и Bloomberg

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

Bloomberg решил взяться за CSS Grid Layout в порядке сотрудничества с Igalia. Мои коллеги Серхио Вильяр и Сан Лопес приступили к грид-раскладке где-то летом 2013-го. В 2014-м Хави Фернандес и я сменили Сана и тоже включились в работу. И вот мы работаем над этим уже больше трех лет.

Вначале мы работали вместе с несколькими представителями Google, но затем Igalia заняла ведущую роль в разработке спецификации. Спецификация довольно сильно развилась и переменилась с 2013 г., так что нам приходилось отслеживать все эти изменения, стараясь всё время поддерживать нашу реализацию актуальной, и в то же время продолжать добавлять новые функции. Поскольку у Blink и WebKit и после разделения оставалось довольно много общего кода, мы работали над обеими реализациями одновременно.

Igalia и Bloomberg вместе работают над тем, чтобы сделать веб лучше.

И это сотрудничество оказалось более чем просто успешным, ведь сейчас грид-раскладка уже работает в  Chromium и в WebKit тоже включена по умолчанию (что вроде бы значит, что в ближайшем релизе Safari 10.1 она тоже появится).

Спасибо Джен Симмонс (@jensimmons) за дополнение насчет Safari 10.1.

А дальше что?

Обновите свои браузеры, убедитесь, что вам досталась версия с поддержкой Grid Layout и начинайте пользоваться грид-раскладкой, играйте с ней, экспериментируйте и т.д. Будем рады любым найденным ошибкам и вообще обратной связи. Уже поздно менять текущую версию спецификации, но идеи для будущей версии рабочая группа CSS уже собирает в своем репозитории на Github.

Если хотите начать работать с грид-раскладкой, в Интернете есть немало ресурсов:

• Чудесная документация по CSS-гридам есть на MDN
• «Гриды в примерах» (gridbyexample.com) — отличный сайт с кучей ресурсов (примеров, видео и т.д.), созданный Рэйчел Эндрю.
• На labs.jensimmons.com есть великолепные примеры грид-раскладки авторства Джен Симмонс.
• И много других… Простой запрос в поисковике выдаст вам доклады со многих конференций, статьи в разных блогах с базовыми введениями, продвинутыми подробностями и детальными справочниками. Например, я выступал с докладом на HTML5DevConf 2015, это было достаточно давно, но он по-прежнему может служить введением в грид-раскладку.

Кто-то может подумать, что раз браузеры с поддержкой CSS-гридов уже вышли, то дело закончено. Это не имеет ничего общего с правдой, поскольку еще масса работы впереди:

• Важным шагом будет закончить набор тестов W3C. Igalia активно развивает его, и Blink с WebKit уже его проходят, но всю спецификацию он пока еще не покрывает.
• В текущей реализации недостает некоторых функций. Например, никто пока не поддерживает подсеток, веб-разработчики пишут нам, что отчаянно нуждаются в них. Или еще пример, мы до сих пор доделываем поддержку выравнивания по базовой линии в Blink и WebKit.
• Найденные баги и проблемы надо будет исправлять, из-за некоторых может даже понадобиться чуть-чуть подправить спецификацию.
• Надо будет поработать над оптимизацией скорости. CSS Grid Layout — огромная спецификация, так что самое сложное в ее реализации уже позади. Теперь пора улучшать быстродействие для разных практических ситуаций.
• И, как я уже объяснял ранее, люди уже задумываются об идеях для будущей версии спецификации. Прогресс не собирается останавливаться.

Благодарности

Прежде всего нужно еще раз подчеркнуть роль Bloomberg в разработке CSS Grid Layout. Без их видения и поддержки вряд ли удалось бы так быстро довести их до выпуска.

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

Итак, большое спасибо:

• Ребятам из Microsoft, которые начали работу над спецификацией.
• Теперешним редакторам спецификации: Элике Этемад (fantasai), Россену Атанассову и Табу Аткинсу-младшему. Особенно fantasai и Табу, которым пришлось возиться с большинством проблем, с которыми мы столкнулись.
• Всей рабочей группе CSS за ее работу над спецификацией.
• Тем, кто нас проверял, как в Blink, так и в Webkit: Кристиану Бисингеру, Дэрину Адлеру, Жюльену Шаффре и многим другим.
• Другим разработчикам реализации: Дэниелу Хольберту, Мэтсу Палмгрену и др.
• Популяризаторам грид-раскладки: Джен Симмонс, Рэйчел Эндрю и др.
• Множеству других людей, кого я забыл включить в список, кто помог сделать CSS Grid Layout новейшим модулем для раскладки в вебе.

Спасибо вам всем! (эмодзи: улыбающийся котик) И особенно Bloomberg, за то, что поделились с Igalia этим замечательным опытом. Мы очень рады, что вместе прошли этот путь, и очень надеемся, что впереди у нас еще более замечательные достижения.

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

• Псевдокласс :has() — не только «родительский селектор»
• Голограммы, пленочные засветки и шейдеры на чистом CSS
• День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari