Недавно я работал над проектом SitePoint: Ultimate CSS Reference (скоро! Если вы в CSS, то ваш мир потрясет). Исследуя тенистые уголки Интернета на предмет следов тайных знаний CSS, я понял, что большая часть информации о CSS в Интернете остро нуждается в обновлении.
В период с 2001 года по настоящее время у нас был взрыв знаний и общего понимания CSS, в Интернете полно учебников, статей и сообщений в блогах, написанных в эту эпоху просвещения. Но время движется и браузеры улучшаются. Уровень поддержки CSS в современных браузерах чертовски хорош, и как глубокие знания хаков CSS быстро становятся излишними, так и большая часть этого материала. На самом деле, некоторые из них вводят в заблуждение, и ваши результаты поиска будут переполнены благими намерениями, но устаревшей информацией.
Среди страниц тайного знания CSS вы найдете нечто, называемое CSS-каскадом; вещь, которая в конечном итоге решает, каким будет стиль каждого элемента. Он имеет репутацию трудного для понимания и часто является причиной тех разочаровывающих, неясных проблем CSS, когда то, что происходит в браузере, совсем не похоже на то, что вы ожидали. Количество дезинформации в Интернете, безусловно, не помогает, так что это мое небольшое усилие, чтобы исправить ситуацию: развеять два самых больших мифа о CSS Cascade.
Миф: встроенные стили имеют приоритет над внешними стилями, а встроенные стили имеют приоритет над встроенными стилями.
Что касается браузеров, то не имеет значения, как CSS связан с документом; все три из этих методов имеют одинаковое происхождение: авторская таблица стилей. То, что заставляет один перезаписывать другой, не имеет ничего общего с тем, как они связаны с документом.
Если важность и специфичность равны, единственное, что имеет значение, это порядок источника; когда элемент link таблицы стилей появляется после элемента style (встроенного стиля), в заголовке документа внешние стили перезаписывают встроенные стили. Я думаю, что этот миф развился потому, что обычно люди ставят свои элементы link перед элементами style .
Встроенные стили перезаписывают идентичные объявления стилей в других таблицах стилей только потому, что они имеют более высокую специфику (см. Ниже), но важные объявления (см. Также ниже) перезаписывают встроенные стили независимо от того, откуда приходят объявления — даже внешние таблицы стилей.
Миф: Специфичность может быть представлена общим счетом.
Вы, наверное, видели эту формулу раньше:
specificity = number of IDs * 100 + number of classes * 10 + number of elements * 1
Таким образом, селектор, такой как p.introduction будет иметь оценку селектора 11 (10 + 1). Хотя, конечно, легко понять, это может быть очень обманчиво; Вы можете начать думать, что если у вас есть 10 имен элементов в вашем селекторе, то это эквивалентно 1 имени класса, и это просто неправильно. Этот миф, вероятно, является наследием плохо сформулированных объяснений в старых спецификациях CSS1 и 2.
1 селектор идентификатора всегда будет иметь более высокую специфичность, чем любое количество селекторов классов, даже миллион селекторов классов! Как только каскад достигает точки сортировки двух или более объявлений свойств по специфичности, он делает это так:
- Один встроенный стиль? Это выигрывает! Если они не встроены, перейдите к пункту b.
- Подсчитайте число, если идентификаторы в селекторах. Самый высокий балл побеждает! Тот же счет? Перейдите к c.
- Подсчитайте количество атрибутов, имен классов и псевдоклассов. Самый высокий балл побеждает! Тот же счет? Перейдите к d.
- Подсчитайте количество имен элементов или псевдоэлементов. Самый высокий балл побеждает!
Если на последнем шаге у них одинаковая оценка, то они имеют одинаковую специфику, и порядок исходов определяет, какой из них выигрывает (тот, который последним в источнике)
Спецификация CSS2.1 выразила бы результат подсчета выше в форме a,b,c,d (a = 1, если истина, 0 в противном случае). Таким образом, встроенный стиль имеет специфичность 1,0,0,0 а селектор типа p.introduction имеет специфичность 0,0,1,1 (один класс и одно имя элемента). Вы не можете просто удалить запятые .
Это также устраняет некоторые другие незначительные заблуждения:
- Неправильно : дочерний селектор, такой как
div>pимеет более высокую специфичность, чем дочерний селектор:div p. Из вышеприведенного процесса вы можете видеть, что комбинаторы даже не включены; они не имеют значения. Эти два селектора имеют одинаковую специфичность0,0,0,2(2 имени элемента). Универсальный селектор:*, также игнорируется. - Неверно : селектор типа
#someidимеет более высокую специфичность, чемp#someidпотому что селектор идентификатора стоит первым. Порядок не имеет значения, просто посчитайте количество компонентов в селекторе.#someidимеет специфичность0,1,0,0аp#someidимеет более высокую специфичность0,1,0,1. - Неправильно
!importantдекларация имеет более высокую специфичность, чем обычная. Как вы увидите ниже, специфичность не имеет к этому никакого отношения. - Неправильно : унаследованное свойство имеет более низкую специфичность, чем объявленное. Опять же, как вы увидите ниже, специфичность не имеет к этому никакого отношения. На самом деле наследование не имеет ничего общего с каскадом!
Получаешь уютно с каскадом
Каскад CSS легче понять, чем вы думаете, и как только вы его получите, ваше понимание CSS займет огромный скачок.
Вот каскад в 4 простых шага; это процесс, который происходит для каждого свойства CSS для каждого элемента веб-страницы:
- Соберите все декларации на недвижимость из всех источников. Это включает стили браузера по умолчанию и пользовательские стили, а также таблицы стилей автора. Если их несколько, перейдите к 2.
- Сортируйте объявления по важности и происхождению в следующем порядке (от самого низкого до самого высокого приоритета):
- таблицы стилей агента пользователя (стили браузера по умолчанию)
- обычные объявления в пользовательской таблице стилей (пользовательская таблица стилей)
- обычные объявления в таблице стилей автора (таблицы стилей веб-страницы; внешние, встроенные и встроенные стили)
-
!importantобъявления в таблице стилей автора -
!importantобъявления в таблице стилей пользователя
Побеждает тот, у кого самый высокий приоритет. Если более одного имеют одинаковый приоритет, переходите к 3.
- Сортировка по специфике селектора (см. Процесс выше). Победит тот, у кого самый специфический селектор. Если нет явного победителя, перейдите к 4.
- Тот, который идет последним в источнике, побеждает!
Если в каскаде не установлено свойство CSS для элемента, браузер вернется к использованию унаследованного свойства от родительского элемента (это происходит только для некоторых свойств), в противном случае для свойства устанавливается значение по умолчанию CSS.
Это оно! Не слишком сложно, а? Теперь вы понимаете кое-что о CSS, которое когда-то знал только гуру! Теперь, если вы играете, вставайте и танцуйте джиг, чтобы праздновать. Я конечно сделал!
* бегает с футболкой над головой, руки в воздухе, кричит WOOOOHOOOOO! *
Хорошо, постарайтесь не представлять это в своей голове …
Если вы хотите по-настоящему познакомиться с CSS так, чтобы ваш мозг не растаял, попробуйте видео SitePoint: Курс по ускоренному видео CSS .