Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link
➿➿➿➿➿➿➿➿➿➿➿

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

В статье разбираем три псевдокласса: :link для непосещённых ссылок, :visited для уже открытых пользователем и современный :any-link, охватывающий оба состояния. Покажем безопасные приёмы стилизации и разберём порядок правил: от общего (:any-link) к более специфичным (:link, :visited), чтобы стили не конфликтовали. #html #css

🌟 Читать статью

CSS свойство transform позволяет манипулировать элементами на вашей веб-странице, изменяя их форму, размер и положение. В общем виде свойство transform записывается так: transform: функция(значение);, где функция — это тип преобразования, который вы хотите применить, а значение — параметры этого преобразования.

В статье на практических примерах разбираем базовые функции translate, rotate, scale и skew — как сдвигать, поворачивать, масштабировать и наклонять элементы через transform.

А ещё показываем, как эти преобразования анимировать с помощью transition и @keyframes, и напоминаем важное: transform — для эффектов и анимаций, а для раскладки страницы лучше использовать flexbox или grid. #css #html

📌 Читать статью

Смежный селектор в CSS, обозначаемый знаком плюс (+), позволяет выбрать элемент, который идёт сразу после другого элемента и находится с ним на одном уровне DOM.

В статье разбираем, как работает селектор A + B, и показываем, где он особенно удобен: когда нужно оформить «следующего соседа» (например, абзац сразу после заголовка) без дополнительных классов. #css #html

✨ Читать статью

Наверняка вы видели видео с «невозможной коробкой» — нажимаете на переключатель, а через пару секунд вылезает палец и расщёлкивает кнопку. Наконец-то кто-то сделал это и в вебе.

В статье — 8 демок с CodePen: от стилизации чекбоксов через кастомные свойства до 20+ анимированных кнопок на чистом CSS. Hover-эффекты, светящиеся формы входа, иконки соцсетей со всплывашками — и та самая лапка в финале. #css #html

🌀 Читать статью

text-decoration: none — одна строка, которая убирает подчёркивание ссылки. Но стоит ли это делать?

В статье показываем, как убрать подчёркивание через CSS и через инлайн-стили, когда это уместно — например, для ссылок-кнопок или карточек товаров, и как заменить стандартное оформление на своё: анимация, border-bottom, другой цвет. Отдельно о том, почему полностью убирать подчёркивание без замены — плохая идея для UX. #css #html

🚀 Читать статью

Контент-менеджер прислал фото 1920×1080, а в карточке места 300×200. Без object-fit получается сплющенный кот.

Свойство object-fit управляет тем, как <img> или <video> вписывается в свой контейнер. cover заполнит бокс с обрезкой лишнего, contain впишет картинку целиком с сохранением пропорций, fill растянет как есть. В статье разбираем каждое значение на примерах и показываем, зачем добавлять max-width: 100%, чтобы картинки не ломали сетку. #css #html

📕 Читать статью

Одни и те же стили для h1, h2, p и li — и для каждого отдельное правило? CSS так можно не мучить.

Список селекторов через запятую позволяет записать один блок стилей вместо четырёх. В статье разбираем, где это удобно: сброс отступов, общие стили для кнопок и ссылок, единое оформление заголовков. И объясняем, когда вместо группировки лучше использовать классы. #css #html

🎁 Читать статью

innerHTML вставляет в DOM всё подряд — включая <script>, обработчики событий и другие векторы XSS. Годами единственной защитой были сторонние библиотеки вроде DOMPurify.

Firefox 148 стал первым браузером, реализовавшим Sanitizer API — нативную санитизацию прямо при вставке HTML. Метод setHTML() автоматически вычищает опасные элементы до того, как они попадут в DOM. А в марте подтянулся и Chrome 146. Разбираем, как перейти с innerHTML на setHTML(), как настроить конфигурацию санитайзера и зачем сочетать его с Trusted Types. #js #html

🎁 Читать статью

Поповеры и диалоги выглядят одинаково — всплывающее окно поверх страницы. Путаница начинается, когда нужно выбрать между Popover API и Dialog API.

Ключевое отличие — в управлении фокусом. Popover API возвращает фокус триггеру, закрывается по клику мимо и по Escape. Dialog API с методом showModal() ловит фокус внутри окна и не отпускает, пока пользователь не примет решение. Для тултипов, меню и уведомлений — Popover API. Для модальных окон — <dialog>. #html #a11y

Разбираем, как они устроены и что учесть при выборе.

🎁 Читать статью

Резервный канал в MAX

Встроенные стили побеждают любой селектор в каскаде. Переопределить их из внешних стилей — задача нетривиальная: чаще всего приходится тянуться за !important. А псевдоклассы, псевдоэлементы и медиавыражения в атрибуте style вообще не работают — :hover, ::before, @media мимо.

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

Разбираем приоритет, ограничения и случаи, когда встроенные стили оправданы. #css #html

💡 Читать статью

Модальное окно — частая задача и частый источник багов. Затемнение, блокировка прокрутки, ловушка фокуса, Escape — каждый пункт легко сломать.

Тег <dialog> берёт это на себя. Открыть, закрыть, стилизовать фон — на встроенных методах и одном псевдоэлементе. С 2022 года работает во всех современных браузерах. В статье — как устроен и что важно знать перед продакшеном. #html #dialog

👀 Читать статью

Тег <details> давно делает раскрывающиеся блоки без единой строки JavaScript. Одна загвоздка оставалась: несколько блоков жили независимо — открыли один, соседние не реагируют. Эксклюзивный аккордеон, где раскрыт ровно один раздел, собирали на JS.

Теперь это закрывает атрибут name: даёте блокам общее имя — и браузер сам следит, чтобы открытым был только один. Без скриптов и библиотек.

Интереснее — что вокруг. Стандартный маркер-треугольник меняется на свой, а гладкая анимация высоты требует пары трюков. В статье — интерактивный FAQ, который можно потрогать в браузере, разбор стилизации и честные оговорки про анимацию и поддержку (Chrome 120+, Firefox 130+, Safari 17.2+). #html #css

🎈 Читать статью

<article> или <aside>? В макете они выглядят одинаково, и их постоянно путают — а перепутанные теги ломают семантику страницы.

<article> — самостоятельная единица контента: её можно вынести на другую страницу или сайт, и она останется осмысленной (пост, карточка товара, комментарий).

<aside> — дополнение к основному контенту рядом: врезка, реклама, блок похожих материалов. Уберите его, и основной смысл не пострадает.

В статье — схема смысловых секций страницы и шпаргалка с вопросами, которые помогают развести теги на конкретных примерах. #html

☝️ Читать статью

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

Стандарт WCAG 2.1 от W3C строится на четырёх принципах: воспринимаемость, управляемость, понятность и устойчивость. В каждом — конкретные критерии. Значимым изображениям нужны текстовые альтернативы, формам — понятные подписи. А состояния кнопок и ссылок должны считываться без опоры на цвет.

Контраст проверяется через WebAIM, а симулятор дальтонизма встроен прямо в Chrome DevTools. В статье разбираем важные критерии на реальных сайтах: Яндекс, Кинопоиск, Etsy, Dropbox. #a11y #html

💡 Читать статью