CSS, JavaScript and XHTML Explained

CSS Selectors and Browser Support April 29, 2007

Note: This grid is OUTDATED! Please see Grid of CSS3 Selectors and Browser Support

Below are the various CSS selectors, including CSS3 selectors, and current browser support. Green / √ means current support. Orange / Δ means that the browsers have some support for the selector. Red / Χ means that the browser is non-compliant. Non-compliant selectors can be used and a valid way to target individual browsers.

Notes:

• 1. IE6 doesn’t errs on mulitple classes.  A double class such as

  .red.green { }  .green { }  <p class="green red"></p>

  Both CSS selectors should match, but the dual declaration should take precendence as it is more specific. So the second should be able to define additional properties, but not overwrite properties from the first. IE6 fails here.

• Check out the definition of Double Colon Notation
• The Avant Browser selector support is identical to IE7. It was removed from the list to make the table narrower.

Javascript, CSS, and (X)HTML entities in numeric order April 28, 2007

Named HTML entities in numeric order

Below are the entities listed in numeric order with definition and ISO numeric code. CSS 'content' does not accept named entities or regular numeric entities such as @, but does render ASCII text and unicode.

If you want to replace the bullets in a bulleted list with a different character, perhaps a ♥ or · you would need to use the unicode entity rather than the named or numeric entity: use the hexadecimal entity.

li:before {content:"\2665"; text-indent: -10px;}

JavaScript Special Characters / Entities

If you want to include characters in JavaScript, the process is very similar to the CSS inclusion method, except : in JavaScript use octal-encoded characters without a preceding 0 instead of the HTML entity for the normal chars, and the hex character preceded by a \u for all other characters..

alert('M\351nage \340 trois.')

Notes:

• If you know the numeric value of your HTML entity, use the handy CSS & Javascript Entity Calculator to get the JS and/or CSS code
• There is a much smaller list of named entities in alphabetical order which may be a good place to start. Find the entity you are looking for there by appearance, then do a search for the numeric entity or named entity here.
• Remember that IE doesn’t understand the :before pseudoclass with content, and you would have to set the list-style-type as none, or you would get 2 bullets in CSS compliant browsers.
• In the above if you see two backslashes it’s because some browsers escape the backslashes and others don’t, so I stuck two in.
• If you click on any javascript entities in the "alerts" javascript entity column below, the entity will show up as an alert.

Named entities, numeric entities and ISO numeric codes

Special characters for (X)HTML

Latin-1 entity set for HTML

Latin Extended-A

Mathematical, Greek and Symbolic characters for HTML (& spacing modifiers)

Latin Extended-B

Spacing Modifier Letters

Greek

General Punctuation

General Punctuation

Letterlike Symbols

Arrows

Mathematical Operators

Miscellaneous Technical

Geometric Shapes

Miscellaneous Symbols

Named HTML Entities in Alphabetical Order April 27, 2007

CSS Best Practices April 23, 2007

Separate content from presentation in order to make your website accessible to all users and devices, increase the longevity of your website (you won’t have to touch you HTML to alter the page’s layout), and enable the creating of new pages without worrying about consistency of appearance or layout. (Note that i wrote this in 2004 and posted here in 2007, so some stuff may be archaic).

General CSS Rules

• Build and test your CSS in Firefox (or Safari if you are working on a Mac).
• Specify units for non-zero values, but not for zero values.
• Don’t use quotation marks around paths/URLs when setting a background image or loading in an imported file
• Try to avoid applying padding/borders and a fixed width to an element. Rather, apply padding to the parent element.
• Minimize number of ID’s used
• Minimize number of classes used
• Don’t use anchors, instead use ID’s.
• Sandbox your style declarations
• Combine selectors.
• Use good naming conventions
• Control the browsers CSS: Start with a clean slate.
• Declare relative font sizes instead of absolute.
• Create classes for error handling named based on the error
• Avoid !important.
• Avoid in-line CSS
• Code link pseudo-classes in this order: Link, Visited, Hover, Active.

Stylesheet Maintenance

• Minimize and clean up your css
• Organize your CSS file
• There are pros and cons to using Multiple stylesheets

HTML Development

• Separate Structure and Presentation
• Use HTML structure
• Encompass everything in an element.
• Use HTML elements for their intented purpose:
• Avoid excess code
• Avoid meaningless markup
• Case sensitivity

General CSS Rules

Build and test your CSS in Firefox or Safari if you are working on a Mac.

• Do not look at it or test your code in other browsers, especially IE, until the code is complete, approved and validated. This way you will start with clean, standards-compliant code that you can alter for non-standards compliant browsers, rather hacking from buggy code to support good browsers
• If developing in Safari, develop with embedded styles in the header, but launch with imported styles to eliminate potential caching issues.
• @import or <link> the css. It is better to <link rel="stylesheet" type="text/css" ... > because using @import can delay the rendering of your page.
• Use as few browser hacks as possible, and document them with comments. Try to use valid CSS filters instead of non-validating hacks

Specify units for non-zero values.

• Zero is zero, so do don’t include a unit type. For all other cases, CSS requires you to specify units on all quantities such as fonts, margins and sizes. Example: margin: 0 4px 0 2em;

Don’t use quotation marks around paths/URLs when setting a background image or loading in an imported file

• They are not required or necessary and they will freeze IE5 on the Mac.

Try to avoid applying padding/borders and a fixed width to an element. Rather, apply padding to the parent element.

• Because of IE 6 (and lower) box-model issues, if you apply padding to the parent element instead of the child element, IE will render the same as standards compliant browsers.

Minimize use of ID’s:

• By encompassing sections in a named outer div, you can generally stylize all the contained components without the use of classes.
• Use IDs sparingly: IDs have to be unique on a page, so using them for structural elements means that you can only ever have one content block on a page. #mainnavigation li li a should suffice for a drop down menu link and can be overwritten with #mainnavigation li li li a if there are submenus.
• With minimal use of ID’s one can still target almost any element on the page, while allowing ASP.net autogenerated code (which is “ID happy”) to have the freedom to put ID’s all over the page.
• Combine your selectors and sandbox your declarations (see below)

Minimize use of classes

• Only use classes on elements that have any chance of being repeated on a page and in different locations, if the element is going to exist in a predictable location cascade based on the parent div ID,

Don’t use anchors, instead use ID’s.

• Less code with multi-purpose code. Instead of using <a name=”anchor”> give an id to the parent of where that anchor would fall. All ID’s need to be unique, but so do the named anchors, so you are actually saving code and avoiding the pitfall of the effects of a a:hover defined for actual links

Sandbox your style declarations

• Limit the “reach” of style declarations by pre-pending the class name, such as #maincontent p{}.

Combine selectors.

• Keeping your CSS light is important to minimize download times; as much as possible, group selectors and rely on inheritance.

Naming conventions:

• Never use layout descriptives in class names. Rather, use functional names for your classes, avoid words that describe how they look or where they are located on the page. “mainnavigation” is better than “leftnavigation”. Use “.copyright” and “.pullquote” instead of “smallgrey” or “indentitalic”. Name classes/IDs based on function, not appearance. If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense. Instead use descriptive classes like
• Always use intention revealing classnames: Its tempting to use short cryptic class names (.s, .lbl) but unless you keep a glossary up to date of your class names, you will forget what they do. You may also run into problems with older browsers that can occasionally confuse classnames that start the same (i.e. .err and .errors are sometimes confused)

• Avoid using the same classname for different purposes. The cascade can be very powerful but sometimes there is a temptation to use the same generic classname in many places. If you don’t sandbox your Css well, you can run into troubles.
• Always use the same classname for similar purposes: Becuase the cascade is so powerful, you should reuse a classname in different places when they represent the same concept.
• Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID. Often you see things like:<div class="headertitle">...</div>
<div class="headerdescription">...</div>
<div class="headerlinks">...</div>

  It’s far better to write:

  <div id="header">
<h3>...</h3>
<p>...</p>
<ul><li>...</li><ul>
</div>

• Although class and div names can include lowercase, uppercase, numbers and additional characters in class and div names, it is best to use all lower case letters and to for multiple word classes, separate the words with an underscore or use camel case. HTML attributes “id” and “class” are case sensitive!
• Never use javascript method or property names as ID values.  JavaScript DOM bindings specifies that javascript can index by id. For example, using “length” as an ID value on an element will cause headaches when using myObjects.length.

Start with a clean slate.

• Create default page with no rendering; include this code but change color and font-family if necessarybody, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: x-small;}
table{border-collapse: collapse; border-spacing:0;}
fieldset, img{border:0;}
address, caption, cite, code, dfn, em, strong, th, var{font-style: normal; font-weight:normal;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
q:before, q:after{content:'';}
• If you select other fonts for display, you don’t need to declare default classes since the first declaration declares default classes for all necessary elements.

Declare relative font sizes instead of absolute.

• Always declare font-sizes in percentages or ems for maximum usability, consistency, and accessibility. This will enable pages to grow organically when user chooses to make text larger or smaller. Ems are easier to control than pixels.

Create classes for error handling named based on the error:

• Form error handling is a good place to use multiple classnames. As an example, if you have a form, fields are typically either required or optional and have an error or not. Use “error required”, “error optional, “error feedback” (for a total of 4 classes, instead of 6), etc. Don’t call the classes “rederror”, redbigerror, etc, because when coding new error messages it won’t be obvious to the programmers which class to use.

Avoid !important.

Avoid in-line CSS

• Inline styles negates the power of CSS and should only be used for testing purposes, such as including style=”border: 1px solid #ff0000;” to identify box model quirks

Code link pseudo-classes in this order: Link, Visited, Hover, Active.

• In your CSS, code the links in order of a:link, a:visited, a:hover and a:active. Some people remember this best by the mneumonic “LoVe HAte”. In the hover definition, include visited:hover to ensure your hover effect works on visited links.

Stylesheet Maintenance

Minimize and clean up your css

• Use as little CSS as possible, remove styles and parts of styles not being used or that were experimented with in the design process.

Organize your CSS file

• Introduce your stylesheets with comments and explanation of how the particular sheet fits in with other sheets and with the site.
• Use a predictable format. Organize similar rules together and use comments before each section to help you keep track of things for future redesigns/updates.
• Group your styles with short and precise labels via comments
• Make sure to comment blocks of CSS appropriately, group like-selectors, and establish a consistent naming convention, white space formatting. Incase different developers are using different platforms to edit the CSS, it is best to use spaces instead of tabs for white spce. Also, it is helpful to have consistent property order, though this is one I don’t do.
• Start with clearing all default values, as mentioned above: this will reduce redundancy. Follow this by global styles. Lastly include section specific styles. For example, declare default element values. Next create sections of code for each section of your document. Next come the content sections which I generally divide into #header, #navigation, #maincontent and #footer. Include all the layout for the various elements for each of these id’s that are site global within each section
• After site-wide declarations grouped by section/ID, if there are different “page colors” or layout looks, include a section for each of the different looks. If a declaration is valid for all “looks”, include it in the declarations above. If a declaration is valid for a subset of looks only, first declare a section for the multiple subset looks. This should be followed by unique page sections.
• Finally, declare “weird” effects that only effect a paragraph type, a link based on value, etc.

Multiple stylesheets

• Multiple stylesheets are appropriate for large and complexly styled sites, however extra http calls should be minimized.
• Make sure multiple style sheets are really worth while - a single long CSS file can at least be searched easily (”find all instances of h2″)
• The base styles file contains CSS rules that can be applied on every page, more specific sheets based on section or page color schema.

HTML Development

Separate Structure and Presentation

• The goal should be to only have one line of CSS on the entire page: the call to an external style sheet.
  The eventual goal should also be to have one line of JavaScript - the call to the external file, with no inline event handlers, but we haven’t covered that yet.
• Use semantic HTML structure that have semantic meaning such as <strong> and <em>
  instead of <b> and <large>. To give emphasis to a title, or stylizing a p tag, use semantic mark up such as <h1> thru <h6>

Encompass everything in an element.

• <div> and <span> have no intrinsic meaning. Encompass all text in appropriate elements: <h1> … <h6>, <p>, <cite>, etc.

Use HTML elements for their intented purpose:

• Use <blockquote> for blockquotes. <li> for list items, <cite> for citations.
• Use list items for lists of links. Remember, navigations are generally a list of links and it is appropriate to use lists.

Avoid excess code,

• Instead of repeated <br /> and  <p></p> use margin and padding

Avoid meaningless markup

• Instead of <b> and <i>, use <strong> and <em>

Case sensitivity

• All HTML markup, JavaScript, and CSS should be lowercase. Event handlers should be written in all lower case: use onlick not onClick. (actually, they should be in your JS, not in XHTML, but if you’re going to use them, make sure they’re lowercase). Use <p>, not <P>. Attribute values should all be lower case as well, unless referring to a file name that includes other characters. File names and file extensions should also be lowercase (no rule on this, just easier to remember class names, file names, image names, etc. if you don’t have to worry about case.
• If a header should be all-caps, code it in regular case as you would want to see it printed, and then transform the text to all uppercase with CSS text transformation.

Controlling cursors with CSS and creating .cur files April 21, 2007

Creatings Cursors, a.k.a. .cur files

You can convert images such as .jpgs or .gifs into cursors. A static cursor is saved as a .cur file. An animated cursor is saved as a .ani file.

To create a .cur or .ani file, you need specialized imagery software that is freely available. Available software includes the free Just Cursors that is a bitmap style editor and Icon Forge which costs money, but has much greater capabilities.

Here are the steps:

• Download and install the imagery software of your choice, listed above.
• Convert your image to a .cur file if you want a static cursor. For animated cursors, convert your animated .gif file into a .ani file.
• Upload your image to your server.
• Write a CSS class to target the cursor (see below for instructions)

Including cursors with CSS

To include image cursors, you need to have the .cur file loaded onto a server on the Internet so that you can point to it:

<style type="text/css">
li { cursor:url(http://www.yourdomain.com/images/yourimage.cur); }
</style>

If you want to simply control the browser default cursor with CSS you don’t use the image path, but rather, the cursor name:

li { cursor: text; }
a {cursor: pointer;}

Controlling cursors with JavaScript

You can dynamically change your cursor using javascript:

object.style.cursor="text"

List of Browser Cursors

Hover over any of the definitions below to see how the cursor renders in your browser:

Value		Appearance and default browser defined usage
url(image.cur)		Image cursor you defined (if browser supports it)
default		The default cursor: default value for disabled form elements and media="print" styles.
auto		The browser’s default cursor: input[type="hidden"]
crosshair		Like a big plus sign
pointer		hand pointer: input[type="image"]
move		cross with four arrows: Image Resizing
e-resize		left-right arrows: Image Resizing
ne-resize		arrows pointing northeast & southwest: Image Resizing
nw-resize		arrows pointing northwest: Image Resizing
n-resize		arrows pointing up & down (points northeast in IE): Image Resizing
se-resize		arrows pointing northwest & southeast (points northeast in IE): Image Resizing
sw-resize		arrows pointing northeast & southwest:Image Resizing
s-resize		arrows pointing up & down (points northeast in IE): Image Resizing
w-resize		left-right arrows: Image Resizing
text		Line up and down, indicating text: input, textarea, a:visited, a:hover
wait		Watch or hourglass
help		Question mark or balloon: not a default browser value for XHTML, but often used in conjunction with elements having a title attribute.
progress		difference in browsers, but shows waiting: not a default browser value for XHTML, but often used in conjunction with elements having a title attribute.

Note:

• I recommend against using image cursors, especially animated .gif cursors, since they are annoying.
• You can even convert a Flash movie into a cursor: first export the movie as an animated gif, then export your .gif to an .ani file.
• If you are declaring an image cursor, remember to always define a generic cursor at the end of the list in case none of the url-defined cursors can be used. A list of cursors should be specified, followed by a standard cursor designation. Then, if the user’s browser cannot handle the image cursor, it will use the the other specified cursor. If that doesn’t work, it will use the default cursor defined by the browser.
  {cursor: url("firstcursor.cur"), url("secondcursor.cur"), pointer;}
• Safari, IE and Firefox support cursors of type .CUR and .ANI. URL-specified cursors are not yet supported by Netscape and the alternate cursor does not load, so you’ll get the default.
• .cur is for a regular cursor, .ani is for an animated cursor.
• To see the cursors on your desktop on windows navigate to C:\WINDOWS\Cursors

DTD - The Document Type Declaration April 20, 2007

HTML5
<!DOCTYPE html>

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 for Frames
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 4 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4 Loose
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4 Frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">

• A DTD is a Document Type Definition, also know as DOCTYPE. In a document served as text/html, the DOCTYPE informs the browswer how to interpret the content of the page. If the the doctype is not declared, the browser assumes you don’t know how to code, and goes into "quirks mode". If you know what you are doing and include a correct XHTML DOCTYPE, your page will be rendered in "standards mode".

• All of the above declarations will inform the browser to render the browser in standards mode. When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The declaration must be exact — both in spelling and in case. And, the URL must be included. If not, you risk having your page rendered in quirks mode. A list of the DTD’s and how browsers handle them can be found at http://hsivonen.iki.fi/doctype/

• There are other DTD’s, such as <!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd"> for MathML and <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> for mobile. A list of valid DTDs is maintained at http://www.w3.org/QA/2002/04/valid-dtd-list.html

• The XML declaration for XHTML web pages of <?xml version="1.0"?> is optional. Older browsers such as IE5 for the Mac choke on this. And, if you include it, IE6 renders in quirks mode, but IE7 renders in standards. So, for now, omit it. But, if you do include it, it must be the very first line, before the DTD

Why is quirks mode bad? Ever code a page and have the font inside your data tables be huge? That’s because in quirks mode browsers render td’s based on the browser default, not on the declared body default size. The box model is rendered differently and images as block instead of inline.

Why are DTD’s good? In addition to everything above, a DTD enables you to have valid code. To test validity, a page is compare to the rules for that document type. If you don’t have rules, how do you compare it? The DTD tells the validator what rules to use.

What is the difference between strict and transitional? Transitional allows deprecated tags and attributes to pass validation. The strict doctype is strict: depreciated tags and attributes will fail to validate under a strict doctype and may well display incorrectly as well. See Comparing XHTML and HTML, Strict and Transitional and Deprecated Elements and Attributes.

What does PUBLIC mean? In the above DOCTYPEs, all of them include the term "PUBLIC". If you are creating your own DTD then put your DTD on your sever and include the term "SYSTEM" with the path to your DTD file. On the other hand, if you are using PUBLIC DTD’s, such as those listed above, and the public identifier which starts with -//.

Sample:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This page is a the best DTD to use </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

IE7 only CSS hacks: Explained April 18, 2007

Targeting Internet Explorer 7

There are at least 6 ways to target IE7 only.

• The Star Hack
• Conditional Comments
• The LANG filter
• Triple X Hack
• The Case Sensitive Attribute Hack - NEW
• Aimsterloo Hack - NEW

To see all these Hacks in action, open up IE7 Only CSS Hacks: Examples in your browser. The text will appear purple in IE7 and black/shades of grey in all other browsers

The Star (*) Hack

html>body .myClass { *color: #ff0033; } where color could be any attribute

Method:

• Make it readable by IE with an asterisk in-front of the attribute, but not readable by any other browser. Other browsers skip over the attribute since it is not a valid attribute spelling
• Make it not readable by IE6 by include the html>body.
  IE6 does not understand the html>body
• This is the simplest way, but makes your CSS will not validate.

The conditional IE comment

<!--[if IE 7]>
<link rel=”stylesheet” type=”text/css”
href=”someFileName.css”>
<![endif]–>

Method:

• This causes an extra http request, but only for IE7 users.
• This is foolproof, and allows for correcting IE7 quirks. Quirks that i’ve
  found so far include rendering font sizes with em’s weirdly and a 3px offset on page centering.

The LANG filter

<body lang="en"> . . . </body>
(In XHTML, body should have the language attribute to make this work )

(then, you declare the IE7 and old browser value)

#item {background: red;}
html>body {background: blue;} 

*:lang(en) #item{background: green;}

This is read by FF & Opera. remember pseudo classes hold no value in the
cascade, so either put “!important”, or declare this value second…. declare the value second since you shouldn’t use important!

#item:empty {background: green !important} 

This is read by Safari supposedly, but i have yet to test.

• The original article on this can be found at http://www.ibloomstudios.com/article7. I added the html>body to make this an IE7 only hack. IE7 understands the html>body, but IE6 does not.
• I am still testing this one, and haven’t looked on a mac. But the bonus is
  this validates, and telling the screen readers and search engines that your
  page is in English is always a good idea.
• Since this validates, I consider this a “filter” rather than a “hack”

Triple X Hack

From Brothercake, this hack takes advantage of IE7 support for the substring matching attribute selector, which is an improvement over IE6, and it’s continued lack of lack of support for the negation pseudo-class. And, since Opera 9 doesn’t support the negation pseudo-class, there’s an added CSS3 media query to negate the style for Opera 9.

p.test { color:red; }
p[id$="test"] { color:green; }
p[id$="test"]:not([class="xxx"]) { color:red; }
@media all and (min-width:0px) { p[id$="test"] { color:red; } }

<p id="text" class="test">This paragraph needs to have both a class and id to be targeted by this filter.</p>

Note

• In the brother cake explanation another hack is presented: the XMLNS hack:

  p[id$="test"] { color:green; }
html[xmlns] p[id$="test"] { color:red; }

  That hack doesn’t work for me: IE7 undertands the substring matching attribute selector.

The Case Sensitive Attribute Hack

The quirk in IE7’s support of substring matching attribute selectors can be exploited.  IE7 employs some case-sensitivity to the value of an attribute whether or not the attribute type requires case sensitivity. While it makes sense to compare id values in a case senstive manner, attribute values for HTML are case insensitive. The XHTML specifications state that element and attribute names must be lower case, but it does not say anything about attribute values.  In this case, img[align~=LEFT] will match align="LEFT" but not match align="left" but img[align~=left] will match align="left" and align="LEFT".

Code:

p[align~=left]{color: #0000ff;}
p[align~=LEFT]{color: #ff0000;}

<p align=”left”>This will blue in IE7, red in Firefox and black in IE6</p>

This will blue in IE7, red in Firefox and black in IE6

Method:

• Use attribute selectors including E[attribute], E[attribute~=value], and E[attribute|=value], where the value is not truly case sensitive (such as align, but not alt or id. IE7 incorrectly requires the attribute value to be case sensitive.

Rationale:

• For an understanding of why this works, please see my entry IE7 CSS Selectors: How they fail. I discovered this hack while testing out all the selectors.
• Tested with XHTML transitional, Strict and HTML 4.01 strict
• XHTML specifications state that attribute names are case sensitive, but don’t specify that attribute values need to be, so this is indeed valide

Notes

• For me it makes most sense to add the cased attribute to the body tag instead of the each element that needs the hack. For example,

  p.casesensitive {color: #000000;}
  body[align~=left] p.casesensitive {color: #cc33cc;}
  body[align~=LEFT] p.casesensitive {color: #666666;}

  <body align="left"> <p class="casesensitive">This will purple in IE7, grey in Firefox and black in IE6</p>

  the body attribute can be used for all child elements, so useless attributes don’t need to be added throughout the HTML document.

Aimsterloo Hack

The :first-child pseudo-element works in most cases in IE7 except when the first child is a comment. IE7 treats the comment as the first child, even though CSS specifications state that :first-child should apply to elements, and comments are not elements. Note that there is a space between the selector and the colon. 

div :first-child {font-weight: bold;} will not match the paragraph in:
<div class="happy">
<!–comment –>
<p>Hi</p>
</div>

The trick to making this hack useful site wide is to add a useless comment immediately following the opening <body> tag.

p.fchild {color: #000000;}
html>body p.fchild {color: #cc33cc;}
body :first-child p.fchild {color: #666666;}

<body><!– useless comment –><div><p class="fchild">The div should be the first child of the body, but in IE it isn’t…

Notes

• I can’t show some of the hacks on this page since I didn’t do the template.  However, they can all be seen in My IE7 Hack Page.

Notes:

• To see all these Hacks in action, visit IE7 Only CSS Hacks: Examples. The text will appear purple in IE7 and black/shades of grey in all other browsers
• To learn all about how IE7 fails to understand specific CSS Selectors, I posted details in my blog at IE7 Css Selectors: How they Fail
• If you would like to target IE6 and less, IE7 and all others separately using the * hack, the code would be:

  
p {
color: #ff0000;     works in all
  *color: #00ff00;     targets IE6 and IE7
  _color: #0000ff;     targets IE6, not read by IE7
  }

• The conditional statement can be used to link to an external stylesheet (recommended, because it’s best to separate style from content) or the style can be added where the link element is located in the above example, if you are looking to reduce HTTP requests.

  <!--[if IE 7]>
<style type=”text/css”>
p {color: #ff0000;}
</style>
<![endif]–>

About

My name is Estelle Weyl. I am a consulting web developer and have a full time job as a Web Developer too. I just updated the reinstalled the blog (5/28/2008), so please be patient if you are a Mac user… there are lots of quirks in the new template I still need to iron out.

If you have any recommendations on topics for me to hit, please let me know via comments. I am currently working on entries regarding: favicons, microformats, image effects using CSS, eventlisteners/eventhandlers and cross browser AJAX using YUI and a php proxy. Let me know!

View blog authority

At some point I will tell you a little about myself. But, in the meantime, I will spend time sharing knowledge I gain as I continue to develop websites. Here are some sites I have developed:

• Yahoo! Mobile
• International Yahoo! Mobile Websites
• AT&T Yahoo! for DSL
• Verizon Yahoo! for Broadband
• ANF Rare Jewels
• Cyclone Microsystems
• Agiliance
• Merritt Staffing
• Muzzy Learn & Play

• APIAHF
• Scott Kleeb
• Lynn Sien Designs
• Words & Ideas
• Hudson Retina
• Fundamental Capital
• Table d’Hote
• Stratton Gardens
• Track-a-beast

A comment about comments

All relevant comments will be approved whether they slam my work or support it, as long as the poster legitimately identifies themselves. Differing opinions are o.k. The reason there is an approval process is because I have better things to do than weed out spam, and web developers have better things to do then weed thru useless comments. Below is an innappropriate (a.k.a funny, but don’t open at work or if easily offended) video that explains why comment approval processes are needed.