Теперь можно создавать аккордеоны без боли!

Ранее было дико неудобно делать плавную анимацию открытия-закрытия аккордеона. Проблема заключалась в том, что CSS не умеет делать переход между, скажем, 0px и auto.

Если бы мы попытались каким-либо образом это сделать, то наш переход (transition) просто бы не сработал и произошёл бы резкий перескок.

С недавнего времени появилась функция calc-size(), которая призвана решить эту проблему.

Синтаксис:

calc-size(<size>, <operation>)

<size> — автоматически вычисляемое значение, например auto, min-content, stretch и т. п.

<operation> — арифметическое выражение. В котором size означает текущий размер вычисленный из <size>.
Например: size + 30px. Этот параметр, как и первый, является обязательным и, если вам не нужно как-то изменять вычисленный размер, то нужно передать просто size.

Пример:

.accordion {
  height: 0;
  transition: height 250ms ease;
}

.accordion.open {
  height: calc-size(auto, size + 25px);
}

Поддерживается пока что не всеми основными браузерами.

Библиотеки для работы с поповерами скоро станут ненужны!

Совсем недавно в браузеры начали завозить Anchor Positioning API. Он позволяет работать с поповерами без применения JS кода и различных библиотек вроде Floating UI.

Ниже представлен базовый пример:

<button class="button">Я кнопка</button>
<div class="popover">Я поповер</div>

.button {
  anchor-name: --button-anchor;
}

.button:hover+.popover {
  display: block;
}

.popover {
  display: none;
  position: absolute;
  position-anchor: --button-anchor;
  top: anchor(top);
  left: anchor(right);
  margin-left: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

Хороший разбор технических подробностей можно найти на chrome for developers, а более полный на MDN. Также рекомендую посмотреть практическое применение на канале Кевина Пауэлла.

На данный момент поддерживается только в Chrome и Edge.

Хорошо, Node.js 🤣🤣🤣

min(), max() и clamp() функции стали доступны во всех популярных браузерах

Пример min():

.element {
  width: min(50%, 500px);
}

Функция принимает неограниченное количество аргументов и выбирает из них наименьшее. Очень удобна при использовании с динамическими значениями вроде % / vh / vw / rem и т.д.

Пример max():

.element {
  width: max(50%, 500px);
}

Он по сути аналогичен min(), но в свою очередь выбирает наибольшее значение из переданных.

Пример clamp():

.element {
  width: clamp(200px, 50%, 1000px);
}

clamp() в отличие от предыдущих двух функций принимает только 3 обязательных аргумента: минимальное значение, рекомендованное и максимальное.

Работает это следующим образом: всегда будет применяться рекомендованная единица измерения, но она никогда не выйдет за рамки минимального и максимального значений (1-ый и 3-ий аргументы).

Новые математические функции 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()