Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Media Queries and Responsive Design

engineering.kablamo.com.au

Post reply on HN
Print view View original

1–10 of 50 posts

Re: Media Queries and Responsive Design

#2

Post by LanternLight83 »

This is great, thanks for sharing! I picked up most of this over time, but wouldn't have needed as much with such a great overview as this-- matches all the best practices I learned trying to make sure things looked right c:

What I didn't pick up along the way was accessability... anyone got recommendations for lesser known, quality, maybe even first-hand resources on eg. ARIA?

Re: Media Queries and Responsive Design

#4

Post by chrismorgan » 

  @media (max-width: 479.98px)
This would be more accurately expressed with negation (though the difference will probably never matter to even a single human):

  @media not all and (min-width: 480px)
This is using widest-compatible syntax, since WebKit only very recently (Safari 16.4) got the Media Queries Level 4 stuff to let you write it in clearer ways. The “not” applies to the remainder of the query: parse it as “not (all and (min-width: 480px))” rather than “(not all) and (min-width: 480px)” which would never match.

(As far as I can tell, compatibility charts don’t show this Level 4 query syntax boolean logic stuff at all. Anyone want to do me a favour and file MDN data bug about it? If you do, mention it because otherwise I might finally get round to reporting it later.)

Re: Media Queries and Responsive Design

#6

Post by rado »

chrismorgan wrote: post #4

@media (max-width: 479.98px) This would be more accurately expressed with negation (though the difference will probably never matter to even a single human): @media not all and (min-width: 480px) This is using widest-compatible syntax, since WebKit only very recently (Safari 16.4) got the Media Queries Level 4 stuff to let you write it in clearer ways. The “not” applies to the remainder of the query: parse it as “not…

Yes, "not" is better than fractions.

Re: Media Queries and Responsive Design

#7

Post by benatkin »

chrismorgan wrote: post #4

@media (max-width: 479.98px) This would be more accurately expressed with negation (though the difference will probably never matter to even a single human): @media not all and (min-width: 480px) This is using widest-compatible syntax, since WebKit only very recently (Safari 16.4) got the Media Queries Level 4 stuff to let you write it in clearer ways. The “not” applies to the remainder of the query: parse it as “not…

There's no need to mess with the breakpoints. They're chosen carefully. The article explains why this one works optimally:

> Why 0.98px specifically? 0.02px is the smallest division of a CSS pixel that an earlier version of Safari supported. See WebKit bug #178261.

Re: Media Queries and Responsive Design

#8

Post by ehnto »

benatkin wrote: post #7
chrismorgan wrote: post #4

@media (max-width: 479.98px) This would be more accurately expressed with negation (though the difference will probably never matter to even a single human): @media not all and (min-width: 480px) This is using widest-compatible syntax, since WebKit only very recently (Safari 16.4) got the Media Queries Level 4 stuff to let you write it in clearer ways. The “not” applies to the remainder of the query: parse it as “not…

There's no need to mess with the breakpoints. They're chosen carefully. The article explains why this one works optimally: > Why 0.98px specifically? 0.02px is the smallest division of a CSS pixel that an earlier version of Safari supported. See WebKit bug #178261.

You shouldn't need arcane knowledge of Safari bugs to evaluate a simple media query. This will break on first encounter with a well intentioned maintainer. The option with the least outside knowledge required is usually the most robust choice I feel.

Re: Media Queries and Responsive Design

#9

Post by itsuka »

LanternLight83 wrote: post #2

This is great, thanks for sharing! I picked up most of this over time, but wouldn't have needed as much with such a great overview as this-- matches all the best practices I learned trying to make sure things looked right c: What I didn't pick up along the way was accessability... anyone got recommendations for lesser known, quality, maybe even first-hand resources on eg. ARIA?

I'm currently going through https://practical-accessibility.today course by Sara Soueidan. She is really knowledgeable and, most importantly IMO, she practices what she teaches. Her Twitter feed also has some nice tips on accessibility.

Re: Media Queries and Responsive Design

#10

Post by ehnto »

rado wrote: post #5

The author did a great job on that article. But please stop it with the 768px nonsense already. It makes no sense at all and is unnecessarily complicated. The breakpoints should be 600px, 900px etc https://www.freecodecamp.org/news/the-100-correct-way-to-do-...

Indeed, the mythical Standard Tablet Size doesn't exist, none of the device psuedo standard sizes are actually standard.

Devices come in myriad sizes, and resized browser windows come in many more (even on mobile devices)

The most pragmatic solution in my opinion, pick a handful of major layout shift points and fix the layout when it breaks as you resize it, not based on an imaginary universal device size.

Post reply on HN