CSS hackとは インターネットExplorer、Safari、Mozilla Firefox、Chromeなど、異なるメーカーのブラウザ、または同じメーカーのブラウザの異なるバージョン、例えばIE 6とIE 7は、CSSの解析認識が全く同じではないため、生成されたページの効果が異なり、私たちが必要とするページの効果が得られない. この時、私たちは異なるブラウザに対して異なるCSSを書く必要があります.それは異なるブラウザでも私たちが望んでいるページ効果を得ることができます. ブラウザの互換性についてお話しします をするかどうか
製品の角度(製品の参加者、参加者のブラウザ比率、効果優先、または基本機能優先) .
コストの観点(何かをする必要があるかどうか) はどの程度 をやり遂げます
どのブラウザがどのような効果をサポートするか のやり方
互換性要件に基づいて技術フレームワーク/ライブラリ(jquery) を選択する.
互換性ニーズに応じて互換性ツール(html 5 shiv.js、respond.js、css reset、normalize.css、Modernizr) を選択
postCSS 条件注釈、CSS Hack、js能力検査はいくつかの補修 を行う.
ブラウザ対応の書き方を5つ以上挙げます 一般的なプロパティの互換性inline-block:>=ie 8 min-width/min-height:>=ie 8:before,:after:>=ie 8 div:hover:>=ie 7 inline-block:>=ie 8 background-size:>=ie 9フィレット:>=ie 9シャドウ:>=ie 9アニメーション/グラデーション:>=ie 10 書き方 フローティング をクリア
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* ie67 */
}
inline-block を利用
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
html 5 shiv、respond を利用
属性プレフィックス .box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
条件注記
以下のツール/名詞は何をしていますか。 条件注釈:条件注釈(conditional comment)は、HTMLソースコードにおいてIEによって条件付きで解釈される文である.条件注釈は、IEにコードを提供および非表示にするために使用され得る.条件コメントを使用したページはWindows Internet Explorer 9では正常に動作しますが、Internet Explorer 10では正常に動作しません.IE 10は、条件注記 をサポートしない
IE Hack:特殊な記号あるいは方式を使ってIEブラウザだけが解析することができるコードを書き出して、CSS属性の接頭辞法、セレクタの接頭辞法とIE条件の注釈法があります. CSS属性接頭辞法:例えばIE 6は下線と星*を識別することができ、IE 7は星*を識別することができるが、下線を識別することができず、firefoxは両方とも認識できない. セレクタプレフィックス法:例えばIE 6はhtmlを認識できる.class{},IE 7は+htmlを認識できる.class{}または*:first-child+html.class{}. HTMLヘッダリファレンス(if IE)Hack:すべてのIE:```に対して、IE 6および以下のバージョンに対して:このようなHackはCSSだけでなく、判断文に書かれたすべてのコードに対して有効になります.書く順番:一般的に認識力の強いブラウザのCSSを前に書きます.ブラウザ優先度:FF jsコンピテンシー検出:ブラウザの種類を検出するのではなく、ブラウザのコンピテンシーを検出し、検出されたブラウズが特定のコンピテンシーを持っているかどうかに基づいて、具体的な解決策を制定する. html5shiv.js: The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. respond.js: A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) css reset:以前のブラウザでサポートされ理解されていたCSS仕様が異なるため、ページをレンダリングする際の効果が一致せず、互換性の問題が多く発生しました.だからcss resetの問題が発生します. normalize.css: Normalize.cssは小さなCSSファイルにすぎませんが、デフォルトのHTML要素スタイルではブラウザ間での高度な一貫性を提供しています.従来のCSS Resetに比べてNormalize.cssは現代的でHTML 5のために用意された良質な代替案である.Normalize.cssは現在、Twitter Bootstrap、HTML 5 Boilerplate、GOV.UK、Rdio、CSS Tricks、その他多くのフレームワーク、ツール、Webサイトで使用されています. Modernizr:Modernizrは、ユーザーブラウザHTML 5とCSS 3の機能を検出するJavaScriptライブラリです.Modernizrは、ページのロード時に機能を検出するために迅速に実行します.その後、検出結果を保存するJavaScriptオブジェクトを作成し、ページのhtmlラベルにclassプロパティを追加してCSSをオンにします.Modernizrは大量のテストをサポートし、オプションでYepNopeを含む.jsは、状況に応じて外部のjsリソースとcssリソースをロードします. postCSS:postCSSは、JSプラグインを使用してCSSを変換するツールで、変数、混入、将来のCSS構文、インライン画像などをサポートします.PostCSSはCSSをJavaScriptのデータにし、操作可能にします.PostCSSは、JavaScriptプラグインに基づいてコード操作を実行します.PostCSS自体はCSSを変えることはなく、プラグインにすぎず、いかなる転換を実行するために道を舗装しています. 一般的にどのサイトで属性互換性を調べますか? canius.com