From 45af6b49884381739c66b69435e76f194054e356 Mon Sep 17 00:00:00 2001 From: katokdoescode Date: Tue, 9 May 2023 23:37:53 +0400 Subject: [PATCH 1/3] Add focus-within and focus-visible tests --- README.md | 4 +++- dist/bundle.js | 8 ++++++++ dist/bundle.min.js | 2 +- dist/bundle.umd.js | 8 ++++++++ src/main.js | 8 ++++++++ 5 files changed, 28 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 47e5067..58e7bf8 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,8 @@ Review the full docs at [SupportsCSS.dev](https://supportscss.dev). | trigonometry | Trigonometry | `CSS.supports('width: calc(1px * cos(1deg))')` | | view-timeline | ViewTimeline | `window.ViewTimeline` | | view-transitions | ViewTransitions | `window.ViewTransition` | +| focus-within | FocusWithin | `CSS.supports("selector(:focus-within)")` | +| focus-visible | FocusVisible | `CSS.supports("selector(:focus-visible)")` | ### How were these features selected? @@ -59,4 +61,4 @@ Features were selected based on: ## Colophon -Created by [Stephanie Eckles](https://front-end.social/@5t3ph), author of [ModernCSS.dev](https://moderncss.dev), [SmolCSS.dev](https://smolcss.dev), and other [front-end dev resources](https://thinkdobecreate.com). \ No newline at end of file +Created by [Stephanie Eckles](https://front-end.social/@5t3ph), author of [ModernCSS.dev](https://moderncss.dev), [SmolCSS.dev](https://smolcss.dev), and other [front-end dev resources](https://thinkdobecreate.com). diff --git a/dist/bundle.js b/dist/bundle.js index e9ff69c..5550f66 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -132,6 +132,14 @@ if (typeof window !== "undefined" && window.CSS) { name: "view-transitions", test: window.ViewTransition, }, + { + name: "focus-within", + test: CSS.supports("selector(:focus-within)"), + }, + { + name: "focus-visible", + test: CSS.supports("selector(:focus-visible)"), + }, ]; } diff --git a/dist/bundle.min.js b/dist/bundle.min.js index 6309229..a36ac9e 100644 --- a/dist/bundle.min.js +++ b/dist/bundle.min.js @@ -1 +1 @@ -var SupportsCSS=function(t){"use strict";const e={tests:[],supportsPrefix:"supports",unsupportedClasses:!0};let s=e.supportsPrefix,o=e.unsupportedClasses;const n=":root { --a: b; } @container style(--a: b) { p { top: 1px; } }",r=(t,e,s,o)=>{const n=document.createElementNS("http://www.w3.org/2000/svg","svg"),r=document.createElement("style"),p=document.createElement(e);r.textContent=t,n.appendChild(r),n.appendChild(p),document.body.appendChild(n);const i=getComputedStyle(p).getPropertyValue(s)===o;return n.remove(),i};let p=[];"undefined"!=typeof window&&window.CSS&&(p=[{name:"at-container",test:window.CSSContainerRule},{name:"at-container-style-properties",test:r(n,"p","top","1px")},{name:"at-counter-style",test:window.CSSCounterStyleRule},{name:"at-layer",test:window.CSSLayerBlockRule},{name:"at-property",test:window.CSSPropertyRule},{name:"at-scope",test:window.CSSScopeRule},{name:"anchor",test:CSS.supports("left: anchor(center)")},{name:"color-function",test:CSS.supports("color: color(srgb 0 0 1)")},{name:"color-mix",test:CSS.supports("color: color-mix(in lch, white, black)")},{name:"container-units",test:CSS.supports("width: 1cqi")},{name:"dynamic-viewport-units",test:CSS.supports("width: 1dvi")},{name:"has",test:CSS.supports("selector(:has(+ *))")},{name:"houdini-paint-api",test:CSS.paintWorklet},{name:"individual-transforms",test:CSS.supports("transform: scale(1)")},{name:"logical-properties",test:CSS.supports("border-start-start-radius: 1px")},{name:"media-range-syntax",test:window.matchMedia("(width >= 1px)")},{name:"nesting",test:CSS.supports("selector(& a)")},{name:"nth-of-s",test:CSS.supports("selector(:nth-child(1 of .a))")},{name:"overscroll-behavior",test:CSS.supports("overscroll-behavior: none")},{name:"relative-color-syntax",test:CSS.supports("color: rgb(from red r g b / 1%)")},{name:"scroll-timeline",test:CSS.supports("scroll-timeline-name: a")},{name:"subgrid",test:CSS.supports("grid-template-rows: subgrid")},{name:"text-box-trim",test:CSS.supports("(leading-trim: both) or (text-box-trim: both)")},{name:"trigonometry",test:CSS.supports("width: calc(1px * cos(1deg))")},{name:"view-timeline",test:window.ViewTimeline},{name:"view-transitions",test:window.ViewTransition}]);const i=(t,e,n=s,r=o)=>{let p=e?n?`${n}-${t}`:t:!!r&&`no-${t}`;(e||r)&&document.documentElement.classList.add(p);const i=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");"undefined"!=typeof window&&window.SupportsCSSTests&&(SupportsCSSTests[i]=!!e,SupportsCSSTests.results={...SupportsCSSTests.results,[t]:!!e})};return t.addTest=i,t.init=t=>{if("undefined"!=typeof window&&window.CSS&&window.CSS.supports){window.SupportsCSSTests={},window.SupportsCSSTests.results={};const{tests:n,supportsPrefix:r,unsupportedClasses:a}={...e,...t};s=r,o=a;const S="all"===n;if(n.length)for(const{name:t,test:e}of p)(S||n.includes(t))&&i(t,e,r,a)}},t.testEnv=r,t}({}); +var SupportsCSS=function(t){"use strict";const e={tests:[],supportsPrefix:"supports",unsupportedClasses:!0};let s=e.supportsPrefix,o=e.unsupportedClasses;const n=":root { --a: b; } @container style(--a: b) { p { top: 1px; } }",r=(t,e,s,o)=>{const n=document.createElementNS("http://www.w3.org/2000/svg","svg"),r=document.createElement("style"),i=document.createElement(e);r.textContent=t,n.appendChild(r),n.appendChild(i),document.body.appendChild(n);const p=getComputedStyle(i).getPropertyValue(s)===o;return n.remove(),p};let i=[];"undefined"!=typeof window&&window.CSS&&(i=[{name:"at-container",test:window.CSSContainerRule},{name:"at-container-style-properties",test:r(n,"p","top","1px")},{name:"at-counter-style",test:window.CSSCounterStyleRule},{name:"at-layer",test:window.CSSLayerBlockRule},{name:"at-property",test:window.CSSPropertyRule},{name:"at-scope",test:window.CSSScopeRule},{name:"anchor",test:CSS.supports("left: anchor(center)")},{name:"color-function",test:CSS.supports("color: color(srgb 0 0 1)")},{name:"color-mix",test:CSS.supports("color: color-mix(in lch, white, black)")},{name:"container-units",test:CSS.supports("width: 1cqi")},{name:"dynamic-viewport-units",test:CSS.supports("width: 1dvi")},{name:"has",test:CSS.supports("selector(:has(+ *))")},{name:"houdini-paint-api",test:CSS.paintWorklet},{name:"individual-transforms",test:CSS.supports("transform: scale(1)")},{name:"logical-properties",test:CSS.supports("border-start-start-radius: 1px")},{name:"media-range-syntax",test:window.matchMedia("(width >= 1px)")},{name:"nesting",test:CSS.supports("selector(& a)")},{name:"nth-of-s",test:CSS.supports("selector(:nth-child(1 of .a))")},{name:"overscroll-behavior",test:CSS.supports("overscroll-behavior: none")},{name:"relative-color-syntax",test:CSS.supports("color: rgb(from red r g b / 1%)")},{name:"scroll-timeline",test:CSS.supports("scroll-timeline-name: a")},{name:"subgrid",test:CSS.supports("grid-template-rows: subgrid")},{name:"text-box-trim",test:CSS.supports("(leading-trim: both) or (text-box-trim: both)")},{name:"trigonometry",test:CSS.supports("width: calc(1px * cos(1deg))")},{name:"view-timeline",test:window.ViewTimeline},{name:"view-transitions",test:window.ViewTransition},{name:"focus-within",test:CSS.supports("selector(:focus-within)")},{name:"focus-visible",test:CSS.supports("selector(:focus-visible)")}]);const p=(t,e,n=s,r=o)=>{let i=e?n?`${n}-${t}`:t:!!r&&`no-${t}`;(e||r)&&document.documentElement.classList.add(i);const p=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");"undefined"!=typeof window&&window.SupportsCSSTests&&(SupportsCSSTests[p]=!!e,SupportsCSSTests.results={...SupportsCSSTests.results,[t]:!!e})};return t.addTest=p,t.init=t=>{if("undefined"!=typeof window&&window.CSS&&window.CSS.supports){window.SupportsCSSTests={},window.SupportsCSSTests.results={};const{tests:n,supportsPrefix:r,unsupportedClasses:a}={...e,...t};s=r,o=a;const S="all"===n;if(n.length)for(const{name:t,test:e}of i)(S||n.includes(t))&&p(t,e,r,a)}},t.testEnv=r,t}({}); diff --git a/dist/bundle.umd.js b/dist/bundle.umd.js index 14aada4..541d43e 100644 --- a/dist/bundle.umd.js +++ b/dist/bundle.umd.js @@ -138,6 +138,14 @@ name: "view-transitions", test: window.ViewTransition, }, + { + name: "focus-within", + test: CSS.supports("selector(:focus-within)"), + }, + { + name: "focus-visible", + test: CSS.supports("selector(:focus-visible)"), + }, ]; } diff --git a/src/main.js b/src/main.js index 3eb9675..ff6fabc 100644 --- a/src/main.js +++ b/src/main.js @@ -132,6 +132,14 @@ if (typeof window !== "undefined" && window.CSS) { name: "view-transitions", test: window.ViewTransition, }, + { + name: "focus-within", + test: CSS.supports("selector(:focus-within)"), + }, + { + name: "focus-visible", + test: CSS.supports("selector(:focus-visible)"), + }, ]; } From cbd07b956581455f50028de104beaf9eca97be23 Mon Sep 17 00:00:00 2001 From: katokdoescode Date: Tue, 9 May 2023 23:54:08 +0400 Subject: [PATCH 2/3] Add new tests to supportTable --- docs/_data/supportTable.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/_data/supportTable.js b/docs/_data/supportTable.js index 26b69ad..2270621 100644 --- a/docs/_data/supportTable.js +++ b/docs/_data/supportTable.js @@ -103,6 +103,14 @@ const testSuite = [ name: "view-transitions", test: "`window.ViewTransition`", }, + { + name: "focus-within", + test: "`CSS.supports('selector(:focus-within)')`", + }, + { + name: "focus-visible", + test: "`CSS.supports(selector(:focus-visible)')`", + }, ]; const registryName = (name) => From 1e13a1ecbc258e73ef1e5635134d157f8b159044 Mon Sep 17 00:00:00 2001 From: katokdoescode Date: Tue, 9 May 2023 23:56:19 +0400 Subject: [PATCH 3/3] Fix typo --- docs/_data/supportTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_data/supportTable.js b/docs/_data/supportTable.js index 2270621..3e6cd30 100644 --- a/docs/_data/supportTable.js +++ b/docs/_data/supportTable.js @@ -109,7 +109,7 @@ const testSuite = [ }, { name: "focus-visible", - test: "`CSS.supports(selector(:focus-visible)')`", + test: "`CSS.supports('selector(:focus-visible)')`", }, ];