Ну и завершим сегодняшний день новостью про новую спецификацию.

Вышла новая спецификация CSS Viewport Module Level 1. Спецификация на данный момент имеет незначимый статус "Первый публичный черновик".

Эта спецификация предоставляет автору возможность указать в CSS размер, коэффициент масштабирования и ориентацию области просмотра, которая используется в качестве основы для начального содержащего блока.

6 CSS-снипетов, который должен знать верстальщик в 2023

- выражение от контейнера
- scroll-snap
- наложение грид ячеек друг на друга
- как быстро сделать круг
- управление каскадом с помощью слоёв
- логические свойства

Посмотри примеры: https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023

A Deep Dive Into SVG Path Commands

Очень хорошо представленное интерактивное руководство по пониманию SVG-путей и команд путей - в нем рассматриваются курсоры, линии, кривые Безье и многое другое. Посмотрите как шаг за шагом создаются иконки.

https://www.nan.fyi/svg-paths

Экономия на спичках

Отличная статья от microsoft про перформанс селекторов. В проектах мы стараемся использовать простые селекторы, например .link, а значит производительные, но что если необходимо написать сложный селектор, например .wrapper .section .title .link.. Повлияет ли сложный селектор на перформанс интерфейса и как сильно повлияет?

Быстродействие сложного селектора, в основном, зависит от глубины и ширины DOM-дерева, чем больше дерево, тем менее производительный сложный селектор. Также перформанс зависит от того как часто изменяется DOM-дерево. Это значит, что перформанс одного и того же сложного селектора зависит от проекта.

В простом проекте быстродействие между простым селектором и сложным будет одинаковым, а в сложном проекте может сильно отличаться. Чтобы проверить производительность селектора можно воспользоваться панелью Performance в Edge.

Статья: https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/

ЕС признал, что баннеры с использованием файлов cookie слегка раздражают, и теперь пытается пересмотреть свой подход.

Статья: https://www.techspot.com/news/101396-european-union-set-revise-cookie-law-admits-cookie.html

Баннер с превьюшки показывается тут - https://www.artlebedev.ru/

10 самых распространенных ошибок доступности , обнаруженных на сайтах в 2023 году.

1. Нет текста ссылки
2. Неактивный элемент в порядке табуляции (tabindex="0").
3. Отсутствует атрибут alt ссылки.
4. Нет альтернативного текста
5. Список вложен неправильно. Имеется ввиду, когда список вложен в список
6. Задублированные лейблы
7. Положительное значение табиндекса.
8. Неверное aria описание. Нет цели для aria-describedby
9. Нет надписи для кнопки.
10. Неверная ариа-маркировка. нет цели для aria-labelledby

Детальнее: https://www.tpgi.com/the-top-accessibility-errors-found-in-2023/

Разбираем самый маленький PNG в мире

Самый миниатюрный PNG в мире весит 67 байт и представляет собой один чёрный пиксель.

Узнайте почем так https://habr.com/ru/companies/ruvds/articles/787302/

Использование передовых функций CSS для создания индикатора прогресса

Объединяет такие вещи, как анимация, связанная с прокруткой, тригонометрические функции CSS и свойства color-mix, чтобы создать индикатор прогресса, связанный с текущей позицией прокрутки страницы, без какого-либо JS.

Статья: https://component-odyssey.com/articles/05-using-heaps-of-cutting-edge-css-to-build-a-progress-indicator

Прощай .no-js.

Во всех основных браузерах появилось медивыражение срабатывающее на отключённый JS.

@media (scripting: none) {
    
}

Медиавыражение имеет три значения:
- Значение none означает, что браузер не будет запускать скрипты для текущего документа, поскольку он не поддерживает их или поддержка скриптов не активна.
- Значение initial-only означает, что сценарии доступны во время начальной загрузки страницы, но не после.
- Значение enabled означает, что сценарии поддерживаются и активны в текущем документе и в течение всего "времени жизни" документа.

Статья: https://blog.stephaniestimac.com/posts/2023/12/css-media-query-scripting/

Современный CSS-reset с современным CSS-свойствами

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: unset;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  img,
  picture,
  svg,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

В статье рассказывается для чего используется каждое правило.

Статья: https://keithjgrant.com/posts/2024/01/my-css-resets/

Как использоваться google.fonts в npm

1. npm install @fontsource/roboto
2. import "@fontsource/roboto";
3.

body {
    font-family: 'Roboto', sans-serif;
}

Подробнее в статье: https://www.amitmerchant.com/google-fonts-as-npm-packages/

Делайте область клика больше

Маленькие размеры цели затрудняют нажатие, что приводит к ошибкам. Увеличьте размер цели для более плавного взаимодействия. Проверьте, как это работает: наведите курсор на элемент, заметите разницу? Оптимальный размер цели, согласно рекомендациям, составляет 44x44 пикселя CSS.

- Применяйте закон Фиттса - больше целей, быстрее действия! Не забывайте про интервалы, чтобы избежать случайных нажатий.
- Визуальная обратная связь улучшает пользовательский опыт.
- Тестируйте и адаптируйте различные варианты ввода.
- Учитывайте "проблему толстых пальцев". Перчатки?
- Следите за изменением угла касания.
- Мелкие цели - это проблема.
- Расстояние имеет значение!
- Знайте методы определения размера цели - изучите примеры: навигация по сайту, выпадающие элементы, кнопки-иконки.

Обеспечьте большие размеры для доступности и удобства использования.

Отличнейший мануал по размерам интерактивных элементов: https://ishadeed.com/article/target-size

Safari Technology Preview 186

- Добавлена поддержка :any-link,:link и :-webkit-any-link внутри :has()
- Добавлена поддержка :scope внутри @scope.
- Добавлена поддержка align-content ячеек таблицы
- content-visibility теперь анимируемый

Продолжает играться с <input type="checkbox" switch>
- Добавлена ​​поддержка кольца фокусировки для <input type="checkbox" switch>
- Добавлена ​​поддержка вертикального рендеринга для файлов <input type="checkbox" switch>

и многое другое: https://webkit.org/blog/14916/release-notes-for-safari-technology-preview-186/

Демонстрация того, что сегодня умеют PWA

Оно из самых важных умений это возможность работать с файловой системой. Интересно, а чего не умеет PWA по сравнению с обычным приложением?

Всё внутри: https://whatpwacando.today/

Буквально все разработчики сегодня написали, что вышел Interop 2024.

Основной фокус на этот год:
- Доступность
- CSS вложенность(nesting)
- Кастомные свойства
- Декларативный Shadow DOM
- font-size-adjust
- HTTPS URLs для WebSocket
- IndexedDB
- Сетки: флексы и гриды
- События Pointer and Mouse
- Popover API
- Относительные цвета
- requestVideoFrameCallback
- стили скролбара
- @starting-style и transition-behavior
- Направленность текста
- text-wrap: balance
- URL

Дашборд

Статья от гуглов - https://web.dev/blog/interop-2024

12 современных обновлений одной строкой для вашего CSS

/* До */
margin-left: auto;
margin-right: auto;

/* После */
margin-inline: auto;

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

Посмотреть остальные: https://moderncss.dev/12-modern-css-one-line-upgrades/

Практическое введение в анимацию, управляемую прокруткой, с помощью CSS scroll() и view()

Узнайте, как привязать прокрутку к анимации элемента.

Статья: https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/

5 практических примеров использования :has()

Посмотреть примеры: https://bejamas.io/blog/learn-css-has-selector-by-examples-top-use-cases/

Автоматически увеличивающиеся элементы форм

Продолжает продвигаться свойство field-sizing, которое позволяет полям формы изменять свой размер под контент. Это удобно, например, для многострочных <textarea>.

Пока предлагает два значения:
- field-sizing: fixed; - значение по умолчанию. Сохраняет текущее поведение.
- field-sizing: content; - отключает функцию сохранения постоянного размера элемента управления формой, позволяя определять размер на основе содержимого.

Свойство нигде не работает

<head>

Самый полный список того, что вы можете указать в <head>.

https://github.com/htmlacademy/HEAD, изначально я форкнул репозиторий и просто перевёл его. Оказалось, что оригинальный репозиторий не имеет многих современных мета-тегов, а в итоге стало понятно, что оригинальный репозиторий больше не развивается. Часть мета-тегов я перевёл в "устаревшие" для истории.

Ставьте звёздочки. Если есть предложения по улучшению - пишите мне.

Пагинация

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

Статья: https://coyleandrew.medium.com/design-better-pagination-a022a3b161e1