Autore: Hardware Upgrade RSS

Internet Explorer 10, come già anticipato nei precedenti articoli, ha
introdotto il supporto a buona parte delle specifiche CSS3, proseguendo
così l’iter iniziato con la release 9 del browser di casa Microsoft. Oltre alle
funzionalità standard sono presenti anche numerose estensioni, denotate dal
prefisso -ms-*, similmente a quanto fatto da Mozilla Firefox (-moz-*) e da
Safari / Chrome (-webkit-* oppure -apple-*).

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