Когда я выпустил emoji-picker-element в прошлом году, я впервые написал универсальный веб-компонент, который можно было добавить в любой проект или фреймворк. Кроме того, это был мой первый раз, когда я действительно использовал shadow DOM.

Копаясь в спецификациях w3c, можно выявить множество интересных функций. Хотя некоторые из них еще не поддерживают браузеры, мы, по крайней мере, можем узнать, какие новые функции мы можем ожидать в ближайшее время.

Одна из новых функций - image(). Эта новая функция даст нам больше контроля над загрузкой изображений в CSS. Давайте погрузимся в возможности совершенно новой функции image.

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

1. CSS subgrid
2. Flexbox gaps
3. content-visibility
4. contain-intrinsic-size
5. И псевдо-классы :is и :where

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

Вспоминая, как много лет назад я начинал свою карьеру дизайнера, я помню, как создавал креативные текстовые потоки в Adobe InDesign. Начав как дизайнер печати, я много работал в этой программе верстки. При работе с макетами текст иногда обтекал изображение или «обтекал» форму. В мире печати это называется «переносом текста». Это не тот термин, который используется в Интернете, но такая же идея доступна в стилях CSS.

Узнайте, как Local Font Access API позволяет получить доступ к локально установленным шрифтам пользователя и получить о них низкоуровневую информацию.

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

В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox.

Свойство content-visibility, запускаемое в Chromium 85, может быть одним из наиболее эффективных новых свойств CSS для повышения производительности загрузки страниц. content-visibility позволяет агенту пользователя пропускать работу по визуализации элемента, включая макет и рисование, до тех пор, пока она не понадобится. Поскольку рендеринг пропускается, если большая часть вашего контента находится за пределами экрана, использование свойства content-visibility значительно ускоряет первоначальную загрузку пользователя. Это также позволяет быстрее взаимодействовать с экранным контентом. Довольно аккуратно.

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

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