Accentsconagua

Hva, hvorfor og hvordan data URIer i webdesign

Webdesign
Share

La oss se på å forbedre ytelsen til nettstedet ditt ved å redusere antall HTTP-forespørsler det gjør. Vi skal dra nytte av en teknikk som kalles data URI-ordningen; Koding av både bilder og fonter til rene datastrenger som kan integreres direkte i oppslag og stilark.

thumbnail: Broccolidryiconsaniconsetitisfullof ... ikoner av Visual Idiot (vi bruker disse ikonene på et minutt ...)

Etter hvert som Internett-tilkoblinger ble raskere og datamaskiner kraftigere, pleide nettstedet ytelse å være en ofte oversett beste praksis. I dag, for å sikre at nettstedet ditt fungerer bra, er det absolutt viktig at både brukerne og søkemotorene er fornøyd. spesielt når nettstedet er tilgjengelig ved hjelp av mobildata og underdrevne telefoner og andre enheter.

Hva, hvorfor og hvordan data URIer

Vi har allerede sett på CSS Sprite Sheets: Best Practices, Tools og Helpful Applications før på Webdesigntuts +, og demonstrerer hvordan du kan forbedre ytelsen ved å redusere HTTP-forespørsler og redusere samlet bildefilstørrelse. Men visste du at du kan representere et bilde (faktisk noen binære data) i HTML eller CSS ved hjelp av bare en ASCII-tekststreng?

Denne teknikken er kjent som Data URI-ordningen, og er faktisk ikke ny. Selv om data-URIer har vært flytende i mer enn ti år, har de bare blitt populært ganske nylig med utstrakt nettleserkompatibilitet og et fokus på å forbedre ytelsen på nettstedet..

Hva er fordelene med å bruke data URIer?

Den primære fordelen ved å bruke data URIer er forbedring av ytelsen. Eventuelle ressurser som brukes på nettstedet ditt hentes av nettleseren din ved hjelp av en HTTP-forespørsel. Dette inkluderer alt fra stilark, til JavaScript-filer, til bilder. Uansett hastigheten på internettforbindelsen, begrenser nesten alle nettlesere maksimalt antall samtidige HTTP-forespørsler til to om gangen, noe som effektivt resulterer i en flaskehals med data. Jo flere HTTP-forespørsler som må gjøres, jo dårligere blir ytelsen til nettstedet ditt.

Kombinere bildedata i HTML eller CSS på nettstedet fjerner umiddelbart behovet for at nettleseren skal hente ekstra ressurser. Selv om rå Base64-kodede data generelt anses å være rundt 33% større enn den optimaliserte motparten (for eksempel et bilde), etter gzipping og CSS-filoptimalisering er forskjellen i filstørrelse generelt ubetydelig.

Hva ser data URIer ut som?

En Data URI er i hovedsak binær data kodet inn i et Base64-format, sammen med noen tilleggsinformasjon for nettleseren, inkludert en MIME-type, en Charset og kodingsformatet (Base64).

Data URI (i sin enkleste form) ser slik ut:

data: [] [; charset =] [; base64],

Hvis du vil bruke en data-URI som et inline HTML-bilde, ser formatet slik ut:

  Mitt bilde

For å bruke en data URI som et gjentatt bakgrunnsbilde i CSS, er formatet som følger:

kropp bakgrunnsbilde: url ('data: image / png; base64,'); bakgrunnsrepetisjon: gjenta;

Alternativt kan du kombinere bakgrunnselementene med CSS-kortskrift:

div.logo bakgrunn: url ('data: image / png; base64,') no-repeat øverst til venstre; margin: 20px 10px 0 10px;

Selv om vi har brukt bilder for å illustrere bruken av Data URIer, kan nesten alle medier brukes, inkludert multimediefiler, skrifter (som vi ser kort tid) og mye mer.

Slik bruker du data-URIer

OK, la oss få praktisk med et par eksempler. La oss ta følgende bilde (en gjentatt flis som jeg lastet ned fra Subtle Patterns), konvertere den til en Data URI og bruk CSS til å lage en gjentakende bakgrunn for et nettsted eller grensesnitt.

Selv om data-URIer kan se ganske funky, er prosessen for å lage en veldig enkel.

Først går du over til Web Semantics Data URI Converter og laster opp bildet ved å velge filens plassering og klikke på "Konverter bilde" -verktøyet:

Når du er behandlet, hvis du ruller nedover siden, ser du hvordan dette bildet ser ut som base64 kodet:

Siden vi trenger en gjentakende bakgrunn for prosjektet, må vi endre CSS gitt til oss av verktøyet.

For en gjentakende bakgrunn, kopier og lim inn følgende CSS:

 div.logo background-repeat: repeat; bakgrunnsbilde-: 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 = );

La oss ta et enda enklere eksempel, konvertere følgende bilde til en Data URI og slå det inn i vår oppføring som et inline bilde:

Bare følg trinnene ovenfor for å konvertere bildet til et base64-kodet bilde og kopiere HTML-markeringen generert av verktøyet (fra panelet 'Som et bilde') og lim det direkte inn i HTML-oppsettet på samme måte som du ville sette inn et vanlig inlinebilde.

Den endelige koden for dette eksemplet ser slik ut:

Når skal du bruke data-URIer (og når du skal unngå dem)

Det er egentlig ikke noen harde og raske regler om når du skal bruke data-URIer for å erstatte nettstedets eiendeler, men det er en rekke ulemper og særegenheter å vurdere når du velger om du vil bruke Data URI.

  • Hvis du planlegger å støtte
  • Data URIer blir ikke lagret av nettleseren, så de må lastes ned på hver side, selv om de allerede er gjort av nettleseren.
  • Data URI er mest egnet for små ressurser, men de kan brukes til større ressurser (for eksempel fotografier) ​​uten å pådra seg større ytelsesstraff (etter at de har blitt pakket 2-3% større enn den opprinnelige filen). Vær imidlertid oppmerksom på at brukeren ikke vil se hva som helst til hele aktiva er lastet ned, noe som kan være uønsket for brukere på mobil eller med langsom Internett-tilkobling.
  • Data URIer gjør at CSS og HTML-dokumentene ser veldig rotete ut. For store nettsteder og utbredt datautnyttelse av data, blir stilark og markering vanskeligere å lese, navigere og vedlikeholde.
  • Hver gang du gjør en endring til en ressurs (for eksempel et spritesheet), må du kodes om bildefilen, og legge til flere trinn til arbeidsflyten din..

Base64 kodet ikonfonter

Kan du huske meg å si det noen binære data kan brukes i data URI-skjemaet? Nå som vi har sett på base64 kodede bilder, la oss nå se på å slå et ikon skrift i en data URI og implementere det i et prosjekt.

Faktisk er data-URIer et perfekt match for ikonfonter, spesielt hvis du bare planlegger å bruke noen få symboler med en liten filstørrelse.

Vi skal bruke den elektroniske nettappappen IcoMoon til å generere et tilpasset skriftsett, utdata data URI og generere den endelige CSS-koden.

Først går du over til IcoMoon-siden og klikker på koblingen Start med App:

Deretter kan du enten bla gjennom skriftsettene for å velge dine egendefinerte ikonfonter, eller alternativt bruk søkefeltet øverst til venstre på siden for å finne fonter som samsvarer med merkene 'Kommentar', 'Hjertet', 'Øye' og 'Søk'.

Jeg har brukt Broccolidry-skriftsettet fra Visual Idiot i dette eksemplet.

Deretter går du til nedlastingsinnstillingssiden ved å klikke på "Font" -knappen nederst på skjermen:

På siden for nedlastingsinnstillinger endrer du grunnlinjen til 10%, klikker på innstillingsikonet for å hente de avanserte alternativene og markerer avkrysningsboksen 'Base64 Encode & Embed in CSS'. Klikk på "Lagre" -ikonet for å laste ned skriften.

Når du har lastet ned og hentet den egendefinerte skrifttypen, kan du åpne filen 'index.html' for å vise skrifttypen og deres unicode-sammenkoblinger:

Bruke Tilpasset Ikon Skrift

Nå som vi har opprettet vårt tilpassede ikonfontsett, la oss se hvordan vi kan bruke det i et prosjekt.

Først åpner du stilarket som er levert i IcoMoon-nedlastingen, og finner følgende CSS. Siden navnet på spillet handler om å redusere HTTP-forespørsler, skal vi kopiere og lime alle de oppgitte CSS-ene i vårt eget hovedarkiv.

 
@ font-face font-family: 'customFont'; src: url (data: font / svg; charset = utf-8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI / Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE + ClRoaXMgaXMgYSBjdXN0b20gU1ZHIGZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uCjEKPC9tZXRhZGF0YT4KPGRlZnM + Cjxmb250IGlkPSJjdXN0b21Gb250IiBob3Jpei1hZHYteD0iNTEyIiA + Cjxmb250LWZhY2UgdW5pdHMtcGVyLWVtPSI1MTIiIGFzY2VudD0iNDYxIiBkZXNjZW50PSItNTEiIC8 + CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSI1MTIiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMTsiIGQ9Ik0gNTA3LjQ0LTIuMjQ4YyA2LjA5Ni02LjA5NiwgNi4wOTYtMTUuOTg0LDAuMDAtMjIuMDk2bC0yMi4wOTYtMjIuMDk2CgljLTYuMTEyLTYuMDk2LTE2LjAwLTYuMDk2LTIyLjA5NiwwLjAwbC0xNTQuNjg4LDE1NC42ODhjLTEuNjgsMS42OC0yLjgwLDMuNjY0LTMuNTUyLDUuNzc2QyAyNzMuMjgsOTAuODQsIDIzNC4zMiw3Ny4wMCwgMTkyLjAwLDc3LjAwCglDIDg1Ljk2OCw3Ny4wMCwwLjAwLDE2Mi45NjgsMC4wMCwyNjkuMDBDMC4wMCwzNzUuMDMyLCA4NS45NjgsNDYxLjAwLCAxOTIuMDAsNDYxLjAwYyAxMDYuMDMy LDAuMDAsIDE5Mi4wMC04NS45NjgsIDE5Mi4wMC0xOTIuMDBjMC4wMC00Mi4zMi0xMy44NC04MS4yOC0zNy4wMjQtMTEzLjAwOAoJYyAyLjExMi0wLjc1MiwgNC4wOTYtMS44NTYsIDUuNzc2LTMuNTUyTCA1MDcuNDQtMi4yNDh6IE0gMTkyLjAwLDM5Ny4wMGMtNzAuNjg4LDAuMDAtMTI4LjAwLTU3LjMxMi0xMjguMDAtMTI4LjAwYzAuMDAtNzAuNjg4LCA1Ny4zMTItMTI4LjAwLCAxMjguMDAtMTI4LjAwcyAxMjguMDAsNTcuMzEyLCAxMjguMDAsMTI4LjAwCglDIDMyMC4wMCwzMzkuNjg4LCAyNjIuNjg4LDM5Ny4wMCwgMTkyLjAwLDM5Ny4wMHoiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMjsiIGQ9Ik0gMjU2LjAwLDEzLjQ5NmMtMTAuMzg0LDAuMDAtMjUuNTg0LDExLjY4LTM1LjY2NCwxMi43NTJjLTI4Ljc1Mi0yNC4xMTItNTguNzA0LTUzLjEzNi05OS40MjQtNjguMjI0CgljLTE3Ljc3Ni03LjUzNi0zMy4wNC0xMS45MDQtMzcuMDA4LTcuMTUyYy01LjMyOCw2LjE5Mi0xMy4zNzYsMTQuNzg0LTE0LjgwLDE3LjA4OGMgMC4wOCwzLjQyNCwgNC4yMjQsMC43MiwgOC43MzYsNS41ODQKCWMgMjQuNTc2LDEwLjMzNiwgNDAuNDQ4LDM3LjAwOCwgNTEuMTIsNjkuNjE2QyA1MS45ODQsODEuNzM2LDAuMDAsMTU0LjEwNCwwLjAwLDIzNy4yMDhDMC4wMCwzNjAuNzQ0LCAxMTQuNjI0LDQ2MC45MDQsIDI1Ni4wMCw0NjAuOTA0cyAyNTYuMDAtMTAwLjE0NCwgMjU2LjAwLTIyMy42OTYKCVMgMzk3LjM3NiwxMy40OTYsIDI1Ni4wMCwx My40OTZ6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjM7IiBkPSJNIDM2OC4wMCw0MjkuMDBjLTM4LjQ2NCwwLjAwLTY5LjI5Ni0xMy44MDgtOTYuNDgtNDEuMDA4Yy0wLjAxNi0wLjAxNi0wLjAzMi0wLjAzMi0wLjA0OC0wLjA0OAoJbC0wLjAxNiwwLjAwTCAyNTYuMDAsMzY4LjQ3MkwgMjQwLjU0NCwzODYuNzZjLTAuMDE2LDAuMDE2LTAuMDMyLDAuMDMyLTAuMDQ4LDAuMDQ4TCAyNDAuNDgsMzg2LjgwOCBsMC4wMCwwLjAwQyAyMTMuMjgsNDE0LjAyNCwgMTgyLjQ2NCw0MjkuMDAsIDE0NC4wMCw0MjkuMDBTIDY5LjM3Niw0MTQuMDI0LCA0Mi4xNzYsMzg2LjgyNAoJQyAxNC45OTIsMzU5LjYyNCwwLjAwLDMyMy40NjQsMC4wMCwyODUuMDBjMC4wMC0zOC40MzIsIDE0Ljk2LTc0LjU5MiwgNDIuMTI4LTEwMS43NzZMIDIzMy4yOC05LjUyOEMgMjM5LjI4LTE1LjU5MiwgMjQ3LjQ3Mi0xOS4wMCwgMjU2LjAwLTE5LjAwcyAxNi43MiwzLjQwOCwgMjIuNzIsOS40NzIKCWwgMTkxLjEzNiwxOTIuNzUyQyA0OTcuMDI0LDIxMC40MDgsIDUxMi4wMCwyNDYuNTUyLCA1MTIuMDAsMjg1LjAwYzAuMDAsMzguNDY0LTE0Ljk5Miw3NC42MjQtNDIuMTc2LDEwMS44MjRDIDQ0Mi42MjQsNDE0LjAyNCwgNDA2LjQ2NCw0MjkuMDAsIDM2OC4wMCw0MjkuMDBMIDM2OC4wMCw0MjkuMDB6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjQ7IiBkPSJNIDI1Ni4wMCwzNjUuMDBDIDExNC42MDgsMzY1LjAwLDAuMDAsMjA1LjAwLDAuMDAsMjA1LjAwcyAx MTQuNjA4LTE2MC4wMCwgMjU2LjAwLTE2MC4wMHMgMjU2LjAwLDE2MC4wMCwgMjU2LjAwLDE2MC4wMFMgMzk3LjM5MiwzNjUuMDAsIDI1Ni4wMCwzNjUuMDB6IE0gMjU2LjAwLDEwOS4wMAoJCQljLTUzLjAwOCwwLjAwLTk2LjAwLDQyLjk5Mi05Ni4wMCw5Ni4wMHMgNDIuOTkyLDk2LjAwLCA5Ni4wMCw5Ni4wMHMgOTYuMDAtNDIuOTkyLCA5Ni4wMC05Ni4wMFMgMzA5LjAwOCwxMDkuMDAsIDI1Ni4wMCwxMDkuMDB6IE0gMjU2LjAwLDI2OS4wMGMtMzUuMzQ0LDAuMDAtNjQuMDAtMjguNjU2LTY0LjAwLTY0LjAwcyAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwcyA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwCgkJCVMgMjkxLjM0NCwyNjkuMDAsIDI1Ni4wMCwyNjkuMDB6IiAvPjwvZm9udD48L2RlZnM + PC9zdmc +) format ( 'svg'), url (data: font / ttf; charset = utf-8; base64, AAEAAAANAIAAAwBQRkZUTWJ6KjIAAAbwAAAAHEdERUYANQAGAAAG0AAAACBPUy8yT9zb + QAAAVgAAABWY21hcARB + ​​dYAAAHQAAABUmdhc3D // wADAAAGyAAAAAhnbHlmq9ef6AAAAzgAAAGoaGVhZPoP + 5cAAADcAAAANmhoZWED / f / WAAABFAAAACRobXR4CqoAAAAAAbAAAAAgbG9jYQGQASoAAAMkAAAAEm1heHAATQApAAABOAAAACBuYW1lOPxXYAAABOAAAAGqcG9zdJ + wTbMAAAaMAAAAOgABAAAAAQAAJNzn + l8PPPUACwIAAAAAAMx4XYAAAAAAzHhdgAAA / 80CAAHNAAAACAACAAAAAAAAAAEAAAHN / 80ALgIAAAD + AAIAAAEAAAAAAAAAAAAA AAAAAAAIAAEAAAAIACYAAwAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQMAAAAAAAAAAAABEAAAAAAAAAAAAAAAUGZFZABAACHwAAHN / 80ALgHNADOAAAABAAAAAAAAAgAAAAAAAAAAqgAAAgAAAAIAAAACAAAAAgAAAAAAAAAAAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAAAk8AD // // wAAAAAAIfAA 8AAP / iEAcAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAwQFBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMgBkAIoAxgDUAAAAAgAA / 9EB / AHNABUAHQAABRYPAQYvASYnBiMiJjQ2MhYVFAcWFyYiBhQWMjY0AfsLCxYLC5oDATM + UHBwoHAlAwNsaktLaksCCwsWCwuaAwMlcKBwcFA + MwED9UtqS0tqAAAAAAEAAP / OAgABzQAeAAAlIiYjDgQHBicuAic0PgE3NjcuATU0NjIWFAYBAAYZBQIdCxgVDCAFAgcFAQIFAiESO0aW1JaWDQ0BGQkSCwQNBgIIBgEBAQICDTgeZz1dg4O5hAAAAAABAAD / 7QIAAa0AFgAAASIHIwcnMCMxJiMiBhQfARYy PwE2NCYBcDcpAQ8PASo2PFQqvwoaCr8qVAGtKRQTKlR4KsEJCcEqeFQAAAAAAwAAAC0CAAFtABUAHQAlAAAAIg4CDwEeBDI + Aj8BLgMGIiY0NjIWFCYiBhQWMjY0AShQUT0xDQwFETc4U1BRPTENDAURNzhTUDg4UDhFNiUlNiUBbSEvLxARBxU3KiMhLy8QEQcVNyrdOFA4OFBoJTYlJTYAAAAAAQAA / 80CAAHNAAIAABEBIQIA / gABzf4AAAAAAAAADACWAAEAAAAAAAEACgAWAAEAAAAAAAIABwAxAAEAAAAAAAMAJgCHAAEAAAAAAAQACgDEAAEAAAAAAAUACwDnAAEAAAAAAAYACgEJAAMAAQQJAAEAFAAAAAMAAQQJAAIADgAhAAMAAQQJAAMATAA5AAMAAQQJAAQAFACuAAMAAQQJAAUAFgDPAAMAAQQJAAYAFADzAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAYwB1AHMAdABvAG0ARgBvAG4AdAAgADoAIAAxADQALQA5AC0AMgAwADEAMgAARm9udEZvcmdlIDIuMCA6IGN1c3RvbUZvbnQgOiAxNC05LTIwMTIAAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAQACAAQABQAGAAcBAgd1bmlGMDAwAAAAAAAB // 8AAgABAAAADgAAABgAAAAAAAIAAQADAAcAAQAEAAAAAgAAAAAAAQAAAADJiW8xAAAAAMx4XYAAAAAAzHhdgA == ) format ('truetype'); font-weight: normal; font-style: normal; 
 
Disse få linjene i CSS vil nå ha din egendefinerte ikonfont klar til å fungere på alle moderne nettlesere. Hvis du vil støtte IE9-kompatibilitetsmodus og gamle versjoner av IE, må du legge til en ekstra regel (merk at dette vil hente ekstra ressurser, men bare når brukeragenten ber om dem).
 
 @ font-face font-family: 'customFont';  src: url ('... /fonts/customFont.eot');  src: url ('... /fonts/customFont.eot?#iefix') format ('embedded-opentype'); font-weight: normal; font-style: normal;
 
Nysgjerrig om disse IE-løsningene? Paul Irish har et flott blogginnlegg på en bulletproof @ font-face syntaks.
 
Nå som våre regler er opprettet, er det to måter at vi kan inkludere den egendefinerte skrifttypen i vårt design, som begge bruker Unicode rett til å referere til det aktuelle ikonet. Den gode tingen om IcoMoon-appen er at alle CSS allerede er generert for oss, klar til å bli kopiert til vårt hovedarkiv, avhengig av hvilken tilnærming vi bestemmer oss for å bruke (eller begge deler). 
Bruke ikonet Ikon: Data Ikon Tilnærming
 
Den første teknikken for å bruke ikonfonten din er datapunktet tilnærming, som holder vår oppslag fin og ren og er skjermleser vennlig.
 
La oss si at vi vil inkludere et kommentarikon (i dette tilfellet med unicode-verdien av & # X22;) inne i et spenningselement på vår side.
 
Vår HTML:
 
  
 
Det aktuelle CSS (hentet direkte fra det nedlastede IcoMoon-stilarket) er som følger (kommentarer er mine).
 
/ * A: før pseudoelementet er opprettet for ethvert HTML-element med data-ikonattributtet * / [data-ikon]: før / * Fontfamilie er satt navnet som er angitt i vårt @ font-face-regel * / font-familie : 'customFont'; / * Innholdet for pseudoelementet hentes fra HTML-data-ikonet (f.eks. ") * / Innhold: attr (data-ikon); / * Ytterligere instruksjoner for skjermlesere (ikke universelt anerkjent) * / snakk: ingen; / * Univeral font styling * / font-weight: normal; -webkit-font-utjevning: antialiased; span / * Spesifikk skrifttype * / skriftstørrelse: 2em; farge: # A2A2A2; polstring: 2px 5px 2px 5px; margin-høyre: 5px;
 
Selv om denne tilnærmingen er fin og strømlinjeformet og unngår ytterligere klasseoppblokk i oppslaget, er det kanskje ikke det beste valget for vedlikeholdsbar kode. Med mindre ditt minne om Unicode-tegn er både encyklopedisk og fotografisk, inneholder denne tilnærmingen ingen informasjon i HTML-en som viser deg hvilken ikon som skal vises.
 
Bruke ikonfonten: Tilleggsklasse tilnærming
 
Som en alternativ tilnærming kan du velge å bruke flere CSS-klasser i HTML for å vise ikonet. Dette har fordelen av å legge inn semantisk, beskrivende informasjon direkte inn i oppslaget ditt, og øke lesbarheten til koden din.
 
For å bruke denne tilnærmingen, legg til et element i HTML-en din med et klassenavn som følger med IcoMoon-stilarket:
 
 
 
Vår CSS vil se slik ut (kommentarer er mine).
 
/ * Regelen vil bli brukt på ethvert HTML-element med en klasse av 'ikon- * l og setter et pseudo-element til elementet * / [class ^ = "icon -"]: før, [class * = "icon- "]: før / * Fontfamilie er satt navnet som er angitt i vårt @ font-face-regel * / font-familie: 'egendefinert'; font-style: normal; snakk: ingen; font-weight: normal; -webkit-font-utjevning: antialiased;  .ikon-kommentar: før / * Innholdet for pseudoelementet er angitt i unngått unicode (dvs. "blir" / 22 ') * / innhold: "\ 22";
 
Nå, med en liten ekstra styling, kan du enkelt implementere flotte ikonfonter i ditt neste prosjekt - uten å kutte ressurset ditt ned med ekstra ressurser.
 
 
Konklusjon
 
Takk for at du tok deg tid til å utforske noen av måtene du kan få mest mulig ut av Data URIer for ditt neste prosjekt.
 
Det er viktig å huske at Data URI ikke er alltid den beste løsningen. Selv om bruken av CSS3, SVG og Icon Fonts har noen svært overbevisende fordeler i forhold til bruk av bilder (spesielt i form av responsiv design), er fordelene ved å kode bildene dine i base64 mer nyanserte. Når du vurderer om du vil bruke data-URIer i ditt neste prosjekt, må du veie opplastetider og redusere HTTP-forespørsler med kodevedlikehold - bare vurdere Data URIer som et annet verktøy i verktøykassen din.!
 
Nyt du denne opplæringen og er nå kløe for å komme i gang med å bruke disse teknikkene på en mer praktisk måte? Hold øye med nytt premiuminnhold snart hvor vi skal bruke data-URIer i stor grad for å lage et lett brukergrensesnittdesign. Se på dette rommet!
 
Hvordan har du brukt ikonfonter og data URIer i prosjektene dine? Abonner og legg igjen en kommentar!
 
 
Tilleggsressurser
 
     
  • Web Semantics Data URI Konverteringsverktøy
    •  
  • IcoMoon Font App
    •  
  • The What Hvorfor og hvordan med teksturer i webdesign
    •  
  • Bulletproof @ font-face syntaks
    •  
  • CSS Sprite Sheets: Best Practices, Verktøy og nyttige applikasjoner
    •  
  • Brokkolid skrifttype
    •  
  • Komme i gang med skalerbar vektorgrafik (SVG)
    •  
  •  duri.me et super enkelt dataURI verktøy
    •  





	
	
			
	   
	







Webdesign
×