CODEWITHSUNDEEP
csscss-selectors
Primoz Rome
Primoz Rome

Reputation: 11061

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

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?

Upvotes: 1

Views: 524

Answers (2)

Skindeep2366
Skindeep2366

Reputation: 1559

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

Upvotes: 0

Luca
Luca

Reputation: 9745

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:

  1. set the @font-face rule as a standard - it will be the fallback for browsers that do not support font-stretch

  2. use .fontstretch as a css hook to set the font-family back to Helvetica Neue and apply font-stretch as well.

Upvotes: 1

Related Questions