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

[mediaqueries-5] Should aspect-ratio evaluate to false when one side is 0? #10887

Closed
cdoublev opened this issue Sep 13, 2024 · 2 comments
Closed

Comments

@cdoublev
Copy link
Collaborator

For example, when the user resized a vertical browser panel that covers the entire viewport, the aspect ratio resolves to Infinity but users might expect it to evaluate to false.

@media not (aspect-ratio) {
  .animated {
    animation-play-state: paused;
  }
}

Chrome always evaluates aspect-ratio to true when one side is 0, Firefox evaluates it to false when the viewport width is 0.

When written like [(color)], the media feature is evaluated in a boolean context. If the feature would be true for any value other than the number 0, a <dimension> with the value 0, the keyword none, or a value explicitly defined by that media feature to evaluate as false in a boolean context, the media feature evaluates to true. Otherwise, it evaluates to false.

https://drafts.csswg.org/mediaqueries-5/#mq-boolean-context

aside: I would also add no-preference and a function resolving to one of these values (eg. calc(0), var(--feature)) to the list of the "falsy" values.

@Loirooriol
Copy link
Contributor

I think this is what we resolved in #8244

aspect-ratio queries are always true (except when it can't apply at all)

@cdoublev
Copy link
Collaborator Author

Ah, sorry. I searched for mediaqueries aspect-ratio in the title.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment