Как собрать турнирную сетку FIFA на CSS Grid и subgrid

На странице FIFA каждый столбец раунда вынесен в отдельный элемент: разметка повторяет экран. В разборе макета показана другая структура: один элемент на раунд, внутри две группы матчей по сторонам.

Сетка получает восемь колонок и четыре строки. Вложенный раунд растягивается по ней и через subgrid наследует те же линии, поэтому группы можно поставить в первую и последнюю колонки без отдельных обёрток. Матчи по вертикали автор распределяет с помощью Flexbox: каждый занимает равную долю доступной высоты, и соединительные линии сходятся с центрами карточек.

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

Как работает балансировка нагрузки в веб-бэкенде

Балансировщик принимает запрос раньше API и выбирает один из нескольких серверов. Так приложение масштабируется горизонтально: вместо наращивания процессора и памяти одной машины можно добавлять серверы, а при отказе одного остальные продолжат отвечать.

Схема распределения зависит от нагрузки. Циклический алгоритм Round Robin по очереди отправляет запросы на каждый сервер, но не видит, насколько они заняты. Алгоритм наименьшего числа соединений выбирает сервер с наименьшим числом активных подключений и подходит, когда запросы выполняются разное время.

Откройте разбор на DEV Community перед проектированием API: внутри сравнение алгоритмов и уровней балансировки, проверки состояния серверов и привязка сессий.

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

Как привязать размеры в 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". Перед релизом проверьте доступное имя в нескольких скринридерах: один может замаскировать ошибку так же, как один браузер.