Progressive Verbesserung mit Box-Shadow

Question

Ich möchte die Box-Shadow-CSS-Eigenschaft von Webkit für ein wenig Dropdown verwenden. Der Code würde aussehen wie:

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

Für Browser, die diese Fähigkeit nicht haben, möchte ich jedoch Grenzen verwenden, um diesen Tropfenschatten zu approximieren, wie SO:

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

Das Problem ist, dass ich nicht möchte, dass der borgendorientierte Schatten für die Browser auftaucht, die Box-Shadow machen. Ich möchte das Schnüffeln von Browser vermeiden, weil ich annehme, dass es schwierig ist, alle Fälle abzudecken. Was ist der einfachste Weg, dies zu tun? Ich bevorzuge eine JavaScript-Lösung, werde aber auch einfache JavaScript-basierte in Betracht ziehen.

Answer 1

Modernizr Funktioniert Erkennung. Code wäre:

.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;
}

Sie müssen die Modernizr JavaScript -Bibliothek einbeziehen, damit dies funktioniert.

Answer 2

Dies wird nicht abdecken alle Szenarien, und ich denke, es scheitert in der Oper, aber ich würde Folgendes tun:

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

Testergebnisse

Offenbar rgba wurde in Firefox 3.0 eingeführt, aber aber -moz-box-shadow wurde in 3,5 eingeführt. Firefox 3.0 versagt also den Test. Hier stehen wir bisher:

Testseite

• Firefox 2.0 - Pass (graue 1px -Linie)
• Firefox 3.0 - scheitern
• Firefox 3.5 - Pass (Schatten)
• Internet Explorer 6.0 - Pass (graue 1px -Linie)
• Internet Explorer 7.0 - Pass (graue 1px -Linie)
• Internet Explorer 8.0 - Pass (graue 1px -Linie)
• Safari 3.0 - Pass (Schatten)
• Safari 4.0 - Pass (Schatten)
• Chrom 3.0 - Pass (Schatten)
• Opera 10 - FAILEN

Answer 3

Aufbauend dessen, was Gaby gesagt hat, gibt es nicht nur einen guten Weg, um dies zu erreichen, sondern auch gegen die Idee der fortschreitenden Verbesserung.

Hier sind einige Gründe zu berücksichtigen nicht Tun, was Sie vorschlagen:

1. Diese Grenzen verleihen Ihrem Element in jedem Browser, das über ein richtiges Box -Modell verfügt. Dies kann zu Problemen führen, wie mit schwebenden Elementen auf neue Linien gestoßen wird, wenn Sie nicht die zusätzliche Breite planen.
2. Bei der progressiven Verbesserung geht es darum, additiv aufzubauen. Das Erstellen von "alternativen" bedingten Stilen lädt Kopfschmerzen zur Wartung ein.
3. Wenn Sie sich ansprechende Grenzstile entscheiden, können sie tatsächlich aussehen besser wenn beschattet. Ich habe festgestellt, dass dies in einer Reihe von Projekten wahr ist. Der Schatten lässt die Grenze wirklich ansprechend hervorheben.

Hoffentlich hilft das.

Answer 4

Keine einfache Möglichkeit, es zu tun, ohne spezifische Tricks für jeden Browser zu verwenden ...

Entweder dh bedingte Kommentare (weil ich denke, dass nur die IES jetzt keine Version des Box-Shadow unterstützen ..) oder CSS-Hacks.