CSS3 on IE, tecniche

4
maggio

Il supporto CSS3 in Internet Explorer è chiedere troppo, di recente ho trovato un articolo interessante su Smashin Magazine, come accenna il titolo sono proposte varie tecniche per ottenere effetti CSS3 come text-shadow, box-shadow, border-radius, gradienti, opacità, trasparenze e background multipli.
L’articolo è notevole e completo, lo trovate qui.

Ora non so se effettivamente tutte le soluzioni proposte siano funzionali o meno, si parla comunque di IE, leggendo l’articolo si nota come queste regole vadano a intervenire su regole proprietarie del motore web di microsoft e fortunatamente tra le versione IE6 7 e 8 si mantengono le stesse.
Per necessità il mio test è stato sul border radius, portare l’effetto angoli tondi sulle div per avere una coerenza visiva dei layout tra IE, Firefox e Safari/Chrome; l’ enhancer consiste nell’importare nel CSS un file border-radius.htc (.htc come il fix PNG).
Nel file CSS questa è la sintassi:

.box-radius {
border-radius: 15px;
behavior: url(border-radius.htc);
}

Si, la modifica funziona, o quasi, un div può ottenere angoli tondi su IE ma solo se ha dimensioni fisse e non viene modificato il suo aspetto una volta caricata la pagina, si perchè quando la pagina è completamente caricata viene applicata la modifica agli angoli; se le dimensioni cambiano, caricando del contenuto con chiamate ajax o effetti js, abbiamo dei difetti visivi, il div non cambia dimensione le regole di background vengono resettate in parte e una soluzione (-moz-border-radius:10px 10px 0px 0px) per definire il tondo per angoli specifici, non esistono…la modifica rende tutti gli angoli del div tondi.
Concludendo la modifica è molto limitata.

CSS3 box shadow

18
novembre

Le novità introdotte dalle specifiche CSS3 in continuo sviluppo e accompagnate dai Browsers più noti come Safari e Firefox, sono sempre più interessanti; certo non le cito tutto perchè basta cercare CSS3 in Google o andare su css3.info per trovare tutte le regole.
In particolare mi dedico agli effetti dei quali ho sempre sentito la mancanza per implementarli nei mie layout web, come la possibilità di creare un’ombra ad un div.

Vediamo il codice per l’Ombra di un Box:

box-shadow: 0px 0px 5px #ccc; (Standard)
-moz-box-shadow:  0px 0px 5px #ccc; (Firefox)
-webkit-box-shadow: 0px 0px 5px #ccc; (Safari)

Ora creo un box con angoli tondi e ombreggiatura:

#MyID {
position:absolute;
width: 120px;
height: 120px;
border: 1px solid #333;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 5px #ccc;
-moz-box-shadow: 0px 0px 5px #ccc;
-webkit-box-shadow: 0px 0px 5px #ccc;
}

Presto analizzerò altre capacità CSS3.

@font-face, font embeded CSS

19
ottobre

il problema del supporto dei font su web è sempre stato tema di disussione, ora attraverso quello che sono le variabili CSS introdotte in sperimentazione con CSS3, è possibile integrare un font nella pagina web stessa, senza averlo necessariamente installato nel sistema.
Come funziona, in pratica con il comando variabile @font-face si determina la posizione del font custom nel sistema e sul server, ed il nome attribuito al font stesso, i browser che supportano questa carateristica penseranno a mettere in cace i caratteri potendoli utilizzare nelle nostre pagine, richiamando il nome settato nella variabile alla voce font{}; o font-family{};.
Vediamo un esempio:

@font-face {
font-family: ‘Sketch Block’;
src: url(‘/skin/fonts/Sketch_Block.eot’);
src: local(‘Sketch Block’),
local(‘Sketch Block’),
url(‘/skin/fonts/Sketch_Block.ttf’) format(‘truetype’);
}

body {
font-family: “Sketch Block”, “Arial”, “Helvetica”, sans-serif;
}

I font ovviamente hanno una resa differente di Aliasing su ogni Browser, nel caso si volgia utlizzare il bold din un font custom per i browser non IE è necessario dichirare la variabile con il font bold e il font-weight.
I miei test si sono svolti su Firefox e Safari con esito positivo, mentre si IE e Chrome l’opzione non è andato a buon fine, probabilmente l’opzione su IE è supportata solo se il font è presente anche in versione .eot (OpenType); ho nontato inoltre che neanche su iPhone è supportato.

12