Basically this tiny PHP script will show you how to make a stylesheet switch depending on the time of day, similar to the one found here.

This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

This solution is known to work in:

• IE 5.5+
• Firefox 1.5+
• Safari 2+

Shaun Inman, we salute you.

New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details, datagrid, and command.

HTML 5 is part of the future of the Web. Its new elements enable clearer, simpler markup that makes pages more obvious. Div and span still have their places, but those places are much more restricted than they used to be. Many pages will no longer need to use them.

A few CSS3 selectors are already making their way into modern web browsers. Of the browsers tested thus far, Konqueror is the clear leader in implementation, with the Gecko (Mozilla, etc) engine not too far behind.

The basic idea is to make an extra dummy input text field in your form, and using CSS to make it invisible to the real human users.

Thereby, if a post is sent to your php script handling the request and this extra text field contains information, you know that the submit must be spam, and the script can ignore the post.

A successfull bulletproof image-based button should:

• Automatically grow horizontally to fit any amount of text
• Grow horizontally and vertically if text size is increased or if the text wraps to multiple lines
• Retain its appearance within reasonable limits
• Be able to have rounded (or other non-square) corners
• Have no unclickable areas
• Be readable when images are disabled

A bag-full of mark-up required but pretty neat.

Stop with the scrappy type and set it down to a baseline, man.

Showcases sites that push the boundaries of CSS coding technology, bringing together top-notch design and content with standards compliant and accessible code.

The 10th Annual SXSW Web Awards uncover the best new websites and celebrate those who are building and implementing tomorrow’s online trends, well that’s what they say and who am I to argue?

This is something else, isn’t it?!

This means that I (or Jadu rather) receive two complimentary registrations to attend SXSW Interactive Festival in Austin, Texas. Although there’s not a hope in hell I can afford to go to the US and take up the offer.

Winners in all categories will be announced at the 10th Annual SXSW Web Awards Ceremony, presented by Adobe on Sunday 11th March.

So why do you put up with static CSS files then?!

Not only is Web 2.0 not just about looks, it’s also originally about clean code and putting the power of design in the hands of the coder.

We have no idea why it’s taken so long for this to get through, but for some reason, people still aren’t getting it. Dynamic web languages exist for a reason. Use them. Everywhere.

- from the NeoSmart files, Dynamic CSS Style-Sheets and Web Design. A new door opens, thanks NeoSmart for such a great article.

They include: Reseting white space or cross-browser normalization, Making the absolute relative, Containing the float and The off-left technique.

The functional comparison between <input type="submit" value="Submit"> and <button type="submit">Submit</button> are identical but the button offers way more flexibility in terms of styling with CSS.

The majority of browsers do not force any particular design on the button element, leaving it a raw ingot which we can cast and shape to our liking.

For me, Aaron has helped free my buttons. The article shows some nice tidy ways to get creative with the button, so please, submit to his article and enjoy.

And thanks CSS Mania!

“I’ve prepared two example documents to show the difference. In Example 1, the layout is fully fluid, so #header and #footer are 100 % wide. In Example 2 the layout is 40 ems wide, and the widths of both #header and #footer are set to that same value.” – Roger

Both examples also demonstrate elastic layout as well as graceful degradation. As maybe expected there are comments regarding IE6 but I think it’s still pretty safe.

The Yahoo Development Network call this cross-browser normalization of the default rendering of HTML elements and it seems like a sensible way to begin the process of writing our CSS. Standardise all A-grade browsers, leveling the playing field, then write on top of this. Check out Yahoo’s Reset CSS.

There are also details specifically on cross-browser typographical normalization and control at Yahoo’s Fonts CSS which:

• Offers full A-grade browser support.
• Provides consistent font sizing and line-height.
• Provides appropriate cross-OS font-family degradation paths.
• Supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes.
• Works in both “Quirks Mode” and “Standards Mode.”
• Normalizes the dimensions of an “em” unit, facilitating liquid-dimension development.

Like I say, level the ground with some simple foundations and enjoy a safer build with less surprises!

The use of definition lists came to mind whilst reading CSS Mastery, as the amount of product information or descriptions of a product seemed to almost decree their use. They are under used (by myself) so here are a few quick references.

1. Max design looks at the basic use of the dl in Definition lists – misused or misunderstood?
2. Malarkey looks directly at the use of definition lists in product layout in E-commerce definition lists, which is a bit handy
3. Scott McDaniel gives good writing in Manipulating Definition Lists for Fun and Profit

The definition list can also be used for adverts and news stories or anything that uses a summary, an image and a title.

1. Malarkey again describes this in CSS: Hold the front page
2. Community MX (!) discuss it in Create a Teaser Thumbnail List Using CSS

Reflecting on the definition list, it’s easy to see how they can be misused, like the table, they can be pushed and sqeezed into holes they just weren’t meant to fit. Used wisely, they do improve semantics and increase the amount of hooks for CSS layout and presentation.