36: Grunticoni kasutamine - CSS-trikid

Anonim

Oleme veetnud palju aega inline'i ja elemendi kasutamisest. Sellega saate luua ikoonisüsteemi, millel on eeliseid.

Võite luua SVG ikoonisüsteemi ka muul viisil. Võite SVG-s välja panna traditsioonilise ruudustikuga sprite-lehe ja teha taustapositsiooni spreid nagu me kasutasime rasterkujutistega. Tulevikus saate kasutada fragmentide identifikaatoreid, nii et see muutub isegi natuke lihtsamaks. Lisateavet nende asjade kohta.

Teine võimalus on manustada SVG-pildi andmete URI-d otse CSS-faili. Sellise lähenemisviisi Grunticon kasutab.

Grunticon on Grunti pistikprogramm SVG ikoonisüsteemi automatiseerimiseks. See võtab kausta täis SVG-d ja töötleb need CSS-failiks. Seal on hulk valijaid, mis põhinevad SVG-piltide failinimedel ja millel on background-imageSVG-andmete URI (kuigi mitte Base64).

Nii tehes saate SVG mastaapsuse ja failisuuruse eelised, kuid see on ka kõik. Sellegipoolest on see sageli kõik, mida vajate.

Ehk parim osa Grunticonist on see, et see annab teile kõik vajaliku tagasiside jaoks. See hõlmab alternatiivset stiililehte andmete URI PNG-de ja isegi üksikute PNG-de enda jaoks (mille see teile loob). Lisaks skript, mida kasutate oma lehel toe määramiseks ja ainult sobiva stiililehe laadimiseks.

Ma arvan, et on õiglane öelda, et see muudab varukoopiaid praegu kergemini käsitletavaks kui defs / tehnika. Mitte et see oleks võimatu.

Grumpicon on Grunticoni brauserisisene versioon, mida me selles ekraanikuva kasutasime.

Grunticon töötab selle kirjutamise ajal viisiga, kuidas järk-järgult täiendada manustatud sisseehitatud SVG-d, mis oleks päris lahe!