Верстка \ 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

Фокусировка на стилях focus CSS

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

Читать далее

Верстка \ 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!

Читать далее

Верстка \ CSS 3

Как работает в CSS display: contents;

От автора: как я часто говорю, каждый элемент в дереве документа представляет собой прямоугольный блок. В общем, этот «прямоугольный блок» состоит из двух разделов. Во-первых, у нас есть сам блок, который состоит из областей границы, отступов и полей. Во-вторых, у нас есть содержимое блока; область содержимого. Для работы с ней нам пригодится display contents CSS.

Читать далее

Верстка \ CSS 3

CSS в эпоху React: как мы променяли каскадирование на согласованность

От автора: для сотни инженеров, разработчиков и дизайнеров, работающих над Yelp, обеспечение визуальной согласованности — это сложная задача. Мы перенесли веб-компоненты из Yelp Cheetah в React, чтобы повысить производительность дизайнеров и разработчиков, обеспечивая при этом визуальную согласованность в веб-приложении. И создали Lemon Reset — пакет, содержащий согласованные, кросс-браузерные теги React DOM, оснащенные модулями CSS.

Читать далее