Tweet
Tweet

Slide 1

Slide 1 text

CSS3 Selectors The CSS Summit 2012

Slide 2

Slide 2 text

Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com

Slide 3

Slide 3 text

What is CSS3?

Slide 4

Slide 4 text

CSS3 is the next version of CSS

Slide 5

Slide 5 text

CSS3 is Modular

Slide 6

Slide 6 text

Some CSS3 modules are more complete than others

Slide 7

Slide 7 text

W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C Recommendation

Slide 8

Slide 8 text

CSS3 is supported by browsers Some browsers and some (parts of) modules.

Slide 9

Slide 9 text

Selectors module W3C Recommendation http://www.w3.org/TR/css3-selectors/

Slide 10

Slide 10 text

h1 {} p {} .thing {} #uniquething {} .thing p Basic Selectors

Slide 11

Slide 11 text

The problem with CSS2 selectors

Slide 12

Slide 12 text

My heading

...

...

Adding classes

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Attribute Selectors Select elements based on attributes

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Attribute Selectors

Slide 17

Slide 17 text

label[for="fContact"] { ! float: none; ! width: auto; } Attribute Selectors

Slide 18

Slide 18 text

a[href ^="mailto:"] { padding-right: 20px; ! background-image:url(email.png); ! background-repeat: no-repeat; ! background-position: right center; } Attribute Selectors

Slide 19

Slide 19 text

Structural pseudo-class selectors

Slide 20

Slide 20 text

a:link {} a:visited {} Pseudo-Class Selectors

Slide 21

Slide 21 text

a:hover {} a:active {} Dynamic Pseudo-Class

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

...

...

...

:first-child

Slide 24

Slide 24 text

:first-child

Slide 25

Slide 25 text

.wrapper p { ! ! font-size: 1.5em; } :first-child

Slide 26

Slide 26 text

.wrapper p:first-child { ! ! font-size: 1.5em; } :first-child

Slide 27

Slide 27 text

:first-child

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

:last-child

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

:last-child

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

:nth-child

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

:nth-child

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

:nth-child

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

:nth-of-type select multiple elements according to their position in the document tree BUT only those elements that are the same as the type the rule is applied to.

Slide 40

Slide 40 text

p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } :nth-of-type

Slide 41

Slide 41 text

:nth-of-type

Slide 42

Slide 42 text

:only-child matches an element if it is the only child element of it’s parent.

Slide 43

Slide 43 text

li { ! list-style-type: disc; } ! li:only-child { ! list-style-type: none; } :only-child

Slide 44

Slide 44 text

:only-child

Slide 45

Slide 45 text

:empty matches an element if it is empty

Slide 46

Slide 46 text

p { ! padding: 0 0 1em 0; ! margin: 0; } ! p:empty { ! padding: 0; } :empty

Slide 47

Slide 47 text

For input elements Structural pseudo-classes for use with forms.

Slide 48

Slide 48 text

:checked the checked state of a checkbox or radio button

Slide 49

Slide 49 text

.agreeterms:checked { border:2px solid blue; } :checked

Slide 50

Slide 50 text

enabled and disabled detecting input element states

Slide 51

Slide 51 text

input:enabled { color: #000; } :enabled

Slide 52

Slide 52 text

input:disabled { color: #999; } :disabled

Slide 53

Slide 53 text

The CSS3 Basic User Interface Module http://www.w3.org/TR/css3-ui/ (Working Draft)

Slide 54

Slide 54 text

:default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write

Slide 55

Slide 55 text

! ! HTML5 attributes

Slide 56

Slide 56 text

input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; } Adding an icon to required fields

Slide 57

Slide 57 text

Adding an icon to required fields

Slide 58

Slide 58 text

input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; } Adding an icon to valid fields

Slide 59

Slide 59 text

Adding an icon to valid fields

Slide 60

Slide 60 text

input[type="email"]:focus:required:invalid { ! background-image: url(email_error.png); } Show a different icon for the field type

Slide 61

Slide 61 text

Show a different icon for the field type

Slide 62

Slide 62 text

the Negation pseudo- class :not(selector)

Slide 63

Slide 63 text

...

...

...

:not

Slide 64

Slide 64 text

p:not(.box) { ! ! padding: 1em; ! ! border:2px solid #000; ! } :not

Slide 65

Slide 65 text

:not

Slide 66

Slide 66 text

Pseudo-elements

Slide 67

Slide 67 text

:first-letter the first character of the first line of text

Slide 68

Slide 68 text

.wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color: red; } :first-letter

Slide 69

Slide 69 text

:first-letter

Slide 70

Slide 70 text

:first-line the first formatted line of text

Slide 71

Slide 71 text

.wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color: red; } :first-line

Slide 72

Slide 72 text

:first-line

Slide 73

Slide 73 text

:before Render content before the element when using generated content

Slide 74

Slide 74 text

...
:before

Slide 75

Slide 75 text

.content:before { content: "Start here:"; } :before

Slide 76

Slide 76 text

:before

Slide 77

Slide 77 text

:after Render content after the element when using generated content

Slide 78

Slide 78 text

.content:after { content: "End here:"; } :after

Slide 79

Slide 79 text

Generated content can be very useful...

Slide 80

Slide 80 text

CSS Arrow Please

Slide 81

Slide 81 text

Adding a bird

Slide 82

Slide 82 text

::selection Content selected in browser by the user

Slide 83

Slide 83 text

.wrapper p::selection {! background-color: red; } ::selection

Slide 84

Slide 84 text

::selection

Slide 85

Slide 85 text

Combinators Combining selectors to target elements

Slide 86

Slide 86 text

Descendant Selector Select all elements that are descendants of a specified parent

Slide 87

Slide 87 text

.wrapper p { ! font-size: 1.5em; } Descendant Selector

Slide 88

Slide 88 text

Child Selector Select all elements that are immediate children of a specified parent

Slide 89

Slide 89 text

  • Item 1
    1. Sub list item 1
    2. Sub list item 2
  • Item 2
Child Selector

Slide 90

Slide 90 text

li { ! color: #000; } ! ul > li { ! color: red; } Child Selector

Slide 91

Slide 91 text

Child Selector

Slide 92

Slide 92 text

Adjacent Sibling Select elements that are the adjacent siblings of an element

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

Adjacent Sibling

Slide 95

Slide 95 text

General Sibling Select elements that are the siblings of an element

Slide 96

Slide 96 text

.wrapper h2~p { ! color: red; } General Sibling

Slide 97

Slide 97 text

General Sibling

Slide 98

Slide 98 text

Browser Support

Slide 99

Slide 99 text

Browser Support

Slide 100

Slide 100 text

Your options

Slide 101

Slide 101 text

Do Nothing. or serve a simpler layout to older browsers

Slide 102

Slide 102 text

JavaScript Plug the holes in browser support using JavaScript.

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

CSS “PolyFills” plugging the holes in support

Slide 107

Slide 107 text

What is 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. http://remysharp.com/2010/10/08/what-is-a-polyfill/

Slide 108

Slide 108 text

selectivizr http://selectivizr.com/

Slide 109

Slide 109 text

Check your stats.

Slide 110

Slide 110 text

greenbelt.org.uk

Slide 111

Slide 111 text

IE8

Slide 112

Slide 112 text

var patch_css = function() { ! ! // supporting css stuff ! ! ! ! $('input[type=submit]').addClass('submit'); ! ! $('h1+h2').addClass('stacked'); ! ! $('h1+p').addClass('stacked'); ! ! ! }; patch_css

Slide 113

Slide 113 text

CSS3 Workflow How I approach my projects.

Slide 114

Slide 114 text

CSS3 Workflow Develop without any polyfill or JavaScript fixes in place.

Slide 115

Slide 115 text

CSS3 Workflow Validate.

Slide 116

Slide 116 text

CSS3 Workflow Test & Fix in older browsers

Slide 117

Slide 117 text

CSS3 Workflow Decide if you need to use a polyfill and which kind

Slide 118

Slide 118 text

CSS3 Workflow Test again.

Slide 119

Slide 119 text

Thank You! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com