CSS3

Why is it a problem?

• Maintenance hell
• Consumes more bandwidth
• More http requests ⇒ slower
• Style harder to understand
• Users get to see the page without them

<div class="foo">
<div class="inner">
	<div class="inner2">
		<div class="inner3"></div>
	</div>
</div>
</div>

.foo {
background: url(img/corner_tr.png) top right no-repeat;
}
.foo .inner {
background: url(img/corner_br.png) bottom right no-repeat;
}
.foo .inner2 {
background: url(img/corner_tl.png) top left no-repeat;
}
.foo .inner3 {
background: url(img/corner_bl.png) bottom left no-repeat;
}

• 3 extra container elements
• 4 background images, one for each corner, or one huge image

border-radius: 20px

border-radius: 40px / 20px

border-radius: 40px 10px

border-radius: 40px 50% 0

border-radius: 40px 50% 0 10px

Note: There are also individual properties for that, e.g. border-top-left-radius

Firefox

With
-moz-

Google Chrome

Full
support

Opera

Full
support

Apple Safari

Full
support

Internet Explorer

Full
support

* Assumes latest beta

<h1><img src="heading.png" alt="Heading text" 
     width="300" height="50" /></h1>

or, the slightly better:

<h1>Heading text</h1>

h1 {
background: url(heading.png) no-repeat;
width: 300px;
height: 50px;
text-indent:-9999px;
}

text-shadow: 1px .1em .3em black

• Supports multiple shadows too
• No spread distance
• No inset shadows

I'm glowing

I have a rudimentary outline

You drank too much

Burning hot

Firefox

Full
support

Google Chrome

Full
support

Opera

Full
support

Apple Safari

Full
support

Internet Explorer

No
support

* Assumes latest beta

• The whole thing as an image

  <img src="rotated-with-text.png" alt="…" />

• The box as an image, with non-rotated, non-skewed text:

  .foo {
  background: url(rotated-box.png) no-repeat;
  width:200px;
  height:200px;
  padding:20px;
  overflow:auto;
  }

transform: rotate( -30deg )

From http://media.24ways.org/2009/14/5/index.html

transform: skew( 30deg , -10deg )

More about CSS 2D transforms

More than just rotate and skew:

• matrix
• translate (and translateX/translateY)
• scale (and scaleX/scaleY)

More about CSS 2D transforms

transform: rotate(30deg) skewX(30deg)

Firefox

With
-moz-

Google Chrome

With
-webkit-

Opera

With
-o-

Apple Safari

With
-webkit-

Internet Explorer

No
support

* Assumes latest beta

Why is it a problem?

• Breaks separation of structure, presentation and behavior
• Larger filesize ⇒ slower download
• Makes the code harder to understand
• …and slower to parse

Multiple containers, 1 for each background image

<div class="foo">
<div class="inner">
	<div class="inner2"></div>
</div>
</div>

.foo { background: url(first_image.png); }
.foo .inner { background: url(second_image.png); }
.foo .inner2 { background: url(third_image.png); }

Firefox

Full
support

Google Chrome

Full
support

Opera

Full
support

Apple Safari

Full
support

Internet Explorer

Full
support

* Assumes latest beta

3 containers for fixed width or height, 4+ for fluid boxes

<div class="foo">
<div class="inner">
	<div class="inner2"></div>
</div>
</div>

.foo {
background: url(img/border_top.png) top no-repeat;
padding-top:10px;
}
.foo .inner {
background: url(img/border_bottom.png) bottom no-repeat;
padding-bottom:10px;
}
.foo .inner2 {
background: url(img/border_middle.png) repeat-y;
}

border-image: url(border-image.png) 14 repeat

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

From http://gopinkboots.com/

Firefox

With
-moz-

Google Chrome

With
-webkit-

Opera

Full
support

Apple Safari

With
-webkit-

Internet Explorer

No
support

* Assumes latest beta

Writing 2 CSS rules for every negation we wanted

.post {
font-size:75%;
}

.post:first-child {
font-size: inherit;
}

.post :not ( :first-child ) { font-size: 75%; }

• Only negates simple selectors, so things like p:not(h1 + p) or even p:not([class][title]) are not possible yet
• Specificity gotcha: Its argument contributes to overall specificity, the :not() pseudo-class doesn't

Firefox

Full
support

Google Chrome

Full
support

Opera

Full
support

Apple Safari

Full
support

Internet Explorer

Full
support

* Assumes latest beta

• Loading at least 4KB of a JS library or writing several lines of complex custom code
• Slower
• Property changes had to be done in JavaScript

transition: 1.5s opacity ease-out

transition: 2s opacity , .5s height ease-in

transition: .5s height , .5s .5s width

Also available as a separate property (transition-delay)

• Little control or feedback over playback
• Not all values are transition-able (e.g. height:0 → height:auto)
• Most commonly needed transition is impossible: from display:none to display:block via opacity or height

Firefox

With
-moz-

Google Chrome

With
-webkit-

Opera

With
-o-

Apple Safari

With
-webkit-

Internet Explorer

No
support

* Assumes latest beta

checkbox.addEventListener('change', function(){
var classes = this.nextElementSibling.classList;
if(this.checked) {
    classes.add('checkboxChecked');
} else {
    classes.remove('checkboxChecked');
}
});

Even worse in actual situations, where older browsers matter

Custom radios & checkboxes by Ryan Seddon

Firefox

Full
support

Google Chrome

Full
support

Opera

Full
support

Apple Safari

Full
support

Internet Explorer

Full
support

* Assumes latest beta

Setting the CSS property through JavaScript, performing the calculations on the computed styles, like:

var element = $(…);
element.css('width', .5 * $(element).parent().css('width') 
- element.css('borderLeftWidth') 
- element.css('borderRightWidth') 
- element.css('paddingLeft')
- element.css('paddingRight')
);

or just giving up altogether and using a very rough estimate (e.g. 48%)

padding: .5em;
border: 1px solid;
width: calc(50% - 2*.5em - 2*1px);

• Supports +, -, *, /, mod
• Doesn't accept attr() values for calculations

Firefox

With
-moz-

Google Chrome

No
support

Opera

No
support

Apple Safari

No
support

Internet Explorer

Full
support

* Assumes latest beta

Browsers ignore stuff they don’t understand

That includes:

• Unknown CSS properties and values
• CSS rules with a selector they can’t parse

If a CSS property is defined twice in the same rule, only the last one counts

background: black;
background: rgba(0, 0, 0, .75);

• If RGBA is supported, the second declaration overrides the first
• Otherwise, it’s ignored and the first one is applied

function isPropertySupported(property) {
if(property in document.body.style) return true;
    
var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'],
	prefProperty = property.charAt(0).toUpperCase() + property.substr(1);
	
for(var i=0; i<prefixes.length; i++) {
	if((prefixes[i] + prefProperty) in document.body.style) return true;
}

return false;
}

function isRGBASupported() {
var element = document.createElement('div');
    
try { element.style.color = 'rgba(0,0,0,.5)'; }
catch(e) { return false; }

return !!element.style.color;
}

function isSelectorSupported(selector) {
try {
   document.querySelector(selector);
   return true;
} catch(e) { return false; }
}

• Assumes Selectors API support, so it’s only useful for CSS3 selector detection
• Doesn't test for buggy support, just whether the browser recognizes the selector