Simple feature detection for CSS :has()

checkCssHas.js

(function() {
  const s = document.createElement('style');
  s.textContent = `.supportsHas:has(p):after {content: "hasHas";}`;
  document.head.appendChild(s);
  const supportsHas = document.createElement('div');
  supportsHas.classList.add('supportsHas');
  const p = document.createElement('p');
  supportsHas.appendChild(p);
  document.body.appendChild(supportsHas);

  if (getComputedStyle(document.body, 'after')?.content === '"hasHas"') {
    console.log('supports :has()');
  } else {
    console.log('does not suport :has()');
  }

  document.head.removeChild(s);
  document.body.removeChild(supportsHas);
}());

It can be done even shorter:

(function() {
  window.supportsCSSHas = false;
  try {
    document.querySelector('body:has(div)')
    console.log('supports :has()')
    window.supportsCSSHas = true;
  } catch {
    console.log('does not support :has()')
  }
}())

(function(w,d,p){w[p]=!1;try
{d.querySelector('html:has(head)');
w[p]=!0;}catch{}}
(window,document,'_supportsCSSHas'));

Is the shortest way so far.

@supports selector(A:has(b)) {
  html:has(body) {
    color: #fff;
  }
}

CSS.supports('selector(html:has(body))');