Egor Levchenko

Заметка

Одностроковый 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). Как разработчику вам не стоит поддаваться призыву писать только такой, простой и красивый код. Нужно следить за задачами бизнеса и прекратить решать за пользователя, через какое окошко смотреть на ваш сайт.