Главная » Архив меток: CSS

Архив меток: CSS

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 2)

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

Читать далее »

Styled-components CSS V4: хорошие, плохие и совершенно другие

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

Читать далее »

Отладка и оптимизация CSS: Минимизация с помощью CSSO

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

Читать далее »

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 1)

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

Читать далее »

Один недействительный псевдоселектор CSS — это полностью игнорируемый селектор

От автора: чем опасны недействительные псевдоселекторы CSS? Возможно, вы знаете это: если какая-либо часть селектора недействительна, это делает недействительным весь селектор. Например: div, span::butt { background: red; } Несмотря на то, что div является абсолютно корректным селектором, но span: butt — нет, поэтому весь селектор недействителен — ни дивы, ни элементы span::butt на странице не будут иметь красный фон. Обычно ...

Читать далее »

Перемещение элемента CSS background-position с помощью позиции мыши

От автора: предположим, вы хотите переместить CSS background position элемента, когда на него наводится указатель мыши, чтобы сделать дизайн более интересным. У вас есть такой элемент: <div class="module" id="module"></div> И вы задаете для него фон: .module { background-image: url(big-image.jpg); } Вы можете настроить положение фона в JavaScript следующим образом: const el = document.querySelector("#module"); el.addEventListener("mousemove", (e) => { el.style.backgroundPositionX = -e.offsetX ...

Читать далее »

Всплывающие метки на чистом CSS с помощью псевдо-класса ::placeholder-shown

От автора: в этом руководстве мы создадим решение, как можно создать на чистом CSS метки, используя псевдо-класс ::placeholder-shown. Техника плавающих меток ИСХОДНЫЙ КОД | СМОТРЕТЬ ДЕМО Когда мы имеем дело с полями ввода, существует множество методов, которые можно рассмотреть, чтобы предоставить пользователям лучший опыт. Нам необходимо убедиться, что мы даем пользователям необходимую информацию в каждый момент времени, а это значит ...

Читать далее »

CSS position: sticky — создание эффектов пролистывания с использованием липкого позиционирования

От автора: липкие элементы преимущественно используются для удерживания чего-либо, отображаемого на экране во время прокрутки. Как же здорово, что мы можем и скрыть элементы так же! Вот типичная (хм) ситуация: Липкие элементы (CSS position sticky;) очень похожи на фиксированные (position: fixed;), поскольку они сохраняют свое положение на экране, даже когда пользователь прокручивается страницу вверх или вниз. В чем разница? Липкий ...

Читать далее »

Продвинутая CSS-темизация: динамические темы с помощью переменных и JavaScript

От автора: в этом руководстве по тому, как создаются в CSS темы, мы будем использовать пользовательские свойства (также известные как переменные CSS) для реализации динамических тем простой HTML-страницы. Мы создадим темные и светлые варианты тем, затем напишем JavaScript, чтобы переключаться между ними, когда пользователь нажимает кнопку. Как и в обычных языках программирования, переменные используются для хранения значений. В CSS они ...

Читать далее »

Никто не знает CSS: специфичность — не каскад

Пролог (в котором едва обошлось без драки) Прошедшие выходные ознаменовались небольшой драмой в веб-сообществе. Началась она с безобидного «теста» по CSS в твиттере Макса Штойбера, разработчика styled-components и react-boilerplate: Насколько хорошо вы знаете CSS? (эмодзи: ученик у доски) При таких классах: .red { color: red; }.blue { color: blue; } какого цвета будут эти дивы? <div class="red blue"><div class="blue red"> ...

Читать далее »