Stephanie Eckles

@5t3ph@front-end.social
3.5K Followers
439 Following
919 Posts

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

Design Systems at Adobe
CSSWG member

Modern CSS Tutorialshttps://moderncss.dev
Smol CSS Snippetshttps://smolcss.dev
Community CSS Showcasehttps://stylestage.dev
11ty Rocks!https://11ty.rocks
Stephanie Eckles5d ago
Matthias Ott5d ago

Let’s just for a second – purely hypothetical, of course – suppose there was a podcast where some random guy talks to people from the web community about their personal websites and what they’re curious and passionate about.

Who would you love to see as a guest? 🤔

Stephanie EcklesJun 15
Bringing the timeline a moment of calm
Stephanie EcklesJun 13

The best part of Web Directions was the super cool folks I got to meet! 🥰

Off to NZ south island for a bit before heading back home 🛫

Stephanie EcklesJun 12

Turns out giving a talk on squirrels might be more entertaining for the local Aussie community than my original plan 😅

...CSSquirrels, anyone?

Stephanie EcklesJun 8
I am extremely pleased to inform you that local Melbourne news is currently interviewing a man who takes care of 20 pigeons, with the chyron proclaiming "What the flock," subtitle "Love for his pigeons making it hard to meet a bird"
Stephanie EcklesJun 7

A classic web dev problem - assumption about validation on a string - almost kept me out of Australia. Luckily, they resolved it with only minor hassle at customs 😅

Excited to officially be here to speak at both Web Directions Code and Code Leaders!

Stephanie EcklesJun 5
Patrick BrossetJun 5

The ability to style grid and flex gaps is coming fast in a browser near you!
Bubbling with ideas for what this will be useful for!

Code: https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations

Stephanie EcklesJun 5
Scott O'HaraJun 5

i made some updates to my blog post about the figure and figcaption elements.

https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

maybe give it a read - especially if you think you need to use figures to wrap any old image you add to your web page (psst... you don't)

How do you figure? | scottohara.me

Introduced in the HTML5 specification (now the HTML Living Standard), the figure and figcaption elements are meant to create a meaningful markup structure th...

Stephanie EcklesJun 5

Does anyone know of an article or video explaining when to use #CSS entry/exit animations vs. view transitions?

My understanding is that view transitions power is the tweening between states, whereas entry/exit is just concerned with the individual element. But if you don't use view transitions, you could have some classic jarring behavior of elements snapping around during reflow (depending on what your animation is trying to accomplish).

Stephanie EcklesMay 27

I'm not sure my ideas are technically feasible, but good golly would I love to see movement of some kind on the issue of "shrink wrapping" text that happens to wrap!

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

(Tagging @mia and @kizu who have somewhat recently considered this)

[css-sizing] How to shrink to fit the width? · Issue #191 · w3c/csswg-drafts

In this demo: http://jsbin.com/weqapufoyi/edit?html,css,output Because span float will automatically wrap, how to make the parent element shrink to the "Expectation" effect. Can we add a new width/...

GitHub