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!
Related articles
Design , 8 November 2016Just 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…
CSS & HTML Design , 4 January 2017If 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.…
Design , 7 November 2017In the past few years tons of new web design tools came out. The old model of static pixel-based 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 colors and fonts,…