Loading...

All the New CSS Hawtness

@darcy_clarke

About Me

  • Developer
  • Designer
  • User Experience Advocate (TM)
  • Co-Founder of Themify
  • Work at Polar Mobile
  • Work on MediaEverywhere

March 1st - 3rd, 2013

jqueryto.com

Movember is coming!

Native vs. HTML5

Closed vs. Open

Proprietary
vs.
Open Source

HTML, CSS  &  JS  are  Ubiquitous

Mozilla's   Firefox OS

When web-driven companies refuse to work with standards bodies and browser vendors to push the web forward, they are doing a disservice to a platform that has given them so much. ~ Darcy Clarke

Standards

Tim Berners-Lee

Page Media http://www.w3.org/TR/css3-page/

  • New Pseudo Elements & Selectors
  • Page Positioning
  • Page Size
  • Counter references

How do I stay
up-to-date?

caniuse.com

html5please.com

Will things ever settle down?

HTML5 is Complete... kind of http://www.sitepoint.com/w3c-html5-2014-plan/

  • 2014 - HTML5 Specification Completed
  • 2016 - HTML 5.1 Recieve Recommendation Status
  • Rinse & Repeat (2018 - 5.2, 2020 - 5.3 etc.)
  • But, don't wait to start using!
  • Get on the juice!
  • Lance did... maybe

Modern Web Browsers

But... but... IE9?!

via http://people.mozilla.com/~prouget/ie9/index.html
  • 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...

Chrome Frame https://developers.google.com/chrome/chrome-frame/

Client side:

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

Server side:

X-UA-Compatible: chrome=1

Right Now!

Box Sizing http://paulirish.com/2012/box-sizing-border-box-ftw/

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}
via http://css-tricks.com/box-sizing/

Floats

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

Clearfix http://nicolasgallagher.com/micro-clearfix-hack/

.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 https://developer.mozilla.org/en/CSS/-moz-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 http://www.w3.org/TR/css3-multicol/

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 http://www.w3.org/TR/css3-multicol/

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta nibh ut nisi egestas eleifend. Fusce a massa vel orci cursus consequat. Nunc eget libero libero. Mauris tincidunt erat eget lectus iaculis sed interdum nisi adipiscing. Suspendisse eget metus nibh. Pellentesque non ante elit, vel tempor elit. Aliquam eget dolor et felis congue vehicula. Sed massa tellus, pharetra vel ultrices sit amet, molestie sit amet ipsum. Nulla nec nibh ut augue blandit malesuada. Sed sed velit at justo eleifend imperdiet a ut lectus. Donec vehicula vehicula leo at tincidunt.

Pellentesque lacinia mollis eros eu pulvinar. Phasellus luctus porttitor nibh, et mattis velit laoreet sed. In pharetra ipsum in justo condimentum in laoreet libero pellentesque. In eu turpis et dui placerat vulputate quis et est. Aliquam a lectus eu turpis consectetur venenatis. Nam vel diam leo, at adipiscing neque. Praesent volutpat diam sed lorem posuere lobortis facilisis massa bibendum. Mauris augue sapien, rhoncus vitae iaculis eu, suscipit in nulla. Duis nibh tellus, molestie quis aliquam sed, elementum id metus. Suspendisse potenti.

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 )

Responsive Video

Background-size http://www.css3.info/preview/background-size/

Attribute Selectors http://css-tricks.com/attribute-selectors/

  <a href="https://google.com" title="Google" class="shadow remote center">Google</a>
Google

The Future!

Filters

Filters

Filters

Regions http://www.w3.org/TR/css3-regions/

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

Regions http://www.w3.org/TR/css3-regions/

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta nibh ut nisi egestas eleifend. Fusce a massa vel orci cursus consequat. Nunc eget libero libero. Mauris tincidunt erat eget lectus iaculis sed interdum nisi adipiscing. Suspendisse eget metus nibh. Pellentesque non ante elit, vel tempor elit. Aliquam eget dolor et felis congue vehicula. Sed massa tellus, pharetra vel ultrices sit amet, molestie sit amet ipsum. Nulla nec nibh ut augue blandit malesuada. Sed sed velit at justo eleifend imperdiet a ut lectus. Donec vehicula vehicula leo at tincidunt.

Pellentesque lacinia mollis eros eu pulvinar. Phasellus luctus porttitor nibh, et mattis velit laoreet sed. In pharetra ipsum in justo condimentum in laoreet libero pellentesque. In eu turpis et dui placerat vulputate quis et est. Aliquam a lectus eu turpis consectetur venenatis. Nam vel diam leo, at adipiscing neque. Praesent volutpat diam sed lorem posuere lobortis facilisis massa bibendum. Mauris augue sapien, rhoncus vitae iaculis eu, suscipit in nulla. Duis nibh tellus, molestie quis aliquam sed, elementum id metus. Suspendisse potenti.

Masks http://css-tricks.com/webkit-image-wipes/

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

Masks http://css-tricks.com/webkit-image-wipes/

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

Sticky Positioning http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
}
Demo

Flexbox http://css-tricks.com/old-flexbox-and-new-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;  
}
Demo