Eric Meyer CSS Standards-Oriented Design Workshop

These are my notes from the afternoon session with CSS Guru Eric Meyer.

Started out installing Firebug and Web Developer toolbars for Firefox. Opera and Safari have similar tools (Dragon ???). We went over basic use of these tools, including how to validate a local (behind the firewall) html, change how block-level elements display, Linearize a page (removes floating), small screen rendering, diplay css by media type, disable groups of styles, etc.

http://westciv.com/tools/ , get XRAY, a neat tool that gets dragged to the bookmark toolbar that examines any element you click on in a webpage. (a Bookmarklet)

Specificity defines how specific a defined selector is. For example,
h1 {color:red;}
body h1 {color:red;}
html h1 {color:red;} /* 0,0,0,0 */
* {color:blue;}
!Priority is different than specificity

html body h1 {color:lime;} /* 0,0,0,2 */

NOTE: Eric used a neat utility (Mac) that 'lightboxed' the page except for a white circle or spotlight around the cursor.

/* 0,0,0,0 */

element - 4th column
class .joe -3rd column (including pseudo classes)
ID #title - 2nd column
inline - 1st column

html body h1 {color:red;background:gray;} /* 0,0,0,3 */

group selector h1, h2 {color:cyan;}

LVHA Rule
Love Ha
link, visited, hover, active
0,0,1,1
! order is important

Focus
Lord Vader Hates Fuzzy Animals
Luther Vandros Finds Her Attractive

a.visited:hover
a:link:hover

chained selectors, last wins for old browsers (IE6)

!important is per attribute, it overrides the standard specificity, doesn't change it.
It is used out of lazyness and for debugging purposes (specificity conflict, which is now viewable in Firebug). Good use is with print.css, where sometimes things should not print. However, importantce can trump user-defined css files.

[using BBEdit - Mac text editor]

Review of CSS versus the client browser CSS, which will override certain rules.

IE7 & up: a[href] {color: inherit;}

Attribute selectors:

a[href^="https:"] {padding-left: 15px;
background: url(icons/lock.gif) 0 0 no-repeat;}

a[href$=".pdf"] {padding-right: 18px;
background: url(icons/pdf.gif) 100% 50% no-repeat;}

http://code.google.com/p/ie7-js/

IE7.js
IE8.js

Eric asked who was still using tables to layout their sites, and there were still a few who would admit it.

Basic demonstration of floating divs.

Discussion of em-based layout (where the left and right columns dissappear below a minimum width.

vertical rule
#entry {background: url(blackline.png) 15.5 em 0 repeat-y;}

Source order: body, then navigation, then links. Better for screen readers.

www.alistapart.com/articles/fauxcolumns/
[only works with pixel based design]

www.alistapart.com/articles/holygrail

[also see: www.theholiergrail.com - JTF]

body {margin: 0 auto;}

"Different Browser Round Differently" - Marc Drummond