CSSハックについて

  • 2018/11/21

皆さんはブラウザソフトは何をお使いでしょうか?
多くの方は、Google chrome、IE、FireFox等をお使いかと思います。

使用する分には気に入ったものを使えばいいのですが、
ウェブサイトを作るとなると、その種類の多さが弊害になるケースが結構あります。
それが、ブラウザ間のスタイルの差異です。

Vender prefixで対応可能なものはそれで対応できますが、
稀にそれでは補えないケースがあります。
そういう時に使うのが、CSSハックと呼ばれる特定のブラウザのみに適用させるテクニックです
例えば、よくあるケースですが、他のブラウザでは普通に表示されるのにIEだけ表示されないというケースの場合、
以下をCSSに追加します。

_:lang(x)::-ms-backdrop, セレクタ― {
  適用するスタイル
}

使用してるエディタによっては頭の_が正しく扱われないかもしれませんが、
実際適用する分には問題ないです。

また、IEに限った話ですが、旧バージョンの9以前はそれぞれ記述が違います。
・IE8 
 selecter{ style:param\9; }

・IE9
 :root selecter{ style:param\0/; }
 
非常にややこしいですね・・・

最後に、CSSハックのデメリットですが、
SEO的にはあまりよろしくないそうです。

なので、Vender prefix等で対応できない最終手段としてご活用いただければと思います。

この著者の最新の記事

関連記事

ピックアップ記事

  1. アメーバブログからWordPressへ投稿記事を移行する機会がありましたので、それについてご紹介し…
  2. 今回で3回目のおすすめプラグインのご紹介です。 Classic Editor このプラ…
  3. WordPressで使えそうなプラグインのご紹介 その2ということで、またいくつか紹介したいと思い…
  4. WordPressでサイトを構築、改修するときに、標準の機能だけでは中々自分の思い描く通りにサイト…
  5. 皆さんはwordpressのテーマは何を使っているでしょうか?有料、無料ともにいろんなものが多く作ら…

株式会社タスタスHP

ページ上部へ戻る