Skip to content

Instantly share code, notes, and snippets.

@chrisl8888
chrisl8888 / media-queries.scss
Last active February 13, 2025 18:43
All Media Queries breakpoints
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
@pmeenan
pmeenan / user-timing-rum.js
Last active January 18, 2024 23:46
Support routine for adding W3C user timing events to a site. Includes some basic polyfill support for browsers that don't support user timing or navigation timing (though the start time for non-navigation timing support could be improved with IE < 9 to use IE's custom start event).
// Support routines for automatically reporting user timing for common analytics platforms
// Currently supports Google Analytics, Boomerang and SOASTA mPulse
// In the case of boomerang, you will need to map the event names you want reported
// to timer names (for mPulse these need to be custom0, custom1, etc) using a global variable:
// rumMapping = {'aft': 'custom0'};
(function() {
var wtt = function(n, t, b) {
t = Math.round(t);
if (t >= 0 && t < 3600000) {
// Google Analytics
@joaocunha
joaocunha / How To Hide The Select Arrow On Firefox.md
Last active June 6, 2025 21:03
How to hide <select> dropdown's arrow in Firefox when using "-moz-appearance: none;".

This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.

How to remove hide the select arrow in Firefox using -moz-appearance:none;

TL;DR (or, the fix)

  1. Set -moz-appearance to none. This will "reset" the styling of the element;
  2. Set text-indent to 0.01px. This will "push" the text a tiny bit[1] to the right;
@geksilla
geksilla / bootsrap_class_list
Last active October 18, 2024 08:37
Bootstrap css class list
.navbar
.caret
.label
.table
.img-responsive
.img-rounded
.img-thumbnail
.img-circle
.sr-only
.lead
@jslegers
jslegers / gist:6562976
Created September 14, 2013 15:34
Hiding mobile specific content on IE6-8
/* Add the desktop-hidden class to any HTML tag that contains mobile specific content */
.desktop-hidden {
*display:none !important; /* IE6-7 */
}
@media \0 screen {
.desktop-hidden {
display:none !important; /* IE8 only */
@patrickkettner
patrickkettner / atviewport.js
Created December 2, 2013 06:20
detect css @Viewport via Modernizr
Modernizr.addTest('atviewport', function() {
return Modernizr.testStyles('', function(node, rule) {
var style = document.getElementById('smodernizr');
var sheet = style.sheet || style.styleSheet;
var supportsAtViewport
for (var i = 0; i < Modernizr._prefixes.length; i++) {
try {
var viewport = sheet.insertRule('@' + prefixes[i] + 'viewport{}', sheet.rules.length - 1);
@cou929
cou929 / detect-private-browsing.js
Last active May 1, 2024 21:07
Detect private browsing mode (InPrivate Browsing or Incognito).
function retry(isDone, next) {
var current_trial = 0, max_retry = 50, interval = 10, is_timeout = false;
var id = window.setInterval(
function() {
if (isDone()) {
window.clearInterval(id);
next(is_timeout);
}
if (current_trial++ > max_retry) {
window.clearInterval(id);
@bloodyowl
bloodyowl / gist:8460661
Last active January 3, 2016 12:09
global leaks
;(function(win){
var doc = win.document
, i = keys(doc.body.appendChild(doc.createElement("iframe")).contentWindow)
return keys(win).filter(function(a){return i.indexOf(a) == -1})
})(window)
@scottjehl
scottjehl / noncritcss.md
Last active August 12, 2023 16:57
Comparing two ways to load non-critical CSS

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/


For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

@ryboe
ryboe / bad_css
Last active May 14, 2025 17:22
Non-standard and Obsolete CSS Properties
OBSOLETE PREFIXES
-xv-interpret-as // -xv- and -o- are old Opera prefixes for the Presto
-xv-phonemes // engine. Opera switched to the Blink engine with
-xv-voice-balance // version 15. The current version is 34.
-xv-voice-duration
-xv-voice-pitch
-xv-voice-pitch-range
-xv-voice-rate
-xv-voice-stress
-xv-voice-volume