Kenali dukungan Property CSS terhadap perambanan yang di gunakan
Pentingkah hal ini? Ya jelas ini sangat lah penting karena ini adalah modal utama agar laman web kita ramah terhadap semua perambanan.
Ramah di sini maksudnya bukan responsive ya, maksudnya agar property yang kita tanamkan dapat terbaca dengan baik pada perambanan-perambanan yang paling umum di gunakan.
Jujur, Hingga hari ini saya masih terus belajar dan memahami, meskipun masih belum ada waktu yang cukup untuk menekuninya.
Selain untuk bahan pelajaran sendiri, disini saya juga akan berbagi dukungan Property CSS terhadap perambanan yang paling umum di gunakan. Semua telah saya kemas dalam sebuah tabel yang sama-sama bisa kita pelajari di bawah ini.
| Property | IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| align-content | 11 | 28 | 21 | 7 | 12.1 |
| align-items | 11 | 20 | 21 | 7 | 12.1 |
| align-self | 11 | 20 | 21 | 7 | 12.1 |
| @keyframes | 10 | 16 | 4 | 4 | 12.1 |
| animation | 10 | 16 | 4 | 4 | 12.1 |
| animation-name | 10 | 16 | 4 | 4 | 12.1 |
| animation-duration | 10 | 16 | 3 | 4 | 12.1 |
| animation-timing-function | 10 | 16 | 4 | 4 | 12.1 |
| animation-delay | 10 | 16 | 4 | 4 | 12.1 |
| animation-iteration-count | 10 | 16 | 4 | 4 | 12.1 |
| animation-direction | 10 | 16 | 4 | 4 | 12.1 |
| animation-play-state | 10 | 16 | 4 | 4 | 12.1 |
| backface-visibility | 10 | 16 | 36 | 15 | |
| 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 |
| fit | |||||
| flex | 11 | 28 | 29 | 6.1 | 12.1 |
| flex-basis | 11 | 28 | 29 | 6.1 | 12.1 |
| flex-direction | 11 | 28 | 29 | 6.1 | 12.1 |
| flex-flow | 11 | 28 | 29 | 6.1 | 12.1 |
| flex-grow | 11 | 28 | 29 | 6.1 | 12.1 |
| flex-shrink | 11 | 28 | 29 | 6.1 | 12.1 |
| flex-wrap | 11 | 28 | 29 | 6.1 | 12.1 |
| @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 | |
| icon | |||||
| image-orientation | 26 | ||||
| image-rendering | 11.6 | ||||
| image-resolution | |||||
| justify-content | 11 | 28 | 29 | 6.1 | 12.1 |
| 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 | 6.1 | 12.1 |
| 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 | 4 | 23 |
| perspective-origin | 10 | 16 | 36 | 4 | 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 | 3.2 | 23 |
| transform-origin | 10 | 16 | 36 | 3.2 | 23 |
| transform-style | 11 | 16 | 36 | 4.0 | 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 |
Keterangan Ikon
| Di dukung oleh Internet Explorer | |
| Di dukung oleh Firefox | |
| Di dukung oleh Google Chrome | |
| Di dukung oleh Safari | |
| Di dukung oleh Opera | |
| Di dukung oleh Internet Explorer dengan prefix -ms- | |
| Di dukung oleh Firefox dengan prefix -moz- | |
| Di dukung oleh Google Chrome dengan prefix -webkit- | |
| Di dukung oleh Safari dengan prefix -webkit- | |
| Di dukung oleh Opera dengan prefix -webkit- |
Mari belajar!!!
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.