Aller au contenu

CSS⚓︎

Scroller en douceur⚓︎

smooth.css
1
2
3
4
5
/* Applying it to the html element will provide smooth scrolling to anchors
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
html {
  scroll-behavior: smooth;
}

Prendre en compte les préférences utilisateur·ice pour lancer une animation⚓︎

motion.css
/* Remove animations for folks who set their OS to reduce motion.
 1. Immediately jump any animation to the end point
 2. Remove transitions & fixed background attachment
 See: https://github.com/mozdevs/cssremedy/issues/11
*/
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}

Une autre option est de le faire directement en ne chargeant la CSS dédiée aux animations que si la préférence utilisateur·ice la rend acceptable :

motion-link.html
1
2
3
4
5
6
7
/* Another approach (no-motion-first approach)
   See: https://tatianamac.com/posts/prefers-reduced-motion/ */
<link
  rel="stylesheet"
  href="animations.css"
  media="(prefers-reduced-motion: no-preference)"
/>

Avoir un bon ratio pour les vidéos⚓︎

Une façon documentée par ici pour afficher des incrustations vidéos dans un format convenable :

video-ratio.css
1
2
3
4
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Un reset minimaliste⚓︎

Un reset très bien documentée par ici qui est relativement court :

reset.css
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

J’ajoute souvent aussi ces quelques règles que j’estime être importantes pour avoir des styles par défaut cohérents :

reset-extras.css
summary {
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
[disabled] {
  pointer-events:none;
  opacity: 0.3;
}

Il y a d’autres projets comme minireset.css qui existent.

Masquer du contenu⚓︎

Il y a plusieurs façons de le faire mais je trouve que la meilleure explication vient de Kitty Giraudel à travers deux articles de 2020.

screen-readers-only.css
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
.sr-only.sr-only--focusable:focus,
.sr-only.sr-only--focusable:active {
  clip: auto !important;
  -webkit-clip-path: auto !important;
  clip-path: auto !important;
  height: auto !important;
  overflow: visible !important;
  width: auto !important;
  white-space: normal !important;
}

C’est ensuite utilisable ainsi, par exemple pour un lien d’accès direct au contenu où l’on a besoin de conserver le focus :

<a href="#main" class="sr-only sr-only--focusable">Skip to content</a>

Changement de graisse⚓︎

Lorsqu’on clic sur un élément pour le rendre gras (ou l’inverse), ça modifie l’espace réservé par le navigateur pour ce(s) terme(s). Parfois, cela peut engendrer des effets disgracieux (hover sur un lien, item actif d’un onglet, etc).

Une solution trouvée par ici est de charger le contenu en gras dans un ::before

reserve-bold-space.css
1
2
3
4
5
6
7
.reserve-bold-space::before {
  content: attr(data-text);
  font-weight: bold;
  display: block;
  block-size: 0;
  visibility: hidden;
}

On peut ensuite l’appeler ainsi dans le HTML :

1
2
3
<div class="reserve-bold-space" data-text="The tab label">
    The tab label
</div>

Notez bien qu’il faut que le contenu du data-text soit le même que le contenu affiché !

Augmenter la spécificité d’une classe⚓︎

Si vous n’avez accès qu’à une classe et qu’il vous faut la spécificité d’un id par exemple, il est possible d’utiliser :not() avec un id ce qui va artificiellement passer ce sélecteur à une spécificité d’id même si celui-ci n’existe pas ! Merci Robert Koritnik.

bump-specificity.css
1
2
3
.app:not(#nonexisting) {
  /* whatever. */
}

Pour tester les spécificités en CSS : Specificity Calculator

🧑‍🔬 Cas d’usages de is() et has()⚓︎

Support navigateur

Attention, si is() n’est pas trop mal supporté, has() n’est pas implémenté par de nombreux navigateurs à ce jour (22 août 2022). Je consigne les cas d’usage ici pour l’avenir mais ça n’est pas envisageable en production pour l’instant.

Plein d’exemples qui viennent du blog de webkit.

Lorsque tu veux que les éléments qui suivent un titre soient proches de ce titre :

has-titles.css
1
2
3
:is(h1, h2, h3, h4, h5, h6):has(+ :is(p, figcaption, pre, dl, ul, ol)) {
  margin-bottom: 0;
}

Lorsque tu veux que ton formulaire t’indique un peu mieux où est l’erreur :

has-errors.css
1
2
3
fieldset:has(input:invalid) label {
  color: red;
}

Ici, j’applique un style au label mais ça pourrait être plus large bien entendu, ça ouvre de très nombreuses possibilités !

Lorsque tu veux changer des variables CSS en fonction d’un choix utilisateur·ice (par exemple un sélecteur de thème) :

has-choice.css
1
2
3
4
5
6
body:has(option[value='pony']:checked) {
  --font-family: cursive;
  --text-color: #b10267;
  --body-background: #ee458e;
  --main-background: #f4b6d2;
}

Ça ne fait qu’effleurer les possibilités mais ça promet .

Un article par Bramus Van Damme à ce sujet ainsi qu’un article sur le blog de Chrome qui donnent d’autres exemples.

Pour aller plus loin/différemment⚓︎


Dernière mise à jour: 2022-09-14