<div dir="ltr"><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Thu, Nov 7, 2019 at 11:11 AM Dave Townsend <<a href="mailto:dtownsend@mozilla.com" target="_blank">dtownsend@mozilla.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>So as we move away from XUL elements we're going to have to consider what to do about some of the element attributes that XUL currently uses to apply style effects to the element. Things like orient, pack, align, flex. All of these already have CSS equivalents (both for the XUL box model and HTML flex) but as we switch to HTML elements the attributes will no longer be read by the platform.</div><div><br></div><div>There are a couple of things we could switch to and I'd like to hear thoughts from the front-end team:</div><div><br></div><div>One is to switch them all to the style properties instead, so <box style="-moz-box-orient: 'vertical'/>.</div></div></blockquote><div><br></div><div><div style="font-family:arial,helvetica,sans-serif" class="gmail_default">Note that this would interfere with disallowing 'unsafe-inline' in a Content Security Policy so we'd have to be careful with that and consider whether it makes more work to enforce CSP on more documents later. This could be fine as a migration step for existing UI if it helps with issues of specificity but perhaps we could try to avoid this for new UI.<br></div></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>Another is to require content stylesheets for every element used in this way.</div></div></blockquote><div><br></div><div><div style="font-family:arial,helvetica,sans-serif" class="gmail_default">I believe there is a fair amount of new UI already created which doesn't rely on these attributes (e.g. about:logins) and I haven't felt like it was a burden.<br></div></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>The other is to define some default CSS rules applied based on attribute: [orient="vertical"] { -moz-box-orient: vertical } This works for attributes with a finite set of options but it would be harder to use this for flex or ordinal (unless the platform team end up implementing attr() support.</div></div></blockquote><div> </div><div><div style="font-family:arial,helvetica,sans-serif" class="gmail_default">I would prefer this over @style for doing a mass transition (since it doesn't have the problem of CSP) if performance concerns can be addressed.<br></div></div><div><br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div></div><div>Bear in mind that this doesn't just apply to markup, we set some of these properties from JS too.</div><div><br></div><div>What alternatives sound good?<br></div></div></blockquote><div><br></div><div style="font-family:arial,helvetica,sans-serif" class="gmail_default">I think the high level question is whether we want to continue using content attributes for this kind of styling in the future or whether we're fine using stylesheets for it. Personally I don't find that the content attributes in question significantly ease UI development (some could argue that they complicate it since some styling is via CSS and others via attributes) so I'd be fine with requiring the use of these properties from custom rules in stylesheets (at least in new UI) for new code. <br></div></div></div>