Supporto CSS3 in Internet Explorer 10, una panoramica

Ecco una panoramica sul supporto CSS3 in Internet Explorer 10, proseguendo la nostra panoramica a puntate sul browser con il quale Microsoft intende convincere molti degli utenti passati ad altri browser in passato
di Antonio Barba pubblicata il 26 Marzo 2013, alle 15:55 nel canale ProgrammiMicrosoft
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
4 Commenti
Gli autori dei commenti, e non la redazione, sono responsabili dei contenuti da loro inseriti - infoDevi effettuare il login per poter commentare
Se non sei ancora registrato, puoi farlo attraverso questo form.
Se sei già registrato e loggato nel sito, puoi inserire il tuo commento.
Si tenga presente quanto letto nel regolamento, nel rispetto del "quieto vivere".