Извлечение содержимого исходного содержимого CSS из браузера

Question

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

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

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

Если я должен использовать 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

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

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

Answer 3

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

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

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