Media query instead of media type in link tag

[szepeviktor]

Although it is valid HTML WordPress expects media type in wp_enqueue_style/wp_register_style.

<link rel='stylesheet' id='woocommerce-smallscreen-css'  
href='//subtwo.wp/static/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=2.4.7' 
type='text/css' media='only screen and (max-width: 768px)' />

Please consider using only media type.

Use case: W3 Total Cache merges small screen and desktop CSS files.

I know it is a caching consideration to use media query here.

[jameskoster]

Not really sure what you're asking us to do here?

[szepeviktor]

Could you go media="screen" ?

https://codex.wordpress.org/Function_Reference/wp_enqueue_style

$media
(string|boolean) (optional) String specifying the media for which this stylesheet has been defined. Examples: 'all', 'screen', 'handheld', 'print'. See this list for the full range of valid CSS-media-types.

And handle small screen stylesheet a different way.

[claudiosanches]

Feel free to use our woocommerce_enqueue_styles filter.

https://github.com/woothemes/woocommerce/blob/master/includes/class-wc-frontend-scripts.php#L54

But this is valid HTML and displays to be read only by small screens.

Here for your reference: http://www.w3.org/TR/css3-mediaqueries/

[szepeviktor]

Thank you.
I do understand that the output is valid HTML but WordPress core lacks the feature of media queries. Only media type is allowed in media.

For googlers:

1. You exclude woocommerce-smallscreen.css from minification/combining
2. Replace it in the above filter with

@media only screen and (max-width: 768px) {
    @import 'woocommerce-smallscreen.css';
}

[claudiosanches]

WordPress accept any media queries, however it seems that the docs needs some update.
See how works the class responsible for this:

https://core.trac.wordpress.org/browser/tags/4.3.1/src/wp-includes/class.wp-styles.php#L0

[szepeviktor]

Yes.
Please pay attention to that all plugins are written based on the docs.
For example W3 Total Cache.

[claudiosanches]

@szepeviktor this is a W3 Total Cache issue, not a WooCommerce or WordPress issue.

[claudiosanches]

But, I'll update the docs for you @szepeviktor ;)
Since anyone can update the WordPress docs.

[szepeviktor]

Thank you.
I think W3TC is core conformant.
https://wordpress.org/support/topic/woocommerce-media-query

[claudiosanches]

@szepeviktor good luck!