css3 spec

  우선순위 (빨간 별) Module   특징 지원 vendor prefix how to use 참고
1    

Media Queries

        https://www.w3.org/TR/css3-mediaqueries/
2   text text-shadow          
3   font font-face IE하위버젼을 위해 eot 포멧 필요       https://www.w3.org/TR/css-fonts-3/
4     font-size
  1. vm
  2. rpm
       
5   color opacity         https://www.w3.org/TR/css3-color/
6 (빨간 별) (빨간 별) background multiple-images   IE9   background.html https://www.w3.org/TR/css3-background/
7     rgb, rgba          
8     gradients    

-moz-

-webkit-

  https://www.w3.org/TR/css3-images/#gradients
9     sizing    

-moz-

-webkit-

  https://www.w3.org/TR/css3-images/#sizing
10     clip   IE9 -webkit- (사파리) background.html    
11     origin   IE9   background.html    
12   border border-radius

 

 

-moz-

-webkit-

  https://www.w3.org/TR/css3-background/#the-border-radius
13   transform      

-moz-

-webkit-

  https://www.w3.org/TR/css3-transforms/
14   transition      

-webkit-

  https://www.w3.org/TR/css3-transitions/
15   animation       -webkit-    
16 (빨간 별) (빨간 별) display  display:flex 관련

flex

flex-direction

flex-wrap

align-items

order

align-self

align-content

justify-content

flex-flow (IE11)
(flex-direction, flex-wrap)

 

-ms- (ie10용)

-moz-

-webkit-

display_flex.html

https://www.w3.org/TR/css-flexbox-1/

예제

  1. flex: editor.html
  2. product_editor_bak.html
17   display -webkit-box -webkit-line-clamp

ONLY

CHROME

SAPARI

   

웹킷엔진에서만 사용됨. (IE에서 사용안됨) http://caniuse.com/#search=-webkit-line-clamp

display:-webkit-box; 와 -webkit-line-clamp를 이용하여 여러줄의 문단도 말줄임 처리를 할 수 있다.

18      

-webkit-box-orient

   
19     box-shadow    

-moz-

-webkit-

  https://www.w3.org/TR/css3-background/#the-box-shadow
20 (빨간 별) (빨간 별) (빨간 별)   box-reflect  

ONLY

CHROME

SAPARI

-webkit- /box_reflect.html https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
21 (빨간 별) (빨간 별)   multiple columns    

-moz-

-webkit-

  https://www.w3.org/TR/css3-multicol/
22     box-sizing    

-moz-

-webkit-

  https://www.w3.org/TR/css3-ui/
23     counter         https://www.w3.org/TR/css-counter-styles-3/
24 (빨간 별) (빨간 별)   speech         https://www.w3.org/TR/css3-speech/
25     shape         https://www.w3.org/TR/css-shapes-1/
26 (빨간 별) (빨간 별)   masking         https://www.w3.org/TR/css-masking-1/
27 (빨간 별) (빨간 별) (빨간 별)           https://www.w3.org/TR/css-namespaces-3/
28 (빨간 별) (빨간 별)   compositing         https://www.w3.org/TR/compositing-1/
29   keyframe            
30   backface-visibility          
 여기를 클릭하여 펼치기…

[공유] 크롬에서 column-count안의 x버튼이 미노출되던 이슈 해결

어제 미팅 때 이미지편집창에서
column-count 안에 transform을 쓴 x버튼이 영역은 잡고 있지만, 노출이 되지 않아 이슈가 있다고 공유드렸었는데요.

해당 이슈 해결하여 공유드립니다.

* test url: http://fe.cafe24test.com/smartAdmin/market/global/admin/product/common/product_editor.html
* 해결방안: column-count가 적용된 부분에 backface-visibility: hidden; 을 적용하였더니 해결되었습니다.
* 예시:
editList {
column-count: 3;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
* 참고 url: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_backface-visibility

감사합니다.

31 *********