Share
Voyons comment améliorer les performances de votre site en réduisant le nombre de requêtes HTTP qu'il émet. Nous allons tirer parti d'une technique connue sous le nom de schéma d'URI de données; encoder des images et des polices dans des chaînes de données pures pouvant être directement intégrées à votre balisage et à vos feuilles de style.
La vignette: Les icônes Broccolidryiconsaniconsititisfullof… de Visual Idiot (nous les utiliserons dans une minute…)
Les connexions Internet étant devenues plus rapides et les ordinateurs plus puissants, les performances des sites Web étaient une pratique exemplaire souvent négligée. Aujourd’hui, il est absolument essentiel de veiller au bon fonctionnement de votre site Web pour la satisfaction de vos utilisateurs et des moteurs de recherche. en particulier lors de l'accès au site à l'aide de données mobiles, de téléphones sous-alimentés et d'autres appareils.
Nous avons déjà examiné les feuilles de sprite CSS: meilleures pratiques, outils et applications utiles avant sur Webdesigntuts +, afin de vous montrer comment améliorer les performances en réduisant les demandes HTTP et la taille globale du fichier image. Mais saviez-vous que vous pouvez représenter une image (en réalité n'importe quelle donnée binaire) dans votre code HTML ou CSS en utilisant uniquement une chaîne de texte ASCII?
Cette technique est connue sous le nom de schéma Data URI et n’est en fait pas nouvelle. Bien que les URI de données flottent depuis plus de dix ans, ils ne gagnent en popularité que depuis peu avec la compatibilité étendue des navigateurs et l’accent mis sur l’amélioration des performances du site..
Le principal avantage de l'utilisation des URI de données est l'amélioration des performances. Toutes les ressources utilisées sur votre site sont récupérées par votre navigateur à l'aide d'une requête HTTP. Cela inclut tout, des feuilles de style aux fichiers JavaScript, en passant par les images. Quelle que soit la vitesse de la connexion Internet, presque tous les navigateurs limitent le nombre maximal de demandes HTTP simultanées à deux à la fois, ce qui entraîne effectivement un goulot d'étranglement des données. Plus le nombre de demandes HTTP à effectuer est important, plus la performance globale du site sera médiocre..
La combinaison de données d'image dans le code HTML ou CSS du site élimine instantanément la nécessité pour le navigateur d'extraire des ressources supplémentaires. Bien que les données brutes codées en Base64 soient généralement considérées comme 33% plus volumineuses que leur équivalent optimisé (par exemple, une image), après différence de taille et d'optimisation de fichier CSS, la différence de taille de fichier est généralement négligeable.
Un URI de données est essentiellement constitué de données binaires codées au format Base64, accompagnées d'informations supplémentaires pour le navigateur, notamment un type MIME, un jeu de caractères et le format de codage (Base64)..
L'URI des données (dans sa forme la plus simple) ressemble à ceci:
données: [] [; charset =] [; base64],
Pour utiliser un URI de données en tant qu'image HTML intégrée, le format se présente comme suit:
Pour utiliser un URI de données en tant qu'image d'arrière-plan répétitive en CSS, le format est le suivant:
Accentsconagua
body background-image: url ('data: image / png; base64,'); répéter en arrière-plan: répéter; Vous pouvez également combiner les éléments d’arrière-plan avec un raccourci CSS:
div.logo background: url ('data: image / png; base64,') no-repeat en haut à gauche; marge: 20px 10px 0 10px; Bien que nous ayons utilisé des images pour illustrer l'utilisation des URI de données, vous pouvez utiliser presque tous les supports, y compris les fichiers multimédia, les polices de caractères (comme nous le verrons bientôt) et bien plus encore..
OK, passons à la pratique avec quelques exemples. Prenons l'image suivante (une tuile répétitive que j'ai téléchargée à partir de Subtle Patterns), convertissons-la en un URI de données et utilisons CSS pour créer un arrière-plan répétitif pour un site ou une interface..
Bien que les URI de données puissent paraître assez funky, le processus pour en créer un est très simple..
Tout d’abord, rendez-vous dans Web Semantics Data URI Converter et chargez l’image en sélectionnant l’emplacement du fichier de l’image, puis en cliquant sur l’outil «Convertir une image»:
Une fois traitée, si vous faites défiler la page, vous verrez à quoi ressemble cette image encodée en base64:
Comme nous avons besoin d’un fond répétitif pour notre projet, nous devrons modifier le CSS qui nous est donné par l’outil..
Pour un fond répété, copiez et collez le CSS suivant:
div.logo background-repeat: repeat; background-image: url (data: image / jpeg; base64, / 9j / 4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP / sABFEdWNreQABAAQAAABkAAD / 4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu + 7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI / PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI + IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI + IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlCNDA1N0EyRkNEQzExRTE5NEEyOEY1NEFFMzlEMzVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlCNDA1N0EzRkNEQzExRTE5NEEyOEY1NEFFMzlEMzVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUI0MDU3QTBGQ0RDMTF FMTk0QTI4RjU0QUUzOUQzNUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUI0MDU3QTFGQ0RDMTFFMTk0QTI4RjU0QUUzOUQzNUUiLz4gPC9yZGY6RGVzY3JpcHRpb24 + IDwvcmRmOlJERj4gPC94OnhtcG1ldGE + IDW / eHBhY2tldCBlbmQ9InIiPz7 / 7gAOQWRvYmUAZMAAAAAB / 9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP / wAARCAAnACgDAREAAhEBAxEB / 8QAowAAAgICAwAAAAAAAAAAAAAABwoICwUGAwQJAQABBAMBAQAAAAAAAAAAAAAFAwQHCAACBgEJEAAABgIBAwIDBQkAAAAAAAABAgMEBQYRBwgAIRIxQVEyCWGBIkIWcZGhsSNjJtYKEQACAAUBBAYFCAsBAAAAAAABAgARAwQFBiExQRJRYXGx0QeRIjITFPBCUnJkdMTUgWKSI1Ozw9OUtHUX / 9oADAMBAAIRAxEAPwBWSkVqnzdWqU1PVCnzs3NVWtTM3NTtVr0xLzMxKQrCQlJWVlJOOdP5GSkXzhRZwusodVVU4mMYRER6PUaVM0V9RCSo + aJzkJ8IoVrDUmq6ep8rRoZXK06KZO7VFS8uUVVW4qKqqqVQqqoACgAAASEFqLoWsjgUT6y1gf0EQU1zSlPsEPxQZu / b26dpSt9xSnP6o8IjW / 1XrdSQuczg7MjeD + vBIjtd6kOBc6k1Ec39zVtBP + 8DV4cgGelVpW4Mmp05fUHhHGXmsPMFSZah1CB1ZO / H4iNoS1vp4QER05pzAYxnU2uxz3ER7 / pwRHAB0r7i3kJU6X7C + EAqmtPMUHZqPUc / + + RkPzEDXbdC1cw1hst9Fau1dEycdru9SEZKQ uKVEysbJx1XlXjCQjZKPg279g + ZO0CKpLJKEUTOUBKICGekbmhbChU5UpzCE7EEwZHjKO48u9X69r67wdG7z2erWtTNWKPTq5G9qU3R7qkro6PXZHRlJVlYFSDIgxHvXbvwo1F7 / JSKeGBEAxiuRgeg / H + PQ2k4FNV4co7h1RMGsLQtqbKOBvyd5 / s1Ym5pnjFyk3nXndv0jxt3 / uOpR004rcjZ9V6e2HsKusLC0ZRsm8gnk3Uq5LxrWZaxsw0cKNTqlXIg5RUMUCqkEXDVaaH1mUGW47I5JNJZ7M0WusVYXdzQVipalRq1F5gAeUlFIDAEGR2gMOBE7QAv0 ++ BROxOEfEQgfAvGzTRf5UsOgXxFf6b + k + MX0by80A3tYPDntsrb + + 3Ffjz04p8htUcheX99PxY3JrnjxXuS 7yVG7Bo26UzS8PruR3XYoLWZq5YyVaNosfTZGOexbWEM2WIzcJLtiNhMCiYD0NtWp1KSKXU1eUTE5nZvnx6Y + ffmV5eZfGapy1 / b4q6ttNpfVTTqC2qJbLTaqRT5H5BSVCWCoFIXaqqNwjyl2zLCtrDZxAN2U1tfifMH5qnMZDAewZ63uD + 4qSl7B7oC6Ax / u9cYNpezmrA7vtdGIuUl6ZOnUsoGEPGnVMuMh2 / x + NDP2Z6G0yORJ / RHcInrU1BzqDJbuU5G7O77RUPRth8D / mk5k8U9CcDtp1LenJ3jrpa3ynLW / WKPq23d26y1rY5CuudOaEjGk / Hwl1tUFJvIR1JRTtum6SSOgddqsmBvNM4A0vFZqgIBIC9HWdkTP5QZDE43Tdxb3Vzb0axvnbleoiNI0qInJiDIlSAeMiN4MNwKWNBJQ6SmCqJnMmcooq5KcgiUxRwYQyAh0yibYX3 + vTzG4r2f6b3LjR1b5Ncd7Bu5jZdNV1zpyA3XrOZ2s2slM5S6iXuNfca6jbU8uCE3U20G / Uk2hm RV2BGS4rlTBFTxdWqsKyuQeWe / wDREV + amSxd1obJ46jc27XpRV92tRDUmtVCy8gbmmoBmJTEjPdFdvseWBXX2wCeXz0O6J / MGB861KFD3yPr2z0WrOBSdVO0o3DqMVC0dj + TV2IaRJGVszPsuaRgC1N741SpEESh41Ssl7gP5YKPD2x646ZISEXb80d0S9naAfP35IInf3PEfxnjbkJAMBkfTv6iOfh6d / X4h6dL80tjQAr46e7j2fL0Q + 3I / wDUj9PR / JSDxLWXN1Mjt67dESLqXQKoJEcOFFSkBQeVqInAgHx5CQmfXAenQ74WrKeyUWK / 9S02F5mS7HbTX0e33QmLyp3XX968pOTm8Kkymompbq5Fbx23Vouzox7SyR9a2VtG1XWAZWBpESc5FNJxpEziJHabV67QTcFOVNZUoAcz + nNaag7wPlwiuepHt8rnrrJW9NjRrV3dSdhkxnIjpG47SOsxF27SvnSronkf6lOtRM5EwfjgJEv7O + esqmdNj + qe49UbactJaixrBJSyNqfRcUz0QKImTbRcRDRboZEzmMhoiOcnj4OwzUeddhHNWiykfMwkVIw0uwUUREyLpo4XauEhKokochimFslSQAIMpDgeiJCzGLuGzF46 / CkNeVztubRTtqudqtWDKdu1WAYGYIBEZQlkYh8pZwe / tTrqPf7q7jPW / NTnxn2HwgcMPeSJBt + X73Zy / nx2iWZkAgPjP5yHYaZdh7 / YIVzPWF14zI7D4Q2fD3vH4Qj73Zj8RHP + qG3snYfupd6 / 13rFccAZdQPhCBwtx02n + XY / mIw1lsKDmt2RsVOc83VdnWpBcVS3Mm5TuYp4iQ7h6 / g2rFm3IdQBUVWUTSTIAmOYCgI9eVHUg7Dzcp4HoPVuglhMNcLm7Fy1qFW9oNsurMn1ayGQVKxZiZSCqCSZAAkx / 9k = )
Prenons un exemple encore plus simple: convertir l'image suivante en un URI de données et l'insérer dans notre balisage sous forme d'image intégrée:
Suivez simplement les étapes ci-dessus pour convertir l'image en une image codée en Base64, copiez le balisage HTML généré par l'outil (à partir du panneau "En tant qu'image") et collez-le directement dans votre balisage HTML de la même manière que pour l'insertion. une image en ligne régulière.
Le code final de cet exemple ressemble à ceci:
Il n'y a pas vraiment de règles strictes sur le moment d'utiliser les URI de données pour remplacer les actifs de site, mais il existe un certain nombre d'inconvénients et de particularités à prendre en compte lors du choix d'utiliser ou non des URI de données..
Tu te souviens de moi disant ça tout les données binaires peuvent être utilisées dans le schéma d'URI de données? Maintenant que nous avons examiné les images encodées en base64, voyons maintenant comment transformer une police d'icône en un URI de données et l'implémenter dans un projet..
En fait, les URI de données conviennent parfaitement aux polices à icônes, en particulier si vous prévoyez d'utiliser quelques symboles avec une petite taille de fichier..
Nous allons utiliser l'application Web en ligne IcoMoon pour générer un jeu de polices personnalisé, générer l'URI des données et générer le code CSS final..
Tout d’abord, rendez-vous sur le site IcoMoon et cliquez sur le lien "Démarrer avec l’application":
Ensuite, parcourez les jeux de polices pour sélectionner vos polices d’icône personnalisées ou utilisez le champ de recherche en haut à gauche de la page pour rechercher les polices correspondant aux balises 'Comment', 'Cœur', 'Oeil' et 'Recherche'..
J'ai utilisé le jeu de polices Broccolidry de Visual Idiot dans cet exemple.
Ensuite, passez à la page des paramètres de téléchargement en cliquant sur le bouton "Police" en bas de l'écran:
Dans la page des paramètres de téléchargement, définissez Baseline sur 10%, cliquez sur l'icône des paramètres pour afficher les options avancées, puis cochez la case "Encoder et incorporer en base64 dans CSS". Cliquez sur l'icône "Enregistrer" pour télécharger votre police..
Une fois que vous avez téléchargé et extrait la police personnalisée, vous pouvez ouvrir le fichier 'index.html' pour afficher votre police et leurs combinaisons Unicode:
Maintenant que nous avons créé notre jeu de polices d'icônes personnalisé, voyons comment nous pouvons l'utiliser dans un projet..
Tout d’abord, ouvrez la feuille de style fournie dans le téléchargement IcoMoon et localisez le fichier CSS suivant. Puisque le nom du jeu concerne la réduction des requêtes HTTP, nous allons copier et coller tout le CSS fourni dans notre propre feuille de style..
@ font-face font-family: 'customFont'; src: url (data: police / svg; charset = UTF-8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI / Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE + ClRoaXMgaXMgYSBjdXN0b20gU1ZHIGZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uCjEKPC9tZXRhZGF0YT4KPGRlZnM + + Cjxmb250IGlkPSJjdXN0b21Gb250IiBob3Jpei1hZHYteD0iNTEyIiA Cjxmb250LWZhY2UgdW5pdHMtcGVyLWVtPSI1MTIiIGFzY2VudD0iNDYxIiBkZXNjZW50PSItNTEiIC8 + CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSI1MTIiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMTsiIGQ9Ik0gNTA3LjQ0LTIuMjQ4YyA2LjA5Ni02LjA5NiwgNi4wOTYtMTUuOTg0LDAuMDAtMjIuMDk2bC0yMi4wOTYtMjIuMDk2CgljLTYuMTEyLTYuMDk2LTE2LjAwLTYuMDk2LTIyLjA5NiwwLjAwbC0xNTQuNjg4LDE1NC42ODhjLTEuNjgsMS42OC0yLjgwLDMuNjY0LTMuNTUyLDUuNzc2QyAyNzMuMjgsOTAuODQsIDIzNC4zMiw3Ny4wMCwgMTkyLjAwLDc3LjAwCglDIDg1Ljk2OCw3Ny4wMCwwLjAwLDE2Mi45NjgsMC4wMCwyNjkuMDBDMC4wMCwzNzUuMDMyLCA4NS45NjgsNDYxLjAwLCAxOTIuMDAsNDYxLjAwYyAxMDYuMDMy LDAuMDAsIDE5Mi4wMC04NS45NjgsIDE5Mi4wMC0xOTIuMDBjMC4wMC00Mi4zMi0xMy44NC04MS4yOC0zNy4wMjQtMTEzLjAwOAoJYyAyLjExMi0wLjc1MiwgNC4wOTYtMS44NTYsIDUuNzc2LTMuNTUyTCA1MDcuNDQtMi4yNDh6IE0gMTkyLjAwLDM5Ny4wMGMtNzAuNjg4LDAuMDAtMTI4LjAwLTU3LjMxMi0xMjguMDAtMTI4LjAwYzAuMDAtNzAuNjg4LCA1Ny4zMTItMTI4LjAwLCAxMjguMDAtMTI4LjAwcyAxMjguMDAsNTcuMzEyLCAxMjguMDAsMTI4LjAwCglDIDMyMC4wMCwzMzkuNjg4LCAyNjIuNjg4LDM5Ny4wMCwgMTkyLjAwLDM5Ny4wMHoiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMjsiIGQ9Ik0gMjU2LjAwLDEzLjQ5NmMtMTAuMzg0LDAuMDAtMjUuNTg0LDExLjY4LTM1LjY2NCwxMi43NTJjLTI4Ljc1Mi0yNC4xMTItNTguNzA0LTUzLjEzNi05OS40MjQtNjguMjI0CgljLTE3Ljc3Ni03LjUzNi0zMy4wNC0xMS45MDQtMzcuMDA4LTcuMTUyYy01LjMyOCw2LjE5Mi0xMy4zNzYsMTQuNzg0LTE0LjgwLDE3LjA4OGMgMC4wOCwzLjQyNCwgNC4yMjQsMC43MiwgOC43MzYsNS41ODQKCWMgMjQuNTc2LDEwLjMzNiwgNDAuNDQ4LDM3LjAwOCwgNTEuMTIsNjkuNjE2QyA1MS45ODQsODEuNzM2LDAuMDAsMTU0LjEwNCwwLjAwLDIzNy4yMDhDMC4wMCwzNjAuNzQ0LCAxMTQuNjI0LDQ2MC45MDQsIDI1Ni4wMCw0NjAuOTA0cyAyNTYuMDAtMTAwLjE0NCwgMjU2LjAwLTIyMy42OTYKCVMgMzk3LjM3NiwxMy40OTYsIDI1Ni4wMCwx My40OTZ6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjM7IiBkPSJNIDM2OC4wMCw0MjkuMDBjLTM4LjQ2NCwwLjAwLTY5LjI5Ni0xMy44MDgtOTYuNDgtNDEuMDA4Yy0wLjAxNi0wLjAxNi0wLjAzMi0wLjAzMi0wLjA0OC0wLjA0OAoJbC0wLjAxNiwwLjAwTCAyNTYuMDAsMzY4LjQ3MkwgMjQwLjU0NCwzODYuNzZjLTAuMDE2LDAuMDE2LTAuMDMyLDAuMDMyLTAuMDQ4LDAuMDQ4TCAyNDAuNDgsMzg2LjgwOCBsMC4wMCwwLjAwQyAyMTMuMjgsNDE0LjAyNCwgMTgyLjQ2NCw0MjkuMDAsIDE0NC4wMCw0MjkuMDBTIDY5LjM3Niw0MTQuMDI0LCA0Mi4xNzYsMzg2LjgyNAoJQyAxNC45OTIsMzU5LjYyNCwwLjAwLDMyMy40NjQsMC4wMCwyODUuMDBjMC4wMC0zOC40MzIsIDE0Ljk2LTc0LjU5MiwgNDIuMTI4LTEwMS43NzZMIDIzMy4yOC05LjUyOEMgMjM5LjI4LTE1LjU5MiwgMjQ3LjQ3Mi0xOS4wMCwgMjU2LjAwLTE5LjAwcyAxNi43MiwzLjQwOCwgMjIuNzIsOS40NzIKCWwgMTkxLjEzNiwxOTIuNzUyQyA0OTcuMDI0LDIxMC40MDgsIDUxMi4wMCwyNDYuNTUyLCA1MTIuMDAsMjg1LjAwYzAuMDAsMzguNDY0LTE0Ljk5Miw3NC42MjQtNDIuMTc2LDEwMS44MjRDIDQ0Mi42MjQsNDE0LjAyNCwgNDA2LjQ2NCw0MjkuMDAsIDM2OC4wMCw0MjkuMDBMIDM2OC4wMCw0MjkuMDB6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjQ7IiBkPSJNIDI1Ni4wMCwzNjUuMDBDIDExNC42MDgsMzY1LjAwLDAuMDAsMjA1LjAwLDAuMDAsMjA1LjAwcyAx MTQuNjA4LTE2MC4wMCwgMjU2LjAwLTE2MC4wMHMgMjU2LjAwLDE2MC4wMCwgMjU2LjAwLDE2MC4wMFMgMzk3LjM5MiwzNjUuMDAsIDI1Ni4wMCwzNjUuMDB6IE0gMjU2LjAwLDEwOS4wMAoJCQljLTUzLjAwOCwwLjAwLTk2LjAwLDQyLjk5Mi05Ni4wMCw5Ni4wMHMgNDIuOTkyLDk2LjAwLCA5Ni4wMCw5Ni4wMHMgOTYuMDAtNDIuOTkyLCA5Ni4wMC05Ni4wMFMgMzA5LjAwOCwxMDkuMDAsIDI1Ni4wMCwxMDkuMDB6IE0gMjU2LjAwLDI2OS4wMGMtMzUuMzQ0LDAuMDAtNjQuMDAtMjguNjU2LTY0LjAwLTY0LjAwcyAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwcyA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwCgkJCVMgMjkxLjM0NCwyNjkuMDAsIDI1Ni4wMCwyNjkuMDB6IiAvPjwvZm9udD48L2RlZnM + PC9zdmc +) Format ( 'svg'), url (data: police / ttf; charset = UTF-8; base64, AAEAAAANAIAAAwBQRkZUTWJ6KjIAAAbwAAAAHEdERUYANQAGAAAG0AAAACBPUy8yT9zb + QAAAVgAAABWY21hcARB + dYAAAHQAAABUmdhc3D // wADAAAGyAAAAAhnbHlmq9ef6AAAAzgAAAGoaGVhZPoP + 5cAAADcAAAANmhoZWED / f / WAAABFAAAACRobXR4CqoAAAAAAbAAAAAgbG9jYQGQASoAAAMkAAAAEm1heHAATQApAAABOAAAACBuYW1lOPxXYAAABOAAAAGqcG9zdJ + wTbMAAAaMAAAAOgABAAAAAQAAJNzn + l8PPPUACwIAAAAAAMx4XYAAAAAAzHhdgAAA / 80CAAHNAAAACAACAAAAAAAAAAEAAAHN / 80ALgIAAAD + AAIAAAEAAAAAAAAAAAAAAA AAAAAAAIAAEAAAAIACYAAwAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQMAAAAAAAAAAAABEAAAAAAAAAAAAAAAUGZFZABAACHwAAHN / 80ALgHNADOAAAABAAAAAAAAAgAAAAAAAAAAqgAAAgAAAAIAAAACAAAAAgAAAAAAAAAAAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAAAk8AD // // wAAAAAAIfAA 8AAP / iEAcAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAwQFBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMgBkAIoAxgDUAAAAAgAA / 9EB / AHNABUAHQAABRYPAQYvASYnBiMiJjQ2MhYVFAcWFyYiBhQWMjY0AfsLCxYLC5oDATM + UHBwoHAlAwNsaktLaksCCwsWCwuaAwMlcKBwcFA + MwED9UtqS0tqAAAAAAEAAP / OAgABzQAeAAAlIiYjDgQHBicuAic0PgE3NjcuATU0NjIWFAYBAAYZBQIdCxgVDCAFAgcFAQIFAiESO0aW1JaWDQ0BGQkSCwQNBgIIBgEBAQICDTgeZz1dg4O5hAAAAAABAAD / 7QIAAa0AFgAAASIHIwcnMCMxJiMiBhQfARYy PwE2NCYBcDcpAQ8PASo2PFQqvwoaCr8qVAGtKRQTKlR4KsEJCcEqeFQAAAAAAwAAAC0CAAFtABUAHQAlAAAAIg4CDwEeBDI + Aj8BLgMGIiY0NjIWFCYiBhQWMjY0AShQUT0xDQwFETc4U1BRPTENDAURNzhTUDg4UDhFNiUlNiUBbSEvLxARBxU3KiMhLy8QEQcVNyrdOFA4OFBoJTYlJTYAAAAAAQAA / 80CAAHNAAIAABEBIQIA / gABzf4AAAAAAAAADACWAAEAAAAAAAEACgAWAAEAAAAAAAIABwAxAAEAAAAAAAMAJgCHAAEAAAAAAAQACgDEAAEAAAAAAAUACwDnAAEAAAAAAAYACgEJAAMAAQQJAAEAFAAAAAMAAQQJAAIADgAhAAMAAQQJAAMATAA5AAMAAQQJAAQAFACuAAMAAQQJAAUAFgDPAAMAAQQJAAYAFADzAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAYwB1AHMAdABvAG0ARgBvAG4AdAAgADoAIAAxADQALQA5AC0AMgAwADEAMgAARm9udEZvcmdlIDIuMCA6IGN1c3RvbUZvbnQgOiAxNC05LTIwMTIAAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAQACAAQABQAGAAcBAgd1bmlGMDAwAAAAAAAB // 8AAgABAAAADgAAABgAAAAAAAIAAQADAAcAAQAEAAAAAgAAAAAAAQAAAADJiW8xAAAAAMx4XYAAAAAAzHhdgA == ) format ('TrueType'); poids de police: normal; style de police: normal;Ces quelques lignes de CSS auront désormais votre police d’icône personnalisée prête à fonctionner sur tous les navigateurs modernes. Si vous souhaitez prendre en charge le mode de compatibilité IE9 et les anciennes versions d'IE, vous devrez ajouter une règle supplémentaire (notez que cela extraira des ressources supplémentaires, mais uniquement lorsque l'agent utilisateur les demandera)..
@ font-face font-family: 'customFont'; src: url ('… /fonts/customFont.eot'); src: url ('… /fonts/customFont.eot?#iefix') format ('embedded-opentype'); poids de police: normal; style de police: normal;Curieux de connaître ces correctifs IE? Paul Irish a publié un excellent blog sur une syntaxe bulletproof @ font-face.
Maintenant que nos règles ont été créées, nous pouvons inclure la police personnalisée dans notre conception de deux manières. Les deux utilisent des droits Unicode pour référencer l'icône correspondante. Le gros avantage de l'application IcoMoon est que tout le CSS a déjà été généré pour nous, prêt à être copié dans notre feuille de style principale, selon l'approche que nous décidons d'utiliser (ou les deux)..
Utilisation de votre police d’icônes: approche des icônes de données
La première technique permettant d’utiliser votre police d’icônes est l’approche data-icon, qui maintient notre balisage propre et qui convient aux lecteurs d’écran..
Disons que nous souhaitons inclure une icône de commentaire (dans ce cas, avec la valeur unicode de
& # x22;) à l'intérieur d'un élément span sur notre page.Notre HTML:
Les CSS pertinentes (extraites directement de la feuille de style IcoMoon téléchargée) sont les suivantes (les commentaires sont les miens).
/ * A: avant que le pseudo-élément soit créé pour tout élément HTML avec l'attribut data-icon * / [data-icon]: avant / * la famille de polices est définie, le nom défini dans notre règle @ font-face * / font-family : 'customFont'; / * Le contenu du pseudo-élément est extrait de l'icône de données HTML (par exemple, ") * / content: attr (icône de données); / * Instructions supplémentaires pour les lecteurs d'écran (non universellement reconnus) * / speak: none; / * Style de police universel * / font-weight: normal; -webkit-font-lissage: anti-aliasé; span / * Style de police spécifique * / font-size: 2em; color: # A2A2A2; remplissage: 2px 5px 2px 5px; margin-right: 5px;Bien que cette approche soit agréable, rationalisée et évite un surcroît de classe dans votre balisage, il se peut que ce ne soit pas le meilleur choix pour le code maintenable. À moins que votre mémoire de caractères Unicode soit à la fois encyclopédique et photographique, cette approche ne contient aucune information dans le code HTML qui vous indique quelle icône sera affichée..
Utilisation de votre police d'icônes: approche de classe supplémentaire
Vous pouvez également utiliser des classes CSS supplémentaires dans votre code HTML pour afficher l’icône. Cela présente l'avantage de saisir des informations descriptives sémantiques directement dans votre balisage, ce qui améliore la lisibilité de votre code..
Pour utiliser cette approche, ajoutez un élément dans votre code HTML avec un nom de classe fourni par la feuille de style IcoMoon:
Notre CSS ressemblera à ceci (les commentaires sont les miens).
/ * La règle sera appliquée à tout élément HTML avec une classe de 'icon- * l et définira un pseudo-élément sur l'élément * / [class ^ = "icon -"]: before, [class * = "icon- "]: avant / * Famille de police est défini le nom défini dans notre règle @ font-face * / font-family: 'custom'; style de police: normal; parle: aucun; poids de police: normal; -webkit-font-lissage: antialiasé; .icon-comment: before / * Le contenu du pseudo-élément est défini en unicode échappé (c'est-à-dire "devient '/ 22') * / content:" \ 22 ";Maintenant, avec un peu de style supplémentaire, vous pouvez facilement implémenter de superbes polices d'icônes dans votre prochain projet - sans alourdir votre arborescence de ressources avec des ressources supplémentaires..
Conclusion
Merci d'avoir pris le temps d'explorer certaines des manières dont vous pouvez tirer le meilleur parti des URI de données pour votre prochain projet..
Il est important de se rappeler que les URI de données ne sont pas toujours la meilleure solution. Bien que l'utilisation de CSS3, SVG et des polices d'icônes présente des avantages très convaincants par rapport à l'utilisation d'images (en particulier dans le domaine de la réactivité), les avantages de l'encodage de vos images en base64 sont plus nuancés. Lorsque vous envisagez d'utiliser ou non des URI de données dans votre prochain projet, évaluez les temps de chargement et réduisez le nombre de requêtes HTTP avec la maintenabilité du code - considérez simplement les URI de données comme un autre outil de votre boîte à outils!
Avez-vous apprécié ce tutoriel et êtes-vous impatient de commencer à utiliser ces techniques de manière plus pratique? Ne perdez pas de vue le nouveau contenu premium bientôt où nous utiliserons de manière intensive les URI de données pour créer une interface utilisateur légère. Surveillez cet endroit!
Comment avez-vous utilisé les polices d'icônes et les URI de données dans vos projets? Abonnez-vous et laissez un commentaire!
Ressources supplémentaires
