Hackテクノロジーの概要
詳細
Hackテクノロジーの概要
1.1概要
各ブラウザ、特にIEブラウザはウェブ標準のサポート状況が異なるため、標準的なウェブページは各ブラウザで表現が異なるため、各ブラウザの互換性の問題を解決することはフロントエンドエンジニアの最も重要な仕事の一つとなり、hack技術とはフロントエンド開発において必要である.
1.2 hack一般形式
CSS Hackによく見られるのは、CSS属性Hack、CSSセレクタHack、IE条件注釈Hackの3つの形式であり、Hackは主にIEブラウザを対象としている.
1、属性レベルHack:CSS属性の前に特殊な文字を加え、異なるブラウザが異なる文字を識別して互換性のある効果を達成する.
2、セレクタレベルHack:CSSセレクタの前に特定のブラウザでしか認識できないセレクタを加えて互換性のある効果を達成する.
3、IE条件注釈Hack:IE条件注釈はマイクロソフトIE 5から提供された非標準論理文である.このようなHackはCSSだけでなく、判断文に書かれたすべてのコードに対しても有効になります.
注意:条件注釈はIEブラウザの下でしか実行できません.このコードは非IEブラウズの下で注釈として無視されます.IE条件コメントで異なるCSS、JS、HTML、サーバコードなどを読み込むことができます.
1.3 CSS属性hack——特殊文字1.3.1反斜線()
適用ブラウザ:IE/Mac.
反斜線()hackはIE/Macのバグを利用しています.*/で終了したcssコメントは、IE/Mac上で正しく閉じられていないため、IE/Mac上で無視する必要がある文は、このコメントの後ろに置くことができます.
//*CSSコメント:IE Macで次の文を無視*/
selector { ...styles... }
/*無視終了*/
注記:上記の方法は役に立たない!
その他の使用方法:
CSS属性値の後に「9」、「0」などの文字を付けます."9"はIE 10(IE 10を含む)以下のバージョンのみをサポートします."0"は、IE 8(IE 8を含む)以上のバージョンのみをサポートします.
1.3.2下線()
適用ブラウザ:IE 6およびその次のバージョン.
IE 6以降のバージョンでは、下線接頭辞付きの属性を認識できますが、他のブラウザでは無視されます.
注意:このhackはブラウザのバグを利用して無効なCSSを使用しているので、推奨しません.
1.3.3星号(*)
適用ブラウザ:IE 7および次のバージョン
IE 7以降のバージョンでは、アルファベット以外の文字(よく使われるのは、*、#、+、[)を接頭辞とする属性を識別できますが、他のブラウザでは無視されます.
注意:このhackはブラウザのバグを利用して無効なCSSを使用しているので、推奨しません.
1.4 CSSセレクタhack 1.4.1:rootセレクタ
:rootこのCSSセレクタは、IE 8(IE 8を含む)以外のIEブラウザおよび現代の他のブラウザでサポートされています.
1.4.2アスタリスクHTML(*html)
適用ブラウザ:IE 4-6.
HTML要素はW 3 C標準DOMのルート要素ですが、IE 4~6のバージョンには謎の親要素があります.完全に互換性のあるブラウザではこの*htmlセレクタは無視されますが、IE 4-6は正常に処理されます.
Example:
注意:このhackは完全に有効なCSSを使用しています.
1.4.3スタープラス(*+)
適用ブラウザ:IE 7
Example:
注意:IE 7標準モデルでのみ正常に動作し、怪異モードでは使用できません.また、IE 8の互換モード(IE 7の標準モードに相当)にもサポートされている.有効なCSSも使用されています.
1.4.4サブセレクタ(>)
適用ブラウザ:IE 6以上のバージョン及び非IEブラウザ
IE 6以降ではサブセレクタはサポートされておらず(>)、これを利用して他のブラウザに特別なルールを指定できます.
Example:
1.4.5サブセレクタにコメント(>/**/)
適用ブラウザ:IE 7(IE 7を含まない)以上のバージョン及び非IEブラウザ
IE 7は対サブセレクタをサポートするが,以下のhack法によりIE 7も除外することができる.空のコメントがサブセレクタの後に続くと、IE 7は後のルールを認識せず、以前のバージョンのブラウザと同じになります.
Example:
1.5条件注記1.5.1演算子
html条件注釈の演算子はすべて比較演算子に属し、その戻り値はboolean値であり、その演算結果はJavascriptの比較演算子と同じである.演算子には、NOT演算子(!)、より小さい演算子(lt)、より小さいまたは等しい演算(lte)、より大きい演算子(gt)、より大きいまたは等しい演算(gte)、サブ式(((())、AND演算子(&)、およびOR演算子(|).
構文の例:
例:jQueryバージョンの互換性
:IE 10 、 モードでは コメントはサポートされていません.
1.6まとめ
CSS hackはブラウザ のcss の いの を することができますが、 W 3 Cの に わないので、CSSを くのはやはり に って、このように でメンテナンスするのにも いに があって、 に いません. する は、 の3つの に う があります.
:Web の に できる
の ブラウザではなく、 い/ されていない/ てられたブラウザのみを としています.
コードが い.やむを ないHackであることを えさせ、 とかして り くことを に えさせます. 、 くのhacksは の を しており、hackの はブラウザの により くの の を き こす があります.
html を いてhtml に バージョンのブラウザに してロードされたスタイルシートを することで、CSSコード を した でCSSスタイルの を できます.
なCSS hack,[;background:#F 00;];Webkitカーネルブラウザ(Chrome[ バージョン]、Safari)、IE 7および のバージョンのブラウズのみ できます.このルールの3つのセミコロンは されなければならないことに してください.
Hackテクノロジーの概要
1.1概要
各ブラウザ、特にIEブラウザはウェブ標準のサポート状況が異なるため、標準的なウェブページは各ブラウザで表現が異なるため、各ブラウザの互換性の問題を解決することはフロントエンドエンジニアの最も重要な仕事の一つとなり、hack技術とはフロントエンド開発において必要である.
1.2 hack一般形式
CSS Hackによく見られるのは、CSS属性Hack、CSSセレクタHack、IE条件注釈Hackの3つの形式であり、Hackは主にIEブラウザを対象としている.
1、属性レベルHack:CSS属性の前に特殊な文字を加え、異なるブラウザが異なる文字を識別して互換性のある効果を達成する.
2、セレクタレベルHack:CSSセレクタの前に特定のブラウザでしか認識できないセレクタを加えて互換性のある効果を達成する.
3、IE条件注釈Hack:IE条件注釈はマイクロソフトIE 5から提供された非標準論理文である.このようなHackはCSSだけでなく、判断文に書かれたすべてのコードに対しても有効になります.
注意:条件注釈はIEブラウザの下でしか実行できません.このコードは非IEブラウズの下で注釈として無視されます.IE条件コメントで異なるCSS、JS、HTML、サーバコードなどを読み込むことができます.
1.3 CSS属性hack——特殊文字1.3.1反斜線()
適用ブラウザ:IE/Mac.
反斜線()hackはIE/Macのバグを利用しています.*/で終了したcssコメントは、IE/Mac上で正しく閉じられていないため、IE/Mac上で無視する必要がある文は、このコメントの後ろに置くことができます.
//*CSSコメント:IE Macで次の文を無視*/
selector { ...styles... }
/*無視終了*/
注記:上記の方法は役に立たない!
その他の使用方法:
CSS属性値の後に「9」、「0」などの文字を付けます."9"はIE 10(IE 10を含む)以下のバージョンのみをサポートします."0"は、IE 8(IE 8を含む)以上のバージョンのみをサポートします.
1.3.2下線()
適用ブラウザ:IE 6およびその次のバージョン.
IE 6以降のバージョンでは、下線接頭辞付きの属性を認識できますが、他のブラウザでは無視されます.
注意:このhackはブラウザのバグを利用して無効なCSSを使用しているので、推奨しません.
1.3.3星号(*)
適用ブラウザ:IE 7および次のバージョン
IE 7以降のバージョンでは、アルファベット以外の文字(よく使われるのは、*、#、+、[)を接頭辞とする属性を識別できますが、他のブラウザでは無視されます.
注意:このhackはブラウザのバグを利用して無効なCSSを使用しているので、推奨しません.
1.4 CSSセレクタhack 1.4.1:rootセレクタ
:rootこのCSSセレクタは、IE 8(IE 8を含む)以外のIEブラウザおよび現代の他のブラウザでサポートされています.
1.4.2アスタリスクHTML(*html)
適用ブラウザ:IE 4-6.
HTML要素はW 3 C標準DOMのルート要素ですが、IE 4~6のバージョンには謎の親要素があります.完全に互換性のあるブラウザではこの*htmlセレクタは無視されますが、IE 4-6は正常に処理されます.
Example:
* html p {font-size: 5em; }注意:このhackは完全に有効なCSSを使用しています.
1.4.3スタープラス(*+)
適用ブラウザ:IE 7
Example:
*:first-child+html p { font-size: 5em;} ：*+html p {font-size: 5em; } 注意:IE 7標準モデルでのみ正常に動作し、怪異モードでは使用できません.また、IE 8の互換モード(IE 7の標準モードに相当)にもサポートされている.有効なCSSも使用されています.
1.4.4サブセレクタ(>)
適用ブラウザ:IE 6以上のバージョン及び非IEブラウザ
IE 6以降ではサブセレクタはサポートされておらず(>)、これを利用して他のブラウザに特別なルールを指定できます.
Example:
html > body p { color: blue; }1.4.5サブセレクタにコメント(>/**/)
適用ブラウザ:IE 7(IE 7を含まない)以上のバージョン及び非IEブラウザ
IE 7は対サブセレクタをサポートするが,以下のhack法によりIE 7も除外することができる.空のコメントがサブセレクタの後に続くと、IE 7は後のルールを認識せず、以前のバージョンのブラウザと同じになります.
Example:
html >/**/ body p { color: blue; } 1.5条件注記1.5.1演算子
html条件注釈の演算子はすべて比較演算子に属し、その戻り値はboolean値であり、その演算結果はJavascriptの比較演算子と同じである.演算子には、NOT演算子(!)、より小さい演算子(lt)、より小さいまたは等しい演算(lte)、より大きい演算子(gt)、より大きいまたは等しい演算(gte)、サブ式(((())、AND演算子(&)、およびOR演算子(|).
構文の例:
IE 。
例:jQueryバージョンの互換性
:IE 10 、 モードでは コメントはサポートされていません.
1.6まとめ
CSS hackはブラウザ のcss の いの を することができますが、 W 3 Cの に わないので、CSSを くのはやはり に って、このように でメンテナンスするのにも いに があって、 に いません. する は、 の3つの に う があります.
:Web の に できる
の ブラウザではなく、 い/ されていない/ てられたブラウザのみを としています.
コードが い.やむを ないHackであることを えさせ、 とかして り くことを に えさせます. 、 くのhacksは の を しており、hackの はブラウザの により くの の を き こす があります.
html を いてhtml に バージョンのブラウザに してロードされたスタイルシートを することで、CSSコード を した でCSSスタイルの を できます.
なCSS hack,[;background:#F 00;];Webkitカーネルブラウザ(Chrome[ バージョン]、Safari)、IE 7および のバージョンのブラウズのみ できます.このルールの3つのセミコロンは されなければならないことに してください.