yukulele

<?php
function ieClasses( $min = 6, $max = 11 ) {
    $classes = array();
    preg_match("/msie (\d+)/i", $_SERVER['HTTP_USER_AGENT'], $match);
    if( count( $match ) > 0 ){
        $version = +$match[1];
        $classes[] = 'ie';
        $classes[] = 'ie' . $version;
        for( $i = $min ; $i <= $max ; $i++ ){
            if( $version < $i )

yukulele

var ieVersion = (function(){
    var classes = []
    var match = /msie (\d+)/i.exec( navigator.userAgent )
    if( match ){
        var version = +match[1]
        var min = 6
        var max = 11
        classes.push( 'ie' )
        classes.push( 'ie' + version )
        for( var i = min ; i <= max ; i++ ){

yukulele

var scrollBarWidth = (function(){
    var html = document.documentElement;
    var outer = document.createElement("div");
    var inner = document.createElement("div");
    
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.overflow = "scroll";
    
    outer.appendChild(inner);

yukulele

/**
 * urlencoded SVG checkerboard
 */
 
html{
	min-height: 300px;
	background: tan center url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%2358a"><rect x="50" width="50" height="50" /><rect y="50" width="50" height="50" /></svg>');
	background-size: 20px;
	transition:2s all;
}

yukulele

$.fn.wordify = function(){
	this.find(":not(iframe,textarea)").addBack().contents().filter(function() {
		return this.nodeType === 3;
	}).each(function() {
		var textnode = $(this);
		var text = textnode.text();
		text = text.replace(/([^\s-.,;:!?()[\]{}<>"]+)/g,'<span>$1</span>');
		textnode.replaceWith(text);
	});
	return this;

yukulele

jQuery.fn.removeInlineCss = function(property){

	if(property == null)
		return this.removeAttr('style');

	var proporties = property.split(/\s+/);

	return this.each(function(){
		var remover = 
			this.style.removeProperty   // modern browsers

yukulele

/**
 * (C)Leanest CSS spinner ever
 */

@keyframes spin {
	to { transform: rotate(1turn); }
}

.progress {
	position: relative;

yukulele

/*
Psuedo element test on <img>
*/
h1:after{
	content:"h1 after";
	color:pink;
}
h1:before{
	content:"h1 before";
	color:blue;

yukulele

// if Navigation Timing is not supported, fallback to Date.naw() called on start (sufficient in many cases)
// Date.now is also polyfilled
(function(p){
  if(!Date.now)
    Date.now = function(){return +new Date};
  
  if (!p.now){
    var start = (p.timing && p.timing.navigationStart) || Date.now();
    p.now = function now(){
      return Date.now() - start;

yukulele

/*matrix experiments*/

div{
	width:200px;
	height:200px;
	margin:50px;
	background:grey;
	transition:transform 1s ease;
	border-top-right-radius:100px;
	transform:matrix(1,0,0,1,0,0);