Supporto CSS3 in Internet Explorer 10, una panoramica

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 pubblicata il , alle 15:55 nel canale Programmi
Microsoft
 
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

Resta aggiornato sulle ultime offerte

Ricevi comodamente via email le segnalazioni della redazione di Hardware Upgrade sui prodotti tecnologici in offerta più interessanti per te

Quando invii il modulo, controlla la tua inbox per confermare l'iscrizione.
Leggi la Privacy Policy per maggiori informazioni sulla gestione dei dati personali

4 Commenti
Gli autori dei commenti, e non la redazione, sono responsabili dei contenuti da loro inseriti - info
Dane26 Marzo 2013, 18:55 #1
ma è un articolo o una news?
amon.akira26 Marzo 2013, 19:53 #2
news
SamFisher9227 Marzo 2013, 07:25 #3
Confermo sulla bontà di IE10 e lo uso tutt'ora, ma questo è un articolo su CSS che porta il browser ms nel titolo.
Nui_Mg27 Marzo 2013, 09:16 #4
Purtroppo è ancora troppo indietro, rispetto alla concorrenza, sull'ancora in sviluppo html5.

Devi 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".

La discussione è consultabile anche qui, sul forum.
 
^