Clever Geek Handbook

クロスブラウザーのバー

画像



良い時間、Habroコミュニティ！



ごく最近、仕事で面白い仕事に出くわしましたが、それでも気づきました 。 完全に普遍的なプログレスバーを作成する必要がありました。プログレスバーは、すべてのスタイル設定に対応し、クロスブラウザ（IE7 +以降）に対応します。



これが最終結果です。 記事全文はこちらでご覧いただけます。





ご理解のとおり、タスクは作成するだけでなく、自然な<progress>要素を最大限に使用することでもありました。 その利点は、この状況ではほとんど既製のソリューション+意味的に正しいことです。 しかし、この要素は、非常にスタイルが悪いだけでなく、最新のブラウザーの1つでもサポートされていないことに気付いたときの失望は何でしたか。



ブラウザのサポートとは何ですか？



現在までのブラウザサポートは、Firefox 11、Opera 11.61、Chrome 17です。

このような貧弱な気質は明らかに私を怒らせ、まったく私には向いていませんでした（（。

どうする？



一般的に、初心者のために、私はインターネットを検索し、ブラウザに有用な独自のものを見つけようとすることにしました。 その結果、次の3つが見つかりました。



つまり、これらは擬似要素であり、FirefoxおよびWebkitブラウザーで<progress>要素に到達することができます。



中間試験



一部のブラウザーでは<progress>要素がサポートされているという事実にもかかわらず、その様式化は、たとえそうであっても、多くの要望を残しています。 たとえば、Operaは様式化に屈したくないため、不正確な動きがあると、インジケーターバーが不要な色になり、Safariではインジケーター自体がまったく機能しません。 したがって、見つかったプロパティを使用し、それが私に与えるものを確認することにしました。 



<progress max="100" value="30">  </progress>​
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     




 progress { margin: 2em auto; display: block; width: 100px; border-radius : 8px; background: #fff; padding: 0; border: 0; text-align: center; height: 20px; box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5); overflow:hidden; background: -o-linear-gradient(#4c4, #8f8 50%, #4c4); } progress::-moz-progress-bar { background: -moz-linear-gradient(#4c4, #8f8 50%, #4c4); border-radius: 8px; } progress::-webkit-progress-bar { background: #fff; box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5); } progress::-webkit-progress-value { background: -webkit-linear-gradient(#4c4, #8f8 50%, #4c4); border-radius: 8px; }




そして、ここで何が起こったのです：

画像



FirefoxとChromeでは、ワイヤフレームとインジケーター自体を含む進行状況バーを完全に征服することができました。 これは、独自のプロパティのおかげで起こりました（それらがないため、何らかの理由で、画像はOperaの場合と同じでした）が、残念ながら、Safariはそのような数字を取得できず、背景も完全に消えました。 Operaでは、<progress>要素にスタイルを適用した後、ストリップの色が異なったため、IEについては説明しません。



当然、いずれにせよ、スクリプトを適用するつもりでしたが、そのメインアプリケーションを少なくともいくつかのブラウザーに減らしたいと思いました。



私たちは間違いなく2つのことについて言うことができます。 基本的なスクリプトはFirefoxとChromeには必要ありませんが、IE6-9とSafariには愛されています。 しかし、Operaを使用して、私はまったく入浴せず、このブラウザの開発者の良心にインジケータの色を残すことにしました。



挑戦する



スクリプトを作成する前に、タスクを要約し、一般的に取得する内容を決定する必要があります。





タスクに基づいて、私たちの場合、<progress>要素とテキストの2番目の要素が配置される共通のコンテナが適切であると結論付けました。 



 <div class="psyProgressBar">​ <progress max="80" value="0" class="psyProgressBar__line">​</progress>​ <i class="psyProgressBar__text">​0%</i>​ </div>​




次に、スクリプトの旅はすでにあるはずですが、記事全体を読みたい人のためにこの部分を残すことにしました。



私が言う唯一のことは、本質は、「通常の」ブラウザではインジケータを埋めるためだけにスクリプトを適用し、他のすべてのブラウザでは<progress>要素を<div>要素で特別に置き換えたことです。 最後に、プログレスバーを好きなようにスタイル設定できるクラス。



それで、ここで既製のソリューションをレイアウトしますが、すでに私のスタイルに精通していて、記事全体を読みたい人のために、記事自体へようこそ 。 クッキーを忘れないでください！ :)


More articles:


All Articles