Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internal CSS in Html/Xhtml

    I'm trying to write my pages so as to please browsers that don't like XHTML (such as IE) without having to write them all over again later for full XML compatibility (though a few changes later will still be needed, no doubt). I'm using the "text/html" MIME type, since IE apparently can't deal with anything else. But I'm using XHTML syntax, the XHTML 1.0 Strict DOCTYPE, and validating it that way. (I'm not using the "<?xml" line for now.)

    I often use internal CSS, though I'm not into scripts yet. I know style sections can cause some parsing problems. I don't care about "hiding" it from the old browsers that don't recognize the style tag, because there are hardly any of those left. But I want the CSS to work right in all other browsers. So it has to work as HTML (version 4 at least) and as XHTML. What kind of comments-markers, or other markers, do I need? The /*, the "--", the "CDATA", or all three? And in what order, exactly?
    (Ring!) ...... Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! ...... (Click!)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    For CSS you should use
    Code:
    <style type="text/css">
    /*<![CDATA[*/
    your css
    /*//]]>*/
    </style>
    For Javascript you should use
    Code:
    <script type="text/javascript">
    //<![CDATA[
    yourscript
    //]]>
    </script>

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's not so bad! A few articles I've seen (like THIS one) mention huge "escape sequences" such as

    <!--/*--><![CDATA[/*><!--*/
    ...
    /*]]>*/-->

    and I wouldn't mind using those if necessary, but they're only needed if you also want to hide the contents from the old browsers. And if you change later to an XML mime type, they won't work any more. Thanks a lot.
    (Ring!) ...... Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! ...... (Click!)

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Fwiw, I suggest avoiding the need for convoluted comments by simply keeping the css and js out of the markup document and bringing them in as external files.

    (Using content negotiation) I serve my own site as XHTML 1.1 using the application/xhtml+xml mime-type and do not escape/comment out the @import rules within my style elements (in the doc head) and don't appear to have any negative side-effects in those UAs which are capable of receiving the page in that stricter form.
    Externally-sourced javascript files brought in via the script element also don't need escaping/commenting as they have no internal content.

    Point being, it's far simpler to avoid embedded javascript or css and stick with keeping it in external files - like you're ideally supposed to. ;)

    That said, my attitude towards support on my own site is particularly v5+.


    (Fwiw, I strongly dislike Hickson's Considered Harmful article and fundamentally disagree with its basic assertions and conclusions. I think it's misguided and fosters an unhelpful attitude towards the adoption of progressive web development methods. It creates a sense of foreboding about XHTML, amongst those who might look to it for advice, that is neither accurate or necessary.)

  • #5
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sure it would be a bad idea for folks to put off XHTML and keep using HTML now. It's good for them to know the things Hickson brought out, but if they write XHTML now and validate it as such, they shouldn't have a great deal of trouble. The best thing would be if HTML weren't taught any more, and everyone just learns XHTML instead. Then IE would start supporting it pretty quick.

    I broke into HTML in December of 2002, and from the start I followed all the rules strictly (about nesting and closing etc) because I knew if I didn't I'd be sorry some day. By March of '03 I started following the XHTML rules too (all lower case, all attribute values quoted, etc). In April I started learning CSS, and by July I said goodbye to the font tag with no regrets. In September (still '03) I began validating as XHTML 1.0 Strict. The only problem I've had since then is that when I used internal CSS, some of the newer browsers didn't get it right because I was using only the <!-- and/or the <![CDATA[ with them--I didn't know that the /* was needed too.

    In programming, the concepts of "good structure" and "well-formedness" appeared like 35 years ago, and had completely taken hold by a decade later. The programming industry learned a good lesson from the disastrous consequences of loose syntax and poor structure in the 1950's and 60's. But the web design industry apparently still has to learn that lesson.

    The harm that the old HTML has done IMO lies not so much in its slightly less rigid syntax, but mainly in the fact that even THAT syntax hasn't really been enforced well; you can make mistakes and not only do browsers just make "tag soup" out of it, but even from a validator whatever error message you get--if any--is often something that doesn't even help much to find the error. I DO understand why. But that, plus the fact that so many authors just don't bother to validate (which makes no sense at all since it only takes a minute) has resulted in a huge gap in the quality (structure-wise) of so many web documents vs. the quality required of good ones.

    Imagine (supposing it to be possible, which it might be) that web documents contained some kind of internal "OK flag" that is turned on when the page validates with no errors; that whenever the page is changed, the flag turns off until it again validates with no errors; and that you can't upload a page to a server unless the flag is on.

    Sure, if that were put into effect now, for all existing web pages, most of them would disappear. But never mind; just apply it to new pages created in the future, and the web would start improving fast. Other problems would remain, of course, such as cross-browser issues. And there would still be errors that validators don't find--but only in HTML, which at an rate ought to be, and I hope will be, phased out in favor of XHTML. "Cleaning up" the Internet--in that sense--is a thing that certainly can't be done quickly; but I think it can be done.

    There I go again. Whenever I start a post like this, it ends up more like an article. I do have ONE ARTICLE published, but I doubt its usefulness to the web designer.
    (Ring!) ...... Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! ...... (Click!)

  • #6
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by juachoerin
    Then IE would start supporting it pretty quick.
    Hmm, I wouldn't put any money on it mate .

  • #7
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BTW, another thing that's happened to me several times in the past is that a browser fails to recognize my FIRST style rule, but has no problem with the others. Presumably that has to do in some way with parsing and syntax and the CDATA or comments-markers. It's easy to work around it, of course, by making the first line a "dummy" style rule which you don't use. But I wonder, has anyone found the cause of that bug?
    (Ring!) ...... Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! ...... (Click!)

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    To be honest I haven't had that bug. Did you have any type of embedded stylesheet or external stylesheet, did you use any type of inline styling when you get the bug?

  • #9
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, HERE'S one of the pages on which it happened. Maybe it was only my browser (IE6) that did it. My first style rule

    a:link {color:#FFFFFF}

    was being ignored, though it doesn't matter now since the page no longer contains a link.

    At the time I was using <![CDATA[ without the /* and so that may be the reason. But it seems to me that the <![CDATA[ marker should be removed anyway, since it has an XHTML doctype.
    (Ring!) ...... Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! ...... (Click!)

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by juachoerin
    Well, HERE'S one of the pages on which it happened. Maybe it was only my browser (IE6) that did it. My first style rule

    a:link {color:#FFFFFF}

    was being ignored, though it doesn't matter now since the page no longer contains a link.

    At the time I was using <![CDATA[ without the /* and so that may be the reason. But it seems to me that the <![CDATA[ marker should be removed anyway, since it has an XHTML doctype.
    Fwiw, your use of CDATA escaping/commenting is totally redundant, as it appears that you're still serving your markup as text/html, rather than application/xhtml+xml.

    It also seems strange that you've gone to the 'effort' of assuming an XHTML 1.0 Strict DTD and a few characteristics of an XML environment, such as your xml prologue - yet your very simple page uses markup that appears to have completely missed the point (and the benefits) of using proper, semantic markup.
    Far more br elements than you need and far fewer p elements than you should be using.
    There's also potential use for ul and li elements.

    Given how basic the page is, it should be 'a piece of cake' to get it all 'up to scratch'.


  • #11
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's an old page. I'm now using paragraphs instead of all those breaks. But I wanted to put the closing slashes in all my empty tags when I wrote those pages, so I wouldn't have to go back and add them later. Similarly with the CDATA and everything else. And I used the XHTML doctype for validation purposes, so if I wrote anything that wouldn't work in XHTML I'd find it out immediately rather than later. I don't think of it as "going to the effort." I want to use XHTML because it's a good language; HTML is awful, as I discussed earlier in this thread. But I can't very well start using application/xhtml+xml until IE accepts it. (Or until everybody stops using IE, which might be even better.) I realize that means I'm not yet getting the benefit of XHTML in regard to its compatibility with other XML-based tools and so on; but I'm getting the benefit of the validator and knowing that I'm following rigid syntax and that my pages are well-formed and well-structured, as I also discussed earlier. I don't want to be one of the millions whose pages will one day have to be written all over again.

    As for using external stylesheets, it makes sense in itself, of course. But the way I vary my formatting, I'd need a separate one for each page; or else I'd have to put my styles in the tags themselves, with which you can't use the CSS validator. And besides, I like solving problems better than avoiding them. The fact that I've spent my life studying stuff like programming, accounting, higher math, etc. (because it's what I love) is no doubt responsible for the unusual (and sometimes a little stubborn) attitudes I have about these things. (You only have to read THAT PAGE itself to see what an "analyzer" I am!)
    Last edited by juachoerin; 05-23-2005 at 08:53 PM.
    (Ring!) ...... Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! ...... (Click!)

  • #12
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by juachoerin
    That's an old page. I'm now using paragraphs instead of all those breaks. But I wanted to put the closing slashes in all my empty tags when I wrote those pages, so I wouldn't have to go back and add them later. Similarly with the CDATA and everything else. And I used the XHTML doctype for validation purposes, so if I wrote anything that wouldn't work in XHTML I'd find it out immediately rather than later. I don't think of it as "going to the effort." I want to use XHTML because it's a good language; HTML is awful, as I discussed earlier in this thread. But I can't very well start using application/xhtml+xml until IE accepts it.
    You may as well stop using the xml prologue then as it throws IE6 into quirks mode with the result that it (mis)understands certain aspects of CSS in the same way that IE5/Win does.

    As for using external stylesheets, it makes sense in itself, of course. But the way I vary my formatting, I'd need a separate one for each page;
    If you are effectively writing sets of css for each individual page, then you'd still be better off throwing it into an external css file and linking/importing it.
    Even if you're writing one css file for each page, there are still benefits to using external css files rather than embedded (or inline) css.

    Fwiw, regarding the CDATA escaping/commenting…
    I serve my pages as XHTML 1.1 application/xhtml+xml to those UAs capable of receiving it (and XHTML 1.0 Strict text/html to those that can't, incl. MSIE/Win) and I don't use CDATA or any other escaping/commenting around my css and I've not encountered any issues.

  • #13
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, serving with different mime types depending on the browser is ideal. But I'm not my own host, or even my own admin. All I do is set up the pages and send them to others. This is an office computer (I have no other) and you can't upload from here. We can't install software either, which is why I have no browser except IE.

    And I'm no longer using the XML prolog either. I learned the actual HTML and CSS languages long ago, but until recently I didn't know much about mime types, encodings, and cross-browser issues. When I was told by others that my pages looked wrong in some browsers, I started reading articles about these matters, and looking up a lot of things on the W3C site and such. Then I sent pages to my admin and asked him to send me screenshots of how they looked in Firefox if it was different from IE. After some experimenting I found that the best possible compromise (given that I have to use text/html only) was to code and validate as XHTML 1.0 but omit the prolog. Since then I've been all right, except that I was still encountering parsing problems with the internal stylesheets. For the time being, since it's text/html anyway, I'm using the <!--/*--><![CDATA[/*><!--*/ ............ /*]]>*/--> sequence, but I know I'l have to remove it when I change the mime type.

    I appreciate the way all you guys are helping me. I wish I had known about this site earlier!
    (Ring!) ...... Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! ...... (Click!)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •