mefody.dev

Определение версии Safari и iOS

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

При этом недавно версия iOS резко скакнула с 18 на 26. Уверен, где-то в мире несколько парсеров сломались, потому что «ну не может же быть апдейт мажора сразу на 8 версий, не бывает такого». А ещё iPadOS (узнал из статьи) притворяется macOS, хотя по сути работает как iOS по фичам.

Злые Марсиане делятся рецептами, как всё-таки можно определять нужную вам версию. Здесь, внезапно, длинный релизный цикл Safari помогает, а не мешает. Каждый минор содержит достаточное количество новых фичей, чтобы по ним определять версию, @supports в помощь.

Респект авторам статьи, что идентификация по User-Agent где-то в конце списка рецептов. Потому что в современном мире это исключительно дополнительная информация для аналитики, но никак не источник правды. И парсить сложно, и устройства «притворяются» не собой, и тот же iPadOS мимикрирует под десктоп, и нужно зачем-то держать под рукой копию CanIUse. Фичадетектинг — более правильное решение проблемы.

https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease

Проблемы @starting-style

Директива @starting-style — это такой способ указать браузеру, какие стили у элемента должны быть в тот момент, когда он только появился на странице. И если у него ещё есть указанный transition, то можно сотворить красивую анимацию появления.

Джош Комо подсвечивает нюансы такого подхода:
- Стили внутри @starting-style имеют ту же специфичность, что и селектор, для которого они объявлены. Что, в целом, логично. Но ломает работу с инлайн-стилями, например.
- Когда в стилях появляется !important, то поддержка становится ещё веселее.

В общем, классические проблемы со специфичностью и каскадом. Джош в статье предлагает решения этих проблем. Правда, в конце приходит в выводу, что ему пока проще использовать обычные анимации через @keyframes.

Имхо, оба подхода создают какие-то трудности. Анимации так-то тоже могут перебить стили, которые ты не ожидаешь нечаянно затереть, потому что у них очень высокий приоритет над почти любыми другими стилями. Но, справедливости ради, я пока ни разу в своих проектах @starting-style не применял, как-то не было нужды.

https://www.joshwcomeau.com/css/starting-style/

Chrome DevTools MCP

Если вы ещё не работали с Model Context Protocol в связке с AI-агентами, то вот хороший повод попробовать.

Команда Chrome выпустила npm-пакет, который позволяет работать с DevTools через MCP. Подключается к IDE через конфиг MCP-клиента:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Дальше на всякий случай обучаете инструмент системными или другими промптами, чтобы когда вы просите проверить что-то в браузере, он работал с chrome-devtools. И можно спрашивать про сеть, перфоманс, навигацию, ресайзить страницы и многое другое. Подробности в документации.

Анонс: https://developer.chrome.com/blog/chrome-devtools-mcp
Документация: https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Эволюция браузеров

Видео выходного дня. Вадим Макеев и Кирилл Мокевнин много и интересно разговаривают о том, как развиваются современные браузеры, как появляются новые фичи для разработчиков, почему приватности почти не существует, что нас ждёт в будущем и ещё много о чём.

Можно включить на фоне как подкаст.

Кстати, после просмотра этого интервью ещё раз осознал, что мы в «Веб-стандартах» важную вещь делаем помимо помощи новичкам в профессии. Важно ещё и обновлять знания опытных разработчиков, у которых часто нет времени копаться в каждой новости и следить за всеми обновлениями. Мы это делаем за читателей и слушателей, подсвечивая самое важное.

https://youtu.be/uPIUl8Bdq5A

Секретное свойство для нативного «жидкого стекла» у Apple

Скандалы, интриги, расследования.

Аластер Кут периодически изучает ченжлог репозитория WebKit на GitHub, потому что ему важно знать, что умеют веб-вью в мобильных приложениях. И недавно он обнаружил, что у Apple есть кастомное свойство -apple-visual-effect: -apple-system-glass-material, которое по идее включает эффект жидкого стекла на элементе прямо в вебе.

Но есть нюанс. Оказывается, чтобы включить его, нужно внутри WKWebView переключить настройку useSystemAppearance, которая... приватная. Беда в том, что использовать приватные настройки нельзя, если не хочешь вылететь из App Store. А в обычном браузере просто не работает.

Аластер, тем не менее, поигрался со свойством локально, выглядит неплохо.

В общем, свойство, которое после выхода iOS 26 помогло бы не отнекиваться от хотелок заказчиков, формально существует, но по сути — выключено.

Кто знает, может, в ближайших релизах Safari его всё-таки включат для разработчиков.

https://alastair.is/apple-has-a-private-css-property-to-add-liquid-glass-effects-to-web-content/

Что мы можем делать при помощи corner-shape

Помню, как сильно радовался массовому внедрению в браузеры свойства border-radius. Не нужно больше рисовать скруглённые уголки при помощи таблиц, кайф!

Но в дизайнах всё ещё бывают не только выпуклые круглые уголки. На данный момент без хаков можно играться с овальными формами границ. Ну или разбираться с border-image, который не самый developer friendly, на мой взгляд. Хотя в большинстве случаев этого всё-таки хватает.

Дэниэл Шварц показывает, как мы сможем визуально создавать всевозможные формы блоков с помощью нового свойства corner-shape, которое пока что работает только в Chrome:
- впуклые уголки (инвертированный круг);
- скошенные уголки;
- вырезанные уголки;
- сквирклы (красивые более естественные скругления).

С демками.

https://css-tricks.com/what-can-we-actually-do-with-corner-shape/

Электрическая рамка

Принёс вам демку, в которой интересно поразбираться.

Балинт Ференци собрал на CodePen классный пример рамки, по которой как будто идёт электрический ток. Как это работает:

- При помощи фильтра feTurbulence создаётся три слоя с шумом. Это буквально статические картинки, которые выглядят как цветной дым.
- Каждому слою задана бесконечная анимация, которая двигает слой либо влево, либо вверх. Интересно, что слоёв, которые движутся вверх, сразу два.
- При помощи feComposite и feBlend эти слои смешивают в режиме color-dodge. Получается общий источник пикселей в виде анимированного шума.
- И затем применяется feDisplacementMap, который склеивает картинку, поверх которой будет применяться фильтр, и сгенерированный шум в тонкие электрические линии.
- В CSS это подключается просто, filter: url(#turbulent-displace).

Вся магия в том, что сгенерированный шум во время анимации создаёт яркие и менее яркие области, которые псевдослучайно перемещаются по картинке. Если при помощи фильтров использовать эти яркие области для карты смещения, получается вау-эффект. В демке ещё хорошо имитируются игра света и блики на поверхности, что в комбинации даёт очень красивую, на мой взгляд, карточку.

Сохранил себе в закладки на случай, если захочется что-нибудь эдакое технологическое поделать в интерфейсах.

https://codepen.io/BalintFerenczy/pen/KwdoyEN

Брендирование типов в TypeScript

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

Федерико Жерарди показывает, как можно для таких задач использовать брендирование типов.

type BrandedType<T> = T & { readonly __brand: unique symbol };

В статье есть хороший пример, как таким образом пометить строку, что она прошла через обработку важной функцией.

Я сам с брендированием знаком давно, но обычно добавляю строковых поля для разделения типов. Про то, что можно использовать unique symbol, как-то не задумывался, интересный подход.

https://azraelsec.sh/2025/09/06/Typescript-Branding/

Полный курс по Svelte 5

Как-то я проморгал, что после Svelte 3 успело выйти уже два мажора со значимыми изменениями. Если вдруг вы тоже пропустили, то Svelte — это фреймворк со своим компилятором, который целится в супер-легковесный клиентский код. Довольно популярный фреймворк, к слову.

Матия из Хорватии (автор сам так подписывается, я не подшучиваю) собрал очень подробный курс, который позволяет изучить Svelte 5 с нуля. 28 глав, 3 часа видео, очень много демок. Бесплатно, но если вам будет полезно, можно задонатить на Patreon.

https://joyofcode.xyz/learn-svelte

Вспоминаем Image Map

Сейчас олды содрогнутся. Забытая техника древних.

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

<img src="map.png"
     alt="My awesome map"
     usemap="#map">
<map id="map" name="map">
  <area shape="rect"
        coords="176,14,323,58"
        href="belarus.html"
        alt="Belarus">
  <area shape="poly"
        coords="260,96,209,249,130,138"
        href="belgium.html"
        alt="Belgium">
</map>

Ссылки-картинки с правильным альтернативным текстом, разбитые на области.

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

Энди Кларк собрал альтернативу на SVG и JS, которая лишена минусов оригинальных Image Map. Есть и адаптив, и кликабельность, и стилизация по ховеру.

https://css-tricks.com/revisiting-image-maps/

Основы Anchor Positioning в CSS

Ахмад Шадид делится подробным гайдом, что можно будет делать с этой мощной спецификацией. Как всегда, с обилием демок.

Я искренне верю, что Anchor Positioning изменит стандарты работы с тултипами, подсказками и выносными элементами. И позволит делать без JS то, что сейчас без JS делать почти невозможно. Но спека не самая простая, а вот такие гайды как раз помогают разобраться на примерах.

https://ishadeed.com/article/anchor-positioning/

Эффект жидкого стекла в браузере: рефракция на CSS и SVG. Крис Фейхо экспериментирует с SVG-фильтрами, чтобы добиться противоречивого, но очень привлекательного эффекта из будущих версий iOS и macOS. #css #svg

https://kube.io/blog/liquid-glass-css-svg/

Браузеру Google Chrome — 17 лет

Мы в свежем выпуске «Веб-стандартов» поразгоняли немножко на тему этой статьи, но всё равно хочется поделиться ссылкой, после открытия которой сводит олдскулы.

Эдди Османи вспоминает, что нового привнёс Chrome в веб за 17 лет своего существования. Только вдумайтесь, браузеру уже 17 лет. А я помню, как он только появился и начинал отвоёвывать потихоньку рынок у Opera и Firefox.

А ещё вкладки вместо окон, пожирание оперативки, уязвимость Spectre, девтулзы, принуждение к HTTPS, Core Web Vitals, динозаврик при падении странички, PWA и многое другое.

P.S. Читайте осторожно, очень много восхваления Chrome в статье, не забывайте о других браузерах.

https://addyosmani.com/blog/chrome-17th/

Основы выравнивания в CSS

В CSS есть десятки способов выровнять один элемент внутри другого. Не просто так же до сих пор на собеседованиях просят выровнять элемент по центру.

Темани Афиф делится подробнейшим гайдом с демками, как же оно работает:
- Выравнивание в гридах и флексах.
- Как выравнивание влияет на размеры элементов.
- Отличие логических значений от физических.
- Как работает автоматическое выравнивание.
- Блочные и инлайновые элементы.

Обычно на этом сайте Темани собирает короткие полезные советы, но, видимо, в какой-то момент материалов про выравнивание стало так много, что появился новый раздел Explore.

https://css-tip.com/explore/alignment/

Почему браузеры троттлят JS-таймеры?

Нолан Лоусон делится задачей: нужно после того, как выполнены все микротаски, но ещё не начали выполняться таски в event loop, запустить какие-то полезные фоновые задачи. Думаю, на собеседованиях часто такие вопросы можно услышать.

Есть древний способ вызвать setTimeout(0), но на самом деле это задержка в 4ms, сделанная против абьюза от нехороших разработчиков, ломавших страницы в вебе.

Нолан в статье сравнивает разные способы выполнить изначальную задачу (setImmediate, MessageChannel.postMessage, window.postMessage и scheduler.postTask) по их кроссбраузерности и особенностям. Спойлер: одного идеального способа нет.

https://nolanlawson.com/2025/08/31/why-do-browsers-throttle-javascript-timers/

Оптимизируем PWA под различные режимы отображения

PWA (прогрессивные веб-приложения) можно запускать в разных режимах. Например, в режиме fullscreen приложение занимает весь экран, а браузерный UI прячется. А в режиме minimal-ui браузерная обвязка компактная, без излишков.

Деклан Чидлоу показывает, как внутри CSS или JS определять, в каком режиме отображения работает веб-приложение, и объясняет, для чего это может быть полезно.

https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

Одержимость аккуратными краями круга из radial-gradient()

Простая задача: нарисовать круг свойством background. Берём radial-gradient(var(--radius), var(--my-color) 100%, #0000), можно сразу несколько — профит. Ведь правда?

Беда в том, что для кругов, сделанных при помощи border-radius, срабатывает сглаживание, они выглядят аккуратно, а вот градиенты внутри background рисуются по другим алгоритмам. Края рваные, пиксельные, грубые.

Ана Тюдор со свойственной ей глубиной детализации пробует найти «идеальное» решение, которое и жёсткость уберёт, и слишком размазанными края не сделает, и для любого размера круга подойдёт, и к зуму подстроится.

https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/

Бросаем кубик с random() в CSS

Оказывается, в Safari Technology Preview можно поиграться с функцией random в CSS. Например, вы можете написать width: random(2px, 10px, 1px);, и у вас ширина блоков, к которым применилось свойство, будет случайным числом от 2 до 10 пикселей с шагом в 1 пиксель.

Мне бы такое очень пригодилось в генеративной графике. Делал когда-то демки на препроцессорах, где рандом на самом деле срабатывал только при компиляции. И игрался с тем, чтобы генерировать случайные числа внутри JS и пробрасывать их через кастомные переменные внутрь элементов — но это так себе удобство. А хочется, чтобы при обновлении страницы графика менялась.

Спецификация, на самом деле, более сложная, чем просто генерация чисел. Там можно и кэшированием управлять, и генерировать одно общее число для всех элементов. В Safari есть какая-то реализация, но спека ещё в процессе устаканивания.

https://webkit.org/blog/17285/rolling-the-dice-with-css-random/

Интерактивный гайд по path в SVG

Джош Камю продолжает собирать шикарные интерактивные туториалы по SVG. На этот раз он подробно разбирает, что и как работает внутри <path d="..."/>, чем отличаются M от m, L от l и кубические кривые Безье от квадратичных и как нарисовать дуги разных форм. Как обычно, стильно и со спецэффектами.

https://www.joshwcomeau.com/svg/interactive-guide-to-paths/

MinskJS Meetup #13

Если у вас сегодня на вечер ещё нет планов, приходите к нам на уютный онлайн-митап в 19:00 по минскому времени. Поговорим про фронтенд и около:
- Василий Ванчук расскажет про секцию System Design на собеседованиях для фронтенд-разработчиков.
- Анна Ширяева поделится гайдом, как выбрать фронтенд-фреймворк под свою задачу.
- Евгений Дорошкевич объяснит, как делать классные анимации, улучшающие вовлечённость пользователей.

Как обычно, будет всем рады.

Трансляция: https://www.youtube.com/watch?v=7JyODKQYRX4
Программа митапа: https://minskjs.site/events/minskjs-meetup-13/