クロスブラウザCSS3プロパティのセット

こんにちは、仲間！



レイアウトデザイナーとして、私は毎日さまざまなCSS3プロパティを処理する必要があります。それが好きかどうかに関係なく、それらを使用して、すべてのモダンおよび非モダンブラウザーで正しく表示する必要があります。 もちろん、私はさまざまなプロジェクトのレイアウトで使用する特定のライブラリを収集しました。 さまざまなリソースやフォーラムからコレクションをインターネットの無限の広がりで収集したので、誰かがすでに別々に何かに出会ったとしても驚くことではありません。



おそらく、この投稿は私たちの職業の経験豊富な代表者にとっては興味深いものではないでしょうが、若くて経験の浅い人々にとっては役に立つかもしれません。 上級の同志から、ここに存在するかもしれない欠点と、反対にここに存在しないかもしれない重要なポイントについてのコメントを受け取りたいです。







CSS3がすべてのブラウザーで正しく機能するためには、いくつかの外部ライブラリーを使用する必要があります。



1. プログレッシブInternet ExplorerまたはPIE -IE 6以降のバージョンがよりインテリジェントになり、CSS3プロパティを認識するのに役立ちます。 いずれにせよ、その装飾的な部分。 こちらからダウンロードできます。 このライブラリから、PIE.htcファイルが必要になります。このファイルは、後で接続するスタイルファイルと同じディレクトリに配置する必要があります。

また、短所もあります。このライブラリには古いブラウザが大量にロードされるため、ピンチで使用する価値があり、ユーザーにWebページの簡易バージョンを提供することをお勧めします。



2. jQuery.textshadow。 -バージョン9以下のすべてのIEでtext-shadowプロパティを使用することを教えます。 正しく動作するには、 ModernizrとjQuery自体を使用する必要があります。 また、このライブラリは、PIEのように、古いブラウザを大量にロードするため、極端な場合に使用することをお勧めします。 影を擬似要素にすることができます。



3. Selectivizr -IE 6-8の疑似クラス、疑似要素、CSS 2.1およびCSS標準セレクターを教えるjsライブラリ3.ところで、Modernizrまたは別のライブラリも使用する必要があります。 詳細はこちら 。



実際には、すべての準備が完了したら、CSS3プロパティに直接移動できます。これをモックします。

丸みを帯びたエッジまたは境界半径

.border-radius { border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

物件

 background-clip: padding-box;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

背景の画像が丸みを帯びた領域に忍び寄る可能性を排除します。



ひも

 behavior: url(PIE.htc);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このIEプロパティをサポートするPIEファイルが含まれています。

ブロックシャドウまたはボックスシャドウ

 .box-shadow{ box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444'); behavior: url(PIE.htc); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロパティ

  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

IEに使用されます。

背景または背景のグラデーション：線形グラデーション（）

 .gradient{ background-color: #444444; background: -webkit-linear-gradient(top, #444444, #999999); background: linear-gradient(to bottom, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); -pie-background: linear-gradient(to bottom, #444444, #999999); behavior: url(PIE.htc); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

二重の背景または背景：url（）、url（）;

 .multiple-background{ background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; -pie-background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; behavior: url(PIE.htc); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最新のブラウザはすべてを理解しているように見えますが、IEでは再びPIEを使用します。

ストロークまたは境界画像の代わりの画像：url（）;

 .border-image{ -webkit-border-image: url('image.png') 30 round round; border-image: url('image.png') 30 round round; behavior: url(PIE.htc); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、IE10では動作プロパティは機能しません。

テキストシャドウまたはテキストシャドウ

ここで、PIEの魅力が終わります。 IEでテキストシャドウを使用するには、上記のjQuery.textshadowライブラリを使用する必要があります。



使用するには、通常のブラウザの場合、手始めに、影を示すスタイルで必要です。

 .text-shadow{ text-shadow: 1px 1px 3px #000; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、ライブラリを使用して、私たちは珍しい IE ブラウザに私たちを理解してもらう

 <script type="text/javascript"> $(function(){ $(".text-shadow").textShadow(); }) </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、このライブラリとその作業に必要なすべてを接続することを忘れずに。

要素の幅と高さを計算するアルゴリズム（はい、このような変換）またはボックスサイズ

 .box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

残念ながら、このプロパティはIE7以降のブラウザでは機能しません。 現時点では、この問題の正しい解決策は見つかりませんでしたが、これは存在しないという意味ではありません。

ブロックを一列に並べるか表示する：inline-block

floatプロパティなどを使用せずに、1つの行にブロックを配置できる素晴らしいモダンなプロパティ。 残念ながら、実際には、多くの人がそれをきれいに使用しているという事実に出会いました。 そうです

 .inline-block{ display: inline-block; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この設計のコードは、最新の最新ブラウザーでのみサポートされています。 完全にサポートするには、数行を追加する必要があります。 完全なコードは次のとおりです。

 .inline-block{ min-height: 250px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここに

  display: -moz-inline-stack;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

古いMozillaのインラインブロックを理解するために使用されます。

物件

  vertical-align: top;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのブロックを上に垂直に揃えます。 タスクによっては、一番下で可能です。

そして最後にプロパティ

  zoom: 1; *display: inline; _height: 250px;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

IEに使用されます。 この場合、IEはmin-height



認識しないため、 _height: 250



使用されることに注意してください。

透明度または不透明度

 .opacity{ opacity: 0.5; filter: alpha(opacity=50); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

IEに使用されるフィルターでは、透明度の値は通常の0〜1ではなく、0〜100の範囲で指定されることに注意してください。

アニメーションまたはトランジション

 .transition { -webkit-transition: all 1s ease; transition: all 1s ease; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトの変換または変換

 .transform{ -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

transition



とtransform



プロパティは、バージョン9より前のIEブラウザーではサポートされていません。 transition



完全にバージョン10からのみです。 古いIEの解決策はまだ見つかりません。

背景サイズまたは背景サイズ

 .background-size{ background: url("back.jpg") no-repeat top center; -webkit-background-size: cover; background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='back.jpg', sizingMethod='scale'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS3セレクター

それは次のようなセレクターについてです

 ul li:fist-child{} ul li:last-child{} ul li:nth-child(3){} input[attr='']{} a:hover{}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その他の便利なセレクター：CSS3で追加されました。 このようなセレクターの品質サポートを提供するために、前述のSelectivizrライブラリーを使用します。 動作させるには、CSSファイルの前に含める必要があります。

Selectivizrが動作するセレクターの完全なリストは、 公式ページの「仕組み」セクションにあります。



最後に、ブラウザ間の互換性のためにすべてのプロパティを検討したのではなく、日常業務で最も頻繁に使用されるプロパティのみを検討したことに注意してください。 この投稿が、少なくともいくつかの点で役立つことを願っています！



更新



border-raduiusおよびopacityプロパティを更新しました。 厳密なコメントをありがとう、 pepelsbey ！



更新



推奨どおりにほとんどのプロパティを更新しました。 ユーザーAingisに多大なご協力ありがとうございます。