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