Microsoft TechDays - CSS3 Presentation
Upcoming SlideShare
Loading in...5
×
 

Microsoft TechDays - CSS3 Presentation

on

  • 2,981 views

An Introduction to CSS3 for Web Developers

An Introduction to CSS3 for Web Developers

Statistics

Views

Total Views
2,981
Views on SlideShare
2,886
Embed Views
95

Actions

Likes
5
Downloads
154
Comments
0

4 Embeds 95

http://lanyrd.com 91
https://twitter.com 2
http://us-w1.rockmelt.com 1
https://lanyrd.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Microsoft TechDays - CSS3 Presentation Microsoft TechDays - CSS3 Presentation Presentation Transcript

  • INTROD UCTION TO - CSS 3 -FOR WEB DEVELOPERSMonday, 23 May 2011
  • RACHEL ANDREWMonday, 23 May 2011
  • RACHEL ANDREW @rachelandrew rachelandrew.co.uk edg eofmyseat.com grabaperch.comMonday, 23 May 2011
  • C SS 3Monday, 23 May 2011
  • CSS3 IS THE NEXT VERSION OF CSSMonday, 23 May 2011
  • CSS3 IS MODULARMonday, 23 May 2011
  • SOME CSS3 MODULES ARE MORE COMPLETE THAN OTHERSMonday, 23 May 2011
  • W3C MATURITY LEVELS •Working Draft •Candidate Recommendation •Proposed Recommendation •W3C Recommendation http://www.w3.org/2005/10/Process-20051014/tr#maturity-levelsMonday, 23 May 2011
  • CSS3 IS SUPPORTED BY BROWSERS Some browsers and some (parts of) modules.Monday, 23 May 2011
  • VENDOR-SPECIFIC EXTENSIONS Implementing early stage CSS3Monday, 23 May 2011
  • border-radiusMonday, 23 May 2011
  • border-radius .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }Monday, 23 May 2011
  • IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONSMonday, 23 May 2011
  • IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensionsMonday, 23 May 2011
  • IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensions •If a module changes browser doesn’t need to change and break older codeMonday, 23 May 2011
  • IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensions •If a module changes browser doesn’t need to change and break older code •Use with care - and always include the real propertyMonday, 23 May 2011
  • USING CSS3Monday, 23 May 2011
  • USING CSS3 SelectorsMonday, 23 May 2011
  • SELECTORS MODULE W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/Monday, 23 May 2011
  • THE PROBLEM WITH CSS2 SELECTORS Not precise Led to “classitis” If we can’t access mark-up it is hard to target thingsMonday, 23 May 2011
  • CSS3 SELECTORS “Common sense” new selectors target elements more precisely without adding classesMonday, 23 May 2011
  • first-child target an element when it is the first child of a parent elementMonday, 23 May 2011
  • first-childMonday, 23 May 2011
  • first-child div#wrapper p:first-child { ! ! font-size: 1.5em; }Monday, 23 May 2011
  • first-childMonday, 23 May 2011
  • last-child target an element when it is the last child of a parent elementMonday, 23 May 2011
  • last-childMonday, 23 May 2011
  • last-child ul#navigation li:last-child { ! ! border-bottom: none; }Monday, 23 May 2011
  • last-childMonday, 23 May 2011
  • nth-child select multiple elements according to their position in the document treeMonday, 23 May 2011
  • nth-childMonday, 23 May 2011
  • nth-child tr:nth-child(odd) td { ! ! background-color: #f0e9c5; }Monday, 23 May 2011
  • NTH-CHILDMonday, 23 May 2011
  • nth-child tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } http://reference.sitepoint.com/css/understandingnthchildexpressionsMonday, 23 May 2011
  • Adjacent Sibling div#wrapper h1 + p { ! font-size: 1.5em; }Monday, 23 May 2011
  • Adjacent SiblingMonday, 23 May 2011
  • Attribute Selectors form input[type="text"] { } ! form input[type="submit"] { }Monday, 23 May 2011
  • ATTRIBUTE SELECTORSMonday, 23 May 2011
  • 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; }Monday, 23 May 2011
  • BROWSER SUPPORTMonday, 23 May 2011
  • BROWSER SUPPORTMonday, 23 May 2011
  • DOES IT MATTER?Monday, 23 May 2011
  • THAT DEPENDS...Monday, 23 May 2011
  • YES, IT MATTERS.Monday, 23 May 2011
  • JAVASCRIPT Plug the holes in browser support using JavaScript.Monday, 23 May 2011
  • ROLL YOUR OWNMonday, 23 May 2011
  • jQuery: first-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>Monday, 23 May 2011
  • 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>Monday, 23 May 2011
  • 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>Monday, 23 May 2011
  • USE A “POLYFILL” “A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.” Remy Sharp - http://remysharp.com/2010/10/08/what-is-a-polyfill/Monday, 23 May 2011
  • CSS3 POLYFILLS http://ecsstender.org http://selectivizr.com/Monday, 23 May 2011
  • CAUTION REQUIRED Remember some users may have an old browser AND no JavaScriptMonday, 23 May 2011
  • USING CSS3Monday, 23 May 2011
  • USING CSS3 ColorMonday, 23 May 2011
  • COLOR MODULE Working Draft http://www.w3.org/TR/css3-color/Monday, 23 May 2011
  • OPACITY specify the opacity of an elementMonday, 23 May 2011
  • opacityMonday, 23 May 2011
  • opacity ul#gallery li { ! ! opacity: 0.4; } ul#gallery li:hover { ! ! opacity: 1; }Monday, 23 May 2011
  • RGBA specify the opacity of a colour with ‘alpha’Monday, 23 May 2011
  • RGBAMonday, 23 May 2011
  • RGBA div#feature .caption { background-color: rgba(255,255,255,0.5); }Monday, 23 May 2011
  • 24WAYS.ORGMonday, 23 May 2011
  • BROWSER SUPPORT?Monday, 23 May 2011
  • USING CSS3Monday, 23 May 2011
  • USING CSS3 FontsMonday, 23 May 2011
  • FONTS MODULE Working Draft http://www.w3.org/TR/css3-fonts/Monday, 23 May 2011
  • @FONT-FACE using a font other than one installed on your user’s computerMonday, 23 May 2011
  • @font-face @font-face { ! font-family: KaffeesatzBold; ! src: url(YanoneKaffeesatz-Bold.ttf); } h1 { ! font-family: KaffeesatzBold, sans-serif; ! font-weight: normal; }Monday, 23 May 2011
  • BROWSER COMPATIBILITY We need to use different types of fonts for different browsers and operating systemsMonday, 23 May 2011
  • LICENSING ISSUES Most commercial fonts have a license which prohibits them being uploaded to a webserver.Monday, 23 May 2011
  • FONTS WITH FONT SQUIRREL http://www.fontsquirrel.comMonday, 23 May 2011
  • FONT SQUIRRELMonday, 23 May 2011
  • 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; }Monday, 23 May 2011
  • HOSTED FONT SERVICES http://www.typekit.com http://fontdeck.com/ http://webfonts.fonts.com/Monday, 23 May 2011
  • EDGEOFMYSEAT.COMMonday, 23 May 2011
  • USING CSS3Monday, 23 May 2011
  • USING CSS3 Backgrounds & BordersMonday, 23 May 2011
  • BACKGROUNDS & BORDERS MODULE W3C Candidate Recommendation http://www.w3.org/TR/css3-background/Monday, 23 May 2011
  • MULTIPLE BACKGROUNDS Apply more than one background image to an elementMonday, 23 May 2011
  • backgrounds blockquote { ! ! background: url(quote-left.gif) top left no-repeat, ! ! url(quote-right.gif) bottom right no- repeat; ! }Monday, 23 May 2011
  • backgroundsMonday, 23 May 2011
  • BORDER-RADIUS Yes! CSS rounded cornersMonday, 23 May 2011
  • 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; ! }Monday, 23 May 2011
  • border-radiusMonday, 23 May 2011
  • BOX-SHADOW drop shadows without imagesMonday, 23 May 2011
  • box-shadow .box1 { ! ! background-color: #333; ! ! -moz-border-radius: 15px; ! ! -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 10px 10px 5px #666; -webkit-box-shadow: 10px 10px 5px #666; box-shadow: 10px 10px 5px #666; ! ! color: #fff; ! ! padding: 10px; ! ! margin: 0 0 20px 0; ! }Monday, 23 May 2011
  • box-shadowMonday, 23 May 2011
  • BROWSER SUPPORTMonday, 23 May 2011
  • CSS3 POLYFILLS http://css3pie.com/Monday, 23 May 2011
  • USING CSS3Monday, 23 May 2011
  • USING CSS3 CSS Media QueriesMonday, 23 May 2011
  • MEDIA QUERIES W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/Monday, 23 May 2011
  • MEDIA QUERIES target browser characteristics, for example screen resolution, width and heightMonday, 23 May 2011
  • 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; }Monday, 23 May 2011
  • Media QueriesMonday, 23 May 2011
  • 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; ! ! } ! }Monday, 23 May 2011
  • Media QueriesMonday, 23 May 2011
  • Media Queries <link media="screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet" />Monday, 23 May 2011
  • MEDIAQUERI.ESMonday, 23 May 2011
  • RESPONSIVE DESIGN http://www.alistapart.com/articles/responsive-web-design/Monday, 23 May 2011
  • MOBILE BROWSER SUPPORTMonday, 23 May 2011
  • YES!Monday, 23 May 2011
  • YES! Unless you are targeting Windows Phone 7Monday, 23 May 2011
  • PROVIDING CSS TO WINDOWS PHONE 7 http://adactio.com/journal/4494/Monday, 23 May 2011
  • DESKTOP BROWSER SUPPORTMonday, 23 May 2011
  • MEDIA QUERY SUPPORTMonday, 23 May 2011
  • MEDIA QUERIES POLYFILLS http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/RespondMonday, 23 May 2011
  • THAN K YOU! Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/Monday, 23 May 2011
  • THAN K YOU! @ rachelandrew http://wp.me/PorPc-cf Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/Monday, 23 May 2011