Simian Design

Richard Rudder has written a great article on how Font-weight is still broken in all but one browser.  It’s something that I myself have never really bothered with much, as it hasn’t seemed to work, and so I’ve stuck to the tried and true ‘font-weight: bold’ and ‘font-weight: normal’.  If I wanted a heavier font, I specified a heavier font in the ‘font-family’, or ‘font’ declaration.

Since its inception in 1996, CSS has provided a way of displaying these other weights through use a numerical scale with the font-weight property. This is still almost entirely broken in every current browser except Firefox 3 on Mac.

Wow.  It’s always been there.

As well as the normal and bold keywords, font-weight also takes nine numerical values of 100, 200, through to 900. These numbers span the scale from ultra-light to ultra-black, with normal defined as 400 and bold defined as 700. So to specify a ‘light’ weight you would write font-weight :300. Here’s a rough guide matching the numeric scale to common weight terms:

100	ultra-light, extra-light
200	light, thin
300	book
400	regular, normal
500	medium
600	semibold, demibold
700	bold
800	heavy, black, extra-bold
900	ultra-black, extra-black, fat

It’s a great article, with great examples. And it’s a crying shame this doesn’t work in more browsers.  There are workarounds he talks about, but just don’t seem worth it.    Thankfully Webkit seems to be working on this issue.

Frankly it’s really depressing that this bug is still present after 12 years, and regardless of success or otherwise in Acid tests, these browsers cannot truly say they support even CSS 1 fully or correctly. I hope we see fixes soon (apparantly already done in WebKit). I know fonts are a tricky subject in operating systems, but if it can be done in Firefox 3/Mac then surely other browsers can quickly follow.

Flickr recently released a Flickr site custom tailored for the iPhone.  They wrote about some of the rules they learnt doing this site, which I find fascinating.  I’m pulling out the main points, but you really need to go read the detailed description of why they’re doing things the way they are.

1. Don’t Use a JavaScript Library or CSS Framework
2. Load Page Fragments Instead of Full Pages
3. Don’t Build for Just One Device
4. Optimize Everything
5. Tell the User What is Happening

Now they’ve put together a library just for the iPhone that handles many of these items. The iUI framework seems to be a iPhone version of the YUI framework, but it’s a good start.

A really great chart to determine the Pixels to Ems Conversion Table for CSS. Thank you Jon Tan.  A quick over-view/sampling below.

What this chart allows you to do is determine the em width of something. Say you have something that is 770px wide, and using a font-size of 1em. You know then that the em-width of the layout is: 1 ÷ 16 × 770 = 48.125em.

The 10 best CSS hacks is a great list. Defintely worth checking out.

1. Vertical align div
2. Min-height
3. PNG Transparency
4. Autoclear
5. Reset CSS (incredibly important)
6. Scrolling Render IE
7. Opacity
8. PRE Tag
9. LI Background Repeat IE
10. Targeting Browsers

Good stuff.

Eric Meyers Reset CSS has found a permanent home now. Reset CSS is a useful tool to help you default a lot of generic styles built into browsers.

” The reset styles given here are intentionally very generic. There isn’t any default color or background set for the

body

element, for example. I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.”

Also be sure to check out his diagnositic css file as well.

“With a diagnostic stylesheet, you can quickly see where your markup might have some trouble. If you want to see this in action, there are two demos to check out:”

Incredibly useful tools, check them out.

Poolie Studios has a nice collection off icons that he uses to iconify links.  This process is a fairly lightweight, unobtrusive way to show what your links are.

a[href$=".pdf"] { BLAH BLAH } is the core of the it all.  This CSS selector object (easily done via jQuery for older browsers) allows you to showcase exactly what your links are.

I’m not 100% positive that this is always a good idea, but this is a nice collection of icons that fit the link sizes, and thus I’m linking it to you.

d’bug has a nice writeup on recreating the search field using CSS.

Normally I wouldn’t be a giant fan of changing the default input/form fields in a browser.  I think having those standards that everyone recognizes and know how to use is a powerful tool. Deviating too much from them is a risky proposition at times.   At least in my opinion it is.
But that being said, his end result is nice.  It seems to work.  And as a concept piece it’s cool. Go check it out.

Grid Calculator allows you to choose the font size you are going to use, and then select the number of columns, column width, and gutter width based on that base font size. As you fiddle with the dimensions, the total width is dynamically updated, so you can check that you haven’t gone over that magic 1024px!

Very easy and convienant for your fixed-width layouts.

Eric Meyer, CSS Guru gives us a run down on some extreme CSS Reset. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults.

“That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”. Nor am I saying that everyone must use them or else be cast into darkness. Remember before that I termed these “my take on the topic of reset styles” (emphasis added). Your take may be subtly or greatly different. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults. Simply the act of taking those defaults into consideration and thinking about them closely puts you ahead of 99% of your peers. I do think that reset styles are quite useful; otherwise, I wouldn’t have written about them here, and certainly not to the extent that I have. My hope is that people will use them as a launch pad for their own resets and for deeper thinking about styling and browsers.”

It’s a small chunk of code to simplify things, and make your life easier.  You should try this out and see if it’s for you.

A sticky footer, that is, a footer that sticks to the bottom of the browser window, has been traditionally a pain.   Well, this guy has come up with an elegant and working CSS-based footer that has been tested in IE 5 and up, Firefox, Safari and Opera.