Вопрос по css, css-selectors – Должен ли я использовать одинарные или двойные двоеточия для псевдоэлементов?

103

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

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

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

Ваш Ответ

6   ответов
2

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

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

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

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

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

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

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

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

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}
Придерживаясьexplicitly compatible стандарт по своей сутиnot плохая практика, если цель - совместимость. С другой стороны, использование обоих приводит к дублированию стилей - и, как известно любому, кто какое-то время кодирует, дублированный код просто любит расходиться.
@JoshuaBurns Если бы мой предшественник продублировал множество кода для защиты от воображаемой будущей угрозы, я бы чувствовал себя гораздо более «обманутым».
Если вы & quot;absolutely disagree& Quot; с моим ответом, то вы абсолютно не согласны со словомmust в рекомендации W3C. & Quot;Out goal should be to maintain compliance with current standards, while supporting as much of the legacy standard as possible.& Quot; это то, что рассматривается в этой части REC, и в нем прямо говорится, что UA не должны заставлять авторов использовать обе нотации, и объясняется, как это должно быть сделано этими UA. Не стесняйтесь обращаться к списку рассылки CSS WG, если вы не согласны с этим (или в Twitter @glazou, сопредседатель этой рабочей группы)
Я думаю, что вполне безопасно предположить, что производители браузеров будут продолжать поддерживать старую нотацию в течение неопределенного времени из-за объема кода, который практически никогда не будет обновляться, если они хотят, чтобы их браузер отображал «правильно». С другой стороны, сохранение отдельных копий стилей поднимает СУХОЙ красный флаг, я думаю. Я думаю, что более прагматично, чем лениво использовать нотацию с одним двоеточием, пока доля рынка IE7 не упадет. Тем не менее, я хочу, чтобы сеть двигалась вперед так же, как и все остальные! jinglesthula
Я не согласен со всем вашим ответом, только относительно использования единственного двоеточия в качестве «безопасного».compatibility is not allowed for the new pseudo-elements означает, что любые будущие псевдоэлементы будут реализованы только в::, Согласно вашему подходу, люди начнут смешивать и сочетать использование: а также:: для псевдоэлементов. Явное соблюдение старого стандарта (который в настоящее время может быть поддержан) является по своей сути плохой практикой, и ее следует избегать, когда это возможно. Если вы не согласны с этим утверждением, мы просто придерживаемся разных взглядов.
1

Что касается его стоимости, согласно Browser Stats, то 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.02.92% рынка. В декабре 2016 года IE 8.0.77% рынка.

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

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

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

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.

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

Вы могли бы однако использовать

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

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

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

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

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements.
For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after).
This compatibility is not allowed for the new pseudo-elements introduced in this specification.

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

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

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

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

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

Похожие вопросы