CSS Grid грядет

CSS Grid грядет

От автора: на сайте can I use поддержка сеток уже почти зеленая. Уже в этом году CSS Grid можно будет использовать в браузерах без префиксов и флагов. В этой статье я собрал все вопросы, на которые мне приходилось отвечать о поддержке данной функции в браузерах, а также о сетчатом макете.

Где можно посмотреть последнюю информацию о поддержке Grid в браузерах?

Эта статья быстро устареет. Я создал сайт Grid by Example, где стараюсь максимально быстро обновлять информацию о поддержке. Там можно найти ссылки на трекеры багов в браузерах, а также сайт можно использовать в качестве уведомлений.

Не будет ли первое время в Grid слишком много багов? Может, слишком рано пользоваться этой функцией?

Первопроходцы Flexbox могут вспомнить разное поведение данного новшества в разных браузерах. Различались даже две версии flexbox в одном и том же браузере. По понятным причинам люди беспокоятся, что то же самое будет с Grid Layout.

Но в этот раз все по-другому. Grid Layout разрабатывался как спецификация, и на данный момент он работает в браузерах уже на протяжении пяти лет. Версии в Chrome, Firefox и Safari полностью следуют спецификации, которая была разработана, как только заработали эти реализации. От разработчиков поступала полная обратная связь. За это время спецификация сильно изменилась, однако все изменения работают только после включения определенных флагов, так что на продуктив они не влияют.

Таким образом, новенький Grid Layout, который скоро заработает в браузерах, представляет собой довольно зрелую работу. Вы считаете, что программного обеспечение, разрабатываемое вот уже 5 лет, можно назвать слишком новым?


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Известно ли, когда Safari будет поддерживать Grid?

В Safari Technology Preview поддержка Grid Layout уже есть. Так как над Chrome работают те же разработчики, можно примерно предположить, что и там поддержка скоро будет. Однако Apple, как правило, не говорит, что будет в релизе, и когда он будет.

Grid может быть добавлен в мартовский релиз – наилучший сценарий. По старым графикам есть более пессимистичный прогноз – октябрь этого года. Лично мне кажется, если Grid попал в Preview, то стоит ожидать его в Safari уже в этом году. Но это мое предположение!

По данным сайта can i use grid уже поддерживается в edge – а что с остальными браузерами?

На данный момент в Edge работает та же версия Grid Layout, что и в IE10 и 11. Это была оригинальная спецификация, разработанная Microsoft.

Я уже писал о различиях в спецификациях, а также о том, стоит ли использовать версию с префиксами для IE/Edge для обратной совместимости. Если коротко, то «зависит от ситуации». Хотите поподробнее ознакомиться с вопросом, почитайте статью «стоит ли использовать IE версию Grid Layout».

Получит ли IE11 новую спецификацию для Grid?

Нет, в IE11 останется версия Grid с IE10.

То есть мы не можем использовать Grid из-за IE/Edge!

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

Даже если Grid слишком рано использовать на всем макете, можно пользоваться методами с лучшей поддержкой для создания структур главного макета, после чего использовать Grid для «вытачивания» UI компонентов, которые можно показывать схожим образом в браузерах без поддержки сеток. Мне кажется, что основная проблема людей, которые используют Grid, заключается в невозможности рассматривать старый «главный макет» в качестве примера для использования. Мне больше нравится изменять маленькие и сложные UI компоненты. Зачастую именно на них можно использовать раннюю спецификацию.

Можно ли определять IE и делать что-то?

Не пробуйте определить IE. Лучше тестируйте поддержку Grid через Feature Queries. Проверить, работает ли новая спецификация, можно с помощью display: grid. Протестировав display: -ms-grid, вы получите текущую версию реализации сеток в Edge. В IE10 и 11 Feature Query не поддерживаются.

Можно ли включить Grid через полифил?

Я бы не стал. Если ваш макет довольно сложный, и вам нужны полифилы для нормальной отрисовки в браузерах без поддержки, скорее всего, полифилы сильно понизят производительность и отрицательно повлияют на пользовательский опыт.

Grid отлично подходит для усиления старых методов макетирования. Используйте Feature Queries и усиливайте простые макеты, и как только Grid станет поддерживаться, браузеры подтянутся за вашим дизайном.

Все ли из спецификации level 1 работает в браузерах?

Большая часть функций работает в браузерах и полностью совместима (одинаково работает во всех браузерах). Большой пробел сейчас только с поддержкой подсеток.

У меня остались еще вопросы!

Задавайте их на моей странице CSS Grid Layout AMA на GitHub, постараюсь ответить на них.

Автор: Rachel Andrew

Источник: https://www.rachelandrew.co.uk/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree