Elles sont là et pourtant très peu ou trop peu de personnes ne les exploitent. Moi même en écrivant ce post, j’en ai découvertes quelques-unes 😉 Les propriétés css présentées ci-dessous sont des propriétés non expérimentales !
Orphans
Lorsque l’on se retrouve avec des colonnes contenant du texte, plutôt que d’utiliser des hauteurs, on peut utiliser la propriété orphans pour indiquer le nombre de lignes par colonnes.
<p>Lorem ipsum dolor sit amet. Ut minima pariatur et facilis blanditiis ut dolore laudantium hic incidunt illum. Et quaerat laborum ea corporis unde in voluptas maxime nam perspiciatis voluptatem ut harum nesciunt hic veniam dolore est reiciendis enim. Quo omnis Quis a magni voluptatem eum accusantium ullam vel dicta dolor et consequatur ipsum. Qui praesentium quod est temporibus veritatis id unde quaerat eos perspiciatis nisi qui nobis autem nam molestias voluptatem et obcaecati aspernatur. Aut unde voluptatem aut quia aliquid aut totam accusantium non mollitia molestiae qui dolores nisi aut esse modi. Ut odit recusandae est sunt rerum sit eaque consequatur quo accusantium rerum. 33 natus quisquam facere commodi et cupiditate perspiciatis ut recusandae necessitatibus qui laudantium aliquam ab tenetur assumenda. Ut nobis quos a quia temporibus qui magnam reprehenderit qui repellendus voluptatum ut enim voluptates sit sequi debitis ex molestiae nemo.</p>
p{
columns: 3; /* 3 colonnes */
orphans: 8; /* 8 lignes par colonne */
}Scroll-snap
Cette propriété peut prendre les valeurs x, y ou block. La valeur x permet de définir un scroll-snap sur l’axe horizontal, la valeur y sur l’axe vertical et la valeur block sur les deux axes. Cette propriété permet de créer un axe d’accroche. Pour cela, il faut définir au niveau du conteneur sur quel axe doit-on définir le scroll-snap en utilisant la propriété scroll-snap-type. Attention ! La hauteur cumulée des éléments enfants ne doit pas être inférieure à celle du conteneur parent !
<main>
<article>
<h3>Article 1</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit assumenda voluptates, labore deleniti rem voluptatum architecto libero officiis placeat, exercitationem numquam! Praesentium non similique facere cupiditate inventore placeat iste itaque? A nihil soluta in quidem molestiae vitae labore, officia id distinctio quo tenetur, ratione facilis quas? Amet corrupti commodi, quis, saepe quo culpa ex sequi dolorem beatae nostrum exercitationem a!</p>
</article>
<article>
<h3>Article 2</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit assumenda voluptates, labore deleniti rem voluptatum architecto libero officiis placeat, exercitationem numquam! Praesentium non similique facere cupiditate inventore placeat iste itaque? A nihil soluta in quidem molestiae vitae labore, officia id distinctio quo tenetur, ratione facilis quas? Amet corrupti commodi, quis, saepe quo culpa ex sequi dolorem beatae nostrum exercitationem a!</p>
</article>
</main>main {
overflow-y: scroll;
scroll-snap-type: y mandatory;
height: 100vh;
}
article {
scroll-snap-align: start;
height: 50vh;
}Counter
Application d’un système d’incrémentation. Adaptation facilité selon les emplacements des éléments dans le document.
<div class="contentPara"> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> </div> <div class="contentPara"> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> </div>
body{
counter-reset:container; /*initialisation pour les class .contentPara */
}
.contentPara {
padding:2%;
counter-reset: paragraphe; /*initialisation pour les tag <p> */
}
.contentPara:nth-child(odd){
background:#e0aeed9c;
}
.contentPara:nth-child(even){
background:#4aa8eb9c;
}
.contentPara::before{
counter-increment: container;
content: "Conteneur n° " counter(container) " : ";
}
p::before{
counter-increment: paragraphe;
content: "Paragraphe n° " counter(paragraphe) " : ";
}mix-blend-mode
Permet de supprimer le fond à une image
Attention ! Cette propriété n’est pas prise en compte par tous les navigateurs smartphone
<div class="wrapper"> <h3>Normal</h3> <h3>multiply</h3> <h3>screen</h3> <h3>overlay</h3> <h3>darken</h3> <h3>lighten</h3> <h3>color-dodge</h3> <h3>color-burn</h3> <h3>hard-light</h3> <h3>soft-light</h3> <h3>difference</h3> <h3>exclusion</h3> <h3>hue</h3> <h3>saturation</h3> <h3>color</h3> <h3>lumonisity</h3> </div>
body{
background-image:url('https://tripandtwins.com/wp-content/uploads/2020/05/destinations-nature-en-franceen-famille-800x533.jpg.webp');
background-repeat: repeat;
background-size: cover;
}
.wrapper{
display:flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
h3{
width:33.33%;
font-size:50px;
padding:1vh;
text-transform: uppercase;
text-align: center;
}
h3:nth-child(odd){
background:#fff;
color:#000;
}
h3:nth-child(even){
background:#000;
color:#fff;
}
h3:nth-child(1){
mix-blend-mode:normal;
}
h3:nth-child(2){
mix-blend-mode:multiply;
}
h3:nth-child(3){
mix-blend-mode:screen;
}
h3:nth-child(4){
mix-blend-mode:overlay;
}
h3:nth-child(5){
mix-blend-mode:darken;
}
h3:nth-child(6){
mix-blend-mode:lighten;
}
h3:nth-child(7){
mix-blend-mode:color-dodge;
}
h3:nth-child(8){
mix-blend-mode:color-burn;
}
h3:nth-child(9){
mix-blend-mode:hard-light;
}
h3:nth-child(10){
mix-blend-mode:soft-light;
}
h3:nth-child(11){
mix-blend-mode:difference;
}
h3:nth-child(12){
mix-blend-mode:exclusion;
}
h3:nth-child(13){
mix-blend-mode:hue;
color:rgb(30, 100, 2);
}
h3:nth-child(14){
mix-blend-mode:saturation;
color:rgb(26, 26, 148);
}
h3:nth-child(15){
mix-blend-mode:color;
color:rgb(199, 0, 0)
}
h3:nth-child(14){
mix-blend-mode:luminosity;
}
backdrop-filter
Propriété qui permet d’appliquer du flou sur un élément.
<div>
<figure>
<img src="https://picsum.photos/900/900" alt="">
<figcaption>backdrop-filter</figcaption>
</figure>
</div>*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
div {
position: relative
}
figure {
display: flex;
align-items: center;
justify-content: center;
}
figcaption {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
text-align: center;
transform: translate(-50%, -50%);
background: rgb(251, 149, 47, 0.4);
backdrop-filter: blur(10px);
padding: 4%;
font-size: 25px;
}:placeholder-shown
Applique un texte substitution dans le cas des éléments de formulaire comme les input et les textarea
<form> <input placeholder="Votre pseudo" type="text" id="pseudo"> <label for="pseudo">Votre pseudo</label> </form>
form{
padding:1%;
}
label{
font-family:Arial;
font-size:1.2em;
margin-left:11px;
display:block;
transition:all 0.5s;
transform:translateY(-75px);
}
input{
font-size:1.2em;
margin-top:20px;
transition:all 0.5s;
background:#fff;
padding:10px;
}
input:placeholder-shown ~ label{
opacity:0;
transform:translateY(-35px);
}background-clip
Permet de personnaliser le comportement d’un arrière-plan d’un élément.
<div> <h2 id="exemple-1">Titre de niveau 2</h2> </div> <hr> <div> <h2 id="exemple-2">Titre de niveau 2</h2> </div> <hr> <div> <h2 id="exemple-3">Titre de niveau 2</h2> </div> <hr> <div> <h2 id="exemple-4">Titre de niveau 2</h2> </div>
h2{
font-size:50px;
background-image:url('https://i.picsum.photos/id/410/500/300.jpg?hmac=-pNE4jvwDlkgPvriar866g1ZRVf1exNrqDm48u2lHHc');
background-size:cover;
text-transform:uppercase;
padding:2%;
border:20px dotted red;
width:250px
}
#exemple-1{
color:transparent;
background-clip:text;/*s'appliquera au texte*/
-webkit-background-clip: text;/*webkit nécessaire dans ce cas, car cette valeur n'est pas implémentée sur tous les navigateurs*/
}
#exemple-2{
background-clip:padding-box;/*s'applique à la box sans mordre sur les bordures*/
}
#exemple-3{
background-clip:border-box;/*s'applique à la box en mordant les bordures*/
}
#exemple-4{
background-clip:content-box;/*s'appliquera uniquement à l'empreinte du contenu*/
}:has()
Pseudo-class qui agit comme une structure conditionnelle. Dans l’exemple ci-dessous, on cible la class lorem si et seulement si elle appartient à un élément div
<div> <p class="lorem1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div> <p class="lorem2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div> <p class="lorem3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div>
div:has(.lorem2){
color:red;
}all
Cette propriété permet d’annuler des propriétés précédemment appliquées.
<div id="exemple-1"> <h2>Titre de niveau 2</h2> <p>Lorem ipsum para 1</p> <p>Lorem ipsum para 2</p> <p>Lorem ipsum para 3</p> </div> <hr> <div id="exemple-2"> <h2>Titre de niveau 2</h2> <p>Lorem ipsum para 1</p> <p>Lorem ipsum para 2</p> <p>Lorem ipsum para 3</p> </div>
div{
padding:2%;
background:royalblue;
}
div h2{
background:yellow;
}
div p{
background:orangered;
}
#exemple-1 p{
all:revert;/*supprime les propriétés précédemment appliquées*/
}
#exemple-2 p{
all:unset;/*restitue au texte sa propriété inline et supprime les propriétés précédemment appliquées*/
}