Programming Great Village

Inline CSS

Modern browsers block on external CSS before painting content to the screen. This incurs additional network latency and increases the time it takes to display content to the screen. To optimize the time to render, if the external CSS resources are small, you can insert those directly into the HTML document. Inlining small CSS in this way allows the browser to proceed with rendering the page.

Note: Avoid inlining CSS attributes on HTML elements (e.g., < p style=...>) should be avoided where possible, as they often lead to unnecessary code duplication, and are blocked by default with Content Security Policy (CSP) (disabled via “unsafe inline” on “style-src”).

For example, if the HTML document looks like this:

1     <html>

2     <head>

3     <link rel="stylesheet" href="small.css">

4     </head>

5     <body>

6     <div class="blue yellow big bold">

7     Hello, world!

8     </div>

9     </body>

10     </html>

And the resource small.css is like this:

1     .yellow {background-color: yellow;}

2     .blue {color: blue;}

3     .big { font-size: 8em; }

4     .bold { font-weight: bold; }

Then you can inline the CSS as follows:

1     <html>

2     <head>

3     <style>

4     .yellow {background-color: yellow;}

5     .blue {color: blue;}

6     .big { font-size: 8em; }

7     .bold { font-weight: bold; }

8     </style>

9     </head>

10     <body>

11     <div class="blue yellow big bold">

12     Hello, world!

13     </div>

14     </body>

15     </html>

This eliminates the browser request to small.css by placing its contents inline in the HTML document.

Resource: Google Developers

Keywords :seocssinline css
Written by : amindelavar  |  Posted on : 2017/5/22-10:38   |  Number of Visitors :53
Post a comment  (You must first register on the site to be able to comment.)

Is this article useful ?    Yes    No

If you have more time, you can make your opinion more fully described below :

Search Box
Recent Posts
Most Viewed Posts
Site Statistics

 All articles available : 16

 The number of Registered Users : 3

 Last Updated site : 6 month(s) ago

 Visitors Today(Unique IP) : 8

 Visitors Yesterday(Unique IP) : 7

 Total Visitors(Unique IP) : 3686