Page 1 of 1

CSS Sins

Posted: Sat Feb 23, 2019 12:11 am UTC
by Xanthir
In response to a tweet complaining about non-ASCII characters in JS identifiers from earlier today, I posted the following:

@tabatkins said:

Code: Select all

.ಠ_ಠ { --(╯°□°)╯: ︵┻━┻; } is valid CSS.



Someone then responded that it would be great if that actually flipped a <table>, so I continued to sin:

@tabatkins said:

Code: Select all

registerLayout("table-like", class {
  static inputProperties = ["--(╯°□°)╯"];
  async layout(ch, e, c, props) {
    if(props.get("--(╯°□°)╯").value == "︵┻━┻") {
      // layout upside-down
    } else {
      // layout normally
    }
  }
}



@tabatkins said:

Code: Select all

Plus, in your main page:

CSS.registerProperty({
  name: "--(╯°□°)╯",
  syntax: "┬──┬ | ︵┻━┻",
  initialValue: "┬──┬",
  inherits: false
});



I HAVE TURNED AWAY FROM GOD

Re: CSS Sins

Posted: Mon Feb 25, 2019 9:27 am UTC
by Tub
Can you please make that css crash the browser? I feel like it should crash the browser.

Re: CSS Sins

Posted: Mon Feb 25, 2019 12:31 pm UTC
by Xenomortis
Dr. Ian Malcolm wrote:Your scientists were so preoccupied with whether they could, they didn't stop to think if they should.

Re: CSS Sins

Posted: Mon Feb 25, 2019 2:14 pm UTC
by commodorejohn
I admire its...purity.

Re: CSS Sins

Posted: Mon Feb 25, 2019 7:03 pm UTC
by Xanthir
There's not *actually* anything particularly weird there, it's just a result of the fact that CSS allows any non-ASCII character to form an ident token (along with ASCII alphanums, dashes, and underscores), which class selectors, property names, and keywords are all made from. So "ಠ_ಠ" is an ident, "--(╯°□°)╯" is an ident (if you're careful to use ideographic parentheses; it won't work with ASCII parens), and then ︵┻━┻ and ┬──┬ are idents.

Probably the odder part is that it uses a custom property, whose only constraint is that it has to be an ident that starts with two dashes. That's what lets the whole thing look so... odd in CSS.