2015년 9월 W3C HTML5 Korean IG 회의에서 발표한 CSS Round Display 자료입니다.

1. CSS Round Display
송효진 주임연구원
hyojin22.song@lge.com
LG전자 SW플랫폼연구소
@ W3C HTML5 Korean IG 회의 (강남 토즈점)
2015. 9. 9

2. 2
• W3C and CSS WG
• Intel Crosswalk Project
• CSS Round Display Specification
• 최근 CSS 동향
목차

3. 3
W3C and CSS WG

4. 4
• W3C
 1994년부터 Web의 발전을 이끈 국제 컨소시엄
 HTML, CSS, XML, SVG, ...
• 표준화 Process
 Editor’s Draft에서 Recommendation까지
1) First Public Working Draft
2) Revising Public Working Draft
3) Candidate Recommendation
4) Proposed Recommendation
5) Recommendation
• W3C 내 모든 표준 문서 열람
 http://www.w3.org/TR
W3C (World Wide Web Consortium)

5. 5
• CSS Working Group
 주 1회 컨퍼런스 콜
 월 평균 400건 내외의 메일링 리스트 활동
 연 4회 F2F 미팅
 과거의 브라우저 벤더 위주의 참여
=> 현재는 제조, 금융, 출판 등에서 활발히 참여
 https://wiki.csswg.org/
• Participation
 원칙적으로는 W3C 가입사만 참여할 수 있으나 사실상 누구나 참여 가능
• CSS 내 모든 표준 문서 열람
 https://drafts.csswg.org/
CSS Working Group

6. 6
• CSS (Cascading Style Sheets)
 마크업 언어가 실제 표시되는 방법을 기술하는 언어
 HTML과 함께 Web 기술의 핵심을 이루고 있음
 Cascading??
 CSS3??
CSS Working Group

7. 7
Intel Crosswalk Project

8. 8
• Crosswalk Overview
 New HTML5 runtime based on Google’s Blink
 Optimized for Android (Supports Tizen, Linux, Mac, and Windows)
 Fully open source, BSD licensed. Started in September, 2013
• Crosswalk’s Values
 Hybrid Application이 주는 개발 생산성
 다양한 안드로이드 버전에 따른 WebView 파편화 문제 해결 (Blink를 App에 내장)
 최신 기술 선 탑재를 통한, 차별화된 웹 앱 개발 가능 (Native에 견주는 성능/기능)
• Related Projects
 Upstream projects: Chromium, Blink, Skia, V8, Wayland
 Downstream projects: Integrated with Cordova, Intel® XDK
Intel Crosswalk Project

9. 9
• Features and APIs
 SIMD (Single instruction, multiple data)
 Second Screen Presentation API
 W3C Resource Timing API
 W3C User Timing API
 HTML5 input enhancements
 Manifest (Standard manifest for web applications)
 Beacon
 Vehicle API (IVI)
 DLNA API (IVI)
 W3C SysApps: Raw Sockets
 W3C SysApps: Device Capabilities
 W3C SysApps: App URI
Intel Crosswalk Project

10. 10
• Crosswalk Architecture Goals
 Blink와 Chromium의 일부를 기반으로 구성하되, 기존 코드 변경을 최소화
 필요한 기능 지원을 위해 업스트림 프로젝트와 함께 연계
 최신 크로미움 버전을 자주 업데이트하며 새로운 기능 제공
 다양한 API 확장을 반영하고 관리
Cordova APIs, early or experimental W3C APIs
• Crosswalk 공식 홈페이지
 https://crosswalk-project.org/
Intel Crosswalk Project

11. 11
CSS Round Display Specification

12. 12
• CSS Extensions for a Round Display
 원형 디스플레이를 효과적으로 지원하기 위한 CSS 확장안
• Background
 원형 디스플레이가 탑재된 제품의 연이은 출시
LG G Watch R, LG Watch Urbane LTE, Samsung Gear S2, Moto 360, ...
 HTML Element는 기본적으로 Box Model (width, height, padding, margin)
• History
 14년 10월: TPAC 2014의 Breakout Session에서 소개
 15년 2월: CSS WG 미팅에서 표준화 활동 공식 승인 (Editor’s Draft)
 15년 4월: Specification, Polyfill 공개
 15년 8월: CSS WG 미팅에서 FPWD 승인 (Working Draft)
CSS Round Display

13. 13
• CSS Round Display Specification
 https://drafts.csswg.org/css-round-display/
• CSS Round Display Polyfill
 https://github.com/anawhj/jRound/
CSS Round Display

14. 14
• “device-radius” property
 Inspired by “border-radius”
 Supports many shapes include rectangle, circle, ellipse, rectangle with round
corners, etc.
1. Detecting a Round Screen (Media Query)
UA not supporting device-radius UA supporting device-radius
[1] [2]
[1]: <link media=“screen and (device-radius: 0%)” rel=“stylesheet” href=“rectangle-clock.css” />
[2]: <link media=“screen and (device-radius: 50%)” rel=“stylesheet” href=“round-clock.css” />

15. 15
• New property of the Screen object
 radius: {1000px | 50%}
• (New) property of the body element
 document.body.borderRadius: {1000px | 50%}
• Existing properties of the Screen object
1. Detecting a Round Screen (JavaScript)

16. 16
• Fitting contents inside the screen
2. Content Alignment

17. 17
• Extend the “shape-inside” property
 Add a value “display”
2. Content Alignment
ABCD
EFGHIJK
LMNOPQ
RSTUV
ABCDEF
GHIJKLM
NOPQRS
TUVWXY
ABCDEFG
HIJ
ABCDEFGHIJ
shape-inside:
circle (50% at 50%, 50%);
shape-inside: display;
shape-inside: display;
?
ABC
DEFG
A
BCD
EF
ABCD
EFGH

18. 18
• Broken border at the display edge
3. Border

19. 19
• New “border-boundary” property
 “none”(default) or “display”
3. Border
border-boundary: display;border-boundary: none;

20. 20
• Elements are often placed along a circle. (or concentric circles)
• Polar coordinates are useful.
4. Layout

21. 21
• Polar coordinates
 “polar-angle” and “polar-distance”
 With “position: polar”
4. Layout
<div id=“container” style=“position: polar”>
<div id=“circle1” style=“polar-angle: 0deg; polar-distance: 50%”></div>
<div id=“circle2” style=“polar-angle: 90deg; polar-distance: 20%”></div>
<div id=“circle3” style=“polar-angle: 225deg; polar-distance: 100%”></div>
</body>
1
2
3

22. 22
최근 CSS 동향

23. 23
• Web Animations
• Will-change
• Layout (Flexbox, Grid)
• Writing Modes
• CSS Page Floats
• CSS Inline Layout
주요 Spec

24. 24
• CSS Specifications https://drafts.csswg.org/
• The CSS3 TEST http://css3test.com/
• CSS TRICKS https://css-tricks.com/
• CSS3.info http://www.css3.info/
• CSS Validation Tool https://jigsaw.w3.org/css-validator/
• CSS Weekly News http://css-weekly.com/archives/
참고 사이트