You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Fela doesn't necessarily respect the order in which you write media queries, since all the rules for each media query get bundled up into a single <style> tag for SSR.
On a 1000px viewport, both media queries match so the one you see depends on HTML ordering.
This is a bit of an issue with mobile-first CSS itself - our intent is usually to scope styles to a specific range but the @media rules we write don't actually reflect that. It just kind of works in traditional CSS because the order you write rules is maintained in the output.
This can be fixed by scoping rules more accurately to a media query where they're expected to apply. In the example above, we really mean we want blue in the 500-899px range, so let's adjust our media query to reflect that:
This discussion was converted from issue #20 on February 01, 2022 10:36.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Fela doesn't necessarily respect the order in which you write media queries, since all the rules for each media query get bundled up into a single
<style>
tag for SSR.E.g...
...can result in this HTML...
On a 1000px viewport, both media queries match so the one you see depends on HTML ordering.
This is a bit of an issue with mobile-first CSS itself - our intent is usually to scope styles to a specific range but the
@media
rules we write don't actually reflect that. It just kind of works in traditional CSS because the order you write rules is maintained in the output.This can be fixed by scoping rules more accurately to a media query where they're expected to apply. In the example above, we really mean we want blue in the 500-899px range, so let's adjust our media query to reflect that:
However mobile-first is super prevalent and people are going to write styles like that, so we can make things behave a bit more intuitively with https://github.com/robinweser/fela/tree/master/packages/fela-sort-media-query-mobile-first
Beta Was this translation helpful? Give feedback.
All reactions