ホームページ > 記事 > ウェブフロントエンド > CSS におけるハックとは何を意味しますか?
CSS におけるハックとは何を意味しますか?
- 清浅オリジナル
- 2018-12-07 16:36:4710828ブラウズ
CSS のハックは、ブラウザやバージョンごとに異なる CSS スタイルを記述して、必要なページ効果を表示できるようにすることです
CSS ハックは主にブラウザの互換性の問題を解決するために使用されます、ブラウザごとに異なる CSS を書くことができ、さまざまなブラウザで目的のページ効果を得ることができます。今日はこの記事でハックとは何かを詳しく紹介します
【おすすめコース: CSS チュートリアル #]
ハッキングの定義:
ハッキングは、Internet Explorer、Firefox、Chrome などの異なるメーカーのブラウザ、または同じメーカーのブラウザによって引き起こされます。バージョンが異なると、CSS のサポートが異なります。生成されるページ効果も異なります。これにより、同時に異なるブラウザと互換性があり、必要なページ効果を得ることができます。ブラウザ。言い換えれば、ハッキングの目的は、CSS コードをさまざまなブラウザーと互換性を持たせることです。
例: CSS3 属性を記述するとき、以下に示すように、ブラウザーごとに異なるコードを記述する必要があることがよくあります
animation:5s;/*标准版*/ -moz-animation: 5s;/* Firefox */ -webkit-animation:5s;/* Safari 和 Chrome */ -o-animation:5s;/* Opera */
!重要な問題:
Internet Explorer 6 以前では、同じ属性を持つ別のスタイルが同じスタイルに表示される場合、!重要な識別子に問題があります。宣言ブロックを使用すると、識別子が無視されます。これを使用して、Internet Explorer 6 および他のブラウザーが無視する特別なプロパティ値を提供できます。ただし、この問題は Internet Explorer 7 以降には存在しません
p
{
background: green !important;
background: red;
}
</style>
</head>
<body class="page-body">
<p>Test</p>IE ブラウザの F12 デバッグ ツールを使用して IE バージョンを切り替えて、実行時の効果を確認できます
IE5 では:
IE8:
*html の問題
# のハック部分コードはアスタリスク「*」の後に「html」が続く形で表されます。これは、ユニバーサル セレクターと要素タイプ セレクターを組み合わせたものです。ある時点で、これら 2 つのセレクターを別のセレクターの前に組み合わせると、一部の下位バージョンのブラウザーでのみ効果があり、他のブラウザーでは効果がありません。効果はありませんが、IE5 では実際に有効な
*html p
{
background: green;
background: red;
}
</style>
</head>
<body class="page-body">
<p>Test</p>: IE8 では
であるため、エラーは報告されません。
まとめ: 以上がこの記事の全内容です。この記事を通じて皆さんにハッキングについてある程度の理解をしていただければ幸いです。
以上がCSS におけるハックとは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。