microsoft techdays - css3 presentation
DESCRIPTION
An Introduction to CSS3 for Web DevelopersTRANSCRIPT
INTRODUCTION
TO - CSS 3 - FOR
WEB DEVELOPERS
Monday, 23 May 2011
RACHEL ANDREW
Monday, 23 May 2011
RACHEL ANDREW
@rachelandrew
rachelandrew.co.uk
edgeofmyseat.com
grabaperch.com
Monday, 23 May 2011
CSS 3
Monday, 23 May 2011
CSS3 IS
THE NEXT VERSION OF CSS
Monday, 23 May 2011
CSS3 IS
MODULAR
Monday, 23 May 2011
SOME CSS3 MODULES ARE MORE COMPLETE
THAN OTHERS
Monday, 23 May 2011
W3C MATURITY LEVELS
•Working Draft•Candidate Recommendation•Proposed Recommendation•W3C Recommendation
http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels
Monday, 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 CSS3
Monday, 23 May 2011
border-radius
Monday, 23 May 2011
.box {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}
border-radius
Monday, 23 May 2011
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS
Monday, 23 May 2011
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS
•W3C Approved way to add extensions
Monday, 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
Monday, 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 property
Monday, 23 May 2011
USING CSS3
Monday, 23 May 2011
USING CSS3Selectors
Monday, 23 May 2011
SELECTORS MODULE
W3C Proposed Recommendationhttp://www.w3.org/TR/css3-selectors/
Monday, 23 May 2011
THE PROBLEM WITH CSS2 SELECTORS
Not preciseLed to “classitis”
If we can’t access mark-up it is hard to target things
Monday, 23 May 2011
CSS3 SELECTORS
“Common sense” new selectorstarget elements more precisely without adding classes
Monday, 23 May 2011
first-child
target an element when it is the first child of a parent element
Monday, 23 May 2011
first-child
Monday, 23 May 2011
div#wrapper p:first-child {! ! font-size: 1.5em;}
first-child
Monday, 23 May 2011
first-child
Monday, 23 May 2011
last-child
target an element when it is the last child of a parent element
Monday, 23 May 2011
last-child
Monday, 23 May 2011
ul#navigation li:last-child {! ! border-bottom: none;}
last-child
Monday, 23 May 2011
last-child
Monday, 23 May 2011
nth-child
select multiple elements according to their position in the document tree
Monday, 23 May 2011
nth-child
Monday, 23 May 2011
tr:nth-child(odd) td {! ! background-color: #f0e9c5;}
nth-child
Monday, 23 May 2011
NTH-CHILD
Monday, 23 May 2011
tr:nth-child(2n+1) td {! ! background-color: #f0e9c5;}
nth-child
http://reference.sitepoint.com/css/understandingnthchildexpressions
Monday, 23 May 2011
div#wrapper h1 + p {! font-size: 1.5em;}
Adjacent Sibling
Monday, 23 May 2011
Adjacent Sibling
Monday, 23 May 2011
form input[type="text"] {
}!form input[type="submit"] { }
Attribute Selectors
Monday, 23 May 2011
ATTRIBUTE SELECTORS
Monday, 23 May 2011
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;}
Attribute Selectors
Monday, 23 May 2011
BROWSER
SUPPORT
Monday, 23 May 2011
BROWSER SUPPORT
Monday, 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 OWN
Monday, 23 May 2011
div#wrapper p:first-child,div#wrapper p.first {! ! font-size: 1.5em;}
jQuery: first-child
<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
ul#navigation li:last-child, ul#navigation li.last {! ! border-bottom: none;}
jQuery: last-child
<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
tr:nth-child(odd) td, td.odd {! background-color: #f0e9c5;}
jQuery: nth-child
<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.orghttp://selectivizr.com/
Monday, 23 May 2011
CAUTION REQUIRED
Remember some users may have an old browser AND no JavaScript
Monday, 23 May 2011
USING CSS3
Monday, 23 May 2011
USING CSS3Color
Monday, 23 May 2011
COLOR MODULE
Working Drafthttp://www.w3.org/TR/css3-color/
Monday, 23 May 2011
OPACITY
specify the opacity of an element
Monday, 23 May 2011
opacity
Monday, 23 May 2011
ul#gallery li {! ! opacity: 0.4;}
ul#gallery li:hover {! ! opacity: 1;}
opacity
Monday, 23 May 2011
RGBA
specify the opacity of a colour with ‘alpha’
Monday, 23 May 2011
RGBA
Monday, 23 May 2011
div#feature .caption { background-color: rgba(255,255,255,0.5);}
RGBA
Monday, 23 May 2011
24WAYS.ORG
Monday, 23 May 2011
BROWSER
SUPPORT?
Monday, 23 May 2011
USING CSS3
Monday, 23 May 2011
USING CSS3Fonts
Monday, 23 May 2011
FONTS MODULE
Working Drafthttp://www.w3.org/TR/css3-fonts/
Monday, 23 May 2011
@FONT-FACE
using a font other than one installed on your user’s computer
Monday, 23 May 2011
@font-face { !font-family: KaffeesatzBold; !src: url(YanoneKaffeesatz-Bold.ttf);}
h1 { ! font-family: KaffeesatzBold, sans-serif; ! font-weight: normal;}
@font-face
Monday, 23 May 2011
BROWSER COMPATIBILITY
We need to use different types of fonts for different browsers and operating systems
Monday, 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.com
Monday, 23 May 2011
FONT SQUIRREL
Monday, 23 May 2011
@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;}
FONT SQUIRREL
Monday, 23 May 2011
HOSTED FONT SERVICES
http://www.typekit.comhttp://fontdeck.com/
http://webfonts.fonts.com/
Monday, 23 May 2011
EDGEOFMYSEAT.COM
Monday, 23 May 2011
USING CSS3
Monday, 23 May 2011
USING CSS3Backgrounds &
Borders
Monday, 23 May 2011
BACKGROUNDS & BORDERS MODULE
W3C Candidate Recommendationhttp://www.w3.org/TR/css3-background/
Monday, 23 May 2011
MULTIPLE BACKGROUNDS
Apply more than one background image to an element
Monday, 23 May 2011
blockquote {! ! background: url(quote-left.gif) top left no-repeat,! ! url(quote-right.gif) bottom right no-repeat;! }
backgrounds
Monday, 23 May 2011
backgrounds
Monday, 23 May 2011
BORDER-RADIUS
Yes! CSS rounded corners
Monday, 23 May 2011
.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;! }
border-radius
Monday, 23 May 2011
border-radius
Monday, 23 May 2011
BOX-SHADOW
drop shadows without images
Monday, 23 May 2011
.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;! }
box-shadow
Monday, 23 May 2011
box-shadow
Monday, 23 May 2011
BROWSER
SUPPORT
Monday, 23 May 2011
USING CSS3
Monday, 23 May 2011
USING CSS3CSS Media Queries
Monday, 23 May 2011
MEDIA QUERIES
W3C Candidate Recommendationhttp://www.w3.org/TR/css3-mediaqueries/
Monday, 23 May 2011
MEDIA QUERIES
target browser characteristics, for example screen resolution, width and height
Monday, 23 May 2011
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;}
Media Queries
Monday, 23 May 2011
Media Queries
Monday, 23 May 2011
@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;! ! }! }
Media Queries
Monday, 23 May 2011
Media Queries
Monday, 23 May 2011
<link media="screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet" />
Media Queries
Monday, 23 May 2011
MEDIAQUERI.ES
Monday, 23 May 2011
RESPONSIVE DESIGN
http://www.alistapart.com/articles/responsive-web-design/
Monday, 23 May 2011
MOBILE
BROWSER
SUPPORT
Monday, 23 May 2011
YES!
Monday, 23 May 2011
YES!Unless you are targeting Windows Phone 7
Monday, 23 May 2011
PROVIDING CSS TO WINDOWS
PHONE 7
http://adactio.com/journal/4494/
Monday, 23 May 2011
DESKTOP
BROWSER
SUPPORT
Monday, 23 May 2011
MEDIA QUERY SUPPORT
Monday, 23 May 2011
MEDIA QUERIES POLYFILLS
http://code.google.com/p/css3-mediaqueries-js/https://github.com/scottjehl/Respond
Monday, 23 May 2011
THANK 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
THANK 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