Как я могу прочитать текст CSS через Javascript, как определено в таблице стилей?

Question

Я думал об использовании Javascript для автоматического преобразования атрибутов CSS3, таких как border-radius, transform, box-shadow и т. Д., В их специфичные для браузера аналоги.

Я провел некоторое исследование и обнаружил, что вы можете перебирать таблицы стилей, определенные с помощью document.styleSheets. Вы можете найти правила CSS через document.styleSheets[0].cssRules[0].cssText.

Я хочу изменить правила CSS, содержащие атрибуты CSS3, добавив в определенные атрибуты браузера соответствующий префикс поставщика, например -webkit-border-radius, moz-border-radius и т. Д.

Однако, похоже, что свойство cssText предварительно обрабатывается в каждом браузере, чтобы отфильтровать атрибуты CSS, которые он не понимает. Это практически разрушает эту идею.

Вопрос: есть ли способ получить текст CSS точно так, как определено в таблице стилей? Или: есть ли другой способ сделать это через Javascript? Я хотел бы поддерживать чистые файлы CSS без необходимости определения каждого атрибута несколько раз для каждого конкретного браузера.

Answer 1

Почему бы вам просто не создать таблицы стилей, в которых каждый браузер уже содержит уникальные аналоги Pre-CSS3? Как вы упомянули, каждый браузер отфильтровывает свойства, которые они не распознают. Не имеет значения, если у вас есть -webkit-border-radius и moz-border-radius и border-radius, все они определены одновременно для одного и того же селектора CSS. Если браузер распознает один из них, он будет использован, а если нет, он будет удален. Даже если браузер распознает несколько версий, они, скорее всего, будут иметь одинаковые значения, поэтому это не имеет значения.

Answer 2

Похоже, вы хорошо поработали над этим.Это невозможно, если получить доступ к объекту CSSStyleDeclaration или CSSRuleList, так как отфильтрованы неопознанные свойства, что является ошибкой реализации в большинстве основных браузеров, поскольку они должны перечислять все свойства, даже те, которые они не понимают.См. связанный вопрос для получения дополнительной информации по этому вопросу.

Остальные альтернативы требуют слишком большой работы, как уже упоминал @Sarfaraz.Все сводится к разбору всего вручную и повторному выполнению работы, которую браузеры уже сделали для нас.Если предположить, что ваши объявления стилей встроены, либо в тегах <style>, либо в качестве атрибута стиля элемента, то вам придется проанализировать текст и построить карту всех интересных свойств CSS3.С inline-атрибутом он в основном разбирает текст, похожий на:

`prop1: value; prop2: value2; ..`

См. Ответ @Nick Craver на похожий вопрос , где он сделал ссылку на подход регулярных выражений для выполнения этого.

При использовании встроенных тегов анализируемый текст будет иметь вид:

[selector] {
    prop1: value1;
    prop2: value2;
    ...
}

...

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

Если таблицы стилей являются внешними, и на них есть ссылки внутри страницы, вам придется искать элементы <link>, имеющие атрибут rel, равный "stylesheet", и получать их hrefимущество.Также проанализируйте URL для импортированных таблиц стилей.Получив эти URL-адреса, вы можете сделать AJAX-вызов для извлечения фактического содержимого этих таблиц стилей, предполагая, что ничто не блокирует вызов на стороне сервера.Когда у вас есть текст из каждого файла, это в основном шаг синтаксического анализа, аналогичный описанному выше, и добавление необходимых правил с использованием insertRule или addRule в зависимости от браузера.

Могут быть парсеры CSS с открытым исходным кодом, которыеможет помочь вам в этом.

Это может быть длинным способом сказать, что я думаю, что решение @ jrista довольно хорошее.Если вы не хотите писать все перестановки кода, специфичного для поставщика, то более простым и лучшим подходом будет иметь слой генерации CSS, который является частью какого-то процесса сборки, который генерирует все перестановки и выплевывает файлы CSS.

Этот слой также может содержать оптимизации, проверяя заголовок User-Agent и генерируя только требуемые стили, что, по сути, и делает GWT (но он генерирует все возможные перестановки заранее, вместо того, чтобы делать это во время выполнения).

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

Answer 3

Разве это не то, что IE7.js (и IE8.js и IE9.js ) уже делают?Возможно, вам стоит взглянуть на подход Дина Эдвардса, чтобы добавить поддержку min-height, opacity, многих селекторов CSS3, position: fixed;и переполнение: видимое;к этим старым браузерам мы все ненавидим.

РЕДАКТИРОВАТЬ: кстати, я предпочитаю решение jrista: префикс CSS3 свойства с -moz и -webkit и -ms и -ms, когда это необходимо.
Это надоедливая задачаЭто займет около 5 лет, но это МЕНЬШЕ раздражает, чем если бы W3C передумал о некоторых свойствах (модули CSS3 далеки от Рекомендации).Тогда ваш скрипт все равно распознает старый синтаксис и выдаст его браузерам, которые могут определить разницу между -vendor-property: oldsyntax_from_2010; и property: newsyntax_from_2015;
И что бы вы сделали, если найдете -moz-border-radius: 4px; border-radius: 20px;;какой из них хороший?

EDIT2: http://css3generator.com/ - удобный инструмент, если вы не хотите заполнять свой мозг деталями, такими как синтаксические различия между -webkit-border-bottom-right-radius и -moz-border-radius-bottomright :)