[Перевод] Викторина из 15 вопросов: хорошо ли вы знаете CSS16.11.2015 13:03

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

* {
  margin: 0;
  padding: 0;
}

Should You Reset Your CSS?

В CSS есть несколько способов спрятать HTML-элемент.

Установив свойству visibility значение hidden, мы спрячем элемент. Он всё ещё будет занимать место на странице, равное его размерам. К примеру, если размеры элемента — 100×100 px, вы увидите пустое место размером 100×100 px на том месте, где он должен быть. Также можно назначить ему opacity: 0.

Спрятать элемент так, чтобы он не занимал место, можно назначить свойству display значение none. Это приводит к такому же эффекту, как если бы элемента вообще не было.

#object h2:first-letter

Его значение специфичности — 102. У второго — 24.

How CSS Specificity Works

• : link
• : visited
• : hover
• : active

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

Один из примеров, где видна эта важность — это гиперссылка. Предположим, вы наводите вашу мышь на ссылку, и затем кликаете по ней, не сдвигая мыши. В этот момент ссылка удовлетворяет сразу двум селекторам, : hover и : active.

Значит, если правило : active будет выше, чем : hover, то пользователи вообще не увидят применения правила : active.

Запомнить порядок можно при помощи мнемонического правила LVHA. Link → Visited → Hover → Active.

CSS Link Pseudo-classes

Отрывок из спецификаций outline, 18.4 Dynamic outlines: the «outline» property:

Обводка, созданная через свойство outline, рисуется «поверх» бокса, то есть outline всегда сверху, и не влияет на позицию и размер бокса или других боксов. Поэтому, показ или скрытие outline не приводит к пересчёту страницы.

Допустимые типы перечислены в Media Queries W3C. voice — недопустимый тип. Зато существует тип speech.

Пример, в котором цвета background-color и border будут равны значению свойства color:

.box {
  color: green;
  background-color: currentColor;
  border: 1px dashed currentColor;
}

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

»4.4. currentColor color keyword» в CSS Color Module Level 3

Introduction to CSS Variables

• ch и rem — длина шрифта
• turn — единица для угла
• px — абсолютная единица длины
• dpcm — единица для разрешения экрана
• s — единица времени
• hz — единица частоты

Раздел »5. Named Colors» в CSS Color Module Level 4 Editor«s Draft