Modifications des titres HTML
Le balisage HTML des titres sur les pages de wikicode a été modifié en 2024 comme partie de MediaWiki 1.43. Un conteneur a été ajouté autour de chaque titre, et les éléments autres que le texte (comme les liens de modification des sections) ont été déplacés du titre lui même vers l'intérieur du conteneur. Cette modification est suivie dans T13555.
Qu'est-ce qui a changé ?
Il n'y a pas de changement visuel pour les éditeurs et les lecteurs. Cependant, les mainteneurs d'habillages, d'extensions et de gadgets qui modifient les titres doivent faire les mises à jour pour éviter les problèmes liés à leur utilisation.
| Wikicode | Ancien HTML | Nouveau HTML |
|---|---|---|
== Heading ==
|
<h2>
<span class="mw-headline" id="...">Heading</span>
<span class="mw-editsection">...</span>
</h2>
|
<div class="mw-heading mw-heading2">
<h2 id="...">Heading</h2>
<span class="mw-editsection">...</span>
</div>
|
<h2 class="myclass">
Heading
</h2>
|
<h2 class="myclass">
<span class="mw-headline" id="...">Heading</span>
</h2>
|
<h2 id="..." class="myclass">Heading</h2>
<h2 id="..." class="myclass mw-html-heading">Heading</h2>
|
La modification ne s'applique pas à la plupart des pages spéciales ni au contenu en mode édition de Parsoid qui continuent à utiliser le balisage simple <h2>...</h2>.
Pourquoi ces changements
| Media externe : Comparaison avant-après de l'expérience du lecteur d'écran |
Cette modification améliorera l'accessibilité des personnes qui utilisent les lecteurs d'écran. C'est un flux de travail commun pour naviguer autour d'une page à l'aide des titres présents, comme une table de contenu générée automatiquement. Avec l'ancien marquage, les éléments d'interface comme les liens de modification des sections faisaient partie de chaque titre, ce qui les faisait relire avec le texte de chaque titre. Le problème a été exacerbé par les extensions qui ont ajouté d'autres éléments d'interface aux titres, tels que les liens Modifier la source de l'Editeur visuel et les boutons S'abonner des outils de discussion.
Désabonnement
Il n'y a pas de préférence utilisateur disponible pour contrôler ce comportement.
Dans MediaWiki 1.43 et 1.44, les propriétaires des sites peuvent utiliser l'option de configuration $wgParserEnableLegacyHeadingDOM pour contrôler quel balisage est à utiliser. Cette option a été supprimée dans MediaWiki 1.45.
Les développeurs d'habillages ciblant MediaWiki 1.43 et 1.44 peuvent utiliser l'option d'habillage supportsMwHeading pour contrôler le balisage utilisé.
Cette option a été supprimée dans MediaWiki 1.45.
Lorsque vous utilisez Parsoid pour afficher les pages, le nouveau balisage est utilisé inconditionnellement.
Calendrier
Wikis Wikimedia
- janvier 2023 – A titre d'essai pour cette modification un type hybride de marquage avec des conteneurs est introduit pour les titres de niveau 2 sur les pages de discussion en utilisant DiscussionTools (T314714)
- décembre 2023 – Implémentation corrigée des conteneurs (T353489)
- février 2024 – Le nouveau balisage est disponible pour les utilisateurs qui testent le nouvel analyseur syntaxique Parsoid (T269630)
- du 21 au 23 mai 2024 – Le nouveau balisage est disponible pous les habillages suivants : MonoBook, Timeless, Modern, CologneBlue, Nostalgia. (T365078)
- du 4 au 6 juin 2024 – Le nouveau balisage est disponible pour les utilisateurs de l'ancien habillage Vector (T365736)
- du 11 au 13 juin 2024 – Le nouveau balisage est disponible pour les utilisateurs de l'habillage MinervaNeue (T365736)
- du 16 au 18juillet 2024 – Le nouveau balisage est activé pour les utilisateurs de l'habillage Vector 2022. À ce stade, tous les habillages principaux ont été réalignés. (T367601)
Versions de MediaWiki
- MediaWiki 1.43 –
- L'option de configuration $wgParserEnableLegacyHeadingDOM a été ajoutée, la valeur par défaut correspond à l'ancien balisage (modification 842859)
- Les habillages embarqués MonoBook et Timeless reconnaissent le nouveau balisage
- MediaWiki 1.44 –
- L'option de configuration $wgParserEnableLegacyHeadingDOM a été modifiée et désigne par défaut maintenant le nouveau balisage quand l'habillage le permet (modification 1023980)
- Les habillages embarqués MinervaNeue, ancien Vector, et Vector 2022 prennent également en charge le nouveau balisage
- Les titres écrits à l'aide de la syntaxe HTML dans le wikicode (par exemple
<h2 class="myclass">Heading</h2>) ont désormais la classemw-html-headingautomatiquement ajoutée, pour faciliter leur distinction dans les sélecteurs CSS et JS
- MediaWiki 1.45 –
- L'option de configuration $wgParserEnableLegacyHeadingDOM a été supprimée, le nouveau balisage est toujours utilisé quelque soit l'habillage (modification 1143895)
Instructions pour la mise à jour du code
Habillages et styles globaux
Les habillages qui utilisent ResourceLoaderSkinModule configuré avec "features": { "elements": true } ne doivent pas obligatoirement être modifiés puisque les styles intégrés des titres ont été mis à jour.
Vos styles doivent être compatibles avec trois types de balisage simultanément : le nouveau type, l'ancien type (parce que les propriétaires de sites peuvent choisir de l'utiliser) et le balisage simple sans enveloppe (utilisé par la plupart des pages spéciales et par le contenu en mode édition de Parsoid).
Comme règle générale, les styles des blocs de titre (par exemple le fond, les bords...) doivent s'appliquer à la fois pour .mw-heading et h1-h6 (sauf s'ils sont imbriqués dans .mw-heading), alors que les styles pour les titres de type texte (comme les fontes, la couleur du texte...) doivent s'appliqer à h1-h6 et .mw-headline.
Depuis MediaWiki 1.44
le sélecteur .mw-html-heading peut être utilisé pour correspondre aux titres écrits à l'aide de la syntaxe HTML du wikicode (par exemple <h2 class="myclass">Heading</h2>).
Un sélecteur tel que .mw-heading, .mw-html-heading peut être utilisé pour correspondre à tous les titres du wikicode de la page.
Vous pouvez suivre ces règles pour mettre à jour votre code :
- Là où vous utilisez un sélecteur tel que
h1, h2, h3, h4, h5, h6, ajoutez.mw-heading. - Là où vous utilisez un sélecteur tel que
hN, ajoutez.mw-headingN. - Là où vous utilisez un sélecteur tel que
.mw-headline, ajoutezh1, h2, h3, h4, h5, h6. - Annulez les styles appliqués à la fois à
hNet à.mw-headingNlorsque le titre se trouve inclus dans le conteneur, en utilisant un sélecteur comme.mw-heading hN.
Une fois que l'option de configuration pour les propriétaires de sites est supprimée dans une version future de MediaWiki, vous pourrez supprimer les sélecteurs qui étaient seulement nécessaires pour prendre en charge l'ancien balisage (comme .mw-headline ou hN .mw-editsection).
| Ancien CSS | Nouveau CSS | CSS mis à jour Depuis MediaWiki 1.44 |
|---|---|---|
h2 {
border: 1px solid black;
background-color: red;
color: white;
font-size: 2em;
}
|
.mw-heading2, h2 {
border: 1px solid black;
background-color: red;
color: white;
font-size: 2em;
}
.mw-heading2 h2 {
border: none;
font-size: inherit;
}
|
.mw-heading2,
h2.mw-html-heading {
border: 1px solid black;
background-color: red;
color: white;
font-size: 2em;
}
|
Exemples de modifications :
- https://gerrit.wikimedia.org/r/c/mediawiki/skins/Timeless/+/857770/10/resources/screen-common.less
- https://fr.wikipedia.org/w/index.php?title=MediaWiki:Common.css&diff=prev&oldid=212874402
Extensions et gadgets
Il n'y a pas de modèle simple comme pour les styles, mais en général, vous devrez mettre à jour votre code pour travailler avec l'une ou l'autre des structures HTML. Parfois, c'est aussi facile que de changer les sélecteurs, comme dans la section ci-dessus.
Exemples de modifications :
- https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1009803/1/resources/src/mediawiki.misc-authed-pref/rightClickEdit.js
- https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/859139/12/modules/ve-mw/init/targets/ve.init.mw.ArticleTarget.js
- https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/857772/12/src/mobile.init/editor.js
- https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/860583/9/resources/skins.vector.js/setupIntersectionObservers.js
- https://ru.wikipedia.org/w/index.php?title=MediaWiki:Gadget-edittop.js&diff=prev&oldid=136450234
- https://en.wiktionary.org/w/index.php?title=MediaWiki:Gadget-TabbedLanguages.js&diff=prev&oldid=78700885
- https://en.wikivoyage.org/w/index.php?title=MediaWiki:Gadget-ListingEditor2023.js&diff=prev&oldid=4832346
- https://fr.wikipedia.org/w/index.php?title=MediaWiki:Gadget-AncreTitres.js&diff=215319381&oldid=213586059
- https://commons.wikimedia.org/w/index.php?title=MediaWiki:Gadget-DelReqHandler.js&diff=prev&oldid=879159945
Contenu du Wiki
Les TemplateStyles ciblant les sélecteurs h2 etc. bruts doivent être mis à jour de manière similaire aux habillages, voir ci-dessus.
Dès que tous vos habillages de votre wiki utilisent la nouvelle balise, vous pourrez supprimer les sélecteurs qui n'étaient nécessaires que pour prendre en charge l'ancien balisage (comme .mw-headline ou hN .mw-editsection).
Les styles en ligne, et les TemplateStyles ciblant les classes CSS personnalisées ne nécessitent pas de modification parce que les conteneurs ne sont pas ajoutés aux titres écrits avec le balisage de style HTML <h2> quand il y a des attributs.
Faire ainsi a causé trop de problèmes avec le balisage existant, et la motivation pour changer ne s'applique pas, car ces titres ne contiennent pas d'éléments d'interface comme les liens de modification des sections (T353489#9416500).
Exemples de modifications :