28172 sujets

CSS et mise en forme, CSS3

Valeur d'un attribut CSS = autre classe CSS... c'est possible ?

Bonjour,

J'interviens sur un projet existant à mon boulot et je suis tombé sur quelque chose dans les CSS que je n'ai jamais vu... je me demande si c'est un bug ou bien si c'est volontaire. Dans ce cas j'aimerais savoir à quoi ça sert exactement !

En fait, j'ai comme valeur d'un attribut CSS une autre classe CSS :


.classeA{
(...)
}

.classeB{
(...)
font: classeA;
(...)
}


Ce qui m'étonne est que la classe A définit des attributs "margin", "padding", etc... mais rien en rapport avec les "font" (!)

Au final, si je regarde avec Firebug les CSS de l'élément concerné, j'obtiens :

-x-system-font:classeA;
font-family:-moz-use-system-font;
font-size:-moz-use-system-font;
font-size-adjust:-moz-use-system-font;
font-stretch:-moz-use-system-font;
font-style:-moz-use-system-font;
font-variant:-moz-use-system-font;
font-weight:-moz-use-system-font;
line-height:-moz-use-system-font;


Merci pour vos explications !

A+
Salut,

J'ai testé
<html>
	<head>
		<style>
			.classeA {
				color: red;
			}
			.classeB {
				color: classeA;
			}
		</style>
	</head>
	<body>
		<p class="classeA">Test classeA</p>
		<p class="classeB">Test classeB</p>
	</body>
</html>
avec IE7, IE8, Firefox 3.5, Chromium 5, Opera 10.50
aucun n'a ne m'a écrit "Test classeB" en rouge.

Ce qui est sur c'est que ce n'est pas standard en CSS 2.1,
en CSS 3 je pense pas non plus sinon au moins un des navigateurs que j'ai utilisé aurait réagit...

Donc moi je vote pour une erreur de celui qui a écrit ça !
Modifié par VincentB85 (21 May 2010 - 14:23)
Administrateur
Bonjour,

font est une propriété raccourcie avec laquelle tu redéfinis beaucoup de paramètres concernant les fontes : gras ou pas, taille, interlignage, famille, etc ...
Si tu ne mets qu'une seule valeur et que c'est n'importe quoi, le navigateur utilise pour toutes les autres valeurs à partir de la deuxième les valeurs par défaut, probablement celles que te donne Firebug.
EDIT: http://www.pompage.net/pompe/raccourcisCSS/

De la même façon si tu écris background: red; au lieu de background-color: red; tu supprimes de fait l'image de fond et si plus loin tu reprécises background-image: url(repertoire/nom.png); alors tu constateras que ton background: red; avait aussi remis à leur valeur par défaut background-position (left top ou 0 0 par défaut) et background-repeat (par défaut repeat et non pas no-repeat).
EDIT: http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background j'oubliais pour attachment scroll par défaut au lieu de fixed mais c'est pas très courant comme valeur Smiley smile


Les valeurs "*system*" me rappellent qu'il y a(vait) des couleurs dépendant des goûts de chacun : http://msdn.microsoft.com/en-us/library/ms531197(VS.85).aspx
(l'article dit que c'est déprécié en CSS3, à ne plus utiliser donc)
Jamais testé ailleurs que sur Windows ...
Les couleurs sont celles de ton bureau : noir et gris neutres chez moi (thème Win2000 sur WindowsXP), fond bleu Playskool© avec le thème Windows XP par défaut, etc
Modifié par Felipe (22 May 2010 - 09:25)
Sujet clos
Aller à