Skip to content
New issue

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

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

Already on GitHub? # 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 · May be fixed by #41236
Open
2 tasks done
Tracked by #37309

Switch to using range context queries #41046

jcoyne opened this issue Nov 21, 2024 · 1 comment · May be fixed by #41236

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

@github-project-automation github-project-automation bot moved this to Inbox in v6.0.0 Nov 22, 2024
@mdo mdo linked a pull request Feb 21, 2025 that will close this issue
56 tasks
@mdo mdo added the has-pr label Feb 25, 2025
# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
Status: Inbox
Development

Successfully merging a pull request may close this issue.

3 participants