Amélioration progressive avec box-shadow

Question

Je voudrais utiliser box-shadow la propriété css WebKit pour une petite goutte vers le bas. Le code ressemblerait à ceci:

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

Cependant, pour les navigateurs qui n'ont pas cette capacité, je voudrais utiliser les frontières pour se rapprocher de cette ombre portée, comme suit:

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

Le problème est, je ne veux pas l'ombre à base de frontière à afficher pour les navigateurs qui ne supportent box-shadow. Je voudrais éviter navigateur renifler parce que je suppose qu'il est difficile de couvrir tous les cas. Quelle est la façon la plus simple de le faire? Je préfère une solution moins javascript, mais je considérerai simples ceux à base de javascript aussi.

Answer 1

Modernizr fait la détection de caractéristiques. Code serait:

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

Vous devez inclure la bibliothèque javascript Modernizr pour que cela fonctionne.

Answer 2

Cela ne couvre pas tous scénarios, et je pense qu'il échoue dans Opera, mais je ferais ceci:

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

Résultats des tests

Apparemment rgba a été introduit dans Firefox 3.0, mais -moz-box-shadow a été introduit en 3.5. Ainsi, Firefox 3.0 échoue le test. Voici où nous en sommes à ce jour:

test

• Firefox 2.0 - Pass (gris ligne 1px)
• Firefox 3.0 - Fail
• Firefox 3.5 - Pass (Shadow)
• Internet Explorer 6.0 - Pass (ligne grise 1px)
• Internet Explorer 7.0 - Pass (gris ligne 1px)
• Internet Explorer 8.0 - Pass (Gris ligne 1px)
• Safari 3.0 - Pass (Shadow)
• Safari 4.0 - Pass (Shadow)
• Chrome 3.0 - Pass (Shadow)
• Opera 10 - Fail

Answer 3

Se appuyant sur ce que Gaby a dit, non seulement est-il pas une bonne façon d'y parvenir, mais il est contre l'idée de Progressive Enhancement.

Voici quelques raisons de considérer pas à faire ce que vous proposez:

1. Ces frontières ajouteront largeur à votre élément dans tout navigateur qui a un modèle de boîte appropriée. Cela pourrait causer des problèmes tels que les éléments flottants étant cogné sur de nouvelles lignes si vous ne prévoyez pas de la largeur ajoutée.
2. amélioration progressive est d'environ la constitution d'une manière additive. Création « alternatives » styles conditionnels invite les maux de tête pour l'entretien.
3. Si vous choisissez attrayant styles de bordure, ils peuvent effectivement regarder mieux quand ombré. J'ai trouvé que pour être vrai dans un certain nombre de projets. L'ombre fait vraiment la frontière se démarquer d'une manière attrayante.

Il faut espérer que cela aide.

Answer 4

pas facile de le faire sans utiliser des astuces spécifiques pour chaque navigateur ...

soit IE commentaires conditionnels (parce que je pense que les études ne prennent pas en charge une version du box-shadow maintenant ..) ou hacks css ..