Как отменить свойства родителя css

Объ­яс­не­ние клю­че­вых слов 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 initial unset) | CSS

Свойство, меняющее все стили CSS, кроме direction и unicode-bidi

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

CSS наследование стилей от родителя: inherit

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

inherit передаёт не конечное значение, а то, что указано в стилях родителя

Пример 1: в чём разница между width: inherit; и width: 100%;

width: 50%; border: solid mediumaquamarine;"> 
width: 100%; background: #E6E2FF;">100%
 

width: 50%; border: solid mediumaquamarine;"> 
width: inherit; background: #E6E2FF;">inherit
 

Пример 2: max-height: 100%; не работает

max-height: 3em; border: solid mediumaquamarine;"> 
max-height: 100%; height: 4em; background: #E6E2FF;">100%
 

max-height: 3em; border: solid mediumaquamarine;"> 
max-height: inherit; height: 4em; background: #E6E2FF;">inherit
 

Пример 3: как сделать дубликат стилей CSS родителя

У меня та же максимальная ширина, фон, рамка и другое, что у родителя

  
У меня та же максимальная ширина, фон, рамка и другое, что у родителя
 

inherit переносит значение непосредственного родителя, а не определённого position

width: 100%; border: solid salmon; position: relative;"> 
width: 50%; border: solid mediumaquamarine;"> 
width: 100%; background: #E6E2FF; position: absolute;">100%
 
 

width: 100%; border: solid salmon; position: relative;"> 
width: 50%; border: solid mediumaquamarine;"> 
width: inherit; background: #E6E2FF; position: absolute;">inherit
 
 

Копируется всё, даже то, что не указано разработчиком в стилях у родителя

без установленного display

 
без установленного display 

 
display: inherit; background: #E6E2FF;">inherit 

initial CSS: отменить наследование

Для того, чтобы узнать начальные значения свойств, которые зависят от браузера, таких как color и font-family , можно применить initial

Пример 1: запретить наследование свойства

color: initial ;

  
color: initial;
 

Пример 2: убрать свойство для более узкого селектора

Я сам по себе
У меня есть родитель «raz0»

 .raz < color: red; /* наследуется */ font-size: 200%; /* наследуется */ > .raz0 .raz 
Я сам по себе
 
У меня есть родитель "raz0"
 

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

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

не будет блочным

  
<div> 
не будет блочным
 

unset CSS: сбросить стиль браузера

Поведение стандартное, только все теги становятся обезличенными, словно их подстригли под одну гребёнку. То есть как и у initial , блочные элементы станут inline .

Пример: обнулить все возможные стили input

Изменить текст:

 label < text-shadow: 1px 1px rgba(255,0,180,0.5); >input Изменить текст: 

 div < color: green; border: 1px solid red; >span < color: unset; /* наследуется */ border: 1px solid unset; /* не наследуется, по умолчанию currentColor */ > div < color: green; border: 1px solid red; >span 
пример

 div < color: green; border: 1px solid red; >span 
пример

 div < color: green; border: 1px solid red; >span 
пример

     div < border: 1px solid green; padding: 10px; >p 
Внимание, запрашиваемая страница не найдена!
  

   Весь текст в этом абзаце будет красным.  p style="color: red"> Весь span>текстspan> в em>этомem> абзаце будет b>краснымb>. p>    Скопировать Скопировано Не удалось скопировать   

      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; >    Скопировать Скопировано Не удалось скопировать   

 Волшебная кнопка 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; >    Скопировать Скопировано Не удалось скопировать