Box-Shadowによる進歩的な強化

StackOverflow https://stackoverflow.com/questions/2044806

質問

WebKitのBox-Shadow CSSプロパティを少しドロップダウンしたいと思います。コードは次のようになります：

.drop_down{
  -webkit-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
}

ただし、この機能がないブラウザの場合、境界線を使用してこのドロップシャドウを近似したいと思います。

.drop_down{
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}

問題は、Box-Shadowをサポートするブラウザに境界ベースの影を表示したくないということです。すべてのケースをカバーするのが難しいと思うので、ブラウザのスニッフィングを避けたいと思います。これを行う最も簡単な方法は何ですか？私はJavaScriptのないソリューションを好みますが、簡単なJavaScriptベースのソリューションも検討します。

役に立ちましたか？

解決

Modernizr 特徴の検出を行います。コードは次のとおりです。

.drop_down{
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}
.boxshadow .drop_down{
  border: 0px none;
  -webkit-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
}

これが機能するには、Modernizr JavaScriptライブラリを含める必要があります。

他のヒント

これはカバーしません 全て シナリオ、そして私はそれがオペラで失敗すると思いますが、私はこれをします：

.drop_down{
  -webkit-box-shadow: 1px 1px 4px #888;
  -moz-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
  border: solid 1px #bbb;
  border: solid 0px rgba(0,0,0,0); /* Ignored by browsers that don't support it */
}

試験結果

どうやら rgba Firefox 3.0で導入されましたが -moz-box-shadow 3.5で導入されました。したがって、Firefox 3.0はテストに失敗します。これが私たちがこれまで立っているところです：

テストページ

  • Firefox 2.0-パス（灰色の1pxライン）
  • Firefox 3.0-失敗
  • Firefox 3.5-パス（影）
  • インターネットエクスプローラー6.0-パス（灰色の1pxライン）
  • インターネットエクスプローラー7.0-パス（灰色の1pxライン）
  • インターネットエクスプローラー8.0-パス（灰色の1pxライン）
  • サファリ3.0-パス（影）
  • サファリ4.0-パス（影）
  • Chrome3.0-パス（影）
  • オペラ10-失敗

Gabyが言ったことを構築して、それを達成する良い方法がないだけでなく、それは進歩的な強化の考えに反しています。

考慮すべきいくつかの理由があります いいえ あなたが提案していることをしている：

  1. これらの境界線は、適切なボックスモデルを備えたブラウザの要素に幅を追加します。これにより、追加の幅を計画していない場合、浮遊要素のような問題が新しいラインにぶつかります。
  2. 進歩的な強化とは、加算的な方法で構築することです。 「代替」条件付きスタイルを作成することは、メンテナンスのために頭痛を招くことです。
  3. 魅力的なボーダースタイルを選択した場合、彼らは実際に見えるかもしれません より良い 影になったとき。私はそれが多くのプロジェクトで真実であることを発見しました。影は本当に魅力的な方法で国境を際立たせます。

うまくいけばそれは助けになります。

ブラウザごとに特定のトリックを使用せずに簡単に行う方法はありません...

IE条件付きコメント（IEのみがボックスシャドウのバージョンをサポートしていないと思うからです。）またはCSSハッキング..

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top