Share
In deze samenvatting bekijken we 5 JavaScript-bibliotheken die de ontwikkeling van moderne, aantrekkelijke websites echt kunnen vergemakkelijken. De bibliotheken waar we naar zullen kijken zijn geen bibliotheken in dezelfde zin als iets als jQuery of de YUI; ze zijn veel kleiner en veel gespecialiseerder. Maar ze zijn de beste in wat ze doen en bieden unieke functionaliteit.
DD_belatedPNG is gemaakt met het enige doel om alpha-transparante PNG's toe te staan in IE6 te gebruiken zonder gebruik te maken van de eigen software van Microsoft AlphaImageLoader filter. Zoals iedereen die eerder PNG's in IE6 probeerde te gebruiken, weet, hoewel ze heel basic gemaakt kunnen worden, zijn zaken als herhaalde achtergrondafbeeldingen uitgesloten..
Het gebruik van het AlphaImageLoader-filter lost slechts de helft van het PNG-probleem op in IE6 omdat het alleen met achtergrondafbeeldingen kan worden gebruikt. Om gebruik te maken van alpha-transparante PNG's op elementen, wordt een andere fix gebruikt, typisch de HTC-fix die berust op een transparante PNG en een HTC-gedragsfile. Bovendien, zoals Firebug en YSlow-gebruikers zullen weten, is de AlphaImageLoader van Microsoft langzaam; een van YSlow's richtlijnen is om het filter ten koste van alles te vermijden.
DD_belatedPNG gebruikt Microsoft's implementatie van VML om PNG's te vervangen door VML-elementen, die wel alpha-transparantie ondersteunen. Het kan met beide vol worden gebruikt elementen en CSS achtergrondafbeeldingen. Wanneer achtergrondafbeeldingen worden vervangen, worden algemene functies zoals
achtergrond herhaling en : hover Staten kunnen ook worden gebruikt, dus deze bibliotheek lost alle algemene PNG-problemen in IE6 op.
Het gebruik van DD_BelatedPNG is uitzonderlijk eenvoudig; het hoeft alleen te worden gebruikt met IE6, dus het hoofdscript kan in de pagina worden opgenomen met een voorwaardelijke opmerking:
De bibliotheek heeft een enkele methode, fix, die wordt gebruikt voor het leveren van eenvoudige CSS-selectors die worden getarget door de bibliotheek, ongeacht element dat een PNG-src-attribuut heeft, of elk element dat een PNG CSS-achtergrond met de overeenkomende klassenaam gebruikt, zal worden hersteld. Dit gedeelte van het script kan ook in de conditionele opmerking worden opgenomen, zodat alleen IE6 deze aanvullende regels hoeft te verwerken:
Vaste PNG's in IE6 verschijnen nu zoals ze zouden moeten en kunnen op de achtergrond geplaatst en herhaald worden, en werken ook met: zweeftoestanden, in tegenstelling tot het eigen filter van Microsoft. De volgende afbeelding toont een voor- en na-afbeelding van een alpha-transparante achtergrondafbeelding:
Typografie is een gebied van webontwikkeling dat pijnlijk weinig vooruitgang heeft gezien in vergelijking met andere delen van de industrie. Webontwikkelaars zijn gedwongen te vertrouwen op een kleine set 'webveilige' lettertypen die waarschijnlijk op de meeste computers van hun bezoekers zullen worden geïnstalleerd. Beeld- en flash-gebaseerde oplossingen zijn ontstaan, die beide nadelen hebben voor het gebruik.
Cufon biedt ontwikkelaars een robuuste en snelle oplossing, die kan worden weergegeven in de browser zonder plug-ins van derden te hoeven gebruiken met behulp van functies die zijn ingebouwd in browsers. Cufon-lettertypen kunnen worden gebruikt als VML voor native IE-implementatie of de
Deze bibliotheek verschilt van de andere doordat een klein beetje voorbereiding vereist is voor gebruik; er moet een nieuw lettertypebestand worden gegenereerd dat eenvoudig kan worden gedaan met behulp van de cufon-website. De genereert een SVG-lettertype en slaat het op in een JS-bestand. Dit bestand moet vervolgens worden gekoppeld aan een ander
Dan is het gewoon een geval om Cufon te vertellen welke elementen moeten worden vervangen:
De API biedt andere oplossingen voor het gebruik van meerdere lettertypen op dezelfde pagina en voor het verbeteren van de prestaties in IE. Hoewel ik dit gedeelte "Gebruik van elk lettertype" heb genoemd, moet u bedenken dat alleen lettertypen mogen worden gebruikt waarvoor een licentie is ingebouwd. De volgende screenshot toont een vervangen kop:
Firebug is zonder twijfel een van de grootste troeven voor webontwikkeling die beschikbaar is; Ik gebruik het zeker elke dag bij het ontwikkelen voor het web, en ik weet dat dit ook voor veel anderen de juiste plug-in is. Een ongelukkig neveneffect van de uitmuntendheid van Firebug is dat andere vergelijkbare tools voor andere browsers in vergelijking bleken en inferieur lijken. Problemen met het oplossen van lay-out en CSS-fouten in IE kunnen bijvoorbeeld een les in nutteloosheid zijn.
Dit is waar Firebug Lite in stappen; dit is een eenvoudige JavaScript-bibliotheek die de meeste belangrijke functies van de Firebug-interface opnieuw creëert, waardoor onze debugger naar keuze op alle andere platforms komt. Het herstellen van lay-outs en het oplossen van problemen met verschillende browsers wordt weer gemakkelijk.
Een van de grootste dingen van Firebug Lite is dat je het niet hoeft te downloaden of iets hoeft te installeren om het te gebruiken; wanneer u fouten wilt opsporen in een pagina waar u aan werkt in browsers die geen Firefox zijn, kunt u gewoon een scriptbestand opnemen waarvan de SRC verwijst naar de online versie:
Dat is het, wanneer u de pagina in een andere browser uitvoert, zal Firebug Lite op de pagina aanwezig zijn. Voor offline gebruik kan het scriptbestand, evenals een CSS-bestand, worden gedownload en moet het net als elk ander JS- of CSS-bestand worden gebruikt. De volgende schermafbeelding toont Firebug Lite in Safari:
Ok, dus deze bibliotheek is niet zo klein, maar daar is een reden voor; de bibliotheek doet enorm veel dingen en voegt complete SVG-controle toe aan een webpagina. Eerlijk gezegd is de kracht ervan geweldig. Stel je voor dat je vloeiende lijnen over een webpagina kunt tekenen en aangepaste vormen kunt maken terwijl je werkt - Raphael doet dat.
U kunt afgeronde hoeken maken die volledig cross-browser zijn zonder afbeeldingen (behalve de afbeeldingen die daadwerkelijk door de bibliotheek zijn getekend), u kunt vage reflecties maken voor alle afbeeldingen, de afbeeldingen dynamisch roteren en nog veel meer. Omdat alle paden worden getekend met SVG-elementen, kunt u JavaScript-gebeurtenissen aan hen koppelen, zodat mensen met de afbeeldingen op mouseover of klik (of andere JS-gebeurtenissen) kunnen werken. De mogelijkheden zijn eindeloos en de API biedt een breed scala aan verschillende methoden die het werken met de bibliotheek tot een genoegen maken.
De bibliotheek moet natuurlijk worden gekoppeld aan:
This is it, there are no other dependencies. Now we can begin creating our SVG shape:
De bibliotheek is gemakkelijk in gebruik en we hebben in dit voorbeeld maar een klein deel van de mogelijkheden gebruikt. De pagina waarop dit wordt gebruikt, zou er als volgt uit moeten zien:
Het is een opwindende tijd voor webontwikkeling met CSS3 en HTML5 die met de dag vorderen, maar het is ook een frustrerende tijd omdat we al deze geavanceerde nieuwe technologieën met weinig ondersteuning krijgen. We willen beginnen met het gebruik van alle geweldige nieuwe HTML5- en CSS3-functies, maar de meeste nieuwe HTML5-elementen worden bijvoorbeeld alleen ondersteund in misschien een enkele browser.
Modernizr is een kleine bibliotheek die eenvoudig test of de huidige omgeving een reeks geavanceerde functies ondersteunt, zoals de nieuwe
De bibliotheek voegt ook klassenamen toe aan de element dat we kunnen richten met CSS om bepaalde elementen te verbergen voor de pagina, dus wanneer
Dit is ongelooflijk omdat het betekent dat we deze nieuwe functies veilig aan onze pagina's kunnen toevoegen voor de browsers die ze ondersteunen, zonder chaos te veroorzaken in de browsers die dat niet doen. In de aard van progressieve verbetering kunnen we een toegankelijke en breed ondersteunde kern van inhoud maken en vervolgens geleidelijk meer en meer functies toevoegen voor browsers die hen ondersteunen.
Laten we het in actie zien om wat leuke CSS3-effecten weer te geven; eerst linken we naar de zeer kleine bibliotheek met behulp van de standaard
Dan kunnen we de volgende CSS toevoegen:
.no-audio #audioContainer display: geen;
Dit zal ervoor zorgen dat browsers die geen ondersteuning bieden voor de
Link naar de audio
Zodra dit is gebeurd, kunnen we detecteren of de browser HTML5-audio ondersteunt en de link naar de media weergeven of verbergen (we kunnen dit eenvoudig doen met alleen de CSS, maar op deze manier krijgen we het Modernizr-object in actie):
Accentsconagua
if (Modernizr.audio) var audioLink = document.getElementById ("linkToAudio"); audioLink.style.display = "none"; Dit is alles wat we nodig hebben; geschikte browsers zien de
Elk van deze bibliotheken is geschikt voor een heel specifiek probleem; ze zijn over het algemeen veel kleiner dan meer bekende en algemene bibliotheken, maar net zo nuttig voor hun gespecialiseerde doel. Elk van hen kan ons op de een of andere manier helpen bij het ontwikkelen van websites van ofwel het verlichten van de ontwikkeling in IE6, het gebruik van niet-standaard lettertypen zonder omslachtige vervangingstechnieken, het detecteren van ondersteuning voor de nieuwste CSS3- en HTML5-technologieën of het genereren van complexe en interactieve afbeeldingen.
