Lazy loading HTML фрагментов 🤯

Представим, что наш сервер настроен так, что HTML он нам отдаёт не целиком, а небольшими частями. Тогда кусочки, которые пришли раньше, будут анализироваться и отрисовываться сразу, не дожидаясь оставшейся части приложения. Но у нас вполне может возникнуть ситуация, когда какие-то из них мы не готовы отдать сразу, т.к. предварительно на сервере нужно произвести сложные вычисления. В таком случае оставшаяся загрузка кода может быть заблокирована до полной загрузки отдельного чанка.

Для решения этой проблемы Chrome в 148 версии ввёл специальный синтаксис, который позволяет указать место в коде, которое будет пропущено, но может быть заполнено в будущем, если вернётся <template> с таким же идентификатором:

<div>
  <?marker name="placeholder">
</div>

...

<template for="placeholder">
  Какой-то <em>HTML код</em>
</template>

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

<div>
  <?start name="placeholder">
    Загрузка...
  <?end>
</div>

...

<template for="placeholder">
  Какой-то <em>HTML код</em>
</template>

Если HTML уже полностью подгрузился и мы хотим что-то подставить уже впоследствии, то мы можем воспользоваться новыми стриминговыми методами JS (в следующем посте расскажу о них подробнее):

const response = await fetch('/dashboard');

await document.body.streamHTMLUnsafe(
  response.body
);

🔗 Ссылка на полифил
⚙️ Таблицу на caniuse пока не добавили

Новые методы для работы с HTML 🔥

Предыдущие методы вроде innerHTML, insertAdjacentHTML работали по-разному, были небезопасными, а также имели неявные названия.

Chrome в 148 версии решил это исправить, добавив целый ряд новых методов:
🐥 setHTML(html, options) — заменяет внутреннее содержимое элемента на новый HTML
🐥 replaceWithHTML(html, options) — заменяет сам элемент целиком на переданный HTML
🐥 beforeHTML(html, options) — вставляет HTML перед элементом
🐥 afterHTML(html, options) — вставляет HTML после элемента
🐥 prependHTML(html, options) — вставляет HTML внутрь элемента в качестве первого дочернего узла
🐥 appendHTML(html, options) — вставляет HTML внутрь элемента в качестве последнего дочернего узла

Каждый из них внутренне прогоняет код через Sanitizer API, удаляются все вложенные скрипты и прочий потенциально вредоносный код.

Также у всех этих методов стриминговый и "небезопасный" аналоги или и то и другое вместе:
🦆 streamHTML(options)
🦆 setHTMLUnsafe(html, options)
🦆 streamHTMLUnsafe(options)
🦆 и так далее...

Небезопасные методы, как вы уже наверное догадываетесь, не имеют встроенного Sanitizer API (его нужно писать самостоятельно), а стриминговые, если у вас бекенд присылает HTML кусочками, позволяют также кусочками его и отрисовывать:

const response = await fetch('/dashboard');

await document.body.streamHTMLUnsafe(
  response.body
);

⚙️ Поддержка браузерами (пока таблицы есть только для setHTML и setHTMLUnsafe)

Исправлена древняя проблема разделения элементов 🔥

Ранее, чтобы отделить grid или flex элементы друг от друга рамкой, приходилось использовать стандартный border и это было дико неудобно.

Chrome в 149 версии решил исправить это и расширил контекст, в котором можно применять свойства семейства rule:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.container {
  display: flex;
  gap: 10px;
  column-rule-width: 2px;
  column-rule-style: dashed;
  column-rule-color: #000;
}

Чтобы не писать 3 отдельных свойства, их можно объединить под единым column-rule или row-rule:

row-rule: 2px dashed #000;

Можно указывать сразу несколько значений через запятую (тогда они в таком же порядке и будут применяться):

row-rule-width: 1px, 2px, 3px;

Первому промежутку будет назначен 1px, второму 2px, третьему 3px, четвёртому снова 1px и так далее.

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

row-rule-width: repeat(3, 1px);
/* Аналогично */
row-rule-width: 1px 1px 1px;

⚙️ Таблицу на caniuse пока не добавили

Продолжение предыдущего поста

Помимо базовых свойств, которые я перечислил ранее, в Chrome 149 версии были также добавлены и некоторые другие:
🐠 column-rule-inset — позволяет отступами по краям расширить или сузить полосы, разделяющие колонки
🐠 row-rule-inset — позволяет отступами по краям расширить или сузить полосы, разделяющие строки
🐠 column-rule-visibility-items — позволяет скрыть полосы, разделяющие колонки в тех местах, где отсутствуют элементы сетки
🐠 row-rule-visibility-items — позволяет скрыть полосы, разделяющие строки в тех местах, где отсутствуют элементы сетки
🐠 column-rule-break — указывает правила разрыва полос, разделяющих колонки
🐠 row-rule-break — указывает правила разрыва полос, разделяющих строки
🐠 rule-overlap — определяет, будут полосы строк отображены поверх полос колонок или наоборот

Значения для column-* и row-rule-inset могут быть заданы тремя различными способами:
🐈 column-rule-inset: 10px; — отступы задаются для всех полос, разделяющих колонки
🐈 column-rule-inset: 10px 10px / 10px 10px; — первый параметр задаёт отступ верхним концам полос, которые выходят за край родительского контейнера, второй нижним, третий верхним концам, которые упираются во внутренние элементы сетки, четвёртый то же самое, но для нижних полос
🐈 column-rule-inset: 10px / 10px; — первый параметр задаёт отступы для всех полос, которые выходят за край родительского контейнера, второй для всех, которые упираются во внутренние элементы сетки

column-* и row-rule-visibility-items свойства имеют значения:
🪲 normal — полосы рисуются по-разному в зависимости от контейнера (grid, flex, мультиколоночный текст)
🪲 all — полосы рисуются даже сквозь пустые области
🪲 around — полосы в пустых областях рисуются только по кругу
🪲 between — полосы в пустых областях вообще не рисуются

column-* и row-rule-break свойства имеют значения:
🦊 none — полосы на части не разбиваются и упираются во внутренние элементы
🦊 normal — полосы обрезаются по краям и не упираются во внутренние элементы
🦊 intersection — все полосы прерываются в местах пересечения c другими полосами

rule-overlap имеет 2 значения:
🐬 row-over-column — полосы строк отображаются поверх полос колонок
🐬 column-over-row — полосы колонок отображаются поверх полос строк

❗️За основу в примере был взят именно grid контейнер, но, как вы уже знаете, данные свойства могут быть применены и к flex и к мультиколоночному тексту, в зависимости от чего некоторые свойства могут не работать или работать по-другому.

❗️Помимо перечисленных свойств, есть ещё ряд других с точно таким же функционалом, которые в рамках поста я решил опустить

🔗 Ссылка на спецификацию
⚙️ Поддержка браузерами (column-rule-inset, row-rule-inset, column-rule-visibility-items, row-rule-visibility-items, column-rule-break, row-rule-break, rule-overlap)

Новый HTTP-метод 🔥

На днях опубликовали стандарт RFC 10008, который добавляет новый HTTP-метод — QUERY.

Как вы знаете, для GET не предусмотрено тело запроса, а отправляемые параметры у него сильно ограничены объёмом (обычно 8-16 КБ).

Ранее, для того, чтобы обойти эту проблему, использовали POST, но он, по своей сути, не предназначен для этих целей и должен использоваться для отправки данных на сервер, а не для их получения. Из-за этого переставало работать кеширование и некоторый другой функционал, доступный именно GET запросам.

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

На данный момент стандарт уже вышел, но сетевая инфраструктура всего Интернета ещё не готова, поэтому до надёжного использования в своих проектах наверняка придётся подождать ещё несколько лет.

🔗 Ссылка на официальную документацию

Забытые и неизведанные свойства

Внезапно узнал, что оказывается существует ряд shape-* свойств, которые позволяют управлять формой обтекания при float вёрстке.

🍒 shape-outside — указывает тип формы

Возможные значения:
inset() — прямоугольник
circle() — круг
ellipse() — овал
polygon() — любая другая форма, собранная по координатам
url() — путь к изображению (если оно полупрозрачное, то форма образуется по прозрачным областям)

content-box — форма рассчитывается от контентной части
padding-box — форма рассчитывается от padding области
border-box — форма рассчитывается от border области
margin-box — форма рассчитывается от margin области

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

shape-outside: border-box;
или
shape-outside: circle(50%) border-box;
или
shape-outside: border-box circle(50%);

🍒 shape-margin — указывает отступ от элемента до отрисованной формы

Возможные значения:
единицы измерения (px, %, rem, ...)

🍒 shape-image-threshold — используется с полупрозрачными элементами и указывает от какой прозрачности пикселей будет выстраиваться форма

Возможные значения:
числа от 0 до 1 или проценты от 0% до 100%, где 0 означает, что форма будет выстроена по всем пикселям, кроме полностью прозрачных, а 1, что форма будет выстроена по всем пикселям, кроме частично прозрачных

⚙️ Поддержка браузерами широкая (shape-outside, shape-margin, shape-image-threshold)

Сервис проверки качества сайта

Разработчик WordPress-плагина Yoast SEO, Йост де Валк, создал большую спецификацию, благодаря которой вы сможете пошагово улучшить свой сайт в области SEO, доступности, безопасности и многих других.

Помимо подробной документации и удобного чеклиста, также есть и MCP, который позволит вашему ИИ-агенту "подхватить" все эти знания.

🔗 Ссылка на спецификацию

Забытые и неизведанные свойства

Недавно открыл для себя image-rendering, благодаря которому можно указать, как будет вести себя изображение при масштабировании.

Представим, что у вас есть растровая PNG картинка 50 на 50 пикселей, и вы пытаетесь растянуть её до 300. Браузер, чтобы это смотрелось более-менее сносно, "размылит" её. В большинстве случаев это будет вполне ожидаемым результатом, но иногда нам может потребоваться наоборот показать пользователю "острые пиксели".

Собственно, для этого и было создано свойство image-rendering, которое управляет алгоритмом рендеринга изображений при масштабировании.

Оно имеет следующие значения:
1) auto (по-умолчанию) — браузер подбирает алгоритм самостоятельно
2) smooth — картинка "размывается"
3) pixelated — картинка сохраняет видимые пиксели
4) crisp-edges — картинка сохраняет резкие контуры

Разница между pixelated и crisp-edges не всегда заметна, но с точки зрения алгоритма она есть. Первый при масштабировании каждый пиксель превращает в большой квадрат из пикселей того же цвета, а второй просто старается сохранить резкие контуры изображения. То есть pixelated стоит использовать при работе с пиксель-артами, ретро-играми и спрайтами, а crisp-edges для схем, чертежей и QR-кодов.

⚙️ Поддержка браузерами (auto, smooth, pixelated, crisp-edges)

Новое CSS свойство 🔥

Chrome в 150 версии добавил text-fit, который позволяет динамически подгонять размер шрифта под размер контейнера.

По спецификации у него может быть до 7 значений, но пока что работают только 3 из них:
none (по-умолчанию) — ничего не меняет
grow — увеличивает размер шрифта до тех пор, пока текст полностью не заполнит контейнер
shrink — уменьшает размер шрифта до тех пор, пока он целиком не влезет в контейнер

🔗 Ссылка на спецификацию
⚙️ Поддержка браузерами пока небольшая

Проапгрейдили polygon()

Chrome в 150 версии добавил ключевое слово round, которое позволяет задать скругление любым формам, созданным этой функцией:

clip-path: polygon(round 20px, 50% 0%, 0% 100%, 100% 100%);

⚙️ Таблицу на caniuse пока не завезли

Проапгрейдили url()

Chrome в 150 версии добавил функции 3 модификатора запроса:

🦜 cross-origin() — указывает, какие заголовки разрешено отправлять в запросе

Возможные значения:
anonymous — запрещает отправку учётных данных пользователя (куки, HTTP аутентификация, TLS сертификаты)
use-credentials — разрешает их отправку

Пример:

background-image:
  url(
    "https://private.example.com/bg.jpg"
    cross-origin(use-credentials)
  );

🦜 integrity() — проверяет, не был ли ресурс подменён на сервере злоумышленником, используя ранее переданный хеш

Пример:

background-image: url(
  "https://private.example.com/bg.jpg"
   integrity("sha384-VeryLongBase64HashHere...")
);

🦜 referrer-policy() — управляет в каком виде Referrer заголовок будет отправлен на сервер

Возможные значения:
no-referrer — не отправляет этот заголовок вообще
no-referrer-when-downgrade — отправляет во всех случаях, кроме перехода с HTTPS на HTTP
same-origin — отправляет только внутри одного origin
origin — отправляет только origin ресурса
strict-origin — отправляет только origin и только при безопасных переходах
origin-when-cross-origin — если запрос внутри сайта, то полный URL, если на внешний ресурс, то только origin
strict-origin-when-cross-origin — если запрос внутри сайта, то полный URL, если на внешний ресурс и по безопасному соединению, то только origin, при при переходе с HTTPS на HTTP впринципе ничего не отправляет
unsafe-url — всегда отправляет полный URL

⚙️ Поддержка браузерами средняя (cross-origin(), integrity(), referrer-policy())

Новое значение свойства background-clip

Chrome в 150 версии добавил border-area (не путать с border-box), благодаря которому теперь можно оставить фон элемента только под его рамкой.

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

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

Новая CSS функция

Chrome в 150 версии добавил image(), который позволяет подставить цвет в качестве изображения.

Эта функция не даёт ничего принципиально нового, но избавляет нас от необходимости писать громоздкий код через "костыли".

До:

.hero {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url('scenery.jpg');
}

После:

.hero {
  background-image: 
    image(rgba(0, 0, 0, 0.5)), 
    url('scenery.jpg');
}

⚙️ Таблицу на caniuse пока не завезли

Проапгрейдили функцию light-dark()

Если раньше в неё можно было передавать только цвета, то с выходом Chrome 150 версии, стали доступны и изображения.

До:

.banner {
  background-image: url('sun.jpg');
}

@media (prefers-color-scheme: dark) {
  .banner {
    background-image: url('moon.jpg');
  }
}

После:

.banner {
  background-image: light-dark(url('sun.jpg'), url('moon.jpg'));
}

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