Oui, avant tout recours à JS on devrait vérifier que ce n'est pas possible en CSS/HTML5 pur...
Le nesting est en effet un game changer, même si la dernière fois que j'ai voulu reprendre le CSS de mon appli de documents/exerciseur pour le collège, j'avais omis de compter avec le manque de mises à jours sur les ordis du boulot.
Au passage, je me note les possibilités du RGB() pour dériver une couleur d'une autre: à utiliser dans mon framework perso... plus simple que les multiplications de variables CSS... On ne garde qu'une variable pour la couleur de base et on calcule les autres couleurs nécessaires...
/* remove blue from a color */
rgb(from #123456 r g 0);
/* make a color transparent */
rgb(from #123456 r g b / 0.5);
/* make a color lighter */
hsl(from #123456 h s calc(l + 10));
/* change the hue in oklch color space */
oklch(from #123456 l c calc(h + 10));
/* mix two colors in oklab color space */
color-mix(in oklab, #8CFFDB, #04593B 25%);
Et ça marche avec des variables CSS:
*{
--base-color:red;
}
/Ajouter de la transparence/
.transparent{
hsl(from var(--base-color) h s calc(l + 12));
}
/ désaturer une couleur de base/
.desat{
color: hsl(from var(--base-color) h calc(s + -50) l);
}
/ complémentaire/
.complementaire{
hsl(from var(--base-color) calc(h + 180) s l);
}
/ plus loin : primary, seconday, tertiary/
.primary{
hsl(from var(--base-color) calc(h + 90) s l);
}
.secondary{
hsl(from var(--base-color) calc(h + 180) s l);
}
.tertiary{
hsl(from var(--base-color) calc(h + 270) s l);
}
De plus, depuis un an, on peut centrer officiellement un block verticalement sans quitter le display:block; à l'aide de align-content: center; #youpi
Et que dire de @starting-style qui permet de se passer de keyframes ?
.toast {
transition: opacity 1s, translate 1s;
opacity: 1;
translate: 0 0;
@starting-style {
opacity: 0;
translate: 0 10px;
}
}
Via https://link.toutetrien.lithio.fr/
<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/style.css"/>
<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/>
<script src="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.js">
<script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});
► Commentaires
