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

108

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

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

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

css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element джинглестхула
источник

Ответы:

71

Как не использовать оба в сочетании с запятой. Пользовательский агент, совместимый с 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*/ }

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

user123444555621
источник
7
спасибо, что включили информацию о запятой и игнорировании. Это, вероятно, заставило бы меня (и, возможно, других) некоторое время почесать затылки. Похоже, что лучше всего, когда 99% используемых браузеров поддерживают нотацию с двойным двоеточием, - это перейти на использование этого и (потому что никто не откажется от поддержки одного двоеточия и сломает сеть, поэтому на самом деле нет даже смысла в более позднем find / замена старого кода на этом этапе).
jinglesthula
2
Это не путь вперед. Прогресс браузера будет принудительно ускорен, если люди перестанут потакать допотопным, сломанным и устаревшим браузерам.
Gershom
2
@Gershom Maes: К сожалению, это не тебе говорить. Я думаю, что большая часть разработчиков надеется на то же самое, но этого просто не произойдет.
BoltClock
@Gershom Maes, мы можем мечтать
Джеймс Кушинг,
1
Я считаю важным отметить, что сохранение повторяющихся стилей может быть проблематичным. Как отмечает ниже cHao, повторяющийся код любит расходиться. Большинству разработчиков, вероятно, придется укусить его несколько раз, чтобы выругаться :)
jinglesthula
62

Из CSS3 Selectors REC :

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

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

ФелипеАльс
источник
1
Для протокола, этот ответ также можно было бы отметить как правильный. Это дает некоторую ценную перспективу, хотя толчком к первоначальному вопросу были именно псевдоэлементы до и после. Спасибо, что добавили.
jinglesthula
Как вы пришли к такому выводу? Я пришел к противоположному выводу ... если одинарные двоеточия не будут разрешены для новых псевдоэлементов, не следует ли вам начать использовать двойные двоеточия, чтобы получить привычку?
andrewtweber 04
@andrewtweber в контексте исходного вопроса (IE8) использование double нарушит CSS. Тем не менее, на момент написания этой статьи большинство сайтов, вероятно, видят использование IE8 на таком низком уровне, что позволяет удвоение без каких-либо серьезных последствий. Можно полагаться, что производители браузеров будут поддерживать единую нотацию на неограниченный срок, но на данный момент нет ничего плохого в том, чтобы сменить привычку кодирования.
jinglesthula
@andrewtweber +1 для OP Да, IE8 должен был быть учтен в 2012 году и - YMMV - все еще находится в 2015 году в огромных проектах B2B и подобных им, но не в других веб-проектах. Оба обозначения совершенно справедливы для этих существующих псевдонимов. Минификация CSS получит 1 байт при использовании записи с одним двоеточием. Если вы хотите всегда использовать одну нотацию и запрещать другую, что ж, это соглашение, вы полностью свободны делать это со своей командой, но это не РЕКОМЕНДАЦИЯ.
FelipeAls 05
@jinglesthula и Фелипе, вы правы, я не заметил дату. Возможно, ответ следует обновить, поскольку этот вопрос занимает
одно из первых мест
22

Я абсолютно не согласен с @mddw и @FelipeAls в отношении использования одного двоеточия как «безопасного».

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

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

Наша цель должна состоять в том, чтобы поддерживать соответствие текущим стандартам, поддерживая при этом как можно больше унаследованных стандартов.

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

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

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}
Джошуа Бернс
источник
3
Я думаю, довольно безопасно предположить, что производители браузеров будут продолжать поддерживать старую нотацию на неопределенный срок из-за того, что объем кода, который реально никогда не будет обновляться, они хотят, чтобы их браузер отображал «правильно». С другой стороны, я думаю, что сохранение отдельных копий стилей поднимает красный флаг DRY. Я думаю, что будет более прагматично, чем лениться, использовать нотацию с одним двоеточием, пока доля рынка IE7 не упадет. Тем не менее, я хочу, чтобы Интернет двигался вперед, как никто другой!
jinglesthula
9
Если вы « абсолютно не согласны » с моим ответом, то вы абсолютно не согласны со словом « должен» в рекомендации W3C REC. « Наша цель должна состоять в том, чтобы поддерживать соответствие текущим стандартам, поддерживая при этом как можно большую часть устаревшего стандарта». Это то, что рассматривается в этой части REC, и в ней прямо говорится, что UA не должны заставлять авторов использовать обе нотации. и объясняет, как это должны делать UA. Не стесняйтесь обращаться в список рассылки CSS WG, если вас это не устраивает (или на Twitter @glazou, сопредседателя этой рабочей группы)
FelipeAls
4
Я не не согласен со всем вашим ответом, только относительно использования одного двоеточия как «безопасного». совместимость не допускается для новых псевдоэлементов означает, что любые будущие псевдоэлементы будут реализованы только в ::. В соответствии с вашим подходом, люди затем начнут смешивать и согласовывать использование псевдоэлементов :и ::для них. Явное соблюдение старого стандарта (который в настоящее время может поддерживаться) является по своей сути плохой практикой, и ее следует избегать, когда это возможно. Если вы не согласны с этим утверждением, мы просто придерживаемся разных взглядов.
Джошуа Бернс
4
Придерживаясь к явно совместимому стандарту по своей сути не плохая практика, если совместимость цель. С другой стороны, использование обоих приводит к дублированию стилей - и, как известно любому, кто кодировал какое-то время, дублированный код просто любит расходиться.
cHao
8
@JoshuaBurns Если бы мой предшественник продублировал загрузку кода для защиты от воображаемой будущей угрозы, я бы почувствовал себя гораздо более «облаженным».
Марк Эмери
2

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

ZPR
источник
По сути, это просто мета-ответ; он не предоставляет никакой полезной информации. Если ответ устарел, проголосуйте против него и / или прокомментируйте, указав на это.
TylerH
2
почему бы также не связать такой полифилл, чтобы мы могли использовать его без дальнейших поисков в Google?
MightyPork
4
да, первая часть может быть мета, но я думаю, что вторая часть - хороший ответ. Там, где я работаю, мы не используем препроцессор и / или полифиллы, поэтому принятый ответ мне подходит. Но для любого магазина или разработчика, использующего такие инструменты, этот ответ, вероятно, более полезен.
jinglesthula 07
1

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

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

В декабре 2015 года IE 8.0 занимал 2,92% рынка. В декабре 2016 года IE 8.0 занимал 0,77% рынка.

При таких темпах снижения было бы не самой плохой идеей прекратить поддержку старых версий IE и начать использовать :: for Pseudo Elements.

DR01D
источник
Что стоит отметить :) Также стоит отметить, что это все еще зависит от ситуации. Если вы Amazon, 0,5% ваших пользователей составляют более миллиона клиентов, которые считают, что ваш сайт неисправен. Если вы ведете блог для стартапа из 10 человек, ставки могут быть другими.
jinglesthula
Определенно верно в отношении такой организации, как Amazon. Но эти 0,77% неравномерно распределяются по всему населению. Непропорционально много стариков или людей с небольшими деньгами, которые не могут обновиться. С чисто деловой точки зрения это, вероятно, не идеальные целевые рынки. Таким образом, для большинства компаний группа 0,77% даже менее значима, чем предполагает это небольшое число. И это число будет только уменьшаться.
DR01D
Хорошие моменты. Еще одна группа, в которой обновление представляет собой тяжелую борьбу, - это правительственные и бизнес-группы, которые в значительной степени полагаются на приложения, которые будут работать только с определенной версией браузера (хотя, к счастью, такие группы со временем также уменьшатся). Пусть никому из вас никогда не придется
писать
0

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

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

mddw
источник
1
Как ясно из других ответов, это немного сложнее, чем это, и есть некоторые неочевидные ловушки (например, поддержка нотации с одним двоеточием для псевдоэлементов CSS 3 является явным нарушением спецификации, поэтому для авторов CSS кажется разумным не для использования записи с одним двоеточием для этих селекторов).
Марк Эмери