Одностроковый CSS от Google 

Сегодня я наткнулся на июньское видео от разработчиков Google Chrome, где Уна Кравец (Una Kravets, @una) рассказывает про современный CSS, который позволит вам создать макет, который поместится в одну строку.

Если ещё не видели, то пожалуйста:

Или почитайте на сайте web.dev (англ.).

Я посмотрел, и мне есть, что сказать, пусть я, конечно, не участвую в разработке браузера Google Chrome и не работаю в Google.

Что нам показали

Прежде всего, я хочу оговориться. На мой взгляд, видео предназначено, прежде всего, для начинающих разработчиков. Может быть для тех, кто всё ещё «верстает» в таблицах (да-да, эти ребята ещё есть в 2020-м году, и они делают совсем не электронные письма, которые должен открыть Microsoft Outlook), либо тех, кто ещё не занимается frontend-разработкой.

Более того, я считаю, что Google большие молодцы, что проводят видео-уроки такого формата, где рассказывают о современных технологиях в web.

При этом вы, как разработчик, должны смотреть не только на технологию, которую вам показывают, но и о том, кто и с какой целью это делает. «Корпорация добра» в видео продвигает свой браузер Google Chrome, что не удивительно. В Chrome всё показанное будет работать. А за его пределами?

Grid

Прежде всего я хочу обратить внимание на главное свойство, вокруг которого строится видео:

.item {
  display: grid;
}

В видео показали, как при помощи достаточно простого свойства, которое задаётся у родительского блока расставлять дочерние элементы, и это круто. Подробную документацию по свойству Grid Layout можно посмотреть на MDN. Там же показали одно из главных преимуществ «грида» — «фракталы», когда вы можете указать относительные размеры элементов и разметить сетку в родительском блоке в *.css-файле, а затем просто разместить эти элементы в вашем *.html-шаблоне.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

А теперь перейдём к сайту caniuse.com, на котором собирается информация о поддержке той или иной технологии браузерами (уверен, что этот сайт у вас давно в закладках браузера). Смотрим: свойство не поддерживается в Opera Mini, UC Browser for Android, QQ Browser, Baidu Browser и KaiOS Browser — скажете, что это неважно, потому что к вам на сайт не заходят через эти обозреватели? Окей! Свойство не будет работать в Safari и Chrome на «старом» iOS (с версии ОС 3.2 до 10.2), прощайте обладатели старых телефонов — вы не целевая аудитория. А ещё свойство имеет ограниченную поддержку в Internet Explorer (т. е. вы не будете точно знать, что будет работать, а что нет — поэтому лучше сразу считать, что поддержки технологии нет, чтобы наверняка). IE — это корпоративные пользователи крупных компаний, например в Мегафоне для доступа к внутренним ресурсам пользуются именно этим браузером (причём достаточно старой версией), значит разработчику нужно это учитывать.

Итого мы имеем 91.26% процентов устройств. Много? Достаточно, но многие из них вам могут быть нужны. Например, ваш сайт нацелен на китайскую аудиторию, которая не может или не хочет отказываться от привычной иконки.

Flex

Второе свойство, которое лично мне нравится больше, хотя и имеет недостаток конкретно для использования в качестве однострокового CSS для макета:

.item {
  display: flex;
}

С этим свойством вы легко расставите и упорядочите элементы внутри строки или столбца блока, но ваш html-код будет более загружен. Подробнее на MDN.

Сайт caniuse.com показывает более уверенную работу свойства для устаревших версий браузеров: 94.74% процентов устройств. Для свойства есть больше префиксов, чем для «гридов», и можно увеличить покрытие аж до 97.93%, но мы всё так же будем иметь неопределённость в рамках Internet Explorer, от которого отказаться (как выяснилось) не так-то просто, китайских браузеров и Opera Mini.

Какой вывод стоит сделать?

Разработчик, в том числе и frontend-developer решает задачи бизнеса, поэтому при выборе технологии тоже стоит уточнять, а кто будет «целевой аудиторией» сайта, в этом вам поможет та же Google Analytics и Яндекс.Метрика, а так же SEO-специалист.

Один из сайтов, которые я делал, был локальным для компании и открывался исключительно в Internet Explorer 6, а системные администраторы не дали доступы. Хотел ли я использовать flex? Очень! Ведь, каждый разработчик хочет не только писать меньше кода, который будет легче поддерживать, но и который будет выглядеть приятнее. Разумеется, в ход шли даже таблицы, а переделка проекта под современные браузеры, когда сменились локальные машины и весь дизайн началась с нуля.

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

Что касается Google, то у них явная цель: популяризировать свой браузер и WebKit, на который перешли почти все разработчики веб-обозревателей (спасибо Mozilla Foundation, что не поддаётся и не останавливается в разработке Gecko). Как разработчику вам не стоит поддаваться призыву писать только такой, простой и красивый код. Нужно следить за задачами бизнеса и прекратить решать за пользователя, через какое окошко смотреть на ваш сайт.