aller au contenu principal

Today I Learned - Janvier 2023

Ce que j'ai appris en janvier 2023


Publié le 01/01/2023 dans TIL
Jour #101/01/2023

Il est possible d'utiliser des opérateurs de comparaison comme =, >, <, >= ou <= pour les Media Queries.

/* Quand le viewport est entre 400px et 1000px */
@media (min-width: 400px) and (max-width: 1000px) {

}

/* La même chose avec la nouvelle syntaxe */
@media (400px <= width <= 1000px) {

}

En savoir plus sur le support sur Can I Use

Jour #202/01/2023

Les propriétés translate, rotate, et scale permettent de remplacer l'utilisation de la propriété transform.

.box-1 {
  scale: 1.5;
  /* transform: scale(1.5); */
}
.box-2 {
  translate: 50px 100px 200px;
  /* transform: translate3d(50px, 100px, 200px); */
}
.box-3 {
  rotate: y 90deg;
  /* transform: rotateY(90deg); */
}
Jour #303/01/2023

La propriété inset est une propriété raccourcie pour définir top, right, bottom, et/ou left. On peut mettre plusieurs valeurs comme les propriétés margin ou padding.

.box {
  position: absolute;
  /* top: auto; right: 20px; bottom: 20px; left: auto */
  inset: auto 20px 20px auto;
}

En savoir plus sur le support sur Can I Use

Jour #404/01/2023

La pseudo-class :placeholder-shown permet de cibler les input et textarea qui ont un attribut placeholder.

input:placeholder-shown {
  background-color: ivory;
  border: 1px solid darkorange;
}
Jour #505/01/2023

La règle text-overflow: ellipsis permet de rogner du texte et affiche une ellipse (...). À noter que l'ellipse est ajoutée à l'intérieur du box model, et réduit donc la quantité de texte affichée. Dans l'exemple j'ai mis une largeur fixe et un overflow: hidden pour cacher le texte qui dépasse.

.text {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid;
}
Texte trop looooonnnnng
Jour #606/01/2023

Aujourd'hui je me suis rendu compte que je ne connaissais pas bien la différence entre une transition et une animation CSS.

Une transition permet d'animer le changement d'un état A à un état B d'un élément, et il faut un déclencheur comme un hover.

Une animation offre plus de possibilités comme la création d'images clés avec les keyframes, les boucles, et n'ont pas besoin de déclencheur.

Jour #7 07/01/2023

Par défaut tous les éléments HTML sont en inline, c'est la feuille de style du navigateur qui précise quels éléments sont en display: block, on peut le voir sur resource://gre-resources/html.css (à ouvrir sur Firefox uniquement).

On peut voir ceci dans la feuille de style :

/* blocks */

article,
aside,
details,
div,
dt,
figcaption,
footer,
form,
header,
hgroup,
html,
main,
nav,
section,
summary {
  display: block;
}
Jour #8 08/01/2023

La propriété accent-color permet de changer la couleur par défaut des éléments suivants :

  • <input type="checkbox">
  • <input type="radio">
  • <input type="range">
  • <progress>
input[type=range] {
  accent-color: rebeccapurple;
}

En savoir plus sur le support sur Can I Use

Jour #9 09/01/2023

La propriété outline ne fait pas partie du box model, elle a en quelque sorte le même comportement que la propriété box-shadow.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque scelerisque suscipit.

Jour #10 10/01/2023

Il est possible d'animer les propriétés outline-offset et outline-color, au focus ou au hover.

Jour #11 11/01/2023

L'ordre des fonctions utilisées sur la propriété transform a une importance. Les fonctions sont lues de la gauche vers la droite.

.square-1 {
  transform: rotate(90deg) translateX(50%);
  transform-origin: 100% 100%;
}
.square-2 {
  transform: translateX(50%) rotate(90deg);
  transform-origin: 100% 100%;
}
Jour #12 12/01/2023

Les sélecteurs class et id ne peuvent pas commencer par un chiffre. Par exemple .1-item ou #1-item sont invalides.

Jour #13 13/01/2023

La fonction hsl() permet une meilleure gestion des couleurs qu'avec une valeur héxadécimale ou avec la fonction rgb(). La fonction prend 3 valeurs :

  • la teinte (la couleur qui sera un angle du cercle des couleurs)
  • la saturation (la quantit√© de couleur)
  • la luminosit√© (la quantit√© de noir ou de blanc)
div {
  background-color: hsl(180, 100%, 50%);
}
Jour #14 14/01/2023

La propriété text-decoration est en fait une propriété raccourcie des propriétés suivantes :

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-thickness
Jour #15 15/01/2023

Il est possible de cumuler les valeurs underline, overline et même line-through sur la propriété text-decoration-line. Ça sert à rien mais on peut le faire.

.text {
  text-decoration-line: underline overline line-through;
  text-decoration-style: wavy;
  text-decoration-color: darkorchid;
}
un texte bien trop décoré !
Jour #16 16/01/2023

Le "defaulting" est une étape importante de la phase d'analyse CSS par le navigateur. Elle consiste à attribuer une valeur aux propriétés non définies, ça peut être la valeur initiale ou la valeur héritée. Une seule ligne de CSS en cache en réalité plusieurs.

html {
  font: 16px Helvetica Neue;
}
/* La règle ci-dessus sera transformée en.. */
html {
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 16px;
  line-height: normal;
  font-family: "Helvetica Neue";
}
Jour #17 17/01/2023

Il est possible de dynamiser le contenu des pseudo-√©l√©ments en CSS gr√Ęce aux attributs HTML et √† la fonction CSS attr().

<button class="btn" data-before="ūüėļ">Bouton</button>
.btn::before {
  content: attr(data-before);
}
Jour #18 18/01/2023

Par défaut un élément en display: block n'a pas une width de 100% mais auto.

Jour #19 19/01/2023

Même si les fonctions rgba() et hsla() existent, il tout de même possible de définir de la transparence sur des couleurs avec les fonctions rgb() et hsl(). Il faut néanmoins séparer les valeurs par une ,, ou mettre un / avant la transparence.

div {
  background-color: rgb(255, 255, 255, .5);
  background-color: rgb(255 255 255 / .5);

  color: hsl(212, 100%, 62% / .5);
  color: hsl(212 100% 62% / .5);
}
Jour #20 20/01/2023

Il est possible de faire une Media Query pour cibler les appareils sur lesquels le survol d'élément est possible.

@media (hover: hover) {
  button:hover {
    background-color: #3b98ff;
  }
}

Le code ci-dessus empêche donc le "hover accidentel" sur les appareils tactiles :

Jour #21 21/01/2023

L'utilisation de la propriété float a été détournée pour la construction de mise en page complexe, aujourd'hui ce n'est plus utile de s'en servir car qu'il y a Flexbox et Grid. Mais la propriété reste encore utile pour faire ce pourquoi elle existe à la base : retirer un élément du flux normal, et faire en sorte que le texte et les autres éléments inline entourent cet élément.

.item {
  float: left;
  margin-right: 5px;
  width: 120px;
  height: 120px;
  background-color: #3b98ff;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt necessitatibus ipsam voluptatibus fugiat qui harum beatae numquam cupiditate quam! Consequatur aliquid suscipit a rerum soluta. Aspernatur quasi necessitatibus rerum nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt necessitatibus ipsam voluptatibus fugiat qui harum beatae numquam cupiditate quam! Consequatur aliquid suscipit a rerum soluta. Aspernatur quasi necessitatibus rerum nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt necessitatibus ipsam voluptatibus fugiat qui harum beatae numquam cupiditate quam!
Jour #22 22/01/2023

Il est possible d'animer la propriété z-index.

.box {
  z-index: 1;
  animation: mymove 5s infinite linear;
}
@keyframes mymove {
  50% {
    z-index: 5;
  }
}
Salut
z-index 1
z-index 2
z-index 3
z-index 4
Jour #23 23/01/2023

Quand on met un z-index sur un élément, on crée un Stacking Context qui affecte également les éléments enfant de cet élément.

<header>Header</header>
<main>
  <button>Bouton</button>
</main>
header {
  position: relative;
  z-index: 2;
}
main {
  position: relative;
  /* Le z-index affecte aussi le bouton */
  z-index: 1;
}
main button {
  position: relative;
  /* Le bouton ne peut pas se placer au-dessus du <header> */
  z-index: 9999;
}

Malgré un z-index très élevé, le bouton ne pourra pas se placer au-dessus du header.

Jour #24 24/01/2023

La pseudo-classe :is() cible tous les sélecteurs qui lui sont passés en argument. Cela permet d'écrire du code CSS plus concis lorsqu'il faut cibler plusieurs éléments.

article h1,
article p,
article a {
  color: #fff;
}
/* La même chose avec :is() */
article:is(h1, p, a) {
  color: #fff;
}
Jour #25 25/01/2023

Aujourd'hui je me suis rendu compte que je n'étais pas capable d'expliquer clairement la différence entre une pseudo-classe et un pseudo-élément.

Dire que la différence se fait au niveau de la syntaxe n'est pas suffisant : on utilise normalement : pour les pseudo-classes et :: pour les pseudo-éléments.

Mais il est possible d'utiliser : sur un pseudo-élément aussi, comme ceci : :before.

Pour bien comprendre la différence entre les deux il faut se dire que :

  • avec un pseudo-√©l√©ment : on cr√©e un √©l√©ment
  • avec une pseudo-classe : on ne fait que s√©lectionner un √©l√©ment, on ne cr√©e rien

Par exemple avec ::before ou ::after on crée un élément.

Même avec le pseudo-élément ::first-letter, on pourrait penser que l'on ne crée pas un élément et qu'on cible seulement la première lettre, mais cet élément n'existe pas avant d'être crée par le pseudo-élément, c'est un peu comme si on englobait la première lettre dans une balise.

Alors qu'avec la pseudo-classe :nth-child on sélectionne/cible un élément existant, on ne crée rien.

Jour #26 26/01/2023

Lors de de la phase d'analyse CSS par le navigateur, l'étape du "resolving" consiste à transformer les unités relatives comme auto, em, rem ou encore vh en unités absolues. C'est aussi valable pour les mots clés small, normal, ou bold.

Jour #27 27/01/2023

Il est possible de détecter si l'utilisateur à choisi de réduire/désactiver les animations depuis les paramètres de son système d'exploitation. Il est important de prendre en compte ce choix et de le respecter, par exemple avec le code ci-dessous, l'animation est désactivée si l'utilisateur ne souhaite pas d'animations.

.animation {
  animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}
Jour #28 28/01/2023

La propriété resize permet de rendre un élément redimensionnable. Cependant il faut que cet élément ne soit pas de type inline ou block avec un overflow: visible.

Il est possible d'indiquer en valeur la direction du redimensionnement.

.element {
  width: 200px;
  min-width: 100px;
  max-width: 500px;
  overflow: hidden;
  resize: horizontal;
}
Vas-y redimensionne moi ! ūüėļ
Jour #29 29/01/2023

La pseudo-classe :empty permet de sélectionner les éléments qui n'ont aucun enfant.

Cela peut-être utile pour cibler des éléments dont l'accès est difficile. On peut s'en servir pour masquer des messages d'erreur vides ou des tags vides.

<ul>
  <li>tag A</li>
  <li>tag B</li>
  <li>tag C</li>
  <li></li>
  <li></li>
</ul>
ul li:empty {
  display: none;
}
Sans :empty
  • tag A
  • tag B
  • tag C
Avec :empty
  • tag A
  • tag B
  • tag C
Jour #30 30/01/2023

La pseudo-classe :target permet de cibler l'unique élément (s'il existe) dont l'attribut id correspond au fragment d'identifiant de l'URL.

Par exemple, si l'URL est "https://www.swebdev.fr#section-1", alors "#section-1" est le fragment d'idientifiant.

  <a href="#section-1">Première section</a>
  <a href="#section-2">Deuxième section</a>
  <section id="section-1">...</section>
  <section id="section-2">...</section>
section:target {
  outline: 2px dashed #3b98ff;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut pellentesque lorem. Aenean ac dolor ante. Nam ut consectetur leo, quis maximus tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut pellentesque lorem. Aenean ac dolor ante. Nam ut consectetur leo, quis maximus tellus.
Jour #31 31/01/2023

Par défaut la propriété box-shadow prend la couleur par défaut de l'élément sur lequel elle est appliquée.

.box {
  color: #3b98ff;
  box-shadow: 0px 0px 10px;
}
2023 Sébastien Imbert