Bien que j’apprécie utiliser la librairie Modernizr, je considère que certaines utilisations ne sont pas nécessaires ou plutôt pas justifiées.

C’est une question de bon sens…
Je parle ici d’utilisations simples qui n’ont pas beaucoup d’incidences sur le code à utiliser.
Comme toujours, le plus simple est de parcourir quelques exemples pour mieux comprendre.

Il existe plusieurs cas de figure.

La fonctionnalité dont on peut se passer
Certaines propriétés CSS comme border-radius ou text-shadow ne sont pas supportées par tous les navigateurs.
Néanmoins, si un vieux navigateur ne gère pas le border-radius, on pourrait tout simplement s’en passer, non ?
Si le navigateur est moderne, tant mieux. Si le navigateur est trop vieux, tant pis!
Après tout, les gens qui utilisent un vieux Internet Explorer sont habitués à vivre une expérience médiocre sur internet.
Oui je sais qu’il existe des polyfills comme CSS3Pie mais ce n’est pas toujours une bonne idée ni une solution acceptable.
Pour ma part, j’ai rencontré pas mal de bugs et d’effets de bord suite à l’utilisation de CSS3Pie, le pire c’est d’essayer de trouver ce qui cloche dans l’environnement d’un vieux navigateur, sacré défi pour si peu.
K.I.S.S. Keep It Simple Stupid

La fonctionnalité qui peut faire mal
Vous avez probablement déjà utilisé la fonctionnalité rgba qui vous permet de définir une couleur et sa transparence (alpha). Si on considère cette fonctionnalité comme acquise, il y a un risque. Prenons un exemple:

.caption {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}

Dans cet exemple, on imagine un fond blanc sur lequel un élément avec une classe “caption” (légende) est affiché. Les règles appliquées à .caption définissent une couleur de fond noir et semi-transparente ainsi qu’une couleur de texte blanche. Rien de choquant sur un navigateur moderne.
Mais sur un navigateur primitif, le rgba n’étant pas supporté…
On se retrouve avec du texte blanc sur un fond blanc!

Les navigateurs interprètent le code CSS de la sorte: je ne comprend pas la valeur de la propriété CSS ? Je l’ignore et je passe à la ligne suivante!

Ce comportement étant le même pour tous les navigateurs (alléluia!), on peut simplement utiliser un peu de logique et définir la couleur de fond de manière sécurisée:

.caption {
    background-color: #000; /* Version primitive (sans rgba) */
    background-color: rgba(0, 0, 0, 0.5); /* Version moderne */
    color: #fff;
}

Et pour faire ça, on a même pas besoin de Modernizr ou de JavaScript, juste un peu de bon sens.
Si un navigateur ne supporte pas le rgba, il utilisera la même couleur sans transparence.

On peut aller beaucoup plus loin pour ce genre de chose (En anglais), mais j’aime cette solution simple qui ne concerne que peu de visiteurs.

La fonctionnalité nécessaire

Enfin, pour certaines fonctionnalités, on aura toujours besoin de Modernizr. Je pense bien sûr à la détection de fonctionnalités autres que les nouvelles propriétés CSS3. Mais cela peut aussi concerner les propriétés CSS, par exemple si on utilise un container comme un masque sur lequel on applique un border-radius, il est possible que l’emploi de ce border-radius soit lié à d’autres propriétés CSS, par exemple un overflow: hidden… Dans ce cas, il est peut-être bon de rassembler ces propriétés liées afin de mettre en évidence leur inter-dépendance…

Tags: