Utilisateur:Tractopelle-jaune/CodeMirror-dark

Aperçu de la modification de l'article Antarctique avec le thème dark activé.

Aperçu de la modification de l'article élection présidentielle française de 2007 avec le thème dark activé.

CodeMirror-dark est un thème CSS personnalisé pour l'extension CodeMirror que j'ai mis au point.

Il a été conçu dans le but de répondre à plusieurs objectifs :

• Être basé sur un arrière-plan sombre (afin d'être plus reposant pour les yeux) ;
• Utiliser de manière plus étendue la palette des couleurs (le style par défaut devant respecter certaines contraintes de contrastes pour des raisons d'accessibilité, il ne peut pas exploiter toutes les possibilités).
• Permettre de distinguer visuellement si l'on est à l'intérieur d'une référence, ou en dehors (cela est obtenu en utilisant un arrière-plan bleu foncé). L'imbrication, la multitude et la complexité de certaines références font qu'il n'est pas évident de savoir si l'on est dans ou hors d'une référence.
• Mettre au point un système permettant de mettre en évidence de manière claire les parties en gras et/ou italique, y compris quand des modèles, balises ou liens sont présents à l'intérieur. Et ce bien que CodeMirror ne fournisse aucune indication de gras/italique en dehors du texte libre (et partiellement des liens). Grâce à l'utilisation de propriétés CSS4 expérimentales, le système mis au point permet une expansion de l'indication gras/italique sur les différents éléments contenus dans une zone de gras et/ou italique. Cette indication prend la forme d'une bordure en petits tirets de couleur au-dessus et en dessous du contenu en gras/italique.
• Faciliter la modification des tableaux du mieux possible, et ce malgré les carences de CodeMirror en termes d'informations sur certains éléments. CodeMirror fournit des informations pour l'ouverture/fermeture du tableau, ses éventuels attributs globaux, le titre du tableau, et les délimiteurs. Mais aucune information pour identifier les en-têtes. Néanmoins, en bricolant un peu, il est possible d'identifier la position des en-têtes de tableaux (d'après l'ordre de succession de certaines balises et classes CSS). Les en-têtes font ainsi également l'objet d'une mise en forme spécifique (couleur spécifique, gras et soulignement en pointillés jaunes), visant à les repérer plus facilement.
• Améliorer la lisibilité des listes à puces, que ce soit celles dans les articles, ou celles dans les références (qui font l'objet d'une mise en forme spécifique)

Utiliser le thème

Le thème est disponible en plusieurs versions, utilisant certaines pseudo-classes expérimentales CSS4, implémentés par les navigateurs les plus modernes, permettant d'offrir certaines fonctionnalités supplémentaires, notamment pour signaler les zones en gras/italique.

Pour utiliser le thème, il suffit d'ajouter une ligne au tout début de votre common.css personnel.

Apèrs modification du common.css, n'oubliez pas de purger le cache du navigateur.

Tableau des différentes variantes du thème selon le navigateur utilisé.

Navigateur	Version minimale requise	Lien vers le code du thème CSS	Ligne à ajouter au début de votre common.css
Mozilla Firefox	78	lien	@import url('//meta.wikimedia.org/w/index.php?action=raw&ctype=text/css&title=User:Tractopelle-jaune/CodeMirror/CodeMirror-dark-Advanced-CSS4.css');
Google Chrome	88
Safari	14
Microsoft Edge	88
Opera	74
Autres navigateurs et anciennes versions	Voir #Anciennes versions.

Explications techniques

Ce thème utilise la pseudo-classe CSS4 :is() pour permettre l'expansion de l'indication gras/italique (les tirets de couleur autour des éléments) sur les modèles, liens, balises, etc. inclus dans une zone de gras/italique L'implémentation purement CSS de cette fonctionnalité ne serait pas possible sans cette pseudo-classe.

Les spécifications de la norme CSS4 étant encore en cours de définition, certains navigateurs n'ont pas encore implémentés ces nouveaux éléments sous leur nom définitif, mais utilisent des « préfixes propriétaires » en attendant.

Un « préfixe propriétaire » n'est rien d'autre qu'un nom de propriété, pseudo-élément, pseudo-classe ou valeur, précédé de quelques lettres du nom du moteur de rendu HTML ou du navigateur. Cette manière de faire permet aux navigateurs de commencer à implémenter ces éléments avec plusieurs années d'avance, et de permettre déjà leur utilisation à des fins expérimentales. Le nom final de l'élément n'étant reconnu par les navigateurs qu'à partir du moment où les spécifications le concernant sont définies. Cette manière de faire permet de garantir qu'une propriété, pseudo-élément, pseudo-classe ou valeur standardisée aura exactement le même comportement sur tous les navigateurs la supportant.

La pseudo-classe CSS4 nécessaire est :is(). Cette pseudo-classe permet de faire une sorte de ou logique dans une règle, quand plusieurs cas sont possibles à un endroit. Des informations supplémentaires sur cette pseudo-classe sont disponibles sur https://developer.mozilla.org/fr/docs/Web/CSS/:is et https://drafts.csswg.org/selectors-4/#matches.

Actuellement, seules les dernières versions des navigateurs Mozilla Firefox, Google Chrome et Safari supportent la pseudo-classe :is().

La situation actuelle est la suivante au niveau du support de cette pseudo-classe, au 5 juillet 2021 :

• :is() : Nom définitif de la pseudo-classe dans le draft, au 2 juillet 2021. Supporté par Mozilla Firefox (depuis la version 78), Google Chrome (depuis la version 88) et Safari (depuis la version 14)
• :matches() : Ancien nom, supporté par certains navigateurs : Google Chrome (depuis la version 66), Opera (depuis la version 53) et Safari (depuis la version 9).
• :-moz-any() (préfixe propriétaire) : utilisé par les navigateurs basés sur le moteur de rendu Gecko : Mozilla Firefox (depuis la version 4).
• :-webkit-any() (préfixe propriétaire) : utilisé par les navigateurs basés sur le moteur de rendu WebKit (ou son fork Blink) : Google Chrome (depuis la version 12), Opera (depuis la version 15), Safari (depuis la version 5) et Microsoft Edge (depuis la version 79).

Cette pseudo-classe n'est pas supportée par Internet Explorer et les anciennes versions de Microsoft Edge.

Apparence et caractéristiques

Voici un aperçu de l'apparence et des principales caractéristiques du thème.

Liens internes

• Utilisation de couleurs sur la base de teintes bleues.
  • Aperçu : [[abcd|abcd]], [[abcd#ancre|abcd]]

Références

• Utilisation d'un arrière-plan bleu foncé pour tout le contenu entre les balises <ref>...</ref>.
  • Aperçu : Une longue phrase<ref>abc, [[abcd|abcd]], 123.</ref>. Une autre longue phrase.
• Pour les modèles à l'intérieur des références, utilisation de couleurs spécifiques et épaississement des barres verticales séparant les paramètres pour une meilleure lisibilité.
  • Aperçu : abc<ref group="notes">{{Lien web|titre=titre de l'article|url=https://www.example.org}}.</ref> 123.

Les références multi-lignes sont également gérées de manière à faciliter le repérage visuel. Pour toutes les lignes de la référence à l'exception de la première et de la dernière, l'arrière-plan bleu foncé va jusqu'au bout de la ligne.

Aperçu :

Une phrase<ref>{{Lien web
 | titre = titre de l'article
 | url   = https://www.example.org
}}.</ref>. Une autre phrase.

Gras et italique

• Signalement des zones en gras et/ou italique sous la forme d'une bordure en petits tirets de couleur (jaune pour le gras, vert pour l'italique, et jaune-vert pour les deux en même-temps ou quand le type est indéterminé) au-dessus et en dessous du contenu en gras/italique.
  • Aperçu : abc '''texte en gras''' abc, abc ''texte en italique'' 123, abc '''''texte en gras+italique''''' abc
• Expansion de cette indication sur toutes les zones en gras et/ou italique, quel que soit leur contenu (modèles, liens, balises...). L'expansion est limitée à 10 séquences de gras ou italique par ligne pour des raisons de performance.
  • Aperçu : abc ''texte <u>souligné</u> en italique'' 123, abc ''texte {{lang|en|in English}} en italique'' 123

Modèles

• Utilisation de différentes couleurs sur des teintes jaunes à rouges pour les modèles.
  • Aperçu : {{lang|en|in English}}, {{Références|groupe=notes}}
• Gestion des imbrications de modèles jusqu'à trois niveaux, y compris multi-lignes (comme CodeMirror, mais qui utilise des arrière-plans gris foncé pour cela).
  • Aperçu : abc {{Modèle1|param=abc {{Modèle2|param=abc {{Modèle3|param=abc 123}} 123}} 123}} 123

Mots magiques et fonctions parseurs

• Utilisation de couleurs vertes et d'un peu de jaune pour les mots magiques et fonctions parseurs.
  • Aperçu : {{formatnum:1000}}

Balises HTML

• Utilisation de couleurs rose-violet pour les balises HTML, ainsi que pour les balises similaires de MediaWiki.
  • Aperçu : <u>souligné</u>, <span style="color:red;">texte</span>
• Utilisation d'une couleur bleu clair pour le contenu des balises issues d'extensions MediaWiki.
  • Aperçu : <math>formule mathématique</math>

Titres de section

Pour les titres de section, utilisation d'une couleur rouge clair sur arrière-plan rouge foncé, étendu jusqu'à la fin de la ligne. Cela permet de repérer plus facilement les titres de section :

 
== Titre de section ==
abc 123

Tableaux

Pour les tableaux, l'idée est de partir sur un ensemble de couleurs vertes, avec un peu de jaune :

{| class="wikitable alternance center"
|+ Titre du tableau
|-
! scope="col" | Titre colonne A
! scope="col" | Titre colonne B
! scope="col" | Titre colonne C
|-
| cellule 1A
| cellule 1B
| cellule 1C
|-
| cellule 2A
| cellule 2B
| cellule 2C
|}

Listes à puces

Pour les listes à puces, la puce est rouge, avec un fond jaune de forme ovale autour pour une identification plus facile :

* élément 1
** élément 2
# élément A

Si la liste à puces se trouve dans une référence, un jeu de couleurs spécifique est prévu :

Une phrase<ref>Selon les sources :
* élément 1
* élément 2</ref>. Une autre phrase.

Liens externes

• Utilisation de couleurs sur la base de teintes bleues à bleu-vert.
  • Aperçu : [https://www.example.org], [https://www.example.org texte]
• Si le lien externe se trouve dans une référence, un jeu de couleurs spécifique est prévu pour le faire ressortir visuellement du reste de la référence.
  • Aperçu : Une phrase<ref>abc [https://www.example.org texte] abc.</ref>. Une autre phrase.

Autres éléments

• Signature, modificateurs de comportement et lignes horizontales.
  • Aperçu : abc __NOTOC__ 123, ----
• Indentation des discussions. Afin de faciliter l'identification des deux-points, ceux-ci sont légèrement épaissis horizontalement par un effet d'ombres CSS.
  • Aperçu : :abc, ::abc
• Entités HTML.
  • Aperçu : abc abc
• Commentaires HTML.
  • Aperçu : abc <!-- commentaire --> abc
• Erreurs de wikicode (par exemple une balise HTML oubliée)
  • Aperçu : abc </span> abc
• Caractères invalides et caractères de contrôle indésirables (plus d'informations sur Aide:CodeMirror#Signalement_des_caractères_indésirables).
  • Aperçu : abc•123
• Tabulations, indiquées par une bordure verticale en pointillés entre deux tabulations (les tabulations ne sont normalement pas utilisées dans le corps des articles, elles se rencontrent principalement dans les balises d'extensions MediaWiki accueillant du code JSON (comme <templatedata>...</templatedata>)
  • Aperçu : abc
• Variables dans les modèles. Utilisation de couleurs dans les teintes oranges, avec les triples accolades en blanc. Une bordure haute en pointillés blancs signale que l'on est à l'intérieur d'une variable. Cette bordure en pointillés est étendue sur maximum 10 éléments différents de wikicode situés dans l'éventuelle partie après la barre verticale (il s'agit du comportement défini si le paramètre n'est pas présent lors de l'appel du modèle). Cette expansion est limitée à 10 éléments de wikicode pour des raisons de performance.
  • Aperçu : abc {{{param1|oui}}} 123
• Gras dans les en-têtes de tableaux. Mettre du gras dans un en-tête de tableau est une erreur, car les en-têtes de tableaux sont déjà affichés en gras.
  • Aperçu : ! scope="col" | Titre '''colonne''' A

Problèmes connus

Certains problèmes proviennent directement de l'extension CodeMirror, qui souffre de quelques bugs (comme pour les légendes d'images, dont la coloration est interrompue prématurément dès qu'un lien interne s'y trouve). Voir Aide:CodeMirror#Problèmes_connus pour la liste des problèmes les fréquents provenant de l'extension CodeMirror.

D'autres problèmes sont spécifiques à ce thème. Ces fonctionnalités utilisent parfois des règles CSS complexes. Ainsi que « quelques bricolages » CSS pour contourner divers problèmes et carences de CodeMirror.

Parmi les problèmes spécifiques à ce thème, voici les plus courants :

• Les pointillés signalant les zones en gras/italique peuvent parfois ne pas s'afficher autour d'éléments comme des modèles, liens, balises, etc. présents dans une zone de gras/italique. Et ce bien que l'on soit à moins de 10 séquences de gras/italique sur la ligne (la limite du système d'expansion gras/italique est fixée à 10 séquences par ligne pour des raisons de performance). Cela concerne surtout les cas de combinaisons gras+italique en même temps, plus complexes à identifier correctement.

Anciennes versions

D'anciennes versions du thème, compatibles avec les versions précédentes de certains navigateurs sont utilisables, parfois avec certaines fonctionalités en moins, la version minimum relative au support des propriétés CSS4 expérimentales est donnée à titre indicatif entre parenthèses. Mais la coloration syntaxique fournie par CodeMirror n'est souvent pas/plus supportée avec ces anciennes versions :

Mozilla Firefox (> 4)

@import url('//meta.wikimedia.org/w/index.php?action=raw&ctype=text/css&title=User:Tractopelle-jaune/CodeMirror/CodeMirror-dark-Advanced-Mozilla.css');

Microsoft Edge (>= 79)

Google Chrome (> 12)

Opera (> 15)

Safari (> 5)

@import url('//meta.wikimedia.org/w/index.php?action=raw&ctype=text/css&title=User:Tractopelle-jaune/CodeMirror/CodeMirror-dark-Advanced-WebKit.css');

Internet Explorer (> 10)

Microsoft Edge (< 79)

Versions plus anciennes d'autres navigateurs

@import url('//meta.wikimedia.org/w/index.php?action=raw&ctype=text/css&title=User:Tractopelle-jaune/CodeMirror/CodeMirror-dark-Standard.css');

Cette version n'utilise pas de pseudo-classes CSS4 et utilise à la place une autre méthode technique pour identifier les zones en gras/italique. Cette méthode est moins précise, et certains cas ne sont pas gérés correctement.