CSS3 Selectors. The CSS Summit 2012

Transcription

1 CSS3 Selectors The CSS Summit 2012

2 Rachel rachelandrew.co.uk edgeofmyseat.com grabaperch.com

3 What is CSS3?

4 CSS3 is the next version of CSS

5 CSS3 is Modular

6 Some CSS3 modules are more complete than others

7 W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C Recommendation

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

9 Selectors module W3C Recommendation

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

11 The problem with CSS2 selectors

12 Adding classes <h1>my heading</h1> <p class= first >... </p> <p>... </p>

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

14 Attribute Selectors Select elements based on attributes

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

16 Attribute Selectors

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

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

19 Structural pseudo-class selectors

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

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

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

23 :first-child <div class= wrapper > <p>... </p> <p>... </p> <p>... </p> </div>

24 :first-child

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

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

27 :first-child

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

29 :last-child

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

31 :last-child

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

33 :nth-child

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

35 :nth-child

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

37 :nth-child

38 :nth-child tr:nth-child(2n+1) td {!!background-color: #f0e9c5; }

39 :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.

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

41 :nth-of-type

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

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

44 :only-child

45 :empty matches an element if it is empty

46 :empty p {!padding: 001em 0;!margin: 0; }! p:empty {!padding: 0; }

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

48 :checked the checked state of a checkbox or radio button

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

50 enabled and disabled detecting input element states

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

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

53 The CSS3 Basic User Interface Module (Working Draft)

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

55 HTML5 attributes <input type="text" name="fname" id="fname" required="required" />!! <input type=" " name="f " id="f " required="required" />

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

57 Adding an icon to required fields

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

59 Adding an icon to valid fields

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

61 Show a different icon for the field type

62 the Negation pseudoclass :not(selector)

63 :not <p>... </p> <p class= box >... </p> <p>... </p>

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

65 :not

66 Pseudo-elements

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

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

69 :first-letter

70 :first-line the first formatted line of text

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

72 :first-line

73 :before Render content before the element when using generated content

74 :before <div class= content >... </div>

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

76 :before

77 :after Render content after the element when using generated content

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

79 Generated content can be very useful...

80 CSS Arrow Please

81 Adding a bird

82 ::selection Content selected in browser by the user

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

84 ::selection

85 Combinators Combining selectors to target elements

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

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

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

89 Child Selector <ul> <li>item 1 <ol> <li>sub list item 1</li> <li>sub list item 2</li> </ol> </li> <li>item 2</li> </ul>

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

91 Child Selector

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

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

94 Adjacent Sibling

95 General Sibling Select elements that are the siblings of an element

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

97 General Sibling

98 Browser Support

99 Browser Support

100 Your options

101 Do Nothing. or serve a simpler layout to older browsers

102 JavaScript Plug the holes in browser support using JavaScript.

103 jquery: first-child div#wrapper p:first-child, div#wrapper p.first {!! font-size: 1.5em; } <script src=" script> <script> $(document).ready(function(){! $("div#wrapper p:first-child").addclass("first"); }); </script>

104 jquery: last-child ul#navigation li:last-child, ul#navigation li.last {!! border-bottom: none; } <script src=" script> <script> $(document).ready(function(){! $("ul#navigation li:last-child").addclass("last"); }); </script>

105 jquery: nth-child tr:nth-child(odd) td, td.odd {! background-color: #f0e9c5; } <script src=" script> <script> $(document).ready(function(){! $("tr:nth-child(odd) td").addclass("odd"); }); </script>

106 CSS PolyFills plugging the holes in support

107 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.

108 selectivizr

109 Check your stats.

110 greenbelt.org.uk

111 IE8

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

113 CSS3 Workflow How I approach my projects.

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

115 CSS3 Workflow Validate.

116 CSS3 Workflow Test & Fix in older browsers

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

118 CSS3 Workflow Test again.

119 Thank rachelandrew.co.uk edgeofmyseat.com grabaperch.com