New CSS and change to scripting

Hi, So I'm developing an updated version of my sheet and I discover that there have been changes to the Roll20 CSS and HTML sheet scripting. I am a little confused as to what these changes are and how they actually work? I find the documentation is not great at giving an example of how the code has changed? For example I'm currently working of tabs for my sheet, but this code no longer works and I can't understand why it doesn't under the new system: .charsheet-banner{ background-image: url(<a href="https://i.pinimg.com/564x/ad/ce/f3/adcef371d608bdabd95fca1ee9a37ec4.jpg" rel="nofollow">https://i.pinimg.com/564x/ad/ce/f3/adcef371d608bdabd95fca1ee9a37ec4.jpg</a>); background-color: white; background-size: 50% 100%; background-position: center top; background-repeat: no-repeat; text-align: center; } .charsheet-attributes, .charsheet-attacks, .charsheet-abilities, .charsheet-transformations { display: none; } /* show the selected tab */ .charsheet-tabstoggle[value="attributes"] ~ div.sheet-attributes, .charsheet-tabstoggle[value="attacks"] ~ div.sheet-attacks, .charsheet-tabstoggle[value="abilities"] ~ div.sheet-abilities, .charsheet-tabstoggle[value="transformations"] ~ div.sheet-transformations { display: block; } &lt;div class="banner"&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;button type="action" name="act_attributes" &gt;Attributes&lt;/button&gt; &lt;button type="action" name="act_attacks" &gt;Attacks&lt;/button&gt; &lt;button type="action" name="act_abilities"&gt;Abilities&lt;/button&gt; &lt;button type="action" name="act_transformations"&gt;Transformations&lt;/button&gt; &lt;/div&gt; &lt;input type='hidden' class='tabstoggle' name='attr_sheetTab' value='attributes' /&gt; &lt;br&gt; &lt;!--The attributes division that creates all of the attributes input for the players--&gt; &lt;div class="attributes"&gt; &lt;input type="number" /&gt; &lt;/div&gt; &lt;div class="attacks"&gt; &lt;input type="text" /&gt; &lt;/div&gt; &lt;div class="abilities"&gt; &lt;input type="checkbox" /&gt; &lt;/div&gt; &lt;div class="transformations"&gt; &lt;input type="button" /&gt; &lt;/div&gt; I know the CSS interpreter has changed to allow for more regular CSS and HTML, but what that entails is beyond me.

If that is in a custom sheet you need to make sure the legacy checkbox is checked or add "sheet-" to all the classes in the html.&nbsp;&nbsp;

If you haven't checked the article on CSE, it seems to lay out differences. <a href="https://wiki.roll20.net/Character_Sheet_Enhancement" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Enhancement</a>

In addition to the advice from David and Kraynic, you've got a problem with your CSS that would be a problem with the new CSE or the old Legacy methods. In your CSS, you are using .charsheet- ClassName , but all of your classes in the html are just className . As an example, look at your banner which is class="banner" , but your CSS declaration is .charsheet-banner . Under the legacy method, you would leave your html classes as they are, but you'd invoke them in the CSS by prepending sheet- &nbsp;to them (e.g. .sheet-banner ). If you use the new CSE methods, you would not prepend with .sheet- &nbsp;(e.g. just .banner ). The CSE sanitizer also does not prepend the CSS declarations with .charsheet &nbsp;now, so sometimes you can run into specificity issues where legacy code was specific enough to override Roll20 default styles, but the CSE code is not because it is missing an additional class declaration that was there under the legacy sanitizer. E.g. in legacy, a CSS declaration like .sheet-banner &nbsp;would actually become .charsheet .sheet-banner &nbsp;when it was parsed into the actual game. Under CSE, that same declaration remains just .sheet-banner in the actual game.

Thank you all for the replies, they have been very helpful in helping me understand what has changed!