28172 sujets

CSS et mise en forme, CSS3

[Résolu] Possible d'appeler un style dans un autre style ?

Bonjour,
Existe-t-il, en CSS, une méthode pour définir un style dans un autre style ? Je m’explique.

Une feuille de style "grid.css" pour la grille de base. Elle contient des éléments bien connus Smiley cligne :

.container .grid_8 {
	width: 620px;
	margin : 0 10px ;
	float: left;
	display: inline;
	} 
.container .push_4 {
	left: 320px;
	}


Une feuille de style "blocs.css". Elle contient, par exemple :

.bloc-droite {
	background-color: #666666;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: .85em;
	line-height: 1.6em;
	}


Je cherche à inclure les styles « grid-8 » et « push » dans le style « bloc-droite » directement dans la feuille blocs.css, un peu comme ceci : 

.bloc-droite {
[b]	????? : .container .grid_8;
	????? : .container .push_4;[/b]
	background-color: #666666;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: .85em;
	line-height: 1.6em;
	}


… de sorte que dans l’html, la déclaration <div class= »bloc-droite »>…</div> suffise pour donner au bloc son look, mais aussi sa largeur et sa position.

Objectif : pouvoir changer complètement le design du site en changeant les css uniquement, sans intervenir dans l’html.

Merci de vos réponses.
Modifié par crazyweb (21 May 2013 - 19:57)
Bonsoir,

Avec les préprocesseurs CSS qui "apportent les fonctionnalités qui manquent parfois cruellement à CSS, telles que la notion de variables, les opérations de calculs dynamiques, la factorisation de parties de code ou encore les imbrications de sélecteurs". ? (© Raphaël)

Sass dispo sur GitHub
LESS dispo sur GitHub
Stylus dispo sur GitHub

Il parait que le même Raphaël, cité plus haut, tripoteur devant l'éternel de CSS, ayant commis knacss, aurait également accouché de versions LESS et SASS dispo sur Github Smiley smile
Administrateur
Bonjour,

2 possibilités immédiates :

1/ dupliquer le code des intructions de l'une des règles dans l'autre


.bloc-droite {
	width: 620px;
	margin : 0 10px ;
	float: left;
	display: inline;

	left: 320px;

	background-color: #666666;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: .85em;
	line-height: 1.6em;
}


2/ Combiner les sélecteurs (2 ou ... sélecteurs séparés par 1 à ... virgules tout simplement)

.container .grid_8,
.bloc-droite {
	width: 620px;
	margin : 0 10px ;
	float: left;
	display: inline;
} 
.container .push_4,
.bloc-droite {
	left: 320px;
}

.bloc-droite {
	background-color: #666666;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: .85em;
	line-height: 1.6em;
}


Mais il est préférable de coller les 2 ou 3 classes dont il est question ici sur l'élément HTML, parce que tu peux avoir un bloc-droite avec certaines instructions dans une page et puis une partie seulement dans une autre page, etc
Faut essayer de trouver le point commun (le plus petit dénominateur commun) et puis les différentes variantes seront stylées par 1 ou plusieurs classes supplémentaires (.bloc-droite.bloc-droite-largeur1 par exemple)


EDIT : ça ne fonctionne du 1er coup sans conflit que parce que les 4 + 1 + 4 propriétés définies par les 3 règles sont toutes différentes. Si tu as left: 220px quelque part et left: -150px ailleurs pour le même élément, seul le plus prioritaire s'appliquera (avec !important - et ensuite tu le paieras cher dans le reste du projet #çaÿlemal -, sélecteur avec le plus de spécificité/poids, dernier écrit à poids de sélecteur égal)
Modifié par Felipe (20 May 2013 - 19:43)
Administrateur
6l20 a écrit :

On n'avait pas dit sans toucher au HTML ?... Smiley cligne

1/ et 2/ ne nécessitent pas de toucher au code HTML ? Ou j'ai raté quelque chose (un exemple de code HTML Smiley langue )
Mais c'est préférable donc je préfère quand même le signaler Smiley cligne
Felipe a écrit :

1/ et 2/ ne nécessitent pas de toucher au code HTML ? Ou j'ai raté quelque chose (un exemple de code HTML Smiley langue )
Mais c'est préférable donc je préfère quand même le signaler Smiley cligne

a écrit :
il est préférable de coller les 2 ou 3 classes dont il est question ici sur l'élément HTML

Mais tu as raison, je chipote, et je colle sans vergogne plusieurs classes sur mes éléments html Smiley cligne
Dupliquer les règles et puis quoi encore ?! Smiley murf
Bonsoir,

y-at-il une forte contre indication à utiliser @import a partir du fichier CSS principal pour ne pas en parler ?
Cdt,
GC
Bonsoir et merci à vous deux pour vos réponses.

@6l20
Au vu de ta réponse, j'en déduis qu'inclure un style dans un autre par "simple appel" n'est pas possible (n'existe pas). Je vais donc me pencher sur les préprocesseurs.

J'avoue qu'étant encore assez débutante en CSS, j'espérais éviter d'ajouter une couche supplémentaire sur une couche de base que je ne maîtrise pas encore bien. Mes brefs passages "juste pour voir" sur les préprocesseurs m'ont un peu fait reculer... Ça m'a paru encore un peu compliqué pour moi. Smiley confus

@Felipe
Merci pour tes deux propositions, qui ne conviennent toutefois pas à la philosophie de travail que je tente de mettre en place.

Pour la proposition 1, je ne vois plus d'avantage à avoir une feuille de style qui décrit ma grille si je dois de toute façon re-styler chaque bloc. Je pense que nous serons d'accord là-dessus.

Pour la proposition 2, elle paraissait à priori plus intéressante mais elle ne me semble pas apporter de gain de production. Mon but est de me constituer une sorte de "kit de base" qui me permette de passer d'un look de site à un autre en modifiant uniquement le style du bloc (ici, bloc-droite) dans la CSS. Dans la solution 2 proposées, je dois modifier de nombreux styles. Je ne gagne alors rien par rapport à la solution la plus simple qui consisterait à modifier les classes déclarées dans les <div> dans mon html.
gc-nomade a écrit :
Bonsoir,

y-at-il une forte contre indication à utiliser @import a partir du fichier CSS principal pour ne pas en parler ?
Cdt,
GC

Bonsoir gc-nomade,
Je n'y ai même pas pensé, peux-tu développer ton idée ?
Bonsoir,

Il peut dans feuille de style avec ses règle de bases en dernier lieu importé une feuille

@import url("grid2col.css");

dans cette feuille , il peut redistribuer ces selecteur de classes pour le look au aux selecteur de class pour son layout (ou vice versa)
ex:

/* feuille pour le look  mes2colgrises.css */

/* ....tout le look */
.bloc-droite {
	background-color: #666666;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: .85em;
	line-height: 1.6em;
	}
/* et enfin */
@import url("grid2col.css");/* ou insertion direct du code de cette feuille ici  */

/* EOF */

Cette feuille personnalisé devient : 
.bloc-droite,
.container .grid_8 {
	width: 620px;
	margin : 0 10px ;
	float: left;
	display: inline;
	} 
.bloc-droite,
.container .push_4 {
	left: 320px;
	}

L'import permet d’inter changer facilement la seconde feuille , bon c'est pas nouveau et ça n'automatise rien du tout, c'est moins intuitif à faire.
Une fois fait, pour mes3colgrises.css , on injecte grid3col.css a la place de grid2col.css (1 caractère à changer) , pour le look on renomme la feuille principal et on change les couleurs de fonds par exemple. On capitalise sur le temps.

crazyweb a écrit :
Pour le @import, je suis tombée sur cet article en faisant mes recherches, avant de poster ici :
http://www.alsacreations.com/actu/lire/695-utilisation-style-css-import-link.html

Evidemment, il date de 2009. Peut-être les choses ont-elles changé ?

Néanmoins, je ne pense pas que ce soit une solution non plus. @import permet d'importer une CSS dans une autre mais pas un style dans un autre. Ou je me trompe ?


Tu ne te trompe pas.
Ce que je ressort de l'article:
ou tu appelle tes 2 feuilles via link
ou tu appelle 1 seule feuille via link dans laquelle tu @import tes feuilles.
en gros: tu évites de faire un mixte des deux Smiley smile
(enfin , tu peut aussi t'appuyer du coté du serveur pour ne t'envoyer qu'un fichier)
++
Modifié par gc-nomade (21 May 2013 - 02:24)
Bonsoir,

Merci pour cette explication gc-nomade. A défaut de la fonctionnalité que je cherchais et qui n'existe pas, ta proposition "un peu tordue" m'ouvre une piste intéressante. Je vais creuser ça pour voir si ça peut s'adapter à mon projet.

Bon... je vous rassure quand même : habituellement, comme 6l20, moi aussi "je chipote, et je colle sans vergogne plusieurs classes sur mes éléments html". Smiley cligne Disons qu'ici, c'est pour un projet spécifique entraînant un workflow très inhabituel.

Merci à vous deux pour le temps consacré, les liens intéressants et les explications.


PS : juste une petite précision (pas importante) : "il", c'est "elle". Smiley smile
Bonjour,

Je reviens juste sur ce topic pour remercier 6l20 qui m'a un peu "forcé la main" avec sa suggestion de préprocesseurs.

Comme je l'avais dit, je balbutie encore beaucoup en CSS (ce n'est pas mon métier, je fais ça de loin en loin) et j'hésitais à y ajouter encore une couche inconnue. Mais ta réponse m'a finalement poussée à creuser un peu le sujet, et je suis rapidement arrivée à la conclusion que c'était vraiment la solution à mon besoin.

Quelques lectures "online" plus tard, je me dirige vers Sass. J'ai acheté "CSS maintenables" de Kaelig et je sens que je ça va bien m'amuser. Reste à passer de la théorie à la pratique, maintenant. Smiley cligne

Donc : merci !
Sujet clos
Aller à