-webkit-baseline-middle et -moz-middle-with-baseline

Question

Lors de l'utilisation des inspecteurs Web des navigateurs, je suis tombé sur deux propriétés différentes et non standard pour l'attribut CSS vertical-align.

-webkit-baseline-middle n'est disponible qu'en Chrome tandis que -moz-middle-with-baseline est disponible sur Firefox. La dénomination est similaire mais PAS la même.

Je n'ai trouvé aucune information concernant ces deux sur le Web. Ils ne sont même pas répertoriés sur MDN .

Mes questions:

• Font-ils partie de normes?
• Quel est le comportement attendu lors de leur utilisation?

Answer 1

@ VSG24:
Font-ils partie de normes?

Les deux propriétés ne font partie d'aucune norme, selon la référence CSS du W3C. Ils semblent seulement être utilisés par Webkit et Gecko pour se comporter correctement, comme prévu dans la spécification CSS 2.1:

Alignez le milieu vertical de la boîte avec la ligne de base de la boîte parent plus la moitié de la hauteur x du parent.
spécifications CSS 2.1, p17

---

@ VSG24:
Quel est le comportement attendu lors de leur utilisation?

Après quelques recherches sur le Web, voici ce que j'ai trouvé sur -webkit-baseline-middle sur le Référence CSS Safari :

vertical-align: -webkit-baseline-middle:
Le centre de l'élément est aligné avec la ligne de base du texte.

Je n'ai pas pu obtenir d'informations sur -moz-middle-with-baseline autre que celui-ci:

Q: Webkit-baseline-middle - existe-t-il des alternatives?

A: idem, uniquement pour Mozilla
vertical-align: -moz-middle-with-baseline;

https://toster.ru/q/25521

---

Vous trouverez ci-dessous un test, vous pouvez l'essayer en utilisant des navigateurs Webkit (tels que Chrome) et Gecko (Firefox):

div {
  width: 150px;
  display: inline-block;
}

.container {
  background: hotpink;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 100%;
  z-index: -1;
}

.reference {
  background: darkblue;
  height: 200px;
}

.standard {
  background: teal;
  height: 120px;
  vertical-align: middle;
}

.moz {
  background: antiquewhite;
  height: 80px;
  vertical-align: -moz-middle-with-baseline;
}

.webkit {
  background: darksalmon;
  height: 90px;
  vertical-align: -webkit-baseline-middle
}

<div class="container"></div>
<div class="reference"></div>
<div class="standard"></div>
<div class="moz"></div>
<div class="webkit"></div>

---

Les références :

• Safari et WebKit implémentent un grand sous-ensemble de la spécification CSS 2.1 définie par le World Wide Web Consortium (W3C), ainsi que des parties de la spécification CSS 3. Cette référence décrit les propriétés prises en charge et fournit des informations sur la disponibilité de Safari. Si une propriété n'est pas répertoriée ici, elle n'est pas implémentée par Safari et WebKit.
  Référence CSS Safari
• Spécifications des feuilles de style en cascade, niveau 2, révision 1 (CSS 2.1)

J'espère que j'ai aidé un peu :)