css - Progressive Enhancement with box-shadow -


i use webkit's box-shadow css property little drop-down. code like:

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

however, browsers not have capability, use borders approximate drop shadow, so:

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

the problem is, don't want border-based shadow show browsers support box-shadow. avoid browser sniffing because assume it's hard cover cases. simplest way this? prefer javascript-less solution, consider simple javascript-based ones too.

modernizr feature detection. code be:

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

you need include modernizr javascript library work.


Comments

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -