Highlighted

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

Community Beginner ,
Jan 28, 2020

Copy link to clipboard

Copied

 

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?

 

dw2020-visual-media-queries-link.png

 

Edit to add a better pic:

 

dw2020-visual-media-queries-link.png

 

 

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).

TOPICS
Interface

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
Jan 28, 2020

Copy link to clipboard

Copied

 

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?

 

dw2020-visual-media-queries-link.png

 

Edit to add a better pic:

 

dw2020-visual-media-queries-link.png

 

 

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).

TOPICS
Interface

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 28, 2020 0
LEGEND ,
Jan 29, 2020

Copy link to clipboard

Copied

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).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 2
Community Beginner ,
Jan 29, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 0
LEGEND ,
Jan 29, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 1
Community Beginner ,
Jan 29, 2020

Copy link to clipboard

Copied

Interesting. Thanks for the clarification.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 0
Adobe Community Professional ,
Jan 29, 2020

Copy link to clipboard

Copied

"... 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. 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 0
LEGEND ,
Jan 29, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 0
Adobe Community Professional ,
Jan 29, 2020

Copy link to clipboard

Copied

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....

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 0
Community Beginner ,
Jan 29, 2020

Copy link to clipboard

Copied

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).

css-designer-css-file.png

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. 

vmqb-add.png

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 0