XF 1.1 CSS Sprites

In an attempt to decrease the number of HTTP requests made (and thereby speed up pages), virtually all of XenForo 1.1's UI icon graphics come from just two sprites.

xenforo-ui-sprite.png

node-sprite.png

​

Attached below are the 24 bit versions of the same sprites, for those of you who wish to edit them but don't have a graphic program which supports the 8 bit versions.

 

[Digital Jedi]

I'm sorry, but I don't like this. It seems like a lot of work for styling. :-/

I perferred the old way - one by one.

I wish this was a toggle.

It really is much easier this way. It's just you're unfamiliar with it. Once you wrap you head around it, you'll find it's quite simple and more logical.

 

[Marcus]

There are lots of current images used in threads that are not in sprites and thus the browser has to get them one by one which slows down the end user experience. I hope to see all xenforo images included in the sprites

 

[ibnesayeed]

There are lots of current images used in threads that are not in sprites and thus the browser has to get them one by one which slows down the end user experience. I hope to see all xenforo images included in the sprites

Could you please point to some of those 'lots of current images'? You need to make sure that CSS sprites are handled by CSS. That means, you can handle background images for any element this way but but not the <img /> tag. Because, CSS cant add content, it only handles presentation. If you are thinking about having a sprite for Smilies, then that is not feasible (unless you really play with CSS a lot).

 

[Marcus]

Sure, here are some you can find as an example on the topic pages:

• navigation-tab.png
• button-white-25px.png
• logo.png
• category-23px-light.png
• tab-selected-light.png
• forum-footer.png
• the smilies

But you see all these on waterfall diagrams you can - as an example - create on webpagetest.org

 

[Enigma]

CSS cant add content,

Sure it can; see the CSS content property.

If you are thinking about having a sprite for Smilies, then that is not feasible (unless you really play with CSS a lot).

I'm not necessarily saying it's a good idea, but it sure is feasible. Just insert a <span> instead of <img> tag, and set the background image to the smilie in the sprite.

 

[ibnesayeed]

Sure it can; see the CSS content property.

OMG, I was not aware of this before. Thanks a lot for sharing this bit. Now I know, how to implement print friendly stylesheet that has URLs in brackets next to the hyperlink text.

One question though, will that inserted (with the help of CSS) content be visible to search engines? I think no, unless the execute/apply CSS on the page and then read the DOM? Also, will it modify the DOM or just add content in rendered output only?

I'm not necessarily saying it's a good idea, but it sure is feasible. Just insert a <span> instead of <img> tag, and set the background image to the smilie in the sprite.

That's why, I had something in brackets.

 

[Kier]

Sure, here are some you can find as an example on the topic pages:

• navigation-tab.png
• button-white-25px.png
• logo.png
• category-23px-light.png
• tab-selected-light.png
• forum-footer.png
• the smilies

But you see all these on waterfall diagrams you can - as an example - create on webpagetest.org

Logo

This is not included in the sprite because we expect that most people will use their own logo image, of an unknown size. It makes no sense to include the XenForo logo as part of the sprite, it would simply use bandwidth for no good reason.

Gradients
navigation-tab, button-white-25px, category-23px-light, tab-selected-light

The way that we use gradients in XenForo makes it impossible to use sprite techniques with the images.

Smilies

The nature of smilies is such that we can't be sure that everyone will use any or all of the default images provided with XenForo. As such, it's arguable that it is inappropriate to store the smiley images in a sprite.

 

[Marcus]

Thanks for the explanation!

 

[Shelley]

I for one will be planning to include smilies in a spritesheet since I know myself which smilies will be used, at what dimensions they will be and can add more to the sheet as time passes if the need that the founder of the site wants more smilies added.

so far, prior to 1.0.1 we've now added the spritesheet in on pages (meet the staff area, authors, and social block) I'll be using spritesheets as much as I humanly can, i think they are such a pleasure to work with.

 

[Marcus]

A background sprite-generator - nice

1. Every action in any ACP "image" (smileys, logos) section generates a new spriteID.png sprite
2. Images (logo, smileys ...) are included as <span> in the content

Nice

 

[Paul B]

Some of my pages use sprites as more than 20 images are loaded.

However, I'm using empty divs for mine, whereas the node icons and others here are using empty spans.

Is there a rough rule of thumb which should be used and when?

 

[Kier]

I'm giving some thought to a mechanism for XenForo by which smilies could be optionally sourced from a sprite sheet. Watch this space

 

[bambua]

I'm giving some thought to a mechanism for XenForo by which smilies could be optionally sourced from a sprite sheet. Watch this space

I'm pretty sure I just heard the wheels and gears turning in his head from across the pond when he posted this

 

[Kier]

Some of my pages use sprites as more than 20 images are loaded.

However, I'm using empty divs for mine, whereas the node icons and others here are using empty spans.

Is there a rough rule of thumb which should be used and when?

I use spans, because with CSS disabled they gave no effect on the page layout, whereas divs are block level elements and enforce breaks in the page flow.

 

[Floris]

I'm giving some thought to a mechanism for XenForo by which smilies could be optionally sourced from a sprite sheet. Watch this space

Keyword being optionally.

 

[Shelley]

It really is much easier this way. It's just you're unfamiliar with it. Once you wrap you head around it, you'll find it's quite simple and more logical.

Totally agree.

 

[Kim]

The vast majority of sites use Smilies that are animated, and are very varied in size, unless you are like Shelley and have a very strict set of smiles that are un-animated .png files, this would not be a good idea at all.

Thank goodness it is being looked at as an Optional idea.

 

[Kim]

I don't know why anyone would want to revert back to using individual imagery it's really a simple process.

Because they wanted the greater Designer flexibility of being able to use whatever image format they want.. like animated .gif .

I frequently use animated .gif Post Icons. There are only 4 of them, they are small files always, if a designer or admin doing their own style wants to use .gif or whatever, they should be able to - natively, without having to hack the code - that designer flexibility has now been removed which I personally find to be disappointing.

 

[Shelley]

The vast majority of sites use Smilies that are animated, and are very varied in size, unless you are like Shelley and have a very strict set of smiles that are un-animated .png files, this would not be a good idea at all.

Thank goodness it is being looked at as an Optional idea.

Yeah By all means I don't think they should be spriteified as default << I think i just made up a word (spellchecker wants to rename it springfield). anyway, because everyone will be using different smilies at different sizes and adding/subtracting to them, throw in that some (alot) of folks will use animations thus it could turn out to be a con more than a pro (even for spritesheet likers). Id think that the individual imagery area remains and for people wanting to have the smilies on spritesheets the optional solution should be there.

What I do think is that for those spritesheet users there should be an option for us.

 

[Kim]

Yeah By all means I don't think they should be spriteified as default << I think i just made up a word (spellchecker wants to rename it springfield). anyway, because everyone will be using different smilies at different sizes and adding/subtracting to them, throw in that some (alot) of folks will use animations thus it could turn out to be a con more than a pro (even for spritesheet likers). Id think that the individual imagery area remains and for people wanting to have the smilies on spritesheets the optional solution should be there.

What I do think is that for those spritesheet users there should be an option for us.

I'm all for options