Я занимаюсь фронтенд-разработкой около 9 лет, но, к своему стыду, ни разу не «игрался со шрифтами». Во всех проектах, над которыми я работал, был либо подключён какой-то шрифт из Google Fonts, либо всё уже было настроено, либо использовался просто ка...

🎭 Про маски У нас наметился очередной редизайн, и снова всплыла проблема, с которой мы живём уже очень долго — зоопарк иконок. Если кратко: мы не можем инлайнить SVG или использовать что-нибудь вроде Font Awesome, потому что у пользователя должна ...

✨ Функция attr() в CSS После предыдущего поста про современный CSS, я вспомнил, что несколько месяцев назад применил CSS-функцию attr() в реализации JsonViewer с виртуальной прокруткой. attr() позволяет взять значение любого HTML-атрибута и использ...

Я как-то упустил насколько быстро сейчас развивается CSS. Кажется, что через несколько лет препроцессоры и другие решения будут не особо то и нужны. CSS переменные у нас уже есть давным давноподдержка 95%Вместо БЭМА и CSS модулей сможем использовать...

📈 Анимации по скролу — Scroll Progress Timelines У меня вообще не очень дела с CSS анимациями, но я наконец-то дочитал статью An Introduction To CSS Scroll-Driven Animations и решил рассказать, что такое Scroll Progress Timelines, и показать свою н...

⏭️ Соседние селекторы в CSS Сегодня утром прилетает баг - у элемента не виден горизонтальный скрол. Случилось это из-за новой фичи - появился новый компонент, из-за чего соседний немного съехал и скрол ушёл за пределы экрана. Тут я подумал, что в п...

У нас на проекте есть 2 основных правила для написания стилей: У всех CSS-классов должен быть префикс dp-, выбранный по названию продуктаМы используем БЭМ — <block><element>--<modifier> Однако есть большой пласт легаси стилей, где эти правила не ис...

📖 Выравнивание последнего элемента по правому краю с помощью flexbox Сегодня хочу порекомендовать короткую, но очень полезную статью о флексбоксах How to Align Last Flex Item to Right. Довольно часто необходимо сверстать UI, в котором все элементы...

​​📖 Как браузер рендерит веб-страницу Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере. Чтобы быстро разобраться ...

Почему CSS называется каскадными таблицами стилей? Каскад — это алгоритм, который определяет, как вычислить результирующие стили элементов на основе CSS правил, объявленных в различных источниках. CSS правила могут быть объявлены в следующих источн...

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