twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.93k stars 78.88k forks source link

Switch to using range context queries #41046

Open jcoyne opened 1 day ago

jcoyne commented 1 day ago

Prerequisites

Proposal

Currently bootstrap uses queries like @media (max-width: 575.98px). It appears this was because range queries were not supported in the past:

https://github.com/twbs/bootstrap/blob/main/site/layouts/partials/callouts/info-mediaqueries-breakpoints.md?plain=1#L1

Motivation and context

All browsers now support range queries, so we don't need the confusion around "why did you subtract 0.02px?" See https://caniuse.com/css-media-range-syntax

This means we can just have:

@media (width < 576px)
julien-deramond commented 12 hours ago

Based on https://caniuse.com/?search=range%20queries, it could be update only in v6 with https://github.com/twbs/bootstrap/pull/37309 (or other PR) to update our .browserlistrc