36: Uporaba Grunticona - CSS-triki

Anonim

Veliko časa smo se pogovarjali o uporabi inline in elementa. Sistem ikon lahko sestavite s sistemom, ki je bogat s prednostmi.

Sistem ikon SVG lahko ustvarite na druge načine. V SVG lahko postavite tradicionalni mrežni list sprite in naredite sprite v položaju ozadja, kot smo to počeli pri rastrskih slikah. V prihodnosti boste lahko uporabljali identifikatorje fragmentov, tako da bo to celo nekoliko lažje. Več informacij o teh stvareh.

Drug način je vdelava podatkovnih URI-jev slike SVG naravnost v datoteko CSS. Tak pristop zavzema Grunticon.

Grunticon je Gruntov vtičnik za avtomatizacijo sistema ikon SVG. Vzame mapo, polno SVG, in jih obdela v datoteko CSS. Tam je kopica izbirnikov, ki temeljijo na imenih datotek slik SVG in imajo background-imageURI podatkov SVG (ne pa Base64).

Če to storite na ta način, boste dobili razširljivost SVG in prednosti velikosti datotek, toda to je to. Kljub temu je to pogosto vse, kar potrebuješ.

Morda je najboljši del Grunticona ta, da vam ponuja vse, kar potrebujete za nadomestne rešitve. To vključuje nadomestni seznam slogov za podatkovne URI PNG-je in celo posamezne PNG-je (ki jih ustvari za vas). Poleg tega skript, ki ga uporabljate na svoji strani za določanje podpore in nalaganje samo ustreznega slogovnega lista.

Mislim, da je pošteno reči, da je zaradi tega za zdaj lažje ravnati z nadomestnimi deli kot z defs / tehniko. Pa ne, da je nemogoče.

Grumpicon je različica Grunticona v brskalniku, ki smo jo uporabili v tem predvajanju zaslona.

Grunticon si, ko to pišem, prizadeva za postopno izboljšanje do vdelanega vgrajenega SVG, kar bi bilo zelo kul!