Elektrine lite

← Feed

@5t3ph@front-end.social

2024-01-22 14:18 UTC

📝 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. https://moderncss.dev/12-modern-css-one-line-upgrades/

Replies (8)

  • @MerriNet@mastodon.social 2024-01-22 15:02

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

    Open ##2682452

  • @5t3ph@front-end.social great tips! I keep using more and more of the newer properties as support grows.

    Open ##2682453

  • @ryanboswell@sfba.social 2024-01-22 22:22

    @5t3ph@front-end.social 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 🎉

    Open ##2682454

  • @eeeps@front-end.social 2024-01-23 15:23

    @5t3ph@front-end.social 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!

    Open ##2682455

  • @pepkin88@vivaldi.net 2024-01-24 15:54

    @5t3ph@front-end.social > 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.

    Open ##2682456

  • @FND@hachyderm.io 2024-01-24 17:44

    @5t3ph@front-end.social 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 https://prepitaph.org/snippets/css-color-scheme/)

    Open ##2682457

  • @Gur814@mastodon.social 2024-01-25 06:28

    @5t3ph@front-end.social This was such a great read. Thanks!

    Open ##2682459

  • @sarajw@front-end.social 2024-01-29 08:46

    @5t3ph@front-end.social You posted this about a week ago and I've only just seen you put color-scheme and a link to my video in! Awesome. More color-scheme!

    Open ##2682460