Catégories
Astuces et Design

Ajout de CSS à une page via des en-têtes HTTP

Je code des sites Web depuis longtemps, mais même j'étais un peu perplexe quand je suis tombé sur un commentaire de Hacker News où le commentateur décrivait son propre CMS de fortune qui implique l'utilisation de votre propre système de fichiers. La partie la plus intéressante pour moi était quand la personne a dit qu'elle ajouter du CSS aux pages de leurs projets personnels au moyen d'en-têtes HTTP.

J'avais déjà entendu parler de cette technique auparavant et la personne dit dans le commentaire que cela ne fonctionne pas dans tous les navigateurs. Mais j'ai décidé de faire des recherches pour comprendre comment on pourrait faire cela et pourquoi ce serait plus facile que de simplement en déposer un ou plusieurs. éléments dans le HTML.

Je suis sûr que beaucoup d’entre vous qui développez des sites depuis un certain temps le savent déjà. Mais je pensais que je l'écrirais pour ceux qui recherchent une solution rapide. Cela devrait être particulièrement utile, car ce n'est apparemment pas le sujet le plus facile à rechercher, car les termes "HTTP" et "en-tête" sont assez courants dans le développement Web (et en raison du fait que la recherche Google est nulle depuis de nombreuses années maintenant).

Avant de passer à la solution actuelle, examinons brièvement comment ajouter des en-têtes HTTP en général. Vous pouvez mettre une ligne comme celle-ci dans le fichier .htaccess de votre site Web (ou de votre répertoire) (en supposant que vous êtes sur un serveur Apache):

Header add Header-Name "parameter=value"

Cela utilise Apache Header directif. La partie à l'intérieur des guillemets est une paire paramètre / valeur qui fonctionne comme la valeur de cet en-tête spécifique.

Pour démontrer, je vais faire ce qui suit, ce qui crée un en-tête personnalisé:

Header add Funky-Music "getdownand=boogie"

Ce n'est qu'un en-tête que j'ai composé. Vous pouvez également ajouter n'importe quel en-tête HTTP valide, en supposant que vous utilisez la syntaxe correcte. Vous avez également la possibilité d'utiliser le set argument au lieu de add, qui remplacera l'en-tête s'il existe déjà. Il existe d'autres arguments que vous pouvez utiliser, décrits dans le document apache.org susmentionné.

J'ai créé un répertoire de démonstration et j'ai ajouté un fichier .htaccess à ce répertoire, ainsi qu'un fichier HTML de base appelé index.html. Lorsque vous chargez cette page dans votre navigateur, vous pouvez voir les en-têtes auxquels le serveur répond en affichant l'onglet Réseau dans les outils de développement du navigateur:

Affichage d'un en-tête HTTP personnalisé

Dans Firefox, cela ressemble à ceci:

Affichage d'un en-tête HTTP personnalisé dans Firefox

Dans les deux cas, vous pouvez voir l'en-tête personnalisé que j'ai ajouté. Vous pouvez également voir tous les autres en-têtes ajoutés par défaut.

Il s'agit d'un résumé assez simple de l'ajout d'en-têtes HTTP, y compris l'ajout d'en-têtes personnalisés. Pour une discussion plus approfondie du sujet, consultez cet article de Jeff Starr.

Maintenant que vous avez une idée de base sur la façon d'ajouter des en-têtes HTTP, voyons comment ajouter une feuille de style via la même méthode. La spécification HTML4 du W3C contient des informations sur la façon de procéder, mais il note:

Cette section s'applique uniquement aux agents utilisateurs conformes aux versions de HTTP qui définissent un champ d'en-tête Lien. Notez que HTTP 1.1 tel que défini par (RFC2616) n'inclut pas de champ d'en-tête Lien.

Selon mes tests, le seul navigateur de bureau actuel qui prend en charge cette fonctionnalité est Firefox. Le seul navigateur mobile que j'ai pu trouver qui le supporte est Opera Mini (testé sur iPad). Cela m'amène à croire que la version antérieure à WebKit Opera supportait la fonctionnalité.

Néanmoins, pour ajouter du CSS à l'aide d'un en-tête HTTP, vous pouvez mettre la ligne suivante dans votre fichier .htaccess:

Header add Link ";rel=stylesheet;media=all"

La syntaxe est la même que celle de l'en-tête personnalisé que j'ai ajouté précédemment, et essentiellement la même syntaxe que lors de l'ajout d'en-têtes HTTP, personnalisés ou non.

Dans ce cas, j'utilise Link comme nom de l'en-tête. Voici ce qui indique à un navigateur compatible que je souhaite ajouter un élément à ma page. La valeur de l'en-tête se compose de:

  • L'URL de la feuille de style entre crochets angulaires
  • Paires attribut / valeur séparées par des points-virgules

Les guillemets autour de la valeur complète sont facultatifs si la valeur ne contient pas d'espaces. Si c'est le cas, les guillemets sont obligatoires pour une analyse correcte.

Ainsi, l'en-tête ci-dessus équivaudrait à ajouter ce qui suit au HTML:


le href la valeur peut bien sûr être relative ou absolue. Et, comme vous l'avez probablement compris, ce n'est pas seulement pour CSS mais pour tout ce qui peut être ajouté en utilisant HTML élément.

J'ai créé une autre page de démonstration qui ajoute du CSS à l'aide du Link entête. Comme mentionné, vous devrez le voir dans Firefox pour le voir fonctionner. Affichez les en-têtes HTTP dans l'onglet Réseau des outils de développement et vous verrez la feuille de style incluse:

Affichage d'un en-tête HTTP de lien dans Firefox

Essayez d'afficher la source sur la page elle-même. Vous verrez qu'il n'y a pas de fichier CSS dans la source, mais les styles sont là si vous inspectez chaque élément. L'en-tête sera visible dans l'onglet Réseau de n'importe quel navigateur, mais le CSS ne fonctionnera que dans Firefox ou un autre navigateur prenant en charge le Link En-tête HTTP.

D'après ce que je peux voir, Link L'en-tête n'est pas une fonctionnalité obsolète ou obsolète, elle n'est tout simplement pas bien prise en charge. Il est difficile d’essayer de déterminer si cela est toujours considéré comme une fonctionnalité Web valide, mais voici ce que j’ai découvert:

  • MDN contient un article et n'indique pas qu'il est obsolète (bien que la section d'assistance du navigateur soit manquante).
  • le Link L'en-tête est décrit dans la RFC 8288 de l'IETF, qui, je crois, est la dernière norme proposée pour la «liaison Web».
  • Comme le mentionne la spécification HTML4, la dernière version de la spécification HTTP 1.1 ne l’inclut pas, tandis que la spécification HTTP2 semble mentionner le Link en-tête en passant.

Avec si peu de support par navigateur, il est difficile de justifier une utilisation autre que la nouveauté. Comme l’a dit l’utilisateur de Hacker News, les projets personnels peuvent être amusants car vous pouvez faire ce que vous voulez, y compris en utilisant une fonctionnalité que plus de 90% de vos utilisateurs ne verront apparemment pas.

Je suppose que si vous avez beaucoup de pages HTML et que vous n'utilisez aucun type de script ou d'inclusion d'arrière-plan, alors la meilleure solution est peut-être d'utiliser le Link entête. Mais le fait qu'il soit si mal soutenu ne le rend pas très attrayant, un projet personnel ou non.

À ce stade, la seule chose à laquelle je peux penser qui pourrait justifier son utilisation dans la production est comme un moyen d'inclure du CSS uniquement pour Firefox, qu'Eric Meyer mentionne comme une possibilité dans un ancien article sur ce sujet. Mais il n'est pas garanti de toujours fonctionner uniquement dans Firefox, c'est donc toujours un problème.

Faites avec ce que vous aimez, mais il est extrêmement peu probable que cela ait une utilité dans un vrai projet. Je pensais juste que ce serait amusant de jouer avec et de l'écrire.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *