CSS 크로스브라우징이란? CSS 접두어 사용법

CSS 크로스브라우징이란? CSS 접두어 사용법

 

 

Cross-Browsinginternet browser간의 호환성을 뜻합니다.

인터넷 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등의

다양한 웹 브라우저에서 최신 스크립트와 CSS를 인식하지 못하는 문제를 해결하는 것을 뜻하기도 합니다.

 

자바스크립트 및 CSS를 작성할 경우에는 다양한 웹 브라우저에서 지원을 하는 지 체크가 필요하기 때문에

아래와 같은 사이트를 이용합니다.

 

 

* 검색 시 각 브라우저별로 지원 여부를 알려줍니다.

https://caniuse.com/

 

Can I use... Support tables for HTML5, CSS3, etc

 

caniuse.com

 

 

위 사이트 이용 시 아래와 같은 검색결과가 속성에 따라 다르게 나타나는데 

모두 지원(초록) / 부분 지원 또는 CSS 접두어 필요(카키) / 지원안함 (빨강) 로 구분됩니다.

 

카키색으로 표시되는 영역에서 우측 위 - 노랑 아이콘 표시가 나타나는 부분은 CSS 접두어가 필요한 부분인데

마우스를 올려보면 아래와 같이 CSS 필요 접두어가 나타나는 것을 확인할 수 있습니다.

 

 

위 접두어는 브라우저별로 조금씩 차이가 있습니다(아래 참고)

크로스브라우징에 사용되는 CSS 접두어

 

 

 

▼ Cross-Browsing CSS 접두어 사용 예시

selector { 
  -ms-animation-delay:1s;
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
  animation-delay:1s;
}

 

 

 

 

▼ CSS 속성 브라우저 버전별 호환성 표

사용하려는 CSS 속성을 아래 표에서 Ctrl + F 로 검색하여 확인하세요.


 

 

Property Edge Firefox Chrome Safari Opera
A          
align-content 11 28 21 9 12.1
align-items 11 20 21 9 12.1
align-self 11 20 21 9 12.1
all   27 37   24
animation 10 16 43 9 30
animation-delay 10 16 43 9 30
animation-direction 10 16 43 9 30
animation-duration 10 16 43 9 30
animation-fill-mode 10 16 43 9 30
animation-iteration-count 10 16 43 9 30
animation-name 10 16 43 9 30
animation-play-state 10 16 43 9 30
animation-timing-function 10 16 43 9 30
B          
backface-visibility 10 16 36 4 23
background 4 1 1 1 3.5
background-attachment 4 1 1 1 3.5
background-blend-mode   30 35 7.1 22
background-clip 9 4 4 3 10.5
background-color 4 1 1 1 3.5
background-image 4 1 1 1 3.5
background-origin 9 4 4 3 10.5
background-position 4 1 1 1 3.5
background-repeat 4 1 1 1 3.5
background-size 9 4 4 4.1 10
border 4 1 1 1 3.5
border-bottom 4 1 1 1 3.5
border-bottom-color 4 1 1 1 3.5
border-bottom-left-radius 9 4 5 5 10.5
border-bottom-right-radius 9 4 5 5 10.5
border-bottom-style 5.5 1 1 1 9.2
border-bottom-width 4 1 1 1 3.5
border-collapse 5 1 1 1.2 4
border-color 4 1 1 1 3.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-left 4 1 1 1 3.5
border-left-color 4 1 1 1 3.5
border-left-style 5.5 1 1 1 9.2
border-left-width 4 1 1 1 3.5
border-radius 9 4 5 5 10.5
border-right 4 1 1 1 3.5
border-right-color 4 1 1 1 3.5
border-right-style 5.5 1 1 1 9.2
border-right-width 4 1 1 1 3.5
border-spacing 8 1 1 1 4
border-style 4 1 1 1 3.5
border-top 4 1 1 1 3.5
border-top-color 4 1 1 1 3.5
border-top-left-radius 9 4 5 5 10.5
border-top-right-radius 9 4 5 5 10.5
border-top-style 5.5 1 1 1 9.2
border-top-width 4 1 1 1 3.5
border-width 4 1 1 1 3.5
bottom 5 1 1 1 6
box-decoration-break   32 22 6.1 11.5
box-shadow 9 4 10 5.1 10.5
box-sizing 8 29 10 5.1 9.5
break-after 10 65 50 10 37
break-before 10 65 50 10 37
break-inside 10 65 50 10 37
C          
caption-side 8 1 1 1 4
caret-color   53 57   44
@charset   1.5 2 4 9
clear 5 1 1 1 6
clip 8 1 1 1 7
clip-path 12 54 55 9.1 42
color 3 1 1 1 3.5
column-count 10 52 50 9 37
column-fill 10 52 50 10 37
column-gap 10 52 50 9 37
column-rule 10 52 50 9 37
column-rule-color 10 52 50 9 37
column-rule-style 10 52 50 9 37
column-rule-width 10 52 50 9 37
column-span 10   50 9 37
column-width 10 52 50 9 37
columns 10 52 50 9 37
content 8 1 1 1 4
counter-increment 8 2 4 3.1 9.6
counter-reset 8 2 4 3.1 9.6
cursor 5.5 4 5 5 9.6
D          
direction 5.5 1 2 1.3 9.2
display 8 3 4 3.1 7
E          
empty-cells 8 1 1 1.2 4
F          
filter 13 35 53 9.1 40
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
float 4 1 1 1 7
font 4 1 1 1 3.5
@font-face 9 3.6 4 3 10
font-family 4 1 1 1 3.5
font-feature-settings 10 34 48 9.1 35
@font-feature-values   34      
font-kerning 10 34 32 7  
font-language-override   34      
font-size 5.5 1 1 1 7
font-size-adjust   3      
font-stretch 9 9 48 11 35
font-style 4 1 1 1 7
font-synthesis   34   10  
font-variant 4 1 1 1 3.5
font-variant-alternates   34   9.1  
font-variant-caps   34 52   39
font-variant-east-asian   34      
font-variant-ligatures 10 34 34 7 19
font-variant-numeric   34 52   39
font-variant-position   34      
font-weight 4 1 2 1.3 3.5
G          
grid 10 52 57 10 44
grid-area 10 52 57 10 44
grid-auto-columns 10 52 57 10 44
grid-auto-flow 10 52 57 10 44
grid-auto-rows 10 52 57 10 44
grid-column 10 52 57 10 44
grid-column-end 10 52 57 10 44
grid-column-gap 10 52 57 10 44
grid-column-start 10 52 57 10 44
grid-gap 10 52 57 10 44
grid-row 10 52 57 10 44
grid-row-end 10 52 57 10 44
grid-row-gap 10 52 57 10 44
grid-row-start 10 52 57 10 44
grid-template 10 52 57 10 44
grid-template-areas 10 52 57 10 44
grid-template-columns 10 52 57 10 44
grid-template-rows 10 52 57 10 44
H          
hanging-punctuation          
height 4 1 1 1 7
hyphens 10 43 55 5.1 44
I          
image-rendering   3.6 41 10 28
@import 5.5        
isolation   36 41 7.1 30
J          
justify-content 11 28 29 9 17
K          
@keyframes 10 16 43 9 30
L          
left 5.5 1 1 1 5
letter-spacing 4 1 1 1 3.5
line-break 5.5   1    
line-height 4 1 1 1 7
list-style 4 1 1 1 7
list-style-image 4 1 1 1 7
list-style-position 4 1 1 1 3.5
list-style-type 4 1 1 1 3.5
M          
margin 6 1 1 1 3.5
margin-bottom 6 1 1 1 3.5
margin-left 6 1 1 1 3.5
margin-right 6 1 1 1 3.5
margin-top 6 1 1 1 3.5
mask   53 4 4 15
mask-type   53 4 4 15
max-height 7 1 1 2 7
max-width 7 1 1 2 7
@media 9 3.5 21 4 9
min-height 7 1 1 2 4
min-width 7 1 1 2 4
mix-blend-mode   32 41 8 35
N          
@namespace 9 1 1 1 8
O          
object-fit 16 36 31 7.1 19
object-position 16 36 31 7.1 19
opacity 9 2 4 3.1 9
order 11 28 29 9 17
orphans 10   25 7 12.1
outline 8 1.5 1 1.2 7
outline-color 8 1.5 1 1.2 7
outline-offset   3.5 4 3 10.5
outline-style 8 1.5 1 1.2 7
outline-width 8 1.5 1 1.2 7
overflow 4 1 1 1 7
overflow-wrap 18  49 23 6.1 12.1
overflow-x 9 3.5 4 3 9.5
overflow-y 9   4 3 9.5
P          
padding 4 1 1 1 3.5
padding-bottom 4 1 1 1 3.5
padding-left 4 1 1 1 3.5
padding-right 4 1 1 1 3.5
padding-top 4 1 1 1 3.5
@page 8 19 15   15
page-break-after 4 1 1 1.2 7
page-break-before 4 1 1 1.2 7
page-break-inside 8 19 1 1.3 7
perspective 10 16 36 9 23
perspective-origin 10 16 36 9 23
place-content   60 59 11.1 51
pointer-events 11 3.6 2 4 9
position 7 1 1 1.2 4
Q          
quotes 8 1.5 11 5.1 4
R          
resize 79 5 4 4 15
right 5.5 1 1 1 5
S          
scroll-behavior   36 61   48
shape-image-threshold   62 37 10.1 24
shape-margin   62 37 10.1 24
@supports   22 28 9 12.1
T          
tab-size   4 21 6.1 15
table-layout 5 1 14 1 7
text-align 3 1 1 1 3.5
text-align-last 5.5 49 47   34
text-combine-upright 11 48 48   34
text-decoration 3 1 1 1 3.5
text-decoration-color   36 57 7.1 44
text-decoration-line   36 57 7.1 44
text-decoration-style   36 57   44
text-emphasis   46 25 7.1 15
text-emphasis-color   46 25 7.1 15
text-emphasis-position   46 25 7.1 15
text-emphasis-style   46 25 7.1 15
text-indent 3 1 1 1 3.5
text-justify 5.5 55      
text-orientation   41 48 10.1 35
text-overflow 6 7 4 3.1 11
text-shadow 10 3.5 4 4 9.6
text-transform 4 1 1 1 7
text-underline-position     33    
top 5 1 1 1 6
touch-action 11 52 36   23
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
U          
unicode-bidi 5.5 1 2 1.3 9.2
user-select 10 69 54 3.1 41
V          
vertical-align 4 1 1 1 4
@viewport 10   29   16
visibility 4 1 1 1 4
W          
white-space 8 3.5 1 3 9.5
widows 10   25 7 12.1
width 4 1 1 1 3.5
will-change   36 36 9.1 24
word-break 5.5 15 4 3.1 15
word-spacing 6 1 1 1 3.5
word-wrap 5.5 3.5 4 3.1 10.5
writing-mode 12 41 48 11 35
Z          
z-index 4 3 1 1 4
  Comments,     Trackbacks