CSS におけるハックとは何を意味しますか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS におけるハックとは何を意味しますか?

清浅

Dec 07, 2018 pm 04:36 PM

hack

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 では:

CSS におけるハックとは何を意味しますか?

IE8:

CSS におけるハックとは何を意味しますか?

*html の問題

# のハック部分コードはアスタリスク「*」の後に「html」が続く形で表されます。これは、ユニバーサルセレクターと要素タイプセレクターを組み合わせたものです。ある時点で、これら 2 つのセレクターを別のセレクターの前に組み合わせると、一部の下位バージョンのブラウザーでのみ効果があり、他のブラウザーでは効果がありません。効果はありませんが、IE5 では実際に有効な

*html p
         {
            background: green;
            background: red; 
         }
      </style>
   </head>
   <body class="page-body">
      <p>Test</p>

ログイン後にコピー

: IE8 では

CSS におけるハックとは何を意味しますか?