DEV Community

Discussion on: Observing Style Changes 👁

Collapse
 
moopet profile image
Ben Sinclair

This is neat, (if problematic because of the overhead).

I can't think of any time I've needed to know if a style changed, though - checking for inserted content is a more common use case and that's covered by the MutationObserver or a good old-fashioned setInterval poll for last century's browsers.

What was the use case that prompted this?

Collapse
 
oleggromov profile image
Oleg Gromov

Ben, thanks for your response! It's very valuable for me to know what people think.

I want to watch styles for changes to know if elements might have moved on the page. Say, initially an element's position was just "stay in normal flow" but then somebody applied a class to its parent which makes it 2 times smaller - that's how Twitter header behaves, for example.

Collapse
 
patrickcole profile image
Patrick Cole

Do the cases in which you need to observe always be for computed style data? What I mean is can the library be setup to be more generic such as watching for:

  • <link rel="stylesheet"> element is added/removed to <head> (or other element)
  • A class is added/removed from an element.
  • An inline style has been applied / updated on an element.

Just looking at this from another potential point of view.

Thread Thread
 
oleggromov profile image
Oleg Gromov

Hey Patrick,

Thanks for your reply! For my original task I wanted to supply with this library, I think it makes even more sense to just know about the possibility of style change like the ones you listed. If a stylesheet was added or removed, or a classname, or so on.

For a general-purpose tool, I don't know. Maybe if performance becomes a real issue for a real user (which I don't believe exists now) and I don't find a way to tackle the problem in any other way, it might be a solution. But then even the MutationObserver usage itself may become a bottleneck.

Regardless of this reasoning, thanks for your ideas - they're really valuable to me.
If you see any way in which this tool can be tailored to your personal needs, feel free to raise an issue or even a PR on GitHub.

Kind regards,
Oleg

Thread Thread
 
patrickcole profile image
Patrick Cole

Ah I see, thanks for clarifying. I think the idea could be served as a general purpose for specifying cases in which you'd expect something to change. For example, if an external stylesheet was injected into the page via a widget. That widget might present some style issues that you would need to counter or clean up.

The library could be constructed to establish rule cases to watch for, using the MutationObserver. When one of those cases rings true, it could then perform an implemented callback function.

I've found the MutationObserver an excellent tool, as long as it's used liberally on the page. I seem to run into issues when I try to use it for everything on the page. However, breaking it down into smaller cases to watch for didn't hurt performance as much.

Just some additional thoughts. I dig what you are trying to do here and appreciate the thinking going into this. Hopefully through collaboration you get what you are looking for.

Regards,
Patrick

Collapse
 
cesabal profile image
Cexar A Landazábal C

Suppose the case of a service that is contracted through a control that provides another page, this security provider gives a system that integrate the websites to hire, and this is done by the security provider through an html popup by ajax, it is necessary to determine any change of the page that consumes the service to the popup, and for this securization it is usually important to know the changes css