<div class="container">
  <h1>CSS <code>touch-action</code> demo</h1>

  <section>
    <div class="element auto">
      <div></div>
      <div></div>
    </div>
    <h2>Default behavior</h2>
  </section>

  <section>
    <div class="element none">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: none</h2>
  </section>

  <section>

    <div class="element pan-x">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-x</h2>
  </section>

  <section>
    <div class="element pan-y">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-y</h2>
  </section>

  <section>
    <div class="element pan-left">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-left</h2>
  </section>

  <section>
    <div class="element pan-right">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-right</h2>
  </section>

  <section>
    <div class="element pan-up">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-up</h2>
  </section>

  <section>
    <div class="element pan-down">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-down</h2>
  </section>

  <section>
    <div class="element pinch-zoom">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pinch-zoom</h2>
  </section>

  <section>
    <div class="element manipulation">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: manipulation</h2>
  </section>
</div>

body {
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 1em auto;
  padding: 0 1em;
  max-width: 700px;
}

h1 {
  margin-bottom: 0.5em;
}

h1::after {
  display: block;
  content: 'This demo only works on browsers that support the touch-action property.';
  background-color: pink;
  color: maroon;
  border: 2px solid crimson;
  padding: 0.5em;
}

@supports (touch-action: auto) {
  h1::after {
    display: none;
  }
}

h2 {
  margin-top: 0;
  margin-bottom: 1em;
}

h2::after {
  content: ' (not supported)';
  color: crimson;
}

.element {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
  height: 50vh;
  overflow: auto;
  position: relative;
}

.element div {
  min-width: 75%;
  height: 75vh;
}

section div:nth-child(1) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c0392b), color-stop(50%, #c0392b), color-stop(50%, #3498db), to(#3498db));
  background-image: -webkit-linear-gradient(top, #c0392b 0%, #c0392b 50%, #3498db 50%, #3498db 100%);
  background-image: linear-gradient(to bottom, #c0392b 0%, #c0392b 50%, #3498db 50%, #3498db 100%);
}

section div:nth-child(2) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f1c40f), color-stop(50%, #f1c40f), color-stop(50%, #2ecc71), to(#2ecc71));
  background-image: -webkit-linear-gradient(top, #f1c40f 0%, #f1c40f 50%, #2ecc71 50%, #2ecc71 100%);
  background-image: linear-gradient(to bottom, #f1c40f 0%, #f1c40f 50%, #2ecc71 50%, #2ecc71 100%);
}

@supports (touch-action: auto) {
  .auto {
    -ms-touch-action: auto;
    touch-action: auto;
  }
  .auto ~ h2::after {
    display: none;
  }
}

@supports (touch-action: none) {
  .none {
    -ms-touch-action: none;
    touch-action: none;
  }
  .none ~ h2::after {
    display: none;
  }
}

@supports (touch-action: manipulation) {
  .manipulation {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }
  .manipulation ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-x) {
  .pan-x {
    -ms-touch-action: pan-x;
    touch-action: pan-x;
  }
  .pan-x ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-y) {
  .pan-y {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
  }
  .pan-y ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-left) {
  .pan-left {
    -ms-touch-action: pan-left;
    touch-action: pan-left;
  }
  .pan-left ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-right) {
  .pan-right {
    -ms-touch-action: pan-right;
    touch-action: pan-right;
  }
  .pan-right ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-up) {
  .pan-up {
    -ms-touch-action: pan-up;
    touch-action: pan-up;
  }
  .pan-up ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-down) {
  .pan-down {
    -ms-touch-action: pan-down;
    touch-action: pan-down;
  }
  .pan-down ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pinch-zoom) {
  .pinch-zoom {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
  }
  .pinch-zoom ~ h2::after {
    display: none;
  }
}