Stylesheets - @import problem

Author

@import problem

Mark

2005-12-05, 6:59 pm

Hello

I made a site with validated XHTML and CSS. It works fine also.
Only in IE i see the site build up without CSS (very fast though) and
then the CSS is used to build the page.

When i use this it works fine:

<link href="styles/site.css" rel="stylesheet" type="text/css" />

But with this it does not:

<style type="text/css" media="screen"></style>

Anyone knows why this happens?

Mark

Harlan Messinger

2005-12-05, 6:59 pm

Mark wrote:
> Hello
>
> I made a site with validated XHTML and CSS. It works fine also.
> Only in IE i see the site build up without CSS (very fast though) and
> then the CSS is used to build the page.
>
> When i use this it works fine:
>
> <link href="styles/site.css" rel="stylesheet" type="text/css" />
>
> But with this it does not:
>
> <style type="text/css" media="screen"></style>

Because the CSS interpreter doesn't know what



means. Try

<style type="text/css" media="screen">

</style>

As with your original, this wraps the @import directive into an HMTL
comment so that HTML interpreters that don't know what the <STYLE> tag
is don't try to read its content as HTML. With this arrangement, the CSS
interpreter won't know what either



means. But since the @import directive is now on its own line, the
interpreter will begin afresh, considering the <!-- to be over and done
with and treating the @import directive as something new.

Alternatively, you could dispense with the HTML comment delimiters on
the theory that no one is using CSS-blind user agents any more.

David Dorward

2005-12-05, 6:59 pm

Harlan Messinger wrote:

[color=darkred]
> Try
>
> <style type="text/css" media="screen">
> 
> </style>

Not in XHTML!

Either:

<style type="text/css" media="screen">
@import "styles/site.css";
</style>

or

<style type="text/css" media="screen"><![CDATA[/*><!]]></style>

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Harlan Messinger

2005-12-05, 6:59 pm

David Dorward wrote:
> Harlan Messinger wrote:
>
>
>
>
>
>
> Not in XHTML!

Oops, missed that part. Then, yes, the HTML comment delimiters are
pointless--anything that knows XHTML, knows <STYLE>! Not counting your
formulation below for making XHTML work in HTML-only browsers. How
vulgar, though.

>
> Either:
>
> <style type="text/css" media="screen">
> @import "styles/site.css";
> </style>
>
> or
>
> <style type="text/css" media="screen"><![CDATA[/*><!]]></style>
>

The Major

2005-12-05, 6:59 pm

>Harlan Messinger wrote:
>
>
>
>Not in XHTML!
>
>Either:
>
><style type="text/css" media="screen">
>@import "styles/site.css";
></style>
>
>or
>
><style type="text/css" media="screen"><![CDATA[/*><!]]></style>
>

Shouldn't that be
@import url(styles/site.css);
?
--
Chris Hughes
"Reality is that which, when you cease to believe, continues to exist."
http://www.epicure.demon.co.uk

David Dorward

2005-12-05, 6:59 pm

Harlan Messinger wrote:

> Oops, missed that part. Then, yes, the HTML comment delimiters are
> pointless--anything that knows XHTML, knows <STYLE>! Not counting your
> formulation below for making XHTML work in HTML-only browsers. How
> vulgar, though.

Blame Ian Hixie for it :) (Well, applaud him, and blame the HTML Working
Group for the insane handwaving that is Appendix C ("Oh oh. If we assume
that no HTML user agent actually understands what <br /> means in HTML then
people can serve their XHTML with a text/html Content-Type and not notice
anything wrong when they comment out their styles and scripts!"))

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

David Dorward

2005-12-05, 6:59 pm

The Major wrote:

[color=darkred]
> Shouldn't that be
> @import url(styles/site.css);
> ?

Both syntaxes are fine.
http://www.w3.org/TR/CSS2/cascade.html#at-import

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Mark

2005-12-05, 6:59 pm

David Dorward wrote:
> The Major wrote:
>
>
>
>
>
> Both syntaxes are fine.
> http://www.w3.org/TR/CSS2/cascade.html#at-import
>

Okay thanks all.

Question:

is it better than:

<link href="styles/site.css" rel="stylesheet" type="text/css" />

and why?

Mark

David Dorward

2005-12-05, 6:59 pm

Mark wrote:

[color=darkred]
> Question:
> is it better than:
> <link href="styles/site.css" rel="stylesheet" type="text/css" />
> and why?

Pro: IE4 will ignore the styles

Con: IE4 will ignore the styles.
You have a style sheet with nothing in it but an instruction to load a
different stylesheet ... which seems silly.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Gus Richter

2005-12-05, 6:59 pm

The Major wrote:
>
> Shouldn't that be
> @import url(styles/site.css);
> ?

I agree. Not sure which one at this moment, but one browser at least
does not work when quotes are used.

--
Gus

Gus Richter

2005-12-05, 10:34 pm

David Dorward wrote:
> Harlan Messinger wrote:
>
>
>
>
>
>
> Not in XHTML!
>
> Either:
>
> <style type="text/css" media="screen">
> @import "styles/site.css";
> </style>
>
> or
>
> <style type="text/css" media="screen"><![CDATA[/*><!]]></style>
>

XHTML 1.0 Appendix C states:
Script and Style element contents must be wrapped within a CDATA
marked section
to avoid expansion of entities < and & as start of markup and not to
recognize
< and & as < and & respectively.
<script> || <style>
<![CDATA[
... unescaped script or style content ...
]]>
</script> || </style>
An alternative is to use external script and style documents.
For compatibility with existing HTML 4 user agents, it goes on to say to use
external style sheets or external script if either uses < or & or ]]> or --.
It further notes that the historical practice of hiding scripts and
style sheets
within _comments_ for backward comptibility is likely to not work as
expected.

Ian Hickson expands on this by showing how to use _js/css comments_ with:

<script type="text/javascript"><![CDATA[//><!]]></script>
and
<style type="text/css"><![CDATA[/*></style>

which are not necessary if following Appendix C conformance and
compatibility
guidelines unless _comments_ are absolutely necessary, which are not IMHO.

--
Gus

David Dorward

2005-12-07, 7:14 am

Gus Richter wrote:

[color=darkred]
> I agree. Not sure which one at this moment, but one browser at least
> does not work when quotes are used.

IE/Mac does not support the url() syntax with _single_ quotes are used.
Double quotes are fine.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is