CSS-парсер / abstracter?Как преобразовать таблицу стилей в объект - PullRequest
Новая
       18

CSS-парсер / abstracter?Как преобразовать таблицу стилей в объект

7 голосов
/ 09 февраля 2010

Существует ли уже стандартный или надежный метод для инфраструктуры javascript, такой как jquery, для анализа таблицы стилей в объекте?

Две причины, почему мне интересно:

  1. Я видел пару вопросов, где кто-то хотел узнать, как получить атрибут стиля, который был установлен таблицей стилей для селектора, а не то, что селектор в итоге унаследовал.

  2. Если Sizzle делает то, что должен, это может быть решением для проверки правильности отображения таблицы стилей в кросс-браузерном режиме. По сути, jquery анализирует таблицу стилей и устанавливает все атрибуты вручную (может быть, на основе браузера или известных невыполненных селекторов). Таким образом, дизайнеры / разработчики просто пишут таблицу стилей CSS3, которая является прямой совместимостью, а jquery / sizzle выполняет работу, которую выиграл браузер «т.

Единственный недостаток, который я вижу, это то, что он по-прежнему не реализует атрибуты CSS3, но это только начало.

Ответы [ 2 ]

11 голосов
/ 07 марта 2010

На стороне клиента таблица стилей уже является объектом; он загружается в дерево при загрузке страницы.

Допустим, у вас есть HTML-страница, начинающаяся с 

<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <link href="/styles/global.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="/styles/catalog.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="/styles/banner.css" rel="stylesheet" type="text/css" media="screen"/>

и global.css содержит строки 

#page { background-color: #fff; margin-top: 20px; margin-bottom: 20px; text-align: left; width: 100%; margin-top: 20px; padding: 0px; min-width: 900px; border: none; }
#header { background-color: transparent; }
#main { background-color: transparent; margin-left: 10px; margin-right: 10px; padding: 8px 0px 8px 0px;}
#sidebar { margin-right: 12px; }

Затем, чтобы найти, что установлено для background-color из #page, вам нужно написать document.styleSheets[0].cssRules[0].style.backgroundColor, что будет возвращать #fff (или rgb(255, 255, 255) в некоторых браузерах, я думаю).

Другие полезные вещи, предполагающие наличие вышеуказанных листов: 

document.styleSheets[0].cssRules[3].cssText //"#sidebar { margin-right: 12px; }"
document.styleSheets[0].cssRules[2].selectorText //"#main"

Если у вас был более сложный селектор, такой как #main div.header a, #main div.header a:visited, то текстовое свойство селектора возвращает всю вещь, а не только первый бит.

Ваш конкретный вопрос: «Как я могу узнать, что установлено в таблице стилей для данного селектора». Вот один из способов приблизить его: 

function findProperty(selector) {
   rules = document.styleSheets[0].cssRules
   for(i in rules) {
      if(rules[i].selectorText==selector) return rules[i].cssText;
   }
   return false;
}

findProperty('#sidebar'); //returns "#sidebar { margin-right: 12px; }"

Дело в том, что дерево CSS, к которому у вас есть доступ таким образом, уже было проанализировано браузером (отсюда и «приблизительный» выше). Если вы в Firefox, вы не увидите никаких стилей -webkit, потому что Mozilla просто удаляет их. Различные браузеры также имеют свой собственный способ отображения цветов (как указано выше; если для вашего фактического файла .css задан цвет #fff, и вы проверяете его в JavaScript после его анализа, вы можете получить обратно #fff, #ffffff или rgb(255, 255, 255)).

Выше расскажет вам, как ваш браузер видит этот лист CSS; если вы хотите узнать, какие конкретные символы ascii содержались в исходном файле .css, единственный надежный способ - посмотреть на сам файл AFAIK.

Ссылка на объект таблицы стилей доступна здесь .

0 голосов
/ 10 февраля 2010

Интересный вопрос. На сайте Дэниела Вахстока есть анализатор jquery. http://bililite.com/blog/2009/01/16/jquery-css-parser/

К сожалению, это может быть не то, что вы ищете ... но стоит попробовать. Следующее описание взято с его сайта:

В jQuery вы звоните $(selector).parsecss(callback)

, который сканирует все и элементы в $ (селектор) или его потомках, анализирует каждый и передает объект (подробности ниже) в функцию обратного вызова.

Например, создайте файл CSS: 

.gallery a {
  -jquery-lightbox: {overlayBgColor: '#ddd'}
}

и вы получите 

$('.gallery a').lightbox({overlayBgColor: '#ddd'});
...