Only one image file is required, regardless of how many icons you have (including :hover effects), so HTTP requests can be significantly reduced.This technique is still used by many huge sites like Youtube and Google and it solved a lot of problems: The needed portion of the image can be shown by adjusting the background-position property, as in the scheme below (I've also made a pen, if you want to see a running example): This technique consists in arranging all icons in a single, unique file (typically GIF or PNG) to be loaded as a CSS background image. Happily, things got significantly better with CSS Sprites (or Image Sprites). What’s more, if you intended to introduce a :hover effect, you had to load these secondary images with JavaScript. Furthermore, pages that used lots of icons had to fire off a barrage of performance-crushing HTTP requests: one for each icon in the page. This technique brought with it a lot of accessibility and semantic issues. (If you feel you're ok with the history part, jump ahead).īack in the mid-90's – a time when browsers had little to no CSS support – icons were managed with the classic tag. So, I've put together a very brief 'history of icons techniques in web authoring' to help clarify the debate. They can help us to better frame the debate, but not everyone knows them. I realized that when we talk about icons, it's easy to take for granted some topics which we have been dealing with in the past. So, what is the best choice now? Can we still get by with icon fonts – or it is time to turn to SVG?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |