Supporto CSS3 in Internet Explorer 10, una panoramica

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

3 thoughts on “Supporto CSS3 in Internet Explorer 10, una panoramica

  1. Al momento ho firefox e mi sta benissimo, solo che alcune cose non sono supportate da firefox, tipo realplayer o la radio di yahoo!
    Però ho windows vista e so che windows vista e internet explorer non quagliano.
    Sapete aiutarmi? 10 punti al migliore!

  2. Aiuto da un paio di giorni Internet Explorer non mi fa più navigare perchè ogni volta che lo apro devo chiuderlo per forza perchè cade e mi esce il Non Inviare che me lo fa chiudere ma a volte (pochissime volte) riesco ad entrarci ma poi lo chiudo e di nuovo e cade ed esce Non inviare

  3. sul programa di internet explorer quando gli clicco sopra non si avvia é se si avvia mi dice non risponde grazie anticipatamente

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *


+ cinque = 9

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>