So for the tenth anniversary, the Zen Garden is open for business once more. I’ve thrown the codebase on Github, given the dusty copy a refresh, started the conversion of the site to HTML5, and brought all of the existing designs kicking and screaming into the modern age. The work isn’t done yet, but it’s a darn sight closer to how we would build it these days. If you see an area that needs help, consider sending a patch. (Here’s the current list of issues to resolve, for example.)

10 Years [Mezzoblue]

It features a chapter on logically marking up page structure with the new semantic tags (header, nav, section, article, etc.), which explains the contexts they should be used in with a hands-on example of restructuring a blog without excessive divs. A lot of online tutorials make the error of suggesting the aside element for a blog sidebar, which the book helpfully points out as wrong. The section element is the proper tag for the job, as it denotes an arbitrary section of the page, whereas aside is for broken-out sections of your article content, such as pullquotes or diagrams.

From there the author moves on to some CSS3 tricks using newly-added selectors. He shows some simple methods to add zebra-striping to tables with pseudo-classes and add visible URLs to links via a print stylesheet with :after. There’s a brief section demonstrating media queries, as well some on the new JavaScript APIs—localStorage and history pushState, for example. There’s even a bit on using cache manifests to set up offline access.

Oh, and the deprecations. HTML5 deprecates a good many tags and attributes. There is a section listing those, as well as some modern alternatives, such as opening links in new windows without the deprecated target attribute. It can be done cleanly and semantically by using JavaScript, without impacting the user’s ability to middle-click a link and open a new tab…which far too many sites still do today. If you do that, you need to read this book just for that reason.

It’s 2012, already! Why are we still relying on pictures of typographical symbols? Let’s do it with the power of CSS!

Let’s start with some simple HTML. Before we can style anything, we need to create our blockquote. While we’re at it, a cite element is a nice, semantic way to attribute the quote to its originator.

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
<cite>Somebody famous</cite>
</blockquote>

Now some CSS to provide some basic styling for the blockquote. Leaving the default browser style isn’t going to look great, so we’ll use a largish serif font with a little extra line spacing. And a slightly lighter color. Extra-dark grey adds a subtle variation from your main body text.

blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

Now for the fun part: the giant quotation mark. The :before pseudo-element can be used to dynamically insert content before the text of the element, and style the content you insert. This is great for decorative text, like stylistic curly-quotes. The trick is to use an escaped hexadecimal representation of the desired character, and a little bit of fiddly positioning stuff to make it sit in the right position.

blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

That’s the most difficult part. You may have to experiment with the size and positioning until it looks right, though. Once everything looks nice, you can apply the same technique to style the citation. Using the :before pseudo-element, you can insert an em dash and a space before the text.

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

Easy, isn’t it? The effect should work in all modern browsers, and IE8. (IE8 will only process the pseudo-element if your document has a doctype declared, but you should have one of those already…) In browsers that don’t support it, the added content simply won’t appear, leaving the main text of the blockquote (and the citation) intact. The other styling will remain, of course, so it should still look good enough.

You can see a live demo here.

The CSS is simple, though of course it won’t work for Internet Explorer, except for the very latest version.

#flipdiv {
    width: 100%;
    height: 100%;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

Now you want to wrap everything inside your <body> element with a new <div>. (You have to style the div instead of the body itself, as you get some weird box model issues otherwise.) It would look something like this:

<body>
<div id="flipdiv">
...everything else...
</div>
</body>

If you want to automatically scroll down to the new top of the page, a.k.a. the bottom, you can use a little JavaScript snippet to bump it down.

<script type="text/javascript">
window.onload = scrollDownToTheTop;
function scrollDownToTheTop() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>

Silly, but not bad for an April Fool’s joke.

CSS Gradients also add some additional versatility, in that they can stretch to fill dynamically-sized page elements, unlike tiling background images, which can of course only scale along one axis. (And it just seems to much less hacky than loading up a tiling image for a fairly simple effect. Pixel shims, anyone?)

I had held off using CSS gradients, since they were “a fancy new CSS feature unsupported by a lot of browsers,” until I recently realized that not only did all of the modern browsers support them, but many of the browsers were already supporting them without the vendor prefix. IE support is still iffy, only working properly in IE10, but what does Internet Exploder do right?

If you’re not already using CSS gradients, you should definitely read up on them. There’s a good article over at the venerable CSS-Tricks.

The Selectors Level 4 document already has one feature that is unfortunately missing from CSS3: parent selectors. You will finally be able to do things like selecting all a elements that have an img element inside them, with this syntax: $a > img { ... }.  The draft also mentions “nth-column” selectors, for styling all of the cells in a specific table column.

Of course, it’s probably going to be awhile until we start seeing browsers supporting this on a usable level.

Before anyone comments about the CSS3 spec not being “finished,” note that W3C specs are not prescriptive. They’re not “finished” until they’re pretty much supported by the major browsers, and changes have been made based on the implementation. A couple of the documents for CSS3, Selectors Level 3 and CSS Color Module Level 3, are already under the Completed Work section of their website.

Line25 has a fresh tutorial on How To Create a Stylish Button Entirely with CSS3.

Next we can begin styling the button with a coloured background, this is where CSS gradients come in handy. Two colour swatches are converted into gradient syntax for both Mozilla and Webkit browsers using the handy CSS Gradient Generator, then a fallback option of a flat colour is added for non-supporting browsers.

The tutorial only uses the -moz and -webkit gradient properties, but someone in the comments included ones for Opera, Internet Explorer 10 and the W3C’s proposed syntax for the actual CSS3 spec.

The syntax is easy, you just comma separate them. I find it’s easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn’t obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implimentations follow. The first is on top and they go down from there.

The syntax looks something like this:

/* Fallback for older browsers */
background: url(fallback.png) 0 0 no-repeat;

/* Multiple backgrounds! */
background:
url(top.png) 0 0 no-repeat,
url(middle.png) 100px 0 no-repeat,
url(tile.png);

Is that cool or what?

If having missing images just isn’t acceptable for your site, you can use a little “hack” to load a fallback background. Placing the first background property seen in the above code snippet will allow for graceful degradation, as older browsers will simply ignore the newer version of the background declaration. It has the disadvantage of loading it anyway with newer browsers, though. I think a better option is using the single-property for design-critical images that need to load in any browser and using the other for progressively enhancing elements.

As an example, to round the corners of a button by 6px:

#myButton {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

The first property is for Firefox and other Mozilla browsers, the second is for WebKit browsers like Safari and Chrome, and the third is for future browsers that actually support the official property that will be part of the CSS3 standard. (IE9, oddly enough, is rumored to eventually support this.)

Need to round just one corner?

-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;

Oh, and the article also shows how to create the custom buttons that Google uses for WebKit browsers.

What would be do without Smashing Magazine?