Conditional rule group

Basic Concepts of Conditional Rule Groups

Conditional rule groups in CSS3 allow developers to apply different style rules based on specific conditions. These rules are implemented using @ rules and enable dynamic adjustment of styles based on media types, device characteristics, or browser support. The core of conditional rule groups lies in "conditional evaluation," which extends CSS's selection capabilities, giving stylesheets greater adaptability and flexibility.

/* Basic syntax structure */
@condition condition_parameters {
  /* Style rules that meet the conditions */
}

Media Queries (@media)

Media queries are the most commonly used conditional rule groups, applying different styles by detecting device characteristics. They can check viewport width, device orientation, resolution, and other parameters.

/* Styles applied when viewport width is less than 600px */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
  .sidebar {
    display: none;
  }
}

/* Print styles */
@media print {
  nav, footer {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
  }
}

Media queries support logical operators, allowing multiple conditions to be combined:

/* Landscape orientation with width between 600-800px */
@media (screen and (orientation: landscape) and (min-width: 600px) and (max-width: 800px)) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

Feature Queries (@supports)

Feature queries detect whether a browser supports specific CSS properties or values, enabling progressive enhancement of styles.

/* Check if the browser supports grid layout */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Check if a specific property value is supported */
@supports (backdrop-filter: blur(5px)) {
  .modal {
    backdrop-filter: blur(5px);
  }
}

/* Negation condition */
@supports not (display: grid) {
  .container {
    display: flex;
  }
}

Document Rules (@document)

Document rules allow styles to be applied based on the document URL, though browser support is currently limited. They are useful in user stylesheets.

/* Only applies to a specific domain */
@document url("https://example.com") {
  body {
    font-family: "Special Font", sans-serif;
  }
}

/* Domain matching */
@document domain("example.com") {
  .logo {
    background-image: url("local-logo.png");
  }
}

Nested Conditional Rule Groups

Conditional rule groups can be nested to create more complex conditional logic.

@media (min-width: 768px) {
  @supports (display: flex) {
    .navigation {
      display: flex;
      justify-content: space-between;
    }
  }
  
  @media (orientation: landscape) {
    .hero {
      height: 100vh;
    }
  }
}

Custom Media Queries (@custom-media)

The CSS4 proposal for custom media queries allows defining reusable media query conditions.

/* Define custom media query */
@custom-media --small-viewport (max-width: 30em);

/* Use custom media query */
@media (--small-viewport) {
  .widget {
    padding: 0.5em;
  }
}

Practical Applications of Conditional Rule Groups

In responsive design, conditional rule groups are commonly used to create breakpoints:

/* Base styles for mobile-first approach */
.container {
  padding: 10px;
}

/* Tablet devices */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    max-width: 720px;
  }
}

/* Desktop devices */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* Large-screen devices */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Style optimization for high-DPI devices:

/* High-resolution display devices */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  .logo {
    background-image: url("logo@2x.png");
    background-size: contain;
  }
}

Performance Considerations for Conditional Rule Groups

While conditional rule groups are powerful, note the following:

1. Excessive media queries can increase stylesheet size.
2. Complex conditional evaluations may impact rendering performance.
3. The order of conditional rule groups affects style priority.

/* Not recommended - duplicate conditions */
@media (max-width: 600px) {
  .box { color: red; }
}
@media (max-width: 600px) {
  .box { background: blue; }
}

/* Recommended - merge conditions */
@media (max-width: 600px) {
  .box { 
    color: red;
    background: blue;
  }
}

Combining Conditional Rule Groups with CSS Preprocessors

Preprocessors like Sass/Less can enhance the writing experience for conditional rule groups:

// Sass variables for media queries
$breakpoint-mobile: 600px;

@media (max-width: $breakpoint-mobile) {
  .header {
    font-size: 1.2rem;
    
    // Nested rules
    &-title {
      color: #333;
    }
  }
}

// Use mixins to encapsulate media queries
@mixin respond-to($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.container {
  @include respond-to(768px) {
    max-width: 720px;
  }
}

Future Directions for Conditional Rule Groups

The CSS Working Group is exploring more powerful conditional rules:

1. Container queries (@container) - Apply styles based on element container dimensions rather than viewport.
2. Nested conditional rules - More concise nesting syntax.
3. Richer feature detection - Detect the extent of browser support for CSS features.

/* Experimental container query syntax */
@container (min-width: 300px) {
  .card {
    display: flex;
  }
}