Tip:
Highlight text to annotate it
X
This is a quick demonstration of CSS Diff, a tool that I created some time ago and recently
updated. What CSS Diff does, it allows you to compare two elements on the website. So,
lets say we want to compare this 'Default' label with this 'Danger' label. First of,
we need to inspect first of the elements. Now we will switch to the 'CSS Diff' tab and
click 'Compare' button. Next, we will select the second element we want to compare and again
click 'Compare'. And here it is. Here is output from 'CSS Diff' and it shows us that only
difference between these two labels, as expected, is the background. Specifically, background color.
Lets do something more interesting. Here is a random responsive website. If you
look at the menu at the top it will change when I increase the screen size. Lets say
we want to compare this element between two states. Lets click 'Compare' once, decrease
the screen size, and click 'Compare' again (because has changed). And here it is.
These are all differences between the same element in two different states. OK, and here
is the last use case. Probably the most interesting one. Lets say you have a website that you
are working on and you have done some refactoring. You have two versions of the same website
now and you can see that after refactoring something is a bit off. Look at this blue box
here. It looks a bit differently between these two versions of the website. What you need
to do in order to know what's the difference is to just select the element, click 'Compare'
in CSS Diff, switch tab, compare the similar, or same, element, again and again click 'Compare'.
And here are all diferences between two elements. CSS Diff works across different tabs, making
this kind of task very easy. If you found CSS Diff interesting and you think that it
might be useful for you go to the Chrome Web Store and search for 'CSS Diff'. Thank you!