Feature Detection and Browser Support

// Check for fetch API
const hasFetch = typeof fetch === 'function' && 
                  typeof window.fetch !== 'undefined';

// Check for Promise support
const hasPromise = typeof Promise !== 'undefined' && 
                    Promise.toString().indexOf('[native code]') !== -1;

// Check for Array.prototype.includes
const hasArrayIncludes = 'includes' in Array.prototype;

// Check for modern DOM API
const hasQuerySelector = 'querySelector' in document;

// Check for Storage API
const hasLocalStorage = (function() {
    try {
        const test = '__storage_test__';
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
})();

// typeof - Safe for undeclared variables
if (typeof Promise !== 'undefined') {
    // Promise is available
}

// in operator - Checks property existence
if ('fetch' in window) {
    // window.fetch exists
}

// Combined approach for methods
if ('map' in Array.prototype && 
    typeof Array.prototype.map === 'function') {
    // Array.map is available and callable
}

// Avoid false positives
if (typeof document.querySelector === 'function') {
    // Safe to use querySelector
}

// Check constructor availability
if (typeof Map !== 'undefined' && 
    typeof Map === 'function') {
    const myMap = new Map();
}

// localStorage detection with private mode handling
function hasLocalStorage() {
    try {
        const test = '__test__';
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

// IndexedDB detection
function hasIndexedDB() {
    try {
        return !!window.indexedDB;
    } catch(e) {
        return false;
    }
}

// Service Worker registration check
function canUseServiceWorker() {
    try {
        return 'serviceWorker' in navigator &&
               typeof navigator.serviceWorker.register === 'function';
    } catch(e) {
        return false;
    }
}

// Safe feature test with fallback
function detectFeature() {
    try {
        // Attempt to use feature
        new IntersectionObserver(() => {});
        return true;
    } catch(e) {
        // Feature not available
        return false;
    }
}

// Check for CSS Grid support
const hasGrid = CSS.supports('display', 'grid') ||
                 CSS.supports('display: grid');

// Check for CSS Custom Properties
const hasVars = CSS.supports('--custom-prop', 'value') ||
                 CSS.supports('color', 'var(--custom-prop)');

// Check for Flexbox
const hasFlex = CSS.supports('display', 'flex');

// Check for sticky positioning
const hasSticky = CSS.supports('position', 'sticky') ||
                   CSS.supports('position', '-webkit-sticky');

// Complex condition with logical operators
const hasModernLayout = CSS.supports(
    '(display: grid) and (gap: 1rem)'
);

// Fallback for browsers without CSS.supports
function cssSupports(property, value) {
    if (typeof CSS !== 'undefined' && CSS.supports) {
        return CSS.supports(property, value);
    }
    // Fallback: test on element style
    const el = document.createElement('div');
    el.style[property] = value;
    return el.style[property] === value;
}

// Check feature support
if (Modernizr.localstorage) {
    // Use localStorage
    localStorage.setItem('key', 'value');
} else {
    // Use cookie fallback
    document.cookie = 'key=value';
}

// Conditional polyfill loading (legacy Modernizr.load)
if (!Modernizr.promises) {
    // Load promise polyfill
    import('es6-promise-polyfill');
}

// Add custom feature test
Modernizr.addTest('customfeature', function() {
    return 'customAPI' in window &&
           typeof window.customAPI === 'function';
});

// Get prefixed property name
const transformProp = Modernizr.prefixed('transform');
// Returns: 'transform', 'WebkitTransform', 'MozTransform', etc.
element.style[transformProp] = 'rotate(45deg)';

// CSS usage with Modernizr classes
// HTML: <html class="flexbox cssanimations">
// CSS:
// .flexbox .container { display: flex; }
// .no-flexbox .container { display: block; }

// Basic conditional polyfill loading
async function loadPolyfills() {
    const polyfills = [];
    
    if (typeof Promise === 'undefined') {
        polyfills.push(import('es6-promise-polyfill'));
    }
    
    if (!('fetch' in window)) {
        polyfills.push(import('whatwg-fetch'));
    }
    
    if (!Array.prototype.includes) {
        polyfills.push(import('./array-includes-polyfill'));
    }
    
    await Promise.all(polyfills);
}

// Initialize app after polyfills loaded
loadPolyfills().then(() => {
    // Start application
    initApp();
});

// Lazy load heavy polyfill on demand
let intersectionObserverPolyfill = null;

async function getIntersectionObserver() {
    if ('IntersectionObserver' in window) {
        return window.IntersectionObserver;
    }
    
    if (!intersectionObserverPolyfill) {
        const module = await import('intersection-observer');
        intersectionObserverPolyfill = module.default;
    }
    
    return intersectionObserverPolyfill;
}

// Usage
const Observer = await getIntersectionObserver();
const observer = new Observer(callback, options);

// Differential serving pattern
if (supportsModernFeatures()) {
    // Load modern build (no polyfills)
    await import('./app.modern.js');
} else {
    // Load legacy build (with polyfills)
    await import('./app.legacy.js');
}