От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit. К сожалению, это не очень помогает в Firefox или Edge, или родственной экосистеме браузеров. Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно: На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью ...

От автора: написание правильного CSS часто является сложной задачей, но это то, что в определенный момент может потребоваться любому разработчику. Порядок свойств в CSS является постоянным вопросом, который беспокоит большинство из нас. Важно ли это? Получим ли мы что-то, если уделим этому внимание? Ответ на эти вопросы неоднозначен. Поскольку я читаю все больше и больше на эту тему, я нашел ...

От автора: на прошлой неделе я закончил раздел слайдов для презентации на конференции Performance.Now(). В нем я рассмотрел шаблоны, которые позволяют браузеру как можно быстрее отображать страницу, включая код с исходным HTML, чтобы браузер имел все необходимое для начала такого процесса, как рендеринг страниц без дополнительных запросов. Два доступных варианта — это встраивание и Server Push, но у каждого есть ...

От автора: в CSS исключение (которое в настоящее время находится в «рабочем проекте» спецификации) похоже на float в том, что оно позволяет встраивать контент, чтобы обернуть элемент. Но не совсем, как float. Чен Хуэй Цзин приводит отличное пояснение: Элемент исключения — это элемент уровня блока, который не является плавающим, а генерирует поле исключения. Элемент исключения устанавливает новый контекст форматирования блока. ...

От автора: не секрет, что более компактные сайты работают быстрее, чем раздутые. Не позволяйте ненужным стилям CSS тормозить ваши веб-проекты; используйте инструменты и методы, описанные ниже, чтобы уменьшить CSS и улучшить общую производительность веб-сайта. Что такое неиспользуемый CSS? Независимо от того, насколько вы опытный разработчик, есть большая вероятность того, что ваш сайт содержит CSS, который не влияет на текущие элементы ...

От автора: в этом видео уроке мы поговорим с вами о методологии БЭМ, которая на данный момент является самой популярной и в ее основе лежит договоренность о том, как разбивать интерфейсы на независимые блоки, описывать их, и в дальнейшем повторно использовать. По результатам урока вы узнаете о том, что такое БЭМ, что лежит в основе данной методологии, разберем что же ...

Написать эту статью меня подтолкнула относительно недавняя статья на CSS-tricks (скорее всего, вы ее уже видели, ссылку не дам из вредности:). Ее автор проделал большую и замечательную работу — нарисовал красивую наглядную схему-«шпаргалку», написал объяснение простым языком, привел кучу примеров, не забыл даже про презентационные атрибуты, тоже влияющие на стили (в SVG)… Увы, даже та статья подтвердила два печальных правила: 1) ...

Перевод статьи Improve Your Debugging Skills with Chrome DevTools (Part 2) с сайта telerik.com для css-live.ru, автор — Питер Милчев В этой статье мы рассмотрим продвинутые функции отладчика Chrome, закрепив навыки, полученные в первой части. Вы научились проверять сгенерированный HTML и применённые стили? Уже смело можете отлаживать JavaScript в браузере? Надеюсь, поскольку в этой серии мы рассмотрим продвинутые функции отладчика ...

От автора: я хочу полюбить styled components CSS, действительно хочу. На самом деле, меня настолько взволновали эти симпатичные новые вещи в версии 4, что я потратил одно дождливое субботнее утро на то, чтобы преобразовать проект из Vanilla CSS в стилизованные компоненты. Хотя я мог в это время прыгать в лужах. Мой процесс: я переименовал файлы CSS в JS и заменил ...

От автора: на пути к тому, чтобы стать мастером CSS, вам нужно знать, как отлаживать и оптимизировать CSS. Как вы диагностируете и устраняете проблемы с рендерингом? Как вы обеспечиваете, чтобы CSS не вызывал проблем с производительностью для конечных пользователей? И как вы обеспечиваете качество кода? Знание того, какие инструменты использовать, поможет вам обеспечить, чтобы front-end работал оптимально. В этой статье ...