NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


CSS flex: Webkit, Android 4.0~4.3 이슈.

본문 건너 뛰기

Webkit 이슈.

웹킷 계열 브라우저에서는 폼 콘트롤 요소가 플렉스 아이템이 되지 않기 때문에 플렉스 흐름에 참여하지 않습니다. 폼 콘트롤 요소가 플렉스 아이템이 되어 플렉스 흐름에 참여하도록 하려면 -webkit-appearance:none; 처리해야 합니다. 이 문제는 Android 뿐만 아니라 웹킷 계열 브라우저(Chrome, Safari) 공통의 문제입니다.

Android 4.0~4.3 이슈.

안드로이드 4.0~4.3 브라우저는 낡은 버전(2009년)의 플렉스 명세-webkit- 접두사를 붙여야 지원할 수 있습니다. 지원하는 속성 수가 최신 표준에 비해 적고 속성 전체 목록을 확인해 보면 단축 속성은 지원하지 않습니다. 안드로이드 4.0~4.3 브라우저가 어떤 속성을 지원하는지 알 수 있는 가장 빠른 방법은 낡은 버전의 플렉스 명세 색인을 확인해 보는 것입니다. 안드로이드 4.4 이후 버전부터는 최신 표준 명세를 지원하고 있으며 벤더 접두사는 필요 없습니다.

아래는 안드로이드 4.0~4.3 브라우저에 대응하기 위한 코드를 정리해 둔 것입니다. 표준 명세의 flex-shrink, flex-basis, flex, flex-flow, align-self, align-content 속성에 대응하는 속성은 따로 존재하지 않습니다.

{ // 플렉스 컨테이너에 적용.
display: -webkit-box;
display: flex;
}

{ // 플렉스 아이템에 적용.
-webkit-box-flex: 1;
flex-grow: 1;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-orient: horizontal;
flex-direction: row;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-orient: vertical;
flex-direction: column;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
flex-direction: row-reverse;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
flex-direction: column-reverse;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-lines: single;
flex-wrap: nowrap;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-lines: multiple;
flex-wrap: wrap;
}

{ // 플렉스 아이템에 적용.
-webkit-box-ordinal-group: 1;
order: 1;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-pack: start;
justify-content: flex-start;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-pack: end;
justify-content: flex-end;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-pack: center;
justify-content: center;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-pack: justify;
justify-content: space-between;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-align: stretch;
align-items: stretch;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-align: start;
align-items: flex-start;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-align: end;
align-items: flex-end;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-align: center;
align-items: center;
}

{ // 플렉스 컨테이너에 적용.
-webkit-box-align: baseline;
align-items: baseline;
}

 

참고

분류: CSS,웹 표준 | 2017년 5월 19일, 15:14 | 정찬명 | 댓글: 0개 |
트랙백URI - http://naradesign.net/wp/2017/05/19/2543/trackback/

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님