Astuces de skinnage web avancé

Qui suis-je, que dis-je

Directeur de l'association Scenari et freelance Scenari (spécialité skinnage).

Nombreux skins réalisés, dont ceux des Rencontres 2009, 2013, 2014, 2020, 2021, 2022.

Expérience personnelle empirique.

CSS : sélecteurs utiles

Pseudo-éléments

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle.

Les plus utilisé :

  • ::before

  • ::after

Exemple

.default #tools .anc_yes .lbl::before {

display: block;

background: white;

width: 20px;

height: 20px;

content: ' ';

position: absolute;

transform: rotate(45deg);

bottom: -13px;

left: calc(50% - 10px);

box-shadow: 0 0 10px #262626;

}

sélecteurs spécifiques

  • Espace : tous les descendants

  • > : seulement les éléments fils

  • + : élément frère suivant

  • ~ : tous les éléments frère suivants

CSS : fonctions utiles

  • rgba() : définir une couleur avec transparence.

    exemple : background-color:rgba(16,170,158, 0.5);

  • calc() : définir une dimension à partir d'un calcul pouvant combiner différentes unités

    exemple : margin-left :calc(50% - 10px) ;

  • var() : définir une variable qu'on peut réutiliser ensuite

    exemple :

    :root{

    --couleur2:#eff3f7;

    }

    background: var(--couleur2);

  • counter() : définir un compteur automatique

    exemple :

    body{counter-reset: section;}

    h2::before{

    counter-increment: section;

    content: "Section " counter(section) ": ";

    }

CSS styler les barres de défilement

Exemple

/* largeur */

::-webkit-scrollbar {

  width: 20px;

}

/* fond */

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px grey;

  border-radius: 10px;

}

/* barre */

::-webkit-scrollbar-thumb {

  background: red;

  border-radius: 10px;

}

CSS responsive design

@media (max-width: 1300px) {

....

}

Utiliser des icônes comme une police de caractères

https://fontello.com/ propose une collection d’icônes à sélectionner puis à utiliser comme caractère d'une police de caractères.

Mais on peut aussi y utiliser ses propres icônes :

  • téléverser les icônes svg

  • les sélectionner (avec ou sans autres icônes de la collection de fontello)

  • télécharger le zip

  • intégrer la police comme n'importe quelle police dans une css

  • utiliser content:'...' pour afficher l'icône.

Avantages :

  • on manipule la taille avec font-size

  • on peut appliquer un text-shadow

  • on peut changer la couleur comme on veut

Modification du contenu html

  • Librairie scPaLib.findNode(s) pour rechercher des éléments html (il existe d'autre librairies JS)

    • findNode pour trouver le premier élément

    • findNodes pour faire un tableau de tous les éléments trouvés

  • appendChild, insertBefore, ...

  • Création d'éléments avec document.createElement

Exemple

scPaLib.findNode("ide:main").appendChild(scPaLib.findNode("ide:menu"));

On va chercher l'élément d'id « main », et comme dernier élément fils dedans, on va mettre l'élément d'id « menu ».

Exemple

var vBoutonTheme=document.createElement("a");

On crée un nouvel élément html « a »

vBoutonTheme.setAttribute('class', 'boutonTheme');

On lui donne une classe « boutonTheme »

vBoutonTheme.innerHTML="Basculer en thème clair/sombre";

On lui donne un contenu textuel

Switch de style (clair/sombre, dys/pas dys, ...)

  • Ajout d'une classe sur le body & ajustement de la css en fonction

Exemple

  • Javascript :

    vBoutonMode.addEventListener("click", document.body.classList.toggle("mode-dys");)

    On écoute le clic sur le bouton de changement de mode, et sur chaque clic on met ou enlève la classe mode-dys.

  • CSS :

    body.mode-dys *{ // sur tous les éléments descendants du body ayant la classe .mode-dys ...

    font-family:"dys" !important; // ... on force l'usage de la police dys

    }

Persistance d'une page à une autre

localStorage.setItem("theme", theme); Pour enregistrer une donnée.

localStorage.getItem("theme") Pour récupérer une donnée.

Exemple : persistance du style dys (enregistrement)

if (document.body.classList.contains("mode-dys")) { // si le body a la classe mode-dys ...

mode = "dys"; // ...alors la variable mode devient dys

}

localStorage.setItem("mode", mode); // on enregistre le mode dans le localstorage

Exemple : persistance du style dys (récupération)

if (localStorage.getItem("mode") == "dys") { // si le mode du localstorage est dys ...

document.body.classList.add("mode-dys"); // ... alors on met la classe mode-dys au body

}

Exemple : persistance du style sombre

if (localStorage.getItem("theme") == "dark") { // si le thème du localstorage est dark ...

document.body.classList.add("dark-theme"); // ... alors on met la classe dark-theme au body

} else if (localStorage.getItem("theme")==null){ // sinon ...

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); // ... on interroge le thème du navigateur

if (prefersDarkScheme.matches) { // si c'est dark ...

document.body.classList.add("dark-theme"); // ... alors on met la classe dark-theme au body

} else { // sinon ...

document.body.classList.remove("dark-theme"); // ... on l'enlève

}

}

Savoir ce qui est supporté ou pas

Liste des raccourcis clavier

Liste des fonctions de navigation et leurs raccourcis clavier correspondant :

  • Bloc Suivant : flèche droite, flèche bas, barre espace, page suivante, touche N
  • Bloc Précédent : flèche gauche, flèche haut, retour arrière, page précédente, touche P
  • Diapositive Suivante : touche T
  • Diapositive Précédente : touche S
  • Retour accueil : touche Début
  • Menu : touche M
  • Revenir à l'accueil : touche H
  • Fermer zoom : touche Échap.