Miglioramento progressiva con box-ombra

Question

Vorrei utilizzare la proprietà CSS box-shadow di WebKit per un po 'di discesa. Il codice sarà simile:

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

Tuttavia, per i browser che non hanno questa capacità, vorrei utilizzare i bordi per approssimare questo ombra, in questo modo:

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

Il problema è che io non voglio l'ombra confine a base di presentarsi per i browser che supportano box-shadow. Vorrei evitare di browser sniffing, perché presumo che è difficile coprire tutti i casi. Qual è il modo più semplice per fare questo? Io preferisco una soluzione javascript-di meno, ma mi prenderà in considerazione semplici quelli javascript-based troppo.

Answer 1

Modernizr fa funzione di rilevamento. Codice sarebbe:

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

È necessario includere il Modernizr libreria javascript per questo al lavoro.

Answer 2

Questa non coprirà tutti scenari, e penso che non riesce a Opera, ma vorrei fare questo:

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

Risultati dei test

A quanto pare rgba è stato introdotto in Firefox 3.0, ma -moz-box-shadow è stato introdotto in 3.5. Così, Firefox 3.0 non supera il test. Ecco a che punto siamo fino ad ora:

pagina di prova

• Firefox 2.0 - Pass (Gray Line 1px)
• Firefox 3.0 - Fail
• Firefox 3.5 - Pass (Shadow)
• Internet Explorer 6.0 - Pass (Gray Line 1px)
• Internet Explorer 7.0 - Pass (Gray Line 1px)
• Internet Explorer 8.0 - Pass (Gray Line 1px)
• Safari 3.0 - Pass (Shadow)
• Safari 4.0 - Pass (Shadow)
• Chrome 3.0 - Pass (Shadow)
• Opera 10 - Fail

Answer 3

Edificio fuori quello che ha detto Gaby, non è solo lì non è un buon modo per realizzare questo, ma è contro l'idea di progressivo miglioramento.

Ecco alcuni motivi per prendere in considerazione non fare quello che stai proponendo:

1. Quei confini aggiungerà larghezza vostro elemento in qualsiasi browser che ha un box model corretto. Questo potrebbe causare problemi come elementi mobili di essere urtato sulle nuove linee se non si prevede per la larghezza aggiunto.
2. progressive enhancement è di costruire in modo additivo. Creazione di stili condizionali "alternative" è invitante mal di testa per la manutenzione.
3. Se si sceglie di appello gli stili di confine, essi possono effettivamente guardare migliore quando in ombra. Ho trovato che per essere vero in un certo numero di progetti. L'ombra che rende il confine spiccano in modo accattivante.

Si spera che aiuta.

Answer 4

Non c'è modo semplice per farlo senza usare trucchi specifici per ogni browser ...

o IE commenti condizionali (perché penso solo i IE non supportano una qualche versione del box-shadow ora ..) o hack CSS ..