unité "rem"

sus aux pixels !

un pixel n'est pas accessible

Une taille en pixel est figée pour l'utilisateur
(le zoom page n'est pas le zoom texte)
Le pixel n'est pas responsive
(1 pixel sur desktop ne vaut pas un pixel sur mobile)

Why you should never use px to set font-size in CSS

la solution ? rem !

unité rem

l'unité fluide par excellence

cette boîte a une largeur de 20rem

1rem = 1x la taille de police de <html>

unité rem

mais quelle taille de police dans <div> ?

body

div

html {
  font-size: 15px;
}
body {
  width: 600px;
  padding: 10px;
  font-size: 20px;
}
div {
  font-size: 2rem;
}

unité rem

et maintenant, quelle taille de police dans <div> ? 😌

body

html {
  font-size: 15px;
}
body {
  font-size: 200%;
}
section {
  font-size: 2em;
}
div {
  font-size: 2rem;
}

section

div

astuce de pro !

variables CSS

:root {
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
}

h1 {
  font-size: var(--text-20);
}

unités de Viewport

leur référence ? la taille de la fenêtre

vw : largeur du viewport
vh : hauteur du viewport
vmin : côté le plus petit du viewport
vmax : côté le plus grand du viewport

1vw = 1% de la largeur de la fenêtre

unités de Viewport étendues

svw / svh : small viewport width / height
lvw / lvh : large viewport width / height
dvw / dvh : dynamic viewport width / height

100dvh

tailles intrinsèques

"Taille du contenu"... mais dépend du type d'élément (block, inline, flex item, grid item, ...)

width: auto

width: min-content

"Taille du contenu" minimum

"Taille du contenu" maximum, insécable

width: max-content

"Taille du contenu" maximum, sécable

width: fit-content

Exercice !

unités et valeurs modernes

Les sélecteurs CSS

pour cibler les bons éléments

p {...}

cible tous les éléments <p> de la page

.banane {...}

cible tous les éléments de class="banane"

#kiwi {...}

cible l'élément avec un id="kiwi"

élément, classe et id

enfants et descendants

.kiwi span {...}

cible tous les éléments <span> descendants d'un élément de classe "kiwi"

descendants

enfants

.kiwi > span {...}

cible tous les éléments <span> enfants d'un élément de classe "kiwi"

combinaison de sélecteurs

p.kiwi {...}

cible tous les éléments <p> ayant aussi une class="kiwi"

ET

p , .kiwi {...}

cible tous les éléments <p> ou ceux ayant
une class="kiwi"

OU

h1 + p {...}

cible tous les éléments <p> dont le frère immédiatement précédent est <h1>

frères

h1 ~ p {...}

cible tous les éléments <p> dont l'un des frères précédent est <h1>

frères

siblings (fraternité)

place dans la fratrie

.kiwi:first-child {...;}

cible les éléments .kiwi et qui sont premiers enfants

.kiwi:nth-child(3) {...;}

cible les éléments .kiwi et qui sont 3e enfants

.kiwi:nth-child(odd) {...;}

cible les éléments .kiwi et qui sont impairs

pseudo-classes (= tout ce qui commence par ":")

.element:hover {...}

cible un élément lors du survol (souris)

.element:focus {...}

cible un élément lors du focus ( clavier, ou clic)

.element:hover,
.element:focus {...}

cible un élément au survol ou au focus

.element:only-child {...}

cible un élément qui n'a pas de frère

.element:empty {...}

cible un élément qui n'a pas d'enfant

pseudo-éléments (= tout ce qui commence par "::")

.element::before {
  content: "kiwi";
  background: hotpink;
}

génère un pseudo-élément au début du contenu de .element

Attribut

[type="number"] {...;}

cible les éléments dont l'attribut HTML "type" vaut "number"

[href^="https"] {...;}

cible les éléments dont l'attribut HTML "href" commence par "https"

[href$=".pdf"] {...;}

cible les éléments dont l'attribut HTML "href" termine par ".pdf"

[href*="alsacreation"] {...;}

cible les éléments dont l'attribut HTML "href" contient "alsacreation"

[type] {...;}

QUIZ !

h1:first-child {...}

.parent

p.banane

h1.banane

h1.kiwi

h1.kiwi

h1

span

p:first-child {...}

🚫

p:first-of-type {...}

p:nth-child(3) {...}

.kiwi:first-child {...}

🚫

.kiwi:first-of-type {...}

🚫

h1:nth-child(2 of .kiwi) {...}

.banane ~ .banane {...}

les sélecteurs CSS modernes

:not()

pseudo-classe de négation

div:not(.kiwi) {
  /* div qui n'a pas la classe .kiwi */
}

div:not(:first-child) {
  /* div qui n'est pas première enfant */
}

div:not(.container > div) {
  /* div qui n'est pas enfant direct de .container */
}

div:not(div + div) {
  /* div qui n'est pas précédée d'une div */
}

div:not(:hover, :focus) {
  /* div qui n'est pas survolée ni focusée */
}

div:not(.kiwi):not(:first-child) {
  /* div qui n'a pas la classe .kiwi et qui n'est pas 1ère */
}

:has()

quand tu veux cibler le parent (mais pas que...)

a:has(img) {
  color: hotpink;
}

cible les liens qui contiennent une image

a:has(> img) {
  color: hotpink;
}

cible le lien parent direct d'une image

label:has(+ input) {
  color: hotpink;
}

cible le label précédent un input

:has()

button:not(:has(> .icon)) {
  color: hotpink;
}

cible un bouton qui n'est pas parent direct d'un .icon

.product:has(.discount) {
  order: -1;
}

je veux mettre en avant les produits soldés

-50%

.card {
  display: grid;
  grid-template-columns: auto 1fr;
}
.card:has(>img) {
  gap: 20px;
}

https://codepen.io/raphaelgoetter/pen/vYdVQPX

Je veux une gouttière ici, mais uniquement quand il y a une image

je veux une gouttière conditionnelle

.form-check:has(input:checked) {
  background: #ddd;
}

https://codepen.io/raphaelgoetter/pen/MWXwpaJ?editors=1100

je veux une couleur de fond quand un enfant est coché

Sélecteurs de focus

clavier / clic / touch

:focus

Indicateur de focus global quelle que soit la méthode (clavier, souris, touch, JavaScript, etc.)

:focus-visible

Indicateur de focus uniquement là où il est pertinent pour l'utilisateur (principalement les utilisateurs de clavier)

:focus-within

Indicateur de focus pour un élément ou l'un de ses descendants ayant le :focus

Sélecteurs de formulaire

pour cibler les états d'un formulaire

Sélecteurs de formulaire

pour cibler les états d'un formulaire

:user-valid

:user-invalid

Versions plus récentes et plus "intelligentes" (uniquement après interaction avec l'utilisateur)

https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Selectors/:user-valid

Exercice !

sélecteurs de formulaire

Unités et sélecteurs modernes

CSS

unité "rem"

sus aux pixels !

un pixel n'est pas accessible

la solution ? rem !

unité rem

unité rem

unité rem

astuce de pro !

unités de Viewport

unités de Viewport étendues

tailles intrinsèques

Exercice !

Les sélecteurs CSS

pour cibler les bons éléments

QUIZ !

les sélecteurs CSS modernes

:not()

:has()

:has()

Sélecteurs de focus

Sélecteurs de formulaire

Sélecteurs de formulaire

Exercice !

C'était top !