CSS Grid уже близко!
На сайте caniuse.com все больше зеленого цвета. С приходом нового года в браузерах появляется CSS Grid, и сразу без префиксов. Этот пост будет ответом на вопросы, которые мне задавали о CSS Grid и его поддержке браузерами.
Где я могу найти актуальную информацию о поддержке CSS Grid?
Этот пост быстро потеряет актуальность. На странице моего сайта Grid by Example я стараюсь обновлять информацию как можно чаще. Там есть ссылки на трекеры браузеров и сообщения о новых внедрениях.
Не будет ли по началу проблем с CSS Grid? Не рано ли его использовать?
Добавленный ранее Flexbox запомнился в основном разной реализацией в браузерах, даже в разных версиях одно и того же браузера. Вполне понятно, что люди волнуются на счет такой же ситуации с Grid Layout.
Но это не тот случай. Grid Layout разрабатывался более 5 лет. Реализация в Chrome, Firefox и Safari соответствует спецификации, которая составлялась на основе вступивших в действие реализаций и отзывов от разработчиков браузеров. Основные изменения в спецификации происходили на протяжении этого времени, но все это было «за кулисами» и не повлияло на готовый код.
Таким образом, Grid Layout – это довольна таки зрелая работа. Считаете ли вы, пятилетний программный продукт слишком новым для использования?
Когда Grid Layout появится в Safari?
В Safari Technology Preview уже есть поддержка Grid Layout, его реализация сравнима с реализацией в Chrome, так как над ним работали те же разработчики. Однако Apple не спешит оглашать, что будет в релизе и когда он будет.
Возможно, Grid будет включен в мартовский релиз. Это был бы наилучший сценарий. Немного более пессимистичный вариант - в октябре по старым графикам. Но тот факт, что Grid уже есть в Preview, говорит о том, что скорее всего он появится в 2017, но это всего лишь моё предположение.
Можно ли использовать Grid в браузере EDGE? Есть ли разница по сравнению с другими браузерами?
Текущая версия Grid Layout в Edge такая же как в IE10 и 11. Это оригинальная версия спецификации, разработанная Microsoft.
Я уже писала о разнице между спецификациями и о том, есть ли смысл использовать префиксы IE/Edge для обратной совместимости. Если коротко – «смотря как», но лучше посмотрите статью «Можно ли использовать Grid Layout в IE», если хотите разобраться в деталях. Так же вы можете следить за статусом обновления этой спецификации в Edge.
Появится ли новая спецификация Grid в IE11?
Нет, IE11 будет использовать старую версию Grid, как в IE10.
Значит, мы не можем использовать Grid из-за IE / EDGE!
Только если вы убеждены, что вебсайты должны одинаково выглядеть во всех браузерах и на всех устройствах. Если отсутствие возможности получить одинаковую разметку во всех браузерах полностью останавливает вашу работу, то возможно, использовать Grid действительно рано. Однако это значит, что вам рано использовать и другие новые свойства браузеров. Надеюсь, вы можете играть и экспериментировать с ними в свободное время, поскольку среди них много действительно интересных!
Если вы считаете, что использовать Grid для всей разметки еще рано, то для верстки основных структур используйте другие методы, а Grid применяйте для тех компонентов, которые могут отображаться точно так же даже без поддержки Grid. Думаю, что одной из основных проблем, с которой столкнутся люди, используя Grid, будет отсутствие возможности увидеть «основную разметку». Я больше заинтересована в разметке маленьких компонентов, которые чаще всего расположены в таких местах, где можно начать использовать спецификацию раньше.
Можно ли распознать IE и сделать что-то другое?
Не пытайтесь распознавать IE, лучше проведите тест на поддержку Grid, используя Feature Queries. Вы можете проверить поддержку новой спецификации, протестировав свойство display: grid, а чтобы проверить её в Edge, протестируйте display: -ms-grid. (IE10 and 11 не поддерживают Feature Queries.)
Стоит ли использовать polyfill'ы для GRID?
В веб-разработке polyfill'ами называют скрипты, частично эмулирующие спецификации HTML или CSS. В качестве polyfill'a может выступать библиотека JavaScript, Flash и т.п.
Я бы не советовала. Если ваша разметка на столько сложна, что для получения приемлемого результата нужны polyfill'ы, то скорее всего, их использование будет иметь негативный эффект с точки зрения производительности и удобства.
Grid хорошо использовать как улучшение для старых методов верстки. Используйте Feature Queries и совершенствуйте простые макеты, позвольте браузерам дорасти до вашего дизайна и дождитесь поддержки Grid.
Все ли из 1 уровня спецификации включено в браузеры?
Большинство включено и совместимо (то есть работает одинаково во всех браузерах). Большое упущение – это поддержка subgrid.
У меня еще остались вопросы!
Задайте их на странице CSS Grid Layout на GitHub, и я постараюсь на них ответить.