CODEWITHSUNDEEP
javascripthtmlcsswebkit
Horen
Horen

Reputation: 11382

document.styleSheets removes Webkit specific CSS rules

Take a look at this HTML, CSS and JavaScript:

<html>
    <head>
        <style type="text/css">
            body {
                -webkit-text-size-adjust: none; 
                font-size: 14px;
            }
            html{
                padding: 0;
            }
        </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $.each(document.styleSheets, function () {
            var cssRules = this.cssRules;
            if (cssRules && cssRules.length && this.href === null) {
            var css = '';
            $.each(cssRules, function () {
              css += this.cssText;
            });
                document.write(css);
            }
        });
    })
    </script>
    </head>
    <body>

    </body>
</html>

Basically, all it does is output the stylesheets in the current document read with JS through document.styleSheets.
Now, the problem: document.styleSheets does not contain Webkit specific styles. Instead, those styles are removed.
In my example body has -webkit-text-size-adjust: none; but this rule is not output as you can see on the right.
Why is that?
And more importantly: How can I get that rule through document.styleSheets?

Upvotes: 0

Views: 108

Answers (1)

teacup
teacup

Reputation: 672

"text-size-adjust" isn't supported by any non-mobile browsers, so if you're doing this on a desktop it's not appearing because the rule literally doesn't exist to the browser.

If you try your code with a supported rule (as below), you'll see the rule with the vendor prefix in your document.write()

body {
  -webkit-transition: all 4s ease;
  font-size: 14px;
  font-weight: bold;
}

Upvotes: 1

Related Questions