28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'utilise un reset CSS – celui d'E. Meyer – mais, bien que pratique, celui-ci fini par me poser quelques problèmes.
Par exemple, l'initialisation veut que body ainsi que toute une batterie d'éléments aient une bordure inexistante (border: 0). Cependant, si je veux que mon body ait une bordure supérieure, la déclaration ne sera pas prise en compte. : il y a redondance, et le premier bloc de déclaration l'emporte.
Je joue alors avec le “poids” en déclarant : html body {…}. Mais je trouve que cela est du code pour rien. Car dans mon code, d'autres élément se retrouvent précédés de html pour que mes déclarations l'emportent sur le reset.

La deuxième solution serait de retirer body des éléments dans le reset, mais puisque plusieurs déclarations (en plus du border: 0) sont appliquées, body s'en retrouvera privé. Il me faudrait alors copier-coller toutes les déclarations moins celles qui traitent du border, et les appliquer à body dans un bloc séparé. Et répéter cela pour chaque élément posant problème. Beaucoup de code pour rien au final…

Qu'en pensez-vous ? Comment vous y prenez-vous avec votre reset adoré ?
Modifié par Foxz (09 Nov 2012 - 16:43)
Est-ce que ton reset fait l'objet d'un fichier bien séparé du reste ?

Exemple :

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/tonCSS.css" />

Modifié par MagicCarpet (09 Nov 2012 - 17:02)
Salut salut,

Foxz a écrit :
J'utilise un reset CSS – celui d'E. Meyer – mais, bien que pratique, celui-ci fini par me poser quelques problèmes.
Par exemple, l'initialisation veut que body ainsi que toute une batterie d'éléments aient une bordure inexistante (border: 0). Cependant, si je veux que mon body ait une bordure supérieure, la déclaration ne sera pas prise en compte. : il y a redondance, et le premier bloc de déclaration l'emporte
.En fait non. Si ton reset est placé en premier dans ta feuille de style, les styles qui viendront par la suite écraserons les précédents. C'est le principe de la cascade. Ainsi même si tes sélecteurs ont tout les deux le même poids (par exemple body {…}) c'est ceux qui seront interprétés en derniers qui auront la priorité.

Plus globalement le reset CSS engendre quelques problèmes expliqué dans ce poste. Personnelement j'utilise normalize.

En espérant avoir compris de quoi tu parlais Smiley smile

Edit : @MagicCarpet si j'ai bien compris le soucis cette approche n'apportera pas une solution, juste une requête supplémentaire.
Modifié par Gili (09 Nov 2012 - 17:10)
Cela répond bien à ma question. C'est bien joué, mon reset est effet déclaré après ma feuille de style principale. Après avoir modifié cela, tout était OK.

J'aime le reset de Meyer. Il est clair qu'il remet quasiment tout à zéro, mais dans la mesure où les éléments ayant le plus de chance d'être utilisés seront de toute manière stylisés, le problème disparait (presque). Ce reset a aussi l'avantage de ne pas bouger aux champs formulaires. Il est donc envisageable de ne pas styliser ces derniers et de les laisser “nature”, càd comme le système d'exploitation de l'utilisateur les stylise par défaut.

Mais cela, c'est une question de préférence. Et une autre discussion. Smiley smile

Merci de votre aide.