@5t3ph@front-end.social avatar

5t3ph

@5t3ph@front-end.social

(she/her) ✨ a11y • CSS • HTML • 11ty • Design Systems

This profile is from a federated server and may be incomplete. Browse more on the original instance.

5t3ph, to random
@5t3ph@front-end.social avatar

i am a potato

fimion, to random
@fimion@notacult.social avatar

Alright, I got distracted yesterday and made something horrible/fantastic.

Allow me to introduce Markdown CSS Framework:

https://codepen.io/fimion/full/oNVQBRJ

5t3ph,
@5t3ph@front-end.social avatar

@fimion I approve of these shenanigans

5t3ph, to random
@5t3ph@front-end.social avatar

There are few things that can break though my hyperfocus but one of those is Toxic by Britney, or any remix thereof.

argyleink, to random
@argyleink@front-end.social avatar

Ever wanted to use background-attachment but attach to something other than the viewport? like attach to a scrollport?

I've just proposed a feature enhancement to background-attachment that would allow it.

thoughts?!

https://github.com/w3c/csswg-drafts/issues/9927

5t3ph,
@5t3ph@front-end.social avatar

@argyleink talk about niche CSS content 😅

5t3ph, to random
@5t3ph@front-end.social avatar

hold me like an apricot

5t3ph, (edited ) to random
@5t3ph@front-end.social avatar

Should I start a CSS podcast?

5t3ph, to random
@5t3ph@front-end.social avatar

A fun fact about me is that new research about megalodon will stop me in my tracks and prevent me from finally closing TikTok

5t3ph, to random
@5t3ph@front-end.social avatar

excuse me, it's February?

eleventy, to random
@eleventy@fosstodon.org avatar

Join us for the 11ty International Symposium on Making Web Sites Real Good

(We are running a conference in May 2024!)

https://conf.11ty.dev/

5t3ph,
@5t3ph@front-end.social avatar

@eleventy O M G 🥺🥳🤩

5t3ph, to random
@5t3ph@front-end.social avatar

The elderbeast's 8th birthday is arriving imminently 😭

5t3ph, to random
@5t3ph@front-end.social avatar

tooltip "feature" block count: 5

raymondcamden, to random
@raymondcamden@mastodon.social avatar

@5t3ph fyi, small issue on your very cool css post - this is on a Samsung device.

5t3ph,
@5t3ph@front-end.social avatar

@raymondcamden strange! the color format it's using should be supported supposedly since 2018 on Samsung so I'm not sure what else could be at fault 🧐

5t3ph,
@5t3ph@front-end.social avatar

@raymondcamden it’s supposed to be significantly transparent and appear behind the text, just intended to be decorative

5t3ph, to random
@5t3ph@front-end.social avatar

Big 'ole newsletter sliding into your inbox tomorrow.

https://moderncss.dev/newsletter

mikesusz, to random
@mikesusz@front-end.social avatar

once again, i’ve learned several new things about CSS from reading an article by @5t3ph and i just discovered her buymeacoffee, wouldn’t it be fun (if you also benefit and you have the means) for us to all throw a little $ support her way today? https://www.buymeacoffee.com/moderncss

5t3ph,
@5t3ph@front-end.social avatar

@mikesusz Aw, you're very kind, thanks!

5t3ph, to CSS
@5t3ph@front-end.social avatar

📝 Fresh post:

12 Modern 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/

5t3ph,
@5t3ph@front-end.social avatar

@sarajw yess!! 💜

5t3ph, to webdev
@5t3ph@front-end.social avatar

📝 New post:
"A Call for Consensus on Semantics"

Partly a rant, minorly educational, mostly a call for help.

https://thinkdobecreate.com/articles/a-call-for-consensus-on-html-semantics/

5t3ph,
@5t3ph@front-end.social avatar

@zersiax Thank you so much for your time and perspective!

Re: the TOC which I know sounded the most odd - as a sighted user I have observed that several "documentation" type of sites are using the visual pattern of placing the TOC on the right-hand side, usually because they have a left-hand sidebar for the site nav, so it is more "visually balanced" to have the TOC to the right so that the content can fill the middle space. I'm not condoning the decision, just sharing more context.

5t3ph,
@5t3ph@front-end.social avatar

@hdv Ugghh that last part about it possibly not really mattering to the audience we're attempting to help with all of this 😫

5t3ph,
@5t3ph@front-end.social avatar

@ollicle I spent a decade building bespoke WordPress themes and... yeah there was no way to truly predict what kind of content would be thrown at it 😫

5t3ph,
@5t3ph@front-end.social avatar

@dginev Yeah, I like that idea of categorizing best practices

5t3ph, to random
@5t3ph@front-end.social avatar

I think we need more discourse about nuanced and liminal HTML semantics.

There are several scenarios I think will plague me til the end of my webdev days, especially with a push towards components and templates that are to assume a consistent hierarchy (ha!) particularly when aiding dynamic and/or user entered content but should also be accessible, scalable, maintainable, and provide an inclusive user experience. Woof.

5t3ph,
@5t3ph@front-end.social avatar

@heydon I ended up kicking out a very hasty post to expand on this:
https://thinkdobecreate.com/articles/a-call-for-consensus-on-html-semantics/

By "liminal" I mean the gray-area, transitional semantics where perhaps on first glance it's obvious until you consider your full context and content expectations then the semantics hover in a weird in-between state where it's not easy to choose or even determine if it matters (post gives examples).

5t3ph, to random
@5t3ph@front-end.social avatar

I'm not sure enough folks realize that :is()/:where(), and :not() can check ancestor and previous sibling conditions.

p:is(h2 + *) = paragraphs that are directly after an h2

p:not(blockquote *) = paragraphs that are not within blockquotes

I've used these techniques to simplify what would otherwise be rather unmaintainable selectors or may have previously required additional conditional classes.

https://codepen.io/5t3ph/pen/KKEmMXR

5t3ph,
@5t3ph@front-end.social avatar

@kizu @hi_mayank @bramus Thanks for discussing this aspect, I did have the wrong impression on the original selector, and I'm interested to know how nesting behavior changes it (if at all).

Is there a future hope of optimizing * in these scenarios similar to the treatment of &??

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • provamag3
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • anitta
  • Leos
  • tester
  • JUstTest
  • All magazines
    •