For the core experience, we're going to assume that our users aren't supporting the latest and greatest features used to make icons. These being, but not limited to, border-radius, css-gradients, box-shadow, and so on. The core experience is more or less a CSS2 leaning experience, but don't worry, we'll be folding in some really cool CSS3 stuff as well later on. If we were UA sniffing, the level of support we'd be looking at would roughly be IE 8, Safari 5, Opera 11.6, Chrome 17, Firefox 11, or future versions of these browser applications. For the purposes of this project, we won't be concerning ourselves with the mobile versions of these browsers but generally the newer mobile and tablet browsers are some of the most cutting edge technologies, so aside from device width considerations this experience would in all likelihood work in those as well. Maybe, having to buy a new cell phone every couple of years has its benefits after all. So the next time you see somebody rushing out to get the latest gadget, you can smile to yourself knowing it's probably packing some bleeding edge technology, such as WebKit, in addition to its shiny new high retina display that packs 4 pixels into the space that previous phones only occupied with a single pixel.

Images in this chapter will be minimal and consist of tabs for the navigation, a logo image, and a couple of background images as well. In Chapter 3, Using Modernizr the Right Way, we will see about doing away with all of them and replace them with CSS versions and even do a little bit of animating with the logo. The benefit of this is they will be vector-based, instead of pixel-based, carry fewer overheads with bytes, and eliminate the need for the HTTP requests that currently serve them up. Just imagine how happy that's going to make all of those performance evaluation browser tests at the reduction of HTTP requests and page size.

The first thing you are probably thinking is, what about IE 8? After all, IE 8 doesn't actually support the opacity parameter despite all the rumors that it would. Well, this is where the degraded experience considerations come into play. If we again go back to the good folks at caniuse.com and view the chart on CSS opacity, we'll see that while it is not supported, there is partial support by way of filters. So if we use a little, actually a lot of vendor prefixing and steer clear of trying to get crazy on some transparent PNGs, which can end up looking like white haloed blobs when faded in and out, we'll be in a pretty good shape.

Here's what the vendor prefixing will look like:

If you don't want to be bothered trying to remember the vendor prefix naming conventions, there are many sources on the Internet widely available and happy to do that for you in a matter of milliseconds. One I like in particular is Prefixr, which can be found at www.prefixr.com. Simply paste in your CSS, click to generate and you're just a copy and paste away from having a fully vendor prefixed stylesheet:

/* Vendor prefixed, and IE appeased opacity */
.watermark{
  /* MS Filtering to fill in gaps in opacity support */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  opacity: .3;
}

We'll use this CSS class to simulate a watermarking effect in our page example in the next chapter.

Despite there being a few new color options to the game, we'll stick with the traditional plain toast RGB hexadecimal values for the core user experience for the time being. New to the field are hsla and rgba, which in addition to color, allow for luminosity and opacity.

Yes, they are new and cool, and the good news is that even if your browser is older than your wine collection, and there's a moderate possibility the new elements aren't supported out of the box, shimming has our back, so these make it into the core experience.

Font face slips in, albeit just barely. It's been supported since IE 8 with a little massaging; Firefox has had it since Version 3, and Chrome and Safari have had support woven in for a while as well. Plus, thanks to native CSS fallbacks, we can put in an additional system-available fonts as a stack to fill in any gaps.

This title refers to the position of elements in the page. Our nav element will have a fixed position and will stay there oblivious to page scroll. Fixed positioning isn't exactly the new kid on the block, after all it's been supported since IE 7. Nevertheless, it's something to be aware of and is included in the core experience.

Time to put this into practice, and by practice I mean HTML, so let's piece in some new bits and bobs and then cover what's new. I'm going to build off the previous skeleton we made.