1. ホーム
  2. デザイン
  3. 11月のHTML・CSS関連のニュースまとめ

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

目次

  1. はじめに
  2. Firefox 57のアップデート
  3. Opera 49のアップデート
  4. 最新CSSの草案のアップデート
  5. まとめ

はじめに

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

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

Firefox 57のアップデート

  • <input>タグのdate, time属性が全てのビルドで使えるようになった (bug 1399036)
  • display-mode プロパティの minimal-uistandalone値がサポートされた(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の第2弾みたいなポジションとして追加される予定です。これができると、誰でも自由にプロパティや値が作れるようになります。まだまだ出てきたばかりの技術で非常に未熟ではありますが、実際に発表された時のインパクトは大きそうですね。

まとめ

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

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

投稿者プロフィール

sasakki
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。