Chrome 137? if () CSS ??? ?? ???? ?? ??????? ???? ?? ? ???? ??? ?? ? ?? ??? ??? ??? ?????. ?? ????, ()? ???? ?? ??? ??????, ?? ? ?? ?? (? : ??? ?? ? ??? -Dark () ??)? ?? ?? ? ??? ?? ???? ??? ? ???? ?????.

Sunkanmi? ??? ??? ?? ??? ??? ???? ???? ?? ???? ?????. ? ????? ?? ? ???? ??? ?? ???? ???? ????.

????, If ()? CSS ??? ?? ?? ??? ?? ???? ?????. ?? ??, value? ?? ?? ?? ? ?? ??? ?? ?? ?? ? ? ????.

• -?? : "Shamrock"
  • ?? : ?HSL (146 50% 3%)
  • ?? : HSL (146 50% 40%)
• -?? : ?? ?
  • ?? : HSL (43 74% 3%)
  • ?? : HSL (43 74% 64%)

 : ?? {
  / * 'else'??? ?? ?? ?? ?? */
  -?? : "Shamrock";

  ? {
    ?? : if (??? (-?? : "Shamrock") : HSL (146 50% 3%); else : HSL (43 74% 3%));
    ?? : if (??? (-?? : "Shamrock") : HSL (146 50% 40%); else : HSL (43 74% 64%);
  }
}

?? ?? (?? ?? ??, ?? ?)? ???? ???, ??? ???? ?? ? ? ???? (?? ? ????? ?????).

 ?? : if (
  ??? (-?? : "Shamrock") : HSL (146 50% 3%);
  else : HSL (43 74% 3%)
);

??? if ()? ?? ?? ?? ?? ? ? ?????, ?? ? ?????? ????. ??? ?? ??? ???? ???? ?? ??? ??? ???? ?? ???????. ???? CSS ?? (??? ?? ?? ??), HTML ?? (attr () ??) ?? ?? ?? ?? ???? ? ? ????. ????? ??? ??? ?? ?? (CSS ??)? ?? ?????????.

??? ? ??? ?? ?? if ()

? ?? ??? ????, ??? if () ?? (? ?? ?? ???)? ??? ? ??? ?????. ?? ?? Light-Dark () ??? ??? ? ??? ??? ???? ?? ??? ??? ????????? ??, ()? ()? ??? ? ???.

?? ? ?? ??/? ?? ??? ??? ???.

 : ?? {
  /* Shamrock | ??? | ??? */
  -?? : "???"; /* ... ?? ??? ?????! */

  ? {
    ?? : if (
      ??? (-?? : "Shamrock") : HSL (146 50% 3%);
      ??? (-?? : "???") : HSL (43 74% 3%);
      ??? (-?? : "Amethyst") : HSL (282 47% 3%)
    );
    ?? : if (
      ??? (-?? : "Shamrock") : HSL (146 50% 40%);
      ??? (-?? : "???") : HSL (43 74% 64%);
      ??? (-?? : "Amethyst") : HSL (282 47% 56%)
    );
    ?? : 300ms;
  }
}

?? ????? ? ?? ?? ??? ????. ??, ???? "?? ??"? ???? ??? Shamrock, Saffron ?? Amethyst? ?? ?? ?? ???? ???? ?????. ??? ???, if () ??? ? ?? ??? ??? ???? ,? ?? ??? ?????. ??, ??? ?? ??? ?? ?????. ?? ????? -theme? ?????? ??? ?????? ???? ??? ?? ?? ??? ?? : if () ??? ?? 300ms :

?? : ?? ??? ?? ?? ??? ??? ?? ? ?? ??? ()? ???? ????. ??? ?? ???? ?? ??? ??? ??? ? ???? (: root : has (#shamrock : checked) { / * Styles * /}). Amit Sheen? Smashing Magazine?? ??? ??? ??? ????.

??? ??? ?? ?? ???? ?? ??? CSS ??? ???? ? ?? if () ???? ??? ?? if () ?? ??? CSS ??? ?? ?? ? ????.

 /* ?? */
: ?? {
  /* Shamrock | ??? | ??? */
  -?? : "Shamrock"; /* ... ?? ??? ?????! */

  / * ?? ?? */
  -?? : HSL (146 50% 40%);
  -Saffron : HSL (43 74% 64%);
  -Amethyst : HSL (282 47% 56%);

  / * ?? ????? 3% ??? */
  -Shamrock-Comprementary : HSL (Var (-Shamrock) HS 3%);
  -Saffron-comprementary : HSL (VAR (-Saffron) HS 3%);
  -Amethyst-Comprementary : HSL (Var (-Amethyst) HS 3%);

  -? ?? : if (
    ??? (-?? : "Shamrock") : var (-Shamrock);
    ??? (-?? : "???") : var (-saffron);
    ??? (-?? : "amethyst") : var (-Amethyst)
  );

  -?? : if (
    ??? (-?? : "Shamrock") : var (-Shamrock-Comprementary);
    ??? (-?? : "???") : var (-Saffron-comprementary);
    ??? (-?? : "Amethyst") : var (-Amethyst-Comprementary)
  );

  /* ?? */
  ? {
    /* ??? ??, ?? IFS! */
    ?? : var (-??);
    ?? : var (-??);
    Accent-Color : var (-??);

    /* ??? ?? ? ????! */
    ?? : 300ms;
  }
}

if () ?? ??? CSS ??? ???? ??? ??? ?? ??? ?? ? ?? ????. ??? ???? ????? ??? ??? ??? ????? Light-Dark ()? ?????.

 -? ?? : if (
  ??? (-?? : "Shamrock") : Light-Dark (var (-Shamrock), var (-Shamrock-comprementary);
  ??? (-?? : "???") : Light-Dark (var (-saffron), var (-saffron-comprementary);
  ??? (-?? : "Amethyst") : Light-Dark (var (-Amethyst), var (-Amethyst-Comprementary))
);

if () ? ???? ??? ??

??? ???? ??? ??? ???? ?? ?? ????? ????? ?? CSS ?? (if () ??? ??)? ??? ?????. ??? ??? ??? ??/????? if () ?? ?? ???? ??? ??? ????.

 : ?? {
  /* Shamrock | ??? | ??? */
  -?? : "Shamrock"; /* ... ?? ??? ?????! */

  -?? : HSL (146 50% 40%);
  -Saffron : HSL (43 74% 64%);
  -Amethyst : HSL (282 47% 56%);

  -Shamrock-Comprementary : HSL (Var (-Shamrock) HS 3%);
  -Saffron-comprementary : HSL (VAR (-Saffron) HS 3%);
  -Amethyst-Comprementary : HSL (Var (-Amethyst) HS 3%);

  ? {
    /* ????? Shamrock? ??????! */
    @Container Style (-?? : "Shamrock") {
      -?? : ??? ?? (var (-Shamrock), var (-Shamrock-comprementary);
      -?? : ??? ?? (var (-Shamrock-comprementary), var (-Shamrock));
    }

    @Container Style (-?? : "Saffron") {
      -?? : ??? ??? (var (-saffron), var (-saffron-comprementary);
      -?? : ??? ??? (var (-saffron-comprementary), var (-saffron));
    }

    @Container Style (-?? : "Amethyst") {
      -?? : ??? ?? (var (-amethyst), var (-amethyst-comprementary));
      -?? : ??? ?? (var (-Amethyst-Comprementary), var (-amethyst));
    }

    ?? : var (-??);
    ?? : var (-??);
    Accent-Color : var (-??);
    ?? : 300ms;
  }
}

?????, if ()? ??? ?? ?????? ?, ???? ??? ??? ??? ?? ? ?? ???????. ? ??? ??? ?? ?????.

if ()? ? ??? ?? ?? (??? ??? ?? ?? ??)

CSS ??? ??? ??????.

 / * ??? ???? ?? ?? ??? ??? */
.Icon {
  ????? : if (
    ??? (-??? ??) : ??? ??;
    else : ??
  );
}

?? ??? ??? ??? ??????.

 H1 {
  ?? ?? : if (
    ??? (-?? ?? : true) : xxx-large;
    ??? (-?? : "ThemeWithLargerHeadings") : xxx-large
  );
}

? CSS ?? ????? ??????.

 / * #S2? #S1? ??? ??? ?? ?? ???? ?????? */
#s2 {
  ??? ? : if (
    ??? (-S2-Background : var (-s1-background)) : ?? ??? ???
  );
}

if () ? calc () : ??? ??? ?? ??

??? ???? ?? ???? (???? ? ??? ??? ???? ? ??? ? ? ????) :

 div {
  / * 3/3 = 1 */
  -Calc : calc (3/3);
  / * Blue, if ()? ???? ?? ??? -calc */
  ?? : if (style (-calc : 1) : ???; else : blue);
}

if ()? ????? @property? ?? ???? CSS ??? ??? ?? ???????.

 @property -calc {
  ?? : "<number> ";
  ?? ? : 0;
  ?? : ??;
}</number>

?? ??

?? ??? ???? ??? ??? ? ??? ?? (?? ? ?? ????? ??)??? ()? ??? ()? ???? ??? ???? ????. ?? ??? ? CSS ??? ???? ??? ???? ?? (? : ?? : if (style : ??) : ?? ?; ??? (?? : ??) : ?? ?; ??? (?? : ???) : ??)? ??? ? ??? ????.

calc () ??? ??? ???? ??? ?? ??? ? ??? ?????.

?, ?? ??? ()? ???? ?? ??? ?? ???? ? ??? ??? ???? ????? ??? ? ????.

? ??? CSS?? Poking the () ??? ?? ? ?? : ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!