Должен ли я использовать одно или двойное обозначение двоеточия для псевдоэлементов?
Так как IE7 и IE8 не поддерживают обозначение с двойной колонкой для псевдоэлементов (например, ::after
или ::first-letter
), а поскольку современные браузеры поддерживают нотацию с одним двоеточием (например, :after
) для обратной совместимости, следует ли использовать только однонаемное обозначение, и когда доля рынка IE8 падает до незначительного уровня, вернитесь назад и найдите/замените в моей базе кода? Или я должен включить оба:
.foo:after,
.foo::after { /*styles*/ }
Использование двойного одиночества кажется глупым, если меня волнуют пользователи IE8 (бедняки).
Ответы
Ответ 1
Использовать не как в сочетании с запятой. Совместимый с 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*/ }
С другой стороны, это более подробно, чем необходимо; пока вы можете придерживаться однострочной нотации.
Ответ 2
От Селектор CSS3 REC:
Эта:: нотация вводится текущим документом, чтобы установить дискриминацию между псевдоклассами и псевдоэлементами.
Для совместимости с существующими таблицами стилей пользовательские агенты также должны принимать предыдущую однозонатную нотацию для псевдоэлементов, введенных в CSS-уровнях 1 и 2 (а именно: first-line,: first-letter,: до и: после).
Эта совместимость не допускается для новых псевдоэлементов, представленных в этой спецификации.
Кажется, вы безопасно используете (только) однотопливные обозначения для псевдоэлементов, которые уже существовали в CSS2.1, поскольку UA должны быть обратно совместимы.
Ответ 3
Я абсолютно не согласен с @mddw и @FelipeAls в отношении рассмотрения использования одного двоеточия "безопасным".
Это "я буду использовать его, несмотря на то, что он устарел", так это то, почему технологии на базе браузера настолько медленны, что продвигаются вперед и продвигаются вперед.
ДА, мы хотим поддерживать совместимость со старыми стандартами. Давайте посмотрим правде в глаза, это рука, которую мы получили. НО, это не значит, что у вас есть предлог для ленивости в вашем развитии, игнорируя текущие стандарты в пользу устаревших.
Конечная цель должна состоять в том, чтобы поддерживать соответствие действующим стандартам, поддерживая как можно больше устаревшего стандарта.
Если псевдоэлементы используют :
в CSS2 и ::
в CSS3, мы не должны использовать тот или иной; мы должны использовать оба.
Чтобы полностью ответить на заданный исходный вопрос, следующий метод наиболее подходящий поддерживает самую последнюю версию CSS (версия 3), сохраняя при этом устаревшую поддержку версии 2.
.foo:after {
/* styles */
}
.foo::after {
/* same styles as above. */
}
Ответ 4
Тем не менее, становится все более популярным использование полифилов как для нового javascript, так и для CSS, поэтому вы можете просто использовать новый синтаксис double-colon (::
:) и поддерживать полиполк для старых браузеров, если это необходимо,
Ответ 5
Для чего он стоит по статистике браузера 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 и начать использовать:: для Pseudo Elements.
Ответ 6
Включение обоих обозначений, безусловно, более безопасно, но я не вижу, чтобы какой-либо браузер удалял одну нотацию в течение длительного времени, поэтому только один из них будет в порядке (это действительно CSS2.)
Personnaly Я использую только одну нотацию двоеточия, в основном по привычке.