Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to using range context queries #41046

Open
2 tasks done
Tracked by #37309
jcoyne opened this issue Nov 21, 2024 · 1 comment
Open
2 tasks done
Tracked by #37309

Switch to using range context queries #41046

jcoyne opened this issue Nov 21, 2024 · 1 comment

Comments

@jcoyne
Copy link

jcoyne commented Nov 21, 2024

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Inbox
Development

No branches or pull requests

2 participants