Code samples from my Responsive Day Out talk Where Do We Go From Here?

mq4-hover.css

@media (hover:hover) {
  /* hover-related interactions are A-OK */
}
@media (hover:on-demand) {
  /* hover-related interactions are potentially difficult,
     maybe do something else instead */
}
@media (hover:none) {
	/* No hover possible :-( */
}

mq4-pointer.css

@media (pointer:fine) {
  /* Smaller links and buttons are ok */
}
@media (pointer:coarse) {
  /* Larger links and buttons are probably a good idea */
}

pointer-event.js

function detectType( event ) {
  switch( event.pointerType ) {
    case "mouse:
      /* mouse input detected */
      break;
    case "pen":
      /* pen/stylus input detected */
      break;
    case "touch:
      /* touch input detected */
      break;
    default:
      /* pointerType is empty (could not be detected) or UA-specific custom type */
  }
}

pointer-test.js

if ( window.PointerEvent ) {
  window.addEventListener( "pointerdown", detectType, false );
}

vcd.html

<meta name=“msapplication-cortanavcd" content="http://myapp.io/vcd.xml">

vcd.xml

<?xml version="1.0" encoding="utf-8"?>
<VoiceCommands xmlns="http://schemas.microsoft.com/voicecommands/1.2">
  <CommandSet xml:lang="en-us" Name="groupPost">
    <CommandPrefix>Group Post</CommandPrefix>
    <Example>Group Post add note</Example>
    <Command Name="addNote">
      <Example>add a note {message} using group post</Example>
      <ListenFor RequireAppName="BeforeOrAfterPhrase">[please] add a note [that] {noteSubject}</ListenFor>
      <Feedback>adding {noteSubject} to Group Post</Feedback>
      <Navigate Target="/addNote.htm"/>
    </Command>
    <PhraseTopic Label="noteSubject" Scenario="Dictation"></PhraseTopic>
  </CommandSet>
</VoiceCommands>

vw-scaling.css

body {
  max-width: 64em;
}

@media screen and (min-width: 64em) {
  body {
    font-size: 1.5625vw; /* ( 1em / 64em ) * 100 */
  }
}