CSS - 目标非文本阴影支持浏览器

Question

是否有针对不支持 text-shadow CSS 属性的浏览器的 CSS hack？

这是一个非常重要的可见性/可读性/可访问性问题，因为如果深色文本阴影不可见，例如在白色背景上带有深色阴影的浅灰色文本可能会变得不可读。并且设计师坚持使用这个，而不是使用文本图像替换。 (我可以尝试以最新的浏览器为目标，但令我惊讶的是，即使 IE9 也不理解 text-shadow，天知道所有移动设备对此的支持是什么...... )

Answer 1

你必须使用这个脚本:

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

然后你可以这样做:

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