We can now transition to and from display: none

Summary

This script explores the intricacies of animating elements like modals and popovers in CSS, traditionally a complex task. The speaker demonstrates how recent advancements in CSS, such as keyframes and transitions, simplify this process. They address the challenges of animating properties like 'display' and introduce new CSS properties like 'transition-behavior' and 'start-style' to create smoother and more controlled animations. The script also highlights the importance of understanding CSS fundamentals for effective web development and touches on browser support for these features.

Takeaways

• 😀 CSS animations and transitions can now handle complex behaviors like fading in and out, which were previously challenging without JavaScript.
• 🎨 The speaker demonstrates animating a modal dialog box, showcasing how to use CSS for both opening and closing animations without relying on JavaScript.
• 🔑 The CSS `animation` property is used for creating keyframes, allowing for smooth transitions between states, like opacity changes.
• 🚫 A common issue arises when trying to animate properties considered 'discrete', such as `display: none`, which do not transition smoothly.
• 🆕 CSS properties like `transition-property`, `transition-duration`, and `transition-behavior` are introduced to handle smooth transitions, including those with discrete animations.
• 🛠 The `@apply` rule in CSS, which allows for nesting styles, simplifies the process of applying multiple styles to an element, but cannot be used within pseudo-elements.
• 🌐 Browser support for these new CSS features is improving but is not yet universal, with Chrome currently leading in support for these advanced features.
• 🌈 The script covers how to create visually appealing effects, such as gradients for backdrops, to enhance the user experience with modal dialogs.
• 📚 The importance of understanding CSS fundamentals is highlighted to overcome frustrations and write more confident code, with a mention of a course that could provide deeper insights.
• 🔄 The concept of 'starting style' is introduced to define the initial state of an animation, which is crucial for creating bidirectional transitions.
• 💻 The speaker emphasizes the use of progressive enhancement in web development, ensuring that all users have a functional experience while those with newer browsers get an enhanced visual experience.

Q & A

What challenges did the speaker originally face when trying to animate elements like modals or popovers?

The speaker originally faced difficulties with animating elements such as modals or popovers, finding it harder than expected. They had to resort to using JavaScript, event listeners, or set timeouts to manage the transitions from 'display none' to 'display block', 'grid', 'flex', etc.

How has the introduction of CSS animations and transitions by the CSS working group simplified the process of animating elements?

The introduction of CSS animations and transitions has made it much simpler to animate elements. It allows for effects like fading in and out and sliding without the need for JavaScript, by just using CSS properties and keyframes or transitions.

What is the default state of the 'dialog' element when it is not being displayed?

The default state of the 'dialog' element when it is not being displayed is 'display: none', which is a user agent style that gets toggled to 'display block' when the element is clicked on.

Why is it recommended to declare 'display: none' and 'display: block' even if they come from the user agent styles?

It is recommended to declare 'display: none' and 'display: block' explicitly because it makes it clear what the closed and open states of the element are. This can be particularly important when animating or working with these properties where explicit declarations may be necessary.

What is a 'backdrop' in the context of modals and how is it typically handled in terms of display?

A 'backdrop' in the context of modals is an element that appears behind the modal to provide a visual separation from the rest of the page content. For simplicity, the speaker initially sets the backdrop to 'display: none', but it is planned to animate it later in the presentation.

What is the purpose of keyframes in CSS animations?

Keyframes in CSS animations define the different stages of an animation. They allow developers to specify the starting and ending points (as well as any intermediate steps) of an animation, making it easier to create complex animations with CSS alone.

Why is using 'animation' considered overkill for a simple fade transform?

Using 'animation' is considered overkill for a simple fade transform because it involves setting up keyframes for both the 'appear' and 'vanish' states, which is more work than necessary for a simple effect that could be achieved with transitions.

What is a 'discrete animation' and how does it differ from a 'transition'?

A 'discrete animation' is an animation where the property changes instantly at the midpoint of the animation duration. It differs from a 'transition', which smoothly changes a property over a specified duration without instant changes in between keyframes.

Why might transitions not work when changing from 'display: none' to 'display: block'?

Transitions might not work when changing from 'display: none' to 'display: block' because 'display' is considered a discrete animation property. This means it changes instantly at the 50% mark of the animation, preventing a smooth transition from occurring.

What is the 'transition-behavior' property in CSS and how does it help with animating discrete properties?

The 'transition-behavior' property in CSS is used to specify whether a transition should be allowed even when it involves discrete animations. By setting it to 'allow-discrete', it enables transitions to occur on properties that would normally prevent transitions from happening, such as 'display'.

What is the 'starting-style' property in CSS and how does it help with controlling the start of a transition?

The 'starting-style' property in CSS is used to define the initial state of an element before a transition or animation takes place. It helps control the start of a transition by setting specific styles that the element should have at the beginning of the animation, allowing for more granular control over the animation process.

Why is browser support for certain CSS properties important and how can it affect the user experience?

Browser support for certain CSS properties is important because it determines the consistency and availability of features across different platforms. Lack of support in some browsers can lead to a degraded user experience, where certain animations or styles may not work, or where the website may not function as intended.

What is the concept of 'progressive enhancement' in web development?

Progressive enhancement is a web development approach that focuses on providing a basic level of user experience to all browsers, while enhancing the experience for those browsers that support more advanced features. This ensures that the website is functional and accessible, even if some users are on older or less capable browsers.

Why is it recommended to use 'overlay' or 'top layer' in modals and popovers?

Using 'overlay' or 'top layer' in modals and popovers is recommended to ensure that the modal or popover appears above all other page elements, preventing any z-index issues. It helps manage layer stacking and makes sure that interactive elements within the modal are on top of other page content.

What limitation does CSS nesting have with pseudo-elements, and how can it be worked around?

CSS nesting has a limitation where it cannot be used inside pseudo-elements. This can be worked around by using the 'starting style' at-rules outside of the pseudo-element and then nesting the pseudo-element rules inside the 'starting style', rather than the other way around.

Outlines

00:00

😀 Animating UI Elements with CSS Transitions and Keyframes

The speaker introduces the topic of animating user interface elements, such as modals, without the need for JavaScript by utilizing CSS animations and transitions. They discuss the challenges faced when toggling between 'display none' and other display properties and how CSS has evolved to simplify these processes. The speaker demonstrates using keyframes for a fade effect and explains that while animations are an option, transitions can be more efficient for simple fade-ins and fade-outs. They also mention the importance of understanding the 'display' property and its behavior during animations.

05:01

😕 Overcoming CSS Discrete Animation Challenges

The speaker delves into the difficulties of using CSS transitions with discrete animations, such as changing the 'display' property, which traditionally does not allow for smooth transitions. They explain the concept of discrete animations and how they work differently from continuous animations, causing transitions to fail. The speaker provides a workaround by using the 'transition-behavior' property with 'allow-discrete' value to enable transitions despite the discrete nature of the animation. They also highlight the importance of understanding CSS fundamentals to overcome such challenges.

10:03

🔄 Advanced CSS Transition Techniques and Browser Support

The speaker explores advanced techniques for creating smooth transitions, including the use of the 'starting-style' property to define the initial state of an element before the transition. They discuss the potential frustrations of working with CSS and how understanding its underlying principles can alleviate these issues. The speaker also touches on browser support for these CSS features, noting that while support is improving, it is not yet universal, and emphasizes the importance of progressive enhancement to ensure a consistent user experience across different browsers.

15:05

🎨 Enhancing Modal and Backdrop Animations with CSS

The speaker focuses on animating modal dialogs and their backdrops, adding visual effects like gradients to enhance user experience. They explain how to use CSS to transition the backdrop's opacity and overlay properties to ensure a smooth entrance and exit of modal dialogs. The speaker also addresses the limitations of using nesting within pseudo-elements and the necessity of using 'at starting-style' for animations involving pseudo-elements. They demonstrate how to apply these techniques to create a seamless and visually appealing modal interaction.

20:07

🌐 Final Thoughts on CSS Animations and Browser Compatibility

In the concluding segment, the speaker wraps up the discussion on CSS animations, emphasizing the importance of understanding CSS properties and their interactions. They provide a brief overview of the 'transition-behavior' property and its role in allowing discrete animations to transition smoothly. The speaker also mentions the need to consider browser compatibility and the use of progressive enhancement to provide a baseline experience for all users while enhancing the experience for those on supported browsers. They encourage viewers to explore further resources for a deeper understanding of CSS.

Keywords

💡CSS Animations

CSS animations are a way to apply dynamic styles to web elements over time, creating visual effects such as fades and slides. In the video, animations are used to demonstrate how to transition elements from 'display: none' to 'display: block' with a fade-in effect, showcasing the ease of creating such effects using CSS rather than JavaScript.

💡CSS Transitions

CSS transitions allow properties of an element to change smoothly from one value to another over a given duration, enabling effects like fading in and out. The video script discusses the use of transitions to animate the opacity and display properties of a modal dialog, highlighting a more straightforward approach compared to using animations.

💡Keyframes

Keyframes in CSS are used to define the stages of an animation sequence. The script describes creating keyframes for 'appear' and 'vanish' animations to control the opacity changes of a modal. However, it points out the limitations when using keyframes for properties like 'display' that involve discrete animations.

💡Display Property

The 'display' property in CSS determines how an element is rendered in the document, such as 'none', 'block', 'flex', etc. The video explains the challenges of animating this property when toggling between 'display: none' and 'display: block' and how recent CSS features can help overcome these challenges.

💡Opacity

Opacity is a CSS property that specifies the transparency of an element, with values ranging from 0 (fully transparent) to 1 (fully opaque). The script uses opacity changes as an example of animating a modal's appearance and disappearance, demonstrating how to smoothly fade elements in and out.

💡Backdrop

A backdrop in the context of modal dialogs refers to a layer that covers the background when the modal is open, typically dimmed to focus attention on the modal content. The video discusses animating the backdrop's opacity and the complexities involved in ensuring it transitions smoothly alongside the modal.

💡Discrete Animation

Discrete animations in CSS are animations where the property changes instantly at the midpoint of the animation duration. The script explains how discrete animations, such as changes to the 'display' property, can interfere with smooth transitions, necessitating workarounds like the 'transition-behavior' property.

💡Transition Behavior

The 'transition-behavior' property in CSS is used to specify how properties that are involved in discrete animations should be treated during transitions. The video script illustrates how setting 'transition-behavior' to 'allowed-discrete' can help enable smooth transitions for properties like 'display' that would otherwise animate discretely.

💡Starting Style

The 'starting style' in CSS is a way to define the initial state of an animation or transition before it begins. The script discusses the use of 'starting style' to set the initial opacity and position of a modal, ensuring that the transition from 'display: none' to 'display: block' is smooth and controlled.

💡Nesting in CSS

Nesting in CSS allows styles to be written in a hierarchical structure, making the code more organized and readable. The video script mentions the benefits of nesting for organizing styles related to modal animations but also points out that it cannot be used within pseudo-elements like ':before' or ':after'.

Highlights

CSS now supports animations and transitions for properties like display, making it easier to create effects without JavaScript.

The CSS working group has introduced new methods to handle animations and transitions for display properties.

Creating keyframes for opacity transitions can be used to animate elements from display none to display block.

Animations with keyframes can be overkill for simple fade effects and transitions might be more suitable.

Transitions can be tricky with properties like display that are considered discrete animations.

The 'transition-behavior' property with 'allowed-discrete' value can enable transitions for discrete animations.

The '@start' style rule in CSS allows defining the starting point of a transition.

Nesting CSS rules can simplify the syntax but cannot be used inside pseudo-elements.

Browser support for CSS transitions and animations on display properties is improving but still not universal.

The 'overlay' property is important for modal dialogs to ensure they appear on top of other elements.

Animating backdrops in modal dialogs can enhance user experience but requires careful handling of transitions.

CSS transitions and animations provide a progressive enhancement, offering better experiences on supported browsers without breaking functionality on older ones.

MDN Web Docs is now a collaborative effort supported by donations, important for developers relying on it for CSS and web standards.

Understanding CSS fundamentals like discrete animations and formatting contexts can alleviate common frustrations with CSS.

CSS properties like 'display' can behave unexpectedly during transitions, requiring specific workarounds.

The video provides a comprehensive guide on animating modal dialogs and backdrops using CSS transitions and animations.

Using 'caniuse.com' to check browser support for specific CSS features is essential for ensuring cross-browser compatibility.

Transcripts

hi there my friend and friends if you've

ever tried to create a model that would

slide in or animate or Fade Out and fade

in and all of that like this or you've

done a popover you've done anything that

involved going from a display none to a

display of block or Grid or Flex or

whatever it is uh you probably found out

it was a lot harder than you thought it

would be to do something like this and

you ended up using some JavaScript to do

different things and maybe using event

listeners or whatever it is or just

toggling based on set timeouts there's a

few different methods you can use but

those are all things of the past now

because the CSS working group hurt us

and we can do things just like this with

animations and transitions now and if

we're just doing it like I have here

where it's just a transform with a

opacity fade and stuff like that an

animation is definitely Overkill but

it's actually a little bit easier to do

it with an animations we're going to

look at that first and then we're going

to look at how we can do it with a

transition instead just cuz there's a

few extra new things along the way to

get it working there but it's super

awesome and super easy to do all right

so right now I'm using a dialogue right

here so you can see that with this

button here and I'm just using the show

model and close methods right now so it

opens and closes the model and the only

really important thing with this model

is that the dialogue element when we're

doing it it will have a display of none

is a user agent style that gets toggled

over to a display block when we click on

it so I don't actually have to declare

these because they're coming from the

user agent Styles but I'm going to leave

them here because it is quite possible

that you're animating or doing something

with these where you actually have to

declare these properties and so I just

want to make it really explicit that

this is on my closed State and this is

on my open state that we have those

right there now it's a little bit hard

to see in the demo I have set up right

now but there is a backdrop that comes

through here and for Simplicity I'm

going to just put that as a display none

as well for now but we're going to come

back and look at how we can animate the

backdrop as well just cuz there is

actually a little bit of a gotta with

that and we'll talk more about what

backdrop even is if you're not familiar

with it so as I said we're going to

start with the animation first uh and

with key frames and then we'll look at

how to do it with transitions cuz doing

it with uh key frames is actually

incredibly easy now we used to not be

able to do this but what we can do is we

can create some key frames like this for

I'm just going to call it a where we

want to go from an opacity of zero to an

opacity of one and this actually I think

always worked uh no matter what so it

was when we go to the open State we

could come and we could do an animation

then of our appear and let's just say

it's 1 second long so we can see it's

working right there that we're coming in

and that's perfect where things break is

if we wanted it to go away and one thing

with uh key frames if ever using them if

you want like an animation to run one

way and then another you actually have

to change the animation name uh where it

won't work so I'm going to do a vanish

here and then it's just going to be two

and then this will be our from and

that's kind of awkward so we can switch

the order though the order doesn't

matter it's the the key frames that

we're talking about that are the

important part but the vanish will go

from the opacity of one to an opacity of

zero and you would think all we' need to

do here is we could just copy this line

switch it over to a vanish uh and you

would think that would work because then

when we click on it we're adding the

animation it appears and then we'd click

this and it would vanish but it doesn't

and that's because display none is

instantly toggling to a display of none

it just happens it goes to display none

and there's no animation to run anymore

because the element is display nun and

it's gone and this is always frustrating

and there's JavaScript solutions to this

and stuff but we don't need to do that

anymore uh luckily so now what we can do

is all this is the the simplest thing in

the world we just have to come here and

say that this is a display block or

whatever you know if you're using grid

or something else you'd put whatever

your display value is here and then here

you just do a display of none and

normally if you look at the spec display

shouldn't be able to animate like this

and it's actually a discrete animation

meaning uh normally discrete animations

flip at the 50% Mark so it would be

halfway through the animation it would

do it but display never work that way

display is always and it's in the spe

that it would do it instantly at the

beginning of the animation but if we do

this now it knows to wait until the end

so if I click on it it fades in and now

if I click on it again it fades out and

it works and it's

fabulous it's so nice that this is easy

to do now it's it's wonderful to use but

this is a lot of work for something that

would just should work with transitions

right I have to create an appear and a

vanish key frames and set them all up

and then I need the animation here and a

different animation here it's not that

bad honestly but it's more work than

what we actually need to do with the

caveat that if you have more complex

things going on where you actually need

multiple key frames then this is what

you'd actually want to be doing right

you know if you have like spinning and

moving and you have more than a from and

a two so it's not just the 0% and the

100% there's other steps involved well

then this is the direction you want to

go in if all you need to do is make

something fade in or out or we're going

to see how we can move it up and down

and all of that we can now do that with

transitions as well but as I said it's a

little bit trickier so if you do want to

access this code exactly as it is here

with the key frames it will be linked in

the description um but we're also going

to now take this and we're going to make

this work with transitions instead so

I'm going to delete all of that and now

we're back to what we were before and

we'll see how we can do it with a

transition so let's also drop this off

from here and here and again the the one

frustrating thing for me on this whole

thing is there's a little caveat with

this backdrop but um it's not a big deal

but it's it's a little bit of an

annoying thing that we'll see uh but

what you'd want what you think you could

do here is let's just say that we want

to go from an opacity of zero and then

here we want to have our opacity of one

right opacity of one and we just then

ideally would just do a transition of

our opacity and once again we'll do 1

second and we would hope that when we

click that it would work but you can see

it doesn't and this is a thing with

transitions is if there's a property

that's changing that is considered a

discrete animation and a display block

is one of those it will prevent any

transitions from working and just if you

don't really know what a discreet

animation is just really really quickly

here here I'm going to do a little

Interruption cuz we're going to look at

this with background images and

background images are considered a

discrete animation so here I just have

this animation that's happening where it

should take 10 seconds to happen when I

hover but you'll see it just instantly

changes and it's actually instantly

changing after 5 seconds because it's

getting to the 50% Mark of the animation

and then it just instantly switches

because we can't do a background image

and I only have it on Hover right now so

as soon as I leave it goes back to its

starting state so the animation's only

running here now this is different from

display because display property we're

here I'm going to throw these spans in

here and if we go and take a look um I'm

also doing body hover and then my div so

I want just this div with all my hands I

want it to go from a display none to

having a display of block and it should

take 10 seconds for this to happen so

you'd expect the hands to actually show

up after 5 seconds because it's a

something it's a discret animation but

when I go on you can see they actually

instantly appear uh and then the rest

happens and the opacity is not working

nothing else is working and that's

because if something has a discret

animation the transitions will not work

at all uh is the important thing and so

it just it's instantly going from here

to here and it's not transitioning at

all it just the hands come on and off

and there's no delay or anything and

this might have you wondering how do you

know if something is a discrete

animation so we're going to jump on over

to MDM now where we have the background

image which I just mentioned was and

here if you go on over to the in this

article section there's always going to

be a formal definition and if you go to

the formal definition you'll get this

table like this and there's always an

animation type and you can see it says

discreet if we go to background position

and we go to the formal definition we're

going to see that in this case the

animation type is a repeatable list and

let's just go over to let's say clip

path um as another one we're going to

click on formal definition and in this

case animation type yes as specified for

basic shape otherwise no so you'll get

more information on it the one that

you're looking for obviously you know

bottom we can go check that one too

really fast a length of percentage or a

cal so there's different limitations

sometimes on them but if it says discret

it's one of those ones where it's going

to happen in the middle but we're

getting around that now we're going to

see what that is so sorry for the little

Sidetrack here and I'm going to stay on

the Sidetrack for just one more second

because if you use MDM I just want to

give a little PSA here public service

announcement that uh MDM is not actually

completely run by mazilla anymore it's

now more of a collaborative effort with

most of the work both to maintain and

update everything that's going on here

being done by the open web docs which is

actually a nonprofit that relies on

individual and corporate donations to

fund their operation I'm going to put a

link to them in the description so if

you'd like to learn more about it and if

you use MDM which I'm pretty sure you do

if you're watching this video you might

want to mention it to your boss or

something like that cuz you know say

something like I wouldn't be able to do

my job if it wasn't for these guys and

see if they can't throw a little bit of

money their way to help fund everything

they're doing so we can continue to rely

on MDM and all the stuff here to be able

to do our jobs properly but anyway with

that out of the way let's jump back on

over to animating from display none

right here and so we want to do it in

this case it's transitioning I guess uh

and so this obviously it's not working

right now so what can we do to actually

make this work and there's a couple of

things the first thing is we actually

want to transition our display property

as well so just to make life a little

bit easier here I'm actually going to do

a transition uh property and I'm going

to do display and opacity just so I can

break it off onto more lines and then

this one's going to be my duration which

would be 1 second and so that just means

the display and the opacity are going to

transition over a duration of 1 second

and if I do this it's still not going to

work that that'd be nice if that was the

trick CU that was the trick when we did

it with the key frames before right uh

but it's not actually far off there's

just one more line that we need which is

our transition behavior and this is the

new thing that sort of unlocks

everything which is allow discreet or

one of two new things there's a second

one that we're going to need in a minute

what this allow discreet means is

because because as I said before if

something involves a discret animation

going on transitions will not work it

just goes nope there's a discret

animation here we're we're ignoring the

transition now what we're saying is whoa

wait a second here we're going to allow

it even though we have those discret

animations on there and it works sort of

it's working in one direction we're

getting there so now we're actually this

way is not working but going the other

way is and this is where there's that

second new thing that I mentioned which

is that we want to add in one more thing

to actually tell it where it's coming

from and that's because it's going from

a display none to what we have here and

it gets a little bit lost along the way

and this is one of those frustrating

things where it feels like oh I just

figured it out it's why why is it only

working in One Direction and I

understand that that's why MDM is great

um for things like this and sometimes

CSS can just feel really frustrating

though and you feel like you're getting

there and then you hit another roadblock

and you're getting there and you hit

another roadblock and from my experience

most of those frustrations start to go

away when you understand a lot of the

fundamentals of how the language

actually works including things like are

discrete animations as well as things

like formatting context and containing

blocks and more things that just don't

get talked about enough and if you'd

like to get a really solid understanding

of why CSS works the way it does and so

that way you're less frustrated with it

and you're writing it with a lot more

confidence I'd suggest checking out my

course CSS demystified which are created

for that exact purpose there is a link

to it in the description but if you just

want to worry about this transition

that's fine too we're going to look at

exactly that right now which I'm going

to go on the open here and we're going

to use a bit of nesting um we'll look at

the non- nested version of this as well

but I'm going to do a starting style

here and this is as I said I hinted at

there's I didn't hint at I said there is

a new thing which is another new thing

like our allow discreet which is our

start style and it's not start style

actually it's I said it out loud and

like start style doesn't sound right

starting style and the starting style is

where does this thing start from so so I

actually want to have my starting style

of an opacity of zero that's going to go

to here and now it fades in and it fades

out so that looks a lot nicer right I'm

happy with that uh the one thing at this

point this might feel like oh well I'm

going I have the zero here and the zero

here that's kind of frustrating and

annoying you're going to be very happy

about this in a second though because

right now this works and if this is all

you need well I mean it works so that's

great but by having this this and this

as three separate things instead of just

two it opens up a whole world of extra

stuff that we can do so as an example of

that maybe I come here and I do a

translate of zero and -25 VH so if I

just do that here and then here I come

in with my 0 0 like that and for now

let's actually have the starting style

exactly the same so we're this and this

are matching one another it's going to

go in and then it's going to go back to

where it was so it's the same thing in

both directions but because we have

these separated that means we can

actually make these different so I can

actually say that this one is a positive

25 so the starting style is different

from when we're going towards our close

state so we really have to think of this

is my starting style this is once it's

opened and this is where it goes once

it's closed which is kind of weird and

different from how we might normally

think about things just cuz the order of

it you can see it slid in from the top

because we're going from the - 25 and

now it's going to go out the bottom so

that's kind of cool CU we can have

different different directions and

different things going and it just opens

up that extra world of control now I did

mention that on here we're going in with

the starting style uh is nested inside

of here and I'm using nesting because I

find this is just a lot easier to do it

this way and that's just also because if

this is supported by the browser then

nesting is 100% supported so I'm not

worried about the browser support of

nesting because I'm using this and

speaking of browser support this is one

of those nice things where browser

support is far from perfect right now

everything I'm doing is only working in

Chrome the animation ones I think is one

version back and this starting style is

only supported in the latest release and

speaking of browser support if you go to

can I use and actually we should do that

together so I can show this to you and

if we look up starting style first we'll

notice that it's supported it's there

it's in Safari and in our chromium

browsers Firefox it's not quite there

yet um but at least it's in our two

browsers so that is awesome the one

that's a little bit annoying is if we

look at the transition Behavior which is

that other one right uh behav you got to

spell things properly for these to work

uh where it looks like it has equal

support and it's actually coming in

Firefox so that's great we're getting

much better browser support for it it's

almost at you know 78% it's fantastic

the thing is if we scroll down a little

bit here uh we get to this one which is

transition Behavior allowed discreet uh

which all of a sudden it's not working

in Safari or Firefox and it's

specifically talking about our display

property there and that's because as I

said we have other discrete animations

we have our background images and

there's a whole bunch of other stuff

where Safari is supporting those Safari

and Firefox is on the way to supporting

them but it's only chromium browsers

right now that are supporting when

you're using it specifically with

display which is a little bit kind of

annoying um but I mean support's still

at over 70% and if this doesn't work it

just means the animation won't be there

everything else is still perfectly fine

but the thing is even if you're on one

of these browsers where it's not working

it's a progressive enhancement where

we're not going to break anything

because none nothing I've done like the

starting style if there's no animation

it doesn't really matter so this not

being understood by the browser if it's

older doesn't matter and if the gets to

these and it goes well I'm just not

doing this I don't know what this

transition behavior is and I can't do a

transition on display just means it's

turning it on and off so we just go back

to square one where we don't have that

animation in older browsers newer ones

get the nicer experience the best way to

do web development is to do it with

Progressive enhancements where things

look better on browsers that support it

but nothing is broken on older browsers

they still get all of the stuff they

need just it doesn't look quite as good

but yeah we have a couple of other

things that I want to talk about in the

first one or it's mostly about the the

nesting here CU and the backdrop uh I'm

going to come up here and I'm doing this

because it's on a dialogue and if you do

this on a popover you'll want to use

this as well which is we're going to add

in overlay and overlay is just because

uh when we open a modal you can actually

see this inside of our Dev tools if I

drag these on over uh there

is oh look at that it's saying that it

doesn't understand what's happening here

why

not we didn't break anything did we they

got to update the dev tools look at that

it's working

fine uh see this top layer pill here

though uh so the top layer is making

sure that this is in front of everything

else and popovers also use this top

layer and it just ensures sort of like

prevents any Z index issues basically

from coming up it's bringing it all the

way to the front and if you don't

include the overlay as one of your

things here it's possible when your

animation's turning off or coming on

that if you have Z index Z stuff going

on the top layer only comes in at the

end or halfway through I'm not sure

exactly how it would work but it just

you might have these layering issues

whereas if you're mentioning the overlay

here with the allow discreete everything

should be fine so yeah there we go

that's working it's up and down and we

want to get that backdrop working so

what we're going to do is let's do our

backdrop and make it look a little bit

fancy ier first so there we go I just

added a red to blue gradient on there

nothing too fancy so when I open it we

hit the backdrop that comes in and then

the backdrop disappears and once again

we're going from a display none to a

display of blocks we can use all the

exact same things that we've uh learned

along the way here to make that actually

transition in uh and actually I'm doing

this on my open let's just we can just

it can always have that background image

we don't need to uh change that so our

background image is always there and

this will be an opacity of zero and then

when we have our Di dialog open we can

change the backdrop and then here the

opacity can be like 8.75 or something

just so we can actually see through it

now it's still not going to transition

but we see that at least it's working uh

and everything is there awesome the next

thing we're going to do is let's come in

with what we were looking at before

where we do our transition properties

right and we wanted our opacity but then

we also need the display and we also

need the overlay so our top layer works

properly since we're transitioning we'll

come in with a transition duration of 1

second so it matches everything else

that we've been doing so far and we're

going to lastly come in with that

transition behavior nice little bit of

reinforcement here in this learning

right you cover the same thing go a

little bit faster the second time around

uh of a loud discreet and in doing that

we get it not working in this direction

but it works when we go backwards or

when we close it because we don't have a

starting style and this is where the

nesting thing comes up um because if I

do it start starting style here this is

going to drive people nuts if they don't

watch this you a lot of people drop off

when they're watching my videos they'll

have watched the first half and they're

gone now they're missing out on

something that's going to drive them

bananas one of those things is CSS that

can be a little bit frustrating uh we're

going to do an opacity of zero here and

it's not going to

work this is one of those uh annoying

things with CSS um right because it's

working and actually just really fast

here you can see if I open and close it

and then open it really fast it's like

the it because it was at that point of

the animation it's just continuing from

where it was I think that's kind of cool

right so like it it'd be kind of weird

if it janked all the way back up but

anyway I'm getting off topic uh this

isn't working because I'm using nesting

and you can't Nest inside of a pseudo

element just the way it is with CSS and

the way CSS nesting works so because of

that I actually have to take this off

and this is a limitation if you look up

in like the actual spec it's in there um

that you can't do that so what you need

to do is actually do an at starting

style here starting style and then in

here and this is just it's an at rule so

it works just like a media query or

something like that where I can then

bring rules inside of that and then here

I can say that the opacity is going to

be a uh zero and now we can close it and

it closes and we can open it and it

fades in as well and so if ever you have

any pseudo element at all you cannot use

nesting within that pseudo element it's

one of those just gotchas of CSS I think

this is so much cleaner so much nicer

but if you do have a backdrop or

something else that you want to be able

to play with or animate or do whatever

that involves nesting or you use a

before and an after and you're trying to

do this cuz maybe you're doing a display

of nun to a display of block or whatever

it is on a pseudo element you need the

starting Style on the outside and the

pseudo element nested inside of that and

not the other way around now if you'd

like to learn more about models and

everything with like the dialogue here

and the the show modal and the clothes

and how they work and all the different

stuff to do with them and more about the

backdrop and all of that stuff I've gone

in depth on how they work in this video

that is right here and if you were

interested in CSS demystified the link

for that is in the description and with

that I would like to thank my enablers

of awesome who are Philip Andrew Simon

and Tim as well as all my other patrons

for their monthly support and of course

until next time don't forget to make

your corner of the internet just a

little bit more awesome