Les dégradés prédéfinis sont une aubaine pour l’intégrateur web : dans la plupart des cas, il suffira de modifier un des 140 exemples proposés.

Les paramètres modifiables sont :

• Positionnement des curseurs pour déterminer la longueur, l’opacité et le seuil des couleurs prises en compte,
• Ajustement des couleurs via des curseurs dynamique pour la teinte, la saturation et la luminosité,
• L’orientation du dégradé : horizontal, vertical, diagonal (droite-gauche), diagonale (gauche-droite) et radial,

Une fenêtre de prévisualisation permet de voir les changements en direct-live avec une case à cocher pour voir comment Internet Explorer se comporte avec les propriétés qu’il ne prend pas en compte.

Les CSS sont prêt à copier-coller avec en option l’équivalent pour SCSS (Sass) et le choix du mode colorimétrique (HEX, RGB, RGBa, HSL, HSLa).

Exemples SCSS (Sass)

// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(228,245,252); // Old browsers


@include filter-gradient(#e4f5fc, #2ab0ed, vertical); // IE6-8

// IE9 SVG, needs conditional override of 'filter' to 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%));

Exemple CSS

background: rgb(228,245,252); /* Old browsers */


/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZjVmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2JmZThmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzlmZDhlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYWIwZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */

background: linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-8 */

Pour IE9 — IE10

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Envie de plus de générateur de CSS ?

→ Rendez-vous sur Le petit journal permanent de CSS3 — 100+ ressources pour commencer.

PS : Trois message subliminaux se sont glissés dans ce billet :-)

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• HTML5 et CSS pour l'intégrateur web
• CSS3 Generator : éditeur de CSS3
• Nouvelle méthode de remplacement de texte par une image

«image replacement» : une autre technique

Une nouvelle technique de remplacement par l’image a récemment été ajoutée au projet HTML5 Boilerplate. Ce billet explique son fonctionnement et comment elle se situe par rapport aux autres méthodes, utilisant text-indent notamment.

Voici le bloc CSS qui a fait son apparition dans la récente mise à jour de HTML5 Boilerplate et le framework Compass :

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Comment ça marche ?

1. font:0/0 a — Ce raccourci met à zéro les propriétés font-size et line-height. La valeur a fonctionne comme un raccourci pour font-family : font-size: 0; line-height: 0 et font-family: a. C’est une idée reprise de l’implémentation BEM. Bien que le validateur CSS fait sa chochotte avec les valeurs 0/0, il faut savoir que tous les navigateurs acceptent cette syntaxe et qu’il s’agit d’une erreur d’interprétation du validateur. En effet, si l’on utilise font: 0px/0, tout va bien, alors que dans le même temps, le validateur affiche font: 0/0.
2. text-shadow:none –- Permet de s’assurer que les ombres portées avec text-shadow sont supprimés du texte pour éviter l’apparition d’une ombre portée par-dessus le background.
3. color:transparent -– Requis pour les navigateurs qui ne parviennent pas à rendre le texte complètement invisible, comme Safari 4 ou certains navigateurs pour mobiles. Les versions d’Internet Explorer IE6/7/8 ne reconnaissent pas cette valeur pour la propriété color, mais heureusement, les versions IE7/8 ne montrent rien et IE6 n’affiche qu’une très légère trace du texte.

Dans HTML5 Boilerplate, nous avons également supprimé les éventuelles bordures et couleur de fond :

/* For image replacement */
.ir {
    border:0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color: transparent;
}

Avantages par rapport à text-indent

Cette nouvelle technique évite les problèmes posés par la méthode de remplacement via text-indent, notamment les pertes de performances. Notez que ces dernières affectent également la dernière méthode proposée par Scott Kellum qui vise au départ à améliorer les performances sur iPad 1.

1. Fonctionne sur IE6/7 sur les éléments de type inline-block. Cf. les problèmes liés aux techniques basées sur l’indentation de textes à l’adresse http://jsfiddle.net/necolas/QZvYa/show/
2. N’implique pas la création d’une boite en dehors de la surface visible de l’écran qui entraine une baisse des performances.
3. Plus besoin de spécifier d’alignement de texte ou de masquer le contenu qui dépasse car le texte de la nouvelle méthode ne prend tout simplement plus de place.
4. Inutile de masquer les éventuelles balises ou d’utiliser un contournement avec display:inline impliqué par l’indentation du texte.
5. En tout état de cause, cette technique nécessite moins de lignes de code.

Effets de bord

Aucun hack de remplacement par image n’est parfait :

1. Laisse une légère trace de texte sur IE6.
2. Implique de ne pas utiliser l’unité em pour les marges de l’élément sur lequel vous appliquez cette technique, vu que la taille du texte est réglé à zéro.
3. Windows-Eyes a un bug qui empêche la lecture du texte caché par cette méthode. Il n’y a en revanche aucun problème avec les autres lecteurs d’écran testés. Merci à @jkiss pour ses précisions et à @wilto pour avoir confirmé que cette méthode fonctionnait avec JAWS 12 dans IE 6/7/8 et Firefox 4/5/6.
4. Comme beaucoup de méthodes de remplacement par l’image, elle ne fonctionne pas si les CSS sont chargées mais que les images ne le sont pas.
5. Le texte n’est pas caché si le visiteur a une feuille de style utilisateur avec une déclaration font-size se terminant par !important pour l’élément où vous avez appliqué la class .ir.

Il est utile de noter que le remplacement par l’image utilisant les pseudo-éléments — NIR image replacement — évitent ses désagréments mais ne fonctionne pas correctement sur IE6/7.

Pour finir

J’utilise cette technique sans encombre depuis que Jonathan Neal et moi-même l’utilisons dans le cadre d’un test de clearfix commencé il y a un an environ. Le framework BEM utilise également cette technique pour ses icônes. L’idée principale fut proposée dès 2003 mais le rendu des navigateurs de l’époque n’a pas permis une large diffusion de cette méthode.

Si vous rencontrez des problèmes en utilisant cette technique, merci de détailler le bug.

Traduit de l’article Another CSS image replacement technique avec l’aimable autorisation de l’auteur ⁽¹⁾.

⁽¹⁾ Nicolas Gallagher (@necolas) est un développeur web front-end freelance basé à Londres. Il a co-créé Normalize.css et il fait partie des développeurs du projet HTML5 Boilerplate.

N’hésitez pas à me faire part de vos remarques sur les contresens (l’anglais était ma 3e langue), les fautes d’orthographe et d’une manière générale tout ce qui pourrait être préjudiciable à l’article d’origine.

Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Une solution CSS accessible pour remplacer du texte HTML par une image
• 8 techniques CSS pour remplacer du texte HTML par une image
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

"Ajouter une image" depuis l'interface d'administration de WordPress

Classes CSS pour aligner les images

• Aucun — .alignnone {}
• Gauche — .alignleft {}
• Centre — .aligncenter {}
• Droite — .alignright {}

Les styles associés (à titre indicatif)

img.alignnone {
    margin: 0 1em;
}
img.alignleft {
    float: left;
    margin-right: 1.5em;
}
img.aligncenter {
    display: block;
    margin: 1em auto;
}
img.alignright {
    float: right;
    margin-left: 1.5em;
}

Formats des images

Les formats (tailles) sont précisés dans Réglages → Médias.

• Miniature — .size-thumbnail {}
• Moyenne — .size-medium {}
• Large — .size-large {}
• Taille originale — .size-full {}

A ce niveau, on peut déjà s’amuser avec les classes multiples en stylant différemment les images selon leurs alignements et leurs formats :

• .size-thumbnail.alignnone {}
• .size-medium.alignleft {}
• .size-large.aligncenter {}
• .size-full.alignright {}
• Etc.

Légende (caption)

Lorsqu’on ajoute une légende, notre image est enveloppée dans une balise div ; une balise p englobe la légende. Les classes impliquées dans l’alignement de l’image sont déplacées sur cette balise div qui contient déjà une classe .wp-caption. Ce qui nous donne les combinaisons suivantes :

• .wp-caption.alignright {}
• .wp-caption.alignleft {}
• .wp-caption.alignnone {}
• .wp-caption.aligncenter {}
• .wp-caption.alignnone {}

Les classes CSS impliquées dans le format restent chevillées à la balise img. Ce qui élargit encore notre terrain de jeu :

• .wp-caption.alignright .size-thumbnail {}
• .wp-caption.alignleft .size-medium {}
• .wp-caption.alignnone .size-large {}
• .wp-caption.aligncenter .size-full {}
• etc.

(Je vous fais grâce de toutes les combinaisons dont l’intérêt est tout relatif).

Classes multiples dans IE6 ?

N’hésitez pas à lire le billet 3 fonctions Javascript pour lutter contre le bug des classes multiples dans IE6 pour utiliser les classes multiples dans IE6 : une fonction simple avec jQuery, une autre plus évoluée (toujours avec jQuery) et une dernière fonction en pur Javascript pour ne pas charger la mule !

Articles sur le même sujet

• Nouvelle méthode de remplacement de texte par une image
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• Editeur de dégradés CSS3 à la mode de Photoshop
• Lutte des classes CSS !
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign

CSS3 Media Queries

• Media Queries : W3C Candidate Recommendation – La recommandation du W3C sur les Media Queries
• mediaqueri.es – Collection de site utilisant Media Queries
• Hardboiled CSS3 Media Queries – La boite à outils de Stuff and Nonsense avec de nombreux exemples de Media Queries prêts à l’emploi
• Progressive Enhancement with CSS Media Queries – Stratégies pour utiliser les Media Queries dans une optique d’amélioration progressive
• Les Media Queries CSS — Le but [des Media Queries] est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.
• CSS3 : les Media Queries – Les Media-Queries, permettent de cibler différents cas et ainsi d’adapter la restitution de sa page html à différentes caractéristiques des terminaux.
• Responsive Web Design: What It Is and How To Use It — Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
• Playing with CSS3 Media Queries — Un exemple simple de mise en oeuvre pour voir les Media Queries en action
• Media queries — Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.
• CSS3 Media Queries JS — Javascript library which make CSS3 Media Queries work in all browsers (via JS 4 Design)
• Responsive Design with CSS3 Media Queries – Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher.

Grilles adaptatives

• Skeleton – A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
• columnal – A responsive CSS grid system helping desktop and mobile browsers play nicely together.
• Responsive Grid Systems — A Conceptual Framework for Extending Upon the Functionality of 960.gs

Polyfills

• css3-mediaqueries-js
• Respond — A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more), by Scott Jehl.
• mediatizr — Responsive-oriented CSS3 media queries polyfill, by Aurélien Delogu.
• matchMedia — A standardized way to check media query matching in script, by Scott Jehl, Paul Irish, Nicholas Zakas.
• jQuery Media Helpers — Some media query and cross-browser responsive design helpers, abstracted from jQuery Mobile, by Scott Jehl.

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Editeur de dégradés CSS3 à la mode de Photoshop
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

Si vous aussi, vous vous demandez comment Dexter s’y prendrait pour découper vos .psd avec brio ;-)

Découper avec «dextérité»

Selon sa méthode de travail, l’intégrateur s’occupe du marquage HTML après avoir tout bien tranché. Il teste ensuite le rendu final dans tous les navigateurs disponibles. Il peut aussi découper, intégrer et tester le rendu dans plusieurs navigateurs au fur et à mesure. Dans les deux cas, on ajuste le code HTML (le moins possible, s’il a été pensé de manière sémantique) et les CSS pour que le site s’affiche de manière identique partout ou presque, en faisant au mieux avec les innombrables bugs et incohérences qui font le charme (ou pas) de l’univers impitoyable des navigateurs.

A cette étape, si l’intégrateur a eu le temps nécessaire pour travailler sereinement, le site devrait s’afficher parfaitement dans les navigateurs les plus courants, y compris dans IE6 ! Oui, parfaitement.

Il s’agit-là de la méthode «standard» pour faire un site web à partir d’une maquette réalisée dans un logiciel de traitement d’image, et ce depuis déjà de nombreuses années. Généralement, ces sites possède une largeur fixe et s’affichent entièrement sur des écrans ayant une résolution de 1 024 par 768 pixels. Ils regroupent sans doute plus de  80% de l’ensemble des sites web. Ils sont généralement prévus pour s’afficher de manière identique sur les navigateurs présents sur le marché.

Bref, le «pixel perfect» comme je le comprends existe depuis longtemps déjà. Savoir si c’est une bonne chose ou non est un autre débat.

Sur le fil du rasoir

Selon la «nature graphique» de cette maquette, l’intégrateur peut être tenté d’utiliser certains effets CSS3 pour rendre les arrondis, les ombres portées, les dégradés, etc. A partir de là, on n’est bien conscient qu’il s’agit d’utiliser des technologies émergentes qui sont encore à l’état de brouillon. Les éditeurs de navigateur travaillent déjà dur pour implémenter ces technologies ; on ne peut pas leur demander en plus d’assurer un rendu identique à celui du voisin (du moins pour l’instant) !

Au niveau des spécifications, il est normal de penser qu’un bord arrondi ne devrait pas être différent d’un navigateur à l’autre. C’est pareil pour une ombre portée ou un dégradé. Mais à supposer que chaque navigateur parvienne à implémenter correctement ces effets CSS3, je continue de penser qu’une légère différence d’affichage n’est pas préjudiciable : un visiteur consulte rarement le même site simultanément dans deux navigateurs différents, si ?

Conclusion…

… Y en a pas ;-) Ou plutôt : dites-moi si dans les travaux que vous réalisez, vous trouvez que les maquettes à découper «au poil de c.. près» sont en augmentation par rapport aux maquettes où l’on peut faire tout ou partie du design directement dans le navigateur, ou pas ?

Articles sur le même sujet

• Editeur de dégradés CSS3 à la mode de Photoshop
• Intégration HTML & CSS des maquettes Photoshop au pixel près
• Quelques notes sur les fonctions de l'intégrateur web et de l'intégratrice web
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

Tirer le meilleur de CSS

La première partie devrait à elle seule déclencher l’acte d’achat. Raphaël passe en revue les propriétés CSS 2.1 dont l’intégrateur HTML & CSS s’est privé pendant des années à cause de leur manque d’implémentation dans IE6 et IE7, bons derniers de la classe à l’école des standards… A nous, désormais, les joies procurées par l’utilisation de sélecteurs sur lesquels nous faisions l’impasse : sélecteur d’enfant, sélecteur de frère adjacent, sélecteur d’attribut, :first-letter et first-line, :first-child, :focus, :before et :after, règle «@» diverses et variées.

Selon votre politique de prise en compte des versions d’Internet Explorer, vous pourrez utiliser tout ou partie de ces «nouveaux» jouets. Le niveau de support spécifique de tel ou tel sélecteur par les versions d’IE est précisé à chaque fois au fil de la lecture. Notons qu’il devient de plus en plus courant de délaisser IE6 et de prévoir une dégradation gracieuse pour IE7, ce qui permet d’utiliser à fond la spécification des CSS 2.1 prise en charge par IE8 et les autres navigateurs modernes.

HTML5 et CSS3 : l’innovation en marche

Cette partie fait le point sur les nouveautés qui arrivent dans le sillage de HTML5 : la syntaxe, les nouvelles balises sémantiques pour structurer les contenus, avec un focus particulier sur les balises video, audio et canvas, les nouveaux attributs de formulaires, etc.

Après HTML5, le livre présente CSS3. Toutes les nouveautés passent sur le grill bien chaud de Raphaël qui en profite pour nous faire saliver avec ses recettes «maison» et ses tours de main, pour que nous aussi, devenions des chefs en CSS ! Toujours très pragmatique, le livre donne dans cette partie — comme dans les autres  –, des bonnes adresses permettant de prendre en compte les navigateurs anciens via Javascript, ou des composants HTC.

CSS et applications spécifiques

Web mobile

Cette dernière partie aborde le web mobile avec les défis qu’il lance à l’intégrateur web et les solutions qu’il peut mettre en oeuvre pour tenir compte du parc hétérogène des téléphones portables plus ou moins «smarts» et des tablettes tactiles aux formats et résolutions d’écran disparates.

CSS Print

Les CSS pour l’impression ne sont pas oubliées. Il est vrai qu’elles sont souvent le parent pauvre des CSS en dépit de leur utilité indiscutable. Surtout quand on pense que le web — loin d’avoir diminué les besoins en ressources de la planète –, n’a fait qu’augmenter l’utilisation de l’encre et du papier ainsi que l’énergie nécessaire à leur production :-(

Profitons donc de @media print pour limiter l’utilisation de l’encre en éliminant les couleurs, les aplats et tout ce qui n’est pas utile dans le contexte de l’impression.

Lecteurs de mails et CSS

Créer des Newsletters ou tout autre document susceptible de s’afficher sur un client de messagerie est une épreuve que je ne souhaite à personne. Et pour cause : à côté des clients de messagerie de bureau comme Lotus ou Outlook et certains services de messagerie en ligne, IE6 fait figure de champion du monde ! Bref, c’est galère, mais il est possible de s’en sortir en suivant les conseils de conception de page web pour les clients mail de ce livre.

En deux mots

CSS avancées, vers HTML5 et CSS3 est un des rares livres indispensables que tout intégrateur web devrait avoir à portée de main. Raphaël Goetter sait comment expliquer les concepts flous des spécifications (et il y a !) avec humour et simplicité tout en restant didactique. Le livre est à priori destinés aux utilisateur avancés, mais devrait rester accessible aux jeunes «padawans». Toutefois, je recommande fortement à ces derniers la lecture de la 3ème édition de CSS2 — Pratique du design web qui vient d’être rééditée au format semi-poche le 31 mars 2011 !

Informations pratiques

CSS avancées. Vers HTML 5 et CSS 3

• Auteur(s) : Raphaël Goetter
• Editeur : Eyrolles
• Nombre de pages : 400 pages
• Date de parution : 17/03/2011
• Extraits au format PDF disponibles sur la fiche du livre
• EN COULEUR !

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Editeur de dégradés CSS3 à la mode de Photoshop
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Nouvelle méthode de remplacement de texte par une image

HTML5 Boilerplate ne vous oblige à rien : configurez comme vous voulez !

Personnalisez votre HTML5 Boilerplate et faites-vous plaisir !

Parmi les fonctionnalités proposées, nous trouvons :

• Compatibilité inter-navigateurs,
• Prêt pour le HTML5.
• Mise en cache optimale et règles de compression pour les meilleures performances possibles
• Script de configuration.
• Optimisations pour les navigateurs mobiles.
• Perfectionnement progressif et dégradation gracieuse.
• Classes spécifiques à IE pour une gestion optimale des différences entres les navigateurs.
• Classes `.no-js` et `.js` très pratiques pour styler selon les capacités des navigateurs
• Tests unitaires.
• Console.log pour les navigateurs qui n’en possèdent pas.
• Une feuille de style optimale pour l’impression aux performances optimisées.
• Balisage et squelette CSS adaptable pour iOS, Android et Opera Mobile.
• IE6 pngfix pré-intégré.
• Classes `.clearfix`, `.visuallyhidden` pour styler proprement et de manière accessible.
• Fichier .htaccess qui permet une autorisation propre des fonctionnalités HTML5 et un chargement plus rapide des pages.
• jQuery hébergé sur un CDN ou récupéré en local au cas où.
• Vous pensez qu’il y en a trop ? Boilerplate est un ami de la touche DELETE. :)

Pour la route

• Téléchargez la version de production ou d’étude,
• Lire la documentation,
• Retrouvez HTML5 Boilerplate sur GitHub.

Articles sur le même sujet

• Nouvelle méthode de remplacement de texte par une image
• Editeur de dégradés CSS3 à la mode de Photoshop
• Quelques liens sur les Media Queries en CSS3
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

1. Typographie sur le web

Déclarer vos polices de caractères avec Font-Face

Modification de la méthode de déclaration Font-Face et mise à jour du billet concernant les Bonnes pratiques pour les déclarations font-face. Pas de problème si vous utilisez les kits de FontSquirrel, ils sont à jour ! Sinon, voici la bonne méthode pour inclure vos polices localement :

@font-face {
    font-family: 'MuseoSlab500';
    src: url('Museo_Slab_500-webfont.eot?iefix=') format('eot'),
         url('Museo_Slab_500-webfont.woff') format('woff'),
         url('Museo_Slab_500-webfont.ttf') format('truetype'),
         url('Museo_Slab_500-webfont.svg#webfont8VbsAwew') format('svg');
    font-weight: normal;
    font-style: normal;
}

Museo Slab is robust slab serif with Museo’s friendliness. It is a perfect match for Museo Sans. By Exljbris.

Museo Slab : police de qualité accompagnée de son kit fonte-face

→ FontSquirrel propose un convertisseur de polices de caractères qui permet d’obtenir l’ensemble des formats web pour l’ensemble des navigateurs (.eot, .woff, .ttf, .svg).

Maitrisez l’affichage des Webfonts

[ typographisme ] Maîtriser le délai d’affichage des fontes – Internet Explorer et les navigateurs qui utilisent Webkit (Safari, Chrome) affiche le texte lorsque la police est téléchargée. Quant à Firefox et Opera, ils commencent à afficher le texte avec la police de substitution en attendant que la police soit complètement chargée. Cet article fait le point sur ces deux approches et fournit des astuces pour limiter les dégâts : choix des polices de substitution pour limiter le clignotement ou utilisation de Web Font Loader pour contrôler le chargement et l’affichage des polices.

Unicode et typographie

Unicode et typographie : un amour impossible – Tout ce que vous avez toujours voulu savoir sur les rapport entre Unicode et la typographie10.3166/dn.6.3-4.105-137.)

• → Voir aussi Tableaux de caractères Unicode – Écritures,
• → Lire aussi Le petit journal permanent de la TypOgrApHiE !

Les fontes disponibles selon les plate-formes

• → iOS Fonts — 40 familles de polices de caractères pour iPhone 4.2 et 57 pour iPad 4.2
• → CSS font sampler and survey — The Code Style font sampler is a guide to the most common fonts on Windows, Mac and Linux.

2. HTML5 Boilerplate

[ 1stwebdesigner ] 20 bouts de code et bonnes pratiques issus de HTML5 Boilerplate — Comme beaucoup, j’ai entendu parler de HTML5 Boilerplate, un modèle de site HTML/CSS/JS/.htaccess de «tueurs» créé par Paul Irish et Divya Manian qui permet de développer des sites rapides, robustes et prêts pour le futur. HTML5 Boilerplate nous appporte les dernières avancées en matière d’intégration web sur un plateau sous la forme de plusieurs fichiers HTML, CSS, Javascript et .htaccess prêts pour HTM5 et CSS3 (mais pas seulement). Le fichier .htaccess regroupe les bonnes pratiques en matière de compression des différents formats utilisés sur le web, de dates d’expiration pour la mise en cache des éléments, de redirection sur le domaine sans les 3W, etc.

HTML5 Boilerplate existe en deux versions : une pour l’étude avec les explications sous forme de commentaires, et l’autre pour la production. Il y a beaucoup à apprendre en lisant les différents fichiers et en écoutant Paul Irish présenter HTML5 Boilerplate :

• → Lire la documentation de HTML5 Boilerplate sur GitHub,
• → Lire la documentation en mode Boilerplate (cf. HTML5 Boilerplate Documentation… en mode Boilerplate !),
• → Lire Script Loading Techniques.

3. Base.css ou Reset.css ?

[ thinkvitamin ] Setting rather than Resetting Default Styling – Avec l’utilisation (ou non) d’un framework CSS, la question de savoir s’il vaut mieux mettre un reset.css ou une feuille de style de base dans ses pages web est un peu le serpent de mer de l’intégration web. Thierry Koblentz présente les défauts inhérents au reset.css et défend l’approche de la feuille de style de «base» avec base.css qui a inspirée en partie HTML5 Boilerplate !

4. Clearfix reloaded ?

[ Yahoo! User Interface Blog ] Clearfix Reloaded + overflow:hidden Demystified – Tant que la propriété float servira pour bâtir les fondations de nos pages web, nous continuerons à utiliser une méthode pour rétablir le flux après l’utilisation d’éléments «floatants». Il existe plusieurs méthodes que j’avais compilées dans l’article Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire qui faisait lui-même suite à Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? Voici le petit nouveau :

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

.clearfix:before,
.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.clearfix2:before,
.clearfix2:after {
    content: "020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

• → Float, clear et contextes de formatage,
• → Everything you Know about Clearfix is Wrong,
• → How to « patch » clearfix so it can better handle collapsing margins,
• → CSS 101: Block Formatting Contexts,
• → The hacktastic zoom fix.

5. Apprendre CSS3

[ onextrapixel ] The No-Pressure Introduction to CSS3 — Utiliser CSS3 dès maintenant est possible. Cet article fait le point sur les différentes propriétés CSS3 avec des exemples concrets, tout en précisant leur niveau de prise en charge par les différents navigateurs, avec ou sans préfixe vendeur. L’auteur n’a pas oublié les nouveaux sélecteurs — tout aussi intéressants, sinon plus, que les «effets» — ni les Medias Queries ou Font-Face. Il nous donne en prime quelques liens vers des sites qui brossent CSS3 dans le sens du poil.

→ Lire aussi Le petit journal permanent de CSS3 — 100+ ressources pour commencer

6. Box-Shadow sexy sans image

[ Nicolas Gallagher ] CSS drop-shadows without images — L’article explique comment appliquer simplement des ombres portées originales en utilisant les pseudo-classe :before et :after. Voir la démonstration.

Par exemple :

.drop-shadow {
   position:relative;
   width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

• → Ombres avancées avec CSS3 et box-shadow — Tutoriel très complet en français sur la mise en place d’ombres portées originales avec box-shadow.
• → Drop Shadows with CSS3,
• → Pure CSS3 box-shadow page curl effect.
• → Des bulles de dialogue en CSS3 sans image

7. Feuille de style spécialisées pour les mobiles

[ Alsacréations ] Une feuille de styles de base pour le Web mobile — Raphaël nous propose un exemple de feuille de style CSS pour les médias mobiles qui condense les bonnes pratiques à respecter :

• Fixer le Viewport,
• Passer tous les éléments de largeur fixe en largeur automatique,
• Fixer une largeur maximale de 100 % aux éléments potentiellement problématiques,
• Gérer les mots longs,
• Passer à une seule colonne,
• Masquer les éléments superflus,
• Afficher un message personnalisé.

→ Lire aussi Une feuille de styles de base pour le media print.

8. «Faire avec» Internet Explorer

[ Design your way ] Internet Explorer In A Web Designer’s Life – Problems And Solutions –De plus en plus de développeurs et d’intégrateurs web déclarent ne plus prendre en charge IE6 dans leur projet de développement. Si ce n’est pas votre cas, sachez qu’il existe des outils pour se faciliter la vie avec le dernier de la classe (IE6) en particulier et Internet Explorer d’une manière générale. Via @_jiann.

Outils d’aide au développement

• Google Chrome Frame
• DebugBar
• CompanionJS
• Internet Explorer Developer Toolbar
• Fiddler
• HttpWatch
• Web Accessibility Toolbar
• TamperIE

Scripts

• IE7.js Javascript library
• Selectivizr
• Rounded corner HTML elements using CSS3
• CSS3 support for Internet Explorer 6, 7, and 8
• CSS3 Solutions for Internet Explorer

Outils CSS3 /HTML5

• CSS3Pie
• transformIE
• html5shiv
• IE Print Protector
• Internet Explorer User Agent Style Sheets
• Modernizr
• MySpace’s Performance Tracker
• Unit PNG Fix
• ExplorerCanvas

Tester votre site

• IETester
• IE NetRenderer
• Browsershots

Articles et discussions

• Why People Still Use IE 6
• Is IE9 a modern browser?
• IE CSS Bugs That’ll Get You Every Time
• IE6 – CSS Bugs and Fixes Explained

→ Lire aussi les articles tagués Internet Explorer, IE6 et commentaires conditionnels.

9. Compatibilité CSS et Internet Explorer

[ msdn ] Compatibilité CSS et Internet Explorer — Si votre site Web est destiné à être utilisé avec certaines anciennes versions d’Internet Explorer, vous devez connaître leur niveau de conformité à la spécification CSS. Cette article contient une vue synthétique des spécifications CSS prises en charge dans les versions récentes d’Internet Explorer et dans Internet Explorer 8.

10. Apprendre Photoshop en vidéo

[ Lifehacker ] Learn The Basics Of Photoshop: The Complete Guide — Un dossier composé de textes et de vidéos sur l’apprentissage des bases de Photoshop en cinq parties distinctes et complémentaires :

1. Learn The Basics Of Photoshop In Under 25 Minutes,
2. Basics Of Photoshop: Colour Correction, Touch Ups And Enhancements,
3. Basics Of Photoshop: Basic Drawing With The Pen Tool,
4. Basics Of Photoshop: Designing A Website,
5. Basics Of Photoshop: Next Steps And Further Resources.

→ Lire aussi Détourer les cheveux avec Photoshop

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• HTML5 et CSS pour l'intégrateur web
• Editeur de dégradés CSS3 à la mode de Photoshop
• Check your <body> avec le W3C

Malgré des débuts prometteurs, en 10 ans de bons et loyaux services sévices, Internet Explorer 6 ne s’est pas fait que des amis… [Illustration ci-contre par Mike Rohde]

«Die IE6, DIE!» Par Mike Rohde (rohdesign.com). Sous Licence CC.

Toutefois, il se trouve que dans le cadre d’un projet utilisant WordPress, j’avais besoin de styler différemment les images selon qu’elles possèdent une légende  ou pas, qu’elles soient alignées à droite, à gauche, au centre, pas du tout (à la folie, passionnément, etc.) et selon leur taille. Ce qui donne un nombre de combinaisons suffisamment important pour justifier l’utilisation des classes multiples, y compris dans IE6. En effet, dans mon cas, l’alignement des images fait partie intégrante du design qui doit (Must vs. Should) passer aussi dans IE6. Et non, en l’occurrence, le script kickie6.js n’est pas envisageable :-D

Dans l’idéal, il faudrait une fonction Javascript  pour détecter les classes multiples passées en paramètres afin d’obtenir en retour la concaténation des deux classes séparée par un tiret (ex. .classe1-classe2. N’étant pas développeur Javascript, j’ai fais appel aux bonnes volontés présentes sur Twitter. Quelques heures plus tard, plusieurs propositions surgirent.

Petit mais costaud, c’est jQuery

Quand on joue sur le web, jQuery est souvent de la partie. Il devient assez rare de faire l’économie d’un framework Javascript, quel qu’il soit. Voici deux méthodes pour ajouter une classe CSS afin de pallier les insuffisances d’Internet Explorer 6 en matière de gestion des classes multiples.

1. La solution fournie par Florian (@_Florian_R) a le mérite de la simplicité et de l’efficacité. Il suffit de passer les classes multiples à la fonction `jQuery()` et d’ajouter la classe de son choix avec la méthode `addClass()`. Seul petit bémol, cette méthode oblige à parcourir tout le document à la recherche des deux classes.

   $(document).ready(function() {
       $(".classe1.classe2").addClass("classe1-classe2");
   });

2. Allons plus loin avec Stéphane Rouillé (@stfr) – Web Developper, PHP and jQuery addict. Sa fonction permet,  au choix,  de remplacer les deux classes précédemment utilisées par une nouvelle classe (replace : true;) ou de les garder (replace : false;). Il est possible de spécifier le noeud DOM pour éviter de parcourir l’ensemble du document afin de ne pas gréver inutilement les performances déjà limitées de notre très cher (coûteux) IE6 !

   /*
   *   Merge multiple CSS classes in one.
   *   Just use : $('body').multipleClassCombiner();  in order to apply this filter on all multiple classes elements
   *   Take care : $('h1').multipleClassCombiner() will apply this filter on <h1>'s childrens. But you can easily modify it.
   *   Default delimiter : "-"
   *   Have Fun !
   *   @author Stéphane Rouillé (Twitter: @stfr)
   *   @date 2011-02-08
   *   Free to use, distribute, modify, etc etc...
   */
   (function($) {
       $.fn.multipleClassCombiner=function(params){
           var options={
               delimiter:'-',
               replace : true
           };
           $.extend(options,params);
           var multipleClassElements=$(this).find("*[class*=' ']");    /* Oh god ! */
           multipleClassElements.each(function(){
               var classes=$(this).attr('class').trim().split(' ');
               if(options.replace){
                   $(this).attr('class',classes.join(options.delimiter));
               }else{
                   $(this).attr('class',$(this).attr('class')+' '+classes.join(options.delimiter));
               }
           });
       }
   })(jQuery);

Regarde Maman, sans jQuery !

jQuery est souvent une bonne idée, mais de nombreux projets de sites internet ne nécessitent pas de framework. Mettre en place jQuery juste pour gérer les classes multiples dans IE6 n’est pas très raisonnable :  les utilisateurs de ce navigateur obsolète utilisent déjà des configurations assez modestes… Inutile, donc, de charger la mule ;)

C’est Edouard Cunibil (@DuaelFr) – Développeur web freelance certifié PHP — qui nous offre une fonction en pur Javascript. Pour utiliser patchMultipleClass(), il suffit de passer les classes multiples en paramètres, en ajoutant, le cas échéant, le noeud DOM impliqué dans la recherche. Par défaut, la fonction parcours tout le DOM à partir de body, mais rien ne vous empêche de limiter les dégâts à #content, par exemple.

function patchMultipleClass(classNames, parent)
{
    var children, current, classes, found, subfound, splitClassNames, joinClassNames;
    var i, j, k;
    splitClassNames = classNames.substr(1).split('.');
    joinClassNames  = splitClassNames.join('-');
    if (!parent) { parent = document.getElementsByTagName('body')[0]; }
    children = parent.children;
    for (i = 0 ; i < children.length ; ++i) {
        current = children[i];
        classes = current.className.split(' ');
        found   = true;
        for (j = 0 ; j < splitClassNames.length ; ++j) {
            subfound = false;
            for (k = 0 ; k < classes.length ; ++k) {
                if (classes[k] == splitClassNames[j]) {
                    subfound = true;
                    break;
                }
            }
            if (!subfound) {
                found = false;
                break;
            }
        }
        if (found) {
            if (current.className.indexOf(joinClassNames) == -1) {
                current.className += ' ' + joinClassNames;
            }
        }
        patchMultipleClass(classNames, current);
    }
}
if (window.attachEvent) {
   window.attachEvent("onload", function() {
       var parentElt = document.getElementById('content');
       patchMultipleClass('.wp-caption.alignright', parentElt);
       patchMultipleClass('.wp-caption.alignleft', parentElt);
       patchMultipleClass('.wp-caption.alignnone', parentElt);
       patchMultipleClass('.wp-caption.aligncenter', parentElt);
   });
}

Cibler uniquement IE6

Pour réserver ce traitement Javascript aux seuls navigateurs ne prenant pas en charge les classes multiples (IE5 — IE6), j’utilise les commentaires conditionnels :

<!--[if lte IE 6]>
    <script src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/functions-ie6.js""></script>
<![endif]-->

Voilà, c’est fini !

J’espère que ces quelques précisions sur ces quelques fonctions Javascript permettant de gérer les classes multiples dans Internet Explorer 6 vous permettront de vous amuser. Je tiens une nouvelle fois à remercier Florian (@_Florian_R), Stéphane Rouillé (@stfr) et Edouard Cunibil (@DuaelFr) pour avoir planché nuitamment sur ce problème :-)

N’hésitez pas à partager vos découvertes sur ce sujet, elles seront les bienvenues.

Merci également à tous ceux qui ont répondu d’une manière ou d’une autre à l’appel : @mgeoffray, @Remzz, @Tchesssss, @JeuneVeteran, @phenxdesign, @burninghat, @jcbrebion, @Darklg, @LDZintegratore, @naholyr, @piouPiouM, @cafenoirdesign, @rickdog, @studiohypehope.

Retrouvez-moi sur Twitter avec @br1o !

Articles sur le même sujet

• 100+ comptes Twitter pour webdesigner
• 35 blogs de développeurs web
• 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.
• 390 ressources Javascript & jQuery

TypOgrApHiE !

Beautiful Type — Un blog créé par les deux webdesigners. Francis Chouquet (@fran6) et Aurélien Foutoyet (@allfordesign) partagent une passion commune pour la typographie et le prouve en présentant un patchwork de photographies et d’illustrations «typographiques». N’hésitez pas à jeter un oeil sur le design soigné de ce blog qui vaut le détour !

→ Jetez également un oeil sur le petit journal de la TypOgrApHiE qui le vaut bien !

Css Sans Stress !

Reset CSS V2.0 — On ne présente plus le reset CSS d’Eric Meyer, mais vous pouvez toujours lire Eric Meyer fait encore risette avec Resetting Again et 5 Reset CSS à la loupe pour vous rafraichir la mémoire ! Au menu de cette V2.0 : suppression de la suppression de l’outline sur l’ensemble des balises HTML et sur la pseudo-classe `:focus` (l’accessibilité devrait s’en trouver mieux) et prise en compte des nouvelles balises HTML5 article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video.

• Banque de liens d’Ergolab — Ressources commentées dans les domaines de l’ergonomie, de l’architecture de l’information, du design d’interaction… Plus de 200 liens classés par thèmes, dans l’ordre alphabétique ou sur une seule page.
• cssdesk — Sorte de JSFiddle pour CSS et CSS3 : une fenêtre pour le marquage HTML, une deuxième pour les CSS et enfin, le résultat de vos manipulations dans une troisième fenêtre.
• Spritebox — Facilite la création de Sprites CSS en se basant sur la position du background. Il suffit de télécharger votre image et de sélectionner chaque composante du Sprite et de générer le code CSS.
• ProCSSor — Formatez vos feuilles de style à votre convenance : indentation, placement des Curly Braces et d’autres options à découvrir. Pratique lorsqu’on doit reprendre des CSS que l’on a pas codées soi-même.
• Multiple Class / ID and Class Selectors — L’utilisation des sélecteurs multiples a longtemps été sous-utilisée en raison certainement d’une prise en charge déficiente par IE6. A l’heure où le parc des navigateurs fait peau neuve, il est bon de se pencher sur l’utilisation de `.classe1.classe2.classe3` ou de `#id1.classe1`.
• Bonnes pratiques pour les déclarations font-face — Incorporer des polices de caractères dans nos pages Web est devenu plus simple avec la propriété Font Face. Toutefois, les incompatibilités entre les navigateurs — notamment dues à Internet Explorer — rendent l’opération assez complexe. Cet article fait le point sur les problèmes à résoudre.

Inspiration, création

SearchPSD — Un moteur de recherche spécialisé dans les fichiers Photoshop. Plus de 1 500 fichiers .psd gratuits classés par catégories. Il suffit d’effectuer une rechercher sur «Logo» pour trouver une palanquée de logo issus des stars du Web comme Facebook, Google, Twitter, Yahoo. Le nombre de fichiers est encore faible, mais SearchPSD peut s’avérer utile dans l’avenir : à suivre ! Via Cyril Lopez.

• 139 Impressive Typography Design Inspiration — Foultitude d’exemples et de liens vers des créations qui font la part belle à la typographie.
• 1000+ Brushes Photoshop — 40 sites proposant des brosses Photoshop issues du domaine de la technologie pour donner un look futuriste ou techno à vos créations.

Développement web

• Exemple d’AJAX en PHP + XML + jQuery — Tutoriel pour réaliser des appels Ajax de la création du fichier XML avec PHP à la  gestion d’Internet Explorer et de la navigation dans l’historique.
• UI kits et stencilpack — Une bonne liste d’outils pour vous faciliter la conception d’interface, pour un wireframing efficace.
• Fillerati — Le faux-texte à base de Lorem Ipsum n’est pas forcément une bonne idée, l’idéal étant de travailler avec les contenus définitif. Si toutefois vous n’aviez pas le choix, essayez-donc Fillerati qui offre des vrais textes issus de la littérature (disponibles dans plusieurs langues, faut scroller pour trouver) pré-remplis dans des balises `p`, `h1`, `li` et du texte de longueur variable.
• Spritzer — Ce script PHP permet de générer des images Sprites pour vos CSS à l’aide d’un simple fichier texte de configuration. Disponible sur Github.
• Internet Explorer 9 Beta Guide for Developers — The Internet Explorer 9 Beta Guide for Developers provides a look at the features and improvements in Internet Explorer 9 Beta.
• Coding A HTML 5 Layout From Scratch — As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
• Android : introdution aux styles et aux thèmes — Cet article vous présente une particularité assez plaisante d’Android vis-à-vis des autres systèmes d’exploitation mobiles : la possibilité de créer des interfaces graphiques à l’aide de simples fichiers XML.

C’est dans les vieux po(s)ts qu’on fait la meilleure soupe

• CSS Differences in Internet Explorer 6, 7 and 8 — On devrait y être habitué, mais il est parfois difficile de se souvenir des propriétés et sélecteurs CSS pris en charge ou non par les différentes versions d’Internet Explorer (IE6, IE7 et IE8). Voici un récapitulatif clair et concis avec des tables de compatibilité à garder sous la souris.
• 60 Questions to Consider When Designing a Website — 60 questions à se poser avant de lancer votre site dans le grand bain du web : gestion de projet, code HTML, CSS & Javascript, Webdesign et expérience utilisateur.

Miscellanées

• 101 sites Web très utiles — Une mine d’or pour ceux qui sont à la recherche de sites web utilitaires.
• TABLEIZER! — Créez des tableaux HTML à partir des données issues de vos feuille de calcul et autres tableurs !

Articles sur le même sujet

• Editeur de dégradés CSS3 à la mode de Photoshop
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• HTML5 et CSS pour l'intégrateur web
• Nouvelle méthode de remplacement de texte par une image