W3Cs
Web Content & Creative Constraints

Darcy Clarke - @darcy

About

• @darcy
• Developer
• Designer
• UX Advocate

Work

• Co-Founded Themify
• Google, Microsoft, Nike, Samsung, Porsche, Ducati, Disney, Red Bull, CBS
• Fi / Fantasy Interactive, Jet Cooper, Polar Mobile, Say Yeah!, Playground, Blast Radius, Bnotions, Daily Challenge, Pinpoint Social, My City Lives, Viafoura, Flixel
• jQuery Team Alumni, Repo.js, DSS, Frontend Developer Interview Questions
• github.com/darcyclarke

What to expect

• W3Cs?
• Accessibility
• Detecting Context
  • Mediaqueries & Supports
  • Feature Detection
  • User Agent Detection
• Layout
  • Box-sizing
  • Calc
  • Flexbox
• Typography
  • Font-smoothing
  • Line-clamping
  • Balanced Text
  • Multi-columns
• Images
  • Responsive
  • Filters
  • Masking
  • Blend modes
• Video
  • Responsive
  • Mobile support
  • Video Decoders

Responsive Design

• - Fluid widths
• - Consistent content
• - *HTML & CSS
• Example

Adaptive Design

• - Fixed widths at breakpoints
• - Feature & Device-specific layout & content
• - *HTML, CSS & JS
• Example

Browser Hacks

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, Firefox, Safari, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, Safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+ */
body:first-of-type #ocho {  color: red }

/* Safari3+, Chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / Mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

Media Queries

Supports: width, height, orientation, resolution, scan, aspect-ratio, color

<link rel="stylesheet" media="(max-width: 800px)" href="example.css">

@media (max-width: 800px) {
  /* ... */
}

@media (max-width: 800px) and (orientation: landscape) {
  /* ... */
}

Supports

@supports (display: flex) {
  /* ... */
}
@supports (display: flex) and (background-size: cover) {
  /* ... */
}

var supports = CSS.supports("display", "flex");

var supports = CSS.supports("(display: flex) and (background-size: cover)");

Feature Detection

var supports = 'preload' in document.createElement('video');

User Agent Detection

/*
iPhone 4 Example User Agent:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7
*/

var ua = detect.parse(navigator.userAgent);

ua.browser.family // "Mobile Safari"
ua.browser.name // "Mobile Safari 4.0.5"
ua.browser.version // "4.0.5"
ua.browser.major // 4
ua.browser.minor // 0
ua.browser.patch // 5

ua.device.family // "iPhone"
ua.device.name // "iPhone"
ua.device.version // ""
ua.device.major // null
ua.device.minor // null
ua.device.patch // null
ua.device.type // "Mobile"
ua.device.manufacturer // "Apple"

ua.os.family // "iOS"
ua.os.name // "iOS 4"
ua.os.version // "4"
ua.os.major // 4
ua.os.minor // 0
ua.os.patch // null
      

Box Sizing

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Calc

.padded {
  margin: 0 auto;
  position: relative;
  width: -webkit-calc(100% - (20px * 2));
  width: -moz-calc(100% - (20px * 2));
  width: calc(100% - (20px *2));
}

Flexbox

.box {
  display: -webkit-box;
  display: -moz-box;
  display: box;
}
.vertical {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
.horizontal {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
}

Font-smoothing

.example {
  -webkit-font-smoothing: antialiased;
}

Line Clamping

.example {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Balanced Text

.example {
  text-wrap: balance;
}

Multicolumn

ul {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

Multicolumn

.content {
  height: 300px;
  width: 50%;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

Responsive Images

<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

<img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">

Responsive Images - Picturefill

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  <span data-src="small.jpg"></span>
  <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
  <span data-src="large.jpg" data-media="(min-width: 800px)"></span>
  <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
  <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
  <noscript>
      <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  </noscript>
</span>

Filters - Sepia

Filters - Brightness

Filters - Grayscale

Masks

.mask {
  -webkit-mask-box-image: url(mask.png);
}

Masks

.mask {
  -webkit-mask-box-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
}

Blend Modes

.blend {
  background: url('pic4.jpg') no-repeat, blue;
  background-blend-mode: difference, normal; // Chrome Canary
  -webkit-background-blend-mode: difference, normal; // WebKit Nightly
}

Responsive Video

<div class="video">
<iframe src="http://www.youtube.com/embed/oHg5SJYRHA0" frameborder="0" allowfullscreen=""></iframe>
</div>

Responsive Video

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

16:9 ( 9 / 16 = 0.5625 ) then ( 0.5625 * 100 = 56.25 )

Video - Mobile Case Study

Requirements

• Easy to create at scale
• Small file size
• High quality
• Performant on all desktop browsers
• Performant on mobile

Video - Mobile Case Study

JavaScript video/image decoders

• MP4: https://github.com/mbebenita/Broadway
• MPEG1: https://github.com/phoboslab/jsmpeg
• PNG: https://github.com/devongovett/png.js/
• WEBP: http://webpjs.appspot.com/
• WEBM: https://github.com/dominikhlbg/vp8-webm-javascript-decoder

CANIUSE

HTML5 Please

HTML5 Test

Cross Browser Polyfills