CSS if() Polyfill

1. Responsive Typography

.responsive-text {
font-size: if(media(width >= 768px): 24px; else: 16px);
color: if(media(width >= 768px): #333; else: #666);
}

This text changes size and color based on screen width!

2. Grid with Flexbox Fallback

.grid-fallback {
  display: if(supports(display: grid): grid; else: flex);
  gap: if(supports(gap): 20px; else: 0);
  grid-template-columns: if(supports(display: grid): repeat(3, 1fr));
}

Item 1

Item 2

Item 3

3. Custom Properties Support Detection

.custom-property-check {
background-color: if(supports(--custom: value): #4caf50; else: #f44336);
color: white;
}

CSS Custom Properties: Checking...

4. Dark Mode Support

Whereas technically possible, it might be much easier and stable to use the standarized and well supported light-dark CSS function for this.

.theme-aware {
background-color: if(media(prefers-color-scheme: dark): #333; else: #fff);
color: if(media(prefers-color-scheme: dark): #fff; else: #333);
}

This element adapts to your system's dark mode preference!

5. Hover Effects with Fallback

.hover-effect {
background-color: if(supports(:hover): #2196f3; else: #90caf9);
transform: if(supports(transform): translateY(-2px));
}

Hover over me! (Fallback styling for touch devices)

6. Manual CSS Processing

.test { color: if(style(--true): red; else: blue); background: if(false: white; else: yellow); }