Ground Control to Zachstronaut: Status Report
- published:
- 2009.01.19
- topics:
- css
Iterative Development
Ground control didn't like zachstronaut sitting on the launch pad with a storm of content brewing just off the coast (there is a lot of stuff I've been eager to post online), so the site blasted off a bit early. Because of this there are a couple of areas in particular that I plan on redesigning and/or re-factoring later: comments and the projects page.
Fixed Positioning Fun
The design for this site — with the rocket that blasts off as you scroll and the lunar horizon that rises to greet you with the footer — was accomplished with some clever use of CSS, specifically: position: fixed; and background-position: fixed; All of the pixel artwork and icons I did by hand. The craters on the moon were especially fun to draw.
The CSS trickery I used here works great in IE7, Mozilla, and Webkit. For those of you not familiar with the latter terminology, Mozilla describes a family of browsers including Firefox, and Webkit includes browsers Chrome and Safari. IE6 ate FAIL chips as a child, and can't handle fixed positioning.
Adios IE6
IE6 does a number of other incredibly nonsensical things besides its fixed positioning failings, but I decided to at least make my site render in a readable fashion by including an IE6 style sheet. Coding for IE6 takes a disproportionately high amount of time considering its dwindling market share; and considering my audience is pretty savvy as-is, I don't intend to officially support IE6 on this site moving forward. Moreover, for any and all of my web projects launching in 2010 or later, I won't be testing with IE6 at any point in their development. Period.
Progressive Enrichment
IE7 sure has come a long way when you compare it to IE6, but it doesn't quite deliver as many features as Mozilla and Webkit. I'm using both CSS border-radius and rgba() background colors, neither of which are supported by IE7. This means my site renders a bit different in IE7, but this is my personal site, and I personally think that a web page doesn't need to look exactly the same in every browser.
CSS Border Radius
To give an example of border-radius: I rounded the edges of the <div>'s in my footer by 12px. Here is the required CSS:
div.padding {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px; /* forward compatibility (thanks Paul) */
}
Border radius is currently in the W3C's working draft for CSS3. The CSS rules are Mozilla and Webkit specific because of this draft status. However, the border-radius property is implemented the same by both browsers, so I really wish that they had both used -draft-border-radius instead. Accomplishing the rounded edges in IE7 would definitely have been possible, but it would have required a bunch of extraneous images, markup, and CSS. I think it would be easier for IE7 to just implement border-radius. Heh.
CSS RGB plus Alpha Channel
Setting your background color with rgba() lets you specify an alpha channel value and thereby accomplish semi-transparency. IE7 doesn't support this property but does support semi-transparent PNGs. IE6 requires a javascript/crazy proprietary CSS hack to do semi-transparent PNGs. The always brilliant Paul Armstrong reminded me of the Cascading part of Cascading Style Sheets when he suggested the following CSS to deal with backwards compatibility for browsers that can't do rgba():
div.foo {
background: black;
background: rgba(0, 0 ,0, 0.5); /* set bg to 50% black in Mozilla/Webkit;
old browsers ignore, bg remains black */
}
I provide limited IE7 semi-transparency where I want using the following CSS:
div.foo {
background: url(images/black-o50.png); /* a 50% transparency black PNG */
background: rgba(0, 0 ,0, 0.5); /* set bg to 50% black in Mozilla/Webkit;
ignored by IE7 */
}
* html div.foo {
background: black; /* GO TO HELL IE6 */
}
Well, that's about all I have to say about the site and design itself for the moment. Now I'll go back to the blogging desk to create some hopefully less verbose and more topical posts.