Search code examples
firefoxcssoperamedia-queries

CSS Media Queries, Opera and Firefox trouble

I'm using the Ubuntu font for my website and Opera doesn't render the page when I do:

html {
  font-family: 'Ubuntu', sans-serif;
}

So I have to do css media queries:

/*Chrome*/
@media not all and (-webkit-min-device-pixel-ratio:0) {  
  html,
  button,
  input,
  select,
  textarea {
    font-family: 'Ubuntu',sans-serif;
  } 
}

/*Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  html,
  button,
  input,
  select,
  textarea {
    font-family: 'Ubuntu',sans-serif;
  } 
}

/*Opera*/
@media not screen and (1) {
  html,
  button,
  input,
  select,
  textarea {
    font-family: sans-serif;
  } 
}

The problem is that now I don't know how to implement this for Firefox. And searching the internet hasn't given me an answer.

Any ideas?

Kind regards.

Solution

  • In this way:

    @media not all and (-moz-windows-compositor) { ... }

    Take a look here for more information: https://developer.mozilla.org/en-US/docs/CSS/Media_queries