28173 sujets

CSS et mise en forme, CSS3

Bonjour,

dans mes développements actuels, j'ai défini, dans une css principale, des styles génériques qui annulent le comportement par défaut des balises (<p> margin:0; <li> list-style-type:none;...)
Je souhaiterai revenir temporairement aux valeurs par défaut.

Est-ce possible et comment ?

Merci. lulu.
Bonjour,

Juste une réflexion ... Pourquoi ne pas faire l'inverse ? Smiley ohwell

Au lieu de faire ce "fameux Reset CSS" (qui n'est pas (toujours) une solution), plutôt impacter les éléments aux cas par cas ... Smiley ravi

Romain
Salut,

en fait, j'en suis plutôt à : "Merde, il faudrait retrouver mes comportements initiaux alors que tout mon site est terminé". Difficile d'aller dans les détails mais les parties administrables par le client permettent d'insérer des balises HTML qui n'ont pas le comportement attendu par eux puisque j'en ai annulé une partie.
Il me faut donc leur mettre à disposition des styles qui récupèrent les propriétés originales des balises.
lulumOriss a écrit :
Difficile d'aller dans les détails mais les parties administrables par le client permettent d'insérer des balises HTML qui n'ont pas le comportement attendu par eux puisque j'en ai annulé une partie.

Alors pourquoi ne pas revoir ton script et rajouter automatiquement des classes sur les balises utilisées par l'éditeur ?

Ex. : L'utilisateur ajoute une balise <b>, tu détectes cette balise que tu remplaces par '<span class="gras">' + CSS :
span.gras {
font-weight:bold; }

Ou même rajouter une div <div id="mise_en_forme"> où les styles seront utilisables :

Ex. :

XHTML :

<div id="mise_en_forme">

     <!-- Le code de l'utilisateur avec par exemple un <b> -->

</div>

CSS :

div#mise_en_forme b {
font-weight:bold; }

Des idées en vitesse, avant d'aller manger Smiley langue
L'idée de créer un <div> particulier pour les champs administrable mais il faut quand même que je re-définisse les styles propres à ce <div> sur les propriétés originales.
Existe-t'il un endroit où je peux trouver les valeurs par défaut de chaque balise ?
lulumOriss a écrit :
Existe-t'il un endroit où je peux trouver les valeurs par défaut de chaque balise ?
Je ne pense pas car elles sont particulières à chaque navigateur il me semble ...
lulumOriss a écrit :
mais il faut quand même que je re-définisse les styles propres à ce <div> sur les propriétés originales.

Tu autorises toutes les balises HTML au client ? Est-ce bien nécessaire...

Les balises courantes de mise en forme ne suffiraient-elles pas ?
Modifié par BeliG (23 Apr 2008 - 13:38)
Administrateur
Bonjour,

s'apercevoir de ça sur la fin du projet: ouch!
Tu peux consulter ce "tuto": Le rendu par défaut des éléments HTML pour à peu près annuler tes modifs mais ça ne remplacera pas une feuille de style où tu modifies tout SAUF une certaine branche de ton code HTML ... (ce qui n'est d'ailleurs pas facile, faute de pouvoir exclure facilement un id)
Pas mal de propriétés ont pour valeur valeur par défaut: auto, static, etc tu peux déjà commencer par celles-là Smiley lol
Je n'ai pas la maîtrise technique totale du projet, d'où ce genre de "désagrément".

A priori, seules les balises de mise en forme seront utilisées, je peux donc me contenter de celle-là.

Merci pour le lien, je vais regarder.

Merci à tous. lulu.
Administrateur
Ah j'oubliais une feature de Firebug qui m'était inconnue il y a encore quelques jours: quand tu affiches les panneaux HTML+Style, il y a à droite une Option 'Show computed style' Smiley murf
Combine ça avec la Web Developer Toolbar (CSS / Disable / All styles ou Browser Defaults Styles) et tu obtiendras également énormément d'informations (mais pas présentées de façon aussi concise que l'outil de Julien Royer)
Je viens de regarder le lien.
J'ai mis en place des styles "par défaut" reprenant les valeurs d'origine mais les navigateurs ne semblent pas les utilisés. Ils continuent de prendre en charge mes styles particuliers.

Y-a t'il un moyen de les forcer à les utiliser ?
ul.default-ul {
  display: block;
  list-style-type:disc;
  margin: 1em 0;
}

li.default-li {
  display: list-item;
}

Lorsque je fais ceci, les margins sont bien prises en compte, pas les puces.
C'est ce qu'on trouve dans le fichier html.css de Firefox.
De toute façon, l'inversion ne change rien.
Modifié par lulumOriss (23 Apr 2008 - 17:21)
BeliG a écrit :
list-style, c'est pour le li (pas le ul) Smiley cligne

Oui et non. La spécification dit que list-style s'applique aux éléments en display: list-item, ce qui n'est à priori pas le cas de l'élément ul. Mais les exemples données utilisent allègrement ul {list-style: ...;} et les implémentations des navigateurs s'accomodent très bien de list-item sur les éléments ul et ol.

http://www.w3.org/TR/CSS21/generate.html#propdef-list-style