Mejora progresiva con Shadow de caja

Question

Me gustaría usar la propiedad de WebKit's Box-Shadow CSS para un pequeño desplegable. El código se vería como:

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

Sin embargo, para los navegadores que no tienen esta capacidad, me gustaría usar bordes para aproximar esta sombra de caída, así:

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

El problema es que no quiero que la sombra basada en el borde se presente a los navegadores que admiten la sombra de caja. Me gustaría evitar el olfateo del navegador porque supongo que es difícil cubrir todos los casos. ¿Cuál es la forma más sencilla de hacer esto? Prefiero una solución sin JavaScript, pero también consideraré las simples basadas en JavaScript.

Answer 1

Modernizr Detección de funciones. El código sería:

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

Debe incluir la Biblioteca Modernizr JavaScript para que esto funcione.

Answer 2

Esto no cubrirá todos escenarios, y creo que falla en la ópera, pero lo haría:

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

Resultados de la prueba

Aparentemente rgba fue introducido en Firefox 3.0, pero -moz-box-shadow fue introducido en 3.5. Entonces, Firefox 3.0 falla la prueba. Aquí están donde estamos hasta ahora:

Página de prueba

• Firefox 2.0 - pase (línea gris 1px)
• Firefox 3.0 - Fail
• Firefox 3.5 - Pase (sombra)
• Internet Explorer 6.0 - Pase (línea gris 1px)
• Internet Explorer 7.0 - Pase (línea gris 1px)
• Internet Explorer 8.0 - Pase (línea gris 1px)
• Safari 3.0 - Pase (sombra)
• Safari 4.0 - Pase (sombra)
• Chrome 3.0 - Pase (sombra)
• Opera 10 - Fail

Answer 3

Aumentando lo que dijo Gaby, no solo no hay una buena manera de lograr eso, sino que está en contra de la idea de una mejora progresiva.

Aquí hay algunas razones para considerar no haciendo lo que estás proponiendo:

1. Esos bordes agregarán ancho a su elemento en cualquier navegador que tenga un modelo de caja adecuado. Eso podría causar problemas como elementos flotantes que se topan en nuevas líneas si no planea el ancho adicional.
2. La mejora progresiva se trata de construir de manera aditiva. Crear estilos condicionales "alternativos" es invitar a dolores de cabeza para el mantenimiento.
3. Si elige estilos fronterizos atractivos, en realidad pueden mirar mejor cuando se sombrea. He descubierto que eso es cierto en varios proyectos. La sombra realmente hace que el borde se destaque de una manera atractiva.

Ojalá eso ayude.

Answer 4

No hay una manera fácil de hacerlo sin usar trucos específicos para cada navegador ...

o es decir, comentarios condicionales (porque creo que solo los IE no admiten alguna versión de la sombra de caja ahora ...) o hacks CSS ..