CSS Data Type - <dashed-ident>

CSS data type <dashed-ident> represents any string that behaves as an identifier, generally formatted with dashes.

Syntax

The syntax of <dashed-ident> is similar to the CSS identifiers, such as property names, but it is case-sensitive. It initiates with two dashes, followed by the user-defined identifier. An example as shown below:

body {
   --green-color: green;
   --pink-color: pink;
   --blue-color: blue;
}

The double dash at the start of a CSS code block makes it easily recognizable and prevents name clashes with standard CSS keywords.

Like <custom-ident>, <dashed-ident> are defined by the user, but CSS does not define <dashed-ident>.

CSS <dashed-ident> - With Custom Properties

The following example demonstrates using <dashed-ident> with custom property. Here we use the var() function to access its value −

<html>
<head>
<style>
   body {
      --green-color: green;
      --pink-color: pink;
      --blue-color: blue;
   }
   h1,h4 {
      color: var(--green-color);
   }
   h2,h5 {
      color: var(--pink-color);
   }
   h3,h6 {
      color: var(--blue-color);
   }
</style>
</head>
<body>
   <h6>Heading h6</h6>
   <h5>Heading h5</h5>
   <h4>Heading h4</h4>
   <h3>Heading h3</h3>
   <h2>Heading h2</h2>
   <h1>Heading h1</h1>
</body>
</html>

CSS <dashed-ident> - With @color-profile

When using <dashed-ident> with a CSS color() function, the @color-profile at-rule must be declared first. −

@color-profile --my-color-profile {
   src: url(""https://example.com/your-color-profile.icc");
}
.box {
   background-color: color(--my-color-profile 0% 60% 30% 0%);
}

CSS <dashed-ident> - With @font-palette-values

The following example demonstrates the use of the <dashed-ident> is used with the @font-palette-values at-rule, the at-rule is declared first and then used to set the font-palette property. −

<html>
<head>
<style>
   @font-palette-values MyCustomFontPalette {
      primary-font: 'Arial', sans-serif;
      accent-font: 'Georgia', serif;
      heading-font: 'Helvetica', sans-serif;
   }
   h1,h2,h3,h4 {
      font-palette: MyCustomFontPalette;
      font: 20px MyCustomFontPalette('primary-font');
      color: red;
   }
</style>
</head>
<body>
   <h1>This is a heading</h1>
   <h2>Another heading</h2>
   <h3>Yet another heading</h3>
   <h4>One more heading</h4>
</body>
</html>
Advertisements