主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

visibility: hidden の中の visibility: visible なアイツ

visibility: hidden で css的に要素を消すということはあるあるだと思うんですが、その消している要素は、見た目的には存在していないようでして、しっかりとDOM としても、要素としても存在しているのでスクロールのパフォーマンスなどにも影響してくることはよく知られている。

しかし、なんらかの事情で display: none; できないこともあったり、css アニメーションでいい感じに消したり表示したい、となると、やはり visibility: hidden と opacity: 0, oveflow: hidden, あるいは clip などを使って、消すことも多い。

そんなときに気をつけたいのは、なんかしらの思惑と思惑が交錯した結果、その子要素に visibility: visible な要素があるときだ。細かいことは置いといて、見ていただければわかる。

この青い丸。恥ずかしげもなくここに存在しているが、実は、visibility: hidden された wrapper の中にいるのだ。visibility: visible な要素は、そんな中でもしっかりとそこにいる上に、visible なのだ。これは理解しがたい。

親がでしゃばりなら、その子もまたでしゃばり、という理屈はわかる。親が引っ込み思案なのに、子はオラオラ系、まぁ、ないこともないか。

hidden
要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は visibility が visible に設定されていれば可視になります。
引用元:visibility - CSS: カスケーディングスタイルシート | MDN

といったように、visibility: hidden している要素は position: abusolute してスタッキングコンテキストを外れたていたりすると忘れがちであるが、ただ見えないだけでレイアウトにもしっかりと影響する。

しかし、スクリーンリーダーにはその存在が知られることはない。 position: absolute して visibility: hidden しているからといって、安心はできないのだ。

html font-size: 1px で body font-size: 16rem

ってすると、16rem = 16px ってわかり易くない?っておもったけど、ブラウザの最小フォントサイズが指定されるとくずれるみたい。

butchi.github.io

62.5% で 10px にして 1.6rem = 16px っていうのがベターな感じですが、

qiita.com

ブラウザの最小フォントサイズを 12px に設定されてると崩れるみたいなので、625% にして 100px にしてから .16rem もありですね。

そもそも、なんで rem で指定したいのか

レスポンシブで、html の基準フォントサイズを変更すると他微調整しなくても、いい感じに全体のバランスキープしたまま調整できるということ?

いや、あらためて考えるとやっぱりボタンとかフォーム周りで、拡大されても文字の大きさに合わせて余白もいい感じにできるというところかなと。なので、グローバルだけでなくて、コンポーネント単位で意識的に padding とか margin も rem で指定していかないとあんまり意味ない。

lifehackdev.xsrv.jp

でも、ついついマージンや余白は px でいっちゃいますよねぇ。あと、rem でやってても、見出しと本文のバランスとか気になってメディアクエリで個別に指定しちゃったり。。