Ces propriétés peuvent être intéressantes mais pas toujours implémentées sur l’ensemble des navigateurs. De plus, comme l’indique la documentation MDN, ces propriétés peuvent encore évoluées. Elles sont pratiques mais prenez garde à leur utilisation 😉
:is() & :where()
Ces deux pseudo-classes ciblent des éléments listés en argument. On les utilisera pour économiser du code. Pour comprendre la différence, je définis dans le css une propriété par défaut pour les premiers li. Ensuite, je surcharge cette propriété en utilisant la pseudo-class :is() puis la pseudo-class :where. On constate que la pseudo-class :is() modifie la totalité de l’apparence des li contrairement à la pseudo-classe :where() qui n’effectue pas la surcharge.
<h3>:is()</h3>
<ul class="list-is">
<li>Liste :is() 1</li>
<li>Liste :is() 2</li>
<li>Liste :is() 3</li>
</ul>
<hr>
<h3>:where()</h3>
<ul class="list-where">
<li>Liste :where() 1</li>
<li>Liste :where() 2</li>
<li>Liste :where() 3</li>
</ul>li:first-child{
background:green;
}
:is(.list-is > li){
background:red;
}
:where(.list-where > li){
background:orange;
}::marker
Pseudo-élément permettant de styliser les puces des listes ou des balises summary. C’est-à-dire des éléments dont le display a pour valeur list-item.
<div>
<ul>
<li class="escrime fontSizeMarker">Escrime</li>
<li class="natation fontSizeMarker">Natation</li>
<li class="cyclisme fontSizeMarker">Cyclisme</li>
</ul>
</div>
<hr>
<div>
<details>
<summary class="riddle">Toute chose, il dévore. Il ronge le fer, fait disparaître l'acier et réduit les pierres en poussière. Qui est-ce ?</summary>
<p>Le temps</p>
</details>
</div>.fontSizeMarker::marker{
font-size:30px;
}
/*liste*/
.escrime::marker{
content:'🤺';
}
.natation::marker{
content:'🏊';
}
.cyclisme::marker{
content:'🚴';
}
/*summary*/
.riddle::marker{
content:"🤫"
}Inline-size & block-size
Ces propriétés définissent la taille d’orientation d’un élément (horizontal ou vertical) selon la valeur de la propriété writing-mode, c’est-à-dire son type d’écriture.
<div id="default"> <p>lorem ipsum exemple default</p> </div> <hr> <div id="exemple-1"> <p>lorem ipsum exemple 1</p> </div> <hr> <div id="exemple-2"> <p>lorem ipsum exemple 2</p> </div>
div p{
padding:2%;
font-weight:600;
font-size:18px;
text-transform:uppercase;
height:250px;
width:250px;
}
#default p{
background:#3299CC;
writing-mode:horizontal-lr;/*valeur par défaut. Ecriture horizontale : left to right*/
block-size:available;/*valeur par défaut*/
inline-size:available;/*valeur par défaut*/
}
#exemple-1 p{
background:#3299CC;
writing-mode:horizontal-lr;/*valeur par défaut. Ecriture horizontale : left to right*/
block-size:50px;/*modification sur l'axe Y*/
inline-size:450px;/*modification sur l'axe X*/
}
#exemple-2 p{
background:#9F5F9F;
writing-mode:vertical-lr; /*changement d'orientation du texte. Ecriture verticale : left to right*/
block-size:50px;/*modification sur l'axe X*/
inline-size:450px;/*modification sur l'axe Y*/
}
Scrollbar
Attention cette astuce ne fonctionne pas sur l’ensemble des navigateurs. La propriété scrollbar permet de modifier l’apparence de la scrollbar de votre navigateur :
/*définir la largeur de la scrollbar*/
body::webkit-scrollbar{
width:25px;
}
/*définir la couleur de la scrollbar*/
body::webkit-scrollbar-track{
background:#F1454E;
}
/*stylisation de l'ascenseur*/
body::webkit-scrollbar-thumb{
border-radius:15px;
height:50px;
}