How to use a different font CSS color for all Internet Explorer browser versions? -



How to use a different font CSS color for all Internet Explorer browser versions? -

i have wordpress theme uses html5 bolierplate. well, utilize "edit css" module of jetpack plugin create modifications , additions theme's css.

through "edit css" module of jetpack, have defined 3 dimensional css text shadows various wordpress widget headings.

.example-widget h3{ color: #fff; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }

the problem, on net explorer, 3d text shadow not supported (at to the lowest degree ie9. have not tested on ie10) , white font not work lite colored background. on ie, need color of #444 replace 3d text effect.

the bolierplate defines next in <head>, can't seem figure out how define font color versions of ie:

<!--[if lt ie 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if ie 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if ie 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt ie 8]><!--> <html class="no-js"> <!--<![endif]-->

to out of way now, i'm sure asked justify why set question here, rather on wordpress answers - reason, tell me not wordpress specific question, although wonder if jetpack "edit css" module may come play, css in module loaded after style sheets defined in theme.

two quick ways of doing this.

feature detection - see modernizr. <-- preferred option

this won't check browser version, whether or not browser supports text-shadow. phone call in modernizr script @ top of page. create class like:

.example-widget { color: blue; } .no-text-shadow .example-widget { color: red; }

conditional comments

my favourite way of doing this, because lets maintain css in 1 file.

<!--[if lt ie 7]> <html class="no-js ie lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if ie 7]> <html class="no-js ie lt-ie9 lt-ie8"> <![endif]--> <!--[if ie 8]> <html class="no-js ie lt-ie9"> <![endif]--> <!--[if ie 9]> <html class="no-js ie ie9"> <![endif]--> <!--[if gt ie 9|!ie]><!--> <html class="no-js"> <!--<![endif]-->

then use:

.example-widget { color: blue; } .ie .example-widget { color: red; }

css internet-explorer css3

Comments

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -