Suggestion: Using CSS Sprites for Icons

[sobrenome]

Icon fonts sounds nice!

[Matt]

Images in a theme is so 2012.

[Lewis P]

Images in a theme is so 2012.

I can already see it now: "Where are my image buttons? You're taking away my creativity!" :p

[Heyhoe]

The sooner an entire page is made up of CSS, and scaleable text & icons which act just like vectors, the better.

Then we can just make our logos and other essential images hi res and the sites will look awesome on retina display devices.

It's already sorted for mobile skins, but with desktop displays going the same way, we need more detailed images/icons which scale nicely. like CSS.

I noticed that when you zoom in on the user icons on the board index they are already higher res than a standard desktop display requires.

I hope at some point in the future browsers will support a vector format for logos etc.

EDIT: IPS, can you increase your images on the mobile skin to double their current resolution and change the background-size attirbute accordingly so we can have crisp images on mobile! Thanks :)

[Heyhoe]

So, this SVG, can we create our logos in this format and have a fall back to .png already with current browsers??

(I didn't know SVG was scaleable Vector Graphic. I knew it was used for some grads etc.)

Off to have a read about SVGs :)

[Rikki]

The default skin will be designed for retina - including the logo.

[Heyhoe]

Excellent!

Just had a quick read up on SVG.

I have my logo in vector already so can I just save it as an SVG in Illustrator and add it to my skin as normal?

I guess I would just need to edit the template to fall back to the .png for unsupported browsers.

Don't suppose anyone fancies telling me how I would do that?

Will this method port over to the mobile skin? currently I'm just creating the images twice the size and then changing the background-size attribute so images appear crisp on my mobile skin. Could I use SVG throughout?

Obviously I know there is less support for SVG on browsers so I would have to create .png fallbacks for all SVG graphics.

Cheers.

[Ryan H.]

Since it was mentioned: Personally, I don't see the benefit of sprites for emoticons. It wouldn't work with animations, and the only place they are loaded is a couple at a time on user content pages.

[Lewis P]

The default skin will be designed for retina - including the logo.

Woo! Anything that shortens my development time. :p