#CSS
Des bases de CSS2.1 aux fonctionnalités avancées de CSS3
Vincent De Oliveira · @iamvdo
CSS1
- Recommandation en 1996
- Sélecteurs simples, positionnements basiques, tailles, marges, couleurs, polices, etc.
CSS2 et CSS2.1
- Abandonnée en 1998
- Trop de choses, trop complexes ou sous-spécifiées
- Pseudo-classes dynamiques, pseudo-éléments, polices personnalisées, gestion des médias, ombres sur les textes, etc.
- CSS 2.1: version "corrigée" de CSS2, ce qui a été retiré est mis à l'étude dans CSS3
- Recommandation en juin 2011
CSS3
- En cours depuis 1999
- Standard fragmenté en modules
- 3 modules en Recommandation, une trentaine à l'étude
Démocratisation de CSS3
Pourquoi entends t'on beaucoup parler de CSS3?
- Meilleur ami de HTML5
- Sélecteurs étoffés
- Effets graphiques simplifiés: opacité, angles arrondis, ombres, dégradés, polices personnalisées, etc. (maintenance++)
- Accès à ce qui était réservé avant à JavaScript (interaction, animation, etc.)
- Nouveaux modes de positionnement
- Mise à jour auto. des navigateurs
- Support amélioré de CSS2.1
- Fin de IE6, IE7, IE8
Utiliser CSS3
- Connaitre le support navigateur
- Conserver la dégradation gracieuse
- Mettre en place l'amélioration progressive
Pour cela:
- Ne rien faire
- Utilisation des préfixes CSS
- Utilisation de styles alternatifs, via la cascade CSS
- Détection de fonctionnalités (CSS ou JS)
De nombreux outils existent…
Mais c'est quoi au fait ?
- Cascading Style Sheets: feuilles de styles en cascade
- Le design d'un site (mise ne forme)
- Langage de description
- Très (trop?) simple
.selector {
color: blue;
font-size: 2em;
}
Les sélecteurs CSS1, 2.1 et 3
- Plus de 40 sélecteurs
- Parcourir le DOM
- Cibler les éléments
- Sélecteur :
- d'éléments (
E
)
- d'enfants (
E F
, E > F
)
- de frères suivants (
E + F
, E ~ F
)
- d'id (
E#id
) et de classe (E.class
)
- pseudo-classes (
E:first-child
, E:last-child
...)
- pseudo-classes dynamiques (
E:hover
, E:focus
, E:active
...)
- pseudo-éléments (
E::first-letter
, E::after
, E::before
...)
Les sélecteurs d'attributs
- Cibler des éléments en fonction de leur attributs (et de leurs valeurs), mêmes les data-attributes de HTML5
[attr]
, [attr=val]
, [attr~=val]
[attr^=abc]
: commençant par
[attr$=abc]
: finissant par
[attr*=abc]
: contient
/* CSS */
a {
color: deepskyblue;
}
Le livre «CSS3 Le design web moderne»
La maîtrise de CSS est un atout majeur dans la réalisation d’un design web moderne et innovant. Indissociable d’HTML5, CSS3 étend les capacités du langage en vous offrant des possibilités jusque là inédites.
Que vous soyez webdesigner, développeur ou amateur éclairé, vous trouverez dans ce livre, au travers d’exemples précis, une méthodologie efficace pour mettre en application CSS3 sur vos sites web dès aujourd’hui.
Vous découvrirez les nouveaux modèles de positionnement permettant des mises en pages évoluées ainsi que les nouveautés en matière de typographie. Sans utiliser d’images, vous pourrez ajouter des ombres, réaliser des coins arrondis, des effets de transparence et des dégradés complexes. Vos sites deviendront plus attractifs grâce à l’ajout d’animations, de transformations en 2D et en 3D. Vous créerez des applications mobiles performantes avec la gestion précise des médias alternatifs, tels que les smartphones et tablettes.
Pendant la lecture de l'ouvrage, retrouvez tous les exemples sur le site de démonstration dédié.
La pseudo-classe :nth-child()
- Cible le nième enfant d'un élément
:nth-child(3)
cible le 3e enfant
:nth-child(an+b)
ou a et b sont des entiers
- Ex:
:nth-child(3n+2)
, pour chaque entier positif de n :
- n=0, total= 2
- n=1, total= 5
- n=2, total= 8
- Les 2e, 5e et 8e enfants sont sélectionnés
La pseudo-classe :nth-child()
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
ul li:nth-child(3n+2) {
color: white;
}
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
La pseudo-classe :nth-child()
- Se décline:
:nth-last-child()
:nth-of-type()
, :nth-last-of-type()
La pseudo-classe :not()
:not()
permet de retirer un sélecteur simple:
div:not(.toto)
ul li a:not(:hover)
.toto:not(p)
a:not([href^=http])
- Pas de sélecteur avancé
Les pseudo-classes de formulaires
:enabled
, :disabled
:valid
, :invalid
:checked
input {
vertical-align: middle;
}
input:checked + label {
color: white;
}
Les coins arrondis
border-radius: 10px;
- Crée des coins arrondis
- Chaque angle peut avoir son propre arrondi
- ex:
border-radius: 0 10px 2px 20px;
- Accepte les pourcentages (par rapport à la boite elle-même)
- ex:
border-radius: 50%;
crée un rond
Les ombres
text-shadow: 2px 2px 5px black;
- Ajoute une (ou plusieurs) ombre(s) sur le texte
box-shadow: 2px 2px 5px (5px) black (inset);
- Ajoute une (ou plusieurs) ombre(s) sur une boite
- L'ombre peut être interne:
inset
- L'ombre peut être plus grande ou plus petite (4ème valeur numérique)
Les dégradés
background: linear-gradient(to left, red, green);
- Crée un dégradé linéaire
- La direction est optionnelle. La valeur par défaut est
to bottom
- Nombre de couleurs "illimité"
- Positionnement des color-stops automatiques/manuels
- Existe les dégradés radiaux
La transparence
background: rgb(235, 162, 53);
opacity: .5;
- Rends l'élément transparent (et tous les enfants)
background: rgba(235, 162, 53, .5);
- Rends la couleur appliquée transparente
- Extension de
rgb(r,v,b)
avec l'alpha
- Existe également
hsl(t,s,l)
et hsla(t,s,l,a)
- Pensez à la dégradation gracieuse
Animez simplement: les transitions
- C'est quoi une transition?
- Animer une propriété d'une valeur A à une valeur B
- Par exemple de
color: red
à color: green
- Effectuée lors d'un changement d'état
- Pour cela, besoin d'un déclencheur
Déclencheurs
- Utilisation de pseudo-classes (
:hover
, :focus
, etc.)
- Modification via JavaScript (ajout de classe, etc.)
- Chargement de la page (?)
Utilisation
transition: width 2s ease;
- 5 propriétés:
transition
: propriété raccourcie
transition-property
: propriété à animer
transition-duration
: durée de la transition
transition-delay
: retardement de la transition
transition-timing-function
: méthode d'interpolation
.element {
width: 200px; /* etat initial */
height: 150px;
background: orangered;
}
.element:hover {
}
Je suis un élément de la page
L'accélération
- Contrôle de la vitesse de l'animation dans le temps
- Propriété
transition-timing-function
- 5 méthodes:
linear
: linéaire
ease
: départ rapide, arrivée lente (défaut)
ease-in
: départ lent
ease-out
: arrivée lente
ease-in-out
: départ lent, arrivée lente
Interpolation avancée
- La fonction
cubic-bezier()
- Définit une courbe de Bézier avec 2 points
cubic-bezier(p1x, p1y, p2x, p2y)
.element {
transition: margin-left 2s;
}
.element--un { /* default: ease */ }
.element--deux {
transition-timing-function: ease;
}
Animez plusieurs états: les animations
- C'est quoi une animation?
- Plusieurs transitions qui s'enchainent
- Animer une propriété d'une valeur A à une valeur B, puis de B à C, ...
- Par exemple de
color: red
à color: green
puis vers color: blue
- Chaque transition est définie sour forme d'étapes
- 2 actions nécessaires
- Création des étapes-clés
- Utilisation de l'animation créée
Création des étapes-clés
@keyframes nomAnim {
from { color: red }
40% { color: green }
to { color: blue }
}
- Définit 3 étapes, soit 2 transitions:
- de 0 à 40%: de
color: red
à color: green
- de 40% à 100%: de
color: green
à color: blue
- Revient à l'état initial une fois l'animation terminée
Utilisation
animation: nomAnim 2s ease 5;
- 6 propriétés:
animation
: propriété raccourcie
animation-name
: nom de l'animation utilisée
animation-duration
: durée de l'animation
animation-delay
: retardement de l'animation
animation-timing-function
: méthode d'interpolation
animation-iteration-count
: nombre de répétition
CSS, c'est simple!
- Hum...
- Pourtant, on est tous passé par là:
.element{
padding: 15px;
width: 98.32%; /* pas compris, mais ça déborde à 98.33% */
position: relative; /* faut pas enlever */
overflow: hidden; /* ça non plus, tout foire sinon */
z-index: 9875687; /* p***, ça veut pas passer au-dessus! */
}
Les feuilles de styles proviennent d'une source unique: nous!
FAUX
La cascade CSS
- CSS: Feuilles de styles en cascade
- Différentes origines:
- Author (les devs CSS)
- User (les gens)
- UA (les navigateurs) + réglages navigateur du user
- La cascade CSS applique un poids à chaque déclaration
La cascade CSS (ordre)
- 4 étapes pour les styles:
- Récupére toutes les déclarations CSS (pour le média cible)
- Tri suivant cet ordre:
- UA ▸ User ▸ Author ▸ Author !important ▸ User !important
- Tri par spécificité des sélecteurs CSS
- Enfin, tri par position dans le CSS (ordre du code)
Spécificité des sélecteurs
- 3 valeurs:
- A ▸ Nombre d'
id
- B ▸ Nombre de
class
, pseudo-classes, d'attributs
- C ▸ Nombre d'éléments, pseudo-éléments
- Exemples:
#toto
1,0,0
.inner ul li
0,1,2
a:hover
0,1,1
- Styles inline,
!important
- Cas particulier
:not()
Pour cibler un identifiant sans donner plus de spécificité, utilisez le sélecteur d'attribut.
[id=toto]
est identique à #toto
, mais avec la même spécificité qu'une class
.
Pour augmenter la spécificité d'une classe, vous pouvez la doubler. Pas besoin d'en ajouter.
.class.class { }
La valeur définie pour une propriété CSS est celle utilisée pour le rendu de la page
FAUX
Les valeurs CSS*
- Une valeur passe par 4 étapes:
- Specified value
- Valeur spécifiée en CSS
- OU valeur héritée de son parent
- OU valeur initiale de la propriété
- Computed value
- Valeur calculée (avant rendu)
- + quelques approximations
- ex: URL relative ▸ URL absolue, red ▸ rgb(255,0,0), 1.5px ▸ 1px
* De toute façon, ce qui compte c'est les valeurs (Perceval, Kaamelott)
Les valeurs CSS*
- Une valeur passe par 4 étapes:
- Used value
- Valeur calculée + dépendances (pendant le rendu)
- ex: em/rem ▸ px, width: 50% (en fonction de son parent)
- Récupéree en JS avec
window.getComputedStyle(e)
- Actual value
- Valeur réellement utilisée, approximation de l’UA
- ex: bordure de 1.5px,
rgb(255,0,0)
sur écran noir&blanc, etc.
* De toute façon, ce qui compte c'est les valeurs (Perceval, Kaamelott)
La valeur calculée du mot-clé transparent
pour les couleurs est rgba(0,0,0,0)
, soit du noir transparent.
Les différentes «méthodes»
- La propriété
display
block
, inline
, list-item
inline-block
table
, table-row
, table-cell
...
- La propriété
float
- La propriété
position
relative
, absolute
, fixed
, sticky
display: inline-block
- Mode «hybride»
- Éléments en ligne, mais conserve les propriétés de block (dimensionnement, marges, etc.)
- Alignables entre eux avec
vertical-align
Démo: inline-block
- Home
- Portfolio
- News
- Contact
display: table
- Mode tabulaire
display: table
simule un tableau (<table>
)
display: table-row
simule une ligne de tableau (<tr>
)
display: table-cell
simule une cellule de tableau (<td>
)
- Toute la structure n'est pas obligatoire (création d'éléments anonymes)
table-layout
modifie le calcul d'affichage du tableau
auto
la taille du tableau s'adapte au contenu
fixed
le contenu s'adapte à la taille du tableau
Les plus de display: table
- Pas de sortie de flux
- Éléments frères de même hauteur
- Largeur étirable dans le tableau
- Alignement vertical du contenu avec
vertical-align
Les moins de display: table
- Pas de marges externes
- Réorganisation des éléments difficile
- Possible (un peu) avec
table-header-group
, table-footer-group
- Imbrication plus complexe
Démo: table layout
- Le premier élément
- Le second élément est plus long
- Un autre élément
- Le dernier élément est vraiment beaucoup plus long que les autres
position
- Sort les éléments du flux de la page
- Permet les superpositions d'éléments
- Proche de la gestion de calque
position: absolute
, position: fixed
position: relative
définit l'origine des éléments positionnés inclus
- Positionnés ensuite avec
top
, left
, right
et bottom
- Empilement avec
z-index
Démo: position
- Le premier élément
- Le second élément est plus long
- Un autre élément
- Le dernier élément est vraiment beaucoup plus long que les autres
width
définit la largeur totale d'un élément
FAUX
Le modèle de boite
- Le box model en CSS2.1
width
est la largeur du contenu
- largeur totale =
width
+ padding
+ border
Le modèle de boite, en mieux!
box-sizing
modifie le calcul du modèle de boite
box-sizing: content-box
: modèle CSS2.1
box-sizing: border-box
: modèle CSS3
width
devient la largeur totale
.parent {
width: 1000px;
background: yellowgreen;
}
.enfant {
}
Je suis un élément de la page
Je suis un élément de la page
* { box-sizing: border-box }
La largeur d'un block est égale à 100% de la largeur de son parent
FAUX
Calcul de la largeur d'un élément
- La valeur initiale de
width
est auto
(pas 100%)
- Attention donc aux
padding
et bordures!
float, inline-block
- La largeur calculée est shrink-to-fit
- La taille s'adapte au contenu.
absolute, fixed
- Dépend de
left
et right
- Si
auto
les deux: la largeur est shrink-to-fit
- Sinon, la largeur est calculée entre
left
et right
La largeur en % d’un élément block est toujours calculée par rapport à celle de son parent
FAUX
Le containing block
- La largeur dépend de la largeur de son containing block!
- C'est quoi?
- Éléments en
position: static
(tous) ou position: relative
: c'est le parent
- Éléments en
position: fixed
: c'est le viewport (ou la page)
- Éléments en
position: absolute
: c'est le premier parent en relative
, absolute
ou fixed
(sinon le viewport)
Le containing block en CSS3
- De nouvelles règles:
transform
!= none
transform-style: preserve-3d
perspective
mask
, mais ne devrait pas
will-change
dans certains cas
Le containing block
.parent {
/* créer un containing block */
}
.enfant {
/* mettre en absolute et fixez la largeur à 100% */
}
Je suis le parent
Je suis son enfant
L’ordre d’affichage des éléments (code source) peut être modifié, sans positionnement relatif, absolu ou fixe.
VRAI
display: table
& Co.
table-row-group
(groupe de lignes)
table-header-group
(groupe de lignes d'entête)
table-footer-group
(groupe de lignes de pied de page)
- Très utiles pour réorganiser ses blocs (surtout en responsive) ▸ Alsacreations.fr
Les valeurs de display
.enfant{
display: table-row;
}
.menu{
}
Un élément flottant peut devenir une cellule (ou une ligne) de tableau
FAUX
display
, float
, position
- Interactions:
- Si
display
est none
position
et float
sans effets
- Si
position
est absolute
ou fixed
float
est none
, display
▸ tableau
- Si
float
est left
ou right
- Si élément racine (
html
)
- Sinon, valeur de
display
Valeur spécifiée |
Valeur calculée |
inline-table |
table |
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block |
block |
block, list-item, table |
valeur spécifiée |
display
, float
, position
.parent {
display: table-cell;
vertical-align: middle;
}
Un élément dont tous ses enfants sont flottants a une hauteur de 0
FAUX
Le BFC
Toute ressemblance avec une marque existante est purement fortuite.
Le Block Formatting Context
- BFC: contexte d’affichage block
- Propriétés d'un BFC:
- Les enfants s'affichent les uns en dessous des autres
- Ne «s'écoule» pas autour des flottants
- Contient les flottants
- Comment créer un BFC:
float
position: absolute
ou fixed
display: inline-block
ou table-cell
ou table-caption
overflow != visible
BFC, flottants et frères
- Un BFC ne chevauche pas les flottants externes
- Ses marges sont implicites
.enfant-left{
float: left;
}
.enfant-right{
/* Creer un BFC */
}
.parent{
}
Enfant 1: Flottant à gauche
Enfant 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, iste, officia, perferendis culpa sapiente similique excepturi vero saepe error quas quam non fuga. Neque, modi at voluptas vel fugit sequi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cumque, omnis impedit enim quisquam placeat laboriosam iusto sapiente sunt delectus amet similique magni eius voluptates numquam quasi eum. Hic, tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, facilis, quod, debitis, quidem modi minima placeat quae nisi obcaecati odit sequi iste deleniti nostrum sunt officiis velit non eos vitae!
BFC, flottants et parent
- Un BFC contient ses enfants flottants: ils ne débordent pas!
.parent img {
float: left;
}
.parent {
/* Creer un BFC */
}
Oh les biens beaux kiwis!
BFC et clear
- La propriété
clear
empêche un élément d'être adjacent à un float
(mais dans le même BFC)
.contenu h2 {
}
.menu {
float: left;
width: 200px;
}
.contenu {
margin-left: 200px;
/* Creer un BFC */
}
.contenu img {
float: left;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, dolore similique harum asperiores possimus officiis.
Les Kiwis? Partis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, dolorum, alias, officia consequuntur delectus omnis dolorem ratione animi maiores accusantium ut harum blanditiis debitis quasi adipisci quod porro maxime corrupti.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, delectus, eum, commodi blanditiis illo maxime fuga incidunt consequuntur vel nemo inventore quisquam architecto temporibus nobis deserunt totam perspiciatis quo natus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis rerum deserunt perferendis. Molestias, laudantium, doloremque voluptates dolores sequi hic facilis nobis sint eligendi ipsa architecto deleniti. Aperiam, soluta accusantium voluptas.
BFC: effets colatéraux
float
, position: absolute
- modifie le flux de la page
display: inline-block
- Ne crée pas de boite de niveau block
- La taille est shrink-to-fit
display: table-cell
- Ne crée pas de boite de niveau block
- Participe à un contexte de parents anonymes (
table
, table-row
)
- Les marges externes n'existent pas!
overflow: hidden
- Le plus utilisé
- Mais empêche les débordements éventuels
BFC: one more thing!
- Possibilité en plus:
display: table
- Création d'un
table-cell
anonyme (donc BFC)
- Création d'une boite de niveau block
- Mais attention au calcul de taille du tableau
table-layout: auto
table-layout: fixed
- Et donc aux débordements
<troll>
Ça serait plus simple d'avoir context: block | inline | flex
</troll>
Deux éléments qui se suivent ayants des marges de 10px sont séparés de 20px
FAUX
La fusion des marges
- Mécanisme qui fusionne certaines marges entres-elles
- La fusion est uniquement verticale
- À quel moment?
- marge haute d’un bloc et marge haute de son premier enfant
- marge basse d’un bloc et marge basse de son dernier enfant (si
height: auto
)
- marge basse d’un bloc et marge haute de son suivant
- marge haute et basse d’un élément sans contenu
La fusion des marges
- Contraintes entre suivants:
- Éléments dans le même BFC
- Contraintes entre parents et enfants:
- Pas de fusion si le parent est un BFC
- Pas de fusion si
padding
ou border
sur le parent
- Lors de la fusion: la marge maximum est utilisée
La fusion des marges
.enfant {
background: yellow;
}
.parent {
}
Enfant 1
Enfant 2
Enfant 3
Une marge droite ou gauche en % se réfère à la largeur de l'élément qui le contient.
Une marge haute ou basse en % se réfère à la largeur(!) de l'élément qui le contient.
Flexbox FTW
- Flex formatting context
- Comme un BFC, en plus mieux
- Centrage horizontal et vertical
- Réorganisation des éléments
- Flexibilité des boites
- Marges externes, et même automatiques
- Débordements
L'élément Flexbox
display: flex;
- Définit l'élément principal Flexbox
- Les Flex items (enfants) «subissent» ce mode
Les axes du Flexbox
flex-direction: row wrap
- Propriété
flex-flow
, un raccourci de 2 autres
flex-direction
définit l'axe principal du Flexbox
column
, column-reverse
: affichage en colonnes
row
, row-reverse
: affichage en lignes
- L'axe secondaire est donc l'axe perpendiculaire
flex-wrap
gestion du débordement des lignes
nowrap
wrap
, wrap-reverse
La flexibilité
flex: 1 100px
- Propriété
flex
, un raccourci de 3 autres:
flex-grow
contrainte d'agrandissement
flex-shrink
contrainte de réduction
flex-basis
taille de base
- Taille flexible
- S'applique sur chaque Flex item (enfant)
Ordre d'affichage
order: 2
- Propriété
order
change l'ordre d'apparition au cas par cas
- Pratique pour réorganiser, mais attention à l'accessibilité
Démo: flex et order
.parent {
display: flex;
}
.enfant {
}
.enfant:nth-child(2) {
}
Alignements
- Marges classiques
- Marges automatiques:
margin: auto
- Alignements en fonction de l'axe (principal ou secondaire)
- Suit le Box Alignment Module (non spécifique à Flexbox)
Démo: Marges
.parent {
display: flex;
}
.enfant {
}
.enfant:nth-child(2) {
}
Alignement axe principal
justify-content
sur le parent Flexbox
flex-start
, flex-end
, center
, space-between
, space-around
Alignement axe secondaire
align-items
sur le parent Flexbox
flex-start
, flex-end
, center
, baseline
, stretch
Alignement axe secondaire
- Un élément peut avoir son propre alignement
align-self
sur un Flexbox item (enfant)
flex-start
, flex-end
, center
, baseline
, stretch
Démo: Alignements
.parent {
display: flex;
}
.enfant {
}
.enfant:nth-child(2) {
}
L’élément avec le z-index
maximal de la page sera toujours au dessus de tous les autres éléments
FAUX
Contexte d'empilement
- Tout dépend de son contexte d’empilement
- Création:
- Élément racine (
html
)
- Élément en
position: absolute
, relative
ou fixed
et z-index
différent de auto
- Les contextes d'empilement sont «hermétiques» aux autres contextes
- Le
z-index
est relatif à son contexte!
Contexte d'empilement
.enfant {
position: absolute;
}
.enfant--un {
z-index: 1;
}
.enfant--deux {
}
.parent {
position: absolute;
}
.parent:nth-child(2) {
}
Il est possible de modifier l’ordre d’empilement sans z-index
VRAI
Ordre d'affichage
- Pour chaque contexte d'empilement, l'ordre est:
- Bordures et
background
de l’élément racine
- Éléments positionnés et
z-index
négatifs
- Éléments block non-positionnés
- Floats
- Éléments inline non-positionnés
- Éléments positionnés et
z-index
auto
- Éléments positionnés et
z-index
positifs
- Il est donc possible:
- d'afficher un enfant derrière son parent
- d’intercaler des éléments
- de modifier l’ordre d’empilement sans
z-index
Ordre d'affichage
.enfant--un {
}
.enfant--deux {
}
.enfant span {
}
.enfant--un span {
}
.enfant--deux span {
}
Enfant 1span
Enfant 2span
L’opacité modifie l’ordre d’affichage des éléments
VRAI
Contexte d'empilement: opacité!
- L’opacité <1 crée un contexte d’empilement!
- Et en CSS3:
transform
!= none
transform-style: preserve-3d
perspective
filter
!= none
clip-path
, mask
will-change
dans certains cas
Contexte d'empilement: opacité!
.parent {
}
.enfant {
position: absolute;
z-index: -1;
}