Aprimoramento progressivo com sombra de caixa

Question

Eu gostaria de usar a propriedade CSS da WebKit-Shadow para um pouco de suspensão. O código seria:

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

No entanto, para os navegadores que não têm essa capacidade, gostaria de usar fronteiras para aproximar essa sombra, assim:

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

O problema é que não quero que a sombra baseada na fronteira apareça para os navegadores que suportam a Shadow Box. Gostaria de evitar farejadores do navegador, porque presumo que seja difícil cobrir todos os casos. Qual é a maneira mais simples de fazer isso? Prefiro uma solução sem JavaScript, mas também considerarei as simples baseadas em JavaScript.

Answer 1

Modernizr apresenta detecção. O código seria:

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

Você precisa incluir a biblioteca JavaScript Modernizr para que isso funcione.

Answer 2

Isso não vai cobrir tudo cenários, e acho que falha na ópera, mas eu faria isso:

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

Resultado dos testes

Aparentemente rgba foi introduzido no Firefox 3.0, mas -moz-box-shadow foi introduzido em 3.5. Portanto, o Firefox 3.0 falha no teste. Aqui está onde estamos até agora:

Página de teste

• Firefox 2.0 - Pass (linha cinza 1px)
• Firefox 3.0 - Falha
• Firefox 3.5 - Pass (sombra)
• Internet Explorer 6.0 - Pass (linha cinza 1px)
• Internet Explorer 7.0 - Pass (linha cinza 1px)
• Internet Explorer 8.0 - Pass (linha cinza 1px)
• Safari 3.0 - Pass (sombra)
• Safari 4.0 - Pass (sombra)
• Chrome 3.0 - Pass (Shadow)
• Opera 10 - Falha

Answer 3

Construindo o que Gaby disse, não apenas não há uma boa maneira de conseguir isso, mas é contra a idéia de aprimoramento progressivo.

Aqui estão alguns motivos para considerar não Fazendo o que você está propondo:

1. Essas fronteiras adicionarão largura ao seu elemento em qualquer navegador que tenha um modelo de caixa adequado. Isso pode causar problemas como elementos flutuados sendo esbarrados em novas linhas se você não planeja a largura adicional.
2. O aprimoramento progressivo é sobre a construção de uma maneira aditiva. Criar estilos condicionais "alternativos" está convidando dores de cabeça para manutenção.
3. Se você escolher estilos de fronteira atraentes, eles podem realmente olhar Melhor Quando sombreado. Eu descobri que isso é verdade em vários projetos. A sombra realmente faz a borda se destacar de uma maneira atraente.

Espero que isso ajude.

Answer 4

Não há maneira fácil de fazer isso sem usar truques específicos para cada navegador ...

Ou comentários condicionais do IE (porque acho que apenas os IEs não suportam alguma versão da box-shadow agora ..) ou hacks CSS ..