Consider switch to CSS range syntax for media queries in Optimization Detective

[westonruter]

Feature Description

The od_generate_media_query() helper function is used to generate media queries like the following:

@media (min-width: 481px) and (max-width: 600px) { 
    #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 400px; } 
}
@media (min-width: 601px) and (max-width: 782px) { 
    #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } 
}

The max-width numbers are coming from od_get_breakpoint_max_widths() with the min-width numbers being one greater than the previous max-width.

However, could there be an issue where windows are sized sub-pixel dimensions, so that a window is for example 601.5px wide? In this case, neither of these rules would apply and it would be better to use the new CSS range syntax (Can I use?). See writeup. The above CSS could be rewritten instead as:

@media (480px < width <= 600px) { 
    #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 400px; } 
}
@media (600px < width <= 782px) { 
    #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } 
}

This is more concise and it addresses any sub-pixel concerns, although it seems this is only an issue in Firefox according to What to do about sub-pixel media-queries?