CSS: come cambierà il caricamento dei fogli di stile

Link copiato negli appunti

Recentemente gli sviluppatori di Google Chorme hanno cominciato a lavorare sul sistema utilizzato dal loro browser per il parsing delle regole CSS contenute nei fogli di stile; l'idea dovrebbe essere in sostanza quella di modificare il comportamento di link rel="stylesheet" con l'obbiettivo di implementare una nuova metodologia basata sulla chiamata e la lettura di style sheet dedicati a specifiche componenti di pagina.

Questo approccio è dovuto in pratica alla disponibilità di HTTP/2 le cui specifiche consentono ora di gestire, e memorizzare in cache indipendentemente l'una dall'altra, diverse componenti di dimensioni ridotte con il minimo consumo in termini di risorse. Verrebbe così superato quel limite insito in HTTP/1 che dava luogo ad un decremento delle prestazioni nell'utilizzo di uno o più file CSS spesso contenenti regole non indirizzate alla pagina corrente.

L'inclusione di un unico file in cui sono presenti tutte le regole CSS non permette di limitare la ridondanza e, a seconda del grado di complessità e delle dimensioni del documento, potrebbe dare origine a latenze in fase di caricamento; distribuire tali regole su più style sheet implica invece una maggiore macchinosità nella loro gestione, soprattutto in presenza di progetti articolati, senza dimenticare che anche in questo caso non sarebbero da escludere rallentamenti.

Ecco quindi una possibile soluzione, cioè l'utilizzo di una sintassi come la seguente:

<head>
</head>
<body>
  <link rel="stylesheet" href="/header.css">
  <header>…</header>
  <link rel="stylesheet" href="/contenuto.css">
  <main>…</main>
  <link rel="stylesheet" href="/autore.css">
  <section class="autore">…</section>
  ...
  <link rel="stylesheet" href="/footer.css">
  <footer>…</footer>
</body>

In sostituzione di:

<head>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  …
</body>

<head>
  <link rel="stylesheet" href="/header.css">
  <link rel="stylesheet" href="/contenuto.css">
  <link rel="stylesheet" href="/autore.css">
  <link rel="stylesheet" href="/footer.css">
</head>
<body>
  …
</body>

L'elemento di novità non risiede unicamente nel riposizionamento delle inclusioni al di fuori dei tag head. Si tratta sostanzialmente di una metodologia basata sul rendering sequenziale dove i fogli di stile vengono caricati in parallelo ma applicati in serie secondo l'ordine deciso dallo sviluppatore.

Per ciascun rel="stylesheet" definito si potrà bloccare il rendering del contenuto associato fino al caricamento del relativo foglio di stile, ciò però non impedirà di restituire il contenuto precedente prima che tale evento venga completato.

Via Jake Archibald

CSS: come cambierà il caricamento dei fogli di stile

Ti consigliamo anche

UX Designer: come diventare dei professionisti della user experience

SEO: 9 importanti fattori da ricordare

7 vantaggi di un web design reattivo per la tua azienda

ALT-1: il 15 luglio a Torino (e online) si parla di accessibilità