Должен ли я использовать одинарную или двойную двоеточие для псевдоэлементов?

поскольку IE7 и IE8 не поддерживают двоеточие для псевдоэлементов (например,::after или ::first-letter), и поскольку современные браузеры поддерживают нотацию с одним двоеточием (например,:after) для обратной совместимости я должен использовать только нотацию с одним двоеточием, и когда доля рынка IE8 падает до незначительного уровня, вернитесь и найдите / замените в моей базе кода? Или я должен включить оба:

.foo:after,
.foo::after { /*styles*/ }

использование только double кажется глупым, если я забочусь о пользователях IE8 (бедных голубчики.)

6 ответов


Do не использовать как в сочетании с запятой. CSS 2.1 совместимый (не CSS3 способный) пользовательский агент будет игнорировать все правило:

когда пользовательский агент не может проанализировать селектор (т. е. недопустимый CSS 2.1), он должен игнорировать селектор и следующий блок объявления (если таковой имеется).

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

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

однако вы можете использовать

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

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


с CSS3 селекторы REC:

this :: notation вводится текущим документом, чтобы установить дискриминацию между псевдоклассами и псевдоэлементами.
Для совместимости с существующими таблицами стилей,пользовательские агенты должны также принять предыдущую нотацию с одним двоеточием для псевдо-элементов, введенных в CSS уровней 1 и 2 (а именно: первая строка,: первая буква,: до и: после).
Это совместимость не допускается для новых псевдо-элементов представил в этой спецификации.

кажется, вы безопасно используете (только) одну двоеточие для псевдо-элементов, которые уже существовали в CSS2.1 as UAs должен быть обратно совместим.


Я абсолютно не согласен с @mddw и @FelipeAls, в отношении рассмотрения использования одного двоеточия "безопасно".

Это "я буду использовать его, даже если он устарел" менталитет именно поэтому браузерные технологии так медленно продвигаются и прогрессируют вперед.

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

вне цель должна быть поддерживать соответствие с настоящими стандартами, пока поддерживающ как можно больше из стандарта наследия как возможный.

Если псевдо-элементы использовать : в CSS2 и :: в CSS3, мы не должны использовать один или другой, мы должны использовать и.

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

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}

тем не менее, он становится все более популярным для использования polyfills как для нового javascript, так и для CSS, поэтому вы можете просто придерживаться использования нового двойного двоеточия (::) синтаксис и поддерживать polyfill для старых браузеров, пока это необходимо.


для чего это стоит согласно статистике браузера IE 8.0 упал до менее чем 1% в США за последний год.

http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

в декабре 2015 IE 8.0 имел 2.92% рынка. В декабре 2016 IE 8.0 имел .77% рынка.

при такой скорости снижения это было бы не самое худшее идея прекратить поддержку старых версий IE и начать использовать :: для псевдо-элементов.


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

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