Email or username:

Password:

Forgot your password?
Stephanie's posts Post Back to profile
Stephanie Eckles

📝 Fresh post:

12 Modern #CSS One-Line Upgrades

Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.

moderncss.dev/12-modern-css-on

22 January at 14:18 | Open on front-end.social
9 comments
Vesa Piittinen

@5t3ph Note that Windows users won't see much difference on some of the text examples like `text-wrap: pretty;` due to different font.

22 January at 15:02 | Open on mastodon.social
Rick Doesburg

@5t3ph great tips! I keep using more and more of the newer properties as support grows.

22 January at 16:28 | Open on mastodon.social
Ryan Boswell 🏳️‍🌈

@5t3ph The scroll margin/padding one is a true life saver. We have a sticky header and people have been complaining the whole time that anchor links “scroll too far” and keep filing bugs for it.

I’ve refused to build a JS implementation to work around that and this will finally get things working right 🎉

22 January at 22:22 | Open on sfba.social
Luke Harby
thudfactor

@5t3ph Shared this with my team and the thing everyone is excited about is the overscroll.

23 January at 14:52 | Open on hachyderm.io
Eric Portis

@5t3ph either no one ever told me about `object-fit: scale-down`, or I'd forgotten about it; in either case I am furious.

Thank you!

23 January at 15:23 | Open on front-end.social
pepkin88

@5t3ph
> Important: This property only has an effect when the user’s system settings are not for “overlay” scrollbars, as in the default for Mac OS, where the scrollbar only appears as an overlay on content that is actively being scrolled.

As far as I know (I might be wrong), the default setting is "Automatically based on mouse or trackpad", not "When scrolling". With the "Automatic" setting, when you connect a mouse, which doesn't have touch scrolling, the scrollbars should appear. At least, that's how it works on my machine.

@5t3ph
> Important: This property only has an effect when the user’s system settings are not for “overlay” scrollbars, as in the default for Mac OS, where the scrollbar only appears as an overlay on content that is actively being scrolled.

As far as I know (I might be wrong), the default setting is "Automatically based on mouse or trackpad", not "When scrolling". With the "Automatic" setting, when you connect a mouse, which doesn't have touch scrolling, the scrollbars should appear. At least, that's...

24 January at 15:54 | Open on social.vivaldi.net
FND

@5t3ph thank you for writing this! `color-scheme` in particular was a revelation to me, and quite timely too - I appreciate you explicitly mentioning form controls; that resonated (thus prepitaph.org/snippets/css-col)

24 January at 17:44 | Open on hachyderm.io
Gur814

@5t3ph This was such a great read. Thanks!

25 January at 6:28 | Open on mastodon.social
Go Up