This blog post is 7 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!
- Previous:
- HTML whitespace "compression" - don't bother! 11 March 2013
- Next:
- Never put external Javascript in the <head> 02 April 2013
- Related by category:
- How much faster is Redis at storing a blob of JSON compared to PostgreSQL? 28 September 2019 Python
- Best practice with retries with requests
19 April 2017 Python
- Fastest way to find out if a file exists in S3 (with boto3) 16 June 2017 Python
- Interesting float/int casting in Python 25 April 2006 Python
- Fastest way to unzip a zip file in Python 31 January 2018 Python
- Related by keyword:
- premailer.py - Transform CSS into line style attributes with lxml.html 11 July 2009
- Premailer.io 08 July 2015
- How to use premailer as a command line script 13 July 2012
- Premailer on Python 3 08 October 2014
- Premailer 3.0.0 - classes kept by default 07 June 2016
