Francois Faubert » CSS

Learning through mimicry

francoisfaubert — Mon, 24 Sep 2007 20:49:41 +0000

There are several web design projects I am actively working on at the moment. Some are for my real day job but many are personal endeavors I am likely not to finish. Nonetheless, these projects force me into solve interesting problems I knew someone else has already solved before me.

Why reinvent something when you can just “view source”?

By no means am I implying you should copy others like a scanning robot, but you should at least take a few seconds to try and understand the concept behind their solution.

This is a quick, rough list of the things I’ve learned; especially by looking at Apple.com and Google Maps.

CSS Browser validation

If the programming language used permits it, you should have quick access to the surfer’s browser information as the page is loading. By cleaning this string, you can extract a rough approximation of the browser’s type and version.

Afterwards, if you attach this cleaner and shorter approximation as the tag’s id, all of the children nodes can be modified and tweaked using basic CSS rules:

p.box {width:200px; padding:10px;}
#explorer6  p.box { width:180px; }

This should be remembered when you can’t use conditional comments to fix a rendering issue. You can push it by adding a unique identifier to the current page in the class to the tag and continue filtering the rules further:

form { background-color:#000;}
body.contact form { border:1px solid #333; }
body.register form { border:none;}

Customizing recurring styles

When you have a global theme but each single page has a very different style for its content area, you can still use general styles and customize what you need at the lowest level.

For instance, column-based design is often used on webpages nowadays. You can define a reusable column set using these rules :

.col_1_2 { float:left; width:60%;}
.col_2_2 { float:left; width:40%;}

With this is mind, you can build a widget or any sub-designed area with two columns. If this rules needs to change in only one page, you can override the rule to reflect new sizes using custom CSS identifiers.

It’s common sense and good use of CSS to try and sort out all the global widgets or recurring design types that way. On big projects using exhaustive imbrication of templates, using predefined global styles as building tools will really save you some time.

Yahoo! as Standard Makers

francoisfaubert — Mon, 11 Jun 2007 18:41:28 +0000

Long time indifference

Yahoo! is not a place I like to hang around. I guess it has all to do with how they handled the presentation of their search results back in the day. I never was a fan of categorized results — at least wasn’t ready to try harder to use them at that time.

So, for years I’ve been using AltaVista and then Google instead of Yahoo! search; Hotmail, then GMail instead of Yahoo! mail. Since I don’t like to be overrun with data, I don’t even read the news on their portal. The NY Times‘ and Radio-Canada’s RSS feeds suit me better.

In other words, I am not part of the gazillions of people that help make Yahoo! the most important website on the Internet at the moment, according to Alexa. I didn’t have much of an opinion on Yahoo! until they got so useful for the web developer I am.

YUI

Yahoo! Developer Network is a priceless resource for information on popular web technologies. What I’m more interested in however is the YUI section — the Yahoo! User Interface Libary.

Javascript

YUI is said to be built around Yahoo!’s own Javascript library. Similar to jQuery and Prototype, the YUI library helps writing Javascript code that is more efficient more quickly. At the time of this writing, Yahoo!’s library has proven to work faster than its competitors when working on the DOM. A massive advantage on its competitors is its structured verbose that seems closer to more classic programming languages.

Notably, you can create namespaces for your scripts as well fire as custom events. Obviously, you can create visual effects of custom controls for your interface using objects the community is developing. Broken down in many files, you can import only the libraries you need in your application from Yahoo!’s servers. No hassle in storing multiple version of the files.

Templates

The section supplies a collection of pre designed templates for anyone to use. Whether you need a 3 column fixed layout, or fluid 100% wide 5 columns templates, you will find the XHTML and CSS files in the YUI section completely free. Free as in no charge, but also free as in open source.

Cross-platform

Most importantly, the library is guaranteed to be working the same on any Grade A browser. Other libraries don’t always live up to that mention as the script gets more complicated. This guideline is to be followed religiously, no matter if you are using Yahoo! products or not. The chart provides great arguments when you need to justify your decision to you employer when asked to design for IE3.

Standard Pipes

While the tools themselves are incredibly useful and time saving, it’s not the best thing about the YUI. Through guidelines, tutorials and free files, Yahoo! is lowering the pain of doing web design for people who don’t know about standards, don’t want to dig in or who just don’t care. If an important company like Yahoo! continues providing resources and using their influence in the developer’s community and the software makers building the browser, the Internet can standardize fairly quickly.

Yahoo! seems to be pushing towards a better Internet and the same cannot be said of everyone in the top-most influential websites.

Accessibility Vs. The Real World

francoisfaubert — Fri, 25 Aug 2006 16:02:52 +0000

Jeff Croft, not afraid of being lynched by the new wave of accessibility-aware Web 2.0 designers, has posted a new article asking if accessibilty has been taken too far.

While I’m guessing his opinion may have been toned down on the way from his head to his hands, I do believe he has a point. To paraphrase and sum his opinion: “Accessibility is cool and all because it’s bad to ignore people with disabilities, but you can’t expect a company to spend all their web design budget for 0.5% of their customers. Therefore, some site aren’t 100% accessible on purpose.”

And it’s true. In real life, my employer gives me, say, 4 days to finish a website. It’s good enough if I can be satisfied with the semantics of things in that period of time. Odds are I won’t have any time left to make separate style sheets with high-contrast colors, one with big text, etc.

All can agree that it’s a good thing that there’s a lot more awareness around the accessibility of online content at the moment.

However, just like in any trend, it’s all too easy to pick on those who don’t follow it, never considering all the reasons for them not doing so.

CSS Specificity

francoisfaubert — Wed, 23 Aug 2006 20:46:19 +0000

If you’ve played along with CSS a bit, you generally know how to use CSS selectors and their specificity in most everyday cases.

But which CSS rule wins if you start combining regular class calls, mixed with ID and HTML tag selectors?

Well, CSS: Specificity Wars explains it all using Star Wars metaphors. There’s even a visual chart that you can print. Awesome.

CSS Optimization

francoisfaubert — Thu, 17 Aug 2006 18:57:31 +0000

There are plenty of css optimizers out there, but BloggingPro were kind enough to make a comparative chart of 5 different ones.

Removing the dotted border around links

francoisfaubert — Fri, 21 Apr 2006 13:16:59 +0000

Did you know you could remove the dotted border around your links? I didn’t. You just have to specify the outline CSS property. You can read a more in-depth explanation at Sonspring.

a { outline: none; }