Est-il possible d'inclure des fragments HTML en utilisant CSS ?

Question

Je travaille sur un ensemble de pages web statiques (très, très grandes) qui se composent essentiellement de trois parties : une partie supérieure identique sur chaque page (logos, etc.), une partie centrale contenant le contenu réel, et une partie inférieure également identique sur chaque page (pensez à un pied de page).

Pour garder le code des pages html individuelles léger, j'aimerais vraiment inclure la partie en-tête/pied de page en utilisant du css (bien que je ne sois pas sûr que cela soit possible). Autrement dit, j'aimerais avoir des fichiers html légers comme

et laisser un seul fichier css définir le contenu et la mise en page de l'en-tête et du pied de page. Est-ce possible en n'utilisant que du html et du css? (Pour plusieurs raisons, je ne veux pas utiliser de langage de script.)

J'ai essayé d'utiliser les pseudo-éléments :before/:after mais cela a échoué car la valeur de l'attribut content a toujours été prise littéralement, c'est-à-dire,

#header:after{ content:"XXX"; }

résulte en le texte

XXX

et non en un lien sur le texte XXX.

---

Édit : Merci pour vos réponses jusqu'à présent. Je suis tout à fait prêt à accepter que ce n'est pas la manière prévue d'utiliser du CSS, mais quelqu'un pourrait-il m'expliquer pourquoi c'est impossible d'un point de vue technique ?

(De plus, juste pour clarifier, le code ci-dessus n'est qu'un exemple. Il y a beaucoup plus de contenu (sémantiquement significatif) impliqué, et il y a aussi plusieurs parties répétitives différentes et pas seulement un en-tête et un pied de page.)

Answer 1

Est-ce possible en n'utilisant que du html et du css ?

Non, ce n'est pas possible. Ce n'est pas du tout le but du CSS. Ce serait une violation directe de l'intention du CSS.

Votre document HTML devrait contenir un balisage sémantiquement significatif. En créant un document HTML vide et en n'appliquant que des styles graphiques, vous produisez un contenu incroyablement inutile.

Si vous voulez produire des pages HTML statiques sans dupliquer une tonne de balisage sur chaque page, utilisez un générateur de site statique comme jekyll ou nanoc ou renseignez-vous sur les inclusions côté serveur.

Answer 2

Le CSS n'a pas été conçu pour cela, un langage de script comme PHP, ASP.net, etc l'a été. Je suis sûr que vous avez vos raisons de ne pas les utiliser, cependant vous vous y prenez à l'envers en pensant que vous pourriez utiliser le CSS pour cela et avoir un succès parfait.

Une alternative « hack » serait d'utiliser Javascript et simplement de produire du HTML réutilisable en javascript. Mais je ne connais pas non plus votre position sur l'utilisation de JS.

Answer 3

D'accord, CSS n'est pas la meilleure façon d'inclure du contenu (si c'est même possible) car c'est pour contrôler le design.

À la place, ce que vous pourriez faire est d'utiliser un script côté serveur tel que PhP pour inclure un autre fichier à un certain emplacement. Par exemple, en PhP,

Vous pourriez également utiliser la propriété jQuery .load() pour charger un autre fichier dans un élément de bloc spécifique. Cependant, je pense que l'utilisation de javascript pour inclure du matériel serait plus compliquée.

Bien sûr, si votre extrait de code html est petit, vous pourriez simplement utiliser la propriété jQuery .html('

le html va ici

').

Answer 4

Idéalement, un langage de script serait tout ce dont vous avez besoin.

Cependant, puisque ce n'est pas une option, vous pourriez utiliser des cadres/iframe.

Faites en sorte que l'en-tête/le pied de page sur chaque page soit un frame avec une source vers header.html et footer.html. Cela est loin d'être idéal, mais dans votre scénario actuel, c'est peut-être votre meilleure option. Au moins, en cas de petits changements à apporter à votre en-tête ou pied de page, vous n'aurez pas besoin de faire la modification dans 40 pages web différentes.

Answer 5

Suite à l'article de css-tricks.com ici, vous devriez remplacer les guillemets et les flèches HTML droite/gauche (ou peu importe comment on appelle ces signes) avec ces-ci :

\2018 - Guillemet simple gauche intelligent
\2019 - Guillemet simple droit intelligent

dans votre css pour que votre lien s'affiche comme prévu.
Il y a plus à cela, donc je suggère également de lire ce post qui pourrait répondre à certaines de vos questions.