Dietrich, Today Dietrich Streifert wrote:
> 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 > to images. > > 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 > button side. > > 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. not sure I followed all the arguments properly ... but what is the problem of using https://en.wikipedia.org/wiki/Data_URI_scheme to minimize calls ? coupled with the css background image aproach this should be pretty 'lite' I think ... cheers tobi > Regards > Dietrich > > > > > Am 26.02.2016 um 20:07 schrieb SQville: > > Community, > > > > 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 > > your convenience. > > > > *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 > > > > *Code:* > > See the comments to image references lines - I noted which images i replaced > > with code > > https://github.com/sqville/sqv/blob/master/source/class/sqv/theme/clean/Image.js > > > > Mixin to enable before and after psudo elements and CSS3 functionality > > https://github.com/sqville/sqv/blob/master/source/class/sqv/ui/decoration/MCssIcon.js > > > > Appearance entry changes: around lines 1264 and 1308 > > https://github.com/sqville/sqv/blob/master/source/class/sqv/theme/clean/Appearance.js > > > > Decorator entry changes: see line 1901 > > https://github.com/sqville/sqv/blob/master/source/class/sqv/theme/clean/Decoration.js > > > > *In Summary:* > > Question: Why? Answer: Why not? :-) > > > > SQ > > > > > > > > > > > > > > > > -- > > 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! > > http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140 > > _______________________________________________ > > qooxdoo-devel mailing list > > qooxdoo-devel@lists.sourceforge.net > > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > > > ------------------------------------------------------------------------------ > 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! > http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140 > _______________________________________________ > qooxdoo-devel mailing list > qooxdoo-devel@lists.sourceforge.net > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > > -- Tobi Oetiker, OETIKER+PARTNER AG, Aarweg 15 CH-4600 Olten, Switzerland www.oetiker.ch t...@oetiker.ch +41 62 775 9902 ------------------------------------------------------------------------------ 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! http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140 _______________________________________________ qooxdoo-devel mailing list qooxdoo-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
