v147 · JavaScript · CSS
Compatibility Lab
Probes Element.pseudo(), CSSPseudoElement.getBoundingClientRect(), and event.pseudoTarget via feature detection. Runs a live getComputedStyle() call on a ::before pseudo-element to confirm the API works. Provides the polyfill fallback for non-supporting browsers.
API probes
Live API test
Element.pseudo('::before') — getComputedStyle
Click "Run API call" to test Element.pseudo()…
Fallback pattern
/* Detect CSSPseudoElement support */
const HAS_PSEUDO = typeof Element.prototype.pseudo === 'function';
/* Get pseudo-element computed style */
function getPseudoStyle(el, pseudo) {
if (HAS_PSEUDO) {
const pseudoEl = el.pseudo(pseudo);
return pseudoEl ? getComputedStyle(pseudoEl) : null;
}
// Fallback: use legacy getComputedStyle signature
return getComputedStyle(el, pseudo);
}
/* Get pseudo-element geometry */
function getPseudoBoundingRect(el, pseudo) {
if (HAS_PSEUDO) {
const pseudoEl = el.pseudo(pseudo);
return pseudoEl?.getBoundingClientRect?.() ?? null;
}
// Fallback: not possible pre-CSSPseudoElement
// Best effort: approximate from element rect + style offsets
const rect = el.getBoundingClientRect();
const style = getComputedStyle(el, pseudo);
return {
x: rect.x, y: rect.y, width: parseFloat(style.width) || 0,
height: parseFloat(style.height) || 0, top: rect.top, left: rect.left,
};
}
/* Example: read ::before content dynamically */
const el = document.querySelector('.decorated');
const style = getPseudoStyle(el, '::before');
console.log(style.content, style.color, style.fontSize);
References
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗