Search code examples
validationwebkitwidthmedia-queriesw3c-validation

Valid use of -webkit-min-device-width - CSS media query

I am getting a W3 validation error when linking to a stylesheet using a media query to target retina displays. Here is the code:

<link rel='stylesheet' type='text/css' href='/css/styles-retina.css' media='only screen and (-webkit-min-device-pixel-ratio: 2)'/>

The W3C error reports:

"Bad value only screen and (-webkit-min-device-pixel-ratio: 2) for attribute media on element link: Expected a letter at start of a media feature part but saw - instead."

I've searched for this and am starting to think that there isn't a "valid" solution to this, either to ignore the validation error or remove this query altogether. I understand validating the code isn't always useful, but is there a way in this situation?

Solution

  • The -webkit filter is not valid for W3C. Also the value for media='' is no W3C standard. You can see all allowed media types here: http://www.w3schools.com/CSS/css_mediatypes.asp

    There is no real solution validating your code but you could do a workaround, but this doesn't really validate your code:

    PHP Workaround:

    function w3c(){
if((stristr($_SERVER["HTTP_USER_AGENT"],'w3c') === FALSE))
return true;
}

    Use the PHP workaround like this for every content that shouldn't be visible for the W3C validator:

    <?php if(w3c()){ ?>
    <link rel='stylesheet' type='text/css' href='/css/styles-retina.css' media='only screen and (-webkit-min-device-pixel-ratio: 2)'/>
<?php } ?>

    Javascript Workaround:

    Javascript is also not visible to the W3C validator so you could also use this workaround (just keep in mind that javascript can be disabled):

    <script type="text/javascript"><!--
document.write('<link rel='stylesheet' type='text/css' href='/css/styles-retina.css' media='only screen and (-webkit-min-device-pixel-ratio: 2)'/>');
//--></script>