Microsoft TechDays - CSS3 Presentation

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

ﬁrst-child target an element when it is the ﬁrst child of a parent elementMonday, 23 May 2011

ﬁrst-childMonday, 23 May 2011

ﬁrst-child div#wrapper p:first-child { ! ! font-size: 1.5em; }Monday, 23 May 2011

ﬁrst-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

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: ﬁ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>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 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 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 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 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.ﬂickr.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.ﬂickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/Monday, 23 May 2011

http://lanyrd.com	89
http://us-w1.rockmelt.com	1
https://lanyrd.com	1

Microsoft TechDays - CSS3 Presentation

by Rachel Andrew

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 91

Statistics

Microsoft TechDays - CSS3 Presentation Presentation Transcript