28172 sujets

CSS et mise en forme, CSS3

Pages :
Administrateur
Blog ElMoustiko
Leftjustified
Blog Alsa
Markwiens

Suite à ces lectures (ci-dessous), je m'interroge sur le bien fondé de la technique de la suppression systématique de toutes les marges (internes, externes) de tous les éléments du document via le sélecteur universel (*)
* {margin:0; padding:0}


J'avoue que je suis mitigé (mais je suis prêt à me laisser convaincre), même si le principe semble pratique... notamment par le fait de devoir ensuite rétablir les marges de chaque élément (notamment les paragraphes).

Quel est votre avis sur l'emploi de cette méthode. Vous semble-t-elle entièrement justifiée quel que soit le cas ?
Merci de discuter de cette méthode du Reset (ou "global white space reset")

PS : d'ailleurs, on peut même aller plus loin en ajoutant une bordure de 0 par exemple :
* {margin:0; padding:0; border:0}
Ah je n'avais pas pensé à la bordure. Y-t-il beaucoup d'éléments pour lesquels les bordures ont des aspects variables en fonction des navigateurs ?

Concrètement je suis toujours embêté par les marges et les padding, mais je ne me souviens pas de problème pénible avec des bordures.

Par ailleurs, je n'ai pas encore détecté de cas vicieux avec le sélecteur *.
Administrateur
Xavier a écrit :

Concrètement je suis toujours embêté par les marges et les padding, mais je ne me souviens pas de problème pénible avec des bordures.

Bah, ça évite d'avoir à faire un
a img {border: 0;} 
Smiley smile
Mais est-ce vraiment utile ? Je ne sais pas : j'ai proposé cela en espérant que d'autres, moins fatigués que moi, trouvent des applications plus pertinentes Smiley smile
Simplement par prudence, je défini déjà des padding: 0; et margin: 0; pour tous les éléments de type bloc incluant le <div>, sauf si une autre valeur est nécessaire. Cependant, je ne vois pas l'intérêt de tout définir à 0 et de redéfinir ensuite si ce n'est de sauver quelques bits de code.
Une impression s'installe de plus en plus en moi... J'ai le sentiment que toutes les normes (ou standards) brident de plus en plus la façon de faire un site. Par exemple, un de mes grands regrets lorsque je suis passé au xHTML, c'est de ne plus pouvoir faire des liens externes, des _blank. Y a-t-il vraiment des raisons censées à cela ? Oui, peut être que le visiteur a le droit de décider de ce que son navigateur va faire, mais combien de personnent s'en soucient vraiment ? Au moins 80% (d'après moi) des internautes cliquent sur un lien sans même regarder ce qui s'affiche dans la barre d'état ! Alors que ça s'ouvre dans une nouvelle fenêtre ou non, franchement...
pickupjojo a écrit :

Par exemple, un de mes grands regrets lorsque je suis passé au xHTML, c'est de ne plus pouvoir faire des liens externes, des _blank.


L'attribut target est permit autant en XHTML qu'en HTML. C'est en passant du Transitionnal au Strict qu'il devient interdit.

J'ai fait la recherche suivante pour toi :
Rechercher target

Et puis quel rapport avec le présent sujet ?
Modifié le 30 Nov 2004 - 02:54
Merci Stephan, j'allais dire pareil, tu m'évites d'écrire, en plus je me serais étendu sur le sujet Smiley cligne !

Pour le sélecteur universel, Raphaël sait que j'en suis dingue, j'étais tout fou quand j'ai lu l'article de left justified, tellement simple que je n'y avais pas pensé Smiley cligne !

En fait en général les marges de paragraphe, on les changes à notre guise, donc il faudrat souvent les redéfinir de toute façon, donc autant les zapper dès le début.

C'est vachement bien dès qu'on utilise des listes, <ul>, <ol>, <dl> parceque là padding et margin s'en mèle allègrement (voir : http://blog-and-blues.org/weblog/2004/09/19/302-gerer-espace-a-gauche-liste-selon-les-navigateurs )

Et au delà de ça, on est pas obligé de spécifier des marges nulles pour TOUT le document, on peut très bien annuler margin et padding de tous les élément contenu dans un autre :

élément/id/class * { margin: 0 ; padding: 0 ; }


Pour ce qui est du border... euh franchement, je vois pas trop pourquoi Smiley ravi Il n'y a en gros que img qui à des bordures par défaut (enfin parmi les éléments les plus classiqument utilisés).

Par contre, le faire pour la couleur, pourquoi pas, il peut être pratique de spécifier la couleur de texte pour tout le document, mais là je crois que le faire dans le body suffit.
Bonjour à tous Smiley smile

Je suis de l'avis d'ElMoustiko ! Je trouve ce sélecteur universel vraiment très pratique pour remettre tout à plat une bonne fois pour toute. Ne serait ce que pour faciliter le travail quand on passe de IE à FF/Opera (et encore, Opera applique des marges là où FF n'en met pas).

Avec cette solution, on passe pas 3H à se demander d'où vient le décalage qui existe entre chaque navigateur. Il m'est arrivé de perdre pas mal de temps pour savoir pourquoi mes titres étaient tant espacés des paragraphes sur tel navigateur et pas sur un autre. En initialisant les marges et padding à 0 au début de la CSS, on gomme en quelque sorte ces différences.
Je trouve qu'il en existe déjà tellement (des différences) que dans la mesure où on peut en supprimer quelques unes, pourquoi ne pas le faire ?

Et puis, je ne sais pas vous, mais je ne teste pas toutes mes pages sur Opera, IE et FF ... j'en teste la plupart mais il arrive que je ne vérifie pas l'affichage de toutes mes balises. Donc, le sélecteur universel est mon ami car il me fait gagner du temps quand je teste sur les plateformes Smiley cligne

PS : Maintenant, je vais me présenter dans la partie "Présentation" avant que quelqu'un me tire les oreilles Smiley langue
J'approuve totalement des dires d'ElMoustiko et d'Azon, ça permet de partir... à 0. Je l'utilise tout le temps. Smiley smile
Ahh oui et autre chose concernant les marges par défaut des <p>, il m'arrive souvent d'utiliser padding plutot que margin pour des raisons de jonction de background, les marges causant une rupture. Donc, je suis bien content de les avoir annulées Smiley cligne

Il faut aussi voir au cas par cas, en général ce genre de chose est assez pratique pour des design assez précis réglés au pixel près, la rigueur de définition des marges est donc de mise, et les marges par défaut (valeurs = ???) n'étant pas les même sur les différents navigateurs, de plus sur certains c'est padding, sur d'autre c'est margin, le fait de tout mettre à plat permet d'exactement savoir ce que l'on fait, et surtout de faire ce que l'on veut.

Par ailleurs, pour certains mises en page plus souple, les marges par défaut sont souvent assez adaptées et nul besoin de les changer.

En tout cas, personnelement, j'en use et j'en abuse de cette technique Smiley cligne !
Personnellement je suis contre. Oh, il m'arrive d'utiliser des choses du genre, mais globalement je suis contre.
Quand j'ai besoin de contrôler précisément la marge ou le padding de tel ou tel élément alors je le règle, mais quand ce n'est pas le cas, le but est *justement* de laisser les préférences utilisateur.
Ce genre de règle est intéressante quand le design est cadré entièrement au pixel, quand le but c'est de tout contrôler. Et si dans le Web le but c'était au contraire d'en contrôler le moins possible pour nos besoins ? C'est plus la philosophie que j'ai. Mes titres ont généralement les tailles et marges par défaut, ça ne casse pas grand chose dans le design mais ça respecte au mieux les défauts et préférences éventuelles.
Puis il faut bien voir qu'en général les défauts ne sont pas si mal choisis que ça.
Administrateur
Ah enfin un partisan du "non", je commençais à désespérer de l'intérêt d'un tel sujet Smiley smile

a écrit :
le but est *justement* de laisser les préférences utilisateur.

En même temps, il s'agit plus de préférences navigateurs que de préférences utilisateur, non ?
Les feuilles de style utilisateurs prendront de toute façon le dessus sur les styles webmasteur, donc l'argument n'est pas tellement valable Smiley confus
Il est très à la mode de débattre du oui et du non. Concernant notre sujet, il semble que le oui au oui et le non au non soit quasi unanime.

Je n'ai pas relevé d'argument technique mettant en scène un cas ou un autre qui invaliderait la possibilité d'utiliser cette règle universelle.
Malgré une tentative, pas d'argument déontologique non plus puisque, comme Raphaël et ElMoustiko l'ont noté, cette pratique n'interfère en rien avec les préférences du client.
Je vais dire une connerie, mais le fais d'utiliser cette méthode ne serait pas une bonne solution pour gérer les différences de comportements entre IE et le reste du monde ?

Je veux dire que si il est possible de définir une fois pour toute des valeurs de marge et de padding à zéro, il doit être possible de le faire aussi avec des valeurs négative, non ?

Donc pourquoi pas utiliser une partie du fichier css en switch en fonction du navigateur de l'utilisateur, puis le reste de la feuille de style pourrait s'appliquer de la même manière pour tous les navigateurs, non ?
Administrateur
ernstein a écrit :
Je veux dire que si il est possible de définir une fois pour toute des valeurs de marge et de padding à zéro, il doit être possible de le faire aussi avec des valeurs négative, non ?

Pourquoi des marges négatives ? Dans quel intérêt ?
il m'a semblé à la lecture des différents doc que la gestion des boites d'IE était différentes des autres softs, n'est t'il pas possible de prendre en compte cette différence une fois pour toute avec le selecteur universel ?

J'ai pas encore trouvé le temps de bosser CSS, j'me contente pour l'instant de développer un système de vente en ligne en XHTML strict. Donc je divague peut être.
Administrateur
ernstein a écrit :
il m'a semblé à la lecture des différents doc que la gestion des boites d'IE était différentes des autres softs, n'est t'il pas possible de prendre en compte cette différence une fois pour toute avec le selecteur universel ?

Non, le sélecteur universel, avec cette méthode du "reset" ne fera qu'annuler les marges (externes et internes) de tous les éléments pour avoir un rendu de base équivalent par défaut.

Par contre, il n'interfère en rien les calculs des modèles de boîte : IE va toujours considérer que la largeur (width) d'un élément sera égale à (width + padding + border)
Pages :