ConFoo: CSS3 Selectors

Links and notes can be found at: http://www.rachelandrew.co.uk/presentations/css3-selectors

Transcript

1. CSS3 Selectors Rachel Andrew: ConFoo 2013 Thursday, 28 February 13
2. Thursday, 28 February 13
3. What is CSS3? Thursday, 28 February 13
4. CSS3 is the next version of CSS Thursday, 28 February 13
5. CSS3 is Modular Thursday, 28 February 13
6. Some CSS3 modules are more complete than others Thursday, 28 February 13
7. W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C Recommendation Thursday, 28 February 13
8. CSS3 is supported by browsers Some browsers and some (parts of) modules. Thursday, 28 February 13
9. Selectors module W3C Recommendation http://www.w3.org/TR/css3-selectors/ Thursday, 28 February 13
10. h1 {} p {} .thing {} #uniquething {} .thing p Basic Selectors Thursday, 28 February 13
11. The problem with CSS2 selectors Thursday, 28 February 13
12. <h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Adding classes Thursday, 28 February 13
13. CSS3 Selectors “Common sense” new selectors target elements more precisely without adding classes Thursday, 28 February 13
14. Attribute Selectors Select elements based on attributes Thursday, 28 February 13
15. form input[type="text"] { } ! form input[type="submit"] { } Attribute Selectors Thursday, 28 February 13
16. Attribute Selectors Thursday, 28 February 13
17. label[for="fContact"] { ! float: none; ! width: auto; } Attribute Selectors Thursday, 28 February 13
18. a[href ^="mailto:"] { padding-right: 20px; ! background-image:url(email.png); ! background-repeat: no-repeat; ! background-position: right center; } Attribute Selectors Thursday, 28 February 13
19. Structural pseudo-class selectors Thursday, 28 February 13
20. a:link {} a:visited {} Pseudo-Class Selectors Thursday, 28 February 13
21. a:hover {} a:active {} Dynamic Pseudo-Class Thursday, 28 February 13
22. :first-child target an element when it is the first child of a parent element Thursday, 28 February 13
23. <div class=”wrapper”> <p> ... </p> <p> ... </p> <p> ... </p> </div> :first-child Thursday, 28 February 13
24. :first-child Thursday, 28 February 13
25. .wrapper p { ! ! font-size: 1.5em; } :first-child Thursday, 28 February 13
26. .wrapper p:first-child { ! ! font-size: 1.5em; } :first-child Thursday, 28 February 13
27. :first-child Thursday, 28 February 13
28. :last-child target an element when it is the last child of a parent element Thursday, 28 February 13
29. :last-child Thursday, 28 February 13
30. .navigation li:last-child { ! ! border-bottom: none; } :last-child Thursday, 28 February 13
31. :last-child Thursday, 28 February 13
32. :nth-child select multiple elements according to their position in the document tree Thursday, 28 February 13
33. :nth-child Thursday, 28 February 13
34. tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } :nth-child Thursday, 28 February 13
35. :nth-child Thursday, 28 February 13
36. tr:nth-child(3) td { ! ! background-color: #f0e9c5; } :nth-child Thursday, 28 February 13
37. :nth-child Thursday, 28 February 13
38. tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } :nth-child http://css-tricks.com/how-nth-child-works/ Thursday, 28 February 13
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. Thursday, 28 February 13
40. p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } :nth-of-type Thursday, 28 February 13
41. :nth-of-type Thursday, 28 February 13
42. :only-child matches an element if it is the only child element of it’s parent. Thursday, 28 February 13
43. li { ! list-style-type: disc; } ! li:only-child { ! list-style-type: none; } :only-child Thursday, 28 February 13
44. :only-child Thursday, 28 February 13
45. :empty matches an element if it is empty Thursday, 28 February 13
46. p { ! padding: 0 0 1em 0; ! margin: 0; } ! p:empty { ! padding: 0; } :empty Thursday, 28 February 13
47. For input elements Structural pseudo-classes for use with forms. Thursday, 28 February 13
48. :checked the checked state of a checkbox or radio button Thursday, 28 February 13
49. .agreeterms:checked { border:2px solid blue; } :checked Thursday, 28 February 13
50. enabled and disabled detecting input element states Thursday, 28 February 13
51. input:enabled { color: #000; } :enabled Thursday, 28 February 13
52. input:disabled { color: #999; } :disabled Thursday, 28 February 13
53. The CSS3 Basic User Interface Module http://www.w3.org/TR/css3-ui/ (Working Draft) Thursday, 28 February 13
54. :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write Thursday, 28 February 13
55. <input type="text" name="fName" id="fName" required="required" /> ! ! <input type="email" name="fEmail" id="fEmail" required="required" placeholder="name@example.com" /> HTML5 attributes Thursday, 28 February 13
56. input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; } Adding an icon to required fields Thursday, 28 February 13
57. Adding an icon to required fields Thursday, 28 February 13
58. input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; } Adding an icon to valid fields Thursday, 28 February 13
59. Adding an icon to valid fields Thursday, 28 February 13
60. input[type="email"]:focus:required:invalid { ! background-image: url(email_error.png); } Show a different icon for the field type Thursday, 28 February 13
61. Show a different icon for the field type Thursday, 28 February 13
62. the Negation pseudo- class :not(selector) Thursday, 28 February 13
63. <p> ... </p> <p class=”box”> ... </p> <p> ... </p> :not Thursday, 28 February 13
64. p:not(.box) { ! ! padding: 1em; ! ! border:2px solid #000; ! } :not Thursday, 28 February 13
65. :not Thursday, 28 February 13
66. Pseudo-elements Thursday, 28 February 13
67. :first-letter the first character of the first line of text Thursday, 28 February 13
68. .wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color: red; } :first-letter Thursday, 28 February 13
69. :first-letter Thursday, 28 February 13
70. :first-line the first formatted line of text Thursday, 28 February 13
71. .wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color: red; } :first-line Thursday, 28 February 13
72. :first-line Thursday, 28 February 13
73. :before Render content before the element when using generated content Thursday, 28 February 13
74. <div class=”content”> ... </div> :before Thursday, 28 February 13
75. .content:before { content: "Start here:"; } :before Thursday, 28 February 13
76. :before Thursday, 28 February 13
77. :after Render content after the element when using generated content Thursday, 28 February 13
78. .content:after { content: "End here:"; } :after Thursday, 28 February 13
79. Generated content can be very useful... Thursday, 28 February 13
80. CSS Arrow Please Thursday, 28 February 13
81. Adding a bird Thursday, 28 February 13
82. .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ Clear Fix Thursday, 28 February 13
83. ::selection Content selected in browser by the user Thursday, 28 February 13
84. .wrapper p::selection {! background-color: red; } ::selection Thursday, 28 February 13
85. ::selection Thursday, 28 February 13
86. Combinators Combining selectors to target elements Thursday, 28 February 13
87. Descendant Selector Select all elements that are descendants of a specified parent Thursday, 28 February 13
88. .wrapper p { ! font-size: 1.5em; } Descendant Selector Thursday, 28 February 13
89. Child Selector Select all elements that are immediate children of a specified parent Thursday, 28 February 13
90. <ul> <li>Item 1 <ol> <li>Sub list item 1</li> <li>Sub list item 2</li> </ol> </li> <li>Item 2</li> </ul> Child Selector Thursday, 28 February 13
91. li { ! color: #000; } ! ul > li { ! color: red; } Child Selector Thursday, 28 February 13
92. Child Selector Thursday, 28 February 13
93. Adjacent Sibling Select elements that are the adjacent siblings of an element Thursday, 28 February 13
94. .wrapper h1 + p { ! font-size: 1.5em; } Adjacent Sibling Thursday, 28 February 13
95. Adjacent Sibling Thursday, 28 February 13
96. General Sibling Select elements that are the siblings of an element Thursday, 28 February 13
97. .wrapper h2~p { ! color: red; } General Sibling Thursday, 28 February 13
98. General Sibling Thursday, 28 February 13
99. Browser Support Thursday, 28 February 13
100. Browser Support Thursday, 28 February 13
101. Your options Thursday, 28 February 13
102. Do Nothing. or serve a simpler layout to older browsers Thursday, 28 February 13
103. JavaScript Plug the holes in browser support using JavaScript. Thursday, 28 February 13
104. 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> Thursday, 28 February 13
105. 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> Thursday, 28 February 13
106. 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> Thursday, 28 February 13
107. CSS “PolyFills” plugging the holes in support Thursday, 28 February 13
108. 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/ Thursday, 28 February 13
109. selectivizr http://selectivizr.com/ Thursday, 28 February 13
110. Check your stats. Thursday, 28 February 13
111. greenbelt.org.uk Thursday, 28 February 13
112. IE8 Thursday, 28 February 13
113. var patch_css = function() { ! ! // supporting css stuff ! ! ! ! $('input[type=submit]').addClass('submit'); ! ! $('h1+h2').addClass('stacked'); ! ! $('h1+p').addClass('stacked'); ! ! ! }; patch_css Thursday, 28 February 13
114. CSS3 Workflow How I approach my projects. Thursday, 28 February 13
115. CSS3 Workflow Develop without any polyfill or JavaScript fixes in place. Thursday, 28 February 13
116. CSS3 Workflow Validate. Thursday, 28 February 13
117. CSS3 Workflow Test & Fix in older browsers Thursday, 28 February 13
118. CSS3 Workflow Decide if you need to use a polyfill and which kind Thursday, 28 February 13
119. CSS3 Workflow Test again. Thursday, 28 February 13
120. Thank You! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thursday, 28 February 13