document.styleSheets 删除 Webkit 特定的 CSS 规则

Question

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

基本上就是通过document.styleSheets.
输出当前用JS读取的文档中的样式表现在，问题是：document.styleSheets 不包含 Webkit 特定样式。相反，这些样式已被删除。
在我的例子中 body 有 -webkit-text-size-adjust: none; 但是这个规则没有输出，你可以在右边看到。
这是为什么？
更重要的是：如何通过 document.styleSheets 获得该规则？

Answer 1

"text-size-adjust" isn't supported by any non-mobile browsers，所以如果您在桌面上执行此操作，它不会出现，因为浏览器实际上不存在该规则。

如果您使用受支持的规则（如下所示）尝试您的代码，您将在 document.write()

中看到带有供应商前缀的规则

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

document.styleSheets 删除 Webkit 特定的 CSS 规则

document.styleSheets removes Webkit specific CSS rules

html

javascript

css

webkit