Developer Tools feature request

[som...@gmail.com]

It would be awesome to add new button near "New Style Rule" button, called "New Media Style Rule" to add rule to existing media query.

For example i have empty media query in my css for some specific resolution, i have to duplicated whole css into it, to be able to edit it via google chrome developer tools. I have configured it to automatically save edits into css file.

But if there would be such button, i could select proper media query and add rule into it, avoiding duplicated css and clearing after i have done.

Currently there are two options, editing css media query the old way, alt+tab and edit inside sublime editor and then refresh browser page etc.

Or make full copy of css into media query and then clear non-required css after all edits are done.

Ofc i can add new style and add media query every time like this:

@media (max-width: 1150px)

{

}

But this kinda time consuming, buffer should be overwritten or i will have to copy it again. Very annoying... In Linux you can have multiple copy/paste buffers and insert required one. But not on windows.

Pros:

   - time saving

   - less crowded css file

[Paul Irish]

Thanks! This is crazy-useful feedback. 

It's also something we've been thinking about.

A little bit ago we added a feature that can help you out a little here:

See the + in the bottom right? 

This will inject a new rule that is added directly after this p.intro in the source file.

It will be added inside of the same @media rule.

Now the add style rule that you pointed out currently has a file selector:

Maybe one solution for this is to have a media query selector in the rule-level + action?

Choosing one would append it to the end of the styles within that MQ block.

Either way you can then click through on the filename and all the updates are there

From there you can copypaste it back over, or set up workspaces or other tooling to synchronize.

What do folks think about that?

 

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/842c8482-927e-40af-ad5a-ff6e72bb8d57%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[som...@gmail.com]

Maybe one solution for this is to have a media query selector in the rule-level + action?

Choosing one would append it to the end of the styles within that MQ block.

Yea, that would be awesome.

The main problem is that this media query should already exist in the css file, to be visible in the dev tools.

I was talking about addin new media query.

Here is my idea. Not sure if it's very good, but worth mentioning:

Add new media query button. Which will add media query in dev tools, and add togglable menu with it/them.

Selecting some element, then opening that toggled menu, will automatically append #id or .class to that media query.

If user will add some css property in that "temporary" media query, it will automatically add that css rule with media query block into css file and next time it will be visible in default/usual way, like the other css.

Before user haven't added some css property it will not be written to css file.

So basically summary:

- new media query button (with prompt probably or autofocus in toggable media queries menu)

- toggable "temporary media queries" menu

- auto adding #id/.class feature next to temp media query

About usability and UI positioning it's up to designers.