summaryrefslogtreecommitdiffstats
path: root/doc/src
diff options
context:
space:
mode:
authorJerome Pasion <jerome.pasion@nokia.com>2011-03-17 15:43:24 (GMT)
committerJerome Pasion <jerome.pasion@nokia.com>2011-03-17 15:43:24 (GMT)
commitdbb6a3ec34b5866f74e1520ac73ccfe4f3310d5e (patch)
tree6302323f5d9f6a3a1b38126b42862493e0a05433 /doc/src
parent57bc072885cf1eb25f631a037568b4c04b486692 (diff)
downloadQt-dbb6a3ec34b5866f74e1520ac73ccfe4f3310d5e.zip
Qt-dbb6a3ec34b5866f74e1520ac73ccfe4f3310d5e.tar.gz
Qt-dbb6a3ec34b5866f74e1520ac73ccfe4f3310d5e.tar.bz2
Edited QtWebKit Guide CSS chapter. Created example links.
Reviewed-by: David Boddie
Diffstat (limited to 'doc/src')
-rw-r--r--doc/src/index.qdoc6
-rw-r--r--doc/src/webkit/guide/chapter_css.qdoc1260
-rw-r--r--doc/src/webkit/guide/guidelinks.qdoc112
-rw-r--r--doc/src/webkit/webkit.qdoc2
4 files changed, 587 insertions, 793 deletions
diff --git a/doc/src/index.qdoc b/doc/src/index.qdoc
index 4781127..90caf06 100644
--- a/doc/src/index.qdoc
+++ b/doc/src/index.qdoc
@@ -59,8 +59,8 @@
\enddiv
\list
\o \l{Qt Demonstrations}{Application Gallery}
- \o \l{Tutorials}
- \o \l{Qt Examples}{Examples}
+ \o \l{Tutorials}{Step-by-Step Tutorials}
+ \o \l{Qt Examples}{Qt Example Code}
\o \l{QML Examples and Demos}
\endlist
\enddiv
@@ -104,7 +104,7 @@
\o \l{external: Setting Up Development Environment for Symbian}{Setting Up Development Environment for Symbian}
\o \l{external: Setting Up Development Environment for Maemo}{Setting Up Development Environment for Maemo}
\o \l{qt-mobile-demos}{Mobile Applications and Demos}
- \o \l{external: Publishing Applications to Ovi Store}{Publishing Applications to Ovi Store}
+ \o \l{QtWebKit Guide}{QtWebKit Developer Guide}
\endlist
\list
\o \l{Qt Development: The Steps from Challenge to Achievement}{The Steps from Challenge to Achievement}
diff --git a/doc/src/webkit/guide/chapter_css.qdoc b/doc/src/webkit/guide/chapter_css.qdoc
index e299e57..9dd35bc 100644
--- a/doc/src/webkit/guide/chapter_css.qdoc
+++ b/doc/src/webkit/guide/chapter_css.qdoc
@@ -45,70 +45,54 @@
\title Level 3 CSS (BETA)
\chapter Level 3 CSS
-This section serves as an introduction to various Level 3 CSS features
+This section of the Qt WebKit Guide serves as an introduction to various Level 3 CSS features
supported by QtWebKit:
\list
-\o The \l{Media Queries} section discusses a simple client-based
-technique to present different interfaces and functionality from a
-single source of content to different classes of mobile device.
+\o The \l{Media Queries} section discusses a simple client-based technique to
+present different interfaces and functionality from a single source of content
+to different classes of mobile device.
-\o The \l{Selectors} section concentrates on recently introduced
-syntax elements that make applying formatting and gathering DOM
-elements more flexible.
+\o The \l{Selectors} section concentrates on recently introduced syntax elements
+that make applying formatting and gathering DOM elements more flexible.
-\o The \l{Visual Effects} section surveys numerous formatting
-properties,
+\o The \l{Visual Effects} section surveys numerous formatting properties,
including new color models and advanced WebKit effects.
-\o Finally,
-the \l{Dynamic CSS} section discusses 2D transforms,
-transitions,
+\o Finally, the \l{Dynamic CSS} section discusses 2D transforms, transitions,
and keyframe animations.
\endlist
-This section features links to numerous sample pages that demonstrate
-how various CSS3 features may be applied within a mobile interface.
-For best results,
-view these samples with a modern Webkit-based browser such as Apple
-Safari or Google Chrome.
-Resize the window in which the sample appears to roughly match the
-dimensions of a touch-screen mobile device.
+This section features links to numerous sample pages that demonstrate how
+various CSS3 features may be applied within a mobile interface. For best
+results, view these samples with a modern Webkit-based browser such as Apple
+Safari or Google Chrome. Resize the window in which the sample appears to
+roughly match the dimensions of a touch-screen mobile device.
\section1 Media Queries
-CSS media \bold{queries} extend media \bold{types} with more detailed
-capabilities.
-Media Queries offer a simple client-side mechanism to customize
-interfaces comprehensively via CSS.
+CSS \e{media queries} extend \e{media types} with more detailed capabilities.
+Media queries offer a simple client-side mechanism to customize interfaces
+comprehensively via CSS.
-Media queries are especially useful when extending a body of content
-for presentation on mobile browsers.
-Prior to support for this feature,
-there were two basic approaches to provisioning mobile web content,
-both server-based:
+Media queries are especially useful when extending a body of content for
+presentation on mobile browsers. Prior to support for this feature, there were
+two basic approaches to provisioning mobile web content, both server-based:
\list
-
-\o \bold{Mobile-specific domains}.
-Content providers might provide a separate access points for default
-content at \bold{www.website.com},
-with mobile content available at \bold{m.website.com} or
-\bold{website.mobi}.
-There might also be an additional \bold{touch.website.com} access
-point targeted for higher-end touch-screen browsers.
-
-\o \bold{Dynamic Server-based Adaptation}.
-In this case,
-there is a single access point,
-but the server sends different content,
-typically depending on the \bold{User-Agent} header included in all
-browsers\' HTTP requests.
+\o \e{Mobile-specific domains}. Content providers might provide a separate
+access points for default content at \c{www.website.com}, with mobile content
+available at \c{m.website.com} or \c{website.mobi}. There might also be an
+additional \c{touch.website.com} access point targeted for higher-end
+touch-screen browsers.
+
+\o \e{Dynamic Server-based Adaptation}. In this case, there is a single access
+point, but the server sends different content, typically depending on the
+\e{User-Agent} header included in all browsers' HTTP requests.
This approach may leverage databases of device characteristics such as
-\bold{WURFL} or \bold{DeviceAtlas}.
-
+\l{WURFL} or \l{DeviceAtlas}.
\endlist
This section describes how to provision CSS entirely on the mobile
@@ -116,33 +100,27 @@ client.
\section2 Media Types and Media Queries
- If you only want to serve interfaces for desktop browsers and low-end
- mobile browsers,
- specify external CSS files within your HTML\'s \c{head} region using
- media types:
+ If you only want to serve interfaces for desktop browsers and low-end mobile
+ browsers, specify external CSS files within your HTML's \c{head} region
+ using media types:
\code
<link media="screen" href="/path/to/desktop.css" type="text/css" rel="stylesheet"/>
<link media="handheld" href="/path/to/mobile.css" type="text/css" rel="stylesheet"/>
\endcode
- The \c{media} attribute specifies different \bold{types} of browser:
- \c{screen} for large-screen desktop browsers,
- and \c{handheld} for mobile browsers.
+ The \c{media} attribute specifies different \e{types} of browser: \c{screen}
+ for large-screen desktop browsers, and \c{handheld} for mobile browsers.
Browsers identifying themselves as \c{handheld} are served the
- \bold{mobile.css} file,
- which should specify a dramatically simplified mobile interface.
-
- A problem arises,
- however,
- when the majority of higher-end touch browsers identify themselves as
- the \c{screen} media type,
- to avoid being served overly simplified content that is beneath their
- capabilities.
- The example above serves a desktop-oriented design to later-generation
- mobile browsers.
- To target a higher-end mobile design to these browsers,
- you need to specify additional media \bold{queries}:
+ \c{mobile.css} file, which should specify a dramatically simplified
+ mobile interface.
+
+ A problem arises, however, when the majority of higher-end touch browsers
+ identify themselves as the \c{screen} media type, to avoid being served
+ overly simplified content that is beneath their capabilities. The example
+ above serves a desktop-oriented design to later-generation mobile browsers.
+ To target a higher-end mobile design to these browsers, you need to specify
+ additional media \c{queries}:
\code
<link media="only screen and (min-device-width: 481px)" href="/path/to/desktop.css" type="text/css" rel="stylesheet"/>
@@ -163,23 +141,24 @@ client.
}
\endcode
- The following example demonstrates a simple message identifying your
- class of browser,
- which appears dynamically based on CSS that is linked using media
- types and media query syntax:
+ The following example demonstrates a simple message identifying your class
+ of browser, which appears dynamically based on CSS that is linked using
+ media types and media query syntax:
\l{mob_mediaquery}{\inlineimage webkit-guide/scr_mob_mediaquery.png
}
+ \e{Click on the image to view the example live in a browser or click on the
+ following links to view the CSS files.}
+
\l{mq_desktop_css}{(Desktop CSS)}
\l{mq_touch_css}{(Touch-Screen CSS)}
\l{mq_mobile_css}{(Low-end Mobile CSS)}
- The following example shows a skeletal interface that appears
- differently based on the type of browser viewing it.
- The image below shows how it appears when viewed on a touch-based
- browser,
- but a desktop browser renders a more elaborate three-column layout:
+ The following example shows a skeletal interface that appears differently
+ based on the type of browser viewing it. The image below shows how it
+ appears when viewed on a touch-based browser, but a desktop browser renders
+ a more elaborate three-column layout:
\l{mob_layout}{\inlineimage webkit-guide/scr_mob_layout.png
}
@@ -209,44 +188,37 @@ client.
and (max-device-width: 1024px)" href="/path/to/ipad.css"/>
\endcode
- \section3 In-line Media Queries
+ \section2 In-line Media Queries
- While it\'s generally good practice to keep CSS for different designs
- within separate files,
- you can also consolidate them.
- The following example provides a default san-serif font styling for
- \c{h1} elements,
- then different sets of style sheets for three browser categories:
+ While it's generally good practice to keep CSS for different designs within
+ separate files, you can also consolidate them. The following example
+ provides a default san-serif font styling for \c{h1} elements, then
+ different sets of style sheets for three browser categories:
- \code
- h1 { font-family : Arial, sans-serif }
- @media screen {
- h1 { color: #00008B; }
- }
- @media only screen and (max-device-width: 480px) {
- h1 { color: #00008B; font-size: medium; }
- }
- @media handheld {
- h1 { font-size: medium; font-weight: bold }
- }
- \endcode
+ \code
+ h1 { font-family : Arial, sans-serif }
+ @media screen {
+ h1 { color: #00008B; }
+ }
+ @media only screen and (max-device-width: 480px) {
+ h1 { color: #00008B; font-size: medium; }
+ }
+ @media handheld {
+ h1 { font-size: medium; font-weight: bold }
+ }
+ \endcode
- Consolidating style sheets in this manner may reduce the number of
- separate HTTP requests,
- help web designers to keep track of variations among designs,
- and reduce style sheet properties defined redundantly in more than
- one file.
+ Consolidating style sheets in this manner may reduce the number of separate
+ HTTP requests, help web designers to keep track of variations among designs,
+ and reduce style sheet properties defined redundantly in more than one file.
\section2 Media Queries via JavaScript
- Browsers that support media queries also support APIs to test them
- from within JavaScript.
- Browsers based on QtWebKit use the \c{matchMedia} API.
- Some other browsers use a slightly different (and older)
- \c{styleMedia} API,
- which itself used to be called the \c{media} API.
- Each can be called from the \c{window} object.
- The following function accounts for all three cases:
+ Browsers that support media queries also support APIs to test them from
+ within JavaScript. Browsers based on QtWebKit use the \c{matchMedia} API.
+ Some other browsers use a slightly different (and older) \c{styleMedia} API,
+ which itself used to be called the \c{media} API. Each can be called from
+ the \c{window} object. The following function accounts for all three cases:
\code
function matchesMediaQuery(query) {
@@ -261,13 +233,9 @@ client.
\endcode
The \c{query} argument corresponds to the media query string used to
- activate the CSS.
- For example,
- the following higher-level function tests whether the browser matches
- design categories provided simple labels such as
- \c{desktop},
- \c{touch},
- or \c{mobile}:
+ activate the CSS. For example, the following higher-level function tests
+ whether the browser matches design categories provided simple labels such as
+ \c{desktop}, \c{touch}, or \c{mobile}:
\code
function isDesign(str) {
@@ -285,10 +253,9 @@ client.
}
\endcode
- You can then use the test whenever there is a need to assign
- functionality for a specific design.
- The following gathers a series of images and assigns different
- panel-viewing functions for \c{desktop} and \c{touch} designs,
+ You can then use the test whenever there is a need to assign functionality
+ for a specific design. The following gathers a series of images and assigns
+ different panel-viewing functions for \c{desktop} and \c{touch} designs,
with no functionality assigned to the lower-end \c{mobile} design:
\code
@@ -317,12 +284,10 @@ client.
\section1 Selectors
-Level 3 CSS provides many useful new \bold{selectors} that make it
-easier to apply formatting to page elements.
-In addition,
-the \bold{Selectors API} makes DOM elements accessible using the same
-CSS expressions you use to apply formatting to them.
-The following show alternate ways to access elements:
+Level 3 CSS provides many useful new \e{selectors} that make it easier to apply
+formatting to page elements. In addition, the \l{Selectors API} makes DOM
+elements accessible using the same CSS expressions you use to apply formatting
+to them. The following show alternate ways to access elements:
\code
var element = document.getElementById('map');
@@ -337,22 +302,15 @@ selectors might be applied when formatting mobile interfaces.
\section2 Attribute Matching
- It is often useful to offer visual hints marking different kinds of
- link.
- Users might want to know the difference between a link to a page on
- the same website and one on an external site.
- Links to non-HTML file types might pose special challenges to mobile
- users.
- Alternately,
- mobile users might get special benefit from telephone links.
-
- You can automate this by using the CSS attribute prefix and suffix
- matching selectors.
- The following uses \c{^=} to mark external HTTP links,
- email,
- SMS,
- and telephone links,
- by inserting an icon after the text of the link:
+ It is often useful to offer visual hints marking different kinds of link.
+ Users might want to know the difference between a link to a page on the same
+ website and one on an external site. Links to non-HTML file types might pose
+ special challenges to mobile users. Alternately, mobile users might get
+ special benefit from telephone links.
+
+ You can automate this by using the CSS attribute prefix and suffix matching
+ selectors. The following uses \c{^=} to mark external HTTP links, email,
+ SMS, and telephone links, by inserting an icon after the text of the link:
\code
a[href^="http://"]:after, a[href^="https://"]:after
@@ -362,8 +320,7 @@ selectors might be applied when formatting mobile interfaces.
a[href^="tel:"]:after { content : url(icon/tel.gif); }
\endcode
- The following uses \c{$=} to identify various file types by common
- suffixes:
+ The following uses \c{$=} to identify various file types by common suffixes:
\code
a[href$=".doc"]:after { content : url(icon/ms_word.gif) }
@@ -374,17 +331,16 @@ selectors might be applied when formatting mobile interfaces.
a[href$=".xls"]:after { content : url(icon/excel.jpg) }
\endcode
- You can also use \c{*=} to freely match substrings within any
- attribute value.
- The following might distinguish links to a site\'s blog area based on
+ You can also use \c{*=} to freely match substrings within any attribute
+ value. The following might distinguish links to a site's blog area based on
how the URL is organized:
\code
a[href*="/blog/"]:after { content : url(icon/blog.jpg )}
\endcode
- The following example demonstrates links identified by dynamically
- generated icons:
+ The following example demonstrates links identified by dynamically generated
+ icons:
\l{layout_link-fmt}{\inlineimage webkit-guide/scr_layout_link-fmt.png
}
@@ -393,8 +349,8 @@ selectors might be applied when formatting mobile interfaces.
\section2 Form Input State
- The \c{:checked} dynamic class allows you to style radio and checkbox
- inputs based on their selection state:
+ The \c{:checked} dynamic class allows you to style radio and checkbox inputs
+ based on their selection state:
\code
input[type=radio],
@@ -406,116 +362,104 @@ selectors might be applied when formatting mobile interfaces.
{ text-align : left }
\endcode
- This enables the following mobile-friendly interface,
- which converts small radio and check boxes to much more accessible
- toggle buttons:
+ This enables the following mobile-friendly interface, which converts small
+ radio and check boxes to much more accessible toggle buttons:
\l{form_toggler}{\inlineimage webkit-guide/scr_form_toggler.png
}
\l{form_toggler_css}{(CSS)}
- Using the dynamic \c{:checked} CSS class,
- the \c{text-align} property toggles from \c{left} to \c{right}
- depending on whether the \c{input} is checked or not.
- Note that to display button text,
- dynamic classes can be chained together to form complex expressions:
+ Using the dynamic \c{:checked} CSS class, the \c{text-align} property
+ toggles from \c{left} to \c{right} depending on whether the \c{input} is
+ checked or not. Note that to display button text, dynamic classes can be
+ chained together to form complex expressions:
\c{input[type=radio]:checked:before}.
- The example also relies on the \c{-webkit-appearance} property,
- which allows you to override the default visual presentation of
- specialized interface elements such as radio and checkbox inputs.
+ The example also relies on the \c{-webkit-appearance} property, which allows
+ you to override the default visual presentation of specialized interface
+ elements such as radio and checkbox inputs.
- The following example provides alternate styling for radio and
- checkbox inputs,
- presenting them as tappable buttons:
+ The following example provides alternate styling for radio and checkbox
+ inputs, presenting them as tappable buttons:
\l{form_tapper}{\inlineimage webkit-guide/scr_form_tapper.png
}
\l{form_tapper_css}{(CSS)}
- Form elements may also be re-styled based on whether they are
- \c{:enabled} or \c{:disabled}.
- In addition,
- the \c{:focus} dynamic class allows you to style text form inputs or
- other editable content regions that users have currently selected for
- editing.
+ Form elements may also be re-styled based on whether they are \c{:enabled}
+ or \c{:disabled}. In addition, the \c{:focus} dynamic class allows you to
+ style text form inputs or other editable content regions that users have
+ currently selected for editing.
\section2 Navigational Selectors
Elements within a page that are the target of navigation can receive
- distinct styling using the \c{:target} dynamic class.
- The act of navigating to an element can alter its appearance,
- or even determine if it is to appear at all.
+ distinct styling using the \c{:target} dynamic class. The act of navigating
+ to an element can alter its appearance, or even determine if it is to appear
+ at all.
- The following example relies on anchor navigation to display
- successive rows of a table within a mobile interface:
+ The following example relies on anchor navigation to display successive rows
+ of a table within a mobile interface:
\l{layout_tbl-keyhole}{\inlineimage webkit-guide/scr_layout_tbl-keyhole.png
}
\l{layout_tbl-keyhole_css}{(CSS)}
- While the example relies on table-related tags,
- they are re-styled with block formatting to confine each row of
- information within the screen.
- Each row features links to other rows,
- triggering their display.
- Other links navigate away from the table,
- which suppresses its display altogether.
- This is the main CSS driving the interface:
+ While the example relies on table-related tags, they are re-styled with
+ block formatting to confine each row of information within the screen. Each
+ row features links to other rows, triggering their display. Other links
+ navigate away from the table, which suppresses its display altogether. This
+ is the main CSS driving the interface:
\code
.mobile > tbody > tr { display : none }
.mobile > tbody > tr:target { display : block }
\endcode
- The same technique may be used to display or dismiss optional
- interface elements such as panels,
- simply by providing navigation links to them within the page.
+ The same technique may be used to display or dismiss optional interface
+ elements such as panels, simply by providing navigation links to them within
+ the page.
\section2 Indirect Sibling Selector
- The Level 2 \c{+} selector allows you to style elements that
- immediately follow other specified elements.
- For example,
- the following refers to a paragraph that immediately
- follows a heading at the same level of markup:
+ The Level 2 \c{+} selector allows you to style elements that immediately
+ follow other specified elements. For example, the following refers to a
+ paragraph that immediately follows a heading at the same level of markup:
\code
h1 + p { font-weight: bold }
\endcode
- In contrast,
- the Level 3 \c{~} indirect sibling selector allows you to style any
- subsequent element at the same level within the markup.
- The following example styles any element that follows an \c{h2} that
- is classed \c{pullquote}:
+ In contrast, the Level 3 \c{~} indirect sibling selector allows you to style
+ any subsequent element at the same level within the markup. The following
+ example styles any element that follows an \c{h2} that is classed
+ \c{pullquote}:
\code
h2 ~ .pullquote { font-size: 90% }
\endcode
- \bold{NOTE:} Webkit-based browsers do not yet allow you to style
+ \note Webkit-based browsers do not yet allow you to style
elements dynamically via indirect sibling selectors.
\section2 Positional Selectors
Various dynamic classes allow you to style elements depending on their
- position with a series of elements: either elements of the same type,
- or other child elements of the same parent.
- The following example aligns a series of icons to a grid:
+ position with a series of elements: either elements of the same type, or
+ other child elements of the same parent. The following example aligns a
+ series of icons to a grid:
\l{css3_sel-nth}{\inlineimage webkit-guide/scr_css3_sel-nth.png
}
\l{css3_sel-nth_css}{(CSS)}
- Columns are specified with the \c{:nth-of-type()} selector,
- which accepts numeric expressions as arguments.
- The following selectors refer to every fourth \c{img} element,
- but offset by a specified number:
+ Columns are specified with the \c{:nth-of-type()} selector, which accepts
+ numeric expressions as arguments. The following selectors refer to every
+ fourth \c{img} element, but offset by a specified number:
\code
img { position: absolute }
@@ -525,17 +469,13 @@ selectors might be applied when formatting mobile interfaces.
img:nth-of-type(4n-0) { left: 77% }
\endcode
- Alternately,
- keywords \c{odd} and \c{even} correspond to \c{2n-1} and
- \c{2n} expressions.
- These are useful,
- for example,
- when styling table rows with alternating background colors.
+ Alternately, keywords \c{odd} and \c{even} correspond to \c{2n-1} and \c{2n}
+ expressions. These are useful, for example, when styling table rows with
+ alternating background colors.
- Rows are represented as the number of the element within the series,
- plus a fixed number.
- Each selector redefines the previous selector\'s upper range of
- values:
+ Rows are represented as the number of the element within the series, plus a
+ fixed number. Each selector redefines the previous selector's upper range
+ of values:
\code
img:nth-of-type(n) { top: 5% }
@@ -549,22 +489,14 @@ selectors might be applied when formatting mobile interfaces.
Level 3 CSS defines the following positional selectors:
\list
+ \o \c{:first-child}, \c{:last-child}, and \c{:only-child} refer to the first
+ or last child element within a series, or when it is the only one.
- \o \c{:first-child},
- \c{:last-child},
- and \c{:only-child} refer to the first or last child element within a
- series,
- or when it is the only one.
+ \o \c{:first-of-type}, \c{:last-of-type}, and \c{:only-of-type} refer to the
+ first or last specified element within a series, or when it is the only one.
- \o \c{:first-of-type},
- \c{:last-of-type},
- and \c{:only-of-type} refer to the first or last specified element
- within a series,
- or when it is the only one.
-
- \o \c{:nth-first-child()} and \c{:nth-last-child()} refer to the
- specified child element positioned from the start or end of the
- series.
+ \o \c{:nth-first-child()} and \c{:nth-last-child()} refer to the specified
+ child element positioned from the start or end of the series.
\o \c{:nth-first-of-type()} and \c{:nth-last-of-type()} refer to the
specified element positioned from the start or end of the series.
@@ -604,24 +536,17 @@ selectors might be applied when formatting mobile interfaces.
\section1 Visual Effects
-QtWebKit supports numerous Level 3 CSS features.
-This section briefly demonstrates how many of these recently available
-visual features may be used to refine mobile web designs.
-
-These more advanced CSS3 effects tend to be available only on the
-latest generation of mobile browsers.
-Still,
-it is safe to use them,
-even if the design degrades somewhat for devices that don\'t support
-them.
-When a browser encounters CSS properties or values it can\'t
-interpret,
-it simply ignores them.
-Designers can respond by providing fallback options to allow for
-\bold{graceful degradation}.
-For example,
-the following CSS specifies a plain gray background in case the
-browser does not support gradients:
+QtWebKit supports numerous Level 3 CSS visual features. This section briefly
+demonstrates how many of these recently available visual features may be used to
+refine mobile web designs.
+
+These more advanced CSS3 effects tend to be available only on the latest
+generation of mobile browsers. Still, it is safe to use them, even if the design
+degrades somewhat for devices that don't support them. When a browser
+encounters CSS properties or values it can't interpret, it simply ignores them.
+Designers can respond by providing fallback options to allow for \e{graceful
+degradation}. For example, the following CSS specifies a plain gray background
+in case the browser does not support gradients:
\code
background: #aaaaaa;
@@ -629,22 +554,17 @@ background: -webkit-gradient(linear, center top, center bottom,
from(#777777), color-stop(50%,#dddddd), to(#777777) );
\endcode
-Note that many of the CSS properties discussed in this section were
-implemented relatively recently,
-and vendors of browser rendering engines (such as WebKit) may still be
-in the process of testing and standardizing their behavior.
-These property names feature \bold{vendor prefixes} such as
-\c{-webkit-} for WebKit,
-\c{-moz-} for Mozilla,
-and \c{-o-} for Opera.
-
-It may be possible to extend CSS properties to these various browsers
-by providing vendor-specific syntax.
-The following example shows how to extend the \c{border-image}
-property to the Opera browser or Mozilla-based Fennec or the Maemo
-Browser for Nokia N900.
-It also shows the property\'s final name following the process of
-standardization:
+Note that many of the CSS properties discussed in this section were implemented
+relatively recently, and vendors of browser rendering engines (such as WebKit)
+may still be in the process of testing and standardizing their behavior. These
+property names feature \e{vendor prefixes} such as \c{-webkit-} for WebKit,
+\c{-moz-} for Mozilla, and \c{-o-} for Opera.
+
+It may be possible to extend CSS properties to these various browsers by
+providing vendor-specific syntax. The following example shows how to extend the
+\c{border-image} property to the Opera browser or Mozilla-based Fennec or the
+Maemo Browser for Nokia N900. It also shows the property's final name following
+the process of standardization:
\code
-webkit-border-image : url(img/border-frame.gif) 10 stretch stretch;
@@ -653,36 +573,28 @@ standardization:
border-image : url(img/border-frame.gif) 10 stretch stretch;
\endcode
-In some cases,
-there are slight variations in the syntax each vendor expects as
+In some cases, there are slight variations in the syntax each vendor expects as
property values.
\section2 Specifying Color and Opacity
- Prior to CSS3,
- there were three options when specifying color values:
- named colors,
- hexadecimal color values,
- or RGB values.
- CSS3 provides additional ways to specify colors:
+ Prior to CSS3, there were three options when specifying color values: named
+ colors, hexadecimal color values, or RGB values. CSS3 provides additional
+ ways to specify colors:
\list
-
- \o \bold{HSL}.
- Colors defined with the HSL model specify the
- \bold{hue} as a radial or degree coordinate,
- then its
- \bold{saturation} and \bold{luminence} as percentages.
- The following example specifies red and green values:
+ \o \e{HSL}. Colors defined with the HSL model specify the \e{hue} as a
+ radial or degree coordinate, then its \e{saturation} and \e{luminence}
+ as percentages. The following example specifies red and green values:
\code
background: hsl(0 , 100%, 60%);
background: hsl(128, 75% , 33%);
\endcode
- \o \bold{HSLA}.
+ \o \e{HSLA}.
Same as HSL,
- but specifying an additional decimal \bold{alpha} value that
+ but specifying an additional decimal \e{alpha} value that
corresponds to opacity.
The following specifies a fully opaque red,
followed by a partial transparency:
@@ -692,9 +604,9 @@ property values.
background: hsla(0, 100%, 60%, 0.5);
\endcode
- \o \bold{RGBA}.
+ \o \e{RGBA}.
Same as RGB,
- but specifying an additional decimal \bold{alpha} value that
+ but specifying an additional decimal \e{alpha} value that
corresponds to opacity.
The following the same transition from opaque to transparent as shown
above:
@@ -703,23 +615,19 @@ property values.
background: rgba(100%, 0%, 0%, 1.0);
background: rgba(100%, 0%, 0%, 0.5);
\endcode
-
\endlist
- With the addition of opacity to color definitions,
- you can now also specify \c{transparent} as a color name.
- Note that while RGBA and HSLA options are now available,
- you can still use the familiar \c{opacity} property independently of
- color definitions.
+ With the addition of opacity to color definitions, you can now also specify
+ \c{transparent} as a color name. Note that while RGBA and HSLA options are
+ now available, you can still use the familiar \c{opacity} property
+ independently of color definitions.
\section2 Rounded Corners
- In addition to removing harsh edges,
- rounded corners often help distinguish active items from static
- background elements.
- Rounded corners are implemented using the \c{border-radius} property.
- The following rounds off an edge to the same extent that interior
- elements are offset:
+ In addition to removing harsh edges, rounded corners often help distinguish
+ active items from static background elements. Rounded corners are
+ implemented using the \c{border-radius} property. The following rounds off
+ an edge to the same extent that interior elements are offset:
\code
.rounded {
@@ -728,21 +636,19 @@ property values.
}
\endcode
- The following example demonstrates how rounded corners can enhance a
- mobile design,
- by marking the start and end of large regions of content,
- such as a list of links:
+ The following example demonstrates how rounded corners can enhance a mobile
+ design, by marking the start and end of large regions of content, such as a
+ list of links:
\l{layout_link-fmt}{\inlineimage webkit-guide/scr_layout_link-fmt.png
}
\l{layout_link-fmt_css}{(CSS)}
- The greater the measurement applied to an element\'s \c{border-radius},
- the more dramatically rounded are its corners.
- For example,
- applying a \c{border-radius} that is half an element\'s overall
- dimensions results in a circle:
+ The greater the measurement applied to an element's \c{border-radius}, the
+ more dramatically rounded are its corners. For example, applying a
+ \c{border-radius} that is half an element's overall dimensions results in a
+ circle:
\code
.circle {
@@ -752,8 +658,8 @@ property values.
}
\endcode
- You can also set each corner individually,
- and specify a pair of values to achieve oval-shaped borders:
+ You can also set each corner individually, and specify a pair of values to
+ achieve oval-shaped borders:
\code
border-top-left-radius : 2em/1em;
@@ -761,81 +667,65 @@ property values.
\section2 Border Images
- Border images allow you to apply customized marquee effects,
- as in the following example:
+ Border images allow you to apply customized marquee effects, as in the
+ following example:
\l{css3_border-img}{\inlineimage webkit-guide/scr_css3_border-img.png
}
\l{css3_border-img_css}{(CSS)}
- In this case,
- the image stretches to fit an element\'s dimensions:
+ In this case, the image stretches to fit an element's dimensions:
\code
-webkit-border-image : url(img/border-frame.gif) 10 stretch stretch;
\endcode
- As is true of the \c{border} property,
- a single numeric argument specifies the width of the border as a
- whole,
- or up to four values to modify the width of each side.
+ As is true of the \c{border} property, a single numeric argument specifies
+ the width of the border as a whole, or up to four values to modify the width
+ of each side.
- Any border image you specify substitutes some or all of an element\'s
- normal border.
- The \c{border-image} and \c{border-corner-image} each collectively
+ Any border image you specify substitutes some or all of an element's normal
+ border. The \c{border-image} and \c{border-corner-image} each collectively
represent four more specific properties.
- For \c{border-image},
- these properties are:
- \list
+ For \c{border-image}, these properties are:
+ \list
\o \c{border-top-image}
\o \c{border-right-image}
\o \c{border-bottom-image}
\o \c{border-left-image}
-
\endlist
- For \c{border-corner-image},
- these properties are:
-
+ For \c{border-corner-image}, these properties are:
\list
-
\o \c{border-top-left-image}
\o \c{border-top-right-image}
\o \c{border-bottom-right-image}
\o \c{border-bottom-left-image}
-
\endlist
- The \c{border-image} property specifies a single image for all four
- edge borders.
- The \c{border-corner-image} property specifies an image for all four
- corner borders.
- To specify images individually for any of the edge or corner borders,
- use any of the eight individual properties.
+ The \c{border-image} property specifies a single image for all four edge
+ borders. The \c{border-corner-image} property specifies an image for all
+ four corner borders. To specify images individually for any of the edge or
+ corner borders, use any of the eight individual properties.
When specifying any border edge or corner image values:
\list
-
- \o A \c{stretch} value stretches one image to fill the element border
- area,
+ \o A \c{stretch} value stretches one image to fill the element border area,
as shown in the example above.
- \o A \c{repeat} value repeats one image until it fills the element
- border area and clips any overflow,
- for example:
+ \o A \c{repeat} value repeats one image until it fills the element border
+ area and clips any overflow, for example:
\code
-webkit-border-image : url(img/border-frame.gif) 10 repeat repeat;
\endcode
- In this case the first \c{repeat} applies to top and bottom edge
- borders,
+ In this case the first \c{repeat} applies to top and bottom edge borders,
and the second applies to left and right edge borders.
-
\endlist
\section2 Backgrounds
@@ -849,12 +739,10 @@ property values.
\l{css3_backgrounds_css}{(CSS)}
\l{css3_backgrounds_js}{(JavaScript)}
- By default,
- tabs display a single icon image,
- but when selected feature an additional gradient background image.
- The following CSS shows how both icon and background can receive their
- own series of specifications,
- affecting their offset or whether each image repeats:
+ By default, tabs display a single icon image, but when selected feature an
+ additional gradient background image. The following CSS shows how both icon
+ and background can receive their own series of specifications, affecting
+ their offset or whether each image repeats:
\code
background-image : url(img/select.png) , url(img/gradient.jpg);
@@ -862,29 +750,24 @@ property values.
background-position : 12px 12px , 0 0;
\endcode
- In addition,
- you may set the \c{background-size} property to
- \c{contain} to scale images to the size of the containing element.
- (Level 2 CSS allowed only specific measurements or percentages of the
- image's size.)
+ In addition, you may set the \c{background-size} property to \c{contain} to
+ scale images to the size of the containing element. (Level 2 CSS allowed
+ only specific measurements or percentages of the image's size.)
\section2 Text Shadow and Stroke
- Shadows can be applied to text.
- As the following example shows,
- text shadows may interfere with the legibility of text,
- and are seldom appropriate unless they\'re used for large,
- sans-serif display headings:
+ Shadows can be applied to text. As the following example shows, text shadows
+ may interfere with the legibility of text, and are seldom appropriate unless
+ they're used for large, sans-serif display headings:
\l{css3_text-shadow}{\inlineimage webkit-guide/scr_css3_text-shadow.png
}
\l{css3_text-shadow_css}{(CSS)}
- In addition to the shadow\'s color,
- the property accepts two measurements to represent its offset from the
- text,
- while the third specifies the extent to which the shadow is blurred:
+ In addition to the shadow's color, the property accepts two measurements to
+ represent its offset from the text, while the third specifies the extent to
+ which the shadow is blurred:
\code
h1,h2,h3,h4 { text-shadow : 0.25em 0.25em 0.25em #aaaaaa; }
@@ -898,9 +781,8 @@ property values.
\l{css3_text-stroke_css}{(CSS)}
- In the following CSS,
- \c{-webkit-text-fill-color} is synonymous with the standard \c{color}
- property:
+ In the following CSS, \c{-webkit-text-fill-color} is synonymous with the
+ standard \c{color} property:
\code
-webkit-text-stroke-color : #000000;
@@ -910,17 +792,14 @@ property values.
\section2 Text Overflow
- Web developers are familiar with the \c{overflow} property,
- which can be used to hide content that exceeds an element\'s dimensions,
- or else to make it accessible via scrolling.
- CSS3 specifies an additional \c{text-overflow} property that allows
- you to add ellipses as a suffix to any text that overflows the
- element,
- to indicate the presence of additional text.
+ Web developers are familiar with the \c{overflow} property, which can be
+ used to hide content that exceeds an element's dimensions, or else to make
+ it accessible via scrolling. CSS3 specifies an additional \c{text-overflow}
+ property that allows you to add ellipses as a suffix to any text that
+ overflows the element, to indicate the presence of additional text.
- The following example shows how the \c{text-overflow} property allows
- you to present user-selectable links to expanded regions of text
- within a page:
+ The following example shows how the \c{text-overflow} property allows you to
+ present user-selectable links to expanded regions of text within a page:
\l{css3_text-overflow}{\inlineimage webkit-guide/scr_css3_text-overflow.png
}
@@ -928,8 +807,8 @@ property values.
\l{css3_text-overflow_css}{(CSS)}
\l{css3_text-overflow_js}{(JavaScript)}
- Use the \c{text-overflow} property in conjunction with \c{overflow}
- and \c{white-space}:
+ Use the \c{text-overflow} property in conjunction with \c{overflow} and
+ \c{white-space}:
\code
text-overflow : ellipsis;
@@ -937,55 +816,48 @@ property values.
white-space : nowrap;
\endcode
- For \c{text-overflow} to work,
- the element\'s \c{white-space} must be set to \c{nowrap},
- overriding the default \c{normal} value.
- This prevents words from wrapping onto another line as is standard
- behavior outside the \c{pre} tag,
- and forces text past the right edge of the element.
+ For \c{text-overflow} to work, the element's \c{white-space} must be set to
+ \c{nowrap}, overriding the default \c{normal} value. This prevents words
+ from wrapping onto another line as is standard behavior outside the \c{pre}
+ tag, and forces text past the right edge of the element.
- (The element\'s \c{text-overflow} may specify both \c{ellipsis} and
- \c{ellipsis-word},
- the latter of which is not as widely implemented.)
+ (The element's \c{text-overflow} may specify both \c{ellipsis} and
+ \c{ellipsis-word}, the latter of which is not as widely implemented.)
\section2 Custom Scrollbars
- In general,
- scrollable elements should be avoided wherever possible
- within mobile interfaces.
- Drag gestures already allow users to scroll windows vertically,
- and narrow mobile screens are not suitable for overly wide content.
+ In general, scrollable elements should be avoided wherever possible within
+ mobile interfaces. Drag gestures already allow users to scroll windows
+ vertically, and narrow mobile screens are not suitable for overly wide
+ content.
In cases where content can only be viewed within a scrolling window,
- scrollbars can be reformatted to make them more accessible to mobile
- users.
- The following example presents a block of code within a touch-enabled
- mobile interface:
+ scrollbars can be reformatted to make them more accessible to mobile users.
+ The following example presents a block of code within a touch-enabled mobile
+ interface:
\l{css3_scroll}{\inlineimage webkit-guide/scr_css3_scroll.png
}
\l{css3_scroll_css}{(CSS)}
- This interface uses standard scrollbars,
- but their appearance is enhanced using low-level \bold{pseudo-element}
- CSS classes that refer to individual components within the scrollbar.
+ This interface uses standard scrollbars, but their appearance is enhanced
+ using low-level \e{pseudo-element} CSS classes that refer to individual
+ components within the scrollbar.
- Simply by invoking the following CSS selector,
- you disable scrollbars\' default appearance:
+ Simply by invoking the following CSS selector, you disable scrollbars'
+ default appearance:
\code
pre::-webkit-scrollbar { height : 3em }
\endcode
- In this case,
- the specified property increases the scrollbar\'s default \c{height}
- to make it easier for mobile users to tap it with their fingers.
+ In this case, the specified property increases the scrollbar's default
+ \c{height} to make it easier for mobile users to tap it with their fingers.
Each additional scrollbar component must then be explicitly defined,
- otherwise it does not render.
- The following CSS provides custom styling for the horizontal panning
- buttons:
+ otherwise it does not render. The following CSS provides custom styling for
+ the horizontal panning buttons:
\code
::-webkit-scrollbar-button:increment {
@@ -1004,46 +876,40 @@ property values.
}
\endcode
- In this case,
- the scrollbar region between the two navigation icons is still active,
- but not obviously so since its visual formatting has been overridden.
- The simpler set of controls is far more suitable for a mobile
+ In this case, the scrollbar region between the two navigation icons is still
+ active, but not obviously so since its visual formatting has been
+ overridden. The simpler set of controls is far more suitable for a mobile
interface.
Webkit provides pseudo-elements for the following components:
\list
+ \o \c{scrollbar} refers to scrollbar as a whole. Additional dynamic classes
+ can be appended to specify \c{:vertical} and \c{:horizontal} scrollbars. The
+ \c{:corner-present} dynamic class activates when both scrollbars are
+ present.
- \o \c{scrollbar} refers to scrollbar as a whole.
- Additional dynamic classes can be appended to specify \c{:vertical}
- and \c{:horizontal} scrollbars.
- The \c{:corner-present} dynamic class activates when both scrollbars
- are present.
-
- \o \c{scrollbar-button} refers to incremental navigation buttons.
- Each button can be styled separately with \c{:increment} and
- \c{:decrement} dynamic classes.
+ \o \c{scrollbar-button} refers to incremental navigation buttons. Each
+ button can be styled separately with \c{:increment} and \c{:decrement}
+ dynamic classes.
- \o \c{scrollbar-thumb} refers to the scrollbar\'s slider control.
+ \o \c{scrollbar-thumb} refers to the scrollbar's slider control.
\o \c{scrollbar-track} refers to the active navigation region between
buttons.
- \o \c{scrollbar-track-piece} refers to each portion of the track on
- either side of the thumb control.
- These can be styled separately using \c{:start} and \c{:end} dynamic
- classes.
-
- \o \c{scrollbar-corner} refers to the corner where scrollbar tracks
- meet.
- The \c{resizer} pseudo-element also refers to this corner,
- but for resizable elements such as \c{textarea}.
+ \o \c{scrollbar-track-piece} refers to each portion of the track on either
+ side of the thumb control. These can be styled separately using \c{:start}
+ and \c{:end} dynamic classes.
- \o The \c{:double-button} and \c{:single-button} dynamic classes refer
- to whether incrementor and decrementors are paired together
- redundantly at each end of the track,
- while \c{:no-button} refers to whether they display at all.
+ \o \c{scrollbar-corner} refers to the corner where scrollbar tracks meet.
+ The \c{resizer} pseudo-element also refers to this corner, but for resizable
+ elements such as \c{textarea}.
+ \o The \c{:double-button} and \c{:single-button} dynamic classes refer to
+ whether incrementor and decrementors are paired together redundantly at each
+ end of the track, while \c{:no-button} refers to whether they display at
+ all.
\endlist
\bold{See Also:}
@@ -1052,11 +918,9 @@ property values.
\section2 Gradients
- Gradients provide a graduated shading effect that can add subtle
- texture to background elements,
- and can provide buttons a three-dimensional,
- beveled appearance.
- Explicit support for gradients means there's no longer a need to
+ Gradients provide a graduated shading effect that can add subtle texture to
+ background elements, and can provide buttons a three-dimensional, beveled
+ appearance. Explicit support for gradients means there's no longer a need to
implement them as repeating background images.
Specify gradients using CSS properties such as the following:
@@ -1067,59 +931,52 @@ property values.
from(#dddddd), to(#777777) );
\endcode
- Note the pair of \c{background} statements.
- The first specifies a monochrome fallback color for browsers that do
- not support gradients.
+ Note the pair of \c{background} statements. The first specifies a monochrome
+ fallback color for browsers that do not support gradients.
- The function specifies a simple \c{linear} gradient from the top to
- the bottom of the element,
- shifting from a light to a darker gray.
+ The function specifies a simple \c{linear} gradient from the top to the
+ bottom of the element, shifting from a light to a darker gray.
- The following example shows how this gradient can be applied to a
- background element:
+ The following example shows how this gradient can be applied to a background
+ element:
\l{css3_gradientBack}{\inlineimage webkit-guide/scr_css3_gradientBack.png
}
\l{css3_gradientBack_css}{(CSS)}
- Gradients cannot be applied to the \c{body} element.
- Instead,
- they are here applied to an element covers the background.
+ Gradients cannot be applied to the \c{body} element. Instead, they are here
+ applied to an element that covers the background.
- You can specify more than one gradient for the same element.
- The following shifts from a dark to a light gray halfway down the
- element,
- then back to dark:
+ You can specify more than one gradient for the same element. The following
+ shifts from a dark to a light gray halfway down the element, then back to
+ dark:
\code
background: -webkit-gradient(linear, center top, center bottom,
from(#777777), color-stop(50%, #dddddd), to(#777777) );
\endcode
- Here is how the additional \c{color-stop} appears when applied to the
- same background element:
+ Here is how the additional \c{color-stop} appears when applied to the same
+ background element:
\l{css3_gradientBackStop}{\inlineimage webkit-guide/scr_css3_gradientBackStop.png
}
\l{css3_gradientBackStop_css}{(CSS)}
- Gradients can also provide a textured,
- three-dimensional appearance for buttons.
- In the following example,
- the gradient is inverted and darkened when each button is pressed:
+ Gradients can also provide a textured, three-dimensional appearance for
+ buttons. In the following example, the gradient is inverted and darkened
+ when each button is pressed:
\l{css3_gradientButton}{\inlineimage webkit-guide/scr_css3_gradientButton.png
}
\l{css3_gradientButton_css}{(CSS)}
- In addition to linear gradients,
- CSS3 also specifies \bold{radial} gradients that emanate from a single
- point.
- The following example demonstrates a colorful radial gradient used to
- mark where users touch the screen:
+ In addition to linear gradients, CSS3 also specifies \bold{radial} gradients
+ that emanate from a single point. The following example demonstrates a
+ colorful radial gradient used to mark where users touch the screen:
\l{css3_grad-radial}{\inlineimage webkit-guide/scr_css3_grad-radial.png
}
@@ -1127,38 +984,31 @@ property values.
\l{css3_grad-radial_css}{(CSS)}
\l{css3_grad-radial_js}{(JavaScript)}
- The syntax is slightly different than for lineal gradients.
- The first two comma-separated arguments after the \c{radial} statement
- specify the coordinates of the inner circle,
- and its radius.
- The next two arguments specify the coordinates and radius of the outer
- circle:
+ The syntax is slightly different than for linear gradients. The first two
+ comma-separated arguments after the \c{radial} statement specify the
+ coordinates of the inner circle, and its radius. The next two arguments
+ specify the coordinates and radius of the outer circle:
\code
background: -webkit-gradient(radial, 90 120, 5, 100 130, 48,
from(#777777), color-stop(50%, #dddddd), to(#777777) );
\endcode
- The use of \c{from} and \c{to} values and \c{color-stop} are same as
- for linear gradients.
+ The use of \c{from}, \c{to} values and \c{color-stop} in radial gradients
+ are the same as for linear gradients.
\section2 Reflections
- Reflections offer a mirror-like effect which,
- in the following example,
- adds a sense of weight to headings and images:
+ Reflections offer a mirror-like effect which, in the following example, adds
+ a sense of weight to headings and images:
\l{css3_reflect}{\inlineimage webkit-guide/scr_css3_reflect.png
}
\l{css3_reflect_css}{(CSS)}
- The property's syntax specifies the edge of the element at which to
- reflect,
- the offset,
- and an overlay color.
- In this case,
- the color is a gradient,
+ The property's syntax specifies the edge of the element at which to reflect,
+ the offset, and an overlay color. In this case, the color is a gradient,
which causes the reflection to gradually fade:
\code
@@ -1169,11 +1019,9 @@ property values.
\section2 Masks
- Masks offer a way to modify an image by overlaying either another
- image,
- or a gradient.
- The following example shows a series of thumbnail images that appear
- faded at their bottom edge until selected:
+ Masks offer a way to modify an image by overlaying either another image, or
+ a gradient. The following example shows a series of thumbnail images that
+ appear faded at their bottom edge until selected:
\l{css3_mask-grad}{\inlineimage webkit-guide/scr_css3_mask-grad.png
}
@@ -1181,30 +1029,30 @@ property values.
\l{css3_mask-grad_css}{(CSS)}
\l{css3_mask-grad_js}{(JavaScript)}
- The gradient\'s opacity shifts from 1 to 0,
- an effect that translates to the image:
+ The gradient's opacity shifts from \c 1 to \c 0, an effect that translates
+ to the image:
\code
-webkit-mask-box-image : -webkit-gradient(linear, left top, left
bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
\endcode
- The following example demonstrates an image used as a mask to frame
- another image:
+ The following example demonstrates an image used as a mask to frame another
+ image:
\l{css3_mask-img}{\inlineimage webkit-guide/scr_css3_mask-img.png
}
\l{css3_mask-img_css}{(CSS)}
- Separately,
- the component images look like this:
+ Separately, the component images look like these:
+
+ \inlineimage webkit-guide/mask0.png
+ \inlineimage webkit-guide/mask1.png
- \image webkit-guide/mask0.png
- \image webkit-guide/mask1.png
- The syntax is the same for border images,
- and allows you to stretch one image over the other:
+ The syntax is the same for border images, and allows you to stretch one
+ image over the other:
\code
-webkit-mask-box-image : url(img/mask.png) 5% stretch;
@@ -1212,174 +1060,138 @@ property values.
\section1 Dynamic CSS
-Animations help enhance touch-based mobile interfaces in many ways.
-They help ease transitions from one display state to another that
-might otherwise appear jarring.
-They help provide a sense of navigational orientation.
-They also often simulate tactile feedback as users\' touches result in
-a tangible visual effect.
-Overall,
-they add a sense of vibrancy that increases users\'
-engagement with the content on display.
-
-Support by QtWebKit for HTML5 allows you to choose from among several
-flavors of web-based animation:
-Canvas,
-SVG,
-and Level 3 CSS.
-Web developers may also be familiar with lower-level JavaScript-based
-animation techniques,
-which form the basis of many popular JavaScript libraries such as
-jQuery and Prototype.
-This section focuses on CSS-based animations,
-since they are more appropriate to integrate throughout a web design,
-without the additional overhead JavaScript libraries require.
-Like Flash,
-SVG and Canvas offer more specialized,
-low-level graphics frameworks whose animation features
-are more appropriate for generating standalone effects.
-
-This section demonstrates animation techniques by offering a series of
-examples that apply to common mobile design tasks.
-While some of these tasks are addressed by existing JavaScript
-frameworks such as jQuery and Prototype,
-the examples provided here illustrate some CSS-only alternatives.
+Animations help enhance touch-based mobile interfaces in many ways. They help
+ease transitions from one display state to another that might otherwise appear
+jarring. They help provide a sense of navigational orientation. They also often
+simulate tactile feedback as users' touches result in a tangible visual effect.
+Overall, they add a sense of vibrancy that increases users' engagement with the
+content on display.
+
+Support by QtWebKit for HTML5 allows you to choose from among several flavors of
+web-based animation: Canvas, SVG, and Level 3 CSS. Web developers may also be
+familiar with lower-level JavaScript-based animation techniques, which form the
+basis of many popular JavaScript libraries such as jQuery and Prototype. This
+section focuses on CSS-based animations, since they are more appropriate to
+integrate throughout a web design, without the additional overhead JavaScript
+libraries require. Like Adobe Flash, SVG and Canvas offer more specialized,
+low-level graphics frameworks whose animation features are more appropriate for
+generating standalone effects.
+
+This section demonstrates animation techniques by offering a series of examples
+that apply to common mobile design tasks. While some of these tasks are
+addressed by existing JavaScript frameworks such as jQuery and Prototype, the
+examples provided here illustrate some CSS-only alternatives.
\section2 CSS Animation Concepts
Level 3 CSS introduces three distinct concepts that are relevant when
- crafting dynamic effects,
- which are discussed in the following sections:
+ crafting dynamic effects, which are discussed in the following sections:
\list
-
- \o \bold{Transforms} offer a series of manipulations to screen
- elements.
- By themselves,
- transforms present only static visual effects,
- but they become especially useful as part of dynamic transitions and
- animations.
- Simple transforms are two-dimensional,
- with three-dimensional transforms gaining gradual support.
-
- \o \bold{Transitions} entail a graduated shift from one explicit
- display state to another.
- Transitional shifts apply to any CSS property that specifies numeric
- or color values.
-
- \o \bold{Animations} offer more complex sequences of transitions that
- can specify many intermediate display states.
- Unlike simple transitions,
+ \o \e{Transforms} offer a series of manipulations to screen elements. By
+ themselves, transforms present only static visual effects, but they become
+ especially useful as part of dynamic transitions and animations. Simple
+ transforms are two-dimensional, with three-dimensional transforms gaining
+ gradual support.
+
+ \o \e{Transitions} entail a graduated shift from one explicit display
+ state to another. Transitional shifts apply to any CSS property that
+ specifies numeric or color values.
+
+ \o \e{Animations} offer more complex sequences of transitions that can
+ specify many intermediate display states. Unlike simple transitions,
animations can also be initiated more freely.
-
\endlist
\section2 2D Transforms
- Transforms allow you to freely displace box elements from where they
- would ordinarily appear.
- Several transform functions are available,
- allowing you to \bold{scale},
- \bold{rotate},
- \bold{skew},
- or \bold{translate} (move) objects.
+ Transforms allow you to freely displace box elements from where they would
+ ordinarily appear. Several transform functions are available, allowing you
+ to \e{scale}, \e{rotate}, \e{skew}, or \e{translate} (move) objects.
- The \c{translate} function moves an element from its default location,
- and accepts \bold{x} and \bold{y} measurements as arguments.
- The following moves an element off the right edge of the screen:
+ The \c{translate} function moves an element from its default location, and
+ accepts \c{x} and \c{y} measurements as arguments. The following moves an
+ element off the right edge of the screen:
\code
-webkit-transform: translate(120%, 0);
\endcode
- Alternately,
- \c{translateX} and \c{translateY} functions allow you to specify each
- axis independently.
- This moves the element off the top of the screen:
+ Alternately, \c{translateX} and \c{translateY} functions allow you to
+ specify each axis independently. This moves the element off the top of the
+ screen:
\code
-webkit-transform: translateX(0.0) translateY(-120%);
\endcode
- Scale transforms allow you enlarge or shrink an element,
- with the scale expressed as a decimal.
- By itself,
- \c{scale} modifies height and width proportionately,
- but the alternative \c{scaleX} and \c{scaleY} functions allow you to
- constrain scaling to a single axis.
+ Scale transforms allow you enlarge or shrink an element, with the scale
+ expressed as a decimal. By itself, \c{scale} modifies height and width
+ proportionately, but the alternative \c{scaleX} and \c{scaleY} functions
+ allow you to constrain scaling to a single axis.
- The following animation demonstrates a \c{translate} function,
- which moves the element from off the screen,
- followed by series of \c{scale},
- \c{scaleX},
- and \c{scaleY} functions:
+ The following animation demonstrates a \c{translate} function, which moves
+ the element from off the screen, followed by series of \c{scale},
+ \c{scaleX}, and \c{scaleY} functions:
\l{anim_demo-scale}{\inlineimage webkit-guide/scr_anim_demo-scale.png
}
\l{anim_demo-scale_css}{(CSS)}
- By default,
- transforms originate from the center of the element,
- but you can specify any edge using the \c{-webkit-transform-origin}
- property.
- The following reduces an element to 75% of its original size,
- while keeping it at its original bottom edge:
+ By default, transforms originate from the center of the element, but you can
+ specify any edge using the \c{-webkit-transform-origin} property. The
+ following reduces an element to 75% of its original size, while keeping it
+ at its original bottom edge:
\code
-webkit-transform : scale(0.75);
-webkit-transform-origin : bottom;
\endcode
- The following example uses this scale transform to shrink icons that
- are assigned to in-line links,
- with icons aligning to the text\'s baseline:
+ The following example uses this scale transform to shrink icons that are
+ assigned to in-line links, with icons aligning to the text's baseline:
\l{layout_link-fmt}{\inlineimage webkit-guide/scr_layout_link-fmt.png
}
\l{layout_link-fmt_css}{(CSS)}
- The \c{rotate} function accepts degree or radian arguments,
- with negative arguments specifying counter-clockwise motion.
- The following animation demonstrates two rotations: the first clockwise around the
- element\'s center point,
- and the second counter-clockwise around the top left corner:
+ The \c{rotate} function accepts degree or radian arguments, with negative
+ arguments specifying counter-clockwise motion. The following animation
+ demonstrates two rotations: the first clockwise around the element's center
+ point, and the second counter-clockwise around the top left corner:
\l{anim_demo-rotate}{\inlineimage webkit-guide/scr_anim_demo-rotate.png
}
\l{anim_demo-rotate_css}{(CSS)}
- The \c{skew} function also accepts positive or negative degree
- arguments,
- specifying the extent to which to modify the bottom left corner\'s
- 90-degree angle.
- The \c{skew} and \c{skewX} functions shift the element horizontally,
- but the alternative \c{skewY} function shifts the element vertically.
- The following animation demonstrates a \c{skewX} followed by a
- \c{skewY}:
+ The \c{skew} function also accepts positive or negative degree arguments,
+ specifying the extent to which to modify the bottom left corner's 90-degree
+ angle. The \c{skew} and \c{skewX} functions shift the element horizontally,
+ but the alternative \c{skewY} function shifts the element vertically. The
+ following animation demonstrates a \c{skewX} followed by a \c{skewY}:
\l{anim_demo-skew}{\inlineimage webkit-guide/scr_anim_demo-skew.png
}
\l{anim_demo-skew_css}{(CSS)}
- In the following example,
- a variety of transforms make a set of three navigational tab icons
- appear to be part of a cube:
+ In the following example, a variety of transforms make a set of three
+ navigational tab icons appear to be part of a cube:
\l{anim_tabbedSkew}{\inlineimage webkit-guide/scr_anim_tabbedSkew.png
}
\l{anim_tabbedSkew_css}{(CSS)}
- The example also implements the tab icons as internal links that
- activate display of content using the \c{:target} dynamic class.
- See the \l{Navigational Selectors} section for more information.
+ The example also implements the tab icons as internal links that activate
+ display of content using the \c{:target} dynamic class. See the
+ \l{Navigational Selectors} section for more information.
- Note that transforms can include any combination of the functions
- described above:
+ Note that transforms can include any combination of the functions described
+ above:
\code
nav > a:nth-of-type(3) {
@@ -1391,20 +1203,16 @@ the examples provided here illustrate some CSS-only alternatives.
\section2 Transitions
Transitions allow you to gradually shift from one defined CSS state to
- another.
- Any CSS property expressed as a numeric or color value (including a
- color name or hex value) can be transitioned between two style
- sheets.
- Properties such as \c{display} that have discrete sets of named
- values,
- such as the \c{display} property's \bold{block} or \bold{none} values,
- cannot be transitioned.
- In cases where named values translate internally to numeric values,
- such as the \c{border-width} property's \c{thin} and \c{thick} values,
- they can be transitioned.
-
- The following example shows a series of transitions from a collapsed
- icon state to an expanded panel:
+ another. Any CSS property expressed as a numeric or color value (including a
+ color name or hex value) can be transitioned between two style sheets.
+ Properties such as \c{display} that have discrete sets of named values, such
+ as the \c{display} property's \c{block} or \c{none} values, cannot be
+ transitioned. In cases where named values translate internally to numeric
+ values, such as the \c{border-width} property's \c{thin} and \c{thick}
+ values, they can be transitioned.
+
+ The following example shows a series of transitions from a collapsed icon
+ state to an expanded panel:
\l{anim_panel}{\inlineimage webkit-guide/scr_anim_panel.png
}
@@ -1412,10 +1220,9 @@ the examples provided here illustrate some CSS-only alternatives.
\l{anim_panel_css}{(CSS)}
\l{anim_panel_js}{(JavaScript)}
- Each style sheet specifies a different \c{max-width} value,
- and each accompanying transition,
- defined separately for each state,
- allows the value to shift over the course of half a second:
+ Each style sheet specifies a different \c{max-width} value, and each
+ accompanying transition, defined separately for each state, allows the value
+ to shift over the course of half of a second:
\code
nav.expanded {
@@ -1428,8 +1235,7 @@ the examples provided here illustrate some CSS-only alternatives.
}
\endcode
- That appreviated syntax can be expanded to several different
- properties:
+ That shorthand syntax can be expanded to several different properties:
\code
nav.expanded {
@@ -1446,17 +1252,15 @@ the examples provided here illustrate some CSS-only alternatives.
}
\endcode
- Available transition functions include \c{linear},
- \c{ease-in},
- \c{ease-out},
- \c{ease-in-out} and \c{cubic-bezier}.
+ Available transition functions include \c{linear}, \c{ease-in},
+ \c{ease-out}, \c{ease-in-out} and \c{cubic-bezier}.
Note that the \c{max-width} properties in both style sheets both use
- percentages to specify measurements.
- Transitions may not work properly if you shift from one unit to another.
+ percentages to specify measurements. Transitions may not work properly if
+ you shift from one unit to another.
- The example above specifies an additional set of transitions affecting
- the icons nested within the navigation panel:
+ The example above specifies an additional set of transitions affecting the
+ icons nested within the navigation panel:
\code
nav.expanded > .option {
@@ -1471,25 +1275,21 @@ the examples provided here illustrate some CSS-only alternatives.
}
\endcode
- The shifting \c{scale} transform makes icons appear to zoom in to fill
- the space,
- while \c{opacity} makes them fade in.
- Specifying \c{all} as the transition property applies to any valid
- property that differs between the two states.
+ The shifting \c{scale} transform makes icons appear to zoom in to fill the
+ space, while \c{opacity} makes them fade in. Specifying \c{all} as the
+ transition property applies to any valid property that differs between the
+ two states.
- These nested transitions execute at the same time as those assigned to
- the parent \c{nav} element.
- The combined effect appears to be a single transition.
+ These nested transitions execute at the same time as those assigned to the
+ parent \c{nav} element. The combined effect appears to be a single
+ transition.
\section2 Transitional Sequences
- The prior example showed a single transition,
- but transitions can also be run in sequence to form more complex
- animations.
- The following example demonstrates an embedded navigation panel that,
- when pressed,
- expands horizontally,
- then vertically to reveal numerous navigation options:
+ The prior example showed a single transition, but transitions can also be
+ run in sequence to form more complex animations. The following example
+ demonstrates an embedded navigation panel that, when pressed, expands
+ horizontally, then vertically to reveal numerous navigation options:
\l{anim_accord}{\inlineimage webkit-guide/scr_anim_accord.png
}
@@ -1497,8 +1297,8 @@ the examples provided here illustrate some CSS-only alternatives.
\l{anim_accord_css}{(CSS)}
\l{anim_accord_js}{(JavaScript)}
- The style sheets specify separate,
- comma-separated transitions for \c{width} and \c{height} properties:
+ The style sheets specify separate, comma-separated transitions for \c{width}
+ and \c{height} properties:
\code
#accordion.expanded {
@@ -1519,8 +1319,8 @@ the examples provided here illustrate some CSS-only alternatives.
}
\endcode
- Each transition\'s additional time measurement specifies a delay.
- The long-form syntax may make this clearer:
+ Each transition's additional time measurement specifies a delay. The
+ long-form syntax may make this clearer:
\code
#accordion.expanded {
@@ -1541,27 +1341,21 @@ the examples provided here illustrate some CSS-only alternatives.
}
\endcode
- The shift to the \c{expanded} state involves two transitions,
- each of which lasts half a second and relies on the same
- \c{ease-in-out} function.
- The first takes place immediately and affects the \c{width} property.
- The second,
- affecting the \c{height} property,
- takes place after a delay that matches the first transition\'s
- duration.
- The reverse transition is much the same,
- only the \c{height} property transitions before the \c{width} to
+ The shift to the \c{expanded} state involves two transitions, each of which
+ lasts half a second and relies on the same \c{ease-in-out} function. The
+ first takes place immediately and affects the \c{width} property. The
+ second, affecting the \c{height} property, takes place after a delay that
+ matches the first transition's duration. The reverse transition is much the
+ same, only the \c{height} property transitions before the \c{width} to
reverse the effect.
- In addition to the navigation element\'s sequence of transitions,
- nested accordion-style animations activate when users expand top-level
- headings.
- Subheadings are revealed using a \c{scaleY} transform,
- which makes them appear as if they are flipping upwards.
+ In addition to the navigation element's sequence of transitions, nested
+ accordion-style animations activate when users expand top-level headings.
+ Subheadings are revealed using a \c{scaleY} transform, which makes them
+ appear as if they are flipping upwards.
- The following example shows a photo gallery interface that uses the
- same techniques.
- (Size the window to emulate a smaller mobile screen.)
+ The following example shows a photo gallery interface that uses the same
+ techniques. (Size the window to emulate a smaller mobile screen.)
\l{anim_gallery}{\inlineimage webkit-guide/scr_anim_gallery.png
}
@@ -1569,20 +1363,15 @@ the examples provided here illustrate some CSS-only alternatives.
\l{anim_gallery_css}{(CSS)}
\l{anim_gallery_js}{(JavaScript)}
- The main interface uses simple transitions affecting \c{opacity},
- along with \c{scale} and \c{translate} transforms,
- which combined make queued images appear dimmer,
- smaller,
- and horizontally offset from the main image.
-
- A separate sequence of transitions activates when users tap selected
- images.
- The first transition uses a \c{scaleX} transform to flip the image
- towards the center.
- The second then flips out a panel featuring details on the photo.
- When users navigate away to adjacent photos,
- the panel automatically flips back to its original state as it is
- moved to the side.
+ The main interface uses simple transitions affecting \c{opacity}, along with
+ \c{scale} and \c{translate} transforms, which combined make queued images
+ appear dimmer, smaller, and horizontally offset from the main image.
+
+ A separate sequence of transitions activates when users tap selected images.
+ The first transition uses a \c{scaleX} transform to flip the image towards
+ the center. The second then flips out a panel featuring details on the
+ photo. When users navigate away to adjacent photos, the panel automatically
+ flips back to its original state as it is moved to the side.
Another example shows an interface featuring a simple list of items:
@@ -1592,44 +1381,37 @@ the examples provided here illustrate some CSS-only alternatives.
\l{anim_skew_css}{(CSS)}
\l{anim_skew_js}{(JavaScript)}
- When dismissed,
- items are wiped off the screen using a \c{skew} transform that
- provides the illusion of speed.
- Remaining items move upwards to fill the space vacated by items that
- have been removed.
-
- This example uses the same technique of sequential transitions.
- The first transition applies to the combined \c{translate}/\c{skew}
- transform.
- The second,
- delayed transition modifies the \c{top} property to align remaining
+ When dismissed, items are wiped off the screen using a \c{skew} transform
+ that provides the illusion of speed. Remaining items move upwards to fill
+ the space vacated by items that have been removed.
+
+ This example uses the same technique of sequential transitions. The first
+ transition applies to the combined \c{translate}/\c{skew} transform. The
+ second, delayed transition modifies the \c{top} property to align remaining
items to a grid.
- Note that for items to reposition themselves in this example,
- a vertical grid must be explicitly specified.
- You can only apply transitions between properties you explicitly
- define and activate,
- not between values the browser assigns internally to automatically
- position elements relative to each other.
+ Note that for items to reposition themselves in this example, a vertical
+ grid must be explicitly specified. You can only apply transitions between
+ properties you explicitly define and activate, not between values the
+ browser assigns internally to automatically position elements relative to
+ each other.
\section2 Keyframe Animations
- The previous section showed how you can chain sequences of transitions
- to produce complex effects.
- Animations also allow you to define many intermediary interface states,
- but using a far simpler syntax,
- and not assigned to transitions between CSS states.
+ The previous section showed how you can chain sequences of transitions to
+ produce complex effects. Animations also allow you to define many
+ intermediary interface states, but using a far simpler syntax, and not
+ assigned to transitions between CSS states.
- The following example shows a simple animation of icons that pulse
- when selected:
+ The following example shows a simple animation of icons that pulse when
+ selected:
\l{anim_pulse}{\inlineimage webkit-guide/scr_anim_pulse.png
}
\l{anim_pulse_css}{(CSS)}
- It uses the following CSS,
- shown here in both abbreviated and long form:
+ It uses the following CSS, shown here in both abbreviated and long form:
\code
nav > a:target { -webkit-animation : pulse 1s infinite; }
@@ -1641,8 +1423,8 @@ the examples provided here illustrate some CSS-only alternatives.
}
\endcode
- You supply a \bold{name} for the animation that corresponds to a
- \bold{keyframes} rule defined separately within your CSS:
+ You supply a \c{name} for the animation that corresponds to a
+ \c{keyframes} rule defined separately within your CSS:
\code
@-webkit-keyframes pulse {
@@ -1651,29 +1433,24 @@ the examples provided here illustrate some CSS-only alternatives.
}
\endcode
- Percentages mark new animation states within the course of the
- animation,
- and behave much like CSS selectors.
- In this case,
- the animation shifts between two separate states over
- the course of a second:
- opaque and slightly dimmed.
- With its \c{iteration-count} set to \c{infinite} rather than a set
- number,
- the animation only stops when the link is no longer selected.
+ Percentages mark new animation states within the course of the animation,
+ and behave much like CSS selectors. In this case, the animation shifts
+ between two separate states over the course of a second: opaque and slightly
+ dimmed. With its \c{iteration-count} set to \c{infinite} rather than a set
+ number, the animation only stops when the link is no longer selected.
The following example demonstrates a popular mobile design pattern
- implemented with CSS.
- Navigation to nested subheads appears to wipe to the right,
- while navigating upwards in the hierarchy appears to wipe to the left:
+ implemented with CSS. Navigation to nested subheads appears to wipe to the
+ right, while navigating upwards in the hierarchy appears to wipe to the
+ left:
\l{anim_slide1}{\inlineimage webkit-guide/scr_anim_slide1.png
}
\l{anim_slide_css}{(CSS)}
- It relies on keyframes rules such as the following,
- which define a simple start and end state:
+ It relies on keyframes rules such as the following, which define a simple
+ start and end state:
\code
@-webkit-keyframes slide_in {
@@ -1688,25 +1465,22 @@ the examples provided here illustrate some CSS-only alternatives.
}
\endcode
- Unlike a transition,
- the animation is triggered immediately when the page loads,
- but only if the target of navigation is an anchor whose ID
- is \bold{in} or \bold{out}.
- If you navigate to the page itself,
- no animation occurs.
+ Unlike a transition, the animation is triggered immediately when the page
+ loads, but only if the target of navigation is an anchor whose ID is
+ \c{in} or \c{out}. If you navigate to the page itself, no animation
+ occurs.
- The following example uses a keyframe animation to scroll through
- banner options at the top of the screen:
+ The following example uses a keyframe animation to scroll through banner
+ options at the top of the screen:
\l{css3_multicol}{\inlineimage webkit-guide/scr_css3_multicol.png
}
\l{css3_multicol_css}{(CSS)}
- The animation defines a set of rapid shifts alternating with long
- static phases.
- It modifies the left offset of an element that is five times the width
- of the window.
+ The animation defines a set of rapid shifts alternating with long static
+ phases. It modifies the left offset of an element that is five times the
+ width of the window.
\code
@-webkit-keyframes banner_scroll {
@@ -1724,14 +1498,18 @@ the examples provided here illustrate some CSS-only alternatives.
}
\endcode
- Finally,
- the demonstrations of \l{anim_demo-rotate}{rotate},
- \l{anim_demo-scale}{scale},
- and \l{anim_demo-skew}{skew} 2D transforms that opened this section
- all rely on separate keyframe animations to slide in and manipulate a
- series of panels.
- Separate \c{-webkit-animation-delay} settings for each panel control
- the sequence of each presentation.
+ Finally, the demonstrations of \l{anim_demo-rotate}{rotate},
+ \l{anim_demo-scale}{scale}, and \l{anim_demo-skew}{skew} 2D transforms that
+ opened this section all rely on separate keyframe animations to slide in and
+ manipulate a series of panels. Separate \c{-webkit-animation-delay} settings
+ for each panel control the sequence of each presentation.
*/
+/*!
+\example webkit/webkit-guide
+\title QtWebKit Guide Files
+This is a listing of \l{QtWebKit Guide} code.
+\note The links to the HTML5 code is found within the guide.
+*/
+
diff --git a/doc/src/webkit/guide/guidelinks.qdoc b/doc/src/webkit/guide/guidelinks.qdoc
index b1db999..379b182 100644
--- a/doc/src/webkit/guide/guidelinks.qdoc
+++ b/doc/src/webkit/guide/guidelinks.qdoc
@@ -43,12 +43,12 @@
*/
/*!
-\externalpage webkit-guide/css/storage.css
+\externalpage webkit-webkit-guide-css-storage-css.html
\title storage_css
*/
/*!
-\externalpage webkit-guide/js/storage.js
+\externalpage webkit-webkit-guide-js-storage-js.html
\title storage_js
*/
@@ -213,232 +213,248 @@
*/
/*!
-\externalpage webkit-guide/css/anim_accord.css
+\externalpage webkit-webkit-guide-css-anim-accord-css.html
\title anim_accord_css
*/
/*!
-\externalpage webkit-guide/js/anim_accord.js
+\externalpage wwebkit-webkit-guide-js-anim-accord-js.html
\title anim_accord_js
*/
/*!
-\externalpage webkit-guide/css/anim_demo-rotate.css
+\externalpage webkit-webkit-guide-css-anim-demo-rotate-css.html
\title anim_demo-rotate_css
*/
/*!
-\externalpage webkit-guide/css/anim_demo-scale.css
+\externalpage webkit-webkit-guide-css-anim-demo-scale-css.html
\title anim_demo-scale_css
*/
/*!
-\externalpage webkit-guide/css/anim_demo-skew.css
+\externalpage webkit-webkit-guide-css-anim-demo-skew-css.html
\title anim_demo-skew_css
*/
/*!
-\externalpage webkit-guide/css/anim_gallery.css
+\externalpage webkit-webkit-guide-css-anim-gallery-css.html
\title anim_gallery_css
*/
/*!
-\externalpage webkit-guide/js/anim_gallery.js
+\externalpage webkit-webkit-guide-js-anim-gallery-js.html
\title anim_gallery_js
*/
/*!
-\externalpage webkit-guide/css/anim_panel.css
+\externalpage webkit-webkit-guide-css-anim-panel-css.html
\title anim_panel_css
*/
/*!
-\externalpage webkit-guide/js/anim_panel.js
+\externalpage webkit-webkit-guide-js-anim-panel-js.html
\title anim_panel_js
*/
/*!
-\externalpage webkit-guide/css/anim_pulse.css
+\externalpage webkit-webkit-guide-css-anim-pulse-css.html
\title anim_pulse_css
*/
/*!
-\externalpage webkit-guide/css/anim_skew.css
+\externalpage webkit-webkit-guide-css-anim-skew-css.html
\title anim_skew_css
*/
/*!
-\externalpage webkit-guide/js/anim_skew.js
+\externalpage webkit-webkit-guide-js-anim-skew-js.html
\title anim_skew_js
*/
/*!
-\externalpage webkit-guide/css/anim_slide.css
+\externalpage webkit-webkit-guide-css-anim-slide-css.html
\title anim_slide_css
*/
/*!
-\externalpage webkit-guide/css/anim_tabbedSkew.css
+\externalpage webkit-webkit-guide-css-anim-tabbedskew-css.html
\title anim_tabbedSkew_css
*/
/*!
-\externalpage webkit-guide/css/form_tapper.css
+\externalpage webkit-webkit-guide-css-form-tapper-css.html
\title form_tapper_css
*/
/*!
-\externalpage webkit-guide/css/form_toggler.css
+\externalpage webkit-webkit-guide-css-form-toggler-css.html
\title form_toggler_css
*/
/*!
-\externalpage webkit-guide/css/layout_link-fmt.css
+\externalpage webkit-webkit-guide-css-layout-link-fmt-css.html
\title layout_link-fmt_css
*/
/*!
-\externalpage webkit-guide/css/layout_tbl-keyhole.css
+\externalpage webkit-webkit-guide-css-layout-tbl-keyhole-css.html
\title layout_tbl-keyhole_css
*/
/*!
-\externalpage webkit-guide/css/css3_backgrounds.css
+\externalpage webkit-webkit-guide-css-css3-backgrounds-css.html
\title css3_backgrounds_css
*/
/*!
-\externalpage webkit-guide/js/css3_backgrounds.js
+\externalpage webkit-webkit-guide-js-css3-backgrounds-js.html
\title css3_backgrounds_js
*/
/*!
-\externalpage webkit-guide/css/css3_border-img.css
+\externalpage webkit-webkit-guide-css-css3-border-img-css.html
\title css3_border-img_css
*/
/*!
-\externalpage webkit-guide/css/css3_grad-radial.css
+\externalpage webkit-webkit-guide-css-css3-grad-radial-css.html
\title css3_grad-radial_css
*/
/*!
-\externalpage webkit-guide/js/css3_grad-radial.js
+\externalpage webkit-webkit-guide-js-css3-grad-radial-js.html
\title css3_grad-radial_js
*/
/*!
-\externalpage webkit-guide/css/css3_gradientBack.css
+\externalpage webkit-webkit-guide-css-css3-gradientback-css.html
\title css3_gradientBack_css
*/
/*!
-\externalpage webkit-guide/css/css3_gradientBackStop.css
+\externalpage webkit-webkit-guide-css-css3-gradientbackstop-css.html
\title css3_gradientBackStop_css
*/
/*!
-\externalpage webkit-guide/css/css3_gradientButton.css
+\externalpage webkit-webkit-guide-css-css3-gradientbutton-css.html
\title css3_gradientButton_css
*/
/*!
-\externalpage webkit-guide/css/css3_mask-grad.css
+\externalpage webkit-guide/css/webkit-webkit-guide-css-css3-mask-grad-css.html
\title css3_mask-grad_css
*/
/*!
-\externalpage webkit-guide/js/css3_mask-grad.js
+\externalpage webkit-guide/js/webkit-webkit-guide-js-css3-mask-grad-js.html
\title css3_mask-grad_js
*/
/*!
-\externalpage webkit-guide/css/css3_mask-img.css
+\externalpage webkit-webkit-guide-css-css3-mask-img-css.html
\title css3_mask-img_css
*/
/*!
-\externalpage webkit-guide/css/css3_multicol.css
+\externalpage webkit-webkit-guide-css-css3-multicol-css.html
\title css3_multicol_css
*/
/*!
-\externalpage webkit-guide/css/css3_reflect.css
+\externalpage webkit-webkit-guide-css-css3-reflect-css.html
\title css3_reflect_css
*/
/*!
-\externalpage webkit-guide/css/css3_scroll.css
+\externalpage webkit-webkit-guide-css-css3-scroll-css.html
\title css3_scroll_css
*/
/*!
-\externalpage webkit-guide/css/css3_sel-nth.css
+\externalpage webkit-webkit-guide-css-css3-sel-nth-css.html
\title css3_sel-nth_css
*/
/*!
-\externalpage webkit-guide/css/css3_text-overflow.css
+\externalpage webkit-webkit-guide-css-css3-text-overflow-css.html
\title css3_text-overflow_css
*/
/*!
-\externalpage webkit-guide/js/css3_text-overflow.js
+\externalpage webkit-webkit-guide-js-css3-text-overflow-js.html
\title css3_text-overflow_js
*/
/*!
-\externalpage webkit-guide/css/css3_text-shadow.css
+\externalpage webkit-webkit-guide-css-css3-text-shadow-css.html
\title css3_text-shadow_css
*/
/*!
-\externalpage webkit-guide/css/css3_text-stroke.css
+\externalpage webkit-webkit-guide-css-css3-text-stroke-css.html
\title css3_text-stroke_css
*/
/*!
-\externalpage webkit-guide/css/mob_condjs.css
+\externalpage webkit-webkit-guide-css-mob-condjs-css.html
\title mob_condjs_css
*/
/*!
-\externalpage webkit-guide/js/mob_condjs.js
+\externalpage webkit-webkit-guide-js-mob-condjs-js.html
\title mob_condjs_js
*/
/*!
-\externalpage webkit-guide/css/mqlayout_desktop.css
+\externalpage webkit-webkit-guide-css-mqlayout-desktop-css.html
\title mqlayout_desktop_css
*/
/*!
-\externalpage webkit-guide/css/mqlayout_touch.css
+\externalpage webkit-webkit-guide-css-mqlayout-touch-css.html
\title mqlayout_touch_css
*/
/*!
-\externalpage webkit-guide/css/mqlayout_mobile.css
+\externalpage webkit-webkit-guide-css-mqlayout-mobile-css.html
\title mqlayout_mobile_css
*/
/*!
-\externalpage webkit-guide/css/mq_desktop.css
+\externalpage webkit-webkit-guide-css-mq-desktop-css.html
\title mq_desktop_css
*/
/*!
-\externalpage webkit-guide/css/mq_touch.css
+\externalpage webkit-webkit-guide-css-mq-touch-css.html
\title mq_touch_css
*/
/*!
-\externalpage webkit-guide/css/mq_mobile.css
+\externalpage webkit-webkit-guide-css-mq-mobile-css.html
\title mq_mobile_css
*/
/*!
-\externalpage webkit-guide/css/mob_mediaquery.css
+\externalpage webkit-webkit-guide-css-mob-mediaquery-css.html
\title mob_mediaquery_css
*/
+/*!
+\externalpage http://deviceatlas.com/
+\title DeviceAtlas
+*/
+
+/*!
+\externalpage http://wurfl.sourceforge.net/
+\title WURFL
+*/
+
+/*!
+\externalpage http://www.w3.org/TR/selectors-api/
+\title Selectors API
+
+*/
+
diff --git a/doc/src/webkit/webkit.qdoc b/doc/src/webkit/webkit.qdoc
index b0c9649..78d27fa 100644
--- a/doc/src/webkit/webkit.qdoc
+++ b/doc/src/webkit/webkit.qdoc
@@ -40,7 +40,7 @@
/*!
\page qtwebkit-guide.html
-\title Qt WebKit
+\title QtWebKit Guide
\section1 Introduction to QtWebKit