Master cross-browser CSS development with vendor prefixes, progressive enhancement, feature detection, and testing strategies for universal compatibility.
Cross-browser compatibility is one of the most critical aspects of professional web development. Different browsers implement CSS features at different times, with varying levels of support, and sometimes with different syntaxes. What looks perfect in Chrome might break completely in Safari or older versions of Edge.
Modern web development requires CSS that works consistently across all major browsers while gracefully handling differences in support. This involves understanding browser quirks, using vendor prefixes appropriately, implementing progressive enhancement, and establishing robust testing workflows.
This lesson teaches you to write CSS that works universally: from handling vendor prefixes and browser bugs to implementing feature detection and fallback strategies. You'll learn professional techniques for ensuring your websites look and function consistently across the entire browser ecosystem.
Vendor prefixes allow browsers to implement experimental CSS features before they become standardized, requiring specific syntaxes for compatibility.
Understanding Vendor Prefixes:
1/* Vendor prefix patterns */
2-webkit- /* WebKit browsers: Chrome, Safari, newer Edge */
3-moz- /* Mozilla Firefox */
4-ms- /* Internet Explorer, legacy Edge */
5-o- /* Opera (less common now) */
6
7/* Example: CSS transforms with all prefixes */
8.transform-element {
9 -webkit-transform: rotate(45deg); /* Chrome, Safari */
10 -moz-transform: rotate(45deg); /* Firefox */
11 -ms-transform: rotate(45deg); /* IE9+ */
12 transform: rotate(45deg); /* Standard (always last) */
13}
14
15/* Flexbox with vendor prefixes */
16.flexbox-container {
17 /* Old flexbox syntax (IE10) */
18 display: -ms-flexbox;
19 -ms-flex-direction: row;
20 -ms-flex-pack: justify;
21 -ms-flex-align: center;
22
23 /* Modern flexbox */
24 display: -webkit-box; /* Webkit old */
25 display: -webkit-flex; /* Webkit new */
26 display: -moz-box; /* Firefox old */
27 display: flex; /* Standard */
28
29 -webkit-box-orient: horizontal;
30 -webkit-box-direction: normal;
31 -webkit-flex-direction: row;
32 -moz-flex-direction: row;
33 -ms-flex-direction: row;
34 flex-direction: row;
35
36 -webkit-box-pack: justify;
37 -webkit-justify-content: space-between;
38 -moz-justify-content: space-between;
39 -ms-flex-pack: justify;
40 justify-content: space-between;
41
42 -webkit-box-align: center;
43 -webkit-align-items: center;
44 -moz-align-items: center;
45 -ms-flex-align: center;
46 align-items: center;
47}CSS Grid with Prefixes:
1/* CSS Grid with IE11 support */
2.grid-container {
3 /* IE11 Grid */
4 display: -ms-grid;
5 -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
6 -ms-grid-rows: auto 20px auto;
7
8 /* Modern Grid */
9 display: grid;
10 grid-template-columns: repeat(3, 1fr);
11 grid-template-rows: repeat(2, auto);
12 gap: 20px;
13}
14
15/* IE11 requires explicit placement */
16.grid-item-1 {
17 -ms-grid-row: 1;
18 -ms-grid-column: 1;
19 grid-area: 1 / 1;
20}
21
22.grid-item-2 {
23 -ms-grid-row: 1;
24 -ms-grid-column: 3;
25 grid-area: 1 / 2;
26}
27
28.grid-item-3 {
29 -ms-grid-row: 1;
30 -ms-grid-column: 5;
31 grid-area: 1 / 3;
32}Advanced Prefix Patterns:
1/* Linear gradients with prefixes */
2.gradient-background {
3 /* Fallback for old browsers */
4 background: #3b82f6;
5
6 /* IE10+ */
7 background: -ms-linear-gradient(top, #3b82f6 0%, #1e40af 100%);
8
9 /* WebKit (Chrome 10+, Safari 5.1+) */
10 background: -webkit-linear-gradient(top, #3b82f6 0%, #1e40af 100%);
11
12 /* Firefox 3.6+ */
13 background: -moz-linear-gradient(top, #3b82f6 0%, #1e40af 100%);
14
15 /* Opera 11.10+ */
16 background: -o-linear-gradient(top, #3b82f6 0%, #1e40af 100%);
17
18 /* Standard */
19 background: linear-gradient(to bottom, #3b82f6 0%, #1e40af 100%);
20}
21
22/* CSS animations with prefixes */
23@-webkit-keyframes fadeIn {
24 from { opacity: 0; }
25 to { opacity: 1; }
26}
27
28@-moz-keyframes fadeIn {
29 from { opacity: 0; }
30 to { opacity: 1; }
31}
32
33@keyframes fadeIn {
34 from { opacity: 0; }
35 to { opacity: 1; }
36}
37
38.animated-element {
39 -webkit-animation: fadeIn 0.5s ease-out;
40 -moz-animation: fadeIn 0.5s ease-out;
41 animation: fadeIn 0.5s ease-out;
42}
43
44/* CSS transitions with prefixes */
45.smooth-element {
46 -webkit-transition: all 0.3s ease;
47 -moz-transition: all 0.3s ease;
48 -ms-transition: all 0.3s ease;
49 -o-transition: all 0.3s ease;
50 transition: all 0.3s ease;
51
52 -webkit-transform: translateX(0);
53 -moz-transform: translateX(0);
54 -ms-transform: translateX(0);
55 -o-transform: translateX(0);
56 transform: translateX(0);
57}
58
59.smooth-element:hover {
60 -webkit-transform: translateX(20px);
61 -moz-transform: translateX(20px);
62 -ms-transform: translateX(20px);
63 -o-transform: translateX(20px);
64 transform: translateX(20px);
65}
66
67/* User selection with prefixes */
68.no-select {
69 -webkit-user-select: none;
70 -moz-user-select: none;
71 -ms-user-select: none;
72 user-select: none;
73}
74
75/* Placeholder styling */
76.input-field::-webkit-input-placeholder {
77 color: #9ca3af;
78 font-style: italic;
79}
80
81.input-field::-moz-placeholder {
82 color: #9ca3af;
83 font-style: italic;
84 opacity: 1; /* Firefox adds opacity by default */
85}
86
87.input-field:-ms-input-placeholder {
88 color: #9ca3af;
89 font-style: italic;
90}
91
92.input-field::placeholder {
93 color: #9ca3af;
94 font-style: italic;
95}Browser-Specific Hacks (Use Sparingly):
1/* IE-specific styles (last resort) */
2.ie-only-style {
3 /* IE9-11 hack */
4 color: #000 \9;
5}
6
7/* WebKit-specific styles */
8@media screen and (-webkit-min-device-pixel-ratio: 0) {
9 .webkit-only {
10 background: #f0f0f0;
11 }
12}
13
14/* Firefox-specific styles */
15@-moz-document url-prefix() {
16 .firefox-only {
17 margin-top: 1px; /* Firefox rendering difference */
18 }
19}
20
21/* Safari-specific styles */
22@media not all and (min-resolution:.001dpcm) {
23 @supports (-webkit-appearance:none) {
24 .safari-only {
25 -webkit-appearance: none;
26 }
27 }
28}Build CSS that works on all browsers by starting with a solid foundation and progressively enhancing with advanced features.
Progressive Enhancement Strategy:
1/* Start with basic, universally supported styles */
2.card {
3 /* Foundation: Works in all browsers */
4 background: #ffffff;
5 border: 1px solid #e5e7eb;
6 padding: 1rem;
7 margin-bottom: 1rem;
8
9 /* Progressive enhancement: Add modern features */
10 border-radius: 0.5rem; /* CSS3 */
11 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* CSS3 */
12 transition: transform 0.2s ease; /* CSS3 */
13}
14
15/* Enhanced with modern layout */
16@supports (display: grid) {
17 .card-container {
18 display: grid;
19 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
20 gap: 1rem;
21 }
22
23 .card {
24 margin-bottom: 0; /* Remove when using grid */
25 }
26}
27
28/* Fallback for older browsers */
29.card-container {
30 /* Flexbox fallback */
31 display: flex;
32 flex-wrap: wrap;
33 gap: 1rem;
34}
35
36@supports not (gap: 1rem) {
37 .card {
38 /* Margin fallback when gap isn't supported */
39 margin-right: 1rem;
40 margin-bottom: 1rem;
41 }
42}Feature-Based Enhancement:
1/* Base button styles */
2.button {
3 display: inline-block;
4 padding: 0.75rem 1.5rem;
5 background: #3b82f6;
6 color: white;
7 text-decoration: none;
8 text-align: center;
9 cursor: pointer;
10 border: none;
11 font-family: inherit;
12 font-size: 1rem;
13}
14
15/* Enhanced with CSS3 features */
16.button {
17 border-radius: 0.375rem;
18 transition: all 0.15s ease;
19 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
20}
21
22.button:hover {
23 background: #2563eb;
24 transform: translateY(-1px);
25 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
26}
27
28/* Enhanced with modern CSS */
29@supports (backdrop-filter: blur(10px)) {
30 .button-glass {
31 background: rgba(59, 130, 246, 0.8);
32 backdrop-filter: blur(10px);
33 border: 1px solid rgba(255, 255, 255, 0.1);
34 }
35}
36
37/* Enhanced with CSS Grid for button groups */
38@supports (display: grid) {
39 .button-group {
40 display: grid;
41 grid-auto-flow: column;
42 gap: 0.5rem;
43 width: max-content;
44 }
45}
46
47/* Flexbox fallback for button groups */
48.button-group {
49 display: flex;
50 gap: 0.5rem;
51}
52
53@supports not (gap: 0.5rem) {
54 .button-group .button {
55 margin-right: 0.5rem;
56 }
57
58 .button-group .button:last-child {
59 margin-right: 0;
60 }
61}Typography Enhancement Patterns:
1/* Base typography that works everywhere */
2.heading {
3 font-family: Arial, sans-serif;
4 font-size: 2rem;
5 line-height: 1.2;
6 margin-bottom: 1rem;
7 color: #1f2937;
8}
9
10/* Enhanced with modern fonts */
11.heading {
12 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
13 font-weight: 700;
14}
15
16/* Enhanced with CSS custom properties */
17:root {
18 --heading-size: clamp(1.5rem, 4vw, 3rem);
19 --heading-weight: 700;
20}
21
22.heading {
23 font-size: var(--heading-size);
24 font-weight: var(--heading-weight);
25}
26
27/* Enhanced with text decoration */
28@supports (text-decoration-thickness: 3px) {
29 .underlined-heading {
30 text-decoration: underline;
31 text-decoration-color: #3b82f6;
32 text-decoration-thickness: 3px;
33 text-underline-offset: 0.2em;
34 }
35}
36
37/* Fallback for older browsers */
38.underlined-heading {
39 border-bottom: 3px solid #3b82f6;
40 padding-bottom: 0.2em;
41}
42
43/* Enhanced with advanced typography */
44@supports (font-variation-settings: normal) {
45 .variable-font {
46 font-family: 'Inter var', sans-serif;
47 font-variation-settings:
48 'wght' 400,
49 'slnt' 0;
50 }
51
52 .variable-font:hover {
53 font-variation-settings:
54 'wght' 600,
55 'slnt' -10;
56 }
57}Layout Enhancement Patterns:
1/* Mobile-first progressive enhancement */
2.layout {
3 /* Base: Single column for all devices */
4 width: 100%;
5 max-width: 1200px;
6 margin: 0 auto;
7 padding: 1rem;
8}
9
10/* Enhanced: Two columns for tablets */
11@media (min-width: 768px) {
12 .layout {
13 display: flex;
14 gap: 2rem;
15 }
16
17 .layout .main {
18 flex: 2;
19 }
20
21 .layout .sidebar {
22 flex: 1;
23 }
24}
25
26/* Enhanced: CSS Grid for modern browsers */
27@supports (display: grid) {
28 @media (min-width: 768px) {
29 .layout {
30 display: grid;
31 grid-template-columns: 2fr 1fr;
32 gap: 2rem;
33 }
34 }
35}
36
37/* Enhanced: Container queries (future) */
38@supports (container-type: inline-size) {
39 .layout {
40 container-type: inline-size;
41 }
42
43 @container (min-width: 768px) {
44 .layout {
45 grid-template-columns: 2fr 1fr;
46 }
47 }
48}
49
50/* Sticky positioning with fallback */
51.sticky-header {
52 position: relative; /* Fallback */
53 top: 0;
54 z-index: 100;
55}
56
57@supports (position: sticky) {
58 .sticky-header {
59 position: sticky;
60 }
61}
62
63/* Aspect ratio with fallback */
64.aspect-ratio-container {
65 position: relative;
66 width: 100%;
67 /* Fallback: Padding-bottom hack */
68 padding-bottom: 56.25%; /* 16:9 aspect ratio */
69}
70
71.aspect-ratio-container img {
72 position: absolute;
73 top: 0;
74 left: 0;
75 width: 100%;
76 height: 100%;
77 object-fit: cover;
78}
79
80/* Modern aspect-ratio property */
81@supports (aspect-ratio: 16 / 9) {
82 .aspect-ratio-container {
83 aspect-ratio: 16 / 9;
84 padding-bottom: 0;
85 }
86
87 .aspect-ratio-container img {
88 position: static;
89 }
90}Use CSS @supports queries to detect feature availability and apply appropriate styles based on browser capabilities.
Basic @supports Syntax:
1/* Test for property support */
2@supports (display: grid) {
3 .grid-container {
4 display: grid;
5 grid-template-columns: repeat(3, 1fr);
6 gap: 1rem;
7 }
8}
9
10/* Test for property-value combination */
11@supports (backdrop-filter: blur(10px)) {
12 .modal-backdrop {
13 backdrop-filter: blur(10px);
14 background: rgba(0, 0, 0, 0.5);
15 }
16}
17
18/* Test with logical operators */
19@supports (display: flex) and (gap: 1rem) {
20 .flex-container {
21 display: flex;
22 gap: 1rem; /* Only use gap if both flex and gap are supported */
23 }
24}
25
26@supports (display: grid) or (display: flex) {
27 .modern-layout {
28 /* Styles for browsers that support either grid or flex */
29 }
30}
31
32@supports not (display: grid) {
33 .fallback-layout {
34 /* Styles for browsers that don't support grid */
35 display: table;
36 }
37}Advanced Feature Detection:
1/* Complex feature combinations */
2@supports (display: flex) and (gap: 1rem) and (align-items: center) {
3 .advanced-flex {
4 display: flex;
5 gap: 1rem;
6 align-items: center;
7 justify-content: space-between;
8 }
9}
10
11/* Nested @supports for progressive enhancement */
12.component {
13 /* Base styles */
14 background: white;
15 border: 1px solid #ccc;
16}
17
18@supports (box-shadow: 0 2px 4px rgba(0,0,0,0.1)) {
19 .component {
20 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
21 border: none;
22 }
23
24 @supports (backdrop-filter: blur(10px)) {
25 .component.glass {
26 background: rgba(255, 255, 255, 0.8);
27 backdrop-filter: blur(10px);
28 }
29 }
30}
31
32/* CSS custom properties detection */
33@supports (--custom-property: value) {
34 .theme-aware {
35 --primary-color: #3b82f6;
36 --text-color: var(--primary-color);
37 color: var(--text-color);
38 }
39}
40
41/* Complex layout with multiple fallbacks */
42.masonry-layout {
43 /* Fallback 1: Single column */
44 display: block;
45}
46
47@supports (column-count: 3) {
48 .masonry-layout {
49 /* Fallback 2: CSS columns */
50 column-count: 3;
51 column-gap: 1rem;
52 }
53}
54
55@supports (display: grid) and (grid-template-rows: masonry) {
56 .masonry-layout {
57 /* Future: CSS Grid Level 3 masonry */
58 display: grid;
59 grid-template-columns: repeat(3, 1fr);
60 grid-template-rows: masonry;
61 gap: 1rem;
62 column-count: auto; /* Reset columns */
63 }
64}Practical Feature Detection Patterns:
1/* Scroll behavior detection */
2@supports (scroll-behavior: smooth) {
3 html {
4 scroll-behavior: smooth;
5 }
6}
7
8/* Position sticky detection */
9.navigation {
10 position: relative;
11}
12
13@supports (position: sticky) {
14 .navigation {
15 position: sticky;
16 top: 0;
17 z-index: 100;
18 }
19}
20
21/* CSS shapes detection */
22.text-wrap {
23 /* Fallback: Normal text flow */
24 text-align: justify;
25}
26
27@supports (shape-outside: circle()) {
28 .text-wrap {
29 shape-outside: circle(50%);
30 shape-margin: 1rem;
31 float: left;
32 width: 200px;
33 height: 200px;
34 clip-path: circle(50%);
35 }
36}
37
38/* CSS filters detection */
39.image-effect {
40 /* Fallback: No filter */
41}
42
43@supports (filter: blur(5px)) {
44 .image-effect.blurred {
45 filter: blur(5px);
46 transition: filter 0.3s ease;
47 }
48
49 .image-effect.blurred:hover {
50 filter: blur(0);
51 }
52}
53
54/* CSS mask detection */
55.masked-image {
56 /* Fallback: Show full image */
57 background: url('image.jpg') center/cover;
58}
59
60@supports (mask-image: url()) or (-webkit-mask-image: url()) {
61 .masked-image {
62 -webkit-mask-image: radial-gradient(circle, black 60%, transparent 70%);
63 mask-image: radial-gradient(circle, black 60%, transparent 70%);
64 }
65}
66
67/* CSS containment detection */
68@supports (contain: layout style paint) {
69 .optimized-component {
70 contain: layout style paint;
71 }
72}
73
74/* CSS logical properties detection */
75.text-block {
76 /* Fallback: Physical properties */
77 margin-left: 1rem;
78 margin-right: 1rem;
79 text-align: left;
80}
81
82@supports (margin-inline-start: 1rem) {
83 .text-block {
84 /* Modern: Logical properties */
85 margin-inline: 1rem;
86 margin-left: 0;
87 margin-right: 0;
88 text-align: start;
89 }
90}
91
92/* CSS environment variables detection */
93.safe-area-padding {
94 padding: 1rem;
95}
96
97@supports (padding: constant(safe-area-inset-top)) {
98 .safe-area-padding {
99 padding-top: constant(safe-area-inset-top);
100 padding-bottom: constant(safe-area-inset-bottom);
101 padding-left: constant(safe-area-inset-left);
102 padding-right: constant(safe-area-inset-right);
103 }
104}
105
106@supports (padding: env(safe-area-inset-top)) {
107 .safe-area-padding {
108 padding-top: env(safe-area-inset-top);
109 padding-bottom: env(safe-area-inset-bottom);
110 padding-left: env(safe-area-inset-left);
111 padding-right: env(safe-area-inset-right);
112 }
113}Combining @supports with Media Queries:
1/* Responsive feature detection */
2@media (min-width: 768px) {
3 @supports (display: grid) {
4 .responsive-grid {
5 display: grid;
6 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
7 gap: 2rem;
8 }
9 }
10
11 @supports not (display: grid) {
12 .responsive-grid {
13 display: flex;
14 flex-wrap: wrap;
15 }
16
17 .responsive-grid > * {
18 flex: 1 1 250px;
19 margin: 1rem;
20 }
21 }
22}
23
24/* High DPI feature detection */
25@media (min-resolution: 2dppx) {
26 @supports (image-rendering: -webkit-optimize-contrast) {
27 .high-dpi-image {
28 image-rendering: -webkit-optimize-contrast;
29 }
30 }
31}
32
33/* Dark mode with feature detection */
34@media (prefers-color-scheme: dark) {
35 @supports (color-scheme: dark) {
36 :root {
37 color-scheme: dark;
38 }
39 }
40
41 @supports (backdrop-filter: blur(10px)) {
42 .dark-glass {
43 background: rgba(0, 0, 0, 0.6);
44 backdrop-filter: blur(10px);
45 }
46 }
47}Develop comprehensive testing workflows and support strategies to ensure CSS works reliably across all target browsers.
Browser Support Strategy:
1/* Define browser support tiers */
2
3/* Tier 1: Full support (latest 2 versions) */
4/* - Chrome, Firefox, Safari, Edge */
5/* - Full feature set, modern CSS */
6
7/* Tier 2: Functional support (last 4 versions + IE11) */
8/* - Essential functionality works */
9/* - Graceful degradation for advanced features */
10
11/* Tier 3: Basic support (older browsers) */
12/* - Core content accessible */
13/* - Minimal styling, no enhancements */
14
15/* Example implementation */
16.modern-card {
17 /* Tier 3: Basic box for all browsers */
18 background: white;
19 border: 1px solid #ccc;
20 padding: 1rem;
21 margin-bottom: 1rem;
22
23 /* Tier 2: Enhanced styling for modern browsers */
24 border-radius: 8px;
25 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
26}
27
28/* Tier 1: Advanced features for latest browsers */
29@supports (backdrop-filter: blur(10px)) {
30 .modern-card.glass {
31 background: rgba(255, 255, 255, 0.9);
32 backdrop-filter: blur(10px);
33 border: 1px solid rgba(255, 255, 255, 0.2);
34 }
35}
36
37@supports (container-type: inline-size) {
38 .modern-card {
39 container-type: inline-size;
40 }
41
42 @container (min-width: 300px) {
43 .modern-card {
44 display: grid;
45 grid-template-columns: auto 1fr;
46 gap: 1rem;
47 }
48 }
49}Polyfills and Fallback Strategies:
1/* CSS Grid polyfill approach */
2.grid-container {
3 /* IE11 fallback using flexbox */
4 display: flex;
5 flex-wrap: wrap;
6 margin: -0.5rem; /* Negative margin for gap simulation */
7}
8
9.grid-container .grid-item {
10 flex: 1 1 300px;
11 margin: 0.5rem; /* Simulated gap */
12}
13
14/* Modern grid for supported browsers */
15@supports (display: grid) {
16 .grid-container {
17 display: grid;
18 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
19 gap: 1rem;
20 margin: 0;
21 }
22
23 .grid-container .grid-item {
24 margin: 0;
25 }
26}
27
28/* CSS custom properties fallback */
29.theme-component {
30 /* Static fallback values */
31 color: #1f2937;
32 background: #ffffff;
33 border: 1px solid #e5e7eb;
34}
35
36/* Enhanced with custom properties */
37.theme-component {
38 color: var(--text-primary, #1f2937);
39 background: var(--bg-primary, #ffffff);
40 border: 1px solid var(--border-color, #e5e7eb);
41}
42
43/* Object-fit polyfill pattern */
44.responsive-image {
45 width: 100%;
46 height: 200px;
47 background-size: cover;
48 background-position: center;
49 background-repeat: no-repeat;
50 /* Fallback: Use background-image in HTML or JS */
51}
52
53@supports (object-fit: cover) {
54 .responsive-image {
55 object-fit: cover;
56 /* Remove background properties */
57 background-image: none;
58 }
59}Cross-Browser Testing Checklist:
1/* Testing checklist implementation */
2
3/* 1. Layout consistency */
4.test-layout {
5 /* Ensure consistent box model */
6 box-sizing: border-box;
7
8 /* Test flexbox alignment */
9 display: flex;
10 align-items: center;
11 justify-content: space-between;
12
13 /* Test grid fallbacks */
14 display: grid;
15 grid-template-columns: 1fr auto;
16 gap: 1rem;
17}
18
19/* 2. Typography rendering */
20.test-typography {
21 /* System font stack for consistency */
22 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
23 'Roboto', 'Helvetica Neue', Arial, sans-serif;
24
25 /* Consistent line heights */
26 line-height: 1.5;
27
28 /* Font smoothing for WebKit */
29 -webkit-font-smoothing: antialiased;
30 -moz-osx-font-smoothing: grayscale;
31
32 /* Text rendering optimization */
33 text-rendering: optimizeLegibility;
34}
35
36/* 3. Form element consistency */
37.test-form-input {
38 /* Reset browser defaults */
39 appearance: none;
40 -webkit-appearance: none;
41 -moz-appearance: none;
42
43 /* Consistent sizing */
44 box-sizing: border-box;
45 width: 100%;
46 padding: 0.75rem;
47 border: 1px solid #d1d5db;
48 border-radius: 0.375rem;
49
50 /* Typography inheritance */
51 font-family: inherit;
52 font-size: inherit;
53 line-height: inherit;
54}
55
56/* 4. Animation performance */
57.test-animation {
58 /* Use transform for better performance */
59 transform: translateX(0);
60 transition: transform 0.3s ease;
61
62 /* Trigger hardware acceleration */
63 will-change: transform;
64}
65
66.test-animation:hover {
67 transform: translateX(20px);
68}
69
70/* Clean up after animation */
71.test-animation.animation-complete {
72 will-change: auto;
73}
74
75/* 5. Print styles testing */
76@media print {
77 .test-print {
78 /* Ensure good contrast */
79 color: #000 !important;
80 background: white !important;
81
82 /* Remove shadows and effects */
83 box-shadow: none !important;
84 text-shadow: none !important;
85
86 /* Optimize for printing */
87 font-size: 12pt;
88 line-height: 1.4;
89 }
90
91 .test-print .no-print {
92 display: none !important;
93 }
94}Automated Testing Integration:
1/* CSS for automated testing */
2
3/* Test selectors - don't use for styling */
4[data-testid="component"] {
5 /* Minimal styling for test visibility */
6 outline: 1px solid transparent;
7}
8
9/* Visual regression testing helpers */
10.visual-test-baseline {
11 /* Consistent state for screenshots */
12 animation-play-state: paused;
13 transition: none;
14 transform: none;
15}
16
17/* Performance testing indicators */
18.perf-test-heavy {
19 /* Styles that might impact performance */
20 filter: blur(2px);
21 backdrop-filter: blur(10px);
22 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
23}
24
25/* Accessibility testing support */
26.a11y-test-focus:focus {
27 outline: 2px solid #005fcc;
28 outline-offset: 2px;
29}
30
31/* High contrast mode testing */
32@media (prefers-contrast: high) {
33 .contrast-test {
34 border: 2px solid;
35 background: ButtonFace;
36 color: ButtonText;
37 }
38}
39
40/* Reduced motion testing */
41@media (prefers-reduced-motion: reduce) {
42 .motion-test {
43 animation: none;
44 transition: none;
45 transform: none;
46 }
47}
48
49/* Dark mode testing */
50@media (prefers-color-scheme: dark) {
51 .dark-mode-test {
52 background: #1f2937;
53 color: #f9fafb;
54 border-color: #374151;
55 }
56}Browser Bug Workarounds:
1/* Common browser bug fixes */
2
3/* Safari flexbox bug fix */
4.safari-flex-fix {
5 /* Safari needs explicit flex-shrink */
6 flex-shrink: 0;
7 min-width: 0;
8}
9
10/* IE11 grid bug workarounds */
11.ie11-grid-fix {
12 /* IE11 needs explicit sizes */
13 -ms-grid-columns: 1fr;
14 -ms-grid-rows: auto;
15 width: 100%;
16}
17
18/* Chrome sticky positioning bug */
19.chrome-sticky-fix {
20 /* Ensure sticky works in Chrome */
21 position: sticky;
22 top: 0;
23 z-index: 1;
24 /* Chrome needs a transform context */
25 transform: translateZ(0);
26}
27
28/* Firefox sub-pixel rendering */
29.firefox-subpixel-fix {
30 /* Fix for Firefox sub-pixel rendering */
31 transform: translateX(0.5px);
32}
33
34/* Edge flexbox gap fallback */
35.edge-flex-gap-fix {
36 display: flex;
37 gap: 1rem;
38}
39
40/* If gap isn't supported */
41@supports not (gap: 1rem) {
42 .edge-flex-gap-fix > * {
43 margin-right: 1rem;
44 }
45
46 .edge-flex-gap-fix > *:last-child {
47 margin-right: 0;
48 }
49}A comprehensive demonstration of cross-browser compatible CSS with vendor prefixes, progressive enhancement, feature detection, and fallback strategies.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Cross-browser Compatibility Mastery</title>
7 <style>
8 /* ==========================================================================
9 Cross-browser Compatible CSS
10 Includes vendor prefixes, progressive enhancement, and fallback strategies
11 ========================================================================== */
12
13 /* CSS Reset with cross-browser consistency */
14 * {
15 margin: 0;
16 padding: 0;
17 -webkit-box-sizing: border-box;
18 -moz-box-sizing: border-box;
19 box-sizing: border-box;
20 }
21
22 /* Base styles with fallbacks */
23 body {
24 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
25 font-size: 16px;
26 line-height: 1.6;
27 color: #1f2937;
28 background: #f9fafb;
29
30 /* WebKit font smoothing */
31 -webkit-font-smoothing: antialiased;
32 -moz-osx-font-smoothing: grayscale;
33 text-rendering: optimizeLegibility;
34 }
35
36 /* Container with progressive enhancement */
37 .container {
38 width: 100%;
39 max-width: 1200px;
40 margin: 0 auto;
41 padding: 0 1rem;
42
43 /* Modern CSS if supported */
44 padding: 0 clamp(1rem, 5vw, 3rem);
45 }
46
47 /* Header with sticky positioning fallback */
48 .header {
49 background: #ffffff;
50 border-bottom: 1px solid #e5e7eb;
51 padding: 1rem 0;
52 position: relative; /* Fallback */
53 top: 0;
54 z-index: 100;
55
56 /* CSS3 shadow with fallbacks */
57 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
58 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
59 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
60 }
61
62 /* Sticky positioning for modern browsers */
63 @supports (position: sticky) {
64 .header {
65 position: sticky;
66 }
67 }
68
69 /* Navigation with flexbox fallbacks */
70 .nav {
71 /* Fallback: Float-based layout */
72 overflow: hidden;
73 }
74
75 .nav-brand {
76 float: left;
77 font-size: 1.5rem;
78 font-weight: bold;
79 color: #3b82f6;
80 text-decoration: none;
81 line-height: 1.5;
82 }
83
84 .nav-menu {
85 float: right;
86 list-style: none;
87 }
88
89 .nav-menu li {
90 display: inline-block;
91 margin-left: 2rem;
92 }
93
94 /* Enhanced with flexbox for modern browsers */
95 @supports (display: flex) {
96 .nav {
97 display: -webkit-box;
98 display: -webkit-flex;
99 display: -moz-box;
100 display: -ms-flexbox;
101 display: flex;
102 -webkit-box-align: center;
103 -webkit-align-items: center;
104 -moz-align-items: center;
105 -ms-flex-align: center;
106 align-items: center;
107 -webkit-box-pack: justify;
108 -webkit-justify-content: space-between;
109 -moz-justify-content: space-between;
110 -ms-flex-pack: justify;
111 justify-content: space-between;
112 overflow: visible;
113 }
114
115 .nav-brand,
116 .nav-menu {
117 float: none;
118 }
119
120 .nav-menu {
121 display: -webkit-box;
122 display: -webkit-flex;
123 display: -moz-box;
124 display: -ms-flexbox;
125 display: flex;
126 -webkit-box-align: center;
127 -webkit-align-items: center;
128 -moz-align-items: center;
129 -ms-flex-align: center;
130 align-items: center;
131 gap: 2rem;
132 }
133
134 .nav-menu li {
135 display: block;
136 margin-left: 0;
137 }
138 }
139
140 /* Navigation links with transitions */
141 .nav-link {
142 color: #6b7280;
143 text-decoration: none;
144 font-weight: 500;
145 padding: 0.5rem 1rem;
146
147 /* CSS3 border radius with vendor prefixes */
148 -webkit-border-radius: 0.375rem;
149 -moz-border-radius: 0.375rem;
150 border-radius: 0.375rem;
151
152 /* CSS3 transitions with vendor prefixes */
153 -webkit-transition: all 0.15s ease;
154 -moz-transition: all 0.15s ease;
155 -ms-transition: all 0.15s ease;
156 -o-transition: all 0.15s ease;
157 transition: all 0.15s ease;
158 }
159
160 .nav-link:hover,
161 .nav-link:focus {
162 background: #f3f4f6;
163 color: #1f2937;
164 }
165
166 .nav-link.active {
167 background: #eff6ff;
168 color: #3b82f6;
169 }
170
171 /* Hero section with gradient fallbacks */
172 .hero {
173 padding: 4rem 0;
174 text-align: center;
175 position: relative;
176 overflow: hidden;
177
178 /* Fallback background */
179 background: #3b82f6;
180
181 /* CSS3 gradients with vendor prefixes */
182 background: -webkit-gradient(linear, left top, right bottom, from(#3b82f6), to(#1e40af));
183 background: -webkit-linear-gradient(top left, #3b82f6, #1e40af);
184 background: -moz-linear-gradient(top left, #3b82f6, #1e40af);
185 background: -o-linear-gradient(top left, #3b82f6, #1e40af);
186 background: linear-gradient(135deg, #3b82f6, #1e40af);
187
188 color: white;
189 }
190
191 /* Animated background for modern browsers */
192 @supports (animation: rotate 20s linear infinite) {
193 .hero::before {
194 content: '';
195 position: absolute;
196 top: -50%;
197 right: -50%;
198 width: 200%;
199 height: 200%;
200 background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
201 -webkit-animation: rotate 20s linear infinite;
202 -moz-animation: rotate 20s linear infinite;
203 animation: rotate 20s linear infinite;
204 }
205
206 @-webkit-keyframes rotate {
207 to { -webkit-transform: rotate(360deg); }
208 }
209
210 @-moz-keyframes rotate {
211 to { -moz-transform: rotate(360deg); }
212 }
213
214 @keyframes rotate {
215 to { transform: rotate(360deg); }
216 }
217 }
218
219 .hero-content {
220 position: relative;
221 z-index: 2;
222 }
223
224 .hero h1 {
225 font-size: 3rem;
226 margin-bottom: 1rem;
227 font-weight: bold;
228
229 /* Responsive font size fallback */
230 font-size: clamp(2rem, 5vw, 3rem);
231 }
232
233 .hero p {
234 font-size: 1.25rem;
235 margin-bottom: 2rem;
236 opacity: 0.9;
237 max-width: 600px;
238 margin-left: auto;
239 margin-right: auto;
240 }
241
242 /* Button component with comprehensive browser support */
243 .btn {
244 display: inline-block;
245 padding: 0.75rem 1.5rem;
246 background: #ffffff;
247 color: #3b82f6;
248 text-decoration: none;
249 font-weight: 600;
250 text-align: center;
251 cursor: pointer;
252 border: 2px solid #ffffff;
253
254 /* CSS3 border radius */
255 -webkit-border-radius: 0.5rem;
256 -moz-border-radius: 0.5rem;
257 border-radius: 0.5rem;
258
259 /* CSS3 transitions */
260 -webkit-transition: all 0.2s ease;
261 -moz-transition: all 0.2s ease;
262 -ms-transition: all 0.2s ease;
263 -o-transition: all 0.2s ease;
264 transition: all 0.2s ease;
265
266 /* CSS3 transforms */
267 -webkit-transform: translateY(0);
268 -moz-transform: translateY(0);
269 -ms-transform: translateY(0);
270 -o-transform: translateY(0);
271 transform: translateY(0);
272 }
273
274 .btn:hover {
275 background: transparent;
276 color: #ffffff;
277
278 /* CSS3 transforms */
279 -webkit-transform: translateY(-2px);
280 -moz-transform: translateY(-2px);
281 -ms-transform: translateY(-2px);
282 -o-transform: translateY(-2px);
283 transform: translateY(-2px);
284
285 /* CSS3 box shadow */
286 -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
287 -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
288 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
289 }
290
291 .btn:active {
292 -webkit-transform: translateY(0);
293 -moz-transform: translateY(0);
294 -ms-transform: translateY(0);
295 -o-transform: translateY(0);
296 transform: translateY(0);
297 }
298
299 /* Button variants */
300 .btn-primary {
301 background: #3b82f6;
302 color: white;
303 border-color: #3b82f6;
304 }
305
306 .btn-primary:hover {
307 background: #2563eb;
308 border-color: #2563eb;
309 }
310
311 /* Section styling */
312 .section {
313 padding: 4rem 0;
314 }
315
316 .section:nth-child(even) {
317 background: #ffffff;
318 }
319
320 /* Grid layout with comprehensive fallbacks */
321 .card-grid {
322 /* Fallback 1: Single column */
323 display: block;
324 }
325
326 /* Fallback 2: Float-based grid for older browsers */
327 @media (min-width: 640px) {
328 .card-grid::after {
329 content: "";
330 display: table;
331 clear: both;
332 }
333
334 .card-grid .card {
335 float: left;
336 width: 48%;
337 margin-right: 2%;
338 margin-bottom: 2rem;
339 }
340
341 .card-grid .card:nth-child(2n) {
342 margin-right: 0;
343 }
344 }
345
346 @media (min-width: 1024px) {
347 .card-grid .card {
348 width: 31.333%;
349 margin-right: 2%;
350 }
351
352 .card-grid .card:nth-child(3n) {
353 margin-right: 0;
354 }
355
356 .card-grid .card:nth-child(2n) {
357 margin-right: 2%;
358 }
359 }
360
361 /* Enhanced with flexbox */
362 @supports (display: flex) {
363 .card-grid {
364 display: -webkit-box;
365 display: -webkit-flex;
366 display: -moz-box;
367 display: -ms-flexbox;
368 display: flex;
369 -webkit-flex-wrap: wrap;
370 -ms-flex-wrap: wrap;
371 flex-wrap: wrap;
372 margin: -1rem;
373 }
374
375 .card-grid .card {
376 -webkit-box-flex: 1;
377 -webkit-flex: 1 1 300px;
378 -moz-flex: 1 1 300px;
379 -ms-flex: 1 1 300px;
380 flex: 1 1 300px;
381 margin: 1rem;
382 float: none;
383 width: auto;
384 }
385 }
386
387 /* Enhanced with CSS Grid for modern browsers */
388 @supports (display: grid) {
389 .card-grid {
390 display: grid;
391 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
392 gap: 2rem;
393 margin: 0;
394 }
395
396 .card-grid .card {
397 margin: 0;
398 width: auto;
399 flex: none;
400 }
401 }
402
403 /* Card component with progressive enhancement */
404 .card {
405 background: #ffffff;
406 border: 1px solid #e5e7eb;
407 padding: 1.5rem;
408 margin-bottom: 2rem;
409
410 /* CSS3 enhancements */
411 -webkit-border-radius: 0.75rem;
412 -moz-border-radius: 0.75rem;
413 border-radius: 0.75rem;
414
415 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
416 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
417 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
418
419 -webkit-transition: all 0.3s ease;
420 -moz-transition: all 0.3s ease;
421 -ms-transition: all 0.3s ease;
422 -o-transition: all 0.3s ease;
423 transition: all 0.3s ease;
424 }
425
426 .card:hover {
427 -webkit-transform: translateY(-4px);
428 -moz-transform: translateY(-4px);
429 -ms-transform: translateY(-4px);
430 -o-transform: translateY(-4px);
431 transform: translateY(-4px);
432
433 -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
434 -moz-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
435 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
436 }
437
438 .card-icon {
439 width: 60px;
440 height: 60px;
441 background: #eff6ff;
442 color: #3b82f6;
443 display: flex;
444 align-items: center;
445 justify-content: center;
446 font-size: 1.5rem;
447 margin-bottom: 1rem;
448
449 -webkit-border-radius: 0.75rem;
450 -moz-border-radius: 0.75rem;
451 border-radius: 0.75rem;
452 }
453
454 .card h3 {
455 font-size: 1.25rem;
456 font-weight: 600;
457 margin-bottom: 0.5rem;
458 color: #1f2937;
459 }
460
461 .card p {
462 color: #6b7280;
463 line-height: 1.6;
464 }
465
466 /* Feature showcase with @supports */
467 .feature-showcase {
468 margin: 2rem 0;
469 padding: 2rem;
470 background: #f8fafc;
471 border: 1px solid #e5e7eb;
472
473 -webkit-border-radius: 0.75rem;
474 -moz-border-radius: 0.75rem;
475 border-radius: 0.75rem;
476 }
477
478 /* Enhanced with CSS custom properties */
479 @supports (--custom-property: value) {
480 :root {
481 --primary-color: #3b82f6;
482 --primary-hover: #2563eb;
483 --text-primary: #1f2937;
484 --text-secondary: #6b7280;
485 --bg-primary: #ffffff;
486 --bg-secondary: #f8fafc;
487 --border-color: #e5e7eb;
488 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
489 --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
490 --border-radius: 0.75rem;
491 --transition: all 0.3s ease;
492 }
493
494 .feature-showcase {
495 background: var(--bg-secondary);
496 border-color: var(--border-color);
497 color: var(--text-primary);
498 }
499
500 .enhanced-card {
501 background: var(--bg-primary);
502 border: 1px solid var(--border-color);
503 box-shadow: var(--shadow-sm);
504 border-radius: var(--border-radius);
505 transition: var(--transition);
506 }
507
508 .enhanced-card:hover {
509 box-shadow: var(--shadow-lg);
510 }
511 }
512
513 /* Enhanced with backdrop-filter for modern browsers */
514 @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
515 .glass-card {
516 background: rgba(255, 255, 255, 0.9);
517 -webkit-backdrop-filter: blur(10px);
518 backdrop-filter: blur(10px);
519 border: 1px solid rgba(255, 255, 255, 0.2);
520 }
521 }
522
523 /* Form elements with cross-browser styling */
524 .form-input {
525 width: 100%;
526 padding: 0.75rem;
527 border: 1px solid #d1d5db;
528 background: #ffffff;
529 color: #1f2937;
530 font-family: inherit;
531 font-size: 1rem;
532
533 -webkit-border-radius: 0.375rem;
534 -moz-border-radius: 0.375rem;
535 border-radius: 0.375rem;
536
537 -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease;
538 -moz-transition: border-color 0.15s ease, box-shadow 0.15s ease;
539 -ms-transition: border-color 0.15s ease, box-shadow 0.15s ease;
540 transition: border-color 0.15s ease, box-shadow 0.15s ease;
541
542 /* Remove default appearance */
543 -webkit-appearance: none;
544 -moz-appearance: none;
545 appearance: none;
546 }
547
548 .form-input:focus {
549 outline: none;
550 border-color: #3b82f6;
551 -webkit-box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
552 -moz-box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
553 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
554 }
555
556 /* Placeholder styling with vendor prefixes */
557 .form-input::-webkit-input-placeholder {
558 color: #9ca3af;
559 font-style: italic;
560 }
561
562 .form-input::-moz-placeholder {
563 color: #9ca3af;
564 font-style: italic;
565 opacity: 1;
566 }
567
568 .form-input:-ms-input-placeholder {
569 color: #9ca3af;
570 font-style: italic;
571 }
572
573 .form-input::placeholder {
574 color: #9ca3af;
575 font-style: italic;
576 }
577
578 /* Browser compatibility indicators */
579 .compatibility-grid {
580 display: grid;
581 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
582 gap: 1rem;
583 margin: 2rem 0;
584 }
585
586 .browser-support {
587 background: #ffffff;
588 border: 1px solid #e5e7eb;
589 padding: 1rem;
590 text-align: center;
591
592 -webkit-border-radius: 0.5rem;
593 -moz-border-radius: 0.5rem;
594 border-radius: 0.5rem;
595 }
596
597 .support-level {
598 display: inline-block;
599 padding: 0.25rem 0.75rem;
600 font-size: 0.875rem;
601 font-weight: 500;
602
603 -webkit-border-radius: 9999px;
604 -moz-border-radius: 9999px;
605 border-radius: 9999px;
606 }
607
608 .support-full {
609 background: #dcfce7;
610 color: #166534;
611 }
612
613 .support-partial {
614 background: #fef3c7;
615 color: #92400e;
616 }
617
618 .support-none {
619 background: #fee2e2;
620 color: #991b1b;
621 }
622
623 /* Print styles */
624 @media print {
625 .header {
626 position: static;
627 border-bottom: 2px solid #000;
628 box-shadow: none;
629 }
630
631 .hero {
632 background: transparent !important;
633 color: #000 !important;
634 border: 2px solid #000;
635 }
636
637 .card {
638 border: 1px solid #000;
639 box-shadow: none;
640 page-break-inside: avoid;
641 }
642
643 .btn {
644 border: 2px solid #000;
645 color: #000;
646 background: transparent;
647 text-decoration: underline;
648 }
649
650 .no-print {
651 display: none !important;
652 }
653 }
654
655 /* High contrast mode support */
656 @media (prefers-contrast: high) {
657 .card {
658 border: 2px solid;
659 }
660
661 .btn {
662 border: 2px solid;
663 font-weight: bold;
664 }
665
666 .nav-link:hover,
667 .nav-link:focus {
668 outline: 2px solid;
669 outline-offset: 2px;
670 }
671 }
672
673 /* Reduced motion support */
674 @media (prefers-reduced-motion: reduce) {
675 *,
676 *::before,
677 *::after {
678 -webkit-animation-duration: 0.01ms !important;
679 -moz-animation-duration: 0.01ms !important;
680 animation-duration: 0.01ms !important;
681 -webkit-animation-iteration-count: 1 !important;
682 -moz-animation-iteration-count: 1 !important;
683 animation-iteration-count: 1 !important;
684 -webkit-transition-duration: 0.01ms !important;
685 -moz-transition-duration: 0.01ms !important;
686 -ms-transition-duration: 0.01ms !important;
687 -o-transition-duration: 0.01ms !important;
688 transition-duration: 0.01ms !important;
689 }
690
691 .hero::before {
692 display: none;
693 }
694 }
695
696 /* Mobile responsive adjustments */
697 @media (max-width: 768px) {
698 .hero h1 {
699 font-size: 2rem;
700 }
701
702 .hero p {
703 font-size: 1rem;
704 }
705
706 .nav-menu {
707 flex-direction: column;
708 gap: 0.5rem;
709 }
710
711 .card-grid .card {
712 margin-bottom: 1rem;
713 }
714 }
715
716 /* IE-specific fixes (use sparingly) */
717 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
718 .ie-fix {
719 /* IE11-specific styles */
720 display: -ms-flexbox;
721 -ms-flex-direction: row;
722 }
723 }
724 </style>
725</head>
726<body>
727 <!-- Header with cross-browser navigation -->
728 <header class="header">
729 <div class="container">
730 <nav class="nav">
731 <a href="#" class="nav-brand">🌐 Cross-Browser Demo</a>
732
733 <ul class="nav-menu">
734 <li><a href="#compatibility" class="nav-link active">Compatibility</a></li>
735 <li><a href="#features" class="nav-link">Features</a></li>
736 <li><a href="#testing" class="nav-link">Testing</a></li>
737 <li><a href="#support" class="nav-link">Support</a></li>
738 </ul>
739 </nav>
740 </div>
741 </header>
742
743 <!-- Hero with progressive enhancement -->
744 <section class="hero">
745 <div class="container">
746 <div class="hero-content">
747 <h1>Cross-browser CSS Mastery</h1>
748 <p>Write CSS that works everywhere: vendor prefixes, progressive enhancement, feature detection, and comprehensive testing strategies.</p>
749 <a href="#features" class="btn">Explore Features</a>
750 <a href="#compatibility" class="btn btn-primary">View Compatibility</a>
751 </div>
752 </div>
753 </section>
754
755 <!-- Browser compatibility section -->
756 <section id="compatibility" class="section">
757 <div class="container">
758 <h2 style="text-align: center; margin-bottom: 3rem;">Browser Support Matrix</h2>
759
760 <div class="compatibility-grid">
761 <div class="browser-support">
762 <h3>Chrome</h3>
763 <div style="font-size: 3rem; margin: 1rem 0;">🟢</div>
764 <div class="support-level support-full">Full Support</div>
765 <p style="margin-top: 1rem; font-size: 0.875rem; color: #6b7280;">
766 Latest 2 versions with all modern features
767 </p>
768 </div>
769
770 <div class="browser-support">
771 <h3>Firefox</h3>
772 <div style="font-size: 3rem; margin: 1rem 0;">🟢</div>
773 <div class="support-level support-full">Full Support</div>
774 <p style="margin-top: 1rem; font-size: 0.875rem; color: #6b7280;">
775 Latest 2 versions with vendor prefixes
776 </p>
777 </div>
778
779 <div class="browser-support">
780 <h3>Safari</h3>
781 <div style="font-size: 3rem; margin: 1rem 0;">🟡</div>
782 <div class="support-level support-partial">Partial Support</div>
783 <p style="margin-top: 1rem; font-size: 0.875rem; color: #6b7280;">
784 Some features need WebKit prefixes
785 </p>
786 </div>
787
788 <div class="browser-support">
789 <h3>Edge</h3>
790 <div style="font-size: 3rem; margin: 1rem 0;">🟢</div>
791 <div class="support-level support-full">Full Support</div>
792 <p style="margin-top: 1rem; font-size: 0.875rem; color: #6b7280;">
793 Chromium-based Edge fully supported
794 </p>
795 </div>
796
797 <div class="browser-support">
798 <h3>IE 11</h3>
799 <div style="font-size: 3rem; margin: 1rem 0;">🟡</div>
800 <div class="support-level support-partial">Basic Support</div>
801 <p style="margin-top: 1rem; font-size: 0.875rem; color: #6b7280;">
802 Core functionality with polyfills
803 </p>
804 </div>
805
806 <div class="browser-support">
807 <h3>Mobile</h3>
808 <div style="font-size: 3rem; margin: 1rem 0;">🟢</div>
809 <div class="support-level support-full">Full Support</div>
810 <p style="margin-top: 1rem; font-size: 0.875rem; color: #6b7280;">
811 iOS Safari & Android Chrome optimized
812 </p>
813 </div>
814 </div>
815 </div>
816 </section>
817
818 <!-- Features section with progressive enhancement -->
819 <section id="features" class="section">
820 <div class="container">
821 <h2 style="text-align: center; margin-bottom: 3rem;">Progressive Enhancement Features</h2>
822
823 <div class="card-grid">
824 <div class="card">
825 <div class="card-icon">🎨</div>
826 <h3>Vendor Prefixes</h3>
827 <p>Comprehensive vendor prefixes for transforms, transitions, gradients, and flexbox ensure compatibility across all browsers.</p>
828 </div>
829
830 <div class="card">
831 <div class="card-icon">📱</div>
832 <h3>Responsive Design</h3>
833 <p>Mobile-first approach with CSS Grid, Flexbox fallbacks, and float-based layouts for maximum device compatibility.</p>
834 </div>
835
836 <div class="card">
837 <div class="card-icon">🔍</div>
838 <h3>Feature Detection</h3>
839 <p>@supports queries detect browser capabilities and apply appropriate styles, ensuring graceful degradation everywhere.</p>
840 </div>
841
842 <div class="card">
843 <div class="card-icon">⚡</div>
844 <h3>Performance</h3>
845 <p>Hardware-accelerated animations and optimized CSS properties ensure smooth performance across all browsers.</p>
846 </div>
847
848 <div class="card">
849 <div class="card-icon">🎯</div>
850 <h3>Accessibility</h3>
851 <p>High contrast mode, reduced motion, and keyboard navigation support make interfaces accessible to everyone.</p>
852 </div>
853
854 <div class="card">
855 <div class="card-icon">🛠️</div>
856 <h3>Polyfills</h3>
857 <p>CSS and JavaScript fallbacks provide modern functionality in older browsers without breaking the experience.</p>
858 </div>
859 </div>
860 </div>
861 </section>
862
863 <!-- Feature showcase section -->
864 <section class="section" style="background: #ffffff;">
865 <div class="container">
866 <h2 style="text-align: center; margin-bottom: 3rem;">Advanced Feature Showcase</h2>
867
868 <div class="feature-showcase">
869 <h3 style="margin-bottom: 1rem;">CSS Custom Properties Demo</h3>
870 <p style="margin-bottom: 1rem;">This section uses CSS custom properties with fallback values for browsers that don't support them.</p>
871
872 <div class="enhanced-card" style="padding: 1rem; margin: 1rem 0;">
873 <strong>Enhanced Card</strong>
874 <p>Uses CSS custom properties for theming with static fallbacks.</p>
875 </div>
876 </div>
877
878 <!-- Glass effect demo -->
879 <div class="feature-showcase glass-card" style="margin-top: 2rem;">
880 <h3 style="margin-bottom: 1rem;">Backdrop Filter Demo</h3>
881 <p style="margin-bottom: 1rem;">This section demonstrates backdrop-filter with fallbacks for unsupported browsers.</p>
882 <button class="btn btn-primary">Glass Effect Button</button>
883 </div>
884
885 <!-- Form demo -->
886 <div class="feature-showcase" style="margin-top: 2rem;">
887 <h3 style="margin-bottom: 1rem;">Cross-browser Form Elements</h3>
888 <form style="display: grid; gap: 1rem; max-width: 400px;">
889 <input type="text" class="form-input" placeholder="Enter your name" required>
890 <input type="email" class="form-input" placeholder="Enter your email" required>
891 <textarea class="form-input" placeholder="Your message" rows="4" style="resize: vertical;"></textarea>
892 <button type="submit" class="btn btn-primary">Submit Form</button>
893 </form>
894 </div>
895 </div>
896 </section>
897
898 <!-- Testing section -->
899 <section id="testing" class="section">
900 <div class="container">
901 <h2 style="text-align: center; margin-bottom: 3rem;">Testing Strategies</h2>
902
903 <div class="card-grid">
904 <div class="card">
905 <div class="card-icon">🧪</div>
906 <h3>Manual Testing</h3>
907 <p>Test in real browsers across different devices and operating systems to catch rendering differences and interaction issues.</p>
908 </div>
909
910 <div class="card">
911 <div class="card-icon">🤖</div>
912 <h3>Automated Testing</h3>
913 <p>Use tools like Selenium, Playwright, and BrowserStack for automated cross-browser testing and visual regression detection.</p>
914 </div>
915
916 <div class="card">
917 <div class="card-icon">📊</div>
918 <h3>Analytics Monitoring</h3>
919 <p>Monitor real user data to identify browser-specific issues and prioritize compatibility fixes based on user impact.</p>
920 </div>
921
922 <div class="card">
923 <div class="card-icon">🔧</div>
924 <h3>Development Tools</h3>
925 <p>Use browser dev tools, CSS validators, and compatibility checkers to identify and resolve cross-browser issues early.</p>
926 </div>
927 </div>
928 </div>
929 </section>
930
931 <!-- Summary -->
932 <section class="section" style="text-align: center; background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); color: white;">
933 <div class="container">
934 <h2 style="color: white; margin-bottom: 2rem;">🌐 Cross-browser Mastery Achieved!</h2>
935 <p style="font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9;">
936 You've mastered the art of writing CSS that works universally across all browsers!
937 </p>
938
939 <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0;">
940 <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 0.75rem;">
941 <strong>✅ Vendor Prefixes</strong><br>
942 <small>Comprehensive browser-specific property support</small>
943 </div>
944 <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 0.75rem;">
945 <strong>✅ Progressive Enhancement</strong><br>
946 <small>Solid foundation with modern feature layers</small>
947 </div>
948 <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 0.75rem;">
949 <strong>✅ Feature Detection</strong><br>
950 <small>@supports queries and graceful fallbacks</small>
951 </div>
952 <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 0.75rem;">
953 <strong>✅ Testing Strategies</strong><br>
954 <small>Comprehensive browser compatibility assurance</small>
955 </div>
956 </div>
957
958 <button class="btn" style="margin-top: 1rem;">Start Your Next Project</button>
959 </div>
960 </section>
961
962 <script>
963 // Feature detection demonstration
964 function detectFeatures() {
965 const features = {
966 grid: CSS.supports('display', 'grid'),
967 flexbox: CSS.supports('display', 'flex'),
968 customProperties: CSS.supports('--custom-property', 'value'),
969 backdropFilter: CSS.supports('backdrop-filter', 'blur(10px)') || CSS.supports('-webkit-backdrop-filter', 'blur(10px)'),
970 sticky: CSS.supports('position', 'sticky'),
971 aspectRatio: CSS.supports('aspect-ratio', '16/9')
972 };
973
974 console.log('Browser Feature Support:', features);
975 return features;
976 }
977
978 // Progressive enhancement for smooth scrolling
979 function setupSmoothScroll() {
980 // Check if smooth scroll is supported
981 if (CSS.supports('scroll-behavior', 'smooth')) {
982 document.documentElement.style.scrollBehavior = 'smooth';
983 } else {
984 // Polyfill for smooth scrolling
985 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
986 anchor.addEventListener('click', function (e) {
987 e.preventDefault();
988 const target = document.querySelector(this.getAttribute('href'));
989 if (target) {
990 target.scrollIntoView({
991 behavior: 'smooth',
992 block: 'start'
993 });
994 }
995 });
996 });
997 }
998 }
999
1000 // Cross-browser event handling
1001 function addEventListenerSafe(element, event, handler) {
1002 if (element.addEventListener) {
1003 element.addEventListener(event, handler, false);
1004 } else if (element.attachEvent) {
1005 element.attachEvent('on' + event, handler);
1006 } else {
1007 element['on' + event] = handler;
1008 }
1009 }
1010
1011 // Intersection Observer polyfill behavior
1012 function setupScrollAnimations() {
1013 if ('IntersectionObserver' in window) {
1014 const observer = new IntersectionObserver((entries) => {
1015 entries.forEach(entry => {
1016 if (entry.isIntersecting) {
1017 entry.target.style.opacity = '1';
1018 entry.target.style.transform = 'translateY(0)';
1019 }
1020 });
1021 });
1022
1023 document.querySelectorAll('.card').forEach(card => {
1024 card.style.opacity = '0';
1025 card.style.transform = 'translateY(20px)';
1026 card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
1027 observer.observe(card);
1028 });
1029 } else {
1030 // Fallback: Show all cards immediately
1031 document.querySelectorAll('.card').forEach(card => {
1032 card.style.opacity = '1';
1033 card.style.transform = 'translateY(0)';
1034 });
1035 }
1036 }
1037
1038 // Form enhancement with validation
1039 function enhanceForm() {
1040 const form = document.querySelector('form');
1041 if (form) {
1042 addEventListenerSafe(form, 'submit', function(e) {
1043 e.preventDefault();
1044
1045 // Simple validation
1046 const inputs = form.querySelectorAll('input[required], textarea[required]');
1047 let isValid = true;
1048
1049 inputs.forEach(input => {
1050 if (!input.value.trim()) {
1051 input.style.borderColor = '#ef4444';
1052 isValid = false;
1053 } else {
1054 input.style.borderColor = '#10b981';
1055 }
1056 });
1057
1058 if (isValid) {
1059 alert('Form submitted successfully! (This is just a demo)');
1060 form.reset();
1061 inputs.forEach(input => {
1062 input.style.borderColor = '';
1063 });
1064 } else {
1065 alert('Please fill in all required fields.');
1066 }
1067 });
1068
1069 // Real-time validation
1070 const inputs = form.querySelectorAll('input, textarea');
1071 inputs.forEach(input => {
1072 addEventListenerSafe(input, 'input', function() {
1073 if (this.hasAttribute('required') && this.value.trim()) {
1074 this.style.borderColor = '#10b981';
1075 } else if (this.hasAttribute('required')) {
1076 this.style.borderColor = '';
1077 }
1078 });
1079 });
1080 }
1081 }
1082
1083 // Initialize all functionality
1084 document.addEventListener('DOMContentLoaded', function() {
1085 detectFeatures();
1086 setupSmoothScroll();
1087 setupScrollAnimations();
1088 enhanceForm();
1089
1090 // Console log for demonstration
1091 console.log('Cross-browser CSS demo loaded successfully!');
1092 console.log('User agent:', navigator.userAgent);
1093 console.log('Viewport:', window.innerWidth + 'x' + window.innerHeight);
1094 });
1095
1096 // Handle resize events
1097 window.addEventListener('resize', function() {
1098 // Debounce resize handling
1099 clearTimeout(this.resizeTimeout);
1100 this.resizeTimeout = setTimeout(function() {
1101 console.log('Viewport resized:', window.innerWidth + 'x' + window.innerHeight);
1102 }, 250);
1103 });
1104 </script>
1105</body>
1106</html>This comprehensive cross-browser compatibility demonstration showcases professional development practices:
🌐 Complete Vendor Prefix Coverage:
📈 Progressive Enhancement Excellence:
🔍 Advanced Feature Detection:
🧪 Professional Testing Integration:
🛠️ Production-Ready Techniques:
This example represents enterprise-level cross-browser CSS that maintains functionality and aesthetics across the entire browser ecosystem while providing enhanced experiences for modern browsers.
Excellent work mastering cross-browser compatibility! You now have the skills to write CSS that works reliably across all browsers and devices. Next, we'll tackle the final lesson: "Building Your First Styled Website" - the capstone project where you'll integrate everything you've learned to create a complete, professional website. Get ready to showcase your CSS mastery!
Your progress is saved in this browser, on this device only.