
Псевдоклассы и псевдоэлементы в CSS: короткое руководство
Двоеточие или два двоеточия? Разбираемся, чем :hover отличается от ::before, зачем нужны :is() и :has() и где браузеры до сих пор ведут себя по-разному.

Двоеточие или два двоеточия? Разбираемся, чем :hover отличается от ::before, зачем нужны :is() и :has() и где браузеры до сих пор ведут себя по-разному.

Когда шрифт вдруг вырастает вдвое, а padding уезжает на мобильном — обычно виноват не CSS, а неверно выбранная единица. Разбираем, где px, где rem, где em и когда vw мешает.

Пять значений свойства position решают, где окажется блок и относительно чего он смещается. Разбираем, чем они отличаются на практике, и почему top: 20px иногда не двигает элемент.

Что реально делают position, z-index и transform, где новичок ломает вёрстку — и как за пять минут понять, почему блок «не хочет» вставать на место.

Разбираемся, как работают свойства position и как за несколько шагов прижать кнопку к углу экрана, сделать липкую шапку и наложить бейдж на картинку. Времени уйдёт около 30 минут.

Тёмная тема ломается на трёх вещах: мигание белым при загрузке, отсутствие памяти о выборе и жёстко зашитые цвета. Разбираем, как обойти каждую на чистом CSS и минимуме JS.

Как вставлять SVG-иконки так, чтобы их можно было красить через CSS, собирать в спрайт и анимировать — и где каждый подход ломается.

Скринридер читает вашу кнопку как «button», клавиатура не попадает в модалку, а цвет ссылки сливается с текстом. Разбираем минимум по доступности, который закрывает большую часть проблем без переписывания проекта.

Одна и та же картинка на 4K-мониторе и на смартфоне не должна весить одинаково. Разбираем, как отдавать нужный размер в нужном формате и не грузить то, что за пределами экрана.

Как добавить нестандартный шрифт на сайт так, чтобы он не тормозил загрузку и текст не прыгал при отрисовке. Что подготовить заранее и как проверить результат.

Один неправильно подключённый шрифт добавляет к загрузке страницы 300–800 мс и невидимый текст при прокрутке. Разбираем, как подключить шрифты так, чтобы браузер не тормозил и не прятал контент.

За полтора часа вы подключите веб-шрифт так, чтобы текст был виден с первой миллисекунды, а браузер не грузил ненужные начертания. Пошагово: от формата woff2 до self-hosting и font-display.