CSSFunctionDeclarations

Experimental:

CSSFunctionDeclarations CSS @function CSS

CSS @function results @media CSSFunctionDeclarations CSSFunctionDeclarations

CSSRule CSSFunctionDeclarations

CSSRule

CSSFunctionDeclarations.style: @function CSSFunctionDescriptors

`CSSFunctionDeclarations`

CSS CSSOM

CSS

CSS @function --lighter() --lighter() 2 <color> <number> oklch() oklch()

css

@function --lighter(--color <color>, --lightness-adjust <number>: 0.2) returns
  <color> {
  --someVar: 100;
  result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
}

--someVar @function

JavaScript

HTMLStyleElement.sheet CSSStylesheet.cssRules CSSFunctionRule

CSSFunctionDeclarations cssRules[0] CSSFunctionDeclarations.style

// CSSFunctionRule 
const cssFunc = document.getElementById("css-output").sheet.cssRules[0];

// CSSFunctionDeclarations  CSSFunctionDescriptors 
console.log(cssFunc.cssRules[0]); // CSSFunctionDeclarations
console.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[0].style.length);
console.log(cssFunc.cssRules[0].style.result);

length 2 2 --someVar: 100; result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
result @function result oklch(from var(--color) calc(l + var(--lightness-adjust)) c h)

`CSSFunctionDeclarations`

@media 2 CSSFunctionDeclarations

CSS

CSS @function --bar() @media

css

@function --bar() {
  --x: 42;
  result: var(--y);
  @media (width > 1000px) {
    /* ... */
  }
  --y: var(--x);
}

JavaScript

HTMLStyleElement.sheet CSSStylesheet.cssRules CSSFunctionRule

CSSGroupingRule.cssRules 3 CSSRuleList

CSSFunctionDeclarations --x: 42;result: var(--y);
CSSMediaRule @media
2 CSSFunctionDeclarations --y: var(--x);

// CSSFunctionRule 
const cssFunc = document.getElementById("css-output").sheet.cssRules[0];

//  CSSFunctionDeclarations 
console.log(cssFunc.cssRules);

CSSFunctionDeclarations style CSSFunctionDescriptors CSSFunctionDescriptors.result

console.log(cssFunc.cssRules[0]); // 1  CSSFunctionDeclarations
console.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[0].style.result);

console.log(cssFunc.cssRules[2]); // 2  CSSFunctionDeclarations
console.log(cssFunc.cssRules[2].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[2].style.result);

2 result 2 result


CSS Functions and Mixins Module # the-function-declarations-interface

MDN

202625 MDN

GitHub