Как читать HTML-реликты из эпохи браузерных войн

В старом head можно встретить строки, смысл которых уже не восстановить по имени. Например, X-UA-Compatible заставлял Internet Explorer выбирать самый новый доступный режим документа, а условные комментарии показывали разную разметку отдельным версиям браузера.

Другие теги защищали страницу от вмешательства сторонних программ. Skype Toolbar превращал номера телефонов в кнопки и мог ломать вёрстку, поэтому сайт отключал его отдельным метатегом. Baidu пропускала мобильные страницы через свой сервис, перестраивала макет, удаляла стили и подменяла рекламу; от этой обработки тоже можно было отказаться в разметке.

Разбор Antiquated HTML Snippets and Artefacts пригодится при ревизии унаследованных шаблонов: сначала выясните, какую интеграцию обслуживала незнакомая строка и существует ли её цель, а затем решайте, удалять ли её.

Как ловить утечки памяти в SPA с помощью Playwright

Обычные сквозные тесты создают новый контекст браузера для каждого сценария, поэтому небольшая утечка не успевает вырасти. Тест на выносливость делает иначе: 200 раз открывает и закрывает одну панель в том же контексте, затем сравнивает число DOM-узлов и обработчиков событий до и после цикла.

Метрики Playwright получает через протокол Chrome DevTools, поэтому приём работает только в Chromium. Таймеры можно проверить с ускоренными часами страницы: 18 секунд на каждом проходе превращают 200 циклов в час работы таймеров.

Из-за разброса показаний такую проверку лучше поставить в ночной запуск. Код soak(), двойную сборку мусора и пример порога для DOM-узлов автор собрал в разборе теста.

Как рисовать управляемые CSS-треугольники коническим градиентом

Для декоративного треугольника не обязательно рисовать фигуру рамками или обрезать через clip-path. У conic-gradient() можно перенести центр в угол блока, задать направление и жёсткую границу цветов в нужном градусе. При угле меньше 45° цветная область получается треугольной и управляется числами.

Автор применил приём к треугольникам навигации: при наведении менял угол, а linear() добавил фигурам подрагивание. Приём подходит для декоративной графики. Для диаграмм автор советует SVG: отдельным секторам можно добавить интерактивность и сведения для доступности.

В разборе Master.dev Blog есть синтаксис и другие способы построить треугольник. Откройте его, когда форме нужна анимация угла при наведении.

Как проверять cookie-баннеры на сотнях страниц через Playwright

В Dropbox согласие на cookie превратили в браузерный тест. Аудитор запускает сессии для США и ЕС, а также с сигналом приватности из браузера. Он записывает cookie до выбора, находит элементы управления независимо от 22 языков, отклоняет необязательные cookie, перезагружает страницу и проверяет, сохранился ли выбор.

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

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

Как убрать одинокий элемент в строке Flexbox

При flex-wrap: wrap последний пункт иногда остаётся один на новой строке. Медиазапрос исправляет конкретный набор элементов, но при изменении содержимого его порог легко перестаёт подходить.

Новая декларация flex-wrap: balance распределяет элементы по строкам равномернее. По статье, она выпущена в Chrome 150 и пока работает только в Chrome. Среди альтернатив: порог ширины через контейнерный запрос, max-width с условным clamp() и группировка через display: contents.

Разбор Ahmad Shadeed пригодится для навигации и рядов иконок: есть код и интерактивные демо. Пока поддержка ограничена, он помогает выбрать компромисс: вычислять порог, заранее знать размеры и число элементов либо добавлять обёртки.

Как перенести стили с Sass на нативный CSS

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

Начинайте не с переименования .scss в .css. Сначала найдите миксины и функции Sass вроде lighten(), затем замените комментарии // на /* ... */: иначе браузер не разберёт правила после комментария. Только потом удаляйте сгенерированные файлы, меняйте расширения и обновляйте ссылки.

Чеклист миграции Криса Смита стоит открыть перед такой задачей и пройти по нему от поиска файлов до удаления конфигурации компилятора. После сборки проверьте страницы вручную: пропущенное правило может не вызвать ошибку, но незаметно сломать оформление.

Как фильтровать ботов в Cloudflare и не мешать пользователям

За неделю сервер PatronView отдал 1,28 млн полных страниц, а браузерная аналитика зарегистрировала 5 977 просмотров: 214 невидимых загрузок на каждый учтённый просмотр. Поэтому сравните серверные логи с браузерным счётчиком, иначе основная нагрузка останется за пределами отчёта.

Автор разделяет блокировки и проверки. Краулеров с невыгодным соотношением запросов к переходам он блокирует по строке User-Agent. Подтверждённых Googlebot и Bingbot освобождает от проверок. Запросам из дата-центров и старых браузеров показывает CAPTCHA, а не закрывает доступ: её смогут пройти пользователи с VPN или облачных рабочих столов.

Сверьте сегменты со своим живым трафиком, прежде чем копировать фильтры. Полные правила собраны в разборе PatronView.

В веб-проектах работают не только фронтендеры и бэкендеры, но и дизайнеры, аналитики, продакты. Кто все эти люди (на самом деле очень важные)? Чем они занимаются? Об этом новая мини-подборка. Хорошо почитать, если хочется лучше понимать, какие задачи решает дизайн, что делают аналитики и как работают продуктовые метрики.

Как один лотерейный билет превратился в несколько сотен требований, десятки интеграций и пять месяцев Discovery
Очнуться от мрака метрик: три истории от продакта о том, как решать неочевидные проблемы бизнеса
Как проверять продукт на UX на примере личного кабинета студента
Как тестировать пуши и диплинки в финансовом приложении
Дизайн в маркетинге: как фирменный стиль решает бизнес-задачи

Почему браузерный поиск не видит текст в аккордеоне

FAQ может исправно открываться и закрываться, а его кнопки работать с клавиатуры, но обычный Ctrl/Cmd+F всё равно провалится. Если закрытый ответ скрыт через display: none, встроенный поиск браузера считает, что этого текста на странице нет.

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

В разборе Агустина Барриентоса показаны воспроизводимый пример и код, из-за которого поиск не срабатывает.

#html #фронтенд

Как собрать кастомный скроллбар почти целиком на CSS

Обычно размер и положение ползунка приходится пересчитывать в JavaScript на каждом событии прокрутки. В результате код читает размеры контейнера, обновляет DOM и может вызывать перерасчёт вёрстки.

В разборе Master.dev Blog эту работу переносят в CSS. Якорное позиционирование удерживает полосы поверх контейнера, а анимация от прокрутки двигает края ползунка. Контейнерные единицы связывают его высоту с отношением видимой области к полной высоте содержимого. JavaScript остаётся только для перетаскивания указателем; колесо, клавиатура и тач работают через нативную прокрутку.

Подход доступен в Chrome и Safari, а в Firefox пока только в Nightly. Поэтому его стоит брать как прототип для дизайн-системы и отдельно проверять поддержку браузеров и доступность кастомного элемента.

Как связать HTML-атрибуты с адаптивными компонентами в CSS

Расширенный attr() читает data-атрибут как число, длину или CSS-идентификатор. Поэтому data-repeat=4 можно передать в repeat(), а data-gap=2 превратить в 2cqi, то есть отступ в единицах ширины контейнера. Отдельные классы под каждое значение не нужны.

Запросы по стилю контейнера добавляют контекст: карточка проверяет вычисленное CSS-свойство ближайшего предка, например --density: compact, и меняет отступы, размер аватара и видимость описания. Для такого запроса container-type не нужен.

В разборе utilitybend оба механизма соединены в сетке и переключателе плотности. Демо намеренно оставлены без @supports и запасных стилей: перед продакшеном проверьте поддержку и добавьте запасной вариант.

Кнопка или ссылка: как выбрать HTML-элемент по поведению

Ссылка представляет цель, которую можно открыть в новой вкладке, скопировать, сохранить или отправить. Кнопка запускает действие в текущем контексте. Поэтому переход на другую страницу не превращает элемент в ссылку: поиск, выход из аккаунта и отмена редактирования могут оставаться кнопками.

Если оформить «Отменить» как <a> и покрасить под кнопку, браузер всё равно даст открыть цель отдельно и покажет ссылочное меню. Даже role=button не меняет всех этих свойств.

В разборе Button Actions предложены action и method для button. Они позволят перерисовывать текущую страницу сетевым запросом без формы и JavaScript. Пока это предложение, а для существующих интерфейсов полезен критерий: если цель должна переноситься в другую вкладку или закладку, нужна ссылка; если действие привязано к текущему контексту, кнопка.

Как заставить img выйти за собственные границы

У img два размера: размер HTML-элемента и размер ресурса. При object-fit: cover браузер сохраняет пропорции ресурса и масштабирует его до заполнения рамки. Выступающие части по умолчанию скрывает overflow: clip, но значение можно сменить на visible.

С object-fit: none ресурс сохраняет исходный размер, а object-position сдвигает его внутри элемента. На этой разнице автор собирает эффекты наведения, 3D-эффект и анимацию загрузчика без дополнительных элементов и псевдоэлементов.

Я сохранил бы разбор Master.dev Blog с демо на случай, когда HTML менять нельзя. Автор предупреждает: те же демо можно собрать более привычными способами.

#css #html

Как проверить поведение CSS, которое не видит @supports

@supports умеет проверить, распознаёт ли браузер объявление, селектор или правило. Но совместный эффект он не проверяет: условие с display: flex и gap проходило даже там, где gap работал только с Grid.

Для таких случаев появился named-feature(). Он принимает заданное имя поведения. Сейчас в спецификации два таких имени: одно проверяет, учитывает ли якорное позиционирование трансформации, другое — умеет ли контейнер прокручиваться только по одной оси.

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