DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
John Peters
John Peters

Posted on

CSS Annotations for Dynamic Styling

Consider this code:

      ...
      let css = `
           content:"21:appGrid:columns";
           display:grid;
           grid-template-columns: ${this.columns};
           grid-column-gap: ${this.columnGap};
          `;
      if(this.rows){ 
         css = `
           content: "28:appGrid:rows";
           display: grid;
           grid-template-rows: 14em 1fr;
         `;
      }
      //this is where we set style dynamically
      this.htmlElement.setAttribute("style", css);
Enter fullscreen mode Exit fullscreen mode

We are dynamically injecting a style to a particular HTMLElement. It allows us to pass in parameters etc. But what is the content: tag doing?

Did you know that content: tags are only applied to psuedo-css class elements?

We are hijacking this behavior to use the content: tag to annotate our dynamic content. The only requirement is that we don't use this with pseudo elements.

Alt Text

We now know that this dynamic style, was injected via javascript; coming from line 28: of our appGrid code, in the 'rows' part. It gives us a toehold to find the root cause of an injected style issue.

JWP2020

Top comments (0)

Image description

Join the One Year Club

You can earn this badge by being a registered member of the DEV Community for at least one year. Create an account and get started today.