Difference Between Two Element Styles with Google Chrome

Difference between two element styles with Google Chrome

---

Update: As a result of this discussion, the "CSS Diff" Chrome extension was created.

---

Great question and cool idea for extension!

Proof of concept

As a proof of concept, we can do a small trick here and avoid creating extension. Chrome keeps elements you select via 'inspect element' button in variables. Last selected element in $0, one before that in $1 etc. Basing on this, I've created a small snippet that compares last two inspected elements:

(function(a,b){    
    var aComputed = getComputedStyle(a);
    var bComputed = getComputedStyle(b);

    console.log('------------------------------------------');
    console.log('You are comparing: ');
    console.log('A:', a);
    console.log('B:', b);
    console.log('------------------------------------------');

    for(var aname in aComputed) {
        var avalue = aComputed[aname];
        var bvalue = bComputed[aname];

        if( aname === 'length' || aname === 'cssText' || typeof avalue === "function" ) {
            continue;
        }
        
        if( avalue !== bvalue ) {
            console.warn('Attribute ' + aname + ' differs: ');
            console.log('A:', avalue);
            console.log('B:', bvalue);
        }
    }

    console.log('------------------------------------------');
})($0,$1);

How to use it?

Inspect two elements you want to compare, one after another, and paste the code above to console.

Result

How to easily compare styles in a browser?

This should help you compare computed style differences, for two elements, on the same page (I'm not sure about how to approach two elements on different pages):

function styleDifferences(a, b) {
    var as = getComputedStyle(a, null);
    var bs = getComputedStyle(b, null);
    var r = [];
    for (var i in as)
        if (as[i] !== bs[i])
            r.push(i + ' differs: ' + as[i] + ' | ' + bs[i]);
    return r.join('\n');
}

Example:

>>> styleDifferences(document.body, document.querySelector('pre'));
backgroundColor differs: rgb(255, 255, 255) | rgb(238, 238, 238)
borderCollapse differs: separate | collapse
fontFamily differs: Arial,Liberation Sans,DejaVu Sans,sans-serif | Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif
fontSize differs: 12.8px | 13.7px
height differs: 1928.28px | auto
lineHeight differs: 12.8px | 17.8px
marginBottom differs: 0px | 10px
maxHeight differs: none | 600px
overflow differs: visible | auto
paddingTop differs: 0px | 5px
paddingRight differs: 0px | 5px
paddingBottom differs: 0px | 5px
paddingLeft differs: 0px | 5px
textAlign differs: center | left
whiteSpace differs: normal | pre
width differs: 1423px | auto
MozColumnGap differs: 12.8px | 13.7px
overflowX differs: visible | auto
overflowY differs: visible | auto

What do the crossed style properties in Google Chrome devtools mean?

When a CSS property shows as struck-through, it means that the crossed-out style was applied, but then overridden by a more specific selector, a more local rule, or by a later property within the same rule.

(Special cases: a style will also be shown as struck-through if a style exists in an matching rule but is commented out, or if you've manually disabled it by unchecking it within the Chrome developer tools. It will also show as crossed out, but with an error icon, if the style has a syntax error.)

For example, if a background color was applied to all divs, but a different background color was applied to divs with a certain id, the first color will show up but will be crossed out, as the second color has replaced it (in the property list for the div with that id).

Tool to diff two CSS elements

Similar question was asked here and, as a result, I created a script that compares two elements in Chrome (you will find it in the linked answer). Also, based on said script, I created a handy Chrome DevTools Extension "CSS Diff".

Developer Tools: How can I quickly check the difference in styles between normal state and :focus?

You can try my CSSDiff extension. It shows difference between last two inspected elements. It's wasn't ment for exactly what you are trying to achieve but, you should be able to use it by inspecting two inputs of the same sort from which on should have focus (that way you will see actual difference between focused and unfocused element).

What determines the order CSS is specified between two elements when loaded from different files?

If the selectors are identical, it comes down to order... order within the CSS and the DOM. So, the question is, where did you place the dynamically generated <link> (or <style>) in relation to the original <link> (or <style>)? The order within the DOM matters.

If you'd like to make sure that your dynamically created CSS gets evaluated first, add it to the top of the <head>:

document.head.insertBefore(myLink, document.head.firstChild);

If you'd like it to be evaluated last, append it to the <body>:

document.body.appendChild(myLink);

Whichever rule is evaluated last will be the one applied (barring use of !important)

Here's an example:

<!DOCTYPE html><html>  <head>    <style>      p {        color: green;      }    </style>  </head>  <body>    <p>test</p>      <script>      (function() {
        var red = document.createElement("style");        red.textContent = "p { color: red }";        // We'll add this to the top of head. You'll never even notice because it will        // be overridden by the existing green style.        document.head.insertBefore(red, document.head.firstChild);
        var blue = document.createElement("style");        blue.textContent = "p { color: blue }";        // We'll add this to the end of the body after a three second delay. It will         // override the other styles.        setTimeout(function() {          document.body.appendChild(blue);        }, 3000);
      })();    </script>  </body></html>

How to get a summary of your CSS changes in Chrome dev tools?

You can see all changes via the Changes Drawer

In Dev Tools, you can locate the Changes Drawer via either:

• A) Open Command Palette (Ctrl + Shift + P) and type "changes"

  
  
  
  

• B) Open Drawer (Esc), click on the more options menu (triple dot), and select Changes

  

Further Reading

• How to get a summary of your CSS changes in Chrome dev tools?
• Export CSS changes from inspector (webkit, firebug, etc)

Updates

• Dev Tools 98 added More precise changes to automatically pretty prints changes
• Issue #1296143 opened User-Select: none in Changes drawer makes it very hard to utilize

---

Related Topics