Articles in the ‘CSS3’ Category

The Progressive Web with Andy Hume (LWS Future)

Monday night (16th August 2010) was London Web Standards‘ ‘Web Futures’ event with presentations from Clear Left‘s Andy Hume (@andyhume) and Richard Rutter (@clagnut).

This is part covering Andy’s talk which was on “The Progressive Web”. First up, my sketchnotes.

Sketch Notes of The Progressive Web with Andy Hume

Sketch Notes of The Progressive Web, apologies to Andy Hume

The basic message of Andy’s talk is that the landscape of the web these days (note my awesome rolling hills) has changed and people should be more open to these new techniques. By designing and coding sites for today and tomorrow, you are not only reducing the amount of work you have to do now, but you’re decreasing the number of bugs, not having to re-do gradients for high-resolution displays, and you’re also making your web site faster, which is directly linked to revenue. There’s no reason not to add these things in now unless you’re designing entirely for IE6.

Andy talked extensively about @media queries, how these should be used instead of browser sniffing (read: should do feature detection) and how they can make simple websites work better across more web-enabled devices. He demonstrated the dConstruct website as a good example of this.

Andy put up two great slides, one on when you can use HTML5/CSS3 standards today, and where you should use intermediaries like jQuery. The other slide is poorly reproduced in my sketchnotes (middle-right), showing the cycle between standards, new hacks, old hacks and back to standards. This indicates a whole new era of innovation in the web now that we have these new standards.

So, a great talk by Andy. Read part two, on the future of web typography by Richard Rutter.

The Future of Web Typography with Richard Rutter (LWS Future)

Monday night (16th August 2010) was London Web Standards‘ ‘Web Futures’ event with presentations from Clear Left‘s Andy Hume (@andyhume) and Richard Rutter (@clagnut).

This second part was on the Future of Web Typography, presented by Richard Rutter (also of FontDeck)

Sketch Notes of The Future of Web Typography with Richard Rutter

The Future of Web Typography, apologies to Richard Rutter

Richard is heavily into his typography. He recently launched FontDeck, a web fonts web service similar to TypeKit et al. Richard talked a lot about how bad things were before, how system fonts had reduced our creativity and what sort of deep opportunities for font producers lay in the CSS3 Fonts module.

Many of the features discussed (and sketched) aren’t available in any build of a web browser, for instance kerning, numeric variants, ligatures, different types of ligatures, font stretch, named font weights, hyphenation and many other things. Firefox 4.0 is starting to implement many of these features but it’s very slow going. A lot of time was spent pointing out what these things could do, and how they improved readability. He did also say that this “is not a Firefox fanboy love-in”.

Near the end of the talk, Richard discussed a new anti-aliasing method from Microsoft called DirectWrite, a feature that uses a computer’s GPU to render fonts on a sub-pixel level. He even went so far as to say that

“With DirectWrite, fonts will look better on IE9/Windows 7 than on a Mac”

He also made mention of the iPhone 4’s retina display. The future is high-resolution displays, and with rendering technology that can actually support all of these rules which are built into fonts, the web will be a much nicer place to read content.

Richard made  a lot of the new way fonts were being served (as a service) being beneficial to both the client and to the foundry. It’s cheaper for the client (not having to buy fonts at £500 a go) and the foundry also stops their fonts being pirated and distributed around the web.

Overall, Richard was quite downbeat about the state of things right now, but is confident they’ll get better.

The full slides from this presentation will be available shortly (check back later).

Read the first part of this event, Andy Hume on The Progressive Web.

CSS3 Bookshelf

Using CSS3 and a little JavaScript, I’ve created a bookshelf for your blog. For a demo, go to the CSS3 bookshelf, for some more information on how it was made, read on.

Inception

A few weeks ago, Nic Price (@nicprice) and I were talking about blogs and taking a picture of his bookshelf to show what books he’s found helpful over the years. After a little consideration, and watching the CSS 3D transform demo (snow stack), I thought that this is a perfect candidate for some CSS trickery.

The sketch

One sunny morning, I drew this:

CSS3 bookshelf sketch

CSS3 bookshelf sketch

The concept is simple:

  • a definition list of title and description.
  • Style and transform thes to look like books on a shelf
  • CSS animations on hover to pull the book slightly out of the shelf
  • Move the book into the centre on click/touch, displaying the definition underneath
  • Use as many CSS3 techniques as possible

Implementation

Starting with the definition list, I set out the widths and heights required for each of the books. Initially, only the spine of the book was showing, but that didn’t look as good as a small gap. Each element is positioned using relative-absolute positioning, allowing for simple movements using the left property to center each book in the screen, instead of lots of calculations when using translateX. So, pretty standard stuff to get the books in line.

Book Styles

Each book has a css class associated with it. This allows for title position customisation and different backgrounds, widths and heights. Each book makes use of CSS3 Multiple backgrounds, allowing for different images between the book spine and the front cover. Whilst this can be done in one image with photoshop, I decided not to (potentially, the spine of the book can be removed).

Book titles

The title of each book needs to be rotated to read down the spine. Optionally, I could have put the titles into the background elements, making them more like the actual books. Unfortunately, I couldn’t find good images of the spines on the internet, and there’s more opportunity for CSS3 transforming text. So, using the -vendor-transform property, I rotated the text 90 degrees:

-webkit-transform: rotate(90deg); /* Rotate book title 90 degrees */

However, this rotates the whole element, so a tag has to be used to target only the text. In the example there’s a few other properties to make the text line up properly, and on some books it’s overridden to allow for longer or shorter titles. In the end, it looks like this:

dl.bookshelf dt span {
	-webkit-transform: rotate(90deg); /* Rotate book title 90 degrees */
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
 
	display: block;
	position: relative;
	width: 300px; /* width is height of book */
	top:150px;
	right: 130px;
}

Animations

On hover (or focus) the book pulls itself out from the shelf and tilts slightly, adding some box shadow to give it a 3D look. This is in two parts, defining what elements will transition on the element, and then changing the values on hover. These values were gained by trial and error, with a small rotation and translation looking better than a more pronounced movement.

dl.bookshelf dt {
	height:300px; /* Default height of books */
	display: block;
	float: left;
	border:1px solid black;
	font-size: 1.5em;
	position: absolute; /* Using relative-absolute positioning */
 
	-webkit-transition-property: left, webkit-transform, webkit-box-shadow; /* transition on two properties */
	-webkit-transition-duration: 0.5s; /* take 0.5 seconds */
	-webkit-transition-timing-function:ease-in; /* Ease in */
	-webkit-transform-origin: left bottom; /* use the left, bottom of the element as the origin of transformation */
/*... see css file for full vendor property list */
}
/* Hover over or focus on a book and have it pull out of the shelf */
dl.bookshelf dt:not(.showBook):hover, dl.bookshelf dt:not(.showBook):focus {
	cursor:pointer; /* turn cursor to a hand */
 
	-webkit-transform: rotate(-5deg) translateX(-30px); /* Roate 5 degrees and pull out 30px */
	-webkit-box-shadow:#000 1px 3px 5px; /* Add a box shadow so it looks like the book has depth */
/*... see css file for full vendor property list */
}

Note the dt:not(.showBook), because we don’t want the selected book rotating when hovered over. I tried using -webkit-perspective here to make the books look a little more “3D”, but I couldn’t make it work properly. It’s a feature only available on Safari on Snow Leopard so isn’t widely used enough for my purposes.

All of those three together produces this:

CSS3 Bookshelf using animations, transforms, web fonts and multiple=

Showing the Book
Using a little JavaScript, I added a click event that added a class of “showBook” onto the <dt> and <dd> tags. This triggers an animation to move the book to the middle of the page and displays the definition below it.

The animation is pretty simple stuff, modifying the left property and the z-index, no keyframed animation. I did try more complex animations, but it didn’t add anything to the look and feel, only complicated code.

Themakes use of border radius, RGBA for its background and text-shadow to make the text stand out on the opaque background. Eachhas an Amazon affiliates link which floats to the right hand side of the definition. These together look like this:

A Book and description in CSS3, showing transform, box shadow, RGBA and text shadow

A Book and description in CSS3, showing transform, box shadow, RGBA and text shadow

The code for that looks like this:

dl.bookshelf dt.showBook {
	-webkit-transform: translateZ(10px); /* Come above all the books */
	-webkit-box-shadow:#000 10px 10px 5px;
	/* See code for other vendors */
 
	left:335px; /*(page width / 2) - (book width / 2), or thereabouts */
	z-index: 100; /* just in case the translateZ doesn't work */
	padding-left: -80px;
}
 
/* Class applied to definitions when shown */
dl.bookshelf dd.showBook {
	display:block;
	width:350px;
	position: absolute;
	top:310px;
	left:250px;
	background:rgba(0,0,0,0.8); /* RGBA background */
	padding: 10px;
	color:#fff;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px; /* Opera and MS will support border radius without prefix */
	text-shadow: #666 1px 1px;
}

Before I finish, there are a few caveats:

  • The only browsers to completely support all features are Safari for Mac, Chrome 5 and Opera 10.5
  • Firefox gets animation support in 3.7 (or above)
  • Animations aren’t smooth in Opera 10.5 until they’ve been run a few times; after that, it look fantastic.
  • Internet Explorer… let’s not go there. Some features like border radius will work in IE9. I’ve put all vendor prefixes in even if the browser doesn’t support it at this time.

Update #2: Firefox 5 is fully supported with animations. IE9 is functional and IE10 platform-preview 2 works very well

So, enjoy the CSS3 Bookshelf, I’ve enjoyed making it and it’s a good use of this new technology. I’ll make a downloadable package available in a few days, for now, take a look at the source code.

Thanks for reading.

Update: I’ve re-jigged the CSS a little to account for some more perspective. I’ve also changed the shelf as the old one was, well, hideous. New screenshot below:

CSS3 Bookshelf

 

Debugging print stylesheets

Simple premise: web sites are designed for the screen, they are meant to be viewed through a computer and that’s about it. Still, most people want to print out a web site at some point and your design probably won’t look very good. Print media strips out all backgrounds and forces a page width so large fixed width sites simply won’t print all their detail.

The simple answer to this is print stylesheets using the media=”print” or @media print options. This is covered in great detail all over the web, and so the basics of print stylesheets won’t be told here. What I’m going to cover is how best to debug those print styles so that you can quickly edit and get a good print stylesheet together.

Why can’t I see you!

My number one issue with debugging print styles is having to use print preview to show what the effects of a print stylesheet will look like. It can take a long time for older browsers (IE6) to render print previews and it’s just not necessary.

Simple remedy: when debugging, make your print stylesheets media=”all” to see live previews of what the effects are.

This isn’t ideal, especially if you’re debugging on a live site (though if you are, you really should get a development environment). So, thankfully, there is an alternative, in the form of the Firefox Web Developer toolbar.

Using the web developer toolbar to debug print stylesheets

In the image above, I’m using the web developer toolbar to display my print styles, reducing my web page to what print preview will see. You should also tick the “persist features” option or you’ll have to keep turning the print stylesheet on each time you visit the page.

This technique has additional benefits, in that Firebug, the web developer’s best friend, picks up the print styles as if they were the only ones available. This allows you to experiment with the stylesheet on the fly, speeding up development time.

What about IE?

Due to the unique way that most developers are funded, you will still have to deal with Internet Explorer. IE 8 is pretty good at print styles, using the “fit to width” option by default, which gets around most of the awkward layout problems. However, IE 6 doesn’t have this facility, so layouts often go wrong. Here’s a few workarounds for common problems:

Pre-requisite

Make yourself an IE 6 only stylesheet. In the spirit of graceful degradation, use conditional comments to target the offending browser with its own stylesheet. This allows you to target IE6’s inflexible width issue without damaging the other stylesheets. Put something like this in your site:

Make all your IE 6 specific changes in this file. As with the first technique, you may want to change the media to “all” to see what happens without using print preview.

My content goes off the page (to the right generally) and doesn’t come back

With a print page in portrait mode, you only get about 70% of the screen space. In this case, content simply overflows off the page and can’t be retrieved. Instructing your users to print in portrait mode alleviates this a little, but isn’t ideal for most clients.

If you have a fixed width layout, start by changing all of these pixel values into percentages. IE printing responds quite well to this in both landscape and portrait. If this doesn’t have the desired effect, consider removing and floated columns that you may have, allowing the sections to naturally flow beneath each other. Whilst this isn’t ideal, it can prevent content loss.

There’s a blank page in my printing / nothing appears when I go to print preview

This is an odd one. This can be caused by improperly clearing floated elements, so check those out. A good way to debug this is to turn off any custom styles that you’ve added (i.e. make sure your main stylesheet is set to screen, or comment it out) and see if the content prints. If it does, build your stylesheet back up until you find the problem.

If you still don’t see anything, it’s likely there is an in-line style causing the issue. SharePoint has tendency to add “height: 100%” to a few elements, which to most browsers means absolutely nothing, but IE6 takes seriously. Set that to “height: auto;” and you should get all of your content back again.

I’ve got some VML (IE’s Canvas implementation) that I need to hide but can’t

Sad news here, I don’t believe you can hide it in print stylesheets. If anyone knows how to do this, please let me know.

Don’t forget: printing is about the content

A printed page doesn’t have to look beautiful, with rounded corner borders or large images; the content should be laid out simply and should flow correctly. Use these techniques to get that right and all your print styling headaches will go away.