[출처] http://wit.nts-corp.com/2017/03/02/4338
HTML 5.1 권고안 공개
2016년 11월 1일 웹표준화단체인 W3C의 웹플랫폼워킹그룹(Web Platform Working Group)이 HTML 5.1을 W3C 권고안으로 공개했다. (W3C의 규격이 W3C 권고안에 이르기까지의 과정은 “초안 (Working Draft)” → “최종 초안 (Last Call Working Draft)” → “권고 후보 (CR : Candidate Recommendation)” → “권고안 (PR : Proposed Recommendation)” → “W3C 권고안 (Rec : Recommendation)” 라는 5개의 단계가 있다.)
HTML 권고안의 역사를 간단히 살펴보면 1999년에 HTML 4.01의 권고안이 공개가 됐다. 그러나 HTML 4.01 당시에는 웹 응용프로그램 등이 고려되지 않았고 웹 페이지를 기술하기 위한 포맷이었던 만큼 전면 개정을 거쳐서 W3C가 15년 만인 2014년 10월 28일에 HTML5 권고안을 공개하게 된다.
이번에 권고안을 공개한 HTML 5.1은 원래 HTML 5의 일부였던 규격이다. 하지만 모든 기능에 대한 버그 문제 해소를 2014년까지 목표로 하였는데 권고안이 늦어질 수 있다는 우려가 있어 2012년 9월에 플랜 2014가 제안됐다.
플랜 2014 계획은 당시 안정화된 부분만 HTML 5.0으로, 해결해야 할 문제가 있던 부분은 HTML 5.1로 분할을 한다는 것이다. 그리고 HTML 5.0은 2014년 4Q에 권고하고 HTML 5.1은 2016년 4Q에 권고 한다는 내용도 담고 있었다. 이런 계획에 따라 HTML 5.0은 예정대로 2014년에 일정대로 권고안을 공개 할 수 있었다.
HTML 5.1 책정 작업은 2015년 말까지 HTML 워킹그룹이 진행했지만 웹플랫폼워킹그룹으로 인계되면서 일정에 맞추기 위해 기술 사양을 깃허브에 공개했다.
W3C측은 HTML 포맷 안정화를 1년에 1번 권고안으로 공개할 수 있는 워크플로우 개발을 목표로 한다고 밝히고 있다. 지금은 HTML 5.2 책정 작업을 진행중이고 2017년 말 경 출시 될 것으로 예상된다.
HTML 5.1의 새로운 기능
1. menu와 menuitems 요소를 이용한 Context Menus
5.1의 초안 버전에서는 두 가지 종류의 menu 요소인 context와 toolbar를 소개했다. 전자는 네이티브 컨텍스트 메뉴를 확장하는 데 사용되며 일반적으로 페이지를 마우스 오른쪽 버튼으로 클릭하면 표시되고 후자는 일반 메뉴 구성 요소를 정의하기 위한 것이다. 개발 과정에서 toolbar는 삭제되었지만 context 메뉴는 여전히 남아 있다.
<menu> 태그를 사용하여 하나 또는 여러개의 <menuitem> 요소로 구성된 메뉴를 정의한 다음 contextmenu 속성을 사용하여 요소에 연결할 수 있다.
각각의 <menuitem>은 다음 세 가지 유형 중 하나를 가질 수있다 :
- checkbox – 옵션을 선택하거나 선택 취소 할 수 있다.
- command – 클릭시 액션을 실행할 수 있다.
- radio – 그룹에서 하나의 옵션을 선택할 수 있다.
지원되는 브라우저에서 마우스 우측버튼 클릭을 하면 (그림1)과 같이 표현된다.
(그림1. firefox에서 contextmenu를 사용한 예제이미지)
브라우저 지원 현황: http://caniuse.com/#search=context (Firefox만 지원 되는 중)
2. Details와 Summary 요소
새로운 <details> 및 <summary> 요소는 요소를 클릭하여 추가 정보 블록을 표시하고 숨길 수 있는 기능을 구현한다. 이것은 자바 스크립트를 사용하여 종종 수행되는 것으로, 내부에 <summary> 요소가 있는 <details> 요소를 사용하여 수행 할 수 있다. 요약을 클릭하면 <details> 요소에서 나머지 내용의 표시 여부를 토글한다.
다음 예제는 Firefox와 Chrome에서 테스트 되었다.
지원되는 브라우저에서 (그림2)와 같이 표현된다.
(그림2. Details와 Summary 요소를 사용한 예제이미지)
details 요소를 사용하면 기본으로 제공되는 화살표가 있다. 해당 화살표를 보이지 않게 하거나 이미지를 사용하여 변경하려면 아래와 같은 소스를 이용하면 된다.
브라우저 지원 현황: http://caniuse.com/#feat=html5semantic
3. 추가 입력 유형 – week, month 및 datetime-local
입력 유형은 week, month 및 datetime-local의 세가지 입력 유형으로 확장되었다.
이들 중 처음 두 개는 한 주 또는 한 달을 선택할 수 있게 한다. Chrome에서는 둘 다 드롭 다운 캘린더로 렌더링되어 특정 연도 또는 1 주일 중 하나를 선택할 수 있다. 자바 스크립트에서 값에 액세스하면 대략 다음과 같은 문자열을 받게 된다. 주 입력의 경우 “2017-W43”, 월 입력의 경우 “2017-02”.
초기에 5.1의 초안에서는 datetime 및 datetime-local이라는 두 가지 날짜 – 시간 입력을 도입했다. 차이점은 datetime-local은 사용자의 시간대에서 항상 시간을 선택하는 반면 datetime 입력은 다른 시간대를 선택할 수 있다는 것이다. 개발하는 동안 datetime 형식이 삭제되었으며 이제는 datetime-local 만 남아 있다. datetime-local 입력은 주 또는 월 입력과 비슷한 방식으로 선택할 수 있는 날짜와 별도로 입력 할 수 있는 시간 부분의 두 부분으로 구성된다.
Chrome에서 작동하지만 Firefox에서는 아직 작동하지 않는다.
지원되는 브라우저에서 (그림3)과 같이 표현된다.
(그림3. week, month, datetime-local 입력유형을 사용한 예제이미지)
브라우저 지원 현황: http://caniuse.com/#search=datetime-local
4. 반응형 이미지
HTML 5.1에는 CSS를 사용하지 않고 반응형 이미지를 구현하기 위한 몇 가지 새로운 기능이 포함되어 있다. 이 기능들 각각의 사용 사례를 보도록 한다.
4-1. srcset 이미지 속성
srcset 이미지 속성을 사용하면 픽셀 밀도가 다른 여러 대체 이미지 소스를 볼 수 있다. 그러면 브라우저는 사용자의 장치에 적합한 품질의 이미지(자신의 픽셀 밀도, 줌 레벨 또는 네트워크 속도에 따라 달라진다)를 선택할 수 있다. 예를 들어, 느린 모바일 네트워크에 작은 전화기를 사용하는 사용자는 더 낮은 해상도의 이미지를 제공 할 수 있다.
srcset 속성은 각각의 이미지에 가장 적합한 pixel ratio(픽셀비율)를 설명하는 자체 x 수정자를 사용하여 각각 이미지 URL을 쉼표로 구분 된 목록으로 표현한다. 간단한 예제는 다음과 같다.
|
1
2
3
4
5
|
<img src=“images/low-res.jpg” srcset=“
images/low-res.jpg 1x,
images/high-res.jpg 2x,
images/ultra-high-res.jpg 3x”
>
|
codepen 예제 링크: http://codepen.io/myting/full/bgRvXM/
이 경우 사용자의 pixel ratio가 1이면 low-res 이미지가 표시되고, 2이면 high-res 이미지가 표시되며 3 이상에서는 ultra-high-res 이미지가 선택된다.
(그림4. x수정자를 사용한 srcset 예제이미지)
그림 4를 보면 첫번째 이미지는 PC화면으로 pixel raito가 1, 두번째 이미지는 모바일화면으로 pixel ratio가 2, 세번째 이미지는 모바일화면으로 pixel ratio가 3이다. 브라우저가 스스로 각각의 pixel ratio에 맞는 이미지를 불러온 것을 확인 할 수 있다. 이미지 크기가 점점 작아지는 것과 같이 보이는 이유는 low-res의 경우 1배율이기 때문에 600px의 이미지 사이즈가 그대로 표현되는 것이고 high-res의 경우는 2배율이기 때문에 1000px의 이미지 사이즈가 500px로 표현돼는 것이며, ultra-high-res의 경우 1400px의 이미지 사이즈가 466.666px로 표현되기 때문이다.
또는 다른 pixel ratio 대신 다른 크기의 이미지를 표시하도록 선택할 수 있다. 이것은 w 수정자를 사용하여 수행 할 수 있다.
codepen 예제 링크: http://codepen.io/myting/full/MJoGjM/
위 예제의 srcset 속성에서는 각각 가로폭 600px, 1000px, 1400px인 3개의 이미지를 쉼표로 분리된 문자열 형식으로 적었다. 이럴 경우 브라우저는 이 값을 읽어 현재의 화면 상태에 맞는 적절한 이미지를 불러오게 된다.
데모 예제 링크: http://responsiveimages.org/demos/on-a-grid/index.html
브라우저 지원 현황: http://caniuse.com/#search=srcset
4-2. sizes 이미지 속성
사용자의 화면 크기에 따라 이미지를 다르게 표시 할 수 있다. 예를 들어 와이드 스크린의 경우 한 열에 두개의 이미지를 레이아웃 할 수 있고 더 좁은 화면의 경우 한 열에 하나의 이미지를 레이아웃 할 수 있다. 이것은 sizes 속성을 사용하여 달성 할 수 있다. 이를 통해 화면의 너비를 이미지에 할당 된 공간으로 변환 한 다음 srcset 속성을 사용하여 적절한 이미지를 선택할 수 있다. 다음은 그 예다.
codepen 예제 링크: http://codepen.io/myting/full/bgrqGL/
sizes 속성은 뷰포트의 너비가 500px 이하인 경우 너비의 100%로 정의하고 500px보다 큰 경우 이미지의 너비를 뷰포트의 너비의 50%로 정의한다.
(그림 5. 뷰포트의 너비가 500px 이하인 경우)
(그림 6. 뷰포트의 너비가 500px 이상인 경우)
4-3. picture 요소
각 화면의 이미지 크기를 변경하기에 충분하지 않고 완전히 다른 이미지를 표시 할 수 있는 능력이 필요한 경우 picture 요소를 사용할 수 있다. <img>를 <picture> 요소로 묶고 여러 자식 <source> 요소를 지정하여 화면 크기에 따라 다양한 소스로 이미지를 정의 할 수 있다. <source> 요소는 이미지 로드를 위한 URL 소스 역할을 한다.
(그림 7. pixel ratio 1: 뷰포트의 너비가 500px 이하인 경우(좌), 500px 이상인 경우(우))
(그림 8. pixel ratio 2: 뷰포트의 너비가 500px 이하인 경우(좌), 500px 이상인 경우(우))
(그림 9. pixel ratio 3: 뷰포트의 너비가 500px 이하인 경우(좌), 500px 이상인 경우(우))
그림 8을 보면 pixel ratio가 2일때 (max-width:500px)이 적용된 상태일때는 high-res.jpg가 보여지고 (max-width:1000px)이 적용된 상태일때는 high-res2.jpg가 보여지는걸 확인할 수 있다.
그림 9를 보면 pixel ratio가 3일때 (max-width:500px)이 적용된 상태일때는 ultra-high-res.jpg가 보여지고 (max-width:1000px)이 적용된 상태일때는 ultra-high-res2.jpg가 보여지는걸 확인할 수 있다.
codepen 예제 링크 : http://codepen.io/myting/full/jyLmXM/
데모 예제 링크1 : http://responsiveimages.org/demos/basic-implementation/index.html
데모 예제 링크2 : https://googlechrome.github.io/samples/picture-element/
IE등 아직 picture 요소와 srcset/sizes 속성을 지원하지 않는 브라우저를 위해 폴리필(polyfill) 자바스크립트 라이브러리가 나와 있습니다.
브라우저 지원 현황: http://caniuse.com/#search=picture
4.4 picture 요소와 srcset/sizes 속성을 사용해서 할수 있는 것들
picture 요소와 srcset/sizes 속성을 활용해서 반응형 이미지를 만들면 크게 4가지의 문제를 해결할 수 있다
디바이스 픽셀비율 기반 선택 (Device-pixel-ratio-based selection)
srcset속성에 1x, 2x, 3x와 같은 픽셀 밀도 서술자(Pixel density descriptor)들을 사용하여 고해상도 디스플레이 지원을 추가한다. 새로 추가된 srcset 속성은 <img>와 <source> 엘리먼트 모두에 적용된다. 예제는 상단에 srcset 속성란에 제시해 놓았다.
뷰포트 기반 선택 (Viewport-based selection)
sreset의 w수정자와 sizes 속성을 활용해 뷰포트의 사이즈에 따라 적절한 이미지를 불러올 수 있다.
예제는 상단에 sizes 속성란에 제시해 놓았다.
아트 디렉션 기반 선택 (Art direction-based selection)
<picture> 요소의 가장 일반적인 사용은 반응형 디자인의 “아트 디렉션(Art direction)”이 될 것이다. 뷰포트의 너비에 기반하여 확대/축소되는 하나의 이미지를 가지는 대신에 브라우저의 뷰포트를 보다 적절하게 채워줄 수 있도록 여러개의 이미지를 디자인 할 수 있다.
(그림 10. 아트디렉션 기반 선택이미지. 사진출처: Built-in Browser Support for Responsive Images)
이미지 포맷 기반 선택 (Image format-based selection)
최근 수많은 새로운 이미지 형식이 등장했다. 이 새로운 이미지 형식은 낮은 파일크기로 더 나은 품질을 제공한다. Chrome과 Opera에서 지원되는 Google의 WebP의 이미지라던지 Internet Explorer에서만 지원되는 마이크로 소프트의 JPEG-XR등을 선택해서 불러올수 있다. 이미지에 관해서 좀더 심층적인 검사를 원하면 이곳을 참고하기 바란다.
<source>에는 type 속성이 있는데 각 이미지의 MIME type을 지정하고 브라우저는 지원이 되는 MIME type의 이미지를 첫번째 소스로 선택할 수 있다. 예를 들어 브라우저가 WebP 파일을 지원한다면 다른 브라우저는 png를 불러오는데 반해 WebP 포맷 이미지를 불러오게 된다.
(그림 11. png, webp, jxr, jp2 파일을 각가의 브라우저에서 불러온 화면이미지)
브라우저 지원 현황
JPEG XR : http://caniuse.com/#search=jpegxr
WebP : http://caniuse.com/#search=webp
JPEG 2000 : http://caniuse.com/#search=picture
5. Allowfullscreen for Frames
allowfullscreen 속성은 iframe 요소의 boolean 속성이며 requestFullScreen() 메서드를 호출 할 때 iframe이 전체 화면 모드로 허용되도록 지정한다. 이 값을 설정하지 않으면 요소를 전체 화면 모드로 설정할 수 없다.
6. form.reportValidity()를 사용한 Form 유효성 검사 (자바스크립트)
HTML5는 form.checkValidity() 메서드를 정의한다. 이 메서드를 사용하면 폼의 입력을 정의 된 유효성 검사기와 비교하여 검사하고 결과로 boolean 값을 반환 할 수 있다. 새로운 reportValidity()는 매우 유사하다. 또한 폼의 유효성을 검사하고 결과를 검색 할 수 있지만 브라우저에서 사용자 권한에 오류를 추가로 보고한다. 다음 예제는 Firefox와 Chrome에서 테스트 되었다.
“이름”입력은 필수이지만 비어 있으므로 오류로 표시해야 한다. 지원되는 브라우저에서 확인하면 (그림12)와 같이 표현된다.
(그림12. form.reportValidity()를 사용한 유효성 검사 예제이미지)
HTML 5.1의 삭제/수정된 기능
1. 삭제된 기능
1-1. appCache가 폐지되었다.
Application Cache (appCache)는 사용자가 오프라인 상태에서 사용할 수있는 리소스를 브라우저에 캐시하기 위한 인터페이스였다. 대신 Service Workers API의 사용이 권장되고 있다.
1-2. Media Controllers가 폐지되었다.
오디오 및 동영상을 제어하기 위한 검색바 및 정지 / 재생 버튼 등을 쉽게 구현하기 위한 Media 요소의 MediaController 개체와 mediagroup 속성이 폐지되었다.
- 참고
1-3. command API가 폐지되었다.
조작 메뉴에서 각 명령을 지정하는데 사용된는 <command> 요소를 조작하기위한 API였다. 앞으로는 새롭게 책정 된 <menuitem> 요소를 사용하게 된다.
1-4. <object>의 usemap 속성이 삭제되었다.
<map> 요소를 참조하기 위한 해시 이름을 지정하는 임의 속성이었다.
1-5. accessKeyLabel IDL 속성이 삭제되었다.
accessKeyLabel IDL 속성은 사용자 에이전트에 의해 할당 된 키 조합을 나타내는 문자열을 반환하는 전역 속성이었다.
1-6. <label> 요소의 form 속성은 더이상 유효하지 않다.
form 속성은 form과 label을 연결하는 <form> 요소의 id를 지정하는 특성이었다. HTML5.1에서는 <label> 요소와 그것이 가리키는 form 컨트롤은 반드시 <form> 요소의 하위 요소로 배치되어야 한다.
1-7. <input type=”range”> 요소에서 multiple 속성이 삭제되었다.
다음과 같이 multiple value 값을 지정하는 것이 가능했다.
1-8. <area> 요소에서 hreflang 속성과 type 속성이 삭제되었다.
hreflang 속성은 대상 문서의 언어 코드이고, type 속성은 대상 문서의 MIME 타입을 지정하는 임의의 속성이다.
1-9. 개요를 만들기 위해 <h1> 요소와 <section> 요소를 중첩 할 수 없게 되었다.
다음과 같이 제목을 <h1> 요소로 하고 <section> 요소를 중첩 할 수 없게 되었다.
이 사양이 HTML 5.1에서 삭제 된 이유는 현대 브라우저에서는 중첩된 h1 요소를 h2 – h6 수준처럼 처리 할 수 있지만 그 폐해로서 CSS의 기능을 방해하고 브라우저의 접근성 API가 중첩된 h1 요소를 h1수준으로 다루어서 접근성적으로도 좋지 않다. 자세한 내용은 다음을 참조하기 바란다.
1-10. <isindex> 요소에 의한 양식 제출이 더 이상 사용되지 않는다.
<isindex> 요소는 한 줄의 입력 필드를 표시하고 Enter 키를 눌러 데이터를 보낼 수있게 해주는 요소이다.
1-11. navigator.yieldForStorageUpdates()와 스토리지 뮤텍스(Storage mutex)가 폐지되었다.
스토리지 뮤텍스는 공유 상태에있는 cookie 등에 브라우저가 액세스 할 때 사용되는 뮤텍스(배타 제어)였다. yieldForStorageUpdates()는 해당 뮤텍스의 처리에 사용되는 NavigatorStorageUtils 인터페이스의 메소드였다.
1-12. <tfoot> 요소는 <tbody> 요소 앞에 쓸수 없다.
HTML4.01에서는 <tbody> 요소 앞에 <tfoot> 요소를 쓰게하였다. HTML5가 되어 <tbody> 요소의 전이나 후에 좋아졌습니다만, 이번 HTML5.1에서는 <tbody> 요소와 <tr> 요소의 앞에 쓰는 것이 금지되었다.
1-13. [Exposed = Window] HTMLHyperLinkElementUtils 인터페이스의 확장 된 속성, [Exposed = Window, Worker] 확장 된 특성, DOMStringMap 인터페이스의 IDL 날짜가 삭제되었다
- 참고
2. 수정된 기능
2-1. accesskey 속성에 설정할 수 있는 키는 하나로 변경되었다.
HTML5에서 일단 여러 키를 설정할 수있게 했지만, HTML4 때와 같이 다시 한개만 설정하도록 수정되었다.
2-2. <header>와 <footer> 요소를 중첩하는 것이 가능하게 되었다.
<header>와 <footer> 요소가 sectioning 요소 (<article> 요소, <section> 요소, <nav> 요소, <aside> 요소) 내에 있는 경우 이를 다음과 같이 중첩 시킬 수 있다. (다음은 <header> 요소의 경우다. <footer> 요소의 경우도 마찬가지다.)
2-3. <option> 요소는 비어 있을 수 있다.
label 속성을 지정하지 않아도 <option> </option> 또는 <option label=””> </option>과 같이 빈 값으로 지정할 수 있다.
2-4. mouseWheelEvent가 WheelEvent로 변경되었다.
wheelEvent 인터페이스는 사용자가 마우스 휠이나 휠과 비슷한 장치를 움직일 때 발생하는 이벤트를 처리한다. MouseWheelEvent 및 MouseScrollEvent 인터페이스의 대체 기능이다.
2-5. <input type=”submit”> 요소의 value 속성이 번역 가능한 속성이 되었다.
<input type = “submit”> 요소의 value 값은 (Google의 자동 번역 등에 의해) 페이지가 현지화 될 때 번역된다.
2-6. <figcaption> 요소를 <figure> 요소 내의 어디든지 배치 할 수 있게 되었다.
이전에는 <figure> 요소의 시작 또는 끝에서만 배치 할 수 있었지만 HTML 5.1에서는 다음과 같이 배치 할 수 있다.
2-7. title 속성을 가지고 있거나 친구에게 email을 쓰는 상황에서도 <img> 요소의 alt 속성을 생략 할 수 없다.
거의 생략이 불가능하다(필수). 그러나 다음의 조건을 만족하는 경우에만 예외적으로 허용된다.
1.이미지가 자식 <figcaption> 요소를 가진 <figure> 요소의 자손이고 <figcaption> 요소와 그 자손을 무시하면 <figure> 요소에는 요소 간 공백 이외의 Text 노드 하위 항목이 없으므로, <img> 요소가 아닌 임베디드 컨텐트 자손이 없다면, 첫 번째 <figcaption> 엘리먼트의 내용은 캡션 정보이다. 이 단계들을 중단하라.
(If the image is a descendant of a <figure> element that has a child <figcaption> element, and, ignoring the <figcaption> element and its descendants, the <figure> element has no Text node descendants other than inter-element whitespace, and no embedded content descendant other than the <img> element, then the contents of the first such <figcaption> element are the caption information; abort these steps.)
2. 캡션 정보가 없다. (There is no caption information.)
2-8. <time> 요소의 컨텐츠 모델이 Phrasing content 또는 text가 된다.
HTML 5에서는 Phrasing content 였지만 HTML 5.1에서는 datetime 속성을 사용하면 Phrasing content가 되고 그렇지 않으면 text가 된다.
2-9. <area> 요소의 alt 속성을 더 이상 비워 둘 수 없다.
같은 <map> 요소 내에서 동일한 링크(href 속성 값)가 지정된 <area> 요소가 있고 거기에 비어 있지 않은 alt 속성이 지정되어있는 경우 alt 속성 값을 생략 할 수 있었지만, HTML5.1에서는 금지되었다.
2-10. 사이트를 탐색 할 때, 내가 이동 한 곳에서 다음 링크를 찾아 Focus 할 수 있게 되었다.
focus navigation에 관해서 변경이 된다. 명세서에서 “optionally”라는 문장이 삭제되었다. 예를 들어, 사용자가 페이지의 어딘가를 클릭하면 포커스가 설정된다. 탭을 누르면 포커스가 클릭 위치 옆의 링크로 이동한다.
2-11. <img> 요소에 width=”0″ 지정할 수 있게 되었다.
이미지를 표시하는 것이 아니라 PV를 계산하는 목적으로 <img> 요소를 사용하는 경우 지정 방법이다. 이때 alt 속성 값은 비워 둔다.
2-12. createTFoot() 메서드로 만든 <tfoot> 요소가 table의 하단에 삽입되고 .tfoot 속성에서 참조하는 <tfoot> 요소도 table의 하단 요소가 되었다.
삭제 된 사양으로 <tfoot> 요소가 <tbody> 요소 앞에 쓸수 없게 된 것처럼 .createTFoot() 메소드에서 만든 <tfoot> 요소는 table의 하단에 삽입되도록 되었다. 또한 .tfoot 속성에서 참조하는 <tfoot> 요소도 table의 하단 요소가 되었다.
- 참고
2-13. <fieldset> 요소는 HTMLCollection 인터페이스를 반환하게 되고, namedItem() 메서드는 HTMLCollection 인터페이스의 메서드가 되었다.
<fieldset> 요소의 elements IDL 속성은 원래 HTMLFormControlsCollection 인터페이스를 반환하도록 되어 있었지만, HTML5.1에서는 HTMLCollection 인터페이스를 반환한다. 또한 namedItem() 메서드는 원래 HTMLOptionsCollection 인터페이스의 메서드 였지만, HTML5.1에서는 HTMLCollection 인터페이스의 메서드가 되었다.
2-14. frameElement에서 cross origin의 경우 null을 반환한다.
Window.frameElement는 “<iframe> 또는 <object>와 같은 윈도우”가 포함 된 요소를 반환한다. HTML 5에서는 존재하지 않는 경우에만 null을 반환하고 cross origin의 경우 SecurityError 예외를 던지도록 되어 있었다. HTML 5.1이되어 cross origin의 상황에서도 null을 반환한다.
2-15. 해결할 수없는 이미지는 반드시 절대 URL 대신 currentSrc (현재 URL)가 주어지게 되었다.
2-16. <script> 요소의 IDL 속성 event와 htmlFor가 content 속성을 반영 할 수 있게 되었다.
<script> 요소에 지정된 content 속성의 for와 event가 script의 IDL 속성 htmlFor와 event에 반영되게 되었다.
2-17. meta refresh에서 ;와 url =를 붙이지 않아도 된다.
meta refresh는 페이지에 전송 설정을 지정하는 속성이다. 다음과 같이 ;와 url = 을 생략하고 쓸 수 있게 되었다.
2-18. navigator.javaEnabled()가 메서드가 되었다.
현재 브라우저에서 Java가 유효한지 확인하는 데 사용된다. 유효한 경우는 true를 돌려준다. HTML5에서 속성이었던 것이, HTML5.1에서 메서드가 되었다.
2-19. HTMLCanvasElement.toBlob() 메서드에서 FileCallback 대신 BlobCallback가 사용 되게 되었다.
HTMLCanvasElement.toBlob() 메서드는 File 객체의 세부 정보를 지정하지 않는다. 이는 혼동의 원인이기 때문이다. 자세한 내용은 다음을 참조하십시오.
- 참고
2-20. HTMLCanvasElement.toBlob() 메서드에 전달 callback 함수의 인수는 non-nullable (null 비 허용 형)가 되었다.
다음을 실행하면 error가 반환되게 되었다.
2-21. HTMLHyperlinkElementUtils 인터페이스와 Location 인터페이스의 origin 속성이 읽기 전용이 되었다.
HTMLHyperlinkElementUtils 및 Location은 링크 환경을 처리하는 인터페이스이다. 아래에 표시된 것처럼 두 인터페이스의 origin 속성은 읽기 전용이므로 값이 할당 되더라도 다시 쓸 수 없다.
2-22. SVG의 <title> 요소가 마지막 자식 요소가 아닌 첫 번째 자식 요소로 만들어진다.
SVG에서 title 요소를 만들 때 root 요소에 append하는 것이 아니라 root 요소의 첫 번째 요소로 insert 하게 되었다.
2-23. window.open()이 window를 여는 데 실패했을 때에 null을 반환한다.
일반적으로 새롭게 열린 Window 자체를 반환하지만 팝업 차단 등으로 Window를 여는 데 실패한 경우는 null을 반환하게 되었다.
HTML 5.2 미리보기
W3C의 HTML5 관련 사양의 책정을 하고있는 Web Platform Working Group이 2016년 8월 18일에 “HTML5.2″의 첫 번째 초안을 공개했다. 첫 번째 초안이라는 것은 말 그대로 W3C의 규격의 5단계중 가장 먼저 발표 된 초안 상태의 것을 말한다. 앞으로 몇 번이나 초안의 수정을 하게 되고, 타이밍을 보고 최종 초안으로 스텝 업 되게 된다.
HTML 5.2 사양을 작성하는 작업이 막 시작되었으므로 지금은 별로 도움이 되지 않을 수 있다.
<script type=”module”>
HTML 5.2 생성의 일부로 논의 될 가장 중요한 기능 중 하나는
<script type=”module”> 을 추가하고 모듈을 어떻게 해석하고, 가져오고, 평가할 것인가이다. 이 기능은 JavaScript 모듈로드 및 모듈 종속성 분석, 페칭, 구문 분석 및 평가에 필요한 모든 인프라 지원을 추가한다. 이 주제에 대해 더 자세히 알고 싶으면 WHATWG로 웹 플랫폼에 자바 스크립트 모듈 추가하기 기사를 보기 바란다.
<meta name=”theme-color”>
개발중인 또 다른 기능은
<meta name=“theme-color”> 정의를 추가하는 것이다. 이 값은 HEX 및 RGB 값을 포함하여 CSS에서 사용할 수있는 모든 색상 정의가 될 수 있다. 이 새로운 메타 태그는 웹 페이지에 포함될 때 브라우저와 운영체제가 UI를 사용자 정의 할 때 사용해야 하는 색상을 제안한다. (그림 13)과 같이 Android에서 Chrome을 사용할 때 이미 이 동작이 작동중인 것을 볼 수 있다.
(그림 13. Android에서 Chrome을 사용할때 theme-color가 적용된 이미지)
autocapitalize 속성의 표준화
autocapitalize 속성의 표준화도 논의 중이다. autocapitalize는 현재 Safari iOS에서 구현된다. 두 가지 구현이 있다. 이전 버전의 Safari iOS (iOS 5 이전)에서는 이를 boolean(on 또는 off 일 수 있음)으로 간주한다. 최신 버전에서는 다른 값을 사용할 수 있다. 고유한 방식으로 모든 브라우저에서 이 속성을 지원하도록 제안되었다. 최신 버전의 Safari는 이전 버전과 호환되며 on / off 값을 지원한다.
autocapitalize는 type=”text”, type=”search”, type=”url”, type=”tel”, type=”email” 또는 type=”password”로 설정된 type 속성을 가지는 HTMLInputElements에만 적용된다. 기본값은 자동 대문자로 사용하지 않는 것이다.
다음은 텍스트 영역에서 문장을 자동 대문자로 표시하는 간단한 예다.
다음 표는 입력 요소가 들어갈 수있는 여러 가지 상태를 보여준다.
|
상태
|
키워드
|
|
|---|---|---|
| <input> <input autocapitalize=off> |
대문자 사용금지 | none [default] |
| off | ||
| <input autocapitalize=characters> | 문자 대문자 사용 | characters |
| <input autocapitalize=words> | 단어 대문자 사용 | words |
| <input autocapitalize=sentences> | 문장 대문자 사용 | sentences |
좀더 자세한 내용을 알고 싶으면 html-autocapitalize(GitHub)이나 Autocapitalize for mobile를 보기 바란다.