首字母大写忽略$符号.有Polyfill吗?

CSS ::first-letter drop cap ignores $ symbol. Is there a Polyfill?

本文关键字：符号 Polyfill      更新时间：2023-09-26

我想在价格前的$符号上添加一个自定义样式。最简单的方法:

<style>.dropcap { doStuff; }</style>
<p><span class="dropcap">$</span>19.95</p>

问题是简单的方法不具有语义性或可访问性。我想遵循的简单的、基于标准的方法是像这样使用::first-letter {}:

<style>p::first-letter { doStuff; }</style>
<p>$19.95</p>

这在大多数浏览器中工作得很好，但是Firefox将$符号解释为"标点符号"并忽略CSS规则。其他现代浏览器似乎可以很好地处理这个问题。

是否有一个jQuery/JavaScript填充或CSS hack，让我做这个基于标准的方式，并有它仍然在Firefox中工作?

UPDATE:我发现了一个似乎可以做到的polyfill: jquery-fancyletter。我希望也能找到一个Modernizr功能检测，但找不到。试着写我自己和该死的东西总是返回false(即使在Chrome中支持该功能)。有谁能告诉我我的特征检测出了什么问题吗?

Modernizr.addTest('dollarFirstLetter', function() {
return Modernizr.testStyles('#modernizr p:first-letter {margin-right:20px;display:block}', function(elem) {
    window.ptag = document.createElement("p");
    ptag.innerHTML = "$39.95";
    elem.appendChild(ptag);
    return window.getComputedStyle(ptag, ":first-letter").marginRight === "20px";
});
});

作为一种变通方法，您可以使用

<p data-currency="$">19.95</p>

p::before {
    content: attr(data-currency);
    doStuff;
}

在Modernizr中没有这样的测试，但是如果您真的需要使用它，您会想要创建一个与您想要的选择器匹配的元素，然后检查属性。如果它是已知的值，那么它工作，如果它是一个未知的/不需要的值，那么它是不支持的。

例如

#test_element {
  font-size: 0
}
#test_element::first-letter {
  font-size: 10px
}
用javascript 
var el = document.createElement('div');
el.id = 'test_element'
el.innerHTML = '$';
document.body.appendChild(el);
Modernizr.addTest('fullFirstCharacter', el.clientHeight > 0);
document.body.removeChild(el);

Modernizr有一个testStyle方法可以为你处理大部分的问题，但是上面的逻辑是它使用的概念

(注意，为了测试元素的实际计算样式，您需要实际将其附加到body，然后再将其删除)。

但是，我强烈建议使用@Oriol的方法。
相关文章：