This repository was archived by the owner on Oct 8, 2021. It is now read-only.
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
Idea: Icons based on CSS #43
Closed
Description
Try and create some basic icons using CSS instead of bitmaps? We could inject the necessary markup with JS. These would be high res and scalable. Most core icons are very simple right now:
+, -, x (delete), arrow up/down/left/right, sort grippy bars
Ideally, we could use this for radiobuttons and checkboxes too. Since Doug's the master, maybe he can weigh in on whether this is feasible.
_t
Activity
dcneiner commentedon Sep 20, 2010
I think this is feasible, but not necessarily practical. CSS has no concept of negative space, so the icons can only be additive. In your examples, they are all doable without needing negative space, but we would start to hit a limit as we got more complex.
The best place to start might be determining the support of :after and :before pseudo elements. The use of these elements allow for a more streamlined markup structure, though of course it could be done w/o them.
dcneiner commentedon Sep 20, 2010
Not saying this is a bad idea, but we need to be clear on just how far this could actually go. The markup in many cases could end up being as large as the actual image we are trying to replace, especially when dealing with solid color icons.
toddparker commentedon Sep 20, 2010
Understood. The motivation is resolution independence not file size reduction so this might be ok. If we stick with bitmaps, we need to work out how to deal with iPhone 4 vs. normal resolution. Current icons look jaggy on iPhone 4.
dcneiner commentedon Sep 20, 2010
It is totally worth checking into. I can run point on this if you want, if you can run tests on the devices :)
toddparker commentedon Sep 20, 2010
Sounds like a plan.
scottjehl commentedon Sep 20, 2010
Doug, I added a support property for $.support.cssPseudoElement if that helps. It's based on the content property, which should infer support for :before, :after selectors.
That said, I agree the overhead on this may make it now worthwhile. Worth checking into though, at some point.
jordandobson commentedon Oct 16, 2010
I've done quite a bit of work on this front and I find that it works pretty well. If it's all ems based they will scale pretty nicely as well when the font size grows. You also could have a default size for these and allow for increasing the size without the need for extra images.
I would be happy to work on this for you guys if you would like.
Here's a few webkit examples of a few things I've done that are very similar to what you're talking about here:
Plus & Minus Icons
Back & Down Chevron
Checkbox Input Elements with Checkmark (also have "-", "+" and "x")
Checkbox Input as a Switch
Animated Loading Indicator
iOS Tab Bar Highlight (mostly just gradients)
These were all CSS only and made for webkit. They could easily have Mozilla support as well.
Also consider that you do have some ability to draw with gradients... You can make lines at almost any angle and it's pretty simple to include multiples as background images. I can send you some stuff I've been doing with repeating gradients to create grids for layout if you want.
Let me know if this is something you might like me to take on.
toddparker commentedon Oct 18, 2010
I think the criteria for icons is that they need to work in as many places as possible and be as lightweight and bulletproof as possible. I'd take bulletproof over very detailed. If these are more file weight or slow down rendering (radial gradients are killer on performance and should probably be completely avoided on mobile) than the low and high res image sprites we're using, that might be a hard sell. For basic icons like +,-, >, <, grid, etc. seems like a good way to go.
BTW - those demos are awesome. I'd like to look into your switch plugin and compare to our approach.
jordandobson commentedon Oct 19, 2010
Thanks! A lot of my code involves using Pseudo elements ::before ::after. Is that something I should avoid and create a tag for each element?
toddparker commentedon Oct 19, 2010
I would go with whatever will work in the most places. I'm already concerned that this may not work in as many devices as we need so let's play it as safe as we can with selectors. Think of this as a proof of concept -- we'll do some testing and make a call on css vs. images.
naton commentedon Oct 19, 2010
FWIW, a "<" character means "less than", not "left". I'm personally not too fond of using CSS generated content and/or markup for all kinds of icons on the web, not only because of debatable semantics but also (and specially so on mobile devices) because of the performance issues @toddparker mentions.
jordandobson commentedon Oct 19, 2010
@naton - I don't suspect we'll have any issues with performance. I don't think for the first set I will need to use any gradients at all. I think semantically there are many ways you could go about it depending on how important that is. I'll give a few options. :)
toddparker commentedon Feb 15, 2011
Moving to the feature requests page for post-1.0:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests
townxelliot commentedon Sep 28, 2011
Is drawing them using canvas in any way possible/feasible/desirable?
staabm commentedon Sep 28, 2011
Cc @staabm
jordandobson commentedon Nov 11, 2011
I would say so. From my experiments it seems totally feasible to deliver over webkit at least. Passing that over to CSS is pretty easy at that point.
Jordan Dobson • Designer / Developer • 425-444-8014 • JordanDobson.com
On Sep 28, 2011, at 7:35 AM, Elliot Smithreply@reply.github.com wrote:
toddparker commentedon Nov 11, 2011
Since we're close to shipping 1.0, would you want to do a proof of concept for this @jordandobson? Would be nice to have cleaner icons.
jordandobson commentedon Nov 11, 2011
@toddparker - would you like to see both CSS and Canvas based icons? is there a small subset you would like to see? The nice thing with CSS icons is they are resolution independent... but I can whip up some Canvas based ones as well.
toddparker commentedon Nov 11, 2011
I'm good with trying both to do some testing. We could just pick a few icons and see how it goes.
jordandobson commentedon Nov 11, 2011
Okay. I'll take a look at what we have now and work out a subset... I'll get started and suggest a few and go from there.'
Sound good?
toddparker commentedon Nov 11, 2011
Perfect. Looking forward to seeing what you cook up.