
CSS Layout cookbook - filipoi
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook
======
maddyboo
Wow, when did MDN start scrolljacking?

I use a browser extension [1] which provides vim-like bindings for Chrome, and
sites that scrolljack severely mess up the scroll up/down functionality.

It's hard to tell there's scrolljacking just by using your mousewheel, but if
you try running `window.scrollBy(0, 500);` in your developer console, you'll
see the easing being applied. Try the same code on a site without
scrolljacking (like the HN front page) and you'll see it jumps directly to the
destination.

You'd think one of the largest advocates for web standards and accessibility
would know better!

[1]:
[https://github.com/brookhong/Surfingkeys](https://github.com/brookhong/Surfingkeys)

~~~
regecks
Yeah, gross. jk gg G all stopped working.

Checking archive.org, it looks like the scrolljacking was just added on
October 12.

~~~
rudedogg
This is really unfortunate. I use the MDN docs frequently, and I can no longer
scroll using the typical vim motion commands via
[https://addons.mozilla.org/en-US/firefox/addon/vimium-
ff/](https://addons.mozilla.org/en-US/firefox/addon/vimium-ff/)

I posted a thread on the MDN discord:
[https://discourse.mozilla.org/t/scrolling-behavior-on-
mdn/32...](https://discourse.mozilla.org/t/scrolling-behavior-on-mdn/32564)

Edit: Another person pointed out that it's caused by the _scroll-behavior:
smooth;_ style. I'm guessing they won't change the MDN website and the
extensions will need to ignore/disable the style through CSSOM.

The property docs say _" User agents are allowed to ignore this property."_,
so I guess that makes sense.

~~~
bhrgunatha
Dev tools to fix sites during one off visits and Stylus for regular visits.
Stylus is an absolutely essential add-on for me in recent years.

It's useless trying to convince the world to have sane, readable text size and
contrast on desktop. Firefox reader view doesn't work well with interactive
pages.

------
Theodores
Actually this is quite promising, given how the pages give some alternate
recipes and rationale for the design choices.

I have just learned how to fix a broken sticky footer in a way that I had not
thought of (100vh on body min-height), I had originally done it differently
before I trimmed out what I thought was redundant CSS.

Mozilla need to do more work though for it to be a truly useful resource.
Rachel Andrew's 'grid by example' is more likely to solve the layout problems
I encounter. Not sure why Mozilla couldn't launch this 'cookbook' without
making this new resource at least as expansive as what Rachel Andrew can do.

[https://gridbyexample.com/](https://gridbyexample.com/)

------
dfee
Long overdue and very much welcomed. Thanks Mozilla.

------
fouc
They're all using flexbox except for the Media Objects one which is using CSS
Grid. I would still use flexbox there.

~~~
irrational
Why? Because you don't like CSS Grid or because you don't feel it is widely
supported enough yet?

~~~
schpaencoder
Things with a single dimension fit Flexbox much better than grid

------
leke
They should attach JSFiddle links.

Edit: Just tried the first one in JSFiddle and it looks kind of bad.
[https://jsfiddle.net/n2fole00/ewurbgdn/](https://jsfiddle.net/n2fole00/ewurbgdn/)

------
Dowwie
Note that they are accepting contributions for more recipes!

------
jrochkind1
In the column layouts section, in browser support, what does "Intrinsic sizes"
mean? the one that there isn't support for.

------
commandlinefan
Wow, perfect, thanks!

