🎯 CSS @media & @import Rules

In CSS, conditionally loading stylesheets is a fundamental technique for building highly responsive web designs. By combining the @import rule with conditional conditional media parameters, you can serve tailored stylesheets based on specific devices or environmental conditions.

Instead of loading thousands of lines of unneeded CSS rules, conditional imports allow the browser to selectively process formatting rules precisely when a target layout context is matched.

The @import rule fetches external stylesheets from within an active CSS document. When appended with a media feature query, it targets only specific runtime environments:

@import url("desktop-style.css") screen and (max-width: 1200px);
                

In this case, the `desktop-style.css` asset will run exclusively on digital displays whose viewports measure 1200 pixels or narrower.

Media types categorize target device profiles. The primary options available inside conditional layouts include:

• all: Default behavior. Covers every conceivable electronic device platform.
• screen: Targets typical digital viewing monitors (monitors, tablet screens, smartphones).
• print: Isolates the presentation layer specifically for printed paper output or preview screens.
• speech: Matches speech synthesizers and audio screen-readers designed for accessibility.

/* Runs strictly when preparing physical paper print copies */
@import url("print-format.css") print;
                

Operators allow you to stitch multi-layered criteria together into complex conditional filters:

• and: Combines multiple distinct rules together (Requires all statements to evaluate true).
• not: Inverts the entire query scope, matching anything except the configured rule.
• only: Legacy parameter ensuring older browsers do not mistakenly execute specific compound styling rules.
• , (Comma): Operates as an **OR** logical boundary, executing rules if any individual branch matches.

/* Target mobile screens using compound conditions */
@import url("mobile-core.css") screen and (max-width: 600px);
                

Beyond global categories, you can narrow asset loads based on meticulous display properties and hardware rendering capabilities:

• width / height: Evaluates viewport bounds, accepting helper prefixes like `min-width` or `max-height`.
• aspect-ratio: Targets standard viewing aspects (e.g., matching widescreen monitors via `min-aspect-ratio: 16/9`).
• orientation: Targets viewport orientation states like `portrait` or `landscape`.

• resolution: Evaluates pixel density configurations (e.g., specifying high-res assets using `min-resolution: 300dpi`).
• color / color-gamut: Analyzes screen color bit depths or color space capacities like `srgb` or `p3`.

• pointer: Evaluates primary navigation precision, checking for `fine` pointers (mice) or `coarse` bounds (touch fingers).
• hover: Checks if the physical environment supports persistent mouse tracking states (`hover: hover`).
• scripting: Evaluates if browser JavaScript runtime execution is currently active (`scripting: enabled`).

Below are real-world conditional declarations targeting dark-theme optimization preferences and precise printing outputs:

/* Seamlessly trigger Dark Mode styles if preferred by system OS settings */
@import url("dark-theme.css") screen and (prefers-color-scheme: dark);

/* High-definition monochrome optimization for printer assets */
@import url("high-res-print.css") print and (min-resolution: 300dpi);