Hi SQ, (Chris?),
very interesting approach to use css for creating the icon images. I
think this is meant to be used for icons in standard buttons e.g. radio
button and check box?
I have some qooxdoo apps which have forms with really (I mean really!) a
lot of radio buttons and check boxes which also "suffer" from the "bold"
implementation of the standard buttons in the current version.
What I tried to do is to pre load all images / accompanied with cache
settings for the corresponding http request answers from the web server
(apache), so that on button creation or state change images are loaded
from browser cache. This reduced tremendous the server requests related
Just want to mention another potential possibility which I implemented
for radio buttons and check boxes:
In the current implementation buttons derive from atom, which uses three
div elements to render the button. I've did an alternative
implementation which only uses one div, using css background image,
margin and padding manipulations to render the button icon. The
implementation is currently incomplete, as it only supports the icon
being placed on the left side of the button. I would name it "a hack".
This helped a lot reducing the time for the first rendering of the
complex form, especially because of the reduced div elements needed, the
biggest gain on internet explorer.
It would be very interesting to see if the "reduced number of div"
implementation is somehow combinable with your idea, What would mean
that we must be able to restrict the CSS rendering to the appropriate
Another idea I had is to use pseudo elements :after and :before and to
use herein (though I don't know currently if this is possible) web icon
fonts where the icon font character is determined by the content css
attribute, which also would reduce the number of requests as the font is
loaded only once, containing all needed button state icons.
Post by SQville
Want to get your general thoughts on something. I have a love-hate
relationship with images. I don't like the fact that image loading is not in
my total control. I have an approach that changes this. I will keep this
short and provide code examples for you to reference and/or step through at
*Goal:* Embed the small decorator images found in resource folders (such as
triangles, checks, dots, lines and boxes) into qx code using qx decoration
entries and/or CSS/CSS3 code.
*Purposes:* 1) reduce number of http calls 2) enhance UX of apps - CSS is
fast and native
See the comments to image references lines - I noted which images i replaced
Mixin to enable before and after psudo elements and CSS3 functionality
Appearance entry changes: around lines 1264 and 1308
Decorator entry changes: see line 1901
Question: Why? Answer: Why not? :-)
View this message in context: http://qooxdoo.678.n2.nabble.com/Embed-design-elements-rather-than-use-images-tp7588132.html
Sent from the qooxdoo mailing list archive at Nabble.com.
Site24x7 APM Insight: Get Deep Visibility into Application Performance
APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month
Monitor end-to-end web transactions and take corrective actions now
Troubleshoot faster and improve end-user experience. Signup Now!
qooxdoo-devel mailing list