CSS Grid уже близко!

Автор: Rachel Andrew    Источник: rachelandrew.co.uk
30.01.2017
814
0
img

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

На сайте 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, и я постараюсь на них ответить.

ПОХОЖИЕ СТАТЬИ: