Aree

Le aree CSS (Cascading Style Sheets) sono una funzionalità per il layout di pagina delle app di Windows Store scritte in JavaScript in Windows 8 e per Internet Explorer 10. Le aree CSS sono definite dal World Wide Web Consortium (W3C) nella specifica CSS Regions, che è attualmente disponibile come Working Draft. Le aree CSS consentono agli sviluppatori e ai progettisti di utilizzare un singolo flusso di contenuto HTML di testo e immagini e di segmentarlo in più contenitori vuoti definiti in un modello HTML standard. I modelli HTML sono documenti in larga misura privi di contenuto originale e costituiti invece principalmente da contenitori vuoti che vengono ridimensionati e posizionati per organizzare il contenuto in arrivo in un layout specifico.

In questo modo un flusso di contenuto continuo può essere ristrutturato in un layout più adatto ad esempio all'uso su Tablet PC.

In una singola pagina, le aree CSS consentono agli sviluppatori Web di creare layout di contenuto complessi come quelli usati in riviste o giornali, dove più aree dello stesso flusso di contenuto (testo, immagini correlate, video e così via) sono distribuite intorno a elementi di contenuto non correlati, ad esempio storie alternative o annunci pubblicitari.

Implementazione delle aree CSS

Per implementare le aree CSS, devi prima di tutto utilizzare un file HTML come flusso di contenuto. Questo è un documento HTML autonomo che include il proprio DOM (Document Object Model) e i propri stili CSS. Nel diagramma seguente il flusso di contenuto è rappresentato dal file "content.html".

Devi poi utilizzare un documento HTML come host del flusso di contenuto. Questo documento host, o pagina master, è responsabile del dimensionamento e del posizionamento delle aree CSS, così come della definizione dell'ID flusso in cui verrà riversato il flusso del contenuto. Nel diagramma seguente la pagina master è rappresentata dal file "master.html".

Diagramma che illustra un'"equazione" concettuale: un file master.html con più frame + un file content.html con un flusso di contenuto HTML = un file master.html con i frame riempiti con il contenuto del flusso.

Al termine del rendering, la pagina master conterrà aree connesse che includono il contenuto del flusso. È importante ricordare che questa frammentazione è a soli fini di presentazione e non ha effetto sulla struttura DOM del documento del flusso di contenuto.

Creazione di un'origine dati

Le aree CSS richiedono due nuove proprietà CSS per abilitare il flusso del contenuto da un'origine dati a un'area, quindi a un'altra e così via. Per definire il flusso di contenuto sono necessari sia un'origine dati sia un identificatore. In primo luogo, inserisci un'origine dati in un elemento iframe per caricarvi un documento HTML distinto. Nella pagina master, crea un iframe con ID univoco, ad esempio:


<iframe id="flow1-data-source" src="content-source.html"></iframe>

Crea quindi un selettore CSS che specifichi l'origine dati usando la proprietà -ms-flow-into:


#flow1-data-source {
  -ms-flow-into: flow1;
}

Tieni presente che, posizionando la proprietà -ms-flow-into sull'elemento iframe, questo agirà come se la proprietà display fosse impostata su "none". Non è previsto il rendering di questo elemento iframe, né la sua partecipazione alla frammentazione o alla struttura del contenuto. Questo elemento è concepito unicamente per identificare l'origine dati da cui creare un flusso.

Creazione di un contenitore per l'area CSS

Qualsiasi elemento non sostituito può essere usato come contenitore di aree CSS; tuttavia, gli elementi div non quelli più comuni impiegati a tale scopo.

Per creare un contenitore di aree CSS, nella pagina master assegnare innanzitutto agli elementi da usare come contenitori un nome di classe univoco, ad esempio:


<div class="flow1-container"></div>
<div class="flow1-container"></div>
<div class="flow1-container"></div>


Crea quindi un selettore CSS che specifichi l'origine dati da cui accettare il flusso di contenuto usando la proprietà -ms-flow-from:


.flow1-container {
  -ms-flow-from: flow1;
}

Il rendering del contenuto incluso elementi designati come contenitori di aree CSS verrà eseguito nell'ordine di origine del DOM nella pagina master. Quando le aree sono definite in modo statico, il contenuto viene frammentato tra gli elementi del contenitore definiti nel DOM.

Estensione delle aree CSS

Puoi utilizzare le funzionalità di layout dell'origine indipendenti dall'ordine per creare scenari di layout più complessi. Ad esempio, per creare un layout fluido complesso puoi usare la nuova funzionalità di allineamento delle griglie. Consideriamo ad esempio il markup seguente:


<!DOCTYPE html>
<html lang="en-us">
<head>
<style type="text/css">
#data-source {
  -ms-flow-into: flow1;
}
.flow-container {
  -ms-flow-from: flow1;
}
#grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 384px 384px;
}
.A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-row-span: 2;
}
.B {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.C {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.D {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
}
.E {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
}
</style>
</head>
<body>
  <iframe id="data-source" src="content-source.html"></iframe>
  <div id="grid">
    <div id="region1" class="A flow-container"></div> 
    <div id="region2" class="B flow-container"></div>
    <div id="region3" class="C flow-container"></div> 
    <div id="region4" class="D flow-container"></div>
    <img class="E" src="image.png" />  
  </div>
</body>
</html>


In questo modo il contenuto fluisce come indicato nel diagramma seguente. Le frecce indicano la direzione del flusso di contenuto

Diagramma che mostra il flusso del contenuto da un frame all'altro all'interno di un layout a griglia.

Cambiamo l'ordine dei primi due e degli ultimi due frame:


<iframe id="data-source" src="content-source.html"></iframe>
<div id="region1" class="B flow-container"></div>
<div id="region2" class="A flow-container"></div> 
<div id="region3" class="C flow-container"></div>
<div id="region4" class="E flow-container"></div>
<img class="D" src="image.png" />

In questo modo il flusso viene modificato come illustrato in questo diagramma rivisto:

Diagramma che mostra il flusso del contenuto da un frame all'altro all'interno di un layout a griglia con frame il cui ordine è stato scambiato. Il flusso del contenuto è ancora sequenziale, anche se ogni frame si trova in una posizione diversa all'interno della griglia.

Ciò consente di specificare visivamente il layout della pagina senza apportare modifiche drastiche al markup del modello e senza interrompere il DOM del contenuto di origine.

Altri scenari con le aree CSS

Oltre ai due esempi precedenti, le aree CSS rendono possibili diversi altri utili scenari.

  • Creare in modo dinamico aree di contenuto aggiungendo un nuovo div alla pagina master quando l'oggetto div corrente è pieno.
  • Consentire all'utente di modificare il documento del contenuto e ripristinare come previsto il flusso del contenuto aggiornato. Ad esempio, un utente può scegliere di aumentare le dimensioni del testo, causando la rigenerazione dei singoli div per garantire che tutto il contenuto sia visibile.
  • Accedere a un intervallo di frammenti associato a un'area di contenuto specifica.

Informazioni di riferimento sulle API

Regions

Esempi ed esercitazioni

CSS Regions sample

Dimostrazioni di Internet Explorer Test Drive

Hands On: CSS3 Regions

Post di IEBlog

Building Rich Text-Centric Pages in IE10

Specifica

CSS Regions Module Level 3

 

 

Mostra:
© 2014 Microsoft