KNACSS 3 et les espaces indésirables

Les Grilles de mise en forme (grids et autogrids) de KNACSS sont basées sur du positionnement en inline-block qui possède ses avantages et ses inconvénients. L’une des plaies de ce positionnement demeure l’espace indésirable qui est généré par le navigateur et qui nécessite moults artifices pour s’en sortir partout.

La prochaine version de KNACSS (prévue pour le 20 mai) compte bien simplifier les choses, sans pour autant oublier les anciens navigateurs.

Le modèle actuel des grilles de KNACSS est inspiré de celui de PureCSS, notamment en raison de sa simplicité et de sa fluidité.

Il repose sur combinaison de plusieurs stratagèmes :

Sur le parent :

  • un letter-spacing négatif de -0.31em
  • une suppression de toutes ligatures et fioritures typographiques via text-rendering: optimizespeed;
  • l’application d’une fonte considérée « universelle » via font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
  • bonus : un hack spécifique à Opera pour appliquer une valeur de word-spacing: -0.43em;

Sur chacun des enfants :

  • display: inline-block (forcément)
  • une remise à zéro des valeurs du parent : letter-spacing: normal; + word-spacing: normal; + text-rendering: auto;
  • le rétablissement de la fonte souhaitée, par exemple font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;

Grâce à ce cumul d’astuces, nous obtenons le résultat souhaité de manière quasi universelle sur l’ensemble des navigateurs.

… Ou presque, puisque des bugs persistent encore.

rem à la rescousse

Pourtant, il existe une solution extrêmement simple pour supprimer le whitespace d’un display: inline-block. Il s’agit d’utiliser l’unité CSS3 rem : il suffit d’affecter une font-size: 0 au parent, puis de rétablir la font-size en rem à chaque boîte.

Cela suffirait et éviterait tous les autres cumuls d’artifices de font-family + letter-spacing + word-spacing + text-rendering et autres bidouilles.

Il reste un souci.

Ce souci est – sans surprise – la compatibilité (IE9 minimum) de l’unité rem.

Et c’est là que la nouvelle version de KNACSS va tenter de simplifier les choses tout en assurant un enrichissement progressif pour les dinosaures.

Stratégie pour KNACSS 3

Le principe sera le suivant : pour commencer, les styles des anciennes versions d’Internet Explorer (jusqu’à IE8) figureront au sein d’une feuille de styles dédiée que l’on pourra choisir d’importer ou non via une variable de configuration.
Ainsi, pas de parasitage de la feuille de style principale si notre projet ne nécessite pas de support des vieux IE.

KNACSS 3 tirera profit des classes conditionnelles dans le HTML (ci-dessous) pour faire son tri dans les navigateurs.

<!doctype html>
<!--[if lte IE 7]> <html class="ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="fr"> <!--<![endif]-->

Grâce aux classes conditionnelles, il est très simple de cibler uniquement les navigateurs modernes et de leur appliquer une technique imparable pour supprimer les whitespaces.

Puis les trois cas possibles suivants seront traités distinctement :
– IE7
– IE8
– Les navigateurs modernes

IE7

IE7 ne reconnaît pas display: inline-block, mais il est possible de l’émuler à l’aide d’une combinaison impliquant un display: inline et un zoom: 1 synonyme de superpouvoir (HasLayout) pour les vieux IE :

/* IE7 grid hack */
.grid > * > * {
    *display: inline;
    *zoom: 1;
}

IE8

IE8 reconnaît display: inline-block mais pas l’unité rem. Ce sera le seul navigateur qui nécessitera tout l’armada de bidouilles actuellement par défaut sur KNACSS 2 :

/* IE8 grid hack */
.ie8 .grid {
  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
}
.ie8 .grid > * {
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}
.ie8 .grid > * > * {
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
  font-family: Helvetica, Arial, sans-serif;
}

Les navigateurs modernes

Tous les navigateurs modernes reconnaissent rem depuis belle lurette.

/* whitespace for modern browsers including IE9+ */
:root .grid {
    font-size: 0;
}
:root .grid > * > * {
    font-size: 14px; /* fallback for Opera Mini */
    font-size: 1.4rem;
}

Les anciens navigateurs tels que IE6-IE8 ne sont pas concernés par ces styles du fait de leur non-support du sélecteur :root. C’est parfait ainsi !

… du coup, les bidouilles font-family + letter-spacing + word-spacing + text-rendering ne seront réservées qu’à IE8 !

Et pour conclure, sachez qu’il est prévu qu’au sein de la prochaine version majeure (KNACSS 4) prévue pour 2015, les grilles soient entièrement revues pour se baser sur Flexbox.