ホームページ  >  記事  >  ウェブフロントエンド  >  CSSハックの分類と3つのCSSハック方法を詳しく解説

CSSハックの分類と3つのCSSハック方法を詳しく解説

零下一度
零下一度オリジナル
2017-05-04 17:36:242978ブラウズ

全文はここから引用、素晴らしい記事です


  • 異なるメーカーのブラウザや特定のブラウザの異なるバージョン(IE6〜IE11、Firefox/Safari/Opera/Chromeなど)により、 css サポートと解析は異なります。現時点では、統一されたページ効果を得るために、異なるブラウザまたは異なるバージョンに対応する CSS コードを記述するこのプロセスは、CSS ハックと呼ばれます。

  • 方法
    ブラウザとブラウザのバージョンが異なると、CSS のサポートと解析結果が異なり、 CSS 優先度 がブラウザの表示効果に与える影響があるため、それに応じて異なるブラウザをターゲットにすることができます。ブラウザのコンテキストは異なる CSS を適用します。

  • cssハック分類
    には、cssattributeprefix方式、selector prefix方式、IE条件付きコメント方式の3つの表現形式があります。

    • 属性プレフィックスメソッド(つまりクラス内部ハック)

    • セレクタープレフィックスメソッド

    • IE条件付きコメントメソッド
      cssハックは一般的に、幅広い用途と強力な認識能力を前面に持つCSSを定義します。

  • CSS ハック方法 1: 条件付きコメント方法 (IE10 以下に適用可能、IE10 では条件付きコメントはサポートされなくなります)

    • gt: より大きい、条件付きバージョン以降を選択し、条件付きバージョンを除くバージョン。
      lt: 未満、条件付きバージョンを除く、条件付きバージョンの下のバージョンを選択します。
      gte: 以上、条件付きバージョンを含む、条件付きバージョン以上を選択します。
      lte: 以下、条件付きバージョンを含む、条件付きバージョンの下のバージョンを選択します。
      ! : 高低に関係なく、条件付きバージョンを除くすべてのバージョンを選択します。

    • 条件付きコメント属性:

    • インスタンス

         <!--[if IE]>
         <p class="p1">只在IE5、6、7、8、9下显示</p>
         <![endif]-->
         <!--[if ! IE]><!-->
         <p class="p5">非IE</p>
         <!--<![endif]-->

      HTMLスクリプトの通常のコメントメソッド19791207a4e0a22c816ac020ecd8cae0、条件付きコメントメソッドは以下でのみ使用可能ですIE10IE ブラウザ19791207a4e0a22c816ac020ecd8cae0,条件注释法只有IE10以下的IE浏览器可以识别,对于别的浏览器那么就只能看见的是一对封闭的不起作用的注释。对于非IE 的注释,注意里面有一个4e255cca6c1c1c2b4c46e2b80a10fe99 では認識できますが、他のブラウザでは、次のペアのみが表示されます。閉じられた注釈が機能しない。 IE 以外のコメントの場合、内部に閉じられたコメントとして機能する 4e255cca6c1c1c2b4c46e2b80a10fe99 があることに注意してください。

         <!--[if IE 6]>
         <p class="p2">只在IE6下显示</p>    
         <![endif]-->
         <!--[if gte IE 6]>
         <p class="p3">只在IE6以上版本</p>    
         <![endif]-->
         <!--[if ! IE 8]>
         <p class="p4">非IE8的的IE浏览器</p>
         <![endif]-->
  • CSSハック方法その2:クラス内属性プレフィックス方法
    属性プレフィックスは、特定のブラウザでのみ認識できるいくつかのハックプレフィックスをCSSスタイルの属性名に追加することで、期待どおりの結果を達成しましたページ表示効果。
    以下は標準モードでのハック方法です

    • ルール
      *color:IE5.5,6,7
      +color:IE5.5,6,7
      #color:IE5.5,6,7
      -color: IE5.5, 6
      _color: IE5.5, 6
      この中で私がよく使うのは*と_
      カラーです

以上がCSSハックの分類と3つのCSSハック方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。