55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
export const LEGACY_WEBVIEW_CLASS = "dbx-legacy-webview";
|
|
|
|
type CssSupportCheck = {
|
|
name: string;
|
|
property?: string;
|
|
value?: string;
|
|
condition?: string;
|
|
test?: () => boolean;
|
|
};
|
|
|
|
const MODERN_CSS_FEATURES: CssSupportCheck[] = [
|
|
{ name: "oklch", property: "color", value: "oklch(0.5 0.1 180)" },
|
|
{ name: "color-mix-oklab", property: "background-color", value: "color-mix(in oklab, black 10%, transparent)" },
|
|
{ name: "color-mix-oklch", property: "background-color", value: "color-mix(in oklch, black 10%, transparent)" },
|
|
{ name: "has-selector", condition: "selector(:has(*))" },
|
|
{ name: "dynamic-viewport", property: "height", value: "100dvh" },
|
|
{ name: "min-function", property: "width", value: "min(100%, 1px)" },
|
|
{
|
|
name: "media-query-range",
|
|
test: () => {
|
|
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
|
|
try {
|
|
return window.matchMedia("(width >= 0px)").matches;
|
|
} catch {
|
|
return false;
|
|
}
|
|
},
|
|
},
|
|
];
|
|
|
|
function supports(check: CssSupportCheck): boolean {
|
|
if (check.test) return check.test();
|
|
if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return false;
|
|
|
|
try {
|
|
return check.condition ? CSS.supports(check.condition) : CSS.supports(check.property!, check.value!);
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
export function missingLegacyWebViewCapabilities(): string[] {
|
|
return MODERN_CSS_FEATURES.filter((feature) => !supports(feature)).map((feature) => feature.name);
|
|
}
|
|
|
|
export function isLegacyWebView(): boolean {
|
|
return missingLegacyWebViewCapabilities().length > 0;
|
|
}
|
|
|
|
export function applyLegacyWebViewClass(root: Element = document.documentElement): boolean {
|
|
const legacy = isLegacyWebView();
|
|
root.classList.toggle(LEGACY_WEBVIEW_CLASS, legacy);
|
|
return legacy;
|
|
}
|