Fait vivre votre communication

Webmaster à temps partagé - 01 - 71 - 69 - 39
10 impasse des Acacias
Berzé-la-Ville
Bourgogne
71960
France

Quelles Media Queries adopter en CSS ?

Petite revue de sites tendances et “référents”

3200tigres.com


@media (max-width: 860px) {
/* code here */
}

@media (max-width: 600px) {
/* code here */
}

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


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

jean-sam

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...).

Me joindre par mail ou me joindre par téléphone

De 2007 à 2017