Веб-стандарты

00:01:23 Новинки беты Safari 2700:38:23 Ненужный async00:57:05 Безопасный npm v1201:07:53 Адаптивные картинки

Выпуск №531. Полина Гуртовая и Алексей Симоненко про новинки беты Safari 27, ненужный async, безопасный npm v12 и адаптивные картинки.— Лайв на Ютубе— Слушайте на Ютубе— Ссылки на сайте

Сессии о вебе на WWDC26. Сарон Йитбарек собрала шесть докладов команды WebKit: новинки беты Safari 27, CSS grid lanes для masonry-раскладок, кастомизируемые <select>, элемент <model> для встраивания 3D-контента, иммерсивные сайты в visionOS 27 и веб-расширения, которые можно упаковывать и публиковать прямо из браузера без Xcode. #safari #browserhttps://webkit.org/blog/17974/web-technology-sessions-at-wwdc26/

Тихая проблема ненужного async. Мэтт Смит предупреждает, что async функция без настоящей асинхронной работы меняет свой контракт и заставляет все вызовы обрабатывать промисы. async распространяется по цепочке вызовов, добавляет когнитивную нагрузку и скрывает, где действительно происходит ввод-вывод. Он советует оставлять синхронные функции синхронными, а async вводить только тогда, когда появляется реальная асинхронная работа. #js #performancehttps://allthingssmitty.com/2026/06/08/the-quiet-problem-with-unnecessary-async/

Анимация SVG-карт на CSS. Эмбер Уэйнберг показывает, как оживить SVG-карту: взять элементы <line> и <circle>, сделать ступенчатое появление меток через transition и :nth-of-type, проявить фон с помощью transform: translate3d() и нарисовать линии трюком со stroke-dasharray и stroke-dashoffset. Все анимации внутри prefers-reduced-motion и запускаются переключением класса на родителе через JavaScript. #css #svghttps://amberweinberg.com/css-animated-svg-maps/

Новинки WebKit в бете Safari 27 с WWDC26. Джен Симмонс представляет 58 новых фич и 525 исправлений: кастомизируемые <select>, scroll anchoring, anchor positioning с учётом трансформаций, WebAssembly JSPI, CSS-псевдокласс :heading, ключевое слово revert-rule, значение stretch для размеров, top-level await в модулях и иммерсивные сцены через <model> на visionOS. #safari #browserhttps://webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta/

Stylelint-плагин CSS Property Type Validator. Скалк Нитлинг выпустил первую бету плагина, который интегрирует CSS Property Type Validator в существующие процессы линтинга. Плагин проверяет регистрации @property, соответствие значений кастомных свойств зарегистрированному синтаксису и совместимость var(). Ошибки типов ловятся в CI, редакторах и прекомит-хуках без отдельных инструментов. #css #toolshttps://schalkneethling.com/posts/introducing-the-css-property-type-validator-stylelint-plugin/

00:01:54 Новинки Chrome 14900:24:17 Локальный AI в Edge00:39:02 WebKit про WebMCP01:00:54 Как сделать хороший сайт01:13:58 VoidZero в Cloudflare

Выпуск №530. Никита Дубко и Полина Гуртовая про новинки Chrome 149, локальный AI в Edge, WebKit про WebMCP, как сделать хороший сайт и VoidZero в Cloudflare.— Лайв на Ютубе— Слушайте на Ютубе— Ссылки на сайте

Спецификация для веб-сайтов. Йост де Валк опубликовал универсальную спецификацию технических возможностей, которыми должен обладать качественный сайт. Документ охватывает основы и семантический HTML, SEO и структурированные данные, доступность, безопасность и CSP, производительность и Core Web Vitals, интернационализацию, а также готовность к агентам через Markdown-эндпоинты, JSON-LD и RSS. #html #a11yhttps://specification.website

Новинки Chrome 149. CSS gap decorations позволяют рисовать линейки в гэпах между элементами гридов и флексов. Свойство shape-outside поддерживает функции path(), shape(), rect() и xywh(). SVG-атрибут path-length стал CSS-свойством. Обрезанный текст переключается с ellipsis на clip при взаимодействии пользователя. Также добавлены image-rendering: crisp-edges, Intl.Locale.prototype.variants, а WebSocket-соединения больше не блокируют back/forward кэш. #chrome #browserhttps://developer.chrome.com/release-notes/149

CSS заполняет гэпы линейками. Брехт Де Рюйте разбирает новые CSS-свойства для оформления гэпов в гридах и флексах. Свойства column-rule и row-rule рисуют линейки в гэпах, а rule-break, rule-inset, rule-overlap и rule-visibility-items управляют пересечениями, длиной и условным отображением. Также линейки можно анимировать. #css #layouthttps://utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex

CSS-центрирование в 2026 году. Темани Афиф разбирает множество способов центрирования в CSS и показывает, как выбрать подходящий. Теория выравнивания с двумя уровнями и двумя осями, сравнение флексов, гридов, position: absolute и text-align, новое свойство text-box для обрезки отступов вокруг текста, anchor-center в якорном позиционировании, разница между безопасным и небезопасным центрированием. #css #layouthttps://css-tricks.com/the-state-of-css-centering-in-2026/

Появление и исчезновение в современном CSS. Мэтт Кроут показывает, как анимировать появление и исчезновение элементов: @​starting-style задаёт начальные значения, transition остаются прерываемыми посреди анимации, а allow-discrete справляется со свойствами вроде display, которые обычно меняются мгновенно. View Transition API дополняет картину, анимируя изменения раскладки между состояниями DOM на примере <dialog> и поповеров. #css #animationhttps://joyofcode.xyz/entry-and-exit-css-transitions

00:01:23 Линейки в гэпах00:28:40 Короткие или полные свойства00:56:52 Нормальный line-clamp01:19:42 Потерянное десятилетие