Visual Media Queries Bar doesn't show Queries from the "media" attributes in link element

[ProfClaytonTX]

Working with Dreamweaver 2020 (v20.0) today, I noticed that Media Queries set from the < link > element with the "media" attribute (line 12 in the image below), do not appear in the Visual Media Queries Bar... only media queries that are built into the CSS file.

Why?

Edit to add a better pic:

[pziecina · Accepted solution]

That is because the media atribute in a link is not a media-query in itself.

It is a type of conditional statment to the browser, which says if the condition is 'true' then load the css file refered to, (false = do not load).

[ProfClaytonTX]

That makes sense. Thank you. 

... but wouldn't it be a better user experience to allow those conditions to be viewed in the bar? I think it would be a help to those who use them. Just my two cents. 

[pziecina]

It would have been a good idea to include them as media queries in the past, but as html5 develops more features are being added that work in the same way, (conditional type statements).

srcset and the relatively new attributes for the video, (which differentiate between low-res, hd, uhd) tags attributes work in the same type of way. In that that let the browser decide what to load.

[ProfClaytonTX]

Interesting. Thanks for the clarification.

[Nancy OShea]

"... but wouldn't it be a better user experience to allow those conditions to be viewed in the bar? I think it would be a help to those who use them. "

No it wouldn't.  Apart from print.css where an entirely different stylesheet is warranted, trying to maintain multiple stylesheets for different devices is counterproductive.  CSS Media queries are much more efficient for responsive web design.    And for those of us who use a pre-processor like SASS, we end up with 1 stylesheet for all screen sizes anyway.   There is no need for conditionals. 

[pziecina]

I have to disagree Nancy. There are times when it can be absolutly necessary to keep html/css/js file sizes down to the absolute minimum.

As other assets used by sites grow, (I know most Dw users will not have to work to a file size specification) it can be necessary to make savings in the size of other files using other methods, and using different css files to match end users browsers is an important tool to many.

I have nothing against anyone using whatever method they and their clients decide upon, but all developers should have knowledge of other methods, and be able to use them if they wish.

[Nancy OShea]

Welcome back Paula!  I have no interest in derailing this discussion.  The question concerned the visual media query bar.  For the record, mine is turned off because I rarely use it.   As you say, everyone has their preferred workflow 🙂 

Conditional stylesheets are not something I use for run-of-the-mill responsive layouts.  And if file size considerations necessitate carving scripts into bite sized pieces, I do that at completion; not during development.  

Just saying....

[ProfClaytonTX]

In full disclosure, I don't use conditional CSS files either when I build sites, but I was teaching my students Dreamweaver and using the CSS Designer to create and attach stylesheets using the Conditional Usage options.

The resulting page is then linked in the HTML and the usage is placed in the media attribute. There is no way to specify it in the page you are creating (as you create it).

Likewise, if you use the Visual Media Query Bar to create the breakpoint and choose Create a New CSS File, it kicks you into the Create a New CSS File dialog box... thus forcing the page to link with the conditions in the media attribute. 

The process of first adding a CSS file to the page, then adding the queries via the CSS Designer or the Visual Media Query Bar seems like one too many steps... but it's what we have to do.

We use multiple style sheets for only one exercise as a means to help them separate out the styles and not become burdened by overly long CSS files.

Thanks for all of your input and I certainly welcome the dialog.