Prefer Link Over CSS Import

html.link_for_css

Severity

low

Remediation Complexity

low

Remediation Risk

low

Remediation Effort

low

Resource

Efficiency

Language

Html

Description

Flags a <style> element whose content uses a CSS @import rule.

Rationale

An @import inside a stylesheet is fetched only after the importing sheet has been downloaded and parsed, serialising the requests and delaying rendering. A <link> element lets the browser discover and download every stylesheet in parallel, so importing CSS this way is the faster, recommended approach.

<style>@import url("a.css");</style>     <!-- FLAW — serialised CSS load -->

<link rel="stylesheet" href="a.css">     <!-- OK — parallel CSS load -->

Remediation

Replace the @import rule with a <link rel="stylesheet"> element in the document <head>.

References

MDN — the @import rule