Rendering Engine Detection

/**
 * Get parsed engine
 * @returns Engine details with name and version
 */
getEngine(): EngineDetails;

const parser = Bowser.getParser(window.navigator.userAgent);

const engine = parser.getEngine();
console.log(engine);
// { name: "Blink", version: "91.0.4472.124" }

console.log(engine.name); // "Blink"
console.log(engine.version); // "91.0.4472.124"

/**
 * Get parsed engine's name
 * @param toLowerCase - Return lower-cased value
 * @returns Engine's name or an empty string
 */
getEngineName(toLowerCase?: boolean): string;

const parser = Bowser.getParser(window.navigator.userAgent);

console.log(parser.getEngineName()); // "Blink"
console.log(parser.getEngineName(true)); // "blink"
console.log(parser.getEngineName(false)); // "Blink"

// Handle unknown engines
const unknownParser = Bowser.getParser("Unknown/1.0");
console.log(unknownParser.getEngineName()); // ""

/**
 * Check if the engine name equals the passed string
 * @param engineName - The string to compare with the engine name
 * @returns Boolean indicating if the engine matches
 */
isEngine(engineName: string): boolean;

const parser = Bowser.getParser(window.navigator.userAgent);

// Basic engine checking (case-insensitive)
console.log(parser.isEngine("Blink")); // true (if Blink)
console.log(parser.isEngine("blink")); // true (case-insensitive)
console.log(parser.isEngine("WebKit")); // false (if Blink)

// Conditional logic for engine-specific features
if (parser.isEngine("Blink")) {
  console.log("Chromium-based browser");
  // Use Blink-specific optimizations
} else if (parser.isEngine("WebKit")) {
  console.log("WebKit-based browser");
  // Use WebKit-specific optimizations
} else if (parser.isEngine("Gecko")) {
  console.log("Mozilla-based browser");
  // Use Gecko-specific optimizations
}

/**
 * Get parsed engine
 * @returns Engine details with name and version
 */
parseEngine(): EngineDetails;

// With lazy parsing
const parser = Bowser.getParser(window.navigator.userAgent, true);

// Force engine parsing
const engine = parser.parseEngine();
console.log(engine); // { name: "Blink", version: "91.0.4472.124" }

// Subsequent calls return cached result
const sameEngine = parser.parseEngine();
console.log(sameEngine === engine); // false (new object, same data)

const parser = Bowser.getParser(window.navigator.userAgent);

// Group browsers by engine family
if (parser.isEngine("Blink")) {
  console.log("Chromium-based: Chrome, Edge, Opera, Brave");
  // Features available in all Blink browsers
  // CSS Grid, Flexbox, modern JavaScript
} else if (parser.isEngine("WebKit")) {
  console.log("WebKit-based: Safari");
  // Safari-specific considerations
  // Different behavior for some CSS properties
} else if (parser.isEngine("Gecko")) {
  console.log("Mozilla-based: Firefox");
  // Firefox-specific features and quirks
}

const parser = Bowser.getParser(window.navigator.userAgent);

function getCSSPrefix(parser) {
  if (parser.isEngine("WebKit") || parser.isEngine("Blink")) {
    return "-webkit-";
  } else if (parser.isEngine("Gecko")) {
    return "-moz-";
  } else if (parser.isEngine("Trident") || parser.isEngine("EdgeHTML")) {
    return "-ms-";
  }
  return "";
}

const prefix = getCSSPrefix(parser);
console.log(`CSS prefix: ${prefix}`); // "-webkit-", "-moz-", "-ms-", or ""

// Apply vendor-prefixed CSS
const element = document.getElementById("animated-element");
element.style[`${prefix}transform`] = "rotate(45deg)";

const parser = Bowser.getParser(window.navigator.userAgent);
const engine = parser.getEngine();

if (parser.isEngine("Blink") && engine.version) {
  const majorVersion = parseInt(engine.version.split('.')[0]);
  
  if (majorVersion >= 80) {
    console.log("Modern Blink version - full feature support");
    // Use latest web standards
  } else if (majorVersion >= 60) {
    console.log("Older Blink version - some features may need polyfills");
    // Provide fallbacks for newer features
  }
}

const parser = Bowser.getParser(window.navigator.userAgent);

// Test for specific web standard support based on engine
function supportsModernCSS(parser) {
  if (parser.isEngine("Blink")) {
    // Blink has excellent CSS support
    return true;
  } else if (parser.isEngine("WebKit")) {
    // WebKit has good CSS support but may lag behind
    return true;
  } else if (parser.isEngine("Gecko")) {
    // Firefox has excellent standards support
    return true;
  } else if (parser.isEngine("Trident")) {
    // Internet Explorer has limited CSS support
    return false;
  }
  return false;
}

if (supportsModernCSS(parser)) {
  document.body.classList.add('modern-css');
} else {
  document.body.classList.add('legacy-css');
}

interface EngineDetails {
  name?: string;
  version?: string;
}