Можно ли заставить Chrome возвращать необработанное значение CSS-свойства «content»? - PullRequest
Новая
       15

Можно ли заставить Chrome возвращать необработанное значение CSS-свойства «content»?

7 голосов
/ 17 марта 2019

Учитывая следующие коды JavaScript, CSS и HTML: 

console.log(getComputedStyle(document.querySelector('p'), '::after').getPropertyValue('content'));
p::after {
    content: "Hello" attr(data-after);
}
<p data-after=" World"></p>

И Firefox, и IE11 возвращают необработанное значение, определенное в CSS: "Hello" attr(data-after), и это то, что мне нужно.

Но Chrome возвращает "Hello World", проанализированное значение.

Когда я использую Chrome DevTools для проверки элемента, я вижу, что на панели «Стили» отображается следующая информация: 

p::after {
    content: "Hello" attr(data-after);
}

Похоже, что в Chrome все еще есть возможность узнать исходное значение.

Есть ли какое-либо решение JavaScript, чтобы Chrome возвращал необработанное значение, определенное в CSS, как это делают Firefox и IE11? Даже эксклюзивный метод Chrome хорош, если его можно использовать в JavaScript.

Объясненная ситуация

В ответ на вопрос участника о причине, вот ситуация:

Я пытаюсь создать "polyfill" для CSS speak: never на псевдоэлементах. Свойство speak в настоящее время не поддерживается ни одним браузером.

CSS-псевдоэлементы могут быть прочитаны программами чтения с экрана, и в настоящее время невозможно легко скрыть их от программ чтения с экрана. Обычно подход к этой проблеме заключается в использовании HTML-кода, такого как <span aria-hidden="true">...</span>, вместо удобных псевдоэлементов CSS и speak: never, и, на мой взгляд, такой подход неудобен и разочаровывает.

Таким образом, это заполнение в основном относится к веб-доступности.

Для работы этого полифайла разработчикам CSS потребуется написать немного дополнительного кода CSS в качестве индикатора, например attr(speak-never): 

p::after {
    content: "please make me inaudible" attr(speak-never);
    }

А затем в JavaScript полифильт перебирает каждый элемент на странице и проверяет, содержит ли его значение псевдоэлементов ::before и ::after свойство CSS content attr(speak-never). Если эта строка индикатора найдена, тогда полифилл исправит псевдоэлементы (путем добавления пользовательских элементов <before aria-hidden="true">...</before> и <after aria-hidden="true">...</after> программно).

Теперь проблема в том, что Chrome не может вернуть указанное attr(speak-never) в JavaScript. Хотя полифилл также может работать, требуя от разработчиков CSS добавления еще одного индикатора, такого как --speak: never для Chrome, лучше, чтобы полифилл делал работы разработчиков CSS как можно более простыми и не требовал дополнительного индикатора --speak: never.

Так вот почему этот вопрос был создан.

Update

Я решил использовать counter-reset: speak-never в качестве индикатора вместо этого, потому что он может быть прочитан в JavaScript всеми браузерами.

Ответы [ 2 ]

2 голосов
/ 17 марта 2019

Не уверен, что добавить что-то вроде attr(speak-never) будет чище, чем проходить через разметку HTML ...

Но этот вопрос указывает на интересную вещь: Chrome начал реализацию CSSTypedOM, которую мы должны были бы использовать, чтобы найти исходный набор значений, как продемонстрировано в этом ответе .

Однако для нацеливания на псевдоэлементы планируется, что будет интерфейс псевдоэлемента и расширение для элемента Element, чтобы мы могли вызывать Element.pseudo(::type) для нацеливания на его псевдоэлементы. элементы. Но эта часть спецификаций еще не была реализована в Chrome, поэтому в настоящее время нет никакого способа получить доступ к TypedValues ​​псевдоэлементов в Chrome.

Таким образом, мы сами разбираем таблицы стилей со всеми предостережениями, благодаря которым w3c разработал настоящий API: нет доступа к таблицам стилей разных источников, нет прямого способа узнать, действует ли правило на элементе или если другой имеет большее значение и тому подобное ...

1 голос
/ 17 марта 2019

Вы можете найти правило через document.styleSheets. Свойство облегчает список таблиц стилей, состоящих из нескольких правил, состоящих из нескольких свойств. Затем вы можете просмотреть таблицы стилей и правила и извлечь из них значение необработанного свойства.

Это базовый подход, который учитывает правила, непосредственно определенные в элементах <style> и <link>: 

for (let sheet of document.styleSheets) {
    for (let rule of sheet.rules) {
        if (/:(before|after)$/.test(rule.selectorText)) {
            console.log(rule.style.content);
        }
    }
}

Обратите внимание, что таблицы стилей @include или запросы @media здесь не обрабатываются. Доступ к ним можно получить, проверив, что rule.type соответствует 3 или 5, соответственно, и пройдя атрибут styleSheet этого правила. См. список типов .

...