Friday, 22 April 2011

Using @import To Call Your CSS File(s)

The "@import" rule was introduced due to Netscape Navigator 4.x

As Netscape at the time did not support all of the CSS syntax that was available there were always problems with layouts not working correctly in their browser. A workaround was introduced using the "@import" rule. The idea behind this rule is to create two seperate CSS files, one which included CSS syntax that was understandable by all browsers and one that had the CSS syntax in it that wasnt understood by the Netscape Navigator.

As the "@import" rule was not readable for NN4.x it overlooked the code and read only the standard rules that were provided.

The example below shows how this would work:

Example:

HTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="default.css" type="text/css" />
<style type="text/css">
@import url("notnn4.css");
</style>
</head>
<body>
</body>
</html>

In our example you can see that we are using both the "External CSS" function and a modified "Embedded CSS" function.

We call our "default.css" file via the "external CSS" function and our style sheet that has information in it that is not correctly implemented by NN4.x is called via the "embedded CSS" function.

If you dont need or you want to ignore the NN4.x browser then you can either use the standard <link> tag to access your style sheet or you can use the "@import" rule to bring in your style sheet(s).

Website Design | Website Design Company | Web Development
Get a beautiful website design. Studio Web is a results oriented web design & online marketing firm serving companies worldwide.
Sponsored Link

No comments:

Post a Comment