Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.
100+ different js counter apps... |
tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.
There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.
Here are official'ish documents to outline the developer community's desires.
A lot of people mentioned other immutable JS libraries after reading my post. I thought it would be good to make a list of available ones.
There are two types of immutable libraries: simple helpers for copying JavaScript objects, and actual persistent data structure implementations. My post generally analyzed the tradeoffs between both kinds of libraries and everything applies to the below libraries in either category.
Libraries are sorted by github popularity.
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>French Line</title> | |
<style id="jsbin-css"> | |
body { | |
display: flex; | |
flex-direction: column; | |
flex-wrap: wrap; |
// ---- | |
// Sass (v3.4.9) | |
// Compass (v1.0.1) | |
// ---- | |
/// Constant maps | |
/// Should not be dynamically updated. | |
/// @access private | |
/// @prop {List} TIME - List of `<time>` units | |
/// @prop {List} FREQUENCY - List of `<frequency>` units |
{ | |
"env": { | |
"node": true, | |
"mocha": true | |
}, | |
"rules": { | |
"no-alert": 2, | |
"no-array-constructor": 2, | |
"no-caller": 2, |