cimmanon

CSS Flexbox: Specification Unification

The flexbox module has been kicking around for quite some time. There are 3 different specifications that have been implemented in the major browsers. This is an overview of how to cover all of them. If you're interested in how to use flexbox, there are many fine articles out there (some have been linked below).

September 2012 Candidate Recommendation

Browsers

Chrome 21 (prefixed)
Opera 12.1 (unprefixed)

	function addSubformListeners(el, isSubform) {
	el.addEventListener("click", addListenerIfSubform, false); // bubbling
	var useFieldsetFallback = false;

	// Firefox allows disabled form elements to intercept click events, but does not allow them to bubble,
	// so we have to inject some special elements to sit on top and intercept the click events
	if (!hasEventsWhenDisabled()) {
	addOverlays();
	}

	// ----
	// libsass (v0.7.0)
	// ----

	$ie: false;
	$large-up: "(min-width: 500px)";

	$margin: 10;
	$columns: 10;
	$class-slug: 'foo';

	// ----
	// Sass (v3.3.1)
	// Compass (v1.0.0.alpha.18)
	// ----

	$sel: '';
	@for $i from 1 through 10 {
	$sel: if($i == 1, "ul", nest($sel, "ul")) !global;

	#{$sel} {

	// ----
	// Sass (v3.3.0)
	// Compass (v1.0.0.alpha.18)
	// ----

	@mixin placeholder {
	::-webkit-input-placeholder {@content}
	:-moz-placeholder {@content}
	::-moz-placeholder {@content}
	:-ms-input-placeholder {@content}

	// $flexbox-support values:
	// standard: Draft #3
	// modern: Draft #2 or newer
	// legacy: Draft #1 only
	// wrap: versions that support wrapping (includes feature query on the display property on the unprefixed standard value)
	// all: all versions

	$flexbox-support-threshold: $critical-usage-threshold !default;
	$flexbox-support: modern !default;
	$flexbox-warnings: true !default;

	// ----
	// Sass (v3.3.0.rc.1)
	// Compass (v0.13.alpha.10)
	// ----

	%colors {
	&.error {
	color: red;
	}

	-- new splice
	dfPlainText :: Monad m => View Text -> Splice m
	dfPlainText view = do
	(ref, attrs) <- getRefAttributes Nothing
	let
	ref' = absoluteRef ref view
	value = fieldInputText ref view
	--value = fieldInputBool ref view
	return [X.TextNode value]

	function dfList(el) {
	var listTemplate = el.querySelector('.inputListTemplate');
	var indices = el.querySelector('[name="' + el.id + '.indices"]');
	var counter = el.querySelectorAll(listTemplate.tagName.toLowerCase() + '.inputListItem').length;

	var matchMinusOne = new RegExp("\-1");
	var matchListTemplate = new RegExp("inputListTemplate");
	var matchNumber = new RegExp("[0-9]", "g");

	el.addEventListener("click", manageCodes, false);

	@function foo-shadow($color, $size, $layers: 1) {
	$transparency: (10 - $layers) * .1;
	$opts: ();
	@for $i from 1 to $layers {
	$opts: append($opts, 0 0 0 ($size * $i) transparentize($color, $transparency + (.1 * $i)), comma);
	}
	@return $opts;
	}

	$colorGood: lawngreen;