@import question (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

hzarabet -> @import question (4/29/2004 23:16:28)

Hi all...

Here is my @import tag

<link href="css/site_nn.css" type="text/css" rel="stylesheet" />
<style type="text/css">@import url(css/site.css);</style>

WHY OH WHY are changes I am making to css/site_nn.css, which should ONLY affect NS4, affecting my page when viewed on IE6?????

I am relearning the meaning of learning curve!



Giomanach -> RE: @import question (4/30/2004 0:25:38)

IE will be reading both Stylesheets, you need to use JavaScript to tell the browser which on to use



d a v e -> RE: @import question (4/30/2004 1:23:00)

that's the idea that it reads both stylesheets. no javascript required
(see http://www.mako4css.com/csstwo.htm )
NN4 sees only the first sheet, IE and NN6+ merge both and give more importance to the second sheet due to the importance of the cascade. so if you don't make a declaration in *both* sheets then IE will pick up any unmatched styles from the first.

e.g.

NN4 sheet:
.warning {color:red}

IE sheet
.warning {color:yellow}

so NN4 can *only* see the first rule and warning text will be red.

IE takes the first rule *then* overwrites it with the more important rule that follows (why is it more important? because of the cascade) and it is yellow in IE

so if you have a style that *only* appears in the NN4 sheet then IE will see it as well and use only that because it doesn't have a version in its own sheet.

it's ok to put unique style rules in the IE sheet but not in the NN4 one

you need the same name (e.g. .warning) even though the details are different



hzarabet -> RE: @import question (4/30/2004 9:13:53)

Thanks Dave! Very Good explanation. I though is was "A" OR "B"!



gorilla -> RE: @import question (4/30/2004 18:08:37)

Nice reply indeed. My late colleague Karsten did a posting here:

http://www.frontpagewebmaster.com/m-165257/tm.htm

about this topic once you get to grips with it you can in effect "browser sniff" (Note the inverted commas please! [:)]) That site plone.org do exactly that.



Donkey -> RE: @import question (5/1/2004 8:27:55)

Supplementary Question

Why do you need to use @import? It works if you use two links to the two stylesheets and comment out the second one. Like this
quote:

<link href="/Styles/mozstyles.css" rel="stylesheet" type="text/css">
<!-->
<link href="/Styles/iestyles.css" rel="stylesheet" type="text/css">
<!-->


I picked this up in another forum a few months ago and I am using it to make sure that IE looks roughly the same as the other (compliant) browsers.

Another supplementary question
Why bother with NN4 users? (less than 1% globally - source:thecounter.com March2004 figures). Apparently over 96% of all browsers are MSIE, Mozilla/Firefox is around 1% and Opera less than 1%. I know IE is not the best browser around, but surely at least for the next 5 years it is the main one to be concerned about if your site is meant to appeal to a representative cross section of world wide web visitors.



gorilla -> RE: @import question (5/1/2004 8:48:02)

@ import is useful if you do have to cater for NN4.7x or indeed other version 4 browsers but don't want to code down to them exclusively. IOW you want more advanced browsers to take advantage of better css support but still want NN4.xx to see some styles.

This is all situation dependent.

Take an extreme example:

I'm kind of known for suggesting that people go for css layout and code to standards but I'm doing a freeby for a FRG at the moment that needs to be coded down to NN4.78.

I could do @ import but it is important that it looks identical to everybody irrespective of what they are using.

This is because a lot of the people using it are going to be military personnel and their families. A further complication is that my POC is a new frontpage user (FP 2000) who is a very busy person. Even busier than I am. She has one of the toughest jobs ever, running a family, and needs to be able to update it easily NOW so ...

I went originally for all css layout, it looked like hell in NN4.78 and wild horse won't get me to describe what it looked like in IE4. So I tossed the whole thing out and went for tables.

Pity really, but all these things are tools, so you reach for the one that works.



d a v e -> RE: @import question (5/1/2004 10:46:57)

i *think* that @import is useful if you want to add supplementary stylesheets e.g you have a main coprorate stylesheet business.css, then for a practicular department you might want it to follow all the main rules for layout and font choice but you want it on a different colour background and the links to be green - then you can import a second sheet to append the styles in the main one, either adding to or modifying existing styles, and the second sheet has a higher specifity for any given rule of the same potential weight weight because of the cascade.

I don't know but i don't think you can do this with linked styles, but i'm not sure at all.
maybe Mháircaish can clarify?



d a v e -> RE: @import question (5/1/2004 10:50:12)

i *think* that @import is useful if you want to add supplementary stylesheets e.g you have a main coprorate stylesheet business.css, then for a practicular department you might want it to follow all the main rules for layout and font choice but you want it on a different colour background and the links to be green - then you can import a second sheet to append the styles in the main one, either adding to or modifying existing styles, and the second sheet has a higher specifity for any given rule of the same potential weight weight because of the cascade.

I don't know but i don't think you can do this with linked styles, but i'm not sure at all.
maybe Mháircaish can clarify?



Donkey -> RE: @import question (5/1/2004 12:57:46)

Dave, I'm sure that you are right, I was just making the point that if you want to have 2 stylesheets one for IE and one for the rest, you don't have to use @import in that case.



d a v e -> RE: @import question (5/1/2004 13:11:13)

no you don't need to. i usually just use the link method anyway.



gorilla -> RE: @import question (5/1/2004 17:11:56)

Actually both of you are correct. One can do it with both but @import is useful for merging them, the basics for primitive browsers and link for more modern ones. One disadvantage to @import btw is that it sometimes, very rarely, leads to the FOUC bug. Where the visitor sees the unstyled page first - a second or less - then slam the styles are applied. It mostly occurs on overloaded machines with way to nuch in their cache. I personally have never been able to replicate it and believe me I tried.

I have seen it - and most CSS writers decry it because they say it puts clients and visitors off. I can only say that I saw the opposite reaction - they actually could see something was going on and were thrilled to bits. There's no accounting for taste [:D]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
5.078125E-02