این راهنمای مرجع جامع برای پشتیبانی مرورگرها از CSS طراحی شده است تا توسعهدهندگان بتوانند سازگاری وبسایت یا برنامههای خود را در مرورگرهای مختلف بررسی و برنامهریزی کنند. این سند شامل پوشش کامل ویژگیهای پایهای CSS، ویژگیهای CSS3 و CSS4، Flexbox، Grid و Pseudo-classها است. هر ویژگی همراه با شماره نسخه مرورگرهای 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() دارد |
| rgba() |
1 |
3 |
3.1 |
12 |
9 |
3.2 |
2.1 |
CSS3 |
در مرورگرهای قدیمی fallback به hex لازم است |
| 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 |
فقط در مرورگرهای خیلی مدرن |
/* تنظیمات اولیه برای تمام مرورگرها */
* {
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 برای افزودن خودکار پیشوندهای مرورگر استفاده کنید. برای ویژگیهای مدرن از دستور @supports بهره ببرید. سهم بازار مرورگرهای کاربران خود را بررسی کنید و بر اساس آن تصمیمگیری نمایید. ابزارهایی مانند “Can I Use” دادههای بروزرسانی شده و جامع برای سازگاری مرورگرها ارائه میدهند.
