Опубликовано:
Тесты поддержки браузерами современных веб-функций на JavaScript
Иногда важно знать, поддерживается ли функция браузером или нет, чтобы можно было что-нибудь предпринять. Возможно, загрузить полифилл или просто выбрать другой подход. В статье рассматриваются новые возможности браузеров и тесты их поддержки браузером.
Это просто статья с фрагментами кода, показывающая, как проверить поддержку некоторых новых функций в HTML, CSS и JavaScript. Эта статья ни в коем случае не является исчерпывающей и не рассказывает, что делают эти функции, о чём лучше рассказать в других статьях. Здесь также не рассматривается тестирование поддержки на любом другом языке, кроме JavaScript. По большей части для этого следует обратиться к @supports в CSS.
Не стесняйтесь добавлять свои предложения, чтобы сделать эту статью как можно более полезной!
HTML Возможности
View Transitions API
// Не поддерживается
if (!document.startViewTransition) {
updateTheDOMSomehow();
} else {
// Поддерживается
document.startViewTransition(() => {
updateTheDOMSomehow()
});
}Я не знаю, как проверить поддержку @view-transition.
Popover API
// Поддерживается
if (HTMLElement.prototype.hasOwnProperty("popover")) {
}Элемент <dialog>
// Поддерживается
if (typeof HTMLDialogElement === 'function') {
}Декларативный Shadow DOM
// Поддерживается
if (!!Element.prototype.attachShadow) {
}Ленивая загрузка изображений
// Поддерживается
if ('loading' in HTMLImageElement.prototype) {
}Ленивая загрузка Iframe
<iframe>: The Inline Frame element
// Поддерживается
if ('loading' in HTMLIFrameElement.prototype) {
}CSS Возможности
Селекторы CSS и пары "свойство-значение" можно протестировать с помощью CSS.supports() из JavaScript.
:where()
// Поддерживается
if (CSS.supports('selector(:where(h1))')) {
document.documentElement.classList.add("supports-where");
}:has()
// Поддерживается
if (CSS.supports('selector(:has(h1))')) {
document.documentElement.classList.add("supports-has");
}@layer
// Поддерживается
if (typeof CSSLayerBlockRule !== "undefined") {
}Позиционирование ссылок
// Поддерживается
if (CSS.supports("anchor-name: --anchor-el")) {
}Subgrid
// Поддерживается
if (CSS.supports("grid-template-columns", "subgrid")) {
}light-dark()
// Поддерживается
if (CSS.supports('color: light-dark(black, white)')) {
}OKLCH Цвет
// Поддерживается
if (CSS.supports("color: oklch(0% 0 0")) {
}JavaScript Возможности
AbortController
// Поддерживается
if (typeof AbortController === "function") {
}Promise.finally()
// Поддерживается
if (typeof Promise.prototype.finally === 'function') {
}