HTML5 Inputs and CSS3 Selectors

Covering some CSS3 selectors and their use with HTML input elements. Tips and tricks on using pseduo-classes on form elements.

Presented at Adobe WebUP, February 2012.

Transcript

2. What  you’ll  learn  today  
3. ¡  Fine-­‐grained  control  built-­‐in     ¡  http://www.w3.org/TR/selectors/        
4. ¡  E  +  F   §  Matches  any  F  element  immediately  preceded  by  an  E  element   ¡  E  >  F   §  Matches  any  F  element    that  is  a  direct  descendant  of  an  E  element   §  More  specific  than  all  descendants  (  E    F  )      
5. /* target all inputs that have a <label> right before them */ label + input { }
6. /* target all <div> elements which are direct descendants of a <form> */ form > div{ . . . }
7. ¡  E[att  =  “val”]   §  Matches  any  E  element  whose  att  attribute  value  is  “val”   ¡  E[att  ^=  ”val”]   §  Matches  any  E  element  whose  att  attribute  value  begins  with  “val”   ¡  E[att  $=  “val”]   §  Matches  any  E  element  whose  att  attribute  value  ends  with  “val”   ¡  E[att  *=  ”val”]   §  Matches  any  E  element  whose  att  attribute  value  contains  the  substring  “val”  
8. /* target all text inputs */ input[type = “text”]{ . . . }
9. /* target all checkbox inputs */ input[type = “checkbox”]{ . . . }
10. /* target all text inputs with the name attribute value of “first_name” */ input[type = “text”][name = “first_name”]{ . . . }
11. /* target all <div> elements which have a single class starting with “widget_” */ div[class ^= “widget_”] { . . . }
12. /* broad descendant modifier*/ #homepage div[class ^= “fb-widget”] { . . . }
13. /* target all <a> elements which point to a secure URI */ a[href ^= “https://”] { . . . }
15. /* target all inputs which have the “data-property” attribute set */ input[data-property] { . . . } <input type=“text” data-property=“value” />
16. /* target all inputs which have the “data-property” attribute set to “5” */ ul[data-count = “5”] { . . . } <ul id=“items” data-count=“5”> . . . <ul>
17. // Set the data-count attribute from JS var list = document.getElementById(“items”); list.dataset[“count”] = 5;
18. ¡  Select  elements  based  on  their  attributes   §  input[type=“text”]   §  a[href  ^=  “https”]   §  img[src  $=  “jpg”]   ¡  Support  for  custom  attributes  in  CSS   §  input[data-­‐count]    
19. ¡ State     :focus   :checked   :disabled   :invalid     ¡ Structure   :first-­‐child   :last-­‐child   :nth-­‐child(n)   :not(selector)    
20. /* highlight inputs when they are in focus */ input:focus { background : yellow; }
21. /* target all checked radio buttons and checkboxes */ input:checked { . . . }
22. /* target all checked checkboxes */ input[type = “checkbox”]:checked { . . . }
23. .details{ display : none } /* toggle the visibility of an element with class “details” which follows a checkbox */ input[type = “checkbox”]:checked + .details{ display : block }
24. <input type=“checkbox” name=“name” /> <div class=“details”> <!– Visible only when the checkbox is checked --> </div>
25. /* target all disabled inputs */ input:disabled { . . . } <input type=“text” disabled /> The same as <input type=“text” disabled=“disabled” />
26. /* target all invalid inputs */ input:invalid { . . . } /* target all invalid inputs that are required */ input[required]:invalid { . . . }
27. /* target the first input node */ input:first-child{ . . . } /* target the last input node */ input:last-child{ . . . }
29. /* target the second div node */ div:nth-child(2){ -webkit-transform: scale(1.2) }
30. /* target odd fieldset nodes */ fieldset:nth-child(odd){ } /* target even fieldset nodes */ fieldset:nth-child(even){ }
31. /* target all inputs without the “super” class */ input:not(.super){ }
32. /* target all unchecked inputs */ input:not(:checked){ . . . }
33. /* target all inputs that are not checkboxes */ input:not([type = “checkbox”]){ . . . }
34. /* target all inputs that do not have the “required” attribute */ input:not([required]){ . . . }
35. ¡  Pseudo-­‐class  selectors  (state  /  structure)   §  checked   §  required   §  :not(:checked)   ¡  Presentation  logic  in  CSS  based  on  state  
37. ¡  http://twitter.github.com/bootstrap/   §  Great  baseline  styles  for  inputs   §  Solid  grid-­‐layout  framework  
38. ¡  Twitter  “Bootstrap”  form  input  styling  
39. ¡  http://formalize.me/   §  Cross-­‐browser  baseline  forms  CSS  &  JS   framework  
40. ¡  http://www.modernizr.com/   §  Check  feature  availability  in  the  browser   §  Use  “polyfills”  for  old  browsers  
41. ¡  http://www.browserscope.org   §  Distributed  testing  by  crowdsourcing   §  Every  visitor  runs  the  the  tests  in  the  background   §  Write  your  own  JS  tests   §  Graphs,  feature  support  evolution  
42. ¡  http://www.browserscope.org/user/tests/ table/ agt1YS1wcm9maWxlcnINCxIEVGVzdBib2KQ GDA   ¡  Up  to  date  metrics  on  feature  support   ¡  Desktop  and  mobile  browser  coverage  
43. ¡  http://css-­‐tricks.com/     §  Code  snippets   §  CSS/HTML  tips  and  tricks  
44. ¡  http://dochub.io/#css/   §  Quick  property  reference   §  CSS  /  DOM  /  JS  …   §  Built  on  Twitter  Bootstrap  J  
45. ¡  Never  consistent   ¡  Vendor-­‐specific  styles   ¡  Device-­‐specific  optimizations   ¡  Leave  it  to  the  environment  (iOS  /  Android)    
46. ¡  Checkboxes  &  radio  buttons   ¡  Inputs  &  text  areas   ¡  Dropdowns      
47. ¡  Custom  checkboxes  /  radio  buttons   http://www.wufoo.com/2011/06/13/custom-­‐radio-­‐buttons-­‐and-­‐checkboxes/    
48. ¡  jQuery  Mobile  checkbox  /  radio  buttons  
49. §  style  the  <label>  on  top  of  the  input   §  background  for  <label>   §  style  <label>  based  on  input  state   ¡  Advantages:   §  Defer  usability  and  accessibility  to  the  browser  
50. input[type = “checkbox”]{ position: absolute; left: -9999px; } input[type = “checkbox”]:checked + label{ background-image: url(“checked.png”) } <!– the element order is important --> <input type=“checkbox” id=“check1” /> <label for=“check1” > Newsletter </label>
51. div:not(#foo)  >  input:checked  +  label   ¡  CSS  engines  MUST  parse  the  entire  rule  in   order  to  apply  it  
52.   ¡  BUG  IE  7:  partial  rule  matching   §  Workaround:  use  selector  descent   §  <body  class=“ie7”>     ¡  http://lea.verou.me/2011/05/rule-­‐filtering-­‐ based-­‐on-­‐specific-­‐selectors-­‐support/  
53. §  wrap  a  <div>  around  the  input   §  reset  the  <input>  border,  margin,  padding   §  style  the  <div>    
54. ¡  No  CSS  /  HTML-­‐only  work-­‐around   ¡  Use  JavaScript  widgets  if  reallynecessary    
55. ¡  JS  solution  requirements:   §  Use  a  classic  <select>  element  as  a  datasource   §  Keyboard  navigation   §  Multi-­‐instance  support   §  Augment!  Augment!  Augment!   ¡  http://harvesthq.github.com/chosen/    
56. demos   some  cool  stuff   others  have  built  
57. I skate to where the puck is going to be, not where it has been. Wayne Gretzky http://www.flickr.com/photos/tazphotos/4400220464/  
58. thanks!   Razvan  Caliman   rcaliman@adobe.com     now,  go  build  something  cool!   http://speakerdeck.com/u/razvancaliman/p/ html5-­‐inputs-­‐and-­‐css3-­‐selectors