2

ちょっとしたドロップダウンに 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 ベースのソリューションも検討します。

4

4 に答える 4

4

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 ライブラリを含める必要があります。

于 2010-03-11T05:48:38.953 に答える
3

ギャビーが言ったことを基に、それを達成するための良い方法がないだけでなく、プログレッシブエンハンスメントの考えに反しています。

提案していることを行わないことを検討するいくつかの理由は次のとおりです。

  1. これらの境界線は、適切なボックスモデルを備えたブラウザの要素に幅を追加します。追加された幅を計画していない場合、フロートされた要素が新しい線にぶつかるなどの問題が発生する可能性があります。
  2. プログレッシブエンハンスメントとは、付加的な方法で構築することです。「代替」条件付きスタイルを作成することは、メンテナンスの頭痛の種になります。
  3. 魅力的なボーダースタイルを選択した場合、シャドウを付けると実際に見栄えが良くなる可能性があります。私はそれが多くのプロジェクトで真実であることを発見しました。影は本当に魅力的な方法で境界線を際立たせます。

うまくいけば、それがお役に立てば幸いです。

于 2010-01-11T21:34:00.563 に答える
3

これはすべてのシナリオをカバーするわけではなく、Opera では失敗すると思いますが、次のようにします。

.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 */
}

試験結果

どうやらrgbaFirefox 3.0 で導入されたよう-moz-box-shadowですが、3.5 で導入されました。したがって、Firefox 3.0 はテストに失敗します。これまでの私たちの立場は次のとおりです。

テストページ

  • Firefox 2.0 -- 合格 (灰色の 1px ライン)
  • Firefox 3.0 -- 失敗
  • Firefox 3.5 -- パス (シャドウ)
  • Internet Explorer 6.0 -- 合格 (グレーの 1px ライン)
  • Internet Explorer 7.0 -- 合格 (グレーの 1px ライン)
  • Internet Explorer 8.0 -- 合格 (グレーの 1px ライン)
  • Safari 3.0 -- パス (シャドウ)
  • Safari 4.0 -- パス (シャドウ)
  • Chrome 3.0 -- パス (シャドウ)
  • Opera 10 -- 失敗
于 2010-01-11T20:57:12.803 に答える
1

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

IE の条件付きコメント (現在、IE だけが box-shadow の一部のバージョンをサポートしていないと思うため..) または css ハック..

于 2010-01-11T20:57:51.650 に答える