CSS3 Tarayıcı Desteği
Aşağıdaki tablo tüm CSS3 özelliklerini ve özelliklerin tarayıcı desteğini listeliyor! Web tasarım yaparken kullandığımız css özelliklerinin hangi tarayıcıları desteklediğini kontrol etmemiz gerekir.
| CSS3 Özelliği |
IE |
Firefox |
Chrome |
Safari |
Opera |
| align-content |
11 |
28 |
21 |
9 |
12.1 |
| align-items |
11 |
20 |
21 |
9 |
12.1 |
| align-self |
11 |
20 |
21 |
9 |
12.1 |
| @keyframes |
10 |
16 |
43 |
9 |
30 |
| animation |
10 |
16 |
43 |
9 |
30 |
| animation-name |
10 |
16 |
43 |
9 |
30 |
| animation-duration |
10 |
16 |
43 |
9 |
30 |
| animation-timing-function |
10 |
16 |
43 |
9 |
30 |
| animation-delay |
10 |
16 |
43 |
9 |
30 |
| animation-iteration-count |
10 |
16 |
43 |
9 |
30 |
| animation-direction |
10 |
16 |
43 |
9 |
30 |
| animation-play-state |
10 |
16 |
43 |
9 |
30 |
| backface-visibility |
10 |
16 |
36 |
9 |
23 |
| background-clip |
9 |
4 |
4 |
3 |
10.5 |
| background-origin |
9 |
4 |
4 |
3 |
10.5 |
| background-size |
9 |
4 |
4 |
4.1 |
10 |
| border-bottom-left-radius |
9 |
4 |
5 |
5 |
10.5 |
| border-bottom-right-radius |
9 |
4 |
5 |
5 |
10.5 |
| border-image |
11 |
15 |
16 |
6 |
15 |
| border-image-outset |
11 |
15 |
15 |
6 |
15 |
| border-image-repeat |
11 |
15 |
15 |
6 |
15 |
| border-image-slice |
11 |
15 |
15 |
6 |
15 |
| border-image-source |
11 |
15 |
15 |
6 |
15 |
| border-image-width |
11 |
13 |
15 |
6 |
15 |
| border-radius |
9 |
4 |
5 |
5 |
10.5 |
| border-top-left-radius |
9 |
4 |
5 |
5 |
10.5 |
| border-top-right-radius |
9 |
4 |
5 |
5 |
10.5 |
| box-decoration-break |
|
|
|
|
|
| box-shadow |
9 |
4 |
10 |
5.1 |
10.5 |
| box-sizing |
8 |
29 |
10 |
5.1 |
9.5 |
| break-after |
10 |
|
|
|
11.1 |
| break-before |
10 |
|
|
|
11.1 |
| break-inside |
|
|
|
|
|
| column-count |
10 |
2 |
4 |
3 |
15 |
| column-fill |
|
13 |
|
|
|
| column-gap |
10 |
2 |
4 |
3 |
15 |
| column-rule |
10 |
2 |
4 |
3 |
15 |
| column-rule-color |
10 |
2 |
4 |
3 |
15 |
| column-rule-style |
10 |
2 |
4 |
3 |
15 |
| column-rule-width |
10 |
2 |
4 |
|
15 |
| column-span |
10 |
|
4 |
|
15 |
| column-width |
10 |
2 |
4 |
3 |
15 |
| columns |
10 |
9 |
4 |
3 |
15 |
| filter |
|
35 |
18 |
6 |
15 |
| fit |
|
|
|
|
|
| flex |
11 |
28 |
29 |
9 |
17 |
| flex-basis |
11 |
28 |
29 |
9 |
17 |
| flex-direction |
11 |
28 |
29 |
9 |
17 |
| flex-flow |
11 |
28 |
29 |
9 |
17 |
| flex-grow |
11 |
28 |
29 |
9 |
17 |
| flex-shrink |
11 |
28 |
29 |
9 |
17 |
| flex-wrap |
11 |
28 |
29 |
9 |
17 |
| @font-face |
9 |
3.6 |
4 |
3 |
10 |
| @font-feature-values |
|
|
|
|
|
| font-feature-settings |
10 |
34 |
16 |
|
25 |
| font-kerning |
|
|
|
|
|
| font-language-override |
|
|
|
|
|
| font-size-adjust |
|
3 |
|
|
|
| font-stretch |
|
|
|
|
|
| font-synthesis |
|
|
|
|
|
| font-variant |
|
|
|
|
|
| font-variant-alternates |
|
|
|
|
|
| font-variant-caps |
|
|
|
|
|
| font-variant-east-asian |
|
|
|
|
|
| font-variant-ligatures |
|
|
|
|
|
| font-variant-numeric |
|
|
|
|
|
| font-variant-position |
|
|
|
|
|
| hanging-punctuation |
|
|
|
|
|
| hyphens |
10 |
6 |
13 |
5.1 |
|
| image-orientation |
|
26 |
|
|
|
| image-rendering |
|
|
|
|
11.6 |
| image-resolution |
|
|
|
|
|
| justify-content |
11 |
28 |
29 |
9 |
17 |
| line-break |
|
|
|
|
|
| mark |
|
|
|
|
|
| mark-after |
|
|
|
|
|
| mark-before |
|
|
|
|
|
| marks |
|
|
|
|
|
| marquee-direction |
|
|
|
|
|
| marquee-play-count |
|
|
|
|
|
| marquee-speed |
|
|
|
|
|
| marquee-style |
|
|
|
|
|
| nav-down |
|
|
|
|
11.5 |
| nav-index |
|
|
|
|
11.5 |
| nav-left |
|
|
|
|
11.5 |
| nav-right |
|
|
|
|
11.5 |
| nav-up |
|
|
|
|
11.5 |
| object-fit |
|
|
|
|
|
| object-position |
|
|
|
|
|
| opacity |
9 |
2 |
4 |
3.1 |
9 |
| order |
11 |
28 |
29 |
9 |
17 |
| outline-offset |
|
3.5 |
4 |
3 |
10.5 |
| overflow-wrap |
9 |
3.5 |
|
3 |
9.5 |
| overflow-x |
9 |
3.5 |
4 |
3 |
9.5 |
| overflow-y |
9 |
|
4 |
3 |
9.5 |
| @page |
8 |
19 |
|
5 |
6 |
| perspective |
10 |
16 |
36 |
9 |
23 |
| perspective-origin |
10 |
16 |
36 |
9 |
23 |
| resize |
|
5 |
4 |
4 |
15 |
| rest |
|
|
|
|
|
| rest-after |
|
|
|
|
|
| rest-before |
|
|
|
|
|
| ruby-align |
|
|
|
|
|
| tab-size |
|
4 |
21 |
6.1 |
15 |
| text-align-last |
5.5 |
12 |
35 |
|
|
| text-combine-upright |
|
|
|
|
|
| text-decoration-color |
|
6 |
|
|
|
| text-decoration-line |
|
6 |
|
|
|
| text-decoration-style |
|
6 |
|
|
|
| text-justify |
5.5 |
|
|
|
|
| text-orientation |
|
|
|
|
|
| text-overflow |
6 |
7 |
4 |
3.1 |
11 |
| text-shadow |
10 |
3.5 |
4 |
4 |
9.6 |
| text-underline-position |
|
|
|
|
|
| transform |
10 |
16 |
36 |
9 |
23 |
| transform-origin |
10 |
16 |
36 |
9 |
23 |
| transform-style |
11 |
16 |
36 |
9 |
23 |
| transition |
10 |
16 |
26 |
6.1 |
12.1 |
| transition-delay |
10 |
16 |
26 |
6.1 |
12.1 |
| transition-duration |
10 |
16 |
26 |
6.1 |
12.1 |
| transition-property |
10 |
16 |
26 |
6.1 |
12.1 |
| transition-timing-function |
10 |
16 |
26 |
6.1 |
12.1 |
| word-break |
5.5 |
15 |
4 |
3.1 |
15 |
| word-wrap |
5.5 |
3.5 |
4 |
3.1 |
10.5 |
| writing-mode |
|
|
|
|
|
İkon Açıklamaları
| Internet Explorer tarafından destekleniyor |
| Firefox tarafından destekleniyor |
| Google Chrome tarafından destekleniyor |
| Safari tarafından destekleniyor |
| Opera tarafından destekleniyor |
| -ms- ön ekli Internet Explorer tarafından destekleniyor |
| -moz- ön ekli Firefox tarafından destekleniyor |
| -webkit- ön ekli Google Chrome tarafından destekleniyor |
| -webkit- ön ekli Safari tarafından destekleniyor |
| -webkit- ön ekli Opera tarafından destekleniyor |
Tarayıcı ikonlarının sağındaki sayılar, tarayıcının hangi sürümünde o özelliğin ilk kez desteklendiğini gösterir.
Yukarıdaki tabloda css3 ile gelen özelliklerin tarayıcı desteklerini öğrenmiş olduk.
CSS dersleri ile ilgi sitede yüzlerce örnek uygulamalar ve konu anlatımları vardır.Mutlaka inceleyiniz.
Yorumlar
Yorum Gönder