Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Core CSS3

5,658 views

Published on

Core CSS3 Session from Web Directions @media 2010.

Published in: Technology

Core CSS3

  1. 1. hello.
  2. 2. Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com
  3. 3. CSS 3
  4. 4. CSS3 is the next version of CSS
  5. 5. CSS3 is Modular
  6. 6. Some CSS3 modules are more complete than others
  7. 7. W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C Recommendation http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels
  8. 8. CSS3 is supported by browsers Some browsers and some (parts of) modules.
  9. 9. Vendor-speci c extensions Implementing early stage CSS3
  10. 10. border-radius
  11. 11. border-radius .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
  12. 12. In defence of vendor- speci c extensions
  13. 13. Using CSS3
  14. 14. Selectors module W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/
  15. 15. The problem with CSS2 selectors Not precise Led to “classitis” If we can’t access mark-up it is hard to target things
  16. 16. CSS3 Selectors “Common sense” new selectors target elements more precisely without adding classes
  17. 17. rst-child target an element when it is the first child of a parent element
  18. 18. rst-child
  19. 19. rst-child div#wrapper p:first-child { font-size: 1.5em; }
  20. 20. rst-child
  21. 21. last-child target an element when it is the last child of a parent element
  22. 22. last-child
  23. 23. last-child ul#navigation li:last-child { border-bottom: none; }
  24. 24. last-child
  25. 25. nth-child select multiple elements according to their position in the document tree
  26. 26. nth-child
  27. 27. nth-child tr:nth-child(odd) td { background-color: #f0e9c5; }
  28. 28. nth-child
  29. 29. nth-child tr:nth-child(2n+1) td { background-color: #f0e9c5; } http://reference.sitepoint.com/css/understandingnthchildexpressions
  30. 30. Adjacent Sibling div#wrapper h1 + p { font-size: 1.5em; }
  31. 31. Adjacent Sibling
  32. 32. Attribute Selectors form input[type="text"] { } form input[type="submit"] { }
  33. 33. Attribute Selectors
  34. 34. Attribute Selectors label[for="fContact"] { float: none; width: auto; } a[href ^="mailto:"] { padding-right: 20px; background-image:url(email.png); background-repeat: no-repeat; background-position: right center; }
  35. 35. Browser Support
  36. 36. Browser Support
  37. 37. Does it matter?
  38. 38. Yes, it matters.
  39. 39. JavaScript Plug the holes in browser support using JavaScript.
  40. 40. jQuery: rst-child div#wrapper p:first-child, div#wrapper p.first { font-size: 1.5em; } <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ $("div#wrapper p:first-child").addClass("first"); }); </script>
  41. 41. jQuery: last-child ul#navigation li:last-child, ul#navigation li.last { border-bottom: none; } <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ $("ul#navigation li:last-child").addClass("last"); }); </script>
  42. 42. jQuery: nth-child tr:nth-child(odd) td, td.odd { background-color: #f0e9c5; } <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ $("tr:nth-child(odd) td").addClass("odd"); }); </script>
  43. 43. Scripts that “ x IE” http://www.keithclark.co.uk/labs/ie-css3/ http://ecsstender.org
  44. 44. Color module Working Draft http://www.w3.org/TR/css3-color/
  45. 45. opacity specify the opacity of an element
  46. 46. opacity
  47. 47. opacity ul#gallery li { opacity: 0.4; } ul#gallery li:hover { opacity: 1; }
  48. 48. RGBA specify the opacity of a colour with ‘alpha’
  49. 49. RGBA
  50. 50. RGBA div#feature .caption { background-color: rgba(255,255,255,0.5); }
  51. 51. 24ways.org
  52. 52. Browser Support?
  53. 53. Fonts module Working Draft http://www.w3.org/TR/css3-fonts/
  54. 54. @font-face using a font other than one installed on your user’s computer
  55. 55. @font-face @font-face { ont-family: KaffeesatzBold; f rc: url(YanoneKaffeesatz- s Bold.ttf); } h1 { font-family: KaffeesatzBold, sans- serif; font-weight: normal; }
  56. 56. Fonts with Font Squirrel http://www.fontsquirrel.com
  57. 57. Font Squirrel
  58. 58. Font Squirrel @font-face { font-family: 'YanoneKaffeesatzBold'; src: url('yanonekaffeesatz-bold-webfont.eot'); src: local('☺'), url('yanonekaffeesatz-bold- webfont.woff') format('woff'), url('yanonekaffeesatz- bold-webfont.ttf') format('truetype'), url('yanonekaffeesatz-bold-webfont.svg#webfontUcEp3Pt5') format('svg'); font-weight: normal; font-style: normal; }
  59. 59. Hosted font services http://www.typekit.com http://fontdeck.com/
  60. 60. rachelandrew.co.uk
  61. 61. Backgrounds & Borders module W3C Candidate Recommendation http://www.w3.org/TR/css3-background/
  62. 62. multiple backgrounds Apply more than one background image to an element
  63. 63. backgrounds blockquote { background: url(quote- left.gif) top left no-repeat, url(quote-right.gif) bottom right no-repeat; }
  64. 64. backgrounds
  65. 65. border-radius Yes! CSS rounded corners
  66. 66. border-radius .box1 { background-color: #a18c83; border: 3px solid #6d4d6b; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; color: #fff; padding: 10px; margin: 0 0 20px 0; } .box2 { border: 5px solid #6d4d6b; -moz-border-radius-topleft: 50px; -webkit-border-top-left-radius: 50px; border-top-left-radius: 50px; padding: 10px 5px 5px 20px; }
  67. 67. border-radius
  68. 68. Browser Support
  69. 69. Media Queries W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/
  70. 70. Media Queries target browser characteristics, for example screen resolution, width and height
  71. 71. Media Queries div#wrapper { width: 780px; margin-left: auto; margin-right: auto; } div#header { background-image: url(media-queries-browser.jpg); height: 349px; position: relative; } #content { float: left; width: 540px; } #navigation { float:right; width: 200px; }
  72. 72. Media Queries
  73. 73. Media Queries @media screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background-image: url(media-queries-phone.jpg); height: 93px; position: relative; } div#header h1 { font-size: 140%; } #content { float: none; width: 100%; } #navigation { float:none; width: auto; } }
  74. 74. Media Queries
  75. 75. Media Queries <link media="screen and (max- device-width: 480px)" href="small.css" type= "text/ css" rel="stylesheet" />
  76. 76. 2010.dconstruct.org
  77. 77. 2010.dconstruct.org
  78. 78. Thank you. Slides and resources: http://wp.me/PorPc-9d Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/

×