📝 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.

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.

📝 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.

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...

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...

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.

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

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

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.

📝 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 🤩

📝 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 🤩

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" 😅

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)

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)

📝 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. 👇

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.

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 👇

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 👇

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...

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...

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 👍

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 👍

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! 🫣

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! 🫣

“Full-Bleed Layout with Modern CSS” by @css-only.dev frontendmasters.com/blog/full-bl...

💡 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/

💡 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/

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 👇

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...

📝 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. 👇

A great run-down of what corner-shape is capable of. You’ll be surprised at what can be achieved! css-tip.com/corner-shape/

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'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.

Y'all have no idea how moch code this is going to replace (assuming we drop the idea that we're still shipping for IE9).

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! 🪄

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! 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

So slick… 🧈

You can toggle the "debug mode" in the demo to better understand what's happening. 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

Aaaaaand it's going out. 🫣 As always, you can read Web Weekly online, too. 👇 www.stefanjudis.com/blog/web-wee...

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.

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.

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.

Do you have any smaller/under-the-radar CSS sites/people that you follow? Looking for blogs, YouTube channels, or anyone who just shares cool CSS stuff. Reply if you know any, and look at the replies for new people/sites to follow 😊

For details about the how, check out my newest article: Inset Shadows Directly on `img` Elements frontendmasters.com/blog/inset-s... #SVG #filter #CSS

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!

I had to try it as well! css-tip.com/3d-box/ A perfect example to illustrate modern CSS features such as corner-shape, if(), @​property, math functions, etc.

How it looks when you program with modern CSS 😎

I had to try it as well! css-tip.com/3d-box/ A perfect example to illustrate modern CSS features such as corner-shape, if(), @​property, math functions, etc.