CSS by T. Afif
@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)
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
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)
Meet the Universal Focus Ring! 💫
css-tip.com/universal-fo...
A funny experiment using Anchor Positioning (I repeat, it's a demo for fun)
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...
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
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...
I made it for the 3 common patterns:
css-tip.com/tooltip-anch...
css-tip.com/tooltip-anch...
css-tip.com/tooltip-anch...
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.
There is a figure showing how margin should behave with border-radius and its curved.
October 29, 2025 at 9:18 PM
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.
There is a figure showing how margin should behave with border-radius and its curved.
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
Chrome said Yes
Firefox said No
October 29, 2025 at 12:03 PM
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
Chrome said Yes
Firefox said No
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" 😅
We missed the opportunity to have a powerful language since the beginning if media query was defined using "if" 😅
October 27, 2025 at 2:34 PM
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" 😅
We missed the opportunity to have a powerful language since the beginning if media query was defined using "if" 😅
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)
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)
October 24, 2025 at 7:30 PM
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)
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)
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 👇
css-tip.com/position-area/
Example with position-area: top 👇
October 22, 2025 at 11:50 AM
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 👇
css-tip.com/position-area/
Example with position-area: top 👇
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 👍
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
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 👍
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 👍
Another inaccuracy I just found in the anchor-size() definition.
"block" and "inline" don't consider the length of the containing block but the length of the anchor element exactly like the "self-*" values. The difference is the writing mode of either the element or its containing block.
"block" and "inline" don't consider the length of the containing block but the length of the anchor element exactly like the "self-*" values. The difference is the writing mode of either the element or its containing block.
October 19, 2025 at 11:45 AM
Another inaccuracy I just found in the anchor-size() definition.
"block" and "inline" don't consider the length of the containing block but the length of the anchor element exactly like the "self-*" values. The difference is the writing mode of either the element or its containing block.
"block" and "inline" don't consider the length of the containing block but the length of the anchor element exactly like the "self-*" values. The difference is the writing mode of either the element or its containing block.
Not a specific pattern but sometimes people get confused about something and it turned out it was a wrong information on the MDN. "wrong" is a big word, it's more small inaccuracy that you can only notice if you already know the Spec.
A recent example from position-area
A recent example from position-area
October 18, 2025 at 8:36 PM
Not a specific pattern but sometimes people get confused about something and it turned out it was a wrong information on the MDN. "wrong" is a big word, it's more small inaccuracy that you can only notice if you already know the Spec.
A recent example from position-area
A recent example from position-area
I said 36 positions, but in reality, they are even more because within each position, we can control the alignment of the element using justify-self and align-self.
36 positions, 2 axes, 4 alignment values per axis. I let you do the count! 🫣
36 positions, 2 axes, 4 alignment values per axis. I let you do the count! 🫣
October 17, 2025 at 10:37 AM
I said 36 positions, but in reality, they are even more because within each position, we can control the alignment of the element using justify-self and align-self.
36 positions, 2 axes, 4 alignment values per axis. I let you do the count! 🫣
36 positions, 2 axes, 4 alignment values per axis. I let you do the count! 🫣
💡 CSS Tip!
In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀
No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.
css-tip.com/position-area/
In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀
No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.
css-tip.com/position-area/
October 16, 2025 at 10:07 AM
💡 CSS Tip!
In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀
No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.
css-tip.com/position-area/
In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀
No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.
css-tip.com/position-area/
My CSS ingredients for a perfect recipe 📜
1. shape()
2. corner-shape
3. anchor positioning
4. scroll-driven animations
5. sibling-*() functions
6. background-clip: border-area
7. attr()
8. justify-self/items outside flex/grid
9. stretch
10. better background-clip: text
Go make your list 👇
1. shape()
2. corner-shape
3. anchor positioning
4. scroll-driven animations
5. sibling-*() functions
6. background-clip: border-area
7. attr()
8. justify-self/items outside flex/grid
9. stretch
10. better background-clip: text
Go make your list 👇
October 15, 2025 at 8:19 PM
My CSS ingredients for a perfect recipe 📜
1. shape()
2. corner-shape
3. anchor positioning
4. scroll-driven animations
5. sibling-*() functions
6. background-clip: border-area
7. attr()
8. justify-self/items outside flex/grid
9. stretch
10. better background-clip: text
Go make your list 👇
1. shape()
2. corner-shape
3. anchor positioning
4. scroll-driven animations
5. sibling-*() functions
6. background-clip: border-area
7. attr()
8. justify-self/items outside flex/grid
9. stretch
10. better background-clip: text
Go make your list 👇
What tool did you use to draw the graphic?
I always struggle with curves and this one looks good (I hope easy to use as well).
I always struggle with curves and this one looks good (I hope easy to use as well).
October 14, 2025 at 7:25 PM
What tool did you use to draw the graphic?
I always struggle with curves and this one looks good (I hope easy to use as well).
I always struggle with curves and this one looks good (I hope easy to use as well).
It's also easy to debug using @developer.chrome.com
It shows you which fallback position is used by crossing out all the others. When all of them are crossed out, the position defined on the element is the one used.
It shows you which fallback position is used by crossing out all the others. When all of them are crossed out, the position defined on the element is the one used.
October 14, 2025 at 9:55 AM
It's also easy to debug using @developer.chrome.com
It shows you which fallback position is used by crossing out all the others. When all of them are crossed out, the position defined on the element is the one used.
It shows you which fallback position is used by crossing out all the others. When all of them are crossed out, the position defined on the element is the one used.
Do you want to see more cool stuff using modern CSS? This time, the tooltip will consider all four positions, and the tail will always point to the anchor. 👀
css-tip.com/tooltip-anch...
Still 100% CSS magic! 🪄
css-tip.com/tooltip-anch...
Still 100% CSS magic! 🪄
October 13, 2025 at 9:54 AM
Do you want to see more cool stuff using modern CSS? This time, the tooltip will consider all four positions, and the tail will always point to the anchor. 👀
css-tip.com/tooltip-anch...
Still 100% CSS magic! 🪄
css-tip.com/tooltip-anch...
Still 100% CSS magic! 🪄
💡 CSS Tip!
A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.
css-tip.com/conditional-...
cc @ishadeed.com @una.im
A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.
css-tip.com/conditional-...
cc @ishadeed.com @una.im
October 10, 2025 at 10:36 AM
💡 CSS Tip!
A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.
css-tip.com/conditional-...
cc @ishadeed.com @una.im
A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.
css-tip.com/conditional-...
cc @ishadeed.com @una.im
You can toggle the "debug mode" in the demo to better understand what's happening.
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
October 7, 2025 at 9:29 AM
You can toggle the "debug mode" in the demo to better understand what's happening.
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
Here is my idea with less of code
css-tip.com/tooltip-anch...
The trick is to play with the margin property to show/hide the arrows.
cc @una.im @bram.us
css-tip.com/tooltip-anch...
The trick is to play with the margin property to show/hide the arrows.
cc @una.im @bram.us
October 6, 2025 at 3:33 PM
Here is my idea with less of code
css-tip.com/tooltip-anch...
The trick is to play with the margin property to show/hide the arrows.
cc @una.im @bram.us
css-tip.com/tooltip-anch...
The trick is to play with the margin property to show/hide the arrows.
cc @una.im @bram.us
In CSS, we have Frequency Units (Hertz), and since unit division is now allowed, I expect the below to work.
It doesn't work. Maybe too much for CSS, or should it be allowed? 🤔
In case you are wondering, Hertz is the inverse of Seconds, so the below is mathematically valid to calculate a duration.
It doesn't work. Maybe too much for CSS, or should it be allowed? 🤔
In case you are wondering, Hertz is the inverse of Seconds, so the below is mathematically valid to calculate a duration.
October 3, 2025 at 9:47 AM
In CSS, we have Frequency Units (Hertz), and since unit division is now allowed, I expect the below to work.
It doesn't work. Maybe too much for CSS, or should it be allowed? 🤔
In case you are wondering, Hertz is the inverse of Seconds, so the below is mathematically valid to calculate a duration.
It doesn't work. Maybe too much for CSS, or should it be allowed? 🤔
In case you are wondering, Hertz is the inverse of Seconds, so the below is mathematically valid to calculate a duration.
A dynamic way to emulate a range selection using if() and sibling-index()
css-tip.com/range-select...
What's the point? It can be useful if you want to update the range on the fly by controlling two variables. Something you cannot do with a classic selector.
css-tip.com/range-select...
What's the point? It can be useful if you want to update the range on the fly by controlling two variables. Something you cannot do with a classic selector.
October 2, 2025 at 3:03 PM
A dynamic way to emulate a range selection using if() and sibling-index()
css-tip.com/range-select...
What's the point? It can be useful if you want to update the range on the fly by controlling two variables. Something you cannot do with a classic selector.
css-tip.com/range-select...
What's the point? It can be useful if you want to update the range on the fly by controlling two variables. Something you cannot do with a classic selector.
another solution with better support but I think chrome only as well: codepen.io/t_afif/pen/Y...
the formula is ((Y +1) - i) and (i - (X + 1))
the formula is ((Y +1) - i) and (i - (X + 1))
October 2, 2025 at 11:05 AM
another solution with better support but I think chrome only as well: codepen.io/t_afif/pen/Y...
the formula is ((Y +1) - i) and (i - (X + 1))
the formula is ((Y +1) - i) and (i - (X + 1))
Do you have a product/website to promote? I am offering a 20% discount if you book a slot for the last 3 months of this year!
css-tip.com/advertise/
Hurry up! Don't miss the opportunity to reach a wide audience of web developers!
css-tip.com/advertise/
Hurry up! Don't miss the opportunity to reach a wide audience of web developers!
September 30, 2025 at 8:07 PM
Do you have a product/website to promote? I am offering a 20% discount if you book a slot for the last 3 months of this year!
css-tip.com/advertise/
Hurry up! Don't miss the opportunity to reach a wide audience of web developers!
css-tip.com/advertise/
Hurry up! Don't miss the opportunity to reach a wide audience of web developers!
How it looks when you program with modern CSS 😎
September 29, 2025 at 10:17 AM
How it looks when you program with modern CSS 😎