CSS Structural Pseudo-classes
Selector Description
:nth-child() Selects elements based on their position in relation to their siblings within the document tree.
:nth-last-child() Same as :nth-child() but counting backwards.
:first-child() Selects an element that is the first child of some other element.
:last-child() Selects an element that is the last child of some other element.
:empty Selects element that contain no other elements or text.
CSS Pseudo-elements
Selector Description
:before Adds generated content before the element
:after Adds genereated content after the element
Vendor-specific properties
Selector Description
Mozilla Vendor-specific (-moz) properties used by Firefox.
Micorsoft Vendor-specific (-ms) properties used by IE.
Webkit Vendor-specific (-webkit) properties used by Safari and Chrome.
Opera Vendor-specific (-o) properties used by Opera.
Selector Description
< b> A span of text stylistically offset from the surrounding text in bold type without conveying extra importance.
< i> A span of text that needs to be offset from the surrounding text in italics.
< strong> Indicates strong importance.
< em> Indicates the word(s) should be emphasized if spoken aloud.
< article> Article
< aside> Note, complementary, search
< footer> Contentinfo
< header> Banner
< nav> Navigation
< section> Region,contentinfo, main, search
New Type Attributes for < input> Elements
Selector Description
color Color picker
email Single-line text field for email address or list of addresses
number Single-line field or number stepper
range Slider control for numeric value (exact value unimportant)
search Search field
tel Single-line text field for phone number
url Single-line text field for URL
datetime Date and time picker with time zone set to UTC
date Date picker
month Date picker for year and month only
week Date picker for year and week number only
time Time picker
datetime-local Date and time picker for local time zone
Media Features for Setting Conditions in Media Queries
Feature Value Min/Max Description
width Length yes Width of display area
height Length yes Height of display area
device-width Length yes Width of rendering area
device-height Length yes Height of rendering area
orientation Portrait or Landscape no Orientation of device
aspect-ratio Ratio yes Ratio of width to height
device-aspect-ratio Ratio yes Ratio of device-width to device-height
color Integer yes Number of bits per color component (if not color, the value is 0)
color-index Integer yes Number of entries in output device's color lookup table
monochrome Integer yes Number of bits per pixel in the monochrome frame buffer (if not monochrome, the value is 0)
resolution Resolution yes Density of pixels of output device
scan Progressive or Interlace no Scanning process used by TV device
grid 0 or 1 no If set to 1, this specifies that the device is grid-based, such as a teletype terminal or a phone display with only one fixed font (all other devices are 0)
Properties Supported by the Viewport < meta> Tag
Property Accepted Values Description
width Integer or device-width This sets the width of the mobile viewport to the specified number of pixels or to the width of the device. When specifying an actual width the valid range is 200–10000.
height Integer or device-height On iOS, this sets the width of the viewport in landscape orientation to the specified number of pixels or to the height of the device. The valid range is 223–10000.
initial-scale Number with decimal fraction This sets the initial scaling factor of the display. The range is determined by the minimum-scale and maximum-scale properties.
minimum-scale Number with decimal fraction The valid range is any number above zero to 10.0. The default is 0.25.
maximum-scale Number with decimal fraction The valid range is any number above zero to 10.0. The default is 1.6.
user-scalable yes or no This determines whether the user can zoom the display in and out. The default is yes.

Section Description Header
CACHE MANIFEST There should be only a single space between CACHE and MANIFEST, both of which should be in uppercase.
Explicit section All files in this section are downloaded automatically, even if they're not required for the current page EXPLICIT
Online whitelist section Files in this section are never cached. The browser always tries to access the online version. NETWORK
Fallback section This is where you specify substitute files that the browser should use when the user is offline. FALLBACK
  • Each file must be listed on a separate line, except in the fallback section where the original and substitute files are listed on the same line with a space between them
  • Document0relative paths should be relative to the manifest
  • Paths relative to the site root (those that begin with a leading slash) or fully qualified URLS are also acceptable
  • The list should include not only web pages, but other assets, such as images, style sheets, and JavaScript files.
  • Blank lines are permitted.
  • Comments can be included, but they must be on a separate line beginning with a hash or pound sign (#) optionally preceded by spaces or tab characters.
# version 4 Keep the cache up-to-date
< html manifest="mysite.manifest"> Attach the manifest to a web page
type:text/cache-manifest Correct MIME
AddType text/cache-manifest .manifest Adding the manifest to the .htaccess file
jQuery Mobile data-role Values
Attribute Description
autoform Not documented.
button Converts an < a> tag into a button.
collapsible Creates a collapsible block of content consisting of a heading (h1-h6) and other HTML elements. Clicking the heading toggles the remaining elements open and closed.
collapsible-set Creates an accordion when applied to a < div> wrapped around a set of collapsible blocks.
content Designates the main content section of a page block.
controlgroup Groups of buttons, radio buttons, and check boxes.
fieldcontain Styles and aligns form elements. Wrap each form element in a

or < fieldset> and apply this data-role.
footer Designates the footer element of a page block.
header Designates the header element of a page block.
list-divider Converts an < li> element into a divider styled differently from the rest of the list.
listview Converts an ordered or unordered list into a series of buttons.
navbar Converts an unordered list into a navigation bar. Apply to a < div> wrapped around the list.
nojs If JavaScript is disabled, the browser displays only the content in elements with this data-role. JavaScript-enabled browsers hide these elements.
none When applied to an individual form element, thisprevents jQuery Mobile from styling it, leaving the browser to display it normally.
page Designates a page block.
slider In spite of its name, this does not create a slider widget. It converst a < select> element with two < options> into a flip toggle switch, such as an on/off switch. Slider widgets are automatically created by using an < input> element with the HTML5 range type.
jQuery Mobile Custom Data Attributes
Attribute Values Description
data-ajax true/false Determines whether Ajax is used to load content. The default is true.
data-back-btn-text Text Sets custom text for the Back button. The default is "Back".
data-backbtn true/false Set this attribute to false to prevent a Back button from being generated in a header.
data-collapsed true/false Determines whether a collapsible block is closed or open on initial display. Default is false. Set to true to hide content.
data-counttheme a-f Sets the theme for count bubbles in a List View widget.
data-direction reverse Reverses the direction of a page transition.
data-dividertheme a-f Sets the theme for elements with the data-rold of list-divider.
data-filter true/false Adds a search box above the List View widget when set to true.
data-fullscreen true/false When added to a page block and set to true, the page is displayed full screen. Headers and footers are toggled on and off by tapping the screen.
data-grid a-d Controls the number of cells in each row of a navigation bar.
data-groupingtheme a-f Sets the theme for dividers in a List View widget. Default is b.
data-icon See Data Attributes Extras Adds anicon to a button using either jQuery Mobile's default icons or custom icons. When specifying a custom icon, this generates a CSS class using the specified name prefixed by ui-icon-.
data-iconpos See Data Attributes Extras Specifies the position of an icon in relation to the button text.
data-id text Applies a common identity to elements in different page blocks.
data-inline true/false When set to true, displays buttons as inline elements only as wide as their content. Default is false, which displays buttons the full width of their containing element.
data-inset true/false When set to true, insets a List View widget from the margins. Default is false, which stretches the List View widget the full width of its containing element.
data-native-menu true/false When set to false, jQuery Mobile styling is applied to < select> menus.
data-placeholder true/false Set this attribute to true in an < option> element to prevent it from being selected in < select> menu. Works only if data-native-menu is set to false.
data-position fixed/inline/fullscreen Determines how headers and footers are displayed. Default is inline, which displays headers and footers in the normal flow of the document.
data-rel back/dialog Setting this attribute to back on a link mimics the browser's Back button. Setting it to dialog, opens the new page as a dialog box suspended aboce the existing page.
data-role See data-role Values Assigns the role of an element.
data-split-icon See data-icon in Extras Adds an icon to a split button in a List View widget.
data-split-theme a-f Sets the theme for a split button in a List View widget.
data-state collapsed/horizontal/vertical Originally in Alpha 1, but no longer appears to be used. Replaced by data-collapsed and data-type.
data-theme a-f Sets the theme for an element and its children
data-track-theme a-f Not documented
data-transition See Data Attributes Extras Determines how the transition to the next page block is hangled.
data-type horizontal/vertical Determines whether grouped buttons, radio buttons, and check boxes are displayed horizontally or vertically.
Data Attributes Extras


Icon Description
alert Alert
arrow-d Down Arrow
arrow-l Left Arrow
arrow-r Right Arrow
arrow-u Up Arrow
back Back Arrow
check Check Mark
delete Delete
forward Forward Arrow
gear Gear
grid Grid
Home Home
info Info Button
Minus Minus Button
plus Plus Button
refresh Refresh Button
search Search Icon
star Star Button


Value Description
bottom Position the icon below the button.
left Positions the icon to the left of the button text. This is the default.
notext Hides the button text on screen but adds it as a title attribute to provide context for screen readers.
top Positions the icon above the button text.
right Positions the icon to the right of the button text.


Transition Description
fade This fades in the new page.
flip This uses a 3D transition to flip the page horizontally like a revolving panel, by revealing the next page on the reverse as it passes beyond 90 degrees.
pop This displays the new page expanding from the center of the screen.
slide This is the default behavior. sliding the new page in from the right.
slidedown The new page slides down from the top of the screen.
slideup The new page slides up from the bottom of the screen.
Prebuilt Dreamweaver Widget
Attribute Description
Page Inserts a single page block. used to add extra pages to a file with multiple page blocks or to create a single page block in a empty document.
List View Inserts an ordered or unordered list, which can be styled multiple ways. Default, inset, text descriptions, text bubbles, asides, asides and text descriptions, split button.
Layout Grid Creates a layout grid with two to five columns of equal width.
Collapsible Block Creates a set of three collapsible blocks similar to an accordion widget.
Text Input Inserts a text input field wrapped in a container that displays a lable and aligns the widget with other form elements.
Password Input Inserts a password field.
Text Area Inserts a < textarea> element that expands and contracts automatically depending on the amount of user input.
Select Menu Inserts a < select> element.
Checkbox Inserts a group of check boxes. Assign a group name, number of boxes and to lay them horizontally or vertically.
Radio Button Inserts a group of radio buttons. Assign a group name, number of boxes and to lay them horizontally or vertically.
Button Insert one to ten buttons in a single operation.
Slider Inserts an < input> element with the range type, which is displayed as a horizontal slider. Default range is 0–100.
Flip Toggle Switch Creates a sliding switch with two options.
Selector Description
em Used to measure the vertical space needed for any given letter in a font. 1em equals 16px.
Image Sprite

Is multiple images combined into a single graphic and then selectively cropped in different contexts.

  • :before, Used to insert content before the selected element.
  • :after, Used to insert content after the selected element.
Getting Progressive
Selector Description
Graceful degradation Building websites so that they provide the optimal user experience in more modern browsers, then degrading gracefully to a more limited level of user experience in older browsers.
Progressive enhancement Start by establishing a baseline of functionality that works across all browsers, then layer on additional style and functionality for browser that include the features we want to target.
Feature detection Testin the users' browser to see if it can do what we want. Means we only ask browsers that pass the test to use a given feature.

rgba() function allows you to specify the red, green, and blue values of your color using the numbers from 0 to 255. The forth value refers to the alpha channel or transparency, and is a number from 0 to 1. 0 represents full transparency and 1 being fully opaque.

Common Mobile Device Screen Resolutions
Device Resolution
iPhone 4 326ppi
iPhone 3G/3GS 163ppi
iPad/iPad 2 132ppi
Android devices 72-350ppi (varies)
HTC Touch Pro 287ppi
Palm Pre 186ppi

SVG is a Scalable Vector Graphic. Allows the browser to resize the graphics, and this can mean less than desirable results.

Text overflow with Ellipsis

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 82%;


Semantic means "related to meaning in language or logic." It's derived from the Greek word for "significant."

jQuery Mobile Dialog Box

A dialog box is an ordinary jQuery Mobile page block but is displayed as an inset panel with rounded corners against a dark background, giving the impression of a modal window. No special styling is needed to create this effect.

Layout Grid widget

2-5 column grid use a-d

  • ui-grid-a
  • ui-grid-b
  • ui-grid-c
  • ui-grid-d

1-5 columns use a-e

  • ui-block-a
  • ui-block-b
  • ui-block-c
  • ui-block-d
  • ui-block-e

The ui-grid- is used to set which layout style is going to be used. Inside the div with ui-grid- the ui-block- is used, depending on the grid.

  • < div class="ui-grid-b">
  • < div class="ui-block-a">Block 1,1< /div>
  • < div class="ui-block-b">Block 1,2< /div>
  • < div class="ui-block-c">Block 1,3< /div>
  • < div class="ui-block-a">Block 2,1< /div>
  • < div class="ui-block-b">Block 2,2< /div>
  • < div class="ui-block-c">Block 2,3< /div>
  • < /div>