MSDN Blogs

? Windows 8 ?? ?????? ???????????? HTML ??? ???????? ?????????? ? ????? Metro. ????????, ??? ??? ??????????, ???, ????????? ???????? HTML ????????, ?? ????????????? ????????? ????? ??????????? Windows 8. ?? ??????????? ??? HTML, ????? ?? ????? ????????? ?????? ???????????????? ?????????? ? ?????????? ?????????? ?????, ???????? ??? ???? ???????? ????????????? HTML. ?? ?????, ????? ?? ????? ?????? ? ?????????? ????????? ???????? ??????????.

? ?????????, ?? ??????, ????? ?? ?????????? ???????????? ???????????? ?????????? ????????? HTML, ????? ??? <button>, ??? ???????? ??????????? ?????????? Windows 8 ?? ?????? ??? ?????????? ? ??? ?????. ? Windows 8 ??? ???????? ????????? ????? ??????????? ??????????? ????????? HTML ?? ?????????? ?????????? ????? ??????? Windows 8. ?? ????????? ??? ??? ??????????? ???????? ?????????? ???????? ????? ??????? ????? ? ????????? ????????????? Windows 8, ?????????? ???????????? ????????? ??????????, ??????????? ? ????????????. ????????? ??? ??????????? ???????? HTML, ?? ?????? ????????? ????????, ??????????????? ??? ????????????? ?????????? ? ????? Metro, ???????? ??? ???? ????????? ???????? HTML.

?????? Windows 8 ????? ??????????? ????????? ??? ???????? ????? ??????????, ???????? ? ????????, ??????????, ?????????? ?????????????. ? ???????? ????????????? ??????? ?? ??????? ???? ?? ????? ??????? ????????? ??????????, <button>, ? ???????? ??????, ??? ????? ??????? ?????????? <button> ? Windows 8 ??????? ???? ??????????????????. ???????? ?????????????? ????? ??????, ?? ??????? ???????? ???????? ?? HTML ??? Windows 8 ? ??????? ????????? ???????? ?????????? ? ????? Metro.

?????? Windows 8

???? ?? ??????? ? ?????????? ?? ????? ?????????? ? ???????????? ?? ??????????????, ??? ??? ???????? ????????? ?? ?????? ?????????? ????????????? ?????????? ? ????? Metro:

1. ?????????? ???????? ???? ? ???????? ????????????? ????? Metro.
2. ?????????? ??? ?????????? ??????????.
3. ??????????? ? ?????? ???????? ????????? (????????, ???????????? ? ??????????? ???????????).
4. ???????? ? ????????.

??????????? ???????? HTML ? Windows 8 ????????? ????? ????????? ???? ????????: ?? ?????, ????? ?? ???????? ? ????? ??????.

????? ??????: ? ??????? ?? ????? ?????????, ??? ?????? ?? ???????, ?????? ??? ??? ??????????? ???????, ????? ?????? ????????? ? ?????????? ?????? ????????? ? ??????????? ??????????? ???????????, ?? ?????, ????? ???? ??????? ?????? “???????? ? ?????” ?????????? ???????, ????????? ???? ????????? ? ????????? ? ??? ???????. ???? ?? ???? ? ?????-?? ???? ?????????? ??? ? ??????, ?? ???????? ???????.

- ???? ??????? (Rico Mariani), ?????????? ?? ??????????? ? ?????? ?????????? Internet Explorer

????, ??????? ??????, ??? ????????????? ???????? <button> ????????? ????? ??????????? ??????? ? ????? ?????? ? ???????????? ??????? ???????? ????????? ????????????? ????????? ?????????? ? ????? Metro.

?????????? ???????? ???? ? ???????? ????????????? ????? Metro

?? ?????? ????????? ??? ???????? ????????????????? ?????????? ? ????? Metro, ???????????? ????????? ???????? ? ????????????? ???????????? ????????? ???????? ???? ? ???????????? ? ??????????? ???????????? ? ?????????? ????????????? ?????? ??????????. ???? ?? ???????? ??????? ?????????? Windows 8 ? ??????? JavaScript ? HTML ? ?????????????? ???????? VS, ?? ????? ????????, ??? ??? ??????????? ???????? HTML, ????? ??? <button>, ?? ????????? ???????? ??? ?????????? ? ????? Metro, ??? ????? ?? ????????? ???????:

<button>Windows 8 Rocks!</button>

 

??? ??? ??? ????????? ? Windows 8 ???????????? ??? ????????? ? ?????? ?????. ??-??????, ?? ???????? ?????? ?? ??????? ??? ????????? HTML, ????? ??? <button>, ????? ???????????? ??? ?????? ???????? ????????? ????????????? CSS-?????? ??? ???????? ?????????? ???????? ??? ????????? ?????? ? ????????? ????????? ??????????. ??-??????, ?? ???????????? ??????????? ?????????? ???????? ? ????? Metro ??? ???? ????????? HTML ? ??????? ???? ??????? ?????? ?????? ?? ?????????, ?????????? ?????? ?????????? Windows ??? JavaScript (WinJS) ? ?? ????????? ?????????? ?? ??? ??????? VS.

????? ?????????????? ????????? HTML

?? ????????? ???????????? ???????? ???????? ????????? ??????????, ????? ???? ??? ????? ?????? ??????????? ?? ??????????. ??????????, ?? ?????????? ???? ? ?? ?? ????????? ? ??????, ????? ?????????? ??????? ??? ?? ????????? ? ?????????? ???????? ????????????? ??? ???? ????????? HTML ? Windows 8.

??????????? ??????????? ????????? ?????????? ???????? ?????????? ? ??????? ?????????????? ????????? ???????????. ??? ?????????? ????? ? ???????? ?????????? ??????? ????????? ?????????? ???????????, ???????? ???????????? ??????? ?????????? ? ??? ??????? ???? ? ????????? ?????? ??? ????? ?????? ??????????.

??? ???????? <button> ????? ???????, ??? ???? ?? ? ????????? ?????? ??????? ????, ? ?????? ?????? ?????? ??????? ?????????? ????????? ???????. ?????????? ??????? ???????? ?????? ???????? ???????? ????:

<button>Normal</button>

<button style="background-color: red;">Styled</button>

??????? 1. ??????? ? ????????????? ?????? ? Internet Explorer

??????? ??? ?? ????????? ? ?????????????? ??????????? ??????????? ???????? ????????????? ? ????? ?????? ?????????? ??????. ?? ?? ?????? ?????? ????????? ????? ?????, ? ?? ????? ???????, ??? ?????????? ????? ?????????? ????? ? ????? ??????????????? ????????? ???????. ??????? Windows 8 ?????? ?? ???????????? ??????????? ????????? HTML ? ??????? ?????????? ???????????. ?? ????????? ???????????? ??? ???????? HTML, ????? ??? ???????????? ? ?????????????? ????????? ??????????, CSS-??????, ????? ?? ????? ???????? ????????? ????? ?????? ???????? ??????????.

?? ???????? ??????????? ??????? ? ?????????? ?????? ????????? ??????????. ????????, ??? ?????? ????? ??????? ?????????? ???????, ????????? ?????????????? -ms-check, ? ?????????? ????? ????? ???????? ???????? ?? ?????? ??????.

input[type=checkbox]::-ms-check{background-image: url("myCheckMark.svg");}

?????? ?????? ??????, ??????????? ? ???????? ?????????? HTML, ????? ????? ? ?????? ??????? ???????????: ????? ????????? ?????????? (?????????? ? ????? Metro ?? JavaScript ? HTML).

???? ??? ???????????????????? ? CSS-??????? ??? ???????? ????????? ??????????, ????? ???????? ???????? ??????????, ??????????? ????? ?????.

??????? 2. ??????? ????????????? ???????

??????? ?????? ???????????????? ????????? ?????????? HTMS ? ??????? ???????????: ????? ????????? ??????????.

?????? ????????????? ???????? ???? ????????? ?????????? ?? ?????? ?????????? CSS ???????? ???????? ???????????????. ??? ???????? ?????, ??? ??? Windows 8 ???????????? ??????? ?????????? ?????????, ? ???????? ?????????? ?????? ???????????????? ??? ???? ?????????? ?????? ? ?????????? ????? ?? ????.

????????????? ?????????? CSS ????????? ????????????? ?????????????? ??? ???? ???????? ?????????? ? ?????????? ?? ????? ????? ??? ???? ?????????? ?????? ? ?????????? ????? ?? ????.

??????? 3. ???????????, ???????????? ? ??????? CSS-??????, ????????? ???????? ??? ????? ??????????

????, ???? ?? ?????? ????????? ???????? ??????????, ??????????? ???????????? ????????? ??????????, ???????? ????????? CSS ??? SVG. ??? ????????????? ????????? ??????????? ???????? ?????????? ????? ??? ??????????????? ????????? ??????????. ??????? ?????????? ????? ?????????????, ??? ???? ?????????? ????? ?????????? ?????????????? ?? ???? ??????????? Windows 8.

?????????????? ???????? ?? ????????? ??????????????? ??. ? ??????? ??????????????? ?? SDK.

Internet Explorer 10 ? HTML ??? Windows 8 ?????????? ???? ????????? HTML. ??? ????????, ??? ??? ???????? HTML ??? Internet Explorer 10 ????? ??????? ? ?????????????? CSS-?????? ? ???-???????, ??????? ??? ????? ????? ???????????? ??? ????????? ?????????? ? ?????????? ????? ?? ???? ? Windows 8!

??????? ??? ? ????? Metro ?? ?????????

?? ???????????? ??????? ??? ? ????? Metro ??? ???? ????????? ?????????? ? ??????? ??????? ?????? CSS. ?? ????? ????????, ??? ??????????? ????? ?????? ????? Metro ??? Windows 8, ????? ?? ????? ????????????? ? ?????????? ??????????? ????????? ?????????, ???????? ???????? ????? ????????? ?????????? ? ???????????? ? ????????? ???????? ??????. ?????????????? ?????????????? ???? ????????! ??? ?????? ?? ?????? “Theme roller” ?? SDK (????????, ?? ?????????? ?????), ? ??????? ????????, ??? ????? ??????????? ????? ????????? ??????????.

?????? ??? ????????? ???????? ???? ?? ????????? ?????????? ??????? ???? ?? ???? ?????? ?????? ?? ?????????. ???????????? ???????? ????? ???? ??????????? ? ???, ?? ????? ???????? ?????? ??? ????????: ui-dark.css ???????? ?????, ??????? ????? ???????? ??? ??????? ????, ? ui-light.css — ??? ????????. ??? ??????????, ???????????? ? ???????? ??????? ??? ?????, ?? ??????????? ???????????? ?????? ??????? ??????, ? ??? ?????????? ? ??????? ??????? ?????? — ??????? ???????. (???? ?? ?????????? ???????????????? ???????? ?????, ???????? ??????? ??????, ??????? ????? ????? ???????? ??? ?????? ??????????.) ?? ?????? ??????? ???????? ????? ??????????, ?????? ?????? ??? ?????? ??????? ?????? ?? ???? ?? ???? ?????? ? ??????? ?????????? HTML-????:

<head>

<!-- Dark Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">

<!-- or Light Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

<!—Other header content -->

</head>

????? ??????? ?????? ??????, ??? ????????? ? ??????????? ????? ?? ????????? — ??????? ??????? ?????? CSS ?? ????????? ? ??????? ?? ?????.

???? ????????? ? ??????????????? ??????? ?????? ? ????? ?? ??????? ????, ??????? ?? ?????? ????? ? ?????????? ? ????? Metro, ??? ??? ?? ???????:

??????? 6. ??????? ? ????????????? ??????

? ??????????? ? ????? Metro ?????????? ?????? ??????????? ???? ?????. ?????? ?? ?????? ????? ????????? ????????? ????? ??????????, ???????? ??????? ??? ? ???????? ?????????????, ???????? ????? Metro.

??? ??????, ?????? ? ??? ??????? ????? ??????????? ??????????? ?????????? ????? ? ????????? ??????????. ??? ???????? ????? ????????????? ???????????????? ??? ????????? ?????????? ?????? ? ????? ????? ?? ????. ?? ????? ????????? ????????? ????????? ???????? ???? ? ???????? ????????????? ??? ?????? ??????????, ???????? ??? ???? ???????????, ???????? ????? Metro.

?????????? ??? ?????????? ??????????

????? ?????? ??? ? ?????????? ???????? ??????????, ?? ?????? ????????? ???????? ????????????????? ??????????, ??????????????? ????????? ??????????, ?????? ? ????? ? ??????????? ? ???????????????? ????????????? ???????? ????????????? ????? ???????, ????????? ?? ???? ??????????? ???????.

?????? ???????? HTML ??? ?????????? ???????????? ?????????? ? ????. ????????? ?????????? ???????? ????? ???????? ??????????????, ??????? ??? ????????????? ?????????? ??? ????????? ?? ???? ????????? HTML. ????? ????????? ??????? ???, ?????????????? ????????? ??????????, ??????? ????????? ???????? ?????????? ????????, ???????? ????? ?????? ?????.

????? ?? ???????? ?????? ??????????

????? — ????? ?????? “????????” ????? ?? ????????? ? ?????????? ????, ?????????????? ???????? ?? ?????? ???????.

????? ???????? ???????? ???????, ? ????????? HTML ??? Windows 8 ????????? ????????? ???????????.

• ?????? ????????? ?????????? ?????? ??? ?????????? ??????????

?? ????????? ?????? ????????? HTML ? ????? Metro ?????????? ? ???????????? ?? ??????? ???????? ??????. ??? ???????????? ????? ???????? ???????? ?????? ???????? ??????????. 7×7 ?? — ??? ??????? ??????????? ??????, ???? ??????? ????????? ??????? ????? ????????? ????? ??? ????? ??????? ??? ? ??????? ???? ??????. ? ????? ??????????? ??????? ?????? ? ???? ????????? ??????????, ?????????????? ??????, ???? ??????????? ?????? ? ??????, ??????? ???? ??????????? ??????? 7×7 ??. ??? ?????? ?? ?????????? ?? ??????? ?????? ?? ?????????.

button, input[type=button], input[type=reset], input[type=submit] { min-height: 32px;  min-width: 90px;}

• ????????? ??????????? ???? ???????

??????????? ???? ??????? ? Windows 8 ???????? ?????????????, ????????? ??????? ???????? ????? ??????? ??????? ?????????? ? ????????? ???????? ? ????????????? ???? ??????? ??????????????? ???????.

• ?????????? ??????????????? ???????

?????? ?????????? ??????????????? ??????? ??????? ? ??????? ???????????????? ???????, ????? ????? ?????????? ???? ??????? ????????????, ????? ??? ????? ??????????? ?????????????? ?????????? ????????? ??????????.

?????????? ???????? ????? ? ?????

??? ?????? ? ????? ???????????? ????? ??????? ???????? ?????????, ?????????, ??? ????? ???????? 1 ??????? ????????? ? ????????, ??????? ??? ????? ????????????, ? ????????. ?? ??? ????????? ?????????? ?????????? ????????? ????????? ?? ???????? ??????, ?? ???? ???????? ?????, ??????????? ???????? ?????????. ??? ???????? ? ??????? ?? ?????????? ??????????? ???????????????? ?????????. ??? ??????, ??? ??? ?????? ? ????? ?? ??????? ??????????, ????? ?????????????? ? ?????? ????? “?????????”. ? ??? ??????? — ?? ????? ?????????. ??? ??? ???????? ?? ?????, ??????????? ??? ?????????? ?????????? ??????? ??????.

????? ???????????? ????? ???????? ???????? ? ????????? ???????, ? Windows 8 ????????? ????? ????????????? ?????????? ????????? ??? ????????? ??????????, ??????? ?????????, ????? ???????????? ?????????? ???????????? ??????? ??????????. ????????, ???????????? ?????? ???? ? ?? ?? ?????????? ???????, ????????????, ??? ???? ????????????, ? ????????? ?? ??????????? ????? ?????? ?????????, ???? ??? ??????????. ? Windows 8 ??? ?????????? ??????? ???????? ? ???? ???????? ?????????? ? ??????? ??????? ?????? ?? ?????????. ??? ??????? ??????????? ????????????? ????????? CSS ? ??????????? ?????????? ??????????????. ??? ?????? ????????????? ??? ???????? <button>:

??????? 8. ????????????? CSS ? ??????????? ?????????? ??????????????

?????????? ????? ???????? ????? ????????? ?????????????? ? ?????? ????????? ?????????? ???????? ? ???????? ??????????.

??????? ?????????

?????? ???????? ?????????? ???????????? ?????????? ???????? ????? ??? ???????, ??????? ???????????? ????? ?????, ????? ?????? ??????? ???????.

??????? 9. ????????? ??????? ??????

????? ???????????? ???????? ??????, ?? ????????? ? ??? ??????????????? CSS :hover ? :active ? ???????????? ???????? ?????, ??????? ??????? ???? ? ???? ?????? ? CSS:

button:hover:active { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);}

?? ??????????? ????????? :hover ? :active ??? ???????, ???????????? ??? ??????? ??????, ? ?? ?????? ???????????? ????????? :active. ??????? ?? ????? ????????? ?????? ????????????????, ??????????? ?????? ??? ????. ????? ??????? ?? ????? ?????? ???????????? ???? ? ??? ?? ??? ??? ????? ????? ?????. ??? ????????????? ???? ??? ??????? ?????? ???? ?????? ??? ???????? ?? ?????? ? ????????? ? ????????? :hover. ??? ??????? ?????? ????? ??????????? ?????????????? ????????? :active.

??????

???? ???????????? ?????, ??? ?????? ?? ?? ??????, ?? ????? ?????? ???? ????? ?? ??????? ???????? ??????????, ????? ???????? ?????. ???? ????? ????????? ?? ?? ??????, ??? ???????????? ? ??????? ?????????, ????? ????????, ??? ?????????????? ???? ????????.

??? ??????????? ??????????? ????????????? ?????? ????????? ????????? :active, ??????????? ? ??????, ???????????, ? ????????? :hover ??????????, ????? ???????????? ??????? ????? ? ??????. ??? ??? ??? ?????? ????????? :active ??? ?????, ??????? ?????????? ???????????? ? ???????? ?????, ?. ?. ????????? ??????. ??? ????????? ????????????, ??? ???????? ?????? ???? ????????. ????? ????????? ??? ??????????? ??? ????. ? Internet Explorer 9 ??? ???? ??????????? ?? ???? ???????????? ???????? ???????? ???????? ????. ? Internet Explorer 10 ????????? ??????????? ? ??????? ???????? ????????? CSS, ????? ????? ???? ?????????? ???? ?? ???????, ??? ? ??? ?????????? ???????? ??????????.

??? ?????????? ????????? ?????????? ?????????, ??? ?? ?? ?????? ????????? ????? ??????? ??? ????????? :active, ??? ??? ??? ????????? ???????????? ?????? ???????? ?, ?????????????, ?????? ????? ?????, ??????????????? ???????? ?????????. ??? ????????? ??????? ???????????? ????????? :hover:active.

??????? 10. ????????? ?????? ???????? ??????

?? ?? ??????, ????? ???????????? ???????????? ? ???, ??? ?????? ?????, ????? ???????? ????????? ????????? ??????? ???????? ??????????. ????????, ???? ?????? “??” ? “??????” ??????????? ?????? ???? ? ????? ? ???????????? ????? ?????? “??” ?? ??????, ????? ???? ??????? ?????? ????? ??? ?????? ????? ????????, ??? ?? ??????? ???????????, ??? ??? ???? ?? ????? ???????? ???????????? ?????? “??????”. ? ???? ?????? ?????? “??????” ?? ?????? ??????????, ???????? ????? ????????? ?????????.

??? ???????? ? ????????? HTML ?? ?????????, ??? ??? ??????? <button> ???????????? ????????? ????. ???????, ???? ??????? ????????? ? ??????, ???????????? ????? ???????? ?????? ?????, ?? ???????? ? ????????? ????????? ??????? ???????? ??????????.

??????, ??? ??????

????????? ?????????? ????????? ????? ?? ?????? ????????? ?????????? ???????????? (??? ?????????? ??????????????? ???????????), ? ??????????? ? ???????? ?????????? ????? (??????) ????? ?????????? ????????. ????????, ??????? ??????? ????? ??????? ?????? ? ??????????? ??? ????????????? ????? ??????, ?????????? ??????????.

????????? ??????????????? ?????????? ? ????????? HTML ??? Windows 8 ????????? ?????????? ????????? ?????????? ????? ????????? :active ? ????????? ???????????? ????????? ??????? ??????? ????????????. ???????, ????? ???????????? ???????? ??????, ?? ????? ???????????? ????????? ????????? ?????????? ????????????. ??????? ??????? ??????????, ????? ??? <button>, ????? ???????????? ??? ?????? ? ??????????-?????????? ??? ??? ?????????? ?????!

????? ????, ??????????? ?????? ????????? ???????????? ????????? ????? ? ????????? ?? ???????????? ??????? ??? ????????? HTML. ????????, ????????? ?? ??????? ????? ?????? ?????? ????????????? ? ??????????????? ????????. ? ????????? ?? ??????? ????? ????????, <input type=”range”>, ???????????????? ??? ???? ??? ???????? ??????????. ??? ???????? ??????????? ?????? ??????????? ?? ????????? ????? ?????????? ?? ????, ????? ???????? ?????????? ?? ???????????.

????????? ????????? ???????? ?????????? ?????????? ?? ???? ????? ????????? HTML ??????????? ??????????? ?????????? ???????????, ?????????? ????????? ??????????? ???? ???????, ????????? ??????????????? ?????????? ? ??????? ??????? ?? ????????? ?????, ???? ?????????? ? ????? Metro ?? ?????? HTML ????????????? ????? ???????????? ????????? ????, ???? ?? ??????????? ???????? ?????????? ? ???????? ???????, ????????? ?????!

???????? ????????: ???????????? ? ????????? ??????????? ????????????

??????? ?????????? ?????? ??????????? ??? ????? ?????? ?????????????. ??? ????????, ??? ?????????? ?????? ???? ??????????????? ? ?????????. ??? ?????????? ???? ???? ?? ???????? ??? ??????????????? ?????????? ?? ??? ???????? HTML.

????????? ???????

?? ???????? ????????? ?????? ??????? ? ???????? HTML. ???? ???? ?? ?? ?????????? ???????????? ???? ??????????, ??? ??? ????? ????? ???????? ?????????? ?????????????? ????? ?? ????? ?? ?????????????? Windows 8 ??????. ??? ????? ???????, ???? ?????????? ?????? ?????????? ?????, ???????? ?????????????, ???????? ? ????????? ????. ???? ?????????? ?????? ????????? ?????????? ?????, ??? ??? ?? ??????????? ??????? ???, ????? ??????? ?????????? ??????????? ?????, ?????????????? ??????????????? ???????. ?? ????? ????????????? ???????????????? ????? ????? Metro, ??????? ????????????? ?????????????? ?????? Windows. Windows ???????? ???????????????? ????? ????? Metro ??? ???? ??????. ?? ????, ?? ?????? ???????? ??????????? ?? ????????? ???????.

???? ?? ?????? ??????, ??? ?? ??? ???????, ?? ?????? ?????? ??????? ??????? ?????? ?? ????????? ??? ???, ????? ???????, ??? ??? ?????? ?????? ?? ????????????? ?????? ?????? ????????? ???????. ? ????????? ??????? ??? ????????? ????? ? ???????? ??????? ?????? ?????????? Meiryo UI. ?? ???? ???? ?????????? ???????? ??????? ???????, ?? ?????????????? ??????? Meiryo UI, ????????? ?? ?????? ??????? ???????? Segoe UI. ???? ? ????? ????????????, ???????????? Ebrima ? ?. ?. ??????? ??? ??????????? ????????? ???? ??????? ????? ????????????? ????????????????? ???????? ????? Metro ? Windows. ???? ???? ? ??? ??? ?????? ?? ????????? ??? ????????????? ?????, ?? ?????????? ????????? ????? ? ???-?????????. ??????? ???? ???????????? ??????? ?? ?????? ????? ???????????? ? ????? ????????? ??????????!

body:lang(ja), .win-type-xx-large:lang(ja), .win-type-x-large:lang(ja), .win-type-large:lang(ja), .win-type-medium:lang(ja), .win-type-small:lang(ja), 

.win-type-x-small:lang(ja), .win-type-xx-small:lang(ja), input:lang(ja),textarea:lang(ja), 

.win-textarea:lang(ja), button:lang(ja), select:lang(ja), option:lang(ja) {    font-family: "Meiryo UI", "Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Symbol", "Khmer UI", /* etc.*/}

????? ????, ??? ????? ?? ??????????? ???????, ?? ?? ?????? ???????? ??? ??? ???????? <body> ??? ????????? HTML. ?? ????? ????????????? ?????? ?????? ??????????, ??????? ????? ????????? ? ???????? ??????????, ????? ?????????? ?????????????? ????? ???????. ?????????????? ?????????? ????? ????????? ? ?????? ?????? WinJS CSS ??? ?????????? (????????, ?? ?????????? ?????).

?????? ?????????? ????????

?? ??????? ????????? ????????, ?????????? ??????????? ????? ??????????. ??????????? ??? ??? ???????? ??????? ?????? ?????????????? ????? ??? ?????????? ? ??? ???? ????????? HTML. ????????? ???????? ???????????? ???????? ??????? ??????, ????? ??? ?? ????????? ???????? ?????? ??????? ??????, ??????? ?????????? ????????????. ?????? ?? ?????? ???????????? ????????? ?? ???? ??????? ? HTML, ? ????????? ???????? ????????????? ??????? ?????? ???????.

<button data-win-res="{textContent: ‘string2’}">OK</button>

?????????? ????????? ??????????? ????????????

????? ???????? ????? ??????? ?????????, ?? ??? ???????? HTML ???????? ?????????????? ??????????? ????????????.

??-??????, ??? ??? ??? ???????? HTML ???????? ????????????? ???????, ?? ???????? ? ??? ????????? ????????? ??????? ? ????????? ?????? ? ??????. ???? ????????? ?????? ? ?????? — ?????????? ? ???????????????? ?????????? ???????? ?? ?????? ??? ????????????? ? ??????????? ???????. ??? ???????? <button> ????????? ?????? ? ?????? ????????? ????????? ???????????? ??????, ??? ?????????? ??????? ????????. ? ?????????? ?????????? ?????? ?? ?????? <div> ????? ?? ?????????. ????? ????????? ?????? ? ?????? ? ???????? ?????? ????????? ???????? ? ????????? <div>, ?????????? ???????? ??????????? ???????? ARIA.

??-??????, ?? ???????????, ??? ??? ???????? HTML ?????????? ???????????? ??????? ?????????????. ??????? ????????????? ????????????? ??? ????? ? ??????????? ???????. ???????? ????? ? ??????? ?????????????? ????? ????????? ???????? ?????? ?????????? ??????????????, ?????????? ????????????? ? ??????? ?????????????? ????????? ??????.

?? ???????? ??? ????? ? ??????? ?????? ?? ?????????, ? ???????? ?????????? ????????????? ????????????? ?? ????????????????? ?????, ????? ? Windows ??????? ???? ??????? ?????????????, ??? ????????? ?????? ?????????? ?? ????????? ???????????? ????????????? ? ???????????????? ????????? ???????. ??????? ???? ???? ?? ?????? ????? ? ???????? ????? ?????????? ????????? ?????????? ?? ?????????, ???? ???????????? ????????? ???????? ????? ? ??? ?? ??????????, Windows ????? ????????????? ??????????? ?????? ????????????????? ??????. ????? ?????? ?? ???? ?????????, ???????????? ? ????? ???????????? ?? ??????????? BUILD ?????????? ? ?????????? ????? HTML-?????????? (????????, ?? ?????????? ?????).

?? ???????????? ???????????? ?? ????? ??????? ?????????????, ?????? ???????? ?????? ???????? ??? ?????? ??????? ????????????? ? ????????? ??? ??????????? ????? ??????? ??????????? ???????? ?????????? ? ??????? ?????? ?? ?????????. ???? ?? ?????? ??????, ??? ??? ?? ?????, ?????? ???????? ??????? ?????? ?? ????????? ? ??????? ??.

@media (-ms-high-contrast) {/* high contrast definition */ }

??????? ??????????? ????????? ???????, ????????? ???????? ??? ?????? ?????????? ?????????????? ???????? ? ????????? ??????????? ???????????, ?? ???????? ??? ????? ?????????? ?????? ? ??????? ????????? ????????????? Windows.

???????? ? ???????? ??????????

????? ???? HTML-?????????? ?????? ???????? ?? ???? ??????????? Windows 8 (? ??? ????? ?? ARM-???????????), ?? ?????? ??????????? ???????? ?????????????????? ????????? ?????????? (??????????? ??????) ????? ??????????.

? Windows 8 ??????? ?????????? HTML, ?????????????? ??? ???? ????????? (? ????? Metro ? ? ???????????? ?????), ? ????? ?????????? ? ????? Metro, ???????????? HTML5 ? JavaScript. ????? ???????? ????????? HTML ???????????? ????????? ???????, ?????????? ? ??????????? ????????? ???-?????????? ? ?????? ???-???????????????? ??? ????? ????? ?????????, ? ????? ?????????? ? ????? Metro. ??? ??????, ??? ?? ???? ??????????? ? ????? Metro ???????????? ??? ???????????? ?????????????????? Internet Explorer 10. ??? ????????? ?? ???????? ????????????, ???????? ?? ???????? HTML:

• ?????????? ????????? Direct2D

??? ??? ???????? ?????????? ???????? ? ????????? HTML, ?? ????? ??????????????? ?????????????? ??????????? ????????? Direct2D. ?????? ?? ????? ???????????? ??????????? ????????? ??? ???? ??????? ? ?????? ? HTML-?????????? ??? Windows 8. ??????????? ????????? ????? ????????? ?????????????????? ???????????? ??? ???????????? ?????????? ??????. ????????? ??????????? ????????? ??? ?????????, ?? ??????????? ??????????? ????????? ??? ?????????? ?????? ????????, ????? ??? JIT-?????????? (Just-in-time) ???? JavaScript, ??? ????? ????????????? ???????? ?????????????????? ??????????.

• ??????????? ????????? ??????????

????? ?? ????????, ? ??????? ?? ???????? ?????????????????? ???-?????????, ???????? ??????????????? ? ???????????????. ?? ????????? ??????? ??????, ????? ???????? ?????????? ???????????? ???????????????? ??????? ??????????????? ? ???????????????. ????????, ???? ?? ??????????? ??????????? ??????? ??????????, ?????????????? ??????, ? ??????? ???????????????, ? ???????????? ???????? ???????????????, ??????? ?????? ???????????? ??????? ? ??????? ? ?????? ???????????. ??????? ???????? ???????????? ?? ?????? ????????, ??? ??? ? ??? ???? ?????????????? ???????? ?????????? ??? ?????????, ? ??????????????? ? ???????????????? ?????????? ??? ?? ??????, ??? ? ??? ?????????? ??????. ?? ??????????? ?????????????, ????? ????????????? ????????? ?????????? ?? ????????? ???????? ?????? ??????????, ??? ? ?????? ?????????? ????? ??????? ?????????? ????? ?????????.

• ?????????? ?????????? ????? ??? ????????? ??????????

????? ?????????? ??????? ?????????????????? ?????????? ?????, ?? ??????? ??????? ????? ????????. ? ???????? ??????? ????? ???????? ????????? ???????? ? ??????? <button> ??? ??????????? ???????? ?????????, ??? ????????? ??????? ?????????? ?? ???? ???????? ?????? ????????? ?????, ????? ??? ??????? ??? ?????????. ????? ??????? ??? ?? ????? ????? ?? ????????? ??????? ??????????, ?????????? ???????????? ??????? ??, ??? ??????? ?????????????? ? ???????????? ????????? ?????????. ??????, ???? ???????????? ????? ?????? ?????? ??????, ?? ??? ?????? ????????? ? ??????? ????????? ? ???????, ??? ???? ???????????? ?????????? ?? ?????? ????????? ???? ?????????. ???????? ????????? ????????? ???????? ????? ?????????? ????? HTML-??????????.

?????????? ????????

?????? ???? ??????????? ???????????? ?????????, ????????? ?????, ?? ????? ????????????? ?????????????????? ???????? ??? ????????? HTML.

??? ????????? ?? ???????? ????????? ? ????? ????????? Visual Studio ? Blend.

• ? Visual Studio ? Blend ?????????? ?????????????? Intellisense ??? HTML, CSS ? JavaScript. ????????, ???? ? Visual Studio ???????, ??? ?? ?????? ?????????? ??????? ????, ?????? ??????? ????????? ????????? Intellisense ??? ???????? ???????? ?????? ?????.

??????? 11. ?????????? ???????? ?????? ????? ? Blend

• ? Blend ?? ?????? ????????????? ??? ???????? ?????????? ? ?????? ???????????? ??????????????? ?? ??????????? ????????????. ????? ????, ?? ?????? ???????? ????????? ? ?????? ????????? ?????????? ?? ??????????? ????????????. ????? ??????? ?? ?????? ????????? ????????? ???????? ?????????? ?????? ??????????.

??????? 12. ?????? ?? ??????????? ???????????? Blend

• ? Blend ?? ?????? ???????? ????? ????????? ?????????? ? ??????? ?????? ??????.

????????, ?? ?????? ???????????? ?????????? ???????? ?????? ????? ??? ????????? ???????? ? ????????? ?????.

??????? 13. ?????? ?????? ?? ????????? ?????? ????? ? Blend

??? ?? ?????? ????????? ????? ??????? ????????, ????? ??? ????????? ????????? ??? ???????? ??????????.

??????? 14. ?????? ??????? ???????? ? Blend

?????????????? ???????? ? ???????????? ???????????? ??. ? ????? ???? (Soma) (????????, ?? ?????????? ?????).

??????????

? ???? ?????? ????? ? ????? ??????? ?? ???????? <button>, ?? ??? ??? ???????? ??????? ??????????? ? ? ?????? ????????? HTML.

?? ????????? ????? ?????? ??? ??????????? ????????? HTML, ????? ?? ????? ????????? ??????????? ?????????? ? ????? Metro. ?????? ??? ???????? ?????????? ????????? ???????? ? ??????? ???????? ????-????????, ???????????? ??????????? ?????????????? ? ?????????????? ? ??????????? ??????? ????????? ?????? ??????????. ????????? ?? ???????? ??????????, ????????? ? Release Preview (????????, ??????? ?????????? Windows 8, ?????, ????????? ? ??????????), ?????????? ??????? ??????? ???????? HTML. ????????? ??? ???????? ??????????, ???? ?????????? ????????? ???????? ??????? ??? ? ???????? ?????????????, ???????? ????? Metro, ? ?? ?????? ?????????????????? ?? ??????? ???????? ????? ?????? ??????????.

?????????????? ?????????? ??. ? ????????? ???????:

?????????? ????????? ?????????? ? ???????????

???????????? ?? ?????????????? ?????????? Metro ? ?????????????

??????? SDK:

????? CSS: ?????? ????????? ?????????? ????? ?????????? (????????, ?? ?????????? ?????)

?????? ???????? HTML (????????, ?? ?????????? ?????)

? ??????????? ?? ??????????? //BUILD/, ??????????? ????????? ?????????? ? ?????? (????????, ?? ?????????? ?????).

– ???? ??? (Kathy Kam), ??????? ???????????? ?????????, Windows

---