Cheat sheets pour webdesigner

Cheat sheets pour webdesigner

Ca date un peu mais c'est toujours utile...Je suis tombé sur Added Bytes, un blog qui propose des "Cheat sheets"...Autrement dit, des feuilles "mémo" traitant de sujets tels que : le HTML, les CSS, le Javascript mais aussi sur le language SQL ou encore les commandes SVN (pour ceux qui connaissent)...
Tout est entièrement gratuit, téléchargeable en version pdf ou en png et assez bien foutu même si réussir à caser, sur un format A4, la quasi-totalité des balises html ou des propriétés css engendre parfois une densité d'information à la limite du compréhensible...mais passons.

Ca peut toujours être utile d'avoir dans un coin ce genre de petit récap non ?!

Quelques liens pour ceux que ça intéressent...

- le blog AddedBytes
- le blog SIX Revision qui propose également 28 cheat sheets.

IE6, png et background-image : une solution

IE6, png et background-image : une solution

Au fil de mes recherches sur le web j'ai trouvé un moyen pour afficher des images au format png24 sous IE6 lorsqu'elles sont placées en background-image.
Il existe de nombreux moyen d'afficher des png sous IE6 : pngfix.js , pngbehavior.htc, iepngfix.htc, etc..

Or, lorsqu'il s'agit de background-image, toutes ces méthodes ne fonctionnent plus.

Une solution partielle existe : Les filtres AlphaImageLoader.

C'est quoi ?

Je vais reprendre la petite explication du site Alsacreation car tout y est dit :

"À partir de la version 5.5, Internet Explorer intègre le support de fonctions propriétaires permettant de faire appel à DirectX pour certaines manipulations graphiques. L'une de ces manipulations graphiques consiste à intercaler, entre le fond d'un bloc et son contenu, une image avec transparence graduelle."

Comment ça marche ?

Dans cet exemple, je souhaite intégrer une image de fond dans un div dont la class est : "png-test".

code css :
.png-test{
float:left;
background:url(pngico.png) 0 0 no-repeat;
*background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngico.png');
width:128px;
height:128px;
}

Explication : On cible IE6 grace à l'étoile * puis on supprime le background pour le remplacer par le filtre AlphaImageLoader.

Mais...

Comme tout n'est jamais parfait cette technique comporte quelques inconvénients : la propriété background-position n'est pas prise en compte sous IE6, et la propriété background-repeat n'est prise en compte que partiellement. Pour que votre image en png se répète dans le div conteneur, il faut utiliser "sizingMethod="scale".

exemple
.png-test{
float:left;
background:url(pngico.png) 0 0 repeat-y;
*background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngico.png','sizing-method=scale');
width:128px;
height:128px;
}

Autre inconvénient majeur, il est impossible d'utiliser cette technique pour des liens avec un changement de l'image de background lors du rollover...Ca c'est con.

Quelques liens pour terminer

> Alsacréation : les filtres AlphaImageLoader
> Microsoft : AlphaImageLoader