[webkit-gtk] How to get the CSS rules that are defined in a document

Emmanuel Rodriguez emmanuel.rodriguez at gmail.com
Fri Sep 23 12:08:45 PDT 2011


On Fri, Sep 23, 2011 at 16:40, Xan <xan.lopez at gmail.com> wrote:
> On Wed, Sep 21, 2011 at 9:33 PM, Emmanuel Rodriguez
> <emmanuel.rodriguez at gmail.com> wrote:
>> Hi,
>>
>> Is it possible to use WebKit for listing the CSS rules that are
>> defined in a document?
>>
>> I can see that the following classes exist:
>> DOMCSSRule
>> DOMCSSRuleList
>> DOMCSSStyleDeclaration
>> DOMCSSStyleSheet
>> DOMCSSValue
>>
>> But I don't find a way to access them through the WebKit API.
>
> The way to access those things with WebKitGTK+ is through our GObject
> DOM bindings. We are working on documenting them as we speak,
Great!

> but the main entry point is webkit_web_view_get_dom_document (). From there
> you can access the global stylesheets (get_stylesheets),

This is what I'm doing now but get_style_sheets returns a
DOMStyleSheet and not a DOMCSSStyleSheet. I've been looking at the
.gir file and it seems that the DOMCSS* objects are linked between
them but I can't find a way how to access them. That's what puzzles
me.

The closes way that I've found to get to the styles is to find all
<style> elements and to get their raw content and to parse that with a
CSS parser. Here's the sample code:

    foreach my $style ( to_list($doc->get_elements_by_tag_name('style')) ) {
        my $css_content = $styles->get_first_child->get_text_content;
        my $css = CSS::DOM::parse($css_content); # Not a WebKit function
        foreach my $rule ($css->cssRules) {
            foreach my $selectorText ($rule->selectorText) {
                print "$selectorText\n";
            }
        }
    }

I find this a bit cumbersome. Also my sample code only works for
stylesheets that are embedded through the <style> element. Stylesheets
that are loaded with <link rel="stylesheet"> are not taken into
account. Having access to the real DOMCSSRule would make this more
easily.

> or the style of any object in the DOM tree and then modify its CSSStyleDeclaration.
>From what I can see the CSSStyleDlecaration is only defined for
elements that have the attribute style="". Is there a way to see which
styles are applied for each element in a document?

Thanks for the help.
-- 
Emmanuel Rodriguez


More information about the webkit-gtk mailing list