今日は、必要に迫られたため、 IE 6とIE 7のためのCSSハック
について、記憶を取り戻したいと思います。
もうすでに、Microsoft自体がIE7のサポートを打ち切っています。
さらにその前のバージョンとなると、windows2000以前のOSを
使用しているという事になりますので、最大で13年も以前の
パソコンを使用している人をサポートする事になります。
現存している可能性は限りなく低いと思われます。
しかし、ブラウザも愛車と一緒で、長年付き合っていると手放せなく
なるという方もかなりいらっしゃるようなので、
ユーザアクセシビリティを心から考えますと、対応ができた方が
思いやりがあるんじゃないかと自分では思っています。
考え方は、賛否両論あると思いますが・・・・・
改めて、振り返りましたが、ホントにたくさんあります。
その中でも、とっても簡単な「スターハック」くらいを見直しておけば
いいんじゃないかと思っています。
①スターハック Star HTML Hack
IE 6とMac OS XのIE 5に適用します。使用方法は、適用させたい
セレクタの前に「* html」と記述するだけです。スター（*）を適用するので、
「スターハック」と名付けられました。
適用したいセレクタの前に「* html」を記述することで実装できます。
そのほかのモダンブラウザは「HTMLには親要素がない」と解釈し、
「この記述は間違っている」として適用しません。
しかし、IE 6やMac OS XのIE 5は、それを正しいと認識し、
適用してしまいます。このハックは、IE 6のズレを直す際によく使われるハックです。
構文
* html p {
color: #f00;
}
ソースサンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample01</title>
<style type="text/css">
* html p {
color: #f00;
}
</style>
</head>
<body>
<p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>
②2スターハック Two Star Hack
IE 6やMac OS XのIE 5に適用します。使用方法は、IE 6やMac OS XのIE 5に
適用したいセレクタの前に「* html*」を追記します。
W3C CSSバリデーションには通らず、文法的には正しくありません。
このハックは「* html（スターハック）」と「html*（スター7ハック）」を
組みあわせたもので、両方のハックで適用するWebブラウザが、
このハックでも適用されます。
構文
* html*p{
color:#f00;
}
ソースサンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample02</title>
<style type="text/css">
* html*p{
color:#f00;
}
</style>
</head>
<body>
<p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>
----------------------------------------------
以上になります。簡単ですよね！
また、他で良く見かけるのは、
インポータントハック「!important」ですかね？
いろいろと書き方がありますが、とにかく何事も経験なので、
考えるよりも行動！！
まず、やってみることではないかと改めて思いました。
0 件のコメント :
コメントを投稿