Что можно делать с помощью CSS уже сегодня

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

Давайте приступим.

Masonry Layout

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

Конечно, вы можете чертовски эффективно использовать CSS multicol для создания masonry layout, но этот подход может вызвать проблемы при использовании с tabbed-focus, поскольку он помещает контент в столбцах. Это создает разрыв между лейаутом и tabbing index.

Перенесемся в сегодняшний день (ну, или в ближайшее будущее). Masonry Layout делается довольно просто благодаря обновлению CSS Grid. Вот masonry layout с отступами в 6 строках CSS:

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
  grid-gap: 1rem;
}

Магия заключается в grid-template-rows со значением masonry, который превращает его в «ось лейаута», создавая, таким образом, «заполненный» макет, к которому мы все привыкли.

Давайте подробнее остановимся на этом и рассмотрим демо создания адаптивной masonry layout. Используя слегка измененную версию приведенного выше CSS, мы можем изменить строку grid-template-columns, и использовать метод автоматической сетки:

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-template-rows: masonry;
  grid-gap: 1rem;
}

Функция minmax() позволяет нам определить наименьший размер элементов, который составляет 16rem. Затем мы сообщаем minmax(), какой максимальный размер должен быть у каждого элемента. Мы объявляем этот размер как 1fr, что соответствует 1 части оставшегося доступного пространства.

Это определение grid-template-columns позволяет макету разбиваться и складываться, если ему не хватает места по горизонтали, в котором masonry axis затем автоматически сортирует оставшиеся элементы.

Примечание: сейчас masonry работает только в Firefox Nightly или при активации соответствующего флага, но grid layout по-прежнему будет отлично работать в браузерах, не поддерживающих masonry. Достойная цель для прогрессивного улучшения!

Рэйчел Эндрю написала отличную статью о CSS Grid Masonry, и вы также можете изучить редакторский проект CSS Grid Layout Module Level 3, если хотите узнать технические детали.

Поддержка masonry в настоящее время находится на низком уровне. Но вы всегда можете создать минимально жизнеспособный продукт и использовать прогрессивное улучшение - отличный способ! Однако, если вам необходимо использовать masonry layout, то я бы порекомендовал пока придерживаться проверенного Masonry.js. Не забудьте внести в свой бэклог: заменить его на нативный CSS в будущем!

Полезные ссылки:

• Нативный CSS Masonry в CSS Grid
• CSS Grid Layout Level 2: Masonry Layout
• Библиотека Masonry JavaScript
• Черновик спецификации CSS Grid Layout Module Level 3

Селектор :is

Я полагаю, многим из вас в прошлом приходилось писать такой грубый CSS:

.post h1,
.post h2,
.post h3 {
    line-height: 1.2;
}

.post img,
.post video {
    width: 100%;
}

К счастью, CSS снова приходит на помощь с псевдоклассом :is.

CSS теперь можно значительно упростить:

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

.post :is(img, video) {
    width: 100%;
}

Когда ситуация становится более сложной, псевдокласс :is становится еще более полезным, потому что вы можете поставить в цепочку другие селекторы, такие как :not и :first-child, как в следующей демо:

Псевдокласс: is() работает, принимая переданный список селекторов, а затем переводя его для нас в расширенный список селекторов. Это позволяет нам писать более компактный код, а браузеру - делать то, что он уже делает.

Если у вас сложный проект, в котором крайне важна специфичность, тогда может быть полезен псевдокласс :where(). Основное различие между :is() и :where() заключается в том, что :where() имеет нулевую специфичность, тогда как псевдокласс :is() использует наиболее специфичный селектор в переданной коллекции селекторов. Это полезно, если вы считаете, что правила, установленные в блоке :is(), возможно, нужно переопределить вне контекста. Эта статья MDN показывает отличный пример.

Этот псевдокласс :is() отлично поддерживается браузерами - помимо IE 11 и Opera Mini. Поэтому я полностью рекомендую вам начать использовать его уже сегодня. Я бы посоветовал проявить осторожность с псевдоклассом: where(), потому что сейчас его поддерживают только Firefox и Safari.

Полезные ссылки

• CSS :is() and :where() приходят в браузеры
• How slick is :is?, обсуждение в Twitter
• Сравнение :where and :is на MDN
• Поддержка браузерами :is() и :where()

Логические функции CSS для изменения размера

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

Есть несколько действительно полезных функций CSS, которые помогают с изменением размеров: min(), max() и clamp(). Функция min() получает наименьшее значение из двух переданных параметров, а функция max(), напротив, принимает наибольшее значение.

Функция clamp() еще удобнее, поскольку позволяет передавать минимальное, максимальное и идеальное значение. Из-за этого идеального «фиксирующего» значения, сlamp() все чаще используется в гибкой вёрстке, например, в легендарном FitText Дэйва Руперта , потому что позволяет установить гарантированную базовую линию и избежать непредсказуемых результатов. Это основа всех этих функций, потому что, если вы установите подходящую базовую линию как минимальную для min() и сделаете то же самое, но для max(), то получите необходимую гибкость и значительный уровень контроля.

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

В демонстрации я использую min() для изменения размера изображения, а также вычисляю border-radius таким же образом. Это не совсем очевидно, но действительно помогает добиться высокой детализации дизайна в вебе, и это здорово!

Уна Кравец написала фантастически полезную статью о вариантах использования этих функций. Я также использую его для создания гибкой оболочки.

Полезные ссылки:

• min(), max(), clamp()
• CSS функции min(), max() и clamp()
• min(), max(), и clamp() - это магия CSS!
• Масштабирование font-size с помощью clamp()
• Демо от Una Kravets
• Поддержка браузерами min(), max(), clamp()

Специальные адаптивные единицы измерения для вёрстки.

В CSS существуют единицы измерения для каждого конкретного случая. Знаете ли вы, что есть единицы измерения специально для вёрстки? Конечно, em и rem связаны с размером шрифта, но ch и ex основаны на размере самих букв.

Единица измерения ch равна расширенной мере глифа «0» (ноль), найденного в шрифте, используемом для его рендеринга. Этот параметр также масштабируется вместе с размером шрифта, что позволяет ограничить ширину текста и способствует удобочитаемости. Кроме того, имейте в виду, что в пропорциональных шрифтах 1ch обычно шире, чем средняя ширина символа, часто примерно на 20-30%.

Единица измерения ex равна высоте строчного символа x, также известного как «высота x» в более традиционной типографике. Это свойство полезно для точной и масштабируемой работы с вертикальной осью шрифтов. Пример использования этой единицы - сделать значок SVG той же высоты, что и текст.

В следующей демонстрации я решил две проблемы с помощью этих единиц измерения. Сначала я ограничил длину текста с помощью ch, а затем использовал ex для более эффективного позиционирования элементов <sup> и <sub>. Это старая проблема веб-дизайна теперь решается легко!

Полезные ссылки:

• Полезная статья об адаптивных единицах измерения
• Как использовать ch для улучшения удобочитаемости
• ch поддержка браузерами
• ex поддержка браузерами
  

Обновленный Text Decoration Control

Оформление текста перестало быть скучным. Теперь вы можете делать очень многое благодаря обновлениям в Text Decoration Level 4. Мой любимый трюк - создание стиля выделения с помощью text-decoration-width, text-decoration-skip-ink и text-decoration-color.

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

Я настоятельно рекомендую вам посмотреть это видео Джен Симмонс, где, как всегда, она объясняет свойства CSS в простой и понятной форме.

Полезные ссылки:

• Новые возможности CSS для настройки стилей подчеркивания в Web, автор Jen Simmons
• Спецификации
• Поддержка браузерами text-underline

Scroll Margin

Этот сниппет CSS значительно улучшит ваши веб-сайты:

[id] {
  scroll-margin-top: 2ex;
}

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

Свойство scroll-margin-top - противоядие от этих проблем. Посмотрите демо, в котором я комбинирую scroll-margin-top с плавной прокруткой:

Полезные ссылки:

• scroll-margin на CSS Tricks Almanac
• Как предотвратить скрытие контента под фиксированным заголовком используя scroll-margin-top
• Поддержка браузерами scroll-margin-top

Соотношение сторон

Если и было что-то, в чем мы отчаянно нуждались в адаптивной вёрстке, так это нативное соотношение сторон (aspect ratio). Особенно для встроенных мультимедиа, таких как видео на YouTube. Для этих контейнеров уже давно существует старый padding хак, но хаки можно применять лишь как временную меру.

К счастью, скоро поддержка свойства aspect-ratio будет реализована в основных браузерах.

Если вы включите layout.css.aspect-ratio.enabled в Firefox, то в следующих демо увидите идеальный квадрат и идеально реализованное адаптивное видео с YouTube, соответственно:

Квадрат (1:1)

Ниже приведен квадрат, который всегда сохраняет соотношение сторон 1:1 - это достигается путем определения свойства aspect-ratio: 1/1.

Видео (16:9)

Для показа видео квадрат - довольно неудобный формат. Вместо этого мы можем использовать соотношение сторон 16:9, определяя свойство aspect-ratio: 16/9 для контейнера.

Несмотря на то, что aspect-ratio поддерживается еще не полностью, вам обязательно стоит задуматься о его использовании - особенно с изображениями, поскольку данные стили, вероятно, появятся во всех браузерах по умолчанию. Они уже есть в Firefox (начиная с 69):

img, input[type="image"], video, embed, iframe, marquee, object, table {
  aspect-ratio: attr(width) / attr(height);
}

Это поможет уменьшить так называемый page loading jank (задержки при загрузке страницы), потому что такие элементы, как <img />, будут генерировать для себя контейнер правильного размера перед загрузкой. Я советую начать добавлять атрибуты ширины и высоты к элементам в приведенном выше примере кода, чтобы у пользователя быстрее загружался сайт. Вы можете найти более подробную информацию об этой проблеме на MDN .

Также, говоря о полезных статьях: почитайте материал об aspect-ratio в Smashing Magazine, написанный Рэйчел Эндрю - я настоятельно рекомендую его.

Полезные ссылки:

• Старый проверенный паддинг хак
• Статья об использовании паддинг хака для создания инструмента для aspect-ratio
• Поддержка браузерами aspect-ratio
  

Content-visibility и contain-intrinsic-size

Последний вопрос в нашем обзоре - видимость контента и то, как это может дать нам огромный прирост производительности. Поскольку CSS позволяет делать что угодно, браузер должен вычислить все, чтобы отобразить один единственный элемент. Если у вас огромная сложная страница, это может привести к довольно медленным временам рендеринга и отрисовки (paint) браузером.

Новые свойства content-visibility и contain-intrinsic-size призваны помочь решить эту проблему, и они великолепно с этим справляются.

С помощью content-visibility: auto вы можете указать браузеру не беспокоиться о рендеринге элементов, которые находятся за пределами вьюпорта, что может иметь огромное влияние на начальную скорость загрузки. Единственная проблема заключается в том, что элемент, для которого установлено content-visibility: auto, теряет свою высоту, поэтому мы устанавливаем для параметра contain-intrinsic-size значение вроде 0 400 пикселей, чтобы подсказать браузеру, какого размера будет элемент при загрузке.

Эти свойства позволяют браузеру пропустить начальный рендеринг. Вместо этого, когда элементы с content-visibility: auto появляются рядом с вьюпортом, только тогда браузер начнет их рендеринг. Настоящая прогрессивная загрузка!

Видео Джейка Арчибальда хорошо это демонстрирует:

Вы также можете прочитать эту замечательную статью.

Подведение итогов и что нас ждет

Всё это довольно крутые новые фичи CSS, не так ли? Скоро добавятся новые функции, и ещё больше их будет в долгосрочной перспективе. Мы можем рассчитывать на появление Media Queries Level 5, стандарта, который позволит нам нацеливаться на текущий уровень внешней освещенности и на то, предпочитает ли пользователь меньше данных или анимаций на странице.

Также есть черновой вариант CSS Nesting, который дает нам возможности вложения, как в Sass:

.my-element {
    background: red;

    & p {
        background: yellow;
    }
}

Мы также получим еще больший контроль: font metrics override descriptors и Cascade Level 5, который вводит слои в каскад. Прототипирование возможно и с контейнерными запросами (container queries)!

Наконец, на горизонте - несколько интересных трюков, таких как связь анимации со скроллом с помощью CSS (scroll-linked animations), которая даст широкие возможности для нового поколения творческой работы в вебе.

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