Changes between Version 4 and Version 5 of QtWebKitGraphics
- Timestamp:
- Mar 16, 2010, 3:10:02 PM (15 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
TabularUnified QtWebKitGraphics
v4 v5 21 21 === Use static images === 22 22 Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster. 23 24 === Plan your scene-graph === 25 Imagine a list with 10 or more elements, and a semi-transparent image that represents a focus marker. A common way to do this in HTML is to have a content: after or an outline for some "focused" class, and simply change the class for an item when it receives / loses focus. Though this is very convenient, it requires webkit to regenerate the image and perform expensive CSS box-model calculations. 26 A more efficient way to achieve the same effect is to have an absolute-positioned image, and calculate where it should move to when the focus changes. Moving the image is best done with the -webkit-transform: translate approach. 27 28 This is one of the trickier parts of web development - there are numerous ways to achieve almost any desired effect. In general, being smart about the scene-graph and planning the elements on it is usually better than relying on CSS to do the job. 29 23 30 24 31