@nomster.bsky.social @foolip.org and @dbaron.org presented these at W3C TPAC annual meeting last week
More details here:
github.com/WICG/declara...
1/6 🧵
@nomster.bsky.social @foolip.org and @dbaron.org presented these at W3C TPAC annual meeting last week
More details here:
github.com/WICG/declara...
1/6 🧵
const [loading, loading] = useState(false);
<div style={backgroundColor: loading ? "yellow" : "green"}>
But this, as well as utility classes, means that your scripts are bloated with style concerns.
const [loading, loading] = useState(false);
<div style={backgroundColor: loading ? "yellow" : "green"}>
But this, as well as utility classes, means that your scripts are bloated with style concerns.
Please let us know! We have a meeting to discuss this next Wednesday (at TPAC) and would love to hear your stories, especially if they impacted users.
cc @lea.verou.me
Please let us know! We have a meeting to discuss this next Wednesday (at TPAC) and would love to hear your stories, especially if they impacted users.
cc @lea.verou.me
This method is a pretty big deal as it allows you to move elements around the DOM while preserving their state.
This method is a pretty big deal as it allows you to move elements around the DOM while preserving their state.
What Can We Actually Do With corner-shape? | CSS-Tricks share.google/sTQD2Jh8vvzE...
What Can We Actually Do With corner-shape? | CSS-Tricks share.google/sTQD2Jh8vvzE...
developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...
A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM.
This unlocks things like concurrent transitions and prevents layering issues.
developer.chrome.com/blog/scoped-...
A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM.
This unlocks things like concurrent transitions and prevents layering issues.
developer.chrome.com/blog/scoped-...
Direct CSS reflection of URL state, snappy pending/optimistic UI, URL-to-scroll-snap binding, and some basic same-document navigation use cases, with JS being only an option.
github.com/WICG/declara...
Inviting feedback!
Direct CSS reflection of URL state, snappy pending/optimistic UI, URL-to-scroll-snap binding, and some basic same-document navigation use cases, with JS being only an option.
github.com/WICG/declara...
Inviting feedback!
Do you work on a UI library or framework? I want to hear from you and your experiences/needs. Message me!
Do you work on a UI library or framework? I want to hear from you and your experiences/needs. Message me!
Perhaps we should embrace that IDs being unique is a lost battle.
Perhaps we should embrace that IDs being unique is a lost battle.
We can't go over it, we can't go under it, we've got to go through it.
We can't go over it, we can't go under it, we've got to go through it.
I am sure there are lots but looking for inspiration of where to look.
I am sure there are lots but looking for inspiration of where to look.
I don't know how to flatten these thoughts to a hot take, so just sharing this for now.
I don't know how to flatten these thoughts to a hot take, so just sharing this for now.
github.com/wix-incubato...
github.com/wix-incubato...
Closing this series with a fourth part where I am exploring two more shape() commands.
This powerful feature will soon be available in all the browsers so don't miss the opportunity to learn about it and master it!
css-tricks.com/better-css-s...
Closing this series with a fourth part where I am exploring two more shape() commands.
This powerful feature will soon be available in all the browsers so don't miss the opportunity to learn about it and master it!
A deep dive into the new property, and a little dig into the math behind it, with lots of cool examples, but they only work on Chrome 139+.
🔗 Check it out on @frontendmasters.com: frontendmasters.com/blog/underst...
A deep dive into the new property, and a little dig into the math behind it, with lots of cool examples, but they only work on Chrome 139+.
🔗 Check it out on @frontendmasters.com: frontendmasters.com/blog/underst...
Guess who's writing again about CSS shapes? 🫣
This time, I am exploring the corner-shape property. A new tool to easily draw shapes.
frontendmasters.com/blog/drawing...
⚠️ No browser support yet but a good opportunity to know about this powerful feature and get ready for it!
Guess who's writing again about CSS shapes? 🫣
This time, I am exploring the corner-shape property. A new tool to easily draw shapes.
frontendmasters.com/blog/drawing...
⚠️ No browser support yet but a good opportunity to know about this powerful feature and get ready for it!
Save this code for the future. It will be the easiest way to create hexagon shapes and ... 🥁🥁🥁 ... it works with border! 🤩
css-tip.com/hexagon/
The magic? The new corner-shape property!
Save this code for the future. It will be the easiest way to create hexagon shapes and ... 🥁🥁🥁 ... it works with border! 🤩
css-tip.com/hexagon/
The magic? The new corner-shape property!
@css-only.dev with a great explanation and examples, as always…
css-tricks.com/better-css-s...
@css-only.dev with a great explanation and examples, as always…
css-tricks.com/better-css-s...
The fun continues using shape()!
For this second part, we are drawing more CSS shapes while exploring the arc command. It's a very tricky command if you don't fully understand it. 👇
css-tricks.com/better-css-s...
The fun continues using shape()!
For this second part, we are drawing more CSS shapes while exploring the arc command. It's a very tricky command if you don't fully understand it. 👇
Got an old "modal" design? Now might be the time to upgrade it to a , as we can do both open & close animations now.
Got an old "modal" design? Now might be the time to upgrade it to a , as we can do both open & close animations now.