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

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

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

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

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

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

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

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

От автора: когда я увидел статью Криса по notched boxes, я вспомнил, что не так давно у меня была задача по CSS дизайну в кроссбраузерной форме, как показано ниже.

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

От автора: например, вы видели необычный проект Линн Фишер Единственный div? Мало того, что вся эта графика рисуется только в HTML и CSS, вся она (как вы уже догадались) создана с помощью одного div.

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

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

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

От автора: не все просматривают интернет с помощью мыши. Если вы читаете эту статью на смартфоне, вот вам и пример! Стоит отметить, что люди используют и другие формы ввода. Этим формам нужны стили focus CSS.

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

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

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

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

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