Какими браузерами поддерживается 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
Известно ли, когда 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, постараюсь ответить на них.
От автора: сегодня с удовольствием хочу вам представить новый open-source инструмент от IBM, который может помочь в работе с CSS Grid, под названием CSS Gridish! CSS Gridish берет спецификации дизайна сетки вашего продукта и делает несколько ресурсов, которые ваша команда может использовать.
Скетч файл с монтажными областями и настройками сетки/макета для дизайнеров
CSS/SCSS код с применением CSS Grid и фолбека в виде CSS Flexbox для разрботчиков
Расширение Google Chrome для проверки выравнивания страниц
Цель – помочь команде адаптировать CSS Grid как можно раньше и активировать более сложные макеты. Продемонстрировать универсальность инструмента можно примерами сеток с Bootstrap, Carbon Design System и Material Design.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Зачем разработчики IBM сделали этот инструмент
Новая спецификация CSS Grid отлично подходит для веб-дизайна. Теперь дизайнеры могут уделять оси Y столько же внимания, сколько и оси Х раньше. Разные проекты начинают документировать переход на CSS Grid.
Многие команды IBM стремятся использовать CSS Grid, но сталкиваются с проблемами. CSS Gridish решает эти проблемы.
Совместимость с браузерами
На данный момент у CSS Grid отличная поддержка в браузерах (
CSS Gridish создает yourGrid.css, использующий CSS Grid, но он также создает файл yourGrid-legacy.css. Этот старый файл хранит только CSS Grid код, если браузер поддерживает его. Если браузер не поддерживает CSS Grid, пользователь получит Flexbox фолбек. Добавьте дополнительные классы в yourGrid-legacy.css, и вот вам обратная совместимость!
Что делать, если больше не нужно поддерживать старые браузеры? Нужно лишь переключиться на yourGrid.css, что сэкономит килобайты.
Связь дизайна и кода
Мы хотим перенести единство команды в сетку. Монтажные области для Sketch и код для веб-разработки генерируются из одного конфиг файла. Конфиг файл сетки не безупречен, но мы хотим, чтобы CSS Gridish dspdfk разговоры о стандартах сетки в похожих инструментах.
Кроме того, детали дизайна легко теряются при переходе в разработку. Поэтому мы создали расширение для Chrome, чтобы можно было посмотреть код. Расширение Chrome можно установить в конфиг файл сетки команды, чтобы все видели одну метку и макет из файла Sketch с одинаковыми горячими клавишами (CTRL+G и CTRL+L). Разработчикам нравится использовать расширение с файлом Sketch, который они реализуют. Дизайнерам нравится смотреть код веб-страниц с его помощью.
Работа с целой страницей
С помощью CSS Grid разработчик может следовать дизайну сетки, когда только создает первый слой HTML. Но все становится сложнее, когда разработчику нужно работать внутри различных областей и в других узлах. Это связано с тем, что display: subgrid все еще развивает поддержку в браузерах.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
CSS Gridish обходит эту проблема, используя вьюпорт единицы ширины вместо процентов. Вы можете вкладывать элементы .yourGrid-grid друг в друга сколько угодно, при этом сохраняя колонки и строки страницы. Единственный найденный нами минус – браузеры по-разному отображают vw единицы со скроллбарами. Это можно решить с помощью margin в сетке.
Принцип работы
В качестве входных данных для CSS Gridish нужен только json файл css-gridish.json. Этот файл принимает спецификации дизайна вашей сетки и варианты сохранения выходных файлов (где и как). Сейчас CSS Gridish делает несколько предположений о дизайне вашей сетки:
Внешние разделители в 2 раза меньше внутренних
Главные колонки жидкие, а не фиксированные по ширине
Совет: для достижения лучшего результата в Sketch, рекомендую, чтобы брейкпоинты, margin и разделители сетки делились на высоту строки.
CSS Gridish запускается в командной строке с помощью npx css-gridish. После запуска команды создастся папка со всеми файлами, и команда может использовать сетку! Чем хорош CSS Gridish, так это тем, что он упрощает работу тем, кто впервые работает с CSS Grid. После того, как пользователи изучат классы, описанные в документации, они обычно будут использовать 2 правила:
От автора: в этом вводном уроке я расскажу вам об этой относительно новой функции CSS, расскажу о текущей поддержке в браузерах и покажу вам несколько примеров того, как работает CSS Grid Layout Module.
Поскольку веб-приложения становятся все более сложными, нам нужен более естественный способ делать расширенные макеты без хакерских решений, которые используют обтекания и другие менее обременительные методы. Увлекательное новое решение для создания макетов идет с CSS Grid Layout Module.
Что такое CSS Grid Layout Module?
Основная идея Grid Layout состоит в том, чтобы разделить веб-страницу на столбцы и строки, а также возможность позиционирования и изменения размера элементов строительного блока на основе строк и столбцов, которые мы создали с точки зрения размера, положения и слоя.
Сетка также дает нам гибкий способ изменить положение элементов только с CSS без каких-либо изменений в HTML. Это можно использовать со медиа запросами для изменения макета на разных контрольных точках.
Поддержка в браузерах
Прежде чем мы сможем больше погрузиться в Grid Layout, важно взглянуть на состояние поддержки в браузерах.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Поддержка в современных браузерах
Как видно из приведенного выше изображения, отличная новость заключается в том, что CSS Grid поддерживается последней версией большинства браузеров.
Если вы нажмете кнопку «Показать все» на Can I use, вы увидите, как далеко назад эта поддержка идет. Поскольку Grid является такой новой функцией, обратная совместимость не распространяется далеко, поэтому вам нужно помнить об этом, если ваша аудитория использует старую версию какого-то основного браузера.
Однако, если навести курсор на версию на Can I use, можно посмотреть скорость глобального использования для этой версии. На момент написания статьи последние версии всех браузеров без поддержки Grid используется гораздо меньше одного процента.
Can I use также указывает, что несколько других браузеров не поддерживают grid layout. К ним относятся Opera Mini и Blackberry Browser. Opera Mini – единственный браузер, обладающий значительным использованием, но поскольку это мобильный браузер, вы, скорее всего, захотите настроить таргетинг на мобильный, а не макет grid.
Фолбеки для не поддерживающих браузеров
Учитывая, что подавляющее большинство используемых сегодня браузеров поддерживают CSS Grid, стыдно не использовать его на том основании, что некоторые браузеры могут его не поддерживать. Существуют различные варианты использования Grid и обеспечения превосходных резервов для не поддерживающих браузеров.
Другим вариантом является использование более сложных фолбеков и переопределений для получения аналогичных результатов для Grid, как указано Рэйчел Эндрю.
И polyfill также доступен для обеспечения рабочей реализации Grid Module для браузеров, которые его не поддерживают. Обратите внимание, что это может быть немного устаревшим.
Пример Grid Layout
CSS Grid Layout - самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как столбцы так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила к родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).
Контейнер сетки Элемент к которому применяется display: grid . Это прямой родитель для всех элементов сетки. В этом примере grid-container является контейнером. Элемент сетки Дочерние элементы (прямы потомки) контейнера. На примере выше item это элемент сетки. Линия сетки (Grid Line) Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными (линии колонок) или горизонтальными (линии строк) и располагаться по обе стороны от строки или столбца. На изображении синяя линия является примером вертикальной линии (линией колонки). Трек сетки (Grid Track) Пространство между двумя соседними линиями. Трек можно представить как строку (колонка) или столбец (ряд). Вот трек между второй и третей линией строк. Ячейка сетки (Grid Cell) Пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная единица измерения сетки. Вот пример ячейки между линиями строк 1 и 2, линиями колонок 2 и 3. Область сетки (Grid Area) Общее пространство окружённое четырьмя линиями. Область может состоять из любого количества ячеек. Вот пример области между строками 1 и 3 и колонками 1 и 3. Как устроен grid контейнер
2. Сравнение с Flexbox
В отличие от Flex, которая ориентирована на одну ось, Grid оптимизирована для двумерных компоновок: когда требуется расположить (выровнять) содержимое в обоих измерениях (по вертикали и горизонтали).
Кроме того, благодаря возможности явного позиционирования элементов в сетке, Grid позволяет выполнять кардинальные преобразования в структуре, не требуя никаких изменений HTML разметки. Комбинируя медиа-запросы со свойствами CSS, управляющими компоновкой контейнера grid и его дочерних элементов, можно адаптировать верстку под любые форм-факторы устройств.
Grid и Flexbox, имеют свои особенности и нельзя сказать, что одно заменяет другое. Скорее Флекс является дополнением к Грид, или наоборот.
Flexbox фокусируется на распределении пространства внутри одной оси, использует более простой подход к компоновке, может использовать систему упаковки строк на основе размера содержимого для управления своей вторичной осью и полагается на иерархию разметки. Тогда как Grid больше подходит для создания каркасов, потому что имеет более мощный и комплексный подход и в целом не зависит от иерархии разметки. В отдельных случаях Grid позволяет создать адаптивный макет, который невозможно создать с помощью Flex или как-то еще.
Flexbox - ориентируется по одной оси CSS Grid - ориентируется по двум осям
3. Поддержка браузерами
В данный момент почти все современные браузеры поддерживают Grid CSS без необходимости указывать дополнительные префиксы и покрывают 95.45% всех устройств.
Посмотреть на сайте Can I use
4. Свойства для контейнера
display Опеределяет элемент как контейнер и устанавливает новый контекст форматирования сетки для его содержимого.
- grid - формирует сетку как блок
- inline-grid - формирует сетку как строчный элемент
- subgrid - если элемент сам является контейнером
- px, em, rem, % - может быть фиксированным размером, процентами или частью свободного пространства в сетка (определяется с помощью единицы fr - фракция
- min-content - наименьший размер контента. Для текста это ширина самого длинного слова или неразрывного фрагмента.
- max-content - наибольший размер контента. Для текста это длина самой большой строки безе переносов.
- fit-content(max) - функция которой передается макс. размер. Если контент меньше этого размера, ведет себя как auto , если больше, то ограничивает размер ряда/колонки до указанного в параметре max.
- minmax(min,max) - функция, позволяет разом указать минимальный и максимальный размер.
Значения:- px,em,rem. - единицы длины
- % - проценты
- fr - фракция (гибкий размер). Может использоваться только для макс. значения.
- min-content
- max-content
- auto - зависит от того, используется оно как максимальное или минимальное значение функции minmax(): если в качестве максимума, то тоже самое что max-content, если в качестве минимума, то значение будет минимальным возможным размером для ячейки. Такой размер отличается от min-content и задается свойствами min-width или min-height.
- auto-fill - повторяет ряд/колонку пока есть место в контейнере. Хотя бы одно повторение будет всегда.
- auto-fit - то же самое, но после размещения элементов оставшиеся пустыми ряд/колонка сжимаются и исчезают, в результате контейнер всегда будет выглядеть заполненным.
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
- grid-template-columns: repeat(2, 100px 1fr);
- grid-area-name - имя области заданное с помощью grid-area
- . - точка обозначающая пустую ячейку
- none - области не определены
See the Pen Grid Ex1 by ismail (@itdoctor) on CodePen.
- none - устанавливает все три свойства в их начальное значение
- subgrid - устанавливает grid-template-columns и grid-template-rows в subgrid и grid-template-area в его начальное значение / grid-template-columns - устанавливает эти два свойства в определенное значение, а grid-template-area в none
- grid-template:
"header header header" 100px
"main main sidebar" 500px / 1fr 1fr 1fr; /*
100px - высота первой строки
500px - высота второй строки
1fr 1fr 1fr - ширина столбцов
*/
- line-size - значение размера, например в px
- grid-column-gap: 10px;
- grid-row-gap: 20px;
- grid-gap: 15px;
- grid-gap: grid-row-gap grid-column-gap;
- track-size - значение размера в %, px, em, rem или fr
- grid-auto-columns: 320px;
- grid-auto-rows: 1fr;
- row - говорит алгоритму авто-размещения заполнять каждую строку поочерёдно, добавляя новые строки при необходимости
- column - говорит алгоритму авто-размещения заполнять каждую колонку поочерёдно, добавляя новые колнки при необходимости
- dense - говорит алгоритму авто-размещения заполнять дыры в сетке, если более мелкие элементы появляются позже
- none - настраивает все совйства на их начальные значения
- grid-template-rows / grid-template-columns
- grid-auto-flow grid-auto-rows / grid-auto-columns
- grid-template-areas
- grid-template
- grid: 'header header header header' 'main main main right right' 'footer footer footer footer';
- grid: 100px 300px / 3fr 1fr;
- grid: auto-flow dense 100px / 1fr 2fr;
- grid: 100px 300px / auto-flow 200px;
- grid: [row1-start] "header header header" 1fr [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto;
- grid: repeat(auto-fill, 5em) / auto-flow 1fr;
- grid: auto-flow 1fr / repeat(auto-fill, 5em);
- grid: auto 1fr auto / repeat(5, 1fr);
- grid: repeat(3, auto) / repeat(4, auto);
- start - размещает все элементы в начале ячеек (слева / сверху)
- end - размещает все элементы в конце ячеек (справа / снизу)
- center - размещает все элементы по центру ячеек
- stretch - растягивает все элементы на всю ширину / высоту ячеек
- align-items: center;
- justify-items: end;
- place-items: start;
- place-items: align-items justify-items;
- start - размещает все элементы в начале ячеек (слева / сверху)
- end - размещает все элементы в конце ячеек (справа / снизу)
- center - размещает все элементы по центру ячеек
- stretch - растягивает все элементы на всю ширину / высоту контейнера
- space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям
- space-between - одинаковое пространство между элементами, без отступов по краям
- space-evenly - одинаковое пространство между элементами и полноразмерные отступы по краям
- align-content: center;
- justify-content: end;
- place-content: start;
- place-content: align-content justify-content;
5. Свойства для дочерних элементов
grid-area Даёт название элементу чтобы можно было ссылаться на него с помощью шаблона созданного через свойство grid-template-areas. В качестве альтернативы, это свойство может быть использовано в качестве сокращения для grid-row-start + grid-column-start + grid-row-end + grid-column-end
Читайте также: