Главная » Статьи » Ключевые слова CSS «Initial», «Inherit» и «Unset»

Ключевые слова CSS «Initial», «Inherit» и «Unset»

Ключевые слова CSS «Initial», «Inherit» и «Unset»

От автора: в CSS есть ключевые слова для различных значений по умолчанию. В этой статье я буду рассматривать три из них: initial, inherit и относительно новое unset.

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

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

Основные стили Интернета

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

Начальное значение каждого свойства в CSS

Каждое свойство CSS имеет начальное значение. Это начальное значение не связано с типом HTML-элемента, к которому оно применяется. Пример исходного значения из MDN:

Ключевые слова CSS «Initial», «Inherit» и «Unset»

Начальным значением высоты строки является «normal»

Стили пользовательского агента

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

Ключевые слова CSS «Initial», «Inherit» и «Unset»

Стили элементов h1 из пользовательского агента браузера Chrome

Элементы HTML не имеют начальных значений стиля! Основные стили элемента HTML, такого как тег h1, например, взяты из таблицы стилей агента пользователя браузера, а не из исходного значения свойств CSS.

Теперь давайте начнем рассмотрение ключевых слов CSS!

Ключевое слово inherit

Значение ключевое слово inherit указывает браузеру искать значение ближайшего родительского элемента и позволить текущему элементу наследовать это значение. Если у ближайшего родителя тоже значение inherit, браузер продолжит подниматься по дереву DOM, пока не найдет какое-то значение. Если значения нет, браузер будет использовать свой стиль пользовательского агента, а если нет никакого стиля пользовательского агента, он будет использовать базовый стиль initial.

Ключевое слово CSS initial

Чтобы понять ключевое слово initial, мы должны помнить важный факт: каждое свойство в CSS имеет значение по умолчанию, которое не имеет ничего общего со значением по умолчанию пользовательского агента. Стили пользовательского агента — это основные стили, которые браузер применяет к элементам HTML в браузере. Мы склонны думать, что они вводятся автоматически с HTML, но это не так.

Ключевое слово initial указывает браузеру использовать значение по умолчанию данного свойства CSS. Например: значение initial свойства color всегда будет black.

Такое поведение может быть очень запутанным, потому что, как мы уже говорили, значение свойства CSS по умолчанию не обязательно является значением по умолчанию, которое браузер определяет для элемента. Например, значение initial свойства display — это inline для всех элементов. Поэтому, если элемент div получает значение initial в свойстве display, его отображение будет inline, а не block, что является его стилем пользовательского агента.

Пример:

div.box{ background-color: red; display: initial; /* will be equal to inline and not to block */
}

CodePen пример Initial для свойства display элемента div

Ключевые слова CSS «Initial», «Inherit» и «Unset»

Значение display initial — информация с MDN

Ключевое слово unset

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

Наследуемые свойства — свойства, которые влияют на потомков. Все свойства, которые влияют на текст, имеют такое поведение. Например, если мы определим font-size элемента HTML, он будет применяться ко всем дочерним элементам HTML, пока вы не установите другой стиль font-size внутреннего элемента HTML.

Ключевые слова CSS «Initial», «Inherit» и «Unset»

Унаследованное свойство font-size

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

Ключевые слова CSS «Initial», «Inherit» и «Unset»

Ненаследуемое свойство border

Значение unset работает так же, как inherit для наследуемых типов свойств. Например, для свойства текста color оно будет работать как значение inherit, то есть искать родительский элемент с определением свойства, а если ничего не найдено — использовать значение пользовательского агента, и если нет стиля пользовательского агента, будет использовать базовый стиль initial.

Для ненаследуемых свойств unset будет работать так же, как значение initial, то есть применять значение по умолчанию; например, для border-color, это будет работать как initial.

.some-class{ color: unset; /* will be equal to 'inherit' value */ display: unset; /* will be equal to 'initial' value*/
}

Зачем использовать Unset, если оно работает точно так же, как Inherit и Initial?

Если unset действует как initial и inherit, зачем нам использовать unset? Если мы сбрасываем стили только через одно свойство, то в unset нет необходимости: вместо этого мы можем просто использовать значения inherit или initial.

Но в настоящее время у нас есть новое свойство под названием all, которое дает новую возможность: сбросить все наследуемые свойства и ненаследуемые свойства одновременно!

Таким образом, вам не нужно сбрасывать свойства по одному. Таким образом, применение значения unset к свойству all приведет к сбросу всех наследуемых свойств на inherit, а всех ненаследуемых свойств на initial.

Это единственная причина существования нового значения ключевого слова unset! В противном случае мы могли бы использовать значения inherit и initial. Вместо сброса свойств по одному, например:

/* Bad */
.common-content *{ font-size: inherit; font-weight: inherit;border-width: initial; background-color: initial;
}

Мы можем использовать новое свойство all со значением unset, которое повлияет на все существующие свойства, например:

/* Good */
.common-content *{ all: unset;
}

Я написал небольшой пример, чтобы продемонстрировать, как ведут себя свойства при использовании свойства all со значением unset: некоторые действуют так, как если бы было применено значение inherit, а некоторые — как если бы было применено значение initial. Пример на CodePen — all: unset;.

Ключевое слово revert

Но что, если мы хотим сбросить стили свойства на исходный стиль пользовательского агента, а не на базовый стиль свойства? Например, чтобы вернуть для свойства display элемента div значение block (его стиль пользовательского агента), а не inline (его базовый стиль CSS)?

Ключевые слова CSS «Initial», «Inherit» и «Unset»

Базовый стиль пользовательского агента HTML-тега div

Для этого, в скором времени мы получим новое ключевое слово CSS: revert. Ключевое слово revert очень похоже на unset, единственное отличие в том, что оно предпочитает стили агента пользователя основным стилям CSS. Например:

div{ display: revert; /* = block */ }h1{ font-weight: revert; /* = bold */ font-size: revert; /* = 2em */
}

Таким образом, если мы хотим сбросить все стили тега HTML на базовые стили браузера, мы можем сделать это следующим образом:

/* Good */
.common-content *{ all: revert;
}

Таким образом, revert дает нам более мощные возможности, чем ключевое слово unset. Но пока, ключевое слово revert работает только в Firefox и в Safari.

Поддержка браузерами

inherit — работает во всех браузерах, включая Internet Explorer 11

initial и unset — работают во всех браузерах, кроме Internet Explorer 11

revert — пока работает только в Firefox & Safari.

Это все. Надеюсь, вам понравилась данная статья, и вы узнали много нового.

Автор: Elad Shechter

Источник: https://medium.com

Редакция: Команда webformyself.