Browser Compatibility
Phenix Design System is designed to work optimally on modern browsers while maintaining a balance between cutting-edge features and practical compatibility.
Supported Browsers
Phenix officially supports the following browsers:
Browser | Minimum Version |
---|---|
Firefox | v63+ |
Chrome | v84+ |
Safari | v12+ |
Opera | v64+ |
Edge | v84+ |
Internet Explorer | Not supported |
Mobile Browsers Support
Phenix is fully compatible with modern mobile browsers:
Browser | Support |
---|---|
iOS Safari | iOS 12.1+ |
Android Chrome | v84+ |
Samsung Internet | v10+ |
Mobile Firefox | v63+ |
Modern Web Technologies
Phenix leverages modern web technologies including:
- CSS Grid Layout
- CSS Flexbox
- CSS Variables (Custom Properties)
- ES6+ JavaScript features
- CSS Animations and Transitions
- Modern CSS selectors
Feature Detection
Phenix uses feature detection rather than browser detection to ensure compatibility:
// Example of how Phenix checks for feature support
if ('CSS' in window && 'supports' in window.CSS) {
const supportsGrid = CSS.supports('display', 'grid');
// Apply appropriate styles or fallbacks
}
Graceful Degradation
For older browsers, Phenix follows these principles:
- Core content and functionality remains accessible
- Non-critical visual enhancements may be simplified
- Progressive enhancement approach is used where possible
Performance Considerations
To ensure good performance across all supported browsers:
- JavaScript is optimized for speed and size
- CSS is organized for efficient rendering
- Assets are kept lightweight
- Animations are hardware-accelerated where possible
Testing Your Projects
We recommend testing your Phenix-based projects on:
- Multiple browsers (at least Chrome, Firefox, and Safari)
- Both desktop and mobile devices
- Different screen sizes and resolutions
- Various connection speeds
Development Recommendations
When building with Phenix Design System:
- Use vendor prefixes only when necessary (the framework handles most cases)
- Consider providing fallbacks for cutting-edge features
- Test on a representative sample of target browsers
- Use Phenix's built-in utilities for cross-browser compatibility
Browser DevTools Support
Phenix is built to work well with browser developer tools:
- Clean class naming for easy inspection
- Well-structured DOM elements
- Logical CSS cascade
- Commented JavaScript for easier debugging
Performance Stats
The framework is optimized for modern browsers:
- Core CSS: 140KB (32KB gzipped)
- JavaScript: 80KB (30KB gzipped)
- Minimal HTTP requests
- Efficient asset loading
WordPress Compatibility
When using the WordPress plugin (pds-blocks), we follow WordPress core browser support guidelines which include:
- The latest two versions of major browsers
- Android and iOS latest versions
This aligns with WordPress's @wordpress/browserslist-config
which ensures compatibility with:
- Browsers with >1% market share
- Latest versions of Chrome, Firefox, Safari, Edge, and Opera
- Latest versions of iOS and Android browsers