CSS :: 첫 문자 놓기 모자는 $ 기호를 무시합니다. Polyfill이 있습니까?

Question

$ 기호 앞에 가격에 맞춤 스타일을 추가하고 싶습니다. 쉬운 방법 :

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

쉬운 방법은 의미 론적이지 않고 접근하기 쉽지 않다는 점입니다. 대부분의 브라우저에서 잘 작동

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

하지만, 파이어 폭스는 "구두점"로 $ 기호를 해석하고 CSS 규칙을 무시 : 내가 따라하고 싶은 간단한 표준 기반의 접근 방식과 같이 ::first-letter {}을 사용하는 것입니다. 다른 최신 브라우저는이 문제를 잘 처리합니다.

jQuery/JavaScript polyfill 또는 CSS 해킹이 표준 기반 방식으로 수행 할 수 있으며 여전히 Firefox에서 작동합니까?

업데이트 : 트릭을 수행하는 것처럼 보이는 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"; 
}); 
}); 

Answer 1

가 모더 나이저이에 대한 테스트가 아니다 사용할 수 있지만 당신이 정말로 그것을 사용하는 데 필요한 경우, 당신은을 만들 것 요소를 선택하고 원하는 특성을 확인하십시오. 알려진 값이면 작동하지만 알 수 없거나 원치 않는 값이면 지원되지 않습니다. 예를 들어

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); 

모더 나이저가 당신을 위해이 대부분을 처리하는 testStyle 방법을 가지고 다음과 같은 자바 스크립트,하지만 위의 논리와 같은 뭔가

#test_element { 
    font-size: 0 
} 
#test_element::first-letter { 
    font-size: 10px 
} 

는 사용하는 개념은

(요소의 실제 계산 된 스타일을 테스트하려면 실제 몸체에 추가해야하고 이후에 레모 그것).

@ Oriol의 방법은이 방법을 사용하는 것이 좋습니다.

Answer 2

해결 방법으로, 당신은

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

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