ncyoung.com

CssZenGarden is pretty amazing. A bunch of designers have each used the
same HTML document and created css files that give it radically different
looks.

Some designs I picked out:

neat rollovers:
http://www.csszengarden.com/?cssfile=/083/083.css&page=2

neat underlines
http://www.csszengarden.com/?cssfile=/091/091.css&page=1

weird link tricks
http://www.csszengarden.com/?cssfile=/073/073.css&page=3

neat page frame
http://www.csszengarden.com/?cssfile=/069/069.css&page=4

crawling underlines
http://www.csszengarden.com/?cssfile=/063/063.css&page=5

faded background
http://www.csszengarden.com/?cssfile=/012/012.css&page=11
uses
http://www.csszengarden.com/012/bandwidthkiller.jpg
and
http://www.csszengarden.com/012/bandwidthkiller-alpha.jpg

neat designs
http://www.csszengarden.com/?cssfile=/026/026.css&page=9
http://www.csszengarden.com/?cssfile=/092/092.css&page=1
http://www.csszengarden.com/?cssfile=/027/027.css&page=9
http://www.csszengarden.com/?cssfile=/033/033.css&page=8
http://www.csszengarden.com/?cssfile=/034/034.css&page=8
http://www.csszengarden.com/?cssfile=/059/059.css&page=5
http://www.csszengarden.com/?cssfile=/022/022.css&page=10
http://www.csszengarden.com/?cssfile=/008/008.css&page=11


I've heard the complaint that there are extra hooks in the HTML code that
needn't be there semantically and that are only placed there to facilitate
design. I don't see a problem with that, it's a purist "content v.s.
layout" argument I'm just sick of. It's a great theory, and no design
decisions should be made without attempting to keep structure and
presentation distinct. However, it's one of the least productive, most
annoying issues to take a purist stance over, and yet many people do just
that.

Along similar lines, what is this "graphic artists only" thing? If I can
make a design you like am I a graphic artist? and what about "in the past
neat tricks have been reserved for structured codists"? If you can do
neat tricks with css then you are a structured codist, aren't you?

Here are the complaints I have about many of the designs.

- lots of content included in images (in addition to undermining the point of the exercise, it's the most extreme violations of the seperation of structure and design you can have)(why not just lay out your page as one big image, have a css that pulls it in as a background, and hides all the text on the page, making the links into blocks and repositioning them over the images to create an image map...)
- lots of places where position and size is tweaked to fit the content... so substituting a document with the same semantic markup but different amounts of copy would break the layouts
- visited links often not indicated

I wrote before about seeing the table structure of pages using css.

I have a css onine that can be used to do this by setting it as your user defined style sheet.

Jan showed me how to make a bookmarklet that reformats the current page using a given stylesheet.

Here it is as a link.

Here it is as text:

javascript:(function(){var newSS; newSS=document.createElement("link"); newSS.rel="stylesheet"; newSS.type="text/css"; newSS.href = "http://ncyoung.com/grab_bag/tableShow.css"; document.documentElement.childNodes[0].appendChild(newSS); })();


Using attribute selectors, you can apply styles to HTML tags with specific atribute values.

I've used this to add annotation comments to a page using css. This is not a normal use of css, but rather a hack for the fact that web browsing clients do not support linkBases well.

The example: Clickstream, a web traffic analysis tool, creates a report called the "referre next report". This shows the number of people and percentage of people who leave the page by each URL on the page.

To display the data in the page, I created a regular expression to convert the data to a set of css styles. One declaration looks like this:

a[href="http://ncyoung.com/grab_bag/peeps.html"]:after {
content:"(3 clicks, 20%)";
color:red;
}

The a tag:

<a href="http://ncyoung.com/grab_bag/peeps.html">peeps</a>

Then gets the content appended to it. (Note, the CSS2 psuedo class "after" only works in Opera 7 and recent Mozilla versions, so this demo will not work in IE).

Here are the style and url in html so you can see the effect:


peeps

attribute selectors

My favorite CSS trick, or rather, the mechanism that underlies a whole bunch of tricks.

Contextual selectors let you specify rules for a class, then override them when the occur in a given context. Using this, you could re-define hover styles for links in tables, links in ordered lists, links in h1's, etc.

This meshes with good programming practices when you have code generating HTML. You can have low level code assigning simple classes to the elements it generates, and have control over the look of those elements without having to pass context parameters.

context selectors

The CSS attribute text-decoration won't override properly in the browsers I've tried. An interesting side effect: text in one color with an underline in another like this.

CSS lets you specify a context for classes, so that a style declaration can be scoped to apply only within a containing element with a certain class.

A simple example is that you can format all anchors that are in table cells with the style declaration:

td a { style-stuff }

Another time this comes very much in handy is where you have code that generates output with classes assigned. If you want to be able to change the look of one aspect of that output while leaving the others the same, you can use the contextual approach outlined above. Declare the override to apply only to a specific context, then wrap the output in that context.

So the stylesheet gets:

.specialList .listHeader { special-header-style }

Then when you go to create output, you can wrap it in a span to create the context. Assuming a generateList() function that creates a list whose heading is of class listHeader, do this:

<span class="specialList">
<?=generateList()?>
</span>

Viola, this list has a header that looks different from all other lists generated from the same code. No changes to code, minimal changes to styles, no side effects.

I've used stylesheets to help me figure out how a page is structured before, but Erik Meyer takes it a step further.

By setting up CSS styles that your browser applies to every page you visit, you can customize your whole web experience in all kinds of neat ways.

Here are some ideas:
http://www.squarefree.com/userstyles/

And some more great stuff:
http://www.oreillynet.com/pub/a/network/2000/06/30/magazine/mozilla_stylesheets.html

The "important" keyword is useful so that you can make sure your styles override those set by the page author. That's especially important when using a user defined stylesheet to tweak the page display for low-sight or other disabled users.
http://www.w3.org/TR/CSS-access#UserControl