Css query - @import

design

#1

Apart from NN4, which browsers have problems with the @import rule?

  • marsbar

#2

Versions 4 and under of IE/Win don’t =) other than that, none that I’m aware of

[color=#0000CC]jason[/color]


#3

Thanks, Jason. I am currently using ‘link’ to import external stylesheets, and my pages look rather awful in NN4 (and probably in all older browsers). To make older browsers ignore the stylesheets - I should simply use @import instead of link to link to my external stylesheets, right?

  • marsbar

#4

Yes.

That’s why many sites use ths trick:

Use a link to link to a ‘basic’ stylesheet that can handle basic layout.

Then add an @import link to link to advanced styling techniques only available in latest browsers.

That way, your site will look great in recent browsers and still look accessibile in old browsers.

  • wil

#5

right, but, even better? Ignore v4 browsers altogether :wink:

[color=#0000CC]jason[/color]


#6

Here’s a very basic example we knocked up last week.

http://www.littlesunbeams.org/

If you view it in a 4.x browser, you’ll see the contents but not advanced layout.

  • wil

#7

cheers on that charity wil, great cause. Fine design as well.

[color=#0000CC]jason[/color]


#8

Many thanks, Wil and Jason, for your helpful advice. I’m using @import to link to external stylesheets now. But MSIE6 is not happy: it is doing the flash of unstyled content thing. What is the best way around this?

  • marsbar
    p.s. nice work on the charity site, Wil - elegant and effective design.

#9

since you called it by it’s catchy name I assume you’ve seen the FOUC article at bluerobot? If not, the solution there is to add empty tag or in the head

[color=#0000CC]jason[/color]


#10

Yes, I have read the article, Jason. I was just curious to know if there were other solutions besides the two mentioned in the article.

Oh, I wonder if you could help me with this problem: I would like to place on my home page an ‘consider upgrading your browser’ message, but I do not know how to hide it from standards-compliant browsers.

-marsbar


#11

I can think of these…

conditional server-side includes, if you want trust user-agent headers.

CSS:[code]div {
display: block;
}

html > body div {
display: none;
}[/code]should make any CSS 2.0 compliant browser hide the DIV element. The > is child selector and is not recognized by Internet Explorer at least. The selector above means “if the element is a div and is a descendant of the body element, which in turn is a child of the html element, apply this rule.” Since IE doesn’t understand the second selector it only honors the first.

Also if you want to show a message to a particular version(s) of Internet Explorer, look up “Conditional comments” on the Microsoft web site.

:cool: Perl / MySQL / HTML+CSS


#12

Have you tried simply using to get to your style sheet and placing the @import directive inside the linked stylesheet? That seems like it would kill the proverbial two birds…


#13

Thanks for your helpful suggestions, guys. I shall give the css methods a go.

  • marsbar

#14

Sorry for digging up this old thread…

Perhaps I haven’t correctly implemented the method suggested by BGilkison; a Mac user reports my home page displays only plain text on a white background in Safari. All other pages on my site display fine. The home page looks better in MSIE for Mac OSX - except the logo is missing. I am not sure if the @import rule has anything to do with the display problem, but then I thought Safari supported the @import rule.

Here is how external css are called from my pages:

The link to my stylesheet in the source of my home page looks like

The first two lines of home.css are:
@import “basic.css”;
@import “2c.css”;

Other pages on my site:
they link to a different stylesheet (sub.css), which calls one other stylesheet. The first line of sub.css is:
@import “basic.css”;

  • marsbar

#15

Just an update: Safari is happy now, but IE 5.2 (Mac) still isn’t. It seems the cause of the problem lies with IE’s (improper) support for CSS float positioning, and not the way the stylesheets are imported as I first thought.

  • marsbar

#16

I feel rather silly responding to my own posts; nonetheless, I thought I should bring a conclusion to the thread by saying that Mac IE 5.2 is happy. As it turned out, sloppy coding on my part was the cause of the display problem: I had forgotten to set a width for the floated item.
Cheers,
marsbar