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.

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.

The easiest way to PNG support in IE6 at blog.bjorkoy.com. It couldn’t be easier. This apparently was created by Angus Turnbull.

You put a .htc file into your CSS directory, and then put that declaration into your CSS file. Pretty straightforward, and you then have PNG Alpha Transparency for IE6. Can’t be more straightforward.

Firebug Lite is a brilliant tool to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

This used to be just a Firefox plugin.  Now it’s a brilliant javascript include away from being in any browser.

If you develop for the web, this is the tool for you.  You simply must try it out.

Well, IE 7 is out.  And it’s a welcome release.  Sure it’s not as great as some of the other browsers out there, but it’s an update to an aging platform.

But as with any new browser release, there are issues.     Marko Dugonjic found a neat quirk in the ordering of fonts in the font-family declaration.  You apparantly can’t put Helvetica ahead of Arial, which is hilarious.  Arial = Windows font, Helvetica = Mac font.  Also, Helvetica is just a much better typeface.  Be sure to check out his page that renders the fonts on your screen.
Also he found that setting width in ems is flaky.  And that if you don’t set the height property for images causes issues.

Design Detector has a great long list of the issues he’s found so far.  This is a long list, and links out to many other sites that’s found other bugs.  This is defintely worth taking a look at.

And lastly, Centricle has updated his fantastic list of browser rules to include IE 7.

Bookmarklet for resizing textareas and text fields.  Awesome.  He always produces just fantastic work and this is no exception. 

A bunch of design and development links for you today. The majority (90%?) of these links came from [etc][via] the past couple of months.

* [Create really cool new windows][1] using [prototype][1a]. You can then use [script.aculo.us][1b] to have the sexy effects on the window. You _must_ try the demos.
* [24ways][2] really deserves it’s own post. It’s got [24 great tutorials/posts][2] on how to do things. Things such as:
* [Swooshy Curly Quotes without Images][2a] is great for pullout quotes.
* [Improving Form accessibility with DOM Scripting][2b].
* [An explanation of ems][2c].
* Russ Weakley shows us how to create [simple, accessible external links][3]. He uses a class in this example, but I’ve seen the same thing done using a Regex parser to loop through all the links. But that’s probably a bit much.
* [Tagcloud lets you create and manage clouds][4] with content you are interested in, and lets you publish them on your own website.

[1]: http://blogus.xilinus.com/pages/javawin
[1a]: http://prototype.conio.net/
[1b]: http://script.aculo.us/
[2]: http://www.24ways.org/
[2a]: http://24ways.org/advent/swooshy-curly-quotes-without-images
[2b]: http://24ways.org/advent/improving-form-accessibility-with-dom-scripting
[2c]: http://24ways.org/advent/an-explanation-of-ems
[3]: http://www.maxdesign.com.au/presentation/external/
[4]: http://www.tagcloud.com/
[5]: http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
[5a]: http://www.gr0w.com/articles/code/php_5_star_rating_system_using_hreview/
[6]: http://www.formarchitect.com/index.php
[7]: http://www.dragon-labs.com/articles/octopus/
[8]: http://www.skimcss.com/skimlist
[9]: http://www.smileycat.com/miaow/archives/comment-showcase.html
[10]: http://paularmstrongdesigns.com/weblog/css/navigation-magnification
[10a]: http://www.asktog.com/columns/044top10docksucks.html
[11]: http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
[12]: http://alltheheroesaredead.com/weblog/archives/2006/02/external-related-links-on-mt-blog
[13]: http://www.cssplay.co.uk/menus/dd_valid.html
[14]: http://www.mapsurface.com/
[15]: http://www.cssplay.co.uk/menu/one_page.html
[16]: http://pro.html.it/niftycube/
[16a]: http://www.cssplay.co.uk/boxes/snazzy.html
[16b]: http://www.spiffycorners.com/

[via]: http://www.fortysomething.ca/mt/etc/
read more »

Brothercake is amazing. He’s come up with an [exclusive CSS filter/hack for IE7][1]. It’s based on [substring-matching attribute selectors][2] and [negation pseudo-classes][3].

Brilliant. The name is great, it follows the IE teams ’suggestion’ to drop the old hacks (`* html`). This meets all those criteria and more.

[1]:http://www.brothercake.com/site/resources/reference/xxx/
[2]:http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#attribute-substrings
[3]:http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#negation

[IE 7 Beta available][1]. But beware if you install it, it appears that it blows away IE 6. Which is utter crap if you do anything web-related. I’m eagerly anticipating the bitterness, rage and hate I’ll feel when I start to use this.

__UPDATE__: Thanks to [Shaun][2], we have a solution to installing [IE7b separate than IE6][2].

__UPDATE 2__: Well, if you try and install IE 7b on your machine side by side with IE, there is a chance you’ll get some really odd behavoir from your IE 6. I did. Every time I opened a page, or typed a URL into the address bar, it basically froze up on me, opening a new window and then hanging. Frustrating. [I found this fix][3]:

[1]: http://server2/sites/suspense/_layouts/1033/listedit.aspx?List={521B7496-DA3E-4EC3-B54A-54F48DDB8DC7}
[2]: http://digg.com/software/MS_Official:-_Microsoft_IE_Beta_2_Live_Download#wholecomment956833
[s]: http://www.shauninman.com/plete/
[3]: http://blogs.msdn.com/ie/archive/2005/12/16/504864.aspx
read more »