Bonjour,
yvanobi a écrit :
j'ai une question simple peut etre un peu stupide mais qui peut etre interessante.
C'est une question très importante vu la tournure que prennent les projets web : RWD, adaptive mais compatibilité IE8.
Intégrer une page demande des compétences mais intégrer en ayant en tête que c'est dans le cadre d'un projet bien plus vaste qu'une simple page de contenu/d'accueil c'est une autre paire de manches !
Si tu dois écraser
toutes les instructions d'une feuille CSS, le plus simple est d'enlever cette CSS, soit côté serveur tu la vires de ton projet soit même après chargement en JavaScript et les navigateurs mettent à jour immédiatement. Si JS est désactivé par contre... Et puis tu charges 2 fois trop de code, pas très performant.
Si tu fais du
desktop first et ajoute une Media Query pour les mobiles à la suite, alors une propriété identique dans un bloc de règle dont le sélecteur est identique à la partie
desktop (l'instruction avant la MQ) va écraser cette dernière : même spécificité mais écrit après = écrasement.
Dans le cas où cette MQ "mobile" est la dernière partie de tes CSS et dans ce cas seulement, utiliser !important a peu de conséquences, c'est même plutôt pratique. Mais si tu intercales une MQ pour "tablettes" (résolution intermédiaire), tu te retrouves avec le même problème à résoudre et utiliser !important va probablement poser problème au moins une fois dans la MQ mobile qui suit... Et pire si un jour tu ajoutes quoi que ce soit après la MQ mobile...
Perso j'utilise le
framework KNACSS (scoop
) que Raphaël a créé suite à des lectures et expériences comme OOCSS ou SMACSS (tu peux regarder le
support de présentation de sa conf' la plus récente, à partir de la page 72 puis 84 enfin jusqu'à la fin et il y a les liens vers OOCSS et SMACSS entre autres)
Et j'utilise !important quand c'est lié à une classe "utilitaire" que je n'ajoute que pour appliquer une instruction. Exemple .ma0 (margin all à 0 c'est-à-dire dans les 4 directions) va être défini comme :
.ma0 {
margin: 0 !important;
}
Ça fonctionne parce que si j'avais voulu autre chose que 4 fois 0 comme marge, je n'aurais pas ajouté cette classe dans le code HTML. Si je veux autre chose, je met une autre classe.
Si j'ajoute cette classe, c'est que oui je veux qu'elle ait de l'effet, à coup sûr.
Autre manière de faire pour un projet "massif" (des dizaines de pages, 2 sites en 1, 4 points de rupture différents, etc) : des classes utilitaires qui ne s'appliquent qu'à partir d'une certaine résolution parce qu'elles ne sont définies que dans la MQ correspondant à cette résolution. Et pour être sûr des résolutions où elles ont de l'effet, elles sont préfixées avec .large-*, .medium-*, .small-* etc (la résolution par défaut c'est 1024px de largeur).
@MQ(1280) {
.large-faisça {
applique: ceci;
}
}
@MQ(768) {
.medium-faisça {
applique: ceci;
}
}
@MQ(480) {
.small-faisça {
applique: ceci;
}
}
Maintenant si j'ajoute .medium-faisça, ça n'a aucune action en 1024 ou en large parce que ce n'est pas défini (par convention dans ce projet). En 768 ça a un certain effet. Si je veux autre chose en 480, je dois ajouter une classe .small-faisunautretruc pour écraser la classe définie "à partir de 768 (et en dessous)" mais ça reste pratique (parce que si on nous demande d'intégrer des dizaines de pages, c'est qu'elles ont toutes un comportement différent ... Un peu, beaucoup, ... Autant gérer ça dans le template HTML plutôt que de décupler la taille des CSS)
Modifié par Felipe (19 Oct 2013 - 10:47)
