Define item styles for all screen sizes

Question

In Javascript, we can use something like this window.getComputedStyle(element,null).getPropertyValue(property)to get the given element's style property. Moreover, any property can be changed using adaptive web design at any screen size.

I am wondering if it is possible to analyze the stylesheet associated with an element to determine the styles that will be applied to it at all window sizes / breakpoints.

For example, it <p>has font-size: 16pxon the desktop and font-size: 18pxon a mobile device (installed @media (max-width: 768px) { ... }). I would like to know that the font size will be 18 pixels on mobile devices without resizing to the size of the mobile phone and repeat the font size selection.

I suggest that with some clever text processing in JS, I could sort the stylesheet for @mediaand see if it reflects this element, but for large or multiple stylesheets, inline styles, and styles that have been introduced, this method will probably be impossible to get 100% accuracy.

Any ideas?

Thoughts ...

Is it possible to wrap an element in a simulated (hidden) element window, and then use JS to change it so that it launches media queries?

Another approach ...

I started playing with document.styleSheets, but even this seems like a pretty impossible task to become perfect. In my example below, I wrapped some selected text in the element and then passed it to the method below (written in coffeescript).

analyzeSelectiontyles: (selectionElement) ->
    selectionParents = []
    while selectionElement
        selectionParents.unshift selectionElement
        selectionElement = selectionElement.parentNode

    pageStylesheets = document.styleSheets

    for stylesheet in pageStylesheets
        rules = stylesheet.cssRules
        for rule of rules
            if rules[rule]["type"] is 1
                console.log 'standard style'
            if rules[rule]["type"] is 4
                console.log 'media query'
            # If it a standard style rule or a media query containing
            # style rules we have to check to see if the style rule applies
            # to any one of our selectionParents defined above, and in
            # Which order so as to simulate "cascading"

Answer 1

- , . , all.css; , cdn.

function css(element) {
    var sheets = document.styleSheets,
    standard = [],
    mediaStyles = {};
    element.matches = element.matches || element.webkitMatchesSelector || element.mozMatchesSelector || element.msMatchesSelector || element.oMatchesSelector;

    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (element.matches(rules[r].selectorText)) {
                if (rules[r]["type"] === 4) {
                    mediaStyles[rules[r].media] = (mediaStyles[rules[r].media] || []).push(rules[r].cssText);
                } else {
                    standard.push(rules[r].cssText);
                }
            }
        }
    }

    return { 'standard': standard, 'media': mediaStyles };
}

Answer 2

css ( ), css. window.getMatchedCSSRule. css, mediaquery.