Html5. Разработка Приложений Для Мобильных Устройств

  • Published on
    05-Jan-2016

  • View
    68

  • Download
    2

DESCRIPTION

Разработка приложений для мобильных устройств

Transcript

  • . HTML5.

    OReilly

    . , .

    . . . . . .

    32.988.02-018 004.438.5

    .26 HTML5. . .: ,

    2015. 480 .: . ( OReilly). ISBN 978-5-496-01125-9

    .-HTML5CSS3.,-,iOS,Android,BlackberryWindowsPhone,.

    .-HTML5,-,(SVG),(Canvas),localStorageAPI.,CSS3.-,,.

    12+ ( 29 2010 . 436-.)

    ISBN 978-1449311414 . Authorized Russian translation of the English edition Mobile HTML5 (ISBN 9781449311414) 2014 Estelle Weyl. This translation is published and sold by permission of OReilly Media, Inc., the owner of all rights to publish and sell the same.ISBN 978-5-496-01125-9 , 2015 , , 2015

    OReilly. . .

    , , , -. , , , .

    ,192102,-,.(.),3,,.7.005-93,2;953005.

    27.08.14.70100/16....38,700.1000.0000.

    .180004,,.,34.

  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

    1. API HTML5, CSS3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

    2. HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

    3. , HTML5 . . . . . . . . . . . . . . . . . . . . . . . . 93

    4. - HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118

    5. , , . . . . . . . . .168

    6. API HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194

    7. CSS3 . . . . . . . . . .229

    8. CSS3 . . . . . . . . .277

    9. CSS3: , . . . . . . . . . . . . . . . . . . . . . . . . .296

    10. CSS3: , . . . . . . . . . . . . . . . . . .342

    11. CSS - . . . . . . . . . . .378

    12. . . . . . . . . . . . . . . .405

    13. . . . . . . . . . . . . . . . .427

    14. . . . . . . . . . . . . . . . . . . . . .444

    . CSS- . . . . . . . . . . . . . . . . . . .471

  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

    ( Internet Explorer) . . . . . . . . . . . . . . 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 SDK. . . . . . . . . . . . . . . . . . 21

    ? API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 . . . . . . . . . . . . . . . . . . . . . . . . . 23- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 . . . . . . . . . . . . . . . . . . . 24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24- . . . . . . . . . . . . . . . . . . . . . . . . 25 API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

    CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25, . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

    , . . . . . . . . . . . . . . . . . . . . . . . 30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

    1. API HTML5, CSS3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

    CubeeDoo: HTML5 . . . . . . . . . . . . . . . . . 36 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

  • 7

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 . . . . . . . . . . . . . . . . . . . . . . . . . . 55

    2. HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 . . . . . . . . . . 59 HTML 4, HTML5 . . . . . . . . . . 62 HTML5: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

    HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73, . . . . . . . . . . . . . . . . . . . . . . . . . . . 79: . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 , . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

    3. , HTML5 . . . . . . . . . . . . . . . . . . . . . . . . 93 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

  • 8

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 CubeeDoo . . . . . . . . . .100 : , . . . . . .101 : HTML5 . . . . . . . . . .101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103 . . . . . . . . . . . . . . . . . .103

    , HTML5 . . . . . . .103 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105, . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106

    , . . . .107- . . . . . . . . . . . . . . . . . . . . .108 HTML 4 . . . . . . . . . .109, . . . . . . . . . . . . . . . . . . . . . . . . . . .110

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115 XHTML HTML5, . . . . . . . . . . . . . . . . . . . . . . . . . . .116

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117

    4. - HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118 ( ) . . . . . . . . . . . . . . . . . . . . . . .120

    type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120required . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 : min max . . . . . .122step . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124

  • 9

    readonly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126disabled . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127maxlength . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128autocompletion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129autofocus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130 . . . . . .130: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .131: . . . . . . . . . . . . . . . . . . . . . . . . . . .132: . . . . . . . . . . . . . . . . . . . . . . . . . . .132: . . . . . . . . . . . . . . . . . . . . . . . .133 : . . . . . . . . . . . . . . . . . . . . . .134: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136 : . . . . . . . . . . . . . . . . . . . . .137: . . . . . . . . . . . . . . . . . . . . . . . . .138: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138 . . . . . . . . . . . . . . . . . . . . . . .138

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139 : . . . . . . . . . . . . . . . . . . . . .140URL: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140 : . . . . . . . . . . . . . . . . . . . . . . .142: . . . . . . . . . . . . . . . . . . . . . . . . . . . . .143: . . . . . . . . . . . . . . . . . . . . . . . . . . . .146 : . . . . . . . . . . . . . . . . . . . . . .147: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149 : . . . . . . . . . . . . . . . . . . . . . . .151 : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 . . . . . . . .157 . . . . . . . . . . . .158

  • 10

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159 list . . . . . . . . . . . . . . . . . . . . . . . . . . . .159 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166, , . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167

    5. , , . . . . . . . . .168API HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168

    SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169 SVG . . . . . . . . . . . . . . . . . . . . . . . . . . .171 : SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172 SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .174 CubeeDoo . . . . . . . . . .174 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177 . . . . . . . . . .181

    / . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 . . . . . . . . . . . . . . . . . . . . . . . .184 . . . . . . . . . . . . . . . . . . . . . .185, JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191

    6. API HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194-, . . . . . . . . . . . . . . . . . . . .194

    ? . . . . . . . . . . . . . . . . .194 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195 . . . . . . . . . . . . . . . . . . . . . .200 SQL/ . . . . . . . . . . . . . . . . . . . . .210

    . . . . . . . . . . . . . . . . . . . . . . . . .215 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216

  • 11

    - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221 . . . . . . . . . . . . . . . . . . . . . . . .224

    - (ARIA) . . . . . . . . . . . . . . . . . . .225 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228

    7. CSS3 . . . . . . . . . .229CSS: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230

    CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231 : . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235 CSS . . . . . . . . . . . . . . . . . . . .238

    CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .245 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246

    CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 : , . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .259 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263 n- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .268 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270

    : DOM- . . . . . . . . . . . . . . . . . . . . . . . . . . .273 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276

    8. CSS3 . . . . . . . . .277 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .278 rgb() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .280 RGBA . . . . . . . . . . . . .280, , : HSL() . . . . . . . . . . . . . . . . . . . . . . . . . .281CMYK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .282 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283

  • 12

    CurrentColor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284

    , CSS . . . . . . . . . . . . . . . . . . . . . . . . . .287 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287 , . . . . . . . . . . . . . . . . . . . . . . . . . .289 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .290 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292

    . . . . . . . . . . . . . . . . . . . . . . .293 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295

    9. CSS3: , . . . . . . . . . . . . . . . . . . . . . . . . .296 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298border-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299border-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299border-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301box-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .302

    CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .304 border-radius iPhone CubeeDoo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .306

    CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .308 : . . . . . . . . . . . . . . . . . .309 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310background-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323 . . . . . . . . . . . . . . . . . . . . . . . .325

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .330 width, overflow text-overflow . . .332 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334 : CubeeDoo . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337

    10. CSS3: , . . . . . . . . . . . . . . . . . .342CSS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .343

    transition-property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .345

  • 13

    transition-duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .347 transition-timing-function . . . . . . . . . . . . . . . . . . . . . . . . . . .348 transition-delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .349 transition . . . . . . . . . . . . . . . . . . . . .350 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .351

    CSS3- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .353 transform-origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .353 transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .355 . . . . . . . . . . . . . . . . . . . . . . . . . . . .359 . . . . . . . . . . . . . . . . . . . . . . . .360 3D- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361 3D- . . . . . . . . . . . . . . . . . .363 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .364

    CSS3- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .367 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .369, . . . . . . . . . . . . . . . . . . . .376

    11. CSS - . . . . . . . . . . .378, . . . . . . . . . . . . . .378 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .379 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .382

    border-image-source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384border-image-slice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384border-image-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .385border-image-outset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .386border-image-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .387 border-image . . . . . . . . . . . . . . . . . . .388

    flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .389flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .392 @supports . . . . . . . . . . . . . .394

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .396 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .397CSS-: JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .403 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .404

    12. . . . . . . . . . . . . . . .405, . . . . . . . . . . . . .406 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .408

    : . . . . . . . . . . . . . .409

  • 14

    : . . . . . . . . . . . . . . . .410 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411 ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . .412

    : . . . . . . . . . . . . . . . . . . . . . . .413 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .413 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .414 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .415 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .416 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417

    WebKit- . . . . . . . . . . . . . . .418 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .419 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .420 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .423 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .423

    . . . . . . . . . . . . . . . . . . . . . . . . . . .424 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .425 . . . . . . . . . . . . . . . . . . .425

    13. . . . . . . . . . . . . . . . .427 . . . . . . . . . . . . . . . . . . . . . . . . . . . .427 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .429

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .429 , . . . . . . . . . . . . . . . . . . . . . . . . . .430- -- . . . . . . . . . . . . . . . . .433

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .436 . . . . . . . . . . . . . . . . . . . .437 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .438 -, . . . .440 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441

    14. . . . . . . . . . . . . . . . . . . . . .444 . . . . . . . . . . . . . . . . . . . . . . .444

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .445 JPEG- . . . . . . . . . . . . . . . . . . . . . . . . . . . . .445 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . .446 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .448 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .448

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .452

  • 15

    HTTP- . . . . . . . . . . . . . . . . . . . . . . .452 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .455 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .456 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .461 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .462

    . . . . . . . . . . . . . . . . . . . . . . .468 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .468 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .469

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470

    . CSS- . . . . . . . . . . . . . . . . . . .471CSS- 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .471 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .475 CSS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .476CSS- 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .476

  • -..,Android,iPod,iPhone,BlackBerry,.1,(SDK)iOSAndroid.-.

    --,,-,,-.--,,-HTML,CSSJavaScript.,,-,.

    HTML5,CSS3JavaScript,-,.-,,,,.,AppleAppStoreGooglePlay.,.

    ,-,HTML52,CSS3JavaScript.,..

    ,,,-iPhone,iPadAndroid,,FirefoxOSWindowsPhone,-,-

    1 ,,-.. .

    2 HTML5,HTML:TheLivingStandard.. .

  • 17 -

    .,,Wii.,,,.,--.

    ,,.---..

    iPhone,,(SVG).Safari4.0,,-(webworkers).,2009,iPhone,Chrome,Opera,Firefox,InternetExplorerAndroid.

    ,HTML,CSS,DOM(),SVG(-)XHR.HTML5CSS3.-,-,,-.

    -

    ,iPhoneAppStore..Android-GooglePlay,Amazon,.-1,2,-..,,,,

    1 Apple.-..,,,,?. .

    2 Apple.AppStore,-.. .

  • 18

    --.

    -,.-,,,.

    ,iPhone.,--,.-,CSS3HTML5,,,-,-,.-.

    ,,AppStore.-,iTunes..

    . , iPhone , Bump, Twitterific Gowalla. , iPhone. , - .

    -HTML5,.,-.6,.

    -HTML5HTMLCSS,.,,.,!

    ,HTMLCSS,-.iPhoneiPodtouch,iPhone,,iPad,Windows,BlackberryAndroid.AndroidAndroid,iOS.GoogleTViOS..,,HTML5/CSS3,WebKit,

  • 19 -

    IE10,Blink,OperaMobile(mini),Firefox.,,,HTML5CSS3.

    -,HTML5CSS3,.HTML5CSS3-InternetExplorer8,InternetExplorer9-.InternetExplorer10,-.

    2008iPhone(iPhoneSDK),,iPhone,.SDK-.-,HTML5.-APIHTML5,-,-.

    ,!iPhone,iPodiPadFlash.iOSSafariWebKit,HTML-.5.

    ( Internet Explorer).-.--.

    ,InternetExplorer.,-.HTML5CSS3,IE6,78?,.!

    -InternetExplorer68,----.IE6IE7,,.,-,,,.-,,-.

  • 20

    ,HTML5CSS3.:,X?.:,!..-.--,.-,,,-.

    Safari,Chrome,Firefox,OperaIE10-.HTML4.01,XHTML-HTML5.CSS2.1-,CSS3.JavaScript,AJAX.(DOM)2.-Windows,HTML5.,2010,WindowsPhone?2012,-,--Windows,:.Windows.WindowsMobile,,WindowsPhone.

    -.-.,-,.,().,.-,,-.

    - .

    iPhone(2007),-iPhoneDevCamp.iPhoneSDK(-).,iPhone,-.

    iPhone,,.

  • 21 -

    EDGE,-.,-iPhone.10,1010JavaScript.

    iPhoneDevCamp,iPhone(-).onOrientationChange.,-.CSSJavaScript.

    iPhoneiUI.JavaScriptCSSiPhone..,-Tilt.iPhone,-,.iPhoneBingoiPhone,JavaScript.,,-AJAX-(-)Twitter..-:,,CSS3,.-,.

    iPhone--,-Apple.AppleiOS.,Apple,-iPhone.SafariiPhoneWebKit-iPhone,-iPhone.iOS--(SDK).

    SDK. SDKiPhone62008.-(-Apple)iPhone,iPodtouch,iPad.2008AppStore.C

  • 22

    (SDKAppStore),,-iPhone.

    ,SDK,iPhone,,,!2008-,--.-.

    2008 . -

    SafariiPhone10. -,. CSS3HTML5SafariiPhone,.

    2008 .

    Xcode. AppStore.2013.-

    -..

    2013 . -

    (,).

    HTMLCSS(-,).

    ,. -.2013 . iPhone

    ,AppStore,.

    ,,,-.

    AppStore$99,,Apple30%-.

    ,-(HTML5-).

  • 23 ? API

    ? APIHTML51.2004,WebApplications1.0.,(-).Safari,Chrome,InternetExplorer10+,FirefoxOpera.IE8.IE9HTML5,.,-HTML5,WebKit/Blink,OperaMobile2,FirefoxOSWindowsPhone.,HTML5.

    HTML5,-API.(,)-HTML5,().

    HTML5API,,-.HTML5API,,.,,..

    HTML5,.,..-,,.3.

    1 HTML5.HTML5.NEWT(NewExcitingWebTechnologies--).,-NEWT.. .

    2 OperaMiniHTML5.,-,-.OperaMini-Opera,..-,,-.. .

  • 24

    -.(),,-,,,.HTML5,JavaScript!HTML5.

    4.,,.,,,,.JavaScript!

    HTML5,-.HTML,CSS.-,,.5.

    ().HTML5.!HTML5webMmp4.,,,.CSS-.iOSFlashSilverlight,,-HTML5.5.

    APIHTML5, API,..API6.

  • 25 CSS

    - :..APIHTML5,--,-.API,,6.

    API6,ARIA()-.,--..-,-.ARIA(AccessibleRichInternetApplications-),-.,,.,-()-.,-.-JavaScript.,JavaScript,.,6!

    CSS(CSS).CSS3,3,,...-.CSS3-RGBAHSLA,8.,-,910.CSS3,:

    ; ; ; 3D-; ;

  • 26

    background-size; border-image; border-radius; box-shadow; text-shadow; opacity; animation; columns; text-overflow.-.-

    -,-.-.,iPhone.-@font-face,,Helvetica,Roboto,.,.11-,-.

    ,

    ,-.,:-,,.-.-.,,.,,,.-,,.

    ,Wi-Fi.-,-

  • 27

    .,.-,,JavaScript.

    11-.12-,.13.-,-14.

    ,-,.,12.--,,,CSS2,--.,-.!

    .WebKitHTML5Android,-iPhone,OpenMokoBlackberry,.Blackberry,AndroidiOS,WebKitBolt,Dolphin,OzoneSkyfire.Firefox,OperaIE.,,-Opera,Presto.OperaChromeBlink.,,,.

    ,InternetExplorer,-.-InternetExplorer-CSS3.,CSS2.:-!.,,.

    -,HTML-CSS-.

  • 28

    -HTMLCSS.

    .-.,-,.-:,,.

    -..,.

    ,.--,.

    ,-,-.,-,-.,,,,5.

    ,,-,.-,,-.,,,-.

    ,,,,.,-,iPhone.-.,,.,,.

  • 29

    .,.-,.-.-13.

    ,-.,,.,.,--.,,.,.

    1-,.

    26,HTML5.-,-,.HTML5,WebForms2.0,APIHTML5API,-.,(SVG),,-,,,AppCache,-.

    711,-CSS3.,,,,.--,-,.11--.

    1214:,,,-.,,-,--.

    ,.,.,-.,-,.,.

  • 30

    ,

    .URL,,-

    .:,

    ,,,,..

    . ,-

    . ,,

    .

    , .

    .

    http://www.standardista.com/mobile.-,,,-.

    ,.,,,.,-.,-,.-,OReilly,.,,,.-,.

  • 31

    ,,:

    OReillyMedia,Inc.1005GravensteinHighwayNorthSebastopol,CA95472(800)998-99-38()(707)829-05-15()(707)829-01-04()

    ,,,-,,.

    HTML5,Introducing HTML51.www.HTML5Doc-tor.comW3C,--.-Opera,-,,300(www.opera.com).Twitter@brucel,www.brucelawson.co.uk.

    CubeeDoo.- CerebralInteractive,-.-2001,2006--.,IT-,.Twitter:@cereb-ralideaswww.cix.io.

    -OOCSS(-)Sass.FormFace,HTML5.Wufoo.,.Twitter@seetroughtreeshttp://seethroughtrees.github.io.

    1 ., . HTML5..:,2011.-. .

  • 32

    ,,,-.1996-.2000-,--.Twitter@msjenhttp://blackphoebe.com/msjen.

    ,-,,.,-,Yahoo!,-MobilewebOSPalmNokia,W3CHTML5.Twitter@girlie_mac,http://girliemac.com.

    HTML5Microsoft,-JavaScript/HTML5.--.-,JavaScript.,HTML5 Hacks,OReilly,-htmlhacks5.com..Twitter@boyofgreen.

  • ,-vinitski@minsk.piter.com(,).

    !http://www.piter.com

    .

  • 1 API HTML5, CSS3 JavaScript

    ,InternetExplorer..1.,IE6.IE6,.

    ,-,.-,-.-,.,LocalStorage,.,LocalStorage,.LocalStorage,-.LocalStorage,.

    .(),-,,...,,,,

    1 2001,IE6,.-,.. .

  • 35 1 . API HTML5, CSS3 JavaScript

    .,,,-.:,,,-.

    ,,,-.,.,.

    ,.-,.

    ,,,,-JavaScript.JavaScript(JavaScript-).JavaScript,.,,:-?

    ,.!,.,.,-,,,,--.,-,,..

    ,APIJavaScript,HTML5,(JavaScript),,-.-.,,,-.

    HTML5,CSS3APIJavaScript,..

  • 36 1. API HTML5, CSS3 JavaScript

    CubeeDoo: HTML5

    HTML5CSS3,-,,.CSS3-Pickleview.-,Twitter.2007,,iPhone.-SafariiPhone(,Opera).,-,IE6,IE7Firefox2(Chrome).,2007.

    2010,HTML5CSS3.-,,,Chrome12,Safari3.1.,HTML5,CSS3JavaScript.,.2010,2007.(IE).

    2013HTML5CSS3.,,IE9.IE6.,,Android2.3.Android2.3.

    HTML5,CSS3,-APIJavaScript,.,-.,,-,.

    .1.1CubeeDoo.,-.-,,iPhone.HTML5.,-,.CSS-,-,,CSS.

  • 37CubeeDoo: HTML5

    ,JSON,-,webSQL,LocalStorageSessionStorage,,HTML5,-,URI.

    . 1.1. CubeeDoo

    -.,()JavaScript,HTML5CSS.API,-.,,,,,,.,.

    CSS3,HTML5API.-,.-,..-,-,.,,,InternetExplorer.

    ,.,-,,,,

  • 38 1. API HTML5, CSS3 JavaScript

    ,..,..

    ,,,(IDE).

    ,-.,:!

    ,,.(,-).

    , (IDE).,,,.,IDE().,(FTP),.IDE.,.SublimeText,TextMate,Dreamweaver,Eclipse,WebStormIDE.,-.,IDE,,.IDE.IDE-.

    .ChromeCanary-GoogleChrome.,.,Canary.,.

    Apple,-iPhone,iPadiPodtouch.Windows8,

  • 39

    ,-Metro.!..Windows,UNIX,Android,Mac-.

    -IDE...,-,JavaScript,,API.,-.

    ,.,WindowsPhone,InternetExplorer.SafariGoogleChrome-Android,Bada,BlackBerryiOS.GeckoFirefox.,Presto,Opera.Opera14-Chromium,OperaChromeBlink1,,-,.

    Mac,Safari().Windows,InternetExplorer.-Unix,Chrome,FirefoxOpera.ChromeCanary,Aurora,OperaNextWebKitNightly,.-,,.

    .,-,,-.(DOM),JavaScript,-CSS,,--.

    1 BlinkWebCoreWebKit,-147503.Chrome,28,Ope-ra15,,Chromium.

  • 40 1. API HTML5, CSS3 JavaScript

    ,,-,-,-.-..-,-,-.

    ,,,-Firebug1,F12,WebInspector/DragonFly.FirebugMozilla.F12,WebInspectorDragonFlyInternetExplorer,Chrome/SafariOpera.-,HTML,CSS,DOMJavaScript,,-,HTTP-,,.

    FirebuggetFirebug.com.SafariDevelop().-,PreferencesAdvanced()Show develop menu in menu bar().Chrome:- .

    Chrome,Safari,FirebugOpera-,Command+Option+IControl+I.FirebugF12,F12.CSS,JavaScriptHTML.

    WebInspector,ErrorConsole()UserAgentswitcher.--CSS,HTMLJavaScript,DOM,.-,WebInspector,Firebug,DragonFly,F12Developer Tools()Chrome-,..

    ,-,-.,,,,

    1 Firefox,--Firebug-Firefox.

  • 41

    .-,.Timeline()-14.

    .,.,,..,,-,.,,-,.

    ,.Overrides()Settings()Developer Tools()Chrome(.1.2).-WebInspector, .

    User Agent(),Chrome,.-,.

    ,().-,.-.-ScreenQueri.es,.,-thumbs.js,-TouchEvent.

    Developer Tools()Chrome-.-,.

    (),-.-,,-..

  • 42 1. API HTML5, CSS3 JavaScript

    . 1.2. Overrides ( ) (Settings) Developer Tools ( ) Chrome

    ,.,.,,HTMLCSS,,-.

    Opera.,,,2008Opera-OperaDragonFly,Opera.Opera-HTMLCSS,-,,,DragonFly.

  • 43

    WebKitUSB-Android,4,iOS,6.-Chrome, ,,:

    chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile

    /Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=9222

    FirefoxFirebug-Debug(Crossfire).

    ,.,(RemoteDebuggingProtocol),.

    AndroidAndroid(AndroidSDK)-API,,-Android.-,-SDK(.1.3).

    . 1.3. Android 4.2.2, OS X

  • 44 1. API HTML5, CSS3 JavaScript

    SDKhttp://developer.android.com/sdk/index.html.Android(ADB),-,,.

    toolandroidADB.ADB-.,,UNIX.-.

    ADB-.Chrome,ADB--.SDK.

    toolsMonitor,Android(AndroidDebugMonitor).-,,-,console.log(),.,.1.4..

    . 1.4. Android

    ,Window()Android(AndroidVirtualDeviceManager)(.1.5).-,.1.3.

    weinre,webinspectorremote-.weinre,JavaScript,HTMLCSS.

  • 45

    PhoneGap,-debug.phonegap.com.,weinreAdobeEdgeInspect,.

    weinre,,,-WebKit.weinreNode.jsWebSockets1.

    weinre-.-,JavaScript,

    1 Java.WebSocketsCORS,JSONXHR.

    . 1.5. Android ,

    . ,

  • 46 1. API HTML5, CSS3 JavaScript

    .,JavaScript,-,.

    weinreweinreJavaJavaScript.JavaScript,Node.js,-npm,Node.:

    npm -g install weinre

    weinre,:

    weinre

    weinrelocalhost:8080,Control+C,,--.

    ,weinre:

    WebKithttp://localhost:8080/client/#anonymous,., -Chrome,.

    Remote(),,weinre.Elements(),Resources(),Network(),Timeline()Console()(.1.6)-.,Sources(),Profiles()Audit(),.

    Adobe Edge Inspect GhostlabAdobeEdgeInspect,weinre.,(),.AdobeEdgeInspectweinre.:,URL.

    AdobeEdgeInspect,,Chrome.,.

  • 47

    . 1.6. weinre

    Edge.Edge.Edge,-Adobe.

    ,Edge(.1.7)..,Edge.

    ,.,,,,.

    ,-.,Chrome,-,EdgeInspect.

    -,-Chrome.ChromeAdobeEdgeInspect,,.weinre,-Remote(-)weinre..1.6.

    AdobeEdgeInspect,.,.,.

  • 48 1. API HTML5, CSS3 JavaScript

    . 1.7. Adobe Edge Inspect Nexus 7 Google Chrome

    Mac,-,Ghostlab.,,Ghostlab:,AdobeEdge.

    JavaScript AardwolfJavaScript,Aardwolf.JavaScript,-.Aardwolf:.weinre(,weinreNode.js),AardwolfXHR.Aardwolf.-,.

    BlackBerry 10,weinre,BlackBerry10.

    BlackBerry(BlackBerryBrowser),weinre,--.Black-BerryBrowserweinre,-.-HTTP,USB-Wi-Fi..Wi-FiWebKit,IP-,-BlackBerry()..

  • 49

    BlackBerry.-,IP-,.

    -BlackBerry10,..,-Developer Tools().-.,OptionsPrivacy & Secrity().-IP-..,,-.Back(),.-BlackBerry.

    .,-,,.-..-,,.

    -.,,,,.

    ,()()..,..

    ,-.,.,.

  • 50 1. API HTML5, CSS3 JavaScript

    ..

    ,.,,.-,iOSiPhone,iPad..,.,-.

    ,,,.,(),.

    ,SDK.-,.,-.

    Android.AndroidWindows,MacOSXLinux.SDK.SDKhttp://developer.android.com.-Android,SDK,Android.-AndroidMac/LinuxSetup.exeSDKWindows.

    Android.-Android(AndroidVirtualDeviceManager)-Edit()(..1.5).,New()(DeviceRAM)Property().

    iOS. MacOSX.-,,,MobileSafari.,iPhoneSDK2,.

    ,.-.-,,-.

  • 51

    ,,-,iPhoneyiPadPeek.,-.

    BlackBerry.BlackBerryWindows-,EclipseVisualStudio(-),,.

    Windows Phone.Windows.WindowsPhone,-WindowsPhone.WindowsPhone(WindowsPhoneSDK)http://dev.win-dowsphone.com/en-us/downloadsdk.http://www.microsoft.com/en-us/download/deta-ils.aspx?id=35471.

    VisualStudioWVGA512.WindowsPhone8,.

    Firefox OS.Firefox.-,FirefoxOS,.,FirefoxWeb DeveloperFirefox OS Simulator(-FirefoxOS).

    Opera Mobile.OperaMobileWindows,MacLinuxhttp://www.opera.com/ru/developer.

    Opera Mini.OperaMini,-,Java-http://www.opera.com/ru/mobile.

    .,SymbianWebOS,SDK,.-.-,-.http://www.mobilexweb.com/emulators.

    -,,http://www.quirksmode.org/m/tests/widthtest.html.

    W3CmobileOKChecker,-.

  • 52 1. API HTML5, CSS3 JavaScript

    ,,.MobiReady-,W3CMobileOKChecker.-,-.

    Firefox,ModifyHeaders,-,HTTP-.HTTP-,-,,.

    ..-,-,,,.

    ,,,,.,HTML5,CSS3JavaScript..,,,-.-.,Wi-Fi,3G,4GEDGE.,-,,.

    -,.,-.,.

    ,,,,,.-,,.,,.

    -,DeviceAnywhereNokiaRemoteAccess.-,.-

  • 53

    ,,.,.

    iOSiOS,,-.

    iOS.-,CraigslisteBay,.1,8%iOS(0,13%)iOS4.3,12,5%-iOS(0,93%)iOS5.

    ,:.,-.,,iPadiPodtouch.

    ,,OperaMini.iTunes.

    iOS-,.,--.

    AndroidAndroid,.Android,.()Android.-.Android2.3,-.Android.34%-Android,2,3%1.

    Android,,,-.Android,Chrome,OperaMini,OperaMobile,FirefoxMobile,DolphinMiniDolphinHD.

    1 (.http://developer.android.com/about/dashboards/index.html).. .

  • 54 1. API HTML5, CSS3 JavaScript

    WindowsWindows,.Win-dowsPhone7,Win-dowsPhone8.Metro.(,),Windows.-,AndroidiOS.,-,-,Windows.

    BlackBerry,BlackBerry10,,.

    BlackBerry,,BlackBerry10.BB6BB7.,-,,.

    BlackBerry6WebKit.,.,BB5,BlackBerry.

    NokiaSymbian,LumiaWindowsPhone.

    Symbian,Series40,Samsung-SonyMobileMotorolla,Android,iOS,BlackBerryWindows.,-.,Nokia,Symbian.Nokia.,.

    KindleKindle.Silk,WebKit.

  • 55

    WebOSWebOS,-.PalmPrePixi$30.

    ,,-.-,,,,.-,,.,-,AdobeEdge.

    --.,,-..JavaScript.

    JasmineJavaScript,.PhantomJS,-,WebKit1.,PhantomJS-.,-DOM(),CSS--JSON.PhantomJS.

    PhantomJS-,CasperJS.AJAX-Sinon.JS.,WebKit.,-.

    .,SauceLabs,-,.

    ,,-.

    ,.

    1 .. .

  • 2 HTML5HTML,.,-,-.,,,,HTML,,,()HTML,,.

    HTML5.,HTML5.,HTML.HTML,HTML5.,..,HTML5,,,,,-.

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

    .HTML,.,.,,.

    ,:HTML5,HTML5.

    ?-!,!

    HTML5HTML5HTML4XHTML.,,HTML5..,-HTML4XHTML,

  • 57 HTML5

    HTML51.HTMLXHTML,-.(doctype),HTML4.01XHTML,HTML5.-.

    HTML5HTML4XHTML.,-,,-.

    HTML5,--:-,ID,,,.

    HTML5,.,,,,,-.HTML5,()-.,HTML5-.DOM,,.

    ,.,,,.,.,,-.,.

    -.,-,()..,(,,meta-),.

    ,--()(.2.1).,-,.

    1 .http://www.w3.org/TR/html5-diff/..

  • 58 2. HTML5

    XHTML-,-.,.

    . 2.1.

    HTML.,/.-()()-,.

    CSS , , . ( : - . HTML5 - , .)

    HTML5.-.HTML5-,,,,,..,.

    , , . , . .

    ..href.(..2.1).,/,

  • 59 HTML5

    1.-.,.

    ,HTML-.-,()-,-,-..3,,.

    HTML5-,.-id,class,title,style,langdir-.HTML5accesskey,hiddentabindex.:contenteditable,contextmenu,spellcheck,draggabledropzone.-.

    -,WIA-ARIA,aria-,.,.-data-*,(*),-.data-HTML5,-HTML.data-*-data-*.(ARIA)6.

    idid.id,id.HTML5id-..id-AZaz, (AZ,az),(09),(-),(_),(:)(.).

    1 ,:.XHTMLreadonly="readonly",checked="checked"disabled="disabled".HTML5():readonly,checked,disabled.

  • 60 2. HTML5

    . -.

    id.,,,.

    ,forid.:id,- .id4.

    ,idJavaScript,.-idCSS.id,.id-,id.6.:,CSS3,-id-.

    classclass-,.class,.id,().-,.

    CSSclass.(6):

    titletitle-,.title,,,title.title,-.-title.

  • 61 HTML5

    , title . , , , title . - title .

    title,,-.-,.,CSStitle-.title-::before::after.

    ,title..,,-.-title,.title-JavaScript!-reltitle().,data-*HTML5:-.

    stylestyle()..,,,-!

    :-,WebInspectorSafariChrome,FirebugFirefox,DragonFlyOperaF12IE,,JavaScript,style..,.

    langlang(dir).lang,,-.-HTTP-Content-Languagehttpequiv="language".

  • 62 2. HTML5

    lang-,,-.,,-,lang.

    lang.,-.

    lang,.,,lang.-.

    dirlang.,,.dirltr().--,-dir.

    (),-,dir.,titlelang,dir.,dir().lang,.,.title-,-.-,-Google!

    :HTML5dir-,auto.,-rtl,ltrauto.

    HTML 4, HTML5

    ()(X)HTML.-,HTML5-..

  • 63 HTML5

    tabindextabindex,.,.HTML5tabindexHTML-.

    .,-.,,.Tab,-.-().,,,-.,-Next()..,Next()Tab,tabindex.

    HTML5tabindex..,tabindex-,-tabindex.tabindex,.

    tabindex,-tabindex.,,,.,,.-.,,.,-.-tabindex.-.

    ,-,tabindex?,,

  • 64 2. HTML5

    .,JavaScript/.

    -,,tabindex:01.tabindex="-1"(,1),tabindex="0",-,.

    : tabindex -, ? , , , , , - Next (). , , JavaScript. , -. iPhone , tabindex - .

    accesskeyaccesskeytabindex.,tabindex,,,.,.

    accesskey.,,accesskeys.s,.

    accesskey,-.,-,.accesskeyclass,-,.:-,.

    tabindexaccesskey,.,tabindex-,.accesskey-,.

  • 65 HTML5

    accesskey.,HTML5,.accesskey,.

    HTML5:

    HTML5,,.,,-,.

    hiddenhidden,,.,,,.display:none;.,-,.-,,-.

    contenteditablecontenteditable,.,,.-,.contenteditable,OperaMini,-,Android3.0iOS5.

    contenteditable,,-.

    contextmenucontextmenu,-,.id,.,Chrome(),.

  • 66 2. HTML5

    draggabledraggable,.,,,..draggable,JavaScript-dragstart,drag,dragenter,dragleave,dragover,dropdragend.,IE10,,API.

    dropzone,?HTML5dropzone,,..move,copylink.,.

    spellcheckspellcheck,-.-,-.,.,-,spellcheck.

    ,,iOS,autocorrect-.-.

    ARIAHTML5ARIA(-)rolearia-*.ARIA,HTML5.ARIA(liveregions),,ARIA.WAI-ARIA.

    ,-(-ARIA)-,.,.ARIA-

  • 67 HTML5

    ,,.arialive:assertive,politeoff,,ARIA-,.aria-atomic,aria-busyaria-relevant.

    ARIA-role.,,grid,listbox,menu,menubar,tablist,toolbar,treetreegrid.-,.HTML5ARIA-(.3),article,application,banner,complementary,contentinfo,document,form,heading,main,navigationsearch-,-ARIA,HTML5.

    .-,,role,.-,,.

    roleARIA.aria-disabled,aria-busy,aria-expanded,aria-hidden,aria-describedby,aria-haspopuparia-labelledby,.-,(,)-ARIA-.

    data-*HTML5.,,.HTML5..

    /-titlerel,.titlerel,-data-,.

    ,CubeeDoo-.,,,.LocalStorage-,.JavaScript,

  • 68 2. HTML5

    data-positiondata-value,data-value:

    ...

    ,data-value.,.data-position-0data-value,.data-value(7).

    data-*,.title-,-,(-,,).-data-,-HTML.,.-,,,-moz--webkit-.

    API Dataset.APIdataset.-API,/,(,):

  • 69 HTML-

    1 // 2 // dataset 3 currCards = document.querySelectorAll('#board > div');4 for (i = 0; i < qbdoo.cards; i++) {5 cardinfo.push(currCards[i].dataset);6 }7 currentState.cardPositions = JSON.stringify(cardinfo);

    ,,APIdataset,getAttribute().API,,.qbdoo.pauseGame(3).-APIdataset,--/,-DOMStringMap.(7)/JSON.,:

    1 for (i = 0; i < qbdoo.cards; i++) {2 for (key in currCards[i].dataset) {3 deck[key] = currCards[i].dataset[key];4 }5 cardinfo[i] = deck;6 }

    itemid, itemprop, itemref, itemscope itemtype,.:itemid,itemprop,itemref,itemscopeitemtype-HTML5-.,-.API6.

    HTML- ,,,.,.

    --.(,).

    :

  • 70 2. HTML5

    :

    < div>

    ,./.HTML5,XHTML,.,true,.

    HTML5,,.1.

    .,-.,,,.

    :

    ,:

    :

    (),,,..(.),,:

    . . .

    1 ,,,.,ID.

  • 71 HTML-

    -()./.!,,:

    -,-.:-.,,.

    ,,-().XHTML.

    .,()..HTML5,XHTML-.-():

    ; ; ; ; URL; ; ; -; ; ; (); ;

  • 72 2. HTML5

    ; (); ; .

    XHTML,HTML.HTML5,-.

    .XHTML,.HTML5-,,,.W3C,,,id,,.

    .XHTML-.HTML5-,-.:,.

    .XHTML.,,.HTML5-.,,,,,-.--.-.-,.:-,.

    ,-,.,.

    ..,(),,.:

  • 73 HTML-

    ,,().

    , .-XHTML/,.XHTML,-,selected="selected".HTML5selected.HTML5,true,false.,,-.

    =""-,.

    : , true, . , false, removeAttribute(attributeName), setAttribute(attributeName, ''), true.

    ,-.3,-form.

    , .XHTML..-,-,.,spandiv.,.

    ,.,CSSJavaScript.,-XHTML,:

    (DTD); HTML; ,html; ,,; ,html.

  • 74 2. HTML5

    ,,-HTML5,XHTML:

    charset,,HTTP-.-,.

    ,-.,,.HTML:

    blank document

    :.2.2.,,,,DOM-.

    . 2.2. , , , DOM

    ( HTML-, )

    ,HTML-140.,

  • 75 HTML-

    ,.,-,.XHTML,.

    .

    ((doctype),DTD),,,.

    .XML-,XML.-DTDHTML5.-,,-,.-(.2.1).

    2.1. HTML 4, XHTML HTML5

    (DTD)HTML 4.01 Transitional HTML 4.01 Strict XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.1 HTML5 1

    ,XHTMLDTD10.-..!HTML5,-.

    -HTMLXHTML,,,HTML5.

    ,,HTML5.2.-

    1 HTML5,.2 HTML5IE

    .

  • 76 2. HTML5

    HTML4XHTMLStrict,-HTML5.,HTML5,-HTMLXHTML,.-,,!,,-!1-,,XHTML, .HTML5,!

    HTML-.HTML5-,XHTML.HTML4,HTML5.,,.,.2.2.

    ,.-()lang.

    2.2. HTML

    HTMLHTML 4.01 TransitionalHTML 4.01 StrictHTML5

    XHTML 1.0 TransitionalXHTML 1.0 StrictXHTML 1.1

    HTML5manifest.,URL().,-6.

    HTML5,modernizr,..,modernizr-,:

    lang.6manifest,.no-js

    1 http://bit.ly/16t5Z6L

  • 77 HTML-

    ,modernizr1-,.

    .,,2.-,-,-HTML5..,,-.HTML4HTML5,profile.,-HTML5.

    ,,,,.

    .,,.,,.,--.,.

    .,,.

    ,-(.2.3).,(SEO),,..

    ,-,-.,,

    1 ModernizrJavaScript,HTML5CSS3.

    2 ,CSS.

  • 78 2. HTML5

    ,.-.

    ,XHTML.HTML5XHTML,-HTML4,alignbgcolor,-.,CSS.,idclass,langdir.

    -,-,onload="doSomething();".-,classid.JavaScript,CSS.

    HTML5-.():

    - HTML5

    (,,,,)-.,-.,,.

    ,:

    . 2.3. , Safari (iOS) Firefox OS

  • 79 HTML-

    - HTML5, !

    HTML-,.,-,-,.

    , -,.,,-.,-,-,-.,,,-.

    ,:,,,,,.

    -,-:

    HTML5

  • 80 2. HTML5

    p {color: #3 33333;}

    , -..,?

    : -,.-,:charset,http-equiv,contentname.

    ,,-,HTML5:

    ,:

    .,HTMLUTF-8,HTTP-.

    ,.,,,.HTML5,-,-meta,:

    :,-.charset.,-.HTML5.

    ()UTF-8.Apache,.htaccessAdd De-faultCharsetUTF-8.

  • 81 HTML-

    charset,namehttp-equiv.charset,namehttp-equiv, content.

    ,HTTP-,namecontent,,,..-,,.

    description.,,description ()."description",-,.,content-,(.2.4):

    . 2.4. , Google

    keyword"keyword".,-,-.,,:

    ,name,http-equiv.http-equiv,name,HTTP-.http-equivHTTP-.http://www.standardista.com/html5/http-equiv-the-meta-attribute-explained/http-equiv..htaccess,

  • 82 2. HTML5

    .,:

    ,.,,,-,-(-).

    viewport.,,,,.,1.

    "viewport",.CubeeDoo:

    ,,iOS,Android,webOS,WindowsPhoneOperaMobile.device-width,.!

    ,-.,-.,.

    width=|device-width.,device-width-,,.,,-,,,980.200,10000.

    height=|device-height.,device-height,,480iPhone4,.

    1 -,.,Slate,.

  • 83 HTML-

    ,,.-:223.

    user-scalable=no|yes.,-,.-,yes,no.yes..,-minimum-scalemaximum-scale,.

    initial-scale=.()-,-.-1.0,--.

    maximum-scale=.-,user-scalableno.10,0.25.

    minimum-scale=.--.0.25.

    -980.device-width,-,980,320.320,device-width,-.,-.,.

    ,-.,user-scalable,,.

    CubeeDoo-..,-,.-.,-,.:

  • 84 2. HTML5

    ,,-.-Apple.-,HTML-,CSS@viewport.IE10.

    ,

    -,-.,GoogleApple//API..

    apple-mobile-web-app-capable"apple",Android.,.,.-,.-,.,-.,:

    contentyes,-,.

    ,,-JavaScript,window.naviga tor.stan-dalone..

    apple-mobile-web-app-status-bar-style,apple-mobile-web-app-capable-.,-.-,-.,apple-mobile-web-app-status-bar-style:

    -(),..iOS

  • 85 HTML-

    default,blackblack-translucent.(,,),,.

    format-detectionformat-detection-,-:

    ,-.,,.telephone="no",.,,,-,.

    -,,.URL-URL.,.--RacketTailedDrongo.comdrongo.gif1.

    URLHTTP-,,,URL.-.base.,,,,,.:

    .,,.HTML-.

    1 ,,:,.

  • 86 2. HTML5

    ,,-1,.

    :

    2

    ,href,rel,type,sizes,hreflang,mediatitle.revcharsetHTML5.:

    rel,href.relhref.

    -,..

    -,.-,,.

    ,.,,:

    ,,,.:/type="text/css".(),HTML5,

    1 ,,,,.http://ru.wikipedia.org/wiki/Favicon.. .

    2 rel="shortcuticon"IE.shortcut,,favico.ico,-.

  • 87 HTML-

    text/css.,media="onlyscreen and(max-device-width:480px)".,,7.

    ,..2.3.

    2.3.

    href . URL

    media , rel hreflang , type MIME- . , ,

    relsizes . ,

    mediamedia,,.,-all.,href.

    ,:screen,print..screen,tty,tv,projection,handheld,print,braille,auralall.@media-.CSS3media-.,media.,,-.CSS,-:

    @mediaCSS3,-media.,-:

    (min/max)-width; (min/max)-height; (min/max)-device-width;

  • 88 2. HTML5

    (min/max)-device-height; orientation,()-();

    (min/max)-aspect-ratio; (min/max)-device-aspect-ratio.,HTML4,

    HTML5,coords,shape,urn,target,charset,methodsrev.title.

    relrel,href.rel-,,.rel="stylesheet";-,(,,?)..2.4rellink.

    2.4. rel

    stylesheet rel, ,

    . stylesheet, /- type="text/css" , text/css -

    next - .

    prev

    index help (,

    - ). ,

    contents , alternate .

    hreflang , . media , , , . stylesheet - , -

    copyright ,

  • 89 HTML-

    glossary , icon apple-touch-icon

    , -,

    apple-touch-startup-image

    , -. - , - . , -

    apple-touch-iconapple-touch-startup-image-iOSAndroid.WindowsPhone-.:

    .,,,,.-,-.,-style(,,scoped),,.

    type(,type="text/css").HTML5,-"text/css".,-media.

    scopedHTML5,-.scoped,CSS(scope).,.(,).-,CSSCSS,.

    :.12,,,.CSS,,,HTTP-,.,.

  • 90 2. HTML5

    -,HTTP-,.

    CSS.JavaScriptstyleLocalStorage,cookie.HTTP-cookie(),LocalStorage.cookie,-().LocalStorage,,.,.,HTTP-HTTP-.

    ,HTTP-.,(),,LocalStorage.

    --JavaScript-,JavaScript.typeXHTMLtype="text/javascript".HTML5,typetext/javascript.JavaScript,type.,language.

    src,,-., JavaScript-.

    JavaScript.,,,,.-.

    ?JavaScript.,JavaScript,..,,.

  • 91 HTML-

    ,JavaScript,,-.--,,.JavaScript.

    ,-JavaScript:deferasync.,async-HTML5.async,-,.defer,,-.,JavaScript,.,.

    ,JavaScript,(,async/defer).,JavaScript,.JavaScript,-.,JavaScript.,-,,-.

    HTML5,-JavaScript.-,6,JavaScript-.,,-.

    JavaScript ,

    ,,JavaScript.,.,JavaScript.,,JavaScript.JavaScript-,WebKit,Blink,OperaMobile,WindowsFirefox.

  • 92 2. HTML5

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

    ,:.,-,,:

    onafterprint; onbeforeprint; onbeforeunload; onblur; onerror; onfocus; onhashchange; onload; onmessage; onoffline; ononline; onpopstate; onredo; onresize; onstorage; onundo; onunload.JavaScript,

    .,-,,.

    -.

  • 3 , HTML5HTML5,-.-,.2,,,-,.HTML5:,-,,.-4.,,5.,HTML5-.-.

    HTML:,,,.HTML5-.HTML5,-CSS,,,.,HTML5.-,,-,,.

    HTML5HTML4,-.,HTML5,,CSS.2.HTML5,,-.,,-.

  • 94 3. , HTML5

    HTML5.-HTML4HTML5.,,-.HTML5,1:

    section; article; nav; aside; header; footer.:

    body; h1h6; address.,

    .-,,,,.,,,..-,.,,-.sectionblockquotefooter.,.,-().,-.

    HTML5,,,-(-).Opera,,ID.--DreamweaverMicrosoft

    1 hgroup,HTML5,.WHATWG,-W3CHTML5W3CHTML5.1.

  • 95 HTML5

    style1MsoNormal.,,-leftright,,-,main,header,footer,content,sidebar,banner,searchnav.,Dreamweaver().

    HTML5-25.maincontent.?,,-,,,.,.

    ,,,.-.(.3.1),-.

    . 3.1. -, HTML5

    -.-,-,.

  • 96 3. , HTML5

    ,1:

    - HTML5 CSS3 HTML5 HTML5. CSS3 CSS3. Provided by Standardista.com

    ,,,-,.,,-,:

    - HTML5 CSS3 11.11.13 HTML5 HTML5. CSS3 CSS3. Provided by Standardista.com

    HTML5pubdate,,,,.

    ,.,

    1 ,-.-,,.

  • 97 HTML5

    ,-..,,,.

    ,,(,,:,-).:,,,,-,...-,,,.,,.

    ,,,,,,.

    :,.,,-,,.

    ,,-.,,.

    ,,-.

    .,,..-(),,,.

    ,-,,.,.

    ,-(,),.

  • 98 3. , HTML5

    ,-,.,WAI-ARIArole="navigation":

    CSS3 HTML5 JavaScript

    ,-.,-,.-,,,,.:,-,.

    .-, ,:

    ......

    HTML5 HTML.

    -,(

  • 99 HTML5

    ).,,.

    .,.,,.,-/.-,,-,,.,,,,.

    - , .

    ,.,-,..,.-,-/.-,.

    -,.-,.-,.,-.

    (),.,-.-,:

    Copyright 2013 estelle@standardista.com

    :.

  • 100 3. , HTML5

    CubeeDoo

    ,.,,-!,,,-:

    1 2 3 CubeeDoo4 5 6 7 8 9 10 11 12 13 14 : 115 16 17 18 19 : 020 21 22 23 24 25 26 27 28 29

    (622),.(25)(2328).,-..,-,(1021)..

  • 101 HTML5

    : ,

    HTML5.,-.,.,-.

    ,.,-.,-..,-.

    : HTML5

    ,,:.,,,.:,.HTML5-,-(.3.1).

    3.1.

    mainfigurefigcaptionhr ( )

    ppreblockquoteolliuldldddtdiv

    ,,.,-,.

  • 102 3. , HTML5

    .,(-).,,-,.,,,,-,.

    ,,,,,,.,..-,.,,,.

    ,-.,,.

    ,W3C.-?,?.

    -,-,.,.,,,,.-:

    ,,.

    -.,-,.,.

  • 103 , HTML5

    HTML5.-,().()-.

    ,,-.

    ,-2,,:valuetype.,reversed,.

    , HTML5

    HTML520,-.,,,,,,..3.2.

    3.2.

    marktimerubyrtrpbdiwbrdata

    asmalls citei b u

    qsampkbdsubsupbdospanbremstrongdfnabbrcodevar

    acronymbigcenterfontstrikett

  • 104 3. , HTML5

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

    -Safari?,?

    Google,,:

    mark {background-color: yellow;}mark:focus {background-color: blue;}

    CSS.,.3.2.

    . 3.2. Opera Mobile ,

  • 105 , HTML5

    ,,.(CSS).,.

    ,,.,-HTML5.,,CSS:

    HTML5 . HTML. , HTML 4.01 XHTML 1.1, HTML5 .

    ,.,CSS,,-.

    .,-,.,.,.

    datetime.datetime,1.datetime,.

    :CubeeDoo.:11:00(),:

    next Saturday at 11:00 a.m.

    CubeeDoo,,.

    1 .http://www.w3.org/TR/NOTE-datetime

  • 106 3. , HTML5

    ,-datetime.

    , ,ruby-,ruby-.-Ruby.Ruby-,(.3.3).

    ,ruby-,ruby-.,ruby-.ruby-,.,ruby-,ruby-ruby-.

    . 3.3. , . : : " "1

    /:,,/.-,,ruby-.CubeeDoo;,ruby--.

    (,-).,Unicode,.,-.,-,.CSS-,text-combine-horizontal,HTMLCSS,.

    ,-.,URL,.,:

    1 :https://dl.dropboxusercontent.com/u/1330446/tests/ruby.html

  • 107 ,

    CubeeDoo.HTML5.com?

    ,,URL.,,..

    ,

    HTMLHTML5.,-a,small,s,cite,i,bu.

    .,,HTML5.,-,href,1.

    ,,name.(),-id,.,id.,-,id,anchorid.,-shape,coords,charset,methodsrev.

    target,XHTMLStrict.,download,mediaping2.download,.,-.media,-.ping-URL,(),,,.

    ,HTML5,,,,-HTML5,,.,HTML5:

    1 href,.2 media,pingdownload,,-

    .

  • 108 3. , HTML5

    - ,-1.

    ,mailto:.,,.,.

    tel:,,.iOS,-,.tel:Android,-,,.-sms:,.

    ,sms:-.:

    sms:[,]*[?body=]

    ,.:,,iOS.Android-,.SMSSMS.,SMS:

    1 (650) 555-1212

    .,SafariiPhone,,-,.,(.-,HTML-2).

    1 Skype.http://developer.sky-pe.com/skype-uris

  • 109 ,

    ,-GoogleMaps,YouTube,iTunesGooglePlay.--GoogleMaps,,.,Maps:

    -

    iOSYouTubeiTunes-YouTubeiTunes.Android,:GooglePlay.

    HTML 4

    ,,,,.:,.

    ,,.,,,,,.

    ,-,-.,,,.

    ,.,HTML5.HTML5.

    .-.-.,,,.

    ,.,,,,,.,--(,,).

  • 110 3. , HTML5

    ,,,HTML5.:-.,,,,,..HTML.-.

    , ,,HTML5.-..3.3.

    3.3.

    em strong q , dfn abbr . : acronym .

    titlecode var , , -

    samp kbd , sub sup bdo ; -

    span br

    ..

    .1:

    1 .-:http://www.w3.org/TR/html-picture-element/

  • 111

    embed; video; audio; source; track; canvas.:

    img; iframe; object; param; map; area.,

    ,,,,5..,HTML4XHTML.,,,.

    HTML5,.longdesc,frameborder,marginwidth,marginheight,scrollingalign,srcdoc,sandboxseamless.

    srcdocHTML,,.,,srcdoc.srcdoc&quot:,.srcdoc,srcdoc.srcdoc,,-src:

    sandbox-,.,,

  • 112 3. , HTML5

    ,.,,.,,DOM-cookie.,sandbox,.

    allow-same-origin,,,-.allow-top-navigation.allow-forms,allow-pointer-lock,allow-popupsallow-scripts,APIpointer-lock,.,,,.,:

    seamless,.,CSS,.,,-,.

    border,vspace,hspace,align,longdescname.srcset,,.

    ,,.,,9.

    ,srcset,,.1,

    1 http://bot.kz/2013/06/23519.. .

  • 113

    (SVG),-5,-.

    datatype.,align,hspace,vspaceborder,,CSS.,archive,classid,code,codebasecodetype,.declare.-standby,,,,,,,.,.

    typevaluetype,namevalue.

    nohref,rel,ping(.),mediahreflang.

    ,..,,AdobeFlashPlayer,,.,,.-URL,src.MIME-type.

    ,,,.

  • 114 3. , HTML5

    -,-,?HTML5,,JavaScript(.3.4).

    . 3.4. . ,

    .-,,,-.open,HTML5.open,.-

  • 115

    ,..-:,-,.,open.,./.,JavaScript:

    5 5 5 Amazon 5 Costco 5 Barns & Noble

    ,()open().-.summary.,,,,,display:none;.,,.

    /-,(,).-,JavaScript.,open,CSS:

    details * {display: none;}details summary {display: auto;}details[open] * {display: auto;}

    !8.

    ,HTML4.01XHTML..HTML5

  • 116 3. , HTML5

    ..

    HTML5.idmenumenuitem..-,.,typetoolbar.,context.label,.,.

    .,,.-type.radiobutton(),checkbox(/)command,-.,,.,.

    .-label,,.-icon,disabled,checked,radiogroup,default command.command.title,.

    ,-,,Windows.-,.

    XHTML HTML5, XHTMLHTML5.:

    basefont; big; center; font; strike();

  • 117

    tt; frame(-); frameset; noframes; acronym(); applet(); isindex; dir.,,

    .,,,,-,-..,.,.,href.

    ,.--,4.,,.

    width,border,frame,rules,cellspacingcellpadding.

    reversestart. ,span.

    .headers,rowspancolspan,abbr,axis,width,alignvalign.-,.

    ,.

    HTML5.HTML5,.-()HTML5.

    HTML5.4--,--JavaScript.

  • 4 - HTML5 ,,-,,HTML5,,,.,Canvas.SVG.APIJavaScript-DOM..,,-JS-(,).CSS3-.HTML5?,JavaScript.

    HTML5,.HTML5-,JavaScript.-JavaScript,,..

    ,,setFocus()onload.autofocus(,,1).JavaScript,.HTML5,.,,,-

    1 ,,,.,.-,.,.

  • 119 4 . - HTML5

    .,HTML5,.

    -.,HTML5,,!

    .type.'text',.QWERTY.HTML5,,,,-.--HTML5.,,-(,,).-,-.

    HTML5CSS-,JavaScript-.,HTML5-JavaScript.

    HTML5,,-,..,..,-,.

    --HTML5,-..,-.-,-,-.,-

  • 120 4. - HTML5

    ,,-,-HTML5.,-.,,,1990-,-HTML5.

    ,,type.-.HTML5-,.JavaScript,,-.,,JavaScript.,(.-),(.7),.,-HTML5.

    ( )

    ,.

    type,type.,,,,:type="text".

    Phone: Website:

    HTML523type..:,typetext..

  • 121 ( )

    ,,.

    required,required.,,required,,,.,,-,:,,12-12,,.pattern,-,..

    required,buttons,range,colorhidden:

    Email: 1Phone:

    ,,,,.,,,,,--.required,,-.

    : , required, - :required :invalid. , - , . , , - CSS:

    input:focus:invalid { background-color: #CCCCCC;}input:valid { background-color: #00FF33;}input:required { border: 2px solid #0066FF;}

    1 :required,required="required",XHTMLStrict.

  • 122 4. - HTML5

    ,CSS3,-7.

    : , required ARIA aria-required="true" ( ARIA, - -, 6):

    : min max

    ,minmax.

    minmax,,:numberrange.,min/max,.

    ,number,.,-minmax.-,-,number,.,minmax,.

    rangemin,max,maxmin.,numberrange.

    ,-.,,,.,,-,.,,:

    Reservation Time:

    ,.17:00,22:00.,,JavaScript,.

  • 123 ( )

    stepstep,/rangenumber,step-.,,5,1,-,:

    Price

    ,-,step.

    ,,number,,,.,7.2,step5(-),7,100:

    Price

    step for. - . for .

    placeholder,,JavaScript,--.-,.-,.,--.-,,-.HTML5,.placeholder,-,-.,JavaScript.

  • 124 4. - HTML5

    -placeholder,placeholder-,.-placeholder,.

    placeholder,,.-,title-,placeholder.,,.,.-.

    placeholdertext,search,url,telephone,emailpassword,,datecolor.-placeholder,,.pattern,-.placeholder.

    :placeholder-shownCSS-4.,-(.):

    input:placeholder-shown {}input:not(:placeholder-shown) {}

    , , . - , . , JavaScript .

    JavaScript , placeholder, min, max, pattern, . JavaScript .

    patternpattern,placeholder,.patternJavaScript,.,.

    pattern,.pattern.-,,JavaScript,,pattern

  • 125 ( )

    ,.-,,*.

    .4.1.

    4.1. , for

    ? 0 1 * 0 + 1 {n} n {n,m} n, m [] , , -

    . , [123] 1, 2 3[n-m] , -

    . [123] [13][^n-m] ^ . -

    , nm\d . [09]\D , . [^09]\s ( )\S (

    )\w . [09AZaz]\W , . -

    [^09AZaz]() () -

    | ,

    . gr(a|e)y gray grey

    .,pattern-,,.

    pattern-title,.:

    Color:

    Credit Card:

  • 126 4. - HTML5

    color,..pattern,color.,pattern,.-,.

    -.-,pattern,,,.(.4.1).,-.

    . 4.1. . (BlackBerry 10)

    CSS. :invalid , pattern - . :valid , .

    readonlyreadonly.,,

  • 127 ( )

    ,URL,/.,.-,,,-,,,.,-,IE.readonly,:

    disableddisabled.,.HTML4disabled-.,-disabled,(.form).,,-disabled,disabled-.

    CSS: :disabled, .

    ,readonlydisabled?-,readonly.disabled,.

    maxlengthmaxlengthtext,password,url,search,telephoneemail,.-/number.HTML4textpassword.

    maxlengthURL,.,:--URL?,,-,,.

  • 128 4. - HTML5

    ,.Twitter,-140,-,.

    sizesize.:,,,.sizeCSS.

    size-,HTML5.-size,(maxlength)(multiple).

    formHTML-,HTML5,-.formHTML--.,,.

    HTML-formid,,-,HTML-.,HTML-,-,.

    ,:

    User ID

    #userid#form1.HTMLnamevalue,#userid, .,formHTML5,id#useridform.-#form1#userid,.

  • 129 ( )

    -,HTML5,-.HTML5-,form.,.

    : form='''' - , , . . , removeAttribute('form'), setAttribute('form', '');, .

    autocompletion1.,-.,,-.autocomplete()-,(,,).autocomplete:on,offdefault.on-,off.

    off,,,(,)-(,).,-.,on,,,.,HTML--().,,:

    Login:

    Username:

    Password:

    1 GoogleAPIrequestAutocomplete(),--.,-.

  • 130 4. - HTML5

    autofocusautofocus,,..autofocus-,(),,.autofocus-,.

    ,,,autofocus.-jQuery,,-,:

    $('[autofocus]').last().focus();

    :autofocus,.,.,,,.

    :iOS-,.

    HTML5.23,.,.-,type,-,.text(,maxlengthsize).,,-,text.,-:color,disabled.

    23.,HTML5..

    ,HTML5.,:HTML,,,

  • 131

    .,.

    : , , . - type. - , , submit:input:not([type=submit])){ border: 1px solid #6 66666;}

    :not8.

    : ,text,type="text",-,.text-type:type,-text.

    text . type , type="text". , HTML5, text. HTML5, Netscape 4.7. .

    value.,value-.value,-(),.

    :name,disabled,form,maxlength,readonly,size,autocomplete,autofocus,list,pattern,requiredplaceholder.,,textHTML5:

    value, , . , -. , - value. , - placeholder .

  • 132 4. - HTML5

    ,,placeholder.

    , ,-,-.,.

    : password,type="password",.-,,,,,value,().pAssW0rd,.,,.

    : , POST SSL-. , . GET, URL : https://www.website.com/index.php?user=Estelle&password=pAssW0rd.

    ,POSTHTTPS.,POST,,:

    WebKit.CSS-webkit-text-security.-webkit-text-securitycircle,square,discnone,,,-.

    :,.

    : checkbox,type="checkbox",..

  • 133

    (),.-,(indeterminate),-.,.,,-.,,.--,..

    namevalue.,namevalue/.,:

    . , - . CSS :checked. - , , , :

    input[type=checkbox]:checked + label { color: #cccccc;}

    CSS,.8,:checked.

    : radio,type="radio",.().,,.

    ,,.-,,-.,,.,,.

    -namevalue.,-:

  • 134 4. - HTML5

    -;

    value-name.--value;

    ,;

    :.,-,,.JavaScript,:

    ( ):

    red: green: blue:

    :name.name.ID,.

    , . - . , for id . .

    : submit,type="submit",.,.-

  • 135

    ,.-,disabled.-,JavaScript,returnfalsepreventDefault().disabled,.JavaScriptpreventDefault()returnfalse-.

    : onsubmit - , . , .

    ,value,.name,/.

    HTML5, .HTML-,-.form:form="id_of_form_to_submit".,form.

    ,,,HTMLCubeeDoo:

  • 136 4. - HTML5

    : ,type="reset",-.-,,disabledJavaScript.onreset,,.-,.

    ,,,..,,..

    -,,.

    ,:.

    reset,-value.,/.

    : file,type="file",.,-.iOS6.0(SafariiPhone/iPad).iOSfile.,fileIE10WindowsPhone8,WindowsPhone8RT.

    .,Browse ()Choose().,.,CSS,file:

  • 137

    input[type="file"] { /* " " */}input[type="file"]::-webkit-file-upload-button { /* */}

    file:name,disabled,accept,autofocus,multiple,requiredcapture.value,.

    accept-,.,.fileminmax,,,-.01minmax.-,multiple.

    accept-,,:

    ,-.,Android3.0,ChromeAndroid(0.16),FirefoxMobile10.0OperaMobile14.

    1.capture-accept,.:

    ,-.,-,capture.

    : hidden,type="hidden",-:type="hidden",name="somename"value="some value".hidden,

    1 .

  • 138 4. - HTML5

    .hiddenID,IP-,.

    hidden,-JavaScript.HTML5-,LocalStorage,-cookie.hidden.,hidden/,.

    : image,type="image",-submit,srcalt.valuename,/.-,"file".

    : button,type="button"-,.,-,JavaScript.,-value:

    button , , type="button". , , JavaScript . input type="button", . , .

    -.WebKitMozilla-appearance.--webkit-appearance-moz-appearance.

  • 139

    ,.,-.

    appearance,.,-,-.,,appearance,checkbox(),button()slider-horizontal.DOMslider-horizontal.appearanceCSS.

    !

    text:,,URL...,,HTML5-,,..HTML513typeHTML-:

    search; tel; url; email; datetime; date; month; week; time; datetime-local; number; range; color.HTML5-

    .,radio,checkboxbutton,,-type.,(),.

  • 140 4. - HTML5

    BlackBerry10.tel,QWERTY,,.4.4.

    CSS- - :invalid. JavaScript ( JavaScript) CSS:

    input:focus:invalid {background-color: #CCCCCC;}

    : email-.

    -,.emailiPhone,3.1.AZ,@,,-_123.,.4.2:

    :

    emailmultiple,-,.

    , -.

    emailname,disabled,form,autocomplete,autofocus,list,maxlength,pattern,readonly,required,sizeplaceholder.

    URL: email,url-.-,-,-.iOSurlAZ,,,,.com.,.4.3,.BlackBerry,,.

  • 141

    . 4.2. . BlackBerry10, iPod, Windows Phone Firefox OS

  • 142 4. - HTML5

    . 4.3. URL Firefox OS, iPod, BlackBerry 10, Windows Phone Chrome Android

    ,url,-,URL-,.,Q://,ftp://.

    URL(-HTML5),,-URL/URI.W3C.(..4.3),-.

    ,-pattern:

    -:

    : tel.urlemail,tel.,,,,..,.,+1(415)555-1212,415.555.1212.

  • 143

    ,tel?(..4.4).,,!

    ,-placeholder.,patternsetCustomValidity()().:

    :

    : number,.number,,.4.5.min,maxstep.

    min,max-.step-.step1,.min,maxstep.

    ,,..,,.()-step..,,.,,maxmin,min.-,-:

  • 144 4. - HTML5

    ,,min+n*step,n,min/max.,min=2,max=10step=5,7,10:

    100 999

    :

    . 4.4.

  • 145

    0 1000, 5

    , 5:

    10.0

    :

    . 4.5.

  • 146 4. - HTML5

    ,HTML5,-API.stepstepUp()stepDown():

    input.stepUp(x)input.stepDown(x)

    ,step,x1,.minmax.

    patternnumber,,,number.pattern(gracefuldegradation),pattern,-1.

    number,-.pattern="[0-9]*"pattern="\d+|\d+\.\d+"number.-min,maxstep,.

    : range,,.4.6.,.number,min,max,step.Safari2.0,Safari5-min,maxstep.,-WebKit.Opera,BlackBerry,IE10Chromerange.MobileFirefoxrange,-23.Androidrange.

    .,value.2030,25.min,maxstep,0,1001-.,range,.

    :,-?,.WebKit:

    input[type=range]{-webkit-appearance: slider-vertical;}

    1 ,SafariiOS6-pattern,number.

  • 147

    . 4.6. Windows Phone, BlackBerry 10, iPhone Chrome

    ,,.Opera,-Presto.

    : search.--,-.,,,search-cancel-button.,.4.7.

    search().,Go()Enter().

    : color,,.4.8.color,,,.-.#0 00000.,color,.

    ,indianred(-).,.

    -,.,,#[a-zA-Z0-9]{6}.patternplaceholder,,-.,

  • 148 4. - HTML5

    . 4.7. BlackBerry 10 ( ) iOS6.1 ( Search ())

    . 4.8. BlackBerry 10 Opera Mac

  • 149

    color,-,:

    :

    ,,date,datetime,datetime-local,month,timeweek.-ISO8601.,,,.date-,,.

    : date:,.,..

    -.,,:--:

    :

    :

    date,-(pattern).,-,-.JavaScript,,..,.

    .4.9,,date,.,-(,,).

  • 150 4. - HTML5

    date-.-/.,.

    . 4.9. , iOS, BlackBerry, Android Firefox OS,

  • 151

    : datetime:(,,),(,,,).-(UTC),.min,maxstep,:min="2012-03-01T12:00Z".

    ,,-:

    :

    :

    :

    datetime-localdatetime,UTC(Z).

    : month,.,,.,min-0001-01,max21474 83647-12.-minmax.step.,-step="6",.:

    :

    JavaScript,-01.

  • 152 4. - HTML5

    : time24-.0,24.minmax.

    ,.60,60,.-step900,15.,15:

    :

    type,.,,-,..

    : week,,,.0152.-,2014:2014-W01.

    1,,4.1:

    week-.

    ,23.:

    button; checkbox; color; date; datetime; datetime-local; email; file; hidden; image;

  • 153

    month; number; password; radio; range; reset; search; submit; tel; text; time; url; week.

    -JavaScript.,,,.JavaScript.,.-,-.,-URL:

    :

  • 154 4. - HTML5

    ,.,emailurl,.-,,,.4.10.

    . 4.10. , ,

    typepattern,-(.4.11).,iOSAndroid.

    . 4.11. , ,

    ,.,HTML5,-.,,,-.

    ,-.JavaScript,.,.

  • 155

    ,HTTP-.

    ,,-,,.JavaScript.HTML5,--.

    HTML5DOM,-.HTML5,validity1.

    validityAPI.-,.validity,-:

    var element = document.querySelector('#form_control_id');var validityStateObject = element.validity;

    var validityStateObject = document.form_id.form_control_id.validity;

    validityStateObjectvalidity:

    element.validity.valueMissing.,(required),,valueMissingtrue,false.valueMissing,,;

    element.validity.typeMismatch.true,,false.,number,emailurl,,-URL,typeMismatchtrue;

    element.validity.patternMismatch.-,pattern,,patternMismatchtrue,false.pattern-.,pattern-.,patternMismatch,-pattern,.

    1 ,,-.,-.

  • 156 4. - HTML5

    ,pattern-title,.;

    element.validity.tooLong.maxlength,tooLong.true,,false.,.maxlength.tooLong,-maxlength;

    element.validity.rangeUnderflow.rangeUnderflow-,min.rangUnderflowtrue,;

    element.validity.rangeOverflow.rangeOverflowrangeUnderflow.,max;

    element.validity.stepMismatch.true, ,step,false.stepMismatch,-step, min.step;

    element.validity.valid.-,validValidityStatetrue,false.-,customError,.false, validtrue.-(true),validfalse;

    element.validity.customError.customError.true,-(),-,.

    customError,..,-setCustomValidity(message), message, (..4.1,4.104.11).customError,true,-

  • 157

    .false,.

    ,-,customErrortrue.,setCustomValidity(""),.

    customError true, , , . - , - .

    ,.CSS.

    WebKit,.,,,-DOM.,:

    ::-webkit-validation-bubble::-webkit-validation-bubble-arrow-clipper::-webkit-validation-bubble-arrow::-webkit-validation-bubble-message

    :::-webkit-vali-dation-bubble.::-webkit-validation-bubble-arrow-clipper::-webkit-validation-bubble-arrow,16..::-webkit-validation-bubble-message.,,,CSS1.

    1 WebKit,Blink.Chrome.,--.

  • 158 4. - HTML5

    ,HTML5,-,,-.-(),.-.,.

    ,,-..,,.,:

    *

    ,-.-.

    HTML5,-,CSS.,,-,,,-,,,,..,,:

    input:required,input:invalid { background-color: #FFFFFF;border: 1px solid #FF0000;}input:valid { border: 1px solid #9 99999;}input:read-only { background-color: #DDDDDD; border: 1px solid #6 66666;}input:checked + label { color: #6 66666; font-style: italic;}

  • 159

    68.,,,.

    ARIAaria-required="true",titlearia-labeledby,.

    ,.HTML5:,,,.,,HTML5.

    listtext,email,url,-,,-,list.,.

    listid-.HTML5.

    ,.,list,.,-list,.

    ,-.list,.-,(.4.12):

    Animals:

    duck

  • 160 4. - HTML5

    . 4.12. , ( Opera 10.6)

    ,-Google..-,-.,,.,Google,.AJAX-.

    .,.-,,.,,.-.-().

    ,.,.,(),.,,,:

    Web Address:

    Or select from the list

  • 161

    ,-(.4.13).,.,,.4.12.-JavaScript,,.

    . 4.13. . , , . : URL, .

    Next(),

    ,,,-JavaScript.HTML:

    Cow

  • 162 4. - HTML5

    Banana Slug Sheep

    JavaScript:

    var select = document.getElementById('slct_animal'), input = document.getElementById('animals');select.addEventListener('change', function() { input.value = this.value;}, false);

    CSS:

    input[list],datalist select { float: left; height: 1.4em; position: relative;}input[list] { z-index: 2; width: 20em;}datalist select { width: 1.2em;}

    selectname,select.select,(selectspinner).,list.

    ,,DOM.,HTML5,form,namefor,-onchange,onforminputonformchange;,-.

    outputvalue.,,-.-,.,DOM.

    for.for-ID,.

  • 163

    ,--,,,for.

    CubeeDoo.CubeeDoo:,,,-.-DOM.HTML-:

    01120

    ,,,0,-,2.JavaScript-.

    ,,.,-..,,.

    ,-,min,max,high,lowoptimum.optimum,.minmax.highlow,,,-.

    ,-,.-..,.,-highlow.,.optimum(.4.14).

  • 164 4. - HTML5

    . 4.14.

    -..,,,-.-,.

    ,,.,-,,.-,-JavaScript,(.4.15).

    valuemax.,valuemax.

  • 165

    . 4.15. Firefox OS Chrome Android

    ,/.-.,.challenge,keytype,autofocus,name,disabledform,-keytypersa,challenge,.Opera,WebKitFirefox.,-;.

    .,,,HTML5.

  • 166 4. - HTML5

    .-.novalidate(novalidate="novalidate"),-.

    .form,,.,autocomplete.

    ,action.,,action.

    .-,-..,.,.

    disabled,,.form,(form).name.

    , , .,.Safari,size,..

    ,-,.-.

    HTML5wrap.wrap-soft()hard.soft-,,,hard-.wraphard,cols.

  • 167

    HTML4,,rowscols.HTML5rowscols,HTML4.,wraphard,cols.rowscols.-CSS..

    :submit,resetbutton(submit)....

    HTML5,,-,.

    -,.-.,for.,.

    forid.

    ,/..,-.,,,.,,.,,.

    HTML5-,JavaScript,.-.,-.

  • 5 , ,

    HTML5,,API,,,.,(SVG),(Canvas),.,-API,-,..

    ,--..(OperaMini),,-API,,,-..

    ,,,.,,:,-,.,,-,.,-.

    API HTML5 HTML..-.HTML5SVG,,-

  • 169API HTML5

    .-,HTML5,.

    SVGSVG .SVG2001.SVG,,-,.

    SVGXML-,,-,,,,,(,..),.

    ,.-,.-,.,.SVG-.

    SVG,..svg-Android,Android3.SVGiOS3.2,Android3.0IE8.

    SVGCSSbackground-imageAndroid3,iOS3.2,-OperaMobile.HTML--HTML5iOS5,Android3,IE9().Android2.3.3,AmazonSilk-WebOSHP,-SVG.SVGOperaMini(,),SVG,OperaMiniJavaScript.

    XML,SVG..XML-,SVGXML--(SVGDTD).-.SVG.,, .

  • 170 5. , ,

    SVG.()(.5.1).

    . 5.1. , SVG

    1 3 4 5 6 8 9 5

    ,?13-SVGDTD,,.:-.CSSbackground-positionSVG,SVG.-SVG.

    (4),SVG-.5.,-,SVG.,.SVG,aria-label.

    6,.SVG:,,,,,.:x,y,widthheightX,Y(

  • 171API HTML5

    ),.,style.

    HTML-,SVGCSS.-style,.-,,,-HTML.

    CSS,,.fillbackground..strokeCSSborder..

    CSS-SVG-.,,1-SVG,.

    (8).r,.,,.-cxX,,cy-Y,.

    ,,fillCSS,.

    SVG -,:,:

    :

    :

    :alt,SVG.-aria-label,

    1 WebKitMozilla-SVG,SVG-.

  • 172 5. , ,

    SVG-.,,,CSS.

    : SVG

    .SVG,SVG-,.

    CSS,-.,SVG,SVG-CSS,.-SVG,,,-,-(7):

    svg { background-size: 100% 100%; background-repeat: no-repeat; }

    @media screen and (max-width: 400px) { svg { background-image: url(images/small.png"); } }

    @media screen and (min-width: 401px) and (max-width: 700px) { svg { background-image: url(images/medium.png); } }

    @media screen and (min-width: 701px) and (max-width: 1000px) { svg { background-image: url(images/big.png);

  • 173API HTML5

    } }

    @media screen and (min-width: 1001px) { svg { background-image: url(images/huge.png); } }

    -,,viewboxpreserveAspectRatio.viewbox,:min-x(X),min-y(Y),width()height().(viewbox),SVG-.

    SVG,-.-:

    .,-widthheightCSSwidthheight.SVG-viewboxpreserveAspectRatio,,,widthheight.

    ,,-alt.,()SVG1,,,SVG,,alt.

    SVG.SVG,@media.,.HTTP-:SVG,.HTTP-,dataURI2.

    1 http://www.iheni.com/just-how-accessible-is-svg/2 URIIE9.

    .,,,SVG,https://github.com/estelle/clowncar

  • 174 5. , ,

    ,()SVG().

    SVGSVG.,(),SVGJavaScript.-APISVG-.SVG,.W3C,API.

    SVG.SVG.AdobeIllustrator,,,,SVG.SVG-,-.

    Amaya,SVG,,,,foreignObject,--,.AmayaW3C.AmayaSVG,.-Inkscape,-Illustrator,CorelDrawXara.Inkscape-SVG,W3C.

    CubeeDoo

    CubeeDooSVG.-,SVG-.-,-URISVG.

    .,,.SVG-.,(.5.2),:

    1 3 4 , ,

  • 175API HTML5

    56 7 8 9 10 1112 13 14 15 16 1718 19 20 21 22 2324 25 26 27 28 29

    1(DTD).3-,SVG-.,,SVG--.4,,-.

    710.9-:,,10210.8080.-#00FF00.

    1316().16:-,150350-40.#0000FF.

  • 176 5. , ,

    . 5.2. SVG-

    1828:..19:,25050.-21050.90,29050.,,#d60818.

    ,,,.

    URI-CSS-.,SVGURI:

    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.0%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20fill%3D%22%23abcdef%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20%2F%3E%3C%2Fsvg%3E);

    CubeeDoo.URI:

    background-image: background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E

  • 177API HTML5

    %3Cpolygon%20points='39,13%2022,28%206,28%206,47%2022,48%2039,63 %2039,14'%20style='stroke:#1 11111;stroke-width:5;stroke-linejoin:round;fill:#1 11111;'%20/%3E%3Cpath%20d='M%2048,50%2069,26'%20%20style='fill:none;stroke:#1 11111;stroke-width:5;stroke-linecap:round'%20/%3E%3Cpath%20 %20d='M%2069,50%2048,26'%20style='fill:none;stroke:#1 11111;stroke-width:5;stroke-linecap:round'%20/%3E%3C/svg%3E");

    .-Amaya..-CSSbackground-image.url(path/mute.jpg)url(path/mute.svg)url("data:image/svg+xml;utf8, ");.SVG-.

    InternetExplorer,SVG(IE9IE10),URI-.

    HTML5(HTML5Canvas)APIJavaScript.APIHTML-,.-.CSS-,,.

    ,(WebGL).-.WebGL,-.-.

    ,API.,.DOM-,,.-,JavaScript-.-,.

    .,.JavaScript,.JavaScript.

    .HTML-:

  • 178 5. , ,

    . .

    ,HTML..idJavaScript,DOM.,,-.

    API , - , aria-label.

    ,,.JavaScript.-(.5.3).

    . 5.3. ,

    .JavaScript.JavaScript:

    document.getElementById('flag')document.getElementsByTagName('canvas')[0]document.querySelector('#flag')

    ,API.,:

    1 2 var el= document.getElementById("flag");34 if (el && el.getContext) {5 var context = el.getContext('2d');6 if (context) {7 context.fillStyle = "#ffffff";

  • 179API HTML5

    8 context.strokeStyle = "#cccccc";9 context.lineWidth = 1;10 context.shadowOffsetX = 5;11 context.shadowOffsetY = 5;12 context.shadowBlur = 4;13 context.shadowColor = 'rgba(0, 0, 0, 0.4)';14 context.strokeRect(10, 10, 300, 200);15 context.fillRect(10, 10, 300, 200);16 context.shadowColor='rgba(0,0,0,0)';17 context.beginPath();18 context.fillStyle = "#d60818";19 context.arc(160, 107, 60, 0, Math.PI*2, false);20 context.closePath();21 context.fill();22 }23 }24

    2id.,,--.4getContext.

    , Modernizr. , . Modernizr , - . Modernizr, , - . - HTTP-, Modernizr , .

    5getContext(contextId)-.2d,.,6,..

    ().WebKitCSS1,-DOM,:

    background: -webkit-canvas(theCanvas);

    CSS:

    var context = document.getCSSCanvasContext("2d", "theCanvas", 320, 220);

    JavaScript.JavaScript-(CSS).

    1 Firefox4+CSS---moz-element('#myCanvas').

  • 180 5. , ,

    6-13-.,,,.

    .context.(strokelinewidth),(fill)(shadowOff,setX,shadowOffsetY,shadowBlurshadowColor).strokeRect()14.,SVG:10,10,300,200.X,Y,.

    ,.SVG,,,-.stroke,fill,linewidthborder,-,,-.,,getImageData().,,-.

    15fillRect(fillStyle),,-().

    (1415):10,10,300,200..-,.

    ,.,.,1,0,5.-.

    ,(),DOM,,.,JavaScript,shadowColor.,-,.,,.,shadowColor.16.

  • 181API HTML5

    beginPath()(17)-closePath()(20).-,.-,,,,-,.,-beginPath()closePath()-.

    :context.arc(x-offset, y-offset, radius, startAngle, endAngle, an-ticlockwise),-.,context.arc(160, 107, 60, 0,Math.PI*2,false);.,..().2,:.-.

    ,(18).fill()(21),-fillStyle.

    .-http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html,,,,,,-.

    CanvasHTML5SVG,-,.-,.

    ,SVGXML.,JavaScript.-:,.SVG.-,..

    ,,.SVG-,.SVGXML,-.SVG

  • 182 5. , ,

    JavaScript.-SVGDOMSVGDOMAPIJavaScript.,,-,-.

    ..-:,-,.-.DOM.API.requestAnimationFrame.-,API.,-(,),.,API,.

    (IE9).SVG,(IE9Android3).SVGCanvas,.

    SVG.,DOM.-DOM,,-.DOM,-,.SVGDOM,DOM-..,-,,-.,,.

    (),-.

    WebGL.(WebGL),.-WebGL-BlackBerry10.Fire-foxOS.,

  • 183/

    ,,.,-,-JavaScript.WebDL-(GPU),(CPU).-,WebGL.--,,-.

    /HTML5-.-,FlashQuickTime.,,.

    HTML5-,.(OperaMini),--.,,.,-,,-.

    HTML5,-,.-.,,,iPhoneiPadFlash.,-H.264,AAC().HTML5,.Firefox,Chrome,AndroidOperaOgg/Theora(.ogv).IE9,Safari,Chrome,AndroidiOSMPEG4/H.264(.mp4).Firefox4+,Chrome,OperaAndro-id(2.3+)WebM/VP8(.webm).IE9,(.5.1).

  • 184 5. , ,

    5.1. (IE9 Ogg WebM)

    iPhone/iPad

    Android Black-Berry

    Opera Mobile

    Opera Mini

    Win-dows/IE

    Chrome Android

    Firefox Android

    7 11 9

    Ogg 2 11 (9*)

    H.264 3 .01 7 9 *

    WebM 2 .3 14 (9*)

    .Theora/Ogg,VP8H.264.Theora/Ogg(.ogv),-Firefox3.5,Chrome4Opera10.5+.IE-.WebM,VP8,,Chrome,MozillaFirefoxOpera10.6.

    VP8.,Google-.,WebM/VP8-,GoogleNokia,-.

    H.264,.AdobeFlash,,AndroidiPhone,-.,Chrome,.Firefox-H.2642013.Opera.

    ,,,.5.1.,.

    .WebM(VP8Vorbis)MP4(H.264AAC).-,HTML5,.-,Flash.

    1 .http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

  • 185/

    ,.

    :

    src.src,,-URL-.;

    autoplay.autoplay,,.-,;

    loop.loop-,.-,,;

    controls.controls-(,Play,Pause..);

    preload.preload,,.none,-.metadata,,..,.

    ,:

    poster.posterURL,,.,,;

    width.width--,();

    height.height--,().

    (,.5.2):

    Fallback Text

  • 186 5. , ,

    5.2.

    autoplay , -

    controls , loop , -

    poster="/img/poster.jpg" ,

    preload="metadata" : none, metadata autosrc="/video/video.mp4" height="360" Fallback Text ( ) HTML-,

    HTML5.HTML5.,CSS,API.API,JavaScript,play(),pause(),mutedended.

    HTML5,-,:

    You don't support HTML5, but you can still download the video here.

    ,-.-,.-.

    HTML5.-.():src,typemedia.

    , src . src . canPlayType() , .

    type.,,,.,MIME.

  • 187/

    ,,.,,.,.-:

    HTML5,.,,.HTML5,-AdobeFlash.Flash,-.,.

    Flash- 24 , . , Flash 24 , - , HTML5.

    ,Flash(.,):

  • 188 5. , ,

    alt=" " title="Your browser does not support video"/>

    ,-,().,.,.,,,..

    :

    Dev.Opera. .-

    ,,,.,,,-.

    ,src,.kind,src.kindsubtitles,captions,descriptions,chaptersmetadata.

    --,,-:

    subtitles.kind.,,.,;

    captions.,-.,,,,.,;

  • 189/

    descriptions.,-,.,-;

    chapters.,.;

    metadata.,,-.

    ,src.srclang,.label.label,.

    default,,.,.

    , JavaScriptJavaScript,(featuredetection)JavaScript:

    if (createElement('audio').canPlayType) { /* */}

    -.play()pause().-HTMLJavaScript.-:

    Play Pause

    if (document.createElement('audio').canPlayType) { if (document.createElement('audio').canPlayType('audio/mp3') || (document.createElement('audio').canPlayType('audio/ogg')) { // HTML5 document.getElementById('player').style.display = 'block'; } else { ... flash ... }

  • 190 5. , ,

    -:

    var videoClip = document.querySelector('#clip');var playButton = document.querySelector('#playButton');var pauseButton = document.querySelector('#pauseButton');

    playButton.addEventListener('touchEnd', function() { playVideo();});pauseButton.addEventListener('touchEnd', function() { pauseVideo();});

    function playVideo() { // videoClip.play(); // playButton.disabled = true; pauseButton.disabled = false;}

    function pauseVideo() { // videoClip.pause(); // playButton.disabled = false; pauseButton.disabled = true;}

    function MuteUnMute() { // document.getElementById('mute').value = videoClip.muted ? 'Mute' : 'Unmute'; // videoClip.muted = videoClip.muted ? false : true;}

    CubeeDoo..,-,,-,,,..

    ,,.--,-JavaScript.

    ,.,HTML:

  • 191/

    ,,-.JavaScript:

    playSound: function(matched) { if (qbdoo.mute) { return false; } if (matched) { qbdoo.matchfound.play(); } else { qbdoo.failedmatch.play(); } },

    ,HTML.JavaScript,:

    playSound: function(matched) { // if (qbdoo.mute) { return false; } // if (!qbdoo.audio) { qbdoo.audio = document.createElement('audio') } if (matched) { qbdoo.audio.src = qbdoo.matchedSound; } else { qbdoo.audio.src = qbdoo.failedMatchSound; } qbdoo.audio.play(); },

    ,,-..,.,LocalStorage(6).

    HTML-.,.

  • 192 5. , ,

    CSS.,.,-(,CSS-).

    ,-.,().(intrinsicdimensions).(,)-.,.

    (4:3,16:9..).,.,.,56,2575%-.-,-.

    -,:

    .wrapper { position: relative; height: 0; width: 100%; padding-bottom: 56.25%; / * */ padding-bottom: 75%;}video { position: absolute; width: 100%; height: 100%; left: 0; top: 0;}

    Flash,.-.,iPhone,AndroidWindowsPhone8-.iPad

  • 193/

    Fullscreen(),.iOSAndroid(GPU),Android-4CPU.

    ,mime-,Firefox..htaccess-AddTypevideo/ogg.ogv,.

    iPhoneiPad(autoplay),.

    ,.,JavaScript.http://videojs.com/.

    ,GPL-Handbrake,-MacOSX,LinuxWindows.

    ,.,.,-.

  • 6 API HTML5 -,

    -.-,-,.

    ,--,.,,.-,,,Submit(),.

    HTML5,-,HTTP-..HTML5,,,.indexDB,API,-,,APILocalStorageSessionStorage.

    ?,,,.HTML5-onLine(Navigator).,:

    var isOnline = navigator.onLine;

    truefalse().,-true,,,-.

  • 195-,

    ,,-,,.,CubeeDoo,-Wi-Fi,,,. --,.

    HTML-.,,.

    -.-,HTML5,API(AppCache).

    ,.,-,.:

    ; ; .-

    .-

    5(5).-.,,,-.

    ,-manifest.URL,.HTML-manifest="URL_of_manifest":

    ...

  • 196 6. API HTML5

    manifest,(),,,,,,.-.,,-,-.

    , , .

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

    ,,,.,,-.,,.,,-..-,.

    ,.,.-,.,.-,.

    .appcache.,-.CACHEMANIFEST.-,,.

    .appcacheMIME-text/cache-manifest.:

    AddType text/cache-manifest .appcache

    .htaccess.-...appcache:

  • 197-,

    CACHE MANIFEST#version01

    # CACHE:index.htmlcss/styles.cssscripts/application.js # , NETWORK:signin.phpdosomething.cgi

    FALLBACK:/ 404.html

    :,,.

    #.-.

    ,-.:CACHE,FALLBACK,SETTINGSNETWORK..

    ,CACHE,.,,CACHE.:,-(HTTPS),,,.

    ,,-,CACHE.

    ,.,NETWORK,.,

    .,FALLBACK,:,

    ,,-.,.SETTINGS-prefer-online.

    cache.appcache ( ), , , .

    ,

  • 198 6. API HTML5

    JavaScriptapplicationCache.,,,JavaScript,HTMLCSS..

    ,,.,#version01#version02,,.,.:-,,,.

    ,.-,-.-.appcache.appcache,.,,.-.,,,(,).,.

    ,,,,.appcache,-.

    .,-.,,.,.,--.

    ,.,applicationCache.update().-(UPDATEREADY),:

    var appCache = window.applicationCache;

    if (appCache.status == appCache.UPDATEREADY) { appCache.swapCache();}

    :UNCACHED,IDLE,CHECKING,DOWNLOADING,UPDATEREADYOBSOLETE.-,.

  • 199-,

    ,-,.,,,-.,,.

    ,updateready.-,.,.

    CubeeDoo.,-.,(,,).-,CACHE:FALLBACK:,:

    CACHE MANIFEST#version01

    CACHE:index.htmlcss/cubeedoo.cssscripts/cubeedoo.jsassets/matched.mp3assets/notmatched.mp3images/shapes.svg

    NETWORK:login.html

    FALLBACK:/ 404.html

    ,manifest. .-,-,:

    ,-,.404(),.

  • 200 6. API HTML5

    -,.-,.,CubeeDoo(),,,.,,.-LocalStorage,IndexedDBWebSQL,.

    LocalStorage-WebSQL(,-)..IndexedDB,-iOSAndroid(IE10,BlinkFirefox).

    LocalStorageSessionStorage/.:cookie,?,cookie,LocalStorage.

    cookieCookie,-.cookie(),--HTTP.cookie.HTTP-,.cookie,-JavaScript.,,,.

    300400cookie,cookie4,20cookie.HTTP-cookie.,,.,cookie-.

    cookie80(20cookie-,4),-.,,,-,.

  • 201-,

    LocalStorage.LocalStorage,.LocalStorage.

    SessionStorage,,.SessionStorage,,,.,,,SessionStorage.-,-,SessionStorage,/LocalStorage-.

    HTTP-,cookie.,cookie,,.HTML5cookie-.-,.LocalStorageSessionStorage.

    .6.1.SessionStorage,LocalStorage.

    6.1. SessionStorage LocalStorage

    setItem(key, value) . , :SessionStorage.setItem('keyname', 'data value')LocalStorage.setItem('keyname', 'data value')

    getItem(key) . null, :SessionStorage.getItem('keyname')SessionStorage.keynameLocalStorage.getItem('keyname')LocalStorage.keyname

    removeItem(key) . - :SessionStorage.removeItem('keyname')LocalStorage.removeItem('keyname')

    clear() /. - :SessionStorage.clear()LocalStorage.clear()

  • 202 6. API HTML5

    6.1 ()

    key(position) , :SessionStorage.key(position)LocalStorage.key(position)

    length length . , / SessionStorage:SessionStorage.lengthLocalStorage.length

    SessionStorageLocalStorage.-,:SessionStorageLocalStorage.

    ,API.,,JSON.-,-HTTP-.

    LocalStorage

    ,http://m.bing.com/,LocalStorageHTTP-,.:(,2),-HTTP-,JavaScriptCSS/LocalStorage./.cookie.

    ,-cookie-,,-.,.,-HTTP-.

    ,-,LocalStorage.,-1.

    1 sessionStoragehttp://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/

  • 203-,

    ,-,,Wi-Fi,-,,,.

    ,,,,.,-LocalStorage.FinancialTimes,.

    CubeeDooCubeeDooLocalStorage-,.SessionStorage-,.SessionStorageLocalStorage-..

    API-.CubeeDoo..,,,.

    LocalStorage,.,-API.-LocalStorage,-,,..,.SessionStorage,./SessionStorage,.

    SessionStorage.SessionStorageLocalStorage,-.(),,,-,.

    ,-,SessionStorage.SessionStorage-,.

  • 204 6. API HTML5

    ,,SessionStorage.,,,.,-,-,JavaScript.

    SessionStorage,HTML5!SessionStorage,localStoragr,.

    ():

    storeValue,; alterValue,; pauseGame,Local Storage; playGame,.,;

    resetLocalStorage,,.,.

    :qbdooCubeeDoo.,:

    1 var qbdoo = {2 // 3 currentLevel: 1,4 currentTheme: "numbers",5 gameDuration: 120,6 score: 0,7 matchedSound: 'assets/match.mp3',8 failedMatchSound: 'assets/notmatch.mp3',9 mute: true,10 cardCount: 16,11 iterations: 0,12 iterationsPerLevel: 2,13 possibleLevels: 3,14 maxHighScores: 5, ...

    ,,,-,,-....,Session Storage.

    storeValues():

    1 storeValues: function(newgame) {2 var currentState = {};3 // 4 currentState.currentTheme = qbdoo.currentTheme;

  • 205-,

    5 currentState.timeLeft = qbdoo.timeLeft;6 currentState.score = qbdoo.score;7 currentState.cardCount = qbdoo.cardCount;8 currentState.mute = qbdoo.mute;9 currentState.iterations = qbdoo.iterations;1011 // 12 // 13 if (newgame == 'newgame') {14 currentState.currentLevel = qbdoo.currentLevel;15 currentState.score = 0;16 currentState.gameDuration = qbdoo.gameDuration;17 SessionStorage.setItem('defaultvalues', JSON.stringify(currentState));18 return;19 } else {20 return currentState;21 }22 },

    storeValues(),,,JavaScript..,,,.,-,491416,().

    currentState,.17JSONstringify()JSON.SessionStoragedefaultvalues.setItem()SessionStorage.defaultvalues-getItem().playGame().

    alterAValue(),storeValues(),,:

    23 alterAValue: function(item, value) {24 var currentState = JSON.parse(SessionStorage.getItem('defaultvalues'));25 if (value) {26 currentState[item] = value; 27 } else {28 qbdoo[item] = currentState[item];29 }30 SessionStorage.setItem('defaultvalues', JSON.stringify(currentState));31 return value;32 },

  • 206 6. API HTML5

    alterAValue(),.,./,-.alterAValue()SessionStorage,,SessionStorage,,,.

    SessionStoragegetItem(),24.JSON,SessionStorage,setItem()storeValues().JSON,JSONgetItem().-JSON.parse()currentState.

    alterAValue(),-,.currentState,.,alterAValue().

    pauseGame()playGame(),:

    33 pauseGame: function(newgame) {3435 var currentState = {}, i, cardinfo = [];36 if (qbdoo.game.classList.contains('paused')) {37 qbdoo.playGame();38 return false;39 }4041 qbdoo.pauseOrPlayBoard('pause');42 currentState = qbdoo.storeValues();43 currentState.currentLevel = qbdoo.currentLevel;4445 for (i = 0; i < qbdoo.cardCount; i++) {46 cardinfo.push(qbdoo.cards[i].dataset);47 }4849 currentState.cardPositions = JSON.stringify(cardinfo);50 LocalStorage.setItem('pausedgame', JSON.stringify(currentState));5152 qbdoo.clearAll();5354 },

  • 207-,

    pauseGame()(Pause/Game),.-..,3638,,(paused),-playGame(),.,41pauseOrPlayBoard(),.

    ,.-,.,-,storeValues()42().43currentLevel.

    ,/cardinfo.4547.-JSON,pausedgame.50LocalStorage.

    ,clearAll().,data-value0.,data-value.7,.

    classList.:36classList.-classList,DOM,,,DOM.classListclass:

    node.classList.add(class); node.classList.remove(class),.,;

    node.classList.toggle(class),,,;

    node.classList.contains(class):true,-DOM,false;

    classListiOS5,Android3,IE10.,PausePlay.

    CSSpaused,-pauseGame().,36true,playGame():

    55 playGame: function(newgame) {56 var cardsValues, cards, i, currentState = {};

  • 208 6. API HTML5

    5758 if (newgame == 'newgame') {59 currentState = JSON.parse(SessionStorage.getItem('defaultvalues'));60 qbdoo.timeLeft = qbdoo.gameDuration = currentState.gameDuration;61 } else {62 // 63 currentState = JSON.parse(LocalStorage.getItem('pausedgame'));6465 if (qbdoo.game.classList.contains('paused')) {66 qbdoo.game.classList.remove('paused');67 }68 qbdoo.timeLeft = currentState.timeLeft;69 }70 qbdoo.reset('pausedgame');7172 qbdoo.currentTheme = currentState.currentTheme;73 qbdoo.mute = currentState.mute;74 qbdoo.currentLevel = currentState.currentLevel;75 qbdoo.score = currentState.score;76 qbdoo.cardCount = currentState.cardCount;77 qbdoo.iterations = currentState.iterations;7879 qbdoo.setupGame(currentState.cardPositions);80 },

    playGame(),,,.,-,.,.playGame().

    (5860),-SessionStorage.-getItem().,currentState.gameDuration,,-timeLeft.

    ,,,-LocalStorage.getItem(),pausedgame,defaultvalues.pausedgame-.pausedstateJSONcurrentState.paused.

    .defaultvalues,SessionStorage,,LocalStorage.setupGame,.

  • 209-,

    70reset(),,-LocalStorage.removeItem(),-/LocalStorage,:

    81 reset: function(item) {82 LocalStorage.removeItem(item);83 }

    CubeeDoo,.JSON.stringify(),JSON,LocalStorage.

    SessionStorage30.SessionStorage,defaultvalues,JSON,.625,,,1825-API,2./,-.

    ,LocalStorage:

    gameState = LocalStorage.getItem('cubeedoo');

    :

    LocalStorage.removeItem('cubeedoo');

    ,LocalStorageSessionStorage,-(.6.1).

    . 6.1. LocalStorage SessionStorage -

    :LocalStorageSessionStorage,

  • 210 6. API HTML5

    .,-,.

    SessionStorage.,-

    ,player,SessionStorage:

    if (!player || player == 'UNKNOWN') { player = qbdoo.player = prompt('Enter your name') || 'UNKNOWN'; SessionStorage.setItem('user', player); }

    :

    player: SessionStorage.getItem('user') || '',

    ,SessionStorage..,cookie,.LocalStorage,,,.,,,SessionStorage.

    -CubeeDoo-.,,LocalStorage.SessionStorage,,-,,SessionStorage,.,,.,,,,-SessionStorage,LocalStorage.,,LocalStorage,SessionStorage..,!

    SQL/ HTML5.,-WebSQL,.,(,IEFirefox).IndexedDB,WebSQL-WebKitOperaMobile,.,

  • 211-,

    WebSQL,iOSAndroidIndexedDB.

    ,?.-SQL,/.-.API-.LocalStorage,,.,API.

    SQL,WebSQL,.

    Web SQL openDatabase.openDatabase()-:,,.openDatabase().,.,,-:

    window.openDatabase(database_name, database_version, display_name, db_size);

    ,.

    CubeeDoo:LocalStorageWebSQL.,WebSQL,.,LocalStorage.qbdoo.storageType:

    storageType: (!window.openDatabase)? "WEBSQL": 'local',

    WebSQL,,-,.

    ,-:

    var dbSize = 5 * 1024 * 1024; // 5 dbSizeif (!qbdoo.db) { if (window.openDatabase) { qbdoo.db = openDatabase("highscoresDB", "1.0", "Scores", dbsize); }}

  • 212 6. API HTML5

    .transaction():,,.transaction(),openDatabase(),,openDatabase(),.SQL-,executeSQL():

    db.transaction(transaction_callback, error_callback, success_callback)

    executeSQL.executeSQL()-:SQL-,,SQL-SQL-,.SQL--SQL-,:

    db.transaction(function(trnactn) { trnactn.executeSql('SELECT * FROM scores', [], callbackFunc, db.onError); });

    CubeeDoo:

    saveHighScores: function(score, player) { qbdoo.db.transaction(function(tx) { tx.executeSql("INSERT INTO highscoresTable (score, name, date) VALUES (?, ?, ?)", [score, player, new Date()], onSuccess, qbdoo.onError); }); function onSuccess(tx, results){ // }},

    SQL,,,,SQL,.,SQL(WebSQL),Safari,ChromeOpera,FirefoxInternetExplorer.,-WebKitOpera,--.LocalStorage,IndexedDB.

    CubeeDoo,CubeeDooWebSQL.WebSQL,LocalStorage.-storageTypeqbdoo:

    storageType: (window.openDatabase)? "WEBSQL": 'local',

  • 213-,

    ,,-,.,,-.WebSQL,,ASCDESC,.

    SQL-create:

    createTable: function() { var i; qbdoo.db.transaction(function(tx) { tx.executeSql("CREATE TABLE highscoresTable (id REAL UNIQUE, name TEXT, score NUMBER, date DATE )", [], function(tx) {console.log('highscore table created'); }, qbdoo.onError); });},

    SQL-insert-LocalStoragesetItem()(WebSQL):

    saveHighScores: function(score, player) { if (qbdoo.storageType === 'local') { LocalStorage.setItem("highScores", JSON.stringify(qbdoo.highScores)); } else { qbdoo.db.transaction(function(tx) { tx.executeSql("INSERT INTO highscoresTable (score, name, date) VALUES (?, ?, ?)", [score, player, new Date()], onSuccess, qbdoo.onError); }); function onSuccess(tx,results){ // } }}

    .-,LocalStorageWebSQL.SQL-select:

    loadHighScoresLocal: function() { var scores = LocalStorage.getItem("highScores"); if (scores) { qbdoo.highScores = JSON.parse(scores); } if (qbdoo.storageType === 'local') {

  • 214 6. API HTML5

    qbdoo.sortHighScores(); }},

    loadHighScoresSQL: function(){ var i, item; qbdoo.db.transaction(function(tx) { tx.executeSql("SELECT score, name, date FROM highscoresTable ORDER BY score DESC", [], function(tx, result) {

    for (i = 0, item = null; i < result.rows.length; i++) { item = result.rows.item(i); qbdoo.highScores[i] = [item['score'], item['name'], item['date']]; } // for }, onError); // function onError(tx, error) { if (error.message.indexOf('no such table')) { qbdoo.createTable(); } else { console.log('Error: ' + error.message); } } qbdoo.renderHighScores(); }); // },

    renderHighScores():

    // renderHighScores: function(score, player) { var classname, highlighted = false, text = '', i; for (i = 0; i < qbdoo.maxHighScores; i++) { if (i < qbdoo.highScores.length) { if (qbdoo.highScores[i][1] == player && qbdoo.highScores[i][0] == score) { classname = ' class="current"'; } else { classname = ''; } text += "" + qbdoo.highScores[i][1].toUpperCase() + ": " + parseInt(qbdoo.highScores[i][0]) + " "; } } qbdoo.highscorelist.innerHTML = text;},

    SQL-drop,.WebSQL,reset()removeItem(),LocalStorage:

  • 215

    eraseScores: function() { if (qbdoo.storageType === 'local') { qbdoo.reset("highScores"); } else { qbdoo.db.transaction(function(tx) { tx.executeSql("DROP TABLE highscoresTable", [], qbdoo.createTable, qbdoo.onError); }); } qbdoo.highscorelist.innerHTML = '';},

    onError: function(tx, error) { console.log('Error: ' + error.message);},

    reset: function(item) { LocalStorage.removeItem(item);}

    IndexedDBIndexedDB.,-,.DOM,IndexedDB-.,.API,,,IndexedDB,WebSQL.

    HTML5--,API,-.,HTML5API,(,).HTML5-,--,-.API-,.,ARIA,--.

  • 216 6. API HTML5

    .-,(,-,).,,,-,,.

    (.6.2).(opt-in):--,..;,-.-,,,.,,.

    . 6.2. ,

  • 217

    IP-,,Wi-Fi,GPS,.-,-.

    API,-,,.API.

    ,,:

    if (navigator.geolocation) { // }

    getCurrentPosition()watch-CurrentPosition(),.-,.watchCurrentPosition()-,,-,GPS-.-,getCurrentPosition().-.CubeeDoo-,:

    if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handle_success, handle_errors);}

    coords,latitudelongitude,altitude,accuracy,altitudeAccuracy,headingspeed..

    if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handle_success,handle_errors);

    function handle_success(position) { alert('Latitude: ' + position.coords.latitude + '\n Longitude: ' + position.coords.latitude); }

    function handle_errors(err) { switch(err.code) { case err.PERMISSION_DENIED: alert("User refused to share geolocation data");

  • 218 6. API HTML5

    break; case err.POSITION_UNAVAILABLE: alert("Current position is unavailable"); break; case err.TIMEOUT: alert("Timed out"); break; default: alert("Unknown error"); break; } }

    }

    getCurrentPosition()watch-CurrentPosition()coords,-:

    position.coords.latitude; position.coords.longitude; position.coords.altitude; position.coords.accuracy.watchCurrentPosition():

    position.coords.heading; position.coords.speed..

    ,KindleOperaMini,(IE9).

    CubeeDoo,:

    1 function getLocation() {2 if (navigator.geolocation) {3 navigator.geolocation.getCurrentPosition(success, error);4 console.log('got position');5 } else {6 error('not supported');7 }8 }9 function error(text) {10 text = text || 'failed';11 console.log(text);12 }13 function success(location) {14 var lat = location.coords.latitude;15 var long = location.coords.longitude;16 var url = "http://maps.google.com/maps?q=" + lat + "," + long;17 }

  • 219

    getLocation()2,.:navigator(,).getCurrent-Position()geolocation3.-latitudelongitudecoords,1416Google.9-,.-,-.

    -JavaScript,,-.,-,,..,-,,.-JavaScript,,.,-,-,-.-,,,.

    --AJAX.,-.

    ,-.,.-.JavaScript,DOM.,,,---.,-postMessage().

    JavaScript-,-,-.-,,-.-

  • 220 6. API HTML5

    ,,:

    if (window.Worker) { // -}

    -,Worker()URI,.URI-,:

    if (window.Worker) { var webWorker = new Worker('subcontractor.js'); // }

    -postMessage().-,onmessage-,-.terminate()close().terminate(),:

    if (window.Worker) { var webWorker = new Worker('subcontractor.js'); // webWorker.postMessage(some_message);}

    (subcontractor.js):

    // subcontractor.jsself.onmessage = function(event) { // var stuff = event.data; // postMessage(stuff);};

    .,,,.-setTimeout(),clearTimeout(),setInterval()clearInterval().

    importScripts(),-.URI:

    /* */importScripts('scripts/jquery-min.js', 'application.js');

    -DOM,.,-.

  • 221

    -,JavaScript.

    CubeeDooJavaScript,AJAX.-,.,-.1000000-,-(LocalStorage).

    -,-:

    var webWorker = new Worker('js/sort.js'); webWorker.postMessage(qbdoo.highscores); webWorker.onmessage(function(event) { qbdoo.highscores(event.data); });

    -,,highscoresonmessage,postMessage:

    self.onmessage = function(event) { var sortedScores = sortScores(event.data); self.postMessage(sortedScores);};

    HTML5.,-.

    .,-,.-,,,,.class.,,,,-,.

    ,HTML5,--.,-HTML5,itemscope,itemprop,itemrefitemtype.

    itemscope,,-,-.itemprop,,

  • 222 6. API HTML5

    .itemprop,itemprop,itempropitemref.-,itemscope,itemref,ID-.itemprop.

    ,-..http://www.data-vocabulary.org/.

    ..-,,,RDF.itemscope,itemprop,itemtype..-class,,.,.

    ,class HTML-()., HTML5.

    HTML5,-:

    Estelle Weyl 1234 Main StreetSan Francisco, CA 94114 415.555.1212

    ,hCard():

    Estelle Weyl 1234 Main Street San Francisco, CA, 94114

  • 223

    USA

    415.555.1212

    class="vcard",HTML-,.-hCard,HTMLvCard.,,.

    :,,,URL.,.,fn(fullname).

    .,adr-:,,,.CSS,hidden.hCardhttp://microformats.org/code/hcard/creator.

    :

    Estelle Weyl 1234 Main Street San Francisco, CA, 94114 USA 415.555.1212

    :

    Estelle Weyl 1234 Main Street San Francisco, CA, 94114

  • 224 6. API HTML5

    USA

    415.555.1212

    ,.,-.,-.-,..

    API API-,.document.getItems(itemType)nodeList,-,-.document.getItems()nodeList,-,.URL,.

    nodeList,properties:

    var allMicrodata = document.getItems();var firstItemName = allMicrodata.properties['name'][0].itemValue;

    DOM,itemscope.

    .-,-.

    -,.-,.JavaScript,.cookie,,,-.,--,.

  • 225 - (ARIA)

    APIHTML5.,.

    ,,,:

    window.addEventListener('message', function(e) { if (e.origin == 'http://the_domain.com') { // . , // }, false);

    :

    var theFrame = document.getElementById("myIFrame").contentWindow;theFrame.postMessage("The message", "http://www.the_domain.com");

    CORS: CubeeDoo,,.,,,(CDN).,,CORS,FirefoxInternetExplorer:,-,.

    -.origin,-,.,,,-.,,.

    - (ARIA)

    HTML5,,-..ARIA(-)HTML5,.JavaScript-ARIA.ARIAHTML5

  • 226 6. API HTML5

    :Flash.,-,Flash,.HTML5,,,,,.-DOM,.

    -,,,-.ARIA,,JavaScript-.,--,.,-..-.,?APIARIA().

    ,ARIA-.-JavaScript,.-,-(WCAG1).,-:JavaScript.

    -,,JavaScript-,.ARIA-.,-,.,.

    ,ARIA,.ARIA,-,,,,.ARIA,-.ARIA-.

    ARIAtitle,-.,

  • 227 - (ARIA)

    !-JavaScript,jQueryDojo,ARIA.,IE8,ARIA.

    ARIArole,.

    ,ARIA,-HTML-.

    roleARIA,-,,.,().

    ,.,,,-.,ARIA,.

    ,..

    ,-,-ARIACSS

    role-,.,,-,role,,-,-.role,,.

    ,,-.:.,CSS-,

  • 228 6. API HTML5

    .-,-,.

    60ARIA,:

    alert dialog listitem option spinbuttonalertdialog directory log presentation statusapplication document main progressbar tabarticle form marquee radio tablistbanner grid math radiogroup tabpanelbutton gridcell menu region textboxcheckbox group menubar row timercolumnheader heading menuitem rowgroup toolbarcombobox img menuitemcheckbox search tooltipcomplementary link menuitemradio scrollbar treecontentinfo list navigation separator treegriddefinition listbox note slider treeitem

    role,.,role="checkbox".,,ARIA.-,,.

    --WAI-ARIA,http://www.w3.org/WAI/intro/aria.php.

    API,HTML5..-,.,,,.

  • 7 CSS3

    CSS310.WebKit/Blink,OperaFirefox.-IE10IE11!-().-CSS.

    InternetExplorer(IE8),CSS3-.,.

    CSS21998.-CSS3,,,.

    ?CSS2.1-.CSS3,CSS2.1.CSS-,.,,3(level3),4.1.,,-CSS3.

    WebKit/Blink,OperaMozilla-.InternetExplorer9--Microsoft..,CSS3.

    ---

  • 230 7. CSS3

    IE,CSS3HTML5,Windows(PlayStation,Wii..),,,.HTML5CSS3,-,-,-,Windows,,.

    CSSDOM-JavaScript(jQuery).-CSS3,CSS-.,,,CSS3,HTML-,,HTML.

    CSS: CSS3,CSS.,,,CSS,-CSS-.

    ,CSS. (CascadingStyleSheets(CSS))-

    -.CSS,.CSS-,.:,,,-CSS-,.,,.CSS-,-.

    HTML,,-.--(HTML)(CSS)(JavaScript).-,,.color="green"-.

  • 231CSS:

    1996!,1996,--CSS.-,,1,,-,.CSS.

    ...

    CSS,-.,-,.CSS-:

    { 1: 1; 2: 2;}

    ,().,,,.

    /,8.

    CSS-,, .,.,:

    p { color: blue; margin-bottom: 12px;}

    :,12.

    ,-,.-,!,,,

    1 3,HTML5,,-.

  • 232 7. CSS3

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

    CSS,.,-,,,,-,(ID)..

    ,,:,.

    ,-style:

    :

    p { color: blue; margin-bottom: 12px; }

    , , . HTML5 type="text/css" , -.

    ,-:

    .-,,--.,-,@import.

    .CSS,,.

  • 233CSS:

    CSS.,-.---.

    -,,-(anti-pattern)-,HTTP-.2.-HTTP-.

    :

    .2,-.,CSS.,-:

    XHTML,MIME-type="text/css".,,(-)CSS-.,HTML5,-CSS,,,.(relationrel)"stylesheet",,(type)test/css,,(media)-"all":

    rel,rel="stylesheet".-CSS.-CSS,,.-,,.rel,-.

    "stylesheet", ,-text/css.

  • 234 7. CSS3

    srcURL-,-,CSS.

    .XHTML,-.

    media.media,,-media="all",.,CSS,-:

    All,; braille,-;

    embossed; handheld,-.,,iPad,screenall,handheld;

    print,PDF-;

    projection-;

    screen,-,,,,;

    speech.,CSS2-aural;

    tty,(,,-);

    tv,,.

    ,,-,-media="screen",media="all",-all.

    @media:

  • 235CSS:

    @media screen { p { color: blue; }}

    @media print { p { color: red; }}

    CSS3media.CSS,,(SVG).HTML-,,,media,CSS-:

    ,,.7.1.

    7.1. @media-

    width min-width max-width -

    height min-height max-height -

    device-width min-device-width max-device-width device-height min-device-height max-device-height orientation ( -

    ). ( )

    aspect-ratio min-aspect-ratio max-aspect-ratio

    device-aspect- ratio min-device-aspect-ratio max-device-aspect-ratio ,

  • 236 7. CSS3

    .,-iPhone:

    .-.,,,-,.,,,-,-,.

    CSS-,.,(),.-14001320:

    @media screen and (min-width: 440px) { #content { background-image: url(/images/small/bg.jpg);}@media screen and (min-width: 1000px) { #content { background-image: url(/images/large/bg.jpg);}

    ,@media-,.-.,-.-.-.,.

    @media11.-

    ,:

    1 Java-Script,,,,:width=window.innerWidth;height=window.innerHeight;

  • 237CSS:

    @media screen and (transform-3d) { .transforms {}}

    -,-.

    @supports-:

    @supports (display: table-cell) and (display: list-item) { .query .supports { display: block; }}

    (supportsquery),CSSCSS-.-,.

    window.matchMedia.CSS,CSSOM-.window.matchMedia1,-,MediaQueryList(mql),-:

    var mql = window.matchMedia(mediaquery);if (mql.matches) { // }

    mediaquery.,,

    500:

    var mqobj = window.matchMedia('(orientation: portrait)');if (mqobj.matches) { document.querySelector('body').classList.add('portrait');}

    if (window.matchMedia("(max-width: 500px)").matches) { // , 500 } else { // , 500 }

    .,,:

    1 iOS5Android3,window.matchMediais,IE.

  • 238 7. CSS3

    var mqobj = window.matchMedia('(orientation: portrait)');mqobj.addEventListener('orientationchange', bodyOrientationClass);

    function bodyOrientationClass() { if (mqobj.matches) { // document.querySelector('body').classList.remove('landscape'); document.querySelector('body').classList.add('portrait'); } else { document.querySelector('body').classList.remove('portrait'); document.querySelector('body').classList.add('landscape'); }}

    -addEventListener,,.,.

    :

    myobj.removeEventListener('orientationchange', bodyOrientationClass);

    CSS(!),-CSS,.

    1. HTTP-. ,HTTP-.HTTP-..

    HTTP-,.,,-.

    ,,-,,CSS--style.css,home.css,about.css,footer.css,sidebar.css..-all.css.

    CSS--,,.HTTP--CSS.,CSS--

  • 239CSS:

    ,-CSS-,.

    ,,-.CSS,Sass,-,CSS-.,,CSS,..

    2. . ,.-.

    . (-,).

    ,-HTTP-.

    .1(HTTP-)

    ,CSSHTTP-,HTTP-,-(,2,,).,,.-.

    ,HTTP-,,,CSS,,HTTP-3G.,-,HTTP-..

    2,-.CSSJavaScript.JavaScriptAPI-LocalStorage.-,.cookie-.,HTTP-,cookie-HTTP-,,

  • 240 7. CSS3

    ,,,,-.-.LocalStorage,-,LocalStorage,HTTP-,.LocalStorage6.

    3. CSS . ,useragent(UA)stylesheet.,,,-.,UA-.,.-1CSS-,:,.

    ,UA-.-,.

    ,WebKit(,,),-CSS2.-,margin: 0;, padding: 0;background-repeat:no-repeat;.,-.

    * , - , , . , 3 .

    1 Yahoo!CSShttp://developer.ya-hoo.com/yui/reset/.backgroundrepeat:no-repeat;,.

    2 Normalize.cssCSS-,HTML-().-,.

    3 HTML5BoilerPlateGitHub.

  • 241CSS:

    4. , . ,-(ID).-,.,,.HTML-.

    ,.ID-,.-CSS--,,ID-,.,,.

    -.

    ,:

    :

    body p#myP.blue strong.warning { color: red;}

    :

    .warning{ color:red;}

    CSS-,,.

    ,,-,,.,-:,,-.-:-,,--(chartreuse).Google.,!:

    body aside.sidebar p#myP.blue strong.warning { color: #7FFF00;}

  • 242 7. CSS3

    ,,:

    aside .warning{ color: #7FFF00;}

    Sass,-,10.,-,.

    CSS:DOM-.

    5. !important. -,!important().-().

    ,:!important,.,-!important,-.:

    p {color: green !important;}p#myP {color: blue;}

    ,-!important.

    !importantCSS,-.,!important,.

    !important.!important,,.!important,,,---.

    , !important, !important , UA- , . UA- , , , - .

    -CSS.-

  • 243 CSS

    ,-,,1,,,.

    -.,,-,,,,!

    CSSCSS,CSS3.,-.,CSS3.,CSS.

    CSS-,,.,DOM-,-.-,.

    CSS 2.1 CSS3, , , IE8 .

    CSS,,,,,(ID).,-CSS-,-CSS.

    ,CSS3-,,.-CSS.

    1 CSS9-AdvancedCSS,FriendsofEd.

  • 244 7. CSS3

    ,,-:

    a { color: blue;}p { color: pink;}strong { color: green;}

    CSS,,,.

    ,,,-CSS,-.

    ,:

    p,li { text-transform: uppercase;}

    -:

    p strong { color: pink;}

    li a { color: black;}

    CSS,,-,-,strong-.-,,.

    Internet Explorer -, HTML5. , , , - , CSS3.

  • 245 CSS

    ,-:

    .copyright { font-size: smaller;}.urgent { font-weight: bold; color: red;}

    ,,-.,.

    HTML:class.-,class:.-:

    ,.

    :

    p.copyright { font-size: xx-small;}

    ,p,-xx-small,copyright.,xx-small,.copyright,p.copyright.

    ,CSS,.p.copyright.copyright.,.copyright.-,,.

  • 246 7. CSS3

    : copyright Copyright copyRight.

    ,(ID).,--:

    #divitis { color: orange; font-size: larger;}

    ,,,-,.copyrightp.copyright.

    #divitisa{}.copyrighta{},,,pa{},a{}.-,,.7.2:DOM-.

    ,,..,-.

    , , - .

    CSS3,CSS:-,.

    ,-CSS.CSS2

  • 247 CSS3

    ,-,,,,-,(*).

    ,.CSS3-.

    CSS3,-,()-,CSS2,InternetExplorerCSS2.1,IE8.Opera,Chrome,Safari,FirefoxInternetExplorer(IE9)CSS2.1CSS3::link:visited.

    ( ) , Opera, Chrome, Safari, Firefox Internet Explorer, IE9, CSS 2.1 CSS3.

    ,,,,.

    : *CSS2-.(*):

    * { color: blue;}footer * { color: white;}

    ,.-:,--,,-.,.

  • 248 7. CSS3

    : E ,,.--:

    section, aside, p { color: red}

    : .class-.,(.):

    .myClass { color: green;}

    : #id,,.-().,(#):

    #myId { color: black;}

    ,.-:

    ,.7.2.

    7.2. , ,

    p 0-0-1.firstclass.secondclass

    , 0-1-0

    p.firstclassp.secondclass

    , 0-1-1

    .firstclass.secondclass , 0-2-0

  • 249 CSS3

    p.firstclass.secondclass , 0-2-1#myparagraph , -

    1-0-0

    p#myparagraph , .

    1-0-1

    p#myparagraph.firstclass p#myparagraph.secondclass

    , .

    1-1-1

    p#myparagraph.firstclass.secondclass

    , .

    1-2-1

    !-,.,.-,,CSS/.

    ,.7.2,-.--,id,,-,,JavaScript-.,-,.7.2,.

    : ,

    ,-.CSS.

    ,-,..,(,)..,.,.

  • 250 7. CSS3

    ,CSS.:

    ,,.

    : E FE F(),FE.:

    pstrong{},,;

    #myParenta{}.-,id="myParent";

    .copyright.urgent{}urgent,-copyright;

    listrong{},.

    : ?#myparagraph.myclass { }#myparagraph .myclass { }: #myparagraph .myclass,

    . , : ,

    myparagraph, myclass. :

    myclass, myparagraph. , CSS

    !

    : E > F E > F.F,E.-E F,

  • 251 CSS3

    F,-().(>),F-E:

    div>p{},-;

    p>strong{},,.

    -,-.CSS3,!,>-E F,E > F.

    CubeeDoo.-.-,#board-,,,HTML:

    #board > div { position: relative; width:23%; height:23%; margin: 1%; float: left; transform-style: preserve-3d; transition: 0.25s; box-shadow: 1px 1px 1px rgba(0,0,0,0.25); cursor: pointer; /* for desktop */}#board.level2 > div { height: 19%;}#board.level3 > div { height: 15%;}

    ,.CSS-,,:23%,.,23%.

  • 252 7. CSS3

    -.---,?>.#board>div-,,#board.CSS-,,,.

    23%,1.,#board,level2level3,1915%,.,.-23,1915%-,,-.

    -,-,,-:

    article > footer,article > footer ul { text-align: center; margin: auto; width: 100%;}article > footer li { float: none; display: inline-block;}article > footer p { clear: both;}

    : E + F ,(+), - (F) (E).

    p:first-of-type+p{},,.

  • 253 CSS3

    : E ~ F -,,(~).,,-FE.F,E.,.

    .7.3.

    7.3.

    E F .content p , ( ) content

    -

    E > F ul.main > li , main. , - DOM , main

    E + F h1 + p , - h1 - h1

    - -

    E ~ F h1 ~ p , - h1 h1

    2.CSS,CSS-.-CSS2.CSS3-,-.

    CSS2,,,,,,,-.

    .CSS.

  • 254 7. CSS3

    CSS2.1HTML,.7.4:

    -?

    7.4. CSS 2 , ,

    ,

    E[attr] a[rel]

    input[type]label[for]

    E[attr=val] a[rel="nofollow"]input[type="checkbox"]

    - val1

    E[attr|=val] a[hreflang|="en"] , - val val,

    E[attr~=val] a[title~="browser"]input[value~="workers"]

    CSS2.1,,,,,-,.

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

    -CSS.-,,-

    1 -.,-.

  • 255 CSS3

    ,.

    ,a[hreflang|=fr],,-,,-..7.1:

    a[hreflang] { padding-right: 18px; background-position: 100% 0; background-repeat: no-repeat;}a[hreflang|="en"] { background-image: url(img/usa.png);}a[hreflang|="es"] { background-image: url(img/esp.png);}a[hreflang|=fr] { background-image: url(img/fra.png);}

    English Franais Espaol

    . 7.1.

    hreflangfr.

  • 256 7. CSS3

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

    CSS3,-,,,.

    .HTML.-,CSS3,.7.5:

    -?

    7.5. CSS3 ,

    E[attr^=val] a[href^="http"]

    input[value^="web"] val -

    E[attr$=val] a[href$=".pdf"]input[name$="spec"]

    val

    E[attr*=val] a[href*=":"] val

    CSS.-.,a[href^=http]CSSURL-1,a[href$=".pdf"],,,PDF.

    1 a[href^=http]URL,HTTPHTTPS,,HTTP.,a[href^="http://"],a[href^="https://"].,,:a[href^=http][href$=pdf],-PDF-,HTTPPDF,a[href^="http://"][href^="https://"]-,http:,https:.

  • 257 CSS3

    ,,,,,PDF-,-,,.,,,,-.(.7.2),,:

    Link 1 Link 2 Link 3 Link 3

    a[target="_blank"]::after {content: " (opens in new window)";} a[href$=".zip"]::after {content: " (.zip file)";} a[href$=".pdf"]::after {content: " (.pdf file)";}

    . 7.2. ,

    -,,,-,,.,HTML,.,,[type=CHECKBOX][type=checkbox],,,a[href^=http]a[href^=HTTP],1.

    1 CSS-4...

  • 258 7. CSS3

    -.,,,-,,-:

    @media screen and (min-width: 480px) { a[href^="mailto:"] { padding-left: 30px; background: url(emailicon.png) no-repeat left center; }}@media print, screen and (min-width: 640px) { a[href^="mailto:"]::after { content: "(" attr(data-address) ")"; opacity: 0.7; }}

    ,480,,,-,640.

    CSS2.1CSS.,,,,-,URL-.,,-,,,,-.,.

    CSS2.1.::after-CSS2.1content.,-CSS2.1().

    ,.

    CubeeDoo.CubeeDoodata-value.-data-value.colors1.

    1 numbersshapes.numbers,shapes5SVG.

  • 259 CSS3

    data-value:

    .colors div[data-value="0"] .back {background-color:transparent;}

    .colors div[data-value="1"] .back {background-color:#F00;}

    .colors div[data-value="2"] .back {background-color:#090;}

    .colors div[data-value="3"] .back {background-color:#FF0;}

    .colors div[data-value="4"] .back {background-color:#F60;}

    .colors div[data-value="5"] .back {background-color:#00F;}

    .colors div[data-value="6"] .back {background-color:#909;}

    .colors div[data-value="7"] .back {background-color:#F0F;}

    .colors div[data-value="8"] .back {background-color:#633;}

    .colors div[data-value="9"] .back {background-color:#000;}

    .colors div[data-value="10"] .back {background-color:#fff;}

    .colors div[data-value="11"] .back {background-color:#666;}

    .colors div[data-value="12"] .back {background-color:#ccc;}

    ,classHTML.DOM-.-,,:DOM-.

    ::link:visited.:link-,:visited.-,.Safari5,.,,.,.

    tabindex:hover,:active:focus.,/.:focus:active.tabindex.-:focus:activetabindex(.2).

    :focus :hover.

    ,-.CSS.:hover-.

  • 260 7. CSS3

    .,,.,-,:

    -webkit-tap-highlight-color.background-color,-,.,-,.,.,-,.;

    -webkit/moz/ms-user-select.,none-,().-,,.,OperaBlink,-;

    -webkit-touch-callout.none,(,),.

    user-actionCSS3-user-interface()user-interaction().

    ::enabled:disabled.:checkedtype="checkbox"type="radio".

    .7.6-,.

    7.6. CSS ,

    :link . CSS 1, -

    -

    :visited . CSS 1, -

    :hover , ,

  • 261 CSS3

    :active :focus , ,

    , , :enabled :disabled :checked :indeterminate ( ,

    )

    ,:active..active,CSS:active,-.active-touchstarttouchend.

    ,,,,.touchstarttouchend,pointerenterpointerleave.touchstarttouchend1:hover,-:active..hover,:hover,.active,:active,tabindex,,:

    var myLinks = document.querySelectorAll('[tabindex]');for (var i = 0; i < myLinks.length; i++) { myLinks[i].addEventListener('touchstart', function() { this.classList.add('hover'); this.classList.add('active'); }, false); myLinks[i].addEventListener('touchend', function() { this.classList.remove('hover'); this.classList.remove('active'); }, false);}

    1 touchstarttouchend.-Apple,-.W3C-pointer.touch-,pointer-,touchstarttouchend,Apple,..13.

  • 262 7. CSS3

    hover,,.,CSS-hover,hover:.hover, :hover { /* css hover */}.active, :active1{ /* css active */}

    -.hoverCSS.:hover,touchStart:

    var everything = document.querySelectorAll('a, label, span, input, [tabindex]');for (var i = 0; i < everything.length; i++) { everything[i].addEventListener('touchstart', function() { // }, false);}

    a:hover,label:hover,span:hover,input:hover { /* css hover */}

    ,.label!

    Are web workers in the specifications?

    input[type=checkbox]:checked + label {color: red;}

    .:,,.-,:checked-.

    1 (*)-..

  • 263 CSS3

    (UI)-.UI-CSS3-(.7.7)-,HTML5.:required,:valid:invalid2004,--HTML5required(.4).

    7.7. UI ,

    :default UI-,

    :valid ,

    , :invalid , -

    , :in-range , ,

    :out-of-range , ,

    :required ,

    required:optional ,

    required:read-only ,

    :read-write , -

    , contentEditable- (. 2)

    UI, , Basic User Interface Module, CSS3. CSS- 4 (CSS Selectors Level 4).

    CSS3,HTMLDOM..7.8.-,.-n-.

  • 264 7. CSS3

    7.8.

    :root , HTML5 :nth-child() , n- :nth-last-child(n) N- ,

    :nth-of-type(n) N- , :nth-last-of-type(n) N- , , -

    :first-child (CSS 2); ,

    :nth-child(1):last-child (CSS 2); ,

    :nth-last-child(1):first-of-type , ;

    , :nth-of-type(1):last-of-type , ;

    , :nth-last-of-type(1):only-child :only-of-type :empty , ( )

    :root,.-,HTML5.n-.

    n- :nth-of-type(),:nth-child()-.,,.,.

    Even odd,odd()even(),,oddeven.

    ,n-oddeven,.,-/,.-,:

    table { background-color: #ffffff;}tr:nth-of-type(even) { background-color: #dedede;}

  • 265 CSS3

    CSS.,..,.

    ,-.,..-,,,.

    ,.-,:

    tr:nth-of-type(8) { background-color: #ff0000;}

    CSS.-,tr:nth-of-type(even)((0-1-1),).

    ,nth-childnth-of-type.,,.

    :nth-of-type :nth-child:nth-of-type:nth-child,.:

    p:nth-child(3) {color: red;}p:nth-of-type(3) {color: blue;}

    p:nth-child(3)-,,.-3,,.p:nth-of-type(3),,4,-:

    1

  • 266 7. CSS3

    2 3 4

    :nth-of-type(8),:nth-child(8),.p:nth-of-type(8)p:nth-child(8),.:nth-of-type(8),,.:nth-child(8)(,-),.,.,.

    ,,.

    (xn+y),x-,y.,evenodd(2n)(2n-1).

    :(2n)2-,20,21,22,2,4,6,8,10-..(2n-1)2-,-,2-,,1,3,5,7,9-..(4n-2),4-,2-,2,6,10,14-..

    +,.5-,5-,(5n).,,(n,),.

    ,2n+9,-9-.n=01.:nth-of-type(2n+9)-9,11,13-.:nth-last-of-type(2n+9),-9,11,13-...,,,-.

    CubeeDoo:nth-of-type().CSS250,-:

  • 267 CSS3

    #board > div.matched:nth-of-type(2){ -webkit-animation-delay: 250ms;}

    iPhone,.,:

    article ul li:last-of-type { border-bottom: none;}

    ,,..:last-of-type,,--,:last-child,:nth-last-of-type(1):nth-last-child(1).

    ,-:first-of-type,:last-of-type.,-,,:

    article ul li:first-of-type { border-top: none;}

    , , 12 ( 12, HTML5 CSS3 ), , , , , .

    .1. 30 , 3, 8, 13, 18, 23 28.2. 17.3. 10 , 1, 3, 5, 7 9.4. 50 , 10, 20, 30, 40, 50.5. 30 , 6, 10, 14, 18, 22, 26, 30.

    1. (5n2) (5n+3).2. (17).3. (odd) (2n1) (2n+1).4. (10n).5. (4n+2).

  • 268 7. CSS3

    .

    n . .

    ,-.7.9.

    7.9. :target, :lang :not

    E:target ,

    E:lang(L) , -

    (L)E:not(s) -

    E, (s) . , E, - , s

    :target:target,-.,div--ID,div-,,:target,,-.

    ,#main:target,-URLthispage.html#main.,-,.-,CSS.

    :lang(en)E:lang()E,E,:lang().-Elang,,,-.

    ,HTMLUSEnglish.EE:lang(en),E:lang(fr),-.,,p:lang(fr)

  • 269 CSS3

    ,,p:lang(en),-,,,.

    :not(s), :not(s),s.E:not(s)E,.E:not(F)-E,-F.

    .,,:

    input[type=checkbox]:not(:checked)

    checkbox(),.CSS3,:checked.-,DOM.

    :not,,,,.

    p:not(.copyright)., ,-copyright.

    :not(a).,. pa:not(:visited).,. li:not(:last-of-type).,-.

    input:not([type=radio]):not([type=checkbox]).-,.

    h1:not(header>h1):not(#mainh1).,header>h1#mainh1,.

    ,-:not:

    ul > li:nth-of-type(n+2):nth-last-of-type(n+2)

    ,,,:

    ul > li:not(:first-of-type):not(:last-of-type)ul > li:not(:first-child):not(:last-child)

  • 270 7. CSS3

    :not,-,:

    li:not(#someID) /* 1-0-1 1-0-0 */li:not([title]) /* 0-1-1 0-1-0 */

    (other)-,,:

    other:

    ,:

    input[type="checkbox"]:not(:checked) ~ input { display: none;}

    ,.,display:none.

    ,,.,.-,,DOM.

    ,,-.::firstletter,DOM(),.,-,,.

    :first-letter.,::first-letter,,IE.

    :first-line::first-line-.,.

  • 271 CSS3

    ,::selection..::selectionCSS3,,(Firefox,-moz-).

    -.,:

    .willNotBeSelectable { -webkit-tap-highlight-color: #bada55; -webkit-user-select: none; -webkit-touch-callout: none; -ms-touch-action: none;}

    tap-highlight,.user-select:none;-,/.:CubeeDoo,,,.touch-callout,.touch-actionnone,Windows.

    ::before ::after::before::after.-,DOM.::before::after.-,,-warning:

    .warning::after {content: '!';}

    ,..clearfix,:after.-:(..7.1)(..7.2).

    content,.

  • 272 7. CSS3

    ,,.,-,DOM.

    :before:after,IE,IE8.

    CubeeDoo.CubeeDoo-numbersshapes:

    .numbers div[data-value="1"] .back:after{ content:'1';}

    .numbers div[data-value="2"] .back:after{ content:'2';}

    .numbers div[data-value="3"] .back:after{ content:'3';}

    .numbers div[data-value="4"] .back:after{ content:'4';}

    .numbers div[data-value="5"] .back:after{ content:'5';}

    .numbers div[data-value="6"] .back:after{ content:'6';}

    .numbers div[data-value="7"] .back:after{ content:'7';}

    .numbers div[data-value="8"] .back:after{ content:'8';}

    .numbers div[data-value="9"] .back:after{ content:'9';}

    .numbers div[data-value="10"] .back:after{ content:'10';}

    .numbers div[data-value="11"] .back:after{ content:'11';}

    .numbers div[data-value="12"] .back:after{ content:'12';}

    .shapes div[data-value="1"] .back:after{ content:'';}

    .shapes div[data-value="2"] .back:after{ content:'';}

    .shapes div[data-value="3"] .back:after{ content:'';}

    .shapes div[data-value="4"] .back:after{ content:'';}

    .shapes div[data-value="5"] .back:after{ content:'';}

    .shapes div[data-value="6"] .back:after{ content:'';}

    .shapes div[data-value="7"] .back:after{ content:'';}

    .shapes div[data-value="8"] .back:after{ content:'';}

    .shapes div[data-value="9"] .back:after{ content:'';

    .shapes div[data-value="10"] .back:after{ content:'';}

    .shapes div[data-value="11"] .back:after{ content:''}

    .shapes div[data-value="12"] .back:after{ content:'';}

    .data-value.-SVGbackground-positiondata-value.,.

    .,,Firefox.

    -,.-

  • 273 : DOM-

    -.

    ,(),-,,,,..-.

    (::),.CSS3--.,CSS3.::after:after,,,:hover,,.

    ,::(),W3,.-,CSS12(,:firstline,:first-letter,:before:after).

    : DOM-,?!-,,-.,,-,WebKit:

    ::-webkit-validation-bubble {}::-webkit-validation-bubble-arrow-clipper {}::-webkit-validation-bubble-arrow {}::-webkit-validation-bubble-message {}

    -.,WebKit,.,-,1:

    1 Mozillahttp://mzl.la/1cdK4mx

  • 274 7. CSS3

    ::-webkit-progress-bar {}::-webkit-progress-value {}

    ,,-ChromeDOM(.7.3).

    . 7.3. DOM,

    ,range..DOM,.webkit-slider-runnable-track,-.::-webkit-slider-runnable-track.div-,-webkit-slider-thumb.-,DOM,:

    input[type="range"]::-webkit-slider-runnable-track { -webkit-flex: 1 1 0px; min-width: 0px; -webkit-align-self: center; box-sizing: border-box; display: block; -webkit-user-modify: read-only;}input[type="range"]::-webkit-slider-thumb,input[type="range"]::-webkit-media-slider-thumb { -webkit-appearance: sliderthumb-horizontal; box-sizing: border-box; display: block; -webkit-user-modify: read-only;}

  • 275 : DOM-

    -Blink,,DOM,--.

    : CSS.CSS-.,,,.

    CSS,,,:,-.

    CSS-,,,,..-.()().,,-.

    ,,,,..,-.-,.

    (*),,(>,+~).-.

    ,,,-,,,-,.

    :not,.-class,HTML.CSS.

    ,.

    :,,!important.

  • 276 7. CSS3

    (.5CSS),-!important(),.

    ,,,-,,,,-http://specifishity.com.-.

    !,CSS-,,,,,,.,CSS3,-.

  • 8 CSS3

    -,,,CSS3.,iPhone,iPod,iPad,Android,Galaxy,MicrosoftSurface,,WebKit,Firefox,OperaWindows8,,-.(Windows7,-),CSS3HTML5..

    ,-,CSS3.CSS3CSS.-CSS3.9CSS3.

    CSS3,.,-,.,-,,-,CSS3,,,.

    CSSCSS3:(-),rgb().CSS3-HSL,HSLA,RGBA,-.

  • 278 8. CSS3

    RGB,RGBA,.HSB(hue,saturation,brightness,,-)HSLHSLA(hue),-(saturation)(light).RGBAHSLA-.

    :.8.1,,CSS3.

    8.1. CSS1

    #RRGGBB #ff00ff #RGB #f0f rgb(r, g, b) rgb(255, 0, 255)

    rgb(100%, 0, 100%) (red), (green), (blue)

    hsl(h, s, l) hsl(300, 100%, 50%) (hue), (saturation), (lightness)

    cmyk1(c, m, y, k) cmyk(29%, 55%, 0, 0) (cyan), (magenta), (yellow), (black)

    hsla(h, s, l, a) hsla(300, 100%, 50%, 1) (hue), (saturation), (lightness), (alpha)

    rgba(r, g, b, a) rgba(255, 0, 255, 1)rgba(100%, 0, 100%, 1)

    (red), (green), (blue), (alpha)

    fuchsia

    transparent currentColor ( )

    ,025500FF,-.:,-,,(#),.

    ,#FFFFFF,,.-.,,,#0 00000,.00FF,-,:,,,

    1 CMYK-pagedmedia,,.

  • 279 CSS

    .--,#FF0000.,,-#CC0000.

    ?,,#FFCC00#ffcc00,,,-.

    , 3, - , #0 00000 .

    RGB-,#RGB,,R,GB,-AF,af,09.,.,RGB-,#369#3 36699.#FF9900#F90,#F312AB1.

    ,,,-.,,,..-,.

    ,,,#0 00000.

    ,.

    1990-,---(web-safecolors).,--..,.

    1 ,--(FF,00-),CSS-(CSSColorsLevel4).

  • 280 8. CSS3

    rgb(),.

    -rgb,.,,:

    #FFFFFF = #FFF = rgb(255, 255, 255) = rgb(100%, 100%, 100%).

    ,RGB-.rgb()-,-,,.

    :

    rgb(255, 255, 255)rgb(100%, 100%, 100%)

    :

    rgb(255, 100%, 255);

    RGBA

    CSS3RGBA.RGB,-A-.

    rgb()CSS3rgba(),alpha,.-(red),(green)(blue).-.1,0,0.550%-.01,.

    ,,1,:

    rgb(255, 255, 255)rgb(100%, 100%, 100%)rgba(255, 255, 255, 1)rgba(100%, 100%, 100%, 1)

    ,1.:rgba(0,0,0,0),,.

  • 281 CSS

    , , rgba(0, 0, 0, 0), rgba(255, 255, 255, 0), .

    .8.1,rgba(0,0,0,1)-.-,..8.1,.

    RGBA . , , . , , - - .

    text-shadow: 5px 4px 6px #6 66666; text-shadow: 5px 4px 6px rgba(0, 0, 0, 0.4);.

    . 8.1. - ,

    RGB,RGBA-.RGBA,-.

    , , : HSL()HSL,CSS3.HSL:(hue),(saturation)(lightness).HSL--,,

  • 282 8. CSS3

    -.

    ,,,.HSL-,..HSL,,.

    hsl(),rgb(),,,,0359,,50%.

    :0=,60=,120=-,180=,240=,300=,.-(),.--HSL.

    :100%(-),50%,0%-.100%(),#8 08080-.

    rgb()rgba(),hsl()-hsla().hsla(),(hue),,01.,hsla(300,100%,50%,0.5),-50%-.

    HSLHSLA,-,-.,0,(100%)(0%).

    CMYK?-?,-(),-(-),.CMYK(cyan),(magenta),(yellow)(black),,:()CMYK,RGB.

    RGB.,-,HSL.-CMYK.CMYK

  • 283 CSS

    ,,,-.,CMYK,.CMYKCSS3-pagedmedia,(colormodule).

    ,,aqua,fuchsialime,.

    ,,RGBHSL.

    ,-(,IEgraycolorsa,lightgray,lightgrey).

    -,-,-.

    ,.

    transparent,-rgba(0,0,0,0),.,transparent,-1.

    'transparent'#FF0000,rgba(255,0,0,0),.-,-,RGB-HSL-.

    CurrentColorCSS3,currentColor(),'color:'-,.

    currentColor-,HelveticaNeueLight:

    .bolderText {text-shadow: 0 0 1px currentColor;}

    1 transparent,,.-transparent,-.

  • 284 8. CSS3

    .-,,.,,currentColor.

    CSS2.11,-W3CCSS3currentColortransparent.

    .,,-:

    activeBorder; activeCaption; appWorkspace-;

    background; buttonFace; buttonHighlight; buttonShadow; buttonText; captionText; grayText; highlight; highlightText; inactiveBorder; inactiveCaption; inactiveCaptionText; infoBackground; infoText; match; menu; menuText; scrollbar; threeDDarkShadow3D-;

    1 .

  • 285 CSS

    threeDFace3D-; threeDHighlight3D-; threeDLightShadow3D-; threeDShadow3D-; windowFrame; windowText.,,:

    -webkit-activelink,; -webkit-focus-ring-color,-,;

    -webkit-link; -webkit-text,; -moz-buttonDefault; -moz-buttonHoverFace; -moz-buttonHoverText; -moz-cellHighlightText; -moz-comboBox; -moz-ComboboxText; -moz-Dialog; -moz-DialogText; -moz-dragtargetzone; -moz-EvenTreeRow; -moz-Field; -moz-FieldText; -moz-html-CellHighlight; -moz-html-CellHighlightText; -moz-mac-accentdarkestshadow; -moz-mac-accentdarkshadow; -moz-mac-accentface; -moz-mac-accentlightesthighlight; -moz-mac-accentlightshadow; -moz-mac-accentregularhighlight; -moz-mac-accentregularshadow; -moz-mac-chrome-active; -moz-mac-chrome-inactive; -moz-mac-focusring;

  • 286 8. CSS3

    -moz-mac-menuselect; -moz-mac-menushadow; -moz-mac-menutextselect; -moz-MenuHover; -moz-MenuHoverText; -moz-MenuBarText; -moz-MenuBarHoverText; -moz-nativehyperlinktext; -moz-OddTreeRow; -moz-win-communicationstext; -moz-win-mediatext.Firefox.:

    #myElement { color: -webkit-focus-ring-color; background-color: -webkit-link; text-shadow: 3px 3px 3px -webkit-text; -webkit-box-shadow: 4px 4px 4px -webkit-activelink;}

    -.,,.,,.

    :CSS,..-,CSS.

    ?-CSS.--#8 00000,maroon,rgba(128,0,0),rgba(128,0,0,1.0),hsl(0,100%,13%)hsla(0,100%,13%,1.0).

    -,,,,,,.CSS,-Sass,.CSS,.

    ,hsla()rgba().,,.

  • 287 , CSS

    -..-.

    , CSS,.,(-),.,,.

    ,,,.,,.

    ,..8.2.

    8.2. , CSS1

    em , ex , x ch , 0 ()rem , vw , : -

    100 vwvh , : -

    100 vhvmin vh vmvmax vh vmpx , , -

    , , 1/72 in cm mm pt , 1/72 pc , 1/12 % , , -

    self ,

    1 ,vmaxch,-AndroidOpera,vmax,Safari.

  • 288 8. CSS3

    CSS,-.,rem,vh,vw,vminvmax,,.

    rem.CSS3rootem.em,,rem-.,-rem.rem-,IE9,iOS4Opera12(Android).

    , (zero-length), null, 0. - . , 0deg.

    ,-.,,.,,,zoom-.

    ,JPEG-GIF-,,.-CSS-widthheightimage.

    ,,autoinherit:

    p { height: auto; font-size: inherit;}

    dpi, dpc, dppxiPhone480320.i-,iPhone4iPodtouch4G,320480,960640.iPad-1024768,7681024.iPad(DPI)20481536.SafariChrome,Nokia,OpenMoko,AndroidWebKit-.

  • 289 , CSS

    ,,DPI,,.,iPhone4DPI,,,,,-,DPI,..8.3-.

    8.3.

    dpi dpc dppx

    CSS3.dpi,dpcdppx.

    CubeeDoo,px-,remvhvm..,,,-ddpx:

    @mediaonly screen and (-webkit-min-device-pixel-ratio: 2),only screen and ( min--moz-device-pixel-ratio: 2),only screen and ( -o-min-device-pixel-ratio: 2/1),only screen and ( min-device-pixel-ratio: 2),only screen and ( min-resolution: 192dpi),only screen and ( min-resolution: 2dppx) {

    /* */

    }

    , CSS3,,.,.

  • 290 8. CSS3

    ,,,,.,.8.4.

    8.4. ,

    deg grad ()rad turn ms s Hz kHz

    ,,0,..8.4.,,CSS,-.

    ,turn,.-,,,rad(),deg()grad().Hz()kHz().ms(-)s().

    . , , - , .

    ,,.,,!

    0360,.-,.,90deg.90deg90.

  • 291 , CSS

    CSS.8.2:

    .image1, image5 { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); /* IE9 */ transform: rotate(-5deg); }.image2, image4 { -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); }

    . 8.2.

    ,,1/400.-,,.10090(.8.3).

    . 8.3. 90 , 100 1,571

  • 292 8. CSS3

    ,,180/,57,3.2-.1,.1.570796326794897rad10090deg.

    360deg.,2turn=720deg.,turn.:

    transform: rotate(900deg);transform: rotate(2.5turn);

    ,!-:(s)(ms).1000-1.,s,ms.,-,sms,-.:

    animation-duration: 0.5s;animation-duration: 500ms;

    ().:Hz()kHz().1000Hz=1kHz().-.,.

    CSS,,class="low",,squeal.:

    p.low { pitch: 105Hz; }q.squeal {pitch: 135Hz;}

    CubeeDoo.CSS,CSS,JavaScript.JavaScript.-180deg200ms.,.

  • 293

    ,-.CSS,-CSS3.,,.

    CSS.:,,,CSS.

    ,:

    .sameValues { padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px;}.twoValues { padding-top: 3px; padding-right: 6px; padding-bottom: 3px; padding-left: 6px;}.threeValues { padding-top: 3px; padding-right: 6px; padding-bottom: 12px; padding-left: 6px;}.fourValues { padding-top: 3px; padding-right: 6px; padding-bottom: 9px; padding-left: 12px;}

    :

    .sameValues { padding: 3px;}.twoValues { padding: 3px 6px;}.threeValues {

  • 294 8. CSS3

    padding: 3px 6px 12px;}.fourValues { padding: 3px 6px 9px 12px;}

    ,.,CSS3(-9),.,,.,-,,.

    ,.,,.,,,.-TRouBLe(),(T),(Rright),(Bbottom)(Lleft).

    ,,.8.5,,,.

    8.5. , , , ,

    3px -

    TRBL (T ; R -; B ; L )

    2px 4px : 2px : 4px

    TB RL

    3px 1px 5px : 3px : 1px: 5px

    T RL B

    1px 2px 3px 4px : 1px : 2px: 3px : 4px

    T R B L

    ,:CSS-background-position,LRTB,TBLR.

    ,,,..:

  • 295

    .myClass { border: 1px solid #ff0000;}

    :

    .myClass { border-width: 1px; border-style: solid; border-color: #ff0000;}

    ,,:

    .myClass { border-top-width: 1px; border-top-style: solid; border-top-color: #ff0000; border-right-width: 1px; border-right-style: solid; border-right-color: #ff0000; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ff0000; border-left-width: 1px; border-left-style: solid; border-left-color: #ff0000;}

    12.border-,-,.

    -,.,,.

    60,-,,-.CSS,-CSS3.,,,.,.!

  • 9 CSS3: , CSS2,CSS3.W3C-,(Recommendationlevel),-.

    CCS320,(-).,CSS,-CubeeDoo.,iPhone.

    iPhone-CSS.-CSS2.1,-,border-radius(),,,text-shadow(),box-shadow(),background-size(),text-overflow().-CubeeDoo.

    ,iPhoneHTTP--.CSS,,,,.

    CSS3-,,HTTP-,.CSS3-,DOM-,.-DOM-,.

  • 297 CSS

    CSS3,.,CSS3,HTTP-,.-HTTP-,CSS-,-,.CSS-,,,,-.

    ,.CSS.CSS,.

    CSS3HTML5-,.11,-.

    ,ruby--,,1.-,.

    CSSCSS3,.CSS--CSS,.

    CSSCSS3,,,.(border),(margin)(padding):

    border-bottom; border-bottom-color; border-bottom-style; border-bottom-width; border-color;

    1 CSS-speech,pagedmediaruby,W3C--:http://www.w3.org/TR/css3-speech/,http://www.w3.org/TR/css3-page/http://www.w3.org/TR/css3-ruby/

  • 298 9. CSS3: ,

    border-left; border-left-color; border-left-style; border-left-width; border-right; border-right-color; border-right-style; border-right-width; border-style; border-top; border-top-color; border-top-style; border-top-width; border-width; margin; margin-bottom; margin-left; margin-right; margin-top; padding; padding-bottom; padding-left; padding-right; padding-top.

    border.,,-.(,).,border-style:dotted;,border-style-right: dashed;.

    .

    border-style. border-imageborder-style(.11).

  • 299 CSS

    ,W3C,/-,.box-sizing,-.

    , , , .

    border-styleborder-style.

    CSS3border-style,border-radiusborder-image,.

    border-styledashed,dotted,double,groove,hidden,inset,none,outset,ridgesolid.

    hidden,none,.,-,,nonehidden,transparent.-hidden-.

    WebKit-border-color,inset,outset,grooveridge.WebKit.

    ,border-style,,-none.,-border-stylenone.

    border-image,,11.

    border-colorborder-color,-.CSS,CSS8.-currentColor:border-style,border-color,,currentColor.

    CSS.-.

  • 300 9. CSS3: ,

    ,,,:

    blockquote { background-color: green; position: relative; color: white; padding: 15px 25px; margin: 10px 10px 0;}blockquote:after { border: 15px solid; border-color: green transparent transparent; top: 100%; left: 10px; width: 0; height: 0; position: absolute; content: '';}

    ,-,,,.-..9.1.

    . 9.1. ,

    ,,?

    border-widthborder-width.-border-widththin,medium,thickinherit,medium.,(px,em..),8.

    ,.9.1,15,,.-.

  • 301 CSS

    border-widthborder-image:border-image,border-width,border-image-border-width.

    ,.,,.

    CSSHTML.CSS(),,,,.,,-.

    .9.2,(content),(padding),(border)(margin). Content,. Padding,.,-1.

    Border,.-,...,-,.

    Margin,.-.,-.,

    .,,.-,,.

    = + + + + . = + + + + .

    ,.9.2.,,.,0,.

    1 ,background-clipbackground-origin.

  • 302 9. CSS3: ,

    . 9.2. W3C

    ,,1.

    = + + + + + + .

    = + + + + + + .

    box-sizingbox-sizing,,-CSS3,,Microsoft-,W3C.100%-,-.box-sizingbox-sizingborder-box:

    .box { width: 100%; padding: 10px; border: 1px solid currentColor; -webkit-box-sizing: border-box; /* Android (3.0) */ -moz-box-sizing: border-box; /* Firefox */ box-sizing: border-box;}

    1 ,.

  • 303 CSS3

    , 100 % 100 %, , IE6/IE7, box-sizing border-box.

    box-sizing,IE8,FirefoxWebKit-iOS4.3,Android3.0BlackBerry7,.

    calc()box-sizing:border-box!

    .,-,.-:,,.,.

    CSS3,-CSS3.iPhone,-CSS.HTML:

    iPhone Look and feel

    Cancel Done Languages

    English Franais Espaol ...

  • 304 9. CSS3: ,

    HTMLCSS,-,iPhone(.9.3).

    . 9.3. CSS, - , , iPhone

    border-radiusCSS3,,border-radius.-.

    CSS-border-radius--,.,,.-.

  • 305 CSS3

    ,,.HTTP-,,DOM-.,,.

    ,-,,,,,,,-.(),.bor der-radius,--!!

    border-radius:

    border-top-right-radius:border-bottom-right-radius:border-bottom-left-radius:border-top-left-radius:

    ..border-radius:

    border-radius: length{1,4} / length{1,4} /* */border-(top|bottom)-(left|right)-radius: length length /* */

    ,,,(.9.4).:,()-..,,,-,.,.

    :-,,,.-TRBL,,,.

  • 306 9. CSS3: ,

    . 9.4. border-radius,

    DOM-:

    myObj.style.borderTopLeftRadiusmyObj.style.borderTopRightRadiusmyObj.style.borderBottomRightRadiusmyObj.style.borderBottomLeftRadius

    ,(-)JavaScript.radiusleft,topborder,border-top-left-radius.JavaScriptCSS-DOM--.,,-JavaScriptCSS.JavaScript.

    border-radius iPhone CubeeDoo

    !iPhone(..9.3)Cancel()Done().CSS3,,.CSS:

    1 article ul {2 border: 1px solid #A8ABAE;

  • 307 CSS3

    3 border-radius: 10px;4 background-color: #FFFFFF;5 width: 300px;6 margin: 10px auto;7 }

    21.3-border-radius,10-.Android2.1iOS3.2,-webkit-.,,:Android,-.Android.-,..

    6margin-10-,auto.margin,(TopBottom),(LeftRight).(?-8.)

    .CSS:

    8 article ul {9 list-style-type: none;10 }11 article li {12 line-height: 44px;13 border-bottom: 1px solid #A8ABAE;14 padding: 0 10px;15 }16 article li:last-of-type {17 border-bottom: none;18 }

    CSS.:last-of-type16.7.articleli:last-of-type{border-bottom:none;},-,.

  • 308 9. CSS3: ,

    articleli:not(:last-of-type),,.-,,-.

    ?Done()Cancel()iPhone,CubeeDoo..

    CSS-,-CSSHTML-,.

    Cancel()Done(),-.Cancel()Done().-,,iPhone..iPhonePNG-,-iOS..CSS3,,HTTP-.-iOSCSS,.svg,.gif,.webp,.png.jpeg.

    ,,,background-images,list-style-imagesborder-images.,.

    CSS-,-.,.CSS-(CSSImagesLevel4)-,-.

    ,,,WebKit.CSS--,CSS-.--WebKit,.

  • 309 CSS

    : :..,:

    background-image: -webkit-gradient(linear, /* Web Kit1 */background-image: -webkit-linear-gradient( /* Android, iOS 6.1, BB10 */background-image: linear-gradient( /* iOS7, Chr26+, IE10+, FF 16+, O12.1+ */

    :

    background-image: -webkit-gradient(radial, /* WebKit */background-image: -webkit-radial-gradient( /* Android, iOS 6.1, BB10 */background-image: radial-gradient( /* IE10, FF16, O12.1, Chr26, iOS7 */

    WebKit,-.,.MozillaOpera2,InternetExplorer.

    .,--.

    ,-..-,,-,.-.,,,,-.

    .,,,

    1 WebKitChrome9,iOSSafari4.3,Android3.2BlackBerry7.

    2 ,-moz--o-,,-.,Firefox415/Opera11.112.0.

  • 310 9. CSS3: ,

    1024,.-.

    ..

    ,,:

    -prefix-linear-gradient(, , [,] )

    angle.topbottom,/leftright,.

    :

    linear-gradient([| to], , [,] )

    ,-,to,-,,,-,,.

    ,,-to,,-,.

    ,,.

    ,to:,-.?..

    CSS().,,.

    ,-..0,90.-0(.9.5).

  • 311 CSS

    . 9.5.

    .0-,.CSS--.0-,,-90..

    -.:top(),bottom(),left()right(),:topleft()bottomright().

    .,,(background-image).,top,,topright,-,.

    CSS-,,,to(),-,.-,-,.,totop-,,totopright,.

  • 312 9. CSS3: ,

    top270deg,tobottom180deg,,,.9.6.,:

    /* */-webkit-linear-gradient(#0 00000, #FFFFFF);-webkit-linear-gradient(top, #0 00000, #FFFFFF);-webkit-linear-gradient(270deg, #0 00000, #FFFFFF);

    /* */linear-gradient(#0 00000, #FFFFFF);linear-gradient(to bottom, #0 00000, #FFFFFF);linear-gradient(180deg, #0 00000, #FFFFFF);

    . 9.6.

    ,(.9.7),,,:

    /* */-webkit-linear-gradient( top left, #0 00000, #FFFFFF);linear-gradient(to bottom right, #0 00000, #FFFFFF);

    ,315deg-135deg,,toplefttobottomright,.

    315deg135deg-,topleft()tobottomright(),,-,,tobottomright.?,,.

  • 313 CSS

    . 9.7. ,

    , - 100 % . (background) (size) , - .

    ,-,.,,,,.,-,,-(.9.8):

    background-image: -webkit-linear-gradient(top left, #0 00000, #FFFFFF);background-image: linear-gradient(bottom right, #0 00000, #FFFFFF);

    . 9.8. , ( )

    ( )

  • 314 9. CSS3: ,

    .9.8,,.,-tobottomrighttopleft.-,,-,-.

    ,.,.,,,,10%-?,.

    ,,.0%,0%0,.,100%.

    (),(),0%,100%.

    -.200,-(.9.9):

    -webkit-linear-gradient(top, #0 00000 10%, #FFFFFF 90%);-webkit-linear-gradient(top, #0 00000 20px, #FFFFFF 180px);linear-gradient(to bottom, #0 00000 10%, #FFFFFF 90%);linear-gradient(to bottom, #0 00000 20px, #FFFFFF 180px);

    ,,.9.9,10%.10%-.90%-.-80%.

    ,-,..

  • 315 CSS

    ,(,).

    .,,1996,2013,:

    1 background-image: linear-gradient(2 red,3 orange,4 yellow,5 green,6 blue,7 purple);

    :

    1 background-image: linear-gradient(2 red 0%,3 orange 20%,4 yellow 40%,5 green 60%,6 blue 80%,7 purple 100%);

    ,,,,,,-.

    ,,(),,,:

    1 background-image: linear-gradient(2 red 16.7%,3 orange 16.7%,

    . 9.9. 0

  • 316 9. CSS3: ,

    4 orange 33.3%,5 yellow 33.3%,6 yellow 50%,7 green 50%,8 green 66.7%,9 blue 66.7%,10 blue 83.3%,11 purple 83.3%);

    16,7%,-.:-0%,.16,7%.16,7%.-0%.,-.,-.

    (,,),-HSLARGBA:

    linear-gradient(180deg, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.9) 90%);

    iPhone CubeeDoo,,iOS-,.iOS.,:

    1 header {2 /* */3 padding: 7px 10px;4 background-color: #6D84A2;5 display: block;6 height: 45px;7 -moz-box-sizing: border-box;8 box-sizing: border-box;9 line-height: 30px;10 border-bottom: 1px solid #2C3542;11 border-top: 1px solid #CDD5DF;

    311.4,-.-,,,.,-

  • 317 CSS

    ,.

    ,IEbox-sizing: border-box.-moz-,,,-,.

    .,.-50%:

    15 background-image: -webkit-linear-gradient(top,16 rgb(176, 188, 205) 50%,17 rgb(129, 149, 175) 100%);18 background-image: linear-gradient(to bottom,19 rgb(176, 188, 205) 50%,20 rgb(129, 149, 175) 100%);

    50%,-()..

    ,BlackBerry7,Android3.0-, :

    12 background-image: -webkit-gradient(linear, 0 0, 0 100%,13 color-stop(0.5, rgb(176, 188, 205)),14 color-stop(1.0, rgb(129, 149, 175)));

    WebKit-, iOS 4.3, Android 3.0 BB7, :

    -webkit-gradient(linear, , , color-stop(, )[, color-stop(, ), color-stop(, )])

    , - color-stop, 0 1 -. , .

    , top, bottom, left right. .

  • 318 9. CSS3: ,

    ( ) color-stop, .

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, red), color-stop(0.3, orange), color-stop(0.5, yellow), color-stop(0.7, green), color-stop(0.9, blue) );

    , ( - ), , , 10 % , , , 90 % 100 %. - .

    ,.:.RGBA(HSLA),:

    21 background-color: rgb(129, 149, 175);22 background-image: -webkit-gradient(linear, 0 0, 0 100%,23 color-stop(0.5, rgb(255, 255, 255, 0.4)),24 color-stop(1.0, rgb(255, 255, 255, 0)));25 background-image: -webkit-linear-gradient(26 rgba(255, 255, 255, 0.4) 50%,27 rgba(255, 255, 255, 0));28 background-image: linear-gradient(29 rgba(255, 255, 255, 0.4) 50%,30 rgba(255, 255, 255, 0));31

    toptobottom,,100%,,,100%.

    -,--,- iPhone-..-.,-.

  • 319 CSS

    ?-.,(,):

    .nav li { background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0)); background-image: linear-gradient(to top, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0));}.cancel {background-color: #4A6C9B;}.done {background-color: #2463DE;}

    ,.-.,50%..

    50%,background-position.

    background-size,.

    .CSS1background-

    position,(background-position:015px),CSS3background-size().

    background-sizebackground-size.-,,contain,coverauto.

    contain,,-.-,background-size:contain,,,.,background-positionbackground-repeat.

    cover,-,,,,.-,

  • 320 9. CSS3: ,

    background-size:cover,.auto-.,,.9.10.

    . 9.10. background-size, auto, cover, contain ( background-repeat: no-repeat)

    -,.,,,,.9.10,.,auto.

    :(),-..9.10,150px150px(250250),.

    ,.contain,cover,auto,.,,-,,auto.

    background-size-,,,.--,,-,.,.9.1-background-size.

    9.1. iOS1 .button {2 background-image:3 -webkit-gradient(linear, 0 100%, 0 0%,4 from(rgba(255,255,255, 0.1)),5 to(rgba(255,255,255,0.4)));

  • 321 CSS

    6 background-image:7 -webkit-linear-gradient(bottom,8 rgba(255, 255, 255, 0.1),9 rgba(255, 255, 255, 0.4));10 background-image:11 linear-gradient(to top,12 rgba(255, 255, 255, 0.1),13 rgba(255, 255, 255, 0.4));14 background-repeat: no-repeat;15 background-size: 100% 50%;16 }17 .cancel {18 background-color: #4A6C9B;19 float: left;20 }21 .done {22 background-color: #2463de;23 float: right;24 }

    ,(header),-,.,background-size,:50%100%-.

    ,-,background-repeat:no-repeat.:

    background-size: 2px 50%;background-repeat: repeat-x;

    2.2(),1,Chrome.,,--,-.

    -.,100%100%,,,..

    CSS - background-repeat: no-repeat. , , no-repeat, , - . , , .

  • 322 9. CSS3: ,

    DPI background-size.background-size-DPI.

    DPI,.,-,.CSSbackground-size.

    ,100300.PNG-100300.DPIPNG-200600.-,.100300CSS-,,background-size.

    background-sizeauto,200600.div-#logo100300,-:

    #logo {width: 300px; height: 100px;background-image: url(logo.png);background-size: contain; /* */background-size: 300px 100px;}@mediascreen and (-webkit-min-device-pixel-ratio: 2),screen and (min--moz-device-pixel-ratio: 2),screen and (-min-moz-device-pixel-ratio: 2),screen and (-o-min-device-pixel-ratio: 2/1),screen and (min-device-pixel-ratio: 2),screen and (min-resolution: 192dpi),screen and (min-resolution: 2dppx) { #logo { background-image: url(hidpi/logo.png); }}

    ,background-size:contain;background-size:300px100px;,div--,.

    background-size:background-size,-.-

  • 323 CSS

    .

    iOS-,.iOS-?GIF-?.,-CSS-.iOS-,.

    ,-,,.-.,,:

    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.4, #ffffff), color-stop(0.4, #0 00000), color-stop(0.6, #0 00000), color-stop(0.6, #ffffff));background-image: -webkit-linear-gradient(right, #ffffff 40%, #0 00000 40%, #0 00000 60%, #ffffff 60%);background-image: linear-gradient(to left, #ffffff 40%, #0 00000 40%, #0 00000 60%, #ffffff 60%);

    ,,40%,60%(.9.11).

    .,,.-7:

    1 background-color: #C5CCD4;2 background-image:3 -webkit-gradient(linear, 0 0, 100% 0,

  • 324 9. CSS3: ,

    4 color-stop(0.7142, #C5CCD4),5 color-stop(0.7142, #CBD2D8));6 background-image:7 -webkit-linear-gradient(left,8 #C5CCD4 0.7142,9 #CBD2D8 0.7142 %);10 background-image:11 linear-gradient(to right,12 #C5CCD4 0.7142%,13 #CBD2D8 0.7142%);14 background-size: 7px 2px; 1

    15 background-repeat: repeat;

    ,,.,.,.

    ,213,,,-100%,.--,,,.,.background-repeatbackground-size.

    7,5,#C5CCD4,

    1 2,1,.-Chrome,-2.

    . 9.11. ,

  • 325 CSS

    2,#CBD2D8.,.-,,:

    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(5px, #C5CCD4), color-stop(5px, #CBD2D8));background-image: -webkit-linear-gradient(left, #C5CCD4 5px, #CBD2D8 5px);background-image: linear-gradient(to right, #C5CCD4 5px, #CBD2D8 5px);

    repeating-linear-gradient()background-sizebackground-repeat.

    CSS3background-sizebackground-repeat,,.CSS3-,,repeating-linear-gradient:

    background-image: -webkit-repeating-linear-gradient(left, #C5CCD4 0, #C5CCD4 5px, #CBD2D8 5px, #CBD2D8 7px);background-image: repeating-linear-gradient(to right, #C5CCD4 0, #C5CCD4 5px, #CBD2D8 5px, #CBD2D8 7px);background-size: 7px 7px;background-repeat: repeat;

    -.7.-.,.

  • 326 9. CSS3: ,

    1.,-,background-sizebackground-repeat,1415.

    -,.,BlackBer-ry10,iOS5,Safari5.1Chrome10,-WebKit-.,ChromeChromeAndroid.,Chrome.

    CubeeDooChromeAndroid-,CubeeDoo.,--Chrome,,,-.

    CubeeDoo.,,:

    body { background-color: #eee; background-image: -webkit-repeating-linear-gradient(-135deg, transparent 0, transparent 4px, white 4px, white 8px), -webkit-repeating-linear-gradient(135deg, transparent 0, transparent 4px, white 4px, white 8px); background-image: repeating-linear-gradient(-135deg, transparent 0,

    1 ,Chrome.,,110,,,-,,100.

  • 327 CSS

    transparent 4px, white 4px, white 8px), repeating-linear-gradient(135deg, transparent 0, transparent 4px, white 4px, white 8px);}

    ,,.

    ?CSS3DOM-.,.,background-image,.

    ,.,DPI,:

    #board { color: #fff; height: 400px; width: 100%; float: left; text-align: center; background-color: #eee; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.5, rgba(255,255,255,0)), color-stop(0.5, rgba(255,255,255,0.5))), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.5, rgba(255,255,255,0)), color-stop(0.5, rgba(255,255,255,0.5))); background-image: -webkit-linear-gradient(-135deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 50%), -webkit-linear-gradient(135deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 50%); background-image: linear-gradient(-135deg, rgba(255,255,255,0) 50%,

  • 328 9. CSS3: ,

    rgba(255,255,255,0.5) 50%), linear-gradient(135deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 50%); background-size: 2px;}

    ,-background-size.,,.-,.,-background-size,-background-image.

    background,--,.,background-color.

    -

    ,-.background-size,-:

    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(.5, rgba(255, 255, 255, 0)), color-stop(.5, rgba(255, 255, 255, 0.1)), color-stop(1, rgba(255, 255, 255, 0.4)));background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4));background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4));

    ,,.

    ,(-),--.-

  • 329

    ,,.

    ,,,.,,,.,.

    WebKit - . WebKit .

    ,background-size-,.CSS,,,text-overflow.

    :

    1 .button {2 background-color: #4A6C9B;3 background-image:4 -webkit-gradient(linear, 0 100%, 0 0%,5 from(rgba(255,255,255,0.1)),6 to(rgba(255,255,255,0.4)));7 background-image:8 -webkit-linear-gradient(bottom,9 rgba(255, 255, 255, 0.1),10 rgba(255, 255, 255, 0.4));11 background-image:12 linear-gradient(to top,13 rgba(255, 255, 255, 0.1),14 rgba(255, 255, 255, 0.4));15 background-size: 100% 50%;16 background-repeat: no-repeat;17 color: #FFFFFF;18 border: 1px solid #2F353E;19 border-color: #2F353E #3 75073 #3 75073; /* T LR B */20 border-radius: 4px;21 text-decoration: none;22 font-family: Helvetica;23 font-size: 12px;24 font-weight: bold;25 height: 30px;26 padding: 0 10px;

  • 330 9. CSS3: ,

    27 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);28 overflow: hidden;29 max-width: 80px;30 white-space: nowrap;31 text-overflow: ellipsis;32 -webkit-box-shadow:33 0 1px 0 rgba(255,255,255, 0.4);34 -webkit-box-shadow:35 0 1px 0 rgba(255,255,255, 0.4),36 inset 0 1px 0 rgba(255,255,255,0.4);37 box-shadow:38 0 1px 0 rgba(255,255,255, 0.4),39 inset 0 1px 0 rgba(255,255,255,0.4);40 }

    !(26),-,text-shadow,box-shadowtext-overflow.-!.

    -,.18204,.15:,,.-,.

    100%,.,16background-repeat:norepeat-.2(background-size:2px50%;),,-background-repeat:repeat-x;.

    26,,,.HTML-,-.--,,.-nav-,,,canceldone,.

    text-shadow27,CSS!.

    CSS2CSS2.1.!.

  • 331

    Apple.Apple.com,,.,.-3,5,,,IE6(,10-,,Mac),.

    IE,.,-text-shadow,-HTTP-.

    text-shadow,-.text-shadow(leftOffset),(topOffset),(blurRadius)(color),.,:

    text-shadow: [, ][, ];

    :---.

    .,,.-.,0,.

    ,0,.currentColor(.8).

    ,HelveticaNeueLight,DPI.:

    text-shadow: 0 0 1px currentColor;

    .CSS1,.currentColor,,.

  • 332 9. CSS3: ,

    ,-:.

    ..,-.,-,(-).

    -:rgba(0,0,0,0.4);.-.

    ,Apple,-1.-,():

    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);

    1-,.

    , text-shadow . , , CSS . - .

    width, overflow text-overflow

    28-31-,..:.,,,-.Languages,,SupportedLanguages?

    -.,(list-item,inline,inline-block..),,width-!

  • 333

    text-overflowtext-overflow-BasicUI.,-.ellipsis-,:

    text-overflow: ellipsis | clip

    ,,-text-overflow:ellipsis;.-,1.,overflow,,,visible(),white-spacenowrappre.clip,.

    ellipses-,.Firefox,9,string.

    ,.-(-).,-,,:

    h1 { white-space: nowrap; width: 180px; overflow: hidden; -o-text-overflow: ellipsis; /* opera mini, mobile */ text-overflow: ellipsis;}

    ,white-space,overflow,,width,,,,.

    white-spacewhite-space.white-spacenormal,nowrap,pre,pre-line,

    1 ,,-webkit-line-clamp,-text-overflow:-o-ellipsis-lastline;WebKitOpera.

  • 334 9. CSS3: ,

    pre-wrapinherit.normal,-,.nowrap.pre-wrap,nowrap:-.

    text-overflow:elipses;,-.,-CSS1.

    ,-.CubeeDoobox-shadow.CSS3-,iPhone,box-shadow.

    box-shadow-.box-shadow,.-,inset.

    outlinetext-shadow,-.,IE9.Android3.0iOS5--webkit-.

    box-shadow-text-shadow,-inset:

    box-shadow: inset [, inset ][, inset ];

    box-shadow:none(),,(leftOffset),(topOffset),(blurRadius),(spread)(color)inset(-).,.

  • 335

    -.text-shadow,-,..inset,,-.inset,,.

    ,insetbox-shadowtext-shadow.,Android,3.0,iOS3.2-webkit-inset. iOS4.xBlackBerry7-webkit-,,inset,.

    (-)1:

    1 -webkit-box-shadow:2 3px 4px 5px 6px rgba(0,0,0, 0.4);3 -webkit-box-shadow:4 3px 4px 5px 6px rgba(0,0,0, 0.4),5 inset 1px 1px 1px #FFFFFF;6 box-shadow:7 3px 4px 5px 6px rgba(0,0,0, 0.4),8 inset 1px 1px 1px #FFFFFF;

    box-shadow,.,,:

    ,,,.;

    ,,,.;

    ,..,.,;

    ,(-)..,-;

    1 12Android3.0iOS3.2,inset.35-WebKit,Safari5,iOS4.3,Andro-id3.0BB7.68Safari5.1,Opera10.5+,OperaMobile11+,Chrome9+,IE9+Firefox4+.OperaMini.

  • 336 9. CSS3: ,

    .,--.,,.,,/.,currentColor;

    inset,-,.

    5.inset.1(?).,,.

    XY,.(inset),,..text-shadow,,box-shadow,-,.,z-index,--(-,),-.

    -,,,,-.

    , . , 20 , , , - , . 20 , 60 /.

    iPhone,,-,,,.

  • 337

    ,.

    , , - .

    3739CSS--:

    box-shadow: 0 1px 0 rgba(255,255,255, 0.4), Inset 0 1px 0 rgba(255,255,255,0.4)

    :11.-webkit-,Android.

    : CubeeDooCubeeDoo.CSS.,CSS.-,,:

    1 #board > div {2 box-shadow: 1px 1px 1px rgba(0,0,0,0.25);3 }4 .back {5 border: 5px solid white;6 }7 .back:after,8 .face:after {9 position: absolute;10 content: "";11 top: 0;12 left: 0;13 right: 0;14 bottom: 0;15 border-radius: 3px;16 pointer-events: none;17 }18 .back:after {19 background-repeat: no-repeat;20 background-color: #fff;21 background-size:22 50% 50%,23 0 0;24 background-image:

  • 338 9. CSS3: ,

    25 url('data:image/svg+xml;utf8,'),26 -webkit-linear-gradient(-15deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));27 background-image:28 url('data:image/svg+xml;utf8,'),29 linear-gradient(75deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));30 box-shadow:31 inset 1px 1px 0 currentcolor,32 inset 1px 1px 0 currentcolor,33 1px 1px 1px rgba(0,0,0,0.1);34 color: rgb(119, 160, 215);35 }36 #board > div.flipped {37 box-shadow: 1px 1px 1px rgba(0,0,0,0.25);38 }39 .control {40 border: 1px solid rgba(0, 0, 0, 0.25);41 box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);42 background-image:43 -webkit-linear-gradient(-15deg,44 rgba(0, 0, 0, 0),45 rgba(0, 0, 0, 0.025));46 background-image:47 linear-gradient(75deg,48 rgba(0, 0, 0, 0),49 rgba(0, 0, 0, 0.025));50 text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);51 border-radius: 5px;52 }

    ..

    1. 1-,#board,-.,,.2.

  • 339

    2. 7-17--.10content,0,,,-1,.border-radius3px,.

    position: absolute -, , , .

    3. 17-35-.-,background-repeatbackground-color.,background-size,-.

    4. ,-.box-shadow..

    .SVG,-5..-.(,WebKit-),,SVGAndroid.,,,-,-,SVG.

    5. (.9.12):.,.5.,55.,.

    1 ,-.

  • 340 9. CSS3: ,

    . 9.12. CubeeDoo:

    6. ,,33,-.

    7. 34.,,-.()SVG,.,-currentColordrop-shadow.

    8. ,.,-,.,,,,.36-,,div-,flipped().div-,,-.(-)11.

    9. 39-52-,CubeeDoo.()4041-.

  • 341

    10. ,.,--,.

    11. 5051,.

    ,,iPhone,,CubeeDoo.,CSS3,HTTP-.

    CSS3SVG,5,-,.

    ,.,,,,11.

  • 10 CSS3: ,

    ,,,-,CSS--Flash,CanvasJavaScript.,,,,CSS3.

    Flash,JavaScript?FlashiOS.Flash,AdobeFlashPlayer,FlashPlayer11.1 forAndroid,BlackBerryPlayBook2011.

    Flash,Flash,.,-,Flash,-.

    ,JavaScript,-.,,,,-.

    CSS-.CSS,,,1.,-,.

    1 CSS-,CSS.

  • 343CSS-

    ,,:,,,.-,.,.

    -,,,,-.

    ,,-,.,.

    CSS-.,-,Geocities1990--.

    CSS-CSS--.--:hover,,,0.CSS-,.

    CSS-.:transition-property,,,transition-duration,,transition-timing-function,,,transition-delay,-.

    ,,.,,,,.-1:

    1 :-webkit-iOS6,Android,BlackBerry10Chrome25;-o-Opera12-moz-Firefox15.IEIE10,.-webkit-,-,,,.

  • 344 10. CSS3: ,

    nav a { background-color: rgb(255,255,255); border: 5px solid #0 00000; transition-property:background-color; transition-timing-function:linear; transition-duration:0.8s; transition-delay:200ms;}

    .()..,animation,-.,,.

    ,transition:background-color.,,all:

    nav a:hover, nav a.hover { background-color: rgb(0, 0, 0); border: 5px dashed #CCCCCC;}

    (.10.1)..-200,800,-..10.1,,200.

    . 10.1. background-color, , ,

    800 200

    ,,-.,-.-.

  • 345CSS-

    transition-propertytransition-property,-.,-,:

    background-color; background-position; background-size; border(,); border-color; border-radius; border-width; border-spacing; box-shadow; bottom; clip; color; columns; column-width; column-count; column-gap; column-rule(,); crop; flex; flex-basis; flex-grow(); flex-shrink(); font-size; font-size-adjust; font-stretch; font-weight; height; left; letter-spacing; line-height; margin;

  • 346 10. CSS3: ,

    max-height; max-width; min-height; min-width; opacity; order(flex); outline-color; outline-offset; outline-width; padding; perspective; perspective-origin; right; text-decoration-color; text-indent; text-shadow; top; transform; transform-origin; vertical-align; visibility; width; word-spacing; z-index.

    , , . , . , ease in, ease out cubic-bezier, .

    ,,top:0;-top:100px;50px,,-,display:block;display:none;(.10.1),,.-height:600px;height:700px;,height:auto;height:700px;.

  • 347CSS-

    10.1.

    ?

    height 100 px 200 px 150 px

    height auto 200 px ?

    opacity 0 1 0,5

    display block none ?

    ,,,,background-positionbackground-size.

    visibility.,,,.

    (visible)(hidden),.,,.

    transition-property,,all.,-,all:

    nav a { -webkit-transition-property: background-color; /* iOS6-, BB, Android, Ch25-*/ -moz-transition-property: background-color; /* FF4 to 15 */ -o-transition-property: background-color; /* O 10.5 to 12 */ transition-property: background-color; /* IE10, FF16+, 012.5+, Ch26+, iOS7 */

    -moz--o-.-ms-,FirefoxOpera.-,transition,-webkit-.

    ,,-transition,-,.,-,,.

    transition-durationtransition-duration.

  • 348 10. CSS3: ,

    ,.

    8.-.(),:

    -webkit-transition-duration: 0.5s; transition-duration: 500ms; ...

    transition-timing-functiontransition-timing-function,.ease,linear,ease-in,ease-out,ease-in-out,step-start,step-end,steps(x,start),steps(x,end).

    :-,,.,!,CSS3,-,,--.

    ,step(ease,linear,ease-in-out..),:

    ease,cubic-bezier(0.25, 0.1, 0.25, 1.0).,;

    linear,cubic-bezier(0.0, 0.0, 1.0, 1.0).-;

    ease-in,cubic-bezier(0.42, 0, 1.0, 1.0).,-;

    ease-out,cubic-bezier(0, 0, 0.58, 1.0).,;

    ease-in-out,cubic-bezier(0.42, 0, 0.58, 1.0).,;

    cubic-bezier(p1,p2,p3,p4).p1p3011.

    1 ,,,,.,http://cubicbezier.com,-.

  • 349CSS-

    Step-steps(x,end),steps(x,start),step-endstep-start .-.,,.

    ,,steps(5,start)-0,20,40,6080%.steps(5,end),20,40,60,80100%-.

    step-startsteps(1,start),step-end-steps(1,end).steps()-.-.:

    ...-webkit-transition-timing-function: linear; transition-timing-function: linear; ...

    transition-delaytransition-delay-,,.

    0s,-.-.,,.

    transition-delay,..-AB,,,,.-50.,,-.

    .transition-duration,,,,,.,,transition-duration,10,-4,,40%:

  • 350 10. CSS3: ,

    ... -webkit-transition-delay: 250ms transition-delay: 0.25s;}

    transition-:

    nav a { -webkit-transition-property: background-color; transition-property: background-color;

    -webkit-transition-duration: 0.5s; transition-duration: 500ms;

    -webkit-transition-timing-function: linear; transition-timing-function: linear;

    -webkit-transition-delay: 250ms; transition-delay: 0.25s;}

    8,12161-transition,-.,():

    transition-property; transition-duration; transition-timing-function; transition-delay.nav a { background-color: #FFFFFF; -webkit-transition: background-color 500ms linear 250ms; transition: background-color 500ms linear 250ms;}nav a:hover, nav a.hover { background-color: #FF0000;}

    ,,,,().-.

    1 .

  • 351CSS-

    ,.

    ?,background-color,border-colorcolor?transition.

    ,background-colorborder(,).,-,border,-,-,bordertransition-property,all.,all,.

    ,,-,transition-property.background-color-(250),,,,0s0s.

    -,transitionall,,-hover:

    nav a { background-color: #FFFFFF; border: 5px solid #CCCCCC; -webkit-transition: all 500ms linear 250ms; transition: all 500ms linear 250ms;}

    all,.,,-,transition-property:

    nav a { background-color: #FFFFFF; border: 5px solid #CCCCCC;

  • 352 10. CSS3: ,

    color: red; -webkit-transition: border, color 500ms linear 250ms; transition: border, color 500ms linear 250ms;}

    ,,,,,,,,,-transition-propertytransition-duration:

    nav a { background-color: #FFFFFF; border: 5px solid #CCCCCC; color: red; -webkit-transition: background-color, color 500ms linear 750ms, border 500ms linear 250ms; transition: background-color, color 500ms linear 750ms, border 500ms linear 250ms;}

    (border),transition-delay,.,750ms,-transition-delay500ms,-(border),250ms,,(background-colorcolor):

    transition-property: background-color, color, border;transition-duration: 500ms;transition-timing-function: linear;transition-delay: 750ms, 750ms, 250ms;

    ,,,,.,,.

    CubeeDoo,,0,25.(),0,25:

    1 #board > div {2 position: relative;3 width: 23%;4 height: 23%;5 margin: 1%;

  • 353CSS3-

    6 float: left;7 -webkit-transition: 0.25s;8 transition: 0.25s; ...

    ,78,,,,(-transition-delay)(transition-property)transition-timing-functionease.

    transition:0.25s,transition:all0.25sease0ms;,,,-.

    CSS3-,,,-.2D-,,IE91,3D,.

    , IE9 .

    CSS3-,.

    CSS-:transform,-,transform-origin,-,.

    transform-origin,transform-origin.

    transform-origin50%50%0,-.x,,y,-,-.z-,3D-.,-left,center,right,topbottom,z-,

    1 InternetExplorer:progid:DXImageTransform.Microsoft.Matrix().

  • 354 10. CSS3: ,

    ,.

    transform-origin,.(),,,(.10.2).transform-origin,-,,,,,..

    . 10.2. , , ,

    90

    .10.2transform-origin,.-,,:

    -webkit-transform-origin: top left 0; /* webkit blink */ -moz-transform-origin: top left; /* FF 3.5 - 15 */ -ms-transform-origin: 0 0; /* IE9 */ -o-transform-origin: 0 0 0; /* O 11.0-12.0 */ transform-origin: top 0 0; /* IE10+, FF16+, O12.1 only */

    topleft,00,000topleft01.(

    transform-origin:centercenter0;)-,transform,,.

    1 IE9,Firefox3.515,Opera12-WebKit.Firefox16,IE10,Opera12.1OperaMobile11.OperaMini.,transform-origin,2D-.Opera12.1,-webkit-,Presto.

  • 355CSS3-

    transformCSS-transform, iPhoneFirefox3.5+,Opera10.5,InternetExplorer9WebKit,-CSS.-,,-.CSS-,-.,-.

    .transform,.-.

    translate()translate(x, y)(.10.3),xy:

    -webkit-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); transform: translate(15px, 15px);

    translateX()translateX(x)translate(),:

    -webkit-transform: translatex(15px); -ms-transform: translatex(15px); transform: translatex(15px);

    translateY()translateY(y)translate(),:

    -webkit-transform: translatey(-15px); -ms-transform: translatey(-15px); transform: translatey(-15px);

    scale()scale(w,h)(.10.4)wh:

    -webkit-transform: scale(1.5, 2); -ms-transform: scale(1.5, 2); transform: scale(1.5, 2);

  • 356 10. CSS3: ,

    . 10.3. translate: translate(15px, -15px), translateX(15px) translateY(-15px)

    ,-.,,,:

    transform: scale(2);

    ,,-., ,scale(1).

    scaleX()scaleX(w)scale(),.scale(w,1):

    -webkit-transform: scalex(0.5); -ms-transform: scalex(0.5); transform: scalex(0.5);

    -o- -moz- , Mozilla Presto .

    scaleY()scaleY(h)scale(),.scale(1, h):

    -webkit-transform: scaley(2); -ms-transform: scaley(2); transform: scaley(2);

  • 357CSS3-

    . 10.4. scale: scale(0.5, 0.75), scaleX(0.5), scaleY(0.5) scale(0.5

    rotate()rotate()(.10.5)(.10.2):

    -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg);

    rotateX()rotateX()X:

    -webkit-transform: rotatex(15deg); -ms-transform: rotatex(15deg); transform: rotatex(15deg);

    90X,180,,-.,,backface-visibility.

    rotateY()rotateX(),rotateY()Y:

    -webkit-transform: rotatey(15deg); -ms-transform: rotatey(15deg); transform: rotatey(15deg);

    CubeeDoorotateY(180deg),,.

    rotate(0deg)rotate(360deg),.

  • 358 10. CSS3: ,

    . 10.5. rotate: rotate(75deg), rotateX(75deg) rotateY(75deg) (rotateX X, 90

    , , 90, )

    skew()skew(x, y)(.10.6)XY.-xX,yY.,,skew(x,0deg)skewX(x).,,-:

    -webkit-transform: skew(15deg, 4deg); -ms-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);

    skewX()skewX(x)skew(),-X,XY,X.,:

    -webkit-transform: skewx(15deg); -ms-transform: skewx(15deg); transform: skewx(15deg);

    skewY()skewY(y)skew(),-Y.skew(0deg,y).,-:

    -webkit-transform: skewy(-3deg); -ms-transform: skewy(-3deg); transform: skewy(-3deg);

  • 359CSS3-

    . 10.6. skew: skew(15deg, 15deg), skewX(-15deg) skewY(-15deg)

    skewX(x)skewY(y),skew(x,0deg)skew(0deg,y).,,skew(x,0deg)skew(0deg,y),-,skewX(x)skewY(y)skew(x,y);,-..10.6.

    ,.-,-:

    .enlargen:hover, .enlargen.hover { -webkit-transform: translate(50%, 50%) scale(2) rotate(0deg); -ms-transform: translate(50%, 50%) scale(2) rotate(0deg); transform: translate(50%, 50%) scale(2) rotate(0deg);}

    .-50%,.rotate(0deg),-,rotate,,.,rotate(),,-,.

  • 360 10. CSS3: ,

    0, - . (s ms), rad, grad, turn, Hz kHzs.

    ,transition-property,transform.

    enlargen()-,-,().,,.

    matrix().matrix(),,,..,matrix,.,matrix,:

    transform: translate(50%, 50%) scale(2) rotate(0deg);transform: matrix(2, 0, 0, 2, 100, 172.5)

    CSSmatrix,-.,--matrix.,,-,-,.

    ,transition-property,-,.transitionalltransition,(all)transform.

    transform,transition,.,,,-:

    p { -webkit-transition: -webkit-transform 500ms linear 250ms; transition: transform 500ms linear 250ms; -webkit-transform: translate(0) rotate(0deg); -ms-transform: translate(0) rotate(0deg); transform: translate(0) rotate(0deg);

  • 361CSS3-

    }p:hover { -webkit-transform: translate(100px, 100px) rotate(90deg); -ms-transform: translate(100px, 100px) rotate(90deg); transform: translate(100px, 100px) rotate(90deg); padding: 3px; border: 5px solid #00ff00;}

    -ms-transform,transition,IE10,-IE9,IE10.

    3D-3D-,-.iOS3.2,Android3,BlackBerry10,Firefox10,IE10,Safari4,Chrome123D-,.3D-Opera15-Blink.3D--iPhone2()MacOSXv10.6.

    CSS3D-.,3D-3D-(,).

    2D-,,IE10,3D-.WebKitBlink-webkit-.

    3D-:-,3D-,-,.

    translate3d()translate3d(x, y, z)x,-yz(,).xyz.

    translateZ()translateZ(z)translate3d(),z.z-,.,.

  • 362 10. CSS3: ,

    translateZ(0)-(zoom:1IE6),,,-.

    ,.-,RenderLayer,,.-,2D-,3D-,-60/.

    ,,3D--,,-,(z-),,3D-.,,transform:translateZ(0).

    scale3d()scale3d(w, h, z)(w),(h)z-(z).z-Z.

    scaleZ()scaleZ(z)scale3d(),z-,Z-,.

    rotate3d()rotate3d(x, y, z, angle)3D-.-.(angle)(deg),(rad)(grad).3D-;,,x,yz..

    perspective()perspective(p)-,:

    transform: perspective(100px) rotatey(3deg);

  • 363CSS3-

    perspective,-.

    3D-3D-,,,-,2D-.

    transform-origin,transform-origin.3D-z-.transform-origin,z-,:

    transform-origin: 0 0 500px;

    ,Safari4+MacOSXv10.6iPhone2.0(iPhone),,transform-origin,,.

    perspectiveperspective3D-perspective().perspective,,z-,z=0.

    z=0.z-p/2(z=0),z-p.,,-,,.5001000.

    ,,perspective-origin.

    -3D-,.

    :perspective:600pxtransform:perspective(600px)?

  • 364 10. CSS3: ,

    ,..

    transform-styletransform-style,3D-.3D--.-,,.-3D-,-,--.transform-style.

    :flatpreserves-3d.-flat,.preserves-3d3D-.

    backface-visibilitybackface-visibility,,,.:visible()hidden.,CubeeDoo,,.,,,backface-visiblityhidden.

    CubeeDoo-:

    #board > div { position: relative; width: 23%; height: 23%; margin: 1%; float: left; -webkit-transition: 0.25s; transition: 0.25s; -webkit-transform: rotatey(0deg); transform: rotatey(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; box-shadow: 1px 1px 1px rgba(0,0,0,0.25);

  • 365CSS3-

    cursor: pointer; /* for desktop */}#board.level2 > div { height: 19%;}#board.level3 > div { height: 15%;}.back,.face,.back:after,.face:after { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; border-radius: 3px; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden;}.back { border: 5px solid white;}

    .back:after { font-size: 2.5rem; line-height: 100%; background: 50% 50% no-repeat, 0 0 no-repeat #fff; font-style: normal; box-shadow: inset 1px 1px 0 currentcolor, inset 1px 1px 0 currentcolor, 1px 1px 1px rgba(0,0,0,0.1); color: rgb(119, 160, 215); background-image: url('data:image/svg+xml;utf8,'), -webkit-linear-gradient(-15deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.025)); background-image: url('data:image/svg+xml;utf8,

  • 366 10. CSS3: ,

    y="30" x="20" stroke-width="0" stroke="rgb(119, 160, 215)" fill="rgb(119, 160, 215)">'), linear-gradient(75deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.025)); -webkit-transform: rotatey(0deg); -webkit-transform: rotatey(0deg) translatez(0); transform: rotatey(0deg) transform: rotatey(0deg) translatez(0);}.face { -webkit-transform: rotatey(180deg); -ms-transform: rotatey(180deg); transform: rotatey(180deg);}#board > div.flipped { -webkit-transform: rotatey(180deg); -webkit-transform: rotatey(180deg) translatez(0); transform: rotatey(180deg); transform: rotatey(180deg) translatez(0); box-shadow: 1px 1px 1px rgba(0,0,0,0.25);}

    CubeeDoo,-250.:.CSS,..,background-colorbackground-imageSVG---,-.,SVG::after,.

    ,-.transform:rotatey(180deg)translatez(0);,.,HTML,(back)(face):

    .,,,backface-visibility:hidden;.,,(,,).

  • 367CSS3-

    3D-translateZ(0),-,,,.-:

    -webkit-transform: rotatey(180deg);-webkit-transform: rotatey(180deg) translatez(0); transform: rotatey(180deg); transform: rotatey(180deg) translatez(0);

    3D-.CSS,.-translateZ(),,-translateZ(),.-,.,,3D,.,3D-.

    transform-style:preserve-3d,-,,,3D-.

    ,,.0,25,,0,25.

    -.,-,,-.DOM-.transform:scaleY(0.8),-,...DOM-.DOM-.

    .,-..

    CSS3-,,-.

  • 368 10. CSS3: ,

    ,-,.-,CSS3animation.

    :

    animation-name,-.none,.-animation-name;

    animation-duration-.0s,-.,animation-duration,0;

    animation-timing-function.,,transition-timing-function.,animation-timing-function.ease;

    animation-iteration-count,infinite().-;

    animation-direction-(alternate)(normal);

    animation-play-state:running,paused..,.-running;

    animation-delay.,-.,,10,animation-delay-4s,40%;

    animation-fill-mode,.:

    y backwards.,-,0%;

    y forwards.,,,,,;

  • 369CSS3-

    y both.,forwardsbackwards,;

    y none.,,forwardsbackwards;

    animation,-animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-directionanimation-fill-mode.,,,.

    -.@keyframes.@keyframes,,,,({}).-1()..animation-name.

    ,.-,fromto.:

    @keyframes crazyText { from { font-size: 1em; } to { font-size: 2em; }}

    WebKit-2:

    @-webkit-keyframes crazyText { from {

    1 CSS(IDENT),,(ID)[azAZ09]ISO10646U+00A0(-)-(_).,,..

    2 IE10,BlackBerry,Android,ChromeforMobile,iOS.OperaMini.-,WebKit-Boot2Gecko.FirefoxFirefox16,OperaOpera12.1,OperaMobile-.IEIE10.

  • 370 10. CSS3: ,

    font-size: 1em; } to { font-size: 2em; }}

    from0%,to100%.,,-.0.

    ,,-,-.:

    @-prefix-keyframes rainbow { 0% { background-color: red; } 20% { background-color: orange; } 40% { background-color: yellow; } 60% { background-color: green; } 80% { background-color: blue; } 100% { background-color: purple; }}

    -,,.20,40,60%..-(,,).(,),.

    -.,0100%,.

  • 371CSS3-

    .,,CSS3-.,,.

    ,-.,-.--@keyframes.

    -.,-,10,5-crazyTextfont-size:1.5em,rainbow-.

    ,,-.@keyframes-,:animation-nameanimation-duration.-:

    div { animation-name: crazyText; animation-duration: 1s; animation-iteration-count: 20; animation-direction: alternate; animation-delay: 5s; animation-fill-mode: both;}

    crazyText,-120,-,5,.

    animation-fill-modeboth,font-size1em,0%from5--.

    font-size,-1emanimation-direction:alternate.animation-direction:normalanimation-direction,font-size,1em,.

  • 372 10. CSS3: ,

    20,25(20),font-size,,-animation-fill-mode:both.animation-direction:alternatefont-size1em.animation-directionanimation-direction:normal,2em.,font-size,,.

    rainbow-:

    div { padding: 20px; animation: crazyText 1s 20 5s alternate both, rainbow 4s infinite alternate;}

    ,:,.:visibililityanimation-timing-function.,.

    animation-timing-function,,,.,.,,(ease-in)(ease-out):

    @keyframes bouncing { 0% { bottom: 200px; left: 0; animation-timing-function: ease-in; } 40%, 70%, 90%{ animation-timing-function: ease-out; bottom: 0; } 55% { bottom: 50px; animation-timing-function: ease-in; } 80% { bottom: 25px;

  • 373CSS3-

    animation-timing-function: ease-in; } 95% { bottom: 10px; animation-timing-function: ease-in; } 100% { left: 110px; bottom: 0; animation-timing-function: ease-out; }}

    (-).-40,7090%,.,CSS.

    ,,.-,:0100%.,,left,bottom.

    animation-timing-function,..animation-timing-function,-1.

    HTML,-.CSS-,-,,,.

    . 10.7.

    1 ,-,.

  • 374 10. CSS3: ,

    animation-timing-function:step(x,start).step..,.10.7,:

    .lemming { height: 32px; width: 32px; background-image:url(lemming.gif); background-repeat: no-repeat; -webkit-animation: lemming 1s steps(8,end) alternate infinite; animation: lemming 1s steps(8,end) alternate infinite;}@-webkit-keyframes lemming { from { background-position: 0 0; } to { background-position: 256px 0; }}@keyframes lemming { from { background-position: 0 0; } to { background-position: 256px 0; }}

    ,256,background-position:256px0;.animation-timing-functionsteps(x,start),-,,steps(x,end),,-.

    ,.steps(5,start),20,40,60,80100%,0%,020%,20%,020%.steps(5,end),,0,20,40,6080%,100%.

    ,background-position,-

  • 375CSS3-

    .-.

    CubeeDooCubeeDoo.,.,,,:

    #board > div.matched { -webkit-animation: fade 250ms both; animation: fade 250ms both;}#board > div.matched:nth-of-type(1) { -webkit-animation-delay: 250ms; animation-delay: 250ms;}

    @-webkit-keyframes fade { 0% { -webkit-transform: scale(1.0) rotatey(180deg) rotate(0) translatez(0); } 100% { -webkit-transform: scale(0) rotatey(180deg) rotate(720deg) translatez(0); }}@keyframes fade { 0% { transform: scale(1.0) rotatey(180deg) rotate(0) translatez(0); } 100% { transform: scale(0) rotatey(180deg) rotate(720deg) translatez(0); }}#highscores li.current { -webkit-animation: winner 500ms linear 8 alternate forwards;a nimation: winner 500ms linear 8 alternate forwards;}@-webkit-keyframes winner { 0% {background-color: hsla(74, 64%, 59%,1);} 100%{background-color: hsla(74, 64%, 59%,0)}}@keyframes winner { 0% {background-color: hsla(74, 64%, 59%,1);} 100%{background-color: hsla(74, 64%, 59%,0)}}

  • 376 10. CSS3: ,

    matched(),-fade.matched,flipped(),.,,flipped,,-.,,,-3D-.

    fade().250-.JavaScript,flippedmatched,data-value="0".

    ,.,-current.JavaScript,,,CSS.winner,,-:.-animation-iterations:8;animation-direction:alternate;animation.,.-3D-:,-.

    , CSS-,-JavaScript.

    CSS-.CSS-JavaScript-.CSS,JavaScript.CSS,.

    CSS-JavaScript-,-.JavaScript-,CSS-.CSS,JavaScript,.

  • 377CSS3-

    CSS.,JavaScript,8,-.,,:,,animation-delay,-.15,0,1,2..,,,.

    loaded(-),loaded.

    ,-.,-,.,,,,,!-:-,.-,.CSS--,,.

    ,-.,,16,67.

    API-,-CSS-.,animationStart,animationEndanimationIteration.,--.

    CSS,.11.

  • 11 CSS -

    ,.,-,,-52-,35.-,-,.

    ,.90%rem.95%.

    CSS,,CSS-,99%.99,100%?,,,,..,,,.

    ,

    ,:.(

  • 379

    ).-,,.-(tiny),(xx-small),(small),(medium),(large),(x-large),(xx-large)(huge),-,.-,,,,.

    ,,,.320,480,640960,.,.

    ,-,-.-.,,,.,:.

    ,,-,.,,.DPI,JavaScript.,-,-,.

    27,.

    CSS-columns,.columnscolumn-countcolumn-width.column-width,min-column-width.column-count,max-column-count.

  • 380 11. CSS -

    column-count.,column-width,,column-count,,column-width.--.

    column-gap,column-rule.CSS-column-gap-,-normal,-1 em.

    -.,.,24-,HTCOne:

    columns: 240px 6;

    :,240.iPhone320,,-.19201080,.,-.

    border,,,column-rule,column-rule-width,column-rule-stylecolumn-rule-color,border.column-rule-widthcolumn-gap,.,column-rule-style,:

    p { margin: 0 0 1em;}

    div { padding: 1em; margin: 1em; border: 2px solid #ccc; columns: 240px 6; column-gap: 2em; column-rule: 2px dashed #ccc;}

  • 381

    1-,-,480+4ems,,.11.1-,.

    . 11.1. ,

    :,-,.,,.,.-,.

    column-spanall,.column-span:all;,-,,-.

    -.column-fill()fill(balance,).,column-spancolumn-fill.

    ,width,column-width,column-gapcolumn-rule-width.

    1 ,OperaMini,IE10WebKitFirefox.

  • 382 11. CSS -

    -,.,-,,,.

    ,,,,.

    border-image.,,-.

    border-image,-,,,,..

    .11.2,,border-image-.

    . 11.2. ,

    iOS,-,.11.2..,.CSS-border-image,,,1010200300.

    ,.11.3,-,.11.2,,,()-.

  • 383

    . 11.3. border-image, , ,

    top (T), right (R), bottom (B) left (L) ,

    (T,R,BL),-.,-(TB)(RL).-,,(1,2,34),,.border-image,border-image-source,border-image-slice,border-image-width,border-image-outsetborder-image-repeat.

    :

    -prefix-border-image: / ;

    ,,border-image,,.,-.

    ,.,-,,-,.

    ,..9,-border-style:

    .button { border: solid;}.stamp { border: solid;}.arrow { border: solid;}

    border-style,nonehidden,.

  • 384 11. CSS -

    border-image-source,,border-image-source,URL-,URI-.,.11.3,-,,border-image-source:url(stamp.gif),border-image-:

    .button { border: solid; border-image: url(button_bi.png) ...}.stamp { border: solid; border-image: url(stamp.png) ...}.arrow { border: solid; border-image: url(arrow.png) ...}

    -,:,base-64-,GIF-,JPEG-,PNG-SVG-.

    border-image-sliceborder-image-slice,,-,-(..11.2).border-image-sliceborder-image,.11.3M,.

    border-image-slice,,(-TRouBLe).,,,:,(..11.3).-,,,-.(-)border-image.

    ,border-image-slicefill

  • 385

    ,.fill-,,,.,,border-image-repeat.

    ,5,9,0,520.,.-border-image-slice:5pxfill;,border-image-slice:9px;border-imageslice:05px020pxfill;.,fill:

    .button { border: solid; border-image: url(button_bi.png) 5 fill...}.stamp { border: solid; border-image: url(stamp.png) 9 ...}.arrow { border: solid; border-image: url(arrow.png) 0 5 0 20 fill...}

    .-,.,.

    border-image-widthborder-image-width-.borderimage-widthborder-image,border-width.,border-width,-3,,border-width.

    ,auto,-border-widthborder,border-image:

    .button { border: solid 5px;

  • 386 11. CSS -

    border-image: url(button_bi.png) 5 fill...}.stamp { border: solid 9px; border-image: url(stamp.png) 9 / 9px ...}.arrow { border: solid; border-width: 0 5px 0 20px; border-image: url(arrow.png) 0 5 0 20 fill / 0 5px 0 20px...}

    ,.11.31,2,34,.border-image-width,border-image-slice,..,border-image-width,().

    border-image-sliceborder-image-width-.-border-width,-.

    !border-width.border-image-width-,box-sizing:border-box;.

    border-image-outsetborder-image-outset,.0.

    PNG,background-color-.:background-clip:padding-box;-border-image-outset..,,box-shadow,,:

  • 387

    .stamp { border: solid 9px; background-color: #dedeef; border-image: url(stamp.png) 9 / 9px / 12px ...}

    border-image-repeat,,,.,,,.,-,,,.,,,-,.border-image-repeat.

    border-image-repeat()/,,,(TRouBLe).,.stretch,-,,repeat-().

    ,,,-.round(),-,,,-.,space,,,-,-.(,).

    stretch,round.(stretch),,-.(repeat),,,,.(round)-,,.

    round,repeat1.

    1 WebKits-roundspace,repeat(,-,).

  • 388 11. CSS -

    .,.,,.-,,,,:

    .button { border: solid 5px; border-image: url(button_bi.png) stretch 5 fill; }.stamp { border: solid 9px; background-color: #dedeef; border-image: url(stamp.png) round 9 / 9px / 12px;}.arrow { border: solid; border-width: 0 5px 0 20px; border-image: url(arrow.png) stretch 0 5 0 20 fill / 0 5px 0 20px;}

    stretch,.

    border-image,.,border-image..WebKit-,Android4.2iOS5.1,Opera12.1.border-imageIE(IE11):

    .stamp { background-color: #ccc; border: solid 9px transparent; -webkit-border-image: url(stamp.png) 9 / 9px / 12px round; -o-border-image: url(stamp.png) 9 round; border-image: url(stamp.png) round 9 / 9px / 12px; }

    .button { border: solid 5px transparent; -webkit-border-image: url(button.png) 5; -o-border-image: url(button.png) 5; border-image: url(button.png) 5 fill; }

    .arrow { border: solid transparent;

  • 389 flexbox

    border-width: 1px 5px 1px 20px; -webkit-border-image: url(arrow.png) 1 5 1 20 / 0 5px 0 20px stretch; -o-border-image: url(arrow.png) 1 5 1 20 / 0 5px 0 20px stretch; border-image: url(arrow.png) stretch 0 5 0 20 fill / 0 5px 0 20px; }

    ,,..-,-.

    flexboxflexbox(flexboxlayoutmode)-,flexbox-,,,,flexbox-(.11.4).

    flexbox-.-,-,..

    CSS().flexbox-(flex-direction,flex-wrap,flex-floworder),(flex-grow,flex-shrink,flex-basisflex),(justify-content,align-items,align-selfalign-content,display).

    flexboxdisplay :flexinline-flex.flexinline-flex(IE10-ms-flexbox)display,1.flex,

    1 ,,-display,-.WebKit-display:-webkit-flex;,IE10display:-msflexbox;.OperaFirefox20+-.

  • 390 11. CSS -

    -.,,,..,HTML-.-CSS,-.

    ,.11.4,HTML:

    A B C

    ,,?.-:

    article { display: -webkit-box; display: -moz-box;

    . 11.4. HTML

  • 391 flexbox

    display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex;}

    .-,,-,-;-,,.

    ,-,.display,,:WebKit-Firefox17-webkit-box-moz-box.,ChromeBB10,IE10Firefox1719.FF20+,Opera,IE11betaOperaMobile.IE102012-tweener,,-IE11beta.

    .-...flexbox.

    , flexbox flexbox-, .

    .-.,-,,.-flexbox,,--.,-(IE11,Chrome29+)OperaMobilePresto(Opera12.1),,,-.--.

    ,-flex-direction,

  • 392 11. CSS -

    flexbox-.,row,.row-reverse,columncolumn-reverse.

    flex-.-,flex-wrap,,nowrap,wrapwrap-reverse.

    flex-flowflex-directionflex-wrap,flexbox.

    ,-,order.order,flexbox-.-flex-direction:row-reverse;:

    article { display: flex; flex-direction: row-reverse;}

    order:1;-,-,,,.,-order:1;-,,:

    article { display: flex;}div:nth-of-type(2) { order: 1;}

    -(A,BC),,B,BAC.

    div:nth-of-type(2) { order: 1;}

    ACB.

    flexflexflex-grow,flex-shrinkflex-basis.-flex.

  • 393 flexbox

    ,,.flex,flexbox.flexbox-,flex,,flex.

    flex.flex-grow,-flexbox.(,)-flex-shrink,flexbox,.flex-basis,-width,,flex-shrinkflex-grow.flex:110;.

    ,AB,BC,(.-):

    div:nth-of-type(1) { flex: 4;

    }div:nth-of-type(2) { flex: 2;

    }div:nth-of-type(3) { flex: 1;}

    -flexbox,.,,,.,-,,-,..:

  • 394 11. CSS -

    @media screen and (min-width: 600px) { article { display: flex; flex-direction: row; } article > * { flex: 1; } aside { order: 1; } article > div { flex: 3; }}

    ,,,-,,-.flex:1;,flex:3;.,aside,divfooter20,6020%.,display:flex;-,(flex-direction).

    ,,-flex-direction:column.-:

    @media screen and (max-width: 600px) { article { display: flex; flex-direction: column; }}

    ,-,,-.

    @supports-(,-@)@supports-

  • 395 flexbox

    W3C,FirefoxOpera.-@supports,flexbox,,,.

    ,flexbox-.CSS-,,flexbox,CSS-display:flex;.@supports@media,--CSS:

    @supports (display: flex) and (background-color: red) { h1 {color: green;}}

    ,,display:flex;,background-color:red;,-...@media:

    @media screen and (-webkit-transform-3d) { h1 { -webkit-transform: translateZ(0) rotate(5deg); -webkit-animation: makemedizzy 1s infinite; }}

    WebKit-,3D-,-.,,-.WebKit-,-CSS-transform1.,,:

    @media screen and (transform-3d) { h1 { transform: translateZ(0) rotate(5deg); animation: makemedizzy 1s infinite; }}

    1 Opera,Blink,OperaPresto,-WebKit-.

  • 396 11. CSS -

    ,transform-3d.

    @media,-,,.@supports.@supports,.@media-.

    ,@supports,,-,?@supports,,,flexbox,,,-,-.

    .-,flexbox.-CSS2.1,flexbox.

    flexbox,,,-.-,,,,.

    :,,-,.,100%,-,440640.,:

    header img { max-width: 100%; height: auto;}

    ,-,.(width:auto;),.widthmax-width,-

  • 397

    ,.

    ,-min-width:100%width:100%;.--,,-,,.-height:auto;.

    ,,.,,,.DPI,-,-.,,,,,.

    Retina: iPhone4,2009,-RetinaDisplay,326(DPI).iPad,2012,264DPI.DPIRetinaDisplayMacBook.

    iPhone320480 iPad7681024.Retina-64096015362048.,,1,4,-.

    RetinaDisplay.Apple,.--DPI.-Apple.-,iPhone,,..

    iPhone4-RetinaDisplay,.

    ,-,CSS.,,.

  • 398 11. CSS -

    ,CSS.()CSS.-,.

    ,DPI,.DPI-.,4-800,:

    800/4=200/.

    DPI200/-DPI.,,iPad,-7681024,-()DPI15362048,7,751,DPI132264:

    1024/7,75=132/;

    2048/7,75=264/.

    DPI,,.,,.,,iPad,-,,,iPad.

    ,,JPEG,PNGGIF,72/.,-,.

    DPI.(,,),-.

    :DPI-DPI,-,,,,,-.

    1 ,9,59,7,-.

  • 399

    API-,,.-JavaScriptCSS,,,.,(,?).

    .JavaScriptnavigator.connection.type,UNKNOWN,ETHERNET,WIFI,CELL_2G,CELL_3GCELL_4G:

    var connection, speed;var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {'type':'0'};

    // switch(connection.type) { case connection.CELL_3G: // 3G speed = 'medium'; break; case connection.CELL_2G: // 2G speed = 'slow'; break; default: speed = 'fast';}

    document.body.classList.add(speed);

    -:

    @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-min-moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2/1), screen and (min-device-pixel-ratio: 2) {

    body.fast { background-image: url(../hidpi/bgimg.jpg); }}

    ,-1024.

    background-size,-,,

  • 400 11. CSS -

    Retina.background-size,9.

    72,96144DPI.Retina,,,,,,-.

    100100100100,200200Retinabackground-size:

    .icon { -size: 100px 100px; background-image(../lodpi/icon.jpg);}

    @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-min-moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2/1), screen and (min-device-pixel-ratio: 2) { .fast .icon { background-image(../hidpi/icon.jpg); }}

    ,-,.

    URI- URI-,HTTP-.URI-,.

    URI-,,.,,URI-,,HTTP-(,,DNS-).-,,,DNS-HTTP-..

    ,Twitter,,,,,,().

  • 401

    Twitter-,.Twitter,.TwitterURI-.,-.HTTP-,URI-HTTP-.

    ,.HTTP-DNS--..

    ,-,.,background-position,.,-..11.5.

    . 11.5. ,

    steps()animation-timing-function,-10.

    ,,.11.6,CSS:

    .psy { width: 22px; height: 40px; background-image: url(sprite.png); animation: dance 4s steps(23, start) infinite, movearound 9s steps (23, start) infinite 45ms;}

    @keyframes dance { 0% {

  • 402 11. CSS -

    background-position: 0 0; } 100% { background-position: 506px 0; }}@keyframes movearound { 0% { transform: translatex(300px); } 100% { transform: translatex(300px); }}

    . 11.6.

    .2240.-4522,-,.,-.,40.

    HTTP-,-,,,.--.,,1024.

    image-set()Safari6Chrome21image-set(),-:

    body > header { background-image: url(images/header.png); background-image: -webkit-image-set(url(images/header.png) 1x, url(images/header_2x.png) 2x); height:60px;}

    CSSWorkinggroup,.,

  • 403

    .,,srcset,.

    ,.,CubeeDoo,.11.7,CubeeDoo.

    . 11.7. , CubeeDoo

    10000.,,,-.-,CSS.,,,,,HTTP-.

    ,HTML,-::before/::afterSVG-URI-.

    ,.-.

    CSS-: JPEG

    :.-PNG-,.PNG-,JPEG-.JPEG-,-,PNG-.JPEG--,PNG-JPEG-,.

  • 404 11. CSS -

    CSS-JPEG-PNG-,JPEG-.JPEG-PNG-,-,:

    div { background-image:url(images/smallerFileThanPNG.jpg); -webkit-mask: url(images/partToShow.png);}

    -HTTP-,.,-,PNG-551.PNG-JPEG-,88,4,92PNG-.

    WebKit-,W3C.-,WebKit;WebKit-.

    Client-Hints-.,,,.

    Client-Hints,.,,,dpr,dwdh,-,:

    Client-Hints: dh=1280, dw=768, dpr=2.0

    ..

    -.UA-,UA-,.UA-,,-.,Client-Hints,,,.

  • 12

    -,.,,.

    ,,,,.,,.-.

    ,,,,-,,,-.,1.,..,.-,-.,,,.,,-,.

    1 ,415.555.1212,3,,-.

  • 406 12.

    ,-.

    ,.-,.,.,,,--.,,,,-.,,,.

    ,-,,(,,,),,,.,,,.-CSS3,HTML5-API-JavaScript-InternetExplorer.iPhone,BlackBerry,Firefoxmobile,AndroidmobileChrome,.--WebKit-,IE10,Opera,FirefoxAndroidBoot2Gecko,.HTML5,,,.CSS3,.

    ,

    -,--.,,.,

  • 407,

    ,,,,-,,.

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

    ,,,-.-,.

    .,.-.,,,,,.

    -.Twitter,Facebook,-,-,,-.,15,.

    .,,,,-,-.-.,, .

    .,--,,-..

    .,

  • 408 12.

    .:,,1.

    .-,,,.

    ,..

    Apple(SteveJobs),-iPhone,AppleiPhone.Apple,,,.-iPhone,iPodiPad..Apple,Android,BlackBerry,WindowsPhone,FirefoxOS--.

    ,,-:?,-??

    -,.-:?:,(-)?

    ,-,.-,.

    :,.

    1 -,,.,iOS,,-.

  • 409

    .,,,.-.

    : ,,-,,.-,-,.

    -.-,-,.

    ,.-,-.-,.

    ,.,,6,LocalStorage.-.

    ,,,-,:LocalStorage,,,.cookie-,,LocalStorage,.

    ,,..,.

    ,--iPhone..

  • 410 12.

    .-/.

    , , . , .

    /,iPhone,DropboxYahoo!.,,-Yahoo!Google.

    ..,-,,-.,,.

    : ,-.,,.

    ,-.CubeeDoo.-,,.,.

    -,,,-.-,.,,-.

    ,.-,.

  • 411

    -,,,-,.,.

    / - , , .

    ,,.-,-()1.5.play()-.-,.

    ,.,,-.iTunesStore,Netflix,Flickr,YouTube--.-.,,-..,.

    ,,.(),,-.

    --.,,

    1 ?-,,,-,,.

  • 412 12.

    ,-.-LocalStorage(.6).-.

    -,.,100.,.,-.

    -(),,.(Done),.-.

    -,,,,,-,.-,.

    ?,-,,-,,.,.

    ,,...,-.-.-,-.,,-.

    ,--..,,.,.-.,,.

  • 413 :

    , , , .

    8020.,(80%)-,,(20%).,,-,().,,,,,,.

    ,,,.-.-.,-.,-.,-,.-,,.

    .

    :

    -,-.-,()-.-.

    ,.,

  • 414 12.

    .,.,,..-,25%-.-.

    416,iPad.iPad256.Android-,,768.

    ,--,.-,-,.,,-,.,,.,-.,,-.

    HTC768,-222,,..-,..-,.

    ,-,-.

    -:,,.

    ,,,

  • 415 :

    1024,.-.,-.,,-.

    -.--,,,!

    -.-Chrome(.12.1).

    . 12.1. Chrome

    Chrome,.,Chrome-(ViewDeveloperDeveloperTools( )).Timeline(),TimelineMemory()(..12.1)1.,(DeveloperTools()).-,,..

    1 SafariDeveloperTools,OperaDragonFly,FirebugtheFirefoxadd-onIEF12,IE11.

  • 416 12.

    ,DOM-.

    ,,-,80,,.,,-.,..

    .,,-,.-14.

    TimelineMemory,,-.,-,-.

    ,,.-,,Wi-Fi.-14.

    .,--,,-.

    -,.,-,-,More(),i-.

    ()-.-,,-.

  • 417 :

    :,-,,.,-YouTube,Googl,,,-,,.

    ,,,,,--.

    ,IKEA,,.,,,,,,.

    .,,,,,.-.

    ..-,.,.

    ,,,:.,.(),,.(UI)-(UX),-.

    ,.--,,

  • 418 12.

    ,.,.,.

    -.,,,,.-,,,,.,,GoogleGlass.

    --,.

    ,,,.-.

    ,.-,,.

    ,-,-:,.,,,,-.-,.,-,.

    ,-,.-.,-,..-.-:!

    WebKit-

    -,,.

  • 419 WebKit-

    ,Apple,Android,ChromeAndroid,BlackBerry10iOS.2,-.

    iOS,:

    ,--,,.,,-,,.iOSWebKit--,--.

    ,-,,,.-,-.

    -,,-.,,20(.12.2).

    . 12.2. iPhone

    ,-.,-.,-,.

    iOS,,-(..12.2).-default,

  • 420 12.

    blackblack-translucent,(),(rgba(0,0,0,0.5)):

    ,-web-app-capable.

    contentapple-mobile-web-app-capable-yes,-,.,.,,-,.

    black-translucent50%--,,,,-.

    CubeeDoo..,CubeeDoo,,-,.

    ,,(.12.3).,SafariiOSFirefoxOS,---60.ChromeURL-,,-,.Chrome,NexusGalaxy,,.

    . 12.3. Safari () Android Chrome ()

  • 421 WebKit-

    -,,-.,7, iPhone(.12.4)CSS.

    . 12.4. , iPhone CSS

    ,-Safari,.,-JavaScript.

    Safari1,-window.scrollTo(0,1);.Safari:

    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

    function hideURLbar() { window.scrollTo(0,1);}

    (UX): ,,,.,-.,,,-.

    -.,

    1 iOS7.

  • 422 12.

    .,-.-,-.

    Apple..12.4,.-AppleiOS,,.iOS3030-,,,4444.-Apple2020.

    Android48--(48DP),-9(0,35),,,710-.

    ,48DP,-,,7(48DP).-8DP.

    .4448,,-.,.

    ,-.-.,,-,-,.

    CubeeDoo,,,.?-.99%,.,-.,-,-.

  • 423 WebKit-

    (4444,2222,,,-).

    ()..-.

    .,..

    ,--,,.,Safari-iOS,-,,,.

    ,,:

    URL-,.-,.

    ..-.(),-.

  • 424 12.

    -.iOS6.,relprecomposed:

    .,.:(,CNN),.

    iPhone(iOS7)5757-10.iPad747412.iTunesStore512512.

    AppStore,:Apple,,,,-.AppStore,-,-Apple.

    ,.,,.,.-,,.,-.,!

    ,.,!

    ,,,.,-(.4),,.

  • 425

    ,-..,,,-.,,,,.

    ..

    ....

    .

    . ,-..

    . -.,,,,,.

    . -,.,-.

    ,(,,-)-...,,.

    ,,.,-,,.

  • 426 12.

    -,,,..-CSS,:hover,,,.

    .12.5,Dropdown Pick Me,.,.,,-,,-.

    . 12.5.

    ,-,.,-.,-,,1,-DOM-,.

    ,,,,-.

    1 ,Google-.

  • 13

    ,,,.-,.-,,.-,,,,.

    !-23.,Bluetooth.-,.,,.

    ,,.-980,,-,.

    @viewport,,.:

    content.--,.

  • 428 13.

    .-,.

    CubeeDoo,,.-,,.-(,,-):

    .:.,-.,,,.-:

    -width=device-width.(),.,550,:

    ,--..,,.

    @viewport.viewportHTML-,,-CSS.-..(Opera,IE10WebKit)--@viewport.@viewport,viewport.

  • 429

    ,,,.-DOM-addEventListener.(),,.

    ,,,-.,,:-,.-,-.

    .,iPad11-.,,-:.

    ,300500,,,-,..

    ,-!.?-.

    -.-.-,,.

    .44,22,20(10).

  • 430 13.

    ,,,.,.,,,,-,.

    ,,-.,,.,,.

    -,.,.iOS--.,,-,,.-.

    , .(),,.,.-,,.

    20-.,,.-.-.,-.

    ,-,..,.-,,,..,,.

  • 431

    -,.,,:-,,Apple,-Apple,-,,Microsoft-,ChromeFirefox..

    ,Apple,,,.:Apple.-..-!Microsoft(pointerevents)W3C1.

    CSS-pointer-events,-,,().JavaScript,-,mouseovermouseout,pointerdown,pointerup,pointercancel,pointermove,pointerover,pointerout,pointerenterpointerleave.,,-,,,.IE10MicrosoftMS,,pointermoveIE10MSpointermove,IE11.

    ,.,.,!-,.preventDefault().

    -,.

    1 http://blog.jquery.com/2012/04/10/getting-touchy-about-patents/

  • 432 13.

    ,AndroidBrowser,Chrome,BlackBerryBrowser,OperaFirefox,iOStouchstart,touchend,touchmovetouchcancel.TouchEvent,changedTouchesTouch.

    Touch,pageX,pageY,screenX,screenY,clientX,clientY,targetidentifier.TouchList.TouchEventtouches,targetToucheschangedTouches,altKey,metaKey,ctrlKeyshiftKey.

    ,-.,.,touchstart.touchmove.-,touchend.touchcancel,,,.

    ,,,?-.CubeeDootouchcancel-:

    document.addEventListener('touchcancel', function() { if (!qbdoo.game.classList.contains('paused')) { qbdoo.pauseGame(); }});

    ,.(LukeWroblewski)TouchGestureReferenceGuide,,.().

    -,,,-.

    ,-:,,,-.,,.

  • 433

    ,,.,-,,.JavaScript:

    var isTouchEnabled = 'ontouchstart' in window || 'createTouch' in document || (window.DocumentTouch && document instanceof DocumentTouch);

    isTouchEnabled,,-,,,-,--.

    -PhantomLimb.

    - -- .-.-,-.

    .,,-tap-highlight-color..transparent,-,:

    #content a { -webkit-tap-highlight-color: #bada55;}#board a { -webkit-tap-highlight-color: transparent;}

    ,,#bada55,-,,.

  • 434 13.

    -.WebKit--webkit-user-select:none;.user-selectDOM-,,none,,-,.

    pointer-events:none;-.,,,-,DOM-,.

    ,,,.-,-,touch-callout:none;:

    img {-webkit-touch-callout: none;}

    -,CSS.,.

    ,-.CSS.-,-touch-action:none;,:

    .active #board { -ms-touch-action: none; /* */ }

    :JavaScriptpreventDefault()?,.CSSpreventDefault().CSSJavaScript.400,

  • 435

    ,,,,..

    onTouchEnd,300500,.,-,300500..-(-).

    ,,..100200,.

    CubeeDoo,.300,,.,-,,,,.

    -,.:-,-.-touchend.-JavaScript,click,touchend.touchend,,,(click),3005001.

    ,,onclick,-touchend,300.,,,touchstartpreventDefault.-:

    1 FirefoxChrome,,,500.

  • 436 13.

    eventHandlers: function() { if ('ontouchstart' in window || 'createTouch' in document || (window.DocumentTouch && document instanceof DocumentTouch)) { qbdoo.btn_pause.addEventListener('touchend', qbdoo.pauseGameOrNewGame); qbdoo.btn_mute.addEventListener('touchend', qbdoo.toggleMute); qbdoo.clearScores.addEventListener('touchend', qbdoo.eraseScores); document.addEventListener('touchcancel', qbdoo.pauseGameOrNewGame); } qbdoo.btn_pause.addEventListener('click', qbdoo.pauseGameOrNewGame); qbdoo.btn_mute.addEventListener('click', qbdoo.toggleMute); qbdoo.clearScores.addEventListener('click', qbdoo.eraseScores); qbdoo.themeChanger.addEventListener('change', qbdoo.changeTheme);},

    clicktouchend,.-,,.-preventDefaultstopPropagation.,,,,.

    .-,,,-touchend.touchend-,ChromeAndroid.,,.

    ChromeAndroid,-.,.,,-().

    ,.

  • 437

    ,,.,.-,,,CSS,JavaScriptHTML5,,.

    ,,JavaScript.,.-deviceOrientation,,.

    .,,-(/c2),(X,YZ),.devicemotion:

    window.addEventListener('devicemotion', function( ) { // });

    ,,,,.,(X,Y,Z)(T).compassneedscalibration,,.-,8:

    window.addEventListener('compassneedscalibration', function( ) { // , // });

    (/)-(X,YZ).-,,-.deviceorientation,:

    window.addEventListener('deviceorientation', function( ) { // });

  • 438 13.

    ,deviceorientation,(0360),(9090)(180180)-Z,XY.,,,,,deviceorientation-.

    ,,,.?-,??

    API-(NetworkAPI)navigator.connection.typeunknown,ethernet,wifi,2g,3g,4gnone.:WIFI,CELL,CELL_3G,CELL_2G,CELL_4GUNKNOWN.API.-,-.

    API,-.,,,,-.,,.navigator.connectionbandwidthmetered,change.

    navigator.connection.bandwidth0(),().navigator.connection.meteredtruefalse.true,,--.,,,,cookie-.

    :

    navigator.connection.addEventListener('change', function() { // . bandwidth});

    ,connection:

  • 439

    var connection = navigator.connection || navigator.webkitConnection || navigator.mozConnection;if (connection.bandwidth != undefined) { if (connection.bandwidth

  • 440 13.

    -,

    iOS,HTML-,-.AppleWeb.app.Wep.app-,-,-.-.,API-HTML5,-,,,-.

    -.,-,HTML5,CSSJavaScript-.

    ,HTML5,CSSJavaScript,,--.-,(HTML,CSS,JavaScript),-..

    PhoneGap Apache CordovaApacheCordova,PhoneGap,-.PhoneGap---.

    PhoneGap-,,.

    ,,getUserMedia()-GoogleChrome,-.PhoneGapJavaScript,.--PhoneGapJavaScript,,

  • 441

    ,.

    AdobePhoneGapBuildCordova-,SDK.

    Sencha TouchSenchaTouch,2.0,iOSAndroid.Windows,Mac.-Sencha.

    Appcelerator TitaniumAppceleratorTitanium-iOS,BlackBerryAndroid.Titanium,-JavaScript.TitaniumJavaScript.-AppceleratorTitaniumStudioIDE-.

    (IDE).Chrome:Chrome(,),.--,.

    ..,,.

    ,,..,,.,,,-.

    ,.,.

  • 442 13.

    ,:,,.,,.,,,.

    ,..,,-.

    ,.,-1%,.,,.--.

    .,..

    .,.

    ,,-.,.,-,iOS,iPodtouchversions,BlackBerry(10),Windows8,Android-2.34+.

    ,..Android,-.-eBay.,.,..

    .,,.Samsung,BlackBerry,NokiaMotorola

  • 443

    ,,,.Apple,,,,,.

    ..-..

    -,,.,1.

    ,,,...-..

  • 14 ,-,,,.

    -,,-,PentiumIII1999.

    ,,,.

    1.-,-:,,?

    ,,.,API-,,-,.,,-.

    ,,,,.-24.

    ,GPS.,,,

  • 445

    ,.,.

    ,,,,,-..,,,-(-).:,-.

    -..JavaScript.-AJAX-.JavaScriptCSS.,,,WebGL,,-,WebGL.,WebGL.

    ,.-AMOLED-,,.AMOLED(active-matrixorganic light-emittingdiode)-,.,.-,.,-,,.

    ,,.,,,,.,.-,,,,JavaScript.-.

    JPEG-PNG-JPEG.,.

  • 446 14.

    .,-.,-,-.JPEG,GIF-PNG-:WhoKilledMyBattery:AnalyzingMobileBrowserEnergyConsumption1(-:)JPEG-.

    JPEG-,.-..,-.,,,.

    JavaScript,-.JavaScript.,JavaScript.

    ,-,-,,,JavaScript.,,,.

    ,,,,JavaScript.AJAX--,.JavaScript.JavaScript,JavaScript.JavaScript,XMLHttpRequest,-.-JavaScript.JavaScriptsetTimeout..

    1 WhoKilledMyBattery:AnalyzingMobileBrowserEnergyConsumption.NarendranThiagarajan,GauravAggarwal,AngelaNicoara,DanBoneh?andJatinderPalSingh//http://mobisocial.stanford.edu/papers/bonehwww2012.pdf,.4150.ACM(2012).

  • 447

    ,JavaScript--.JavaScript!JavaScript.

    ,jQuery,,/JavaScript.,first,-jQuery,:

    $('ul li:first').addClass('first');,:

    var firstLIs = document.querySelectorAll('ul li:first-of-type');

    for (var i = 0; i < firstLIs.length; i++) { firstLIs[i].classList.add('first');1}

    34-HTTP-.34,-,,jQuery,,jQuery,().,,42.,GPS,.

    JavaScript.-,,-,.

    CSS-.querySelector()query-SelectorAll().:-addEventListener().-.-webkit-overflow-scrolling:touch.,-..-,,-,HTTP-,.

    1 classList,IE10,Android3,iOS5.2 http://mobisocial.stanford.edu/papers/boneh-www2012.pdf

  • 448 14.

    ,-,,,.,.Facebook,TwitterPinterest15,-,,,..

    ,,.,,,,.(,Facebook),.

    .,..

    -,.,.5-.12-.

    -,.15,.23,,-,-.

    ,.,,.,.

    ,,.,.,--

  • 449

    -.,,.

    .,.,,-.-(Viewscanvas)GPU.,,.,,-,.-,.

    .,..,transform:translatez(0);,:

    * { transform: translatez(0);}

    ,,,.-.,,:

    .spinner { transform: translatez(0); animation: spin 1s linear infinite;}@keyframes spin { 100% { transform: translatez(0) rotate(360deg); }}

    ,3D--.--,-.,.

  • 450 14.

    .-JavaScript.

    -.,.-,,DOM-.--.

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

    .,-.-,-,.,16,67.,-.

    ,(-).-,,.-DOM-,.

    -,-,,-,-.

    , , , CSS- (, ), , , - , WebGL, , - , .

  • 451

    -..-CSS.DOM-,.

    ,-,,DOM-,,,,-,JavaScript.

    ,,CSS-,.

    .,cssText,style:

    myNode.style.cssText += "; left: 50p%; top: 0;";

    DOMDOM-..,-,.,.

    documentFragment.,display:none,,.:.,,,,.

    ,-DOM-,CSS-.

    DOM-,.DOM-,-.,.

    ,,,,.,position:absolute;,position:fixed;transform:translatez(0);.

  • 452 14.

    ,(InternetserviceprovidersISP).-,,.,,-,,,,,EDGE3G1.,-,Wi-Fi.

    .-..,,3/4G,.-.

    --.--,HTTP-DNS-.StarbucksWi-Fi,-.,-,,.

    HTTP-,,-.

    -,,,-.

    ,,Expires.-,JSON-,-CacheControl,.

    1 .http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

  • 453

    JavaScriptJavaScript.-,,JavaScript,HTTP-,,:(-),,-().:-,,.

    JavaScriptgzip.,DNS-.

    CSS.,Sass,SCSS-,.-.,--.,gzip.

    .,.HTTP-,.

    ,.,,.,.,-1024.

    .gzip,,,:.

  • 454 14.

    URI SVGHTTP-,URIURI,.URI,.HTML-.,HTTP-.

    CSSURI-,,,url().:

    a[href^="mailto"] { background: url(data:image/gif;base64,R0lGOYLCVDFCrKU-data-uri-code- UhwFUUE1l) no-repeat right center; padding-right: 25px;}

    HTML,:

    URI.URI.URI

    33%,.()gzip.--.,URI,HTTP-.URIPNG-,-HTTP-.,1.

    URI?.,,URI2,,,,.URI

    1 .http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to.2 CSS-CompassURI

    ..

  • 455

    1,-,.-,,,,Twitter,URI.

    ,,..-,..HTTP-.

    ,-,,,...,HTTP-.HTTP-,,,.

    .IcoMoon,--,-.,,.SVG-.

    ,--,,weinreAdobeEdgeInspect-,BlackBerry.

    --,WebPageTest.org(.14.1).-(34).

    ,DNS-(),,()

    1 -,.

  • 456 14.

    ().-,-()onload.

    . 14.1. WebPageTest.org

    ,-.14.2,.JavaScript406DNS-593-.,,.show_ads.js22432.-,-,,.

    . 14.2.

  • 457

    ,.

    .,.,.,,.1,24--,Android-3-.,-.

    ,-,.CSSJavaScript.,.

    , ,-,CSS-,JavaScript-,JSON-SVG-..-,.

    .GIF--PNG8.GIF-,CSS-.,-PNG8,PNG--,ImageAlpha,-PNGCrush.

    JPEG-,4060%8099%.

    gzip -gzip!,.-.,-,gzip.

  • 458 14.

    ,,,.

    ,,-..,.-.

    Network(),.gzip.,.-,,.

    ,-,(.14.3).

    . 14.3.

    Network()-,.

    .,.-ClownCarTechnique,Picturefill-,Sencha.ioSrc,-.-.-,.

    JavaScript,,.13,,-JavaScript.IE8.jQuery34,HTTP-.,,,

  • 459

    ,.-,.

    -.,,,,,HTTP-,,.

    cookie-,,,cookie-.cookie-.cookie-,,,cookie-.,,LocalStoragecookie-,LocalStorage,.

    ,,singlepointoffailure(SPOF).,-..14.2,show_ads.js-2243,2!,-,,.-,,,.

    , -DNS-HTTP-.-.,-,.

    ,JavaScriptCSS,contentdeliverynetwork(CDN).HTTP-,CDN--DNS-,

  • 460 14.

    HTTP-.HTMLCSSJavaScript,,,.--Bing.

    (6,,LocalStorage )m.bing.com.CSSJavaScript.-URI.Bing,HTTP-.200..-Bing.Local-Storagecookie-m.bing.com15.

    BingHTML-.JavaScript,,BingCSS,JavaScriptURICSS,JavaScript.Bing-cookie-.cookie-,,,,,-.,HTML-,,,.

    -HTTP-HTML,CSS,JavaScript.

    1. CSSJavaScript.

    2. LocalStorage.

    3. cookie-.

    4. cookie-.

    5. cookie-.

    6. LocalStorage.

    - , , - DNS- HTTP-, iOS.

  • 461

    LocalStorage.,,,.

    -.,,.,,.-,..

    .1997PentiumII256.2013()4.iPhone3G128,iPad256,HTCInspire768.5121-1.,2013,,,1999.

    512--,,(-),-.,(,).,,,,.-.-,Twitter,GPS,Facebook,,,,,,,AngryBirds..512,,200.,-.

  • 462 14.

    .,Twitter,FacebookMail.

    ,-.,,-,,.,-.-,-.

    CSS-(YSlow)(PageSpeed),-,,,.

    gzip,.,.-.,1024,.-,,-,.

    .ImageAlphaImageOptim-PNG-PNG-.-Sencha.io,-,().

    -,,,-.,-..,.,,,,.

    ,.:?

  • 463

    .,.

    ,,,-.,-...-,.-,,-.,.,,.-,-,,,..-,,-,HTTP-.

    CSSCSSHTTP-.-HTTP--,,-.

    ,CSS,HTTP-,,,.

    CSS1.PNGJPEG-CSS.

    CSS.,CSS,-,,-CSS.

    CSS-.,-

    1 CSS.!

  • 464 14.

    .,--,,.

    CSS-,,,,,.PNG,JPEGGIF,,-CSS,,(HTTP-).,,,,,.,-.

    CSS-,.CSS,140,JPEG,HTTP-.,,-,.

    ,140CSS,HTTP-,.,,.,,,CSS.,,.,-.-,,,..

    CSS-,,DOM-.

    ,...-..-27,.,,CSS,-,16,67,.,.

  • 465

    ,-,.translate3d!,,..,,,-,transform:translateZ(0);.

    :

    ., ,,,,,.-(viewport),-.?,,-,,.

    DOMDOM-.--..,..DOM-(),.-,CubeeDoo24.24.

    CubeeDoo....,,,.-,.

  • 466 14.

    ,,,.,,,.

    ,,.--().Facebook76-.,,--.,.

    -..

    -.

    Timeline()-.,JavaScript,.,-,,JavaScript..

    ,TimelineChromeDeveloperTools(.14.4),.-,Memory,,,..-,,,,.

    ChromeDeveloperTools,,,,,.,.115,All()-,..

  • 467

    Memory(),-DOMContentLoadedloaded.

    DOMContentLoaded,CSSJavaScript,.,,-DOMContentLoaded,,,DOMContentLoadedonLoad.

    . 14.4. Google Chrome Timeline

    ,onLoad..,-,-onLoad,.-,.-,.,.-,.

    , - , JavaScript API-, . .

  • 468 14.

    HARJSON,.

    .,-DOM-.

    ,,,.,,-,.,,.,,.

    ,DOM-,,.

    DOM.-DOM.-DOM-DOM,-DOM,.

    ,,-CSSDOM--.,.

    ...

    -,-.200,,--,.

    ,.,,

  • 469

    -,-.,,,,.AJAX-200,-,.,,,.

    ,,,,,-.touchend--300500.,,,touchend.

    : , , - .

    1.ChromeFirefox,-,.:,.

    -,JavaScriptCSS-,JavaScriptCSS.

    -CSS-,,-.,animation-delay.,,,,

    1 ,,-,..

  • 470 14.

    ,,-.

    ,-60/.-16,67.,-16,67.

    ,-,,-,.-,,,,-..,,,,-,,.

    ,...,,,.-,--:-,-(),-,().

    ,,,,YSlowYahoo!PageSpeedGoogle..,--,,-,iPad,-AndroidWii.,--.

    ,-..,100.-.:Wi-Fi,....

  • CSS-

    CSS- 3

    0-0-0 * * {} -

    0-0-1

    E E em, strong 0-1-0myClass , -

    myClass.myClass

    1-0-0#myId , -

    ID myId#myId

    , >, + ~,

    0-0-0

    E F F, ( - ) E

    ol litr td

    E > F F, - E

    ol > lithead > tr

    E + F F, - E, E F

    h1 + p tr.current + tr

    E ~ F F, E -

    li:first-child ~ li

    0-1-0 ,

  • 472 . CSS-

    E[attr] E, attr,

    input[type]

    E[attr="val"] E, attr val

    input[type="checkbox"]

    E[attr~="val"] E, attr -, val

    img[alt~="figure"]

    E[attr^="val"] E, attr val

    a[href^="mailto:"]

    E[attr$="val"] E, attr val

    a[href$=".pdf"]

    E[attr*="val"] E, attr val

    a[href*="://"]

    a[href*="twitter.com"]

    E[attr|="val"] E, attr val - val,

    html[lang|="en"]

    0-1-0 , - E:first-child E, -

    h1:first-child

    E:last-child E,

    p:last-child

    E:only-child E , E -

    li:only-child

    E:first-of-type E, E

    li:first-of-type

    E:last-of-type E, - E

    li:last-of-type

    E:only-of-type E, E -

    h1:only-of-type

    ( )

  • 473CSS- 3

    E:nth-child(n) () E, n- , n , , an + b, a , b , - even odd

    tr:nth-child(odd)

    E:nth-last-child(n) () E, n- , -

    li:nth-last-child(5)

    E:nth-of-type(n) () E, n- ( )

    th:nth-of-type(2)

    E:nth-last-of-type(n) () E, n- - , - E

    E:root E, - , HTML- HTML

    html:root

    E:empty E, E - , , . - ,

    p:empty

    , -

    0-1-0

    - , E:link

    E:visited

    link E, (:link) (:visited)

    a:link

    a:visited

    E:active

    E:hover

    E:focus

    - (-) E -, ,

    a:active

    img:hover

    input:focus

    E:enabled

    E:disabled

    - E, (enabled) (disabled)

    input:enabled

    select:disabled

  • 474 . CSS-

    E:checked - E, - ,

    input[type="radio"]

    :checked

    E:default E, , - ,

    option:default

    E:valid

    E:invalid

    E, (valid) - (invalid), , - pattern type input

    input:valid

    input:invalid

    E:in-range

    E:out-of-range

    E, , - , (:in-range), (:out-of-range)

    input:in-range

    input:out-of-range

    E:required

    E:optional

    E, - (:required), (:optional)

    input:required

    input:optional

    E:read-only

    E:read-write

    E, - (:read-only), - (:read-write), ,

    input:read-only

    input:read-write

    E:target E, -

    URI-div:target

    E:lang(fr) E fr ( -)

    p:lang(fr)

    ?-?-? ( )E:not(exclude) E,

    exclude. :not , -

    div:not([class])

    .foo:not(div)

    0-0-1E::first-line -

    Ep::first-line

    E::first-letter - E

    p::first-letter

    ( )

  • 475 CSS

    E::before - E

    div::before

    E::after - E

    div::after

    E::selection - E,

    *::selection*::-moz-selection

    CSS* ::after :empty

    E ::first-letter :not()

    .class ::first-line :target

    #id E[attribute^=value] :enabled

    E F E[attribute$=value] :disabled

    E > F E[attribute*=value] :checked

    E + F E ~ F :indeterminate4

    E[attribute] :root :default

    E[attribute=value] :last-child :valid

    E[attribute~=value] :only-child :invalid

    E[attribute|=value] :nth-child() :in-range

    :first-child :nth-last-child() :out-of-range

    :link1 :first-of-type :required

    :visited :last-of-type :optional

    :lang() :only-of-type :read-only

    ::before2 :nth-of-type() :read-write

    ::selection3 :nth-last-of-type()

    1 :link:visited-.

    2 IE.

    3 CSSSelectorslevel3,.Firefox-moz-.

    4 -3CSSBasicUserInterfaceModuleLevel3(CSS3UI)specificationCSSSelectorsLevel4.

  • 476 . CSS-

    CSS-

  • 477CSS- 4

    CSS- 4 * , 2E ( ), E 1.someClass , , -

    , someClass1

    #myID , -, myID

    1

    E F , F, -

    E1

    E > F , F, E

    2

    E + F , F, E

    2

    E ~ F , - F, E

    3

    E /foo/ F , F, foo E ( - F, foo E, label)

    4

    E! > F , E, F

    4

    E[foo] E, foo 2E[foo="bar"] E, foo , -

    bar,

    2

    E[foo="bar" i] E, foo , - bar,

    4

    E[foo~="bar"] E, foo , , , - bar

    2

    E[foo^="bar"] E, foo , - bar

    3

    E[foo$="bar"] E, foo , - bar

    3

    E[foo*="bar"] E, foo , - bar

    3

    E[foo|="en"] E, foo , - , , - en

    2

    E:root E, -

    3

  • 478 . CSS-

    E:empty E,

    ( )3

    E:blank E, , -

    4

    E:first-child E,

    2

    E:last-child E, -

    3

    E:only-child E, -

    3

    E:first-of-type E,

    3

    E:last-of-type E, -

    3

    E:only-of-type E,

    3

    E:nth-child(n) E, n-

    3

    E:nth-last-child(n) E, n- ,

    3

    E:nth-of-type(n) E, n-

    3

    E:nth-last-of-type(n)

    E, n- ,

    3

    E:nth-match(n -)

    E, n- ,

    4

    E:nth-last-match(n -)

    E, n- ,

    4

    Grid- F || E E, grid-

    , , - F

    4

    E:nth-column(n) E, , - n- grid-

    4

    E:nth-last-column(n)

    E, , n- grid- , -

    4

    E:any-link E, -

    4

    E:link E, - ,

    1

    E:visited E - ,

    1

    ( )

  • 479CSS- 4

    E:local-link E, -

    ,

    4

    E:local-link(0) E, - , - ,

    4

    E:target target E, , URL-

    3

    E:active E, -

    1

    E:hover E, ,

    2

    E:focus E, -

    2

    E:enabled E, -

    3

    E:disabled E, -

    3

    E:read-only E, -

    3/4

    E:read-write E, , E, contenteditable, true

    3/4

    E:placeholder-shown

    E, -

    3/4

    E:default E, - ,

    3/4

    E:checked E, , -

    3

    E:indeterminate E, - ( , )

    4

    E:valid E, - - ( ) - ,

    3/4

    E:invalid E, , - ,

    3/4

    E:in-range E, - , -

    3/4

    E:out-of-range E, - ,

    3/4

    E:required E - ( )

    3/4

  • 480 . CSS-

    E:optional E -

    ( )3/4

    (drag-and-drop)E:active-drop E,

    E:valid-drop E,

    E:invalid-drop E,

    , -

    , E:not(s1, s2) E,

    s1, s2. CSS Level 3

    3/4

    E:matches(s1, s2) E, s1 / s2

    4

    E:scope scope E,

    4

    E:dir(ltr)E:dir(rtl)

    E -

    4

    E:lang(zh, *-hant) E, - , ( ) - . CSS- 2 (CSS Selectors Level 2) :lang()

    2/4

    (Time-dimensional pseudoclasses)E:current E, -

    4

    E:current(s) E, :current, - s

    4

    E:past E, -

    4

    E:future E, -

    4

    ( )

    - ( Internet Explorer) - . SDK.

    ? API - API- API

    CSS?, ?

    ,

    1. API HTML5, CSS3 JavaScriptCubeeDoo: HTML5

    -

    2. HTML5 HTML5 HTML 4, HTML5 HTML5:

    HTML- , : , -

    3. , HTML5 HTML5 CubeeDoo : , : HTML5

    , HTML5,

    , - HTML 4,

    XHTML HTML5,

    4. - HTML5 ( )typerequired : min maxstepplaceholderpatternreadonlydisabledmaxlengthsizeformautocompletionautofocus

    : : : : : : : : : :

    : URL: : : : : :

    : : :

    : : :

    list

    , ,

    5. , , API HTML5 SVG SVG : SVG SVG CubeeDoo

    / , JavaScript

    6. API HTML5-, ? SQL/

    -

    - (ARIA)

    7. CSS3CSS: CSS : CSS

    CSS

    CSS3 : , n-

    : DOM-

    8. CSS3 CSS rgb() RGBA, , : HSL()CMYK CurrentColor

    , CSS ,

    9. CSS3: , CSSborder-styleborder-colorborder-width CSSbox-sizing

    CSS3border-radius border-radius iPhone CubeeDoo

    CSS : background-size

    width, overflow text-overflow : CubeeDoo

    10. CSS3: , CSS- transition-property transition-duration transition-timing-function transition-delay transition

    CSS3- transform-origin transform 3D- 3D-

    CSS3- ,

    11. CSS -, border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat border-image

    Flexboxflex @supports

    CSS-: JPEG

    12. , : : ?

    :

    WebKit-

    13. , - --

    -,

    14. JPEG- JavaScript

    HTTP-

    . CSS- CSS- 3 CSS CSS-CSS- 4

Recommended

View more >