Содержание CSS: attr() для HTML5 не работает

Ответ 1

В моем первоначальном комментарии я сказал:

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

Другими словами, это классифицирует progress как заменяемый элемент . Как и в случае с традиционными input и другими элементами формы, которые являются замененными элементами, а также img, CSS2.1 не так много сказать об использовании сгенерированный контент:

Примечание. Эта спецификация не полностью определяет взаимодействие: before и: after с замененными элементами (например, IMG в HTML). Это будет определено более подробно в будущих спецификациях.

Хорошо известно, что браузеры на базе Gecko предпочитают не поддерживать сгенерированный контент для замещенных элементов, в то время как браузеры на основе WebKit позволяют это в некоторой степени, по крайней мере, для элементов формы, которые заменяют элементы. (Интересно, что progress::before и progress::after не работают в любом браузере.) Поэтому, если вы спрашиваете, возможно ли это сделать для кросс-браузера, ответ не будет, и всегда было не так.

Что касается того, почему браузеры WebKit могут вставлять строки, а не значения attr(), я не уверен. Оба CSS2.1 и Единицы и значения CSS3 утверждают, что attr() должен принимать значения из атрибутов фактического элемент, генерирующий эти псевдоэлементы, поскольку псевдоэлементы в любом случае не могут иметь атрибутов. Вот где я в тупике.

Возможно, браузер неправильно пытается использовать атрибут data-value из ::-webkit-progress-bar и ::-webkit-progress-value, а не элемент progress, поэтому content не работает при использовании attr(), но работает при использовании строка.

Возможно, корень проблемы заключается в том, что вы пытаетесь добавить сгенерированный контент к другим псевдоэлементам, которые, похоже, снова работают в браузерах WebKit по какой-то причудливой причине. В отличие от вышеупомянутой проблемы с сгенерированным содержимым в замещаемых элементах, текущая спецификация Selectors 3 и предстоящий Selectors 4 spec оба очень ясны в этом: у вас не должно быть более одного псевдоэлемента на сложный селектор. Разумеется, WebKit погрязла в различных правилах, когда дело касается реализации псевдоэлементов, поэтому в ретроспективе меня не удивляет, что WebKit испортил это.

В любом случае, реальный вывод заключается в том, что реализация содержимого, созданного CSS, чрезвычайно плохо выходит за рамки текущего стандарта CSS2.1 + Selectors, под которым я подразумеваю сгенерированный контент для замещенных элементов, таких как input и progress и вложение псевдоэлементов в один селектор.

Ответ 2

<progress></progress>

Он не принимает текст, который вам нужно сделать, это настроить ваш css.

HTML:

<progress max="100" value="80" data-value="80"></progress>
<span class="percentage">80% Done</span>

CSS

progress { margin: 0px; width:250px; border:0; }

/* CSS (Attempt 1) */

    progress:before, progress:after { content: attr(data-value); }

/* CSS (Attempt 2) */

    progress::-webkit-progress-bar:before,
    progress::-webkit-progress-bar:after { content: attr(data-value); }

    progress::-moz-progress-bar:before,
    progress::-moz-progress-bar:after { content: attr(data-value); }

/* CSS (Attempt 3) */

    progress::-webkit-progress-value:before,
    progress::-webkit-progress-value:after { content: attr(data-value); }
    progress::-moz-progress-value:before,
    progress::-moz-progress-value:after { content: attr(data-value); }

    .percentage{
        float: left;
        margin-left:100px;
        margin-top: -20px;
        position: absolute;
        display: block;
        color: #FFF;
    }

Ответ 3

Похоже, что @BoltClock верен - content: attr(value) ищет атрибут value в элементе теневой DOM -webkit-progress-value, а не в действительном элементе <progress>:

h4 { margin: 2em 0 0; }
progress {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}
progress::-webkit-progress-value:before {
  position: absolute;
  right: 0;
  bottom: -125%;
}
progress.show-value::-webkit-progress-value:before {
  content: attr(value);
}
progress.show-data-value::-webkit-progress-value:before {
  content: attr(data-value);
}
progress.show-style::-webkit-progress-value:before {
  content: attr(style);
}
progress.show-pseudo::-webkit-progress-value:before {
  content: attr(pseudo);
}

<h4><code>attr(value)</code>:</h4>
<progress class="show-value" max="100" value="80" data-value="5"></progress>

<h4><code>attr(data-value)</code>:</h4>
<progress class="show-data-value" max="100" value="80" data-value="5"></progress>

<h4><code>attr(style)</code>:</h4>
<progress class="show-style" max="100" value="80" data-value="5"></progress>

<h4><code>attr(pseudo)</code></h4>
<progress class="show-pseudo" max="100" value="80" data-value="5"></progress>