cssのブラウザ差分を活かした、見るブラウザによって見た目が変わるデザインを作ってみた。ARTICLE【FE風花雪月】煤闇の章、ハードクラシック攻略4日目【ファイアーエムブレム】HOME技術系csscssのブラウザ差分を活かした、見るブラウザによって見た目が変わるデザインを作ってみた。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ではサポートされていないことがわかる。普通のinset枠が出来上がるということだと思われる。CodePen.0続いてこちらのように、offsetを無くすとほとんどブラウザ間での差分はなくなる。全ての数値を100にして、offsetも-100にしてみる。CodePen.0そしてブラウザ間で比較すると・・・。FireFoxに変化が・・・!色々試したところ、FireFoxだけ-50で半分になっている模様。-100だと完全に左の枠に潰されてしまうようだ。続いてoffsetを-110くらいにしてみる。各ブラウザがどのようにoutlineを描画しているのかが違っていることがわかってくる。(具体的にどうしているかはもっと調べないと分からないので、ここでは割愛)自分で作ってみる。試して、outline-offsetをいじることで色々遊べることが分かった。自分でも色々作ってみる。CodePen.0・・・面白みがない。面白い図案が思い浮かばなかった・・・。誰かの参考になればうれしい。自分でも何か思いついたら作っていきたい。最近の猛暑の原因らしいヒートドーム現象って何?調べてみた。某配送システム白猫プロジェクトのアイシャが大好きなエンジニアの卵。Java/Shell/C++/HTML/Sass/rustかgoやりたい。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。