Enhanced CSS if() Examples - Shorthand Properties

1. Multiple Border Conditions

					border: if( media(width >= 1200px): 4px; media(width >=
					768px): 2px; else: 1px ) if( supports(border-style: dashed):
					dashed; else: solid ) if( media(prefers-color-scheme: dark):
					#fff; else: #333 );
				

This element has a border with width, style, and color determined by multiple if() functions!

2. Responsive Margin with Auto Centering

					margin: if( media(width >= 1024px): 40px; media(width >=
					768px): 20px; else: 10px ) if( supports(margin-inline:
					20px): auto; else: 0 );
				

Responsive margins with conditional auto-centering

3. Dynamic Font Shorthand

					font: if( supports(font-variation-settings: "wght" 400):
					600; else: bold ) if( media(width >= 768px): 24px; else:
					18px ) if( media(width >= 768px): 1.6; else: 1.4 ) if(
					supports(font-family: system-ui): system-ui; else: Arial ),
					sans-serif;
				

This text uses a complex font shorthand with multiple conditional values for weight, size, line-height, and family!

4. Conditional Background Shorthand

					background: if( media(prefers-color-scheme: dark): #2d3748;
					else: #ffffff ) if( supports(background-image:
					linear-gradient(45deg, red, blue)): linear-gradient(45deg,
					transparent, rgba(0, 122, 204, 0.1)); else: none ) if(
					media(width >= 768px): no-repeat; else: repeat ) if(
					media(width >= 768px): center; else: top left );
				

Background with conditional color, gradient, repeat, and position values

5. Layered Box Shadow

					box-shadow: if( supports(box-shadow: 0 0 0 rgba(0,0,0,0.1)):
					0 4px 6px rgba(0, 0, 0, 0.1); else: none ), if( media(width
					>= 768px): 0 10px 15px rgba(0, 0, 0, 0.1); else: 0 2px 4px
					rgba(0, 0, 0, 0.1) ), if( supports(box-shadow: inset 0 0 0
					rgba(0,0,0,0.1)): inset 0 1px 0 rgba(255, 255, 255, 0.1);
					else: none );
				

Multiple conditional shadow layers for enhanced depth

6. Multi-Operation Transform

					transform: if( supports(transform: scale(1)): scale(1.05);
					else: none ) if( media(width >= 768px): translateY(-5px);
					else: translateY(0) ) if( supports(transform: rotate(0deg)):
					rotate(2deg); else: none );
				

Hover me! Multiple transform operations with conditional support

7. Adaptive Grid Layout

					grid-template-columns: if( media(width >= 1200px): repeat(4,
					1fr); media(width >= 768px): repeat(2, 1fr); else: 1fr );
				

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

8. Advanced Text Decoration

					text-decoration: if( supports(text-decoration-line:
					underline): underline; else: none ) if(
					supports(text-decoration-style: wavy): wavy; else: solid )
					if( supports(text-decoration-color: red): #007acc; else:
					currentColor );
				

This text has conditional decoration with line, style, and color

9. Conditional Outline

					outline: if( supports(outline-offset): 2px; else: 3px ) if(
					supports(outline-style: dashed): dashed; else: solid ) if(
					media(prefers-color-scheme: dark): #64b5f6; else: #1976d2 );
				

10. Conditional Animation

					animation: if( media(prefers-reduced-motion: reduce): none;
					else: pulse ) if( media(width >= 768px): 2s; else: 3s ) if(
					supports(animation-timing-function: cubic-bezier(0.4, 0,
					0.2, 1)): cubic-bezier(0.4, 0, 0.2, 1); else: ease-in-out )
					infinite;
				

Animated element with conditional timing and easing