Объяснение ключевых слов 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 в области наследования, которое используется по умолчанию.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: