Does @Import in CSS Result in Additional Http Requests

Does @import in CSS result in additional http requests?

Yeah you will go back to a request per each stylesheet while using @import.

Your best bet is to minify and consolidate the css into a single file for deployment. But you can still develop with seperate files.

Is it possible to include one CSS file in another?

Yes:

@import url("base.css");

Note:

• The @import rule must precede all other rules (except @charset).
• Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.

Does using @import in a CSS file cut down on HTTP request?

I would recommend not using @import. This stops the browser from downloading files in parallel as it has to parse the first css file. Then go retrieve the import css files and import them.

google on @import

As you mentioned combining and minifying your css is the best option. Using a tool like minify allows you to keep your stylesheets separate and clean but serve them combined and minified.

Best way to include CSS? Why use @import?

From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:

@import url("stylesheetB.css");

then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.

There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

CSS: @import vs. link href=

The difference comes down to parallel downloading. @import blocks parallel downloading. This means the browser will wait to import the imported file before downloading the next file.

jQuery UI's @imports are causing many HTTP requests, defeating purpose of concatenation

The default build of jQuery UI from http://jqueryui.com will have all the files concatenated. Make sure you get the file from the css folder instead of the development-bundle folder.

What does @import do?

The '@import' rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present). See the section on parsing for when user agents must ignore @import rules. The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.

From Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

Import css file from same non-root directory

As it is an @import, make sure it is placed at the very top of your main CSS document.

@import url("./nav.css");

@import url("./width.css");

Although you can do it, I would personally advise against it. Although it might seem to be more "sorted" it creates extra HTTP requests, which depending on the size of the project, may hurt your performance.

Can one http request call multiple css files?

Bundle your CSS files for production and minify ofc.

http://www.sitepoint.com/faster-page-loads-bundle-your-css-and-javascript/

---

Related Topics