Sunday, December 13, 2015

Render blocking css

By default css is treated as render blocking resource, which means the browser would hold rendering of any processed content until CSSOM is constructed.

Assume a scenario where the postman comes with a letter and he has to wait for the Gate to open. He cannot deliver the letter till the gate is open






Solution










Media type and media query allow us to mark some resources as non render blocking

Note: we need to move the media styles to 2 separate files ex portrait.css and print.css
we need to reference it with media attribute in the link

The browser would only download print.css when it needs to print

<link href="style.css"    rel="stylesheet">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print" >



No comments:

Post a Comment