Должен ли я использовать одинарное двоеточие (:) или двойное двоеточие (::) для псевдоэлементов до, после, первой буквы и первой строки?

Из МДН:

Нотация :: была введена в CSS 3, чтобы установить различие между псевдоклассами и псевдоэлементами. Браузеры также принимают нотацию :, представленную в CSS 2.

Если нотация : всегда будет приниматься браузерами CSS3, следует ли мне ее использовать, потому что она работает в старых и новых браузерах?

Или я должен использовать оба из них, : для старых браузеров и :: для новых, потому что нотация : не всегда будет принята?


Примечание: я думаю, что мой вопрос не является дубликатом и не является дубликатом Должен ли я использовать одиночное или двойное двоеточие для обозначения псевдоэлементов? потому что другой вопрос касается одинарного или двойного обозначения для ВСЕХ псевдоэлементов; в то время как мой вопрос касается только псевдоэлементов, определенных в CSS2, а не новых, определенных в CSS3, потому что я уже знаю, что с ними я должен использовать ::.


person Oriol    schedule 16.07.2013    source источник
comment
Вы заботитесь о старых браузерах, таких как IE8? Если это так, используйте :. В противном случае используйте ::.   -  person thirtydot    schedule 16.07.2013
comment
@thirtydot stackoverflow.com/questions/10181729/ спрашивает об одиночной и двойной нотации для ВСЕХ псевдоэлементов. Мой вопрос касается только псевдоэлементов, определенных в CSS2, а не новых, определенных в CSS3; потому что я уже знаю, что с ними я должен использовать ::   -  person Oriol    schedule 16.07.2013
comment
Где в другом вопросе говорится о псевдоэлементах CSS3? :)   -  person thirtydot    schedule 16.07.2013
comment
@thirtydot Нет, другой вопрос касается (всех) псевдоэлементов в целом, потому что спрашивающий считает, что тот факт, что запись с одним двоеточием работает для обратной совместимости, применим ко всем псевдоэлементам. Но мой вопрос явно говорит только о до, после, первой строке и первой букве   -  person Oriol    schedule 16.07.2013
comment
И как вы думаете, о каких других псевдоэлементах CSS2/CSS3 он мог спрашивать в этом вопросе?   -  person thirtydot    schedule 16.07.2013
comment
@thirtydot Я имею в виду, что что-то вроде Эта совместимость не разрешена для новых псевдоэлементов, представленных в этой спецификации [CSS3]., что является частью ответа на другой вопрос, не имеет ничего общего здесь, потому что другой вопрос также спрашивает (неявно) о новых псевдоэлементах, определенных в CSS3   -  person Oriol    schedule 16.07.2013
comment
Честно говоря, я мог бы лучше сформулировать другой вопрос :) Я специально обсуждал проблему «до/после», когда задавал вопрос, и не постарался сформулировать его более полезным образом. Я думаю, что, хотя этот вопрос не является точной копией, он охватывает подмножество другого вопроса.   -  person jinglesthula    schedule 29.07.2014


Ответы (3)


Что бы это ни стоило, Селекторы 4 теперь явно указывают1 авторы должны использовать двойные двоеточия для всех псевдоэлементов, включая псевдоэлементы CSS1 и CSS2 (выделено мной):

Поскольку CSS уровня 1 и CSS уровня 2 объединяли псевдоэлементы и псевдоклассы, используя синтаксис с одним двоеточием для обоих, пользовательские агенты также должны принимать предыдущую нотацию с одним двоеточием для псевдоэлементов уровня 1 и 2 (::before, ::after). , ::first-line и ::first-letter). Эта нотация совместимости не допускает никаких других псевдоэлементов. Однако, поскольку этот синтаксис устарел, авторам следует использовать синтаксис с двойным двоеточием уровня 3+ для этих псевдоэлементов.

Это означает, что единственное правильное использование синтаксиса с одним двоеточием сегодня — это если вам абсолютно необходима поддержка устаревшего браузера — единственный браузер, который здесь имеет значение, — это IE8 и старше. Если вы этого не сделаете, вам следует использовать синтаксис с двойным двоеточием для согласованности с новее псевдоэлементы, которые принимают только двойные двоеточия. Кроме того, совершенно бессмысленно использовать синтаксис с одним двоеточием, если, например, вы собираетесь применять свойства, которые в любом случае не поддерживаются IE8, такие как border-radius или box-shadow, к вашим ::before и ::after псевдоэлементы.

Я хотел бы верить, что Selectors 3, по крайней мере, подразумевал это в своем заявлении о том, что синтаксис с одним двоеточием не применяется к каким-либо более новым псевдоэлементам, но такие вещи указаны черным цветом и белый никогда никому не вредил, и приятно знать, что предстоящий стандарт делает именно это.

Кроме того, нет абсолютно никакой причины писать повторяющиеся правила с обеими нотациями в одной и той же таблице стилей (например, :before, :after { ... } ::before, ::after { ... }), так как ни один из существующих браузеров не поддерживает новый синтаксис без поддержки старого.


1 Я говорю это, полностью осознавая, что, вероятно, это еще не было заявлено в то время, когда был задан этот вопрос — Май 2013 года WD, конечно же, нет.

person BoltClock    schedule 15.02.2015
comment
Кроме того, совершенно бессмысленно использовать синтаксис с одним двоеточием, если, например, вы собираетесь применять стили к своим псевдоэлементам ::before и ::after, которые в любом случае не поддерживаются IE8. Я полагаю, что последний подпункт относится к стилям, а не к псевдоэлементам? Предложение довольно двусмысленное: его можно прочитать так, как будто вы имеете в виду, что до/после не поддерживается в IE8, а это так. - person Bram Vanroy; 21.04.2015
comment
Кажется, предложение авторы ДОЛЖНЫ всегда использовать синтаксис с двойным двоеточием было в какой-то момент исключено, но вчера CSSWG решено добавить рекомендацию СЛЕДУЕТ. - person Oriol; 15.09.2015
comment
@Oriol: я понимаю, почему они это изменили. ДОЛЖЕН подразумевать соответствие — все таблицы стилей, использующие устаревший синтаксис, не пройдут проверку без уважительной причины. - person BoltClock; 15.09.2015

Как я уже упоминал в этом комментарии ранее - http://css-tricks.com/html5-progress-element/#comment-533395

Короткий ответ — используйте одиночное двоеточие :.

Длинный ответ. Нет реальной разницы между :before и ::before или между :after и ::after. Но поскольку старые браузеры используют нотацию с одним двоеточием, использование : всегда более безопасно. Прочтите эту спецификацию, определенную W3C для псевдоэлементов в котором говорится, что

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

person Pankaj Parashar    schedule 23.09.2013

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

person Brad    schedule 17.07.2013