Пользовательские CSS-свойства – ежедневное использование

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

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот — при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

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

Прописать стили в самом документе, используя тег

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.

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

Просто, не правда ли?

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

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

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

  1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
    Пример использования !important:
  2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
  3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
  4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
  5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
    В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

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

И т.д. по логической цепочке.

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

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

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

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

  1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
  2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Пользовательский CSS в конструкторе сайтов

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

Добавление пользовательских CSS к элементам

1. Нажмите кнопку свойств на необходимом элементе (виджет, колонка, секция), чтобы отобразить свойства в панели свойств слева.

2. Перейдите на вкладку Расширенные, далее в группу свойств Пользовательские CSS

3. Добавьте ваш CSS код в поле редактора CSS

4. Для примера добавим следующий код, который добавить красный фон для выбранного элемента.

элемент мгновенно применит указанные стили.

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

Используйте «selector» для указания родительского элемента. Примеры:
selector // Для основного элемента
selector .child-element // Для дочернего элемента
.my-class // Или используйте любой селектор

Как задать необходимы класс элементу?

1. Нажмите кнопку свойств на необходимом элементе (виджет, колонка, секция), чтобы отобразить свойства в панели свойств слева.

2. Перейдите на вкладку Расширенные, далее в поле CSS ID или CSS класс введите необходимые данные, например класс для секции необходимо ввести в поле CSS класс в виде my-class т.е просто без точки.

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

Редактирование стилей на странице

1. В панеле свойств перейдите к настройкам документа нажав на кнопку Настройки (рис справа)

2. Далее необходимо перейти на вкладку Стили

3. В группе свойств Пользовательские CSS вы можете написать свой код css который вам необходим.

Насколько важен порядок свойств в CSS?

Хотелось быть знать, есть разница между порядком свойств:

и если напишу вот так:

Возможно существуют правила «хорошего тона» в расположении CSS-свойств, наподобие как в JavaSctipt — отступы, именования констант, переменных и т.д.

  • Вопрос задан более трёх лет назад
  • 3957 просмотров

Общая логика сортировки: «от общего — к локальному и менее важному». Рекомендуется располагать свойства в следующем порядке:

1. Сначала положение элемента относительно других:
position, left/right/top/bottom, float, clear, z-index.
2. Затем размеры и отступы:
width, height, margin, padding…
3. Рамка border, она частично относится к размерам.
4. Общее оформление содержимого:
list-style-type, overflow…
5. Цветовое и стилевое оформление:
background, color, font…

Использование CSS

Каскадные таблицы стилей (CSS) представляют собой язык описания внешнего вида Web-документов.

Преимущества каскадных таблиц стилей (CSS)

Неодобрению подверглось большинство элементов форматирования HTML версии 4.0, и Консорциум W3C запретил их использовать. Web-дизайнерам стали рекомендовать к использованию CSS (Cascading Style Sheets — каскадные таблицы стилей).

Главные преимущества которых заключаются в:

  1. Более чистом коде, который:
    • легко поддерживается;
    • быстрее загружается;
    • лучше оптимизирован для поисковых систем.
  2. Модульном коде, для которого характерны:
    • возможность применения правил стиля ко множеству страниц;
    • единообразный дизайн;
    • код легче поддерживается.
  3. Силе дизайна, включающей в себя точность контроля (позиционирование, размер, поля и др.).
  4. Разделении труда.
  5. Лучшей доступности, для которой характерно:
    • использование тегов по назначению;
    • отсутствие необходимости в позиционировании невидимых картинок;
    • возможность переписывания пользователями стилевых таблиц автора.

Попробуй обратиться за помощью к преподавателям

Правила CSS

Этими правилами определяются стили элементов или групп элементов.

В правилах используется следующий синтаксис:

Все пары, указанные в фигурных скобках, представляют собой декларации. Селектором определяются элементы, на которые воздействуют эти правила. Приведем пример правила:

Этим правилом определяется цвет текста во всех параграфах (темно-зеленый), его размер (10 точек), шрифт текста (Verdana).

Комментарии в CSS

В CSS они начинаются символом «$/*$» и заканчиваются «$*/$». Например:

color:red; $/*$ Текст во всех параграфах должен быть красного цвета $*/$

CSS применяют в HTML или XHTML, используя методы связывания (linking), внедрения (embedding) и встраивания (inlining).

В связанном методе таблицы стилей создаются и хранятся в отдельных файлах с расширением .css . Их называют связанными (внешними) стилями.

Задай вопрос специалистам и получи
ответ уже через 15 минут!

Во внедрённом методе CSS хранятся в виде HTML-страниц в теге между тегами и представляют собой внедрённые (внутренние) стили.

Встроенный метод CSS хранится непосредственно в атрибуте стиля HTML и называется встроенным стилем, например:

Наиболее используемым является первый метод.

Связывание

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

Тег link состоит из 3 атрибутов:

  • rel сообщает браузеру тип и цель ссылки;
  • type сообщает браузеру MIME-тип подключаемого файла;
  • href сообщает браузеру URL для нахождения файла (в данном примере URL относительный, а может быть и абсолютным).

В «style.css» содержится одно правило, указывающее на то, что текст в параграфе должен отображаться полужирным шрифтом:

Встраивание

Пример встраивания правила приведен в теге:

Внедрение

Внедренные (внутренние) CSS используются в динамически генерируемых страницах, однако это использование рекомендуют сделать минимальным.

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

CSS находится в элементе . Атрибутом type=»text/css» браузеру сообщается, что внедрённый стиль написан на CSS и должен быть использован для форматирования страницы. А стилевое правило p указывает браузеру выполнить выделение всего текста в любом параграфе полужирным шрифтом.

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

Сокращение времени загрузки веб-страниц с помощью CSS

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

  1. Нужно избегать по возможности использование таблиц при разметке страницы.
    • Приведем причины, по которым лучше использовать CSS для разметки страниц:
    • браузерами анализируются таблицы дважды: первый раз для оценки структуры таблицы, а второй — для определения их содержимого;
    • таблицы отображаются сразу полностью, а не по мере загрузки;
    • в таблицах используются прозрачные картинки для определения ширины колонок и т.п.;
    • для CSS характерен гораздо меньший код, который выносится во внешний файл, загружаемый всего однажды и хранящийся в кэш-памяти браузера;
    • CSS позволяет осуществлять контроль очередности загрузки элементов страницы.
  2. Не нужно использовать картинки при отображении текста. Большинство кнопок и надписей отображаются с помощью CSS.
  3. Загрузку картинок, в том числе и фоновых изображений, лучше осуществлять с помощью CSS. К примеру, для отображения картинки размером 200х100, можно использовать следующий код:

, которому соответствует код CSS: pretty-image

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

Используйте контекстные стили. Вместо присваивания класса каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:

Данный код укажет браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.

  • Используйте сокращения при указании шрифтов, границ, фона.
  • Минимизируйте пробелы, переводы строк и комментарии. Каждый лишний символ будет увеличивать размер страниц. Поэтому необходимо как можно меньше нажимать клавиши Enter и Tab в процессе вёрстки. А также важно не забывать про объединение CSS-стилей.
  • Важно использование относительных ссылок, так как абсолютные занимают намного больше места и создают дополнительную нагрузку на браузер.
  • Не нужно увлекаться использованием META-тегов.
  • Необходимо выносить CSS и JavaScript в отдельные файлы.
  • Нужно ставить знак «/» в конце ссылок на каталоги.
  • Этот знак сразу дает понять, что указанная ссылка ведет в каталог, и необходимости в дополнительной проверке нет.

    Так и не нашли ответ
    на свой вопрос?

    Просто напиши с чем тебе
    нужна помощь

    Использование переменных в CSS

    На этой странице

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

    CSS переменные (пользовательские CSS-свойства) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации ( например. —main-color: black; ) и доступны через функцию var() ( например. color: var(—main-color); ) .

    Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись —main-text-color более понятна, чем #00ff00 , особенно если этот же цвет используется и в другом контексте.

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

    Основное использование

    Note: В более ранней спецификации префикс для переменных был var- , но позже был изменен на — . Firefox 31 и выше следуют новой спецификации.(баг 985838)

    Первый шаг с CSS Переменными

    Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

    Мы применим его к этому HTML:

    что приводит нас к этому:

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

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

    Наследование переменных в CSS и возвращаемые значения

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

    со следующим CSS:

    В результате var(—test) будет:

    • для элемента с классом : 10px
    • для элемента с классом : 2em
    • для элемента с классом : 10px (унаследовано от родителя)
    • для элемента с классом : недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.

    Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.

    Первый аргумент функции это имя пользовательского свойства. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда пользовательское свойство является не действительным. Например:

    В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) опеределит red, blue как замещающее значение (от первой запятой и до конца определения функции)

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

    Обоснованность и полезность

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

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

    Совместимость с браузерами

    Особенность Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Базовая поддержка (Да) -webkit
    33.0
    Нет 34.0 [2]
    49.0
    (Да) 29 (29) [3]
    31 (31)
    Нет 36.0 9.1
    Особенность Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
    Базовая поддержка Нет 49.0 (Да) 29 (29) ? ? 9.1 49.0

    [1] Chrome initially implemented this feature using a different syntax, which required to prefix custom property names with -webkit-var- to define them. They could then be used unprefixed within a -webkit-var() function. Additionally, the implementation was hidden behind the Enable experimental WebKit features flag under chrome://flags , later renamed to Enable experimental Web Platform features.

    [2] В Chrome 34.0 убрали эту функцию из-за проблем с производительностью.

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

    Из рабочей группы CSS post:

    Пользовательские свойства используются не только для переменных [. ]

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

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

    Обратите внимание, что контекст текста, который вы цитируете, является CSSWG, оправдывающим, почему —foo и var(—foo) используются вместо $foo . Я предполагаю, что их высказывание «Пользовательские свойства используются не только для переменных» означает тот факт, что синтаксис синтаксиса —foo установлен в других местах, используемых для других пользовательских вещей, таких как пользовательские медиа-запросы, которые были первоначально в MQ4 и теперь находятся в MQ5. Ясно, что это не каскадные переменные, потому что медиа-запросы не каскадируются (их вложенные правила делают). (Хотя, если это так, «Пользовательские свойства» должны были быть чем-то другим, но, скорее всего, CSSWG не думал о надлежащем коллективном имени для этих вещей.)

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

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

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

    Возможно, вам интересно, почему что-то подобное не может быть реализовано в CSS. Рассмотрим:

    Если бы мы предложили псевдокласс для сопоставления элементов на основе их значений свойств CSS, таких как p:prop(—boolean: ‘true’) ,

    • должен ли псевдокласс быть действительным и всегда соответствовать, быть действительным и никогда не соответствовать или недействительным вне CSS?
    • Какова должна быть отраженная стоимость? Указанное значение, вычисленное значение или используемое значение? Обратите внимание, что по историческим причинам даже window.getComputedStyle() не всегда возвращает вычисленные значения.

    циклические зависимости становятся неизбежными:

    Посмотрите внимательно на приведенный выше пример JavaScript, и вы заметите, что он не является надежным. Значение свойства оценивается только один раз, как только документ будет составлен вместе. Измените значение настраиваемого свойства еще раз, и элемент не обновится, чтобы отразить это изменение. Если он прослушал изменения в настраиваемом значении свойства, он сразу же столкнется с одной и той же проблемой циклической зависимости — и, что еще хуже, заблокирует ваш браузер (пока он не заметит и не перехватит бесконечную рекурсию).

    Ответ Qaru answer, который вы связали, на самом деле не так, и говорит о чем-то, немного отличающемся от того, что вы просите. В нем рассказывается о том, как в соответствующей спецификации CSS пользовательские свойства часто описываются как переменные для простоты понимания, несмотря на то, что они отличаются от того, как работают переменные на других языках (но такой тип курса для CSS с CSS это?).

    Переменная часть пользовательских свойств CSS фактически заключается в том, как вы вызываете (или используете) настраиваемое свойство:

    Как вы можете видеть из спецификацию, полностью под названием «Пользовательские свойства CSS для модуля каскадных переменных 1-го уровня», существует только одно использование: вызывается как значение в каскадном элементе с var() . Поэтому немного непонятно, что означает автор этого сообщения в вики, когда говорят, что пользовательские свойства используются не только для переменных. Кроме того, последующие предложения на самом деле не описывают или не резервируют эту заявку, они просто говорят о том, что использование $ вместо — является «странным».

    Возможно, они означают, что вы можете объявить настраиваемое свойство, которое работает только при чтении JavaScript? Или объявите пользовательское свойство в JS, которое затем применяется к CSS. Синтаксис настраиваемых переменных поддерживает уравнения, которые не были бы корректно прочитаны анализаторами CSS, но были бы корректно прочитаны в JavaScript. Однако результатом остается значение свойства элемента, объявленного с помощью var() .

    И чтобы перевести дело в какую-то перспективу, было бы бессмысленно называть их настраиваемыми свойствами, если бы они использовали что-то другое, кроме как в свойстве. Спецификация не упоминает альтернативный способ вызова или использования свойства в CSS или JS без использования var() в каскадной селекторной секции свойств (бит кода между <> ).

    Пользовательские CSS-свойства – ежедневное использование

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

    ZorNet — портал для вебмастера

    Переменные определяются глобально :root псевдоклассе CSS, который соответствует корневому элементу дерева, представляющего документ. Переменные также могут быть ограничены селектором, если они определены в блоке.

    Объявите переменную с —variable-name:

    Повторно используйте переменные по всему документу, используя var(—variable-name) функцию.

    Пользовательские CSS-свойства – ежедневное использование

    193 просмотра

    3 ответа

    163 Репутация автора

    От рабочей группы CSS пост :

    Пользовательские свойства используются не только для переменных [. ]

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

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

    Ответы (3)

    2 плюса

    16399 Репутация автора

    Stack Overflow Ответ вы связаны на самом деле не так, и говорит о чем — то немного отличается от того, что вы просите. В нем говорится о том, как в соответствующей спецификации CSS пользовательские свойства часто описываются как переменные для простоты понимания, несмотря на то, что они работают иначе, чем переменные в других языках (но это своего рода паритет для курса с CSS, не так ли? не так ли?)

    Переменная часть пользовательских свойств CSS на самом деле заключается в том, как вы вызываете (или используете ) пользовательское свойство:

    Как видно из спецификации , полностью озаглавленной «Пользовательские свойства CSS для модуля 1-го уровня каскадных переменных», существует только одно применение: вызываться как значение в каскадном элементе с помощью var() . Поэтому немного неясно, что автор этой вики-публикации имеет в виду, когда говорит, что пользовательские свойства используются не только для переменных. Кроме того, последующие предложения на самом деле не описывают и не подтверждают это утверждение, они просто говорят о том, как использовать $ вместо — «странно».

    Возможно, они означают, что вы можете объявить пользовательское свойство, которое работает только при чтении через JavaScript? Или объявите пользовательское свойство в JS, которое затем будет применено к CSS. Синтаксис пользовательских переменных поддерживает уравнения, которые не будут правильно читаться синтаксическими анализаторами CSS, но будут правильно читаться в JavaScript. Однако результатом по-прежнему является значение свойства элемента, объявленного с помощью var() .

    И если рассматривать это с некоторой точки зрения, не имеет смысла называть их пользовательскими свойствами, если они используют что-то иное, чем свойство. В спецификации не упоминается альтернативный способ вызова или использования свойства в CSS или JS без использования var() в разделе значения свойства каскадного селектора (бит кода между <> ).

    Автор: TylerH Размещён: 16.03.2020 11:18

    2 плюса

    94907 Репутация автора

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

    Другой факт заключается в том, что при выполнении CSS мы будем интуитивно думать об использовании свойств CSS по умолчанию для того, чтобы делать то, что мы хотим, и когда мы сталкиваемся со сложной ситуацией, мы будем пытаться объединить множество свойств, псевдоэлементов и т. Д., Чтобы достичь наши потребности. Но что, если мы думаем по-другому и начинаем использовать собственные свойства для этой цели? Что если вместо сложного кода CSS мы просто напишем собственное свойство и реализуем код JS / jQuery, который сделает эту работу за нас.

    Давайте рассмотрим простой и общий пример. У вас есть элемент, который вы хотите сделать абсолютной позицией, чтобы использовать его как наложение его родительского элемента. С помощью CSS мы сделаем что-то вроде этого:

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

    Я знаю, что первая мысль: «Зачем использовать весь этот код для такой простой вещи, которую мы можем сделать с помощью CSS?» и «Что если свойство изменяется? Что, если родительский объект уже установил позицию?» Это правда, но это очень упрощенный пример. Представьте, что вы создаете библиотеку JS или jQuery, в которой вы предоставляете множество пользовательских свойств для сложных вещей (создаете общие формы CSS, выполняете сложные преобразования, где сложно вычислить значения и т. Д.), И вы предоставляете документацию для каждого из них с соответствующими значениями.

    Это похоже на библиотеку JS / jQuery, которая говорит вам добавить класс к вашему элементу и вызвать одну функцию, а затем у вас есть адаптивный слайдер, интерактивная карта, виджет Twitter и т. Д. Почему бы не сделать то же самое с пользовательскими свойствами? Мы просим людей включить библиотеку и просто написать CSS, а затем увидеть магию.

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

    Давайте возьмем пример flexbox. Перед flexbox, если мы хотим, чтобы внутри контейнера было N чисел div, имеющих одинаковый размер и заполняющих весь контейнер, мы должны написать некоторый сложный код, который мы должны корректировать каждый раз, когда добавляем новый элемент. Теперь с flexbox мы просто установили flex:1 и все! Браузер сделает все сложные вещи для нас.

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

    Таким образом, пользовательские свойства также могут способствовать улучшению CSS.

    3 плюса

    542474 Репутация автора

    Обратите внимание, что контекстом текста, который вы цитируете, является CSSWG, который объясняет, почему —foo и var(—foo) используется вместо $foo . Я предполагаю, что их высказывание «Пользовательские свойства используются не только для переменных» намекает на тот факт, что —foo синтаксис идентификатора должен появляться в других местах, используемых для других пользовательских вещей, таких как пользовательские медиа-запросы, которые изначально были в MQ4. и сейчас в MQ5. Ясно, что это не каскадные переменные, потому что медиа-запросы не каскадные ( их прилагаемые правила делают ). (Хотя, в этом случае, «Пользовательские свойства» должны были быть чем-то другим, но, вероятно, CSSWG еще не думала о правильном собирательном названии для этих вещей.)

    Кто-нибудь когда-нибудь сталкивался с каким-то кодом CSS, где пользовательские свойства использовались не для переменных, а для других?

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

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

    Вы можете быть удивлены, почему что-то подобное не может быть реализовано в CSS. Рассматривать:

    Если бы мы предложили псевдокласс для сопоставления элементов на основе значений их свойств CSS, например p:prop(—boolean: ‘true’) ,

    • должен ли псевдокласс быть действительным и всегда совпадать, быть действительным и никогда не совпадать или быть недействительным вне CSS?
    • какой должна быть отраженная стоимость? Указанное значение, вычисленное значение или используемое значение? Обратите внимание, что по историческим причинам даже window.getComputedStyle() не всегда возвращаются вычисленные значения.

    циклические зависимости становятся неизбежными:

    Посмотрите внимательно на приведенный выше пример JavaScript, и вы заметите, что он не устойчивый. Значение свойства оценивается только один раз, как только документ готовится к сборке. Измените значение пользовательского свойства еще раз, и элемент не обновится сам, чтобы отразить изменение. Если он прослушивает изменения значения настраиваемого свойства, он немедленно сталкивается с той же проблемой циклических зависимостей — и, что еще хуже, блокирует ваш браузер (пока он не заметит и не перехватит бесконечную рекурсию).

    Основные CSS-свойства

    Основные CSS-свойства по категориям

    Схема CSS-кода выглядит следующим образом:

    В этом уроке мы рассмотрим основные CSS-свойства. Для вашего удобства, я разложил их по категориям:

    CSS-свойства влияющие на цвет и фон

    color: — CSS-свойство влияющее на цвет текста : заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
    Примеры кода с использованием CSS-свойства color :
    color: green; — текст должен быть зелёного цвета, в качестве значения задано имя цвета,
    color: #008800; — текст должен быть зелёного цвета, в качестве значения задан шестнадцатеричный код в RGB-формате.

    background-color: — CSS-свойство влияющее на цвет фона заголовка, абзаца, ссылки и т.д.
    В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
    Примеры кода с использованием CSS-свойства background-color :
    background-color: blue; — фон должен быть синего цвета,
    background-color: #0000ff; — фон должен быть синего цвета.

    background-image: — CSS-свойство устанавливающее изображение, в качестве фона фона заголовка, абзаца, ссылки и т.д. Его значением выступает URL (адрес) изображения.
    Примеры кода с использованием CSS-свойства background-image :
    background-image: url(http://имя домена.ru/kartinka.jpg); — фоном должно стать изображение, находящееся по адресу http://имя домена.ru/kartinka.jpg

    CSS-свойства влияющие на шрифт

    font-size: — CSS-свойство влияющее на размер шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
    Примеры кода с использованием CSS-свойства font-size :
    font-size: 17px; — размер шрифта должен быть 17 пикселей,
    font-size: 20pt; — размер шрифта должен быть 20 пунктов.

    font-family: — CSS-свойство устанавливающее имя шрифта для заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя шрифта: Arial , Courier , Impact , Garamond , Georgia , Helvetica , Tahoma , Times (установлен по-умочанию), Verdana и т.д.
    Примеры кода с использованием CSS-свойства font-family :
    font-family: Arial; — имя шрифта должно быть Arial,
    font-family: Impact; — имя шрифта должно Impact.

    font-style: — CSS-свойство влияющее на начертание (стиль) шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: normal , oblique .
    Примеры кода с использованием CSS-свойства font-style :
    font-style: normal; — нормальное начертание шифта,
    font-style: oblique; — наклонное начертание шифта.

    font-weight: — CSS-свойство влияющее на толщину шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступет: normal , bold .
    Примеры кода с использованием CSS-свойства font-weight :
    font-weight: normal; — нормальное начертание шифта,
    font-weight: bold; — жирное начертание шифта.

    CSS-свойства влияющие на текст

    text-align: — CSS-свойство влияющее на выравнивание текста в заголовке, абзаце и других блочных элементах. В качестве его значения выступает: left , center , right , justify .
    Примеры кода с использованием CSS-свойства text-align :
    text-align: left; — выравнивание текста по левому краю (установлен по-умолчанию),
    text-align: center; — выравнивание текста по центру,
    text-align: right; — выравнивание текста по правому краю,
    text-align: justify; — равномерное выравнивание текста по левому и правому краям.

    text-indent: — CSS-свойство влияющее на отступ первой строки (красная строка) текста в закаловке, абзаце и других блочных элементах. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
    Примеры кода с использованием CSS-свойства text-indent :
    text-indent: 20px; — отступ первой строки равен 20 пикселям,
    text-indent: 15pt; — отступ первой строки равен 15 пунктам.

    line-height: — CSS-свойство влияющее на расстояние между строками текста (интерлиньяж) заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: множитель, пиксель (px), процент (%), пункт (pt) и т.д.
    Примеры кода с использованием CSS-свойства text-indent :
    line-height: 35px; — расстояние между строками равно 35 пикселей,
    line-height: 1.5; — расстояние между строками равно 1.5 по множителю (аналогичен 150%).

    letter-spacing: — CSS-свойство влияющее на расстояние между символами в словах заголовка, абзаца ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
    Примеры кода с использованием CSS-свойства letter-spacing :
    letter-spacing: 3px; — расстояние между символами в словах, равно 3 пикселя,
    letter-spacing: 5pt; — расстояние между символами в словах, равно 5 пунктов.

    word-spacing: — CSS-свойство влияющее на расстояние между словами в тексте заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
    Примеры кода с использованием CSS-свойства word-spacing :
    word-spacing: 10px; — расстояние между словами, равно 10 пикселей,
    word-spacing: 7pt; — расстояние между словами, равно 7 пунктов.

    text-transform: — CSS-свойство влияющее на вид букв в тексте, делая их прописными или строчными. В качестве его значения выступает: capitalize , lowercase , uppercase .
    Примеры кода с использованием CSS-свойства text-transform :
    text-transform: capitalize; — первая буква каждого слова начинается с верхнего регистра,
    text-transform: uppercase; — все буквы в тексте записываются в верхнем регистре,
    text-transform: lowercase; — все буквы в тексте записываются в нижнем регистре.

    text-shadow: — CSS-свойство создающее тень текста.
    В качестве его значения выступает: цвет ось-x ось-y радиус .
    Пример кода с использованием CSS-свойства text-shadow:
    text-shadow: green 3px 2px 2px; — тень будет зелёного цвета, со сдвигом в лево на 3 пикселя, со сдвигом вниз на 2 пикселя, радиус (разброс тени) будет составлять 5 пикселей.

    CSS-свойства влияющие на границу (обводку)

    border-color: — CSS-свойство влияющее на цвет границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или его шестнацатеричный код в RGB-формате.
    Примеры кода с использованием CSS-свойства border-color :
    border-color: green; — зелёный цвет обводки,
    border-color: #008800; — зелёный цвет обводки, задан в шестнадцатеричном коде RGB-формата.

    border-width: — CSS-свойство влияющее на толщину границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px).
    Примеры кода с использованием CSS-свойства border-width :
    border-width: 1px; — толщина обводки равна 1 пикселю,
    border-width: 3px; — толщина обводки равна 3 пикселям.

    border-style: — CSS-свойство влияющее на стиль границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: solid , dashed , dotted , double .
    Примеры кода с использованием CSS-свойства border-style :
    border-style: solid; — обводка как сплошная линия,
    border-style: dashed; — обводка в виде отрезков,
    border-style: dotted; — обводка в виде точек,
    border-style: double; — обводка в виде двойной сплошной линии.

    CSS-свойства влияющие на внешние и внутренние отступы

    margin: — CSS-свойство влияющее на отступ между краем фона одного блочного элемента (заголовки, абзацы и т.д.) и краем фона другого блочного элемента. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
    Примеры кода с использованием CSS-свойства margin :
    margin: 15px; — отступ равен 15 пикселям,
    margin: 12pt; — отступ равен 12 пунктам.

    padding: — CSS-свойство влияющее на отступ между краем фона элемента и его содержимым (текстом, изображением). В качестве его значения выступаюет единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
    Примеры кода с использованием CSS-свойства padding :
    padding: 5px; — отступ равен 5 пикселям,
    padding: 3pt; — отступ равен 3 пунктам.

    Подводные камни пользовательских CSS-свойств 11.01.2020 15:50

    Автор курса Нетологии «HTML-верстка» Стас Мельников рассказал о нюансах, которые могут усложнить работу с пользовательскими CSS-свойствами.

    Обучение в онлайн-университете: профессия «Веб-разработчик с нуля»

    Правила синтаксиса названий пользовательских свойств

    Мы привыкли, что встроенные CSS-свойства нечувствительны к регистру. Поэтому следующие способы объявления свойства border дадут одинаковый результат:

    button <
    BORDER: 2 px solid #800080;
    >

    button <
    border: 2 px solid #800080;
    >

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

    button <
    —NETOLOGY-BRAND-COLOR: #800080;
    —netology-brand-color: #27ae60;

    border: 2 px solid var (—NETOLOGY-BRAND-COLOR);
    color: var (—netology-brand-color);
    >

    Теперь рамка стала цветом #800080 (фиолетовый), а цвет текста — #27ae60 (зеленый).

    Допустимые значения для пользовательских свойств

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

    Для примера зададим рамку с цветом #800080 для кнопки:

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

    Результат ничем отличается от предыдущего, и у кнопки все так же рамка с цветом #800080.

    Если у пользовательского свойства —netologyBrandColor будет некорректное значение для свойства border-color , например 18 px, то рамка станет черной.

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

    В нашем случае 18 px некорректное значение для встроенного свойства border-color , и поэтому браузер установит значение по умолчанию, т.е currentColor . Это очень легко проверить, задав для свойства color значение #800080:

    Как видим, браузер применил значение #800080 для рамки. В этом примере я использовал полный синтаксис, чтобы установить рамку. Но мы можем использовать краткий, а именно свойство border .

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

    В нашем примере у встроенного свойства border в качестве одного из значений установлено пользовательское свойство —buttonBorderColor с некорректным значением 18 px. Согласно описанному алгоритму, браузер просто проигнорировал свойство border , поэтому у элемента пропала рамка.

    Значение по умолчанию для пользовательских свойств

    Когда мы рассматривали пример с функцией var , то использовали только один параметр — название пользовательского свойства.

    button <
    —netologyBrandColor: #800080;
    border: 2 px solid var (—netologyBrandColor);
    color: var (—netologyBrandColor);
    >

    button: hover <
    —netologyBrandColor: #27ae60;
    >

    Но кроме него, функция var может принимать и второй — значение по умолчанию. Для объявления значения по умолчанию нужно после названия пользовательского свойства поставить запятую и написать само значение.

    Когда браузер поймет, что разработчик не объявил значение для пользовательского свойства, то использует значение по умолчанию. Например значение #800080 (фиолетовый) для пользовательского свойства —netologyBrandColor .

    button <
    border: 2 px solid var (—netologyBrandColor, #800080);
    color: var (—netologyBrandColor, #800080);
    >

    button: hover <
    —netologyBrandColor: #27ae60;
    >

    Мы видим, что рамка и текст стали фиолетовыми. Но если навести на кнопку, то они станут зелеными. Это говорит о том, что браузер применил значение #27ae60 для пользовательского свойства, тем самым заменив значение по умолчанию.

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

    Но можно сделать по-другому. Функция var позволяет передавать другую функцию var , поэтому в качестве значения по умолчанию можно задать другое пользовательское свойство. Я перепишу предыдущий пример с использованием пользовательского свойства —defaultButtonColor :

    button <
    —defaultButtonColor: #800080;

    border: 2 px solid var (—netologyBrandColor, var (—defaultButtonColor));
    color: var (—netologyBrandColor, var (—defaultButtonColor));
    >

    button: hover <
    —netologyBrandColor: #27ae60;
    >

    Внешне результат не изменится. Но теперь для изменения значения по умолчанию нужно сделать это только в одном месте, а не в нескольких, как раньше.

    Наследование пользовательских свойств

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

    body <
    —netologyBrandColor: #800080;
    >

    button <
    border: 2 px solid var (—netologyBrandColor);
    color: var (—netologyBrandColor);
    >

    Посмотрев в инспектор, можно заметить надпись Inherited from body, которая показывает нам, что пользовательское свойство было взято из элемента body . Но если для элемента button добавить пользовательское свойство —netologyBrandColor , то оно уже перекроет свойство из элемента body .

    body <
    —netologyBrandColor: #800080;
    >

    button <
    —netologyBrandColor: #27ae60;
    border: 2 px solid var (—netologyBrandColor);
    color: var (—netologyBrandColor);
    >

    В инспекторе видно, что пользовательское свойство —netologyBrandColor у элемента button переопределило свойство —netologyBrandColor , которое мы указали для элемента body .

    Глобальные значения

    В стандарте CSS Custom Properties ввели особенный псевдокласс root , который позволяет указать пользовательские свойства, которые применяются к корневому элементу документа. Например, в HTML-документе к элементу html .

    : root <
    —netologyBrandColor: #800080;
    >

    button <
    border: 2 px solid var (—netologyBrandColor);
    color: var (—netologyBrandColor);
    >

    В инспекторе мы можем увидеть, что объявленное пользовательское свойство применяется к элементу html . Но, кроме HTML-документа, псевдокласс root работает в SVG-документах. Например, я объявлю пользовательские свойства в теге style .

    И здесь мы видим, что у корневого элемента SVG добавился псевдокласс root . Соответственно, это доказывает, что псевдокласс root применяется не только к тегу html , а к любому корневому элементу.

    Заключение

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

    Читать еще: «Введение в пользовательские CSS-свойства»

    Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

    Топ-пост этого месяца:  Facebook переработал функцию «События из жизни»
    Добавить комментарий