На 9 октября в обзоре есть новые возможности для изображений, списков и текста. Все они пока поддерживаются частью браузеров. Самый полезный старт — добавить JPEG XL с запасной фотографией в привычном формате.
Это промежуточный выпуск за 1–9 октября 2026 года. Месяц ещё продолжается. Сверяемся с октябрьской страницей Web Features Explorer и выбираем изменения для вёрстки и фронтенда.
Хронологию взяли из Explorer и дополнили релизом Edge 155 от 8 октября: в его примечаниях подтверждены все четыре возможности выпуска. Chrome 155 вышел шестого октября. Возможности остаются ограниченно доступными из-за отсутствия поддержки в Firefox или Safari.
Что пробовать с запасным вариантом
JPEG XL: дополнительный формат через picture
JPEG XL поддерживает сжатие с потерями и без потерь. В формате есть прозрачность и анимация. Здесь займёмся фотографией для карточки товара. Файл смогут открыть Safari, Chrome 155 и Edge 155; в Firefox поддержки пока нет.
Сохраните в папке images два варианта одной фотографии размером 800 × 600 пикселей: desk.jxl и desk.jpg. Подключение остаётся знакомым:
<figure class="product-photo">
<picture>
<source srcset="./images/desk.jxl" type="image/jxl">
<img
src="./images/desk.jpg"
width="800"
height="600"
alt="Рабочий стол с монитором и настольной лампой"
>
</picture>
<figcaption>Рабочее место для учебных проектов</figcaption>
</figure>.product-photo {
margin: 0;
}
.product-photo img {
display: block;
width: 100%;
height: auto;
}Браузер проверит type у <source>. Если JPEG XL ему доступен, выберет desk.jxl; иначе использует desk.jpg из <img>. Описание и размеры задаём на <img> для обоих вариантов. Размеры width и height резервируют место до загрузки, чтобы текст под карточкой не прыгал при появлении фотографии.
В панели сети проверьте, какой файл запросился. Затем сравните размер файлов и качество фотографии после вашей конвертации. Само расширение .jxl не гарантирует экономию: результат зависит от исходника и параметров сжатия. И держите оба файла доступными на сервере — запасной формат нужен посетителям без поддержки.
Выбор формата по type также не является обработчиком сетевых ошибок. Если выбранный .jxl отсутствует или повреждён, рассчитывать на автоматическое переключение к JPEG нельзя.
Даты поддержки — в карточке JPEG XL. Как браузер выбирает источник — в MDN про picture.
symbols(): маркеры списка без отдельного counter-style
Для списка материалов бывает нужен собственный знак вместо круглой точки. Возьмём symbols(). Эта функция задаёт стиль счётчика прямо в list-style-type. Отдельное правило @counter-style для такого случая не понадобится.
На 9 октября функцию поддерживают Chrome, Firefox и Edge, в Safari поддержки нет. Поэтому сначала зададим обычный маркер:
<ul class="materials">
<li>Макет каталога</li>
<li>Изображения товаров</li>
<li>Тексты карточек</li>
<li>Шрифты проекта</li>
</ul>.materials {
padding-inline-start: 1.5rem;
list-style-type: disc;
}
@supports (list-style-type: symbols(cyclic "›")) {
.materials {
list-style-type: symbols(cyclic "›");
}
}
.materials li + li {
margin-block-start: 0.5rem;
}Режим cyclic повторяет заданные символы по кругу. Здесь символ один. Поэтому знак › будет у каждого пункта, сколько бы материалов вы ни добавили. Если передать symbols(cyclic "›" "»"), маркеры начнут чередоваться. Между символами — пробел, запятая не нужна.
HTML-список остаётся списком. Не вкладывайте в декоративный маркер единственную информацию о статусе: слова «готово» и «нужна проверка» должны находиться в самом пункте. Тогда читатель поймёт состояние и в браузере с обычными точками.
Для повторного использования сложного стиля в нескольких местах удобнее именованное @counter-style. У symbols() имя не создаётся — это запись для конкретного значения свойства.
См. поддержку symbols() в Explorer и синтаксис в MDN.
Текстовые импорты: файл становится строкой
Короткие правила использования сервиса можно держать в отдельном terms.txt. Новый атрибут импорта type: 'text' загружает содержимое как строку. Даже если внутри текст похож на JavaScript, сам импорт его не выполняет.
Поддержка пока есть в Chrome, Firefox и Edge; Safari потребуется другой путь. Покажем импорт с переходом к обычному fetch() при ошибке. Создайте terms.txt со строкой «Учебный проект для практики». Рядом сохраните страницу и файл terms.js:
<h2>Правила проекта</h2>
<pre id="terms" aria-live="polite">Загружаем правила</pre>
<script type="module" src="./terms.js"></script>В terms.js:
const output = document.querySelector('#terms');
async function loadTerms() {
try {
const module = await import('./terms.txt', {
with: { type: 'text' }
});
return module.default;
} catch {
const response = await fetch('./terms.txt');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.text();
}
}
try {
output.textContent = await loadTerms();
} catch (error) {
output.textContent = `Не удалось загрузить правила: ${error.message}`;
}Статическая форма в браузере с поддержкой выглядит как import terms from './terms.txt' with { type: 'text' };. Для примера с запасной веткой выбрали динамический импорт: его отказ можно поймать. fetch() здесь сработает и при другой ошибке импорта, поэтому при отладке сначала посмотрите причину в инструментах разработчика.
Откройте страницу через локальный HTTP-сервер. Сам terms.js должен приходить как JavaScript-модуль с подходящим типом содержимого. Файл .txt разумно отдавать как text/plain; charset=utf-8; при этом текстовый импорт игнорирует Content-Type этого ответа и декодирует данные как UTF-8. Для загрузки с другого домена остаются требования CORS.
Есть похожая запись у сборщиков: импорт пути с ?raw. Это отдельный механизм сборки. Добавление ?raw к URL не включает нативный type: 'text' в браузере.
Полученный текст выводим через textContent. HTML-разметка в файле останется текстом, что подходит для правил или справки. Для вставки чужого содержимого через innerHTML понадобилась бы отдельная проверка безопасности.
Поддержку можно проверить в карточке text modules. Синтаксис и доставка описаны в MDN про атрибуты импорта, устройство текстового модуля — в предложении TC39 Import Text.
text-decoration-skip-spaces: подчёркивание пропускает пробелы
Длинная текстовая ссылка иногда выглядит аккуратнее, если линия прерывается между словами. text-decoration-skip-spaces: all управляет именно пропусками под пробельными символами.
На 9 октября свойство поддерживают настольный Chrome 155 и Edge 155. У Firefox и Safari поддержки нет; у Chrome на Android её тоже пока нет по карточке Explorer. Это небольшое визуальное улучшение поверх рабочего оформления:
<p>
<a class="reading-link" href="/articles">
Материалы для самостоятельной практики
</a>
</p>.reading-link {
text-decoration-line: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
@supports (text-decoration-skip-spaces: all) {
.reading-link {
text-decoration-skip-spaces: all;
}
}При поддержке линия прерывается под пробелами. В остальных браузерах сохраняется обычное подчёркивание. none сохраняет линию под пробелами; start и end пропускают их только в начале и конце строки соответственно. Начальное значение в спецификации — start end.
У букв с нижними выносными элементами отдельная история: обход таких частей букв задаёт text-decoration-skip-ink. С новым свойством меняем только работу с пробелами. Проверьте ссылку при переносе на две строки и с тем шрифтом, который реально используется в проекте.
Поддержка — в Explorer, значения — в CSS Text Decoration Level 4.
Что попробовать в своём проекте
Для первого эксперимента выберите JPEG XL через <picture>: базовая фотография остаётся доступна в JPEG, а выбор браузера видно в панели сети. Текстовый импорт пока лучше оставить в отдельном учебном примере, чтобы спокойно проверить запасную ветку.
Перед переносом изменения:
- откройте пример в браузере с поддержкой и без неё;
- убедитесь, что запасной файл существует и действительно загружается;
- проверьте смысл списка и ссылки с клавиатуры, без декоративных маркеров;
- для текста проверьте отказ запроса и содержимое с символами HTML.
Какой файл изображения получает Safari, а какой Firefox? Остаётся ли текст правил читаемым, если импорт отказал? Ответы должны появиться в проверке вашего примера, прежде чем новинка попадёт в рабочий проект.