Grammar. HTML5 does something both horrifying and wonderful: it drops the “grammar” of good HTML, that set of best practices for producing a nicely structured, readable, and up-til-now validating HTML page: head and body tags aren’t necessary, tags can contain upper- and lower-case letters, etc. –all kinds of non-XHTML gunk. It all validates in HTML5. My initial horror (oh no, new web designer are going to create a new legacy of hard-to-read HTML!) was replaced by understanding; this decision lets older pages validate under the new standard, and the grammar and good structural practice can still be used for code clarity.

CSS3: Goodbye Tiny Image Files!

For our work with CSS3, we included our code in the HTML header for time’s sake (but please don’t do this on any real site!). Here are a couple neat tricks we covered.
Rounded Corners. No longer do you need to upload a rounded-corner image! Simply declare something like

border-radius: 20px;

and you’re set. In the example, this is like creating a circle that has a radius of 20px and displaying a quarter arc of that circle as the corner.

An important note: there are browsers that still don’t support these techniques. First, make sure your site is structured so that the content readable whether your user has the latest Firefox or IE6 (well, maybe IE7…) with javascript turned off. Also try using namespace-prefixed properties in addition to the standard CSS# property; these allow particular browsers to access these values if possible:

-moz-border-radius: 20px; (for Firefox)
-webkit-border-radius: 20px; (for Safari and Chrome)
-o-border-radius: 20px; (for Opera)

Don’t forget to give the background behind your round-cornered box a different color so the rounded corners show up against it!

The Box-Shadow. Jeremy termed this technique “a renaissance of drop shadows”, and indeed we did end up with pages looking a little too dated–but there is a time and a place for the box-shadow, and CSS3 lets you deploy it without creating an image file of a shadowed rectangle. You’ll need to specify four attributes:

1. how far from top of the document the shadow starts
2. how far from left it starts
3. the width of the shadow
4. the color of the shadow

For #4, you can use the old hex colors or a new technique: CSS3 adds a new way of adding colors called RGBA (red green blue alpha). Simply provide the R G and B amounts, then use the alpha attribute to declare the degree of transparency you desire. For example,

box-shadow: 10px 10px 20px rgba(0,0,0,0.5);

results in zero red, green, or blue, and half transparency. As with rounded corners, you can use -webkit, etc. here again to get this working with more browsers.

But what if I want to make a tilted sticky note with Comic Sans font. I thought you’d never ask. CSS3′s transform property lets you tell a div to rotate a certain number of degrees, like so:

transform: rotate(10deg);

Some CSS to achieve a yellow sticky note might look like the following:

#sticky {
background-color: yellow;
float: right;
width: 200px;
font-family: “Comic Sans MS”, serif;
margin-left: 20px;
margin-right: -100px;
margin-bottom: 20px;
padding: 20px;
box-shadow: 0 0 5px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
-o-box-shadow: box-shadow: 0 0 5px rgba(0,0,0,0.25);
transform: rotate(10deg);
}

Jeremy mentioned CSS3Please.com as a good site to check out for more CSS3 learning; the site lists every CSS3 property with vendor-specific information.

Read More

Jeremy recommended the following books for further reading:

HTML5 for Web Designers by Jeremy Keith

CSS3 for Web Designers by Dan Cederholm

HTML5: Up and Running by Mark Pilgrim

Handcrafted CSS: More Bulletproof Web Design by Dan Cederholm

Want to play around with the code?

I posted the HTML5/CSS3/jQuery page I made in the workshops here, and I recommend viewing the source and even pasting it into a text editor and playing around with it a bit. To get the jQuery working, you’ll need to go here and place the jquery.cycle.all.min.js file at the same level as your html file.

Caveat: The page is NOT meant to be pretty. Some of the neat things you can do easily with the new standards, when taken together, look a lot like a Geocities overload page! Clumping them together on a single simple page, however, lets you easily play and learn them. The page also uses CSS in the header, which is generally bad practice because it takes up a lot of space and doesn’t apply across pages. Again, for a practice page it just makes things easier.

Final Comments

If you’re a digital humanist (academic or alt-ac), humanist with digital interests, or geek with a passion for history, literature, or other humanities fields, I highly recommend attending a THATCamp (I loved it so much I’m now co-organizing one!). Whether you’re a well-known name or someone who knows “nothing” but is eager to learn, these unconferences are a great space for people to share their love of the geek-nerd ,etling pot that is DH! Check out the THATCamp page for more information or go here to see and apply to upcoming camps.

HTML5 and CSS3 have been something I’ve been meaning to learn more thoroughly for a while–not just from seeing the neat address-bar games and browser-based Conway Games of Life, but also from noticing new techniques popping up in other people’s code. The fastest way to learn this kind of skill (for me, at least) has always been to learn a few new tricks at a time, use them right away to be certain I understand how to get them working, and think about how I might use them in my own projects. Besides now being able to adopt the latest standards into my DH web design, I’m now able to read other people’s code better. Most importantly for me, I found an important practical application of Jeremy’s jQuery lesson: I now better understand how to hack a jQuery image presenter I’m using on the front of Digital Dos Passos to get it to work with Omeka exactly how I want, and I’m more comfortable with using jQuery in my next digital projects.