連載インデックスへ
Webブラウザ別CSSハック&フィルタTips(3)
モダンブラウザでも使えるCSSハック18選
有限会社タグパンダ喜安 亮介
2009/12/16
Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部)
モダンブラウザとMac OS XのIE 5でも使えるCSSハック
前回の「IE 6とIE 7のためのCSSハック16選」では、IE 6とIE 7のためのCSSハックのテクニックを紹介しましたが、今回は、モダンブラウザでも使えるCSSハックのテクニックを下記に分けて紹介します。
- IE 6/7/8をハック(IE 6とIE 7、IE 8に効く、もしくはIE 6とIE 7とIE 8に効かないハック)
- IE 6とIE 7、IE 8に効くハック
- IE 6とIE 7とIE 8に効かないハック
- IE 8のみに効くハック
- IE 7、Firefoxに効くハック
- Firefoxのみに効くハック
- Operaのみに効くハック
- Safari、Google Chromeに効くハック
前回同様、どちらの場合にしてもIE 6/7/8とほかのWebブラウザとの挙動を分けられるので、IE 6/7/8用のハックとして分類できることになります。また、そのほかのWebブラウザのハックに関しても同じ分け方です。
- IE 6/7/8以外のすべてのWebブラウザで読み込む → IE 6/7/8のハックとして機能する
- 逆に、IE 6/7/8で読み込む → IE 6/7/8のハックとして機能する
ちなみに、Mac OS XのIE 5のシェアは皆無といっていいレベルなので、Mac OS XのIE 5以外のWebブラウザを分類する際には、Mac OS XのIE 5の○×は無視してあります。
一方で、Mac OS XのIE 5のためのハックもあります。
- Mac OS XのIE 5のみに効くハック
- Mac OS XのIE 5に効かないハック
これらを表にまとめます。検証Webブラウザは、下記の通りです。
- Windows:IE 6、IE 7、IE 8、Firefox 3.5、Safari 4、Chrome 3、Opera 10
- Mac OS X:IE 5、Firefox 3.5、Safari 4、Opera 10
表 Webブラウザ別CSSハック(2)(表の完全版は連載インデックスにあります) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
今回、紹介するCSSハックは、主に<p>要素を例にしていますが、ほかの要素でも書き方を同じにして、pの部分を書き換えれば適用できます。ただし一部のハックでは、要素が限定されるものもあります。
CSSハックの基本については、下記記事をご参照ください。この記事はCSSの基本を紹介する連載「いまさら聞けないCSS/スタイルシート入門」に含まれますので、CSS自体の基本を抑えたい方は連載を通してご参照ください。
1/3 |
INDEX | ||
Webブラウザ別CSSハック&フィルタTips(3) モダンブラウザでも使えるCSSハック18選 |
||
Page1 モダンブラウザとMac OS XのIE 5でも使えるCSSハック |
||
Page2 コンディショナルコメント ユーザーエージェントハック ファーストオブタイプハック 否定lang疑似クラスハック ノットターゲットハック 構造的な疑似クラスハック 否定Nth child疑似クラスハック ファーストチャイルドハック |
||
Page3 モズエニーリンクハック モズドキュメントハック コメントモズエニーリンクハック xmlns属性セレクタハック ウェブキットハック Mac IEスターハック インポートハック メディアタイプ混在ハック ホーリーハック、バックスラッシュハック 【おわりに】CSSハックの利用はリスクを見極めて慎重に |
[an error occurred while processing this directive]
「デザインハック」コーナーへ |
HTML5 + UX フォーラム 新着記事
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|