Today I Learned - Janvier 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

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); */
}

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

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;
}

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;
}

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.

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;
}

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

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.

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

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%;
}

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

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%);
}

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

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;
}

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";
}

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);
}

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

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);
}

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 :

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;
}

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;
  }
}

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.

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;
}

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.

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.

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;
  }
}

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;
}

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;
}

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;
}

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;
}