HTML5 Inputs and CSS3 Selectors

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

What you’ll learn today

Slide 3

Slide 3 text

¡  Fine-‐grained control built-‐in ¡  http://www.w3.org/TR/selectors/

Slide 4

Slide 4 text

¡  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 speciﬁc than all descendants ( E F )

Slide 5

Slide 5 text

/* target all inputs that have a right before them */ label + input { }

Slide 6

Slide 6 text

/* target all

elements which are direct descendants of a */ form > div{ . . . }

Slide 7

Slide 7 text

¡  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”

Slide 8

Slide 8 text

/* target all text inputs */ input[type = “text”]{ . . . }

Slide 9

Slide 9 text

/* target all checkbox inputs */ input[type = “checkbox”]{ . . . }

Slide 10

Slide 10 text

/* target all text inputs with the name attribute value of “first_name” */ input[type = “text”][name = “first_name”]{ . . . }

Slide 11

Slide 11 text

/* target all

elements which have a single class starting with “widget_” */ div[class ^= “widget_”] { . . . }

Slide 12

Slide 12 text

/* broad descendant modifier*/ #homepage div[class ^= “fb-widget”] { . . . }

Slide 13

Slide 13 text

/* target all elements which point to a secure URI */ a[href ^= “https://”] { . . . }

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

/* target all inputs which have the “data-property” attribute set */ input[data-property] { . . . }

Slide 16

Slide 16 text

/* target all inputs which have the “data-property” attribute set to “5” */ ul[data-count = “5”] { . . . }

Slide 17

Slide 17 text

// Set the data-count attribute from JS var list = document.getElementById(“items”); list.dataset[“count”] = 5;

Slide 18

Slide 18 text

¡  Select elements based on their attributes §  input[type=“text”] §  a[href ^= “https”] §  img[src $= “jpg”] ¡  Support for custom attributes in CSS §  input[data-‐count]

Slide 19

Slide 19 text

¡ State :focus :checked :disabled :invalid ¡ Structure :ﬁrst-‐child :last-‐child :nth-‐child(n) :not(selector)

Slide 20

Slide 20 text

/* highlight inputs when they are in focus */ input:focus { background : yellow; }

Slide 21

Slide 21 text

/* target all checked radio buttons and checkboxes */ input:checked { . . . }

Slide 22

Slide 22 text

/* target all checked checkboxes */ input[type = “checkbox”]:checked { . . . }

Slide 23

Slide 23 text

.details{ display : none } /* toggle the visibility of an element with class “details” which follows a checkbox */ input[type = “checkbox”]:checked + .details{ display : block }

Slide 24

Slide 24 text

Slide 25

Slide 25 text

/* target all disabled inputs */ input:disabled { . . . } The same as

Slide 26

Slide 26 text

/* target all invalid inputs */ input:invalid { . . . } /* target all invalid inputs that are required */ input[required]:invalid { . . . }

Slide 27

Slide 27 text

/* target the first input node */ input:first-child{ . . . } /* target the last input node */ input:last-child{ . . . }

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

/* target the second div node */ div:nth-child(2){ -webkit-transform: scale(1.2) }

Slide 30

Slide 30 text

/* target odd fieldset nodes */ fieldset:nth-child(odd){ } /* target even fieldset nodes */ fieldset:nth-child(even){ }

Slide 31

Slide 31 text

/* target all inputs without the “super” class */ input:not(.super){ }

Slide 32

Slide 32 text

/* target all unchecked inputs */ input:not(:checked){ . . . }

Slide 33

Slide 33 text

/* target all inputs that are not checkboxes */ input:not([type = “checkbox”]){ . . . }

Slide 34

Slide 34 text

/* target all inputs that do not have the “required” attribute */ input:not([required]){ . . . }

Slide 35

Slide 35 text

¡  Pseudo-‐class selectors (state / structure) §  checked §  required §  :not(:checked) ¡  Presentation logic in CSS based on state

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

¡  http://twitter.github.com/bootstrap/ §  Great baseline styles for inputs §  Solid grid-‐layout framework

Slide 38

Slide 38 text

¡  Twitter “Bootstrap” form input styling

Slide 39

Slide 39 text

¡  http://formalize.me/ §  Cross-‐browser baseline forms CSS & JS framework

Slide 40

Slide 40 text

¡  http://www.modernizr.com/ §  Check feature availability in the browser §  Use “polyﬁlls” for old browsers

Slide 41

Slide 41 text

¡  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

Slide 42

Slide 42 text

¡  http://www.browserscope.org/user/tests/ table/ agt1YS1wcm9maWxlcnINCxIEVGVzdBib2KQ GDA ¡  Up to date metrics on feature support ¡  Desktop and mobile browser coverage

Slide 43

Slide 43 text

¡  http://css-‐tricks.com/ §  Code snippets §  CSS/HTML tips and tricks

Slide 44

Slide 44 text

¡  http://dochub.io/#css/ §  Quick property reference §  CSS / DOM / JS … §  Built on Twitter Bootstrap J

Slide 45

Slide 45 text

¡  Never consistent ¡  Vendor-‐speciﬁc styles ¡  Device-‐speciﬁc optimizations ¡  Leave it to the environment (iOS / Android)

Slide 46

Slide 46 text

¡  Checkboxes & radio buttons ¡  Inputs & text areas ¡  Dropdowns

Slide 47

Slide 47 text

¡  Custom checkboxes / radio buttons http://www.wufoo.com/2011/06/13/custom-‐radio-‐buttons-‐and-‐checkboxes/

Slide 48

Slide 48 text

¡  jQuery Mobile checkbox / radio buttons

Slide 49

Slide 49 text

§  style the on top of the input §  background for §  style based on input state ¡  Advantages: §  Defer usability and accessibility to the browser

Slide 50

Slide 50 text

input[type = “checkbox”]{ position: absolute; left: -9999px; } input[type = “checkbox”]:checked + label{ background-image: url(“checked.png”) } Newsletter

Slide 51

Slide 51 text

div:not(#foo) > input:checked + label ¡  CSS engines MUST parse the entire rule in order to apply it

Slide 52

Slide 52 text

¡  BUG IE 7: partial rule matching §  Workaround: use selector descent §  ¡  http://lea.verou.me/2011/05/rule-‐ﬁltering-‐ based-‐on-‐speciﬁc-‐selectors-‐support/

Slide 53

Slide 53 text

§  wrap a

around the input §  reset the border, margin, padding §  style the

Slide 54

Slide 54 text

¡  No CSS / HTML-‐only work-‐around ¡  Use JavaScript widgets if reallynecessary

Slide 55

Slide 55 text

¡  JS solution requirements: §  Use a classic element as a datasource §  Keyboard navigation §  Multi-‐instance support §  Augment! Augment! Augment! ¡  http://harvesthq.github.com/chosen/

Slide 56

Slide 56 text

demos some cool stuﬀ others have built

Slide 57

Slide 57 text

I skate to where the puck is going to be, not where it has been. Wayne Gretzky http://www.ﬂickr.com/photos/tazphotos/4400220464/

Slide 58

Slide 58 text

thanks! Razvan Caliman [email protected] now, go build something cool! http://speakerdeck.com/u/razvancaliman/p/ html5-‐inputs-‐and-‐css3-‐selectors