Read Damon Muma on this. He proposes the following jQuery solution (inspired by Thompson, fixed by me):
// Apply focus properly when accessing internal links with keyboard in WebKit browsers.
$("a[href^='#']").not("a[href='#']").click(function() {
$("#"+$(this).attr("href").slice(1)+"").focus();
});
| CULTURE SPEC.CULTURE ENGLISH NAME | |
| -------------------------------------------------------------- | |
| Invariant Language (Invariant Country) | |
| af af-ZA Afrikaans | |
| af-ZA af-ZA Afrikaans (South Africa) | |
| ar ar-SA Arabic | |
| ar-AE ar-AE Arabic (U.A.E.) | |
| ar-BH ar-BH Arabic (Bahrain) | |
| ar-DZ ar-DZ Arabic (Algeria) | |
| ar-EG ar-EG Arabic (Egypt) |
| var tabbableElements = 'a[href], area[href], input:not([disabled]),' + | |
| 'select:not([disabled]), textarea:not([disabled]),' + | |
| 'button:not([disabled]), iframe, object, embed, *[tabindex],' + | |
| '*[contenteditable]'; | |
| var keepFocus = function (context) { | |
| var allTabbableElements = context.querySelectorAll(tabbableElements); | |
| var firstTabbableElement = allTabbableElements[0]; | |
| var lastTabbableElement = allTabbableElements[allTabbableElements.length - 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] {
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
| <p class="tweetthis"> | |
| <a href="http://twitter.com/share?url=<?php urlencode(the_permalink());?>&text=<?php echo ( get_the_title());?>&via=codepo8" | |
| target="blank"> | |
| <svg class="svg-icon" viewBox="0 0 20 20"> | |
| <path fill="none" d="M14.467,6.707c-0.34,0.198-0.715,0.342-1.115,0.419c-0.318-0.335-0.775-0.545-1.279-0.545c-0.969,0-1.754,0.773-1.754,1.727c0,0.135,0.015,0.267,0.045,0.394C8.905,8.628,7.612,7.94,6.747,6.896C6.596,7.151,6.509,7.448,6.509,7.764c0,0.599,0.31,1.128,0.78,1.438C7.002,9.192,6.732,9.115,6.495,8.985c0,0.007,0,0.014,0,0.021c0,0.837,0.605,1.535,1.408,1.694c-0.147,0.04-0.302,0.06-0.462,0.06c-0.113,0-0.223-0.011-0.33-0.031c0.223,0.687,0.871,1.186,1.638,1.199c-0.6,0.464-1.356,0.739-2.179,0.739c-0.142,0-0.281-0.007-0.418-0.023c0.777,0.489,1.699,0.775,2.689,0.775c3.228,0,4.991-2.63,4.991-4.913c0-0.075-0.002-0.149-0.004-0.223c0.342-0.244,0.639-0.547,0.875-0.894c-0.316,0.137-0.652,0.23-1.008,0.272C14.057,7.448,14.336,7.11,14.467,6.707 M10,0.594c-5.195,0-9.406,4.211-9.406,9.406c0,5.195 |
