Use CSS range syntax in media queries #1833

SohamPatel46 · 2025-01-28T11:25:05Z

Summary

Relevant technical choices

Using CSS range syntax helps eliminate frontend issues where windows are sized sub-pixel dimensions.

This converts media queries from

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

to

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

The above conversion results in eliminating sub-pixel dimension issues possible between 600px to 601px screen.

westonruter · 2025-01-28T18:53:43Z

Here's a script you can use to update the snapshots once the actual.html files have been generated:

#!/bin/bash
for actual in $( find . -name 'actual.html' ); do
	expected=${actual/actual/expected};
	echo "$actual => $expected"
	mv "$actual" "$expected"
done

There should probably be something like this added to scripts in package.json.

SohamPatel46 · 2025-01-29T13:18:03Z

Here's a script you can use to update the snapshots once the actual.html files have been generated:
#!/bin/bash
for actual in $( find . -name 'actual.html' ); do
	expected=${actual/actual/expected};
	echo "$actual => $expected"
	mv "$actual" "$expected"
done
There should probably be something like this added to scripts in package.json.

Hello @westonruter I didn't get your above message. Is this for updating PHP unit tests ?

westonruter · 2025-01-29T15:52:09Z

Yes, the unit test failures are due to the HTML snapshots being out for date now that the media query is updated. So you need to move all the actual.html files generated during the unit tests over to replace the expected.html (if indeed the changes are as expected!) That bash script is a way to do so in bulk.

westonruter · 2025-01-30T19:41:12Z

plugins/optimization-detective/tests/test-helper.php

@@ -34,27 +34,27 @@ public function data_to_test_od_generate_media_query(): array {
 			'mobile'      => array(
 				'min_width' => 0,
 				'max_width' => 320,
-				'expected'  => '(max-width: 320px)',
+				'expected'  => null,


Why is this null? It should be unchanged.

westonruter · 2025-01-30T19:41:26Z

plugins/optimization-detective/tests/test-helper.php

 			),
 			'mobile_alt'  => array(
 				'min_width' => null,
 				'max_width' => 320,
-				'expected'  => '(max-width: 320px)',
+				'expected'  => null,


Same. This should be unchanged, right?

westonruter · 2025-01-30T19:41:34Z

plugins/optimization-detective/tests/test-helper.php

-				'expected'  => '(min-width: 601px)',
+				'expected'  => null,
 			),
 			'desktop_alt' => array(
 				'min_width' => 601,
 				'max_width' => null,
-				'expected'  => '(min-width: 601px)',
+				'expected'  => null,


plugins/optimization-detective/helper.php

Co-authored-by: Weston Ruter <[email protected]>

codecov · 2025-01-31T10:37:10Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 65.86%. Comparing base (5a1e472) to head (4c01373).
Report is 16 commits behind head on trunk.

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #1833      +/-   ##
==========================================
+ Coverage   65.82%   65.86%   +0.03%     
==========================================
  Files          88       88              
  Lines        6865     6873       +8     
==========================================
+ Hits         4519     4527       +8     
  Misses       2346     2346

Flag	Coverage Δ
multisite	`65.86% <100.00%> (+0.03%)`	⬆️
single	`38.45% <44.44%> (-0.04%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2025-01-31T10:50:04Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SohamPatel46 <[email protected]>
Co-authored-by: westonruter <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

westonruter · 2025-01-31T15:30:57Z

I'm just realizing that this isn't going to solve the potential sub-pixel rendering issue. Look at this diff:

~~Note that min-width: 481px and 481px < width are identical in behavior. Only the syntax is different.~~ For there to be any change in behavior the new syntax would need to change to 480px < width, so decrementing the minimum bound by one.

See correction below: #1833 (comment)

westonruter

See #1833 (comment).

The od_generate_media_query() function may need to have the semantics of its parameters changed, so that it is understood somehow the passed $minimum_viewport_width is not inclusive meaning that the viewport can never exactly equal that minimum width but it can be greater than it. In contrast, the $maximum_viewport_width is inclusive, in that the viewport width can exactly equal the max.

This may end up going down a rabbit hole because the URL Metric Groups have minimum and maximum viewport widths too, so then their semantics would probably need to change as well.

This will take some more thought.

westonruter · 2025-01-31T15:33:11Z

plugins/optimization-detective/helper.php

+	if ( $has_min_width && $has_max_width ) {
+		$media_attributes = sprintf( '( %dpx < width <= %dpx )', $minimum_viewport_width, $maximum_viewport_width );
+	} elseif ( $has_min_width ) {
+		$media_attributes = sprintf( '(min-width: %dpx)', $minimum_viewport_width );


Can the new syntax be used?

westonruter · 2025-01-31T15:33:16Z

plugins/optimization-detective/helper.php

+	} elseif ( $has_min_width ) {
+		$media_attributes = sprintf( '(min-width: %dpx)', $minimum_viewport_width );
+	} elseif ( $has_max_width ) {
+		$media_attributes = sprintf( '(max-width: %dpx)', $maximum_viewport_width );


westonruter · 2025-02-01T00:03:55Z

Note that min-width: 481px and 481px < width are identical in behavior. Only the syntax is different. For there to be any change in behavior the new syntax would need to change to 480px < width, so decrementing the minimum bound by one.

Correction: they aren't actually identical in behavior. In the min-width: 481px syntax, the viewport width can be exactly 481px whereas in the new syntax it can never be exactly 481px since it must be greater. So this means the result is worse. This emphasizes the need to somehow have this output 480px < width.

westonruter · 2025-02-01T06:29:32Z

The od_generate_media_query() function may need to have the semantics of its parameters changed, so that it is understood somehow the passed $minimum_viewport_width is not inclusive meaning that the viewport can never exactly equal that minimum width but it can be greater than it. In contrast, the $maximum_viewport_width is inclusive, in that the viewport width can exactly equal the max.

This may end up going down a rabbit hole because the URL Metric Groups have minimum and maximum viewport widths too, so then their semantics would probably need to change as well.

This will take some more thought.

Take a look at #1839.

plugins/optimization-detective/helper.php

… feat/use-media-queries-in-range

…points

westonruter · 2025-02-04T01:39:03Z

plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php

-				$style_rules[] = sprintf(
-					'@media %s { #%s { min-height: %dpx; } }',
-					od_generate_media_query( $minimum['group']->get_minimum_viewport_width(), $minimum['group']->get_maximum_viewport_width() ),
+				$style_rule = sprintf(
+					'#%s { min-height: %dpx; }',
 					$element_id,
 					$minimum['height']
 				);
+
+				$media_feature = od_generate_media_query( $minimum['group']->get_minimum_viewport_width(), $minimum['group']->get_maximum_viewport_width() );
+				if ( null !== $media_feature ) {
+					$style_rule = sprintf(
+						'@media %s { %s }',
+						$media_feature,
+						$style_rule
+					);
+				}
+				$style_rules[] = $style_rule;


This change fixes a bug I noticed which can happen when a site is configured to have zero breakpoints (which is very unlikely). In this case, the return value of od_generate_media_query() is null since the minimum is 0 and the maximum is null.

westonruter

This is working well in my testing!

westonruter · 2025-02-04T01:54:19Z

@felixarntz Please take a look when you get a chance.

SohamPatel46 added 2 commits January 28, 2025 16:48

Updates media query generator function to use range

604c5e5

Merge branch 'trunk' into feat/use-media-queries-in-range

069d2f3

westonruter added [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Plugin] Embed Optimizer Issues for the Embed Optimizer plugin (formerly Auto Sizes) [Type] Enhancement A suggestion for improvement of an existing feature labels Jan 28, 2025

westonruter added this to the optimization-detective 1.0.0-beta2 milestone Jan 28, 2025

Try updating unit test expected conditions

cec835b

westonruter reviewed Jan 30, 2025

View reviewed changes

plugins/optimization-detective/helper.php Outdated Show resolved Hide resolved

SohamPatel46 and others added 3 commits January 31, 2025 12:30

Update missing conditions for css query

355e1b3

Co-authored-by: Weston Ruter <[email protected]>

Update source conditions variable type

9c335f2

Update PHP unit tests snapshots

02a9cd4

SohamPatel46 marked this pull request as ready for review January 31, 2025 10:49

SohamPatel46 requested review from felixarntz and adamsilverstein as code owners January 31, 2025 10:49

Merge branch 'trunk' into feat/use-media-queries-in-range

5aecbfa

westonruter requested changes Jan 31, 2025

View reviewed changes

westonruter mentioned this pull request Feb 1, 2025

Change minimum viewport width to be exclusive whereas the maximum width remains inclusive #1839

Merged

Update media query to latest syntax

a69bc0e

SohamPatel46 commented Feb 3, 2025

View reviewed changes

plugins/optimization-detective/helper.php Outdated Show resolved Hide resolved

westonruter added 2 commits February 3, 2025 16:54

Merge branch 'trunk' of https://github.com/WordPress/performance into…

2af2547

… feat/use-media-queries-in-range

Remove extra spaces from media feature

a9bf3d1

westonruter added 4 commits February 3, 2025 17:20

Update expected data for test_od_generate_media_query

d76c16d

Update embed-optimizer test snapshots

bec17cf

Update image-prioritizer test snapshots

46d4ba2

Fix edge case for generating embed min-height when there are no break…

ea7b2bc

…points

westonruter reviewed Feb 4, 2025

View reviewed changes

Fix logic inversion in isViewportNeeded

4c01373

westonruter approved these changes Feb 4, 2025

View reviewed changes

westonruter mentioned this pull request Feb 4, 2025

Disable URL Metric storage locking by default for administrators #1835

Merged

westonruter changed the title ~~Updates media query generator function to use CSS range syntax~~ Use CSS range syntax in media queries Feb 4, 2025

swissspidy approved these changes Feb 4, 2025

View reviewed changes

westonruter merged commit 2fa59f0 into WordPress:trunk Feb 4, 2025
22 checks passed

westonruter mentioned this pull request Feb 4, 2025

Compute responsive sizes attribute based on the width from the boundingClientRect in captured URL Metrics #1840

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use CSS range syntax in media queries #1833

Use CSS range syntax in media queries #1833

SohamPatel46 commented Jan 28, 2025 •

edited by westonruter

Loading

westonruter commented Jan 28, 2025

SohamPatel46 commented Jan 29, 2025

westonruter commented Jan 29, 2025

westonruter Jan 30, 2025

westonruter Jan 30, 2025

westonruter Jan 30, 2025

codecov bot commented Jan 31, 2025 •

edited

Loading

github-actions bot commented Jan 31, 2025

westonruter commented Jan 31, 2025 •

edited

Loading

westonruter left a comment

westonruter Jan 31, 2025

westonruter Jan 31, 2025

westonruter commented Feb 1, 2025 •

edited

Loading

westonruter commented Feb 1, 2025

westonruter Feb 4, 2025

westonruter left a comment

westonruter commented Feb 4, 2025

Use CSS range syntax in media queries #1833

Use CSS range syntax in media queries #1833

Conversation

SohamPatel46 commented Jan 28, 2025 • edited by westonruter Loading

Summary

Relevant technical choices

westonruter commented Jan 28, 2025

SohamPatel46 commented Jan 29, 2025

westonruter commented Jan 29, 2025

westonruter Jan 30, 2025

Choose a reason for hiding this comment

westonruter Jan 30, 2025

Choose a reason for hiding this comment

westonruter Jan 30, 2025

Choose a reason for hiding this comment

codecov bot commented Jan 31, 2025 • edited Loading

Codecov Report

github-actions bot commented Jan 31, 2025

westonruter commented Jan 31, 2025 • edited Loading

westonruter left a comment

Choose a reason for hiding this comment

westonruter Jan 31, 2025

Choose a reason for hiding this comment

westonruter Jan 31, 2025

Choose a reason for hiding this comment

westonruter commented Feb 1, 2025 • edited Loading

westonruter commented Feb 1, 2025

westonruter Feb 4, 2025

Choose a reason for hiding this comment

westonruter left a comment

Choose a reason for hiding this comment

westonruter commented Feb 4, 2025

SohamPatel46 commented Jan 28, 2025 •

edited by westonruter

Loading

codecov bot commented Jan 31, 2025 •

edited

Loading

westonruter commented Jan 31, 2025 •

edited

Loading

westonruter commented Feb 1, 2025 •

edited

Loading