Как легко сравнить стили в браузере? - PullRequest
Новая
       14

Как легко сравнить стили в браузере?

3 голосов
/ 14 августа 2011

Я использую инструменты разработчика Google Chrome для проверки стилей CSS. Иногда мне нужно сравнить стили 2 элементов на странице или 2 элементов на разных страницах.

Есть ли инструмент или надстройка, которая позволила бы мне легко сравнивать? Прямо сейчас я должен смотреть визуально, переключаясь назад и вперед, сравнивая одну вещь за один раз. Хотелось бы, чтобы был инструмент, который бы выделил различия в стилях, источнике, ...

Я открыт для использования другого браузера, если такой инструмент существует.

1 Ответ

5 голосов
/ 14 августа 2011

Это должно помочь вам сравнить вычисленные различия стилей для двух элементов на одной странице (я не уверен, как приблизиться к двум элементам на разных страницах): 

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');
}

Пример: 

>>> 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
...