CSS Shorthand Cheat Sheet

If there is one thing that I’m a sucker for, it’s cheat sheets. I love letting my eyes fall upon a single page and navigate right to what I’m looking for. It takes the whole “open book, locate index, look up word, find page, find where on page” process out and beats it with a big stick.

So the other day I was working on some trivial CSS, and found myself having to look up the shorthand for ’list-style’ for the millionth time. I don’t know what in my childhood prevents me from remembering it, but… it must have been traumatic. Anyway, I looked over at my CSS cheat sheet, and it was absent. So I searched the webbernet for a cheat sheet. I found Dustin Diaz’s guide, but that wasn’t what I was looking for. It was filled with information, however I know the values-I work with them constantly. I just wanted to figure out the order and defaults… and put them on the wall.

So here is my CSS Shorthand Cheat Sheet.

This cheat sheet contains all of the cases (that I can think of) where a CSS property has a shorthand notation. I’ve even added the obscure and rarely implemented outline and outline variations, as well as the Aural pause and cue properties (respecting accessibility). I even threw in the color shortcut (#abc) in for good measure. 🙂

From a design perspective, there is obvious room for improvement. I haven’t really messed with InDesign since it was called Pagemaker, and I was doing my high-school newspaper. So that was interesting. I also wanted the design to look slightly disorganized… anyone who’s ever seen my yellow shoes will know why. There are saturated colors, but no heavy backgrounds. I wanted it to be printed, and I only have a grayscale laserjet printer. While on the subject, it looks somewhat faded when printed. I have to look into adjusting the colors for priting grayscale, but I’d prefer not to darken all of them.

Anyway, I hope that someone will find it helpful. I’m going to use it tomorrow.

Pushing Browsers

So I have been working on a small piece of navigation at work. Tabs, to be exact. Multiple items, but no more than 5 at a time. Variable length titles (including some rather long). As it is a list of links, of course, I wanted to use an unordered list. It all made perfect semantic sense. Just spit out the list, add some CSS for the tab look, and done.

However, there were requirements for its behavior. The tabs were not allowed to wrap around to the next line. They also could not just drift off the right side of the page. Everything had to be shown. And it was alright for the individual tabs to wrap and grow taller. Basically, I was told the nav had to act like a table, just not in so many words.

Because I am likely more standards-driven than most doing similar work, I wanted to stick with the list. Doesn’t make any sense to have non-tabular data in a table, I thought. Within a few minutes, I had found a semi-solution. W3C recommends the display attribute having a “table-cell” property, which was just what I was looking for. Threw it in my code, hit reload in Firefox, and wham, there it was. Needed a slight bit of tweaking, but it was working for the most part. Then I alt-tab’bed over to IE7….

Nothing.

Low and behold, Microsoft hasn’t added that to IE. Of course not. Why would they? It’s only been in the recommendation since… you know, May 1998. At least! (I don’t have the heart to look any further back).

I am not “new” as my sister would say… I know how it is. I hadn’t expected it to be there, but the more work I had to do on an alternate table-based solution, the more it annoyed me. I keep hearing more and more about the CSS3 recommendation, adding more elements to HTML 5, and all of these other grand documents, which all currently amount to little-to-nothing. Maybe I am missing the point, but if 1998 is going to be ignored, why should 2008 be any different?

I am going to keep this rant short, the rant wasn’t really the point. The greater point is that was enough of a call-to-action for me. That’s what it took to realize I should start looking into what I can do about giving certain browsers a push in the right direction. They seem to be lost.

...all this traffic.

…all this traffic.

Originally uploaded by ed_welker

Getting away from all this traffic and signing the lease to my new place today. Woo hoo! Or at least I think woo hoo.

Not going to start moving in yet, because I have a month overlap to do that.

Slightly scared, however, that I am looking forward to going back there so I can re-evaluate the place in my mind… for size and things like that. Shouldn’t I know that beforehand? Oh well.

7pm… and counting.

Minor design update

So I tweaked the CSS and arrived at this. I kinda like it. It reminds me of a pair of eighties boating shorts, not quite sure why. It isn’t the most pleasing design, but that is intentional. Clean wasn’t the goal, I was aiming for something more… me. Well, enough me as CSS can produce. (I think I just said I’m like CSS boating shorts…weird) I’m a strong believer that all comps should be done in Photoshop, where you have a freedom that CSS doesn’t allow. Then you take the comp and cut it up using good CSS and HTML. I didn’t do any of that. This was just a tweak, and a tweak on a whim at that.

Anyway, I will try to start a more formal “design” soon, but not likely before I start moving.

My new look on old characters

I don’t know much about typography. I find the subject absolutely interesting, especially from a historical perspective, but I think I am slightly intimidated by it too. It has thousands of years of history, and more than a few books I have read tell me that “the rules in use today were perfected hundreds of years ago.” I imagine a disciple of Gutenburg, wearing funny little shoes, leaning over and whispering, “yea, hundreds of years… don’t mess it up!” into my ear.

So I try not to mess it up. I take it slowly. I’ve read a few books. I’ve ordered what I hear is the typography bible, but it deserves my undivided attention, so it is still sitting sealed in cellophane on my shelves. The things that I don’t know about typography could undoubtedly fill many, many shelves. That’s why it is always fun to learn something new. And I did today, reading one of the most interesting posts I have seen in a while.

I won’t repeat it as you can read it yourself. However, in this post Mrs. Simmons mentions how common type may be considered almost as a means for wiping out a local dialect. I find that intriguing alone. She goes on to argue, however, that the common symbols further enhance the language of design. Knowing only what I currently do on the subject, I both see her point, and find the thought eye-opening. It is yet another facet of the work that I do day-in-day-out but know virtually nothing about. It is amazing how every large scale object is made up from small atom-like parts. Tomorrow I will go in and look at a word, a sentence, a paragraph, or even a single letter in a new way. Of course, this means I am going to have to unwrap that book sooner than anticipated. But this is useful information, I’ve already thought of an instance where I can apply this new knowledge. But I’m not sharing… I don’t want to mess anything up.

Anyway, thanks to Amber Simmons, who made me think of things differently today, and probably tomorrow too.