Появилась новая функция для объявления градиента в CSS

Ранее нам был доступен linear и radial градиенты, теперь добавили новый — conic. Кто ранее работал с градиентами в Adobe Photoshop наверняка знает как он устроен.

Синтаксис:

conic-gradient([from <angle>] [at <position>], <color-stop>, <color-stop>, ...)

from <angle> — начальный угол (по умолчанию 0deg = вверх).
at <position> — положение центра (по умолчанию центр элемента).
<color-stop> — цвет и его позиция (угол) в градиенте.

Пример:

background: conic-gradient(
  from 0deg at center,
  red 0deg,
  yellow 90deg,
  green 180deg,
  blue 270deg,
  red 360deg
);

Также у него, как и других градиентов, есть repeating вариант:

repeating-conic-gradient([from <angle>] [at <position>], <color-stop>, <color-stop>, ...)

Пример:

background: repeating-conic-gradient(
  from 0deg at center,
  white 0deg 10deg,
  black 10deg 20deg
);

Проблема с перескоком контента решена!

Думаю, что почти все сталкивались с проблемой "перескока" контента при отключении скроллбара. Ранее исправить эту проблему было достаточно сложно, но теперь всё решается в одну строчку при помощи свойства scrollbar-gutter.

Пример:

.element {
  overflow: auto;
  scrollbar-gutter: stable;
}

Работает это так: к элементу со скроллом указываем данное свойство и позднее, когда этот скролл пропадёт, пространство под ним останется прежним.

Возможные значения:
auto (по умолчанию) — место под скроллбар не резервируется.
stable — резервирует пространство даже когда скроллбара нет.
stable both-edges — резервирует место с обеих сторон (для вертикального и горизонтального скроллбаров).

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

display: block научился выравнивать свой контент по аналогии с display: flex 🤪

Да-да, это не шутки. Теперь для вертикального выравнивания элементов необязательно использовать флекса, гриды или более старые варианты ввиде таблиц, марджинов и прочего. Теперь это можно делать при помощи свойства align-content.

Синтаксис:

align-content: start | center | end;

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

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

Ранее было дико неудобно делать плавную анимацию открытия-закрытия аккордеона. Проблема заключалась в том, что 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>

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