| <!-- | |
| <form autocomplete="off"> will turn off autocomplete for the form in most browsers | |
| except for username/email/password fields | |
| --> | |
| <form autocomplete="off"> | |
| <!-- fake fields are a workaround for chrome/opera autofill getting the wrong fields --> | |
| <input id="username" style="display:none" type="text" name="fakeusernameremembered"> | |
| <input id="password" style="display:none" type="password" name="fakepasswordremembered"> | |
| tell application "Google Chrome" | |
| set tab_list to every tab in the front window | |
| repeat with the_tab in tab_list | |
| set the_url to the URL of the_tab | |
| tell application "Safari" to open location the_url | |
| end repeat | |
| end tell |
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| function shakeAnimation(element){ | |
| TweenMax.to(element, .1, { | |
| x: -7, | |
| ease: Quad.easeInOut | |
| }); | |
| TweenMax.to(element, .1, { | |
| repeat: 4, | |
| x: 7, | |
| yoyo: true, | |
| delay: .1, |
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
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:
Between us [company name] and you [customer name]
| javascript:prompt('Copy this:',location.href.replace(/\./g,"\u200b."));return false; |
| // Super contrived example. This is an IIFE. It executes immediately so that the | |
| // privateProperty is in the nested scope and so that the Module property is | |
| // actually assigned the function (named inner) instead. If we didn't make it an | |
| // immediately-invoked-function-expression (IIFE) then Module would be a function | |
| // that once called would be the new (inner) function. | |
| // | |
| // I'm returning an object inside inner() that has the scope outside of that function. | |
| // That's what makes this a true closure. It's that I'm able to reference variables | |
| // from functions outside out of the one I'm currently running. Basically in this | |
| // example. Module == inner (they are the same thing). So when we call module, we're |
| /* | |
| * Easing Equations ported to CSS by @matthewlein - http://matthewlein.com/ceaser/ | |
| * Converted to SCSS vars by @pettpett | |
| * | |
| * sample usage: | |
| * a { | |
| * color: #ff0000; | |
| * transition: color 0.5s $easeOutQuint; | |
| * &:hover, |