تعزيز تدريجي مع مربع الظل

Question

أرغب في استخدام خاصية WebKit Box-Shadow CSS للحصول على القليل من الدخول. سيبدو الرمز:

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

ومع ذلك، بالنسبة للمتصفحات التي لا تملك هذه القدرة، أود استخدام الحدود لتقريب هذا الظل الإسقاط، مثل ذلك:

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

المشكلة هي أنه لا أريد الظل القائم على الحدود لإظهار المتصفحات التي تقوم بدعم مربع الظل. أرغب في تجنب استيعاب المتصفح لأنني أفترض أنه من الصعب تغطية جميع الحالات. ما هي اسهل طريقة للقيام بذلك؟ انا افضل حلا أقل جافا سكريبت، لكنني سأفكر في جافا سكريبت بسيطة أيضا.

Answer 1

modernizr. هل الكشف عن ميزة. الرمز سيكون:

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

تحتاج إلى تضمين مكتبة JavaScript modernizr لهذا العمل.

Answer 2

هذا لن يغطي الكل السيناريوهات، وأعتقد أنه فشل في الأوبرا، لكنني سأفعل هذا:

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

نتائج الإختبار

فيما يبدو rgba تم تقديمه في فايرفوكس 3.0، ولكن -moz-box-shadow تم تقديمه في 3.5. لذلك، فشل Firefox 3.0 الاختبار. هنا حيث نقف حتى الآن:

اختبار الصفحة

• Firefox 2.0 - Pass (خط رمادي 1PX)
• فايرفوكس 3.0 - فشل
• فايرفوكس 3.5 - تمرير (الظل)
• Internet Explorer 6.0 - Pass (خط 1PX الرمادي)
• Internet Explorer 7.0 - Pass (خط رمادي 1PX)
• Internet Explorer 8.0 - Pass (خط رمادي 1PX)
• Safari 3.0 - Pass (Shadow)
• Safari 4.0 - Pass (Shadow)
• كروم 3.0 - تمرير (الظل)
• الأوبرا 10 - فشل

Answer 3

بناء ما قاله غابي، ليس فقط هناك طريقة جيدة لإنجاز ذلك، لكنها ضد فكرة تعزيز تدريجي.

إليك بعض الأسباب التي يجب مراعاتها ليس القيام بما تقترحه:

1. ستضيف هذه الحدود عرض إلى عنصرك في أي متصفح يحتوي على نموذج مربع مناسب. يمكن أن يسبب ذلك مشاكل مثل العناصر العائمة التي يتم صدمها على خطوط جديدة إذا كنت لا تخطط للعرض الإضافي.
2. التعزيز التدريجي يدور حول بناء بطريقة مضافة. إنشاء أنماط مشروطة "البديلة" تدعو الصداع للصيانة.
3. إذا اخترت أنماط الحدود جذابة، فقد تبدو في الواقع أفضل عند الظل. لقد وجدت أنه صحيح في عدد من المشاريع. الظل حقا يجعل الحدود تبرز بطريقة جذابة.

نأمل أن يساعد.

Answer 4

لا طريقة سهلة للقيام بذلك دون استخدام حيل محددة لكل متصفح ...

إما أي تعليقات مشروطة (لأنني أعتقد أن المنشأ فقط لا تدعم بعض الإصدار من ظلال المربع الآن ..) أو CSS Hacks ..