Share
Dans cette synthèse, nous examinerons 5 bibliothèques JavaScript qui peuvent vraiment faciliter le développement de sites Web modernes et attrayants. Les bibliothèques que nous examinerons ne sont pas au même sens que jQuery ou YUI; ils sont beaucoup plus petits et beaucoup plus spécialisés. Mais ils sont les meilleurs dans leur domaine et offrent des fonctionnalités uniques.
DD_belatedPNG a été créé dans le seul but de permettre l’utilisation de fichiers PNG alpha-transparents dans IE6 sans recourir à la technologie propriétaire de Microsoft. AlphaImageLoader filtre. Comme le savent tous ceux qui ont déjà essayé d’utiliser des fichiers PNG dans IE6, bien qu’ils puissent fonctionner de manière très élémentaire, il est hors de question de répéter des images de fond..
L'utilisation du filtre AlphaImageLoader ne résout que la moitié du problème PNG dans IE6, car il ne peut être utilisé qu'avec des images d'arrière-plan. Utiliser les PNG alpha-transparents sur éléments, un autre correctif est utilisé, qui est généralement le correctif HTC qui repose sur un fichier PNG transparent et un fichier de comportement HTC. De plus, les utilisateurs de Firebug et de YSlow le savent, l’alphaImageLoader de Microsoft est lent; L'une des recommandations de YSlow est d'éviter le filtre à tout prix.
DD_belatedPNG utilise l'implémentation Microsoft de VML pour remplacer les fichiers PNG par des éléments VML, qui prennent en charge la transparence alpha. Il peut être utilisé à la fois complet éléments et images de fond CSS. Lorsque les images d’arrière-plan sont remplacées, les fonctions courantes telles que
Répétition du fond et :flotter Les états peuvent également être utilisés pour que cette bibliothèque résolve tous les problèmes PNG courants dans IE6..
Utiliser DD_BelatedPNG est exceptionnellement simple. il ne doit être utilisé qu'avec IE6, afin que le script principal puisse être inclus dans la page à l'aide d'un commentaire conditionnel:
La bibliothèque a une seule méthode, fix, utilisée pour fournir des sélecteurs CSS simples ciblés par la bibliothèque, n’importe quel L'élément qui a un attribut PNG src ou tout élément utilisant un arrière-plan CSS PNG avec le nom de classe correspondant sera corrigé. Cette partie du script peut également entrer dans le commentaire conditionnel, de sorte que seul IE6 devra traiter ces règles supplémentaires:
Les fichiers PNG fixes dans IE6 apparaissent désormais comme ils le devraient et peuvent être positionnés en arrière-plan et répétés, et fonctionnent également avec: les états de survol, contrairement au filtre propriétaire de Microsoft. L'image suivante montre une image avant et une image d'arrière-plan alpha-transparente:
La typographie est un domaine du développement Web qui a connu des progrès douloureux par rapport à d’autres secteurs de l’industrie. Les développeurs Web ont été obligés de s'appuyer sur un petit ensemble de polices «Web safe» susceptibles d'être installées sur la majorité des ordinateurs de leurs visiteurs. Des solutions basées sur l'image et le flash ont vu le jour, qui présentent toutes deux des inconvénients.
Cufon offre aux développeurs une solution robuste et rapide, qui peut être affichée dans le navigateur sans nécessiter de plug-ins tiers utilisant les fonctionnalités intégrées aux navigateurs. Les polices Cufon peuvent être utilisées comme VML pour la mise en oeuvre native d’IE, ou
Cette bibliothèque diffère des autres en ce sens qu’un peu de préparation est nécessaire avant utilisation; un nouveau fichier de police doit être généré, ce qui peut être fait facilement en utilisant le site Web Cufon. Le va générer une police SVG et l'enregistrer dans un fichier JS. Ce fichier doit ensuite être lié à un autre
Ensuite, il s’agit simplement de dire à Cufon quels éléments remplacer:
L'API offre d'autres solutions pour utiliser plusieurs polices sur la même page et pour améliorer les performances dans IE. Bien que j’ai appelé cette section "Utilisation de toute police", vous devez vous rappeler que seules les polices sous licence à incorporer doivent être utilisées. La capture d'écran suivante montre un en-tête remplacé:
Firebug est sans aucun doute l’un des atouts majeurs du développement Web. Je l'utilise certainement tous les jours lorsque je développe pour le Web, et je sais que c'est le plug-in de choix pour beaucoup d'autres également. L’un des effets secondaires regrettables de l’excellence de Firebug est que d’autres outils similaires destinés à d’autres navigateurs pâlissent en comparaison et paraissent inférieurs. La résolution de problèmes de mise en page et de bugs CSS dans IE, par exemple, peut être une leçon de futilité.
C’est là que Firebug Lite intervient; Il s'agit d'une simple bibliothèque JavaScript qui recrée la plupart des fonctionnalités clés de l'interface Firebug, ce qui permet à notre débogueur de choix d'accéder à toutes les autres plates-formes. La correction des dispositions et la résolution des problèmes inter-navigateurs redeviennent faciles.
L'un des principaux avantages de Firebug Lite est que vous n'avez pas besoin de le télécharger ni d'installer quoi que ce soit pour commencer à l'utiliser. lorsque vous souhaitez déboguer une page sur laquelle vous travaillez dans des navigateurs autres que Firefox, vous pouvez simplement inclure un fichier de script dont le code SRC pointe vers la version en ligne:
Ça y est, lorsque vous exécutez la page dans un autre navigateur, Firebug Lite sera présent sur la page. Pour une utilisation hors ligne, le fichier de script, ainsi qu'un fichier CSS, peuvent être téléchargés et doivent simplement être utilisés comme n'importe quel autre fichier JS ou CSS. La capture d'écran suivante montre Firebug Lite dans Safari:
Ok, donc cette bibliothèque n’est pas si petite, mais il y a une raison à cela; la bibliothèque effectue de nombreuses tâches et ajoute un contrôle SVG complet à une page Web. Franchement, son pouvoir est impressionnant. Imaginez pouvoir dessiner des courbes lisses sur une page Web et créer des formes personnalisées à la volée - c'est ce que Raphael fait.
Vous pouvez créer des angles arrondis sur plusieurs navigateurs sans images (autres que celles dessinées par la bibliothèque), vous pouvez créer des reflets atténués pour n’importe quelle image, faire pivoter les images de manière dynamique et bien plus encore. Tous les chemins étant dessinés à l'aide d'éléments SVG, vous pouvez y attacher des événements JavaScript afin que les utilisateurs puissent interagir avec les images au passage de la souris ou cliquer (ou tout autre événement JS). Les possibilités sont infinies et l’API fournit un large éventail de méthodes différentes qui rendent le travail avec la bibliothèque agréable..
La bibliothèque doit bien sûr être liée à:
This is it, there are no other dependencies. Now we can begin creating our SVG shape:
La bibliothèque est conçue pour être facile à utiliser et nous n’utilisons ici qu’une infime fraction de ses fonctionnalités. La page sur laquelle cela est utilisé devrait ressembler à ceci:
C’est une période passionnante pour le développement Web, car CSS3 et HTML5 progressent de jour en jour, mais c’est aussi une période frustrante, car toutes ces nouvelles technologies de pointe ont été lancées avec très peu de soutien. Nous voulons commencer à utiliser toutes les nouvelles fonctionnalités HTML5 et CSS3, mais la plupart des nouveaux éléments HTML5, par exemple, ne sont pris en charge que par un seul navigateur..
Modernizr est une toute petite bibliothèque qui teste simplement si l'environnement actuel prend en charge une série de fonctionnalités avancées, telles que la nouvelle
La bibliothèque ajoute également des noms de classe à la élément que nous pouvons cibler avec CSS afin de masquer certains éléments à la page, donc lorsque le
C'est incroyable car cela signifie que nous pouvons ajouter en toute sécurité ces nouvelles fonctionnalités à nos pages pour les navigateurs qui les prennent en charge, sans causer de chaos dans les navigateurs qui ne le font pas. Dans la nature de l'amélioration progressive, nous pouvons créer un noyau de contenu accessible et largement supporté, puis ajouter progressivement de plus en plus de fonctionnalités pour les navigateurs qui les prennent en charge..
Voyons-le en action pour afficher de jolis effets CSS3; d'abord, nous lions simplement la très petite bibliothèque en utilisant le standard
Ensuite, nous pouvons ajouter le CSS suivant:
.no-audio #audioContainer display: none;
Cela garantira que les navigateurs qui ne supportent pas la
Lien vers l'audio
Une fois que cela est fait, nous pouvons détecter si le navigateur prend en charge l'audio HTML5 et afficher ou masquer le lien vers le média (nous pourrions facilement le faire en utilisant uniquement le CSS, mais nous verrons ainsi l'objet Modernizr en action):
Accentsconagua
if (Modernizr.audio) var audioLink = document.getElementById ("linkToAudio"); audioLink.style.display = "none"; C'est tout ce dont nous avons besoin. les navigateurs capables verront la
Chacune de ces bibliothèques répond à un problème très spécifique; elles sont généralement beaucoup plus petites que les bibliothèques plus connues et à usage général, mais tout aussi utiles pour leur usage spécialisé. Chacun d'entre eux peut nous aider d'une manière ou d'une autre lors du développement de sites Web, qu'il s'agisse de faciliter le développement dans IE6, d'utiliser des polices non standard sans techniques de remplacement fastidieuses, de détecter le support des dernières technologies CSS3 et HTML5 ou de générer des images complexes et interactives..
