Bu rehber, CSS özelliklerinin tüm tarayıcılardaki destek durumlarını kapsamlı şekilde sunmak için hazırlanmıştır. Geliştiriciler, bu referansı kullanarak tarayıcılar arası uyumluluk planlaması yapabilir, hangi özelliklerin hangi tarayıcı sürümlerinde çalıştığını hızlıca görebilir ve gerektiğinde uygun fall-back çözümler uygulayabilir. Rehber; temel CSS özellikleri, CSS3 ve CSS4 özellikleri, Flexbox, Grid ve pseudo-class’lar gibi kategorilere ayrılmıştır. Tablo formatı sayesinde hızlı erişim ve pratik kullanım sağlanır. Her özellik için Chrome, Firefox, Safari, Edge, Internet Explorer, iOS Safari ve Android destek sürümleri ile açıklamalar ve ön ek gereksinimleri listelenmiştir.
📊 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 |
Evrensel destek |
| background-color |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Evrensel destek |
| font-family |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Evrensel destek |
| margin |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Evrensel destek |
| padding |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Evrensel destek |
| border |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Evrensel destek |
| width |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Evrensel destek |
| height |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Evrensel destek |
| display |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Evrensel destek |
| position |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 2 |
Evrensel destek |
| float |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Evrensel destek |
📊 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 |
Eski sürümlerde -webkit- ön eki gerektirir |
| box-shadow |
10 |
4 |
5.1 |
12 |
9 |
5 |
4 |
CSS3 |
Eski sürümlerde -webkit- ön eki gerektirir |
| text-shadow |
2 |
3.5 |
4 |
12 |
10 |
4 |
2.1 |
CSS3 |
Ön ek gerekmez |
| opacity |
1 |
1 |
2 |
12 |
9 |
2 |
1 |
CSS3 |
IE8 için filter: alpha() fall-back |
| rgba() |
1 |
3 |
3.1 |
12 |
9 |
3.2 |
2.1 |
CSS3 |
Eski tarayıcılarda hex fall-back gerekir |
| transform |
36 |
16 |
9 |
12 |
9 |
9 |
3 |
CSS3 |
Eski sürümlerde -webkit- ön eki gerektirir |
| transition |
26 |
16 |
9 |
12 |
10 |
9 |
4 |
CSS3 |
Eski sürümlerde -webkit- ön eki gerektirir |
| linear-gradient |
26 |
16 |
7 |
12 |
10 |
7 |
4.4 |
CSS3 |
Çok sayıda ön ek gerektirir |
📊 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 kullanır |
| flex-direction |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE farklı sözdizimi kullanır |
| flex-wrap |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
Sadece IE11+ |
| justify-content |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE -ms-flex-pack kullanır |
| align-items |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE -ms-flex-align kullanır |
| flex-grow |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE -ms-flex-positive kullanır |
| flex-shrink |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE -ms-flex-negative kullanır |
| order |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE -ms-flex-order kullanır |
📊 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 eski sözdizimi -ms- ile |
| grid-template-columns |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE -ms-grid-columns kullanır |
| grid-template-rows |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE -ms-grid-rows kullanır |
| grid-gap |
57 |
52 |
10.1 |
16 |
No |
10.3 |
57 |
CSS3 |
Yeni sözdiziminde gap kullanılmalı |
| grid-column |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE -ms-grid-column kullanır |
| grid-row |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE -ms-grid-row kullanır |
| justify-items |
57 |
52 |
10.1 |
16 |
11 |
10.3 |
57 |
CSS3 |
IE’de sınırlı destek |
📊 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’de destek yok |
| calc() |
26 |
16 |
7 |
12 |
9 |
7 |
4.4 |
CSS3 |
Eski sürümlerde sınırlı destek |
| clamp() |
79 |
75 |
13.1 |
79 |
No |
13.4 |
79 |
CSS4 |
Sadece modern tarayıcılar |
| filter |
53 |
35 |
9.1 |
12 |
No |
9.3 |
53 |
CSS3 |
IE’de sınırlı -ms-filter desteği |
| clip-path |
55 |
3.5 |
13.1 |
12 |
No |
13.1 |
55 |
CSS3 |
Ön ek -webkit- gerektirir |
| object-fit |
32 |
36 |
10 |
16 |
No |
10 |
32 |
CSS3 |
IE’de destek yok |
| aspect-ratio |
88 |
89 |
15 |
88 |
No |
15 |
88 |
CSS4 |
Sadece modern tarayıcılar |
📊 Pseudo-class Support
| Selector |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| :hover |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS1 |
Evrensel destek |
| :focus |
1 |
1 |
1 |
12 |
8 |
1 |
1 |
CSS2 |
Evrensel destek |
| :first-child |
1 |
1 |
3 |
12 |
7 |
1 |
1 |
CSS2 |
Evrensel destek |
| :last-child |
1 |
1 |
3 |
12 |
9 |
1 |
1 |
CSS3 |
Sadece IE9+ |
| :nth-child() |
1 |
3.5 |
3 |
12 |
9 |
3.2 |
1 |
CSS3 |
Sadece IE9+ |
| :not() |
1 |
1 |
3.2 |
12 |
9 |
3.2 |
1 |
CSS3 |
IE9+ sınırlı destek |
| :focus-visible |
86 |
85 |
15.4 |
86 |
No |
15.4 |
86 |
CSS4 |
Sadece modern tarayıcılar |
| :has() |
105 |
121 |
15.4 |
105 |
No |
15.4 |
105 |
CSS4 |
Çok modern tarayıcılarda destek |
/* Tarayıcılar arası reset */
* {
box-sizing: border-box;
}
/* Flexbox fallback ile */
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Grid IE fallback ile */
.grid {
display: -ms-grid;
display: grid;
}
Yeni CSS özellikleri için her zaman fall-back sağlayın ve progressive enhancement yaklaşımını kullanın. Hedef tarayıcılarda, özellikle mobil Safari ve IE’de test edin. Otomatik ön ekler için SASS veya Autoprefixer gibi ön işlemcilerden faydalanın. Modern CSS özelliklerini kontrol etmek için @supports kuralını kullanın. Hedef kitlenizin tarayıcı pazar payını takip edin ve “Can I Use” gibi araçlarla uyumluluk verilerini doğrulayın. Bu uygulamalar, tasarımın tüm tarayıcılarda doğru görünmesini sağlar ve geliştirici deneyimini iyileştirir.
