Задать вопрос
xytop
@xytop
PHP/RoR web dev & tech lead

Структура данных для поиска подходящих CSS-правил

В качестве домашнего проекта начал потихоньку делать рендерер страниц на python.
Но вопрос не по языку.

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

Пример:

css:

a { display: block; font-size: 12pt; }
div p.links a { color: green; display: inline; }


Предположим, что я распарсил этот фрагмент и получил необходимую структуру.

Теперь должно быть возможно сделать такое:

cssTable.get_styles( 'html > div#content > h3 > a' );


Это возвратит: { display: block; font-size: 12pt; }

Если я запрашиваю такой путь:

cssTable.get_styles( 'html > div#content > p.links > a' );


Это должно возвратить совмещенное правило: {display: inline; color: green; font-size: 12pt;}

Есть идеи как правильно организовать такую структуру?
  • Вопрос задан
  • 4199 просмотров
Подписаться 2 Оценить 1 комментарий
Ответ пользователя Сергей К ответам на вопрос (4)
seriyPS
@seriyPS
Писать собственный рендерер, да ещё на питоне это хардкорно конечно. Я бы не решился.
Мне кажется, для хранения правил CSS все же нужно непосредственно накладывать последовательно правила на DOM дерево без использования промежуточных хранилищ. Т.е. строим DOM дерево. Считываем последовательно правила из вашего CSS:
a { display: block; font-size: 12pt; }
div p.links a { color: green; display: inline; }

и последовательно накладываем правила по селектору (перезаписывая конфликтующие правила, учитывая !important и пр). Получается, что при модификации дерева придется все правила прогонять заново.

Код браузера можно попытаться тут: github.com/WebKit/webkit/tree/master/Source/WebCore/css поковырять, но там комментариев в коде нет, вряд-ли удастся что то понять =)
Ответ написан