11月のHTML・CSS関連のニュースまとめ

はじめに

本記事では2017年11月のHTML・CSS関連のニュースをまとめてご紹介します。

今月はFirefox, Operaの２つのブラウザでアップデートがありました。
また、最新CSSの草案にもアップデートが加わりましたので、そちらに関してもご紹介します！

Firefox 57のアップデート

• <input>タグのdate, time属性が全てのビルドで使えるようになった (bug 1399036)
• display-mode プロパティの minimal-ui と standalone値がサポートされた(bug 1369815)
  • display-modeとはCSSメディアクエリの一環として、ブラウザのディスプレイ状況によってCSSを変えることができるプロパティです。例えば、ユーザーがフルスクリーンにしているときなどにCSSを変えることができます。 what is display-mode?

例

@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

• CSSグリッドで作成したグリッドの間のスペースを定義する grid-row-gapプロパティとgrid-column-gapプロパティがgridという省略を使ってもリセットされなくなった (bug 1387410)
• layout.css.clip-path-shapes.enabledの設定が削除された (bug 1399767)、また、<basic-shape>のサポートのdisableができなくなった。
• Quantumからの修正や改善

Opera 49のアップデート

• OpenType の Variable Font に対応した。OpenType の Variable Fontとは1つのフォントで複数のウェイトやバリエーション(太字・イタリックなど)に対応したフォントです。font-variation-settings プロパティを使って、Variable Fontを調整することができます。
  • これは非常に注目して行きたいですね！最近、AdobeがPhotoshopとIllustratorでVariable Font に対応したことを発表しました。今後も注目されていくと思います。
• CSSの色解析が4桁、8桁の数字にも対応しました。この新しいカラーコードはhexカラーコードの派生形です。今までは #RRGGBB と #RGBに対応していましたが、新しい4桁、8桁のカラーコードでは、さらに透明度にも対応し、 #RRGGBBAA と #RGBA に対応しています。
• <data>と<time>タグのDOMインタフェースがサポートされました。これにより、データを保存する標準化した方法ができました。
• visibility:collapse とCSSで宣言することにより、テーブルのローを隠しつつ、テーブルのカラム幅を維持することができるようになりました。
  • 英語ですが、詳しくはこちらからご覧いただけます。

最新CSSの草案のアップデート

• CSSプロパティと値のAPIがアップデートされた
• 新しいCSSのプロパティを登録するためのAPIを定義する草案
• 本APIより登録されたプロパティはデフォルトの値、継続性、動作などが定義される
  • こちらのCSSプロパティと値に関しては、CSS-Variableの第２弾みたいなポジションとして追加される予定です。これができると、誰でも自由にプロパティや値が作れるようになります。まだまだ出てきたばかりの技術で非常に未熟ではありますが、実際に発表された時のインパクトは大きそうですね。

まとめ

以上、11月のHTML・CSS関連のニュースまとめをご紹介しました。
今回、個人的に特に興味深かったのはOpenTypeのVariable Fontと4桁,8桁のhexカラーコード対応です。

また、CSSプロパティと値のAPIも今後ちょっとづつ注目されそうなので、気になりますね。