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




псевдоэлементы before (6)

Для того, что стоит в зависимости от статистики браузера, 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 было 0,77% рынка.

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

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

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

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


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

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

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

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

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

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

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

Из селекторов CSS3 REC :

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

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


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


Не используйте оба сочетания с запятой. Совместимый с 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*/ }

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


Pseudo-elements рассматриваются как потомки их ассоциированного элемента. Чтобы расположить псевдоэлемент ниже его родителя, вы должны создать новый контекст стекирования, чтобы изменить порядок укладки по умолчанию.
Позиционирование псевдоэлемента (абсолютное) и присвоение значения z-index, отличного от «auto», создает новый контекст стекирования.

#element { 
    position: relative;  /* optional */
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Position a pseudo-element below its parent</title>
</head>
<body>
  <div id="element">
  </div>
</body>
</html>





css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element