Извлечение необработанного содержимого CSS-файла из браузера

Question

Есть ли способ извлечь необработанное содержимое файла CSS?

Давайте представим, что я хотел получить какие-либо специфичные для поставщика свойства CSS из файла CSS. Мне нужно было бы как-то захватить содержимое CSS и разобрать их соответственно. Или я мог бы просто использовать DOM для доступа к правилам файла CSS.

Проблема в том, что во время использования DOM большинство браузеров (за исключением <= IE8), как правило, удаляют все пользовательские свойства, которые не относятся к их движку браузера (webkit удаляет -moz и -o и -Миз). Поэтому было бы невозможно получить содержимое CSS. </p>

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

Если использовать междоменный подход AJAX, то будет только JSONP-решение, которое не будет работать, поскольку мы не анализируем какой-либо код JavaScript (поэтому обратного вызова нет).

Есть ли другой способ получить содержимое?

Answer 1

Если файл CSS находится в том же домене, что и страница, на которой выполняется скрипт, вы можете просто использовать AJAX для извлечения файла CSS:

$.get("/path/to/the.css", function(data) {/* ... */});

Если нет, вы можете попробоватьиспользуя Yahoo!Передача в качестве прокси и получение CSS с помощью JSONp.

Что касается анализа, вы можете проверить Sizzle , чтобы проанализировать селекторы.Вы также можете использовать грамматику CSS (опубликованную в стандартах CSS), чтобы использовать синтаксический анализатор JS lex / yacc для анализа документа.Я оставлю вас, чтобы проявить творческий подход с этим.

Удачи!

Answer 2

JSONP по-прежнему является верным решением, хотя это несколько повредит глазам.По сути, в дополнение к заполнению обратного вызова, вам нужно будет добавить одно свойство JSON "padding" и передать значение CSS в качестве значения.Например, вызов скрипта, http://myserver.com/file2jsonp/?jsonp=myCallback&textwrapper=cssContents может вернуть это:

myCallback("cssContents":"body{text-decoration:blink;}\nb{text-size:10em;}");

Вам придется кодировать все разрывы строк в тексте и заключать содержимое файла CSS в кавычки (после кодирования любых существующих кавычек).Мне пришлось прибегнуть к этому с помощью твиттера XML.Когда я его построил, мне казалось, что это ужасная идея, но она сделала свое дело.

Answer 3

Нет, вы в значительной степени покрыли это.Браузеры, отличные от IE, удаляют неизвестные правила из своих объектных моделей как в объектах style / currentStyle, так и в интерфейсе document.styleSheets.(Обычно это IE6-7, чей CSS вы хотите исправить, конечно.)

Если вы хотите высосать таблицу стилей из внешнего домена, вам понадобится proxy-assisted-AJAX.И анализ CSS из будет большой неприятной работой, особенно если вам нужно скопировать причуды браузера.Я бы усиленно избегал подобных вещей!