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

CSS Layout cookbook

developer.mozilla.org

Post reply on HN
Print view View original

11–20 of 27 posts

Re: CSS Layout cookbook

#11

Post by nathancahill »

regecks wrote: post #10
maddyboo wrote: post #5

Earlier quoted context omitted.

Glad I'm not the only one. Where in the MDN source is the scrolljacking code?

It seems to be caused entirely by `scroll-behavior: smooth;` on the `html` element. Try add that style to this (HN) comments page. Same problem. Seems like the vim addons aren't dealing with browsers' implementations of that style. Whoops. For the addon I use (Vimium-FF), it appears to have been already reported and fixed: https://github.com/philc/vimium/pull/3111 but not yet published to AMO.

Props to you for actually digging in to the issue instead of the jump-to-conclusions "gross" comments.

Re: CSS Layout cookbook

#12

Post by 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/

Re: CSS Layout cookbook

#15

Post by kbenson »

regecks wrote: post #10
maddyboo wrote: post #5

Earlier quoted context omitted.

Glad I'm not the only one. Where in the MDN source is the scrolljacking code?

It seems to be caused entirely by `scroll-behavior: smooth;` on the `html` element. Try add that style to this (HN) comments page. Same problem. Seems like the vim addons aren't dealing with browsers' implementations of that style. Whoops. For the addon I use (Vimium-FF), it appears to have been already reported and fixed: https://github.com/philc/vimium/pull/3111 but not yet published to AMO.

The irony of this is fairly delicious.

Re: CSS Layout cookbook

#16

Post by mcbits »

ziikutv wrote: post #6
maddyboo wrote: post #3

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 scrollja…

Pardon my ignorance on this. I am not sure if the easing of scroll motion is scrolljacking. > Scrolljacking basically means we replace native scrolling (what you’re used to) with targeted scrolling: when the user initiates a scroll, either with their mouse or keyboard, scrolljacking takes them to an exact vertical point on the screen (for example, the top of the next content container) They aren't targeting your scro…

If you got that from Google's snippet, it's a bad snippet. Scrolljacking is short for "scroll hijacking" and can mean screwing with the browser's default (which we can assume to be user's preferred, or at least expected) scrolling behavior in any number of ways.

Re: CSS Layout cookbook

#17

Post by bhrgunatha »

rudedogg wrote: post #9
regecks wrote: post #4

Earlier quoted context omitted.

Yeah, gross. jk gg G all stopped working. Checking archive.org, it looks like the scrolljacking was just added on October 12.

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/ I posted a thread on the MDN discord: https://discourse.mozilla.org/t/scrolling-behavior-on-mdn/32... Edit: Another person pointed out that it's caused by the scroll-behavior: smooth; style. I'm guessing they won't change the MDN webs…

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.

Re: CSS Layout cookbook

#18

Post by devwastaken »

maddyboo wrote: post #3

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 scrollja…

Funny enough Firefox still doesn't allow modifying scrollbar css.

Re: CSS Layout cookbook

#19

Post by irrational »

fouc wrote: post #14

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

Why? Because you don't like CSS Grid or because you don't feel it is widely supported enough yet?
Post reply on HN