28172 sujets

CSS et mise en forme, CSS3

Sélecteur universel * {margin:0; padding:0} qu'en dites-vous ?

Pages :
(reprise du message précédent)

Xavier a écrit :
(...) tu peux utiliser par exemple :
* {margin:0;padding:0}
option {margin-right:5px}

Haha j'avais tout essayé sauf ça Smiley smile Ca marche, merci!

a écrit :
(...) la hauteur de la combobox d'un select (je ne parle pas de la liste déroulée après action sur la flèche) ne suit pas le choix utilisateur de la taille du texte.

Oui, ça oblige à leur donner une hauteur dans ce cas. Or même une hauteur en "em" ne résoudra pas le problème...
Idem, un bon vieux O et en plus un petit Font-family ne fais pas de mal.

Les ul, li, dd étant les plus dure à gérer à mon goût.
Sur ce sujet, je suis partagé. Dans un sens c'est pratique de ce dire qu'on aura pas à s'inquiéter de ces valeurs par la suite, mais c'est vrai que c'est un peu radical et que toutes les valeurs par défauts de tous les éléments ne sont pas forcément gênante selon le résultat final recherché.

Je rebondis sur toi Raphaël :

a écrit :
En même temps, il s'agit plus de préférences navigateurs que de préférences utilisateur, non ?


Justement, quel est la raison d'être de des préférences navigateurs qui conduisent à ce genre de reset systématique pour certains ?
Stephan a écrit :
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.


Bonjour,
Je sais qu'il est bien tard pour répondre à ce post mais, comme j'ai découvert le site alacreations il y a 15 jours.... Smiley confused

Tout ça pour dire que l'étoile * est rudement pratique pour les débutants.
Habituée aux tableaux, le passage aux CSS ne se fait pas sans douleur et ça simplifie bien la vie.
L'aisance venant, je pense qu'on peut arriver à s'en passer!
Attention avec ces annulations globales (ici on annule les marges).

Le principe des CSS est d'avoir une cascade avec les défauts du navigateurs < les défauts de l'utilisateur < les défauts du site < les spécificités de la page < les surcharges utilisateurs < les impératifs navigateur.
En faisant un * {.... } vous faites sauter tout ce qui est défauts du navigateur ou de l'utilisateur.

C'est très pratique pour contrôler le rendu générique précisément de façons à ce qu'il soit identique partout. La question c'est : etes- vous sûr que ce soit un but souhaitable ?
Le Web c'est pour l'instant encore un peu tout l'inverse : permettre à chacun de rendre un document avec ses différences et spécificités. Personnellement je pense qu'il est plus sage d'essayer de changer quelque chose quand c'est nécessaire, et laisser la page relativement fluide en fonction des valeurs par défaut.

Maintenant, indépendament, annuler tout avec un * { ... } n'est pas forcément beaucoup plus pratique : Pour exemple on casse les marges des listes, mais à ce moment là vous *devez* aussi forcer la valeur de la puce (image/style) sinon vous risquez qu'un utilisateur définisse une marge plus grande parce qu'il met une puce spécifique. En diminuant la marge sans changer la puce ça coince. Le faites vous ? probablement pas.
Si vous commencez à annuler certaines valeurs par défaut, il faudrait cascader sur tout ce qui est lié, et finir par avoir une feuille très exhaustive sur toutes les propriétés. Je ne suis pas sûr que ce soit souhaitable.
Perso je défini mes margin & padding au cas par cas, au besoin (et je n'ai jamais eu besoin jusqu'à présent de tout mettre à zéro d'un coup !). Il me semble que ça permet une approche plus précise que ce fantasme de RAZ, qui, de toutes façons n'empêchera aucunement les différences d'interprétations de IE par rapport à un navigateur conforme aux standards. Si on définit bien ses styles, en cascade, proprement, on peut très bien se passer de ce sélecteur universel Smiley cligne

Bref, mettre à zéro d'un coup toutes les marges, padding & border, je ne trouve pas ça d'une utilité folle... Ce n'est certainement pas un réflexe à avoir, mais à utiliser lorsqu'on a ce besoin spécifique.
Bonjour, suis je en retard ?
* {padding: 0;} m'ayant posé des problèmes avec un JS nommé OverLib
(le padding est utilisé pour faire la bordure de l'info bulle).
je me suis résolu à écrire : 
* {margin: 0;}
p, h1, h2, h3, h4, h5, ... {padding: 0}
Je pense que si j'avais su, j'aurais fait autrement.
Bonsoir,

Sans être fondamentalement contre cette méthode, je trouve très étrange de décider d'annuler des valeurs par défaut pour tous les éléments, même ceux que l'on est susceptible de ne pas utiliser.

En revanche je reset vonlontier les margin-padding des listes afin de mieux en contrôler les valeurs localement.

Jean-pierre
alors la franchement, ce bout de code m'a changé la vie.

* {margin: 0; padding: 0; border: 0;
font-family: verdana,helvetica,arial,sans-serif;
font-size: 1em; font-weight: normal; font-style: normal;
text-decoration: none;}


je suis un débutant en css et je ne compte pas les heures passées à chercher pourquoi le rendu de mon site différait d'un navigateur à l'autre.

Quand on est pas aguéri à toutes les propriétés css (et il y en a), il y a de quoi s'arracher les cheveux.

pour moi, le constat est simple : si j'avais commencer par cette propriété "NETTOYEUSE de NAVIGATEUR", j'en aurais économiser des heures !
Je veux bien accepter que l'on fasse un reset d'un certains nombre de propriétés mais je suis plus partisant du cas à cas.

Je prends toujours soins de préciser mes marges (et padding) pour chaque balise qui m'importe. Nottement pour les balises <p>, <body>, <html> et consorts. Mais de là à faire un 
* {margin: 0; padding: 0}

Je trouve cela un peut excessif. Pourquoi redéfinir les marges de la balise blockquote par exemple ? Pourquoi redéfinir les marges de certaines balises qui n'en n'ont par défaut pas. De plus pour certaines balises, on est obligé, pour des questions de mises en page, de remettre des marges... Pourquoi les repréciser ? Qu'elle en est l'utilité, mis à part d'allourdir le code ?

Le dernier message avec un "reset" important est à mes yeux beaucoup trop excessif. 
* {margin: 0; padding: 0; border: 0;

font-family: verdana,helvetica,arial,sans-serif;

font-size: 1em; font-weight: normal; font-style: normal;

text-decoration: none;}

En effet, les balises <strong> et <em> perdent leurs caractères. Impossible, sauf s'ils sont redéfinit d'en faire la différence. Ce qui oblige à allonger le code CSS, et redéfinir 2 fois les propriétés pour obtenir la propriétés ... par défaut.. :s Qu'elle en est l'utilité ?

Je suis partisant du non mais partisant du cas à cas... Smiley smile
Bonjour,

Il y a un gros malentendu à ce sujet.

Les styles par défaut de l'agent utilisateur sont indispensables : ils garantissent un rendu correct en cas de désactivation de la CSS auteur.

Mais CSS2.0 et CSS2.1 ne proposent qu'une feuille de style indicative, et non normative. Chaque navigateur est donc en droit d'appliquer ses propres styles par défaut.

Le bon sens a cependant fini par prévaloir, et on assiste en ce moment à une convergence croissante des styles par défaut dans les nouvelles et futures versions de FF, Safari, Opera, Konqueror. IE 7 restant a priori dans l'inconnue sur ce point.

Il faudra tout de même attendre les navigateurs conformes à XHTML2.0 pour que s'impose une feuille de style normalisée pour tous les agents utilisateurs conformes.

D'ici là :
- neutraliser systématiquement tous les styles par défaut de chaque navigateur est une possibilité. Mais cela demande un peu plus, cependant, que les quelques lignes ci-dessus. Voir les essais d'Eric Meyer et de Yan Hixon. Le gain final est maigre, surtout, dans la plupart ds cas
- gérer élément par élément les styles à modifier est beaucoup plus économique. Cela nécessite de connaître les particularités de ces styles dans les différents navigateurs, ou simplement de laisser un peu plus de jeu dans vos feuilles de styles pour les tolérer sans avoir à les modifier systématiquement Smiley cligne

Les rares éléments ayant des styles par défaut vraiment gênants sont:
- body (padding par défaut ou margin par défaut)
- ul et ol (voir http://developer.mozilla.org/fr/docs/Indentation_homogène_des_listes )
- form (margin-top et margin-bottom)

Ce n'est tout de même pas la mer à boire Smiley cligne
Modifié par Laurent Denis (28 Dec 2005 - 13:42)
papillon41 a écrit :
* {padding: 0;} m'ayant posé des problèmes avec un JS nommé OverLib
(le padding est utilisé pour faire la bordure de l'info bulle).
je me suis résolu à écrire : 
* {margin: 0;}
p, h1, h2, h3, h4, h5, ... {padding: 0}

J'ai réussi à régler ce problème en ajoutant
<script type="text/javascript" src="includes/js/infobulle/overlib_cssw3c.js"></script>
et
return overlib(‘le texte à afficher’, CSSW3C); dans l'appel de la fonction

Tu peux télécharger le fichier à inclure ici ! Smiley smile
Pages :
Sujet clos
Aller à