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

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

От автора: предположим, вы хотите переместить 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 position sticky;) очень похожи на фиксированные (position: fixed;), поскольку они сохраняют свое положение на экране, даже когда пользователь прокручивается страницу вверх или вниз. В чем разница? Липкий ...

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

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

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

От автора: в CSS каждое свойство имеет то, что называется начальным значением. Иногда это называется значением по умолчанию, но спецификация использует термин CSS initial, который, я думаю, немного лучше. Технически, начальное значение любого заданного свойства должно быть объявлено, только если это значение переопределяет ранее определенное значение, которое не является начальным значением. Но начальные значения часто присутствуют, даже если они не ...

Вдогонку статье о нестандартных (но иногда полезных) штуках с префиксом -webkit- пришла новость от разработчиков Firefox: они собираются изменить свой парсер CSS, чтобы любые псевдоэлементы вида ::-webkit-что-угодно считались валидными селекторами и не заставляли весь блок правил игнорироваться. Причина всё та же — совместимость: так делают WebKit и Blink, многие авторы пишут код в расчете на это поведение, и в Firefox ...