Pull to refresh

Comments 52

Конечно интересно! Про полифилы ещё бы пару слов.

Добрый день.


Спасибо за отзыв. Хорошо, сделаем. Добавлю пункт "Полифилы, Progressive Enhanced для CSS Grid Layout" в следующую статью.

А когда следующая статья?

Наконец-то в браузере появятся нормальные лейауты! FlexBox вместе с GridLayout покрывают практически всю необходимость разметки в приложениях.
А вообще, как-то странно: именно производители "того самого браузера" изначально предложили и пилили спецификацию GridLayout, теперь же хуже всех ее поддерживают.

Теперь можно использовать спецификацию CSS Grid Layout без флагов в следующих браузерах: Firefox 52, Chrome 57, Opera 44, Safari 10.1. Какой из браузеров остался позади, думаю, вы догадываетесь. Точнее он поддерживает старую версию спецификации.

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

Добрый день.


А так всё равно придётся писать кучу флагов для совместимости.

Да, есть такое. Но можно завтавить машины страдать. И там получается не такая уж и большая куча )

Насколько я знаю, нельзя просто так взять и расставить префиксы для IE10+. Так как там есть много несовместимостей.
вещь отличная grid, но немного рано еще их юзать по сравнению с flex
http://caniuse.com/#search=flex — поддерживают все современные браузеры
http://caniuse.com/#search=grid — некоторые версии не поддерживают
я думаю еще год и можно будет спокойно юзать grid для любого проекта… имхо
Насчет последней строчки — сомнительно как-то.
Для узконишевых проектов (с технически продвинутой аудиторей) гриды можно будет применять уже в этом году.
А вот для широких масс, думаю, придется ждать еще минимум года 2, если не больше. Хвост эксплореров, опер мини и тому подобного будет волочиться ещё долго.

Добрый день.


Да, полностью согласен. Я знаю много проектов, у которых целевой браузер — это Chrome. Вот где свобода для творчества.

UFO just landed and posted this here
А вы не могли бы предоставить пруф на обновление гридов в IE10? Что-то не смог найти в инэте информацию об этом:(
Даже если вдруг прилетит такое обновление в IE10/11 это совсем не будет гарантировать, что у пользователя есть этот апдейт :)
UFO just landed and posted this here
Да, видимо так оно и есть, спасибо!
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
1fr, не может быть меньше единицы, а как тогда сделать header и footer, так чтобы их высота регулировалась бы высотой содержимого? Вот так почему то работает: grid-template-rows: 0fr auto 0fr;

Добрый день, Руслан.


Спасибо за интересный вопрос. Отвечу сначала как сделать так, чтобы высота header'a и footer 'a зависела от контента. Довольно просто, задайте значение auto или можно использовать функцию minmax() со следующими значениями minmax(auto, 10vh). что в свою очередь будет означать: максимам по высоте будет 10vh минимум auto (по контенту).


Вот так почему то работает: grid-template-rows: 0fr auto 0fr;

Конечно работает) Браузер умный и пытается посчитать значение. Тут можно почитать про алгоритм. Если в кратце, то браузер пытается высчитать гипотетическое значение 0_О. Не делайте так ) Вы заставляете страдать браузер.

Пробовал auto X auto, но вместо X не знаю что подставить, 100% не работает )

Ну вы явно что-то не так делаете. Покажите на примере. И опишите подробно как вы хотите, чтобы себя вели строки, колонки.

UFO just landed and posted this here
и получить проблемы в мобильном сафари. который очень по своему понимает что такое 100vh.
Кстати, вы в данной статье и у себя на сайте добавили ссылки на изучение этой спецификации. Может, если не сложно, добавите и нашу ссылку, всё же у нас есть очень много годного по этой теме?

Добрый день, Максим.


Да, конечно.

Еще, судя по Can I Use, не поддерживается дефолтный браузер андроид и в мобильном хроме есть баг. Также не ясно что там с UC Browser, который в последнее время становится все популярней на Андроиде. Ждем полную поддержку, короче)
Спасибо за статью. Было бы интересно почитать более развёрнутые статьи с описанием чего-то сложного (например, неявных областей, растягивания элементов и прочего). А-то статей с описанием банальных вещей много, а чего-то толкового — нет.
Да, спасибо, эти видел. Я к тому, что статей про grid-template-columns/grid-template-rows уже куча, а таких, где разбираются сложные вещи — маловато.
Ну да, есть такое. Но вы подождите, этот модуль уже поддерживается почти во всех современных браузерах, кроме Edge, но даже и он уже обновляет свою старую реализацию! Так что уверен, что статьи по гридам сейчас должны появляться одна за другой :) А вообще, да, было бы весьма интересно почитать статьи var_bin и других неравнодушных к этой мощной и долгожданной спецификации разработчиков :)

Добрый день.


Да, вы правы. Таких статей хватает. У меня был соблазн написать сразу большую сложную статью. Но я от этой идеи отказался. Потому как даже такие простые штуки как grid-template-columns/grid-template-rows скрывают у себя под капотом очень много сложного. Говорю из своего опыта. Нужно с ними для начала разобраться, постоить с помощью этих штук не один макет, а потом двигаться к таким крутым вещам, как auto-fill, auto-fit, auto-flow, grid-auto-flow, grid-auto-rows, grid-auto-columns и т.д. Также важно понимать как работают алгоритмы расчетов значений, чтобы представлять, что вы получите на выходе.


И только после этого, можно делать что-то сложное.


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

На старые браузеры можно и нужно класть болт. Доля IE около 5% вместе с Edge. А вот процент людей с плохим зрением или ограниченными возможностями куда выше. Позаботьтесь лучше о них, а не о тех кто не может нормальный браузер себе поставить.

Добрый день.


На старые браузеры можно и нужно класть болт.

Ну не обязательно ) Можно подойти к данной проблеме с другой стороны. Использовать Progressive Enhancement. подход.


А вот процент людей с плохим зрением или ограниченными возможностями куда выше.

Тут согласен. На это нужно обращать внимание.

Вы бы хоть скриншоты прикладывали для тех, у кого ваши примеры не работают.


Не знаю, чего все так носятся с этими гридами. Сила флексбоксов в переносах при переполнении, из-за чего раскладка может динамически меняться, подстраиваясь под размер контейнера (а контейнер — далеко не только окно браузера). А возможность "не менять хтмл" — уже давно не актуальна, так как сейчас страницы собираются из компонент по шаблонам и шаблон — такой же равноправный код компонента, как и стили и скрипты.

Добрый день, Дмитрий.


Вы бы хоть скриншоты прикладывали для тех, у кого ваши примеры не работают.

Возможно вы и правы. Думаю, что те кто читают эту статью и у них не завелись примеры, то у них есть developer edition версия браузера. Плюс ко всему, можно включить флаги, и тогда полюбому заведется.


А возможность "не менять хтмл" — уже давно не актуальна, так как сейчас страницы собираются из компонент по шаблонам и шаблон — такой же равноправный код компонента, как и стили и скрипты.

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


Сила флексбоксов в переносах при переполнении, из-за чего раскладка может динамически меняться, подстраиваясь под размер контейнера (а контейнер — далеко не только окно браузера).

Гриды тоже это все умеют. Единственная с ними проблема (пока) — поддержка. Это да, очень большая проблема. Но CSS Grid Latout очень крут и он прекрасно решает множество задач и при этом не нужно себе "стрелять в ногу".


К примеру. Мы с коллегами пробовали сделать шаблон на flexbox и на grid. Базовая разметка и код на grid заняли намного меньше места и проблем с ними было меньше. Пример, конечно, из вакуума, но все же.


Вы попробуйте CSS Grid Layout для себя, для фана. Я вас уверяю, результатами останетесь довольны )

У меня есть глубокое убеждение, что люди, которые сегодня «ворчат» на эту новую спецификацию, просто ещё не имели с ней дела, не щупали её. Просто нужно хотя бы поизучать её, поиграться с ней, тогда и отношение к ней сразу поменяется.
Я слабо себе представляю шаблон, который хоть раз не пришлось менять из-за смены поведения какого-то элемента в этом шаблоне или еще чего-то там.

Я и говорю о том, что изменение шаблона — не проблема. Более того, изменения в шаблоне более явные — если вам нужно разместить 4 элемента в 2 строки, то в шаблоне у вас будет ровно это. Если же вы будете раскладывать элементы через css, то придётся раскладывать блоки в уме по тем коэффициентам, что заданы в css. Короче, при компонентном программировании изменение шаблона — вообще не проблема.


Думаю, что те кто читают эту статью и у них не завелись примеры, то у них есть developer edition версия браузера.

А зачем она им? Я вот занимаюсь разработкой веб приложений. Если в моём первом попавшемся браузере примеры не заводятся, значит технология ещё не готова к продакшену. Совсем. А пока не будет готова — её и копать нет особого смысла.


Гриды тоже это все умеют.

Раньше не умели. В статье тоже на этом не акцентировалось внимание. Ну, это замечательно. Хотя, лучше бы расширили возможности флексбокса, чем делать совсем другой display.


Мы с коллегами пробовали сделать шаблон на flexbox и на grid.

Покажете что за шаблон? Я бы тоже поучаствовал.

По поводу шаблона. Ну такое. Спорить не буду. У каждого свои взгляды на это. Как говорится, карандаши на вкус и цвет разные )


А зачем она им?

У меня, например, всегда есть Chrome Canary и FF Developer Edition. Я их использую не для того, чтобы какие-то новые фичи смотреть (хотя и это бывает), а потому что, инструментарий разработчика там намного богаче. В тот же обычный Chrome не выкатывают никакие обновления для разработчиков, пока они не пройдут хорошую обкатку в Canary.


Покажете что за шаблон? Я бы тоже поучаствовал.

Набросал похожий пример (реальный шаблон не могу показать) http://codepen.io/var-bin/pen/yMWoOX К пример, тот же mobile first на grid'ах решается очень изящно. (поизменяйте размеры браузера). Если развить данную тему, взять flexbox, @support, grid'ы, то получиться довольно круто (Progressive Enhancement)

Жаль, что плюс можно ставить только один раз )

Только вы все-таки поменяли разметку )

Ну да, асайд унёс вниз, где ему и место, а тело страницы (всё, что между шапкой и подвалом) завернул в секцию.

Сила флексбоксов в переносах при переполнении, из-за чего раскладка может динамически меняться, подстраиваясь под размер контейнера

У гридов эта сила тоже есть (auto-fill и auto-fit), при этом при переполнении структура этих самых компонентов остается именно сеткой, с вертикальным и горизонтальным ритмом, без странностей в последней строке, независимо от размеров контента каждого компонента. И при любом размере контейнера эта сетка может использовать доступное пространство оптимальным образом (пример частного случая).

Но в основном с гридами «носятся» потому, что они избавляют от головной боли и хаков в решении первоочередной задачи верстки страниц — размещения и взаиморасположения основных структурных блоков (шапка, меню, сайдбар, подвал и т.п.). До сих пор для этого требовались горы хаков. Даже флексбоксы, хотя и здорово облегчили задачу, не решили ее до конца — с ними по мере загрузки страница перестраивается, блоки перепрыгивают, удаление/добавление блока влияет на поведение остальных ит.д. С гридами же задача решается тривиально, а блоки остаются каждый на своем месте, надежность старых добрых таблиц и гибкость семантической разметки «в одном флаконе». А если еще медиавыражения добавить..:)
И при любом размере контейнера эта сетка может использовать доступное пространство оптимальным образом

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


Даже флексбоксы, хотя и здорово облегчили задачу, не решили ее до конца — с ними по мере загрузки страница перестраиваетс

Это проблема не флексбоксов, а рассмотренного там кривого решения загрузки стилей. Путём разбиения стилей на 2 там добились более быстрого отображения шапки, но более медленного отображения основного контента, что довольно глупо.


А если еще медиавыражения добавить

А они зачем?

Такой интересный вопрос:
можно ли с помощью CSS селектора обратиться к заданному треку?

Например сделать 3ю колонку синей, а 2ю строку — зелёной.

В общем случае пока, к сожалению, нельзя, но рабочая группа CSS уже над этим думает.


В частных случаях, когда все элементы явно привязаны к своим местам в гриде (без алгоритма авторазмещения), можно использовать для этой цели псевдоэлементы ::before и ::after грид-контейнера, растянув их на весь ряд/колонку (как здесь) и поставив их ниже основного контента по z-indexу. Ну или просто задавать фон элементам в тех же правилах, где задается положение...

Only those users with full accounts are able to leave comments. Log in, please.