@@ -100,7 +100,7 @@ import { processCSSText } from "css-if-polyfill";
100100
101101const css = " .button { color: if(media(width >= 768px): blue; else: red); }" ;
102102const processed = processCSSText (css);
103- console .log (processed); // .button { color: blue ; } (if screen >= 768px)
103+ console .log (processed); // .button { color: red ; } @media(width >= 768px) { .button { color: blue; } }
104104```
105105
106106## CSS if() Syntax
@@ -141,19 +141,19 @@ Use if() functions within CSS shorthand properties:
141141 border : if(
142142 style (--scheme: ice): 3px ; style (--scheme : fire): 5px ; else : 1px ;
143143 )
144- if (supports (border-style : dashed ): dashed ; else : solid ; )
144+ if (supports (border-style : dashed ): dashed ; else : solid )
145145 if (
146146 style (--scheme : ice): #0ea5e9 ; style (--scheme : fire): #f97316 ;
147- else : #6b7280 ;
147+ else : #6b7280
148148 );
149149
150150 /* Font shorthand with multiple conditions */
151151 font :
152152 if(
153153 media(width >= 1200px ): bold ; media (width >= 768px ): 600 ;
154- else : normal ;
154+ else : normal
155155 )
156- if (media (width >= 768px ): 18px ; else : 14px ; ) / 1.5 system-ui ,
156+ if (media (width >= 768px ): 18px ; else : 14px ) / 1.5 system-ui ,
157157 sans-serif ;
158158}
159159```
@@ -165,7 +165,7 @@ Use if() functions within CSS shorthand properties:
165165``` css
166166.responsive-text {
167167 font-size : if(
168- media(width >= 1200px ): 24px ; media (width >= 768px ): 18px ; else : 16px ;
168+ media(width >= 1200px ): 24px ; media (width >= 768px ): 18px ; else : 16px
169169 );
170170}
171171```
@@ -176,7 +176,7 @@ Use if() functions within CSS shorthand properties:
176176.modern-layout {
177177 display : if(
178178 supports(display: subgrid ): subgrid ; supports (display : grid ): grid ;
179- supports (display : flex ): flex ; else : block ;
179+ supports (display : flex ): flex ; else : block
180180 );
181181}
182182```
@@ -187,7 +187,7 @@ Use if() functions within CSS shorthand properties:
187187.theme-aware {
188188 color : if(
189189 style (--theme: dark ): white ; style (--theme : light ): black ;
190- style (--theme : blue ): #1e40af ; else : #374151 ;
190+ style (--theme : blue ): #1e40af ; else : #374151
191191 );
192192}
193193```
0 commit comments