targeting a specific browser with css

Question

i guess that firefox is the only browser that doesn't support the font "Arial Narrow". And the other browsers don't support the "font-stretch" property. How can I target a specific browser with CSS? I have done this:

@-moz-document url-prefix() {
    h2 {
  font-family:"Arial";
  font-stretch: condensed;
    }
    .header_p {
  font-family: "Arial";
  font-stretch: condensed;
}

}
h2{
 font-family:"Arial Narrow";
 font-size: 22px;
 letter-spacing: 0px;
}

.header_p {
 font-family: "Arial Narrow";
}

It isn't working and I don't know why..

If I swap the order so that the @-moz part is second, then chrome stops working. I guess it's trying to apply the @-moz rule

And IE doesn't read the CSS at all

Works just fine in my Chrome 34, IE 11 and FF 29: http://jsfiddle.net/abhitalks/eRquy/ — Abhitalks, May 27 '14 at 10:01
thanks. i actually left out a curly bracket, which i see someone edited. and now it does work — Zach Smith, May 27 '14 at 10:06

score 1 · Answer 1 · edited May 23 '17 at 12:22

From the much missed H Open Magazine:

CSS3 includes a font module which offers an @font-face declaration, allowing web developers to load fonts to ensure that their website displays with the right font. WOFF is the data format for these fonts.

A file format specifically designed for the web, it is a container which, as well as the (optionally compressed) font tables in sfnt format, can also contain metadata, such as licensing or other information.

Browser support is near universal.

Here's an example of how to use them.

Does that help?

Animesh · Accepted Answer · 2014-05-27T10:53:42.747

I am not sure whether that font family is supported by firefox or not but you can Target only firefox using

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

See complete documentation here

You can target IE as

<!--[if IE]>
  // Your css for IE or   
  // Perhaps importing a specific style sheet as
  <link rel="stylesheet" type="text/css" href="ie9_and_below.css" />
<![endif]-->

target chrome only

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 div{
      color: red;
    } 
}

abdulbasit · Answer 3 · 2014-05-27T10:21:48.430

0

You can try the below snippet.

  h2 {
        font-family: "Arial Narrow";
        font-size: 22px;
        letter-spacing: 0px;
    }

    .header_p {
        font-family: "Arial Narrow";
    }

    h2, x:-moz-any-link {
        font-family: "Arial";
        font-stretch: condensed;
    }

    .header_p, x:-moz-any-link {
        font-family: "Arial";
        font-stretch: condensed;
    }

edited May 27 '14 at 10:21

answered May 27 '14 at 09:59

abdulbasit

1,856
15
17

targeting a specific browser with css

3 Answers3