premailer now honours specificity

21 March 2013   0 comments   Python

Mind That Age!

This blog post is 5 years old! Most likely, its content is outdated. Especially if it's technical.

Thanks to Theo Spears awesome effort premailer now support CSS specificity. What that means is that when linked and inline CSS blocks are transformed into tag style attributes the order is preserved as you'd expect.

When the browser applies CSS to elements it does it in a specific order. For example if you have this CSS:

p.tag { color: blue; }
p { color: red; }

and this HTML:

<p>Regular text</p>
<p class="tag">Special text</p>

the browser knows to draw the first paragraph tag in red and the second paragraph in red. It does that because p.tag is more specific that p.

Before, it would just blindly take each selector and set it as a style tag like this:

<p style="color:red">Regular text</p>
<p style="color:blue; color:red" class="tag">Special text</p>

which is not what you want.

The code in action is here.

Thanks Theo!

Comments

Your email will never ever be published


Related posts

Previous:
HTML whitespace "compression" - don't bother! 11 March 2013
Next:
Never put external Javascript in the <head> 02 April 2013
Related by Keyword:
Premailer 3.0.0 - classes kept by default 07 June 2016
Premailer.io 08 July 2015
premailer 2.9.0 and new rules for `base_url` 11 May 2015
Premailer on Python 3 08 October 2014
premailer now with 100% test coverage 22 August 2014
Related by Text:
jQuery and Highslide JS 08 January 2008
I'm back! Peterbe.com has been renewed 05 June 2005
Anti-McCain propaganda videos 12 August 2008
Ever wondered how much $87 Billion is? 04 November 2003
Guake, not Yakuake or Yeahconsole 23 January 2010