Day 105: defining multiple syntax components

posted on 10.11.2023

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

As already explained on day 84, using the syntax descriptor, you can define the type of a custom property in an @property at-rule.

@property --lh {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

button {
  --lh: 1;
  line-height: var(--lh);
  transition: --lh 1s;
  width: min-content;
}

button:is(:focus-visible,:hover) {
  --lh: 2;
}

That works well, but some properties, like line-height, support different types of values.

If you use a length instead of a number, the transition doesn't work anymore because the provided value of the custom property must be valid as defined in the syntax descriptor.

@property --lh {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

button {
  --lh: 16px;

  line-height: var(--lh);
  transition: --lh 1s;
  width: min-content;
}

button:is(:focus-visible,:hover) {
  --lh: 32px;
}

The good news is you can define multiple syntax component names using the '|' Combinator

@property --lh {
  syntax: '<number> | <length-percentage>';
  inherits: false;
  initial-value: 1;
}

button {
  --lh: 16px;

  line-height: var(--lh);
  transition: --lh 1s;
  width: min-content;
}

button:is(:focus-visible,:hover) {
  --lh: 32px;
}

See on CodePen

Day 105: defining multiple syntax components

Further reading