Get the computed style for an element with tinycss

Given a CSS stylesheet and some XML / HTML elements, how can I use tinycss to get the computed style of an element?

For example:

p {
  font-family: Arial;
}
.foo {
  color: red;
}

      

<p><span class="foo"></span></p>

      

I would like to check the inner span element and find out that it has a set of fonts and a set of colors, and maybe some properties have default values โ€‹โ€‹(such as font size).

tinycss only seems to be able to parse css (partially, no selectors). cssselect can parse the selector and give me its specifics. It can take a selector, convert it to xpath, so I can ask "which element matches this selector". But I want to do almost the opposite: "What is the computed style of this element?"

I could get a list of all the selectors that match my element, and then all the selectors that match all the parent elements, and implement the cascading algorithms and CSS specifics, but this seems to be similar to what has already been written. Actually this is probably already in tinycss or a related module and I just can't seem to find it - I mean this is probably the main thing you would like to do with the parsed css. Any ideas how to do this with tinycss or otherwise?

+3


source to share





All Articles