Share
Utviklingen av Internett-teknologier slutter aldri å forbløffe. Synes daglig, blir nye konsepter og teknikker tenkt opp av kreative og talentfulle mennesker. Med moderne nettlesere blir vedtatt i større grad, systemer som CSS3 blir mer og mer levedyktig for bruk på prosjekter av alle størrelser. Dette kan tydeligvis ses ved å se på nye tjenester som sprer seg på nettet som TypeKit. Konseptuelt, hvis vi dekonstruerer en font ned til det er grunnleggende elementer, kan vi benytte seg av denne teknologien for andre ting enn å skrive, ikoner.
For en kort periode begynte utviklere å produsere nettsteder med lite hensyn til båndbreddeforbruk. HTML og CSS hvor restriktiv og Adobe Flash var et åpent lerret for designere og utviklere for å lage animasjoner og komplekse oppsett i. Dette resulterte i noen ekstremt båndbredde tunge steder - vi husker alle noen få. Det var dagene før spredning av mobile smarttelefoner.
Med smarte telefoner som har tilgang til Internett oftere, har båndbredde og sidelasthastigheter plutselig kommet tilbake til forkant. Heldigvis, fremskritt i HTML, CSS, og JavaScript har gjort alt mulig. Sentralt i nettsidens hastighet og respons er antall HTTP Be om en sidelast må gjøre. Moderne nettlesere begrenser antall forespørsler til en enkelt server. W3C HTTP 1.1 spesifikasjonen leser
"En enkeltbrukerklient SKAL IKKE opprettholde mer enn 2 tilkoblinger med hvilken som helst server eller proxy. En proxy må bruke opptil 2 * N-tilkoblinger til en annen server eller proxy, hvor N er antall samtidige aktive brukere. Disse retningslinjene er ment å forbedre HTTP responstider og unngå overbelastning. "
En teknikk som har blitt stadig mer populær, er bruken av CSS fantomer. CSS sprites er designet for å redusere antall HTTP forespørsler til webserveren ved å kombinere mange mindre bilder til et enkelt større bilde og definere et blokknivå CSS element for å bare vise en definert del av det større bildet. Teknikken er enkel, men genial.
Fonter på sitt mest grunnleggende molekylære nivå er en serie av vektorglyfer pakket inn i et enkelt "glyph arkiv".
CSS3 har introdusert til webutviklingsverdenen evnen til å legge inn fonter med @ Ansikt-ansikt erklæring. Uten tvil er denne fremgangen i Internett-teknologier et av de mest spennende og viktige stadiene i vår korte historie. Med utviklere som er i stand til å legge inn fonter etter eget valg, kan designere lage layouter som vil gjengi langt mer konsekvent fra plattform til plattform, og bringe kunsten til interaktiv layout nærmere det er utskriftskusine.
Hvis vi tar en nærmere titt på teknologien bak en skrift, kan vi få en langt bedre forståelse av hvordan de kan brukes og distribueres. Fonter på sitt mest grunnleggende molekylære nivå er en serie av vektorglyfer pakket inn i et enkelt "glyph arkiv". Vi kan da referere til hver glyph med tilhørende karakterkode. Teoretisk sett er det veldig lik den måten vi refererer til en matrise på nesten hvilket som helst programmeringsspråk - gjennom et nøkkel / verdi par.
Med dette i bakhodet, kan de glyfer vi refererer virkelig være et vektorbasert enkeltfargebilde. Dette er ikke noe nytt - vi har alle sett Dingbats og Webdings. De er to eksempler på ikke-type fonter, det vil si en rekke vektorbaserte bilder kompilert i et enkelt skriftarkiv.
Med adventen av font-embedding og realiseringen av at skrifttyper er i hovedsak en serie enkle vektorglyfer, begynte jeg å eksperimentere med hvordan jeg bruker dette formatet til min fordel. Konceptuelt, hvis jeg plasserte alle nødvendige ikoner for et bestemt område i en egendefinert skrift, kunne jeg da bruke disse ikonene hvor som helst på nettstedet, med muligheten til å endre størrelse og farge, legge til bakgrunn, skygger og rotasjon, og omtrent alt ellers CSS vil tillate tekst. Den ekstra fordel er en singel CSS sprite lignende HTTP be om.
For å illustrere, har jeg samlet en ny skrift med noen av de flotte ikonene fra Brightmix.
Jeg har brukt de små boksene til vanlige ikoner, og store boksene for samme ikon i en sirkulær behandling.
For å bruke min nye ikonpakke, må jeg først eksportere fontsettet mitt som en rekke forskjellige skrifttypefiler (.eot, .woff, .ttf, .svg) for å være kompatibel med alle nettlesere. Emnet for innlemming av skrift og filformat omdannes dekkes andre steder, så jeg vil unngå en detaljert forklaring her. Imidlertid CSS ville se noe slikt ut.
Accentsconagua
@ font-face font-family: 'IconPack'; src: url ('iconpack.eot'); src: local ('IconPack'), url ('iconpack.woff') format ('woff'), url ('iconpack.ttf') format ('truetype'), url ('iconpack.svg # IconPack') format ( 'svg'); Når jeg er innebygd, har jeg nå et komplett ikon satt i vektorformat som referanse. For å referere til et ikon trenger jeg bare en stil som inneholder font-family av "IconPack".
en
Eksemplet ovenfor ville gjengi en stjerne og er den mest grunnleggende bruken av Icon Pack-konseptet, men det er ikke veldig intuativt fra et utviklingsperspektiv, ikke SEO vennlig, og det gjør det heller ikke grasiøst i tilfelle ikke-CSS Brukerstøtte.
For å rette opp situasjonen, skal jeg inkludere en :før pseudo-element og pakk innholdet i a span stikkord.
stjerne
Nå er stjernen lagt til i displayet, og jeg kan skifte visibiliteten til teksten ved å bruke vise fram og gjemme seg klasser. Resultatet er en enkel referanse CSS klassen som degraderer grasiøst og er optimalisert for søkemotorer. For hele mitt sett med ikoner kan jeg skrive noe som nedenfor.
skjermikonet
Fordelen her er at ikonet skalere med skriftstørrelsen. Faktisk vil alle ikonene skalere og opprettholde perfekt klarhet.
Så langt har vi bare rørt toppen av isbjerget, ikke noe banebrytende her, selv om du kanskje begynner å se mulighetene. En ekte verden scenerio ville være erstatning av list-item-stil. Som pålagt å bruke et bilde, kan vi nå bruke et vektorikon fra vår ikonpakke. Fordelen her er at ikonet skalere med skriftstørrelsen. Faktisk vil alle ikonene skalere og opprettholde perfekt klarhet.
Siden ikonene nå er plassert på vår side som om de var tekst, kan vi søke om gyldig CSS stil til dem uten å laste ned andre eiendeler. Vi kunne søke farge, skriftstørrelse, text-shadow, etc og gjøre bruk av :sveve pseudo-element for mus overvirkninger-alt med en enkelt glyph.
Som med noe, er det noen uheldige begrensninger. På grunn av dette skrives det ingen måte å vise en enkelt glyph med flere farger. Det har vært noen CSS-trickery å få gradienter over levende tekst, men komplekse former med varierende farger i en enkelt glyph er en begrensning. Når det er sagt, er det måter å tilnærme flerfargede glyfer ved å segragere delene av en vektorgrafikk inn i individuelle glyfer, og deretter sette sammen og farge dem på siden gjennom CSS.
En annen interessant bruk er en enkel CAPTCHA validering. Ved å erstatte glyphs for alfabetet med tall, vil brukerne se tall, men sidekoden vil være bokstaver. Noen enkle beregninger å oversette mellom de to, og du har en enkel å lese CAPTCHA.
For bedre å illustrere disse begrepene har jeg samlet en prøveside bestående av to HTTP forespørsler-sidekoden og en enkelt ikonpakke. Inkludert i tillegg er muligheten til å skalere skriftstørrelsen på siden for å tydelig vise fleksibiliteten til å legge inn vektorglyfer. Selskapets logo, navigasjon, bilder, og CAPTCHA bruker alle glyphs. Vær oppmerksom på, CAPTCHA inkludert her er kun til illustrasjon. For å kunne bruke dette på et produksjonssted, vil jeg anbefale å validere på server siden med en dynamisk algoritme som apposed til JavaScript.
Denne prøvesiden demostrerer også bruken av en glyph som en skalerbar "repeterende" bakgrunn. Jeg blir den første til å innrømme at denne implementeringen er i beste fall, men jeg tror det viser fleksibiliteten og allsidigheten til ikonet Pack.
Dette åpner åpenbart noen muligheter. Designere kan utvikle Icon Packs for salg, bedriftens enheter kan være vert for en enkelt ikonpakke som skal brukes på alle bedriftsmedier. Mal designere kan enkelt distribuere flere fargevalg av samme mal alt uten å måtte lagre og eksportere en enkelt ekstra fil. Webdesignere kan enkelt skalere eksisterende nettsteder for å være kompatible med håndholdte enheter. Videre avslører denne teknikken våre ikoner til DOM muliggjør animerte Flash-lignende effekter med ditt favoritt-JavaScript API.
Som bruk og nettleser støtte for CSS3 trenger videre, Icon Packs vil snart ha stor innflytelse på innholdsleveransen, og fremmer den lette vekten, skalerbare, trender med flere enheter som begynner å bli en nødvendighet.
