Assigner les propriétés d'une classe à un ancrage (ID)?

Bonjour à tous,

Je travaille sur le moteur de réseau social ELGG. Ce moteur définit une feuille de style qui contient les définitions des classes, et des "ancrages" (IDs), utilisés pour la présentation.

Récemment, j'ai découvert le framework Blueprint. J'ai jeté un coup d'oeil à ce framework, et je suis emballé.

L'utilisation des CSS devrait être simple, dans la mesure où les concepts manipulés sont plutôt basiques. Cela dit, dans la pratique, les CSS sont une vraie prise de tête "chronophage", à cause des différences d'interprétation entre les navigateurs. Cette hétérogénéité transforme quelque chose qui devrait être simple en "un truc de gourous", bourré de trucs et astuces, et d'exceptions aux règles... En deux mots : Pour dire quelque chose de très simple, on utilise des phrases très compliquées.

Ce framework présente une interface "unifiée" (par rapport aux navigateurs) qui élimine une bonne partie des "pratiques obscures"...

Aussi je désire remplacer la feuille de style de ELGG par une nouvelle qui intègre le framework Blueprint. La "pseudo-complexité" (inutile) des définitions de CSS serait masquée, et je pourrais me concentrer sur la création, plutôt que sur le débuggage.

Mais voilà, j'ai un problème, qui peut s'avérer bloquant si aucune solution n'existe pour le contourner.

ELGG utilise des "ancrages" (IDs). Par exemple :

<div id="page_container">
<div id="page_wrapper">
...
</div>
</div>

Comme son nom l'indique, l'ancrage définit les propriétés du style attaché à la page.

Dans le framework Bluepriint, c'est la classe "container" qui joue ce rôle.

Je dois donc appliquer les propriétés de la classe (Blueprint) "container" à l'élément désigné par l'ancrage (ELGG) "page_container".

Dans l'absolue, une solution consisterait à écrire :

<div id="page_container" class="container">

Mais, dans la pratique, cette solution n'est pas applicable à mon cas d'utilisation. Le code HTML est, en partie généré par du code PHP... D'autre part, je désire limiter au maximum l'étendue des modifications afin de simplifier au maximum les adaptations consécutives à des mises à jour de version. Aussi je voudrais, dans la mesure du possible, limiter les modifications à la feuille de style (sans toucher au HTML, au PHP ou au JavaScript).

Question :

La classe "container" existe. Toutes ses propriétés sont définies dans la feuille de style.

Existe-t-il un moyen d'assigner les propriétés d'une classe (ici: "container") à un ancrage (ici: "page_container"), au sein d'une feuille de style?

.container { ... }
#page_container ???

Merci,

Denis

Bonjour,

denis.beurive a écrit :
Existe-t-il un moyen d'assigner les propriétés d'une classe (ici: "container") à un ancrage (ici: "page_container"), au sein d'une feuille de style?

Oui, c'est tout à fait possible. Il n'y a aucune incompatibilité. Tu peux sans crainte copier les styles de ta classes dans ton ID.

ps. : une ancre c'est une balise <a>, rien à voir avec l'ID (vocabulairement parlant), qui est un identifiant unique.
Modifié par Laurie-Anne (30 Apr 2010 - 15:17)

Laurie-Anne a écrit :
Bonjour,
Oui, c'est tout à fait possible. Il n'y a aucune incompatibilité. Tu peux sans crainte copier les styles de ta classes dans ton ID.

ps. : une ancre c'est une balise <a>, rien à voir avec l'ID (vocabulairement parlant), qui est un identifiant unique.

Salut Laurie-Anne,

Je te remercie pour ta réponse aussi rapide.

Je peux effectivement "copier / coller" la définition de la classe (ici: ".container") sur celle de la référence unique (ici: "#page_container").

Autrement dit :

Fichier CSS du framework "Blueprint" : .container { texte de la classe "container" }

Mon fichier CSS : #page_container { texte de la classe "container" }

Cela fonctionne. Mais, si le framework Blueprint évolue, je serais obligé d'éditer mon fichier CSS (pour refaire mon "copier / coller").

Aussi je voulais savoir s'il existe, dans la "grammaire CSS" (par analogie avec les grammaires des langages de programmation), une façon de dire : "Assigne les propriétés de la classe, précédemment déclarée, à la référence unique".

Autrement dit :

<!-- La classe "container" est définie dans le fichier "blueprint.css" -->
<link rel="stylesheet" href="blueprint.css" type="text/css">

<style type="text/css">

/* Ici quelque chose du genre : #page_container = .container */

<style>

J'ai effectué des recherches, mais je n'ai pas trouvé de solution. Il semble que la grammaire CSS ne contienne pas "d'opérateur de copie".

Je peux, en dernier recours, développer un interpréteur qui génère un fichier CSS à partir d'un fichier source qui intègre des macrocommandes.

Exemple : Dans mon fichier source, j'écris : #page_container = COPY(blueprint.css::.container)

L'interpréteur détecte la macrocommande COPY. Il extrait la définition de la classe "container" du fichier "blueprint.css" et il la copie à la place de la macrocommande. Mais, je me disais que, peut-être la grammaire CSS permet de "copier" une définition pour l'appliquer à un élément.

A+

Ajouter la classe à l'élément HTML comme tu l'as proposé dans ton premier post.
En CSS uniquement, ce n'est pas possible, à moins de recopier (à la main) les propriétés de ton sélecteur de classe dans ton sélecteur d'identifiant (à reproduire donc lors d'une mise à jour).
Modifié par octopus984 (30 Apr 2010 - 18:27)

Bonjour,

je n'ai pas tout compris à la méthode envisagée, je sais juste qu'il y a un écueil : un id est unique dans un code HTML (quand il existe), une classe peut être présente 0, 1 ou beaucoup de fois.
Pour ton copier-coller/affectation/idem, il y a une solution simple : combiner les deux dans le même sélecteur de règles.
À la place de deux règles qui ne diffèrent que par leur sélecteur :

#identifiant { color: green; backgrouns-color: black; }

.classe { color: green; backgrouns-color: black; }

tu peux écrire une seule règle :

#identifiant, .classe { color: green; backgrouns-color: black; }

Evidemment s'il y a une instruction qui n'est pas commune aux deux, il faut l'écrire à part.

Bonjour à tous,

Merci pour tous vos messages. Mais je crois que je n'ai pas décrit mon problème de façon suffisamment claire.




Je dispose pour le moment de deux fichiers :

Le fichier "original.css".
Le fichier "original.html".

Dans le fichier "original.css", on trouve :

#page_container {...}

Dans le fichier "original.html", on trouve :

<link rel="stylesheet" href="original.css" type="text/css">
...
<div id="#page_container"> ... </div>


Ma contrainte est : Je ne peux pas modifier le fichier HTML (original.html).


Mon objectif est : Je veux remplaces "original.css" par "blueprint.css" (http://www.blueprintcss.org/).


Le framework Blueprint dispose de toutes les classes nécessaires pour la présentation du fichier HTML "original.html".

Problème : Les classes du framework Blueprint ne portent pas les mêmes noms que ceux utilisés dans le fichier HTML "original.html". Et, dans le fichier HTML, certaines balises se voient attribuer une référence unique, et non une classe. Alors que dans le framework Blueprint, l'élément de présentation qui jour le rôle fonctionnel requis est déclaré en tant que classe...


Contrainte : Je ne veux pas modifier le framework Blueprint. Je perdrais les avantages liés à l'utilisation d'un framework.


Solutions éventuelles :

Écrire un fichier CSS intermédiaire, entre le framework Blueprint et mon fichier HTML (original.html).

Autrement dit :

<link rel="stylesheet" href="blueprint.css" type="text/css">
<link rel="stylesheet" href="adaptateur.css" type="text/css">
...
<div id="#page_container"> ... </div>

"adaptateur.css" définirait la référence unique "#page_container" (absente de "blueprint.css"), à partir d'une classe de "blueprint.css".


Je sais... C'est tordu. Et j'ai beau tourner le problème dans tous les sens, je ne vois pas de solution.

A+