MOBILE

# Programming the Mobile Web : WebKit CSS Extensions (part 1) - WebKit Functions & Gradients

1/20/2011 3:31:27 PM
##### Safari on iOS is the most complex mobile browser at the time of this writing. From version 2.0 of iOS it supports a great (and strange) group of CSS extensions that allow us to use hardware-accelerated animations, transitions, and even 3D effects in our websites. Some of these extensions also work with the Android and webOS browsers, depending on the operating system version.#### 1. WebKit Functions Many CSS attributes accept a function as a parameter. These functions are WebKit extensions and are all hardware-accelerated.Warning:The gradient-related functions listed here are not officially supported in iOS, according to the Safari Reference Library. However, they work properly from OS 3.0, and on older devices they will just use a plain background.The functions available for iPhone devices are listed in Table 1 (there are others, but they work only in Safari for desktop). Some of these functions, such as scalerotate, are also available for the Android and webOS browsers. and Table 1. CSS functions available in Safari on iOSFunctionDescriptioncubic-beizer(p1x, p1y, p2x, p2y)Specifies a cubic bezier timing function.matrix(m11, m12, m21, m22, tX, tY)Specifies a matrix transformation of six values with two translation elements.matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20,m21, m22, m23, m30, m31, m31, m33) Specifies a 3D matrix transformation of 4×4.perspective(depth)Maps a viewing cube onto a pyramid whose base is far away from the viewer.rotate(angle)Defines a 2D rotation around the origin of the element.rotate3d(x, y, z, angle)Defines a 3D rotation with [x,y,z] as the direction vector of the rotation.rotateX(angle)Specifies a clockwise rotation around the x-axis.rotateY(angle)Specifies a clockwise rotation around the y-axis.rotateZ(angle)Specifies a clockwise rotation around the z-axis.scale(scaleX, [scaleY])Performs a 2D scale operation.scale3d(scaleX, scaleY, scaleZ)Performs a 3D scale operation.scaleX(value)Scales along the x-axis.scaleY(value)Scales along the y-axis.scaleZ(value)Scales along the z-axis.skewX(angle)Performs a skew transformation around the x-axis.skewY(angle)Performs a skew transformation around the y-axis.translate(deltaX, [deltaY])Specifies a 2D translation vector.translate3d(deltaX, deltaY, deltaZ)Specifies a 3D translation vector.translateX(value)Performs a translation around the x-axis.translateY(value)Performs a translation around the y-axis.translateZ(value)Performs a translation around the z-axis.from(color)Specifies the initial color in a sequence.to(color)Specifies the final color in a sequence.color-stop(stop_percentage, color)Specifies an intermediate color to be used at the stop_percentage value in a sequence.-webkit-gradient(linear, start_function, end_function, [stop_function, ...])Defines a linear gradient using a start point, a final point, and optional intermediate points. This can be used in place of any image in CSS. Available from iOS 3.0.-webkit-gradient(radial, inner_center, inner_radius,outer_center, outer_radius, [stop_function, ...]) Defines a radial gradient with a center point (inner) and another point (outer) with colors determined by a series of color-stop functions. Available from iOS 3.0.Note:CSS functions are not a new feature of CSS; they are available for every browser. In fact, you are probably already familiar with some of the standard functions, such as url(url_string) or rgba(red, green, blue, alpha) for defining colors.#### 2. Gradients From iOS 3.0, Safari supports CSS gradient extensions as functions anywhere we can use an image (for a background, for example). Instead of using the url function to provide the URL of the image, we can use the -webkit-gradient function to define a linear or radial gradient to use as the background. This technique enables us to create really nice backgrounds for titles, containers, and cells with minimal code. The same code also works on the Android browser.Some samples of gradient definitions include:`/* Sun effect from top-right corner */body { background: -webkit-gradient(radial, 50% −50, 0, 50% 0, 300, from(#676767), to(black)) black;}body { background: -webkit-gradient(radial, 100% −10, 50, 70% 0, 200, from(yellow), to(white)) #FFC;}/* Simple linear gradient */li { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#369), to(#3FF)) #369;}/* Simple 3D effect */h1 { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#369), to(#369), color-stop(0.5, #58B));} ` For position values, we can use percentages, absolute values (without px), or the constant values top, bottom, right, and left. For example, we can use top right as the second parameter of the CSS function instead of 0% 0%. Figure 1 shows what these examples might look like in the browser.Figure 1. With just CSS you can create different gradient effects for iPhone, iPod Touch, iPad, and Android devices.Note:As of version 6.0, Mobile Internet Explorer supports filters and transitions, using CSS extensions with the filter style. You can create alpha, chroma, shadow, glow, mask, and other effects. For more information, see http://www.mobilexweb.com/go/iefilter.
 Other

 Top 10
 -  Installing Exchange Server 2010 into an existing Exchange Server 2007 environment (part 3) - Configure Exchange Web Services
 -  Windows Server 2008 : Harnessing the Power and Potential of FIM
 -  Programming the Mobile Web : Geolocation and Maps - Detecting the Location (part 2) - Google Gears
 -  Securing Data from the DBA
 -  Windows 7 : Managing and Applying LGPOs (part 2) - Using Account Policies
 -  Registering a Windows Phone Device for Debugging
 -  Programming the Mobile Web : Testing and Debugging (part 3) - Client-Side Debugging
 -  Windows 7 : Using Windows Live Calendar (part 3) - Scheduling Appointments and Meetings & Viewing Agendas and Creating To-Do Lists
 -  Windows Phone 7 : Working with Controls and Themes - Adding Transition Effects
 -  Algorithms for Compiler Design: THE PREDICTIVE TOP-DOWN PARSER
 Most View
 -  Windows 7 : Preparing Disks for Use (part 3)
 -  Configuring Windows 7 on a Network
 -  Sharepoint 2007: Create a New Document Library
 -  Programming Symmetrical Encryption (part 1)
 -  Integrating Office Communications Server 2007 in an Exchange Server 2010 Environment : Exploring Office Communications Server Tools and Concepts
 -  Resolve a Hostname to an IP Address
 -  Windows Server 2008 : DHCP/WINS/Domain Controllers - Securing DHCP
 -  iPhone Application Development : Creating and Managing Image Animations and Sliders (part 3) - Finishing the Interface
 -  Introducing SharePoint 2010 (part 2)
 -  Maintaining Windows 7 with Backup and Restore (part 1) - Creating a Backup & Restoring Files from a Backup
 -  Managing Offline Files in Vista
 -  iPad SDK : Popovers - The Font Size Popover
 -  Windows Phone 7 Development : WebBrowser Control - Saving Web Pages Locally
 -  Windows 7 : Using Compression and Encryption (part 1) - Compressing Drives
 -  Accessing Silverlight Content with JavaScript
 -  iPhone Application Development : Understanding the Model-View-Controller Paradigm
 -  SQL Server 2008 : OPENXML, sp_xml_preparedocument, and sp_xml_removedocument
 -  Becoming an Excel Programmer : Where's My Code?
 -  Troubleshooting and Testing Network Settings
 -  SQL Server 2008 : Performance Tuning - Working with Query Execution Plans