CSS переменные и @supports


Содержание материала:

Css переменные : описание и примеры использования.

Здравствуйте друзья, на связи Шевченко Вячеслав, и сегодня у меня не большой, но интересный пост. Вы когда нибудь сталкивались с проблемой разрастания проекта, и организацией css кода? Думаю ответ однозначно ДА, если НЕТ, то у вас все впереди.

Когда проект начинает расти, его CSS обычно становится громоздким, и тяжело поддерживаемым. Чтобы решить эту проблему, разработчики CSS ввели переменные, они уже поддерживаются популярными браузерами. Это дает возможность легко работать с повторениями стилей.

Знающие и бывалые верстальщики, могут возразить и сказать «Переменные уже давно в SASS и LESS!!». Да, я не спорю, но это препроцессоры и они нуждаются в компиляции перед использованием, а нативные переменные CSS работают прямо в браузере! Разве это не круто?

Видео урок

Объявление и использование CSS переменных

Переменные в файле используют ту же область видимости, что и другие правила в CSS. Конечно удобнее всего, когда они глобальные. Для этого нужно объявлять их внутри псевдо-класса :root .

Начинаем работать с переменными CSS — часть 1

Краткое руководство для понимания что такое переменные в CSS и как они делают CSS более мощным и реактивным.

CSS-переменные, которые также называют пользовательскими свойствами (CSS Custom Properties) становятся довольно популярными на данный момент, благодаря своим широким возможностям и реактивному характеру. После прочтения этой заметки у вас появится понимание того, как их можно использовать в повседневной работе.

Эта заметка предназначена для front-end разработчиков среднего уровня (или дизайнеров, способных писать код). Предполагается, что у вы знакомы с CSS, HTML и немного с JavaScript.

Что такое переменные (или CSS переменные)?

В целом, переменная – это контейнер, в котором хранится некоторое значение, к переменной можно обращаться в блоке кода и получать ее значение. В CSS, как в языках программирования, переменные ведут себя аналогично.

Общий синтаксис для переменных CSS показан ниже:

Объявление переменной начинается с символов — — префикса, за которым следует имя переменной. Переменная будет доступна в .CSS-файле или .HTML-файле (при использовании инлайн-стилей) совместно с функцией var . Например, переменная с именем “color” и значением “blue” может быть объявлена как —color: blue и может быть доступна как var(—color) .

Не путайте с синтаксисом JavaScript. В JavaScript var используется для объявления переменных, а в CSS var используется для доступа к значению переменной.

Давайте рассмотрим пример, представленный ниже:

Мы объявили 2 переменные с именами —color-dark и —color-bright . Далее мы обращаемся к ним и получаем значение обеих переменных в классах bright и dark . CSS-переменные можно использовать следующим образом: вместо того, чтобы указывать одни и те же значения CSS-свойств многократно, мы просто ссылаемся на переменные.

Какие проблемы возникают с переменные CSS или пользовательскими свойствами?

Давайте рассмотрим преимущества использования CSS-переменных.

  • Масштабируемый и читаемый код
    При использовании традиционного CSS, мы довольно часто повторяем значения свойств. Это делает наш код не только «топорным», но и трудночитаемым, а также его становится сложно поддерживать при увеличении его объема.
  • Реактивные элементы
    Однажды нам может понадобиться изменить значение переменной, в тот же момент соответствующие HTML-элементы обновятся и поменяют свой внешний вид в соответствии с новыми значениями переменной, что мы увидим в браузере.
  • Ускорение рабочего процесса
    CSS переменные позволяют немного ускорить процесс разработки. Если значение свойства требуется поменять, нам будет нужно всего лишь изменить значение переменной. На это уйдет меньше времени, чем на поиск в коде каждого упоминания свойства и его замену.
  • Продвинутые математические расчеты
    Вы можете выполнять базовые вычисления с использованием основных математических операторов в CSS, используя функцию calc() . Функции calc() может быть передан только 1 параметр с двумя операндами и одним оператором, результат выполнения становится значением свойства CSS. Поддерживаются основные математические операции: сложение(+) , вычитание(-), умножение(*) и деление (/).

Общий синтаксис функции calc() : calc(Операнд1 [Оператор] Операнд2);

Хорошо, что операндом функции calc() может быть CSS переменная. Это делает функцию calc() еще более динамичной и полезной.

Переменные CSS могут использоваться только в современных браузерах и если вы ведете разработку с учетом устаревших браузеров, вам следует отказаться от использования CSS-переменных.

Но почему нет? В наши дни люди отправляют экспедицию на Марс, так что по крайней мере вы должны быть тем либералом работы с кодом.

Надеюсь, что теперь у вас есть общее понимание того, как работают CSS-переменные (пользовательские свойства) и это сделает ваш рабочий процесс масштабируемым и более продуктивным.

Возможности CSS, которые вам понравятся в 2015

CSS постоянно развивается, и с началом года самое время взглянуть на несколько новых функций, с которыми вы сможете экспериментировать.

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

CSS-селекторы четвёртой версии

Спецификация селекторов третьей версии хорошо реализована в браузерах и предоставляет нам такие полезные селекторы, как :nth-child . Четвёртая же версия даёт нам гораздо больше способов разметить контент при помощи CSS.

Отрицающий псевдокласс not

Селектор :not появился в третьей версии, но в четвёртой он был обновлён. В третьей спецификации вы можете передать селектор, к которому не должны применяться CSS-свойства. Для того чтобы весь текст, кроме текста с классом .intro стал полужирным, вы можете использовать следующее правило.

В четвёртой версии вы можете передавать список селекторов через запятую.

Псевдокласс has

Этот псевдокласс принимает список селекторов в качестве аргумента и CSS-свойства будут применяться, если любой из переданного списка селекторов найдёт подходящий элемент. Лучше посмотреть на примере. Здесь каждому элементу a , который содержит в себе изображение, будет нарисована чёрная рамка:

Топ-пост этого месяца:  Масслукинг что это и как настроить массовый просмотр сторис в Инстаграм

Во втором примере я совмещаю :has и :not и выбираю только те элементы li , которые не содержат элемент p :

Псевдокласс совпадения matches

Этот псевдокласс означает, что мы можем применить правила к группе селекторов, например:

Чтобы проверить, поддерживает ли ваш браузер эти селекторы, вы можете использовать css4-selectors.com. Там же вы можете узнать больше о новых селекторах.

Режимы наложения в CSS

Если вы знакомы с режимами наложения в фотошопе, тогда, возможно, вас заинтересует спецификация смешивания и наложения. Эта спецификация позволяет нам применять режимы наложения к фонам и любым HTML-элементам прямо в браузере.

В приведённом ниже CSS у меня есть контейнер с фоновым изображением. Добавляя цвет фона и устанавливая background-blend-mode в значения hue и multiply , я могу применить интересный эффект к изображениям.

Свойство mix-blend-mode позволяет наложить текст поверх изображения. В примере ниже у меня есть заголовок h1 и затем в .box2 я устанавливаю mix-blend-mode: screen .

Режимы наложения в CSS на удивление хорошо поддерживаются современными браузерами, за исключением Internet Explorer. background-blend-mode и mix-blend-mode доступны в Safari и Firefox, в качестве экспериментальной опции в Opera и Chrome. При осторожном использовании это как раз тот вид спецификации, с которым можно поиграться, чтобы усовершенствовать ваш дизайн, при условии, что будет запасной вариант для браузеров не поддерживающих эту возможность.

Если вам требуется более полная поддержка для старых браузеров и вы не уверены, что стоит использовать режимы наложения в продакшене, не забывайте — их можно использовать на этапе разработки, чтобы избежать работы с фотошопом. А когда вы получите итоговые изображения, создайте для продакшена картинки в графическом редакторе, заменив CSS-эффекты.

Узнайте больше об использовании режимов наложения в статье на CSS Tricks, на сайте Adobe и Dev Opera.

Функция calc

Функция calc() является частью модуля CSS-значений и единиц измерения третьей версии. Она даёт возможность выполнять математические вычисления прямо в CSS.

В качестве простого примера можно использовать calc() для расположения фонового изображения относительно нижнего правого угла элемента. Чтобы расположить на расстоянии 30px от верхнего левого угла, вы должны использовать:

Однако, вы не сможете этого сделать относительно правого нижнего угла, если не знаете размеров контейнера. Функция calc() означает, что вы можете вычесть 30 пикселей из стопроцентной ширины или высоты:

В современных браузерах calc() хорошо поддерживается, хотя использование для вычисления позиции фона в IE9 приводит к падению браузера.

CSS-хитрости и функция calc() — забавная статья об использовании calc() для решения проблем CSS. Вот несколько простых кейсов на CSS Tricks.

CSS-переменные

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

CSS-переменные, описанные в первой версии модуля пользовательские CSS-свойства для каскадных переменных, приносят эту функциональность в CSS.

К сожалению, поддержка браузерами CSS-переменных в настоящее время ограничена Firefox.

Посмотреть больше примеров и узнать подробности вы можете в статье на Mozilla Developer Network.

CSS-исключения

Мы все знакомы с обтеканием в CSS. Самым простым примером может служить обтекание текстом изображения. Но обтекание довольно ограничено, так как плавающий элемент всегда прижимается кверху, и пока мы можем прижимать изображение к левому краю и обтекать его текстом справа и снизу. Не существует способа разместить изображение по центру документа и обтекать его текстом со всех сторон.

Исключения позволяют окружить текстом позиционируемые элементы со всех сторон. Само по себе оно не определяет новый метод позиционирования и может быть использовано только в соединении с другими методами. В приведённом ниже примере я абсолютным позиционированием располагаю элемент, затем определяю его как исключение, задавая свойство wrap-flow и его значение both , после чего текст начинает воспринимать позицию элемента и обтекает его со всех сторон.


Исключения в Internet Explorer

Поддержка браузерами исключений и wrap-flow: both сейчас ограничена IE10+, требующим префикс -ms . Обратите внимание, что исключения до недавнего времени были связаны со спецификацией CSS-фигур, которую я рассмотрю ниже, так что часть информации может пересекаться.

CSS-фигуры

Спецификация по исключениям рассматривает обтекание текстом вокруг прямоугольных объектов. CSS-фигуры предоставляют нам более мощную возможность такую, как обтекание текстом по кривой.

В первой версии спецификации CSS-фигуры определяются новым свойством shape-outside . Оно может быть использовано на плавающем элементе. В примере ниже я использую shape-outside чтобы изогнуть текст вокруг обтекаемого изображения.

CSS-фигуры позволяют нам изогнуть текст вокруг изображения воздушного шара

Фигуры поддерживают Chrome и Safari, это означает, что вы можете начать использовать их для устройств с iOS. Во второй версии спецификации вы сможете придавать форму тексту внутри элементов при помощи свойства shape-inside , а с этим придёт много интересных возможностей.

Вы можете узнать больше о фигурах в статьях (один и два) на A List Apart.

CSS-сетки

Самую интересную тему я оставил напоследок. Я большой фанат появления спецификации по сеткам с момента первой реализации в Internet Explorer 10. CSS-сетки предоставляют нам способ создавать при помощи CSS структурные сетки и размещать на них наш дизайн.

Сетки дают нам метод для создания структуры, которая не отличается от использования таблиц для разметки. Однако, описывая сетки в CSS, а не в HTML, мы можем создавать макеты, которые могут быть изменены при помощи медиавыражений в зависимости от контекста. Это позволяет разделить порядок элементов в коде от их визуального представления. Для дизайнеров это означает, что вы можете свободно изменять позицию элементов на странице для лучшего представления макета на разных контрольных точках, и не нужно идти на компромисс между разумно структурированным документом и вашим адаптивным дизайном. В отличие от макетов, основанных на HTML-таблицах, вы можете наслаивать элементы в сетках. Так что, если потребуется, один элемент может перекрывать другой.

В примере ниже мы объявляем сеткой элемент с классом .wrapper . Он содержит три колонки с шириной в 100px , отступом в 10px между ними и три строки. Мы располагаем контейнеры внутри этой сетки, используя номера линий до и после, выше и ниже той области, где мы хотим расположить элемент.

Пример сетки в Chrome

Поддержка браузерами последней спецификации сеток ограничена Chrome с отметкой «экспериментальная возможность». Существует приличная реализация начальной версии спецификации в Internet Explorer 10 и выше.

Узнать больше о сетках вы можете на моём сайте Grid by Example, где можно увидеть несколько примеров сеток, которые работают в Chrome с включёнными экспериментальными возможностями. Я также делал доклад на CSS Conf EU по сеткам и вы можете посмотреть это видео на YouTube.

Топ-пост этого месяца:  Ограничение SQL not null для установки запрета на неизвестное значение в столбце таблицы

У вас есть любимая новая спецификация, не рассмотренная здесь?

Надеюсь, вам понравился этот краткий обзор некоторых новых возможностей CSS. Используйте ссылки на указанные ресурсы, чтобы узнать подробнее о том, что вас заинтересовало. Напишите мне в комментариях, если у вас есть любимая развивающаяся CSS-особенность, о которой, по вашему мнению, люди должны узнать, или дополнительные ресурсы и примеры для любой из возможностей, описанной мной.

CSS переменные и @supports

Посмотрите уроки по html5 и css3:
https://webformyself.com/minikurs/html5/

В данном уроке мы разберем два нововведения в css, которые уже можно использовать и которые упрощают нативную разработку.

В данном уроке мы поговорим про css переменные, которые поддерживаются почти во всех браузерах, и которые очень облегчают жизнь, путем создания единой конфигурации.

Так же мы поговорим про один удобный флаг, с помощью которого вы сможете определить, работает ли в текущем браузере, и если да, то использовать его.

Дополнительные статьи

Переменные в CSS

Как и в языках программирования, в CSS можно определять переменные. Переменные в CSS могут хранить стандартные значения, которые можно присвоить, обычным свойствам CSS, например, цвет фона, цвет шрифта, высоту шрифта, ширину и высоту элементов и так далее. Затем их можно многократно использовать в различных частях определения стилей.

Стоит отметить, что хотя часто используется термин «переменные» (css variables), официально они называются custom properties (кастомные или настраиваемые свойства).

Определение переменных CSS должно начинаться с префикса — , например, —my-color . Они могут быть определены для любого элемента. Например:

Здесь в коде CSS для элемента div определены две переменныx: —text-color и —text-size

С помощью выражения var() мы можем ссылаться на эти переменные в любой части кода CSS:

В итоге первый блок получит высоту шрифта из —text-size, второй блок получит цвет шрифта из —text-color, а третий блок получит оба этих компонента.

Если нам потребуется изменить цвет текста, достаточно будет изменить значение переменной.

Подобные переменные можно определить для любого элемента. При этом они наследуется дочерними элементами. Так, в примере выше мы видим, что вложенный элемент параграфа получает стили от родительского div.

Но если бы параграф находился бы вне блока div:

Тогда бы значения из переменных к нему бы не применялись:

Если же необходимо, чтобы переменные могли бы использоваться глобально для всех элементов, тогда их определяют для элемента :root

Резервные значения

При определения переменных могут содержать какие-нибудь ошибки, например, переменная не определена (вообще не определена или в ее названии опечатка). В этом случае мы можем указать при применении переменной резервные значения, которые бдут применяться в случае, если значение переменной некорректно.

Второй параметр в функции var() позволяет задать резервное значение. Это может быть как точное значение, так и опять же значение другой переменной:

Для второй переменной можно также определить резервное значение, если она некорректна:

CSS переменные и @supports

Всем привет! При грамотном использовании переменных css, в значительной мере можно сократить код стилей.

Рассмотрим создание переменной:

здесь мы через псевдоселектор root создали переменную —white-color со значением black. Отмечу что перед названием переменной всегда должно идти два девиза, а само название переменной остается на ваше усмотрение.

Мы можем создать сколько угодно переменных.

Теперь давайте воспользуемся нашей переменной:

как видите переменная вызывается с помощью функции var(). В данном примере мы через переменную —black-color фону тега body задали черный цвет. Данную переменную мы можем использовать в любом месте и свойстве проекта:

В чем же фишка использования переменных по сравнению со статическим присвоением значений свойств?

А в том что, если мы изменим значение переменной, то изменения вступят везде где мы ее использовали. Пример:

здесь у нас изначально с помощью переменной —black-color задан черный цвет фону body и тексту button. Затем при изменении разрешения мы через медиа-запрос изменили значение переменной на red, то есть красный. И цвет фона и текста у наших элементов стал красным. Если мы хотим поменять значение переменной у определенного элемента, к примеру текста кнопки нам достаточно прописать так:

значение переменной будет изменено только для кнопок button.

Конечно использование переменных не должно становится самоцелью при проектировании всех проектов. Но в определенных моментах при грамотной подходе данное решение можем быть вполне актуально. Поэтому пользуйтесь с умом!

На этом у меня на сегодня все. Я желаю вам успехов и удачи! Пока!

Переменные в CSS

Переменные в CSS или на английском CSS Custom Properties, что в переводе звучит, как пользовательские свойства CSS, — это специальные css-свойства, которые позволяют изменять значения любых других css-свойств динамически. CSS переременные подобны переменным в JavaScript. Сейчас css-переменные поддерживаются всеми современными браузерами. Можно сказать, что их появление было продиктовано еще препроцессорами, и то, что они были добавлены в спецификацию CSS — большой шаг вперед.

Переменные в CSS, или пользовательские свойства, имеют огромный потенциал для изменения кода и структуры CSS. Давайте рассмотрим стратегии получения максимальной пользы от переменных CSS.

Схожесть css-переменных с переменными в препроцессорах

Пользовательские свойства немного похожи на переменные в препроцессорах, но имеют некоторые важные отличия. Первое и самое очевидное отличие — это синтаксис.

В синтаксисе SASS (SCSS) мы используем символ доллара для обозначения переменной:

Для Less нужно использовать символ @ :

Однако, препроцессорные переменные имеют некоторые ограничения:

Поэтому стоит изучить, что такое переменные CSS, и затем использовать их в коде.


CSS-переменные имеют синтаксис, похожий на переменные в SASS или Less, и используют префикс в виде 2-х дефисов:

Значение свойства может быть любым допустимым значением CSS: цветом, строкой, значением макета, даже выражением.

Чтобы добавить использование переменной в код, необходимо записать так:

Еще несколько вариантов назначения css-переменных. Первый из них подразумевает использование глобальной видимости переменных, которые назначаются для :root :

Что касается элемента :root , то в HTML это то же самое, что и корневой тег html , но с более высокой специфичностью.

Для использования CSS-переменных необходимо указать в соответствующем свойстве функцию var() с нужной переменной в скобках:

Вы можете объявлять переменные внутри любого элемента. Тогда они будут привязаны к этому элементу и его дочерним элементам. Использовать переменные можно следующим образом:

В примере ниже мы используем переменную из класса .box в классе .my-test , в который вложен .box . И не увидим, что эта переменная не применилась, т.к. для родительского .my-test она не видна.

Результат работы переменной не виден:

На скриншоте видно, что в свойстве переменная выделена серым цветом. Это значит, что она не была найдена и использована браузером.

Для вложенного элемента цвет переменной в инспекторе свойств другой — и мы видим на странице, что к нему добавилась точечная рамка.

Топ-пост этого месяца:  Урок 4. Изображения

Особенности объявления css-переменных и их использования

Функция var() — это удобный способ предоставить значение по умолчанию. Вы можете сделать это, если не уверены, определено ли настраиваемое свойство и хотите ли вы указать значение, которое будет использоваться в качестве резерва. Это можно сделать легко, передав второй параметр функции:

Кроме того, вы можете повторно использовать другие переменные для объявления новых:

Арифметические операции: +, -, * и функция calc()

Поскольку мы привыкли к препроцессорам и другим языкам, мы хотим иметь возможность использовать базовые операторы при работе с переменными. Для этого CSS предоставляет функцию calc() , которая заставляет браузер пересчитать выражение после внесения каких-либо изменений в значение настраиваемого свойства:

Вы можете столкнуться с проблемами, если попытаетесь использовать значение без единицы. В этой ситуации вам не обойтись без функции calc() — она ваш друг, потому что без нее код не будет работать:

Рассмотрим пример, в котором мы можем изменить размер шрифта кнопок, исходя из одной переменной и используя функцию calc() для расчета других величин на основе нашей единственной переменной:

Попробуйте самостоятельно изменить шрифт, изменяя значения в CSS.

Области видимости и наследование

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

Мы знаем, что, например, с переменными JavaScript, которые определяются ключевым словом var , область действия ограничена функциями.

Мы имеем аналогичную ситуацию с let и const , но они являются локальными переменными масштаба блока.

Замыкание в JavaScript — это функция, которая имеет доступ к внешним (охватывающим) функциям — цепочке областей. Замыкание имеет три цепочки областей и имеет доступ к следующему:

  • его собственная область видимости (т. е. переменные, определенные между его фигурными скобками)
  • переменные внешней функции,
  • глобальные переменные.

История с препроцессорами схожа. Давайте используем SASS в качестве примера, потому что это, вероятно, самый популярный препроцессор сегодня. С SASS мы имеем два типа переменных: локальные и глобальные.

Глобальная переменная может быть объявлена ​​вне любого селектора или конструкции (например, как mixin). В противном случае переменная будет локальной.

Любые вложенные блоки кода могут обращаться к окружающим переменным (как в JavaScript).

Это означает, что в SASS области действия переменной полностью зависят от структуры кода.

Однако пользовательские свойства CSS наследуются по умолчанию, и, как и другие свойства CSS, они каскадные.

Вы также не можете иметь глобальную переменную, которая объявляет пользовательское свойство вне селектора — это не допустимый CSS. Глобальная область действия для пользовательских свойств CSS на самом деле является корневой областью действия, после чего свойство доступно глобально.

Динамическое изменение css-переменных

Давайте использовать наши знания синтаксиса и адаптировать пример SASS к HTML и CSS. Мы создадим демонстрационную версию, используя собственные пользовательские свойства CSS. Во-первых, HTML:

CSS переменные и @supports

Посмотрите уроки по html5 и css3:
webformyself.com/minikurs/html5/
В данном уроке мы разберем два нововведения в css, которые уже можно использовать и которые упрощают нативную разработку.

В данном уроке мы поговорим про css переменные, которые поддерживаются почти во всех браузерах, и которые очень облегчают жизнь, путем создания единой конфигурации.
Так же мы поговорим про один удобный флаг, с помощью которого вы сможете определить, работает ли в текущем браузере, и если да, то использовать его.

Коментари

Стоп, а он в курсе, что @supports в IE не поддерживается?

преди 10 месеца

Подскажите пожалуйста можно ли сейчас использовать в реальных проектах гриды или еще пока рано? Будет ли сайт отображаться нормально у всех. Я тут нашел, что может помочь @supports . Но все же беспокоюсь не риск ли использование гридов в реальных проектах? Смотрел на can I use. Там указано что на 80% поддержка браузера и @supports 91%. вобщем-то хотел узнать. Кто то применял ли гриды в реальных проектах? Или может сталкивался в рабочих проектах? Можно использовать или не стоит?

Хм, а когда будет 99%, но без поддержки IE, наверно, тоже нельзя. Зависит от браузерной поддержки. У заказчика спросите, если хочет поддержку старых браузеров пусть доплачивает

для ознакомления конечно интересно, но все равно SASS со своими переменными и миксинами больше по душе.

А почему бы не использовать переменные из препроцессора? Ведь и так все используют препроцессор. А там синтаксис переменных проще

Владимир Кулаксизов, не за что! Скоро будет много интересного материала)

Кто знает, может в будущем CSS4 в этом и будет толк, но мне проще использовать SASS с синтаксисом sass. Я уже настолько к этому привык, что вряд ли буду кодить в css. Все эти фигурные скобки и точки с запятой забирают уйму времени. Да и читабельность лучше.

Vladilen Minin а в чём тогда смысл. Остальные фичи уже в какой-то мере есть и в css. А множественная вложенность со скобочками путает. Со скобочками не получится так просто вывернуть или обернуть блок, сдвинуть уровень вложенности, перенести стили. Лишие действия на изменение скобок и есть риск ошибиться. Опять же нельзя миксины коротко писать. Например, +m(380), можно вставлять после каждого свойства миксин для медиазапроса и прописывать это же свойство для ширины 380. Можно хоть по 10 медиазапросов на 1 класс. Читаемо, супер. А mq_packer потом всё разрулит

Вот этим как раз и занимаюсь )) Привыкать сложно, но когда-то я и к sass привыкал. Привыкну и к pug

CSS переменные и @supports

Смотреть видео CSS переменные и @supports онлайн, скачать на мобильный.

85 | 3
WebForMySelf | 1 год. назад

Посмотрите уроки по html5 и css3:
https://webformyself.com/minikurs/html5/

В данном уроке мы разберем два нововведения в css, которые уже можно использовать и которые упрощают нативную разработку.

В данном уроке мы поговорим про css переменные, которые поддерживаются почти во всех браузерах, и которые очень облегчают жизнь, путем создания единой конфигурации.

Так же мы поговорим про один удобный флаг, с помощью которого вы сможете определить, работает ли в текущем браузере, и если да, то использовать его.

CSS переменные и @supports

Смотреть видео CSS переменные и @supports онлайн, скачать на мобильный.

85 | 3
WebForMySelf | 1 год. назад

Посмотрите уроки по html5 и css3:
https://webformyself.com/minikurs/html5/

В данном уроке мы разберем два нововведения в css, которые уже можно использовать и которые упрощают нативную разработку.

В данном уроке мы поговорим про css переменные, которые поддерживаются почти во всех браузерах, и которые очень облегчают жизнь, путем создания единой конфигурации.

Так же мы поговорим про один удобный флаг, с помощью которого вы сможете определить, работает ли в текущем браузере, и если да, то использовать его.

Добавить комментарий