Albéric Trancart
Tech lead & Coach @ Theodo
Co-organisateur Human Talks Paris
@alberictrancart
.title {
font-size: 30px;
font-family: sans-serif;
color: #366CC3;
border: 3px solid #366CC3;
padding: 20px;
width: 200px;
border-radius: 20px;
vertical-align: middle;
}
<body>
<div class="title">
Le <strong>CSS</strong>,<br />
<strong>C</strong>a<br />
<strong>S</strong>aoule<br />
<strong>S</strong>ouvent
</div>
</body>
<body>
<div class="title">
Le CSS,<br />
Ca<br />
Saoule<br />
Souvent
</div>
</body>
<body>
</body>
<body>
<div>
Le CSS,<br />
Ca<br />
Saoule<br />
Souvent
</div>
</body>
.title {
font-size: 30px;
font-family: sans-serif;
color: #366CC3;
border: 3px solid #366CC3;
padding: 20px;
width: 200px;
border-radius: 20px;
}
.title {
font-size: 30px;
font-family: sans-serif;
color: #366CC3;
border: 3px solid #366CC3;
padding: 20px;
width: 200px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.title {
font-size: 30px;
font-family: sans-serif;
color: #366CC3;
border: 3px solid #366CC3;
padding: 20px;
width: 200px;
border-top-left-radius: 20px;
}
.title {
font-size: 30px;
font-family: sans-serif;
color: #366CC3;
border: 3px solid #366CC3;
padding: 20px;
width: 200px;
}
.title {
font-size: 30px;
font-family: sans-serif;
color: #366CC3;
border: 3px solid #366CC3;
padding: 20px;
}
.title {
font-size: 30px;
font-family: sans-serif;
color: #366CC3;
border: 3px solid #366CC3;
}
.title {
font-size: 30px;
font-family: sans-serif;
color: #366CC3;
}
.title {
font-size: 30px;
font-family: sans-serif;
}
.title {
font-size: 30px;
}
.container {
position: relative;
height: 100vh;
}
.title {
font-size: 30px;
font-family: sans-serif;
color: #366CC3;
border: 3px solid #366CC3;
padding: 20px;
width: 200px;
border-radius: 20px;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<body>
<div class="container">
<div class="title">
Le <strong>CSS</strong>,<br />
<strong>C</strong>a<br />
<strong>S</strong>aoule<br />
<strong>S</strong>ouvent
</div>
</div>
</body>
Des propriétés cascadent et pas d'autres
Exemple : color cascade mais pas padding
L'indexation des tableaux
Exemple : tableau[0] pour le 1er élément
Les propriétés intéragissent entre elles
Exemple : position et z-index
Des comportements par défaut pas évidents
Exemple : <img> a un display: inline
La coercion des types
"3" - 1 // -> 2 "3" + 1 // -> "31"
Des comportements par défaut pas évidents
try { return 2; } finally { return 3; } // -> retourne 3
Des propriétés non/mal supportées
Exemple : grid
ou position: sticky
pour IE11
Plusieurs standards/envs en même temps
Exemple : CJS et ESM, Node et Browser
Une infinité de résolutions d'écran possibles
Impossible de tester l'aspect sur tous les devices
Le code doit être transpilé
Exemple : configurer Babel/Typescript n'est jamais évident
Un langage, c'est la capacité d'exprimer une pensée au moyen d'un système de signes, et le plus souvent d'une syntaxe
Parler un langage, c'est exprimer une intention
au moyen d'un vocabulaire et en respectant une grammaire
Vous
Langage normal
Interlocuteur
Suite de vocables
avec syntaxe correcte
Machine
Product
Owner
Langage normal
Machine
Code
Code
Vous
User Story
Perte d'intention
Interprétation
Designer
Machine
Code
Vous
Maquette
Product
Owner
User Story
CSS
Quelle doit être la largeur de la sidebar ?
Absolue ? 200px ? 15rem ? 10cm ?
Quelle est l'intention ?
Relative ? Pourcentage du conteneur ? Pourcentage du viewport ?
Ratio de hauteur/largeur ?
Relative
Absolue
Piège n°1 : il y a des faux amis
Piège n°2 : il y a de la polysémie
Exemple : vertical-align
ne sert pas à aligner verticalement un block dans son parent
Exemple : vertical-align
sert à aligner un élément inline au sein de sa ligne ou à aligner le contenu d'une cellule d'un tableau
Ces règles CSS, je les ai appris?? hier !
span { border: 1px solid black; }
.child { display: inline-block; }
<span>Saurez-vous</span>
<span class="child">prédire <div>la tête</div></span>
<span>de ce code ?</span>
Parler un langage, c'est exprimer une intention
au moyen d'un vocabulaire et en respectant une grammaire
calc()
declaration-strict-value
// Theme file
$border-color: #444;
$sm-breakpoint: 768px;
$modal-z-index: 7;
// Component file
$select-option-height: 2rem;
.select-dropdown {
$border-width: 1px;
border: $border-width solid $border-color;
max-height: calc(2 * $border-width + 8 * $select-option-height);
}
@media (min-width: $sm-breakpoint) {
z-index: $modal-z-index;
}
.select-dropdown {
border: 1px solid #444;
max-height: 34px;
}
@media (min-width: 768px) {
z-index: 7;
}
Toute propriété qui ne marche pas comme vous le voulez mérite un coup d'oeil sur MDN
.menu-options {
background-color: red;
position: absolute;
left: 30px;
z-index: 20;
}
.content {
position: relative;
}
.tooltip {
position: absolute;
top: 0px;
left: 50px;
width: 100px;
height: 50px;
background-color: black;
color: white;
z-index: 1;
}
<div class="menu disabled">
Dropdown
<div class="menu-options">Dropdown options</div>
</div>
<div class="content">
Content text
<div class="tooltip">Tooltip</div>
</div>
<div class="menu">
Dropdown
<div class="menu-options">Dropdown options</div>
</div>
<div class="content">
Content text
</div>
<div class="menu">
Dropdown
<div class="menu-options">Dropdown options</div>
</div>
<div class="content">
Content text
<div class="tooltip">Tooltip</div>
</div>
.menu-options {
background-color: red;
position: absolute;
left: 30px;
z-index: 20;
}
.menu-options {
background-color: red;
position: absolute;
left: 30px;
z-index: 10;
}
.content {
position: relative;
}
.tooltip {
position: absolute;
top: 0px;
left: 50px;
width: 100px;
height: 50px;
background-color: black;
color: white;
z-index: 1;
}
.menu.disabled {
opacity: 0.8;
}
Pourquoi le z-index 10 passe tout derrière ???
Un stacking context est un conteneur isolé qui permet de placer des éléments enfants sur un axe en profondeur
Au sein d'un stacking context, les éléments seront empilés dans cet ordre (bas vers haut) :
z-index
, dans l'ordre du z-index
Un contexte d'empilement est créé pour :
<html>
position: absolute
ou position: relative
et un z-index
position: fixed
ou position: sticky
z-index
transform
, filter
, clip-path
...<div class="menu">
Dropdown
<div class="menu-options">Dropdown options</div>
</div>
<div class="content">
Content text
<div class="tooltip">Tooltip</div>
</div>
.menu-options {
background-color: red;
position: absolute;
left: 30px;
z-index: 10;
}
.content {
position: relative;
}
.tooltip {
position: absolute;
top: 0px;
left: 50px;
width: 100px;
height: 50px;
background-color: black;
color: white;
z-index: 1;
}
.menu.disabled {
opacity: 0.8;
}
Tenter de prédire dans sa tête le résultat
puis confronter notre compréhension à la réalité
Dessiner pour appliquer les concepts/modèles mentaux directement à vos problèmes
Faire un design system sans librairie CSS pour son prochain projet perso
(des libs accessibles de composants headless comme ReachUI/RadixUI sont recommandées)
Fouiller l'information là où elle est diluée
Tout condensé à un seul endroit
https://cssdojo.dev
Albéric Trancart
Tech lead & Coach @ Theodo
Co-organisateur Human Talks Paris
@alberictrancart