From 228b2cf18533a9ef24d7ef6e43a19b14fd3ec390 Mon Sep 17 00:00:00 2001 From: atomiks Date: Mon, 5 Mar 2018 18:22:51 +1000 Subject: [PATCH] Update caniuse-db dependency --- docs/3df57813b7ec2de885ea6075ff46ed46.js | 28 +++++++-------- docs/index.html | 44 ++++++++++++------------ index.html | 44 ++++++++++++------------ package-lock.json | 16 ++++----- package.json | 2 +- 5 files changed, 67 insertions(+), 67 deletions(-) diff --git a/docs/3df57813b7ec2de885ea6075ff46ed46.js b/docs/3df57813b7ec2de885ea6075ff46ed46.js index 2b162ce04..1325092ff 100644 --- a/docs/3df57813b7ec2de885ea6075ff46ed46.js +++ b/docs/3df57813b7ec2de885ea6075ff46ed46.js @@ -1,30 +1,30 @@ -require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;ie.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight)); -},{}],22:[function(require,module,exports) { +},{}],31:[function(require,module,exports) { var global = (1,eval)("this"); var e=(0,eval)("this");!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.feather=n():e.feather=n()}("undefined"!=typeof self?self:this,function(){return function(e){var n={};function i(t){if(n[t])return n[t].exports;var l=n[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,i),l.l=!0,l.exports}return i.m=e,i.c=n,i.d=function(e,n,t){i.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:t})},i.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(n,"a",n),n},i.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},i.p="",i(i.s=49)}([function(e,n,i){var t=i(36)("wks"),l=i(15),r=i(1).Symbol,o="function"==typeof r;(e.exports=function(e){return t[e]||(t[e]=o&&r[e]||(o?r:l)("Symbol."+e))}).store=t},function(e,n){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,n){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,n,i){var t=i(1),l=i(7),r=i(8),o=i(10),a=i(11),c=function(e,n,i){var y,p,h,x,s=e&c.F,u=e&c.G,f=e&c.S,d=e&c.P,v=e&c.B,g=u?t:f?t[n]||(t[n]={}):(t[n]||{}).prototype,m=u?l:l[n]||(l[n]={}),M=m.prototype||(m.prototype={});for(y in u&&(i=n),i)h=((p=!s&&g&&void 0!==g[y])?g:i)[y],x=v&&p?a(h,t):d&&"function"==typeof h?a(Function.call,h):h,g&&o(g,y,h,e&c.U),m[y]!=h&&r(m,y,x),d&&M[y]!=h&&(M[y]=h)};t.core=l,c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,e.exports=c},function(e,n,i){var t=i(9),l=i(29),r=i(31),o=Object.defineProperty;n.f=i(5)?Object.defineProperty:function(e,n,i){if(t(e),n=r(n,!0),t(i),l)try{return o(e,n,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[n]=i.value),e}},function(e,n,i){e.exports=!i(12)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,n){var i={}.hasOwnProperty;e.exports=function(e,n){return i.call(e,n)}},function(e,n){var i=e.exports={version:"2.5.3"};"number"==typeof __e&&(__e=i)},function(e,n,i){var t=i(4),l=i(14);e.exports=i(5)?function(e,n,i){return t.f(e,n,l(1,i))}:function(e,n,i){return e[n]=i,e}},function(e,n,i){var t=i(2);e.exports=function(e){if(!t(e))throw TypeError(e+" is not an object!");return e}},function(e,n,i){var t=i(1),l=i(8),r=i(6),o=i(15)("src"),a=Function.toString,c=(""+a).split("toString");i(7).inspectSource=function(e){return a.call(e)},(e.exports=function(e,n,i,a){var y="function"==typeof i;y&&(r(i,"name")||l(i,"name",n)),e[n]!==i&&(y&&(r(i,o)||l(i,o,e[n]?""+e[n]:c.join(String(n)))),e===t?e[n]=i:a?e[n]?e[n]=i:l(e,n,i):(delete e[n],l(e,n,i)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[o]||a.call(this)})},function(e,n,i){var t=i(32);e.exports=function(e,n,i){if(t(e),void 0===n)return e;switch(i){case 1:return function(i){return e.call(n,i)};case 2:return function(i,t){return e.call(n,i,t)};case 3:return function(i,t,l){return e.call(n,i,t,l)}}return function(){return e.apply(n,arguments)}}},function(e,n){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,n){e.exports={}},function(e,n){e.exports=function(e,n){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:n}}},function(e,n){var i=0,t=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+t).toString(36))}},function(e,n,i){var t=i(34),l=i(19);e.exports=function(e){return t(l(e))}},function(e,n,i){var t=i(11),l=i(38),r=i(39),o=i(9),a=i(22),c=i(40),y={},p={};(n=e.exports=function(e,n,i,h,x){var s,u,f,d,v=x?function(){return e}:c(e),g=t(i,h,n?2:1),m=0;if("function"!=typeof v)throw TypeError(e+" is not iterable!");if(r(v)){for(s=a(e.length);s>m;m++)if((d=n?g(o(u=e[m])[0],u[1]):g(e[m]))===y||d===p)return d}else for(f=v.call(e);!(u=f.next()).done;)if((d=l(f,g,u.value,n))===y||d===p)return d}).BREAK=y,n.RETURN=p},function(e,n){var i=Math.ceil,t=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?t:i)(e)}},function(e,n){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,n,i){"use strict";var t=i(52),l=i(3),r=i(10),o=i(8),a=i(6),c=i(13),y=i(53),p=i(24),h=i(59),x=i(0)("iterator"),s=!([].keys&&"next"in[].keys()),u=function(){return this};e.exports=function(e,n,i,f,d,v,g){y(i,n,f);var m,M,w,b=function(e){if(!s&&e in k)return k[e];switch(e){case"keys":case"values":return function(){return new i(this,e)}}return function(){return new i(this,e)}},A=n+" Iterator",_="values"==d,z=!1,k=e.prototype,S=k[x]||k["@@iterator"]||d&&k[d],H=!s&&S||b(d),V=d?_?b("entries"):H:void 0,O="Array"==n&&k.entries||S;if(O&&(w=h(O.call(new e)))!==Object.prototype&&w.next&&(p(w,A,!0),t||a(w,x)||o(w,x,u)),_&&S&&"values"!==S.name&&(z=!0,H=function(){return S.call(this)}),t&&!g||!s&&!z&&k[x]||o(k,x,H),c[n]=H,c[A]=u,d)if(m={values:_?H:b("values"),keys:v?H:b("keys"),entries:V},g)for(M in m)M in k||r(k,M,m[M]);else l(l.P+l.F*(s||z),n,m);return m}},function(e,n,i){var t=i(55),l=i(37);e.exports=Object.keys||function(e){return t(e,l)}},function(e,n,i){var t=i(18),l=Math.min;e.exports=function(e){return e>0?l(t(e),9007199254740991):0}},function(e,n,i){var t=i(36)("keys"),l=i(15);e.exports=function(e){return t[e]||(t[e]=l(e))}},function(e,n,i){var t=i(4).f,l=i(6),r=i(0)("toStringTag");e.exports=function(e,n,i){e&&!l(e=i?e:e.prototype,r)&&t(e,r,{configurable:!0,value:n})}},function(e,n,i){var t=i(19);e.exports=function(e){return Object(t(e))}},function(e,n,i){var t=i(35),l=i(0)("toStringTag"),r="Arguments"==t(function(){return arguments}());e.exports=function(e){var n,i,o;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(i=function(e,n){try{return e[n]}catch(e){}}(n=Object(e),l))?i:r?t(n):"Object"==(o=t(n))&&"function"==typeof n.callee?"Arguments":o}},function(e,n,i){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=o(i(86)),l=o(i(88)),r=o(i(89));function o(e){return e&&e.__esModule?e:{default:e}}n.default=Object.keys(l.default).map(function(e){return new t.default(e,l.default[e],r.default[e])}).reduce(function(e,n){return e[n.name]=n,e},{})},function(e,n,i){"use strict";var t=i(51)(!0);i(20)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,n=this._t,i=this._i;return i>=n.length?{value:void 0,done:!0}:(e=t(n,i),this._i+=e.length,{value:e,done:!1})})},function(e,n,i){e.exports=!i(5)&&!i(12)(function(){return 7!=Object.defineProperty(i(30)("div"),"a",{get:function(){return 7}}).a})},function(e,n,i){var t=i(2),l=i(1).document,r=t(l)&&t(l.createElement);e.exports=function(e){return r?l.createElement(e):{}}},function(e,n,i){var t=i(2);e.exports=function(e,n){if(!t(e))return e;var i,l;if(n&&"function"==typeof(i=e.toString)&&!t(l=i.call(e)))return l;if("function"==typeof(i=e.valueOf)&&!t(l=i.call(e)))return l;if(!n&&"function"==typeof(i=e.toString)&&!t(l=i.call(e)))return l;throw TypeError("Can't convert object to primitive value")}},function(e,n){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,n,i){var t=i(9),l=i(54),r=i(37),o=i(23)("IE_PROTO"),a=function(){},c=function(){var e,n=i(30)("iframe"),t=r.length;for(n.style.display="none",i(58).appendChild(n),n.src="javascript:",(e=n.contentWindow.document).open(),e.write("

Explanation

  1. position: relative on the parent establishes a Cartesian positioning context for pseudo-elements.
  2. ::after defines a pseudo element.
  3. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  5. width: 240px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
  6. height: 25px is the height of the fading gradient pseudo-element, which should be kept relatively small.
  7. bottom: 0 positions the pseudo-element at the bottom of the parent.
  8. pointer-events: none specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.

Browser support

94.8%

✅ No caveats.

Popout menuinteractivity

Reveals an interactive popout menu on hover.

HTML

<div class="reference">
+

Demo

Content to be scrolled

Explanation

  1. position: relative on the parent establishes a Cartesian positioning context for pseudo-elements.
  2. ::after defines a pseudo element.
  3. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  5. width: 240px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
  6. height: 25px is the height of the fading gradient pseudo-element, which should be kept relatively small.
  7. bottom: 0 positions the pseudo-element at the bottom of the parent.
  8. pointer-events: none specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.

Browser support

95.4%

✅ No caveats.

Popout menuinteractivity

Reveals an interactive popout menu on hover.

HTML

<div class="reference">
   <div class="popout-menu">
     Popout menu
   </div>
@@ -329,14 +329,14 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   background-color: rgba(0, 150, 255, 0.3);
   text-shadow: none;
 }
-

Demo

Pretty text underline without clipping descending letters.

Explanation

  1. text-shadow: ... has 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger px size.
  2. background-image: linear-gradient(...) creates a 90deg gradient with the current text color (currentColor).
  3. The background-* properties size the gradient as 1x1px at the bottom and repeats it along the x-axis.
  4. The ::selection pseudo selector ensures the text shadow does not interfere with text selection.

Browser support

94.8%

⚠️ The distance of the underline from the text depends on the internal metrics of a font, so you must ensure everyone sees the same font (i.e. no system fonts which will change based on the OS).

Reset all stylesvisual

Resets all styles to default values with one property. This will not affect direction and unicode-bidi properties.

HTML

<div class="reset-all-styles">
+

Demo

Pretty text underline without clipping descending letters.

Explanation

  1. text-shadow: ... has 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger px size.
  2. background-image: linear-gradient(...) creates a 90deg gradient with the current text color (currentColor).
  3. The background-* properties size the gradient as 1x1px at the bottom and repeats it along the x-axis.
  4. The ::selection pseudo selector ensures the text shadow does not interfere with text selection.

Browser support

95.4%

⚠️ The distance of the underline from the text depends on the internal metrics of a font, so you must ensure everyone sees the same font (i.e. no system fonts which will change based on the OS).

Reset all stylesvisual

Resets all styles to default values with one property. This will not affect direction and unicode-bidi properties.

HTML

<div class="reset-all-styles">
   <h4>Title</h4>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
 </div>

CSS

.reset-all-styles {
   all: initial;
 }
-

Demo

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

Explanation

The all property allows you to reset all styles (inherited or not) to default values.

Browser support

87.5%

⚠️ MS Edge status is under consideration.

Shape separatorvisual

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

HTML

<div class="shape-separator"></div>
+

Demo

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

Explanation

The all property allows you to reset all styles (inherited or not) to default values.

Browser support

88.3%

⚠️ MS Edge status is under consideration.

Shape separatorvisual

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

HTML

<div class="shape-separator"></div>

CSS

.shape-separator {
   position: relative;
   height: 48px;
@@ -350,7 +350,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   height: 24px;
   bottom: 0;
 }
-

Demo

Explanation

  1. position: relative on the element establishes a Cartesian positioning context for pseudo elements.
  2. ::after defines a pseudo element.
  3. background-image: url(...) adds the SVG shape (a 24x24 triangle in base64 format) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated.
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  5. width: 100% ensures the element stretches the entire width of its parent.
  6. height: 24px is the same height as the shape.
  7. bottom: 0 positions the pseudo element at the bottom of the parent.

Browser support

98.0%

✅ No caveats.

Sibling fadeinteractivity

Fades out the siblings of a hovered item.

HTML

<div class="sibling-fade">
+

Demo

Explanation

  1. position: relative on the element establishes a Cartesian positioning context for pseudo elements.
  2. ::after defines a pseudo element.
  3. background-image: url(...) adds the SVG shape (a 24x24 triangle in base64 format) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated.
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  5. width: 100% ensures the element stretches the entire width of its parent.
  6. height: 24px is the same height as the shape.
  7. bottom: 0 positions the pseudo element at the bottom of the parent.

Browser support

98.3%

✅ No caveats.

Sibling fadeinteractivity

Fades out the siblings of a hovered item.

HTML

<div class="sibling-fade">
   <span>Item 1</span>
   <span>Item 2</span>
   <span>Item 3</span>
@@ -365,7 +365,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
 .sibling-fade:hover span:not(:hover) {
   opacity: 0.5;
 }
-

Demo

Explanation

  1. transition: opacity 0.2s specifies that changes to opacity will be transitioned over 0.2 seconds.
  2. .sibling-fade:hover span:not(:hover) specifies that when the parent is hovered, select any span children that are not currently being hovered and change their opacity to 0.5.

Browser support

94.9%

✅ No caveats.

System font stackvisual

Uses the native font of the operating system to get close to a native app feel.

HTML

<p class="system-font-stack">This text uses the system font.</p>
+

Demo

Explanation

  1. transition: opacity 0.2s specifies that changes to opacity will be transitioned over 0.2 seconds.
  2. .sibling-fade:hover span:not(:hover) specifies that when the parent is hovered, select any span children that are not currently being hovered and change their opacity to 0.5.

Browser support

95.4%

✅ No caveats.

System font stackvisual

Uses the native font of the operating system to get close to a native app feel.

HTML

<p class="system-font-stack">This text uses the system font.</p>

CSS

.system-font-stack {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
     Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -385,4 +385,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   text-overflow: ellipsis;
   width: 200px;
 }
-

Demo

This text will be truncated if it exceeds 200px in width.

Explanation

  1. overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
  2. white-space: nowrap prevents the text from exceeding one line in height.
  3. text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
  4. width: 200px; ensures the element has a dimension, to know when to get ellipsis

Browser support

98.1%

⚠️ Only works for single line elements.

\ No newline at end of file +

Demo

This text will be truncated if it exceeds 200px in width.

Explanation

  1. overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
  2. white-space: nowrap prevents the text from exceeding one line in height.
  3. text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
  4. width: 200px; ensures the element has a dimension, to know when to get ellipsis

Browser support

98.4%

⚠️ Only works for single line elements.

\ No newline at end of file diff --git a/index.html b/index.html index 45f52d062..ba9401a12 100644 --- a/index.html +++ b/index.html @@ -186,7 +186,7 @@

Browser support

- 94.8% + 95.3%

✅ No caveats.

@@ -233,7 +233,7 @@

Browser support

- 98.2% + 98.4%

✅ No caveats.

@@ -275,7 +275,7 @@

Browser support

- 95.0% + 95.5%

✅ No caveats.

@@ -439,7 +439,7 @@

Browser support

- 87.3% + 88.0%

⚠️ Scrollbar styling doesn't appear to be on any standards track.

@@ -484,7 +484,7 @@

Browser support

- 84.6% + 84.9%

⚠️ Requires prefixes for full support and is not actually @@ -522,7 +522,7 @@ in any specification.

Browser support

- 86.3% + 87.2%

⚠️ Requires prefixes for full support. @@ -586,7 +586,7 @@ in any specification.

Browser support

- 94.8% + 95.3%

⚠️ Requires prefixes for full support.

@@ -683,7 +683,7 @@ in any specification.

Browser support

- 87.2% + 88.0%

✅ No caveats.

@@ -726,7 +726,7 @@ in any specification.

Browser support

- 97.9% + 98.1%

✅ No caveats.

@@ -776,7 +776,7 @@ in any specification.

Browser support

- 97.8% + 98.1%

⚠️ Needs prefixes for full support.

@@ -824,7 +824,7 @@ in any specification.

Browser support

- 97.8% + 98.1%

⚠️ Needs prefixes for full support.

@@ -872,7 +872,7 @@ in any specification.

Browser support

- 90.7% + 91.5%

⚠️ Uses non-standard properties.

@@ -920,7 +920,7 @@ in any specification.

Browser support

- 86.6% + 87.6%

✅ No caveats.

@@ -988,7 +988,7 @@ in any specification.

Browser Support

- 95.0% + 95.5%

⚠️ Needs alternate syntax and JavaScript user agent checking for full support.

@@ -1081,7 +1081,7 @@ in any specification.

Browser support

- 94.9% + 95.4%

✅ No caveats.

@@ -1204,7 +1204,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

Browser support

- 87.2% + 88.0%

@@ -1301,7 +1301,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

Browser support

- 94.8% + 95.4%

✅ No caveats.

@@ -1444,7 +1444,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

Browser support

- 94.8% + 95.4%

⚠️ The distance of the underline from the text depends on the internal metrics of a font, so you must ensure everyone sees the same font (i.e. no system fonts which will change based on the OS).

@@ -1488,7 +1488,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

Browser support

- 87.5% + 88.3%

⚠️ MS Edge status is under consideration.

@@ -1552,7 +1552,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

Browser support

- 98.0% + 98.3%

✅ No caveats.

@@ -1617,7 +1617,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

Browser support

- 94.9% + 95.4%

✅ No caveats.

@@ -1787,7 +1787,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

Browser support

- 98.1% + 98.4%

⚠️ Only works for single line elements.

diff --git a/package-lock.json b/package-lock.json index 39a3cb13c..064af836b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -236,7 +236,7 @@ "dev": true, "requires": { "browserslist": "1.7.7", - "caniuse-db": "1.0.30000810", + "caniuse-db": "1.0.30000812", "normalize-range": "0.1.2", "num2fraction": "1.2.2", "postcss": "5.2.18", @@ -261,7 +261,7 @@ "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", "dev": true, "requires": { - "caniuse-db": "1.0.30000810", + "caniuse-db": "1.0.30000812", "electron-to-chromium": "1.3.34" } }, @@ -1703,7 +1703,7 @@ "dev": true, "requires": { "browserslist": "1.7.7", - "caniuse-db": "1.0.30000810", + "caniuse-db": "1.0.30000812", "lodash.memoize": "4.1.2", "lodash.uniq": "4.5.0" }, @@ -1714,16 +1714,16 @@ "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", "dev": true, "requires": { - "caniuse-db": "1.0.30000810", + "caniuse-db": "1.0.30000812", "electron-to-chromium": "1.3.34" } } } }, "caniuse-db": { - "version": "1.0.30000810", - "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000810.tgz", - "integrity": "sha1-vSWDDEHvq2Qzmi44H0lnc0PIRQk=", + "version": "1.0.30000812", + "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000812.tgz", + "integrity": "sha1-KcKN1pJ+5D6MKrZI5SNqyRbJfWk=", "dev": true }, "caniuse-lite": { @@ -7619,7 +7619,7 @@ "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", "dev": true, "requires": { - "caniuse-db": "1.0.30000810", + "caniuse-db": "1.0.30000812", "electron-to-chromium": "1.3.34" } }, diff --git a/package.json b/package.json index 82bd3ffef..7325aa9c1 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-2": "^6.24.1", - "caniuse-db": "^1.0.30000810", + "caniuse-db": "^1.0.30000812", "jsdom": "^11.6.2", "marked": "^0.3.16", "node-sass": "^4.7.2",