Links
![Old Dogs, new CSS Tricks](https://dxj7eshgz03ln.cloudfront.net/production/link/image/956860/original_ratio_extra_large_22f75ed1-7287-4333-9544-5c241000375f.jpg)
Old Dogs, new CSS Tricks
A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains.
Animating the Dialog Element
It’s honestly quite amazing how little CSS is required to make this happen. Tools like
<dialog>
,overlay
andtransition-behavior
have taken what was once an incredibly complicated task and reduced it to just a few lines of CSS. Dialogs are easier than they’ve ever been, and as long as we don’t get tempted to over use them, that’s cause for celebration to me.
Custom Top and Bottom CSS Container Masks
Here’s the use case: You have a design where the top and/or bottom section of a website has a custom shape defining its transition to the container before and/or after it. Essentially, it’s a shape mask on the top or bottom of the container with the actual content in the section sandwiched in-between.
New Magic for Animations in CSS
There are two new features coming to CSS that will make it much easier to further avoid JavaScript when implementing animations: Animating to and from
display: none;
for the sake of enter/exit animations, and animating to and from the intrinsic size of an element (such asheight: auto;
).
How to Make a CSS Timer
Let's look at using CSS as an efficient alternative to JavaScript for creating simple timers. We'll use modern CSS properties like
@property
,@keyframes
, and pseudo-elements withcounter()
values.
Videos
![Don't Fear the Cascade](https://dxj7eshgz03ln.cloudfront.net/production/link/image/956859/original_ratio_extra_large_714315e1-e5c7-4bdd-93eb-c8cfeb6363bd.jpg)
Don't Fear the Cascade
In this talk, Mayank will teach the audience how to make sense of the cascade, clear up some common misconceptions (e.g. shadow DOM vs host context styles), and ultimately offer practical advice on how to make best use of the cascade.
They will show off some newer game-changing CSS features (like
:where
, cascade layers, and@scope
) that enable us to write styles with confidence and intention. They may also sprinkle in some tips on how these new features interact with current workflows, including frameworks, build tools, browser devtools, and IDEs.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.