Верстка \ CSS 3

Нестандартные чекбоксы и радиокнопки на CSS3

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

Продолжить чтение

Верстка \ CSS 3

:focus-visible и обратная совместимость

От автора: для чего нужен focus visible? Четко видимые стили в состоянии выделения фокусом ввода важны для пользователей, работающих в основном с клавиатуры. Однако эти стили часто могут быть нежелательными, когда они применяются в результате взаимодействия мыши / указателя. Классическим примером этого являются кнопки, которые вызывают определенное действие на странице, например, перемещение кадров карусели. В то время, как нам важно, чтобы пользователь клавиатуры мог видеть, когда фокус ввода находится на кнопке, пользователя мыши могут ввести в заблуждение не те изменения стилей кнопки после клика кнопки, которых он ожидал. Он может задаться вопросом, почему стили «застревают»? Или, возможно, состояние / функционал кнопки каким-то образом изменились?

Продолжить чтение

Верстка \ CSS 3

Еще одна подборка интересных фактов о макетах CSS Grid

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

Продолжить чтение

Верстка \ CSS 3

Как избавиться от префикса «grid-» в свойствах для разделителей CSS Grid Layout

От автора: в начале года я работал над свойствами для разделителей CSS Grid Layout без префиксов. Свойства были названы grid-column-gap, grid-row-gap и сокращенная версия grid-gap. CSS Working Group (CSSWG) решила удалить grid-префикс CSS из этих свойств тем летом, чтобы их можно было расширить и использовать в других моделях макетирования типа Flexbox.

Продолжить чтение

Верстка \ CSS 3

Решено с помощью CSS! Колоризация SVG фонов

От автора: CSS становится мощнее. Благодаря функциям типа CSS Grid и пользовательским свойствам (или CSS переменным), мы видим, как развиваются действительно креативные решения. Мы до сих пор не знаем всех возможностей CSS, которые могут упростить написание UI, и это удивительно!

Продолжить чтение

Верстка \ CSS 3

Понятие логических свойств и значений

От автора: раньше CSS привязывался к физическим измерениям и направлениям, физически отображая элементы слева, справа, сверху и снизу. Мы использовали float left и right, свойства сдвига top, left, bottom и right. Задавали margin, padding и рамки через margin-top и padding-left. Эти физические свойства и значения имеют смысл, если вы работаете в горизонтальной плоскости, сверху вниз и режиме письма слева направо.

Продолжить чтение

Верстка \ CSS 3

Супер-силы макетов с использованием переменных CSS + CSS Grid

От автора: мы используем CSS Grid в процессе разработки на Mud уже в течение нескольких месяцев, и мне очень нравится гибкость, которую это дает мне при компоновке. До сих пор мы обходились без реального решения под Веб — мы пытались придумать что-то с помощью float и flexbox. Но теперь, честно говоря, я не могу представить себе жизнь без Grid!

Продолжить чтение