An interesting conversation came up in the comment thread of one of our posts this week, Considerations for Styling a Modal.

You might want to limit the width of a modal, right? Kinda gives it that "modal" look on larger screens. Let's say 600px sounds right. But, you want to make sure it doesn't bust outside of its parent element. For example, avoid causing horizontal scrolling on a mobile screen.

How would you do that?

1)
width: 600px;
max-width: 100%;


2)
width: 100%;
max-width: 600px;


The answer: it doesn't really matter, they are the same thing.

Some people's reactions:
  • The second one is "more correct"
  • Very big difference, actually
  • The second one would be friendlier to a narrower parent width
  • The first is garbage
  • The second describes the behavior in a more logical way
I agree it's kind of mind bending. They seem like they would be different. A reduced test case is always a good plan.

 

This might be a useful way to think about it: if the element would render wider than what max-width says it can be, max-width wins.

Scenarios:
  • Parent is 1000px wide
    • 1) Width says element should be 600px wide. That doesn't break the max-width rule, so 600px it is!
    • 2) Width says element should be 1000px wide. That breaks max-width rule, so forces element down to 600px.
  • Parent is 320px wide
    • 1) Width says element should be 600px wide. That breaks the max-width rule which says element can only be at most 320px wide, so 320px it is!
    • 2) Width says element should be 320px wide. That doesn't break the max-width rule, so 320px it is!
Whether the parent element is wider or narrower, these different rulesets end up agreeing with each other.

Although as Michael Lawton says, there is a difference when they are flex items.
Excellent new stuff from the blog
  • Daniel Jauch looks at that awkward moment when you're using border-collapse: collapse; but still want to change the color of all four borders on a table cell. The comments have many other solutions as well.
  • Chris shows that in order to get a delay between iterations of a @keyframe animation, you need to actually make % keyframes that just don't do anything. There is no simple property to help you. 
  • Eduardo Bouças introduces a very futuristic way to deal with a CMS. Actually, a CMS (even a "headless" one) might not even be the best way to think about it. He introduces the DADI stack, which is sort of like an master API sitting in the middle of everything, for ultimate flexibility. 

The most useful and important thing in front end development in the last few weeks

A Comprehensive Guide to Font Loading Strategies by Zach Leatherman

 

From the archives!

Reminder: it's pretty easy to use the responsive images syntax if all you're doing it providing multiple resolutions.

making images great again


Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list