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

デザインのお仕事に関するご相談

Bageleeの運営会社、palanではデザインに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

sasakki デザイナー

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

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

yamakawa

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

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

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

sugimoto

sugimoto

CONTACT PAGE TOP