Supporto CSS3 in Internet Explorer 10, una panoramica

In generale, per lo sviluppo di layout web conformi agli standard, i Frontend Developers sono incoraggiati a fare uso esclusivamente delle funzionalità standard, cioè quelle senza prefissi. Tuttavia è possibile avvalersi di queste funzionalità aggiuntive qualora ce ne fosse la stretta necessità. Le funzionalità relative ai Layout:

• CSS Exclusion. Consente di impaginare il testo in modo fluido intorno alle immagini o ad interi blocchi HTML.
   
• CSS Regions. Implementano un meccanismo capace di spezzare un testo, o comunque un blocco HTML in più regioni o blocchi. Si rivela utile per l’impaginazione di layout molto complessi tipici di una rivista o giornale. Facilita, tra le altre cose, anche l’inserimento di immagini e spazi pubblicitari in modo dinamico all’interno della pagina, rivelandosi quindi molto comodo per lo sviluppo di pagine secondo i paradigmi del Responsive Design.
   
• CSS3 Multi-column Layout. Consente l’impaginazione del contenuto su più colonne, senza doversi appoggiare a stratagemmi usati in passato, come floating divs o simili.
   
• CSS3 Flexbox Layout. Consente di costruire un layout che si adatta a differenti dimensioni mantenendo le proporzioni tra le varie parti. Usato in congiunzione con il Multi-column Layout, consente di sviluppare interfacce Responsive con poco sforzo.
   
• CSS3 Grid. Le Grid in qualche modo ricordano i layout implementati tramite tabelle, ma ripensati in modo diverso, e specificatamente sviluppati per suddividere le pagine in macroblocchi (header, footer, sidebar, content, ecc…), controllandone posizione e proporzioni reciproche in modo semplice.
   
• CSS Device Adaptation. Da usarsi insieme alle regole CSS Media Queries per fornire layout differenziati in base alle dimensioni dello schermo.

Accanto a queste funzionalità sono state introdotte anche tutta una serie di effetti visivi, pensati per alleggerire le pagine da sfondi e file grafici pur mantenendo al tempo stesso una elevata capacità di espressione grafica, e sono:

• CSS3 3-D Transforms. Consente di creare layout con deformazioni prospettiche in tre dimensioni.
   
• CSS3 Animations. Controlli per animare qualunque proprietà CSS senza l’utilizzo di codice JavaScript. Usato in congiunzione con le trasformazioni 3D, consente di creare animazioni d’effetto che vengono generalmente accelerate in hardware tramite la GPU.
   
• CSS3 Fonts. Una serie di comandi che consentono di usare abbellimenti tipografici, come le legature, usando font di tipo OpenType.
   
• CSS3 Transitions. Una versione semplificata delle Animations. Consentono di specificare un valore all’inizio ed alla fine della transizione, la sua durata e la curva d’interpolazione da usare. A differenza delle Animations, però, non contengono keyframes, possibilità di mettere in pausa o di eseguire l’animazione al contrario.
   
• CSS3 Text. Una serie di proprietà per definire l’ombreggiatura del testo e le regole per andare a capo nel paragrafo, spezzando opportunamente le parole rispettando le regole grammaticali.

Infine sono state introdotte ulteriori funzionalità come il supporto allo scroll e lo zoom tramite dispositivi touchscreen, sono stati rimossi i limiti al numero di stylesheet per pagina e altre funzioni previste per le applicazioni Windows Store ma non per il browser IE10 (ricordiamo che le applicazioni Windows Store possono essere sviluppate anche in HTML5 + JavaScript, sfruttando il motore di rendering Trident).

Per eventuali approfondimenti potete fare riferimento alla guida MSDN relativa al supporto CSS, ed anche alla lista completa degli elementi CSS supportati in Internet Explorer. Nei prossimi articoli vedremo come usare alcune di queste caratteristiche per ottimizzare le pagine HTML su schermi di diverse dimensioni, in particolare per l’ottimizzazione su smartphone, tablet e PC con varie dimensioni e risoluzioni.

Chiaramente, trattandosi di elementi CSS3, possono essere sfruttati non soltanto su Windows Phone e su Windows RT, ma anche su sistemi operativi e browser moderni di altri vendor, in particolar modo Chrome, Safari, Opera e Firefox per citare i più diffusi in ambito mobile. Le tecniche illustrate potranno pertanto essere riciclate anche per l’ottimizzazione dei siti su iOS, Android, BlackBerry 10 e tutte le piattaforme dotate di un browser moderno.

Articoli precedenti:

Parte 1. Internet Explorer 10, il browser del riscatto
Parte 2. Internet Explorer 10 e la compatibilità col passato
Parte 3. Modern.ie, un nuovo strumento di testing da Microsoft