CSS3
UP TO SPEED ON
HTML5 &
REFRESH DC | M. JACKSON WILKINSON & JASON GARBER | JULY 16, 2009
</TITLE>
Sunday, July 19, 2009
THE INTRO
Sunday, July 19, 2009
M.JACKSONWILKINSONYour Humble Refresh DC Organizer
That’s
“Michael”
Sunday, July 19, 2009
Sunday, July 19, 2009
Sunday, July 19, 2009
JASONGARBERRefresh DC Organizer Emeritus
Sunday, July 19, 2009
Sunday, July 19, 2009
WEB STANDARDS
A Very Brief History of
Sunday, July 19, 2009
XHTML1
2001-2006
CSS2.1
Content Presentation
Sunday, July 19, 2009
WHATWG
2004-2007
Web Hypertext Application
Technology Working Group
Sunday, July 19, 2009
W3C
2007-PRESENT
World Wide Web
Consortium
Sunday, July 19, 2009
HTML5
2007-PRESENT
CSS3
Content Presentation
Sunday, July 19, 2009
HTML 5
The Content Layer:
Sunday, July 19, 2009
NEWELEMENTS
Sunday, July 19, 2009
structuralelements
BrowserSupport:structuralelements
Provides new semantic vocabulary
for parts of a page previously
serve...
figure
BrowserSupport:figure
Allows for associating captions
with embedded content, including
videos, audio, pullquotes, o...
audio&video
BrowserSupport:audio&video
Allows for associating captions
with embedded content, including
videos, audio, or ...
OTHERELEMENTS
METER Contained content is a measurement, like length.
PROGRESS
TIME
COMMAND
DATAGRID
OUTPUT
RUBY
Contains c...
NEWFORM
CONTROLS
Sunday, July 19, 2009
FORMCONTROLS
DATETIME Allows input of a date and a time.
DATETIME-LOCAL
NUMBER
RANGE
EMAIL
URL
COLOR
Allows input of a dat...
DOCSTRUCTURE
Sunday, July 19, 2009
HTML5doctype
BrowserSupport:HTML5doctype
The HTML 5 doctype is way
easier than any other doctype.
Evar.
Just type the part...
HTML5&XHTML5
BrowserSupport:HTML5doctype
HTML 5 supports the standard
HTML syntax (formerly SGML),
but also allows for an ...
Block-LevelLinks
BrowserSupport:Block-levelLinks
You can now wrap links around
block-level elements, rather than
having to...
NEWAPIs
Sunday, July 19, 2009
Drag&DropAPI
BrowserSupport:DragandDropAPI
Allows objects (images and links,
by default) to be dragged and then
dropped on...
getElementsByClassName
BrowserSupport:getElementsByClassName
Works just like getElementsById,
but selects an array of all ...
Cross-DocumentMessaging
BrowserSupport:Cross-DocMessaging
This allows non-hostile documents
on different domains to simply...
SimpleClientStorage
BrowserSupport:SimpleClientStorage
The sessionStorage DOM attribute
stores session data for a single
w...
StructuredClientStorage
BrowserSupport:StructuredClientStorage
HTML 5’s Web Storage module
provides an SQL server within t...
OfflineApplicationCaching
BrowserSupport:OfflineApplicationCaching
Allow the client to refer directly to
its cache, author...
Canvas
BrowserSupport:canvas
Provides an API for drawing
directly in the browser window,
using instructions that define
ve...
CSS 3
The Presentation Layer:
Sunday, July 19, 2009
COLOR
Sunday, July 19, 2009
opacity
BrowserSupport:opacity
Adjusts the opacity of the selected
element’s presentation on screen.
Takes values between ...
RGBAColor
BrowserSupport:RGBAcolor
Like RGB color definitions, but
allows a fourth field, defining the
alpha value of the ...
HSL/AColor
BrowserSupport:HSL/Acolor
HSL color definitions accept three
arguments: hue is a degree on a
color wheel (0-360...
BACKGROUNDS
Sunday, July 19, 2009
background-size
BrowserSupport:background-size
Defines the size at which the
browser should display the specified
backgrou...
background: url(body-top.png) top left no-repeat,
url(body-bottom.png) bottom left no-repeat,
url(body-middle.png) left re...
BORDERS
Sunday, July 19, 2009
border: 5px solid #000;
border-color: #000 transparent transparent #000;
border-color
BrowserSupport:border-color
Allows f...
border-image: url(button.png) 0 12 0 12 stretch
stretch;
border-image
BrowserSupport:border-image
Allows the border to be ...
border-radius: 10px;
border-radius
BrowserSupport:border-radius
Curves the corners of the border
using the radius given, o...
box-shadow: 10px 10px 10px #333;
box-shadow
BrowserSupport:box-shadow
Creates a drop shadow beneath the
selected element.
...
TEXT
Sunday, July 19, 2009
text-overflow: ellipsis;
text-overflow
BrowserSupport:text-overflow
If text overflows the available
space, the text-overfl...
text-shadow: 10px 10px 10px #333;
text-shadow
BrowserSupport:text-shadow
Creates a drop shadow beneath the
selected text.
...
column-width: 200px;
column-gap: 20px;
column-width&column-gap
BrowserSupport:column-width/column-gap
Breaks flowing text ...
@font-face {
font-family: Helvy;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf...
TRANSFORMATION
Sunday, July 19, 2009
rotate
BrowserSupport:rotate
Rotates the selected element at the
defined angle, defined in degrees.
The rotation doesn’t a...
scale
BrowserSupport:scale
Scales the element in question
based on the specified unit-less
numbers given for the X and Y
a...
skew
BrowserSupport:scale
Skews the element around the X
and Y axes by the specified angles,
in degrees. If it’s only one ...
translate
BrowserSupport:translate
Moves the object along each axis by
the length specified. The unit can
be anything acce...
3DTRANSFORMATIONS
PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer.
MATRIX3D
ROTATE3D
SCALE3D
TRANSLA...
BROWSERPREFIXES
Sunday, July 19, 2009
FIREFOX:
SAFARI:
OPERA:
IE:
-moz-box-shadow:
-webkit-box-shadow:
-o-box-shadow:
-ms-box-shadow:
Sunday, July 19, 2009
READY YET?
When is it Time to Use These?
Sunday, July 19, 2009
THEFUTURE
Sunday, July 19, 2009
IMPLEMENTATION
trumps
SPECIFICATION
Sunday, July 19, 2009
PROGRESSFUL
DEGRAHANCEMENT™
Sunday, July 19, 2009
BUSINESSAND
USERGOALS
In the end, be mindful of
Sunday, July 19, 2009
CRITICISM
A Healthy Dose of
Sunday, July 19, 2009
MORERESOURCES
HTML5Doctor http://html5doctor.com/
HTML5Spec
ALAArticle
BruceLawson
YourPresenters
http://dev.w3.org/html5/...
FIN
Sunday, July 19, 2009
SpeakerRate: spkr8.com/t/1250
Get in Touch!
Twitter: @whafro & @jgarber
Sunday, July 19, 2009
Upcoming SlideShare
Loading in...5
×

Html5/CSS3

169

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
169
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5/CSS3

  1. 1. CSS3 UP TO SPEED ON HTML5 & REFRESH DC | M. JACKSON WILKINSON & JASON GARBER | JULY 16, 2009 </TITLE> Sunday, July 19, 2009
  2. 2. THE INTRO Sunday, July 19, 2009
  3. 3. M.JACKSONWILKINSONYour Humble Refresh DC Organizer That’s “Michael” Sunday, July 19, 2009
  4. 4. Sunday, July 19, 2009
  5. 5. Sunday, July 19, 2009
  6. 6. JASONGARBERRefresh DC Organizer Emeritus Sunday, July 19, 2009
  7. 7. Sunday, July 19, 2009
  8. 8. WEB STANDARDS A Very Brief History of Sunday, July 19, 2009
  9. 9. XHTML1 2001-2006 CSS2.1 Content Presentation Sunday, July 19, 2009
  10. 10. WHATWG 2004-2007 Web Hypertext Application Technology Working Group Sunday, July 19, 2009
  11. 11. W3C 2007-PRESENT World Wide Web Consortium Sunday, July 19, 2009
  12. 12. HTML5 2007-PRESENT CSS3 Content Presentation Sunday, July 19, 2009
  13. 13. HTML 5 The Content Layer: Sunday, July 19, 2009
  14. 14. NEWELEMENTS Sunday, July 19, 2009
  15. 15. structuralelements BrowserSupport:structuralelements Provides new semantic vocabulary for parts of a page previously served by DIVs with ID and Class attributes. IE requires some workarounds using JavaScript to make these elements work. HEADER ARTICLE FOOTER ASIDE NAV SECTION Sunday, July 19, 2009
  16. 16. figure BrowserSupport:figure Allows for associating captions with embedded content, including videos, audio, pullquotes, or images. FIGURE LEGEND CONTENT (IMG, Q, VIDEO, ETC.) Sunday, July 19, 2009
  17. 17. audio&video BrowserSupport:audio&video Allows for associating captions with embedded content, including videos, audio, or images. Opera, Chrome, and Firefox all support the Ogg Theora video format natively, while Safari and Chrome support H.264. <video src="test.ogg" autoplay="autoplay" controls="controls"> Your browser does not support the video element. This could also include object and embed codes for legacy browsers. </video> Sunday, July 19, 2009
  18. 18. OTHERELEMENTS METER Contained content is a measurement, like length. PROGRESS TIME COMMAND DATAGRID OUTPUT RUBY Contains current process toward a goal, like a percentage. Time Represents something a command a user may execute. Represents data. Non-tabular or otherwise. Displays the output of a program or process. Allows input of rubi/ruby annotations for Asian languages. Sunday, July 19, 2009
  19. 19. NEWFORM CONTROLS Sunday, July 19, 2009
  20. 20. FORMCONTROLS DATETIME Allows input of a date and a time. DATETIME-LOCAL NUMBER RANGE EMAIL URL COLOR Allows input of a date and a time, in local time. Allows input of a number. Input is verified to be within a range. Confirms the input to be a valid email. Ensures input is a valid URL. Provides a mechanism for the user to input an RGB color. Sunday, July 19, 2009
  21. 21. DOCSTRUCTURE Sunday, July 19, 2009
  22. 22. HTML5doctype BrowserSupport:HTML5doctype The HTML 5 doctype is way easier than any other doctype. Evar. Just type the parts you remember, and you’ll probably be right. <!DOCTYPE html> Sunday, July 19, 2009
  23. 23. HTML5&XHTML5 BrowserSupport:HTML5doctype HTML 5 supports the standard HTML syntax (formerly SGML), but also allows for an XML-based variant XHTML5. Since it’s XML, XHTML should be served as application/xml or application/xhtml+xml. Warning: this means browsers freak if there’s an error. <html> vs. <html xmlns="http:// www.w3.org/1999/xhtml"> Sunday, July 19, 2009
  24. 24. Block-LevelLinks BrowserSupport:Block-levelLinks You can now wrap links around block-level elements, rather than having to create links around every element inside the block element. This is useful for lists of articles that include multiple elements, callouts with a single action, etc. <li> <a href="page.html"> <img src="pic.jpg"> <h3>Title</h3> <p>Text</p> </a> </li> Sunday, July 19, 2009
  25. 25. NEWAPIs Sunday, July 19, 2009
  26. 26. Drag&DropAPI BrowserSupport:DragandDropAPI 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. + Sunday, July 19, 2009
  27. 27. getElementsByClassName BrowserSupport: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. Sunday, July 19, 2009
  28. 28. Cross-DocumentMessaging BrowserSupport:Cross-DocMessaging This allows non-hostile documents on different domains to simply communicate with each other. The sending document can call postMessage() on the window object of the receiving document, while the receiving document listens for a ‘message’ event. MAIN DOCUMENT FOREIGN IFRAME Sunday, July 19, 2009
  29. 29. SimpleClientStorage BrowserSupport:SimpleClientStorage The sessionStorage DOM attribute stores session data for a single window, like cookies on crack. The localStorage DOM attribute allows each site to store megabytes of data across sessions to improve performance. Both methods store only strings. <input type="checkbox" onchange=" localStorage.insurance=checked " /> Sunday, July 19, 2009
  30. 30. StructuredClientStorage BrowserSupport:StructuredClientStorage HTML 5’s Web Storage module provides an SQL server within the client, accessible using Javascript. It uses fairly standard SQL queries for both reading and writing. There’s a lot to be explained about the built-in SQL server, so go check out the docs for more information. tx.executeSql( ‘SELECT * FROM Notes’, [], function(tx, rs) { for(var i = 0; i < rs.rows.length; i++) { renderNote(rs.rows[i]); } Sunday, July 19, 2009
  31. 31. OfflineApplicationCaching BrowserSupport:OfflineApplicationCaching Allow the client to refer directly to its cache, authoritatively, for certain resources, even if the browser is offline. Resources listed in the “network” section are never cached. <html manifest=”/cache.manifest”> CACHE MANIFEST index.html help.html style/default.css images/logo.png images/backgound.png NETWORK: server.cgi Sunday, July 19, 2009
  32. 32. Canvas BrowserSupport:canvas Provides an API for drawing directly in the browser window, using instructions that define vector-based shapes and lines. This allows SVG-like graphics to be created on the fly in the browser, with fallback content (like Flash?) provided to legacy browsers. <canvas id="canvas" width="150" height="150"> fallback content </canvas> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } Sunday, July 19, 2009
  33. 33. CSS 3 The Presentation Layer: Sunday, July 19, 2009
  34. 34. COLOR Sunday, July 19, 2009
  35. 35. opacity BrowserSupport:opacity Adjusts the opacity of the selected element’s presentation on screen. Takes values between 0.0 (fully transparent) and 1.0 (fully opaque) div { color: #f00; opacity: 1.0; } div { color: #f00; opacity: 0.5; } Sunday, July 19, 2009
  36. 36. RGBAColor BrowserSupport:RGBAcolor Like RGB color definitions, but allows a fourth field, defining the alpha value of the color being applied. Like opacity, the alpha value is between 0.0 (fully transparent) and 1.0 (fully opaque). div { color: rgb(0,255,0); } div { color: rgba(0,255,0,0.5); } Sunday, July 19, 2009
  37. 37. HSL/AColor BrowserSupport:HSL/Acolor HSL color definitions accept three arguments: hue is a degree on a color wheel (0-360), saturation is a percentage, and lightness is a percentage. HSLA is like HSL color, but allows a fourth field, defining the alpha value of the color being applied. See RGBA. div { color: hsl(240,50%,50%); } div { color: hsla(240,50%,50%,0.5); } Sunday, July 19, 2009
  38. 38. BACKGROUNDS Sunday, July 19, 2009
  39. 39. background-size BrowserSupport:background-size Defines the size at which the browser should display the specified background image. Accepts all normal size definitions as width followed by height. In shorthand, this appears after background-position values. div { background-size: 100px 65px; } div { background-size: 400px 65px; } Sunday, July 19, 2009
  40. 40. background: url(body-top.png) top left no-repeat, url(body-bottom.png) bottom left no-repeat, url(body-middle.png) left repeat-y; background-image BrowserSupport:background-image Allows for multiple images to be specified. The first image specified is layered closest to the top of the screen, and subsequent images are layered beneath. Sunday, July 19, 2009
  41. 41. BORDERS Sunday, July 19, 2009
  42. 42. border: 5px solid #000; border-color: #000 transparent transparent #000; border-color BrowserSupport:border-color Allows for multiple border colors 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. Sunday, July 19, 2009
  43. 43. border-image: url(button.png) 0 12 0 12 stretch stretch; border-image BrowserSupport:border-image Allows the border to be represented 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 element. This is difficult to represent completely, so go look it up. border-image: url(border.png) 27 27 27 27 round round; Sunday, July 19, 2009
  44. 44. border-radius: 10px; border-radius BrowserSupport:border-radius Curves the corners of the border using the radius given, often in pixels. This can be given to all corners, or only to individual corners as specified. Firefox refers to individual corners like “border-radius-topright” while Safari (correctly) refers to it as “border-top-right-radius”. border-top-right-radius: 10px; Sunday, July 19, 2009
  45. 45. box-shadow: 10px 10px 10px #333; box-shadow BrowserSupport:box-shadow Creates a drop shadow beneath the 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. Sunday, July 19, 2009
  46. 46. TEXT Sunday, July 19, 2009
  47. 47. text-overflow: ellipsis; text-overflow BrowserSupport:text-overflow If text overflows the available space, the text-overflow property defines what happens. The value “ellipsis” appends an ellipsis character at the overflow point. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacutus es… Sunday, July 19, 2009
  48. 48. text-shadow: 10px 10px 10px #333; text-shadow BrowserSupport:text-shadow Creates a drop shadow beneath the selected 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. This is sample text. Sunday, July 19, 2009
  49. 49. column-width: 200px; column-gap: 20px; column-width&column-gap BrowserSupport:column-width/column-gap Breaks flowing text into multiple columns, based on the width of the container. Column width defines the width of each column, and column-gap defines the gap between columns. Column-count can be specified in lieu of column-width. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacus, vel semper dolor odio in libero. Curabitur vitae sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a vulputate felis rhoncus eum ivolonortis quisque dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacus, vel semper dolor odio in libero. Curabitur vitae sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a vulputate felis rhoncus eum ivolonortis Sunday, July 19, 2009
  50. 50. @font-face { font-family: Helvy; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; } p.specialFont { font-family: Helvy, sans-serif; } @font-face BrowserSupport:column-width/column-gap Allows a font file to be associated with a font name for later use in font-family declarations. IE supports only .eot Embedded OpenType files, while the other browsers support any TTF and OTF font files. Sunday, July 19, 2009
  51. 51. TRANSFORMATION Sunday, July 19, 2009
  52. 52. rotate BrowserSupport:rotate Rotates the selected element at the defined angle, defined in degrees. The rotation doesn’t affect layout, and elements that are transformed are treated similarly to position:relative. transform: rotate(30deg); Sunday, July 19, 2009
  53. 53. scale BrowserSupport: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 is applied to both axes. transform: scale(0.5,2.0); Sunday, July 19, 2009
  54. 54. skew BrowserSupport:scale 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); Sunday, July 19, 2009
  55. 55. translate BrowserSupport: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, etc. transform: translate(30px, 0); Sunday, July 19, 2009
  56. 56. 3DTRANSFORMATIONS PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer. MATRIX3D ROTATE3D SCALE3D TRANSLATE3D Allows creation of a 3d transformation matrix. Rotate the matched element in three dimensions. Performs a three-dimensional scale operation. Allows the matched element to be moved along three axes. Sunday, July 19, 2009
  57. 57. BROWSERPREFIXES Sunday, July 19, 2009
  58. 58. FIREFOX: SAFARI: OPERA: IE: -moz-box-shadow: -webkit-box-shadow: -o-box-shadow: -ms-box-shadow: Sunday, July 19, 2009
  59. 59. READY YET? When is it Time to Use These? Sunday, July 19, 2009
  60. 60. THEFUTURE Sunday, July 19, 2009
  61. 61. IMPLEMENTATION trumps SPECIFICATION Sunday, July 19, 2009
  62. 62. PROGRESSFUL DEGRAHANCEMENT™ Sunday, July 19, 2009
  63. 63. BUSINESSAND USERGOALS In the end, be mindful of Sunday, July 19, 2009
  64. 64. CRITICISM A Healthy Dose of Sunday, July 19, 2009
  65. 65. MORERESOURCES HTML5Doctor http://html5doctor.com/ HTML5Spec ALAArticle BruceLawson YourPresenters http://dev.w3.org/html5/spec/Overview.html http://www.alistapart.com/articles/previewofhtml5 http://www.brucelawson.co.uk/category/ accessibility-web-standards/html5/ Feel free to follow up with Jackson & Jason Sunday, July 19, 2009
  66. 66. FIN Sunday, July 19, 2009
  67. 67. SpeakerRate: spkr8.com/t/1250 Get in Touch! Twitter: @whafro & @jgarber Sunday, July 19, 2009
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×