Scarf*oo

Welcome to the first part of the Back to The Basics series of articles here on Scarf*oo. In this series, I’ll focus – in simple terms – on the basic stuff every web developer should be familiar with. Today, we’ll be looking at the shorthand CSS notation, a quick way to write long CSS statements in one short line.

(more…)

Take a break from work, sit down comfortably and watch this nine minute clip with Jeffrey Zeldman discussing web standards, how it all began and why should we care about them. Now I know how young our job is and how even big minds like Zeldman find themselves constantly taking tradeoffs when developing web sites.

Hear ye, hear ye! i invite you to take a look at NVDA – a free, open source screen reader. There is a short review of the software over at 456 Berea Street if you’re interested.

While I loved playing Lemmings, I never loved playing with IE. After spending a full week in bed, this is the first news I ended up stumbling into – IE8 Has Arrived. My head is still swimming around from the fever, so you’ll excuse me for not delving into the depths of this release.

If you are clueless about HTML 5, take a look at Christopher Schmitt’s Looking into HTML5 slides. No audio on the slides, but interesting to watch and read anyway.

If you are into em-based layouts, you probably want more precision when translating your photoshop designs into pixel-perfect HTML and CSS creations. Simply setting the font-size in your body element to 62.5%, will make sure that from now on, you can rely on the rule of 1em = 10 pixels.

body {
	font-size: 62.5%; /* 1em = 10px */
}

Note: Careful if you modify the font-size on a container element – that will break the 10px rule on all the contained elements!

This one’s got my heart pumping again – and it hasn’t happened in a while, mind you. I am talking about Mr. Jason Santa Maria and his latest article titled Making Modular Layout Systems over at 24ways.org.

The method is simple: write a bunch of well-thought classes, chain them together and you get a robust and versatile grid layout. A recommended read!

Ever happened to you that after applying one of the many solutions for fixing IE’s png background image support, links on that element didn’t work? How about repeating background images? I bet most of you will nod in agreement. Well, Drew Diller from dillerdesign.com‘s got the solution for you. While his script fails to apply PNGs to the body element and to an img tag (for now), it solves the problem with background-position and background-repeat.

All you have to do is call the following script and voila, your headaches are over:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png_bg'); //EXAMPLE
</script>
<![endif]-->

Head over to the DD_belatedPNG page for downloads and more examples.

On one hand you have a carefully written fast web site and on the other one, well, you have another carefully written web site that isn’t quite as performant – but why is it so?

The answer doesn’t lie in your web site’s size, but in the number of elements on your site, and consequentially the number of requests to the server to fetch those elements. Surely, you should always be careful to cut down image size, choose the appropriate image format, produce clean and nice (x)html and couple it with CSS, but as experienced web developers we already know that, right? Right?
(more…)

Here we have been blessed with the green light to step up from WCAG 1 to the latest and greatest WCAG 2. You can read more about the topic by following the links below:

• Overview of WCAG 2.0 Documents
• How to Meet WCAG 2.0 (Customisable quick reference)
• Transitioning from WCAG 1.0 to WCAG 2.0
• Accessible Forms using WCAG 2.0