CSS if() Multiple Conditions Examples

Demonstrating multiple conditions within a single if() function

1. Theme-Based Background Gradients

					background: if( style(--scheme: ice):
					linear-gradient(135deg, #caf0f8, white, #caf0f8);
					style(--scheme: fire): linear-gradient(135deg, #ffc971,
					white, #ffc971); style(--scheme: earth):
					linear-gradient(135deg, #8fbc8f, white, #8fbc8f); else:
					linear-gradient(135deg, #e0e0e0, white, #e0e0e0); );
				

This card's background changes based on the --scheme custom property!

2. Size-Based Typography

					font-size: if( style(--size: small): 14px; style(--size:
					medium): 18px; style(--size: large): 24px; style(--size:
					xlarge): 32px; else: 16px; );
				

This text size changes based on the --size custom property!

3. Theme-Based Colors

					color: if( style(--theme: dark): #e2e8f0; style(--theme:
					light): #2d3748; style(--theme: blue): #1e40af;
					style(--theme: green): #059669; else: #374151; );
				

This text adapts its color and background based on the --theme property!

4. Complex Border Styles

					border: if( style(--scheme: ice): 3px; style(--scheme:
					fire): 5px; style(--scheme: earth): 2px; else: 1px; ) if(
					style(--scheme: ice): solid; style(--scheme: fire): dashed;
					style(--scheme: earth): dotted; else: solid; ) if(
					style(--scheme: ice): #0ea5e9; style(--scheme: fire):
					#f97316; style(--scheme: earth): #65a30d; else: #6b7280; );
				

This border style changes completely based on the scheme!

5. Responsive Design with Multiple Breakpoints

					padding: if( media(width >= 1200px): 40px; media(width >=
					768px): 30px; media(width >= 480px): 20px; else: 15px; );
				

This element's padding and styling adapt to different screen sizes!

6. Progressive Enhancement with Feature Detection

					display: if( supports(display: subgrid): subgrid;
					supports(display: grid): grid; supports(display: flex):
					flex; else: block; );
				

This element uses the most advanced layout method available!

7. Accessibility-Aware Animations

					transition: if( media(prefers-reduced-motion: reduce): none;
					supports(transition): all 0.3s ease; else: none; );
				

Hover me! This respects your motion preferences.