Cross-Browser Compatibility
Relevant source files
The following files were used as context for generating this wiki page:
Cross-Browser Compatibility in this project ensures the interactive UI components and animations function consistently across different web engines. The application utilizes vendor-specific CSS prefixes and responsive design techniques to maintain visual integrity and functional logic on various devices and browsers.
The project integrates external libraries like Bootstrap and jQuery to abstract browser-specific implementation details. It specifically addresses rendering differences in CSS animations and layout positioning through media queries and JavaScript-based screen width detection.
CSS Rendering and Vendor Prefixes
The application uses -webkit- prefixes to ensure compatibility with WebKit-based browsers (such as Chrome, Safari, and Opera). These prefixes apply to transitions, filters, and keyframe animations to provide a smooth user experience across different rendering engines.
The diagram shows how CSS rules branch into vendor-specific and standard implementations for different browser engines.
| Property | Implementation | Purpose |
|---|---|---|
-webkit-transition | all 0.1s ease-out | Ensures smooth button movement in WebKit browsers. |
-webkit-filter | blur(4px) | Applies background blur consistently. |
-webkit-animation | stretchdelay 1.2s | Handles preloader animation timing. |
-webkit-transform | scaleY(0.4) | Manages scaling within keyframe animations. |
Sources: css/style.css:7-13, css/style.css:25, css/spinload.css:25-50
JavaScript Runtime Compatibility
The application detects screen dimensions at runtime to adjust interactive logic. The moveButton function checks screen.width to determine the range for random coordinate generation, ensuring the "No" button remains within the visible viewport regardless of the browser's window size.
This sequence illustrates how JavaScript adapts coordinate logic based on the browser's reported screen width.
Sources: js/myJs.js:65-75, js/myJs.js:84-86
Responsive Layout Compatibility
Responsive design is managed through CSS Media Queries and HTML meta tags. The viewport meta tag sets the initial scale and width to match the device, while @media rules in the stylesheet adjust font sizes and absolute positioning for smaller screens.
Viewport and Scaling
The project defines the viewport in the HTML header to prevent browsers from rendering the page at a default desktop width on mobile devices:
Sources: [index.html:8-12](https://github.com/thanhnam0702205/yeuems.io/blob/62b7dfd06d5b259871a0e82881ee3eeabd76061f/index.html#L8-L12)
Responsive Adjustments
| Element | Desktop Style (Default) | Mobile Style (max-width: 500px) |
|---|---|---|
header h2 | font-size: 80px | font-size: 45px |
#no left | 35% | 7% |
#yes left | 70% | 58% |
Sources: css/style.css:29-37, css/style.css:39-71
External Library Integration
The project relies on Content Delivery Networks (CDNs) to load cross-browser compatible frameworks. These libraries handle inconsistencies in DOM manipulation and event handling.
- jQuery 3.4.1: Normalizes event handling and AJAX across browsers.
- Bootstrap 4.3.1: Provides a cross-browser CSS grid system and button styles.
- SweetAlert2: Manages modal popups consistently across browser environments.
Sources: index.html:18-24, index.html:56-72
Loading and Animation State
To prevent layout shifts during resource loading, a preloader mask is used. The preloader utilizes both standard and -webkit- specific keyframes to ensure the loading animation displays correctly while the main content is initialized by the browser.
The flow shows the synchronization between CSS animations and JavaScript execution to ensure a stable initial state.
Sources: css/spinload.css:2-10, js/myJs.js:20-28