• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• HTML учебник
• Справочник тегов
• Атрибуты событий
• Глобальные атрибуты
• Мнемоники
• Коды языков
• HTML цвета
• Тесты знаний

CSS

• CSS учебник
• Справочник свойств
• CSS селекторы
• CSS функции
• CSS правила
• Flexbox генератор
• Grid генератор
• LESS учебник

JavaScript

• Интерфейсы веб API
• Объект Array
• Объект Date
• Объект Function
• Объект Global
• Объект JSON
• Объект Math^β
• Объект Number
• Объект Object
• Объект Promise
• Объект RegExp
• Объект String

jQuery

• jQuery селекторы
• jQuery события
• jQuery методы DOM
• jQuery перемещения
• jQuery утилиты
• jQuery эффекты
• jQuery AJAX
• jQuery объект Callbacks
• jQuery объект Deferred

CSS свойства

• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-shadow
• box-sizing
• break-after
• break-before
• break-inside
• caption-side
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• @font-face
• font-family
• font-size
• font-style
• font-variant
• font-weight
• grid
• grid-area
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-gap
• grid-column-start
• grid-gap
• grid-row
• grid-row-start
• grid-row-gap
• grid-row-end
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows
• justify-content
• justify-items
• justify-self
• height
• @keyframes
• left
• letter-spacing
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• max-height
• max-width
• @media
• min-height
• min-width
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-wrap
• overflow-x
• overflow-y
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• place-items
• place-self
• position
• quotes
• resize
• right
• tab-size
• table-layout
• text-align
• text-align-last

основные проблемы использования начальных значений в коде

От автора: в CSS каждое свойство имеет то, что называется начальным значением. Иногда это называется значением по умолчанию, но спецификация использует термин CSS initial, который, я думаю, немного лучше.

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

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

.element { float: none; width: auto; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Круто, правда? Он не будет гибким (таким образом, он перейдет на следующую строку, вместо того, чтобы размещаться горизонтально против других элементов). Кроме того, он не ограничено значением ширины, поэтому ширина автоматически рассчитывается на основе ширины родительского элемента.

Если вы опытный разработчик CSS или даже новичок, вы можете сразу увидеть, что не так с кодом выше. Он не нужен. Это не ошибочный код; это просто необязательно для элемента уровня блока. Каждому элементу уровня блока, не имеющему установленного значения float, автоматически присваивается значение float: none, потому что ни одно из них не является начальным значением для свойства float. То же самое верно для width: auto, поэтому ни одна из этих строк не нужна.

Иногда начальные значения необходимы

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

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

Это конкретное имя класса добавляется в документ через JavaScript, который также переопределяет что-то в другом месте (это также может быть элемент HTML, добавленный с этим именем класса)

Автор кода явно указывает, что происходит в коде (либо намеренно, либо в неведении)

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

@media print { .column, aside { float: none; } }

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

h3 { background-color: #444; color: white; padding: 7px; } /* …здесь сотни строк кода… */ aside h3 { background: none; color: #444; }

Здесь для background задано none, чтобы переопределить цвет фона, ранее установленный для того же элемента. Эти правила стилей не обязательно располагаться одно за другим, чтобы вы могли понять, что происходит. При сканировании CSS вы можете просто увидеть объявление background: none и задаться вопросом, необходимо ли это, поскольку элементы h3 не имеют фона по умолчанию.

(Я должен отметить здесь, что ни одно из этих определений не является начальным значением для свойства background. background — это сокращенное свойство, поэтому оно не имеет ни одного начального значения. Однако none — это начальное значение для свойства background-image. И, как вы, возможно, знаете, обычно, когда вы пишете одно или часть значений в сокращенном объявлении, все остальные сокращенные значения возвращаются к начальным значениям. В приведенном выше случае для свойства background-color будет установлено transparent, поэтому результат будет ожидаемым.)

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

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

Вот что вы могли бы увидеть в инструментах для разработчиков Chrome, если бы у вас был пример aside h3 из предыдущего раздела:

С помощью инструментов для разработчиков четко видно, что background: none не является необязательным. Все инструменты для разработчика разных браузеров покажут то же самое, и это то, что делает эти инструменты полезными при отслеживании проблем CSS.

Будьте явными в CSS

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

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

Например, при чтении руководств по новым функциям CSS, таким как flexbox, вы можете увидеть код, который выглядит так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

.container { display: flex; flex-wrap: nowrap; flex-direction: row; order: 0; border: solid 1px #444; } .container div { justify-content: flex-start; align-content: stretch; align-items: flex-start; padding: 10px; }

В приведенном выше примере я немного все преувеличил, но некоторые онлайн-примеры кода сходны с этим. Если вы новичок в вопросах, связанных с flexbox, то, вероятно, вы не видите проблем в этом коде. Но угадайте, что? Следующий код эквивалентен приведенному выше (предполагая, что к этим элементам не применяется другой CSS):

.container { display: flex; border: solid 1px #444;; } .container div { padding: 10px; }

Шесть из семи свойств, связанных с flexbox, которые я включил в предыдущий пример, были удалены, потому что для всех них были установлены начальные значения, поэтому эти строки были излишними.

В этом случае я не возражаю против включения этих дополнительных строк, потому что это может быть наглядным, чтобы увидеть некоторые доступные потенциальные свойства flexbox вместе с несколькими значениями. Таким образом, это тот случай, когда код позволяет лучше его сканировать. В конце концов, хотя в урезанной версии ясно, что элемент .container является гибким контейнером, сразу может быть и не ясно, что вложенные элементы div с отступом 10px являются гибкими элементами.

Указание начальных значений в комментариях

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

.container { display: flex; flex-wrap: nowrap; /* начальное значение */ border: solid 1px #444; } .container div { align-content: stretch; /* начальное значение */ align-items: flex-start; /* начальное значение */ padding: 10px; }

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

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

h3 { background-color: #444; color: white; padding: 7px; } /* …здесь сотни строк кода… */ aside h3 { background: none; /* переопределяем снова на начальное значение */ color: #444; }

И я полагаю, что в некоторых случаях было бы еще лучше на писать следующее:

aside h3 { background-color: initial; /* переопределяем */ color: #444; }

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

Заключение

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

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

Поэтому мои рекомендации для объявления начальных значений таковы:

Потратьте время на то, чтобы понять, какие значения являются начальными и как они работают (в том числе в сокращениях).

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

Позаботьтесь о том, чтобы вы не включали лишние строки в новые функции, такие как flexbox (или используйте комментарии).

Автор: Louis Lazaris

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Значение ключевых слов CSS «Initial», «Inherit» и «Unset»

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

Элементы HTML не имеют начальных значений стиля! Основные стили элемента HTML, такого как тег h2, например, взяты из таблицы стилей агента пользователя браузера, а не из исходного значения свойств 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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Значение 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)?

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

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

div{ display: revert; /* = block */ }h2{ 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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Объяснение ключевых слов initial, inherit, unset и revert в CSS — Веб-стандарты

В CSS есть несколько ключевых слов для задания значений свойств. Я собираюсь поговорить о нескольких из них: initial, inherit и об относительно новых — unset и revert.

В оригинальной статье в заголовке и во вступлении говорится только о трёх ключевых словах, но дальше в тексте идёт обсуждение четвёртого — revert. Мы решили добавить его во вступление для удобства читателя — прим. переводчика.)

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

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

Базовые стили для веба#

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

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

Каждое свойство в CSS имеет начальное (initial) значение. Оно никак не связано с типом HTML-элемента, к которому применяется.

Пример начального значения из MDN:

Браузерные стили#

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

Пример браузерных стилей:

У HTML-элементов нет начальных значений для стилей! Базовые стили HTML-элемента, такого как <h2>, например, предоставляются стилями браузера, а не начальными значениями CSS-свойств.

Теперь начнем говорить о ключевых словах.

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

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

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

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

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

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

Пример:

div.box {
    background-color: red;
    display: initial; /* примет значение `inline`, а не `block` */
}

Пример на CodePen значения initial для свойства display элемента <div>.

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

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

1. Наследуемые свойства#

Свойства, которые затрагивают дочерние элементы. Все свойства, которые влияют на текст, имеют такое естественное поведение. Например, если мы зададим font-size элементу <html>, то он будет применяться ко всем дочерним элементам, пока вы не зададите другой 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 {
    font-size: inherit;
    font-weight: inherit;
    border-width: initial;
    background-color: initial;
}

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

/* Хорошо */
.common-content {
    all: unset;
}

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

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

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

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

div {
    display: revert; /* = block */
}

h2 {
    font-weight: revert; /* = bold */
    font-size: revert; /* = 2em */
}

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

/* Хорошо */
.common-content {
    all: revert;
}

Соответственно, revert дает гораздо больше возможностей, чем unset. Правда, на данный момент revert работает только в Firefox и Safari. (В Chrome работает с версии 84 — прим. переводчика.)

Заключение#

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

Видео доклада по теме#

Я сделал короткий доклад на эту тему, смотрите видео целиком на YouTube:

CSS свойство position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

CSS синтаксис

position: static | absolute | fixed | relative | initial | inherit;

Возможные значения

Пример использования

Устанавливаем позиционирование элемента <h3>

h3 {
     position: absolute;
     left: 100px;
     top: 150px;
}

начальных — Веб-технологии для разработчиков

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

Ключевое слово initial (CSS) устанавливает свойство элемента в начальное (или по умолчанию) значение. Это может быть применимо к любому свойству CSS. Это относится также к CSS своемуству все , с которым начальное может быть использовано для восcтановления всех свойств CSS до их начальных значений.

Примечание: На наследуемые свойства действие значения первоначальное может быть непредвиденным. Вы должны рассмотреть возможность использования ключевых слов inherit , unset или revert вместо него.

Пример

HTML

 

   Этот текст красный. 
   Этот текст имеет исходный цвет (обычно черный). 
   Он снова красный. 
 

CSS

 p {
  красный цвет;
}

em {
  цвет: начальный;
} 

Спецификации

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

Легенда

Полная поддержка

Полная поддержка

Нет поддержки

Нет поддержки

Требует вендорный префикс или другое имя для использования.

Требует вендорный префикс или другое имя для использования.

Смотрите также

• Используйте unset , чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.
• Используйте revert для сброса свойств до значений, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).
• используйте свойство inherit , чтобы установить свойство элемента таким же значением, как у его родителя.
• Свойство all позволяет сбросить все свойства сразу до начального (начального), унаследованного (унаследованного), возвращенного (возвращенного) или неустановленного (неустановленного) состояния.

.

начальная | CSS | WebReference

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

Синтаксис

   Свойство : initial;  

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	нормальный | капсюли
A || B	Каждое личное дело самостоятельно или с другими в произвольном порядке.	ширина || count
[]	Группирует значения.	[урожай || крест]
*	Повторять ноль или больше раз.	[, <время>] *
+	Повторять один или больше раз.	<число> +
?	Указанный тип, слово или группа не является обязательным.	вставка?
{A, B}	Повторять не менее A, но не более B раз.	<радиус> {1,4}
#	Повторять один или больше раз через запятую.	<время> #

Пример

<стиль> h3 {цвет: # ffb734; семейство шрифтов: Arial, sans-serif; } p {цвет: зеленый; } .initial { цвет: начальный; семейство шрифтов: начальный; }

Метод случайных чисел

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

Метод Гаусса

Примечание

Firefox до версии 19 поддерживает значение -moz-initial.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Рекомендация (Рекомендация) — спецификация W3C и одобана как стандарт.
• Кандидат в рекомендации (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
• Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Проект (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров используются следующие обозначения.

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

Число указывает версию, начиная с свойства, имеющего свойство.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.10.2016

Редакторы: Влад Мержевич

.

Значение начальное | Справочник CSS

basicweb.ru

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Обязательства
  • Правила
  • Flexbox генератор
  • Сетевой генератор
  • Учебник МЕНЬШЕ
• JavaScript
  • Интерфейсы веб API
  • Объект Массив
  • Дата размещения
  • Объект Функция
  • Объект Global
  • Объект JSON
  • Объект Математика
  • Номер объекта
  • Объект Объект
  • Объект RegExp
  • Обещание объекта
  • Строка объекта
• jQuery
  • Селекторы
  • События
  • Методы ДОМ
  • Перераз
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Обратные звонки
  • Объект отложен

HTML

• HTML учебник
• Справочник тегов
• Атрибуты событий
• Глобальные атрибуты
• Мнемоники
• Коды языков
• HTML цвета
• Тесты знаний

CSS

• Учебник CSS
• Справочник свойств
• CSS селекторы
• CSS функции
• Правила CSS
• Flexbox генератор
• Сетевой генератор
• МЕНЬШЕ учебник

JavaScript

• Интерфейсы веб API
• Объект Массив
• Дата размещения
• Объект Функция
• Объект Global
• Объект JSON
• Объект Math ^β
• Номер объекта
• Объект Объект
• Обещание объекта
• Объект RegExp
• Строка объекта

jQuery

• jQuery селекторы
• jQuery события
• jQuery методы DOM
• jQuery перемещение
• jQuery утилиты
• jQuery эффекты
• jQuery AJAX
• Обратные вызовы объекта jQuery
• jQuery объект отложен

CSS свойства

• align-content
• align-items
• выровнять себя
• все
• анимация
• задержка анимации
• анимация-направление
• продолжительность анимации
• режим заливки анимации
• количество итераций анимации
• имя-анимации
• состояние воспроизведения анимации
• функция синхронизации анимации
• задняя поверхность-видимость
• фон
• фон-приставка
• фоновый режим наложения
• фон-клип
• цвет фона
• фоновое изображение
• фон происхождения
• фон-позиция
• фон-повтор
• размер фона
• граница
• нижняя граница
• цвет нижней границы
• граница-нижний-левый-радиус
• граница-нижний-правый-радиус
• с окантовкой снизу
• ширина-нижняя граница
• пограничный обвал
• цвет рамки
• изображение границы
• граница-изображение-исход
• повтор изображения границы
• фрагмент изображения границы
• источник изображения границы
• ширина-границы-изображения
• граница слева
• левая рамка, цвет
• с рамкой слева
• ширина рамки слева
• граница-радиус
• граница правая
• цвет границы справа
• с рамкой справа
• ширина рамки справа
• интервал границы
• с бордюром
• кайма
• цвет верхней границы
• граница-верх-левый-радиус
• граница-верх-правый-радиус
• с бордюром
• ширина по верху границы
• ширина границы
• низ
• тень коробки
• размер коробки
• обрыв после
• перед перерывом
• взлом
• со стороны подписи
• прозрачный
• зажим
• цвет
• количество столбцов
• столбец-заполнитель
• колонна-зазор
• столбец-линейка
• столбец-линейка-цвет
• стиль столбца-правила
• ширина-правило столбца
• колонна-пролет
• ширина столбца
• столбцов
• содержание
• счетчик
• сброс счетчика
• курсор
• направление
• дисплей
• пустых ячеек
• фильтр
• гибкий
• гибкая основа
• гибкое направление
• гибкий поток
• гибкий рост
• гибкая термоусадочная
• гибкая пленка
• с плавающей запятой
• шрифт
• @ font-face
• семейство шрифтов
• размер шрифта
• стиль шрифта
• вариант шрифта
• font-weight
• сетка
• сетка
• сетка-автоматические столбцы
• сетка-автоматический поток
• сетка автоматических рядов
• сетка-столб
• конец столбца сетки
• сетка-столбец-зазор
• начало столбца сетки
• сетка-зазор
• сетка-рядка
• сетка-ряд-начало
• сетка-рядок-зазор
• конец строки сетки
• сетка-шаблон
• сетка-шаблон-области
• сетка-шаблон-столбцы
• сетка-шаблон-ряды
• justify-content
• justify-items
• оправдать себя
• высота
• @keyframes
• осталось
• межбуквенный интервал
• высота строки
• в виде списка
• изображение в стиле списка
• позиция в стиле списка
• тип списка
• маржа
• нижнее поле
• левое поле
• поле справа
• верхняя маржа
• макс. Высота
• макс. Ширина
• @media
• мин-высота
• мин. Ширина
• непрозрачность
• заказать
• детей-сирот
• наброски
• контурный цвет
• контур-офсет
• контурный
• ширина контура
• перелив
• перелив-обертка
• переполнение-x
• переполнение
• набивка
• обивка нижняя
• отступ слева
• обивка правая
• утеплитель
• разрыв страницы после
• разрыв страницы до
• разрыв страницы внутри
• перспектива
• перспективное происхождение
• место-содержание
• единиц места
• самообслуживание
• позиция
• цитат
• изменить размер
• правый
• размер табулятора
• стол-сервиз
• выравнивание текста
• выравнивание текста последнее

.

основные проблемы использования начальных значений в коде

От автора: в CSS каждое свойство имеет то, что называется начальным значением. Иногда это называется по умолчанию, но спецификация термин CSS initial, который, я думаю, немного лучше.

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

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

.element { float: нет; ширина: авто; }

.element { float: none; ширина: авто; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Круто, правда? Он не будет гибким способом (таким образом, он перейдет на строку, вместо того, чтобы размещаться горизонтально против других элементов).Кроме того, он не ограничено длины ширины, поэтому ширина автоматически рассчитывается на основе ширины родительского элемента.

Если вы опытный разработчик CSS или даже новичок, вы можете сразу увидеть, что не так с кодом выше. Он не нужен. Это не ошибочный код; это просто необязательно для элемента уровня блока. Каждому элементу установленного уровня блока, не имеющему значения float, автоматически присваивается значение float: none, потому что ни одно из них не является начальным значением для свойств float.То же самое верно для width: auto, поэтому ни одна из этих строк не нужна.

Иногда начальные значения необходимы

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

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

Это конкретное имя класса добавляется в документ через JavaScript, который также переопределяет что- то в другом месте (это также может быть элемент HTML, добавленный с этим именем класса)

Автор кода явно указывает, что происходит в коде (либо намеренно, либо в неведении)

Возможен и другой сценарий, о котором я не подумал, но это более или менее распространяется, если не все возможности.Ниже приведен пример первого сценария:

@media print { .column, aside { float: нет; } }

@media print { .column, в сторону { float: none; } }

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

h3 { цвет фона: # 444; цвет белый; отступ: 7 пикселей; } / * … здесь сотни строк кода … * / aside h3 { фон: нет; цвет: # 444; }

h3 { background-color: # 444; цвет: белый; отступ: 7 пикселей; } / * … здесь сотни строк кода … * / в сторону h3 { фон: нет; цвет: # 444; }

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

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

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

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

Вот что вы могли бы увидеть в инструментах для разработчиков Chrome, если бы у вас был пример в сторону h3 из предыдущего раздела:

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

Будьте явными в CSS

.

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

Например, при чтении руководств по новым функциям CSS, таким как flexbox, вы можете увидеть код, который выглядит так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.container { дисплей: гибкий; Flex-wrap: nowrap; flex-direction: ряд; заказ: 0; граница: сплошная 1px # 444; } .container div { justify-content: гибкий старт; выровнять контент: растянуть; выровнять элементы: гибкий старт; отступ: 10 пикселей; }

. Контейнер { дисплей: гибкий; гибкая пленка: nowrap; flex-direction: ряд; заказ: 0; граница: сплошная 1px # 444; } .контейнер div { justify-content: flex-start; align-content: stretch; align-items: гибкий старт; отступ: 10 пикселей; }

002 В приведенном выше примере немного все преувеличил, но некоторые онлайн-примеры кода сходны с этим. Если вы новичок в вопросах, связанных с flexbox, то, вероятно, вы не видите проблем в этом коде. Но угадайте, что? Следующий код эквивалентен приведенному выше (предполагаемая, что к этому элементу не используемый другой CSS):

.container { дисплей: гибкий; border: solid 1px # 444 ;; } .container div { отступ: 10 пикселей; }

. Контейнер { дисплей: гибкий; граница: сплошная 1px # 444 ;; } .container div { padding: 10px; }

Шесть из семи свойств, связанных с flexbox, которые я включил в предыдущий пример, были удалены, потому что для всех них были установлены начальные значения, поэтому эти строки были излишними.

В этом случае я не возражаю против включения этих дополнительных строк, потому что это может быть доступно для некоторых возможных свойств flexbox вместе с предоставленными значениями. Таким образом, это тот случай, когда код позволяет его сканировать. В конце концов, хотя в урезанной версии ясно, что элемент .container является гибким контейнером, что вложенные элементы div с отступом 10px являются гибкими элементами.

Указание начальных значений в комментариях

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

.container { дисплей: гибкий; Flex-wrap: nowrap; / * начальное значение * / граница: сплошная 1px # 444; } .container div { выровнять контент: растянуть; / * начальное значение * / выровнять элементы: гибкий старт; / * начальное значение * / отступ: 10 пикселей; }

. Контейнер { дисплей: гибкий; гибкая пленка: nowrap; / * начальное значение * / border: solid 1px # 444; } .контейнер div { align-content: stretch; / * начальное значение * / align-items: flex-start; / * начальное значение * / padding: 10px; }

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

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

h3 { цвет фона: # 444; цвет белый; отступ: 7 пикселей; } / * … здесь сотни строк кода … * / aside h3 { фон: нет; / * переопределяем снова на начальное значение * / цвет: # 444; }

h3 { background-color: # 444; цвет: белый; отступ: 7 пикселей; } / * …здесь сотни кода … * / кроме h3 { фон: нет; / * переопределяем снова на начальное значение * / color: # 444; }

И я полагаю, что в некоторых случаях было бы лучше на следующее писать:

aside h3 { цвет фона: начальный; / * переопределяем * / цвет: # 444; }

в сторону h3 { background-color: initial; / * переопределяем * / цвет: # 444; }

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

Заключение

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

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

Поэтому мои рекомендации для объявления начальных значений таковы:

Потратьте время на то, чтобы понять, какие значения являются начальными и как они работают (в том числе в сокращениях).

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

Позаботьтесь о том, чтобы вы не включали лишние строки в новые функции, такие как flexbox (или используйте комментарии).

Автор: Луи Лазарис

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD в HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть.

No related posts.