Cross-Browser Website Markup (Chrome, Firefox, Safari, Edge)

Cross-Browser Markup (Chrome, Firefox, Safari, Edge)

Cross-browser markup ensures correct display of the site in Chrome, Firefox, Safari, and Edge. Despite convergence of engines (Blink in Chrome/Edge, Gecko in Firefox, WebKit in Safari), differences remain—especially in Safari/iOS.

Main Sources of Cross-Browser Issues

Safari/WebKit—most common source of problems:

• CSS Grid subgrid—support appeared only in Safari 16+
• gap in flexbox—old Safari < 14.1 don't support
• scroll-behavior: smooth—Safari requires @media (prefers-reduced-motion: no-preference)
• position: sticky in tables—behavior differs
• Date in new Date('2024-01-15')—in Safari string should be '2024/01/15' or ISO 8601

Firefox:

• Scrollbar styling—scrollbar-width: thin instead of webkit-scrollbar pseudo-elements
• -moz-appearance for custom forms

Edge (Chromium-based): practically matches Chrome. Issues—in legacy Edge (EdgeHTML, no longer relevant).

Testing Process

1. Development—Chrome DevTools
2. Testing—manual opening in Firefox, Safari (macOS + iOS Simulator), Edge
3. Automation—Playwright multi-browser

// playwright.config.ts
export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 14'] } },
  ],
});

Support Check Tools

• Can I Use (caniuse.com)—check CSS/JS feature support across browsers
• MDN Browser Compatibility—detailed compatibility tables
• Browserslist—configuration of target browsers for PostCSS Autoprefixer and Babel

// .browserslistrc
> 0.5%
last 2 versions
not dead
not IE 11

Timeline

Cross-browser testing and fixes for finished markup (5–15 pages): 1–2 business days. Including iOS Safari and Android Chrome.