Albéric Trancart
Fullstack dev @ Theodo
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>
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é
Fouiller l'information là où elle est diluée
Tout condensé à un seul endroit
https://cssdojo.dev
Albéric Trancart
@alberictrancart
By Albéric Trancart