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.
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
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.
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.
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.
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.
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.
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 :)
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 my living building Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Please try it out!
Just a quick heads-up, this site now sports a cool new design! After the previous design in 2008 (8 years ago!) I finally got around to creating a new one. I kept the colors and the paint-splatter backgrounds of the old theme, but bumped the font-sizes (hello 2016!) and made everything look great on all…
If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…
In the past few years tons of new web design tools came out. The old model of static pixelbased comps of screens is slowly being replaced with more modern ideas of designing. These new design tools use constraint based components, or even entire lay-outing systems, they use machine learning to suggest you colours and fonts,…
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!)