Объяснение ключевых слов initial, inherit, unset и revert в CSS
В CSS есть несколько ключевых слов для задания значений свойств. Я собираюсь поговорить о нескольких из них: initial , inherit и об относительно новых — unset и revert .
В оригинальной статье в заголовке и во вступлении говорится только о трёх ключевых словах, но дальше в тексте идёт обсуждение четвёртого — revert . Мы решили добавить его во вступление для удобства читателя — прим. переводчика.)
Хотя большинство веб-разработчиков сталкивалось с ними, весьма вероятно, что многие, даже самые опытные, не до конца их понимают.
Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей в CSS. Но если все эти ключевые слова являются своего рода сбросом, то почему их так много? Какие именно различия между ними? Я решил глубже изучить эти ключевые слова, чтобы раз и навсегда разобраться, что отличает их друг от друга.
Базовые стили для веба Скопировать ссылку
Прежде чем мы начнем разбираться с ключевыми словами, важно понять, откуда берутся базовые стили в браузере.
Начальное значение для каждого свойства в CSS Скопировать ссылку
Каждое свойство в CSS имеет начальное ( initial ) значение. Оно никак не связано с типом HTML-элемента, к которому применяется.
Пример начального значения из MDN:
Браузерные стили Скопировать ссылку
После применения начальных стилей для всех CSS-свойств браузер загружает свои стили. Эти стили не имеют ничего общего с базовыми начальными значениями CSS-свойств.
Пример браузерных стилей:
У HTML-элементов нет начальных значений для стилей! Базовые стили HTML-элемента, такого как , например, предоставляются стилями браузера, а не начальными значениями CSS-свойств.
Теперь начнем говорить о ключевых словах.
Ключевое слово inherit Скопировать ссылку
Ключевое слово inherit сообщает браузеру, что значение свойства нужно найти у ближайшего родительского элемента и унаследовать его для текущего элемента. Если у ближайшего родителя также задано значение inherit , то браузер продолжит подниматься по DOM, пока не найдет какое-нибудь значение. Если значения нет, то браузер применит свои стили, а если и браузерных стилей нет, то тогда будет применено значение initial .
Ключевое слово initial Скопировать ссылку
Чтобы понять ключевое слово initial , мы должны помнить важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером. Браузерные стили — это стили, которые применяются браузером к конкретным HTML-элементам. Мы часто думаем, что они автоматически приходят вместе с HTML, но это не так.
Ключевое слово initial говорит браузеру использовать значение по умолчанию для заданного CSS-свойства. Например, для свойства color значение initial всегда будет black .
Такое поведение может очень запутывать, потому что, как мы и говорили ранее, значение по умолчанию для CSS-свойства не всегда совпадает со значением, которое браузер задает конкретному элементу. Например, initial -значение для свойства display равно inline для всех элементов. Поэтому, если для элемента будет задано свойство display со значением initial , то свойство будет вычислено как inline , а не block , как в стилях браузера.
div.box < background-color: red; display: initial; /* примет значение `inline`, а не `block` */ >
Ключевое слово unset Скопировать ссылку
Ключевое слово unset является уникальным и работает в зависимости от типа свойства. В CSS есть два типа свойств:
1. Наследуемые свойства Скопировать ссылку
Свойства, которые затрагивают дочерние элементы. Все свойства, которые влияют на текст, имеют такое естественное поведение. Например, если мы зададим font-size элементу , то он будет применяться ко всем дочерним элементам, пока вы не зададите другой font-size какому-нибудь из них.
2. Ненаследуемые свойства Скопировать ссылку
Все остальные свойства, которые влияют только на элемент, для которого они заданы. Это все свойства, которые не относятся к оформлению текста. Например, если вы зададите border на родительском элементе, то он не будет задан на дочернем.
Ключевое слово unset работает так же, как и inherit для наследуемых свойств. Например, для текстового свойства color оно будет работать как значение inherit , то есть будет искать ближайший родительский элемент с заданием нужного свойства, а если он не будет найден, то применится браузерное значение, а если и браузерных стилей нет, то применится значение initial .
Для ненаследуемых свойств unset ведет себя как initial , то есть применится значение по умолчанию. Например, для свойства border-color оно будет работать как initial .
.some-class < color: unset; /* будет равно `inherit` */ display: unset; /* будет равно `initial` */ >
Зачем использовать unset , если оно работает так же, как inherit и initial ? Скопировать ссылку
Если unset ведет себя как inherit и initial , то зачем оно может понадобиться? Если мы сбрасываем только одно свойство, то unset не нужен. Вместо него мы можем просто использовать inherit или initial . Но сейчас у нас есть свойство all , которое дает нам новую возможность — сбросить наследуемые и ненаследуемые свойства одновременно.
Таким образом, вам не нужно сбрасывать свойства по отдельности. Применение ключевого слова unset к свойству all приведет к сбросу всех наследуемых свойств к значению inherit и всех ненаследуемых свойств — к значению initial .
Это единственная причина существования нового ключевого слова unset ! В противном случае мы могли бы вместо этого использовать inherit и initial .
Вместо сброса свойств по отдельности, к примеру:
/* Плохо */ .common-content
Мы можем использовать новое свойство all со значением unset , которое повлияет на все существующие свойства, например:
/* Хорошо */ .common-content
Я создал небольшой пример для демонстрации того, как свойства ведут себя, когда используется свойство all со значением unset . Некоторые ведут себя так, как будто к ним применено значение inherit , а некоторые так, как будто к ним применено значение initial . Пример на Codepen использования all: unset .
Ключевое слово revert Скопировать ссылку
Но что, если мы хотим сбросить значение свойства до первоначально заданных браузером значений, а не до значений по умолчанию? Например, вернуть значение свойства display элемента к значению block (это стили браузера), а не к значению inline (это базовые стили CSS).
Для этих целей мы скоро получим новое ключевое слово в CSS: revert . Оно очень похоже на unset , единственное отличие состоит в том, что оно предпочитает стили браузера базовым значениям свойств CSS. Например:
div < display: revert; /* = block */ >h1 < font-weight: revert; /* = bold */ font-size: revert; /* = 2em */ >
Таким образом, если мы хотим сбросить все стили HTML-элемента до базовых стилей браузера, мы можем сделать это так:
/* Хорошо */ .common-content
Соответственно, revert дает гораздо больше возможностей, чем unset . Правда, на данный момент revert работает только в Firefox и Safari. (В Chrome работает с версии 84 — прим. переводчика.)
Заключение Скопировать ссылку
На этом всё. Надеюсь, вам понравилась эта статья, и вы чему-то научились из моего опыта.
Видео доклада по теме Скопировать ссылку
Я сделал короткий доклад на эту тему, смотрите видео целиком на YouTube:
inherit CSS значення
Ключове слово, яке повідомляє, що необхідно наслідувати значення властивості у батьківського елементу. Звісно, результат буде помітний лише в тому випадку, якщо у батька вказана властивість встановлена.
h1 намагається успадкувати значення кольору, яке він знаходить у елементі body.
Кожна CSS властивість може приймати, як значення, ключове слово inherit . Наприклад, ось так:
span
Цим ми змушуємо певний елемент успадковувати вказане значення властивості від батьківського елемента. Якщо в CSS не інстальовано властивість для батьківського елемента, то він успадкує значення, обчислене від батька (яке може бути дефолтним або яким-небудь іншим, успадкованим від батьківського елемента).
Ключове слово inherit може стати в нагоді, якщо ви хочете привласнити одне і те ж значення групі дочірніх елементів для властивостей, які зазвичай не успадковуються. наприклад:
.block < box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4); >.block div
Тепер всі елементи всередині основного елемента .block успадковують його значення властивості box-shadow .
Наследование
Некоторые CSS-свойства применяются не только к самому элементу, но и к его детям.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 9 февраля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Наследование в CSS — это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам.
Пример
Скопировать ссылку «Пример» Скопировано
Весь текст в этом абзаце будет красным.
p style="color: red"> Весь span>текстspan> в em>этомem> абзаце будет b>краснымb>. p>
Как понять
Скопировать ссылку «Как понять» Скопировано
Если у какого-то свойства указать значение inherit — оно будет взято у верхнего «родителя». Для некоторых CSS-свойств это значение указано по умолчанию.
Наследуемые свойства
Скопировать ссылку «Наследуемые свойства» Скопировано
- Свойства шрифта: font и его «производных»: font — style , font — variant , font — weight , font — stretch , font — size и font — family ; color и line — height .
- Свойства межбуквенных и «межсловных» расстояний: letter — spacing , word — spacing и white — space .
- Параметры текста: text — align , text — indent , text — shadow , text — transform ;
- оформление пунктов списков: list — style , list — style — type , list — style — position .
- Внешний вид курсора: cursor и отображение содержимого элемента visibility .
Например, в отличие от color , который применится к подписи, ненаследуемое свойство border не будет применено к вложенным элементам:
Дока Дог figure> img src="doggo-up.svg"> figcaption>Дока Догfigcaption> figure>
figure border: 3px solid #18191c; color: blue;>
figure border: 3px solid #18191c; color: blue; >
img border: inherit;>
img border: inherit; >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
Другой пример наследования — использование вместо указания цвета значения current Color , который равен цвету текста текущего элемента, т. е. значению свойства color . Если color текущего элемента равен inherit (т. е. наследует значение «родителя»), то и current Color также будет соответствовать текущему значению color «родителя». Причём это ключевое слово можно указывать в качестве значения для любого свойства, где значением является цвет, не только для color . См. раздел «На практике».
Значения rem и em — также частный случай наследования кратного размера текста («родителя», если указан em и корневого тега в случае с rem ).
Полный список наследуемых по умолчанию CSS-свойств помечен в спецификации в колонке «Inherited?» значением yes .
Значение любого CSS-свойства можно «позаимствовать» (унаследовать) у родителя. Если «родителя» нет, inherit будет соответствовать значению по умолчанию для этого элемента.
На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
Удобно делать всякие трюки, используя current Color . Мы не меняем явно цвет рамки по наведению курсора, но он меняется вслед за color .
button class="magick-btn">Волшебная кнопкаbutton>
.magick-btn border: 2px solid; border-color: currentColor; border-radius: 6px; padding: 9px 15px; color: blue; background-color: transparent;> .magick-btn:hover color: pink;>
.magick-btn border: 2px solid; border-color: currentColor; border-radius: 6px; padding: 9px 15px; color: blue; background-color: transparent; > .magick-btn:hover color: pink; >
Значение свойства css inherit.
Еще одно значение свойств css, с которым можно часто сталкиваться при работе со стилями CSS — это значение inherit.
Давайте посмотрим, какой смысл и эффект дает это значение.
inherit с англ. переводится как наследовать. Свойства, которым будет присвоено это значение, будут наследовать значение того-же свойства его родителя.
Дочерний блок
В этом примере, хотя дочернему блоку не было задано никакого конкретного значения для свойства border, значение inherit заимствовало параметры этого свойства у своего родителя.
Но, в CSS есть также ряд свойств, которые автоматически заимствуют значения соответствующего свойства его родителя. Например, это свойство color:
Дочерний блок
Посмотрите, хотя дочернему блоку не было присвоено свойства color, тем не менее, текст в дочернем блоке тоже стал красным цветом.
Таким образом, в CSS есть ряд свойств, которые наследуют свойства своих родителей и есть такие свойства, которые не наследуют.
Чтобы узнать какие конкретно свойства наследуют, а какие нет, можете посмотреть на следующую таблицу:
Это официальный список всех свойств CSS, который представлен в спецификации.
Обратите внимание на графу Inherited
Yes — означает, что свойство по умолчанию наследуется у своего родителя.
No — свойство не наследуется у родителя.
Таким образом, значение inherit — это способ изменять поведение свойств CSS в области наследования, которое используется по умолчанию.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: