tomhodgins/cssplus

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

JiveDig opened this issue · 7 comments

JiveDig commented

Hello! I'm super intrigued and curious to test Aspecty. I'm getting the following error and not sure why. Can you shed any light?

I tried on 2 different test sites, both with Local by Flywheel.

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Array.from.sheet (https://sandbox.dev/wp-content/themes/sandbox/assets/js/aspecty.js?ver=0.0.12:116:9)
    at Function.from (<anonymous>)
    at Object.aspecty.findRules (https://sandbox.dev/wp-content/themes/sandbox/assets/js/aspecty.js?ver=0.0.12:113:10)
    at aspecty.load (https://sandbox.dev/wp-content/themes/sandbox/assets/js/aspecty.js?ver=0.0.12:99:12)
tomhodgins commented

Hi @JiveDig, I wonder if it's an issue with HTTPS and the script not being given permission to access the stylesheets for security purposes (unless they are allowed intentionally allowed).

I think this Stack Overflow answer might explain the error if you're developing locally: https://stackoverflow.com/a/49160760/641558

JiveDig commented

Well i'll be.... it works in Safari. Cool. I don't really understand that thread though. Local by Flywheel uses Docker I think, which is a local server? Not really your issue though, I understand ;)

May be worth a new issue, but I already see a deal break for me with Aspecty... my containers all have content in them so I want the aspect ratio to set the min-height not the height. I'm fine if it breaks the aspect ratio only when the inner content is taller than the container.

JiveDig commented

FWIW, I changed:

let newRuleText = `height: ${newHeight}px${specificity};

to

let newRuleText = `min-height: ${newHeight}px${specificity};`

and it appears to work great. Much better than the jQuery hack I've been using.

If I fork this script and change to min-height, do you think this thing is ready for prime time? We have some high traffic sites (using my old method), and sell a premium theme with a decent amount of monthly sales.

JiveDig commented

Sorry to blow you up tonight :)

It may be cool to strip it down to search for data attributes directly. The way we have it working I can easily add data-aspecty="4 3" or whatever is needed, directly to the markup. That may alleviate the need to access the stylesheet directly.

tomhodgins commented

If I fork this script and change to min-height, do you think this thing is ready for prime time? We have some high traffic sites (using my old method), and sell a premium theme with a decent amount of monthly sales.

In general I'd say try it out and see if it works for you in your actual layouts, but if you want this to have broader support, and especially for a premium theme I think there might by some other alternatives to try as well.

For the broadest browser support (should be IE8+) I would probably lean toward a solution with EQCSS:

<!-- EQCSS (supports IE8+) -->
<div data-width=16 data-height=9>With EQCSS</div>
<script src=http://elementqueries.com/EQCSS.js></script>
<style>
  @element [data-width][data-height] {
    :self {
      min-height: eval('offsetWidth / (dataset.width / dataset.height)')px;
    }
  }
</style>

Or write something like this in in Javascript:

<!-- Vanilla JS (support maybe IE9+) -->
<div data-width=16 data-height=9>With vanilla JS</div>
<script>
  function aspectRatio() {
    return document.querySelectorAll('[data-width][data-height]')
      .forEach(function(tag) {
        return tag.style.minHeight =
          tag.offsetWidth / (tag.dataset.width / tag.dataset.height) + 'px'
      })
  }
  window.addEventListener('load', aspectRatio)
  window.addEventListener('resize', aspectRatio)
</script>

So if you do test Aspecty and find there are any issues, my bet would be that either the EQCSS plugin for ease of developer experience, or handwritten JS for simplicity and performance will serve you slightly better than this plugin, but if it works as you want it in all the browsers you want it, that's great too :D

JiveDig commented

Thanks Tom, i'll try those. I'm using jQuery now (cause JS is my weakest language!) and was very excited to see Aspecty. Our theme uses lots of Flexbox CSS and we only support IE11+ anyway.

JiveDig commented

Okay wow Vanilla JS is working really well and a lot less code than my jQuery version. I'm going to close this, but I owe you a 🍺or ☕️! Your snippets were a great head start, very much appreciated!

  • ❤️1