[Technical post] Getting applied styles instead of computed styles

By Aciftli, 6 September 2016

Reading time: < 1 minute

Keyword(s):

Tanaguru helps its users to check the accessibility of a Web site.
Always focus on the quality of the product we add new rules and improving the existent one.

Tanaguru analyse the generated source code with an instance of firefox and also analyse the css.

In order to do so, it uses complex algorithms, but sometimes it encounters troubles in this task and we’ll explain one of them in this post.

In the RGAA (french public accessibility referential) we have to check the sizing unit of some éléments. For example criteria 10.4: On each web page, is text still readable when character size is increased until at least 200%?

Regardless of the sizing unit used in CSS, the browser will compute it to pixel units.
Therefore, it was difficult to check elements against certain rules when the resulting sizing unit ends up being pixels.

Using properties like “ element.style.fontSize “ won’t return anything if the CSS declaration isn’t inlined, and methods like window.getComputedSize won’t obviously return the value as it is initially defined in CSS.

Therefore, we had no other choice than reaching right inside CSS files.

The following code helped us to do so:

JsFiddle

This code checks inside all CSS files and returns back applied styles instead of computed styles.

It does a great job, yet having several CSS files makes the process quite heavy and might lock the thread until it’s done. But optimisation is an always on going process…