Quelles Media Queries adopter en CSS ?
Petite revue de sites tendances et “référents”
3200tigres.com
- Editeur : WWF
- Premier breakpoint: 860px avec passage de certains éléments blocs en dessous (“signer la pétition”, “faire un don”, “partager”…)
- Second breakpoint : 600px avec refonte du menu
- Pour info : 1 seule feuille de style, 1410 lignes de code CSS, présentation du code nickel
- Url : 3200tigres.wwf.fr
@media (max-width: 860px) {
/* code here */
}
@media (max-width: 600px) {
/* code here */
}
Dressresponsively.com
- Editeur : Sparkbox
- 6 (!) breakpoints via des links dans la balise “header”
- nota : certaines webfonts Google s’affichent de manière inélégante
- Url : dressresponsively.com
6 feuilles de style rattachées via un link dans le header, avec une condition de type media="only screen and (min-width: 450px)
+ 3 conditions supplémentaires pour cibler les écrans HD
Made by Hand
- Editeur : Made by Hand
- un mic-mac incroyable de feuilles de style
- détermination des breakpoints (if any) impossible
- la maintenance du code semble très complexe, vue de l’extérieur
- Url : made by hand
impossible afficher le code source de manière synthétique, il est "éclaté" en plusieurs fichiers css et javascript
Conclusion
Certains sites utilisent des techniques clairement identifiables et maintenables. C’est notre approche. D’autres semblent utiliser un code source tiré de ressources extérieures. Pourquoi pas ? mais nous doutons de la facilité à maintenir et faire évoluer le code, facilement et à moindre coût.
A noter
L’analyse du code source a mis en lumière une technique CSS que je ne connaissais pas :
"link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css"
Après recherches, il s’avère qu’il existe en plus des feuilles de style auteur, des feuilles de style navigateur et des feuilles de style utilisateur !
Jamais entendu parler de ça. Chuis content d’être venu :)
La feuille de style navigateur est la feuille de style que le navigateur applique, par défaut. On sait que les navigateurs expriment parfois quelques petites différences dans leur manière de traiter et d’afficher le code source. Voici au moins l’une des raisons : leurs feuilles de style diffèrent.
La feuille de style utilisateur permet à un “end-user” (vous, par exemple, qui regardez cette page web) de configurer la manière dont certains styles vont s’afficher.
Mais c’est très excitant tout ça !
Apparemment, pour Chrome et Firefox, le fichier existe déjà nativement, quand vous installez le navigateur sur votre ordi. Il se trouve dans un répertoire du disque dur. En revanche, pour Internet Explorer et Safari, il faudrait le créer soi-même (plus d’infos dans cet article).
Alors là, évidemment, tout s’effondre : il faudrait, pour des utilisateurs finaux qui n’y connaissent rien en CSS ni en code source, CREER ou MODIFIER une feuille de style ?
Ca va pas le faire, finalement. Dead End.
Notre conclusion c’est que c’est bon à savoir et que les feuilles de style utilisateur peuvent nous permettre, à nous développeurs / intégrateurs, de s’affranchir d’éléments indésirables (comme des publicités, ce qui est bien expliqué dans l’article ci-dessus). A la rigueur. Mais pour le reste des users, c’est juste impraticable.
Notion à ranger dans “culture générale”.
Article écrit par Jean Sam Denis
Bonjour, je suis Jean-Sam, webmaster / community manager à temps partagé, auprès de PME installées en Bourgogne, en Franche-Comté et Rhône-Alpes. J'essaie d'apporter de la cohérence et de l'ambition aux projets internet, afin qu'ils soient durables et profitables.
Ma particularité est de rester à proximité du client durant toute la durée de notre collaboration, en assurant la maintenance complète ou partielle du site (rédactionnel, photo, vidéo, newsletter, réseaux sociaux, référencement...).
