Rob Larsen

Archive for the 'css' Category

Google Doctype – First Pass? Very cool.

Google Doctype, as introduced by Mark Pilgrim:

The open web is the web built on open standards: HTML, JavaScript, CSS, and more. The open web is a beautiful soup of barely compatible clients and servers. It comprises billions of pages, millions of users, and thousands of browser-based applications. You can access the open web with open source and proprietary browsers, on open source and proprietary operating systems, on open source and proprietary hardware.

Google has built its business here, on the open web, and we want to help you build here too. To that end, we are happy to announce the formation of an encyclopedia for web developers, by web developers: Google Doctype.

Google Code Blog: Introducing Google Doctype

Personally, I'm excited by this development (both practically and philosophically) and will likely contribute wherever it makes sense for me to lend a hand. Looking at it quickly some of the HOWTO information is already very useful (the web security information especially) and it will only improve with time as more and more dedicated people get involved with the project.

CSS Variables – My Positive Feedback

I really like the idea, especially for "skinnable" apps and sites. We have a few ongoing concerns here that would immediately benefit from an @variables declaration after the reset section. Coding certain large changes, of course, would also be greatly simplified. Count me as a +1.

Initially, I do wonder about rendering performance since there are issues with IE's CSS Expressions and this seems like it could run into similar issues- then again I'm not a browser developer, so what the hell do I know? :)

Since the release of CSS Level 2 Recommendation ten years ago in may 1998, the Web authors' community has been requesting a way of defining variables in CSS. Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations. If a value is often used in a stylesheet – a common example is the value of the color or background-color properties – it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair. We expect CSS Variables to receive a very positive feedback from both the Web authors' community and browser vendors.

CSS Variables

A New Site I Made is Live: Invesra.com

Check it out.

Invesra | Invest in your Future

The company is called Invesra. It's a financial services startup with backing from Village Ventures. I did a quick site for them to get their new brand* out the door for the FinovateStartup even in San Francisco this week. They've got a great team** and an interesting product so it's been a pleasure helping them out during a crunch period. As it always does, working with a startup makes me miss those startup days myself.

Then I think back to what working for two at once was like (Boston's Weekly Dig and Advisortech) and I like the agency life just that little bit more :)

*Tom O'Keefe's excellent work

**My lovely and talented girlfriend is Director of User Experience

I Just Signed up for CSS Naked Day

My site was born ready for CSS Naked Day.

Check the hot, naked screen captures

naked.jpg

A New Site I Made is Live and I Have (nearly) Achieved CSS Nirvana

I recently did CSS/HTML and WordPress theming for Tom's My Card. My Work. blog. Normally, I would get all that excited about a WordPress theme, since I've done several, but this one had a lot going for it from a CSS perspective. I'm actually really excited about it.

What's so special about this one, you ask?

Well, for starters, there's only one style sheet (1!) and in that one style sheet there's a total of 0 (zero) rules included for a specific browser. It's true. Actually, as the last step before I published it out to his server I deleted the lines in my template to pull in an IE6 or IE7 sheet. They were empty :) Across everything else? It just works. No hacks. No weird code. No nothing. Just one style sheet that works in pretty much every major (and minor) browser. I mean it, too- I tested the home page* in Browsercam and it only really fails on browsers that I don't care about at all- IE5.2 on the Mac, Netscape 4.78, IE5.0 and IE5.5, etc.

I have seen the future**, and it is one style sheet with no hacks.

Hallelujah.

In fact, when coupled with another technique I used for the first time in this layout (using overflow:auto to clear floats) and the fact that it's fully em-based and scales like a dream, this layout is probably the cleanest I've ever done- at least in terms of CSS.

Some time soon I'm going to clean the markup up further to get it in line with the level of the CSS in terms of cleanliness (I didn't fully craft every line in the theme, using some default markup in places,) re-skin it and publish it out as a theme for folks to download. That'll be pretty sweet.

Beyond that, which is going to take a little while so I've got to do something to tide you all over, I'm going to detail some of the techniques at play in the layout later on this weekend, starting with a head-slapping, *doh* filled post about the magical powers granted by my newfound knowledge of overflow:auto.

overflow:auto!

*Bugs will shake out in both the home page and other pages. I know this.

**Frighteningly it fails in IE8 beta, but then again it is a beta (fingers crossed)