HTTP hlavička

Asi nejméně známý a nejrychlejší způsob připojení CSS je přes HTTP hlavičku. Prohlížeč si stáhne CSS soubor ještě před načtením HTML dokumentu. Tato metoda je vhodná pro kritické styly, které musí být načteny co nejdříve.

Moc se nepoužívá, protože historicky to nefungovalo v IE a starém Edge.

S tlakem na zrychlování webu nyní dobře podporované napříč prohlížeči.

Implementace v Node.js:

response.setHeader('Link', '<styl.css>; rel=stylesheet');

Příklad implementace v PHP:

<?php
header("Link: <styl.css>; rel=stylesheet");
?>

Připojení přes HTTP hlavičku má několik důležitých omezení:

• Nefunguje v Internet Exploreru – žádná verze IE nepodporuje Link hlavičku pro CSS
• Vyžaduje server-side kód – nelze použít na statických stránkách
• Omezené možnosti – nelze použít media queries nebo podmíněné načítání
• Cache problémy – obtížnější správa cache oproti <link> elementu

Externí soubor

<link rel="stylesheet" href="styl.css">

Nejčastější a doporučený způsob připojení CSS. Externí soubor umožňuje:

• Znovupoužití stylů na více stránkách
• Start načítání CSS bez zpracování HTML kódu
• Cacheování prohlížečem
• Snadnou údržbu a aktualisaci
• Oddělení obsahu od presentace

Připojení s atributy

<link rel="stylesheet" href="styl.css" media="print">
<link rel="stylesheet" href="styl.css" media="screen and (max-width: 768px)">

Použití data URL

Specifický případ použití je <link> s data URL:

<link rel="stylesheet" href="data:text/css,body{background:lime}">

Jde tak vložit na stránku CSS bez načítání externího souboru, které se ale jinak chová jako externě připojený skript.

Oproti <style> na takový styl jde použít media atributy nebo s ním pracovat v JS jako s jiným externím stylem, tj. bude dostupný v document.styleSheets a půjde vypnout přes link.disabled = true.

Občas se dá použít k různým hackům.

Interní stylesheet

<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}
</style>

Styly definované přímo v HTML dokumentu. Vhodné pro:

• Jedinečné styly specifické pro danou stránku
• Rychlé testování a prototypování
• Styly, které se nemají cacheovat
• Kritické CSS – pro zrychlení prvního načítání dává smysl poslat styly potřebné pro oblast ve viewportu rovnou s HTML kódem

Inline styly

<div style="color: red; font-size: 16px;">Text</div>

Styly aplikované přímo na HTML element. Používejte pouze pro:

• Dynamické styly generované JavaScriptem
• Jedinečné styly pro konkrétní element
• Testování a debugování

Inline styly mají nejvyšší prioritu a obtížně se udržují.

@import pravidlo

V CSS souboru

@import url('styl.css');
@import url('styl.css') print;
@import url('styl.css') screen and (max-width: 768px);

V HTML dokumentu

<style>
@import url('styl.css');
</style>

Pravidlo @import umožňuje vkládání CSS souborů do jiných CSS souborů. Nebo i přímo do HTML přes značku <style>.

Má výkonové problémy, protože jedno CSS čeká na druhé.

Mohlo by se zdát, že použít ho přímo v HTML by nemusel být problém, ale opak je pravdou:

Proč je @import v HTML horší než <link>?

Při použití <style>@import url('styl.css');</style> v HTML nastává několik problémů:

• Sekvenční načítání: Prohlížeč musí nejdříve stáhnout HTML, pak zpracovat <style> tag, a teprve potom začít stahovat CSS soubor. U <link> se CSS stahuje paralelně s HTML.
• Blokování renderování: @import blokuje zpracování dalších <style> tagů, dokud se nestáhne importovaný soubor
• Nemožnost preloadu: Prohlížeč nemůže předem načíst CSS soubor, protože neví o jeho existenci před zpracováním <style> tagu

Priorita načítání

Prohlížeč zpracovává CSS v následujícím pořadí priority:

1. Inline styly (nejvyšší priorita)
2. Interní <style> tag
3. Externí CSS soubory (v pořadí v HTML)
4. @import pravidla

JavaScript

V JS jde připojit CSS stejnými principy, jako se tak děje v HTML. Nejčastěji značkou <link>:

// Dynamické vytvoření link elementu
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styl.css';
document.head.appendChild(link);

Možné je i CSS stáhnout metodou fetch a vložit do značky <style>.

// Načtení CSS jako text
fetch('styl.css')
  .then(response => response.text())
  .then(css => {
    const style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);
  });

JavaScript umožňuje dynamické načítání CSS podle potřeby aplikace.

Připojováním CSS přes JS jde značně zpomalit jeho aplikování, ale v některých případech to může být žádoucí – skriptem připojené CSS neblokuje vykreslování.

CSS přes JavaScript vlastnosti

Druhá možnost je přiřazovat přímo style:

// Přímé nastavení style vlastnosti
element.style.backgroundColor = 'blue';
element.style.color = 'white';
element.style.padding = '10px 20px';

// Nastavení více vlastností najednou
Object.assign(element.style, {
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  border: '2px solid blue',
  borderRadius: '4px'
});

Další možnost je použít setProperty:

document.documentElement.style.setProperty('background', 'lime');

Případně jde v JS přidávat pravidla přímo do styleSheets:

document.styleSheets[0].insertRule("body { background: red; }", 0);

Historická vlastnost behaviour

Internet Explorer měl specifickou CSS vlastnost behaviour, která umožňovala připojení HTC (HTML Components) souborů přímo přes CSS:

<style>
/* CSS - připojení HTC souboru */
.element {
  behaviour: url(component.htc);
}
</style>

<div class="element">Obsah</div>

HTC soubor se načetl automaticky a jeho obsah (včetně CSS) se aplikoval na element s touto vlastností.

Šlo tak přes CSS vlastnost načíst další CSS :–)

Preload a prefetch

<link rel="preload" href="kriticky.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="prefetch" href="nekriticky.css">

Optimalisace načítání CSS:

• preload: Načte kritické CSS s vysokou prioritou
• prefetch: Načte CSS s nízkou prioritou pro budoucí použití

Iframe, Object a Embed

Externí CSS lze vložit do stránky <iframe>, <object> nebo <embed> elementů.

Akorát v tomto případě se vloží jako prostý text.

Moderní buildovací nástroje

V dnešní době už vývojář často ani neřeší způsob vložení CSS ručně, ale stará se o to framework a buildovací nástroj – např. Vite.

Výsledkem potom často je, že autor ani netuší, jak se kde a jaké CSS připojuje. Ale build nástroj si to nějak vymyslí sám. Tento web je toho příkladem.

Doporučení

• Pro většinu případů používejte externí CSS soubory s <link> elementem
• Kritické styly načtěte přes HTTP hlavičku nebo preload
• Inline styly používejte pouze pro dynamické styly
• @import se vyhněte kvůli horšímu výkonu