A Techies' Blog

It’s a neat idea, instead of asking the user to prove he’s human, it instead tricks the spam bot into revealing it’s a bot. It does this with a email field that is hidden from the user by CSS. [...]

Conditional-CSS was developed out of the desire to overcome CSS rendering bugs in a wide range of browsers, ensuring as many visitors as possible see your site’s design correctly. The core idea is based on the method of Conditional Comments found in Internet Explorer, extended to include other browsers, and to move the conditional statements inline with your CSS definitions.

Conditional-CSS isn’t really all that interested in which browser the user is using, but rather what rendering engine the user’s browser utilises. This is why Conditional-CSS uses ‘Gecko’ rather than the well known Firefox as one of it’s browser conditions. Likewise for Safari ‘Webkit’ is used. This allows other browsers using the same rendering engines to receive the same targeted CSS. An exception to this rule is made for IE (rather than using ‘Trident’) since this is what the IE conditional comments use and Trident isn’t particuarly well known. Similarly for Opera, since only the Opera browser uses it’s Presto rendering engine, ‘Opera’ is used.

It should be noted that if all browsers were to correctly implement the CSS specifications released by the W3C there would be no need for Conditional-CSS. However, CSS bugs are a fact of life for web-developers and are often extremely frustrating. Conditional-CSS offers us a simple solution to overcome these problems.

[...]

It’s been well over ten years now since the debut of the graphical web browser and we still don’t have an easy way to deliver rich typography using HTML/CSS. With CSS we can size, style, color, kern, show, and hide our text but we can’t deliver something classical typesetters have delivered since at least the 15th century: custom typography. Until now. In concert with Shaun Inman and Tomas Jogin, I am releasing into the public domain a scalable, multiline, Flash 6 compatible version of IFR to help you reduce the amount of browser text in your life and free the world from the scourge of Arial.

An updated example of sIFR (now at version 2.0) is available here.

[...]

WebKit now supports stroking of text via CSS. In existing Web pages today, the glyphs that are drawn for text are always filled with a single color, specified by the color CSS property. Sometimes authors may want to stroke the edges of the glyphs with one color, and fill with a different color. By stroking text and not filling the interior at all, you can achieve an outline effect (this option exists in TextEdit for example and in OS X text field context menus).

I have introduced four new properties to CSS to support the stroking of text:

text-fill-color – This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.
text-stroke-color – This property allows you to specify a stroke color for text. If it is not set, then the color property will be used to do the stroke.
text-stroke-width – This property allows you to specify the width of the stroke. It defaults to 0, meaning that only a fill is performed. You can specify a length for this value, and in addition the values thin, medium and thick can be used (with ‘thin’ being most like the outline behavior of OS X).
text-stroke – This property is a shorthand for the two stroke properties. [...]

Add custom fonts to your web application:

• http://www.fontsquirrel.com/fontface/generator
• http://code.google.com/webfonts
• http://onlinefontconverter.com/
• http://www.kirsle.net/wizards/ttf2eot.cgi