35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
export const Compatibility = () => {
|
|
const [isSelectorSupported, setIsSelectorSupported] = useState(true);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
document.querySelector(':is(#foo)');
|
|
setIsSelectorSupported(true);
|
|
} catch (error) {
|
|
setIsSelectorSupported(false);
|
|
}
|
|
}, []);
|
|
|
|
const renderCssSelectorNotSupportMeg = () => {
|
|
return !isSelectorSupported ? (
|
|
<div style={{ borderBottom: '6px solid red' }}>
|
|
<h2>Sorry, we cannot support your browser. This app works best with css where selector supported.</h2>
|
|
<h3>Browser Supports</h3>
|
|
<ul>
|
|
<li>Edge | last 2 versions</li>
|
|
<li>Firefox | last 2 versions</li>
|
|
<li>Chrome | last 2 versions</li>
|
|
<li>Safari | last 2 versions</li>
|
|
<li>Opera | last 2 versions</li>
|
|
<li>Electron | last 2 versions</li>
|
|
<li>QQ Browser | last 2 versions</li>
|
|
</ul>
|
|
</div>
|
|
) : null;
|
|
};
|
|
|
|
return renderCssSelectorNotSupportMeg();
|
|
};
|