#hasfiddle

[dropshadows]

Firefox doesn't support canvas composite darker

Firefox doesn't support canvas globalCompositeOperation darker. As it turns out, the darker composite value was removed from the canvas spec in 2007. See the globalCompositeOperation examples on MDN.

The closest solution is to use difference (which oddly enough isn't in the spec), which Firefox (currently v28) does support. But difference is different from darker. difference subtracts channel values, darker multiplies them. If you're using primary colors (#f00, #f0f, etc.) it may work.

IE10 supports neither.

See the Pen darker/difference canvas composite by David DeSandro (@desandro) on CodePen.

''

[dropshadows]

Safari rounds off fractional pixels

I'm looking to measure the width of an element with width: 66.666%, whose container is width: 300px. Most browsers return a fractional pixel value, i.e. 199.98px. Safari rounds off the fractional pixel value to 199px. It's a bit odd, as I would expect it would at least round up to 200px when the value is that close.

See demo:

See the Pen getComputedStyle width 66.666% by David DeSandro (@desandro) on CodePen.

I've opened WebKit bug #126844 to capture this behavior.

I have found that using calc() values produces more expected results. If I change the width of the element to width: calc( 100% * 2 / 3 ), Safari returns with 200px. It's still problematic, but it's an improvement.

See the Pen getComputedStyle width calc( 100% * 2/3) by David DeSandro (@desandro) on CodePen.

[dropshadows]

Transition end propertyName

When listening to transition End event, the event object comes with propertyName. This is useful when detecting just what transition has completed.

elem.addEventListener( 'transitionend' function( event ) { console.log( event.propertyName + 'transition completed' ); });

Also interesting is how the transition end event will only trigger once if a property gets changed again, during a previous transition.

See the Pen transtionEnd by David DeSandro (@desandro) on CodePen

[dropshadows]

Flex box with collapsed height

By default, flex box makes item elements inherit the height of their container. To disable this behavior, and collapse item heights, use align: start (or the proper variation there-of).

.row { /* flex box */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* align start, disable vertical height */ -webkit-box-align: start; -moz-box-align: start; /* FF <=20 */ -ms-flex-align: start; /* IE10 */ -webkit-align-items: flex-start; align-items: flex-start; }

Check out this Pen!

[dropshadows]

Collapsing margins

Collapsing margins is an ancient property of the CSS Box Model, which I am just now comprehending. In short, with two block elements, will collapse the margins between them collapse to the greater margin. But this only applies to block elements. Floated and inline-block elements will keep margins un-collapsed.

See example on CodePen.

[dropshadows]

Gradient syntax helper

Modernizr can detect general support for CSS3 gradients. But here's a little script to determine the vendor gradient syntax, i.e. -webkit-linear-gradient, if supported by the browser.

jsfiddle.net/desandro/bxMgf/

[dropshadows]

Get random letter

Here's a helper function that uses base 36 numeral system to return a random letter a to z.

function getRandomLetter() { var rand26 = Math.floor( Math.random() * 26 ); return ( ( 10 + rand26 ) / 36 ).toString(36).substring(2); }

[dropshadows]

(this is probably not new, but just in case…) Q: How to transition to height:auto? A: Transition max-height instead! jsfiddle.net/leaverou/zwvNY/

— Lea Verou (@LeaVerou) May 15, 2011

via Brad Frost:

This technique is insanely badass. I use it for all my height-animating needs, including accordions.