Custom css 'selector' for all breakpoints

[xmedia-nl]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

When adding custom css, it's always hard to get the breakpoints correct. Different websites could use different breakpoints or the breakpoints might change.
Most (non-developer) users also don't know how to write a css media queries for a display size.

Describe the solution you'd like

I found it's rather easy to extend the magic css 'selector' prefix with others. I suggest to add the breakpoints to these functions (add_post_css, add_page_settings_css in /elementor-pro/modules/custom-css/module.php)

Code change required is minimal:

$breakpoints = \Elementor\Plugin::$instance->breakpoints->get_breakpoints_config();
foreach ($breakpoints as $breakpoint_name => $breakpoint) {
    $min_max = $breakpoint['direction'];
    $css = str_replace($breakpoint_name, '@media(' . $min_max . '-width:' . $breakpoint['value'] . 'px)', $css);
}

This allows a user to write media queries this way, which seems users friendly to me

mobile{
    selector{
        background-color:orange;
    }
}
tablet{
    selector{
        background-color:purple;
    }
}

Describe alternatives you've considered

This could also be solved by creating a custom css area for each breakpoint, but that would make the interface messy and would require much more changes.
There was an extension that did this, but that stopped working a while ago.

Additional context

Some additional changes are required so that the editor accepts the magic tags as valid

[Henzxon]

How about we add responsive control to Custom CSS?

This way all custom code are separated in their own break point.

[Henzxon]

Custom CSS for specific breakpoint range will be handled in global settings.

[xmedia-nl]

That's also a good idea. Would keep the interface in line with the rest of Elementor and might be easier to use for non-developers.

[Henzxon]

Also no one codes in a very small and cramped space.
An expand icon to view the code on a wider modal view is way better than resizing the side navigator.