We’re on the verge of a whole lot of new CSS media queries becoming available. But if you’re a developer that wants to get a head start and try them out, you’re out of luck. Browsers are prototyping them one by one before making them available and we as developers have to wait.
Small bits
I don’t have a topic to write about extensively for this week. However, I do have some cool links and small bits (of wisdom?) that I’d like to share with you.
Nice stuff
SenCSS 0.4.5
How vain, to start with something of my own! Anyway, I released version 0.4.5 on saturday, and made a simple homepage for it: sencss.kilianvalkhof.com. It has links, changelogs and general information. I decided that the way to pronounce it is “sense”. Also, it surpassed 1000 downloads, cool! :D
Proposed Default rendering of HTML elements
Something I wasn’t aware of, the W3c has a default CSS2.1 stylesheet for HTML: http://www.w3.org/TR/CSS21/sample.html. It probably won’t lead to Amazing New Insights! but it’s nice to read what the makers of CSS thought would be correct standard CSS for the HTML elements.
Funny IE-hack
Tired of using * html to hide your css for IE? Someone over at mintpages recently did this:
#idname[id] { ... }
.classname[class] { ... }
Which is something like “select all elements with the ID “idname”, but only if they have an id attribute. A smart and funny way to hide it from browsers that don’t support attribute selectors. I thought that was funny. Stop looking at me like that.
Firefox 3 improvements
Next to the awesomebar and some other GUI improvements, Firefox 3 has some cool CSS improvements. In my opinion, these are some of the more interesting ones.
cursor:none
From a technical viewpoint it makes sense to have this option, though I’m not certain if it’s a really good idea. body{cursor:none} just doesn’t fit right. However, it could be useful in other instances, such as rich internet applications or video.
Example! Move your mouse here and watch it magically disappear!
Ligatures! and kerning!
ligatures are awesome, and because Firefox 3 uses Cairo for it’s rendering, it can now do both ligatures and kerning. I don’t know of any web fonts having ligatures (correct me if I’m wrong, so I can start using that font everywhere) but proper kerning is certainly a nice feature. This article explains it very thoroughly: Firefox 3: Fonts and text
Firefox 3 has a CSS property called text-rendering. By default it will guess the right rendering, opting for either speed or legibility. By using this code, you can make sure that it will always opts for legibility, which enables kerning and ligatures:
body {text-rendering:optimizeLegibility;}
Check the Mozilla developer center for more information.
Font-size-adjust support
It took me a while to get what this does exactly, but I think I understand it now. As you might know, not all fonts look equally large at the same font-size. for example, Verdana looks much larger than Arial. This is because Verdana has a larger x-height than Arial. (x-height is the height of, indeed, the x and other letters without ascenders or descenders).
The value for font-size adjust is the ratio between the x-height and the full height of your font. By specifying this ratio for your first font, your browser can resize the fall-back font to have the same x-height as the original font, instead of the same full height. The result is that the fall-back font will look as large as the original font, thus fitting better in the design and being more legible. And Firefox 3 supports that, now :)
Text-shadow support in Firefox 3.1?
According to this article We’ll get text-shadow in Firefox 3.1. That makes for one dirty hack ready for the bin :)
That’s it for this week, I’m sorry for not writing anything new or exiting. I’ve got plenty of good stuff planned, but it’ll take a little longer :) See you next week!
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!