Sara Soueidan
@sarasoueidan.com
🇱🇧 UI engineer, speaker/author/educator specializing in web accessibility • Creator of Practical Accessibility https://practical-accessibility.today
#HTML #SVG #CSS #a11y
• Blog https://sarasoueidan.com
• Newsletter https://www.sarasoueidan.com/newsletter
#HTML #SVG #CSS #a11y
• Blog https://sarasoueidan.com
• Newsletter https://www.sarasoueidan.com/newsletter
Reposted by Sara Soueidan
My new CSS course is now live on @frontendmasters.com! Learn the essentials, including responsive layouts, typography, animations, and more.
Save $10 on your first month: frontendmasters.com/courses/css-... (affiliate link, so it helps support me too 😊)
Save $10 on your first month: frontendmasters.com/courses/css-... (affiliate link, so it helps support me too 😊)
Learn CSS & Responsive Design Fundamentals
Learn the essentials of typography, responsive grid layout, animations, and form styling. By the end, you'll have the foundation to dive into your next vanilla CSS codebase or use utility-first approa...
frontendmasters.com
February 10, 2026 at 5:24 PM
My new CSS course is now live on @frontendmasters.com! Learn the essentials, including responsive layouts, typography, animations, and more.
Save $10 on your first month: frontendmasters.com/courses/css-... (affiliate link, so it helps support me too 😊)
Save $10 on your first month: frontendmasters.com/courses/css-... (affiliate link, so it helps support me too 😊)
Nvm my browsers need updating. 🥲🤦♀️
Invoker commands are supported across major browsers, but they're only working for me on Chrome Canary. What am I missing?
Invoker commands | Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
February 10, 2026 at 3:02 PM
Nvm my browsers need updating. 🥲🤦♀️
Reposted by Sara Soueidan
Big big thanks to @sarasoueidan.com for adding full transcripts to the Practical Accessibility course.
I have huge troubles following videos, so being able to read the transcript is amazing!
I have huge troubles following videos, so being able to read the transcript is amazing!
February 10, 2026 at 1:20 PM
Big big thanks to @sarasoueidan.com for adding full transcripts to the Practical Accessibility course.
I have huge troubles following videos, so being able to read the transcript is amazing!
I have huge troubles following videos, so being able to read the transcript is amazing!
Invoker commands are supported across major browsers, but they're only working for me on Chrome Canary. What am I missing?
Invoker commands | Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
February 10, 2026 at 2:56 PM
Invoker commands are supported across major browsers, but they're only working for me on Chrome Canary. What am I missing?
Officially started working on *new* content for my upcoming accessibility workshop @smashingconf.com 💃
April 13th, Amsterdam
High-level description and tickets are available already so you can grab yours now 🎟️ smashingconf.com/amsterdam-20...
#a11y
April 13th, Amsterdam
High-level description and tickets are available already so you can grab yours now 🎟️ smashingconf.com/amsterdam-20...
#a11y
The Front-End Accessibility Workshop — SmashingConf Amsterdam
Accessibility doesn't have to be hard or time-consuming. Once you learn how to think and code inclusively, writing accessible markup becomes second nature, and part of your everyday coding workflow. I...
smashingconf.com
February 10, 2026 at 11:29 AM
Officially started working on *new* content for my upcoming accessibility workshop @smashingconf.com 💃
April 13th, Amsterdam
High-level description and tickets are available already so you can grab yours now 🎟️ smashingconf.com/amsterdam-20...
#a11y
April 13th, Amsterdam
High-level description and tickets are available already so you can grab yours now 🎟️ smashingconf.com/amsterdam-20...
#a11y
Reposted by Sara Soueidan
SmashingConf Amsterdam calling! 🌷🧀
The schedule is live! Expect loads of practical talks, unplugged sessions, and a whole bunch of side events along the way.
See for yourself!
smashingconf.com/amsterdam-20...
The schedule is live! Expect loads of practical talks, unplugged sessions, and a whole bunch of side events along the way.
See for yourself!
smashingconf.com/amsterdam-20...
Schedule — SmashingConf Amsterdam
"You probably know the drill: 2 days, 10 speakers, 6 unplugged sessions. The conference will start around 9:30 am and we'll finish around 5 PM on the second conference day."
smashingconf.com
February 9, 2026 at 8:32 AM
SmashingConf Amsterdam calling! 🌷🧀
The schedule is live! Expect loads of practical talks, unplugged sessions, and a whole bunch of side events along the way.
See for yourself!
smashingconf.com/amsterdam-20...
The schedule is live! Expect loads of practical talks, unplugged sessions, and a whole bunch of side events along the way.
See for yourself!
smashingconf.com/amsterdam-20...
I want a dot-pizza (.pizza) domain name
but then I also need a project that would need a dot-pizza domain name 🍕
but then I also need a project that would need a dot-pizza domain name 🍕
February 9, 2026 at 1:10 PM
I want a dot-pizza (.pizza) domain name
but then I also need a project that would need a dot-pizza domain name 🍕
but then I also need a project that would need a dot-pizza domain name 🍕
Reposted by Sara Soueidan
corner-shape is one of those things where when you first see it, it's like "oh cool, I can make a scoop!" It's something new, which is fun, but it can be hard to think of good use cases.
But, as @cassidoo.co looks at here, it's going to open up a lot of possibilities 🙂 cassidoo.co/post/css-cor...
But, as @cassidoo.co looks at here, it's going to open up a lot of possibilities 🙂 cassidoo.co/post/css-cor...
Making interesting borders with CSS corner-shape
You can make cool beveled, rounded, notched, scooped, and elliptical borders with the new CSS corner-shape property!
cassidoo.co
February 5, 2026 at 12:49 PM
corner-shape is one of those things where when you first see it, it's like "oh cool, I can make a scoop!" It's something new, which is fun, but it can be hard to think of good use cases.
But, as @cassidoo.co looks at here, it's going to open up a lot of possibilities 🙂 cassidoo.co/post/css-cor...
But, as @cassidoo.co looks at here, it's going to open up a lot of possibilities 🙂 cassidoo.co/post/css-cor...
Reposted by Sara Soueidan
Good news everyone: Style queries are coming to Firefox, making them finally Baseline!
February 5, 2026 at 4:45 PM
Good news everyone: Style queries are coming to Firefox, making them finally Baseline!
"Exclusion happens when we solve problems using our own biases. We seek out exclusions, and use them as opportunities to create new and better experiences." ♥️
— The New Inclusive Design website from Microsoft inclusive.microsoft.design
— The New Inclusive Design website from Microsoft inclusive.microsoft.design
Microsoft Inclusive Design
Microsoft Inclusive Design is a practice that anyone who creates and manages products and services can use to build more inclusive experiences for everyone. Get the principles, guidebooks, workshop to...
inclusive.microsoft.design
February 5, 2026 at 8:32 AM
"Exclusion happens when we solve problems using our own biases. We seek out exclusions, and use them as opportunities to create new and better experiences." ♥️
— The New Inclusive Design website from Microsoft inclusive.microsoft.design
— The New Inclusive Design website from Microsoft inclusive.microsoft.design
I've looked for something like this to reference every time I've used the inclusive design graphics from Microsoft before. So glad this exists now! 🙌🏻 ✨
"a lot is going on right now" is precisely why we want more posts like this
#a11y
"a lot is going on right now" is precisely why we want more posts like this
#a11y
So I know a lot is going on right now, but I do want to share this:
I’m excited to share the launch of the new Microsoft Inclusive Design website 💙
This project is my love letter to the community and practice that’s shaped my work for nearly a decade.
inclusive.microsoft.design
1/
I’m excited to share the launch of the new Microsoft Inclusive Design website 💙
This project is my love letter to the community and practice that’s shaped my work for nearly a decade.
inclusive.microsoft.design
1/
Microsoft Inclusive Design
Microsoft Inclusive Design is a practice that anyone who creates and manages products and services can use to build more inclusive experiences for everyone. Get the principles, guidebooks, workshop to...
inclusive.microsoft.design
February 5, 2026 at 8:20 AM
I've looked for something like this to reference every time I've used the inclusive design graphics from Microsoft before. So glad this exists now! 🙌🏻 ✨
"a lot is going on right now" is precisely why we want more posts like this
#a11y
"a lot is going on right now" is precisely why we want more posts like this
#a11y
Reposted by Sara Soueidan
Look who is back. And we can’t be more excited!
🌷 smashingconf.com/amsterdam-2026
🌷 smashingconf.com/amsterdam-2026
February 5, 2026 at 4:52 AM
Look who is back. And we can’t be more excited!
🌷 smashingconf.com/amsterdam-2026
🌷 smashingconf.com/amsterdam-2026
Going through a visa application form I paused halfway to record the screen as I inspect a button used in a disclosure widget & I ended up with a good example to show in my upcoming workshop @smashingconf.com
Speaking of which! Yes, I'll be returning to SmashingConf this year ✨ Details coming soon!
Speaking of which! Yes, I'll be returning to SmashingConf this year ✨ Details coming soon!
February 4, 2026 at 2:36 PM
Going through a visa application form I paused halfway to record the screen as I inspect a button used in a disclosure widget & I ended up with a good example to show in my upcoming workshop @smashingconf.com
Speaking of which! Yes, I'll be returning to SmashingConf this year ✨ Details coming soon!
Speaking of which! Yes, I'll be returning to SmashingConf this year ✨ Details coming soon!
Reposted by Sara Soueidan
this very aptly applies to developer tools as well
January 30, 2026 at 5:20 PM
this very aptly applies to developer tools as well
Lots of US politics in my timeline recently.
What's everyone doing to dilute and/or filter topics on Bluesky?
What's everyone doing to dilute and/or filter topics on Bluesky?
January 29, 2026 at 6:58 PM
Lots of US politics in my timeline recently.
What's everyone doing to dilute and/or filter topics on Bluesky?
What's everyone doing to dilute and/or filter topics on Bluesky?
Plank update:
I haven't planked in almost 10 days. I used the instability plates today: I stopped at 7 minutes because it was enough for a start.
They didn't make the plank more challenging though. I thought they'd allow my wrists to rest but instead they strained them more.
I haven't planked in almost 10 days. I used the instability plates today: I stopped at 7 minutes because it was enough for a start.
They didn't make the plank more challenging though. I thought they'd allow my wrists to rest but instead they strained them more.
January 29, 2026 at 6:51 PM
Plank update:
I haven't planked in almost 10 days. I used the instability plates today: I stopped at 7 minutes because it was enough for a start.
They didn't make the plank more challenging though. I thought they'd allow my wrists to rest but instead they strained them more.
I haven't planked in almost 10 days. I used the instability plates today: I stopped at 7 minutes because it was enough for a start.
They didn't make the plank more challenging though. I thought they'd allow my wrists to rest but instead they strained them more.
We'll be getting multiple outlines in #CSS!!
Multiple outlines means no more hacking our way around accessible and creative outline styles with box-shadows that aren't rendered in forced-colors mode! 🙌
Finally!! This is such great news!! 🎉🥳
Multiple outlines means no more hacking our way around accessible and creative outline styles with box-shadows that aren't rendered in forced-colors mode! 🙌
Finally!! This is such great news!! 🎉🥳
🎉 Live from the CSS WG F2F: We just agreed to support multiple borders and outlines per element, comma-separated!
But we can’t decide on the order: inside out or outside in?
What feels more natural to you, A or B?
(it needs to be the same across borders and outlines or different box-sizing values)
But we can’t decide on the order: inside out or outside in?
What feels more natural to you, A or B?
(it needs to be the same across borders and outlines or different box-sizing values)
January 29, 2026 at 4:37 AM
We'll be getting multiple outlines in #CSS!!
Multiple outlines means no more hacking our way around accessible and creative outline styles with box-shadows that aren't rendered in forced-colors mode! 🙌
Finally!! This is such great news!! 🎉🥳
Multiple outlines means no more hacking our way around accessible and creative outline styles with box-shadows that aren't rendered in forced-colors mode! 🙌
Finally!! This is such great news!! 🎉🥳
Reposted by Sara Soueidan
Here's your friendly reminder that CSS selectors are global and evaluated RTL, so if you have selectors that are very broad like `.container > div` you might be impacting performance in a measurable way 🙈
Before and after profile of server switching after some selector optimizations in @discord.com
Before and after profile of server switching after some selector optimizations in @discord.com
January 27, 2026 at 4:41 PM
Here's your friendly reminder that CSS selectors are global and evaluated RTL, so if you have selectors that are very broad like `.container > div` you might be impacting performance in a measurable way 🙈
Before and after profile of server switching after some selector optimizations in @discord.com
Before and after profile of server switching after some selector optimizations in @discord.com
My account bas been unsuspended.
Thank you to whoever is responsible 🙏🏻
Thank you to whoever is responsible 🙏🏻
I've been experimenting with @bunny.net as my video hosting platform (to replace Vimeo) for a couple of days. I was away all day and just logged back into my account only to be presented with this screen. :)
Should I take this as a sign to look for alternatives? Got any recommendations?
Should I take this as a sign to look for alternatives? Got any recommendations?
January 26, 2026 at 5:14 PM
My account bas been unsuspended.
Thank you to whoever is responsible 🙏🏻
Thank you to whoever is responsible 🙏🏻
Reposted by Sara Soueidan
This is a great post about SVG's `feTurbulence` and other SVG filters, @sarasoueidan.com. Thanks a lot!
tympanus.net/codrops/2019...
tympanus.net/codrops/2019...
SVG Filter Effects: Creating Texture with <feTurbulence> | Codrops
feTurbulence is one of the most powerful SVG filter primitives. The specification defines this primitive as follows: Thi
tympanus.net
January 24, 2026 at 8:37 AM
This is a great post about SVG's `feTurbulence` and other SVG filters, @sarasoueidan.com. Thanks a lot!
tympanus.net/codrops/2019...
tympanus.net/codrops/2019...
Reposted by Sara Soueidan
It’s wild to me just how much wrong information there is out there (written by humans in the later half of 2025) about using CSS to create masonry layouts.
There is no property named `grid-lanes` (as in grid-lanes: repeat(4, 200px)). There is no `masonry-direction` property. Or `masonry` anything.
There is no property named `grid-lanes` (as in grid-lanes: repeat(4, 200px)). There is no `masonry-direction` property. Or `masonry` anything.
January 23, 2026 at 10:08 PM
It’s wild to me just how much wrong information there is out there (written by humans in the later half of 2025) about using CSS to create masonry layouts.
There is no property named `grid-lanes` (as in grid-lanes: repeat(4, 200px)). There is no `masonry-direction` property. Or `masonry` anything.
There is no property named `grid-lanes` (as in grid-lanes: repeat(4, 200px)). There is no `masonry-direction` property. Or `masonry` anything.
I've been experimenting with @bunny.net as my video hosting platform (to replace Vimeo) for a couple of days. I was away all day and just logged back into my account only to be presented with this screen. :)
Should I take this as a sign to look for alternatives? Got any recommendations?
Should I take this as a sign to look for alternatives? Got any recommendations?
January 23, 2026 at 3:59 PM
I've been experimenting with @bunny.net as my video hosting platform (to replace Vimeo) for a couple of days. I was away all day and just logged back into my account only to be presented with this screen. :)
Should I take this as a sign to look for alternatives? Got any recommendations?
Should I take this as a sign to look for alternatives? Got any recommendations?
Reposted by Sara Soueidan
Is there a way to detect if the scrollbar gutter is present or absent? There is no media/container query, I believe, and I thought those newfangled svw units would help, but they don''t.
January 23, 2026 at 12:51 PM
Is there a way to detect if the scrollbar gutter is present or absent? There is no media/container query, I believe, and I thought those newfangled svw units would help, but they don''t.
I have a good use case for the new #CSS grid-lanes / masonry layout. ✨
I've been thinking about a horizontal masonry layout for a list of images and this is the perfect opportunity to play with the new property values and use them as an enhancement.
Will report back with thoughts/findings/etc.
I've been thinking about a horizontal masonry layout for a list of images and this is the perfect opportunity to play with the new property values and use them as an enhancement.
Will report back with thoughts/findings/etc.
January 23, 2026 at 1:28 PM
I have a good use case for the new #CSS grid-lanes / masonry layout. ✨
I've been thinking about a horizontal masonry layout for a list of images and this is the perfect opportunity to play with the new property values and use them as an enhancement.
Will report back with thoughts/findings/etc.
I've been thinking about a horizontal masonry layout for a list of images and this is the perfect opportunity to play with the new property values and use them as an enhancement.
Will report back with thoughts/findings/etc.