Google Chrome 76 アップデート情報!!

Google Chrome 76 アップデート情報

更新日:

今月もやってまいりしました!Google Chromeのアップデート情報です!!
今回の主なアップデートは「サイトをダークモードにできるメディアクエリ」と「PWAのインストールの最適化」「Flashがデフォルトでブロックする」となっています。

ウェブサイトをダークモードにできるメディアクエリ

まずは、ダークモードに切り替えられる、メディアクエリが実装されました!

メディアクエリとは、CSSで使うことができる技術で、主にレスポンシブサイトを作る時に使用されています。

ダークモードに関しては1つの記事にして、ちゃんとご紹介しますね!!

ダークモードはどんなメリットがあるの?

ダークモードはウェブサイトの配色を暗めにするものになっています。

現在、多くのウェブサイトは白もしくは明るいグレーを背景に使っていると思います。

しかし、ユーザが夜の車内でサイトを見ていたら・・・。

眩しくて、閲覧するのが苦になると思います。

ここで、ダークモードに切り替えることができたら・・・。

ダークモードはサイト全体の背景色が暗いので、夜の車内で見ても目が疲れにくくなるメリットがあります!!

ダークモードを実装するためのCSS記述

このダークモードを実装するために、CSSにどのような記述をすればいいのかをサクッと説明していきます。

ウェブ開発に興味がない方は読み飛ばしてもOKです!

ダークモードをCSSに実装するにはメディアクエリに「prefers-color-scheme: dark」を記述します。

@media (prefers-color-scheme: dark) {
  .hoge {
    background: black;
    color: white;
  }
}

こんな感じの記述方法になります!

いつものメディアクエリと大体同じですね♪

詳しい実装については、1つの記事にするのでしばしお待ちを!

PWAがインストールしやすくなった

次は、PWAがインストールしやすくなりました!

PWAとは?

通常のウェブサイトをスマホのアプリのように扱えるようになる技術です。

スマホでPWAが設定されているウェブサイトをインストールするとスマホもしくはPCのホーム(デスクトップ)にアイコンが表示されます。

そのアイコンを開くとインストールしたウェブサイトをスマホアプリのように使用できます。

ちなみに、インストールと表現していますが、実際にはショートカットをダウンロードしているだけで、通信の容量はかなり少ない(皆無に等しい)のでご安心ください。

インストール手順

では、実際にインストールしてみたいと思います!

今回はPWAを導入しているTwitterで試してみたいと思います!!

Twitter

まず、ツイッターのウェブサイトにアクセスすると、下の図の矢印の場所にプラスアイコンがあると思います。

これをクリックするとインストールするか聞かれるので、「インストール」をクリックします。

すると、PWA版のウィンドウが立ち上がり、インストール完了です!!

デスクトップにツイッターのアイコンが追加されていると思うので、再び開きたい場合はそちらをダブルクリックしてください!

Flashがデフォルトでブロックされるようになった

最後にサクッと、Flashがデフォルトでブロックされるようになりました。

Google Chromeでも急速にFlash排除の動きが出て来ましたね!

これをデフォルトで有効にする方法もありますが、Flashのセキュリティや対応状況などを考えるとあまりオススメしません。
※デスクトップ版Google Chromeのみです。

さいごに

はいと、いかがだったでしょうか?

Google Chrome 76のアップデートですが、他にもセキュリティ面などでアップデートが出ているので、もっと詳しく知りたい方は以下のリンクからご確認ください!!

Google公式ドキュメント

というわけで、最後までありがとうございました!!!!

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.