Category Archives: Web design

Remove font-smoothing/text-antialising in Internet Explorer 7

You could think this is not possible without messing up with IE7 preferences.

Well, I’ve just accidentally discovered you can actually do it using CSS only. Here’s the trick:

In the very last CSS file you load, insert


* {
filter: none;
}

Reload your page and see the magic happen.

If you want to remove the smoothing from a specific element, use any other CSS selector. Don’t forget to add * at the end of it to match all contained children as this doesn’t seem to be an inherited property.

You’ll also notice this “hack” gives layout to the element. It’s sometimes even more stronger than the usual zoom:1 or min-height:0!

Happy hacking!

Posted in Web design | Leave a comment

Typography on the web

So while its now technically easy to link to a typeface, copy protection issues are still present—an obvious deal breaker for any commercial fonts you hope to use.

via Typography on the web: idsgn (a design blog).

Also posted in Typo | Leave a comment

jQuery Visual Cheat Sheet

Pas forcément pratique avec ses 6 pages, la “pompe” JQuery de Antonio Lupetti (woork) n’est reste pas moins utile.


Via jQuery Visual Cheat Sheet / woork .

Posted in Web design | Leave a comment

La technique ultime de remplacement des PNG32 sous IE6

A chaque fois que j’utilise cette technique, ceux qui me voient faire tombent des nues. Ca fait pourtant quelques mois qu’elle existe, mais reste toutefois peu populaire. Tentons de remédier à cela!

Drew Diller a en effet inventé une technique de “hack” des PNG32 (PNG24 + channel alpha sur 8bits = 32, n’en déplaise à ses aficionados et à Photoshop qui parle de PNG24 uniquement) basé sur un certain langage “VML”, l’équivalent IE6 du plus connu “canvas”. OK, j’en vois qui font une drôle de tête… Non, je ne parle pas de cette technique de broderie que vous avez sans doute pratiqué un jour à l’école mais de la capacité qu’ont les browsers récents à “dessiner” directement sans passer par des images prégénérées.

DD_belatedPNG, c’est son nom, permet en effet de patcher en deux coups de cuiller à pot tous vos PNG32, qu’ils soient appliqués en background ou directement via le tag<IMG>.

Comment ça marche? Dans les coulisses, je n’en sais foutrement rien, mais en pratique ça prend même en considération les propriétés background-position et background-repeat. Non, pas possible! Et pourtant si!

Vous incluez un script en début de page, vous ajouter les selecteurs ad hoc dans une 2e ligne de script et hop, c’est patché.

Nul besoin d’ajout des filtres ou de se soucier du positionnement des éléments, ça marche dans tous les cas sans rien modifier à la CSS!

Magique? Oui, carrément!

Posted in Web design | Leave a comment

Remplacement dynamique de fonts – Cufón versus Typeface.js

À ma droite, Cufón. À ma gauche, Typeface.js. Lequel choisir ?

J’avais une petite préférence pour Typeface.js, je ne sais pas exactement pourquoi, peut-être parce que je l’avais découvert avant Cufon (oui je sais il manque l’accent !).

Typeface.js est rapide, très rapide, surtout sous IE. C’est son gros avantage. Il est aussi plus simple à implémenter car il s’applique automatiquement aux H1 à H6 et aux éléments dont la classe est “typeface-js”. Le reste se passe via la feuille de style.

Jusque là, vous allez me dire: vive Typeface.js !

Oui mais, car il y a un mais…

La conversion des polices via l’outil de Typeface.js n’est pas simple et il faut parfois avoir recours à fontforge pour désactiver certains options d’embedding “OS2″ (???). Et surtout, le script échoue lamentablement s’il est appelé depuis une page imbriquée via une iframe générée par un overlayer style lightwindow, fancybox et consor. browserStyle is not defined? Il semble se perdre dans les méandres du DOM…

De l’autre côté, l’outil de conversion de Cufon est une merveille, il accepte la plupart des polices sans broncher et permet de limiter leur usage à un ou plusieurs domaines. Il propose même des options obscures que les typo-puristes reconnaitront sûrement. Moi je me suis contenté de la valeur par défaut. Un piège à éviter toutefois : ne spécifiez pas de font-family sous peine de voir ensuite le moteur de rendu s’emméler les pinceaux entre les différentes graisses.

Et ça fonctionne même dans les iframes sus-nommées. Que demande le peuple !

Une intégration automatique? Il faut en effet “appliquer” Cufon sur les éléments voulus à la main. Cela permet notamment de forcer une police sur un élément dont la déclaration font-family ne correspondrait pas dans la CSS, ce qui n’est pas forcément la meilleure idée. Heureusement, ce dernier reconnait les sélecteurs jQuery pour notre plus grand bonheur – veillez juste à charger jQuery avant Cufon pour qu’il reconnaisse ceux-ci ;-)

Update : En fait la détection automatique du font-family est également disponible dans Cufon mais désactivée par défaut pour contourner un bug dans Opera. Voir les Options de l’API.

Also posted in Typo | 6 Comments

Meta keywords ? Poubelle !

Maintenant c’est clair, le metatag “keywords” ne sert à rien, du moins chez Google qui l’annonce ici.

Ca faisait un moment que je m’en doutais et que pas mal de monde s’amusait à tester tout ça. À quand le passage à la trappe de son acolyte Monsieur Description?

Also posted in Web life | Leave a comment

TypeSelect – Javascript-based Selectable Typefaces

Un concurrent de typeface.js ?

TypeSelect – Javascript-based Selectable Typefaces.

Posted in Web design | Leave a comment

Internet Explorer Collection

Une alternative à MultipleIE et aux machines virtuelles : la collection complète des IE “standalone” sur Final Builds Site – Internet Explorer Collection.

Posted in Web design | Leave a comment

SlickMap CSS — A Visual Sitemapping Tool for Web Developers

Plus d’excuse pour ne pas montrer un beau sitemap au client avant même d’avoir commencé à coder!

SlickMap CSS — A Visual Sitemapping Tool for Web Developers.

Posted in Web design | Leave a comment

END_OF_NT_EVALUATION_PERIOD

Voilà ce qui arrive quand on dépasse la date de fin d’évaluation des images VPC “IE Tester” fournies par Microsoft


Parallels Picture

Also posted in Humour | Leave a comment