1476 sujets

Web Mobile et responsive web design

Bonjour,
Lorsqu'on met les Média Queries direct dans le Css, par exemple:
.drapeau{position: fixed; top: 1%; right: 2%;}
		@media screen and (max-width: 1440px)
			{.drapeau{position: fixed; top: 1%; right: 10%;}}


Mais si je veux faire ça pour tailles d'écran différente et s'il y a plusieurs éléments à Médiaquéryser, le code CSS est vite encombré et devient illisible.
Il y aurait intérêt à le placer dans un autre fichier CSS.

Mais est ce que cela va pas encore ralentir le chargement des pages avec un fichier en plus?

Merci pour vos zexplications.
Je faisais ça à une époque, par effet de mode : je mettais chaque ensemble css dans des fichiers séparés, que je concaténais ensuite avec un préprocesseur en un seul fichier pour la prod (donc je n'avais pas de soucis pour les perf's). Mais à la longue, à maintenir c'est l'enfer : chercher le fichier concerné, l'ouvrir, puis la ligne... alors que si tout est dans un seul fichier un coup de CRL+F et hop, on trouve la ligne.

Dans tous les cas, et contrairement à des recommandations que l'on donnait aux alentours de 2009, je ne mettrais pas mes media queries à part, ce serait encore pire que ce que je viens de décrire. Je conseille de tout laisser dans un seul fichier. Si vraiment le fichier doit être découpé en plusieurs alors il faut le découper en module, et pas selon les media queries.
Olivier C a écrit :
Si vraiment le fichier doit être découpé en plusieurs alors il faut le découper en module, et pas selon les media queries.
Tu as entièrement raison, c'est parfait ton conseil. Merci !
Modérateur
Bonjour,

Si je peux me permettre Abeille, tu peux optimiser ton code en supprimant l'attribut Top inclut dans ta media-querie au vu du fait que la valeur est identique à celle que tu renseignes en dehors de la requête sur le media.

Bonne continuation.

Edit : voici ce que je mettrais personnellement :
.drapeau{position: fixed; top: 1%;}
		@media screen and (max-width: 1440px)
			{.drapeau{right: 10%;}}
		@media screen and (min-width: 1441px)
			{.drapeau{right: 2%;}}
J'espère que ceci t'inspira Smiley smile
Modifié par Greg_Lumiere (02 May 2016 - 16:56)
Greg_Lumiere a écrit :
Bonjour,

Si je peux me permettre Abeille, tu peux optimiser ton code en supprimant l'attribut Top inclut dans ta media-querie au vu du fait que la valeur est identique à celle que tu renseignes en dehors de la requête sur le media.

Bonne continuation.
Adio Greg-Lumière. Ok merci bien.
Je ne comprends pas tout à fait comment c'est possible!
Les médias queries ne font que modifier les valeurs déterminées avant et ne changent pas celles d'origine.
Je sais pas si je suis très clair:
Par exemple:
.image{
position: fixed; 
top: 15%; 
font-size: 120%}

Et ensuite:
@media screen and (max-width: 800px){
.image{
font-size: 60%}}
Dans le media query, j'ai pas besoin de rajouter *top: 15%* parce que ça a déjà été déclaré avant?
MErci pour tes conseils.
Modifié par abeille (02 May 2016 - 17:21)
Modérateur
abeille a écrit :
Adio Greg-Lumière. Ok merci bien.
De rien.
abeille a écrit :

Je ne comprends pas tout à fait comment c'est possible!
Si si, il faut me croire. Regarde le pendule...
abeille a écrit :

Les médias queries ne font que modifier les valeurs déterminées avant et ne changent pas celles d'origine.
Je sais pas si je suis très clair
Pas très clair en effet.
Je vais reformuler ce que tu crois savoir, que tu devrais savoir et que je sais que tu ne sais pas.
Les medias-queries permettent d'appliquer des propriétés uniquement lorsque les conditions exprimées dans la reqûete sont remplies. Lorsque la condition est remplie chaque propriété définie remplace toute précédente valeur (explicitement définie ou non). Les effets liés à la cascade font que c'est la dernière instruction qui fait foi sur les précédentes en cas de déclaration de propriété explicitement définie en amont.


Je reprends dans ton exemple uniquement la propriété liée à la taille de la police :
.image {
font-size: 120%;} /* Ici tu dis : "quelque-soit la taille du media, la font mesure 120% de la taille initiale" */
}

@media screen and (max-width: 800px){
.image{
font-size: 60%; /* Ici tu dis : Lorsque la taille de l'écran est inférieure ou égale à 800px, la font mesure 60% de sa taille initiale" */
}}
Nous savons que la taille initiale est 100%, c'est universel. Smiley lol
Afin d'éviter de réécrire inutilement des propriétés, il vaut mieux faire ceci :
@media screen and (max-width: 800px) {
 .image {
  font-size: 120%; /* POINT-VIRGULE !! (c'est plus correct) */
 }
}
@media screen and (min-width: 801px) {
 .image {
  font-size: 60%;
}

Ici, quelque-soit la taille d'affichage du visiteur, la propriété font-size appliquée à la classe .image n'est définie qu'UNE fois alors que dans ton exemple, elle est systématiquement déclarée DEUX fois.

D'autre part l'optimisation passe aussi par le fait de "faciliter au mieux la compréhension de son code au navigateur". Omettre le point-virgule finale oblige le navigateur à faire l'effort de comprendre et de palier à ton manque de rigueur dans ta syntaxe (il me semble que ce sujet a déjà été évoqué Smiley rolleyes )

Alors tu peux penser que toutes ces démarches risquent d'alourdir ton code. Tu n'aurais pas tout à fait tord dans la mesure où il est évident que 2 est plus grand que 1. Mais sache que ce "sur-poids" est véritablement négligeable et est largement compensé d'une part par un gain de performance relatif à la qualité du code mais surtout grâce à la maintenabilité du code qui permet ajouts/modifications a posteriori.

Je rejoins l'avis d'Olivier_C sur le découpage des fichiers. Ça joue beaucoup sur la maintenabilité d'un projet car revenir dans un code 1 voire 2 ans après je t'assure que quand c'est pas nickel* c'est pas évident de procéder à des modifications ; c'est du vécu !
* nickel : soit bien ordonné, bien construit, non redondant etc etc
Modifié par Greg_Lumiere (02 May 2016 - 17:49)
Greg_Lumiere a écrit :
@media screen and (max-width: 800px) {
 .image {
  font-size: 120%; /* POINT-VIRGULE !! (c'est plus correct) */
 }
}
@media screen and (min-width: 801px) {
 .image {
  font-size: 60%;
}

Ici, quelque-soit la taille d'affichage du visiteur, la propriété font-size appliquée à la classe .image n'est définie qu'UNE fois.
Adio Greg, j'ai beau me frotter les yeux, éteindre l'ordi et revenir une heure après, rien à faire, je vois bien que tu déclaré deux fois la variable .image. Alors que tu dis ne l'avoir déclarée qu'une seule fois!
non?
Modérateur
abeille a écrit :
J'ai beau me frotter les yeux, éteindre l'ordi
Humm... ça sent le dodo ça.

abeille a écrit :
revenir une heure après
Prends ton temps...

abeille a écrit :
je vois bien
Ha non, tu vois rien du tout là !

a écrit :
tu déclaré deux fois la variable .image.
.image est une classe !

abeille a écrit :
tu la déclare (ndlr: la propriété font-size) deux fois
Déclarée deux fois ? T'as vu ça où coco ?

abeille a écrit :
Alors que tu dis ne l'avoir déclarée qu'une seule fois!

NON ! J'ai dis que la propriété font-size ne serait déclarée qu'une fois du point de vue du navigateur mais ta feuille Css doit quand même prévoir tout cas de figure (avec une zone d'affichage (painting zone) >800px et une zone =<800px).

Je ne vois pas trop comment être plus clair ? A moins que quelqu'un ne se dévoue pour reformuler.

Je ne t'en veux pas mais il semble que tu passe plus de temps à créer et répondre aux topics qu'à y lire véritablement les réponses.
Dans ma grande bÔnté (oui le circonflex est mérité je trouve !) je met ça sur le dos de la fatigue. Disons même de l'épuisement mais fais gaffe quand même car la paraphrase à un côté saoulant tout de même.
Modifié par Greg_Lumiere (03 May 2016 - 11:53)