Malgré ce que je pense d’une manière générale des licences alternatives au droit d’auteur français utilisées n’importe comment pour tout et n’importe quoi, j’ai ressenti ponctuellement le besoin de mettre quelque chose dans le domaine public. Il s’agit d’un logo pour 1) montrer son amour pour la première plate-forme de sites et de blogs au monde et 2) montrer — le cas échéant — que l’on s’en sert professionnellement.

Petite histoire

J’ai créé ce logo il y a quelques années dans le cadre d’un projet collectif autour de WordPress lancé par @fran6. Je l’ai souvent recyclé pour illustrer mes articles sur WordPress. Je l’ai ressorti dernièrement dans le cadre de plusieurs projets dont WordPress & Webdesign et je me suis dit que son côté «généraliste» pourrait peut-être servir à d’autres personnes et à d’autres projets.

«WordPress je thème» est à l’origine un logo et un exemple de page d’accueil que j’ai proposé pour un projet autour de WordPress en 2008.

Test de page d'accueil. Cliquez pour agrandir l'image.

WordPress je thème !

Capture d’écran du logo avec les traits de coupe optimum autour du coeur

Logo WordPress je thème. Cliquez pour agrandir l'image.

Caractéristiques du logo

Nom du logo

• WordPress je thème.

Crédits

• Bruno Bichet

Format

• 32 pixels par 32 pixels.

No Man’s Land

• Minimum 6px autour du logo, par exemple si le texte d’accompagnement commence par une lettre arrondie comme la lettre O (W)ORDRESS.
• Optimum 10px autour du logo ou si le texte d’accompagnement commence par une lettre droite comme la lettre I (W)INTEGRATEUR WORDPRESS.

Couleur

• Hexadécimal : #B28012.
• RVBa : rgba(178, 128, 18, 1).
• CMJN : C31, M48, J100, N9.

Police de caractère d’accompagnement

• Georgia Regular en capitales ou petites capitales.
• Approches de groupe négatives : letter-spacing: -0.25em à letter-spacing: 0.5em à moduler selon le texte. Sur Illustrator, par exemple, j’utilises les valeurs suivantes : Définir le crénage entre deux caractère : Optique et Définir l’approche des caractères sélectionnés : -50 pour une taille de caractère de 24 points (Georgia Regular).
• La ligne de base pour le texte d’accompagnement  à prendre en compte se situe sous la première transversale du W.

Représentation des guides pour l'espace entre le logo et le texte d'accompagnement éventuel

Licence d’utilisation

Ce logo WordPress je thème est sous licence Creative Commons Paternité – Pas de modification (1) CC BY-ND 2.0.

(1) Sauf pour la couleur que vous devriez adapter à votre propre charte graphique sous la forme d’un aplat de couleur (pas de dégradés, d’ombres portées internes ou externes, etc.). Il reste également possible de modifier la taille en adaptant l’espace du No Man’s Land en conséquence.

Toutefois, il est tout à fait possible d’uiliser le logo en transparence sur un fond lui-même coloré ou composé de dégradé comme c’est le cas dans l’exemple de page d’accueil vu plus haut.

Télécharger le logo

• → Format Adobe Illustrator 3.
• → Format PNG 24 bits transparent.

Articles sur le même sujet

• Ebauche de logo pour illustrer le concept de code source libre
• Un « Logothic » pour WordPress Basics
• Super Formateur HTML & CSS bientôt dans la place ?
• Créer son site web avec WordPress de A à Z… avec le Codex
• Lancement de Dotpress.fr «point presse» de vos communiqués d’entreprise

Gridulator — Cet outil en ligne créé par David Sleight permet de faciliter les calculs de votre grille de mise en page. Il suffit de spécifier la largeur de votre design, le nombre de colonnes que vous voulez et Gridulator vous donnera tous les résultats présentant des valeurs entières (difficile de diviser un pixel, n’est-ce pas ?). L’application est pilotable au clavier, ce qui facilite les tâtonnements pour trouver le meilleur rapport entre la largeur des colonnes et des gouttières.

Comme vous pouvez le remarquer sur la capture ci-contre, il est possible de prévisualiser et de télécharger la grille choisie au format PNG.

Avec Gridulator, «griduler» n'a jamais été aussi simple !

Lire Say Hello to Gridulate pour en savoir plus. Via @LeCourrierIndus

Articles sur le même sujet

• #WDFR — Imprimez votre grille pour dessiner vos croquis
• display: table et display: table-cell pour faire une mise en page web ?
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Calculer une grille de mise en page « typo » avec le nombre d’Or
• Direction artistique et Design : deux facettes complémentaires du graphisme

Une nouvelle version de TweakPNG vient de sortir. La dernière datait de 2004 ! Parmis les nouveautés :

• Prise en charge du chunk iTXt,
• Utilisation des dernières version de zlib et libpng.
• Le code binaire est désormais une application Unicode,
• Le logiciel n’est pas compatible avec Window 95/98/ME,
• Beaucoup de ménage dans le code source,
• Quelques bugs réparés, mais d’autres bugs sont sûrement apparus qu’il faudra réparer à leur tour !
• Passe de la licence GPLv2 à GPLv3.

Ce petit utilitaire est très pratique pour modifier la couleur par défaut des PNG transparents pour éviter le background disgrâcieux sous IE6 ;)

Articles sur le même sujet

• IE6 — Gérer la transparence du format PNG 24 bits
• Classes CSS générées par WordPress pour les images
• L’intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?
• WordPress je thème
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

Le format PNG autorise jusqu’à 256 niveaux de transparence qui ne sont pas pris en charge par Internet Explorer 6. La dégradation grâcieuse n’étant pas toujours possible, je me suis rafraichis la mémoire sur les différentes manières d’utiliser le filtre AlphaImageLoader. J’ai fini par tomber sur une solution globale pour gérer cette transparence même en présence d’un background-repeat ou d’un background-position ! (Cet article est en quelque sorte la suite de Opacité CSS et effet de trame avec GIF/PNG transparent.)

Le format PNG

Le PNG est format d’enregistrement d’image destiné à remplacer le format GIF dans sa version 8 bits. La version 24 bits en RVBa — qui comprend plus de 16 millions de couleurs — autorise jusqu’à 256 niveaux de transparence très utiles en webdesign pour superposer deux images dont celle du dessus laisse transparaitre celle du dessous.

Malheureusement, IE6 ne comprend rien à ces différents niveaux de transparence : il faut ruser, c’est usant. Certains préconisent la dégradation grâcieuse : utiliser la transparence dans les navigateurs qui la prennent en charge et servir autre chose au dernier de la classe : un PNG 8 bits avec une seule couleur de transparence, fusionner les deux images censées se superposer, voire même utiliser une image légèrement différente.

Après tout, les visiteurs ne sont pas toujours des développeurs web utilisant plusieurs versions de navigateurs pour traquer la moindre différence de rendu. Si vous pouvez vous le permettre, foncez ! Dans le cas contraire, il faudra recourir à des solutions plus ou moins fonctionnelles selon que l’image en question se trouve placée en background d’un élément (une div, par exemple) ou dans une balise img. Si votre image transparente est placée sur un fond uni, il reste la possible de modifier l’image par voie logicielle :

Modifier le chunk (segment) bKGD des png

Un image au format PNG est composée de différents segments (chunks) dont le fameux bKGD qui spécifie une couleur de fond par défaut. A noter que les agents utilisateurs (navigateurs, logiciels, etc.) ne sont pas tenus de respecter cette couleur et peuvent en utiliser une autre. Dans IE6, cette couleur se rapproche d’un gris-vert tirant sur le turquoise…

Certains logiciels comme TweakPNG permettent de modifier la valeur de bKGD. Si vous disposez d’un fond de couleur uni, il suffit d’y mettre la couleur du fond sur laquelle est placé votre image contenant des zones transparentes.

Dans le cas contraire, les filtres Microsoft sont nos amis :

Le filtre `AlphaImageLoader` de Microsoft

Internet Explorer (depuis la version 5.5) inclut un mécanisme de filtres propriétaires filter dont AlphaImageLoader qui gère la transparence des png 24 bits. L’utilisation du filtre diffère selon que l’image est appelé via la balise img ou en tant que background d’un autre élément.

Appliqué sur une balise `img`

Applique le filtre sur les images dont la classe CSS est .img_png à l’intérieur d’une feuille de style réservée à IE6 avec les commentaires conditionnels. Il suffit de renseigner la source de monImageTransparente.png dans la variable src :

.img_png {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='image');
}

Appliqué sur une image en `background`

Pour les navigateurs tenant compte de la transparence, vous aurez la règle CSS :

.div_png {
    width: 100px;
    height: 150px;
    background: url(../pix/monImageTransparente.png) no-repeat;
}

.div_png {
    width: 100px;
    height: 150px;
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='scale');
}

• image – Réduit ou élargit le bloc pour correspondre aux dimensions de l’image (valeur par défaut),
• scale – Etire l’image aux dimensions du bloc,
• crop — Rogne l’image pour qu’elle tienne dans le bloc.

Quelques contraintes

1. La source de l’image doit être relative au document HTML qui l’affiche et non à la feuille de style CSS qui la réclame. De sorte qu’une image se trouvant dans un dossier images appelée dans un fichier CSS se trouvant dans un dossier css ne devra plus se trouver sur le chemin ../pix/monImageTransparente.png mais sur pix/monImageTransparente.png.

2. Les liens contenus dans un élément HTML possédant une images de fond transparente ne sont plus cliquables, les champs input ne sont plus accessibles et le texte n’est plus sélectionnable. Une manière générale d’y remédier est d’ajouter une déclaration du type :

   
   .div_png a,
   .div_png input {
       position: relative;
       z-index: 1;
   }
   

   Pour plus d’information sur cette question, lire le fil de discussion paru sur le forum d’Alsacréations et la synthèse rédigée par Frank Galey.

3. Il n’est pas possible d’utiliser les propriétés background-repeat et background-position avec une image PNG transparente en background.

4. Il est difficile d’utiliser des événements de style rollover pour permuter des images de fond au passage de la souris.

Passez-moi l’expression !

C’est assez contraignant. Heureusement, le web est rempli de gens de bonnes volonté qui se sont retroussé les manches pour nous offrir des solutions sur un plateau. Voyez plutôt :

* html img,
* html .png {
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Le * html est là uniquement pour cibler IE6. Vous pourrez donc vous en passer si vous utilisez une feuille de style dédiée à ce navigateur. Ne fonctionne pas si Javascript est désactivé. Nécessite une image transparente de 1px de côté (transparent.gif).

Note : il sera peut-être nécessaire d’ajouter un z-index: 1; pour éviter les problèmes de liens, d’éléments de formulaire ou de sélection de texte évoqués plus haut.

Une solution globale avec iepngfix

Il existe de nombreux scripts permettant d’automatiser avec plus ou moins de bonheur cette gestion de la transparence des images PNG. Ils mettent tous en oeuvre le filtre AlphaImageLoader soit dans un fichier Javascript, soit dans un fichier HTC. Parmi tous les scripts existants, j’ai retenu iepngfix de TwinHelix que m’a conseillé Oncle Tom sur Twitter.

Ce composant HTC gère la plupart des contraintes énoncées plus haut, y compris l’absence de prise en compte de background-repeat et background-position dans iepngfix version 2.0 Alpha 3.

Le script est très simple à utiliser :

1. Copiez les fichiers *iepngfix.htc* and *blank.gif* dans le dossier de votre site web,

2. Copiez la déclaration CSS suivante dans votre feuille de style ou votre fichier HTML :

       img, div {
           behavior: url(iepngfix.htc);
       }
   

   Vous pouvez placer dans ce sélecteur CSS toutes les balises HTML, les identifiants ou les classes pour lesquels vous désirer activer la gestion de la transparence des PNG. Séparez-les simplement par une virgule.

3. N’oubliez pas que le chemin vers les fichiers *iepngfix.htc* et *blank.gif* est relatif au document HTML et non à la feuille de style CSS.

4. Si votre site est composé de sous-dossier, n’hésitez pas à ouvrir le fichier *iepngfix.htc* dans un éditeur de texte pour modifier la variable `blankImg` afin de la faire pointer vers votre pixel transparent. Par exemple : `IEPNGFix.blankImg = ‘/images/blank.gif’;`

   Cette fois encore, le chemin doit être relatif au document HTML. Si vous désirez activer la prise en charge des propriétés *background-repeat* et *background-position* assurez-vous d’inclure le fichier Javascript *iepngfix_tilebg.js* dans votre document HTML :

   <script src="iepngfix_tilebg.js" type="text/javascript"></script>
   

5. Dans certains cas, il sera nécessaire d’envoyer le bon type MIME à Internet Explorer 6. L’auteur du script a prévu un fichier *iepngfix.php* qui inclut le fichier *iepngfix.htc* tout en renvoyant le type MIME `text/x-component` associé aux fichiers `.htc` :

       img, div, a, input {
           behavior: url(/css/resources/iepngfix.php);
       }
   

6. Pour améliorer les performances, soyez le plus sélectif possible : préférez un `#img_header` ou un `.img_png` à l’utilisation de la balise `img` seule, sauf bien sûr si toutes vos images ont besoin du script !

7. Il se peut que le fond gris-vert apparaisse brièvement lors du chargement de l’image. Si vous ne voulez pas ce comportement (notamment sur les grandes images), vous n’aurez qu’à revenir à une utilisation « manuelle » du filtre *AlphaImageLoader* comme indiqué dans la première partie.

   N’hésitez pas à consulter le fichier *iepngfix.html* présent dans l’archive *.zip* qui apporte une palanquée d’informations, de trucs et d’astuces pour utiliser le script et remédier aux problèmes d’utilisation.

Une nouvelle solution globale avec DD_belatedPNG

DD_belatedPNG semble faire l’unanimité autour de lui pour sa légèreté et son efficacité, y compris lorsqu’on l’utilise avec background-position ou background-repeat. Le script s’utilise très simplement :

<!--[if IE 6]>
    <script src="DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('.png_bg');
    </script>
<![endif]-->

<script type="text/javascript">
// <![CDATA[
             DD_belatedPNG.fix('.example1, .example2, img');
// ]]></script>

Conclusion

Ce sujet semble inépuisable, ce qui n’est pas mon cas. Je laisse cet article en version bêta pendant quelques temps histoire de laisser décanter le sujet : il serait étonnant que des erreurs ou inexactitudes ne se soient pas glissées sous le tapis de souris ;)

Ressources externes

Généralités sur le format PNG

Gérer la transparence du PNG par voie logicielle

Ce logiciel permet d’accéder aux informations contenues dans un fichier PNG dont notamment le chunk (segment) bKGD pour modifier la couleur de fond sur laquelle s’applique la transparence (un fond gris/vert/turquoise par défaut dans ie6). Vous trouvez quelques explications concernant son utilisation sur

Logiciel très pratique et simple d’emploi pour améliorer la compression des images au format PNG. Il suffit de faire glisser les images que vous voulez améliorer et le PngOptimizer s’occupe du reste. Possède quelques options pour manipuler les chunks ou garder une version de l’image d’origine.

C’est peu connu, mais les spécifications du format PNG 8 bits autorisent plusieurs couleurs dans le segment Alpha, ce qui permet de spécifier plusieurs couleurs transparentes en utilisant un logiciel approprié comme Fireworks. Voilà une bonne technique pour s’autoriser une dégradation grâcieuse des images transparentes sous Internet Explorer 6 !

Un peu hors-sujet par rapport à la transparence des PNG, je signale l’existence d’un plugin pour Photoshop qui permet d’optimiser le poids des images PNG : le plugin installé par défaut dans Photoshop ne rend pas vraiment justice aux possibilités de compression de ce format.

Quelques scripts

Version 1.0 et version 2.0 Alpha 3 du script iepngfix. Gère les background-repeat et background-position dans la version Alpha à l’aide d’un fichier Javascript supplémentaire.

Ce script est proposé par Yves Van Goethem. Nombreuses options disponibles réservées à un public averti ;)

Fichier Javascript gérant la plupart des pièges posés par l’application du filtre AlphaImageLoader.

Avec Unit PNG Fix pas besoin de définir des classes ou de cibler vos éléments. Fonctionne avec les balises img ou sur les background-image. Très léger. Merci à 13sportif pour le lien.

Expression Javascript permettant de gérer la transparence des PNG en img ou en background

Script très léger et pratique. S’applique à toutes les images PNG de votre document. Toutefois, certaines images restent en mode téléchargement alors quelles sont bien affichées, ce qui peut donner l’impression au visiteur que quelque chose ne tourne pas rond sur le site. Malgré tout, ce script vieillissant peut encore rendre quelques services : il m’a rappellé l’existence de l’attribut defer="defer" de la balise script qui permet de différer le chargement (ou l’application) du script en question. Voir cet article très complet sur l’analyse de defer.

Propose une version modifiée du script précédent pour les champs de formulaires `

`

Encore un Javascript à se mettre sous la souris ! Crée une balise div dans laquelle est affichée l’image traitée par le filtre DirectX :

Plus ou moins la même chose avec un composant HTC.

Une solution originale en PHP.

Autres ressources sur la transparence des PNG

La blonde propose avec pédagogie un récapitulatif des différentes méthodes pour gérer cette transparence sur 256 niveaux.

Présente de nombreuses solutions et contournement pour afficher les images transparentes.

La FAQ du forum Alsacréations sur comment obtenir la transparence des PNG avec Internet Explorer 6

Tutoriel pour pallier les effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu.

Mise en garde d’Eric Daspet sur l’utilisation des filtres : Si vous l’utilisez pour une petite icône de présentation qui apparaît vingt fois dans votre page, c’est vingt exécutions du filtres qui sont faites. À chaque exécution du filtre le rendu est bloqué, en attente. Sur Yahoo! Search en retirant AlphaImageLoader de la feuille CSS c’est jusqu’à 100ms qu’ils ont gagné (information donnée par Stoyan Stefanov sur sa dernière présentation).

Article très instructif sur la transparences du format PNG et l’application de AlphaImageLoader

Articles sur le même sujet

• Trucs et astuces CSS
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• CSS & Navigateurs — 10 problèmes de compatibilité récurrents

En 2001 Internet Explorer 6 n’avait toujours pas intégré la transparence du format PNG pourtant sorti en 1995. Cette gestion de la transparence est une des fonctionnalités qui manquent le plus aux web designers…

Parmi les nombreux scripts permettant à IE6 de gérer cette transparence, je vous propose de jeter un oeil sur PNGHack de Yves Van Goethem.

Voir la présentation sur Slideshare.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.

Allez, hop, un petit billet entre deux feuilles de style CSS pour partager quelques infos utiles à l’intégrateur web : dégradés transparent sur les titres, nouvelle référence HTML, du nouveau chez le navigateur Flock, se préparer à WordPress 2.5 du point de vue du blogueur et du développeur de plugins, Dotclear is back, OpenID comme à la maison, et tout pour monétiser votre blog dans les meilleures conditions.

1. Créer un dégradé sur vos titres avec un PNG transparent. Ca ne marche pas avec IE6, mais vous pouvez toujours utiliser le script IE7.js de Dean Edwards ou un des nombreux scripts qui permettent de gérer la transparence sur 24 bits à la place du navigateur collé au radiateur ;)
2. L’excellent Sitepoint a mis en ligne une version encore bêta de ce qui s’annonce comme une nouvelle référence pour connaitre les balises HTML et leur contexte d’utilisation. Via Chris Heilmann. A ce propos, je vous rappelle le non moins excellent Dictionnaire hiérarchique des balises XHTML 1.1 qui vous permettra de connaitre l’essentiel des balises et de vous renseigner sur les imbrications qu’il est possible de faire ou pas.
3. Développer en utilisant Firefox peut nuire au simple plaisir de surfer. Heureusement, Il y a Flock. C’est un navigateur « social » basé sur le moteur de rendu Gecko. Social, parce qu’il inclut une floppée de fonctions basées sur les API de Twitter, Facebook, Flickr, etc. En voici une présentation rapide et efficace par les travailleurs du web.
4. Vous envisagez d’installer WordPress 2.5 ? Prenez donc un peu d’avance en suivant le premier volet de NicoLargo consacré aux nouveautés de ce nouvel avatar de notre CMS préféré ! Lorelle à fait une check-list sur Blog Herald pour se préparer à cette nouvelle version qui s’annonce comme une version majeure : après avoir remanié la structure de la base de donnée avec la version 2.3, la version 2.5 met l’accent sur l’interface d’administration. Pour préparer le terrain, lisez également les conseil du codex himself pour migrer de la 2.3 à la 2.5 et pourquoi pas avec ceux de Joost de Valk concernant les modifications à apporter aux plugins.
5. En parlant de CMS, il y a du mouvement du côté de Dotclear : nouveau forum, nouveau site pour le printemps, nouveau blog. Je garde le meilleur pour la fin : une Release Candidate de Dotclear 2 est prévue, ainsi qu’une version 1.4. Les dates de sortie seront données d’ici la refonte du site. C’est un engagement.
6. Saviez-vous qu’on pouvait utiliser l’url de son blog comme identifiant OpenID ? La marche à suivre chez Rémi Prévost. J’en profite pour vous rappeller qu’il est également possible d’utiliser l’adresse de son compte WordPress.com. Vous savez, celui qui vous sert à obtenir votre clé Akismet ;)
7. Pour finir, la solution ultime pour « monetiser » votre blog :D

Articles sur le même sujet

• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org
• Améliorations cosmétiques et ergonomiques sur ce blog
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Trucs et astuces CSS
• Liens utiles pour l'intégrateur HTML / CSS et le développeur web

Depuis que j’ai mis en place ma blogroll 2.0, je ne voyais plus trop l’intérêt des articles « En vrac », mais au vu du peu de liens sortants en provenance de cette liste de lecture, je me dis qu’un petit vrac de temps à autre ne peut pas faire de mal. Magnéto : un nouveau script pour régler les problèmes de transparence du format PNG dans IE6 et un autre pour faire des coins arrondis sans trop boursouffler le code HTML ; un détour par l’incontournable Smashing Magazine pour des astuces CSS de folie ; le lien vers LA ressource ultime pour le webdesigner (à part la grosse grosse liste, bien sûr…) ; l’essentiel à connaitre sur le nouvel avatar du back-office de WordPress 2.5 ; un plugin pour tranformer vos catégories ou vos pages en menu déroulant dans WordPress et une anecdote amusante (ou pas) sur les jeunots du web pour terminer…

1. PNGHack — Gestion de la transparence pour les versions inférieures à IE6 via javascript. Projet hébergé sur Google Code, gage de qualité : documentation, wiki, groupes de discussion, etc.
2. Coins arrondis avec Javascript — Dans les commentaires qui ont suivi l’article sur le design fluide à coins arrondis en CSS, j’ai trouvé cette petite pépite qui vous permettra de générer les balises div nécessaires aux quatre coins de l’image via le DOM à la place de les mettre en « dur » dans le HTML. Ce qui rendra vos page CSS3 Ready pour utiliser les backgrounds multiples. L’auteur a modifié l’excellent script de Simon Willison publié sur sitepoint dans lequel vous trouverez des explications complètes sur la technique utilisée pour obtenir des coins arrondis avec CSS et Javascript.
3. SmashingMagazine — Après les 53 techniques CSS sans lesquelles la vie ne vaut pas d’être vécue, voici venir le temps des puissantes techniques CSS pour coder efficacement. Que dire de plus à part « tendez l’autre joue » après un tel smash ;)
4. bluevertigo — Pour comprendre ce que le mot « ressources » veut dire… Je n’en dis pas plus, à part : « ayez confiaaance » ;)
5. WordPress 2.5 — très bonne analyse de Frédéric de Villamil sur les améliorations apportées à l’interface d’administration de WordPress.
6. Suckerfish WordPress plugin — Ce plugin permet de transformer les listes de pages, de catégories, d’archives ou de liens en menu déroulant horizontal. Voici un blog de démo pour vous rendre compte des possibilités.
7. Mon Régis s’appelle Roger — délicieuse anecdote de Franck sur le sang-froid dont nous – les Seniors – devont parfois faire preuve face à l’impétueuse jeunesse pleine de fougue qui nous entoure ^_^
8. intégrateur ? — oui, je sais ça fait 8 (Monsieur Plus, je vous dis ;) ), mais je viens juste de tomber sur cet excellent article sur le métier d’intégrateur web que je trouve, ma fois, assez bien vu ;)

Articles sur le même sujet

• Le Petit Journal du Web — 09/2011
• Liens utiles pour l'intégrateur HTML / CSS et le développeur web
• Revue de web de la semaine #2 (WordPress, développement web et miscellanées…)
• 7 liens utiles pour l'intégrateur web : le retour
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

Le quotidien de l’intégrateur HTML est parfois ponctué de vide existentiel lorsqu’il s’agit de livrer des pages web compatibles avec la majorité des navigateurs dont la liste se divise grosso modo en deux groupes : ceux qui intègrent au mieux les standards recommandés par le W3C en matière de rendu CSS (Firefox, Safari, Opera et Konqueror, etc.) et les autres, principalement les versions 5 et 6 d’Internet Explorer.

Si le premier groupe nous donne satisfaction, il faut bien reconnaitre que le second reste scotché près du radiateur dès qu’on parle d’overflow, de min-height, de positionnement implicite avec right, bottom ou left ou encore d’interactivité avec :hover sur autre chose qu’une ancre a…

Bref, toutes ces petites choses très utiles au cours de l’intégration CSS qui manquent cruellement à Internet Explorer. Sans parler de la prise en charge inexistante de certains sélecteurs CSS qui seraient très pratique pour éviter de spécifier une classe chaque fois que l’on veut atteindre un élément en fonction de sa position dans le DOM.

Dans la suite de cet article nous verrons que la bibliothèque Javascript IE7 peut nous aider à travailler plus efficacement avec Internet Explorer pour faciliter la mise en œuvre de « composés » HTML / CSS cross-browser.

Est-ce vraiment nécessaire d’avoir un affichage identique quelque soit le navigateur ?

Dans le flux de production habituel, la production d’un site web passe par la conception d’une charte graphique dont il conviendra de découper et d’agencer les morceaux à coup de balises HTML et de déclarations CSS.

L’image servant de référence quasi-absolue, il devient très difficile de défendre auprès de son commanditaire le point de vue selon lequel la sacrosainte charte graphique puisse présenter des différences — même minimes — d’un navigateur à l’autre, fut-ce d’un pixel !

Pour parvenir à ses fins, l’intégrateur web dispose de deux armes : le code HTML qui — s’il suit une ligne sémantique de bon aloi — devrait garder la même structure d’un bout à l’autre du projet, et les CSS qui servent de variable d’ajustement jusqu’à la fin.

Reste à trouver une méthode de travail qui limite à la fois les différences de rendu et le nombre de lignes de code à produire :

• Les visionnaires conseillent de faire un site conforme aux standards en prenant un navigateur comme Firefox ou Opera comme référence pour le rendu CSS, et d’utiliser au maximum les possibilités offertes par…
  • les sélecteurs CSS,
  • la transparence PNG en 256 niveaux,
  • le calcul des largeurs minimales et maximales,
  • etc,
  …puis de faire au mieux pour les navigateurs non conformes. Cette approche, pour intéressante qu’elle soit, n’est pas possible dans un contexte commercial car seule une poignée de visiteurs verrait le site web dans toute sa splendeur, tandis que la majorité n’en aurait qu’une version dégradée, fut-ce gracieusement…
• Les réalistes proposent de n’utiliser que les propriétés disponibles sur la majorité des plate-formes, en prenant pour chaque fonctionnalité, le plus petit dénominateur commun en fonction du projet. Cette approche permet de concilier le respect des standards (même s’il ne s’agit pas des toutes dernières recommandations) avec un rendu uniforme des pages en contrepartie d’une éventuelle limitation des fantaisies graphiques souhaitées par le client. En effet, selon la maquette, le fait de ne pas pouvoir utiliser la transparence PNG, par exemple, peut avoir une incidence sur la rigidité de la structure HTML / CSS à cause des découpes d’images : on sera enclin à réunir plusieurs partie d’image en une seule, alors qu’avec la gestion de la transparence, il est sera plus souvent possible de « granulariser » les découpes.
• Une troisième approche réalistico-visionnaire que l’on retrouve parfois sous l’acronyme MOSe (Mozilla, Opera, Safari enhancement) mélange les deux premières approches en cherchant le plus petit dénominateur commun pour assurer une large compatibilité, puis en introduisant des améliorations visibles uniquement dans les navigateurs modernes. Cette dernière approche est celle qui offre une plus grande cohérence à vos pages web dans le temps, puisque qu’en suivant les recommandations au plus près, plus le temps passe et plus le souvenir des mauvais navigateurs s’estompe. (Ceci est à rapprocher de l’annonce de la nouvelle balise meta mise en place à l’occasion de la sortie prochaine d’IE8 qui réintroduirait dans l’écosystème du web un pis-aller dont on commençait à peine à se débarrasser : la détection du navigateur pour savoir s’il doit basculer en mode standard ou non. Voir ma petite note sur le sujet.)

IE7.js : ce n’est pas de la magie, c’est de la technologie ! »

Articles sur le même sujet

• Menu HTML et CSS, sliding doors et item current en PHP
• Trucs et astuces CSS
• Quelques notes — Programme de formation HTML & CSS
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Frameworks CSS + Reset CSS : design from scratch

Le quotidien de l’intégrateur HTML est parfois assombri par la survenance de bugs plus ou moins gênants. Ces derniers jours, je me suis débattu avec un décalage de couleur entre une image au format png et un fond spécifié en hexadécimal. Et comme si ça ne suffisait pas, Internet Explorer et Firefox n’ont pas aimés que je débute l’intitulé d’un identifiant avec un underscore ! Pfff… Pour finir si l’utilisation de overflow: hidden pour clearer les float est une bonne idée, cette propriété peut avoir des effets de bord indésirables. Enfin, voyons ça de plus près :

Le png c’est bien, mais le gif c’est mieux !

J’ai tenté en vain de raccorder le fond d’une image avec la couleur équivalente en hexadécimal à cause d’une légère différence de teinte qui n’avait pas lieu d’être : les valeurs entre la couleur sélectionnée avec la pipette de Photoshop et celle que j’indiquais dans ma feuille de style étaient identiques.

Puis j’ai eu l’idée de modifier le format du fond en passant du png au gif. Et là, bingo, mes deux couleurs se sont raccordées sans solution de continuité. Je précise que ce léger problème n’apparaissait que sur IE6, Firefox et Opera me restituant les bonnes teintes.

Toutefois si vous désirez absolument conserver le format png vous pouvez lire ce fil du forum Alsacréations qui décrit le même phénomène avec une solution logicielle : tweakpng pour enlever les informations liées au réglage du Gamma.

Ca me rappelle que le même phénomène se produit lorsqu’on veut raccorder certaines couleurs présentes dans une animation Flash avec une couleur en hexa dans le code HTML. Je me demande si le fait que Flash utilise le format png n’en serait pas la raison. Si des adeptes de Flash passent par ici j’aimerais bien savoir comment ils gèrent ce problème.

Ne débutez pas un id avec un underscore, car IE6 et Firefox n’aiment pas ça

C’est typiquement le genre de truc qu’il vaut mieux vérifier avant d’appeler SOS médecin : j’en ai fait l’amère expérience il y a peu. C’est assez curieux car les spécifications autorisent bien l’usage du souligné et du tiret pour les identificateurs et les classes…

En CSS2, les identificateurs (ainsi que les noms des éléments et ceux des classes et IDs des sélecteurs) ne peuvent contenir que des caractères parmi [A-Za-z0-9] et ISO 10646 supérieurs à 161, ainsi que le tiret (-) et le souligné (_) ; ils ne peuvent commencer ni par un tiret ni par un chiffre.

Donc, si j’ai bien lu : le tiret (-) est autorisé sauf au début, tandis que le souligné (_) est valide partout. Peut-être un excès de zèle de la part des navigateurs ?

overflow: hidden : cachez ce menu que je ne saurais voir

Lorsqu’on utilise la propriété float pour placer du contenu à gauche ou à droite d’un élément, il est souvent nécessaire de rétablir le flux, pour celà, on peut utiliser clear: left|right|both pour éviter que le bloc en question ait des voisins à gauche, à droite ou des deux côtés. Ce clear peut également être utilisé sur un élément HTML comme hr, br ou div.

Suite à mon billet sur la question du rétablissement du flux après un float, j’ai eu l’occasion de redécouvrir la propriété overflow: hidden|visibble|auto qui, en plus de gérer le débordement du contenu d’un élément, permet de créer un contexte de formatage qui a les mêmes conséquences que clear: both pour rétablir le flux.

Aussitôt lu, aussitôt testé avec succès, je commençais à me servir d’overflow: hidden quand je me suis rendu compte que la conséquence évoquée plus haut n’annulait pas sa fonction première : rendre visible ou pas le débordement d’un élément contenu dans un bloc auquel on applique overflow: hidden.

En effet, si l’on a un menu déroulant en position: absolute dans un bloc dont un ancêtre possède overflow: hidden et si la hauteur de cette ancêtre est inférieure à la hauteur du menu déroulant en question, ce dernier est coupé dans les limites de l’ancêtre… Voir à se sujet le billet de Rémi Prévost et les commentaires associés.

Hum… j’espère que c’est plus simple à comprendre qu’à expliquer ;)

Articles sur le même sujet

• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?
• Améliorations cosmétiques et ergonomiques sur ce blog

Pour obtenir un effet d’opacité sur un élément, il existe le format d’image PNG 24 bits qui accepte jusqu’à 256 niveaux de transparence. Malheureusement Internet Explorer 6 ne prend pas en charge cette intéressante caractéristique… Je vais vous proposer une méthode full CSS et une autre permettant d’utiliser des images GIF ou PNG transparentes de manière créative avec une page d’exemples à la clé.

Effet de transparence avec CSS

En attendant la version 7 d’Internet Explorer censée résoudre le problème, nous pouvons regarder ce que propose CSS :

 .trans50 {
     filter: alpha(opacity=50);
     -moz-opacity: 0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
}

L’ensemble, bien que non-valide d’après les validateurs CSS, n’en est pas moins très efficace. A un détail près : il semble qu’Internet Explorer n’applique pas l’opacité sur un élément ne possédant pas de largeur explicite ou dont la largeur est égale à width: auto.

Ces quatre lignes permettent d’appliquer un effet de transparence paramétrable à n’importe quel élément. Qu’il s’agisse d’appliquer une opacité à un aplat de couleur se trouvant au-dessus d’une photo, ou à une photo se trouvant au-dessus d’un aplat de couleur, ou, pourquoi pas, d’appliquer l’opacité à une photo par dessus une autre… Rien n’est permis (question validateur), mais tout est possible ;)

Effet de transparence avec une image GIF ou PNG

Pour obtenir un effet d’opacité, je me suis rendu compte que l’on pouvait également utiliser un GIF ou un PNG transparent et laisser transparaitre l’image de fond à travers les mailles du filet. Très simple à mettre en oeuvre, cette technique est très puissante en ce qu’elle permet d’obtenir de très beaux effets de transparence, tout en laissant la possibilité de jouer sur le point de trame.

Je vous laisse avec un aperçu des possibilités offertes par les CSS et les GIF ou PNG transparents pour obtenir des effets d’opacité. Comme toujours, n’hésitez pas à afficher le code source de l’exemple.

Télécharger le fichier .html ou .php et les images

Linkographie. Effet de trame et d’opacité

A propos de PNG

http://www.libpng.org/pub/png/

Le site de l’inventeur du PNG. Indispensable.

http://openweb.eu.org/articles/png_vs_gif/

Très bonne source d’information sur le format PNG en français.

http://www.chevrel.org/fr/carnet/…

Encore un peu de pédagogie !

A propos des effet de transparence

http://www.babylon-design.com/site/…

Blog sur le développement web et les css en particulier qui m’a été fort utile

Articles sur le même sujet

• Trucs et astuces CSS
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• [résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…
• Quelques notes — Programme de formation HTML & CSS
• IE6 — Gérer la transparence du format PNG 24 bits