CSS by T. Afif
LightNews LightNews
banner
css-only.dev
CSS by T. Afif
@css-only.dev
6.2K followers 78 following 590 posts
CSS stuff by Temani Afif (https://support.temani-afif.com)

💡 https://css-tip.com
🧩 https://css-shape.com
💫 https://css-loaders.com
📝 https://css-articles.com
⚙️ https://css-generators.com
🧱 https://css-pattern.com
🎨 https://css-only.art
Posts Replies Media Videos
Pinned
css-only.dev
CSS by T. Afif @css-only.dev · Apr 15
If you don't know, my CSS Tip website is open to advertisers. Don't miss the opportunity to promote your product and support my work!

Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month.

css-tip.com/advertise/
Advertise with CSS Tip
Promote your product with a personalised and attractive ad starting from 150$/month.
css-tip.com
Reposted by CSS by T. Afif
frontendmasters.com
Perfectly Pointed Tooltips: To The Corners

With our foundation in positioning and flipping tooltips with anchors, and making pointer tails, we're going to get extra tricky and point them diagonally.
Perfectly Pointed Tooltips: To The Corners
With our foundation in positioning and flipping tooltips with anchors, and making pointer tails, we're going to get extra tricky and point them diagonally.
frontendmasters.com
November 10, 2025 at 3:39 PM
css-only.dev
📝 New CSS Article!

Ready for more Anchor Positioning? The third part is live!

frontendmasters.com/blog/perfect...

With this last part, you have a nice collection of CSS tricks to easily create different tooltips with dynamic positions.
November 10, 2025 at 3:25 PM
Reposted by CSS by T. Afif
cssweekly.com
Frontend News #17
⛔️ Why Pseudo-Elements Don’t Work With :is(),
🎨 The Advantages of OKLCH
🕹️ Full 3D CSS Game

Featuring @css-only.dev, @en.sitnik.ru, @davatron5000.bsky.social, @ivorjetski.bsky.social. 🙏

cssw.io/frontend-new...
Frontend News #17: Why :is(::before, ::after) Doesn’t Work, Why You Should Switch to OKLCH, & More
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
cssw.io
November 9, 2025 at 9:21 PM
css-only.dev
Why have a focus ring per element when you can have one focus ring for all the elements?

Meet the Universal Focus Ring! 💫

css-tip.com/universal-fo...

A funny experiment using Anchor Positioning (I repeat, it's a demo for fun)
November 7, 2025 at 1:41 PM
Reposted by CSS by T. Afif
css-only.dev
📝 New CSS Article!

Ready for the second part? I am still exploring the magic we can do using Anchor Positioning.

frontendmasters.com/blog/perfect...

A perfect use case of how few lines of CSS can replace a bunch of complex JavaScript code.
November 3, 2025 at 7:15 PM
Reposted by CSS by T. Afif
frontendmasters.com
Perfectly Pointed Tooltips: All Four Sides

Tooltips are a natural fit for the abilities of Anchor Positioning, which can help place them on *any* side or corner. It does make dealing with the pointer extra tricky though.
Perfectly Pointed Tooltips: All Four Sides
Tooltips are a natural fit for the abilities of Anchor Positioning, which can help place them on *any* side or corner. It does make dealing with the pointer extra tricky though.
frontendmasters.com
November 4, 2025 at 8:39 AM
css-only.dev
📝 New CSS Article!

Ready for the second part? I am still exploring the magic we can do using Anchor Positioning.

frontendmasters.com/blog/perfect...

A perfect use case of how few lines of CSS can replace a bunch of complex JavaScript code.
November 3, 2025 at 7:15 PM
Reposted by CSS by T. Afif
css-only.dev
And if you are up for some cool CSS hacks, you can see my tricks for updating the arrow direction without container queries! 🪄

I made it for the 3 common patterns:

css-tip.com/tooltip-anch...
css-tip.com/tooltip-anch...
css-tip.com/tooltip-anch...
October 30, 2025 at 6:50 PM
css-only.dev
And if you are up for some cool CSS hacks, you can see my tricks for updating the arrow direction without container queries! 🪄

I made it for the 3 common patterns:

css-tip.com/tooltip-anch...
css-tip.com/tooltip-anch...
css-tip.com/tooltip-anch...
October 30, 2025 at 6:50 PM
css-only.dev
It looks like chrome is correct based on the Spec: www.w3.org/TR/css-shape...

There is a figure showing how margin should behave with border-radius and its curved.
Screenshot taken from the provided link.
October 29, 2025 at 9:18 PM
Reposted by CSS by T. Afif
css-only.dev
Let's suppose you have an element with margin and border-radius. You apply "clip-path: margin-box". Should the clipping follow the border-radius or not? In other words, should the margin be affected by border-radius, like padding, border, etc? 🤔

Chrome said Yes

Firefox said No
The following CSS code: .box { margin: 20px; border-radius: 50px; clip-path: margin-box; box-shadow: 0 0 0 999px } Showing the difference between Chrome and Firefox
October 29, 2025 at 12:03 PM
css-only.dev
Let's suppose you have an element with margin and border-radius. You apply "clip-path: margin-box". Should the clipping follow the border-radius or not? In other words, should the margin be affected by border-radius, like padding, border, etc? 🤔

Chrome said Yes

Firefox said No
The following CSS code: .box { margin: 20px; border-radius: 50px; clip-path: margin-box; box-shadow: 0 0 0 999px } Showing the difference between Chrome and Firefox
October 29, 2025 at 12:03 PM
Reposted by CSS by T. Afif
frontendmasters.com
Perfectly Pointed Tooltips: A Foundation

The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.
Perfectly Pointed Tooltips: A Foundation
The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.
frontendmasters.com
October 29, 2025 at 8:39 AM
Reposted by CSS by T. Afif
css-only.dev
📝 New CSS Article!

Do you want to explore the future of CSS? I have prepared a series of articles around Anchor Positioning and Tooltips. The first one is live!

frontendmasters.com/blog/perfect...

Don't miss the opportunity to master the CSS skills of tomorrow 🤩
October 28, 2025 at 6:48 PM
css-only.dev
📝 New CSS Article!

Do you want to explore the future of CSS? I have prepared a series of articles around Anchor Positioning and Tooltips. The first one is live!

frontendmasters.com/blog/perfect...

Don't miss the opportunity to master the CSS skills of tomorrow 🤩
October 28, 2025 at 6:48 PM
css-only.dev
It's interesting to see how many people think that CSS has become a new powerful language since it introduced an if() syntax (Not because of what it does, but because it's named "if").

We missed the opportunity to have a powerful language since the beginning if media query was defined using "if" 😅
How I imagine media query written with an if syntax.
October 27, 2025 at 2:34 PM
Reposted by CSS by T. Afif
css-only.dev
Getting the screen dimension with a simple calc? Yes, it's possible!

css-tip.com/screen-dimen...

We are still waiting for Firefox to join the game, and the code below will become the favorite one of many developers!

(Until then, there is another method with better support)
The following CSS code: :root { --w: calc(100vw/1px); --h: calc(100vh/1px); }
October 24, 2025 at 7:30 PM
css-only.dev
Getting the screen dimension with a simple calc? Yes, it's possible!

css-tip.com/screen-dimen...

We are still waiting for Firefox to join the game, and the code below will become the favorite one of many developers!

(Until then, there is another method with better support)
The following CSS code: :root { --w: calc(100vw/1px); --h: calc(100vh/1px); }
October 24, 2025 at 7:30 PM
Reposted by CSS by T. Afif
css-only.dev
📝 New CSS Article!

Do you know the linear() function? It's one of those underrated features that can do a lot of magic!

Combined with modern CSS, you can use it to create complex animations with a few lines of code.

Don't miss the opportunity to learn about it. 👇
css-tricks.bsky.social CSS-Tricks* @css-tricks.bsky.social · 26d
Let’s suppose you have some number of elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!

@css-only.dev explains and demonstrates it so well.

css-tricks.com/sequential-l...
Sequential linear() Animation With N Elements | CSS-Tricks
Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
css-tricks.com
October 15, 2025 at 2:14 PM
Reposted by CSS by T. Afif
bram.us
There’s a new type of CSS scroll-state query coming: “scrolled”.

This one remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.
October 22, 2025 at 4:48 PM
Reposted by CSS by T. Afif
css-only.dev
Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most.

css-tip.com/position-area/

Example with position-area: top 👇
October 22, 2025 at 11:50 AM
css-only.dev
Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most.

css-tip.com/position-area/

Example with position-area: top 👇
October 22, 2025 at 11:50 AM
css-only.dev
I opened a Github issue about a behavior I couldn't explain (related to Anchor Positioning)

I am not sure if it's an implementation bug or an intended behavior.

github.com/w3c/csswg-dr...
[css-anchor-position-1] Overflow behavior when no containing block is defined · Issue #12999 · w3c/csswg-drafts
I am going to refer to the following demo where you can drag the anchor element (testing in Chrome) : https://codepen.io/t_afif/pen/jEWzNrb/c09d5d9dad95028e28a16e90895dabc9 When I define position: ...
github.com
October 21, 2025 at 8:37 PM
Reposted by CSS by T. Afif
ishadeed.com
I needed a quick way to generate conditional CSS with :has() and quantity queries, and this tool by @css-only.dev is so helpful.

css-tip.com/quantity-que...
A screenshot from the tool titled "Quantity queries using has() selector" showing an input field with ".container" value, and a select menu with options like "Exactly, At Least, At most, etc" items.
October 21, 2025 at 5:40 AM
Reposted by CSS by T. Afif
css-only.dev
Ready for another crazy demo? This time, I am considering the corner positions. Same HTML code and still 100% modern CSS!

Yes, Anchor Positioning is very cool. 🤩

css-tip.com/tooltip-anch...

The code is a bit hard to decipher, but I am working on articles to explain all the magic 👍
October 20, 2025 at 11:47 AM