cssのブラウザ差分を活かした、見るブラウザによって見た目が変わるデザインを作ってみた。

cssといえばブラウザによってレイアウト崩れが起きて、
調整に難儀してあまり好きじゃないという方も多いと思う。
今回はそれが楽しくなるようなものを見つけたので、
紹介しつつ自分も実際作っていきたい。

紹介

面白いのは、
MartijnCuppens氏が作成し、一時期有名になったcode。
それが以下。（※自分で作成したものではないので、リンクだけ張らせて頂いてます。）
https://codepen.io/MartijnCuppens/pen/MXojmw

こちら、なんとブラウザによって見え方が違うのである。
実際に各ブラウザの表示は以下のようになるようだ。

自分はChromeを使っているので、左下の模様だった。

なぜこんなことが起こるのか

どうしてこんなことが起こるのかというと、
タイトルにもあるように、cssのブラウザ差分の影響である。
具体的には、
outline-offsetが影響を及ぼしている。

outline-offsetというのは、
https://developer.mozilla.org/ja/docs/Web/CSS/outline-offset
こちらにあるように、
ボーダーと要素の間の間隔を決定している。
下の方をみると、IEではサポートされていないことがわかる。
なので、IEはこの間隔がわからないため、
普通のinset枠が出来上がるということだと思われる。
（IEがダメダメすぎでcodepenで動かせず、検証していないので完全にこれ読んでそうだろうと考えただけ）

色々試して解説

See the Pen outline_play by blue (@aoiBlue) on CodePen.0

続いてoffsetをいじってみる
変化を分かりやすくするために本家と同じく、
全ての数値を100にして、offsetも-100にしてみる。
結果がこれ

See the Pen outline-play2 by blue (@aoiBlue) on CodePen.0

早速FireFoxに変化が・・・！

色々試したところ、FireFoxだけ-50で半分になっている模様。
なので、-100だと完全に左の枠に潰されてしまうようだ。

続いてoffsetを-110くらいにしてみる。

See the Pen outline-play3 by blue (@aoiBlue) on CodePen.0

こうすると、最初の画像に近づいてくると同時に、
各ブラウザがどのようにoutlineを描画しているのかが違っていることがわかってくる。
（具体的にどうしているかはもっと調べないと分からないので、ここでは割愛）

自分で作ってみる。

色々試して、outline-offsetをいじることで色々遊べることが分かった。
なので、早速自分でも色々作ってみる。

See the Pen outline-play4 by blue (@aoiBlue) on CodePen.0

・・・面白みがない。

発想力に乏しいのか、
面白い図案が思い浮かばなかった・・・。
ただ、必ずしもinsetじゃなくていいこと、
outlineを複数組み合わせて遊べそうということはなんとなくわかったので、
誰かの参考になればうれしい。

また自分でも何か思いついたら作っていきたい。