rachelandrew-css3-selectors.pdf

Transcript

1. CSS3 Selectors The CSS Summit 2012
2. Rachel Andrew @rachelandrew 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 http://www.w3.org/TR/css3-selectors/
10. h1 {} p {} .thing {} #uniquething {} .thing p Basic Selectors
11. The problem with CSS2 selectors
12. <h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Adding classes
13. CSS3 Selectors “Common sense” new selectors target elements more precisely without adding classes
14. Attribute Selectors Select elements based on attributes
15. form input[type="text"] { } ! form input[type="submit"] { } Attribute Selectors
16. Attribute Selectors
17. label[for="fContact"] { ! float: none; ! width: auto; } Attribute Selectors
18. a[href ^="mailto:"] { padding-right: 20px; ! background-image:url(email.png); ! background-repeat: no-repeat; ! background-position: right center; } Attribute Selectors
19. Structural pseudo-class selectors
20. a:link {} a:visited {} Pseudo-Class Selectors
21. a:hover {} a:active {} Dynamic Pseudo-Class
22. :first-child target an element when it is the first child of a parent element
23. <div class=”wrapper”> <p> ... </p> <p> ... </p> <p> ... </p> </div> :first-child
24. :first-child
25. .wrapper p { ! ! font-size: 1.5em; } :first-child
26. .wrapper p:first-child { ! ! font-size: 1.5em; } :first-child
27. :first-child
28. :last-child target an element when it is the last child of a parent element
29. :last-child
30. .navigation li:last-child { ! ! border-bottom: none; } :last-child
31. :last-child
32. :nth-child select multiple elements according to their position in the document tree
33. :nth-child
34. tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } :nth-child
35. :nth-child
36. tr:nth-child(3) td { ! ! background-color: #f0e9c5; } :nth-child
37. :nth-child
38. tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } :nth-child http://reference.sitepoint.com/css/understandingnthchildexpressions
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. p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } :nth-of-type
41. :nth-of-type
42. :only-child matches an element if it is the only child element of it’s parent.
43. li { ! list-style-type: disc; } ! li:only-child { ! list-style-type: none; } :only-child
44. :only-child
45. :empty matches an element if it is empty
46. p { ! padding: 0 0 1em 0; ! margin: 0; } ! p:empty { ! padding: 0; } :empty
47. For input elements Structural pseudo-classes for use with forms.
48. :checked the checked state of a checkbox or radio button
49. .agreeterms:checked { border:2px solid blue; } :checked
50. enabled and disabled detecting input element states
51. input:enabled { color: #000; } :enabled
52. input:disabled { color: #999; } :disabled
53. The CSS3 Basic User Interface Module http://www.w3.org/TR/css3-ui/ (Working Draft)
54. :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write
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
56. input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; } Adding an icon to required fields
57. Adding an icon to required fields
58. input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; } Adding an icon to valid fields
59. Adding an icon to valid fields
60. input[type="email"]:focus:required:invalid { ! background-image: url(email_error.png); } Show a different icon for the field type
61. Show a different icon for the field type
62. the Negation pseudo- class :not(selector)
63. <p> ... </p> <p class=”box”> ... </p> <p> ... </p> :not
64. p:not(.box) { ! ! padding: 1em; ! ! border:2px solid #000; ! } :not
65. :not
66. Pseudo-elements
67. :first-letter the first character of the first line of text
68. .wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color: red; } :first-letter
69. :first-letter
70. :first-line the first formatted line of text
71. .wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color: red; } :first-line
72. :first-line
73. :before Render content before the element when using generated content
74. <div class=”content”> ... </div> :before
75. .content:before { content: "Start here:"; } :before
76. :before
77. :after Render content after the element when using generated content
78. .content:after { content: "End here:"; } :after
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. .wrapper p::selection {! background-color: red; } ::selection
84. ::selection
85. Combinators Combining selectors to target elements
86. Descendant Selector Select all elements that are descendants of a specified parent
87. .wrapper p { ! font-size: 1.5em; } Descendant Selector
88. Child Selector Select all elements that are immediate children of a specified parent
89. <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
90. li { ! color: #000; } ! ul > li { ! color: red; } Child Selector
91. Child Selector
92. Adjacent Sibling Select elements that are the adjacent siblings of an element
93. .wrapper h1 + p { ! font-size: 1.5em; } Adjacent Sibling
94. Adjacent Sibling
95. General Sibling Select elements that are the siblings of an element
96. .wrapper h2~p { ! color: red; } General Sibling
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. 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>
104. 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>
105. 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>
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. http://remysharp.com/2010/10/08/what-is-a-polyfill/
108. selectivizr http://selectivizr.com/
109. Check your stats.
110. greenbelt.org.uk
111. IE8
112. var patch_css = function() { ! ! // supporting css stuff ! ! ! ! $('input[type=submit]').addClass('submit'); ! ! $('h1+h2').addClass('stacked'); ! ! $('h1+p').addClass('stacked'); ! ! ! }; patch_css
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 You! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com