聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能

• 作成：2016/10/3
• Web制作 >

効率よくレイアウトを作成できるように、あまり聞き慣れないけど、今後増えていくであろうプロパティや単位、仕様策定中の新しいプロパティなどについて非常に参考になる記事をチョイスさせていただきました。

エンジニア速報は Twitter の@commteで配信しています。

srcset属性

HTML5で策定されたsrcset属性をimageタグに使うと複数の画像をカンマ区切りで指定することができます。「ウィンドウサイズに応じて画像を切り替える」とのこと。必要な画像だけ読み込まれるのでパフォーマンスが向上しそうです。

<img src="foo.jpg" srcset="2.jpg 2x,
  3.jpg 3x" alt="">

srcは未対応ブラウザのフォールバック、「x」はデバイスピクセル比（画素密度記述子）、「w」は横幅（幅記述子。○○px以下なら○○w）となります。上の例だとピクセル比が2のとき"2.jpgが選ばれるということになります。

sizes属性は指定したメディアにマッチすると指定した幅になります。vhはviewport heightの略で、親要素ではなく、ビューポートの高さに対する割合を示します。モバイルの向きなど気にせずに背景画像をブラウザにフィットさせることが出来ます。

<img src="clock-demo-thumb-200.png" 
  alt="Clock" 
  srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
  sizes="(min-width: 600px) 200px, 50vw">

• img - HTML | MDN
• レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA
• HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King

Can I use

font-feature-settingsプロパティ

タイポグラフィの機能を制御するfont-feature-settingsプロパティ。合字の表示など、OpenTypeフォントの機能（featureタグ）を指定し、デバイスフォントやWebフォントにも使えるそうです。下記の記事にはfeatureタグが紹介されています。

font-feature-settings: normal;

• フォントの機能を使えるCSS3のFont feature settingsとは
• font-feature-settings - CSS | MDN
• Typekitヘルプ | CSS での OpenType 機能の構文

Can I use

Grid Layout Module

複雑なレイアウトを構築するために便利なプロパティ。行列のグリッドを使い任意の場所に要素を配置する方法。親要素にdisplay: gridを指定、プロパティには列幅と行の高さを指定して使います。

display: grid;

• 仕様策定中のCSS Grid Layout Moduleによるグリッドレイアウト入門 - WPJ
• CSS Grid Layout Moduleについて調べたメモ - 1000ch.net
• Can I use

Can I use

font-smoothing

文字を滑らかに表示するfont-smoothingプロパティ。簡単にフォントのアンチエイリアスを調整できます。

-webkit-font-smoothing: antialiased;

[CSS] フォントのアンチエイリアス設定 | metrograph.jp

Can I use

vw / vh / vmin / vmax

vw/vhはブラウザのビューポート（表示領域。高さと幅）に対する割合（％）を示した単位。vwはビューポート幅・vhは高さに対する単位。デバイスの向きなどに左右されずブラウザに対する処理を行えます。高さをピッタリ合わせたい時なんかに便利。

height: 100vw;

ビューポートを単位にした CSS でスマホ向けのコーディングがハッピーになった話 | EXP - クリエイティブな事をはじめた(い)全ての人達へ

Can I use