Manuel de formatage avancé

• 
  
  
  fermer

  Crédits

  Titre : Manuel de formatage avancé
  Auteur : Dr Lekter
  Date : 19 juillet 2020
  Images : Schéma sous CC0 & Photographie de cactus par Dr Lekter, postée sous CC BY-SA 3.0

  close
  
  

Introduction

Vous pénétrez ici dans un monde étrange. Étrange, car ce guide se veut une fenêtre sur une infime section d'un monde bien plus grand et complexe qui s'étend bien au-delà des frontières de ce site. Il a pour but de vous apprendre avant tout à comprendre comment fonctionnent les éléments susceptibles de vous être utiles dans vos articles ici, mais ne prétend nullement vous apprendre à maîtriser le CSS ou n'importe quel autre langage de façon complète ou même suffisante pour un autre usage. Il existe pour cela de nombreux cours en ligne et sites de référence.

Mais avant de passer au code lui-même, voyons les règles de base : le formatage basique que vous avez sûrement déjà utilisé sur le site s'appelle la syntaxe Wikidot ; une syntaxe est un ensemble de règles conçues pour faciliter la vie aux utilisateurs en leur permettant d'utiliser les fonctions les plus souvent utilisées (texte gras, italique, tableaux, etc) de façon très simple et rapide. Pour en apprendre plus sur cette syntaxe et quelques concepts basiques, le Guide de syntaxe est à votre disposition.

Cependant, dès que vous voudrez faire quelque chose de plus spécifique, il vous faudra passer par les "vrais" langages qu'utilisent les développeurs, designers et autres artistes du code sur internet. Ils ne dépendent pas de Wikidot, mais vous pouvez les y utiliser de différentes manières que nous allons voir ici.

Avant de passer à la section suivante, un survol rapide de quelques résultats originaux ou surprenants que vous pouvez obtenir par ces moyens pour vous donner une idée des possibilités offertes :

• SCP-3125, interface de digicode
• SCP-499-FR, stylisation des collapsibles et cadres
• SCP-5999, terminal de lecture
• SCP-369-FR, surprise !
• Et bien d'autres encore.

---

Le CSS

Le CSS — pour cascading style sheets, feuilles de style en cascade en français — est un langage utilisé pour définir l'apparence d'un objet. Il permet d'en spécifier les dimensions, la forme, la couleur et bien d'autres éléments encore. C'est celui que vous utiliserez dans 99 % des cas pour styliser vos articles, et par chance sa compréhension est très simple. Voyons cela.

Il existe deux moyens principaux d'organiser du texte et d'y appliquer du code : les éléments div et span.

Voici un élément span, qui concerne un segment de texte défini et permet de passer d'un style à l'autre sur la même ligne.

Voici un élément div, aussi appelé bloc (ou cadre) div parce qu'il concerne toute une portion de texte. C'est le div qui est utilisé pour les cadres d'entretiens ou rapports d'explorations stylisés dans les rapports SCP.

Il nécessite un retour à la ligne après la fin de son code pour passer à un autre format.

Apprenons donc comment ça marche.

Construction d'un cadre pas à pas

[[div]]
Texte
[[/div]]

Ça, c'est le modèle de base d'un div. Celui-ci ne fait rien, parce qu'on ne lui a rien dit de faire ; à nous maintenant de choisir ce à quoi on veut qu'il ressemble.

[[div style=" "]]
Texte
[[/div]]

Là-dedans, on va mettre une série de déclarations CSS qui sont les morceaux de code désignant chaque propriété comme la couleur de fond, la bordure, etc. Disons que je veux un fond bleu clair.

[[div style="background-color: skyblue;"]]
Texte
[[/div]]

---

Texte

Une déclaration CSS se compose toujours de la même façon : un argument CSS, ici background-color qui indique que l'on va spécifier quelque chose quant à l'arrière-plan, suivi de deux points puis une valeur qui indique ce qu'on veut lui faire ou comment, ici un nom de couleur en anglais. Ça aurait aussi pu être un code hexadécimal (ou RGBA, ou d'autres codes moins courants désignant aussi des couleurs) ou même le lien d'une image à afficher en arrière-plan. La déclaration se finit ensuite par un point-virgule, et peut ou non être suivie d'autres déclarations.

La seule difficulté de ce processus est de connaître les noms justes pour les arguments et valeurs : vous finirez par en connaître de plus en plus par cœur avec le temps, mais commencez par vous aider d'une liste de référence qui vous donnera tous les détails nécessaires.

En utilisant d'autres de ces valeurs, je peux rapidement donner une meilleure apparence à mon cadre div !

[[div style="background-color: skyblue; border: 1px solid black;"]]
Texte
[[/div]]

---

Texte

Ici, plusieurs valeurs se suivent pour désigner dans l'ordre différents aspects de l'élément demandé : je veux une bordure, donc je spécifie sa largeur (1 pixel), son apparence (continue, par opposition à des pointillés) et sa couleur (noir). Mais vous avez peut-être aussi remarqué un espacement peu agréable pour les yeux dans ce cadre.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em;"]]
Texte
[[/div]]

---

Texte

Les arguments margin et padding désignent respectivement l'espace entre le bord extérieur du cadre et le contenu au-dessus, en dessous et sur les côtés et l'espace entre son bord intérieur et le texte ou les autres éléments qu'il contient. Ils sont tous deux presque obligatoires, surtout padding, pour que votre cadre puisse avoir une apparence agréable.

+ Schéma explicatif

Vous pouvez ainsi modifier spécifiquement l'espace en haut, en bas, à droite ou à gauche en ajoutant -top, -bottom, -right ou -left derrière votre argument. Par exemple :

[[div style="background-color: gold; margin: 1em; padding: 0.5em; padding-bottom: 1.5em;"]]
Texte
[[/div]]

---

Texte

La mesure utilisée ici, l'em ou cadratin, est une mesure qui s'adaptera en fonction de la taille de la police utilisée en association. Si votre cadre contient des lettres très grandes, ces espaces s'adapteront pour y correspondre. Vous pouvez cependant aussi utiliser des pixels (px) pour une valeur fixe.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; font-size: 300%;"]]
Texte
[[/div]]

---

Texte

Mais passons un coup de brosse sur ce cadre pour le rendre plus présentable.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; font-size: 300%; border-radius: 0.5em; box-shadow: 5px 5px;"]]
Texte
[[/div]]

---

Texte

Voilà les angles arrondis et une ombre ajoutée, mais elle est un peu trop agressive pour les yeux et je l'aimerais vers le haut. Les deux premières indications en px indiquent l'ombre horizontale puis l'ombre verticale (axes x et y). Inversons la verticale et ajoutons une troisième mesure en px, qui indique un flou de l'ombre pour l'adoucir.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 5px -5px 6px;"]]
Texte
[[/div]]

---

Texte

Et pourquoi pas donner une couleur à cette ombre, d'ailleurs.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 5px -5px 6px #0404b4;"]]
Texte
[[/div]]

---

Texte

Et voilà, vous avez créé un cadre div ! Ça peut sembler complexe parce que nous avons fait référence à plusieurs reprises à des arguments dont vous n'avez peut-être jamais entendu parler, mais le véritable travail est précisément de comprendre et assimiler l'utilité et le fonctionnement de ces codes, et pour cela un seul moyen : essayer. Pour commencer et prendre la main avec les valeurs les plus communes, vous pouvez essayer cet outil par exemple, et vous apprendrez peu à peu à voler de vos propres ailes !

Les éléments span

Les span fonctionnent comme les cades div et avec les mêmes arguments, à l'exception de quelques propriétés qui ne sont pas applicables à un petit segment de texte.

[[span style="background-color: gold; border: 0.9px solid grey; border-radius: 0.2em; padding: 0.2em"]] Exemple de texte dans un span [[/span]] qui se poursuit ensuite sans conserver le même formatage

---

Exemple de texte dans un span qui se poursuit ensuite sans conserver le même formatage

Les modules CSS

L'ajout d'une propriété dite "inline" (via un style=" " directement dans le code de la page) à un élément span, div ou autre est un moyen facilité d'utiliser du CSS dans votre article. Cependant, il peut être plus pratique voire nécessaire d'utiliser un module CSS¹.

Un module CSS est un bloc de texte qui ne s'affichera nulle part sur votre page et contient un ensemble de déclarations CSS qui s'appliqueront à son contenu. Les différents thèmes du site ne sont que de gros modules CSS affectant le plus souvent l'apparence d'éléments esthétiques généraux — et c'est là que ça devient intéressant. Les modules CSS vous permettent non seulement de définir l'apparence d'éléments spécifiques que vous créez à partir de zéro, mais également de modifier les attributs et l'apparence d'éléments possédant déjà une apparence par défaut et auxquels vous ne pouvez pas appliquer de valeur style=" ". Ce code, par exemple, permet de modifier l'apparence des tableaux Wikidot :

[[module CSS]]
table.wiki-content-table {
    background-color: #CEF6CE !important;
    color: black !important;
}
table.wiki-content-table th {
    background-color: #3B0B17 !important;
    color: #F6CED8 !important;
}
[[/module]]

Et ainsi, ce code :

||~ Titre 1 ||~ Titre 2 ||~ Titre 3 ||
|| Cellule 1 || Cellule 2 || Cellule 3 ||

Donnera ceci :

Titre 1	Titre 2	Titre 3
Cellule 1	Cellule 2	Cellule 3

"table.wiki-content-table" est le nom CSS qui désigne les cases des tableaux et la spécification "th" désigne plus précisément les cases "Titre". En plus de leur donner une couleur de fond et de police différente, on ajoute la spécification "!important" pour indiquer que cette indication doit écraser l'affichage par défaut qui n'utilise normalement pas ces couleurs. Faites attention à ne pas abuser de cet outil cependant, limitez son usage aux codes qui ne marchent que quand vous l'y ajoutez. Un usage excessif ou mal calculé peut casser votre code (mais rien d'irréparable, si ça arrive contentez-vous de le retirer à nouveau et tout reviendra à la normale).

Mais vous aurez peut-être remarqué que le format a changé ? Effectivement, les modules font intervenir 1) une mise en forme pensée pour être plus lisible et 2) la nécessité de préciser à quel élément doit s'appliquer notre déclaration CSS, puisque le module n'est pas directement lié à un élément de la page mais à son ensemble. Le format de déclaration dans un module CSS est le suivant :

nomdel'élément {
    argument: valeur;
    argument: valeur;
    argument: valeur;
}

À noter que les espaces et retours à la ligne ne sont utilisés que pour la lisibilité du code : le module suivant serait également valable.

nomdel'élément{argument:valeur;argument:valeur;argument:valeur;}

Vous êtes maintenant en droit de vous demander comment trouver le nom d'un élément si vous désirez le modifier : pour cela, votre ordinateur possède un outil tout désigné que vous avez peut-être déjà utilisé, l'inspecteur d'élément. Nous reviendrons sur les possibilités de cet outil plus tard, mais sachez simplement qu'il vous suffit de faire clic droit puis "Inspecter" sur ce que vous désirez modifier pour en trouver le nom, qui s'affichera dans la fenêtre contextuelle apparue.

Un clic droit sur cette image me montre que les blocs utilisés ici s'appellent "div.code" ou tout simplement ".code" en CSS.

Une fois cette fenêtre ouverte, vous pouvez vous servir de l'outil d'inspection par curseur en haut à gauche plutôt que de repasser par clic droit à chaque fois. Conseil : Celui-ci est également accessible par le raccourci Ctrl + Maj + C.

Voyons à présent les différentes applications pratiques d'un module CSS.

Cas 1 : Vous utilisez de nombreuses fois le même cadre div dans votre article et vous aimeriez alléger votre code en évitant de devoir le répéter à chaque fois. Il vous faut donc définir une classe, c'est-à-dire créer un ensemble de règles que vous pourrez appliquer à plusieurs éléments simultanément. Pour cela, utilisez en guise d'élément à cibler un point suivi du nom que vous voulez donner à votre classe.

.votrenomdeclasse {
    padding: 1em;
    margin: 1em;
    background-color: gold;
    color: darkred;
    border: 1px dashed black;
}

Pour appliquer votre classe à un élément div, span ou autre, ajoutez-y simplement class="votrenomdeclasse".

[[div class="votrenomdeclasse"]]
Texte de votre bloc div
[[/div]]

---

Texte de votre bloc div

Cas 2 : Vous utilisez de nombreuses fois le même cadre div dans votre article en y changeant parfois un détail. Pour cela, vous pouvez 1) utiliser plusieurs classes ou 2) passer par l'ajout d'un style=" ". Voyons d'abord la première de ces deux méthodes.

.cadre {
    padding: 1em;
    margin: 1em;
    color: darkred;
    border: 1px dashed black;
}
.jaune {
    background-color: gold;
}
.bleu {
    background-color: lightblue;
}

Tous les éléments qui appartiendront à la classe "cadre" recevront ses attributs, et leur apparence pourra ensuite être précisée à l'aide d'une seconde classe plus spécifique, ici pour la couleur. L'ordre des classes ne change rien.

[[div class="cadre jaune"]]
Texte du cadre jaune
[[/div]]

[[div class="bleu cadre"]]
Texte du cadre bleu
[[/div]]

---

Texte du cadre jaune

Texte du cadre bleu

Mais vous pouvez aussi obtenir ce même résultat en combinant classe et style, comme ceci :

[[div class="cadre" style="background-color: gold;"]]
Texte du cadre jaune
[[/div]]

[[div class="cadre" style="background-color: lightblue;"]]
Texte du cadre bleu
[[/div]]

Aucune de ces deux options n'est meilleure que l'autre dans l'absolu, c'est à vous de voir ce qui sera le plus agréable et pratique à utiliser au cas par cas.

---

Des vertus de l'étude et de l'expérimentation comme apprentissage

Il existe un moyen plus efficace que tous les autres pour apprendre efficacement à manier la syntaxe avancée : essayer. L'inspection d'éléments, accessible notamment via clic droit ou Ctrl + Maj + I ou Ctrl + Maj + C (selon votre navigateur), est le meilleur moyen pour ce faire.

Une fois ceci fait, vous verrez toutes les propriétés de l'élément sélectionné et pourrez les modifier à loisir en suivant en direct l'effet de vos modifications sur la page. Ces modifications ne seront visibles que de vous, n'affecteront aucun autre utilisateur et seront réinitialisées si vous rechargez la page, alors lâchez-vous ! Voici un cadre quelconque pour vous entraîner :

Texte d'exemple

Si ce jeu vous amuse, vous pouvez le pousser plus loin en y ajoutant l'étude de formats existants, en comparant le code mis en œuvre avec le résultat pour comprendre ce qui fait quoi. Vous pouvez et êtes encouragés à vous essayer à cette activité un peu partout sur le site, mais voici quelques exemples de formats intéressants commentés selon cette méthode. P.S. : Si vous vous interrogez sur l'usage de components, l'onglet 2 pourrait bien être pour vous.

⁰

1

Format

Console SCiPNet 6.1

Comme dans une console, les liens affichent un ">" quand vous passez votre souris dessus.
Comme ceci.

Et voici pour ce format !

Code dur

[[div class="terminal"]]

[[div class="scanline"]]
[[/div]]

[[div class="text"]]
=²[[size 150%]] __Console SCiPNet 6.1__[[/size]]

[[module ListUsers users="."]]³
~~~
= Bienvenue, utilisateur #%%number%%⁴
~~~
[[/module]]

>⁵ Comme dans une console, les liens affichent un ">" quand vous passez votre souris dessus.

> [http://www.google.com Comme ceci.]

Et voici pour ce format !

[[/div]]
[[/div]]

Code CSS

div.terminal {
border: 1px solid black;
border: solid 3px #BBBBBB;
border-radius: 16px;
background-color: #131;
background-image: radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);⁶
background-position: center;
display: block;
box-shadow: inset⁷ 0 0 10em 1em rgba(0,0,0,0.5);
overflow: hidden;
}

div.terminal blockquote⁸ {
background-color: black;
border: double 3px #80FF80;
}

div.scanline {
margin-top: -40%;
width: 100%;
height: 60px;
position: relative;
pointer-events: none;
-webkit-animation: scan 12s linear 0s infinite;
animation: scan 12s linear 0s infinite;⁹
background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;¹⁰
}
@keyframes scan {
from { transform: translateY(-10%); }¹¹
to { transform: translateY(5000%); }¹²
}
@-webkit-keyframes scan {¹³
from { transform: translateY(-10%); }
to { transform: translateY(5000%); }
}

div.text {
color: rgba(128,255,128,0.8);
padding-left: 2em;
padding-top: 40%;
font-family: monospace;
font-size: 1.2em;
}
div.text a¹⁴ {
color: #90EE90;
text-decoration: none;
background: transparent;
}
div.text a.newpage {
color: #90EE90;
text-decoration: none;
background: transparent;
}

div.text a:hover¹⁵ {
color: #131;
text-decoration: underline;
background-color: #80FF80;
padding: 1px;
}
div.text a:hover::before {
content: "> ";¹⁶
}

2

Format

Survolez
l'image de votre souris !

Code dur

[[include :sandboxscpfr:component:image-zoom name=ImageExemple.jpg |caption=Survolez
l'image de votre souris ! |width=300px |align=right]]

Code CSS

Comment ça, il n'y en a pas ? Mais ce tout petit code ne peut pas suffire à spécifier un zoom, pourtant ? Mais peut-être qu'il cache autre chose…

Les codes include vont chercher le contenu d'une page (souvent nommée component) et le copient sur l'actuelle. Ils sont souvent utilisés pour les gros codes qui doivent être utilisés à plusieurs endroits en ne changeant que quelques petits éléments (comme le nom de l'image et la légende ici), un peu à la manière des classes CSS mais pour tous types de codes. Le module de crédit que vous voyez sur tous les articles du site ou justement le code des images avec légende dans les rapports SCP sont utilisés via un include, par exemple. Mais comment ça marche ?

La mention "include" est suivie dans l'ordre du nom du site Wikidot puis de la page où aller chercher le code et du texte à mettre dans les "trous" laissés volontairement tels que la légende.

Le nom du site est en réalité son URL sans ".wikidot.com", entourée de doubles points ; dans le cas de sandboxscpfr.wikidot.com, on obtient donc :sandboxscpfr:. Ensuite, le nom de la page sur ce site, c'est-à-dire ce qui suit "sandboxscpfr.wikidot.com/" dans son adresse. On appelle ce nom le nom unix¹⁷. À noter que si la page à chercher se trouve sur le même site où on utilise l'include, il n'y a pas besoin de préciser le nom du site.

Pour trouver le code complet, il va donc falloir qu'on se rende à cette page ! En reconstituant son lien avec une précision toute archéologique, on obtient donc : http://sandboxscpfr.wikidot.com/component:image-zoom. Voyons le code source.

[[include :sandboxscpfr:component:image-zoom-base name={$name} |caption={$caption} |width={$width} |width=300px |link={$link} |link=# |align={$align} |align=right]]

Allons bon, encore ? Oui, c'est un component intermédiaire qui permet de ne pas spécifier certaines valeurs (comme {$link}) qui afficheraient un message d'erreur si on allait directement chercher la page d'origine¹⁸. Mais répétons donc l'opération : http://sandboxscpfr.wikidot.com/component:image-zoom-base. Bingo !

[[module CSS]]
.enlarge {
transition: .25s;
}
.enlarge:hover {
transform: scale(1.6);¹⁹
transition: .25s;
transition-delay: .4s;
z-index: 1000;
}
[[/module]]

[[div class="scp-image-block block-{$align}²⁰" style="width: {$width};"]]
[[image {$name} class="enlarge"²¹ style="width: {$width};" link={$link}]]
[[div class="scp-image-caption" style="width: {$width};"]]
{$caption}²²
[[/div]]
[[/div]]

3

Format

Contenu de la page à ne pas effacer

Contenu de la page à effacer

Contenu de la page à ne pas effacer

Contenu de la page à effacer

Cliquer pour effacer

Contenu de la page à ne pas effacer.

Code dur

Contenu de la page à ne pas effacer

[[div_ class="fadeout-wrapper"]]²³

Contenu de la page à effacer

[[span class="escape"]]Contenu de la page à ne pas effacer[[/span]]²⁴

Contenu de la page à effacer

[[collapsible show="Cliquer pour effacer" hide=" "]]²⁵

[[div class="cover"]]²⁶
@@@@
[[/div]]

[[/collapsible]]

[[/div]]

Contenu de la page à ne pas effacer

Code CSS

@import url('http://smlt.wdfiles.com/local--code/ukwhatn%3Afadeout/1');²⁷

:root {²⁸
--fadeout-background: white;
--fadeout-time: 1s;
--cropped-header: url(http://smlt.wdfiles.com/local--files/ukwhatn:fadeout/header-crop.png);²⁹
}

div#container-wrap {³⁰
background-image: var(--cropped-header);
}

.fadeout-wrapper {
position: relative;
overflow: hidden;
}

.fadeout-wrapper .cover {
width: 100%;
height: 200%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background: var(--fadeout-background);
color: transparent;
animation: cover-anim var(--fadeout-time) linear 0s 1 forwards;
}

@keyframes cover-anim {³¹
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.fadeout-wrapper .escape {
position: relative;
display: inline-block;
z-index: 3;
}

.fadeout-wrapper .fadein-txt {
position: relative;
z-index: 3;
opacity: 0;³²
animation: cover-anim³³ var(--txt-fadein-time) linear var(--txt-fadein-delay) 1 forwards;
}

---

Conclusion

Si vous avez lu et compris l'intégralité de ce qui précède, il ne devrait plus vous manquer que la pratique pour passer maître dans l'art de la syntaxe avancée. Si vous deviez avoir des questions ou des problèmes divers sur le sujet, n'hésitez pas à me contacter par message privé (Dr Lekter sur Wikidot, Lekter#1551 sur Discord) ou à poser la question dans le salon #aide-technique du serveur officiel du site.

Bonne chance dans votre quête, et sachez faire un usage sage et mesuré des capacités que vous acquerrez sur la route !

Récapitulatif des liens utiles

pour aller plus loin

» Liste des arguments CSS «
» Créer vos propres cadres div «
» Documentation complète «
» Codes couleur HTML «
» Codes prêts à l'usage³⁴ «

Notes

1. Et c'est par là que devrait idéalement passer toute règle appliquée à plus d'un élément, mais voyons déjà de quoi on parle.

2. Aligne au centre la ligne où il est placé.

3. Ce module cible un utilisateur Wikidot, ici celui qui consulte la page, et peut ensuite afficher diverses informations en rapport avec lui comme son pseudonyme, les pages qu'il a créées ou d'autres données. Si l'utilisateur qui consulte la page n'a pas de compte, le contenu du module ne sera pas affiché. Plus d'informations.

4. Affiche l'identifiant de l'utilisateur, un équivalent numérique à son pseudo.

5. Dans ce format, l'apparence des blocs de citation est modifiée, voir CSS plus bas.

6. Donne au fond une couleur en dégradé circulaire, partant du centre pour aller vers les bords.

7. Affiche l'ombre à l'intérieur de l'élément plutôt qu'à l'extérieur.

8. Désigne les blocs de citation, créés avec un chevron > en début de ligne.

9. Définit une animation déjà proposée par le navigateur, un effet de "barre de scan", puis indique la durée de l'animation et sa régularité.

10. Ajoute un effet similaire à une ombre floue autour de la barre de scan pour qu'elle soit plus esthétique qu'un simple trait.

11. Point d'où part la barre de scan.

12. Point où s'arrête la barre de scan.

13. Les webkits sont des versions d'un code spécifiquement compatibles avec un navigateur qui autrement ne les supporterait pas, ici Safari.

14. La lettre "a" désigne toujours les liens. Elle peut être utilisée seule pour affecter tous les liens de la page ou derrière un autre nom pour cibler ceux d'un élément précis.

15. Les propriétés "hover" désignent ce qui se passe lorsqu'un élément est survolé du curseur.

16. Fait apparaître le ou les caractères indiqués avant l'élément lorsqu'il est survolé.

17. Et si vous avez lu le guide de syntaxe, vous savez déjà que c'est aussi celui qu'on utilise dans les liens internes.

18. Une pratique loin d'être uniforme dans les components, la plupart n'en ont pas besoin.

19. Agrandit l'élément ciblé de 60 %.

20. Les arguments en format {$exemple} dans un component sont les champs que l'utilisateur pourra remplir librement en l'utilisant. Il lui suffira d'écrire "|exemple=Contenu de l'exemple" pour ce faire. Ici, en utilisant "left", "right" ou "center", il définira ce bloc div comme appartenant à une classe contenue dans le thème du site lui-même pour l'aligner correctement.

21. Cette image s'est donc vu assigner la classe CSS ci-dessus, qui agrandit les éléments quand ils sont survolés. C'était aussi simple que ça !

22. Légende de l'image.

23. Ce qui se trouve dans ce div sera effacé par notre code…

24. Sauf le contenu des spans et divs de la classe "escape" qui a été créé exprès pour échapper à cet effet.

25. Cliquer sur le collapsible affiche le div "cover" et déclenche l'effet.

26. Ce div contient tout le code qui sera affiché normalement par le collapsible une fois ouvert.

27. Les @import sont l'équivalent d'un component dans du CSS : ils vont chercher un code ailleurs et le copient à l'endroit où ils sont utilisés. On peut d'ailleurs retrouver la page Wikidot où celui-ci est hébergé en retirant "/local-files/" et l'extension numérique, "/1", "/2" ou autre. Voir plus bas pour le code entier.

28. L'argument :root indique les variables, c'est-à-dire les valeurs qui iront remplir des trous laissés à dessein dans le code importé pour permettre son adaptation. C'est en quelque sorte l'équivalent du |exemple=Contenu" des includes.

29. Définit une image de fond différente pour l'en-tête qui constitue le haut du site (ce motif répété sur lequel on ajoute le titre "Fondation SCP", la barre de navigation, etc.) sans dégradé noir dessous. En effet, l'arrière-plan du texte qui disparaît est blanc et se remarquerait de façon fort laide s'il était utilisé vers le haut de la page sans cette précaution.

30. Désigne l'image d'arrière-plan de l'en-tête du site.

31. Définit une animation qui pourra être appliquée à n'importe quel élément du code CSS.

32. Une opacité de 1 correspond à un texte normal, et une valeur de 0 le rend parfaitement transparent.

33. Applique l'animation plus haut.

34. Ensemble de bonnes ressources d'analyse et expérimentation.