CSS Round Display 송효진 주임연구원

hyojin22.song@lge.com

LG전자 SW플랫폼연구소

@ W3C HTML5 Korean IG 회의 (강남 토즈점)

2015. 9. 9

2

• W3C and CSS WG

• Intel Crosswalk Project

• CSS Round Display Specification

• 최근 CSS 동향

목차

3

W3C and CSS WG

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

• CSS Working Group 주 1회 컨퍼런스 콜

월 평균 400건 내외의 메일링 리스트 활동

연 4회 F2F 미팅

과거의 브라우저 벤더 위주의 참여 => 현재는 제조, 금융, 출판 등에서 활발히 참여

https://wiki.csswg.org/

• Participation 원칙적으로는 W3C 가입사만 참여할 수 있으나 사실상 누구나 참여 가능

• CSS 내 모든 표준 문서 열람 https://drafts.csswg.org/

CSS Working Group

6

• CSS (Cascading Style Sheets) 마크업 언어가 실제 표시되는 방법을 기술하는 언어

HTML과 함께 Web 기술의 핵심을 이루고 있음

Cascading??

CSS3??

CSS Working Group

7

Intel Crosswalk Project

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

• 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

• Crosswalk Architecture Goals Blink와 Chromium의 일부를 기반으로 구성하되, 기존 코드 변경을 최소화

필요한 기능 지원을 위해 업스트림 프로젝트와 함께 연계

최신 크로미움 버전을 자주 업데이트하며 새로운 기능 제공

다양한 API 확장을 반영하고 관리

Cordova APIs, early or experimental W3C APIs

• Crosswalk 공식 홈페이지 https://crosswalk-project.org/

Intel Crosswalk Project

11

CSS Round Display Specification

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

• CSS Round Display Specification https://drafts.csswg.org/css-round-display/

• CSS Round Display Polyfill https://github.com/anawhj/jRound/

CSS Round Display

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

• 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

• Fitting contents inside the screen

2. Content Alignment

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

• Broken border at the display edge

3. Border

19

• New “border-boundary” property “none”(default) or “display”

3. Border

border-boundary: display; border-boundary: none;

20

• Elements are often placed along a circle. (or concentric circles)

• Polar coordinates are useful.

4. Layout

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

최근 CSS 동향

23

• Web Animations

• Will-change

• Layout (Flexbox, Grid)

• Writing Modes

• CSS Page Floats

• CSS Inline Layout

주요 Spec

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/

참고 사이트