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

ruby - When to use an ORM (Sequel, Datamapper, AR, etc.) vs. pure SQL for querying -

php - PHPDoc: @return void necessary? -

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