transition・animationがスムーズじゃないと思ったら

IEやEdge、Androidの一部のブラウザでは:before、:after擬似要素にtransitionやanimationをかけると、その要素がスムーズにアニメーションしなかったり、あるいは周辺の要素に同時にアニメーションを付加していた場合に動きがおかしくなったりする現象が見られることがある。

解決方法は2つあり、

  • transitionの場合にはtransition-propertyをできるだけ限定する(allにしない)こと
  • 擬似要素ではなく素直にdivなどの新しい要素でアニメーションさせること

が挙げられる。
ひとつめはブラウザの負荷を下げるということで納得できるが、もうひとつは擬似要素のほうがレンダリング負荷が高いということだろうか?
普通の要素と擬似要素はブラウザの解釈の仕方が違い(IEではline-heightにremを使うと擬似要素のみバグったりすることもあるので)からくるものなのか?

謎だが、もしお困りの方がいましたら是非試してください。

Dockerのよく使うコマンド

コンテナの起動(-dオプションをつけ、バックグラウンドで起動することが一般的)

$ docker-compose up -d

コンテナの停止

$ docker-compose down

コンテナの停止とそのボリュームを削除

$ docker-compose down -v

ボリュームの一覧表示

$ docker volume ls

ボリュームの削除

$ docker volume rm (VOLUME NAME)

イメージの一覧表示

$ docker images

イメージの削除

$ docker rmi (IMAGE ID)

現在起動しているコンテナの一覧表示

$ docker ps

すべてのコンテナの一覧表示

$ docker ps -a

コンテナの削除

$ docker rm (CONTAINER ID)

任意のサービスで任意のコマンドを実行

$ docker-compose exec (サービス名) (コマンド)

$ docker-compose exec wp-cli wp db export data.sql --allow-root

スマホ・タブレット端末のHTML・CSSコーディングで意識すべきこと

よく知られているものは、input[type=”text”]やtextareaなどでfont-size: 16px以上でないとフォーカスしたときに拡大されてしまうということ。

さらにタブレット用のデザインをつくるときにやりがちなのが、タブレットのときのみPCと同じ見た目になるように同じViewportにする方法。これには副作用があり content=”width=device-width”以外のViewportにしたときに、タッチ関連のイベントが一瞬遅れて反応するようになるから、要注意。
これは昔のタッチデバイスで問題となっていたダブルクリックを判断するための時間を確保するためであり、今はViewportの設定からその機能をON/OFFするようになったためである。

「たいていのことは20時間で習得できる」所感

  • 習得したいスキルをこまかいパーツに分解し、習得者の意見を聞いてエッセンスを掴みつつ、重要な項目のみを抽出する
  • 目標とするパフォーマンスレベルを意識し、速度を意識してスキルの習得に取り掛かる
  • わからない、理解の追いつかないことが出てきても、量をこなすことでわかることも出てくるため、とりあえず量をこなすことも大事
  • スキル習得の効率をあげるアイテムには惜しまず投資する

上記のようなノウハウを徹底すれば、たいていのことを20時間で習得できるとうたう名書。
プログラムのくだりは、すでに基本的な素養があった部分が大きいと思うが、
個人的にそれとなく行なっていたことを言葉にしてくれているので、新しいスキルを習得するときの心構えを見直すことができるよい本だった。
ずっと本棚にしまってあって、読むのに3年かかってしまった。。