How to detect DOM changes in CSS?

How to detect DOM changes in
CSS?

You already have seen that we can detect the DOM changes using MutationObserver in JavaScript. If you still haven't read it, visit - the blog of mutation observer.

To detect the DOM changes using CSS, we can refer to the Gmail Compose Window. While integrating a Gmail compose window, we face an issue when Gmail's Compose window is open or closed. If you have a streak installed on your system, the controls for the Gmail Compose window get installed quickly, this article will be about how we can accomplish it.

There are 2 traditional methods to find out the DOM changes & that is:

● Using a timer

● Binding on the DOM mutation event

Both methods are a little bit critical to work on.

Using a timer is critical because you have to compromise between performance & responsiveness. Responsiveness is nothing but how quickly controls get installed on Gmail compose windows using streak. If there is a shorter timer interval, you will find high responsiveness but it consumes a more insignificant amount of cycles to accomplish it & if there is a large timer interval then it can't be counted as responsive.

And regarding the DOM mutation events, you may face a huge performance penalty by using them & that is the reason in the future they are going to be banned by the browsers.

Now, let's see How to detect changes in DOM using CSS?

To use CSS to detect changes in DOM, first, you have to create & insert a DOM node with CSS. And to detect the changes you have to create an animation with a unique name & which requires a low-performance cost. Then you need to apply that animation to the DOM node on which you have to find the changes. After that, you have to apply a callback event with the document binding on the animation complete event, this callback event helps you to find out which animation has been completed on which node.

In this article, you can find that DOM changes detection technique only for insertion of the node but you may detect the DOM changes on any state of the node you are interested in. While creating a CSS to detect DOM changes, you have to use CSS selectors carefully & also you have to take care of nth-child & nth-last-child for which a node is inserted or removed. To find the node removal dom changes you have to use JavaScript & it is very simple to use.

Now, let's see an example of how to detect DOM changes using CSS animation property

We are going to see the example for Gmail's compose window with two selectors & two animations.

@-webkit-keyframes streakComposeTriggerEven {

from{clip : rect(1px, auto, auto,auto);}

to{clip : rect(0px, auto, auto,auto);}

}

.streakGmailComposeChildren:first-child:nth-last-child(2n) {

-webkit-animation-duration:0.001s;

-webkit-animation-name :streakComposeTriggerEven;

}

@-webkit-keyframes streakComposeTriggerOdd {

from{clip : rect(0px, auto, auto,auto);}

to{clip : rect(1px, auto, auto,auto);}

}

.streakGmailComposeChildren:first-child:nth-last-child(2n+1) {

-webkit-animation-duration:0.001s;

-webkit-animation-name :streakComposeTriggerOdd; }

In this example, we have used a first CSS animation for an even number of Gmail compose windows & 2nd a CSS animation for odd numbers of Gmail compose windows. You also have seen that for even numbers the clip goes from 1->0 & for odd numbers, the clip goes from 0->1, so every time when the number of compose windows changes the event gets fired.

So, we can find out the DOM changes in Gmail compose as we can create or destroy the compose window at a time.

Conclusion

This article will be helpful to you if you want to work on DOM changes without using MutationObserver.

You've successfully subscribed to HTML5Awesome
Great! Next, complete checkout to get full access to all premium content.
Welcome back! You've successfully signed in.
Unable to sign you in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Billing info update failed.