Changes between Version 4 and Version 5 of QtWebKitGraphics

Mar 16, 2010 3:10:02 PM (14 years ago)



  • QtWebKitGraphics

    v4 v5  
    2121=== Use static images ===
    2222Sometimes 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.
     24=== Plan your scene-graph ===
     25Imagine 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.
     26A 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.
     28This 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.