Extrait de l'émission CPU release Ex0214 : Disséquons une URL, seconde partie.
Pour terminer sur ce chapitre fumeux qu'est le hash, on va parler de son écriture de paramètres.
Profitant du fait que les navigateurs web ignorent les hash qui ne font pas référence à des éléments [via leur attribut id] d'une page web, dès le milieu des années 2000s et avec l'arrivée des premiers scripts dynamiques
HTML, des applications web avant l'heure vont s'en emparer. Et afin de garder un état, ou de s'en servir depuis un lien externe, ces scripts vont manipuler la partie hash d'une URL, souvent de manière très très libre, voire anarchique.
J'ai souvent vu et lu que le # permet de mettre n'importe quoi derrière, j'appelle ça la soupasse de hash… comme un state JSON-encodé pour une app en Angular. Oui, j'ai vu ça. Je vous dis pas les effets de bord, c'était rigolo, surtout que les clés bougent !
Seulement même ici, dans le hash d'une URL va arriver un standard, mais un standard qui n'est pas nativement repris dans les navigateurs web… du moins pas encore à l'heure actuelle.
Si vous ne le savez pas, un hash peut lui aussi comporter plusieurs paramètres dans la même syntaxe qu'une query, c'est-à-dire clé=valeur,valeur avec des & en séparateurs de clés, et , en séparateurs de valeurs.
C'est le standard Media Fragments par le W3C qui l'a mis en place ; un standard trop méconnu et trop rarement implémenté, voir pas nativement compris par les navigateurs. Le standard prévoyait de prendre qu'une portion géométrique ou temporelle d'une image, d'un son ou d'une vidéo.
En gros, le fonctionnement normal du hash où l'on présente qu'une partie de document devait s'étendre pour tous les autres documents qu'un navigateur web peut prendre en charge.
Par exemple, la clé t= spécifie une position temporelle dans un son ou une vidéo d'une page. La valeur est exprimée en nombre entier de secondes, avec le zéro pour le début temporel du média.
Et vous savez quoi ? Si vous êtes sur notre site web cpu.pm, vous l'utilisez sans vous rendre compte : Notre lecteur de sonores CPU-Audio l'utilise pour lier un sonore dans une page à un moment précis. Par exemple, avec https://cpu.pm/0191#t=500,1000, notre player va lire le sonore de cette page depuis un instant A jusqu'à un instant B.
Plusieurs autres sites web se servent de cette notation. Dailymotion le faisait très bien et l'a supprimé (encore une coupe sombre de Bolloré), là où Youtube utilise la même syntaxe, mais ne vous la propose qu'en query, ce qui est… déplacé, alors que la syntaxe t= y marche aussi en hash.
Je remercie Thomas Parisot de m'avoir fait découvrir les média fragments. Vous pouvez pas imaginer combien avoir écrit une bibliothèque javascript pour supporter les media fragments m'a été super utile pour la production de CPU et pour la compréhension de certaines parties des navigateurs web.
Prenez notre player CPU-Audio, c'est un WebComponent open source, indépendant des frameworks, et il a plein de fonctionnalités sympas.
Il existe un usage des paramètres de hash en natif, dans le navigateur Chrome de Google. Et ce n'est pas un hasard : Google propose dans Chrome de mettre un motif de texte à rechercher dans un document via le hash, avec la clé #:~:text= . Il va alors mettre en surbrillance et scroller là où le texte est présent dans la page. C'est pas con, c'est plutôt élégant mais… c'est pas standard et les autres navigateurs web ne l'ont pas adopté.
En attendant, si vous faites des pages web avec beaucoup de texte, il vaut mieux ponctuer ses documents avec des éléments identifiés avec l'attribut id.
Le problème du hash est que dans l'usage natif des URL supporté par les navigateurs, c'est à dire uniquement l'id d'un élément de la page, ben le hash ne sert qu'à ça, le navigateur ignore superbement les changements de hash si en plus d'une ID, vous mettez des paramètres complémentaires. C'est normal : c'est expressément demandé dans le standard.
Et d'ailleurs, cela nous a posé des soucis d'accessibilité dans le développement de notre lecteur CPU-Audio. Vous savez, l'accessibilité, ces fonctions que souvent on oublie de vérifier, mais qui finalement sont si utiles à tout le monde…
Texte : Da Scritch
Photo : Scattered puzzle pieces next to solved fragment CC-By horiavarlan Old Photo Profile
, détail