[RFC] CSS Image Sprites

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 906
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] CSS Image Sprites

Post by hanakin » Fri Jun 17, 2011 10:56 am

/a3 wrote: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
Donations welcome via Paypal Image

/a3
Registered User
Posts: 97
Joined: Mon Sep 20, 2010 6:44 am

Re: [RFC] CSS Image Sprites

Post by /a3 » Fri Jun 17, 2011 11:51 pm

hanakin wrote:If you or anyone can please provide some kind of proof to the fact that this is an issue
W3C - CSS Information wrote:Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
CSS Sprites: Useful Technique, or Potential Nuisance? wrote: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.
$ git commit -m "YOLO"

User avatar
nickvergessen
Former Team Member
Posts: 733
Joined: Sun Oct 07, 2007 11:54 am
Location: Stuttgart, Germany
Contact:

Re: [RFC] CSS Image Sprites

Post by nickvergessen » Mon Jul 11, 2011 3:16 pm

Can you post any link or something to code changes you did?
Member of the Development-TeamNo Support via PM

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 906
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] CSS Image Sprites

Post by hanakin » Mon Jul 11, 2011 3:21 pm

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

User avatar
Dragosvr92
Registered User
Posts: 624
Joined: Tue May 31, 2011 12:08 pm
Location: Romania
Contact:

Re: [RFC] CSS Image Sprites

Post by Dragosvr92 » Sun Jan 22, 2012 2:03 pm

hanakin wrote: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..
Previous user: TheKiller
Avatar on Memberlist 1.0.3

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] CSS Image Sprites

Post by brunoais » Thu Feb 02, 2012 11:53 am

VSE+ wrote:
Christian 2.0 wrote: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?
Image(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.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 906
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] CSS Image Sprites

Post by hanakin » Fri Feb 03, 2012 5:24 am

brunoais wrote:
VSE+ wrote:
Christian 2.0 wrote: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?
Image(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.
Donations welcome via Paypal Image

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] CSS Image Sprites

Post by brunoais » Fri Feb 03, 2012 11:33 am

^ 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.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 906
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] CSS Image Sprites

Post by hanakin » Sat Feb 04, 2012 3:03 am

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.
Donations welcome via Paypal Image

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] CSS Image Sprites

Post by brunoais » Sat Feb 04, 2012 9:08 am

hanakin wrote: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.
hanakin wrote: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.
hanakin wrote: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.

Post Reply