Guymon

Sprite Generator für den Mac

SpriteRight schaut wie ein fantastisches Tools aus.

SpriteRight is a CSS spritesheet generator for the Mac that lets you import your existing images or stylesheets.

Leider nur für OS X 10.7 und nur über den AppStore. Der zweite Punkt nervt mich ein wenig. Warum kann man Software denn nicht “normal” kaufen, also ohne Apple ID, grrr.

CSS Performance

Juriy Zaytsev hat einen sehr ausführlichen Post über CSS Profiling und Performance geschrieben.

The fastest rule is the one that doesn’t exist. There’s a common strategy to combine stylesheet “modules” into one file for production. This makes for one big collection of rules, where some (lots) of them are likely not used by particular part of the site/application. Getting rid of unused rules is one of the best things your can do to optimize CSS performance, as there’s less matching to be done in the first place. There are certain benefits of having one big file, of course, such as the reduced number of requests. But it should be possible to optimize at least critical parts of the app, by including only relevant styles.
This isn’t a new discovery by any means. Page Speed has always been warning against this. However, I was really surprised to see just how much this could really affect the rendering time. In my case, I shaved ~200-300ms of selector matching — according to Opera profiler — just by getting rid of unused CSS rules. Layout and paint times went down as well.

Die meisten Tips beziehen sich zwar auf große, komplexe One-Page-Apps, aber spannend ist das trotzdem.

-moz-force-broken-image-icon

Firefox presently displays alt text for every broken image on the page. This may not be helpful for the purposes of debugging because the text may blend into the page. By using -moz-force-broken-image-icon, you can fore the broken image icon instead of the alt text

via David Walsh

Print Styles

Christian Krammer gibt einige Tips für die Erstellung von Print Styles. Was noch nicht kannte:

To define page margins, you can use @page rule to simply apply a margin all the way around the page. E.g.:

@page {
 margin: 0.5cm;
}

will set the page margin on all sides to 0.5cm. You can also adjust the margins for every other page.

@page :left {
 margin: 0.5cm;
}

You can also use the :first page pseudo-class that describes the styling of the first page when printing a document:

@page :first {
 margin: 1cm 2cm;
}

Unfortunately, @page is not supported in Firefox, but supported in Chrome 2.0+, IE 8.0+, Opera 6.0+ and Safari 5.0+. @page :first is supported only in IE8+ and Opera 9.2+.

CSS Selectors

A quick reference guide to the CSS Selectors Level 3 spec.