Question

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?

Answer 1

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>