CSS, JavaScript and XHTML Explained

IE8 CSS Support: Internet Explorer 8 and CSS 3 March 9, 2008

IE8 Beta has been released. And, no, it still doesn’t support CSS3 selecteors.

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.

First, "YAY", IE8 supports the :hover pseudo-class on all elements. Now we can make drop down menus without javascript… or, at least, soon we will be able to!

There hasn’t been much improvement in the other selectors:

Notes:

1. IE8 gets confused on deprecated attributes and/or empty values
2. IE8 does understand this selector to some degree, but gets the regex part wrong. Basically, IE8 interprets the selector as E[attr=value], ignoring the regex part. IE8 functions correctly when it comes to case insensitivity.
3. IE8 does add quoted text before or after the element, but does not implement key term content
4. IE8 does not heed the star hack. If you used the ster hack for IE7, you won’t need to update your CSS if IE8 has corrected that issue.

Using images as Bullets in XHTML Lists October 3, 2007

Creating lists with Images as Bullets using CSS

All CSS compliant browsers and IE support images as a list style type. Most designers actually prefer to use images instead of default bullet support because there is more control and more consistency in appearance across different browsers.

While the general idea should be very simple, a simple declaration such as ul {list-style-image:url(../images/bullet.gif);} will only work cross browser if you use a 10px by 10px bullet with small font. The issue is that Firefox vertically aligns the bullet to text bottom and Internet Explorer (at least IE6, IE7 and IE5.5 on Windows), vertically aligns the bullet to text top, so if the user changes their font size, or if your image is not the same height as your text, the bullet will look off.

The solution is to remove the bullet with list-style-type: none; and include a positioned background image instead:

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
li {
	background-image:url(bullet.jpg);
	background-position:0 50%;
	background-repeat:no-repeat;
	padding:0 0 0 25px;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
li {
	background-image:url(bullet.jpg);
	background-position:0 0.3em;
	background-repeat:no-repeat;
	padding:0 0 0 25px;
}

Explaining the code

• We first remove the default bullets with list-style-type: none;. Bullets for list items are defined by the ul. Background images, however, are defined in the li.
• Set the margin and padding to zero. This is important as browsers differ on whether they use padding or margin for the left indentation. Resetting both to zero would not have been necessary if you started off with the CSS reset as described in CSS Best Practices
• Feel free to add a margin back onto the UL with margin-left: 0.5em or some other width that makes sense to you. This margin in on the UL and not the LI, so will not impact the placement of your bullets, but rather moves the whole block of list items over to the right.
• Declare a background image to be used. A no-repeat is important.
  • For one line list items, such as navigation, this is a great spot to use a sprite and change background position for a hover effect.
  • For list items with chances of more than one line of content: don’t use a sprite unless it’s the bottom right hand corner of the sprite that is being used for the bullet.
• Declare a background position
  • For one line list items, such as navigation, declare the background position as 0 50%. The line background-position:0 50%; means 0% from the left and 50% from the top. Unlike border, margin, etc. shorthand which is top/bottom left/right when 2 values are present, background is left top.
    A background position of 50% will vertically center the background image against the entire li as using percentages with backgrounds means place the xx% point in the image xx% from the top of the container.
  • For list items with chances of more than one line of content use ems instead of % to place the image. The placement will depend on your bullet image size, but generally line background-position:0 0.3em; will be approximately correct (tweak from there).  This will place your image correctly cross browser behind the first line on the left, and will be pushed down a bit or up a bit if the user resizes their text.
• Give the list item some left padding so that it allows the image to hang off the left hand side of the text and appear like a bullet. Since the bullet is an image, which is sized in pixels, define the left padding in px units rather than em.

See: Using ASCII and UNICODE characters as Bullets with CSS.

Yet Another Image Replacement Method September 19, 2007

Semantic CSS Image Replacement

Yes, "YAIRM" ("Yet Another Image Replacement Method") is a crappy acronym. Anyhow….

There have been several image replacement suggestions made over the past 5 years. Semantically, some just don’t make sense. Of course, the accessibility of your image replacement method and the semantic "correctness" has to do with how you code your HTML.

Pros

• This method works for both in-line and block style elements.
• Accessible to screen readers and non-image/non-screen media.
• Does not add extra elements only for styling (no extra span).
• Works cross browser

Cons

• Using images for text does not allow for text resizing (like all IR methods).
• Does not handle "images off/CSS on" scenario; but neither do most layouts with background images, such as the sidebar on this blog.

When I need to replace a header or some other text with an image, I simply give the element my image replacement class (<h1 class="imgreplacement">), and declare the background image, height and width I want to use either by providing an ID and defining the background image in the #id selector, or by targeting the element through specific/unique cascade. I place all of my image replacement css in a media="screen". Even though the media attribute is not heeded by all browsers, it is heeded by devices that are not screens. If your user than prints your webpage, the text that was replaced by an image in the browser will print as it semantically should.

The CSS for the Image Replacement class:

.imgreplacement {
  display:-moz-inline-box;
  display:inline-block;
  background:transparent none 0 0 no-repeat;
  text-indent:-3000px;
  font:0/0 Arial;
  overflow:hidden;
  color:rgba(255,255,255,0);
  vertical-align:bottom;
}

XHTML markup and CSS Overrides:

With my image replacement class, the image replacement method is reusable.

<h1 class="imgreplacment" title="Tool Tip Text here">Semantic Text</h1>
<a href="link.html" class="imgreplacement">Text that makes sense for this link</a>
<button class="imgreplacement" title="Close">Close Module</button>

h1.imgreplacement {
  background-image: url(path/headerimage.jpg);
  height: 60px;
  width: 540px;
	 background-position: 20px 10px;
}

a.imgreplacement {
  background-image: url(path/linkimage.jpg);
  width: 120px;
  height: 60px;
}

button {
  background-image:url(images/redx.gif);
  width: 18px;
  height: 18px;
  border: none; // overwrite default border
  cursor: pointer;
}

This is the button: Close Module. Note that is has layout, but it’s inline, and it has a tool-tip

Explanation of the Image Replacement Class:

The imgreplacement class does the following:

• display:-moz-inline-box;
  and display:inline-block; displays the element as an inline block. inline-block is not part of the CSS specifications, but it is supported by IE and all other grade-A browsers other than Firefox. This enables the image replacement to work on inline elements by enabling them to have width and height. The first line, -moz-inline-box, is for mozilla based browsers that don’t render inline-block. The second line is for IE, Safari 3 and Opera, though IE does not render inline-block truly inline.
• background: transparent none 0 0 no-repeat; sets a default to non-repeated background image placed at the top-left of the element block, but does not declare a background image, enabling you to overwrite the none with an image via a second, more precise, CSS declaration
• text-indent:-3000px; Text indent only applies to block elements. text-indent, when implemented, moves the start of the first line of text to the left or right depending on whether the property is assigned a negative or positive value. The text-indent is applied to inline-block elements, but not to -moz-inline-box. Note that IE does not render text-indent correctly, so generally I override the text-indent property for IE, but in this case the disappearing text quirk is to our benefit.
• font:0/0 Arial; Makes the font tiny or invisible for browsers. There are a few quirks: Opera doesn’t render this shorthand, and renders font-size: 0; at about 7px; IE6 and IE7 both render the font at about 1px and Safari doesn’t render font at size 0, but does intermittently underline the non-visible character at about 1px width per character.
• overflow:hidden hides anything that might be wider than the space provided. IE6 has the bad habit of deciding to grow elements to fit the content even if the size of the element is defined.
• color:rgba(255,255,255,0); Makes the font color transparent (opacity of 0) for those browsers that understand opacity via RGBA, which is a feature of CSS3 (Safari 3 and pre-alpha version of Firefox 3, but not IE6, IE7 or Firefox 2 for Windows).
• vertical-align:bottom; is required for the inline elements - it places them at the same level vertically with respect to the text around it across all grade-A browsers.

Additional tidbits

• You have to define the width, height and background image of your element.
• If needed, you can set the background position of the replacement image. It causes fewer cross browser issues to place the background image rather than setting margins due to differences in browsers interpretations of the box-model.
• Remember to use sematic markup. If the image is an area header, use h1-h6. If it’s a link going somewhere, use <a>. If it isn’t linking anywhere, it’s not a link!
• You can enhance the image replacement with a title. The title will display in some browsers as a tool tip. This may enhance the accessibility for those who use tooltips regularly.
• You can declare a different background image using the :hover pseudoclass, so when the user hovers over the element with the mouse pointer, the image changes.

While I just showed you a method of doing image replacement, I must caution against it. Using images for text is not optimum for accessibility. This method enables assistive devices to read your text with the semantic meaning defined by the encompassing element(s). This method enables users of alternative devices, such as cell phones, and text-only browsers to read your content. It also meets web standards in terms of separating content from presentation. However, when you use images to render text, your visitor is unable to control the font-size; which makes your site less than accessible. If you are required to use images instead of text to render content, and you can’t convince your client (boss, designer or contractee, or even yourself) of the stupidity (there, i said it) of using images for text, then this is the best method of making your inaccessible page accessible to the most people. Just try to make the text in your image large enough to be read by a user.

Favicons: why and how to create favicons September 3, 2007

The "WHY" of Favicons

Favicons ARE an integral part of your website and branding.

Favicons are the single most important graphic appearing on a website. While that sounds like a strong statement, it’s true. Favicons are the least expensive and most overlooked visual branding opportunity.

Favicons are the 16 x 16 pixel images that show up in the navigation bar of your browser. They also appear in browser’s bookmark/favorites menu. You might think, "big whoop! that’s not vital." But those aren’t the only places they appear.

They also appear at the bottom of my blog: not my favicon, but the favicon for stumbleupon, digg, technorati, del.icio.us, etc. Web developers and copy editors don’t even need to use the names of those online brands: everyone recognizes these networking favicons.

They now also appear next to the page title on the tabs in tabbed browsers: if a user has 25 browser tabs, each tab may be as narrow as just the favicon: would you prefer your visitors see Internet Explorer’s blue E, Safari’s blue compass, an icon of a page (Firefox and Opera), or would you prefer that they see your logo? If they see a logo, they recognize immediately what site is opened in each tab: you want to be one of those recognized pages.

Are you looking at your open browser tabs? Can you tell which pages are which? Have you checked your bookmarks list? Are there some bookmarks that stand out more than others? Have you looked at the bottom of this blog entry? Depending on how many toolbars you have downloaded and have open, you may have a plethora of favicons there too. So, have I convinced you?

The "HOW" of Favicons: How to design & create a FavIcon:

Designing a Favicon:

• If you have a logo that easily translates into something that looks decent at 32 x 32 or 16 x 16, use it.
• If you can avoid using the color blue, especially the glassy shiny blue of IE, avoid using it.
• Keep it simple. Yahoo uses a Y!, Google uses a G. Flickr uses two little circles. Delicious is a square made of 4 squares. IE is an E. These are all ones you know.
• If your logo is very complex, try using just a part of it such as the first letter. If your first letter doesn’t represent your company well enough (like in the case of this blog), use your logo color to abstract an image.

Creating a FavIcon: Converting an image to a .ico

• Following the suggestions above, create a 48×48 or a 32 x 32 image that you will use as your favicon. Save it.
• If you have photoshop, you can download a Favicon extension for Photoshop. If you don’t have photoshop, or don’t want to deal with extensions, you can visit Dynamic Drive and use their tool to convert your .jpg, .png or .gif into a .ico file. The file created will be called favicon.ico. You will be directed to download it.
• Upload the .ico file to the root directory of your website.
• If your favicon is named favicon.ico, then you don’t need to add code. However, if you don’t have the .ico file in your top level directory, or if you saved it under a different file name, or if you have different favicons for different parts of your site (not usually a good idea, but Yahoo has different icons for some of their properties, such as Yahoo! answers), then include the following in the header:
   
  
  <link rel="shortcut icon" href="http://www.mysite.com/myicon.ico" type="image/x-icon" />

Uses of Favicons

Now your favicon can appear all across the web:

• Branding in the browser address bar.
• Branding in the bookmarks/favorites menu.
• Branding on browser tabs
• Bookmarked links on other sites
• Branding in your email signature
• As a bullet or icon in someone else’s link to your site
• Let me know of other ideas in the comments section….

Alternative Text for Images: the ALT attribute August 25, 2007

For a webpage to validate and be accessible, all images must have a value for the alt attribute, even if that value is empty. The XHTML DTD requires only two atttributes for the img element: src and alt. The XHTML DTD tells you it needs to be there. WCAG tells you a bit more about what it needs to look like. Unfortunately, W3C writings are is not always understandable. This entry will explain, in human terms, how to write the values for your alt attributes.

Section 508/WCAG alt attribute Guidelines:

The first Section 508 guidelines states, "A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)". Checkpoint 1.1, the first priority of priority 1 of the WCAG guidelines states the same thing: Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets… (I shortened it. the W3C tends to be loquacious.)

• Decorative Images
• Icons
• Buttons, navigation and other images with text
• Images that link to somewhere
• Complex, detailed images that "convey 1000 words"
  • The longdesc attribute
• Other images

Decorative Images

Decorative images include background images, bullets, <hr /> equivalents, spacer images, etc. These types of images make the page prettier but have no semantic value for a webpage. The alt attribute for decorative images should be empty: <img src="path/image.gif" alt="" />.

Notes:

• If you’ve read any of my other blog entries, or other articles on web standards, you likely will never have an empty alt attribute, since you are separating the content layer from the presentation layer; and therefore not including decorative images in your XHTML; opting instead for the use of CSS.
• If you include an empty alt attribute, screen readers will skip over the image. If you fail to put an alt attibute in, the screen reader will read the entire URL of the image. Can you imagine listening to a robot say "spacer gif spacer gif spacer gif" repeatedly, or, worse, going letter bu letter thru the underscores and extensions of a filename generated by ImageReady.

Icons

The alt attribute of an icon should describe the intention of the icon, since an icon can have differing meanings depending on the context, and someone who has never seen the icon wouldn’t understand whatit emant if only visually described.

The desription of the appearance of the icon is almost alwasys a useless alt attribute value. Unless you are writing a manual on graphic design or on understanging iconography, don’t include a description of the icon as the value of the alt attribute.

An empty string is a possible relevant value for all icon alt attributes. When an icon appears directly before an equivalent definition of the function of that icon, then the value of the alt attribute should be empty. The two most common examples of this are the print and email icons:

When an icon describes the text immediately preceding or following it, it is redundant to include a value for the alt attribute of the icon. The screen reader will read "print print", or "email email".

Sample alt attribute encoding for icons:

Wrong:
<a href="inbox.html"><img src="icon/email.gif" /> inbox</a> //missing alt attribute

Will validate, but not really good: Screenreader will say “go to inbox inbox”
<a href="inbox.html"><img src="icon/email.gif" alt="go to inbox" /> inbox</a> //redundant alt attribute

Better, and correct:
<a href="inbox.html"><img src="icon/email.gif" alt="" /> inbox</a>

Best: seperates content from presentation
<a href="inbox.html" class-"email">inbox</a>

with the css of

a.email {
    padding-left: 18px;
    background: tranparent url(icon/email.gif) no-repeat 0 0;
    }

Notes:

• Although it is generally best to use CSS background images (including sprites) if you are going to use an icon
• If you use a sprite, the alt altribute should describe the relevant section of the sprite. Don’t write "sprite of icons". Instead, follow the recommendations above (all those images are actually one transparent .gif — a sprite.

Buttons, navigation and other images with text

If you are still using images for the elements in your navigation bar (shame on you!), the general rule is that the value of the alt attribute must match the text of the image. If your image says only "about", the value of the alt attribute should also read about. Then include more detail about the destination in the title attribute of the parent anchor tag.

<a href="about/index.html" title="About the Author"><img src="img/nav_about.jpg" alt="about" /></a>.

Include the text that appears within your image as the value of the image’s alt attribute.

If you are using mystery meat navigation, you should describe relevant text in the alt, not the an explanation of the iconography of the tab. This may go against standards guidelines, but since mystery meat navigation goes against web standards, at least make your website accessible to the visually impaired, even if it isn’t accessible to sighted users.

Instead of using an <img> for navigation, use text, and make your link attractive, including using your image, via CSS using image replacement. I will include a blog entry on image replacement in the near future, since i use it a lot. In the meantime, you can look it up on any search engine.

Images, without text, that link to somewhere

Sometimes it makes sense to actually use images, without image replacement, to link to a page. For example, on Facebook, Yahoo, and maybe on your company’s about page, thumbnail images of people or avatars may link to the person’s profile. If the image is within the same link as a text link, the alt attribute should be left empty. If not, however, the link should describe the purpose of the link: <a href="bios/jane.html"><img src="img/thmb_jane.jpg" alt="Jane Smith's profile" /></a>.

This is similar to the explanation on icons above. Let’s say you do use just the email icon (from the icon example above). The correct presentation would be:

<a href="inbox.html"><img src="icon/email.gif" alt="go to inbox" /></a>

Complex, detailed images that "convey 1000 words"

Sometimes images are worth a thousand words. Maps, Graphs and Charts are examples of images that contain information necessary to understanding the message of a page but too complex to be described in under 255 characters. If the complex image is followed by text explaining or detailing the content of the image, like you might find in a journal article, then a simple alt attribute value suffices.If there is information conveyed in the image that is not explained in the text following the image and is too complex to describe in 2 sentences, like you might find in a powerpoint presentation, then you need an alternative method of explaining the content of the image to those unable to view the image. In other words, if all the data presented in your image is reiterated as text, then an alt attribute value of "graph of blood pressure by age group" suffices. If there is information that is conveyed in the image that is not reiterated as text for all of your visitors to read (and search engines to find), then you should include a longer description of the image in the form of a longdesc attribute linking to content describing in full detail the contents of your image.

The longdesc attribute

longdesc is an optional attribute of the <img> and <frame> elements. The longdesc property specifies a url for a longer description of the contents of the current frame. The longdesc attribute is coded like this::

<img src="graph.gif" alt="graph of blood pressure by age group(long description available)" longdesc="supportfiles/graphdescribed.html" />

You then need to create a separate page for your longdescription. This page should include the description and a link back the current page. The longdesc attribute’s purpose is to provide a link to a separate page where a long description is available. This link is invisible to the sighted user but available to those using screen readers.

The longdesc functionality is rarely implemented in websites despite it’s being the recommendation of the WC3 and Section 508 guidelines. For this reason, you should:

• Include the fact that a long description is available in the alt attribute value of the image: it’s used so infrequently that even those using screen readers may not otherwise notice you included it. alt="graph of blood pressure by age group(long description available)"
• It’s better to not use the longdesc attribute, opting instead to fully describe the contents of the image in the text for all readers. This method provides more fodder for search engines, and explains the content of your graph that even sighted users may not have otherwise noticed or derived.
• To test whether it’s necessary, turn off images and see if all the information conveyed in the image is presented in the text in the page. If yes, longdesc is not necessary. If not, either include more descriptive text, or include a longdesc.
• When I receive data graphs, I usually include a datatable with the data conveyed in the graph. Most charts are created using MS Excel (open MS Excel, select "Insert" > "Chart"). Ask whoever created your chart image for the original Excel file, and present the data from the spreadsheet in a data table. If you don’t have the original spreadsheet, if the chart is detailed enough to require a longdesc, then it’s detailed enough to be able to cull the data.
• WebAIM provides more information on the longdesc attribute.

Other images

This is for all other images! All othIf you included a picture of yourself standing with Britney Spears, your alt attribute value should minimally read "Britney Spears and me". You can, of course, add a few more details to better describe the image if there is other relevant information presented in the image that the visitor should know.

CSS & Javascript Character Entity Calculator

Javascript and CSS Entity Conversion Calculator

Enter your HTML Entity Character number (such as &#2335 or just 2335 - ट) to get the CSS and JS values for that entity. Explanations on how to use the results are below.

Example of JavaScript Charater Entities and the DOM

Example Code (This is the code for the dynamically generated content in the button above).
var calc = document.getElementById("calculator");
var theButton = calc.getElementsByTagName(’button’)[0];
var buttonOptions = ['\u03a0\u03a1\u0395\u03a3\u03a3', '\u2660\u2663\u2665\u2666', '\u221a'];
var rand = Math.floor(Math.random()*buttonOptions.length);
var buttonText = document.createTextNode(buttonOptions[rand]);
var z = theButton.appendChild(buttonText);

The Explanation:
Line 1: gets the div containing the button.
Line 2: gets the button as an elementNode
Line 3: creates an array of strings that are made up of encoded entities. The could also read var buttonOptions = ['� ΡΕΣΣ', '� ♣♥♦', '√'];
Line 4: Creates a random number; in this case either 0, 1 or 2, since there are 3 elements in our array.
Line 5: creates a text node containing the string of javascript character entities.
Line 6: Appends the textNode created in line 5 to the elementNode targeted by line 2. We also create the variable z as a reference to the button’s textNode. I can then use that reference replaceChild() method.

Including Character Entities in JavaScript and CSS

The processes for including special characters in JavaScript and CSS are very similar:

1. hex encode the numeric HTML entity value.
2. Preced the hex-value with a slash "\" in CSS and a slash+U "\u" for JavaScript.
3. Include your entity in your code/markup.

Javascript Character Entities

alert('M\u00E9nage \u00E0 trois.') Try it

CSS Character Entities

    #heart {list-style-type:none;}
    #heart li:before {content:'\2665 '; color:#FF33FF; padding-right:1em;}

• In all but IE, this will be preceded by a heart

Notes:

• Don’t know the numeric value of the entity you want to include? 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 on the Named Entities in Numeric Order page. Or, you can simply search the first 5800 character Entities. At some point I’ll add the rest of ‘em.
• 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 javascript you can also use octal values instead of hexadecimal values for the first 255 or so characters. Yup, that’s trivia!

Including Entities without Encoding them

The reason I always use encoded entities is because I have no clue how to use my keyboard to get the right letters. It’s faster for me to look up the letter from Named Entities in Numeric Order then it is for me to look up the keyboard sequence to display the same character. For the following sample, I pulled up the "character map" that came with my OS.
You can include odd characters if you correctly set your content-Type to UTF-8.
That is the setting for this page, which allows for the following code without HTML or JS encoding.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

alert('Ế ế ∑ ở Ẅ ۹'); Try it

The question is, short of editing your .htaccess character set, how do you tell your external scripts to be served up in UTF-8? This is external and doesn’t work. I tried <script type="text/javascript" src="/articles/entitycalculator.js" charset="utf-8"></script>, but it doesn’t work.

First 5800 Numeric HTML Character Entities August 4, 2007

First 5800 Numeric HTML Character Entities

Below are left-to-right entities (Hebrew and Arabic were removed). To learn how to include the entities below in CSS or Javascript, please read visit Javascript, CSS, and (X)HTML entities in numeric order or convert is with the javascript and CSS entity calculator.