CSSインポート(@import)の注意点

CSSの@import(参考 CSS 概説 - インポート)は、運用を効率的にできる(ことがある)構文ですが、いくつか注意点があります。

(IEのみ)@importで読み込むcssファイル数の上限

  • IE6・7・8で、@importでファイルを読み込みが有効なのは31個まで。32個目以降は反映されません。
  • 実は@importだけではなくstyle要素でも31個制限はありました。@importがその状況に陥りやすいだけ。

(Safariのみ)@importでリンク先を間違えると、エラーページのスタイルを持ってきてしまうことがある

  • 404エラーページにスタイルシートでの装飾を行っている場合
  • そもそもリンク先を間違えるなという話だが、沢山のファイルを@importで読み込ませているとその状況がたまに起こる......。
  • (未検証)普通にlinkで読み込む場合も同様の現象になるかも?

(IEのみ)@importを使うとCSSの読み込みが遅くなる場合がある

古いブラウザへの対応


最終更新: 2017-10-15 (日) 22:57:02