/    Sign up×
Community /Pin to ProfileBookmark

question about @import and html>body

ok, i have seen both html>body and @import multiple times and not sure what they fully do. I have seen @import the most so am mostly interested in that one ? thx all

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@Daniel_TAug 08.2004 — @import imports an external file for use on the page. Usually, this is a CSS file, used to style the page. Therefor, it would normally look something like this:<style type="text/css">
@import "/styles.css";
</style>

html>body is completely different from @import. html>body is another "hack" to fix layout issues in IE when using a CSS-based layout. Since IE does not understand html>body, it will not use it, but standards browsers (Firefox, Mozilla, Opera, Netscape, etc.) will. Here is an example:<html>
<head>
<title>CSS Hack Test</title>
<style type="text/css">
#box {
width: 300px;
height: 100px;
color: #fff;
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #f00;
}
html>body #box {
width: 300px;
height: 100px;
color: #fff;
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #00f;
}
</style>
</head>
<body>

<div id="box">In standards browsers, this box will be blue, but in IE, it will be red.</div>

</body>
</html>

In standards browsers, #box will be blue, but in IE, it will be red. However, it is nto recommended to use hacks for crucial purposes, as you never know what future browsers/versions will/won't support.
Copy linkTweet thisAlerts:
@fredmvAug 08.2004 — The [font=courier]@import[/font] rule is also quite handy as Netscape 4.x doesn't provide support for it. This means your CSS won't get totally mangled in this browser; they'll just get accessible, unstyled content.
Copy linkTweet thisAlerts:
@pawkyauthorAug 08.2004 — i understand the html>body part now, thx ?

and i guess i understand what the @import does but dont understand why use it. What makes that any better then using something like:

<link rel="StyleSheet" href="./styl.css" type="text/css" media="screen">

or whatever. thx ?
Copy linkTweet thisAlerts:
@Daniel_TAug 08.2004 — [i]Originally posted by pawky [/i]

[B]and i guess i understand what the @import does but dont understand why use it. What makes that any better then using something like:



<link rel="StyleSheet" href="./styl.css" type="text/css" media="screen">

or whatever. thx ? [/B]
[/QUOTE]
fredmv's post explains that ?
Copy linkTweet thisAlerts:
@pawkyauthorAug 08.2004 — [i]Originally posted by Daniel T [/i]

[B]fredmv's post explains that ? [/B][/QUOTE]


ok, so it wont work in netscape 4.x so is it used as another hack like thing as is html>body is for IE? if so, then i guess i understand but still dont really see when i would use this. but that's ok i guess ?
Copy linkTweet thisAlerts:
@Daniel_TAug 08.2004 — [i]Originally posted by pawky [/i]

[B]ok, so it wont work in netscape 4.x so is it used as another hack like thing as is html>body is for IE? if so, then i guess i understand but still dont really see when i would use this. but that's ok i guess ? [/B][/QUOTE]
Support for the CSS box model in older browsers is poor. Therefor, instead of using the <link> method of calling a stylesheet (which would import it in all browsers), you could use @import, and that way you can prevent older browsers, such as NS4, from displaying styles and totally screwing up the layout. See [url=http://centricle.com/ref/css/filters/]this[/url] for a list of different methods of @import you can use to affect different browsers (scroll down to where it gets into the @import's in the right-hand column).
×

Success!

Help @pawky spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...