[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 » Thu May 12, 2011 12:11 am

/a3 wrote: Oh, and by the way, image sprites are a good idea in most cases, since we're talking about the style of the page and not the content. However, smilies are part of the content and should be used in <img> tags, not CSS backgrounds (for semantic purposes - as they are technically a part of the document).
agree good point.

As to the compressions very interesting and good information to have.

Also to speak to the use of Pngs as apposed to gifs. As you already mentioned the only need for a gif would or should be for animation purposes.
With this said all images should be standardized as far as format goes to follow this as a rule all images should be pngs unless animation is needed. (and other than smilies, which are not part of the theme anyways, I am not sure it is needed for the only thing animated is hot topics and aesthetically speaking animation is not really necessary. I believe I may come up with an alternative to this if there are no objections.)
As for smiles then the ones who require this would be gifs since as /a3 has pointed out there will be imgs and not css driven, especially since size is random.
Seeing as how transparency is supported through the use of pngs in all compliant browsers, really the only browser even used that does not support them is IE6 and it should not even be served a graphic rich experience anyway as it needs to die.(less than 5% of all browsers used) The only graphics required should solely be based on legibility/functionality and any such images can be made specifically for it if absolutely necessary.

This is the approach I am leaning towards with the current development of the theme and as for the sprites I believe a script has been written for handling the sprites but I have not been able to see it in action yet. Hopefully this will drastically reduce the the amount of css calls currently being used to handle this seriously uncomplicating the theme. Possibly reducing the stylesheet some 200 lines taking it from around 1380 to something like 1100.
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 » Thu May 12, 2011 12:54 am

hanakin wrote:the only thing animated is hot topics
Ahh, I almost forgot. :oops:
hanakin wrote:I believe I may come up with an alternative to this if there are no objections.
I was thinking perhaps having a different colour background for that topic in the topiclist? Although the only problem here is it might confuse moderators, who see a pinkish background for reported topics.

The other one I was thinking of was having a star instead of the topic image, although it could possibly be confused for a clickable favourite/bookmark button of some sort. :/

I'll keep thinking about that. :idea:
hanakin wrote:really the only browser even used that does not support them is IE6
I've just been mucking around with PNGs instead of GIF images...

IE6 does completely support PNG and on/off transparency if it's in Palette mode (this is "Indexed Mode" in GIMP), but this only supports 256 colours. This would be the same as using a GIF except that the file size would be potentially smaller.

The other alternative would be to use a full RGB+Alpha image ("RGB Mode" in GIMP), and leave IE6. This might not seem viable, but after testing the images produce a light grey background which is hardly noticable on light backgrounds, such as the background on the topiclist. I have a screenshot attached.
ie6.png
Notice the grey background? In "Palette Mode" the transparency *would* work fine, but with a 256-colour and on/off transparency limit.
ie6.png (3.68 KiB) Viewed 7260 times
For darker styles, the grey background would be very noticable. In this case, these style authors could choose to use a 256-colour indexed PNG, which would be similar to what the situation is at the moment anyway (but it's a PNG so it would be smaller).
$ git commit -m "YOLO"

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 » Thu May 12, 2011 2:53 am

Ie6 will be handled completely different than the rest of the browsers, for that matter IE in general will be handled different, while consistency will be strived for, things such as rounded corners and what not that are easily produced in compliant browsers via css3 will be left to degrade in those that do not support it. Where this will work for some instance others may be beneficial to provide hacks/alternatives for the more modern versions. IE6 on the other hand will not be utilizing any hacks to make it behave instead the theme will be simplified and dumbed down so to speak.

as for the hot topics we will still use an icon to represent it however I will in-turn design something that better emphasizes this without the need for animation, the key to it is subtle flare that completely differs from the rest of the icons just slightly enough to draw the users attention to it. This will be very subtle as the paging on these topics already draws there attention in.
Donations welcome via Paypal Image

Ishimaru Chiaki
Registered User
Posts: 10
Joined: Sat Feb 26, 2011 4:25 pm

Re: [RFC] CSS Image Sprites

Post by Ishimaru Chiaki » Tue Jun 14, 2011 7:53 pm

A big problem with sprites is the it works only for CSS backgrounds which aren't recommended for content-bearing pics for accessibility reasons, for users such as people with very bad vision who have to use a high contrast setting that disable background images.
To understand what I mean by this, I refer you to this topic : http://www.phpbb.com/community/viewtopi ... &t=2122341
phpBB Style author : My phpBB3 styles

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 » Tue Jun 14, 2011 11:04 pm

@Ishimaru Chiaki

First let me go on record to say that this RFC is a split from this viewtopic.php?f=108&t=35613 which is a complete overhaul of prosilver. It was broken up into smaller units to be easier to manage issues as well as provide an incremental approach to the overhaul.

Now as for you comment you are right and wrong on that, CSS backgrounds are recommended and the norm in web development In fact I dare you to find a professional site without them. However there are some ways to work around this Im sure, firstly why is it you are using HC mode? is it because you have trouble reading the font it self or is it a color issue? If its a legibility reason then you can simply hit ctrl + to increase the size of the font until it is legible if its a color issue then I am not sure why it matters from an aesthetic point of view as you can not really make out the theme, however it should still maintain 100% functionality. There is a discussion on this somewhere on the forums I will try and find it. Basically what should ideally happen is you will be provided a completely different theme not sure if media queries can detect HC mode or not but its worth a look.

Obviously some research & testing will need to be accomplished, however it is out of the scope of this RFC as first we need to fix the current theme structurally then we can fix or make it work with bidi/HC/etc... after that since the current version is already broken in regards to this. However the overhaul should fix alot of those issues.

Sorry if im being presumptuous but I take it you fall into the category of users with limited vision? If so would you mind taking a look at the demo for the overhaul found here, and taking some screenshots to show some of the issues with the new version and post theme. This would greatly help in the effort to fix this problem.

There is a demo user and mod account already setup

MODERATOR
USER: testmod
PASS: testmod

USER
USER: testuser
PASS: testuser
Donations welcome via Paypal Image

Ishimaru Chiaki
Registered User
Posts: 10
Joined: Sat Feb 26, 2011 4:25 pm

Re: [RFC] CSS Image Sprites

Post by Ishimaru Chiaki » Wed Jun 15, 2011 2:54 am

It isn't me, but the guy (Daniel) at this link who uses a HC setting : http://www.phpbb.com/community/viewtopi ... &t=2122341
I posted the link in my previous post !

The discussion even continued here : viewtopic.php?f=108&t=36840

Actually, my vision isn't as bad as Daniel's vision, but it might decrease as I have LCA.
phpBB Style author : My phpBB3 styles

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 » Wed Jun 15, 2011 3:14 am

check out or have him check out the demo for the new version of prosilver i provided i am not sure of his exact settings but HC on windows 7 on my end renders the theme flawlessly in chrome have not tested any other browsers and on a mac there is no issue because contrast mode is completely customizable and works off of color inversion which has no bearing on image rendering, you can even choose grey scale as an option :D

I even chimed in on this in the topic you link too as well
hanakin wrote:IE these issues are created based on bad semantics and coding in prosilver these will/should be fixed in the revamp of the theme I am working on, all images are being removed and replaced with full css/text based buttons for the navigation and as for the print, rezise, etc.. all icons are added via sprites, They have text associated with them however it is indented off the viewing area via css. This might bring up issues for the software you use, not sure how it works. However as mentioned before you can simply use Ctrl +, Ctrl - (CMD +, CMD - on MAC) to adjust the font sizes on any website in any browser.

All though I would not recommend IE as it has not yet been brought up but we may require the use of images as its backwards Compliance requires it.

If it were up to me I would completely remove the javascript and icons in the theme that simulate the ability to change the font size and recommend using the shortcuts mentioned. This would make my life a hell of a lot easier coding wise lol but I digress.
sum three months ago
Donations welcome via Paypal Image

Ishimaru Chiaki
Registered User
Posts: 10
Joined: Sat Feb 26, 2011 4:25 pm

Re: [RFC] CSS Image Sprites

Post by Ishimaru Chiaki » Wed Jun 15, 2011 4:56 am

I didn't notice that you already posted in the stated topic.

But what I'm trying to tell is that even the fanciest way to hide text while using CSS background for a content-bearing image cannot beat the good ol' ALT attribute of the IMG element.
Some links :
http://www.456bereastreet.com/archive/2 ... sponsibly/
http://www.inspiredbuddy.com/accessibil ... nd-images/
http://www.thedotproduct.org/2010/11/wh ... und-image/
http://www.456bereastreet.com/archive/2 ... nate_text/

Have you ever wondered why the WCAG always told us to use the ALT attribute for images that aren't just decorative ? Even accessibility-related websites such as AccessibilitéWeb (Quebec - in French) doesn't recommend using CSS backgrounds for images that bear content : link (advice #6 - it's in French)
phpBB Style author : My phpBB3 styles

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 » Wed Jun 15, 2011 11:07 am

ok but what im saying is that this is a design/semantic issue the use of css images is a necessity in web design the problems that you or others may in counter is due to poor use of them if you examine the demo i am referring to you will note that there are not any background images for anything except icons ie gradients/buttons/round corners are complete css. All the issues you are referring too should not exist in this version as the only css images being used are for links which have title tags and either already display text or contain hidden text as well there should be no problems using any method of viewing the page for those with limited to no vision.
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 2:59 am

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.
$ git commit -m "YOLO"

Post Reply