Cross-browser Compatibility - Complete Guide

# CSS Cross-browser Compatibility

# 1. CSS Vendor Prefixes
.flexbox-container {
  display: -webkit-box;      /* Old WebKit */
  display: -moz-box;         /* Old Firefox */
  display: -ms-flexbox;      /* IE 10 */
  display: -webkit-flex;     /* Safari 6.1+ */
  display: flex;             /* Modern browsers */
}

.flexbox-item {
  -webkit-box-flex: 1;      /* Old WebKit */
  -moz-box-flex: 1;          /* Old Firefox */
  -webkit-flex: 1;           /* Safari 6.1+ */
  -ms-flex: 1;               /* IE 10 */
  flex: 1;                   /* Modern browsers */
}

# 2. CSS Grid Fallbacks
.grid-container {
  display: -ms-grid;         /* IE 10+ */
  display: grid;             /* Modern browsers */
  -ms-grid-columns: 1fr 1fr 1fr;  /* IE 10+ */
  grid-template-columns: 1fr 1fr 1fr;  /* Modern browsers */
}

.grid-item {
  -ms-grid-column: 1;        /* IE 10+ */
  grid-column: 1;            /* Modern browsers */
}

/* Fallback for older browsers */
@supports not (display: grid) {
  .grid-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .grid-item {
    flex: 1 1 300px;
  }
}

# 3. CSS Custom Properties (Variables)
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 16px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size-base);
}

/* Fallback for browsers without CSS custom properties */
.button {
  background-color: #007bff;  /* Fallback */
  color: white;
  font-size: 16px;           /* Fallback */
}

# 4. CSS Transforms and Animations
.animated-element {
  /* Transform prefixes */
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  -o-transform: translateX(100px);
  transform: translateX(100px);
  
  /* Transition prefixes */
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -ms-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

/* Animation keyframes */
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-moz-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-ms-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  -webkit-animation: fadeIn 1s ease-in;
  -moz-animation: fadeIn 1s ease-in;
  -ms-animation: fadeIn 1s ease-in;
  animation: fadeIn 1s ease-in;
}

# 5. CSS Filters and Effects
.filtered-image {
  /* Filter prefixes */
  -webkit-filter: blur(5px) brightness(1.2);
  -moz-filter: blur(5px) brightness(1.2);
  -ms-filter: blur(5px) brightness(1.2);
  filter: blur(5px) brightness(1.2);
  
  /* Backdrop filter */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Fallback for browsers without filter support */
@supports not (filter: blur(5px)) {
  .filtered-image {
    opacity: 0.8;
  }
}

# 6. CSS Gradients
.gradient-background {
  /* Linear gradient with prefixes */
  background: -webkit-linear-gradient(top, #ff0000, #0000ff);
  background: -moz-linear-gradient(top, #ff0000, #0000ff);
  background: -ms-linear-gradient(top, #ff0000, #0000ff);
  background: -o-linear-gradient(top, #ff0000, #0000ff);
  background: linear-gradient(to bottom, #ff0000, #0000ff);
  
  /* Fallback solid color */
  background-color: #ff0000;
}

.radial-gradient {
  /* Radial gradient with prefixes */
  background: -webkit-radial-gradient(circle, #ff0000, #0000ff);
  background: -moz-radial-gradient(circle, #ff0000, #0000ff);
  background: -ms-radial-gradient(circle, #ff0000, #0000ff);
  background: -o-radial-gradient(circle, #ff0000, #0000ff);
  background: radial-gradient(circle, #ff0000, #0000ff);
}

# 7. CSS Box Shadow and Border Radius
.shadow-element {
  /* Box shadow with prefixes */
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  /* Border radius with prefixes */
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

# 8. CSS Media Queries
/* Standard media queries */
@media screen and (max-width: 768px) {
  .responsive-element {
    font-size: 14px;
  }
}

/* IE-specific media queries */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ie-specific {
    display: block;
  }
}

/* WebKit-specific media queries */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .retina-element {
    background-image: url('image@2x.png');
  }
}

# 9. CSS Reset and Normalize
/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Normalize.css approach */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* IE-specific fixes */
.ie-fix {
  zoom: 1;  /* Trigger hasLayout */
}

.ie-fix:after {
  content: "";
  display: table;
  clear: both;
}

# 10. CSS Feature Detection
/* Feature detection with @supports */
@supports (display: flex) {
  .modern-layout {
    display: flex;
  }
}

@supports not (display: flex) {
  .fallback-layout {
    display: table;
  }
}

/* Feature detection with JavaScript */
if (CSS.supports('display', 'flex')) {
  document.documentElement.classList.add('flexbox');
} else {
  document.documentElement.classList.add('no-flexbox');
}

/* CSS for feature detection classes */
.flexbox .flex-container {
  display: flex;
}

.no-flexbox .flex-container {
  display: table;
}

.no-flexbox .flex-item {
  display: table-cell;
}

# JavaScript Cross-browser Compatibility

# 1. Feature Detection
// Modern feature detection
if ('fetch' in window) {
  // Use fetch API
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data));
} else {
  // Fallback to XMLHttpRequest
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      console.log(data);
    }
  };
  xhr.send();
}

// ES6 feature detection
if (typeof Symbol !== 'undefined') {
  // Use ES6 features
  const sym = Symbol('key');
  const obj = { [sym]: 'value' };
} else {
  // Fallback for older browsers
  const obj = { key: 'value' };
}

# 2. Polyfills
// Array.from polyfill
if (!Array.from) {
  Array.from = function(arrayLike) {
    return Array.prototype.slice.call(arrayLike);
  };
}

// Object.assign polyfill
if (typeof Object.assign !== 'function') {
  Object.assign = function(target) {
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }
    
    var to = Object(target);
    
    for (var index = 1; index < arguments.length; index++) {
      var nextSource = arguments[index];
      
      if (nextSource != null) {
        for (var nextKey in nextSource) {
          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
    }
    return to;
  };
}

// Promise polyfill
if (typeof Promise === 'undefined') {
  window.Promise = function(executor) {
    var self = this;
    self.state = 'pending';
    self.value = undefined;
    self.handlers = [];
    
    function resolve(result) {
      if (self.state === 'pending') {
        self.state = 'fulfilled';
        self.value = result;
        self.handlers.forEach(handle);
        self.handlers = null;
      }
    }
    
    function reject(error) {
      if (self.state === 'pending') {
        self.state = 'rejected';
        self.value = error;
        self.handlers.forEach(handle);
        self.handlers = null;
      }
    }
    
    function handle(handler) {
      if (self.state === 'pending') {
        self.handlers.push(handler);
      } else {
        if (self.state === 'fulfilled' && typeof handler.onFulfilled === 'function') {
          handler.onFulfilled(self.value);
        }
        if (self.state === 'rejected' && typeof handler.onRejected === 'function') {
          handler.onRejected(self.value);
        }
      }
    }
    
    this.then = function(onFulfilled, onRejected) {
      return new Promise(function(resolve, reject) {
        handle({
          onFulfilled: function(result) {
            try {
              resolve(onFulfilled ? onFulfilled(result) : result);
            } catch (ex) {
              reject(ex);
            }
          },
          onRejected: function(error) {
            try {
              resolve(onRejected ? onRejected(error) : error);
            } catch (ex) {
              reject(ex);
            }
          }
        });
      });
    };
    
    executor(resolve, reject);
  };
}

# 3. Event Handling Compatibility
// Cross-browser event handling
function addEvent(element, event, handler) {
  if (element.addEventListener) {
    element.addEventListener(event, handler, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, handler);
  } else {
    element['on' + event] = handler;
  }
}

function removeEvent(element, event, handler) {
  if (element.removeEventListener) {
    element.removeEventListener(event, handler, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + event, handler);
  } else {
    element['on' + event] = null;
  }
}

// Event object normalization
function normalizeEvent(event) {
  if (!event) {
    event = window.event;
  }
  
  if (!event.target) {
    event.target = event.srcElement;
  }
  
  if (!event.preventDefault) {
    event.preventDefault = function() {
      event.returnValue = false;
    };
  }
  
  if (!event.stopPropagation) {
    event.stopPropagation = function() {
      event.cancelBubble = true;
    };
  }
  
  return event;
}

# 4. AJAX Compatibility
// Cross-browser AJAX
function makeRequest(url, method, data, callback) {
  var xhr;
  
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
      try {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
      } catch (e) {
        throw new Error('XMLHttpRequest not supported');
      }
    }
  }
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        callback(null, xhr.responseText);
      } else {
        callback(new Error('Request failed: ' + xhr.status));
      }
    }
  };
  
  xhr.open(method, url, true);
  
  if (method === 'POST' && data) {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);
  } else {
    xhr.send();
  }
}

# 5. DOM Manipulation Compatibility
// Cross-browser DOM manipulation
function getElementById(id) {
  return document.getElementById(id);
}

function getElementsByClassName(className) {
  if (document.getElementsByClassName) {
    return document.getElementsByClassName(className);
  } else {
    var elements = document.getElementsByTagName('*');
    var result = [];
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].className.indexOf(className) !== -1) {
        result.push(elements[i]);
      }
    }
    return result;
  }
}

function querySelector(selector) {
  if (document.querySelector) {
    return document.querySelector(selector);
  } else {
    // Fallback for older browsers
    if (selector.charAt(0) === '#') {
      return document.getElementById(selector.slice(1));
    } else if (selector.charAt(0) === '.') {
      var elements = getElementsByClassName(selector.slice(1));
      return elements.length > 0 ? elements[0] : null;
    }
    return null;
  }
}

# 6. Local Storage Compatibility
// Cross-browser local storage
var Storage = {
  set: function(key, value) {
    try {
      if (window.localStorage) {
        localStorage.setItem(key, JSON.stringify(value));
      } else if (window.globalStorage) {
        globalStorage[location.hostname].setItem(key, JSON.stringify(value));
      } else {
        // Fallback to cookies
        var date = new Date();
        date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + JSON.stringify(value) + '; expires=' + date.toUTCString() + '; path=/';
      }
    } catch (e) {
      console.log('Storage not available');
    }
  },
  
  get: function(key) {
    try {
      if (window.localStorage) {
        return JSON.parse(localStorage.getItem(key));
      } else if (window.globalStorage) {
        return JSON.parse(globalStorage[location.hostname].getItem(key));
      } else {
        // Fallback to cookies
        var nameEQ = key + '=';
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) === ' ') c = c.substring(1, c.length);
          if (c.indexOf(nameEQ) === 0) {
            return JSON.parse(c.substring(nameEQ.length, c.length));
          }
        }
      }
    } catch (e) {
      console.log('Storage not available');
    }
    return null;
  }
};

# 7. Browser Detection
// Browser detection (use sparingly)
var Browser = {
  isIE: function() {
    return navigator.userAgent.indexOf('MSIE') !== -1 || navigator.userAgent.indexOf('Trident') !== -1;
  },
  
  isFirefox: function() {
    return navigator.userAgent.indexOf('Firefox') !== -1;
  },
  
  isChrome: function() {
    return navigator.userAgent.indexOf('Chrome') !== -1 && navigator.userAgent.indexOf('Edge') === -1;
  },
  
  isSafari: function() {
    return navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1;
  },
  
  isEdge: function() {
    return navigator.userAgent.indexOf('Edge') !== -1;
  },
  
  getVersion: function() {
    var userAgent = navigator.userAgent;
    var match;
    
    if (this.isIE()) {
      match = userAgent.match(/(?:MSIE |Trident\/.*; rv:)([0-9.]+)/);
      return match ? parseFloat(match[1]) : null;
    }
    
    if (this.isFirefox()) {
      match = userAgent.match(/Firefox\/([0-9.]+)/);
      return match ? parseFloat(match[1]) : null;
    }
    
    if (this.isChrome()) {
      match = userAgent.match(/Chrome\/([0-9.]+)/);
      return match ? parseFloat(match[1]) : null;
    }
    
    if (this.isSafari()) {
      match = userAgent.match(/Version\/([0-9.]+)/);
      return match ? parseFloat(match[1]) : null;
    }
    
    return null;
  }
};

# 8. Modern JavaScript with Babel
// Babel configuration for cross-browser compatibility
// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not dead",
            "not ie <= 11"
          ]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

# 9. Webpack Configuration for Compatibility
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 versions', 'not dead']
                }
              }]
            ]
          }
        }
      }
    ]
  },
  
  resolve: {
    fallback: {
      "util": require.resolve("util/"),
      "buffer": require.resolve("buffer/"),
      "stream": require.resolve("stream-browserify")
    }
  }
};

# 10. Testing and Validation
// Cross-browser testing utilities
var CompatibilityTester = {
  testFeatures: function() {
    var results = {};
    
    // Test CSS features
    results.flexbox = this.testFlexbox();
    results.grid = this.testGrid();
    results.customProperties = this.testCustomProperties();
    
    // Test JavaScript features
    results.promises = this.testPromises();
    results.fetch = this.testFetch();
    results.localStorage = this.testLocalStorage();
    
    return results;
  },
  
  testFlexbox: function() {
    var element = document.createElement('div');
    element.style.display = 'flex';
    return element.style.display === 'flex';
  },
  
  testGrid: function() {
    var element = document.createElement('div');
    element.style.display = 'grid';
    return element.style.display === 'grid';
  },
  
  testCustomProperties: function() {
    return window.CSS && CSS.supports && CSS.supports('color', 'var(--test)');
  },
  
  testPromises: function() {
    return typeof Promise !== 'undefined';
  },
  
  testFetch: function() {
    return typeof fetch !== 'undefined';
  },
  
  testLocalStorage: function() {
    try {
      localStorage.setItem('test', 'test');
      localStorage.removeItem('test');
      return true;
    } catch (e) {
      return false;
    }
  }
};

// Run compatibility tests
var compatibilityResults = CompatibilityTester.testFeatures();
console.log('Compatibility Results:', compatibilityResults);