hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

CSS will-changeプロパティについて

モバイルでの高速化でなんか知ってることねがぁ〜〜〜?てよっしーに聞いたら出てきた。
will-changeって使ってますか?え?なにそれ?未来の話??(よく見たら未来の話でした。一番下に対応ブラウザ書いてますがiOS Safari対応してません)

概要

Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
https://dev.opera.com/articles/ja/css-will-change-property/

saraさんだぁ〜。最近良く見るなぁ。(これとか。http://postd.cc/the-state-of-svg-animation/)

どうやらGPUアクセラレーションのおまじないの新しいやつみたい。
transform: translateZ(0);
の新しい版。
事前にブラウザに何のプロパティを変化させるかを伝えておいて、それに描画を最適化させる準備をしてもらう→最初からGPU枠をあてがう(日本語おかしい?)のでカクついたりへんなバグが出ない。的な。

ただしいつもどおり、
使いすぎるな、
使い終わったら消せ、
とのこと。
美味しいビールも飲み過ぎたら身体に毒だよ程々にね、ということだね!わかりやすい!!!
スタイルシートで宣言されたwill-changeは削除できません
って書いてあるから基本JSで制御するらしい。不思議や。

対応ブラウザ

ん?っておい
一年前の記事執筆時点で対応がChrome Canary 36+、Opera Developer 23+、Firefox Nightlyだけってなんだよ。俺は今の今使える技術はねぇかって聞いたんだよー!

Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/#feat=will-change

iOS Safari対応してないじゃねぇか…!よっしーめ!!!


投稿日

カテゴリー:

,

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください