[RFC] CSS Image Sprites

[hanakin]

I do somewhat agree with Ishimaru Chiaki. Image sprites and any use of CSS should be used for style purposes, not content purposes. There are cases, for example the use of image sprites for the corners, navbar icons, etc. for which it makes a lot of sense to use CSS image sprites. I don't believe this is the case for the Quote, Edit buttons though.

If you or anyone can please provide some kind of proof to the fact that this is an issue first hand with the theme update then I will look into however I am unable to produce any issues on my end with using css images for the post buttons.

There is one css work around that comes to mind though that does not require images and that is to use @font-face with a custom symbol based font to produce monotone icons for the buttons

[/a3]

If you or anyone can please provide some kind of proof to the fact that this is an issue

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

Another reason not to promote the overuse of CSS sprites is that it could cause developers to use background images incorrectly. Experienced developers who consider accessibility in their projects understand that not every image should be a background. Images that convey important content should be implemented through inline images in the XHTML, whereas background images should be reserved for buttons and decorative elements.

I'm not against CSS sprites at all. There are already plenty of images that can be put into a single file, for example, bg_button.gif, all corner images, all icon images, bg_tabs images, quote.gif etc. These images don't have any "meaning", they are simply used to make phpBB look good.

[nickvergessen]

Can you post any link or something to code changes you did?

[hanakin]

its all on the my test sever which is http://www.midaym/devbb if u need anything specific let me know

[Dragosvr92]

its all on the my test sever which is http://www.midaym/devbb if u need anything specific let me know

I Just thought about this the other day. I think its a great idea, but it takes a second for the images to load. They just apear out of nowhere, when they load. Should try caching them..

[brunoais]

So if a style author were to re-do an image sprite with different dimensions, they'd need to work out all of the new background-position values for every image, even if only one icon has been resized.

The default sprites could be made to accommodate this, however, if they were made with lots of space between them. Wouldn't this mean, they could be resized but the background-position values could remain unchanged, and only the new size/dimensions would need to be entered by the style author?
(contact_icons.png)

I like that solution.
I also think that we could work with our friend the @class and sprites to do the following:

• Keep the general hovering (moving the "viewable window" down) as it is. This means, place the same image in different states one under the other. (see quote).
  This also allows us to do different images for different states: normal, hovering, visited, first-child (if matters), etc...
• Different images should be places next to each other horizontally.
• Keep the reasonable distance (see quoted image). Check what is the maximum size you'd ever give to each icon and multiply by 2. That's the size you should be giving padding to each icon, so... about 1,7x what was used in this one. (be prepared to the worse!!!)

This has repetitive info with what has already been discussed but it shows my idea about how to do this.

[hanakin]

So if a style author were to re-do an image sprite with different dimensions, they'd need to work out all of the new background-position values for every image, even if only one icon has been resized.

The default sprites could be made to accommodate this, however, if they were made with lots of space between them. Wouldn't this mean, they could be resized but the background-position values could remain unchanged, and only the new size/dimensions would need to be entered by the style author?
(contact_icons.png)

I like that solution.
I also think that we could work with our friend the @class and sprites to do the following:

• Keep the general hovering (moving the "viewable window" down) as it is. This means, place the same image in different states one under the other. (see quote).
  This also allows us to do different images for different states: normal, hovering, visited, first-child (if matters), etc...
• Different images should be places next to each other horizontally.
• Keep the reasonable distance (see quoted image). Check what is the maximum size you'd ever give to each icon and multiply by 2. That's the size you should be giving padding to each icon, so... about 1,7x what was used in this one. (be prepared to the worse!!!)

This has repetitive info with what has already been discussed but it shows my idea about how to do this.

adding that much padding is useless and just adds bloat to the sprite which is the point of a sprite in the first place so not sure I or you know what ur talking about here? alos this is a moot point as i believe they are going for some in my opinon rediculous dynamic sprite method but i digress.

[brunoais]

^ The objective here is to allow people to pick up those images and alter 1 or more to anything they like. While changing they could alter the icon's width or height. This is a way to solve that problem. The image becomes insignificantly larger (just some bytes) and now, if new images are added to the sprites, the changes to the CSS are minimal. Just 1 or 2 lines of code instead of about 20.

[hanakin]

again why are you attempting to explain the point of a sprite to me? As for the spacing its not an issue as you can add to the end or bottom or top, space is not needed. Ultimately once more its all moot as it will be done or created dynamically based on indiviudal images in the directory or howevr ck ends up working it.

Try reading the whole post and series that this is associated with before attempting to comment.

[brunoais]

again why are you attempting to explain the point of a sprite to me?

I'm not trying to explain why should we use sprites. I'm trying to justify why should we give such padding to the images in the sprite.

As for the spacing its not an issue as you can add to the end or bottom or top, space is not needed.

The space is not required but that doesn't mean that it isn't useful.

Try reading the whole post and series that this is associated with before attempting to comment.

Do you think I missed something? If so, point that out to me please.