web-dev-qa-db-ja.com

-webkit-baseline-middleおよび-moz-middle-with-baseline

ブラウザーのWebインスペクターを使用しているときに、CSS属性vertical-align。

-webkit-baseline-middleはChrome while -moz-middle-with-baselineはFirefoxで利用可能です。命名は似ていますが、同じではありません。

これら2つに関する情報はウェブ上で見つかりませんでした。 [〜＃〜] mdn [〜＃〜] にもリストされていません。

私の質問：

  • それらは標準の一部ですか？
  • それらを使用するときに予想される動作は何ですか？
cssvertical-alignmentvendor-prefix
17
Vahid Amiri


@ VSG24：
それらは標準の一部ですか？

W3C CSSリファレンスによると、両方のプロパティは標準の一部ではありません。 CSS 2.1仕様で予想されているように、WebkitとGeckoが正しく動作するためにのみ使用するようです。

ボックスの垂直方向の中点を、親ボックスのベースラインに親のx-heightの半分を加えた位置に合わせます。
CSS 2.1仕様、p17

Diagram showing the effect of various values of 'vertical-align' on table cells

@ VSG24：
それらを使用する場合の予想される動作は何ですか？

Webで検索した後、 Safari CSS Reference で-webkit-baseline-middleについて見つけたものを以下に示します。

vertical-align: -webkit-baseline-middle：
要素の中心はテキストのベースラインに揃えられます。

これ以外の-moz-middle-with-baselineに関する情報を取得できませんでした：

Q：Webkit-baseline-middle-代替手段はありますか？

A：同じ、Mozillaのみ
vertical-align: -moz-middle-with-baseline;

https://toster.ru/q/25521

以下はテストです。Webkitベースのブラウザー（Chromeなど）および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>

参照：

  • SafariとWebKitは、CSS 3仕様の一部とともに、World Wide Web Consortium（W3C）によって定義されたCSS 2.1仕様の大規模なサブセットを実装しています。このリファレンスでは、サポートされているプロパティについて説明し、Safariの可用性情報を提供します。ここにリストされていないプロパティは、SafariおよびWebKitによって実装されていません。
    Safari CSSリファレンス
  • カスケードスタイルシートレベル2リビジョン1（CSS 2.1）仕様

私が少し助けたことを願っています:)

14
Gaspacchio