Matt Snider JavaScript Resource

I came across a slick CSS List Box widget the other day and wanted to share it. The original page was done by Mike Cherim, CSS: List Boxes. I liked how relatively simple the HTML and CSS was, plus the design was very visually appealing.

Example 1: Modified HTML

<div class=”clb-shell”>

	<h3>Web Services (List Boxes Example)</h3>
	<p>We offer a variety of web services for our customers. Our services include:</p>

	<ul>
		<li>
			<h5><a href=”#”>Web Hosting</a></h5>
			<p>We have professional web hosting services suited to your needs. Read more about our <a href=”#”>Web Hosting</a> services.</p>
		</li>
		<li>
			<h5><a href=”#”>Web Design</a></h5>
			<p>Need a web site? We can help you build your place on the web. Read more about our <a href=”#”>Web Design</a> services.</p>
		</li>
		<li>
			<h5><a href=”#”>Web Master</a></h5>
			<p>Need the works? Our Web master services take care of every need. Read more about our <a href=”#”>Web Master</a> services.</p>
		</li>
	</ul>

	<p>To learn more about these services, check out the links above or <a href=”#”>contact us</a> today!</p>

</div>

I have changed very little of the HTML, as it was already well design and minimalist. One notable change is that the sectional heading tag are now H3 tags instead of H2 tags, and the H3 tags are now H5 tags. This follows the conventions I mentioned in last Fridays article, When to Use Heading Tags. Another change is that I removed the ID from the UL tag, because it is simply not necessary due to specificity (you may want to keep it in if you are using JavaScript to interact with the UL tag). The last change, is that I changed the “clb-shell” ID attribute into a CLASS attribute, this way you can use multiple instances of this widget on the same page.

You may be wondering why we use an anchor tag inside of the H5 tags. Ideally, this wouldn’t be necessary, but in IE 6 and lower you can only apply the pseudo class “:hover” to anchor tags. So if you like the hover style on the heading of the box, then this is necessary.

Assuming then, that you adopt my recommendations, you will need the following CSS:

Example 2: Modified CSS (assumes you are using Reset.css

/*
  First define a content are width and position, if needed. This centers (in most browsers) and applies a width
*/
div.clb-shell {
  margin : auto;
  width : 62.3em;
}

/*
  Default color, border of the heading
*/
div.clb-shell h3 {
  color : #669900;
}

/*
  P tags should pad and clear floats
*/
div.clb-shell p {
  padding : 1em;
  clear : both;
}

/*
  Always use EMs for the height, so that the boxes scale well.
  List-style-type: none should already be applied, but just in case
  Should be 4px thinner than the main container
*/
div.clb-shell ul {
  width : 61.9em;
  height : 9em;
  text-align : center;
  list-style-type : none;
}

/*
  Now I style the individual boxes (li)
*/
div.clb-shell ul li {
  margin : 0 0.2em;
  border : 1px solid #666;
  width : 20em;
  height : auto;
  background : #ffffea url(images/clb_li_back.jpg); /* Main background image */
  float : left;
  display : inline;
}

/*
  Style the li links
*/
div.clb-shell a {
  color : #669900;
}
div.clb-shell a:hover, div.clb-shell a:focus, div.clb-shell a:active {
  color : #000;
  text-decoration : none;
}
div.clb-shell a:focus, div.clb-shell a:active {
  background-color : #fff;
}

/*
  Style the h5 links
*/
div.clb-shell ul h5 a {
  color : #ffffaa;
  display : block;
  width : 19.4em;
  padding : 0.2em 0.3em;
  background : #333 url(images/clb_h5_back.jpg) repeat-x; /* header background image */
  border-bottom : 1px solid #666;
  text-decoration : none;
}
div.clb-shell ul h5 a:hover, div.clb-shell ul h5 a:focus, div.clb-shell ul h5 a:active {
  background : #957412 url(images/clb_h5_back_over.jpg) repeat-x; /* header hover image */
  color : #fff;
}

/*
  This styles the text p content within the li separately. The most important
  thing here is to re-kill the padding and add the margin to create good gutters
*/
div.clb-shell ul p {
  font-size : 0.9em;
  padding : 0;
  margin : 1em;
}

The only major change, beside the previously mentioned updates, is that I made to the styles was to rename the background images to clb_h5… instead of clb_h3. The other change is that since I assume you are using “reset.css”, we can safely use EMs instead of PXs. This allows your widgets to scale.

One other great benefit from using CLASS attributes instead of ID attributes is that you can easily override the styles here for different looks on the same page. For example, lets assume you use the ‘overload’ class to override the second CSS List Box:

Example 3: Override Colors

<ul class=”overload”>

div.clb-shell ul.overload li {
  background : #ffffea url(images/clb_li_back_2.jpg); /* Main background image */
}
div.clb-shell ul.overload h5 a {
  background : #333 url(images/clb_h5_back_2.jpg) repeat-x; /* header background image */
}
div.clb-shell ul.overload h5 a:hover, div.clb-shell ul h5 a:focus, div.clb-shell ul h5 a:active {
  background : #957412 url(images/clb_h5_back_over_2.jpg) repeat-x; /* header hover image */
}

Jason Putorti of Mint.com and Novaurora, designed some cool graphical tabs for Mint. Although, they are not bullet proof (yet), they are very close. Angel Grablev reverse engineered this technique and wrote about it here:

Amazing CSS Tab’s for your website (mint.com inspired)

I haven noticed that a lot of CSS Frameworks specify odd percentage amounts for various tags. For example, in my base.css, I set the H tags to these values (I believe I got them from either Tripoli or YUI):

h1 {
	font-size: 138.5%;
}

h2 {
	font-size: 123.1%;
}

h3 {
	font-size: 108%;
}

Many times, the only explanation give is that after much testing, we determined that these were the optimal values for all browsers. I have always wanted to know a little more than that, so I created a test page that generates elements at a variety of font-sizes after applying reset.css. Using this tool, I have been checking different fonts on different browsers at a variety of sizes. I have not come to any conclusions yet, but you may find it valuable.

Font Size Test

It is a little slow, as I use JavaScript instead of a server-side language to insert the HTML elements, but it does the trick. I have been looking at the page in several browsers (FF2, IE 6 & 7, Opera 9, and Safari 2), then changing the zoom and/or relative font-size to see how well different percentages scale. Let me know if you discovery anything interesting ^_^.

Tripoli is one of the best and lightest CSS Framework. And it has been/is still being improved! Learn more:

Tripoli Beta In Development

My CSS Rest is mostly based on Tripoli, except that I do not use the * {} style. I have found it slows down rendering in some browsers. For more detailed explanation:

CSS Frameworks And Removing X-browser Variations

There is a lot of hype on the web right now around CSS Frameworks; a lot like there used to be around JavaScript Frameworks, before they became so popular. It is important to understand what they are and why they will (or will not) be helpful to you.

What is a CSS Framework

“[A CSS Framework is] a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.” [Framework For Designers, by Jeff Croft]

That is a lofty goal and I believe that most CSS Frameworks endeavor to simplify your life. However, I do not think they usually do. Where CSS Frameworks excel is normalizing styles, especially x-browser variations and typography. Where they fail (or become cumbersome) is when they try to do too much such as: every layout under the sun, rigid design, large code-bases (bloating), etc. If a Framework does too much, then you end up needing to learn what it is doing and why, and without prolific commenting CSS can quickly become confusing and you wonder why a particular property might be necessary.

Despite the downsides, I recommend using a Framework, or at least part of a Framework. The most important effect from using a Framework is reseting browser specific styles, so that 1 stylesheet can be used for all browsers, instead of 1 stylesheet for each browser (or worse, a bunch of browser specific hacks). Most commonly, the browser variations are the default ways they apply padding, margins, and/or fonts to elements.

I personally, never use a complete Framework, because I prefer to have control over my layout and typography, but I always use a CSS Framework to reset browser styles. If you are not a designer and need a quick solution, or find CSS Frameworks helpful, then you should leverage them. Here are the few that I modeled my “reset.css” stylesheet from, which I use as a foundation for all my projects (and hopefully, on this blog as soon as I get some free-time):

• Tripoli: tries to remain simple by mostly just resetting styles, but also applies some optimal changes to typography and layout
• YAML: very well documented, multi-column layout builder with all the bells and whistles
• YUI : lots of layout variety and optimized for integration with the YUI JavaScript Library

Smashing Magazine also wrote a great article about this topic where they cover more details about each CSS Framework listed here, and several others.

Normally, I would probably taut how much I like what YUI has done, but not this time. Although, I do really like their “reset.css”, I find the rest of the Framework to be heavy-handed, with too many options and not enough documentation. Also, the Framework includes styles for some parts of the JS Framework that I do not use. YAML, does a great job, but has a lot of options and extra features that you probably won’t leverage. Tripoli, has the simplest and most unobtrusive styles, and if I was to just to throw a Framework onto a site without modifying it, I would use this one.

In the end I just wanted a set of styles to reset browser specific formatting, and I modeled this by looking at the afore mentioned Frameworks:

/**
 * Copyright (c) 2007, Matt Snider, LLC. All rights reserved.
 * version: 1.0.0
 */

/* remove default element padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

/* default color scheme */
html body {
	background: #fff;
	color: #000;
}

/* remove borders and possible underlining */
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet {
	border: none;
	font-variant: normal;
}

/* remove stylized font-variations */
address, caption, cite, code, dfn, em, strong, th, var, i, b {
	font-style: normal;
	font-weight: normal;
}

/* table and center elements should always be top left aligned */
caption, th, td, center {
	text-align: left;
	vertical-align: top;
}

q:before, q:after {
	content: ”;
}

/* remove cellpadding and cellspacing */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* clear possible list-styles; should override in design */
ul, ol, dir, menu, li {
	list-style: none;
}

/* clear possible heading styles; should override in design */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

/* prevent default browser coloring of links */
a { color: inherit; }

/* reset position of sup and sub */
sup, sub {
	vertical-align: text-top;
}

/* clear form field font settings */
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

This is available for download at http://www.mattsnider.com/assets/css/reset.css.

What does this have to do with JavaScript

JavaScript and CSS are closely linked, especially when you consider animation and all the times you have to apply a style on the fly. It is important for JavaScript developers to understand CSS and it is also important that when they apply a style to an element, that element behaves as expected in all browsers. This blog will continue to focus on JavaScript, but every couple weeks, I will write a something important about CSS so we address more complex issues and widgets involving CSS and JavaScript.

For a change of pace, below is a short article about CSS.

* (star) or Holly Hack

In most browsers the CSS root tag is ‘html’, so you might write:

html body {
	font-size: 12px;
}

In, IE (version 6 and lower) Holly (Bergevin, i think), found that the DOM actually starts with ‘*’, so you might write:

* html body {
	font-size: 12px;
}

Because only IE 6 and lower understands the ‘*’, all other browsers (including IE 7) ignore style declarations beginning with star. Because of this, many designers use this hack to apply styles needed only for IE6. Most commonly this is as a result of IE Box Model issue, however, if you build your DOM carefully and don’t apply heights or widths to elements with margins or paddings then you won’t have Box Model issues.

PNG Transparency

Lately, I have been using the holly hack, because IE 6 does not support PNG transparency. If you find yourself forced to use transparent PNGs, then you can use the holly hack to target the element and apply this Microsoft only filter:

* html a.png {
	background: #FFF;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’relative/path/to/my/png’, sizingMethod=’scale’);
}

The filter is a Microsoft only transformation that applies the alpha or index transparency filter for the image. I found with strict doctypes that the filter only works if you explicitly declare a background color, otherwise if you inherit a color, it seems to ignore the filter.

You are probably asking yourself, what is specificity and how does it apply to JavaScript?

Specificity is the measure of importance associated with a CSS declaration. This is one of the technologies that makes cascading stylesheets so powerful. If you find yourself attaching classes and not seeing the styles applied, then it is probably a specificity issue. Anyway, Smashing Magazine wrote a really good explanation. Check it out:

CSS Specificity: Things You Should Know

A List Apart Magazine recently posted an article on Frameworks. This mostly talks about CSS Frameworks, but does a great job describing Frameworks as a concept.

frameworksfordesigners