Новые математические функции CSS

Стали доступны функции round(), rem() и mod().

round() округляет переданное значение.

.container {
  height: round(up, 7.1px, 3px); // 9px
}

Первый параметр задаёт тип округления, второй — округляемое значение, а третий указывает чему должно быть кратно итоговое число (чаще всего эта опция вам будет не нужна и вы будете задавать просто 1px, чтобы, скажем, 7.1px округлить вверх до 8px).

rem() и mod() возвращают остаток от деления двух переданных им чисел аналогично оператору % в JavaScript.

.container {
  height: rem(21px, 2px); // 1px
}

Разница между ними лишь в том, что rem() всегда принимает знак делимого, а mod() знак делителя.

.container {
  margin-top: rem(-21px, 2px); // -1px
  margin-bottom: rem(21px, -2px); // 1px
}

.container {
  margin-top: mod(21px, -2px); // -1px
  margin-bottom: mod(-21px, 2px); // 1px
}

⚙️ Функции поддерживаются всеми современными браузерами: round(), rem(), mod().

Нашёл крутейший инспектор node_modules

В нём есть:
— Подробные схемы и графы зависимостей пакета
— Информация об устаревших зависимостях
— Куча разных фильтров для поиска необходимого
— Размер, содержимое и прочая полезная информация отдельно взятого пакета
— Возможность сравнения зависимостей
— И много-многое другое

Спасибо Энтони Фу за его старания.

https://node-modules.dev/

Наконец-то исправлена проблема нативной валидации полей

Как вы знаете, в CSS имеются такие псевдоклассы как :valid и :invalid для того, чтобы можно было стилизовать элементы на основании валидности введённых пользователем данных.

Эти псевдоклассы работают не совсем так, как мы чаще всего ожидаем. Они применяют стили, даже если пользователь ещё ничего не делал с полем ввода.

Для решения этой проблемы были добавлены новые псевдоклассы :user-valid и :user-invalid, которые применяют стили уже после того, как пользователь произвёл какое-то действие над полем ввода.

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

⚙️ Поддержка браузеров широкая: user-valid, user-invalid.

<select> теперь официально можно стилизовать!

Сообщество Open UI отклонило концепции элементов <selectlist> и <selectmenu> и приняло решение проапгрейдить старый элемент <select>.

Выглядит это следующим образом:

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>

  <option>
    <div>Яблоко</div>
    <img src="./apple.png" alt="">
  </option>
   
  <option>
    <div>Груша</div>
    <img src="./pear.png" alt="">
  </option>
  
   <option>
     <div>Арбуз</div>
     <img src="./watermelon.png" alt="">
   </option>
</select>

Для того, чтобы элементы можно было стилизовать, используется вот такой селектор:

select,
::picker(select) {
  appearance: base-select;
}

Он сбрасывает дефолтное поведение для самого <select> и для его выпадающего списка.

🔗 Более сложные примеры можно посмотреть в официальной статье Chrome.

⚙️ Поддержка браузерами пока что небольшая, но в Chrome уже работает: customizable select, selectedcontent.

Свойство resize работает не только с textarea 😮

Мало кто знает, но свойство resize можно применять почти ко всем html элементам. Исключением являются только:
— строчные элементы
— блочные элементы, для которых задано свойство overflow со значением visiblе

При применении данного свойства к <img>, <picture>, <video> или <iframe>, оно работать не будет. Нужного эффекта можно добиться всего лишь обернув эти элементы в div, у которого будет задан resize.

⚙️ Свойство не новое и имеет широкую поддержку браузерами

nth псевдоклассы проапгрейдили ключевым словом of

С недавнего времени псевдоклассы :nth-child и :nth-last-child стали ещё гибче, чем ранее.

Возьмём, например, вот такой селектор:

div:nth-child(2n) {
  background: #e74c3c;
}

Он применит стили только для чётных элементов, которые находятся внутри div.

С появлением of мы теперь можем конкретизировать среди каких элементов будет происходить отбор (фильтровать):

div:nth-child(2n of li) {
  background: #e74c3c;
}

То есть, в этом примере стили будут применены только к чётным li (а не впринципе ко всем чётным элементам), которые находятся внутри div.

Также с ключевым словом of возможны возможны любые сложные селекторы:

div:nth-child(2n of li, .highlight, p[data-step]) {
  background: #e74c3c;
}

⚙️ Поддержка браузерами полная: caniuse, mdn

А вы знали про атрибут capture у input?

Данный атрибут применяется к <input type="file"> и позволяет пользователю сделать фото, заснять видео или записать аудио и тут же сразу вставить как файл.

Самый простой пример, который откроет у пользователя камеру для съёмки фото:

<input type="file" capture>

Откроет переднюю камеру:

<input type="file" capture="user">

Откроет заднюю камеру:

<input type="file" capture="environment">

Откроет камеру в режиме видео:

<input type="file" accept="video/*" capture>

Откроет диктофон:

<input type="file" accept="audio/*" capture>

Откроет галерею устройства:

<input type="file" accept="image/*,video/*" capture>

⚙️ Поддерживается только в мобильных браузерах

Проблема с соотношением сторон была решена!

Ранее, чтобы добиться динамического соотношения сторон HTML элемента, приходилось придумывать разные костыли:

.container {
  width: 100%;
  padding-top: 56.25%;
}

С появлением свойства aspect-ratio, всё стало гораздо проще:

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Первым числовым аргументом указываем соотношение по ширине, а вторым по высоте. Теперь как бы мы не изменяли width, height будет подстраиваться автоматически.

Также у свойства есть и другие варианты синтаксиса.

🟢 Сокращённый вариант

aspect-ratio: 5; 

Он будет аналогичен этому

aspect-ratio: 5 / 1;

🟢 С ключевым словом auto

aspect-ratio: auto 16 / 9;

Он предназначен для элементов, которые изначально уже имеют собственную ширину и высоту (<img>, <video>, <canvas>, <iframe> и др.)

Суть такой записи в том, что если у элемента имеется собственное соотношение сторон, то 16 / 9 применено не будет и наоборот, если его нету (к примеру это <div> или <p>), то будет.

⚙️ Поддержка браузерами полная

Случайно наткнулся на очередной прикольный сервис, в котором удобно сравнивать характеристики пакетов.

Он включает в себя:
— Количество скачиваний за любой промежуток времени
— Количество звёзд и issues на github
— Дату последнего обновления
— Дату первой публикации пакета
— Размер при скачивании

npmtrends.com

В CSS добавили условные функции 🤯

В 137 версии Chrome были добавлены функции if(), style(), media() и supports(), благодаря которым теперь можно создавать свойства с множеством значений, которые применяются в зависимости от переданных условий.

Разберём пример:

.container {
  --type: button;
  width: 100px;
  height: 100px;
  background: if(
   style(--type: card): blue;
   style(--type: button): green;
   else: yellow;
 );
}

Внутри функции if() первыми двумя style() мы указываем проверку равенства CSS переменной --type определённому значению и передаём значение, которое должно быть возвращено в случае совпадения. Если ни одно из условий не будет удовлетворено, то будет возвращено содержимое else.

media() и supports() работают похожим образом, но указывают условия для медиа-выражений и для проверки поддерживаемости каких-либо свойств:

.card {
  width: if(
    media(min-width: 800px): 400px;
    supports(display: grid): 100%;
    else: auto
  );
}

⚙️ Поддерживается пока что только в Chrome и Edge

Как вы знаете, React не умеет "в директивы" как например тот же Vue или Angular.

Эта проблема становится особенно болезненной, когда у нас в проекте появляются сложные многоуровневые блоки с условиями ввиде тернарных операторов:

<div>
  {isLoading ? (
    <p>Загрузка...</p>
  ) : status === 'error' ? (
    <p>Произошла ошибка!</p>
  ) : status === 'success' ? (
    isAdmin ? (
      <p>Добро пожаловать, администратор.</p>
    ) : (
      <p>Добро пожаловать, пользователь.</p>
    )
  ) : (
    <p>Непредвиденная ошибка</p>
  )}
</div>

Выше представлен сильно упрощённый пример, но даже он достаточно сложен в восприятии.

Одно из решений этой проблемы — библиотека react-if
Она помогает разгрузить такой код блоками:
1) <If />
2) <Then />
3) <Else />
4) И многими другими...

Например:

<If condition={isAdmin}>
  <Then>
    <p>Добро пожаловать, администратор.</p>
  </Then>
  <Else>
    <p>Добро пожаловать, пользователь.</p>
  </Else>
</If>

⚡️ Ссылка на NPM
⚡️ Ссылка на Bundlephobia
⚡️ Ссылка на npmpackage.info

Свойству text-wrap добавили новые значения

balance — разбивает текст так, чтобы в каждой строке было примерно одинаковое количество символов.

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

⚙️ Поддержка браузерами пока что неполная: balance, pretty

Новый семантический тег

В HTML5 было добавлено много различных тегов вроде <header>, <footer>, <nav> и других. Скорее всего вы все их знаете.

Относительно недавно к этому списку был добавлен новый — <search>

Он должен быть использован в качестве обёртки для полей поиска или фильтрации / сортировки чего-либо:

<search>
  <form action="/search">
    <input type="search" placeholder="Поиск" />
    <button type="submit">Найти</button>
  </form>
</search>

<search>
  <label>
    Сортировать:
    <select name="sort">
      <option value="price_asc">Цена ↑</option>
      <option value="price_desc">Цена ↓</option>
    </select>
  </label>
</search>

Если вы ранее пользовались ARIA-атрибутом role со значением search для доступности, то при использовании <search> он больше не нужен.

<form role="search">...</form>

заменяем на

<search>
  <form>...</form>
</search>

⚙️ Поддержка браузерами широкая

Решена проблема с внешними скроллами

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

Стандартным решением этой проблемы является отключение скролла у всей страницы вцелом при помощи:


body.modal-open {
  overflow-y: hidden;
}

Но что, если мы хотим сохранить внешний скролл и просто изменить это поведение?

Это стало возможным с появлением свойства overscroll-behavior

Свойство имеет 3 возможных значения:
1) auto (по-умолчанию) — при достижении края внутреннего скролла, взаимодействие автоматически переходит на внешний
2) contain — отключает переход на внешний скролл, но сохраняет "отскок" на мобильных устройствах при достижении края прокрутки
3) none — отключает переход на внешний скролл и отключает "отскок" на мобильных устройствах при достижении края прокрутки

⚙️ Поддержка браузерами широкая

Lazy Loading стал доступным нативно!🔥

Ранее, чтобы подгрузить картинку только в тот момент, когда она нужна, использовали различные библиотеки или писали собственные решения на основе IntersectionObserver. Это было достаточно муторно.

Недавно в HTML был добавлен атрибут loading, который позволяет делать это нативно и без кучи дополнительного кода:

<img src="image.png" loading="lazy">

Атрибут имеет 2 возможных значения:
1) eager — подгружает изображение немедленно (значение по-умолчанию)
2) lazy — подгружает изображение только тогда, когда пользователь приблизился к изображению в результате скролла

Он также работает c <picture> и <iframe>

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">

  <img src="image.png" loading="lazy">
</picture>

<iframe
  src="someresource.com"
  loading="lazy"
  width="560"
  height="315"
>
</iframe>

⚙️ Поддержка браузерами широкая

CSS не перестаёт удивлять

В 138 версии Chrome были добавлены 2 функции: sibling‑index() и sibling‑count()

Они позволяют получить порядковый номер элемента и общее количество элементов внутри родительского контейнера соответственно.

Вариантов применения уйма, для простоты понимания представлю самые базовые:

.child {
  width: calc(sibling-index() * 100px);
}

.child {
  width: calc(100% / sibling-count() - 30px);
}

⚙️ Поддерживаются пока что только в Chrome: sibling-index(), sibling-count()

Новое значение для width / height — stretch

Ранее вы, вероятно, сталкивались с проблемой того, что элемент, имеющий margin, при растягивании при помощи относительных единиц измерения, например процентов, начинал вываливаться за пределы родительского контейнера. Так происходило по той причине, что margin не учитывается при вычислении финального размера элемента и он (элемент) по итогу становился больше, чем ожидалось.

Для решения этой проблемы свойствам width, height и другим подобным было добавлено новое значение — stretch

Оно растягивает элемент на весь размер родительского контейнера, аналогично значению 100%, но с той разницей, что margin также будет учтён и благодаря этому элемент получит предсказуемый размер.

⚙️ Поддержка браузерами пока что средняя

Новый API для работы с куками

Большинство разработчиков скорее всего сейчас вспомнят о document.cookie. Он сильно неудобен тем, что запись, удаление и другие операции приходится производить вручную. Также он синхронный и не может быть использован внутри сред, где не поддерживается document, например в web воркерах.

Для простоты работы с куки были даже созданы отдельные библиотеки вроде js-cookie или cookie-universal. Но так или иначе это решало проблему лишь наполовину.

Именно поэтому и был создан Cookie Store API, решающий все вышеперечисленные проблемы.

Краткий обзор его возможностей:
1) cookieStore.get(name) — возвращает промис с куки по имени
2) cookieStore.getAll() — возвращает промис с массивом всех кук
3) cookieStore.set(name, value) — создаёт или обновляет указанную куку, возвращает промис
4) cookieStore.delete(name) — удаляет куки по имени, возвращает промис
5) cookieStore.addEventListener('change', (event) => { ... }) — позволяет следить за изменением кук

⚙️ Поддержка браузерами широкая

В JS добавлен новый оператор — using 🔥

Если вы ранее работали с файлами в Node.js, то знаете, что при чтении файла каждый раз необходимо закрывать соединение за собой:

import { open } from "node:fs/promises";

let fileHandle;

try {
  fileHandle = await open("thefile.txt", "r");
} finally {
  await fileHandle?.close();
}

С появлением оператора using теперь это стало делать проще, при помощи функции очистки.

Она выполняется автоматически как только интерпретатор доходит до последней строки блока (в нашем случае это if):

import { open } from "node:fs/promises";

const getFileHandle = async (path: string) => {
  const fileHandle = await open(path, "r");

  return {
    fileHandle,
    [Symbol.asyncDispose]: async () => {
      await fileHandle.close();
    },
  };
};

if (condition) {
  await using fileHandle = await getFileHandle("thefile.txt");
  // какой-то другой код, закрытие соединения ещё не происходит
} // вызов функции очистки

Как можно увидеть из примера, чтобы всё завелось, нам также потребовался Symbol с функцией очистки. Использовался Symbol.asyncDispose(), т.к. очистка асинхронная, для синхронных операций нужен Symbol.dispose().

Но это не просто "синтаксический сахар". В случае с return / break / continue / throw очистка будет выполнена до их выполнения, что гарантирует, что у нас не будет непредвиденных утечек памяти. То есть, даже если во время выполнения кода, внезапно появится ошибка, то сначала будет выполнена очистка, а уже затем интепретатор перейдёт к обработке этой самой ошибки.

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

⚙️ Поддержка браузерами пока что средняя

Написал большую статью на habr по Anchor Positioning API 🔥
Всем фронтендерам рекомендую к прочтению.