Back to Cower's Blog ( Created 21 March 2010 | Last Edited 21 March 2010)|
|Development Diary : Spifftastic Revision|
|My site has been sitting around sort of rotting over the past year or so. Times have changed, my site is not very well suited for mobile browsing (although I really don't care about that since mobile users aren't going to be reading my site, probably), the design is sort of crusty and I'm not a big fan of it anymore. So, simple solution: redesign the site. Again. This'll be the 8th time? Who knows.|
Anyhow, I decided to start by looking at what's available in CSS3, and there are a bunch of things I'm using now. Not all of them are officially in all browsers, so it's more or less been a process of finding out what things are supported across the board. Firstly, multiple backgrounds are supported on all browsers that I care about. That's a big one for me, because it really, really, really rocks when designing things. I don't have to have three <div>s inside of an <li> to get left/right/center images, I can just build three images and position them in the background. It's absolutely awesome.
Because pictures do a good job of illustrating it, the tabs visible here are just list items:
XHTML-wise, they look like this:
That's it. No need for three <div>s. The CSS for this is fairly simple, albeit ugly:
So, right now the idea is to just get a layout in a single file in small pieces and then break it up into components that'll be crammed into a Wordpress theme.
Oh, and as I mentioned above, this is only for 'browsers that I care about', so Opera, Firefox, Safari, and Chrome will all render the above correctly (although the border-radius stuff is a pain in the neck). Internet Explorer 8 and under are not on my list of things to look at. If IE9 is released, I'll look at it, but I see little reason to when Internet Explorer is continually losing market share and I can't imagine anyone using IE reading my site. The design does work on Android and the iPod Safari (not surprising, they both use WebKit), so that's good. So out of 7 browsers (all of the aforementioned), only one doesn't draw it correctly: Internet Explorer. So, yeah, death to IE.
|Posted : Sunday, 21 March 2010, 10:58|
|Awesome! I'm glad multiple backgrounds are usable now. Looks really nice!|