All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| # this way is best if you want to stay up to date | |
| # or submit patches to node or npm | |
| mkdir ~/local | |
| # I use .bash_profile instead of .bashrc | |
| echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bash_profile | |
| . ~/.bash_profile | |
| # could also fork, and then clone your own fork instead of the official one |
| /* ---------------------------------------------------------- */ | |
| /* */ | |
| /* A media query that captures: */ | |
| /* */ | |
| /* - Retina iOS devices */ | |
| /* - Retina Macs running Safari */ | |
| /* - High DPI Windows PCs running IE 8 and above */ | |
| /* - Low DPI Windows PCs running IE, zoomed in */ | |
| /* - Low DPI Windows PCs and Macs running Firefox, zoomed in */ | |
| /* - Android hdpi devices and above */ |
| @mixin ie6 { * html & { @content } } | |
| #logo { | |
| background-image: url("/images/logo.png"); | |
| @include ie6 { background-image: url("/images/logo.gif"); } | |
| } |
| <!DOCTYPE html> | |
| <!--[if IE 8]> <html lang="sv-SE" class="no-js ie8"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html lang="sv-SE" class="no-js"> <!--<![endif]--> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Breakpoint detection test</title> | |
| <style type="text/css" media="screen"> | |
| @media screen and (min-width: 320px) { | |
| #page:after { | |
| content: 'smallest'; /* represent the current width-bracket */ |
| if (typeof (AC) === "undefined") { | |
| AC = {} | |
| } | |
| AC.ImageReplacer = Class.create({ | |
| _defaultOptions: { | |
| listenToSwapView: true, | |
| filenameRegex: /(.*)(\.[a-z]{3}($|#.*|\?.*))/i, | |
| filenameInsert: "_☃x", | |
| ignoreCheck: /(^http:\/\/movies\.apple\.com\/|\/105\/|\/global\/elements\/quicktime\/|_(([2-9]|[1-9][0-9]+)x|nohires)(\.[a-z]{3})($|#.*|\?.*))/i, | |
| attribute: "data-hires", |
| .fake_file_input { | |
| background: url(../images/fake_file_input.png) no-repeat; | |
| cursor: pointer; | |
| width: 150px; | |
| height: 30px; | |
| overflow: hidden; | |
| position: relative; | |
| display: inline-block; | |
| *display: inline; | |
| *zoom: 1; |
NOTE I now use the conventions detailed in the SUIT framework
Used to provide structural templates.
Pattern
t-template-name
| @mixin border-radius($radius, $prefixes: -moz -webkit -o) { | |
| @each $prefix in $prefixes { | |
| #{$prefix}-border-radius:$radius; | |
| } | |
| border-radius:$radius; | |
| } | |
| #id { | |
| @include border-radius(5px, -moz -webkit); |
| PS1='\r\n\[\033[0;35m\]\u@\H\[\033[0m\] in \[\033[34m\]\w\[\033[37m\]\r\n∴ \[\033[0m\]' |