Cosa ci sarà dopo i CSS3

COSA CI SARA’ DOPO I CSS3Salvatore Laisa (@moebiusmania)

Codemotion Venezia 2012

Salvatore Laisawww.salvatorelaisa.net

About me (Web designer? Front End? Interactive?)

2006 2007 2008 2010 2011

http://www.salvatorelaisa.net




Scopo del talk

Condividere e diffondere le prossime evoluzioni dei

Cascading Style Sheet, dalle nuove possibilità al modo in cui il W3C e i produttori di browser implementeranno

queste features.




Parte 1:Cosa vuole fare il W3C?

Dal successo/disastro dei CSS3 bisogna imparare qualcosa!



Dopo i CSS3?!?!?





Prima di tutto... non ci saranno CSS4

Tab Atkins, CSS Working Group, 5 settembre 2012





Ma ho letto “Selectors Level 4” da qualche parte

Le singole specifiche CSS hanno dei loro “livelli” di sviluppo, ma come linguaggio generale il W3C ha deciso di non lavorare piu ad un’insieme di features ma bensì sviluppare ognuna di queste come singolo modulo.





Cosa significa per noi

• avremo sempre vari nuovi giocattoli

• maggiore frammentazione nei supporti da parte dei browser

• (auto)formazione costante

• dovremo sempre avere delle tecniche di fallback/degrado nella manica

• conosceremo più a fondo il modo in cui funzionano vari effetti di Photoshop

• e magari non usarlo più :)




Parte 2:Let’s rock!

Vediamo cosa ci interrà impegnati a smanettare nei prossimi anni



Editoria su web: Regions (1/2)

Proposta da Microsoft e Adobe, permette di creare più caselle di testo collegate per poter creare layout tipo magazines in maniera più semplice (tipo InDesign e in generale i software di impaginazione classici).





Editoria su web: Regions (2/2)

Attualmente sono testibili su IE 10 (con suffisso) e le nightly di Chrome (abilitando una flag dedicata)





Editoria su web: Exclusions (1/2)

Altra feature molto legata al mondo dell’editoria, per la creazione di aree di forme geometriche diverse da rettangoli attorno ai quali il testo si può adattare.





Editoria su web: Exclusions (2/2)

Si utilizzano tracciati SVG per creare le forme.





Editoria su web: Pagination Templates

Molto simile al concetto di “pagine mastro” e template in generale, permette il riutilizzo di elementi vuoti dentro ai quali viene passato del testo tramite i Regions.

Attualmente non è testabile in nessun browser





Filtri grafici (1/3)

Diventa finalmente possibile applicare i classici filtri grafici direttamente da CSS, come:

• sfocatura (blur)

• luminosità (brightness)

• saturazione

• ombre esterne (drop shadow)

• e alcuni altri...






PS: e naturalmente.... sono animabili!






Per “giocare” e sperimentare in maniera semplice con i nuovi filtri CSS la Adobe ha creato un tool online Filter Lab





Custom filters (ex CSS Shaderds - 1/3)

Forse la parte più cool! Creare effetti cinematografici molto avanzati su qualunque elemento della pagina.





Custom filters (2/3)

Gli elementi vengono “convertiti” in mesh, avendo quindi a disposizioni dei vertici possiamo manipolare oggetti 2D in uno spazio 3D come ci pare e piace.

In realtà però i vertici e gli effetti customizzati vengono definiti con un sotto linguaggio chiamato OpenGL Shading Language (GLSL) che è molto più simile allo scripting che allo stile.



http://www.opengl.org/documentation/glsl/

http://www.opengl.org/documentation/glsl/



Custom filters (3/3)

Questi effetti 3D si basano sull’interfacciamento del browser alla scheda video quindi bisogna controllare due features supportate dal browser, i “CSS Custom Filter” e “WebGL” (feature necessaria per lavorare con il 3D nel tag Canvas).

Anche qui il tool di Adobe Filter Lab si dimostra molto comodo per chi preferisce un approccio più visuale (previo supporto del browser alle feature specificate sopra)





La (solita) bella notizia

Windows 8 e Internet Explorer 10 NON supportano WebGL. Si vocifera vogliano implementare una loro libreria GL.





Figo ma... dove mi documento?

Attualmente non c’è molto disponibile visto sopratutto lo scarso supporto da parte dei browser attuali.

Le migliori risorse (e speriamo tool) attualmente sono reperibili tramite forum e blog ufficiali della Adobe.

Le specifiche delle proposte sono comunque disponibili sul sito del W3C.



Salvatore Laisasalvatorelaisa.net


e a questo punto....

GRAZIE!(al prossimo Codemotion!)

Cosa ci sarà dopo i CSS3

Documents

Transcript of Cosa ci sarà dopo i CSS3