Using Media to load CSS

• By default, CSS is used as a resource that must be loaded when rendering.
• Device type and device asking allows us to set up some CSS resources to program optional
• All CSS resources, whether necessary or optional, will be loaded by the browser

The New York Times with Cssthe New York Times without CSS (FOUC)

The above shows the effect of loading CSS and not loading CSS styles, and the page that does not load the CSS display is also called "Flash of Unstyled Content" (Fouc).

All, the rendering of the page must require DOM and Cssom.

CSS is a necessary resource for rendering, so getting CSS resources faster will optimize rendering

CSS "Media types" and "Media Queries" Allow us to specify the conditions under which CSS is used:

A media query includes the device type and one or more expressions to indicate the characteristics of the device.

If the device satisfies media query, it pauses blocking to load the CSS resource.

<link href= "style.css" rel=  "stylesheet" ><link href=  "style.css" rel= "stylesheet" media=  "all" ><link href= " Portrait.css "rel=" stylesheet "media=" Orientation:portrait "><link href=" Print.css "rel=" stylesheet "media=" print ">               

• The first declares that a CSS file is loaded on any type of device
• The second declaration, all is the default parameter, and the first one is equivalent.
• The third statement indicates that the loading of the CSS document depends on the direction of the device to determine whether to load
• The last one is intended to be loaded in a printing device

Remember, regardless of how the media on the display of CSS, the browser has downloaded all the CSS files.

Original: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=en

Using Media to load CSS