Share
In questo riepilogo verranno esaminate 5 librerie JavaScript che possono davvero facilitare lo sviluppo di siti Web moderni e interessanti. Le librerie che vedremo non sono librerie nello stesso senso di qualcosa come jQuery o YUI; sono molto più piccoli e molto più specializzati. Ma sono i migliori in quello che fanno e offrono funzionalità uniche.
DD_belatedPNG è stato creato per il solo scopo di consentire l'utilizzo di PNG alpha-transparent in IE6 senza ricorrere a proprietà di Microsoft AlphaImageLoader filtro. Come tutti quelli che hanno provato ad usare i PNG in IE6 prima lo sanno, anche se possono essere fatti lavorare in modo molto semplice, cose come le immagini di sfondo ripetute sono fuori questione.
L'utilizzo del filtro AlphaImageLoader risolve solo metà del problema PNG in IE6 in quanto può essere utilizzato solo con immagini di sfondo. Per utilizzare PNG alfa trasparenti elementi, viene utilizzata un'altra correzione, che in genere è la correzione HTC che si basa su un PNG trasparente e un file di comportamento HTC. Inoltre, come sapranno gli utenti di Firebug e YSlow, AlphaImageLoader di Microsoft è lento; una delle linee guida di YSlow è di evitare il filtro a tutti i costi.
DD_belatedPNG utilizza l'implementazione Microsoft di VML per sostituire i PNG con elementi VML, che supportano l'alfa-trasparenza. Può essere utilizzato sia con il pieno elementi e immagini di sfondo CSS. Quando vengono sostituite le immagini di sfondo, funzioni comuni come
background-repeat e : hover anche gli stati possono essere utilizzati in modo che questa libreria risolva tutti i problemi PNG comuni in IE6.
L'utilizzo di DD_BelatedPNG è eccezionalmente semplice; deve essere usato solo con IE6, quindi lo script principale può essere incluso nella pagina usando un commento condizionale:
La libreria ha un unico metodo, fix, che viene utilizzato per fornire selettori CSS semplici che sono presi di mira dalla libreria, nessuno elemento che ha un attributo src PNG o qualsiasi elemento che utilizza uno sfondo CSS PNG con il nome della classe corrispondente verrà corretto. Questa parte dello script può anche essere inserita nel commento condizionale, in modo che solo IE6 debba elaborare queste regole aggiuntive:
Fixati i PNG in IE6 ora appaiono come dovrebbero e possono essere posizionati in background e ripetuti, e funzionano anche con: hover states, a differenza del filtro proprietario di Microsoft. L'immagine seguente mostra un'immagine prima e dopo di un'immagine di sfondo trasparente alfa:
La tipografia è un'area di sviluppo web che ha visto progressi dolorosamente piccoli rispetto ad altre aree del settore. Gli sviluppatori Web sono stati costretti a fare affidamento su un piccolo insieme di caratteri "sicuri per il web" che probabilmente verranno installati sulla maggior parte dei computer dei loro visitatori. Sono state create soluzioni basate su immagini e flash, entrambe con aspetti negativi dell'utilizzo.
Cufon offre agli sviluppatori una soluzione robusta e veloce, che può essere visualizzata nel browser senza richiedere plug-in di terze parti utilizzando le funzionalità integrate nei browser. I font Cufon possono essere utilizzati come VML per l'implementazione nativa di IE, oppure
Questa libreria è diversa dalle altre in quanto è necessario un po 'di preparazione prima dell'uso; è necessario generare un nuovo file di font che può essere fatto facilmente utilizzando il sito Web di cufon. Genera un font SVG e lo salva in un file JS. Questo file deve quindi essere collegato a qualsiasi altro
Quindi è solo un caso di dire a Cufon quali elementi sostituire:
L'API offre altre soluzioni per l'utilizzo di più caratteri sulla stessa pagina e per migliorare le prestazioni in IE. Anche se ho chiamato questa sezione, "Uso di qualsiasi font" ... dovresti ricordare che dovrebbero essere usati solo i font che sono autorizzati ad essere incorporati. La seguente schermata mostra un'intestazione sostituita:
Firebug è senza dubbio uno dei maggiori vantaggi per lo sviluppo web disponibile; Lo uso quotidianamente durante lo sviluppo per il Web, e so che è il plug-in di scelta anche per molti altri. Uno sfortunato effetto collaterale dell'eccellenza di Firebug è che altri strumenti simili per altri browser impallidiscono in confronto e appaiono inferiori. Ad esempio, problemi di layout e bug CSS in IE possono essere una lezione di futilità.
È qui che entra in gioco Firebug Lite; questa è una semplice libreria JavaScript che ricrea la maggior parte delle funzionalità chiave dell'interfaccia Firebug, portando il nostro debugger di scelta su tutte le altre piattaforme. La risoluzione dei layout e la risoluzione dei problemi relativi a più browser diventa ancora una volta facile.
Una delle cose migliori di Firebug Lite è che non è necessario scaricarlo o installare nulla per poterlo utilizzare; quando vuoi eseguire il debug di una pagina su cui stai lavorando in browser che non sono Firefox, puoi semplicemente includere un file di script il cui SRC punta alla versione online:
È così, quando esegui la pagina in qualsiasi altro browser, Firebug Lite sarà presente sulla pagina. Per l'uso offline, il file di script e un file CSS possono essere scaricati e dovrebbero essere usati come qualsiasi altro file JS o CSS. La seguente schermata mostra Firebug Lite in Safari:
Ok, questa libreria non è così piccola, ma c'è una ragione per questo; la libreria fa una vasta gamma di cose e aggiunge il controllo SVG completo a una pagina web. Francamente, il suo potere è fantastico. Immagina di essere in grado di disegnare curve morbide su una pagina web e creare forme personalizzate al volo - Raphael lo fa.
Puoi realizzare angoli arrotondati completamente cross-browser senza immagini (diversi da quelli effettivamente disegnati dalla libreria), puoi creare riflessi sbiaditi per qualsiasi immagine, ruotare le immagini in modo dinamico e molto altro. Poiché tutti i tracciati vengono disegnati utilizzando gli elementi SVG, è possibile associare loro gli eventi JavaScript in modo che le persone possano interagire con le immagini al passaggio del mouse o fare clic (o qualsiasi altro evento JS). Le possibilità sono infinite e l'API offre una vasta gamma di metodi diversi che rendono piacevole il lavoro con la libreria.
La biblioteca deve ovviamente essere collegata a:
This is it, there are no other dependencies. Now we can begin creating our SVG shape:
La libreria è fatta per essere facile da usare e in questo esempio abbiamo utilizzato solo una minima parte delle sue capacità. La pagina su cui viene utilizzato dovrebbe apparire in questo modo:
È un momento emozionante per lo sviluppo web con CSS3 e HTML5 che avanzano di giorno in giorno, ma è anche un periodo frustrante perché abbiamo tutte queste nuove tecnologie avanzate che escono con un supporto minimo. Vogliamo iniziare a utilizzare tutte le fantastiche nuove funzionalità HTML5 e CSS3, ma la maggior parte dei nuovi elementi HTML5, ad esempio, sono supportati solo in un singolo browser.
Modernizr è una piccola libreria che verifica semplicemente se l'ambiente corrente supporta una serie di funzionalità avanzate, come la nuova
La libreria aggiunge anche nomi di classe al file elemento che possiamo indirizzare con i CSS per nascondere determinati elementi alla pagina, quindi quando il
Questo è incredibile perché significa che possiamo tranquillamente aggiungere queste nuove funzionalità alle nostre pagine per i browser che le supportano, senza causare il caos nei browser che non lo fanno. Nella natura del miglioramento progressivo, possiamo creare un nucleo di contenuti accessibile e ampiamente supportato, e quindi aggiungere progressivamente sempre più funzionalità per i browser che li supportano.
Vediamolo in azione per mostrare alcuni bei effetti CSS3; per prima cosa colleghiamo semplicemente la libreria molto piccola usando lo standard
Quindi possiamo aggiungere il seguente CSS:
.no-audio #audioContainer display: none;
Ciò garantirà che i browser che non supportano il
Collegamento all'audio
Una volta fatto questo, possiamo rilevare se il browser supporta l'audio HTML5 e mostrare o nascondere il collegamento al media (potremmo facilmente farlo usando solo il CSS, ma in questo modo possiamo vedere l'oggetto Modernizr in azione):
Accentsconagua
if (Modernizr.audio) var audioLink = document.getElementById ("linkToAudio"); audioLink.style.display = "none"; Questo è tutto ciò di cui abbiamo bisogno; browser in grado di vedere il
Ciascuna di queste librerie soddisfa un problema molto specifico; in genere sono molto più piccole delle biblioteche più conosciute e generiche, ma altrettanto utili per il loro scopo specifico. Ognuno di loro può aiutarci in un modo o nell'altro nello sviluppo di siti Web dallo sviluppo di easing in IE6, utilizzando font non standard senza tecniche di sostituzione ingombranti, per rilevare il supporto per le ultime tecnologie CSS3 e HTML5 o generare immagini complesse e interattive.
