html - Browser request to server only one stylesheet or all css files(Which is @import in main stylesheet)? -


i have tried "@import" importing css files within single "style.css" use on main html file in head tag "link href". use firebug inspect elements , see "style.css" applied it, wanted know browser request server 1 time "style.css" or every css @import in "style.css" components include in "style.css"?

this components include in "style.css"

@import url("main.css"); @import url("colorzilla.css"); @import url("mainbox.css");  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; }  html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1.231; } body, button, input, select, textarea { font-family: sans-serif; color: #222; }  ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } 

the browser sends separate request each imported stylesheet. same javascript files.

to avoid this, can use minifier on server side, (besides minifying) combines different stylesheets (and javascripts), 1 request enough css , 1 js content. cached.

number of requests become more important if use https, when there additional handshake , overhead @ each request, due ssl/tls.


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -