CODEWITHSUNDEEP
css
NeuronQ
NeuronQ

Reputation: 8195

CSS - target non text-shadow supporting browsers

Is there any CSS hack to target just browsers that do not support the text-shadow CSS property?

It is a very important visibility/readability/accessibility problem, since something like having light gray text with a dark shadow on a white bg may become unreadable if the dark text shadow is not visible. And the designer insists on using this, and not using text image replacements. (I could try and target recent browsers, but I had the surprise of even IE9 not understanding text-shadow, and god only knows what the support for this is on all the mobile devices out there...)

Upvotes: 0

Views: 317

Answers (2)

whiskeySteve
whiskeySteve

Reputation: 37

Not without JS, but there is a viable CSS-only substitute that I believe works for IE 6-9 and is valid. Heard of DXImage Transform?

Similar question + syntax example: Is filter: progid:DXImageTransform.Microsoft.DropShadow(OffX="x", OffY="y", Color="color") a viable replacement for text-shadow: in IE?

Upvotes: 1

jasssonpet
jasssonpet

Reputation: 2119

You have to use this script:

if (document.createElement('div').style.textShadow !== '') {
    document.documentElement.className += ' no-textshadow';
}

Then you can do:

.no-textshadow h1 {
    background: #fff;
    color: #000;
}

Upvotes: 2

Related Questions