Day 105: defining multiple syntax components

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

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;
}

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-11-10T00:00:00+00:00) Day 105: defining multiple syntax components. Retrieved from https://www.scien.cx/2023/11/10/day-105-defining-multiple-syntax-components/

MLA

" » Day 105: defining multiple syntax components." Manuel Matuzović | Sciencx - Friday November 10, 2023, https://www.scien.cx/2023/11/10/day-105-defining-multiple-syntax-components/

HARVARD

Manuel Matuzović | Sciencx Friday November 10, 2023 » Day 105: defining multiple syntax components., viewed ,<https://www.scien.cx/2023/11/10/day-105-defining-multiple-syntax-components/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 105: defining multiple syntax components. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/11/10/day-105-defining-multiple-syntax-components/

CHICAGO

" » Day 105: defining multiple syntax components." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/11/10/day-105-defining-multiple-syntax-components/

IEEE

" » Day 105: defining multiple syntax components." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/11/10/day-105-defining-multiple-syntax-components/. [Accessed: ]

rf:citation

» Day 105: defining multiple syntax components | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/11/10/day-105-defining-multiple-syntax-components/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.