GoogleChromeLabs / GoogleChromeLabs/layout-shift-terminator
Combine duplicate media queries
- Dominant language
- HTML
- Stars
- 36
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
Given this example input:
```html
Native <img> lazy-loading is coming to the web! https://t.co/LgF7F1iMgR <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75 https://t.co/4gR7lvx4zx pic.twitter.com/luCHEfLkKD
— Addy Osmani (@addyosmani) April 7, 2019
```
The output is:
```html
#layout-shift-termination-0-24900068026844013 { contain: style layout inline-size; }
#layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; }
@media only screen and ( max-width: 1536px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@media only screen and ( max-width: 1366px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@media only screen and ( max-width: 768px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@media only screen and ( max-width: 700px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@media only screen and ( max-width: 600px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@media only screen and ( max-width: 500px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:568px; } }
@media only screen and ( max-width: 414px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:543px; } }
@media only screen and ( max-width: 375px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:466px; } }
@media only screen and ( max-width: 360px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:457px; } }
@container ( max-width: 1536px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@container ( max-width: 1366px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@container ( max-width: 768px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@container ( max-width: 700px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@container ( max-width: 600px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:606px; } }
@container ( max-width: 500px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:568px; } }
@container ( max-width: 414px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:543px; } }
@container ( max-width: 375px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:466px; } }
@container ( max-width: 360px ) { #layout-shift-termination-0-24900068026844013 > .layout-shift-terminated { min-height:457px; } }
(function (root) {
setTimeout(function () {
[].map.call(root.querySelectorAll(".layout-shift-termination"), (el) =>
el.remove()
);
}, 4000);
})(document.getElementById("layout-shift-termination-0-24900068026844013"))
Native <img> lazy-loading is coming to the web! https://t.co/LgF7F1iMgR <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75 https://t.co/4gR7lvx4zx pic.twitter.com/luCHEfLkKD
— Addy Osmani (@addyosmani) April 7, 2019
```
Note how the first 5 media queries all have the same `min-height:606px;` These can either be eliminated entirely because the initial `min-height` is `606px`, or else they can be merged into one media query.
Contributor guide
Research direction
Locate the code that generates the layout-shift-termination style block and reproduce the example output. Check how identical min-height rules are emitted across the media queries; done means equivalent output with redundant rules removed or merged while breakpoint-specific heights remain correct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- performance
- Issue type
- Refactor
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100