Developing a Web Browser with Haskell

October 5, 2010

CSS Selectors

Filed under: css — gcarlos @ 4:26 am

I’m a little late posting, but now I have to talk a little bit of what I’m working, this is the implementation of CSS selectors. First a little of theory, then how I am implementing, and finally the list of problems and errors I’m having.

You can see the code to test this project (http://github.com/carliros/Selector), and I would be very happy to see suggestions and other things.

CSS Selectors

The selectors of CSS are a way, as his name, to select html elements to apply properties that are described in the same rule of CSS. We can also see a selector as a way to select nodes in rose tree.

Basically there are 2 types of selectors, a simple selector and a combined selector. A simple selector can be a typed selector that contain the name of the tag or node to select, or also can be an universal selector (it can be any tag o node and is represented as “*”). A combined selector can be a list simple selectors separated by an operator that determine the type of the operation.

The operator can be either a descendant operator (represented just as an space) , a child operator (represented as “>”), or a sibling operator (represented as “+”).  A descendant selector  (“s1 s2”) means that the left selector must be one of the parents (father, grandfather, …) of the right selector. A child selector (“s1 > s2”) means that the left selector must be the father  (just the father and not grandfather or grand grand father) of the right selector. And the sibling selector (“s1 + s2”) means that both selectors must have the same father.

I must also mention that in a list of selectors, the last selector is the object of selecting.

How I am implementing

As I mentioned, I develop a project to test this part. Here I’ll describe the important part of the project, applying the selectors to an html tree.

I am using attribute grammar to implement the way of applying the selectors to the tree.

After parsing the html tree, I apply the selectors to each node, if it is a simple selector, I just compare the name of the tag, or if it is an universal selector I just put true. The interesting part is when we try to combine a list of selectors. For that part, for each node I collect all the fathers of the node, and also I collect all of his sibling before the node, so if it is a descendant selector I just look if exist a node with the name of the left selector; If it is a child selector I just compare if the first father is the same of the left selector; and finally if it is a sibling selector I search the left selector name in the list of siblings.

How to test

Download the code, and then “make all”. To test with other css selectors, you must have to generate instances of the datatype Selector (selector/src/DataCss.hs) and insert it in the file NTree.ag (selector/src/ag/NTree.ag)  (next to “default style sheet” comment), and then “make all” again.

In the graphic generated you will see if the selectors select any node, if yes, it is painted with yellow color and with the corresponding number of selector in the list that was applied.

Here an image painted with the project:

img

Problems and errors

Actually there are problems with selecting combine elements, especially long list of selectors. I didn’t test test very well the sibling part, because I am working on descendant and child selectors.

Updated: For more information: https://hsbrowser.wordpress.com/selector-project/

Blog at WordPress.com.