2017年12月4日

デザイン

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も今後ちょっとづつ注目されそうなので、気になりますね。

0

0

AUTHOR

sasakki デザイナー

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

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

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

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP