Февраль принёс несколько полезных обновлений: атрибут для передачи направления текста в формах получил поддержку во всех браузерах, появились удобные методы для работы с Map, а CSS обзавёлся новой функцией для сложных фигур. Разбираем, что уже можно использовать и что стоит взять на заметку.

То, что теперь работает везде

dirname: направление текста в формах

Атрибут dirname у элементов <textarea> и <input> позволяет передавать направление текста (ltr или rtl) вместе с остальными данными формы при отправке. Это особенно важно при работе с многоязычными интерфейсами, где пользователь может вводить текст на арабском, иврите или других языках с письмом справа налево.

<input type="text" name="comment" dirname="comment.dir">

При отправке формы сервер получит не только значение поля comment, но и поле comment.dir со значением ltr или rtl — в зависимости от того, какое направление определил браузер.

Свежие фичи, которые только появились

Map.getOrInsert(): получить или добавить

У объектов Map появились два новых метода — getOrInsert() и getOrInsertComputed(). Оба возвращают значение по ключу, а если его нет — устанавливают и возвращают значение по умолчанию. Разница в том, что второй принимает функцию для вычисления дефолтного значения.

const map = new Map();

// Если ключ 'hits' отсутствует — установит 0 и вернёт 0
const count = map.getOrInsert('hits', 0);

// Если ключ отсутствует — вычислит значение через функцию
const data = map.getOrInsertComputed('user', () => ({ name: 'Guest' }));

Это удобная замена привычному паттерну if (!map.has(key)) map.set(key, default).

shape(): произвольные фигуры в CSS

Функция shape() позволяет описывать сложные фигуры с помощью набора команд: move, line, curve и других — прямо в CSS. Используется вместе со свойствами clip-path и shape-outside.

.card {
  clip-path: shape(
    from 0% 0%,
    line to 100% 0%,
    line to 100% 80%,
    curve to 50% 100% via 75% 90%,
    line to 0% 80%,
    close
  );
}

В отличие от polygon(), функция shape() поддерживает кривые Безье и дуги, что открывает возможности для нестандартных макетов и декоративных обрезок без SVG.

Trusted Types: защита от XSS на уровне браузера

Trusted Types — это механизм безопасности, позволяющий заблокировать опасные операции с DOM API, через которые чаще всего проникает XSS: innerHTML, document.write, создание скриптов и подобное. Вместо строк браузер будет принимать только специальные объекты — «доверенные типы», которые прошли через заданную политику.

const policy = trustedTypes.createPolicy('default', {
  createHTML: (input) => DOMPurify.sanitize(input),
});

element.innerHTML = policy.createHTML(userInput); // безопасно
element.innerHTML = userInput; // выбросит ошибку

Включается через заголовок Content-Security-Policy с директивой require-trusted-types-for 'script'. Особенно полезно для крупных приложений с большим количеством точек ввода пользовательских данных.

Zstandard: быстрее и лучше, чем Brotli

Zstandard (zstd) — алгоритм сжатия без потерь, который теперь поддерживается браузерами как метод кодирования контента. По сравнению с Brotli он нередко даёт лучшую степень сжатия при меньшем времени обработки.

Content-Encoding: zstd

Браузер сам сообщит о поддержке через Accept-Encoding: zstd в запросе. Пока стоит проверить поддержку на стороне вашего сервера или CDN — не все из них подхватили обновление.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники