[solved] cms_stylesheet and media conditions

[palun]

I want to use different stylesheets depending on browser width ("responsive design", sort of). As a test I added this inside my HEAD-tag:

{stylesheet name="mytestcss" media="screen and (min-width: 800px) and (max-width: 959px)"}

...which works fine! However, if I change "stylesheet" to the recommended "cms_stylesheet", the media conditions are ignored and mytestcss is used for all widths. Anyone knows why? I'm using CMSMS v.1.10.3 (I know about bug #6647, but that is fixed in v.1.10, right?)

Cheers /ulf

[mcDavid]

All your stylesheets get combined in one file for speed enhancement.

You can use @media-querys inside the stylesheet.

[palun]

All your stylesheets get combined in one file for speed enhancement.

Oops... Didn't know that. (Who took that decision? And why?)

You don't happen to know when (the deprecated) {stylesheet} will be removed? Will it be gone in the next version, or is it still safe to use? (Is there any good reason why it should be removed at all?)

Thanks mcDavid!

/ulf

[uniqu3]

All your stylesheets get combined in one file for speed enhancement.

You can use @media-querys inside the stylesheet.

Not correct, only Stylesheets of "SAME" Media Type get combined.

Oops... Didn't know that. (Who took that decision? And why?)

Answer 1: Community and DEV Team
Answer 2: Combined Stylesheets reduce Browser requests, every additional Browser request, costs time to render your page, means less is faster.
If you do not like it, use nocombine='1' parameter.

You don't happen to know when (the deprecated) {stylesheet} will be removed? Will it be gone in the next version, or is it still safe to use? (Is there any good reason why it should be removed at all?)

Stylesheet is no longer being distributed since version 1.10 you should should switch to cms_stylesheet

To answer your first question about media queries you have two options.

As mcDavid suggested you can use @media in your stylesheet you can also include this stylesheet as standalone and not attached to theme simply add

Code: Select all

{cms_stylesheet name='name_of_media_query_stylesheet'}

Another option is to include it only as file path, for example:

Code: Select all

<link rel="stylesheet" media="screen and (min-width: 800px) and (max-width: 959px)" href="{cms_stylesheet name='foo' nolinks='true'}" />

DEV Team is working towards better solution to handle media queries, but as there is actually no limit of usage combinations it takes time to find appropiate solution that hopefully can make everyone happy.
As we know there is no product that can claim "one size fits all"

[palun]

Another option is to include it only as file path, for example:

Code: Select all

<link rel="stylesheet" media="screen and (min-width: 800px) and (max-width: 959px)" href="{cms_stylesheet name='foo' nolinks='true'}" />

This works great! (Why didn't I think of that..)

uniqu3, many thanks for taking the time to write such an informative answer. Much appreciated. Thanks!
/ulf