??? ?? ? ? ?? ??? ?? ???? CSS if () ??? ????? Chrome 137 ???? ???????. CSSWG? 1 ? ?? ????? ?? ? ??? ?? ??? ?? ?????. ??? ????? ?? ??? ?, ?? ?? CSS?? ????? ??? ?? ???? ?? ??? ??? ?? ?? ?? ? ?? ?? ?? ? ??? ??? ? ????. ??? ?? ??? ????!

?? CSS? ?? ??? ?? ???? ?? ??? ?? ???, CSS? ????? ???? ??? ???? ??? ???. Chris? ?? ? ???? ?? ??? ??? ?? ? ? ??? ??? ????.

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

?, ?? ?? ????!

CSS? ?? ?? ??? ??? ?????. CSS? At-rules?? ?? ?? ? ?? ??? DOM? ???? ?? ????? ?? ???? ?????. ??? Lea Verou? ?? ???, ?? ???? ????? ??????! ??? ??? ??? ?? ?? ?? ? ?? ?? ??? ?? ??? ???? ? ?? ???? ??? ????????.

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

 .?? {
  ?? : if (??? (-?? : ??) : Oklch (52% 0.18 140); else : oklch (65% 0.05 220);
}

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

Chrome? ?? ?? ? 2021 ? ?? ??? ???? ?? ?? ??? ??? ????.

<if> = if (<container-query> ,, [<declaration-value> ] {1, 2})</declaration-value></container-query></if>

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

<if> = if (
  [? ?<if-statement> :<result> ]*;
  <if-statement>:<result> ;?
))</result></if-statement></result></if-statement></if>

??…

• ? ?? eitherstyle (), media (), orsupports () ?? ?? ??? ??? ?????. ??? ??? ????? ?? IF ??? ? ??????. ?, ??? ? ?? ????. ??? ?????!
• ??? ?? (else)? ?? ?? IF ?? ?? ? ? ??????.

??? ??? ?? "??"?????. ??? ????? ????.

<if> = if ([[<if-branch> ; ]*<if-branch> ;? ))
<if-branch> =<if-condition> :<declaration-value> ?
<if-condition> = <boolean-expr> ]> | ? ??
<if-test> =
  ?? ([[<ident> :<declaration-value> ] |<supports-condition> ))
  ???(<media-feature> |<media-condition> ) |
  ???(<style-query> ))</style-query></media-condition></media-feature></supports-condition></declaration-value></ident></if-test></boolean-expr></if-condition></declaration-value></if-condition></if-branch></if-branch></if-branch></if>

??? ??? ??? ??? ??? ?? ?? ?????. ??? ?? ? ???? ?? ?? ??? ???? ??? ?? ? ???. ??? Asttyle () ????? if () ?? ??? ???? ??? ?? ??? ?? ??? ???? ??? ?????. ? ?? ???? ?? ???? ???? ??? ?? ??.

 .?? {
  ?? : if (??? (-?? : ??) : 2rem; else : 3rem);
}

?? ?? ??? TO2REM ?? ?????. ??? ??? ???? 3REM???. ?? ??? ??? ??? ??? ??? ?? ??? ???? ?? ??? ?? ?? ????? ???? ????.

??? ???? ?????!

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

 : ?? {
  -?? : 12.5REM;
  -width : 4rem;
  -?? : 2REM;
}

.?? {
  ?? : if (
    ??? (-?? : 3REM) : 14.5REM; ??? (-?? : 7rem) : 10rem; ??? (-?? : 100REM) : 2REM; else : var (-??)
  );
}

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

?? ??, ?? ? ?? ???? ?? ??? ???? ??? ?? ?? ? ????.

 : ?? {
  -?? : 12.5REM;
  -width : 4rem;
  -?? : 2REM;
}

/* ??? ?? ????? ?????? ????? */
.?? {
  ?? : if (
    ??? (-?? : 3REM) : 14.5REM; 
    ??? (-?? : 7rem) : 10rem; 
    ??? (-?? : 100REM) : 2REM; 
    else : var (-??)
  );
}

?? ??? ??, ??? ? ?? ?? ?? ???? ??? ??? ??? ? ????. ??? ?? ??. ??? ??? ?? ????? ????? ????. ??? ??? ??? ??? , ?? ???? ?????? ????.

? ????? ?? ???? ?? CSS?? ?? ???? ???? ?? ?????. ?? ??? ?? ??? ?? ?? ? ??? ?? ?????. ? ?? ?? ???? Chrome 137??? ????? ?? ???????.

?? () ? media () ?

OfSupports ()?@supportsat-rule? ???? ?? ?? ???? ??????. ??, ??? ??? ????? ???? ?????.

 / * @Supports? ?? ?? */
@supports<supports-condition> {{
  <rule-list>
}

/ * supports () */? ?? ?? ??
?? ([[<ident> :<declaration-value> ] |<supports-condition> ))</supports-condition></declaration-value></ident></rule-list></supports-condition>

??? ??? ???? supports ()? ?? ??? ???? ?? ?? ????? ????. ??? ??? ?? ???? ??? ??????

??? : ? ?? ?? ?? : ?? ? ? : Display : Flex.

Backdrop-FilterProperty, ?? theBlur () ??? ?? ??? ???? ??? ?? ? ???. ?????@supports ?? ??? ?? ? ? ????.

 / * ????? ?? ??? ???? ?? ?? */
.card {
  ?? ?? : Unset;
  ??? : Oklch (20% 50% 40% / 0.8);
}

@supports (?? ?? : Blur (10px)) {
  .card {
    ?? ?? : ?? (10px);
    ??? : Oklch (20% 50% 40% / 0.8);
  }
}

??? cssif ()? ???? ??? ?? ? ? ????.

 .card {
  ?? ?? : if (
    ??? (?? ?? : Blur (10px)) : Blur (10px);
    else : unset
  );
}

?? : ???? ??? ??? ????? ??? ???? ??????.

??? ????? Forsupports () ? ???? ???? ??? ?? ??? ??? ? ????. ?? ??:

 .card {
  ?? ?? : if (
    ??? (?? ?? : Blur (10px)) : Blur (10px);
    ??? (?? ?? : ?? (50%)) : ?? (50%);
    ??? (?? ?? : Hue-Rotate (230deg)) : Hue-Rotate (230deg) ;;
    else : unset
  );
}

??@media at-rule? ???? ?? ??? ???? ??? ? ??? ???? ???? ?? ??? ?? ???? ??? ???? ??? ???? ???? ???? ????.

 H1 {
  ?? ?? : 2REM;
}

@Media (min-width : 768px) {
  H1 {
    ?? ?? : 2.5REM;
  }
}

@Media (min-width : 1200px) {
  H1 {
    ?? ?? : 3REM;
  }
}

Themedia () ??? At-Rule ??? ?? ?? ???? ?????. ??? ??? ??????.

 / * @Media? ?? ?? */
@???<media-query-list> {{
  <rule-list>
}

/ * media () */?? ??
???(<media-feature> |<media-condition> ))</media-condition></media-feature></rule-list></media-query-list>

??? ??? ?? ?? ( )? Themedia () ??? ??? ?????. ???@????? ?? ??? ???? ?? CSS Inlineif ()?? ?? ?? ???? ????.

 H1 {
  ?? ?? : if (
    ??? (??> = 1200px) : 3REM;
    ??? (??> = 768px) : 2.5rem;
    else : 2rem
  );
}

??, ??? ?????

? ?? ?? ???? Chrome? ?? ???? ? if ())? ?????. ?? ??? ??? ??? ?? ????? ??? ?? ???? ?????. ?? ??? ? ??????. ???? ?? ?????? ???? ?? ???? ?? ?? ??? ?????.

• The What If Machine : CSS? "Iffy"??? ??? ?? ?? (Lee Meyer)
• CSS (Temani AFIF)?? () IF ()? ???? ???? ??
• ?? ?? ?? ??? ?? (Roma Komarov)
• CSS? ??? if () ??? ?? ?? (Amit Merchant)? ??????.

?? ??? ???? ?? CSS ??? ???? ?????. ?? ???? ?? CSSWG ? Chromium? ???? ??????. ?? ??? ???? ?? ??? ?? ? ? ??? ? ?? ????.

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

? ??? ?? 137?? CSS () ??? ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!