Как рисовать управляемые 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 для постепенного улучшения интерфейса: новая проверка позволяет точнее отделить браузеры с нужным поведением. Перед применением всё равно сверяйте поддержку самой функции и конкретного имени: наборы в браузерах пока различаются.

Как привязать размеры в CSS к высоте строки с помощью lh

Единица lh равна вычисленному значению line-height. Поэтому отступ margin-bottom: 1lh равен одной высоте строки и пересчитывается вместе с ней: поменяли типографику, и расстояние между абзацами сохранило тот же вертикальный ритм.

Для списка с обрезкой можно задать max-height: 5lh, а градиент маски начать за 1lh до края. При смене размера шрифта блок по-прежнему вмещает пять строк. Ещё один сценарий: размер SVG-иконки 0.8lh, чтобы она масштабировалась вместе с текстом кнопки.

Откройте The CSS lh unit, когда отступы, маска или иконки должны следовать за типографикой, а не за фиксированным числом пикселей.

Как сделать текст выразительнее с помощью CSS

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

Два приёма можно быстро унести в вёрстку. background-clip: text обрезает фон по контурам букв: если сделать цвет текста прозрачным, внутри них будет видно изображение или градиент. А align-content: center выравнивает содержимое блочного контейнера по вертикали, без Grid или Flexbox.

Ещё одна развилка: vertical-align в строке выравнивает span, img или input относительно текста, а не текст внутри блока. Откройте подборку перед вёрсткой заголовка, многострочной плашки или вертикальной подписи: там есть примеры для каждого приёма.

Как собрать 3D-сцену на CSS и управлять её камерой

На примере перехода от Super Mario Bros 3 к Super Mario 64 автор разбирает CSS 3D по шагам. Сначала слои двигаются с разной скоростью и имитируют глубину. Затем perspective задаёт расстояние от наблюдателя до экрана, а perspective-origin переносит точку схода.

Чтобы объект не сплющился в плоскость родителя, transform-style: preserve-3d нужен по всей цепочке контейнеров. Так шаблон из шести граней можно превращать в платформы, ящики и трубы: размеры и положение меняются через CSS-переменные.

Откройте интерактивный гайд 3D CSS, from Super Mario Bros 3 to Super Mario 64, чтобы разобраться с CSS 3D на наглядной сцене: там можно менять перспективу, двигать камеру, отключать сохранение глубины, вращать блок и менять его размеры.

Как связать иконку-кнопку с подсказкой без ошибки в доступности

У кнопки с одной SVG-иконкой должно оставаться доступное имя: текст, которым скринридер называет элемент. aria-describedby лишь добавляет пояснение. После удаления aria-label VoiceOver назвал кнопку кликабельным изображением, а JAWS прочитал ещё и соседнюю подсказку.

Исправление: связать кнопку с названием действия внутри подсказки через aria-labelledby. Если подсказка длинная, название и сочетание клавиш можно разнести: первое связать через aria-labelledby, второе через aria-describedby.

В разборе Джейка Арчибальда есть исправленный код и демо. В Safari оно пока работает некорректно: браузер не поддерживает popover="hint". Перед релизом проверьте доступное имя в нескольких скринридерах: один может замаскировать ошибку так же, как один браузер.

Как вынести отправку писем из HTTP-запроса в фоновую очередь

Если регистрация ждёт ответа почтового сервиса, его задержка становится задержкой API. При сбое API может вернуть 500, хотя пользователь уже записан в базу. Повтор запроса грозит дублем аккаунта или письма.

API сохраняет пользователя, ставит задание на отправку письма в очередь и отвечает клиенту. Отдельный обработчик собирает HTML, отправляет письмо через почтовый сервис и повторяет попытку после временной ошибки с растущей паузой. Сбой сервиса тормозит обработчик, а не регистрацию.

В разборе freeCodeCamp есть пример на Node.js, BullMQ и Redis, а также правила для повторов и ошибок. Для регистрации подходит 201, если аккаунт создан и письмо поставлено в очередь; для запуска фоновой работы автор предлагает 202.

Как @property управляет вычислением CSS-переменной

Без регистрации значение пользовательского свойства хранится как набор токенов. Если у второго div задать --index: sibling-index(), а применить var(--index) к его первому ребёнку, sibling-index() вычислится для ребёнка и вернёт 1.

Регистрация @property с синтаксисом <number> меняет момент вычисления: функция превращается в число в контексте второго div и даёт 2. Этот выбор также влияет на единицы em и lh, единицы контейнерных запросов и URL. Тип <url> привязывает адрес к таблице стилей, где объявлена переменная.

Я сохранил разбор Джейка Арчибальда как памятку для зависимых от контекста CSS-переменных: сначала проверьте регистрацию и синтаксис свойства.

Как плеер меняет качество при переходе с Wi-Fi на мобильную сеть

Плееру не обязательно перезапускать ролик, когда соединение меняется. berzzWrites строит упрощённую видеоплатформу на Go и в разборе адаптивного битрейта показывает, как переключать качество между соседними сегментами.

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

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