Eggs Eggs -4 years ago 99
CSS Question

uppercase HTML tags within CSS selectors

While reviewing a website's source code I came across an IMG tag and I thought why are they not using img within the CSS file. I reviewed the javavscript code next and saw IMG all in uppercase as well. The code in question is for a jquery slider found on this website: Sernova.com

The CSS in question is this:

/* Slide show */
#slideshow {position:relative;height:300px;}
#slideshow IMG {position:absolute;top:32px;left:0;z-index:8;opacity:0.0;
border-top-left-radius:10px;border-bottom-right-radius:10px;}
#slideshow IMG.active {z-index:10;opacity:1.0;}
#slideshow IMG.last-active {z-index:9;}


The Javascript is this:

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}


The HTML snippet the css and javascript refers to is here:

<!-- mast slideshow -->
<div id="slideshow">
<img src="home/mast_1.jpg" alt="Slideshow Image 1" class="active" />
<img src="home/mast_2.jpg" alt="Slideshow Image 2" />
<img src="home/mast_3.jpg" alt="Slideshow Image 3" />
</div>


My questions:


  1. Are uppercase HTML tags used for CSS selectors acceptable for use today or is this style/habit deprecated?

  2. What HTML and/or CSS version(s) was this used?

  3. Is there anything else you can tell me about this styling technique?


Answer Source
  1. Are uppercase HTML tags used for CSS selectors acceptable for use today or is this style/habit deprecated?

    It's still acceptable in HTML in the sense that it's neither disallowed nor deprecated, but it does give off a rather nasty 90s vibe to anyone who might read your source code. In reality, though, it makes no difference. Note that I say "in HTML"; XHTML is a different story altogether.

    And the reason I say 90s is because...

  2. What HTML and/or CSS version(s) was this used?

    The uppercase convention dates back to SGML, on which previous versions of HTML were based. The only reason the same convention exists in CSS is simply that CSS goes hand in hand with HTML — CSS was introduced not very long after HTML 2.0 — so the norm of uppercase tag names simply carried over because hey, tag names.

    For whatever reason, though, this convention persisted in CSS long after XHTML, in which tag names are always lowercase, became the in thing (although ultimately it didn't matter because people were actually authoring HTML, not XHTML, despite what their DOCTYPEs would suggest), and you only really stopped seeing uppercase type selectors in stylesheets in the mid-00s.

  3. Is there anything else you can tell me about this styling technique?

    Most selectors are normally case-insensitive, so however you case your HTML tag names and CSS type selectors makes no difference since HTML itself doesn't place any restrictions.

    The only exception is when the document language is case-sensitive and therefore does place restrictions on selectors. This is where XHTML (and any XML-based language) becomes relevant — if the case of your selectors don't match the case of your XML tag names, the selectors won't match. But even this is more pertinent for something like SVG, than for XHTML, since XHTML is practically a thing of the past now. The de facto standard is, and has always been, HTML.

    Still, the modern-day convention since Y2K has been to just use lowercase for tag names in HTML and type selectors in CSS for HTML. Many say that this is for compatibility with XHTML; whether XHTML actually had significant influence in this modern-day convention is debatable and frankly irrelevant.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download