Baseline caniuse

А тем временем Baseline появился в caniuse. Отличный пример разобраться с разными уровнями Baseline, на примере гридов и сабгридов. Если гриды уже прописались во всех браузерах, то сабгриды являются новичками в основных браузерах.

https://caniuse.com/?search=grid

Safari 17.2

HTML
- Теперь теги details/summary могут делать аккордеоны, с помощью атрибута name
- Можно делать поля ввода для одноразовых кодов

<label for="onetimecode">Enter code:</label>
<input name="onetimecode" id="onetimecode" type="text" autocomplete="one-time-code">

CSS
- CSS Nesting: вкладывать теперь можно без &

article {
  h1 { 
    font-size: 1.8rem;
  }
  p {
    font-size: 1.2rem;  
  }
}

- Новые юниты: lh, rlh, rcap, rex, ric,rch, cap, ex, ic, ch
- CSS Motion Path:
offset-position поддержка circle() и ellipse()
offset-position: normal
coord-boxПараметры и <position> внутри ray()
rect() и xywh() фигуры
- Анимации: linear(),
- Математические функции: rem(), mod(), round()
- Счётчики: counter-set, предоставляет возможность изменять число в счетчике без создания нового счетчика
- Границы маски:
mask-border-mode
mask-border-outset
mask-border-repeat
mask-border-slice
mask-border-source
mask-border-width
- API Custom Highlights: псевдоэлемент ::selection
- Адаптивные изображения:

<link rel="preload" 
  as="image" 
  imagesrcset="flowers-small.jpg 400w, 
               flowers-medium.jpg 800w, 
               flowers-large.jpg 1200w,
               flowers-extralarge.jpg 1500w" 
  imagesizes="50vw">

и многое-многое другое в https://webkit.org/blog/14787/webkit-features-in-safari-17-2/

Медиавыражения для <video>

Ну в целом-то всё понятно. Делай так

<video>
    <source media="(min-width: 2000px)" src="large.webm" type="video/webm">
    <source media="(min-width: 2000px)" src="large.mp4" type="video/mp4">
    <source media="(min-width: 1000px)" src="medium.webm" type="video/webm">
    <source media="(min-width: 1000px)" src="medium.mp4" type="video/mp4">
    <source src="small.webm" type="video/webm">
    <source src="small.mp4" type="video/mp4">
</video>

и будет хорошо всем пользователям. И даже так

<video>
    <source src="landscape.mp4" type="video/mp4" media="(orientation: landscape)">
    <source src="portrait.mp4" type="video/mp4">
</video>

заработает.

Но знайте, что работа <source> для <picture> и <video> отличается:
- При изменении размеров экрана <video> не подгрузит более подходящий видеофайл под разрешение. Например, если вы зашли с десктопа, загрузится самая лучшая версия, при сужении окна будет продолжать показывать изначальная версия видео.
- В <video> вы указывает источники с помощью src, а не srcset, но возможно скоро это изменится
- В <video> единственным источником ресурса может быть только <source>. В <picture> также используется <img>


Статья: https://scottjehl.com//posts/using-responsive-video/

Моя активность в гитхаб за 2023 год - https://githubunwrapped.com/nikolai-shabalin. За создание видео отвечают Remotion с помощью веб-технологий.

Можете проверить свою https://githubunwrapped.com/

Пока мы все вместе дружно любим ESLint, у него появляются конкуренты. Это Здорово.

Вышел Oxlint - линтер JavaScript, предназначенный для обнаружения ошибочного или бесполезного кода, не требующий каких-либо настроек по умолчанию. Сами о себе ребята завляют, что они в 50-100 раз быстрее ESLint.

Из интересного это то, что у линтера более привлекательная информация об ошибках.

Посмотрим. Последим за развитием.

Preconnect

<link rel="preconnect" href="https://fonts.googleapis.com">

сразу устанавливает соединение с google.fonts, чтобы скачивание шрифтовых файлов произошло раньше. precconect не ускоряет скорость скачивание, а лишь раньше производит соединение с сервисом.
Подобный трюк можно делать и для других внешних ресурсов, но только если вы убеждены, что это критически важные ресурсы.


Статья: https://csswizardry.com/2023/12/correctly-configure-preconnections/

В этот раз без статьи. Желаю просто хорошенько отдохнуть на выходных

Иногда решение приходит мгновенно по проблеме, которая возникла только что. Заметили на курсах, что студенты приходят с уже установленным VS Code, с настройками под свои хотелки, которые не всегда гладко работают при работе на курсе. Особенно мешает Prettier, который постоянно диктует свои правила.

Придумали решение это проблеме — профили! В VS Code профили устанавливаются рядом с вашим профилем. Можно переходить из одного профиля в другой, при этом все любимые изначальные настройки никуда не теряются.

Встречайте vscode-profile-htmlacademy, доступный для открытого обсуждения.

Как сделать кнопку "Вверх" на чистом CSS

Всё очень просто

margin-top: 110vh;
position: sticky;

Посмотреть: https://codepen.io/expa/pen/yLZmdpL?editors=0100

3D ёлки к вам на сайт

С помощью HTML, CSS, JS

https://designerfeed.org/christmas-tree-animations-made-with-css-and-js/

Facebook выпустил новую CSS-in-JS библиотеку StyleX

Работает со всеми фреймворками: React, Preact, Solid, Angular. Особенно полезен для крупных проектов и сложных систем проектирования, используемых несколькими командами.

Статья: https://habr.com/ru/articles/781166/

Firefox 121

HTML
- <iframe loading=lazy>

CSS
- :has()
- handing и each-line для `text-indent
- balance для text-wrap

JS
- Promise.withResolvers()
- Date.parse() теперь принимает несколько дополнительных форматов даты


и многое другое: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/121

Очередной роадмэп по фронтенду

Стоит пролистнуть. Может быть вас это вдохновит на новогодние каникулы =)

Статья: https://habr.com/ru/companies/kts/articles/775948/

Смена сетки от количества дочерних элементов

Иногда бывает полезно изменить сетку. Например, для <5 элементов - крупные ячейки, а для >10 мелкие ячейки. Раньше верстальщики это делали с помощью бэкендеров, которые генерили им модификаторы, ведь только бэкенд знал какое количество элементов будет отображено.

Сейчас это может сделать CSS с помощью :has().

.element {
  &:has(> :nth-child(10)) {
    /* если элементов больше 10 */
  }
}

Статья: https://frontendmasters.com/blog/quantity-queries-are-very-easy-with-css-has/

mask-composite

В Figma, да и в других графических редакторах, есть возможность накладывать маску на маску, но у наложения может быть несколько вариантов. Например, маска снизу удаляет пиксели маски сверху, или маска просто накладывается сверху без какого-либо просвечивания, или маска которая перекрывает забирает себе пиксели другой маски.

В общем, как вы поняли этим можно управлять в вебе: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite

31 декабря Vue 2 официально всё.

https://blog.vuejs.org/posts/vue-2-eol

Ещё не занимались производительностью своих проектов? Можно начать

Отличная статья https://www.htmhell.dev/adventcalendar/2023/14/ , чтобы познакомиться с метриками. Помните всякие LPC, INP, CLS? В статье эти метрики подробно рассматриваются.

Также статья прекрасна тем, что освещает сервисы помимо Lighthouse. Lighthouse хороший инструмент, но есть другие варианты: GTMetrix, WebPageTest.

Движемся к CSS4.

3 современных CSS-свойства, которые должен иметь ваш сайт

Коротко:
- scroll-margin
- color-scheme
- text-wrap: pretty||balance

Подробно: https://bejamas.io/blog/modern-css-properties-your-website-must-have/

Быстрый HTML

Вы же знали, что браузер не понимает HTML? Ну на самом деле понимает, но делает это через этап анализа HTML-разметки и превращения разметки в DOM. Дальнейшая работа происходит именно с DOM.

В 2023 году команда V8 решила сходить в гости в Blink и оптимизировать анализатор HTML. Теперь анализ HTML работает на 3.4% быстрее.
Ребята из WebKit посмотрели на это улучшение и вкатили его к себе.

Про улучшения V8: https://v8.dev/blog/holiday-season-2023 - один из самых моих любимых блогов. Там задроты пишут для задротов =)

Vercel открыл доступ всем желающим на свой продукт v0.

v0 - генератор, с ИИ, создающий компоненты по текстовому описанию, например "Сделай форму оплаты". Результатом работы будет React-компонент. Можно посмотреть разметку, стилизацию. Стили, вроде бы, написаны на Tailwind.

Разметка приемлемая.

Ну что. Закрываем редакторы кода и идём отдыхать!

Всем хороших выходных