Share
L'évolution des technologies Internet ne cesse d'étonner. De tous les jours, de nouveaux concepts et techniques sont imaginés par des personnes créatives et talentueuses. Avec les navigateurs modernes adoptés à un rythme plus rapide, des systèmes tels que CSS3 deviennent de plus en plus viables pour une utilisation sur des projets de toutes tailles. Clairement, cela peut être vu en regardant de nouveaux services qui poussent en ligne comme TypeKit. Conceptuellement, si nous déconstruisons une police en éléments de base, nous pouvons utiliser cette technologie pour des tâches autres que le type, les icônes..
Pendant une courte période, les développeurs ont commencé à créer des sites Web peu soucieux de la consommation de bande passante.. HTML et CSS où restrictif et Adobe Flash était un canevas ouvert pour les concepteurs et les développeurs pour y insérer des animations et des mises en page complexes. Cela a abouti à des sites extrêmement lourds en bande passante - nous nous en souvenons tous. C'étaient les jours avant la prolifération des téléphones intelligents mobiles.
Avec les téléphones intelligents accédant plus fréquemment à Internet, la vitesse de la bande passante et du chargement des pages est soudainement revenue au premier plan. Heureusement, les avancées dans HTML, CSS, et JavaScript ont rendu tout cela possible. La rapidité et la réactivité des pages Web dépendent du nombre de HTTP demande un chargement de page doit faire. Les navigateurs modernes limitent le nombre de demandes à un seul serveur. La spécification HTTP 1.1 du W3C se lit
«Un client mono-utilisateur NE DEVRAIT PAS maintenir plus de 2 connexions avec n’importe quel serveur ou proxy. Un proxy DEVRAIT utiliser jusqu'à 2 * N connexions à un autre serveur ou proxy, N étant le nombre d'utilisateurs actifs simultanément. Ces directives visent à améliorer HTTP temps de réponse et éviter la congestion. "
Une technique qui est devenue de plus en plus populaire est l'utilisation de CSS sprites. CSS les sprites sont conçus pour réduire le nombre de HTTP requêtes au serveur Web en combinant plusieurs images plus petites en une seule image plus grande et en définissant un niveau de bloc CSS élément pour afficher uniquement une partie définie de la plus grande image. La technique est simple mais ingénieuse.
Les polices à leur niveau moléculaire le plus élémentaire sont une série de glyphes vectoriels regroupés dans une seule "archive de glyphes".
CSS3 a introduit dans le monde du développement Web la possibilité d’intégrer des polices au @face à face déclaration. Sans aucun doute, cette avancée dans les technologies Internet est l’une des étapes les plus passionnantes et les plus importantes de notre brève histoire. Les développeurs étant en mesure d’incorporer les polices de leur choix, ils peuvent créer des mises en page plus cohérentes d’une plate-forme à l’autre, rapprochant ainsi l’art de la mise en page interactive de son cousin print..
Si nous examinons de plus près la technologie derrière une police, nous pourrons mieux comprendre comment elle peut être utilisée et déployée. Les polices à leur niveau moléculaire le plus élémentaire sont une série de glyphes vectoriels regroupés dans une "archive de glyphes" unique. Nous pouvons ensuite référencer chaque glyphe par son code de caractère correspondant. Théoriquement, cela ressemble beaucoup à la façon dont nous référençons un tableau dans presque tous les langages de programmation, via une paire clé / valeur..
Dans cet esprit, les glyphes auxquels nous faisons référence peuvent vraiment être n’importe quelle image monochrome à base vectorielle. Ce n'est pas nouveau, nous avons tous vu Dingbats et Webdings. Ce sont deux exemples de polices non typées, c’est-à-dire une série d’images vectorielles compilées dans une seule archive de polices..
Avec l'avènement de l'incorporation de polices et la prise de conscience que les polices sont essentiellement une série de simples glyphes vectoriels, j'ai commencé à expérimenter comment utiliser ce format à mon avantage.. Sur le plan conceptuel, si je plaçais toutes les icônes requises pour un site particulier dans une police personnalisée, je pourrais alors les utiliser n'importe où sur le site, avec la possibilité de changer la taille et la couleur, d'ajouter des arrière-plans, des ombres, une rotation et à peu près n'importe quoi. autre CSS permettra le texte. L'avantage supplémentaire étant un simple CSS comme un sprite HTTP demande.
Pour illustrer ce propos, j'ai compilé une nouvelle police avec quelques-unes des superbes icônes de Brightmix.
J'ai utilisé les emplacements minuscules pour les icônes simples et les emplacements majuscules pour la même icône dans un traitement circulaire.
Pour utiliser mon nouveau Icon Pack, je dois d’abord exporter mon jeu de polices sous un certain nombre de fichiers de polices différents (.eot, .woff, .ttf, .svg) afin d’être compatible avec tous les navigateurs. Le sujet de l’incorporation des polices et de la conversion de format de fichier est traité ailleurs, je vais donc éviter une explication détaillée ici. Cependant, le CSS ressemblerait à quelque chose comme ça.
Accentsconagua
@ font-face font-family: 'IconPack'; src: url ('iconpack.eot'); src: format local ('IconPack'), format url ('iconpack.woff') ('woff'), format url ('iconpack.ttf') ('type exact'), format url ('iconpack.svg # IconPack') ('svg'); Une fois intégré, j'ai maintenant un jeu d'icônes complet au format vectoriel à référencer. Pour référencer une icône, il me faut simplement un style incluant le famille de polices de "IconPack".
une
L'exemple ci-dessus rendrait une étoile et constitue l'utilisation la plus élémentaire du concept Icon Pack. Cependant, ce n'est pas très intuitif du point de vue du développement, SEO amical, ni ne se dégrade gracieusement dans le cas de non-CSS soutien.
Pour remédier à la situation, je vais inclure un :avant pseudo-élément et envelopper le contenu dans un envergure étiquette.
étoile
Maintenant, l'étoile est ajoutée à l'écran et je peux changer la visibilité du texte en utilisant le bouton spectacle et cacher Des classes. Le résultat est facile à référencer CSS classe qui se dégrade gracieusement et est optimisée pour les moteurs de recherche. Pour tout mon ensemble d'icônes, je peux écrire quelque chose comme ci-dessous.
icône d'écran
L'avantage ici est que l'icône sera mise à l'échelle avec la taille de la police. En fait, toutes les icônes seront redimensionnées et conserveront une clarté parfaite.
Jusqu'ici, nous n'avons touché que la partie émergée de l'iceberg. Rien de révolutionnaire ici, même si vous pouvez commencer à voir les possibilités. Un scénario du monde réel serait le remplacement de la style d'élément de liste. En plus d'utiliser une image, nous pouvons maintenant utiliser une icône vectorielle de notre Icon Pack. L'avantage ici est que l'icône sera mise à l'échelle avec la taille de la police. En fait, toutes les icônes seront redimensionnées et conserveront une clarté parfaite.
Puisque les icônes sont maintenant placées sur notre page comme si elles étaient du texte, nous pouvons appliquer tout code valide. CSS style à eux sans télécharger aucun autre actif. Nous pourrions appliquer Couleur, taille de police, ombre de texte, etc. et utiliser le :flotter pseudo-élément pour la souris sur les effets, le tout avec un seul glyphe.
Comme pour tout, il y a des limitations malheureuses. Au moment d'écrire ces lignes, il n'y avait aucun moyen d'afficher un seul glyphe avec plusieurs couleurs. Il y a eu quelques casse-tête CSS pour obtenir des dégradés sur du texte actif, mais des formes complexes avec des couleurs variables dans un seul glyphe sont une limitation. Cela dit, il existe des moyens d'approximer les glyphes multicolores en séparant les parties d'un graphique vectoriel en glyphes individuels, puis en les assemblant et en les colorant sur la page via CSS..
Une autre utilisation intéressante est un simple CAPTCHA validation. En remplaçant les glyphes de l'alphabet par des chiffres, les utilisateurs verront des chiffres, mais le code de la page sera constitué de lettres. Quelques calculs simples à traduire entre les deux, et vous avez une lecture facile CAPTCHA.
Pour mieux illustrer ces concepts, j’ai assemblé un exemple de page composé de deux HTTP request-le code de la page et un seul pack d'icônes. Cela inclut également la possibilité de redimensionner la taille de la police de la page afin de démontrer clairement la souplesse d'intégration des glyphes vectoriels. Le logo de la société, la navigation, les images et CAPTCHA utilisent tous des glyphes. S'il vous plaît noter, le CAPTCHA inclus ici est pour illustration seulement. Pour utiliser ceci sur un site de production, je vous recommanderais de valider côté serveur avec un algorithme dynamique associé à JavaScript.
Cette page d’exemple montre également l’utilisation d’un glyphe comme arrière-plan «répétitif» évolutif. Je serai le premier à admettre que cette implémentation est au mieux bidon, mais je pense que cela démontre la flexibilité et la polyvalence du Icon Pack..
Clairement, cela ouvre certaines possibilités. Les concepteurs peuvent développer des packs d'icônes pour la vente, les entreprises peuvent héberger un seul pack d'icônes à utiliser sur tous les supports d'entreprise. Les concepteurs de modèles peuvent facilement distribuer plusieurs options de couleur du même modèle sans avoir à enregistrer et exporter un seul fichier supplémentaire. Les concepteurs Web peuvent facilement adapter les sites existants à la compatibilité avec les appareils portables. De plus, cette technique expose nos icônes à la DOM permettant des effets animés de type Flash avec votre JavaScript préféré API.
Comme utilisation et support du navigateur pour CSS3 pénétrera davantage, les packs d'icônes auront bientôt un impact important sur la diffusion de contenu, renforçant ainsi les tendances légères, évolutives et multi-périphériques qui commencent à devenir une nécessité.
