Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

audio & video Allows for
associating captions <video src="test.ogg" autoplay="autoplay" controls="controls"> with embedded content, including Your browser does not support the video videos, audio, or images. element. This could also include object and embed codes for legacy browsers. </video> Opera, Chrome, and Firefox all support the Ogg Theora video format natively, while Safari and Chrome support H.264. audio & video Browser Support:Sunday, July 19, 2009

OTHER ELEMENTS METER Contained content
is a measurement, like length. PROGRESS Contains current process toward a goal, like a percentage. TIME Time COMMAND Represents something a command a user may execute. DATAGRID Represents data. Non-tabular or otherwise. OUTPUT Displays the output of a program or process. RUBY Allows input of rubi/ruby annotations for Asian languages.Sunday, July 19, 2009

FORM CONTROLS DATETIME Allows input
of a date and a time. DATETIME-LOCAL Allows input of a date and a time, in local time. NUMBER Allows input of a number. RANGE Input is verified to be within a range. EMAIL Confirms the input to be a valid email. URL Ensures input is a valid URL. COLOR Provides a mechanism for the user to input an RGB color.Sunday, July 19, 2009

HTML 5 doctype <!DOCTYPE html>
The HTML 5 doctype is way easier than any other doctype. Evar. Just type the parts you remember, and you’ll probably be right. HTML 5 doctype Browser Support:Sunday, July 19, 2009

Block-Level Links You can now
wrap links around <li> block-level elements, rather than having to create links around <a href="page.html"> every element inside the block <img src="pic.jpg"> element. <h3>Title</h3> <p>Text</p> This is useful for lists of articles that include multiple elements, </a> callouts with a single action, etc. </li> Block-level Links Browser Support:Sunday, July 19, 2009

Drag & Drop API Allows
objects (images and links, by default) to be dragged and then dropped onto a target. The target is enabled by canceling the ‘dragover’ (for sane browsers) or ‘dragenter’ (for IE) events for + the drop target. Then listen for a ‘drop’ event which contains a ‘dataTransfer’ object with info. Drag and Drop API Browser Support:Sunday, July 19, 2009

getElementsByClassName Works just like getElementsById,
but selects an array of all elements based on a shared class name. No more varied custom functions to make this happen, and performance is significantly better. getElementsByClassName Browser Support:Sunday, July 19, 2009

Cross-Document Messaging This allows non-hostile
documents on different domains to simply MAIN DOCUMENT communicate with each other. The sending document can call FOREIGN postMessage() on the window IFRAME object of the receiving document, while the receiving document listens for a ‘message’ event. Cross-Doc Messaging Browser Support:Sunday, July 19, 2009

background-image Allows for multiple images
to be background: url(body-top.png) top left no-repeat, url(body-bottom.png) bottom left no-repeat, specified. The first image specified url(body-middle.png) left repeat-y; is layered closest to the top of the screen, and subsequent images are layered beneath. background-image Browser Support:Sunday, July 19, 2009

border-color Allows for multiple border
colors border: 5px solid #000; border-color: #000 transparent transparent #000; to be specified, one pixel at a time. The last specified color is repeated if necessary. This cannot be used in the border shorthand syntax. border-color Browser Support:Sunday, July 19, 2009

border-image Allows the border to
be represented border-image: url(button.png) 0 12 0 12 stretch stretch; by an image, by defining which parts of the image should be used for the edges, and which should be repeated in the main part of the border-image: url(border.png) 27 27 27 27 round element. round; This is difficult to represent completely, so go look it up. border-image Browser Support:Sunday, July 19, 2009

border-radius Curves the corners of
the border border-radius: 10px; using the radius given, often in pixels. This can be given to all corners, or only to individual corners as specified. border-top-right-radius: 10px; Firefox refers to individual corners like “border-radius-topright” while Safari (correctly) refers to it as “border-top-right-radius”. border-radius Browser Support:Sunday, July 19, 2009

box-shadow Creates a drop shadow
beneath the box-shadow: 10px 10px 10px #333; selected element. The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. box-shadow Browser Support:Sunday, July 19, 2009

text-shadow Creates a drop shadow
beneath the text-shadow: 10px 10px 10px #333; selected text. This is sample text. The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. Multiple shadow definitions may be separated using commas. text-shadow Browser Support:Sunday, July 19, 2009

rotate Rotates the selected element
at the defined angle, defined in degrees. The rotation doesn’t affect layout, transform: rotate(30deg); and elements that are transformed are treated similarly to position:relative. rotate Browser Support:Sunday, July 19, 2009

scale Scales the element in
question based on the specified unit-less numbers given for the X and Y axes. If only one number is given, it transform: scale(0.5,2.0); is applied to both axes. scale Browser Support:Sunday, July 19, 2009

skew Skews the element around
the X and Y axes by the specified angles, in degrees. If it’s only one number, the Y axis is assumed to be zero. transform: skew(-30deg); scale Browser Support:Sunday, July 19, 2009

translate Moves the object along
each axis by the length specified. The unit can be anything accepted as a length in CSS, such as px, em, percentages, transform: translate(30px, 0); etc. translate Browser Support:Sunday, July 19, 2009

3D TRANSFORMATIONS PERSPECTIVE The distance,
in pixels, of the z=0 plane from the viewer. MATRIX3D Allows creation of a 3d transformation matrix. ROTATE3D Rotate the matched element in three dimensions. SCALE3D Performs a three-dimensional scale operation. TRANSLATE3D Allows the matched element to be moved along three axes.Sunday, July 19, 2009