Home/ Questions/Q 9238133
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T07:41:19+00:00

I have a WordPress theme that uses the HTML5 Bolierplate . As well, I

  • 0

I have a WordPress theme that uses the HTML5 Bolierplate. As well, I use the “Edit CSS” module of the Jetpack plugin to make modifications and additions to the theme’s CSS.

Through the “Edit CSS” module of Jetpack, I have defined some 3 dimensional CSS text shadows for 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 Internet Explorer, the 3D text shadow is not supported (At least up to IE9. I have not tested on IE10) and the white font does not work with the very light colored background. On IE, I need a color of #444 to replace the 3D text effect.

The Bolierplate defines the following in the <head>, but I can’t seem to figure out how to define a font color for all 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 get it out of the way now, I’m sure I will be asked to justify why I put this question here, rather than on WordPress Answers – The reason, they would tell me this is not a WordPress specific question, although I wonder if the Jetpack “Edit CSS” module may come into play, as the CSS in the module is loaded after ALL style sheets are defined in the theme.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Two quick ways of doing this.

    Feature Detection – See Modernizr. <– preferred option

    This won’t check the browser version, just whether or not the browser supports text-shadow. You call in the Modernizr script at the top of the page. Then you create a class like:

    .example-widget {
    color: blue;
}

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

    Conditional Comments

    My favourite way of doing this, because it lets you keep all your CSS in one 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 you use:

    .example-widget {
   color: blue;
}

.ie .example-widget {
   color: red;
}
    • 0