Browser detection & User-Agent

Why browser detection matters

When working with contenteditable, browser differences are not just cosmetic—they directly affect how your code works:

• Event sequences differ (e.g., beforeinput support)
• IME composition behavior varies
• Selection and Range API implementation differences
• Undo/redo stack behavior differs

Detecting the browser allows you to apply workarounds for known issues and provide consistent behavior across platforms.

Understanding User-Agent strings

The navigator.userAgent string contains information about the browser and platform. However, on iOS, things get complicated:

Browser detection patterns

There are several approaches to browser detection. Choose based on your use case.

function getBrowserFlags(ua: string) {
  return {
    isSafari: /Safari\//.test(ua) && !/CriOS/.test(ua),
    isChrome: /CriOS/.test(ua),
    isFirefox: /FxiOS/.test(ua),
    engine: 'webkit' as const // iOS uses WebKit
  };
}

function getBrowserFeatures() {
  return {
    supportsBeforeInput: 'onbeforeinput' in document,
    supportsComposition: 'oncompositionstart' in document,
    supportsSelectionAPI: !!window.getSelection
  };
}

function getBrowserInfo() {
  const ua = navigator.userAgent;

  return {
    os: /iPhone|iPad|iPod/.test(ua) ? 'ios' : 'android',
    browser: /CriOS/.test(ua) ? 'chrome-ios' :
             /Safari\//.test(ua) ? 'safari' : 'unknown',
    engine: 'webkit', // iOS always uses WebKit
    needsSpecialHandling: /CriOS/.test(ua)
  };
}

Best practices

let lastCompositionType = '';
let lastCompositionData = '';
let isComposing = false;

function handleCompositionUpdate(e: CompositionEvent) {
  // Filter out duplicate events
  if (e.data === lastCompositionData && e.type === lastCompositionType) {
    return;
  }

  lastCompositionData = e.data;
  lastCompositionType = e.type;
  // Process the event
}

User-Agent reference

Common User-Agent strings from various browsers and operating systems. These are examples from recent versions; actual strings will vary by version number and build.

Related resources

• Browser compatibility overview →
• Event lifecycle documentation →
• IME & Composition guide →
• Browse cases by browser and OS →