An introduction to CSS3 for web developers

Slide 1

Slide 1 text

INTRODUCTION TO - CSS 3 - FOR WEB DEVELOPERS

Slide 2

Slide 2 text

RACHEL ANDREW

Slide 3

Slide 3 text

RACHEL ANDREW @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com

Slide 4

Slide 4 text

CSS 3

Slide 5

Slide 5 text

CSS3 IS THE NEXT VERSION OF CSS

Slide 6

Slide 6 text

CSS3 IS MODULAR

Slide 7

Slide 7 text

SOME CSS3 MODULES ARE MORE COMPLETE THAN OTHERS

Slide 8

Slide 8 text

W3C MATURITY LEVELS •Working Draft •Candidate Recommendation •Proposed Recommendation •W3C Recommendation http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels

Slide 9

Slide 9 text

CSS3 IS SUPPORTED BY BROWSERS Some browsers and some (parts of) modules.

Slide 10

Slide 10 text

VENDOR-SPECIFIC EXTENSIONS Implementing early stage CSS3

Slide 11

Slide 11 text

border-radius

Slide 12

Slide 12 text

.box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } border-radius

Slide 13

Slide 13 text

IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS

Slide 14

Slide 14 text

IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensions

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

USING CSS3

Slide 18

Slide 18 text

USING CSS3 Selectors

Slide 19

Slide 19 text

SELECTORS MODULE W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/

Slide 20

Slide 20 text

THE PROBLEM WITH CSS2 SELECTORS Not precise Led to “classitis” If we can’t access mark-up it is hard to target things

Slide 21

Slide 21 text

CSS3 SELECTORS “Common sense” new selectors target elements more precisely without adding classes

Slide 22

Slide 22 text

ﬁrst-child target an element when it is the ﬁrst child of a parent element

Slide 23

Slide 23 text

ﬁrst-child

Slide 24

Slide 24 text

div#wrapper p:first-child { ! ! font-size: 1.5em; } ﬁrst-child

Slide 25

Slide 25 text

ﬁrst-child

Slide 26

Slide 26 text

last-child target an element when it is the last child of a parent element

Slide 27

Slide 27 text

last-child

Slide 28

Slide 28 text

ul#navigation li:last-child { ! ! border-bottom: none; } last-child

Slide 29

Slide 29 text

last-child

Slide 30

Slide 30 text

nth-child select multiple elements according to their position in the document tree

Slide 31

Slide 31 text

nth-child

Slide 32

Slide 32 text

tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } nth-child

Slide 33

Slide 33 text

nth-child

Slide 34

Slide 34 text

tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } nth-child http://reference.sitepoint.com/css/understandingnthchildexpressions

Slide 35

Slide 35 text

div#wrapper h1 + p { ! font-size: 1.5em; } Adjacent Sibling

Slide 36

Slide 36 text

Adjacent Sibling

Slide 37

Slide 37 text

form input[type="text"] { } ! form input[type="submit"] { } Attribute Selectors

Slide 38

Slide 38 text

Attribute Selectors

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

BROWSER SUPPORT

Slide 41

Slide 41 text

BROWSER SUPPORT

Slide 42

Slide 42 text

DOES IT MATTER?

Slide 43

Slide 43 text

THAT DEPENDS...

Slide 44

Slide 44 text

YES, IT MATTERS.

Slide 45

Slide 45 text

JAVASCRIPT Plug the holes in browser support using JavaScript.

Slide 46

Slide 46 text

ROLL YOUR OWN

Slide 47

Slide 47 text

div#wrapper p:first-child, div#wrapper p.first { ! ! font-size: 1.5em; } jQuery: ﬁrst-child $(document).ready(function(){ ! $("div#wrapper p:first-child").addClass("first"); });

Slide 48

Slide 48 text

ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; } jQuery: last-child $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); });

Slide 49

Slide 49 text

tr:nth-child(odd) td, td.odd { ! background-color: #f0e9c5; } jQuery: nth-child $(document).ready(function(){ ! $("tr:nth-child(odd) td").addClass("odd"); });

Slide 50

Slide 50 text

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/

Slide 51

Slide 51 text

CSS3 POLYFILLS http://ecsstender.org http://selectivizr.com/

Slide 52

Slide 52 text

CAUTION REQUIRED Remember some users may have an old browser AND no JavaScript

Slide 53

Slide 53 text

USING CSS3

Slide 54

Slide 54 text

USING CSS3 Color

Slide 55

Slide 55 text

COLOR MODULE Working Draft http://www.w3.org/TR/css3-color/

Slide 56

Slide 56 text

OPACITY specify the opacity of an element

Slide 57

Slide 57 text

opacity

Slide 58

Slide 58 text

ul#gallery li { ! ! opacity: 0.4; } ul#gallery li:hover { ! ! opacity: 1; } opacity

Slide 59

Slide 59 text

RGBA specify the opacity of a colour with ‘alpha’

Slide 60

Slide 60 text

RGBA

Slide 61

Slide 61 text

div#feature .caption { background-color: rgba(255,255,255,0.5); } RGBA

Slide 62

Slide 62 text

24WAYS.ORG

Slide 63

Slide 63 text

BROWSER SUPPORT?

Slide 64

Slide 64 text

USING CSS3

Slide 65

Slide 65 text

USING CSS3 Fonts

Slide 66

Slide 66 text

FONTS MODULE Working Draft http://www.w3.org/TR/css3-fonts/

Slide 67

Slide 67 text

@FONT-FACE using a font other than one installed on your user’s computer

Slide 68

Slide 68 text

@font-face { ! font-family: KaffeesatzBold; ! src: url(YanoneKaffeesatz-Bold.ttf); } h1 { ! font-family: KaffeesatzBold, sans-serif; ! font-weight: normal; } @font-face

Slide 69

Slide 69 text

BROWSER COMPATIBILITY We need to use different types of fonts for different browsers and operating systems

Slide 70

Slide 70 text

LICENSING ISSUES Most commercial fonts have a license which prohibits them being uploaded to a webserver.

Slide 71

Slide 71 text

FONTS WITH FONT SQUIRREL http://www.fontsquirrel.com

Slide 72

Slide 72 text

FONT SQUIRREL

Slide 73

Slide 73 text

@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

Slide 74

Slide 74 text

HOSTED FONT SERVICES http://www.typekit.com http://fontdeck.com/ http://webfonts.fonts.com/

Slide 75

Slide 75 text

EDGEOFMYSEAT.COM

Slide 76

Slide 76 text

USING CSS3

Slide 77

Slide 77 text

USING CSS3 Backgrounds & Borders

Slide 78

Slide 78 text

BACKGROUNDS & BORDERS MODULE W3C Candidate Recommendation http://www.w3.org/TR/css3-background/

Slide 79

Slide 79 text

MULTIPLE BACKGROUNDS Apply more than one background image to an element

Slide 80

Slide 80 text

blockquote { ! ! background: url(quote-left.gif) top left no-repeat, ! ! url(quote-right.gif) bottom right no- repeat; ! } backgrounds

Slide 81

Slide 81 text

backgrounds

Slide 82

Slide 82 text

BORDER-RADIUS CSS rounded corners

Slide 83

Slide 83 text

.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

Slide 84

Slide 84 text

border-radius

Slide 85

Slide 85 text

BOX-SHADOW drop shadows without images

Slide 86

Slide 86 text

.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

Slide 87

Slide 87 text

box-shadow

Slide 88

Slide 88 text

BROWSER SUPPORT

Slide 89

Slide 89 text

CSS3 POLYFILLS http://css3pie.com/

Slide 90

Slide 90 text

USING CSS3

Slide 91

Slide 91 text

USING CSS3 CSS Media Queries

Slide 92

Slide 92 text

MEDIA QUERIES W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/

Slide 93

Slide 93 text

MEDIA QUERIES target browser characteristics, for example screen resolution, width and height

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

Media Queries

Slide 96

Slide 96 text

@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

Slide 97

Slide 97 text

Media Queries

Slide 98

Slide 98 text

Media Queries

Slide 99

Slide 99 text

MEDIAQUERI.ES

Slide 100

Slide 100 text

RESPONSIVE DESIGN http://www.alistapart.com/articles/responsive-web-design/

Slide 101

Slide 101 text

MOBILE BROWSER SUPPORT

Slide 102

Slide 102 text

YES!

Slide 103

Slide 103 text

YES! Unless you are targeting Windows Phone 7

Slide 104

Slide 104 text

PROVIDING CSS TO WINDOWS PHONE 7 http://adactio.com/journal/4494/

Slide 105

Slide 105 text

DESKTOP BROWSER SUPPORT

Slide 106

Slide 106 text

MEDIA QUERY SUPPORT

Slide 107

Slide 107 text

MEDIA QUERIES POLYFILLS http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/Respond

Slide 108

Slide 108 text

THANK 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/

Slide 109

Slide 109 text

THANK 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/