यह गाइड CSS फीचर्स के विभिन्न ब्राउज़रों में समर्थन के लिए एक व्यापक संदर्भ प्रदान करता है। इसका उद्देश्य डेवलपर्स को क्रॉस-ब्राउज़र कम्पैटिबिलिटी की योजना बनाने में मदद करना है। इसमें CSS के बेसिक प्रॉपर्टीज, CSS3 और CSS4 आधुनिक फीचर्स, Flexbox, Grid और Pseudo-क्लासेस का कवरेज शामिल है। प्रत्येक प्रॉपर्टी के लिए Chrome, Firefox, Safari, Edge, Internet Explorer, iOS Safari और Android में सपोर्ट वर्ज़न और आवश्यक नोट्स प्रदान किए गए हैं। यह टेबल-आधारित फॉर्मेट तेज़ संदर्भ और आसान निर्णय लेने की सुविधा देता है, जिससे डेवलपर्स अपने वेब एप्लिकेशन को सभी प्रमुख ब्राउज़रों में सुसंगत और विश्वसनीय बना सकते हैं।
📊 Basic CSS Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| color |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
| background-color |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
| font-family |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
| margin |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
| padding |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
| border |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
| width |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
| height |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
| display |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
| position |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 2 |
सभी ब्राउज़र में समर्थन |
| float |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
सभी ब्राउज़र में समर्थन |
📊 CSS3 Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| border-radius |
5 |
4 |
5 |
12 |
9 |
4 |
2.1 |
CSS3 |
पुराने वर्ज़न्स में -webkit- प्रीफ़िक्स आवश्यक |
| box-shadow |
10 |
4 |
5.1 |
12 |
9 |
5 |
4 |
CSS3 |
पुराने वर्ज़न्स में -webkit- प्रीफ़िक्स आवश्यक |
| text-shadow |
2 |
3.5 |
4 |
12 |
10 |
4 |
2.1 |
CSS3 |
कोई प्रीफ़िक्स नहीं चाहिए |
| opacity |
1 |
1 |
2 |
12 |
9 |
2 |
1 |
CSS3 |
IE8 में filter: alpha() fallback आवश्यक |
| rgba() |
1 |
3 |
3.1 |
12 |
9 |
3.2 |
2.1 |
CSS3 |
पुराने ब्राउज़र में hex fallback आवश्यक |
| transform |
36 |
16 |
9 |
12 |
9 |
9 |
3 |
CSS3 |
पुराने वर्ज़न्स में -webkit- प्रीफ़िक्स आवश्यक |
| transition |
26 |
16 |
9 |
12 |
10 |
9 |
4 |
CSS3 |
पुराने वर्ज़न्स में -webkit- प्रीफ़िक्स आवश्यक |
| linear-gradient |
26 |
16 |
7 |
12 |
10 |
7 |
4.4 |
CSS3 |
भारी प्रीफ़िक्स आवश्यक |
📊 Flexbox Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: flex |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE10-11 में -ms-flex उपयोग |
| flex-direction |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE में अलग सिंटैक्स |
| flex-wrap |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
केवल IE11+ |
| justify-content |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE में -ms-flex-pack उपयोग |
| align-items |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE में -ms-flex-align उपयोग |
| flex-grow |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE में -ms-flex-positive उपयोग |
| flex-shrink |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE में -ms-flex-negative उपयोग |
| order |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE में -ms-flex-order उपयोग |
📊 CSS Grid Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: grid |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE10-11 में पुराना -ms- सिंटैक्स |
| grid-template-columns |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE में -ms-grid-columns उपयोग |
| grid-template-rows |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE में -ms-grid-rows उपयोग |
| grid-gap |
57 |
52 |
10.1 |
16 |
No |
10.3 |
57 |
CSS3 |
नया सिंटैक्स: gap उपयोग करें |
| grid-column |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE में -ms-grid-column उपयोग |
| grid-row |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE में -ms-grid-row उपयोग |
| justify-items |
57 |
52 |
10.1 |
16 |
11 |
10.3 |
57 |
CSS3 |
IE में सीमित सपोर्ट |
📊 Modern CSS Features Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| custom properties |
49 |
31 |
9.1 |
16 |
No |
9.3 |
49 |
CSS3 |
IE में समर्थित नहीं |
| calc() |
26 |
16 |
7 |
12 |
9 |
7 |
4.4 |
CSS3 |
पुराने वर्ज़न्स में सीमित फ़ंक्शन सपोर्ट |
| clamp() |
79 |
75 |
13.1 |
79 |
No |
13.4 |
79 |
CSS4 |
केवल आधुनिक ब्राउज़र |
| filter |
53 |
35 |
9.1 |
12 |
No |
9.3 |
53 |
CSS3 |
IE में सीमित -ms-filter सपोर्ट |
| clip-path |
55 |
3.5 |
13.1 |
12 |
No |
13.1 |
55 |
CSS3 |
-webkit- प्रीफ़िक्स आवश्यक |
| object-fit |
32 |
36 |
10 |
16 |
No |
10 |
32 |
CSS3 |
IE में समर्थित नहीं |
| aspect-ratio |
88 |
89 |
15 |
88 |
No |
15 |
88 |
CSS4 |
केवल आधुनिक ब्राउज़र |
📊 Pseudo-class Support
| Selector |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| :hover |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS1 |
सभी ब्राउज़र में समर्थन |
| :focus |
1 |
1 |
1 |
12 |
8 |
1 |
1 |
CSS2 |
सभी ब्राउज़र में समर्थन |
| :first-child |
1 |
1 |
3 |
12 |
7 |
1 |
1 |
CSS2 |
सभी ब्राउज़र में समर्थन |
| :last-child |
1 |
1 |
3 |
12 |
9 |
1 |
1 |
CSS3 |
केवल IE9+ |
| :nth-child() |
1 |
3.5 |
3 |
12 |
9 |
3.2 |
1 |
CSS3 |
केवल IE9+ |
| :not() |
1 |
1 |
3.2 |
12 |
9 |
3.2 |
1 |
CSS3 |
IE9+ में सीमित सपोर्ट |
| :focus-visible |
86 |
85 |
15.4 |
86 |
No |
15.4 |
86 |
CSS4 |
केवल आधुनिक ब्राउज़र |
| :has() |
105 |
121 |
15.4 |
105 |
No |
15.4 |
105 |
CSS4 |
केवल बहुत आधुनिक ब्राउज़र |
/* Cross-Browser Reset */
* {
box-sizing: border-box;
}
/* Flexbox फॉलबैक के साथ */
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Grid IE फॉलबैक के साथ */
.grid {
display: -ms-grid;
display: grid;
}
सदैव नई CSS प्रॉपर्टीज के लिए फॉलबैक प्रदान करें। Progressive enhancement दृष्टिकोण अपनाएं और विशेष रूप से मोबाइल Safari और IE पर परीक्षण करें। CSS प्रीप्रोसेसर जैसे SASS या Autoprefixer का उपयोग Vendor प्रीफ़िक्स ऑटोमैटिकली जोड़ने के लिए करें। आधुनिक CSS फीचर्स के लिए @supports नियम का प्रयोग करें। अपने लक्षित दर्शकों में ब्राउज़र मार्केट शेयर पर ध्यान दें और आवश्यकता अनुसार हल्के विकल्प अपनाएँ। “Can I Use” जैसे टूल्स वर्तमान सपोर्ट डेटा प्रदान करते हैं और सभी डिवाइस व ब्राउज़र में सुसंगतता सुनिश्चित करते हैं।
