Idea: Icons based on CSS

[toddparker]

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

[dcneiner]

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]

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]

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]

It is totally worth checking into. I can run point on this if you want, if you can run tests on the devices :)

[toddparker]

Sounds like a plan.

[scottjehl]

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]

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

• http://cl.ly/2qhJ

Back & Down Chevron

• http://cl.ly/2rII

Checkbox Input Elements with Checkmark (also have "-", "+" and "x")

• http://cl.ly/2rC7

Checkbox Input as a Switch

• http://cl.ly/2qte

Animated Loading Indicator

• http://cl.ly/2r5b

iOS Tab Bar Highlight (mostly just gradients)

• http://cl.ly/2qyj

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]

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]

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]

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]

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]

@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]

Moving to the feature requests page for post-1.0:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

[townxelliot]

Is drawing them using canvas in any way possible/feasible/desirable?

[staabm]

Cc @staabm

[jordandobson]

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:

Is drawing them using canvas in any way possible/feasible/desirable?

Reply to this email directly or view it on GitHub:
#43 (comment)

[toddparker]

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]

@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]

I'm good with trying both to do some testing. We could just pick a few icons and see how it goes.

[jordandobson]

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]

Perfect. Looking forward to seeing what you cook up.