Skip to content

Instantly share code, notes, and snippets.

@subtleGradient
subtleGradient / position-fixed.css
Created July 29, 2009 16:17
Make position:fixed work in IE6
/*Make position:fixed work in IE6!*/
.fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0;}
.fixed-bottom /* position fixed Bottom */{position:fixed;bottom:0;top:auto;}
.fixed-left /* position fixed Left */{position:fixed;right:auto;left:0;}
.fixed-right /* position fixed right */{position:fixed;right:0;left:auto;}
* html,* html body /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 position fixed right */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
@taupecat
taupecat / sass-modernizr.scss
Last active October 12, 2015 21:38
Use Sass to compensate for deficiencies detected by Modernizr.js
// For example, use "no-cssanimations" for a browser that lacks CSS3 animation support
@mixin modernizr($test) {
html.#{$test} & {
@content;
}
}
@ingozoell
ingozoell / cross-browser-css-opacity.css
Created August 1, 2013 07:51
Cross-Browser CSS "Opacity"
.cross-browser-opacity {
/* Modern Browsers */ opacity: 0.7;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
/* IE 5-7 */ filter: alpha(opacity=70);
/* Netscape */ -moz-opacity: 0.7;
/* Safari 1 */ -khtml-opacity: 0.7;
}
/* http://css-tricks.com/snippets/css/cross-browser-opacity/ */
IMPORTANT
Please duplicate this radar for a Safari fix!
This will clean up a 50-line workaround.
rdar://22376037 (https://openradar.appspot.com/radar?id=4965070979203072)
//////////////////////////////////////////////////////////////////////////////
(Now available as a standalone repo.)
@ingozoell
ingozoell / hidpi-retina-detection.css
Created November 3, 2013 13:25
Remove image height and width attribute excerpt for HiDPI/Retina devices
#hidpi { position: relative; display: none; z-index: 0;}
/* Hidpi/Retina Check
/* https://gist.github.com/sergejmueller/2642698 */
@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
#hidpi { display: none; position: relative; z-index: -1; }
}
@ingozoell
ingozoell / optimized-htaccess-wp
Created November 3, 2013 17:54
Optimized .htaccess file for WordPress (based on HTML5 Boilerplate)
################################################################################################################
# #
# HTML5 BOILERPLATE #
# https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess #
# 04/01/2013 #
################################################################################################################
@ingozoell
ingozoell / css-mobile-detection.css
Created November 3, 2013 18:00
Mobile Detection via CSS/jQuery
#mobile-detection { position: relative; display: none; z-index: 0; }
@media only screen and (max-width: 600px) {
#mobile-detection { position: relative; display: none; z-index: -1;}
#page {top:10px; }
}
@ingozoell
ingozoell / cross-browser-border-radius.css
Created November 4, 2013 12:31
Cross-Browser border-radius support (+http://css3pie.com/ )
.border-radius {
-webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
-moz-border-radius: 12px; /* Firefox 1-3.6 */
border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}
/* Support via CSS3 PIE http://css3pie.com/ */
.pie { behavior: url(http://iz-multisite.de/cms/PIE.php); }
@tomblanchard
tomblanchard / mini-modernizr.html
Created April 25, 2014 14:09
Mini Modernizr: I only ever use Modernizr mostly to check for JS and / or touch screen devices. This tiny piece of code will replace the classes which are on the `<html>` element `no-js` with `js` and `no-touch` with `touch`.
<script>!function(a,b){"use strict";b.documentElement.className=b.documentElement.className.replace("no-js","js"),("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&(document.documentElement.className=document.documentElement.className.replace("no-touch","touch"))}(window,document);</script>