VFH
I was doing some CSS work yesterday. I ended up stumbling onto a hack that I was a little unsure of what it meant. This morning I decided to figure it out.
some#id {
color: blue;
voice-family: "\"}\"";
voice-family: inherit;
color: yellow;
}
To be honest I hadn’t run into the ‘voice-family’ attribute before so I was curious, I was also curious why someone used the value ‘}’. After a few minutes of research it was very evident was what happening. Older browsers will read that effectively as :
some#id {
color: blue;
}
While newer browsers will actually get to the bottom color of yellow. Basically the CSS author is short circuiting the parsing engine of the older browser. The voice-family attribute is similar to the font-family attribute, but it’s for text to speech browsers. How does this help you? It doesn’t really, though it’s something to keep in mind if you have to support older browsers and you want to override some portion of your CSS that ganks in an older browser.