Web Developer Cheatsheet

Background Image Flickering on Hover

Code:

try {
	document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}

Reference: http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=1104

Box Sizing

Code:

div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Reference: http://www.quirksmode.org/css/box.html

Background Clip

Preview:

Code:

-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;

Reference: https://developer.mozilla.org/en/CSS/background-clip

Text Rendering

Preview:

Lorem ipsum

Code:

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

Reference: https://developer.mozilla.org/en/CSS/text-rendering

Reference: http://maxvoltar.com/archive/-webkit-font-smoothing

Firefox Outline

Preview:

Lorem ipsum dolor sit amet

Code:

a:focus { outline: none; }

Reference: https://developer.mozilla.org/en/CSS/outline

Firefox Buttons

Code:

button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

CDN Hosted JQuery

Code:

<script type="text/javascript" src="//code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.6.4.js"></script>

Reference: http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery

Selection Color

Preview:

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Code:

::selection { background: rgba(0, 255, 255, 0.15); }
::-moz-selection { background: rgba(0, 255, 255, 0.15); }

Reference: http://www.quirksmode.org/css/selection.html

Background Gradient

Preview:

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Code:

background: -moz-linear-gradient(top, #fff, #eee, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd), color-stop(0.5, #eee));

Reference: https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Reference: http://webkit.org/blog/175/introducing-css-gradients/

IE Conditional Comments

Code:

<!--[if IE]> Internet Explorer <![endif]-->
<!--[if IE 6]> Internet Explorer 6 <![endif]-->
<!--[if gt IE 6]> Internet Explorer > 6 <![endif]-->
<!--[if gte IE 6]> Internet Explorer >= 6 <![endif]-->
<!--[if lt IE 9]> Internet Explorer < 9 <![endif]-->
<!--[if lte IE 9]> Internet Explorer <= 9 <![endif]-->

Reference: http://www.quirksmode.org/css/condcom.html

IE Opacity

Preview:

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Code:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

Reference: http://msdn.microsoft.com/en-us/library/ms532967.aspx

IE PNG Fix

Code:

background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');

Reference: http://msdn.microsoft.com/en-us/library/ms532969.aspx