Cutting Edge CSS: What Took Hours And Lots Of Code Now Takes MINUTES!
Вставка
- Опубліковано 4 лип 2024
- Today we explore three exciting new CSS features now available in all browsers that will make our lives so much easier!
We will cover:
- CSS Popover API: Learn how to create content overlays, perfect for tooltips and hamburger menus, with no JavaScript needed and only 3 attributes to add.
- @starting-style: Discover how to add initial styles for elements as they are added to the document, enabling smooth animations.
- transition-behavior: allow-discrete: Allowing us to finally make animations from display: none to display: block!
Watch now to see how we combine these features to build a beautiful and accessible hamburger navigation menu.
LINKS:
Code and live playground: www.frontend.fyi/v/new-css-fe...
MORE?
📈 If you want more content like this, become a Frontend FYI PRO and get access to my current and all future courses for a one-time purchase: fe.fyi/pro
📺 If you want to see more videos like these, check out my website: fe.fyi/videos
✉️ Subscribe to my newsletter: fe.fyi/newsletter
MY SOCIALS
🌍 My website - www.frontend.fyi
🐦 Twitter - / jeroenreumkens
📸 Instagram - / jeroenreumkens
💼 Linkedin - / jeroenreumkens
COLLAB
Want to work together on creating content? Feel free to reach out via jeroen [at] frontend.fyi
WHO AM I?
If you're new to this channel - Hey, my name is Jeroen. A frontend engineer with almost 15 years of professional experience, who in 2023 decided to stop teaching only his close collegeas to start teaching the whole world. What I teach some call Design Engineering, I like to call it the Craft of Frontend.
TIMESTAMPS:
00:00 - Intro
00:42 - Take a look at starting point
02:10 - Popover Attribute
04:35 - What this popover does for us
07:15 - Animating the popover (from display none!)
08:45 - Adding Allow-Discrete
09:30 - Adding @ starting-style to finish fade animation
11:00 - Make our hamburger look nicer, plus many more animations
16:35 - Outro
#css #webdevelopment #frontend - Наука та технологія
@starting-style is a game changer wooo thanks for making a vid on this
Thanks for commenting! Glad you liked the video!
Thanks for this video
could you make a video on CSS trig functions
I've seen ana tudor doing great things on codepen like her " No SVG, no image, CSS-only fluid slider with input"
I ❤ this channel … thank you so much for sharing and teaching us ✌️
Glad you enjoy it! Thanks for sharing this with me too! ❤️
It's such a simple but awesome feature. It's always such a pain to implement this in jsx especially if you want animations
I really like it! And that fact that is so new but we can use it everywhere already is even more amazing. I love the direction CSS is heading into!
This is so great I've been looking for a developer UA-camr who also teaches accessibility
Nice!! Happy you like my content 🙏 Always feel free to share ideas for topic you’d like to see content of.
this is just amazing
thanks bro
Glad you liked it!
Nice!
What vscode theme are you using? I like the font also. I would like to change mine :)
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
@@frontendfyi thank you 😊💃
What a great video!
Thank you!!
Liked and subscribed!!!
Thank you! 🙏
What VSCode theme are you using, Jeroen?
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
What theme are you using for vs code?
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
Ahhhh yesss, eindelijk transitions van display:none naar flex! Neem aan dat dit altijd gebruikt moet worden i.p.v. opacity:0; visibility:hidden toch?
In dit geval combineer je het met bijv opacity 0 om een fade-in te krijgen. Display none en block hebben zelf geen waardes waartussen ze geanimeerd kunnen worden. Dus als je animeert naar display none, zal de browser op het laatste moment de property naar none zetten. Om dan een animatie te zien moet je zelf nog opacity animeren.
Eventually we will get rid of all these UI libraries. Hopefully. Thanks for the great content😊
I love the direction css is heading into. Doing these things with plain css definitely is the way! Glad you like the content 😌
bro something lol i found when u write this : popover=" " i didnt an :
///
but i use it anyways cause i can make some error
Is there a difference from the dialog element, other than being pure css.
The specs make a distinction which they call “modal” or”non-modal”. A dialog is a modal pop-up, which means that in order to dismiss that, the user _has_ to make an important choice in the dialog before it can be dismissed.
The popover is non-dialog, meaning it does not have that restriction. This is also why for example the popover auto closes when you click the backdrop vs a dialog which you need to run a JS method for this to happen.
There’s a lot of overlap between the two elements and you can definitely create a non modal with a dialog too. But this is what the docs say is their intended behavior.
See here too: developer.mozilla.org/en-US/docs/Web/API/Popover_API#concepts_and_usage
bro bro make a video about :has() :is() and so on. come on bro u re the best
10/10
So kind!! Thanks 🙏
Which theme?
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
Can somebody name his font????????
The font is called Recursive Mono Casual Static