CSSets
In this (hopefully) series I will talk about the little CSS tricks that many of you won't know. Some will be nice pointers, some will be eyeopeners, none will be earth shattering, …
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!
Related articles
On rendering engines and graphic libraries
It won't be long before we have a really solid baseline across the 4 major rendering engines in terms of CSS support. Gecko, Webkit, Presto and IE8's rendering engine. But what abo…
Combining Cufón and @font-face
Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I'll show you how to use Cuf…
As ever, lots of very exciting new features!
However, with the standard practice being to generally provide full support for at the very least the two previous significant generations of browsers, and partial-to-complete support for anything older / with less capable rendering engines whenever possible, all we’re really looking at is garnish that’ll increasingly add to browser disparity and fragmentation.
Having said that, I’m all for making use of these new features and the rest of CSS 3 as it becomes available – it just seems a shame that it’s shadowed by the fact that it’s yet another contribution to cross-browser compatibility issues.
You bring up an interesting point. There is indeed a growing disparity between pretty much every “current generation” browsers in terms of CSS support.
However, I believe this happened back in the netscape/IE days as well. ACID tests somehow rectified that, but it’s making our lived unnecessarily harder.
I think Firefox and Opera take a good stand here, actually implementing written specifications. Safari (with animations, masks and whatnot) and IE (with, well, uhm…) are adding the garnish that’s not even spec’d yet.
I think this idea is worth exploring some more :)
[…] 3: Killian Valkhof and David Baron write about support for several CSS3 features in the latest version of Mozilla […]
You’re right – body{cursor:none;} is probably not such a good idea. But it’s pretty handy to be able to hide cursors over video (just not the video controls!)