Technique:

"A way of carrying out a particular task, esp. the execution or performance of an artistic work or a scientific procedure."

Code  Bloat

<div class="post">
    <div class="top"></div>
    <div class="middle">
        <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
        aliquam erat volutpat...
        </p>
    </div>
    <div class="bottom"></div>
</div>

Resource  Bloat

<div class="image">
    <img src="picture.jpg" alt="My Picture" />
    <img src="shadow.png" class="shadow" alt="My Picture" />
</div>

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; }

Support Variants

.transparent {
  /* Required for IE 5, 6, 7 */
  /* ...or something to trigger hasLayout, like zoom: 1; */
  width: 100%; 

  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50);

  /* Older than Firefox 0.9 */
  -moz-opacity:0.5;

  /* Safari 1.x (pre WebKit!) */
  -khtml-opacity: 0.5;

  /* Modern!
  /* Firefox 0.9+, Safari 2?, Chrome any?
  /* Opera 9+, IE 9+ */
  opacity: 0.5;
}

Anal Clients

• * Cross browser consitancy
• 1) Layout
• 2) Style
• 3) Function

But... but... IE9?!

• Application Cache (offline)
• Web Workers (threads in JavaScript)
• HTML5 Forms (validation mechanism, CSS3 selectors)
• JavaScript Strict Mode
• ForeignObject (embed external content in SVG)
• SMIL Animations (SVG animations)
• File API
• WebGL (3D)
• CSS3 Transitions (for animations)
• CSS3 Text Shadow
• CSS3 Gradients
• CSS3 Border Image
• CSS3 Flex box model
• ClassList APIs
• FormData
• HTML5 History API
• Drag'n Drop from Desktop
• and more...

Just the facts

Chrome Frame

Client side:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Server side:

X-UA-Compatible: chrome=1

Box Sizing

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

Floats

<div class="wrapper">
  <div class="left">
    ...
  </div>
  <div class="right">
    ...
  </div>
</div>

Clearfix

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

<div class="wrapper clearfix">
  <div class="left">
    ...
  </div>
  <div class="right">
    ...
  </div>
</div>

Calc

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

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;
}

Regions

.content {
  height: 300px;
  width: 50%;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-flow-into: uniqueID;
  -moz-flow-into: uniqueID;
  flow-into: uniqueID;
}
  .content2 {
  -webkit-flow-from: uniqueID;
  -moz-flow-from: uniqueID;
  flow-from: uniqueID;
}

Regions

Image   Replacement

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

<h1 class='hide-text'>My Website's Logo</h1>

Image   Replacement

.hide-text {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

<h1 class='hide-text'>My Website's Logo</h1>

Filters

img {
  -webkit-filter: sepia(100%);
}

Filters

img {
  -webkit-filter: brightness(0.5);
}

Filters

img {
  -webkit-filter: grayscale(100%);
}

Array.map( )

var people = ['jim','bob','susie','mike'];
people.map(function(name){
  console.log('Hi' + name + '!');
});

document.querySelectorAll( )

var items = document.querySelectorAll('.item');

Clean  Document  Object

var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe = document.body.appendChild(iframe);
var _window = iframe.contentWindow,
    _document = iframe.contentDocument || iframe.contentWindow.document;
document.body.removeChild(iframe);

Libraries

• jQuery
• Modernizr
• HTML5 Boilerplate
• Animate.css
• Underscore.js
• Lo-Dash.js
• LESS/SASS/Stylus
• Coffeescript

Some  Final  Notes

• You should enjoy developing
• You should be comfortable with these techniques
• You should be sharing your work, best practices and techniques
• Be an advocate for the web

Thank You!

Follow @darcy

Fork darcyclarke

Visit darcyclarke.me