IEでremを使い文字サイズを動的にした時の話
font-sizeをemとかremで書くのが良いと聞きますが、実際効率は上がるんでしょうか…
「イマドキ」の書き方を習って、今回はremについて。
またもweb関連でお話です。
早い事、写真とか別の話を持ち出したいところですが、話のネタがないので…
今回はとある案件で起きた出来事の話です。
「文字サイズをボタンで大きくできるようにして、役目でしょ」
ってのがあって
切り替えるならremが手っ取り早いなって思って、 jsでhtmlのclassを切り替えて文字サイズを動的に変えるようにしたんですよ。
んで毎度のようにクロスブラウザチェック。
そしたらIE(Edgeも含む)で文字サイズが動的に変わらない?
htmlにfont-sizeを指定しているし、jsのエラーはないし、なによりモダンブラウザでは動いているから問題はなさそうだった。
なんでかなーと色々やっていて、hoverしたら文字サイズが変わった。
(この時の要素はcssのhoverでcolorを変えていた)
これで、なるほどなっと。
IEの場合、例えば
要素Aにfont-sizeにremを指定してhtmlのfont-sizeを動的に変更しても、要素Aではfont-sizeは動的に変わらないらしい。
要素の何かしらプロパティが変わらないとプロパティの数値は動的に変わってくれないので、要素に何かしらのプロパティを変えてあげないといけないようです。
まとめると、
htmlだけfont-sizeを変えても、他要素のremは動的に変わってくれません。
例えば下のようにcssをつけます。
.html font-size: 16px &.is-large font-size: 20px .block font-size: 1.25rem
jsでhtmlに.is-largeをaddClassしたら文字サイズを動的に変わるようにします。
モダンブラウザであればこれで大丈夫なんですが、話の主題にあるようにIEでは変わってくれないのでなんとかします。
.html font-size: 16px &.is-large font-size: 20px * z-index: auto .block font-size: 1.25rem
影響が出なさそうなz-indexを指定して、プロパティに動きを加えて無事にremを指定したremが動いてくれました。
私は今回こんな感じで対応してみましたが、実際うまいこと解決できる方法ってあるんでしょうか?
教えていただけると嬉しいです。
最後に
やっぱ、IEはめんどくさいですわ。