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
Post a Comment