Entries Tagged 'css' ↓

A question about using hover states on an input type=image element came up on the Web Standards Group mailing list today…

… and it reminded me that a lot of people don’t know about the fantastic input type=button that works so much better than input type=submit or input type=image.

Developers - including me, until quite recently - don’t know about it and don’t use it because although part of the HTML 4 spec, it was never supported by Netscape 4. Now that most developers don’t have to bother with that old browser anymore, we can be free to use the button element to make our lives easier.

I was introduced to the button element by Nick Cowie, who presented on the topic to the Perth Web Standards Group in March of 2005 - check out the audio recording, transcription and presentation slides.

In a nutshell, the button element is cool because button type=submit works exactly like input type=submit, except that it has an open and close tag and you can put any inline element inside it. So you can put an image, or some text, or even a Flash movie were you so inclined, and style it however you like without all the odd behaviour that you get with input type=submit or input type=image.

Another couple of links about styling buttons were also posted on the WSG list:

Styling form buttons - Tyssen Design
Push my button - Digital Web Magazine


So, next time you build a form, try throwing in a button instead of an input type=submit. But be a little careful, because they are not completely without idiosyncracies. Nick recently reported that IE gets things a little backwards sometimes (typical!).

I recently wrote about a cool idea for managing complex stylesheets: CSS style guides.

Matt Didcoe has taken the idea and run with it - creating a downloadable skeleton style guide HTML to get you started.

It’s handy in another way too. When you’re building a stylesheet for a site, especially one where the content is CMS-driven, it’s easy to overlook styling for an element that you haven’t specifically used - I always forget OL for example. When the system starts getting used and content is entered, the client start wondering why numbered lists are twice the size of bulleted lists and a different colour! So using a style guide with all the basics included is an easy way to make sure everything’s covered.

Now, team that up with a starter style sheet - I like to include the global white space reset for starters - and you’re well on your way to CSS nirvana, or something.

I’m a bit behind on my blog reading, so it’s only today that I saw this great link on Sitepoint.

Creating a Style-Guide for your site talks about a simple but clever idea: creating a HTML document illustrating each of the styles in your stylesheet, to refer to when applying styles and also when creating new classes.

I’ve worked on lots of large projects with multiple developers - in fact I’m working on one now - and I think this will save a lot of time and frustration, not to mention messy stylesheets. TopStyle has a similar feature with it’s stylesheet preview pane. You can specify a particular html page or the program will generate it’s own from your stylesheet. An external CSS style guide would be more useful for use by programming teams, however.

Another tip I started using a while back is indenting related classes in my stylesheets. This improves readability and makes it easier to find related classes. It also forces me to put related classes together! All in all a good practice.

So, got any CSS organisation or efficiency tips you’d like to share?

I was thinking of asking Nick to do a little interview about his upcoming Web Standards Group presentation…

…but he’s posted up such a good overview on his own blog that I’ll just point everyone over there: Accessible forms and more.

Nick explains his background as such:

Before I started building web sites for a living, I was a policy officer with the then Ministry of Fair Trading and I spent a lot of time working with legislation.

The first time I read that sentence, I thought it said “I was a police officer”… I was trying to imagine Nick in uniform. Not an image that really fits!

That aside, Nick’s presentation should be great, I’m really looking forward to it. Just a reminder, the details are:

Web Standards Group Meeting, Perth
Thursday August 31, 2006 - from 6pm
Edith Cowan University, Mt Lawley Tavern (Building 12)
Cover charge of $4 for nibblies and audio transcription

Please RSVP to perth@webstandardsgroup.org if you’re planning to come along.

Sadly, we just don’t have the population density in Perth. Or maybe it’s an excess of apathy. Who knows.

Russ was apologetic, but due to poor ticket sales they can’t bring the workshop to Perth as planned. The (very) few of us who were planning to attend are disappointed. Next time, I’ll have to plan to go over east instead.

Earlier today I was excited at the possibility of using the cash to go to an extra workshop at Web Directions instead. Now I’ve heard that Danzig is playing in Melbourne and Sydney at the beginning of September - so sadly, my inner geek may have to give in to my inner bogan in this case, and I may save the extra money for that trip instead.

Either way, I’ve heard that more westward-travelling workshops are planned for early next year, so here’s hoping we can rally some more interest for that.