CODEWITHSUNDEEP
htmlcssmobilemedia-queries
Eduardo Ponce de Leon
Eduardo Ponce de Leon

Reputation: 9706

Is it possible to create a media query for each browser?

I am creating a mobile site and I am creating different stylesheets for each device size, but I would also like to create a stylesheet for each browser as some of the styles are not compatible everywhere. Is there a way to create a media query to specify a browser and hopefully even the version?

Silly example:

<link rel="stylesheet" media="screen and (browser:chrome)" href="example.css" />

Thanks

Upvotes: 0

Views: 81

Answers (1)

David Storey
David Storey

Reputation: 30434

No there is not. This is generally something browser vendors don’t want to happen (I used to work for one), so even if there were, I suspect they’d be very hesitant to implement it. See for instance how they keep changing user agent strings due to developers browser sniffing and giving broken code, or not giving some code that is needed.

Technically, if a browser supports a media-query at-rule with a vendor prefix, then you can target that browser, but:

  1. It would target all versions of that browser that implements that query, including future versions that may not have the bug you are working around
  2. It will also target other browsers that use the same prefix if they also support that query
  3. That query will need to apply for it to work, so your can't guarantee it will work
  4. That media-query could be dropped at any time, even if the browser still has the same bug you were working around
  5. media-queries that have prefixes are usually non-standard (as standard ones have all been implemented without prefix, so you'd be using invalid code)

For IE, you can target individual versions using Conditional Comments. However, conditional comments are not valid per HTML5 parsing rules. As such, when IE moved to a HTML5 parser in IE10, they dropped support for them to be HTML5 compliant. So you can only target IE versions less than 10 with Conditional Comments.

Upvotes: 1

Related Questions