Прогрессивное улучшение CSS-лэйаута: от Float до Flexbox и Grid

Dmitriy Yaroshenko
Jul 28, 2017 · 9 min read

Всем привет! Сейчас вы прочтете лирическое вступление к переводу статьи Мануэля Матузовича со SmashingMagazine. Если лирика не для вас, можете смело пропустить два следующих абзаца и приступать к материалу :)

Возможно, вы встречали еженедельные дайджесты по миру фронтенда на хабре, а если еще нет, то обязательно загляните - уверен, найдете кучу интересного для себя. К сожалению, по-прежнему большинство хороших материалов по фронтенду выходит на английском языке и чаще всего они не доходят до русскоязычной сети по разным причинам. Мы, в компании Zfort Group, за популяризацию веб-разработки в русскоязычном сегменте веба, поэтому взяли на себя смелость заняться переводом одних из самых популярных и свежих статей. Надеемся, вам будет полезно :)

Далее, собственно, следует сама статья.

Ранее в этом году поддержка CSS grid layout была внедрена во все главные десктопные браузеры. Естественно, спецификация этого CSS-свойства является одной из самых топовых тем на фронтендерских сходках и конференциях. Пообщавшись немного по поводу Grid'ов (далее гридов) и прогрессивного улучшения, я вижу, что есть большая доля неопределенности касательно того, стоит ли их использовать. Я слышал довольно много интересных вопросов и убеждений, которые мне хотелось бы рассмотреть в этой статье.

Убеждения и вопросы, которые я слышал на протяжении последних нескольких недель

  • "Когда я могу начать использовать CSS grid layout?"
  • “Слишком плохо то, что пройдет много лет, прежде чем я смогу использовать гриды в продакшене.”
  • “Нужен ли мне Modernizr, чтобы делать сайты с CSS гридами?”
  • “Если я хочу использовать гриды, я должен буду делать две или три версии сайта.”
  • “Progressive enhancement звучит прекрасно в теории, но не думаю, что его можно использовать на реальных проектах.”
  • “Как много стоит Progressive enhancement”

Все это хорошие вопросы и не на все из них легко ответить, но я рад поделиться с вами своим подходом. CSS-гриды — наиболее ожидаемая вещь на протяжении существования адаптивного дизайна. Мы должны опробовать их так скоро, как это только возможно, если это имеет смысл для нас и наших проектов.

Демо: прогрессивно улучшенный лэйаут

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

Примечание: было бы лучше всего, если бы вы открыли демо на широком экране. Вы не увидите ничего примечательного на смартфоне.

Главная страница сайта-примера с соответствующим слайдером в левом верхнем углу

Когда откроете демо, вы очутитесь на главной странице. Вы можете регулировать слайдер в левом верхнем углу сайта, чтобы увидеть, как оно работает. Лэйаут будет меняться с самого простого, до построенного c использованием float, flexbox и, наконец, grid.

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

Эта демо-страница построена с использованием CSS-гридов и не использует никаких префиксов в CSS-свойствах, либо полифиллов. Она доступна и юзабельна для пользователей Internet Explorer’а (IE) 8, Opera Mini in Extreme mode, UC Browser и, конечно же, во всех популярных современных браузерах. Вы можете в совершенстве пользоваться CSS-гридами, если вы не ожидаете, что ваша страница будет выглядеть одинаково во всех браузерах, которые не могут идти в ногу со временем. Я хорошо понимаю, что такое решение не всегда подходит нам, разработчикам, но я верю, что наши клиенты способны принять некоторые отличия если они понимают, какие преимущества им это дает (перспективный дизайн, лучшая доступность и лучшая производительность). Как верхушка всего этого, я верю, что наши клиенты и пользователи, благодаря адаптивному дизайну уже знают, что сайты не выглядят одинаково на всех устройствах и во всех браузерах.

В последующих секциях я собираюсь показать вам, как я построил демо по частям, и почему некоторые вещи в нем работают прямо “из коробки”.

Пометка: Мне пришлось добавить несколько строк JavaScript и CSS (HTML5 shim) чтобы сделать страницу рабочей в IE8. Не мог удержаться, IE8 звучит более впечатляюще, чем IE9+.

CSS Grid Layout и прогрессивное улучшение

Давайте погрузимся глубже и посмотрим, как я построил блок с заголовком “Four levels of enhancement” в центре страницы.

HTML

Я начал с того, что положил все блоки в тэг section в логическом порядке. Первым в секции идет заголовок, после которого следуют четыре подсекции. Предполагая, что каждая из них представляет из себя посты блога, я обернул каждую из них в тэг article. Каждый пост состоит из заголовка h3 и картинки, обернутой в ссылку. Я использовал элемент picture , чтобы иметь возможность предоставить пользователю картинки различных размеров в зависимости от ширины его экрана. Тут мы уже имеем хороший пример прогрессивного улучшения в действии. Если браузер не поймет теги picture и source, он покажет img, который также является дочерним для picture.

<section>
<h2>Four levels of enhancement</h2>
<article>
<h3>No Positioning</h3>
<a href="#">
<picture>
<source srcset="320_480.jpg" media="(min-width: 600px)">
<img src="480_320.jpg" alt="image description">
</picture>
</a>
</article>
</section>

Улучшение с использованием Float

Все элементы в блоке “four levels of enhancement” выровнены с использованием свойства
float: left

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

article {
float: left;
width: 24.25%;
}

article:not(:last-child) {
margin-right: 1%;
}

section:after {
clear: both;
content: "";
display: table;
}

Улучшение с использованием Flexbox

Все элементы в блоке “Four levels of enhancement” выровнены с использованием flexbox

В этом примере мне, в общем то, не нужно улучшать главный лэйаут компонента с помощью flexbox, так как float — это то, что нам нужно. В дизайне заголовки каждого поста должны находиться после картинки, что вполне достижимо при помощи flexbox.

article {
display: flex;
flex-direction: column;
}

h3 {
order: 1;
}

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

Улучшение с использованием Grid

Все элементы в блоке “Four levels of enhancement” выровнены с использованием CSS grid

Сейчас все выглядит достаточно хорошо, но заголовок все еще требует позиционирования. Существует достаточно много путей позиционирования заголовка именно над вторым элементом. Самый простой и гибкий вариант из всех что я нашел — это спозиционировать его используя CSS-грид лейаут.

Сначала, в главном контейнере я нарисовал 4х-колоночную сетку с 20-пиксельным отступом.

section {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}

Так как все статьи все еще имеют ширину 24.25%, я сбросил это свойство для тех браузеров, которые понимают гриды.

@supports(display: grid) {
article {
width: auto;
}
}

Затем спозиционировал заголовок в первой строке и во второй колонке.

h2 {
grid-row: 1;
grid-column: 2;
}

Чтобы предотвратить автопозиционирование в гриде, я также явно поместил во вторую строку второй колонки блок статьи (под заголовком).

article:nth-of-type(2) {
grid-column: 2;
grid-row: 2 / span 2;
}

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

article {
grid-row: span 2;
}

Вот и все. Вы можете посмотреть финальное демо на Codepen.

Если я уберу все лишние строки, которые нужны для того, чтобы эта вещь работала в IE9+, тогда мы получим всего 8 строк кода (три из них нужны для clearfix’а и обычно повторно используются). Сравните с той кучей работы, которую вы проделываете, когда используете префиксы.

article {
float: left;
width: 24.25%;
}

@supports(display: grid) {
article {
width: auto;
}
}

section:after {
clear: both;
content: "";
display: table;
}

Знаю, это самый простой пример, а не полный проект. Также я понимаю, что веб-сайты содержат гораздо более сложные компоненты. Тем не менее, представьте, насколько много времени займет создать макет, который будет попиксельно совпадать во всех бразерах.

Вам не нужно перебивать все свойства

В предыдущем примере свойство width было единственным, которое требовалось переопределить. Одна из замечательных особенностей гридов (кстати говоря, как и флексбокса) заключается в том, что некоторые текущие свойства, примененные к блоку грида теряют свою силу. Float, например, не применяется к блокам, которые обернуты во флекс- или грид-контейнер. То же самое применимо и к некоторым другим свойствам:

  • display: inline-block
  • display: table-cell
  • vertical-align
  • column-* свойства

Прочтите статью “Grid ‘Fallbacks’ and Overrides” замечательной Рэйчел Эндрю, чтобы узнать больше деталей.

Директива @supports доступна во всех основных браузерах. (Картинка: Can I Use) (Смотреть большую картинку)

Если вам требуется перезаписывать свойства, используйте директву @supports. В большинстве случаев вам нужно будет перезаписать лишь такие свойства как width и margin. Поддержка директивы @supports действительно хороша и что еще лучше, она поддерживается всеми браузерами, которые понимают грид, следовательно, вам не нужен Modernizr, чтобы его использовать.

Также, вам не требуется помещать все грид-свойства внутрь блока @supports, старые браузеры их просто проигнорируют.

Лишь кое-что показалось мне немного запутанным в процессе работы над демо — когда к контейнеру с clearfix’ом применяются грид или флексбокс. В таком случае псевдоэлементы с контентом также становятся частью грида. Возможно, вы с этим столкнетесь, а может и нет; просто постарайтесь запомнить это. Как альтернативу вы можете применить overflow: hidden к контейнеру, чтобы очистить поток, если это вам подойдет.

Измерение стоимости прогрессивного улучшения

Браузеры уже делают много прогрессивных улучшений за нас. Я уже указывал на тег picture, который откатывается к тегу img. Другой пример — поля ввода имейла, которое откатывается до обычного текстовго поля, если браузер его не понимает. Еще один пример — рейндж-слайдер, который я использую в демо. В большинстве браузеров он отображается как слайдер. Поле ввода с типом range не поддерживается в ИЕ9, к примеру, но оно все еще юзабельно, так как превращается в простое текстовое поле ввода. Пользователю нужно ввести правильное значение вручную, что не всегда удобно, но все же это работает.

Сравнение: как выглядит поле с типом range в хроме и ИЕ9.

О некоторых вещах заботится браузер, о других - мы

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

Если вы станете одним из тех, кто понимает CSS, в отличие от тех, кто просто использует CSS, то это наделит вас огромным преимуществом в работе.
Рэйчел Эндрю

Также, если прогрессивное улучшение глубоко интегрировано в ваш процесс разработки сайтов, тогда будет достаточно сложно сказать, насколько дорого это будет стоить, потому что это просто то, как вы делаете сайты. Аарон Густафсон делится несколькими историями о некоторых проектах, над которыми он работал, в своей статье Настоящая стоимость прогрессивного улучшения и в подкасте “относительные пути”. Очень рекомендую почитать и послушать о его опыте.

Гибкая веб-разработка

Ваш вебсайт настолько силен, насколько слабо устройство, на котором вы его тестируете
Этан Маркотт

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

Итоги

У меня такое чувство, что некоторые из нас забывают для чего нужна наша работа и то, что мы делаем — это просто работа. Мы не рок-звезды, не ниндзя, не ремесленники или гуру, и все что мы делаем — это просто поставляем контент в сеть для людей и делаем потребление этого контента настолько простым, насколько это возможно.

Контент — причина, по которой мы создаем веб-сайты.
Аарон Густафсон

Звучит скучно, знаю, но это не значит, что так сама работа должна быть скучной. Мы можем использовать самые горячие новинки и самые фантастические технологии, главное — не забывать, кто мы и для кого мы все это делаем: для пользователей. Наши пользователи не все одинаковы, они не используют одинаковые ОС, браузеры, интернет-провайдеры или устройства ввода.Тем не менее, мы можем начать с использования гридов во всех основных современных браузерах без нанесения ущерба доступности.

CSS-грид поддерживается почти всеми основными браузерами. (Картинка: Can I Use. Смотреть большую картинку)

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

Грид — это здорово. Используйте его сейчас!

Ресурсы и дальнейшее чтение

Благодарю своего ментора, Аарона Густафсона, за помощь в написании статьи, Еву Леттнер, за вычитку материала и Рейчел Эндрю, за ее бесчисленные статьи, демки и выступления.

Dmitriy Yaroshenko

Written by

yardim

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade