クロスブラウザCSS

こんばんは



この投稿では、html5とcss3の使用に関する私の個人的な観察と結論を共有したいと思います。



つまり、 境界線の半径、ボックスの影、不透明度、線形勾配などの技術革新の使用。



各施設について、このサイトからタブレットを提供します （広告とは考えないでください。施設のサポートは非​​常に明確に説明されています）。 また、私の個人的な観察と、彼らが私を導いた決定について説明します。 私は主にPIE.htc （IE用）または背景を使用したエフェクトレイアウトを使用します

順番に始めましょう：

境界半径

ここでは、プロパティがほぼすべての場所でサポートされていることが明確にわかります。 FF 3.6およびIE7-IE8の問題を解決するために残っています。

• FF 3.6：2012年、このブラウザーは恐竜に起因すると考えられ、Mozillaのベンダープロパティを記述する必要はありません。 極端な場合には、彼は四角い角で生きることができると思います。
• IE：この問題はPIE.htcで簡単に解決できます

したがって、コードはおよそ次のようになります。

element{ border-radius: 10px; behavior: url("public/htc/PIE.htc"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サポート： IE6 ++、FF4 ++、GC1 ++、Opera10.5 +、Safari5 +

ボックスシャドウ

ここで、ベンダープロパティ-webkit-を追加する必要があることがわかります。 FF 3.6およびIE7-IE4の問題を解決するために残っています。

• すべてが前のプロパティと同じです。WebKitエンジンのサポートを追加する必要があるのはあなただけです

コード：

 element{ box-shadow: 5px 5px 10px #000000; -webkit-box-shadow: 5px 5px 10px #000000; behavior: url("public/htc/PIE.htc"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サポート： IE6 ++、FF4 ++、GC1 ++、Opera10.5 +、Safari5 +

不透明度

私たちの愛するIE7とIE8を除くすべての場所でサポートされています。

• かなりリソースを消費するフィルターを使用して問題を解決します

コード：

 element{ opacity: 0.3; filter: alpha(opacity=30); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サポート： IE6 ++、FF3.6 ++、GC1 ++、Opera10.5 +、Safari5 +

線形勾配

かなりまれなプロパティです。このため、誰もがそれなしでバックグラウンドを使用しようとしています。 しかし、一度行ったら、最後に行きます。 参照：



各ブラウザについて何を書く必要があるかについては説明しません。すぐにすべてのプロパティを含むコードを提供します。 はい、IEの場合はPIE.htcを再度有効にします



コード：

 element{ background-color: #F07575; background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55)); background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55); -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サポート： IE6 ++、FF3.6 ++、GC1 ++、Opera10.5 +、Safari5 +



これがそのような膨大な特性です。

原則として、これだけが伝えたかったものです。 しかし、IEのリソースの強度についても一言述べたいと思います。 はい、PIEとフィルターの使用はかなり面倒な操作であり、他に解決策がない場合にのみ使用してください。 個人的には、コンテンツが明らかに伸びて変化し、通常のグラデーショングラデーションの背景では問題を解決できないことがわかっているときに使用しますが、誰かが時間に追いついています。 いずれにせよ、これはあなたの選択です。

まず、上司にこれを条件付けし、この手法またはその手法を適用できる特定の境界を識別することをお勧めします。



ご清聴ありがとうございました！