A way to specify CSS rule for browsers that do not support a specific CSS property

Question

I am having problem defining CSS rules for browsers that do not support font-stretch property (webkit, etc)...

THE PROBLEM: I am using Helvetica Neue font (CSS setup from Twitter Bootstrap) and I use font-stretch:condensed; property on some of my CSS rules. Unfortunately I have soon figured out that this property is not supported in Webkit and some other browser, and I began searching for a fallback rule.

One solution found here for webkit browser is to use post script font name font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;. But it is really only Mac solution. Windows browsers will not have this font and will fallback to non stretched font.

So the only real solution for using condensed font is to import a font from a site like myfonts.com, google webfonts etc... Since I am looking for a FREE solution I found some FREE fonts that come close to Helvetica Neue Bold Condensed. I am now wondering is there a way to specify a CSS rule only target the browsers that do not support font-stretch property?

Well, you could check it with javascript and load the extra style if the property is not supported, but I guess that's not an answer you'd prefer? — primavera133
– primavera133, Commented May 29, 2012 at 9:31

Luca · Accepted Answer · 2012-05-29 09:40:58Z

1

The only way I can think of, is javascript feature detection:

if (document.createElement("detect").style.fontStretch === "") {  
    document.getElementsByTagName("html")[0].className += " fontstretch";  
}

add this in your <head> tag.

this will add a fontstretch class to your html tag so you could:

set the @font-face rule as a standard - it will be the fallback for browsers that do not support font-stretch
use .fontstretch as a css hook to set the font-family back to Helvetica Neue and apply font-stretch as well.

edited May 29, 2012 at 9:40

answered May 29, 2012 at 9:32

Luca

9,8155 gold badges48 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Primoz Rome Over a year ago

Yeah but don't want to go this way... UPDATE: well on the second thought this is not exactly such a bad solution.

Luca Over a year ago

it is probably the only feasible one, but I agree it's not perfect as it does not work with JS off.

Skindeep2366 · Accepted Answer · 2013-09-14 20:38:29Z

0

I came accross a meaningful solution when I was searching for something else that allows you to specify the browser specific css using .ie9 .yourclass .chrome .yourclass etc in your css file. It uses a small javascript file that can be loaded in the _layout file or masterpage file..

That link is Here

answered Sep 14, 2013 at 20:38

Skindeep2366

1,6193 gold badges44 silver badges69 bronze badges

Collectives™ on Stack Overflow

A way to specify CSS rule for browsers that do not support a specific CSS property

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related