CSS, JavaScript and XHTML Explained

CSS issues and hacks for Mac IE 5 May 8, 2007

To Target Mac IE 5 only to the exclusion of all other browsers:

@media hack

/*\*//*/
@import "externalstylesheet.css"
/**/

Mac modified Tan Hack

* > html .someclass {proper\ty: value;}

To Exclude Mac IE only

Mac Band Pass Filter

@media all {
     #someDiv {property: value;}
}

Single declaration commented backslash hack

 /* start comment and include one \ so mac ignores just the next line */
     .ignoredByMac {property: value;}

Multiple Line commented backslash hack

/* put the backslach at the end of this line \*/
		.ignoredByMacIE {property: value;}
		#alsoIgnoredByMac {property:value;}
/* normal comment ends exclusion */

Issues in Mac IE 5 that will require above type hacks:

• scrollbars appearing in absolutely positioned elements when the element is close to edge of browser window.
• z-index issues when images have alignment. Shouldn’t be an issues since you shouldn’t be using the align attribute anymore. Float the image with CSS instead
• text in floated elements with no width declared wrap incorrectly
• background images don’t work correctly if inline style is declared with single quotes. Shouldn’t be an issue since you shouldn’t be using in-line styles.
• radio and checkbox form elements inherit the background image of their siblings.
  declaring vertical-align with a background: inherit on the same element can crash the browser.

Why do we even care about such an old browser and Mac IE 5 that even Microsoft no longer supports?

Microsoft stopped supporting the standalone version if Mac IE, however, it was the default browser on the mac from 1997 to 2002, and was available on Macs until January 2006. When it was originally released, it was seen as a pretty good browser with decent CSS support. Mac OS users only account for 3.89% of site visits 1 and 1.7% of the site visits are on Safari, 2 so 2.19% of the population is on a mac and surfing the web with something other than Safari.  In otherwords, I can’t find the stats now on IE5 mac usage, but it is likely a large chunk of the 2.19% of the population that is using a mac, but not using safari.

Other IE 5 Mac Hints

• In developing for Mac, it will cache your CSS. Simply open your CSS in another browser window and refresh it with every test.
• Mac IE 5 chockes on the XML declaration. <?xml version="1.0" encoding="LATIN-1" standalone="yes" ?>  is optional and crashes IE5 on the Mac, so omit it.
• You want it? You can download IE for the Mac here.
• In the modified Tan Hack, make sure the slash is not in-front of A-F, as combinations such as \d are seen as hexidecimal numbers.

CSS Selectors and Browser Support April 29, 2007

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.

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.

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!

Start with a clean slate.

• Create default page with no rendering; include this code but change color and font-family if necessary

  body, 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   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. 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.

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

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]–>