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 *********