Блог Пуск‑Медиа

Статьи, кейсы и практические заметки для команд.

Упаковка под маркетплейсы: как мы собираем бренд Пуски на дой-паках и коробках
Как мы создали маскота Puskie: комикс, спрайт-листы и «живая скрепка» для студии
GEO и нейропоиск в 2026: полный гайд по видимости в AI-ответах
Маркетинговая воронка в 2026: от гипотезы до лида в CRM — полный гайд
Яндекс Вебмастер в 2026: полный гайд для владельца сайта и маркетолога
beforetoggle: хук жизненного цикла popover
createImageBitmap: превью файлов в форме брифа
replaceChildren(): безопасная перерисовка каталога
getAnimations(): пауза WAAPI при reduced motion
animation.finished: очистка после WAAPI
visualViewport: фиксированная CTA над клавиатурой
virtualKeyboard.overlaysContent и env(keyboard-inset)
beforeinstallprompt: отложенный баннер PWA
rel=canonical на пагинации блога и фильтров
reportError(): глобальные ошибки в мониторинг
globalThis: один объект в ESM и classic script
compositionstart/end: IME и кириллица в поиске
beforeinput: перехват paste в поле комментария
{ passive: true } на scroll/touch для INP
Делегирование в capture-фазе для аналитики кликов
User activation: когда можно вызвать prompt
navigator.inputPending: очередь ввода перед тяжёлым JS
hardwareConcurrency: размер пула Web Workers
Cache API: офлайн-оболочка статики витрины
IndexedDB: versionchange и миграция схемы черновика
Intl.PluralRules: «1 услуга» и «5 услуг» без if
Intl.ListFormat: теги и хлебные крошки одной строкой
Intl.DisplayNames: названия языков в переключателе
formatRange(): диапазон дат в брифе и расписании
Temporal.PlainDate: дедлайны без timezone-багов
PerformanceObserver: longtask и блокировка main thread
layout-shift: буфер CLS до отправки в аналитику
OffscreenCanvas: миниатюры в Web Worker
roundRect(): диаграммы в карточке без SVG-файла
ResizeObserver: высота сайдбара и sticky оглавление
MutationObserver: оглавление при динамических h2
CustomEvent: связать форму брифа и аналитику
matchMedia + custom event: токены брейкпоинта в JS
AbortSignal.any(): отмена нескольких fetch разом
scheduler.yield(): отдать main thread между чанками
Permissions API: запрос push без навязчивого баннера
IdleDetector: пауза карусели при бездействии
img.decode(): показ без мерцания после load
scrollsnapchange: активный слайд без scroll listener
font-size-adjust: ровный текст при fallback-шрифте
URLPattern: маршруты SPA без тяжёлого роутера
Cookie Store API: чтение и события смены сессии
sendBeacon: метрика ухода со страницы без блокировки unload
fetch keepalive: короткий ping при закрытии страницы
visibilityState: пауза опроса API в фоновой вкладке
translate: отдельное свойство вместо transform
rotate: CSS-спиннер без @keyframes на transform
scale: тактильный отклик кнопки на :active
clip-path: inset() — кадрирование hero без overflow
filter: url(#id) — SVG-фильтры с CSS fallback
scrollbar-gutter: stable both-edges — симметрия с двумя полосами
overscroll-behavior-x: contain на горизонтальной карусели
:modal — стили открытого dialog без [open]
:popover-open + @starting-style: анимация tooltip
::picker(select): стили выпадающего списка
field-sizing: fixed — стабильная высота поля брифа
popover="hint": лёгкий превью без блокировки фокуса
interest-delay: задержка превью карточки услуги
command="close" и invoker: закрытие dialog кнопкой
requestSubmit(): отправка формы с валидацией
calc-size(): высота выпадашки от содержимого
overlay: auto и top layer для popover
position-visibility: sticky header только когда виден
scroll-state(): стили когда scroller «прилип»
container-type: inline-size на карточке услуги
@container style(--card: dark): тёмная карточка в светлой сетке
rel=expect: подсказка prefetch/prerender по ссылке
Clear-Site-Data: выход из аккаунта без «залипших» cookie
dynamic-range: HDR hero-video на поддерживаемых экранах
color-gamut: P3-градиент с sRGB fallback
scripting: none — стили для <noscript> и прогрессивности
update: slow — отключить декоративные анимации
::cue: брендовые субтитры в <video>
select.showPicker(): нативный список стран на мобиле
anchor-scope: тултипы внутри секции
timeline-range: entry 0% 100% для scroll-анимации
::scroll-marker:active — активная точка карусели
view-transition-group: морфинг группы карточек
Speculation Rules: prerender каталога с главной
Reporting-Endpoints и NEL: ошибки сети на сервер
text-autospace: пробелы между CJK и латиницей
::scroll-marker: точки карусели на CSS
scroll-start-target: якорь под фиксированное меню
timeline-scope: именованные scroll-timeline в компоненте
position-try-fallbacks: тултип не уезжает за экран
position-area: block-end для popover-меню
toggle-group: только один открытый пункт FAQ
popover=manual: карточка по hover без light dismiss
rel=prefetch: следующая страница воронки
FontFace API: подгрузка начертания после согласия
document.fonts.ready: не мерить текст до загрузки шрифта
CSS Custom Highlight API: подсветка поиска на странице
::target-text: подсветка цитаты из URL hash
font-size: round — шаговая fluid-типографика
text-box-edge: trim-both в кнопках
hyphenate-limit-chars: переносы в длинных русских словах
math-depth: вложенные формулы в статье
overscroll-behavior-block: только вертикальный chaining
inverted-colors: UI при инверсии системных цветов
pagereveal: анимация при возврате из bfcache
sizes="auto": браузер сам считает ширину для srcset
Единица lh: line-height от размера шрифта элемента
Единица ch: ширина поля под PIN и код
text-wrap-style: stable — меньше «висячих» строк при вводе
word-break: keep-all — CJK и смешанный контент
text-rendering: geometricPrecision на мелких caps
font-kerning: normal на display-заголовках
unicode-range: дробление @font-face по алфавитам
font-display: optional — ноль CLS, если шрифт не успел
URLSearchParams: фильтры каталога в query string
queueMicrotask: батч обновлений DOM после парсинга
performance.mark и measure: кастомные этапы загрузки
Client Hints: Sec-CH-Viewport-Width для CDN-картинок
Cross-Origin-Resource-Policy на статике
Storage Access API: cookies в iframe виджета
Web Locks API: один таб пишет в localStorage
rel=license: ссылка на лицензию и оферту
rel=help: ссылка на базу знаний студии
<progress>: нативный бар загрузки файла
<search>: обёртка поиска по блогу
interpolate-size: плавное раскрытие аккордеона по высоте
showPicker(): календарь и color picker из кода
dns-prefetch и preconnect: что подключать на витрине
Permissions-Policy: отключить camera, mic и payment
Web Share API: «Поделиться кейсом» на мобиле
IntersectionObserver: блок «увидели» без scroll-спама
Constructable Stylesheets: стили виджета без дублирования
contain: layout paint — изоляция тяжёлой секции
mask-composite: градиентный край горизонтальной ленты
background-blend-mode: multiply на hero с фото
transform-style: preserve-3d — flip карточки услуги
grid-template-columns: repeat(auto-fit, minmax())
Синтаксис range в @media: width >= 768px
linear() easing: кастомная кривая без cubic-bezier
steps() и @keyframes: ступенчатый прогресс загрузки
tabindex="0" на кастомной кнопке-div
download: имя файла PDF-брифа при сохранении
autocomplete=one-time-code: SMS-код в форме
<cite>: ссылка на источник в статье блога
<address>: контакты студии и LocalBusiness
:has() — стили родителя от состояния потомка
accent-color: цвет чекбоксов и range в бренде
@starting-style: плавное появление модалки
scroll-snap-type: карусель отзывов без Swiper
text-wrap: balance — ровные заголовки в две строки
text-wrap: pretty — читабельные абзацы в кейсах
Container queries: карточка услуги по ширине блока
contain-intrinsic-size: место под скелетон галереи
content-visibility: auto на длинной ленте блога
CSS anchor positioning: тултип у кнопки без Popper
Scroll-driven animations: прогресс-бар чтения статьи
View Transitions API: мягкая смена темы оформления
importmap: алиасы модулей без сборщика на лендинге
rel=modulepreload: ранний fetch критичного чанка
loading=lazy на iframe карты после согласия
user-select: none на кнопках и чипах
touch-action: pan-y в галерее с горизонтальным свайпом
color-scheme: dark на форме в тёмной теме
tab-size: 2 в блоке кода брифа
scrollbar-gutter: stable — шапка без сдвига
<title> и <desc> в SVG: доступность инфографики
<use> и SVG-sprite: одна иконка — много размеров
aria-describedby: связать поле с текстом ошибки
aria-labelledby: заголовок модалки из DOM
aria-expanded: аккордеон и выпадающее меню
aria-controls: какая панель открыта кнопкой
aria-pressed: toggle-кнопки фильтров
popovertarget: нативная кнопка для Popover API
commandfor и command: Invoker Commands без скрипта
interesttarget и CSS : interest-invokers превью
nth-of-type и nth-child: когда какой считать
Селекторы по атрибуту: [data-state] в UI-kit
<ins> и <del>: правки текста и юридические версии
<template>: клон карточки без innerHTML
<slot>: композиция в Web Components лендинга
format-detection: отключить авто-ссылки телефонов на iOS
theme-color: цвет строки браузера и PWA
invoketarget: привязка кнопки к панели действий
hidden="until-found": раскрытие из поиска на странице
<ruby>: руби и транскрипция для иностранных терминов
<embed>: встраивание PDF и плеера с fallback
<object>: PDF в странице кейса с data и type
<canvas>: простой график без тяжёлой библиотеки
<noscript>: сообщение при отключённом JavaScript
meta viewport: width=device-width и maximum-scale
link rel=manifest: иконки и имя PWA студии
rows и cols на textarea: стартовый размер брифа
input type=search: поиск по блогу студии
input type=reset: очистка черновика формы
type=submit и Enter: отправка формы с клавиатуры
method="get": фильтры каталога в URL
autofocus: ускорение ввода и риск для a11y
readonly vs disabled: просмотр и блокировка поля
required: HTML5-валидация до submit
:nth-child(even): зебра в таблице тарифов
:first-child и :last-child: скругления в ряду карточек
:only-child: одна карточка в сетке по центру
target=_blank без window.opener: rel=noopener
@media print: стили для PDF и печати КП
page-break-before: каждый кейс с новой страницы
<samp>: вывод терминала и пример ответа API
<pre> и <code>: блок кода в статье блога
<code>: имя файла и CSS-свойство в абзаце
<var>: переменная в формуле калькулятора на сайте
<q>: короткая цитата внутри предложения
<small>: мелкий дисклеймер под формой
<wbr>: точка переноса в длинном URL
<bdo dir="rtl">: принудительное направление фрагмента
<strong>: важность, а не просто жирный
<em>: акцент в предложении, не курсив декора
<source> в <picture>: art direction для hero
<track kind="captions">: субтитры к корпоративному ролику
<colgroup> и <col>: ширина колонок прайса
scope="col" и scope="row" в <th>
rowspan и colspan: объединённые ячейки в смете
<meta charset="utf-8">: первая строка head
link rel="author": страница автора статьи
<meta name="referrer">: политика по умолчанию для сайта
type на <ul>: маркеры списка услуг
start на <ol>: продолжить нумерацию после вставки
<meter>: индикатор заполненности без progress
<cite>: ссылка на источник цитаты и исследования
<dfn>: термин в глоссарии услуг студии
<hr>: тематический разрыв между блоками лендинга
reversed на <ol>: обратный рейтинг топ-10
sandbox на iframe: встраивание карт и виджетов
name на <details>: только один открытый пункт FAQ
<map> и <area>: кликабельные зоны на инфографике
poster и preload на <video>: hero без автоплея
<audio controls>: подкаст студии без плеера-виджета
loading="lazy": изображения ниже первого экрана
width и height на <img>: резерв места против CLS
hyphens: auto и lang для переносов в узких колонках
translate="no": не переводить название студии машинно
dir="rtl": вставка арабской цитаты в русский текст
data-*: хуки для JS без классов-мешалок
role="img" и alt: декоративная иконка vs смысл
elementtiming: пометить LCP-элемент для RUM
fetchpriority="low": декор ниже fold не конкурирует с LCP
field-sizing: content — textarea растёт с текстом брифа
<dialog>: нативное модальное окно без библиотеки
<template>: шаблон карточки без innerHTML
<time datetime>: дата публикации для людей и машин
hidden и aria-hidden: когда что скрывать
spellcheck: орфография в textarea брифа
autocomplete: подсказки браузера для CRM-полей
inputmode: правильная клавиатура на смартфоне
enterkeyhint: подпись Enter на мобильной клавиатуре
novalidate: когда HTML5-валидация мешает UX
formaction и formmethod: две кнопки — два сценария
aspect-ratio: стабильные превью кейсов и видео
object-fit и object-position: кадрирование hero
gap в Grid и Flex: единые отступы сетки
Logical properties: margin-inline в RTL и LTR
clamp(): плавная типографика hero без 10 media queries
overscroll-behavior: скролл не «протекает» под модалку
touch-action: жесты карусели vs вертикальный скролл
tabindex: 0, -1 и ловушка фокуса без ошибок
aria-live: тост «Заявка отправлена» для скринридеров
<sub> и <sup>: индексы, м² и сноски в прайсе
<aside>: боковая колонка и complementary landmark
<section> vs <article>: границы блоков на лендинге
<header>: шапка сайта и header внутри article
<footer>: юридические ссылки и contentinfo
<address>: контакты студии только для контактов
<blockquote> и cite: цитата клиента с источником
<abbr title="...">: расшифровка ООО и KPI при наведении
<kbd>: сочетания клавиш в документации продукта
<mark>: подсветка результата поиска на странице
<del> и <ins>: старая и новая цена в акции
<bdi>: изоляция направления в имени пользователя
<optgroup>: группы в select для категорий услуг
enctype multipart/form-data: загрузка файлов в заявке
accept на input file: только PDF и изображения
capture на input file: камера на мобильном
label for= и id: клик по подписи фокусирует поле
pattern в input: regex для телефона и ИНН
minlength и maxlength: длина пароля и промокода
multiple на file: несколько референсов в брифе
animation-delay: каскадное появление карточек
grid-row: span 2 — высокая промо-ячейка в каталоге
grid-area: именованные зоны header–main–footer
align-content: space-between в футере на всю высоту
justify-content: space-between в шапке лендинга
flex-direction: row-reverse для панели действий
flex-wrap: wrap для облака тегов и фильтров
order в flex: визуальный порядок табов осторожно
min-height: 0 — внутренний скролл в flex-layout
min-width: 0 и text-overflow в flex-строке
box-sizing: border-box на :root и расчёт ширины
overflow-x: auto — горизонтальный скролл таблицы сметы
overflow-y: auto в drawer с фиксированной шапкой
overflow-clip-margin: focus ring не обрезается
scroll-padding-inline: отступ snap у краёв карусели
scroll-snap-align: start для ленты карточек
touch-action: manipulation — убрать задержку 300ms
<nav> и aria-label: несколько навигаций на сайте
<main>: один главный landmark на страницу
link rel=prev и next: пагинация блога для роботов
<base target="_blank">: когда не стоит глобально открывать вкладки
::backdrop у <dialog>: blur, затемнение и pointer-events
view-transition-class: именованные переходы между страницами
@supports: progressive enhancement без User-Agent
attr(): подписи тултипов из data-* без дублирования текста
unicode-bidi: plaintext в чате и комментариях
direction: rtl на документе и зеркалирование иконок
CSS columns: FAQ в две колонки на десктопе
break-before: page — новая страница PDF для раздела КП
break-after: avoid — заголовок не остаётся внизу страницы один
@page margin: поля листа для печати брендбука
animation-composition: replace и слои keyframes
cubic-bezier: кривые easing из дизайн-токенов
steps(): пошаговая анимация прогресс-бара
animation-fill-mode: forwards — финальный кадр остаётся
animation-play-state: пауза hero-анимации вне viewport
interactive-widget в viewport: клавиатура не ломает 100vh
link rel=alternate type=application/rss+xml для блога
link rel=canonical: одна главная URL при параметрах UTM
атрибут download: скачать PDF КП с понятным именем
атрибут ping: фоновый POST при клике по ссылке
box-decoration-break: clone — градиент на многострочной кнопке
background-clip: text — градиентный заголовок без картинки
background-origin: где начинается фон кнопки
text-emphasis: акцентная точка над словом в промо
line-break: strict и переносы вокруг пунктуации
font-palette: палитры цветных COLRv1-шрифтов
block-size: логическая высота блока и RTL
inline-size: ширина sidebar и max-width карточки
inset: logical сокращение для fixed overlay
display: flow-root — clearfix без псевдоэлементов
display: contents в grid: когда ломается доступность
<figure> и <figcaption>: подписи к кейсам и скриншотам
script type=module и defer: порядок загрузки бандла
rel=preload для WOFF2: шрифт без блокировки текста
integrity (SRI): проверка CDN-скрипта по хешу
referrerpolicy: что утекает в Referer на внешние ссылки
decoding=sync на LCP-изображении hero
sizes в srcset: как браузер выбирает ширину кадра
margin-block: вертикальный ритм секций без margin-top/bottom
overscroll-behavior-inline: горизонтальная лента и жест «назад»
text-rendering: optimizeLegibility в UI и longread
text-size-adjust: iOS не раздувает шрифт в landscape
max-inline-size и единица ch: оптимальная длина строки
isolation: isolate — свой stacking context без z-index войны
overflow-anchor: стабильный скролл при подгрузке ленты
contain: paint — отсечение теней и blur внутри карточки
visibility: hidden vs display: none и skip-link
pointer-events: none на оверлеях и декоре
user-select: none на кнопках и чипах
cursor: grab и grabbing для drag-скролла
repeat(auto-fill, minmax()): адаптивная сетка без media queries
grid-auto-rows: min-content и выравнивание рядов каталога
place-self: центрирование кнопки в ячейке grid
border-spacing: «карточные» ячейки таблицы сметы
caption-side: заголовок таблицы сверху для скринридеров
empty-cells: hide в календарных и сводных таблицах
filter: brightness() на hover карточки портфолио
meta robots: max-snippet и контроль сниппета в поиске
link rel=icon: SVG favicon и mask-icon для вкладки
<picture>: AVIF, WebP и JPEG fallback для кейсов
tab-size: выравнивание вставок кода в статьях блога
white-space: nowrap для бейджей и меток статуса
word-spacing: разрядка в display-заголовках hero
text-overflow: ellipsis в узком меню и таблицах
scroll-behavior: smooth и якоря с prefers-reduced-motion
resize: vertical — textarea в форме брифа
vertical-align: иконка рядом с текстом кнопки
table-layout: fixed — колонки прайса одинаковой ширины
border-collapse: collapse в таблицах сметы
flex-grow и flex-shrink: футер внизу короткой страницы
align-self: выравнивание одной карточки в grid-ряду
grid-column: span 2 — промо-баннер на всю ширину сетки
position: sticky для табов и фильтров каталога
Top layer: dialog, popover и почему z-index: 9999 не нужен
:popover-open — стили открытого tooltip без класса .is-open
<progress> и <meter>: индикаторы загрузки и KPI
<time datetime>: даты статей и Schema-friendly разметка
Селекторы [data-state]: стили без десятка классов
min(), max() и clamp() для отступов секций лендинга
print-color-adjust: exact для логотипа в PDF
text-indent: красная строка в longread без лишнего <p>
letter-spacing: трекинг в меню и капслок-навигации
text-transform: uppercase без капса в разметке
font-kerning: плотность пар букв в display-заголовках
font-stretch: condensed для узких колонок прайса
backface-visibility: flip-карточка услуги без WebGL
transform-origin: масштаб модалки из кнопки-триггера
margin-trim: схлопывание внешних отступов в карточках
border-image: градиентная рамка без лишнего wrapper
outline-offset: кольцо фокуса вне кнопки
enterkeyhint: подпись Enter на мобильной клавиатуре
autocapitalize: имена в форме заявки на iOS
Элемент <search>: семантика блока поиска в 2026
<output>: живой расчёт стоимости в конфигураторе
fieldset и legend: группы полей в длинной форме заказа
rel="sponsored" и ugc: исходящие ссылки с лендинга
crossorigin на img и link: CORS для canvas и шрифтов
blocking=render на link: отложить некритичный CSS
aria-current: page в хлебных крошках и табах
spellcheck в CMS: орфография в textarea редактора
Стили autofill: как не ломать бренд на жёлтом фоне Chrome
caret-animation: мигание курсора и акцент бренда в input
text-align-last: выравнивание последней строки абзаца
hanging-punctuation: кавычки и тире за край колонки
quotes в CSS: типографские кавычки для cite и blockquote
:lang(ru) и :lang(en): точечные правки без дублирования CSS
:dir(rtl) и логические свойства для двуязычного футера
image-rendering: crisp-edges для пиксель-арт и логотипов
filter: drop-shadow vs box-shadow на карточках
passive: true на scroll/touch — плавный скролл лендинга
FormData и multipart: заявка с файлами без стороннего uploader
ReadableStream: потоковый ответ API и чат на сайте
URL.revokeObjectURL: не копите blob-URL в SPA
navigator.onLine и события online/offline: баннер «Нет сети»
Page Visibility API: пауза видео и аналитики в фоновой вкладке
PerformanceNavigationTiming: TTFB и тип навигации в RUM
Partitioned cookies (CHIPS): embed и третьи стороны в 2026
Form-associated custom elements: свои input в design system
Roving tabindex: клавиатурное меню и таббар без ловушек
Декоративный SVG: aria-hidden и role=presentation
:user-valid и :user-invalid: стили полей до submit
:in-range и :out-of-range для слайдеров цены и дат
:indeterminate: «выбрать все» в таблице заказов
:read-only и :read-write: режим просмотра профиля
::file-selector-button: брендовая кнопка «Выбрать файл»
@media (hover: none): UI без hover-only подсказок
@media (pointer: coarse): зоны нажатия от 44×44 px
display-mode: standalone — отличия PWA от вкладки браузера
navigator.storage.estimate(): квота PWA и предупреждение пользователю
Cache Storage API: версии офлайн-страниц и инвалидация
Clipboard API writeText: копирование промокода в один тап
Событие scrollend: подгрузка ленты без лишних запросов
view-transition-name: плавная смена карточки в SPA-каталоге
random() в CSS: лёгкая вариативность декора без JS
closedby на dialog: light dismiss и закрытие по backdrop
history.scrollRestoration = manual в SPA
Text Fragments: ссылка на абзац статьи (#:~:text=)
meta theme-color: цвет строки состояния под бренд
prefers-reduced-transparency: вместо стекла — плотный фон
::selection: выделение текста в цветах бренда
WebAuthn и passkeys: вход без пароля на корпоративном портале
AbortController: отмена fetch и поиска без гонок состояния
Compression Streams: gzip на клиенте перед загрузкой архива
BroadcastChannel: синхронизация корзины между вкладками
structuredClone: глубокое копирование без JSON.parse ловушек
File System Access API: «Сохранить отчёт» с выбором папки
Screen Wake Lock: экран не гаснет во время обучающего ролика
EyeDropper API: пипетка цвета с экрана в редакторе бренда
Badging API: счётчик непрочитанных на иконке PWA
prefers-contrast: усиленный контраст без отдельной «a11y-темы»
forced-colors: как сайт выглядит в режиме высокой контрастности Windows
Относительные цвета CSS: from и calc() поверх oklch-токенов
text-spacing-trim: ровные абзацы в editorial-блоге
Безразмерный line-height: почему 1.5 лучше 24px для масштаба
sin(), cos() и tan() в CSS: круговые диаграммы без SVG
scroll-snap-stop: always — карусель не «перепрыгивает» два слайда
Ключевые слова sizing: stretch, fit-content и auto в grid 2026
grid-template-areas: семантическая сетка лендинга без лишних обёрток
prefers-reduced-data: облегчённая версия для медленных сетей
Network Information API: адаптивное качество видео по типу сети
scroll-timeline и view(): анимация, привязанная к скроллу страницы
animation-range: когда анимация стартует и заканчивается в viewport
offset-path: движение по кривой для иконок и лоадеров
shape-outside: обтекание текста вокруг фото в статье
CSS columns: двухколоночный текст без Grid на узком блоке
break-inside: avoid — карточки не рвутся между страницами при печати
orphans и widows: типографика для печати и PDF
font-synthesis: none — запрет искусственного bold/italic
font-optical-sizing: opsz для читаемости мелкого текста
revert-layer: откат стилей внутри @layer без !important
:is() — короче списки селекторов в UI-kit
:where() — нулевая специфичность для reset и тем
:not() — исключения без дублирования правил
:nth-child(of S) — стили только для карточек в контейнере .catalog
:empty — скрыть контейнер и показать skeleton
:target и :target-within: подсветка раздела в оглавлении
Fullscreen API: видео-кейс и презентация на весь экран
Document Picture-in-Picture: мини-окно для вебинара
::slotted: стили контента в слотах Web Component
reading-order: визуальный порядок vs порядок озвучки
@property: анимируемые design tokens без Sass-переменных
Container style queries: тема карточки по фону, а не по ширине
text-box-trim: убрать лишний воздух над заголовком hero
initial-letter: буквица в статьях блога студии
writing-mode: vertical-rl для рубрик и боковых меток
place-content и place-items: центрирование в Grid без хаков
overflow-wrap: anywhere — длинные URL в комментариях и чате
word-break и line-break: переносы в русском UGC
text-decoration-thickness: подчёркивание ссылок по гайдлайну бренда
text-underline-offset: читаемые ссылки рядом с descenders
appearance: none на select — кастомная стрелка без потери a11y
@counter-style: своя нумерация в оферте и ТЗ
list-style-position: inside и выравнивание маркеров FAQ
::marker: цвет и размер буллетов без list-style-image
object-position: focal point в каталоге без перекадрировки в CMS
min-content и max-content: колонки sidebar без фиксированных px
fit-content(): ограничить максимум и сжаться по контенту
minmax(0, 1fr): почему fr-колонка «сжимается» в Grid
text-underline-position: under для кириллицы и descenders
scrollbar-color: скроллбар в тёмной теме без WebKit-хаков
dvh, svh и lvh: высота hero без «прыжка» на мобильном
fluid type: clamp() для заголовков от 320px до 4K
Variable fonts: ось wght и один файл вместо шести начертаний
font-feature-settings: лигатуры, цифры и small-caps в интерфейсе
tabular-nums: ровные колонки цен в каталоге и CRM
hyphens: auto и переносы в русском тексте на узкой колонке
scroll-margin-top: якоря не прячутся под sticky-шапкой
scroll-padding на html: единый отступ для всех якорей
caret-color: цвет курсора в полях формы под бренд
:placeholder-shown: стили пустого поля без JS-класса .empty
:focus-within: подсветка карточки, когда курсор в любом поле
CSS Grid masonry: Pinterest-сетка портфолио без JS
grid-auto-flow: dense — заполнение дыр в каталоге промо
mix-blend-mode на hero: наложение фото и градиента
backdrop-filter: стеклянная шапка и blur на iOS
mask-image: логотип и reveal-анимация без SVG clipPath в JS
clip-path: скошенные секции и диагональные разделители
isolation: isolate — свой stacking context для модалки и tooltip
object-view-box: кадрирование <img> без overflow:hidden
<ruby>: надстрочные единицы и валюта в ценниках
Declarative Shadow DOM: SSR виджетов без гидратации-монстра
text-wrap: balance — ровные заголовки без «висячих» слов
text-wrap: pretty — читабельные абзацы в блоге и КП
scroll-snap: карусель отзывов без Swiper и лишнего JS
overscroll-behavior: не прокручивайте страницу под модалкой
touch-action: отключение double-tap zoom на кнопках слайдера
Logical properties: margin-inline и будущий RTL без переверстки
Custom Elements: когда виджет на сайте клиента оправдан
line-clamp: обрезка описаний в каталоге без фиксированной высоты
user-select: что можно копировать с лендинга, а что нет
will-change: когда GPU-слой помогает, а когда ест память
Нативная вложенность CSS: BEM и Tailwind в одном проекте
@starting-style: входная анимация без flash of unstyled state
transition-behavior: discrete — анимация display и height
color-mix(): оттенки бренда без десятка переменных
light-dark(): один токен для светлой и тёмной темы
image-set() в CSS: DPR и форматы без тега <picture>
<slot> и fallback: контент внутри custom element до гидратации
::part(): стилизация shadow DOM снаружи без !important
@scope: ограничение каскада CSS на секции лендинга
bfcache: почему «Назад» мгновенный, а SPA его ломает
Print CSS: коммерческие предложения и счета, которые нормально печатаются
color-scheme на :root и мета-тег: системная тёмная тема без вспышки
Navigation API: единая точка для SPA-переходов и аналитики
Invoker Commands и interest: превью ссылки без тяжёлого hover-JS
scheduler.postTask: приоритеты main thread вместо setTimeout(0)
Zstandard (zstd) на CDN: сжатие HTML и JSON быстрее Brotli?
HTTP 103 Early Hints: preload шрифтов и LCP до основного ответа
ResizeObserver: адаптивные графики и embed без window.resize
Intersection Observer: баннер cookie и аналитика «дошли до блока»
credentialless iframe: виджеты без утечки cookie родителя
Document-Policy и JS profiling: что разрешать на продакшене
Long Animation Frames (LoAF): кто виноват в плохом INP
requestIdleCallback: некритичный парсинг и индексация UI
size-adjust и fallback-шрифты: меньше CLS при загрузке веб-шрифта
Атрибут ping: тихая аналитика кликов без тяжёлого redirect
rel=noopener noreferrer: внешние ссылки и tab-nabbing
beforeunload: почему «Вы уверены, что хотите уйти?» вредит UX и bfcache
pageswap и cross-document View Transitions
Sanitizer API: вставка HTML из CMS без DOMPurify в бандле
Атрибут inert: блокировка фокуса под модалкой без «ловушек» на коленке
<details> и <summary>: аккордеон FAQ без JavaScript
Scroll-driven animations: анимация от скролла без ScrollMagic
CSS anchor positioning: тултипы и поповеры без absolute «на глаз»
Media Queries Level 4: синтаксис диапазонов `(width >= 768px)`
:focus-visible — обводка только для клавиатуры, не для каждого клика
Trusted Types: снижение DOM-XSS при вставке HTML из CMS
Reporting API: куда уходят отчёты CSP, COOP и Permissions Policy
HSTS и preload: принудительный HTTPS и попадание в списки браузеров
SameSite cookies: Lax, Strict и сторонние платежи
Resource Hints: когда prerender ускоряет SPA, а когда съедает трафик
VideoObject в JSON-LD: разметка роликов для поиска и превью
Speakable schema: что озвучивают Google Assistant и умные колонки
CSS Subgrid: выравнивание карточек в сетке каталога
Селектор :has(): «родитель с потомком» без JavaScript
@layer в CSS: порядок Bootstrap, утилит и своих стилей
OKLCH в CSS: предсказуемые оттенки и тёмная тема
accent-color: брендовые чекбоксы без перерисовки SVG
scrollbar-gutter: stable — без скачка layout при появлении скролла
field-sizing: content — textarea и input по высоте текста
modulepreload: приоритет ES-модулей без лишнего preload всего бандла
content-visibility: auto и «дешёвый» off-screen контент
CSS contain: layout и paint — изоляция компонентов от reflow
Referrer-Policy: UTM, privacy и полные URL в аналитике
Permissions-Policy: отключить geolocation и camera в iframe
SoftwareApplication JSON-LD: SaaS и калькуляторы в выдаче
Consent Mode v2: аналитика и реклама после согласия cookie
Яндекс Метрика в SPA: hit при router change и виртуальные pageview
Course и CourseInstance: онлайн-курсы и расписание в разметке
Import maps: CDN и версии ES-модулей без сборщика на legacy
Элемент dialog: нативные модалки без focus-trap библиотек
Popover API: подсказки и меню без z-index войн
View Transitions API: плавные переходы между страницами SPA
CSS container queries: адаптив карточки по ширине контейнера
Meta description: сниппет в выдаче без keyword stuffing
Search Console: отчёт Core Web Vitals и приоритизация URL
Staging и preview: noindex, auth и утечки в индекс
datalist: нативные подсказки в input без тяжёлого combobox
Атрибут lang на html: озвучка, hyphenation и сигнал языка
Cross-origin isolation: COOP, COEP и SharedArrayBuffer
TBT и long tasks: где main thread «замирает» и как это связано с INP
Service Worker: стратегии кэша для офлайна и быстрого повторного визита
Web App Manifest: иконки, theme_color и «Добавить на экран»
target="_blank" без noopener: уязвимость window.opener и простой фикс
Event в JSON-LD: афиша, вебинары и даты без ошибок в Search Console
Offer в Schema.org: цена, валюта, availability и согласованность с витриной
HTTP 503 и Retry-After: техработы без выпадения из индекса
Meta viewport: width=device-width и типичные ошибки мобильной вёрстки
srcset и sizes: responsive images без лишних мегапикселей
decoding="async" у img: декодирование без блокировки отрисовки
Speculation Rules API: prefetch и prerender следующих страниц
PDF в поиске: когда файл индексируется и как не убить UX мобильных
Infinite scroll и SEO: paginated series и видимые URL
CAPTCHA на формах: v3, hCaptcha и доступность без блокировки лидов
RUM для Core Web Vitals: библиотека web-vitals и отправка в аналитику
ETag и 304 Not Modified: условные запросы для API и статики
JobPosting JSON-LD: вакансии студии в поиске Google for Jobs
OG-изображение: минимальные размеры и aspect ratio для Telegram и Facebook
Autoplay видео: политика браузеров, muted и влияние на UX
WebSocket: reconnect, heartbeat и graceful shutdown на проде
FCP: первый контент на экране и что ускоряет «появление» страницы
prefers-reduced-motion: анимации, которые не мешают и не ломают WCAG
Native lazy loading: loading="lazy" без сторонних библиотек
preconnect и dns-prefetch: ускорить сторонние домены без лишних TCP
Article в JSON-LD: блог, новости и дата публикации без путаницы
noindex через meta robots: когда закрывать страницу от индекса
Soft 404: когда страница отдаёт 200, а для поиска это «пустышка»
Cache-Control для статики: immutable, max-age и сброс CDN
Secure contexts: почему API браузера требуют HTTPS
fetchpriority=high: приоритет LCP-изображения без лишнего preload
GraphQL и проблема N+1: DataLoader и батчинг на сервере
Critical CSS: inline above-the-fold без раздувания HTML
font-display: swap и борьба с невидимым текстом (FOIT)
HTTP/3 и QUIC: что меняется для сайта и когда это заметно
Source maps в production: отладка без публикации исходников
API-ключи во фронтенде: ограничения, прокси и ротация
Skip link: прыжок к main content для клавиатуры и скринридеров
Яндекс Вебмастер: sitemap, переобход и типичные ошибки индекса
Sitelinks search box: разметка поиска по сайту в выдаче
Анализ бандла: как ловить регрессии размера JS до релиза
TTFB и Server-Timing: где «застрял» первый байт HTML
Gzip и Brotli для HTML и JSON: что включать на CDN и origin
CORS для API: preflight, куки и заголовки, без которых фронт «молчит»
Идемпотентность POST: платежи и заказы без двойного списания
Секреты в Git: secret scanning, .gitignore и что делать после утечки
Конфигурация через окружение: двенадцать факторов и практика для Next/Node
Redis как кэш: cache-aside, TTL и инвалидация после публикации
Индексы в PostgreSQL для веб-проектов: B-tree, составные и лишние индексы
JWT в браузере: httpOnly-куки vs localStorage и модель обновления токена
HTTP 429 и Retry-After: как клиенту не усугубить шторм запросов
Skeleton screens: воспринимаемая скорость без обмана пользователя
aria-live: объявлять результат отправки формы без лишнего шума
Атрибут inputmode: цифры, телефон и decimal на мобильных
autocomplete и безопасность: логин, карта и одноразовые коды
Элемент picture: WebP, AVIF и JPEG fallback без ломки кэша
HowTo в JSON-LD: пошаговые гайды в поиске без нарушения правил Google
AggregateRating и отзывы: допустимые сценарии и риск санкций за фейк
Web Share API: нативное меню «Поделиться» без своих модалок
Push-уведомления в браузере: разрешения, VAPID и нераздражать
Timing-Allow-Origin и полевые метрики для сторонних ресурсов
CLS: реклама, шрифты и динамический контент без «прыжков» макета
robots.txt: что может и чего не может файл для краулеров
JSON-LD Organization: логотип, контакты и «панель знаний» без переспама
Alt у изображений: доступность, поиск картинок и когда alt должен быть пустым
Open Graph и X Cards: превью ссылок в мессенджерах и соцсетях
Content-Security-Policy с нуля: от report-only к жёсткому режиму
preload и prefetch: приоритет шрифтов, LCP и «следующая» страница
Subresource Integrity: защита CDN-скриптов от подмены
BreadcrumbList в JSON-LD и хлебные крошки в UI: единый источник правды
Пагинация каталога: внутренние ссылки, faceted navigation и индекс
Порядок фокуса и модальные окна: ловушка таба и возврат на триггер
CSS aspect-ratio и размеры img: стабильный блок под медиа
Дубли URL: параметры сессии, трекинг и консолидация сигналов для Google
Image sitemap: когда он нужен и как не превысить лимиты файла
Видео в поиске: VideoObject JSON-LD и обязательные поля
XSS и санитизация HTML: что допускать из WYSIWYG на сервере
HTTP security headers: HSTS, X-Content-Type-Options и базовый hardening
package-lock.json и воспроизводимые сборки фронтенда
Playwright smoke: три сценария, которые ловят 80% «сайт упал»
Lighthouse CI в pull request: бюджеты производительности и регрессии
INP вместо FID: как измерить и ускорить отклик интерфейса
WCAG 2.2 для продуктовой команды: что нового и как внедрять по этапам
Файл llms.txt на сайте: зачем он и как не завысить ожидания
Электронная торговля в Яндекс Метрике: dataLayer, лимиты и отладка
hreflang без ошибок: взаимные ссылки, x-default и полные URL
LCP без иллюзий: где реально теряются секунды до главного кадра
Canonical и дубли страниц: когда ставить rel=canonical и чего избегать
OpenAPI-first: как контракт API экономит фронт, бэк и тесты
Cookie, метрики и 152-ФЗ: раздельные согласия и прозрачная политика
Индекс sitemap и лимиты: как склеить большой каталог и не упереться в потолок
Product в JSON-LD для каталога: что обязательно совпасть с витриной
Webhooks в CRM: подпись HMAC, идемпотентность и ретраи
B2B-формы: валидация без ярости и рост конверсии без «лишних полей»
Видео на сайте: WebM, AV1 и запасной H.264 для Safari
Резервное копирование сайта и БД: правило 3-2-1 и проверка восстановления
Переезд сайта на новый домен: 301, Search Console и мониторинг позиций
Защита форм от спама и перегрузки: rate limit, honeypot и капча по необходимости
Тёмная тема в интерфейсе: контраст, elevation и привычки пользователя ОС
Разметка FAQ: когда она уместна и как избежать санкций за несоответствие контенту
npm audit и CI: цепочка поставок фронтенда без «зелёного build и красного прод»
UI-дизайн в комиксах: wireframe, UI-kit и передача в разработку
Аналитика сайта в комиксах: цели, отчёты и решения
Кейс студии в комиксах: от брифа до результата
Интернет-магазин в комиксах: карточка, checkout и рост продаж
Поддержка сайта в комиксах: мониторинг, правки и SLA
Контент и SMM в комиксах: от календаря до аналитики
SEO в комиксах: от аудита до роста в поиске — как мы ведём проекты
Видеопродакшн в 5 кадрах: от брифа до публикации
Маркетинг в комиксах: воронка, креативы и лиды в CRM
AI на сайте без хаоса: 5 шагов в комикс-формате
Сайт под ключ в комиксах: бриф, дизайн, код и запуск
Брендинг в комиксах: от moodboard до брендбука
GEO и нейропоиск: комикс про видимость в AI-ответах
15+ бесплатных фотостоков и сервисов генерации изображений
Бесплатные видеостоки: 8 источников для сайта и соцсетей
GEO и нейропоиск: как оставаться видимым, когда кликов стало меньше
Ссылочное продвижение: когда ссылки нужны и когда хватит контента
Репутация онлайн: отзывы, карты и влияние на продажи
AI-инструменты для сайта: тексты, картинки и рутина без хаоса
Дизайн-токены и UI-кит: как передать макет в вёрстку без сюрпризов
Hero-блок: как выбрать фото со стока и не убить скорость сайта
Карточка товара в 2026: фото, размеры, доставка и микроразметка
Корзина и оплата: сигналы доверия, которые реально поднимают конверсию
Договор на разработку сайта: что закрепить до старта, чтобы не спорить в конце
Приёмка сайта по этапам: чек-лист для заказчика и студии
Редизайн или новый сайт: как выбрать и не потерять SEO
Как оценить портфолио веб-студии: на что смотреть кроме картинок
Предпродакшн корпоративного ролика: сценарий, раскадровка и смета
Продуктовая съёмка для каталога: свет, фон и единый стиль на сотни SKU
Материалы для выставки: roll-up, стенд и цифровые носители в одном комплекте
Архив медиа и акты: как оформить права на ролик, фото и музыку для сайта
Сайт под ключ или конструктор: как выбрать без переплаты и сюрпризов
Микроразметка Schema.org для сайта услуг: что внедрить в первую очередь
Главная страница B2B: семь блоков, которые не стыдно показать директору
Заявки с сайта в CRM: вебхуки, дубли и поля без хаоса в воронке
Фоновое видео на лендинге: когда оно уместно и как не убить скорость
Бриф на разработку сайта: шаблон вопросов, который экономит месяц переписки
Поддержка сайта после запуска: что входит в нормальный SLA
Мультиязычный сайт без дублей: структура URL и hreflang по шагам
Иконки для интерфейса: бесплатные наборы и лицензии без сюрпризов
Шрифты для коммерческого сайта: пары, лицензии и передача в вёрстку
CDN и кеш статики: что реально ускоряет сайт в 2026 году
3D и иллюстрации для B2B: источники, стиль и сроки согласования
Цветовые системы: генераторы палитр, контраст и передача в код
Мокапы для презентаций и кейсов: шаблоны без визуального шума
Музыка и саунд для рекламного ролика: стоки, лицензии, типичные ошибки
Конвертация изображений: PNG, WebP и AVIF без артефактов на витрине
Технический аудит сайта: минимальный протокол без лишних отчётов
Семантика для сайта услуг B2B: не проектировать как маркетплейс
Мета‑заголовки и сниппеты в 2026: меньше кликбейта, больше ясности
URL, хлебные крошки и переезды: как не потерять вес разделов
Переиндексация после редизайна: что отслеживать первые 30 дней
Локальное SEO: карты, НАП и представительства без дубликатов
Кластеры запросов и перелинковка: связываем страницы осмысленно
Core Web Vitals глазами редактора: что в контенте ломает скорость
Контент‑календарь корпоративного сайта: связка блога, кейсов и продуктовых страниц
Каннибализация запросов: как найти конфликтующие страницы и вылечить
Промпт‑регламент для маркетинговой команды: как не потерять тон бренда
AI для описаний категорий интернет‑магазина: скелет и факты вручную
Нейроретушь для каталога: инпейнт, фон и этические границы
Чат-бот на сайте: логирование, ПДн и практичный минимум для РФ
RAG для базы знаний на сайте: что реалистично без команды из десяти инженеров
AI для alt‑текстов: доступность, SEO и когда лучше писать вручную
AI в монтаже коротких роликов: расшифровка, драфт монтажа и этика
Качество текста: метрические ловушки и здравый смысл редактора
Контекстное окно командных AI‑чатов: утечки, версии документов и дисциплина
Синтетические медиа в рекламе: дисклеймеры, этика и практика РФ
Дизайн‑система в Figma: компоненты, сосотояния и устойчивость к правкам
Сетка и модули корпоративного сайта: ритм, брейкпоинты и повторяемые блоки
Контактные зоны и контраст: WCAG‑практика без фанатизма
Мобильная навигация в 2026: паттерны меню, поиск и «липкие» CTA
Motion в продающем лендинге: уместная анимация вместо «кино на скролле»
Брендбук и UI‑кит: что именно передавать в вёрстку после согласования
Figma‑прототип и «боевой» код: где заканчивается кликабельный макет
Типографика и визуальная иерархия: как вести глаз без крика капсом
Бриф на B2B‑ролик: вопросы, которые закрывают 80% согласований
Офисная съёмка: подготовка площадки, свет и логистика за один день до
Колор и единообразие видеоряда: LUT, референсы и согласование с брендом
Свод звука: подкаст, рекламный ролик и подводные камни компрессии
Субтитры для соцсетей: безопасные зоны, локализация и скорость чтения
Экспорт для эфира и соцсетей: различия по кадру, гамме и громкости
Версии проекта в монтаже: архив, совместная работа и возврат к кадрам клиента
Фильтры каталога и пустая выдача: UX без тупика и SEO без дублей
Интеграция остатков и цен: очереди, задержки и честность витрины
Возвраты, оферта и политика данных: что синхронизировать с интерфейсом
Ecommerce‑события в Яндекс.Метрике: цели, сквозная аналитика и базовая гигиена
Маркетплейс или собственная витрина: критерии выбора без мифов про «бесплатный трафик»
Апсейл и сопутствующие товары: как предлагать больше без ощущения навязчивости
Доставка и ПВЗ: как оформить условия на сайте, чтобы снизить тревожность покупателя
Блог открыт: новости студии и разборы
AI-примерка в интернет-магазине: CMS-модуль, ПДн и контур для РФ
Кейсы студии: как читать разборы проектов
Выставочный стенд: чеклист до выезда на площадку
SEO без лжи: структура сайта, скорость и что реально влияет на выдачу
Вайбкодинг в команде: как ускорить макеты без хаоса в бренде
От сценария до мастера: пайплайн корпоративного ролика
AI-генерации в рекламе: промпты, права и контроль качества
Голос бренда: озвучка, подкаст и легальный саундтрек в роликах