On ne le dira jamais assez, bien choisir un nom est une étape à ne pas sauter. En l’occurrence, j’avais pris un nom trop proche de l’excellent normalize.css, projet bien différent.

J’en ai profité également pour unifier un peu les noms de classes CSS, en les préfixant de manière plus logique : .cssc-*

Si vous aviez déjà cloné le projet, je vous invite à en refaire une copie :

git clone git://github.com/Darklg/CSSCommon.git

PS : J’essaie de faire le plus long streak possible sur Github, c’est tout sauf évident !

Le titre pourrait laisser penser que seuls SASS & Compass sont abordés, mais ce livre parle majoritairement d’organisation des CSS, ainsi que de bonnes pratiques pour produire des feuilles de styles maintenables, optimisées et réutilisables.

Il s’agit d’un sujet qui me tient à coeur, et c’est avec grand plaisir que j’ai lu ce livre qui aborde tous les pièges à éviter (et les bonnes pratiques à suivre) pour maintenir du CSS sur tout projet web. Ce livre est, selon moi, l’une des lectures indispensables pour tout intégrateur qui se respecte. Il contient une méthodologie solide de maintenance des CSS, ainsi qu’un tour d’horizon des outils améliorant la qualité de votre code.

Si vous n’êtes toujours pas convaincus, dites-vous que ce livre m’a même donné envie de passer à SASS. Et oui.

Sommaire

• De <font> à @font-face : une problématique nouvelle
• Première plongée dans CSS
• Bonnes pratiques pour un code CSS lisible et maintenable
• Pragmatisme : démystifier certaines bonnes pratiques
• Les frameworks CSS
• Travailler en équipe
• Préprocesseurs CSS : quand la machine écrit pour vous
• SASS et Compass
• Erreurs de conception : comment les débusquer
• Méthode : coder un design de zéro
• Méthode : faire le ménage dans les CSS

Je le veux !

CSS maintenables est disponible sur Amazon ainsi que sur le site d’Eyrolles.

TL;DR : Voici le JSFiddle de l’exemple de cet article.

Voici les éléments avec lesquels on va travailler :

• un bloc à hauteur variable : .bloc-hauteur-variable
• un bloc à centrer verticalement : .bloc-a-centrer
• un bloc wrapper autour du bloc à centrer verticalement : .bloc-wrapper

Ce qui nous donne en HTML :

<div class="bloc-hauteur-variable">
    <div class="bloc-wrapper">
        <div class="bloc-a-centrer">
            Mon texte sur une deux, plusieurs lignes, une image, un tableau, que sais-je.
        </div>
    </div>
</div>

Pour commencer, .bloc-hauteur-variable doit être en position relative, ensuite, on met en place une partie de l’astuce d’Alsacréations sur le centrage vertical :

Subtilité : assurez-vous que la hauteur de .bloc-wrapper soit plus grande que le contenu que vous souhaitez centrer. (Ici, j’ai pris 400px)

.bloc-hauteur-variable {
    position: relative;
}
 
.bloc-wrapper {
    height: 400px;
    line-height: 400px;
}
 
.bloc-a-centrer {
    line-height:1.2;
    display: inline-block;
    vertical-align: middle;
    /* Coucou IE */
    *display: inline;
    *zoom: 1;
}

Enfin, on met en place un alignement vertical en positionnant .bloc-wrapper à 50% du haut de son parent. On rajoute une marge négative égale à la moitié de la hauteur (permise par le positionnement) afin de parfaitement centrer le tout.

.bloc-hauteur-variable {
    /* Hauteur Arbitraire */
    height:632px;
    outline: 1px solid #ccc;
    position: relative;
}
 
.bloc-wrapper {
    position:absolute;
    top:50%;
    /* margin-top = -(height/2) */
    margin-top:-200px;
    height: 400px;
    line-height: 400px;
}
 
.bloc-a-centrer {
    line-height:1.2;
    display: inline-block;
    vertical-align: middle;
    /* Coucou IE */
    *display: inline;
    *zoom: 1;
}

En conclusion

Cette technique tient un peu du bazooka, car elle combine deux techniques d’alignement vertical : On centre verticalement un bloc dont on connait la hauteur moyenne, dans lequel on centre un bloc dont la hauteur est inconnue.

Cela fonctionne sur la majorité des navigateurs, dont IE8 & 9 (Le contenu ne sera pas centré sur IE 7). Les cas d’utilisation sont peu communs, mais on peut citer par exemple un site « full-screen », ou un menu centré dans une sidebar fixe.

Sur IE 7 & IE 8

Une opacité de .99 semble déclencher le lissage de la police.

filter: alpha(opacity=99);

Un background non transparent défini sur le bloc ou son parent marche parfois également.

background:#fff;

Sur Webkit (Google Chrome, Safari, …)

L’opacité à 999‰ peut également ramener un rendu de police correct … même sous OSX. Cette astuce permettra également d’éviter l’effet de police qui devient grasse lorsqu’on change son opacité avec transition.

opacity:0.999;

Changer l’ordre des types de font (parfois remonter le SVG) dans la propriété font-face m’a donné de belles surprises, sous Windows & OSX.

@font-face {
    font-family: 'MaFont';
    src: url('MaFont.eot');
    src: url('MaFont.eot?#iefix') format('embedded-opentype'),
         url('MaFont.svg#MaFont') format('svg'),
         url('MaFont.woff') format('woff'),
         url('MaFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

webkit-text-stroke ajoute une bordure interne (couleur/taille à adapter) et permet de « récupérer » certaines polices fines.

-webkit-text-stroke: 0.5px #fff;

Une très légère rotation peut éventuellement activer ClearType.

-webkit-transform: rotate(-0.0000000001deg);

Sur les anciennes version de Chrome, une ombre presque invisible déclenchait Cleartype. Ne fonctionne plus sur les dernières versions.

text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);

Jouer avec webkit-font-smoothing peut aussi donner un résultat.

-webkit-font-smoothing: (subpixel-antialiased|antialiased|none);

Sur Firefox

Un fichier .htaccess contenant le mime-type des polices devrait être présent.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Sur les autres navigateurs …

• Si vous utilisez le Font-Face Generator de Font Squirrel, assurez vous (mode expert) d’utiliser « Truetype Hinting: Font Squirrel ». Si vous n’êtes pas sûr et que votre rendu n’est pas génial, renvoyez le fichier original !
• Assurez-vous que le font-weight déclaré en CSS correspond au font-weight de la police chargée.
• Parfois, les navigateurs préfèreront une taille de police à une autre. 12px ou 16px peuvent, par exemple, donner de meilleurs résultats que 13px ou 17px.
• Jouer avec text-shadow peut aider légèrement sur Firefox.
• Si rien ne marche, votre typo n’est probablement pas adaptée à un usage web. Il est difficile d’imiter certains réglages de Photoshop, comme « Police Nette » et autres.

Et vous, vous avez d’autres pistes ?

<h3 class="irh3">Mon texte alternatif</h3>

.irh3 {
	display : inline-block;
	width : 100px;
	height : 30px;
	overflow : hidden;
	text-align : left;
	text-indent : -9999px;
	white-space : nowrap;
	background : transparent url(http://lorempixel.com/100/50/) no-repeat top left;
}

Exemple :

Mon texte alternatif

Explications :

• On commence par définir un type inline-block sur l’élément. Le display:block fonctionne aussi, mais j’ai plus souvent besoin du display:inline-block;.
• On lui donne la taille de l’image interne, qu’on dispose en background.
• Le text-indent va décaler le texte loin sur la gauche (ce dont on s’assure avec le text-align:left;), le white-space:nowrap; s’assurant qu’il soit sans retour à la ligne.
• Le overflow:hidden évite que le texte soit éventuellement visible sur la gauche, s’il est trop long.

Je suis conscient que cette technique est assez lourde, mais elle a l’avantage de ne jamais m’avoir lâché : )

La technique la plus connue en CSS2, malgré sa limite à deux bordures, était :

.monbloc {
border:2px solid blue;
outline:2px solid red;
}

Heureusement, CSS3, avec son box-shadow, apporte une solution toute simple pour augmenter le nombre de bordures : Appliquer des ombres multiples, avec une diffusion de 0px et une épaisseur choisie.

.monbloc {
-webkit-box-shadow:  0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green;
-moz-box-shadow:  0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green;
box-shadow:  0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green;
}

La taille de chaque ombre est égale à celle de la bordure voulue, plus celle de l’ombre précédente.

Attention, deux inconvénients à cette technique :

• elle n’est compatible qu’à partir d’IE9 (Donc à destination de 70% du public, selon CAN I USE)
• Les ombres ne sont pas gérées dans le box-sizing de l’élément

Vous connaissez une meilleure technique (sans image?)

J’ai donc suivi un tutoriel d’installation, pour arriver à un fichier Microsoft Internet Explorer 7.app dans mon dossier d’Applications.

Le résultat est à la hauteur de mes attentes. L’interface est buguée, le JS semble difficilement géré, les polices laissées au soin du navigateur ( font-family:serif; et autres sans-serif ) sont hasardeuses, et il semble ignorer les conditions HTML & body multiples.

Malgré ça, il se lance en une poignée de secondes, est donc bien plus rapide qu’une machine virtuelle, et vous permettra de lancer ponctuellement Internet Explorer sur votre Mac en début de projet, plutôt que de devoir faire des « pauses machine virtuelle » pour vérifier les bugs éventuels de vos intégrations.

Une arme à double tranchant, mais tout de même une astuce à partager ; )

* Grosse référence

• Contenu créé : ( content, etc )
• Propriété display
• Positionnement ( z-index, position, top )
• Modèle de boîte ( height, margin, border … )
• Transformations et transitions
• Typographie
• Décoration

L’ordre recommandé par l’auteur peut être adapté à ses goûts / à la méthode de son entreprise, mais l’essentiel reste là : regrouper les propriétés par type, afin de mieux relire son code, trouver directement un bug, et tous les avantages d’une convention de codage.

Ainsi, dans la lignée des petits scripts qui font mouche, comme img2datauri, voici CSSLisible, un simple script en PHP pour réorganiser vos CSS, disponible sur GitHub.

Le principe est simple, on télécharge, on fork ou on clone le code dans son dossier www ou htdocs de MAMP/LAMP/WAMP, et on y accède depuis son navigateur.

L’interface sobre, et sans CSS, ô ironie, vous permet de coller un bout de code à nettoyer, pour obtenir en retour un code réorganisé, et trié dans l’ordre de priorité des priorités. Il s’agit d’une base de travail à faire évoluer, l’algorithme de tri étant très primaire.

Testez directement CSSLisible

Je suis évidemment ouvert à tous retours

Vous ne connaissez pas encore le principe du data:uri ? Direction Wikipedia

Oui, ça existe déjà, mais c’est pour l’exercice de style.

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

Je vous propose ma version (dans body, mais vous avez le choix), permettant de cibler plus finement les versions :

<!--[if lt IE 7 ]><body class="maclass is_ie6 lt_ie7 lt_ie8 lt_ie9 lt_ie10"><![endif]--> 
<!--[if IE 7 ]><body class="maclass is_ie7 lt_ie8 lt_ie9 lt_ie10"><![endif]--> 
<!--[if IE 8 ]><body class="maclass is_ie8 lt_ie9 lt_ie10"><![endif]--> 
<!--[if IE 9 ]><body class="maclass is_ie9 lt_ie10"><![endif]--> 
<!--[if gt IE 9]><body class="maclass is_ie10"><![endif]--> 
<!--[if !IE]><!--> <body class="maclass"><!--<![endif]-->

Du coup, les débugs IE sont bien plus propres :

.monbloc{display:inline-block}
.lt_ie8 .monbloc{display:inline;zoom:1}