CSSでアイコンをテキストに揃えるのはこれで簡単になる!CSSの新しい単位「lh」「rlh」が登場

アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか?
テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。

CSSの新しい単位「lh」「rlh」が登場

'lh' and 'rlh' units

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CSS Values and Units Module Level 4に見たこともない新しい単位がありました!

lh
それが使われている要素のline-heightプロパティの計算値に等しい
rlh
ルート要素(おそらく<html>要素)のline-heightプロパティの計算値に等しい

これらの新しい単位が役立つシーンはどこだと思いますか?
Šime Vidasの記事によると、

アイコンを垂直方向の中央揃えに配置

アイコンを垂直方向の中央揃えに配置

特に、インラインのSVGアイコンに適しています。

アイコンのサイズをテキストに揃えて配置するCSSは、非常に簡単です。

【訳者注】
新しい単位「lh」「rlh」の仕様は、下記をご覧ください。

サイトのキャプチャ

Font-relative lengths

「lh」「rlh」をサポートしているブラウザは2020年5月現在、Safari Technology Previewのみとなっていますが、各ブラウザでサポートの動きがでています。

sponsors

top of page

©2020 coliss