Corredor

ウェブ、プログラミングの勉強メモ。

IE11 のみ CSS を適用させる CSS ハック

CSSシークレット ―47のテクニックでCSSを自在に操る

CSSシークレット ―47のテクニックでCSSを自在に操る

CSS Grid を調整するため、IE11 のみ適用したい CSS があったのだが、IE11 は @supports がサポートされていないので、@media を用いた CSS ハックで対応することにした。

以下のように書けば、IE11 でのみ CSS を適用できる。

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .selector {
    /* IE11 にのみ適用される */
  }
}

*::-ms-backdrop を除けば、IE10 以降で適用されるようになる。IE10 の対応とか考えてないので自分はコチラの書き方を選んだ。

@media all and (-ms-high-contrast: none) {
  .hoge {
    /* IE10 以降にのみ適用される */
  }
}

…というところまで調べてから、-ms-high-contrast って何?と思って調べてみると、以下のような記事が…。

どうも、「ハイコントラストモード」が ON だと IE でも適用されず、ON の場合も条件を満たすようにしてしまうと Edge でも適用されてしまうので、不完全な方法らしい。

この記事では「代わりにこうしろ」という情報がなかったのでもう少し調べてみると。

コチラの文献によると、

_:-ms-lang(x)::-ms-backdrop, .selector {
  /* IE11 のみ適用される */
}

こんなハックがベストなのでは、とのこと。

_:-ms-lang(x)::-ms-backdrop, .selector、コレで行こう。

IE11 で CSS Grid を使うのが大変だった

display: grid で実現できる CSS Grid。コレを IE11 で使うには、ベンダプレフィックスが必要だと分かった。

そうかと思い grid-template-columns-ms-grid-template-columns と書いてみるとコレが動かず、よくよく調べたら -ms-grid-columns と書かないといけないようだ。

コレはヤバそうな臭いを感じて調べてみると、やはり IE のベンダプレフィックスは色々と違いがあるようだった。

自分自身そこまで使いこなしているワケでも、多用しているワケでもないので被害は少なめだが、一番困ったのは grid-gap プロパティのベンダプレフィックスがないことだった。IE の場合は代わりに margin でなんとかしないといけなかった。

また、要素が自動的に折り返してくれることもなく、2行目以降に表示したい要素は -ms-grid-row を指定するしかない。

あまりにプロパティが違いすぎて、AutoPrefixer でも完全対応はできないようだ。自分で使う内容を確認しつつ、SASS ミックスインを作ったりして回避する他なさそうだ。

以下に、IE とその他のブラウザで同等の表示結果が得られるサンプルを作ってみた。

See the Pen CSS Grid Practice by Neos21 (@Neos21) on CodePen.

IE 向けの指定を通常のセレクタに書いておく。そのうえで、@supports 規則を使って display: grid が有効か確認し、対応しているブラウザ向けに改めてスタイルを定義し直すようにした。こうすると CSS Grid のサポート状況に合わせてルールをまとめられる。本当なら「フォールバック」は後に書きたいが、CSS の「後から書いたものがカスケード (上書き) される」特徴には逆らえないし、IE が @supports にも対応していないことから、仕方なくこう書くことに…。

なかなかしんどみが高かったので、IE を対象にする必要がある場合は、IE が死ぬまでは CSS Grid を多用するのは避けた方が良いかもしれない…。

Web担当者よ、古いIEを捨ててモダンブラウザに今すぐ対応せよ impress Digital Books

Web担当者よ、古いIEを捨ててモダンブラウザに今すぐ対応せよ impress Digital Books

  • 作者: 物江修,春日井良隆,小山健治,伊藤秀樹,Web担当者Forum編集部
  • 出版社/メーカー: インプレス
  • 発売日: 2016/01/12
  • メディア: Kindle版
  • この商品を含むブログを見る

オレオレノーマライズ CSS「Neo's Normalize」を作った

Normalize.css や、Bootstrap 4 から採用されている Reboot などの思想を基に、オレオレノーマライズ CSS を作った。その名も「Neo's Normalize」

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

動作デモはコチラ。

作った経緯

自分のメインサイト Neo's World では、古くは全称セレクタによる Reset.css、最近は Normalize.css をカスタムしたものを使っていた。また、はてなブログ類でも Normalize.css が組み込まれたテーマを基にカスタマイズして使っていた。

Normalize.css は大変優秀なのだが、個人的にはレガシーブラウザをサポートしなくていいかなーとか、フォーム部品のノーマライズが多くてファイルサイズがかさばるな〜とか思って、軽量版を作りたい、と思ったのがきっかけ。

そうしているうちに Bootstrap 4 が正式リリースされ、中身を見ていると Reboot という独自のノーマライズ CSS が用意されていることに気付いた。Normalize.css よりももう少しスタイリングされていて、特に「margin は bottom にだけ付ける」というルールが良いなと思った。

そこで、Normalize.css と Reboot のいいとこ取りをして、自分のサイト群のベースデザインに使えるスタイル定義をブチ込んで、独自のノーマライズ CSS を作ることにした。

方針

Neo's Normalize の製作方針は次のとおり。

  • 自分が使うモダンブラウザで「大体」平仄が取れていれば OK とする。
    • レガシーブラウザは崩れようが認識されなかろうが無視。
    • iOS 端末のことは若干考慮するが、Android 端末は持っていないので無視。
    • 全部をキッチリ揃えきろうとも思っていない。ガチガチにしたいところはサイトを作る時に固定すればいい。
  • 自分があまり使わない要素のノーマライズは入れない。
    • フォーム部品とか多用しないし、HTML5 から登場した新要素もあれやこれや使うことはないので、そういうモノのノーマライズは対象外。
  • 自分がサイトを作る時、必ず入れる指定を入れておく。
    • html 要素に overflow-y: scroll を入れて、スクロールバーの有無で画面幅が変わらないようにするとか。
  • 自分が作るサイトのベースデザインを予め取り入れておく。ノーマライズというよりは基礎的なスタイリングも兼ねる感じ。
    • そのため、フォントやカラーリングも指定している。
  • マージンのとり方は Reboot にならい、下方向にだけ付ける方針とする。
    • コレがけっこう分かりやすくなるのでよさげ。
  • マージンやパディングなどのサイズ指定は remem で指定する。

こんな感じで、完全にオレオレ用のノーマライズを作った。

主な機能・定義

主な機能、というか、主にスタイル定義したものを紹介しておく。

  • html 要素
    • フォントを「パーフェクト設定」なサンセリフ系に変更。
      neos21.hatenablog.com
    • iOS 向けのフォントサイズ調整や慣性スクロールなど。
  • body 要素
    • ページ全体の余白をなくす : これまで padding も指定したりしていたけど、どうも margin だけで良いみたい。
    • line-height1.7 に指定 : 個人的にこのぐらいの行間で落ち着けた。
    • overflow-wrap (word-wrap) を指定 : IE11 は overflow-wrap に対応していないようだったので両方指定。
  • detailsmaindisplay: block を指定 : IE11 向け
  • よく使うブロック要素の margin-top0 に、margin-bottom1rem に統一。
  • ddliblockquotefigure 要素は左マージンに 2.5rem 開けるようにした。
    • ol 要素で3桁の箇条書き項番が出てきても大丈夫なように 2.5rem とした。
    • li 要素については、olulpadding-left を持っているので、コレを解除しておいた。
  • 見出しサイズを調整 : h1 要素を 2em とし、h5h6 は小さくなりすぎるので 1em にした。
  • addressem など、斜体になる要素をリセット。
    • 元々イタリックにするために生まれた i 要素だけは未指定で。
  • table 要素内の captionth と、dtem 要素あたりを太字にした。
  • 等幅フォントを使用する要素には「パーフェクト設定」な等幅フォントを指定。
  • codekbdsampvar に改めて font-size: 1em と指定 : IE11 向け。
  • フォーム部品のマージンをなくし、フォントと文字サイズを継承させるようにした。
  • blockquote は緑枠、precode などは灰色枠にスタイリング。figure は左に太枠線を置いてスタイリングした。
  • hr 要素は border-bottom で罫線を引いた。
  • fieldsethrtable などで使う罫線の色を灰色に統一。
  • summary 要素は開閉できる UI になるので cursor: pointer を指定。

こんなところか。何か気付き次第ちょこちょこ直していこうと思うので、よかったら使ってみてほしい。